refactor(TabContainer): 抽取通用 Tab 容器组件

- 新增 src/components/TabContainer/ 通用组件
  - 支持受控/非受控模式
  - 支持多种主题预设(blackGold、default、dark、light)
  - 支持自定义主题颜色和样式配置
  - 使用 TypeScript 实现,类型完整
- 重构 CompanyTabs 使用通用 TabContainer
- 删除 CompanyTabs/TabNavigation.js(逻辑迁移到通用组件)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-11 16:59:17 +08:00
parent 13fa91a998
commit a47e0feed8
6 changed files with 362 additions and 109 deletions

View File

@@ -0,0 +1,49 @@
/**
* TabNavigation 通用导航组件
*
* 渲染 Tab 按钮列表,支持图标 + 文字
*/
import React from 'react';
import { TabList, Tab, HStack, Icon, Text } from '@chakra-ui/react';
import type { TabNavigationProps } from './types';
const TabNavigation: React.FC<TabNavigationProps> = ({
tabs,
themeColors,
borderRadius = 'lg',
}) => {
return (
<TabList
py={4}
bg={themeColors.bg}
borderTopLeftRadius={borderRadius}
borderTopRightRadius={borderRadius}
>
{tabs.map((tab, index) => (
<Tab
key={tab.key}
color={themeColors.unselectedText}
borderRadius="full"
px={4}
py={2}
_selected={{
bg: themeColors.selectedBg,
color: themeColors.selectedText,
}}
_hover={{
color: themeColors.selectedText,
}}
mr={index < tabs.length - 1 ? 2 : 0}
>
<HStack spacing={2}>
{tab.icon && <Icon as={tab.icon} boxSize="18px" />}
<Text fontSize="15px">{tab.name}</Text>
</HStack>
</Tab>
))}
</TabList>
);
};
export default TabNavigation;