7c7c70c4d9
- TabNavigation/SubTabContainer: 移除左侧 padding (pl=0) - BusinessStructureCard/BusinessSegmentsCard: 移除 CardBody 左右 padding - BusinessTreeItem: 黑金主题样式优化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
/**
|
|
* 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
|
|
bg={themeColors.bg}
|
|
borderBottom="1px solid"
|
|
borderColor={themeColors.dividerColor}
|
|
borderTopLeftRadius={borderRadius}
|
|
borderTopRightRadius={borderRadius}
|
|
pl={0}
|
|
pr={4}
|
|
py={2}
|
|
flexWrap="wrap"
|
|
gap={2}
|
|
>
|
|
{tabs.map((tab) => (
|
|
<Tab
|
|
key={tab.key}
|
|
color={themeColors.unselectedText}
|
|
borderRadius="full"
|
|
px={4}
|
|
py={2}
|
|
fontSize="sm"
|
|
_selected={{
|
|
bg: themeColors.selectedBg,
|
|
color: themeColors.selectedText,
|
|
fontWeight: 'bold',
|
|
}}
|
|
_hover={{
|
|
bg: 'whiteAlpha.100',
|
|
}}
|
|
>
|
|
<HStack spacing={2}>
|
|
{tab.icon && <Icon as={tab.icon} boxSize={4} />}
|
|
<Text>{tab.name}</Text>
|
|
</HStack>
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
);
|
|
};
|
|
|
|
export default TabNavigation;
|