f3f711cbcf
- 新增 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>
57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
/**
|
||
* TabContainer 常量和主题预设
|
||
*/
|
||
|
||
import type { ThemeColors, ThemePreset } from './types';
|
||
|
||
/**
|
||
* 主题预设配置
|
||
*/
|
||
export const THEME_PRESETS: Record<ThemePreset, Required<ThemeColors>> = {
|
||
// 黑金主题（原 Company 模块风格）
|
||
blackGold: {
|
||
bg: '#1A202C',
|
||
selectedBg: '#C9A961',
|
||
selectedText: '#FFFFFF',
|
||
unselectedText: '#D4AF37',
|
||
dividerColor: 'gray.600',
|
||
},
|
||
// 默认主题（Chakra 风格）
|
||
default: {
|
||
bg: 'white',
|
||
selectedBg: 'blue.500',
|
||
selectedText: 'white',
|
||
unselectedText: 'gray.600',
|
||
dividerColor: 'gray.200',
|
||
},
|
||
// 深色主题
|
||
dark: {
|
||
bg: 'gray.800',
|
||
selectedBg: 'blue.400',
|
||
selectedText: 'white',
|
||
unselectedText: 'gray.300',
|
||
dividerColor: 'gray.600',
|
||
},
|
||
// 浅色主题
|
||
light: {
|
||
bg: 'gray.50',
|
||
selectedBg: 'blue.500',
|
||
selectedText: 'white',
|
||
unselectedText: 'gray.700',
|
||
dividerColor: 'gray.300',
|
||
},
|
||
};
|
||
|
||
/**
|
||
* 默认配置
|
||
*/
|
||
export const DEFAULT_CONFIG = {
|
||
themePreset: 'blackGold' as ThemePreset,
|
||
isLazy: true,
|
||
size: 'lg' as const,
|
||
showDivider: true,
|
||
borderRadius: 'lg',
|
||
shadow: 'lg',
|
||
panelPadding: 0,
|
||
};
|