refactor: BasicInfoTab 拆分为 TypeScript 模块化组件
- 删除旧的 BasicInfoTab.js (~1000行) - 新建 BasicInfoTab/ 目录,拆分为 10 个 TypeScript 文件: - index.tsx: 主组件(可配置 Tab) - config.ts: Tab 配置 + 黑金主题 - utils.ts: 格式化工具函数 - components/: 5 个面板组件 + LoadingState - 主组件支持 enabledTabs、defaultTabIndex、onTabChange - 应用黑金主题,支持懒加载 (isLazy) - 更新 types.ts 添加 ActualControl、Concentration 等类型字段 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/index.tsx
|
||||
// 基本信息 Tab 组件 - 可配置版本(黑金主题)
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanels,
|
||||
Tab,
|
||||
TabPanel,
|
||||
Icon,
|
||||
HStack,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
import { THEME, TAB_CONFIG, getEnabledTabs, type TabConfig } from "./config";
|
||||
import {
|
||||
ShareholderPanel,
|
||||
ManagementPanel,
|
||||
AnnouncementsPanel,
|
||||
BranchesPanel,
|
||||
BusinessInfoPanel,
|
||||
} from "./components";
|
||||
|
||||
// Props 类型定义
|
||||
export interface BasicInfoTabProps {
|
||||
stockCode: string;
|
||||
basicInfo?: any;
|
||||
|
||||
// 可配置项
|
||||
enabledTabs?: string[]; // 指定显示哪些 Tab(通过 key)
|
||||
defaultTabIndex?: number; // 默认选中 Tab
|
||||
onTabChange?: (index: number, tabKey: string) => void;
|
||||
}
|
||||
|
||||
// Tab 组件映射
|
||||
const TAB_COMPONENTS: Record<string, React.FC<any>> = {
|
||||
shareholder: ShareholderPanel,
|
||||
management: ManagementPanel,
|
||||
announcements: AnnouncementsPanel,
|
||||
branches: BranchesPanel,
|
||||
business: BusinessInfoPanel,
|
||||
};
|
||||
|
||||
/**
|
||||
* 基本信息 Tab 组件
|
||||
*
|
||||
* 特性:
|
||||
* - 可配置显示哪些 Tab(enabledTabs)
|
||||
* - 黑金主题
|
||||
* - 懒加载(isLazy)
|
||||
* - 支持 Tab 变更回调
|
||||
*/
|
||||
const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
|
||||
stockCode,
|
||||
basicInfo,
|
||||
enabledTabs,
|
||||
defaultTabIndex = 0,
|
||||
onTabChange,
|
||||
}) => {
|
||||
// 获取启用的 Tab 配置
|
||||
const tabs = getEnabledTabs(enabledTabs);
|
||||
|
||||
// 处理 Tab 变更
|
||||
const handleTabChange = (index: number) => {
|
||||
if (onTabChange && tabs[index]) {
|
||||
onTabChange(index, tabs[index].key);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染单个 Tab 内容
|
||||
const renderTabContent = (tab: TabConfig) => {
|
||||
const Component = TAB_COMPONENTS[tab.key];
|
||||
if (!Component) return null;
|
||||
|
||||
// business Tab 需要 basicInfo,其他需要 stockCode
|
||||
if (tab.key === "business") {
|
||||
return <Component basicInfo={basicInfo} />;
|
||||
}
|
||||
return <Component stockCode={stockCode} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card bg={THEME.cardBg} shadow="md" border="1px solid" borderColor={THEME.border}>
|
||||
<CardBody p={0}>
|
||||
<Tabs
|
||||
isLazy
|
||||
variant="unstyled"
|
||||
defaultIndex={defaultTabIndex}
|
||||
onChange={handleTabChange}
|
||||
>
|
||||
<TabList
|
||||
bg={THEME.bg}
|
||||
borderBottom="1px solid"
|
||||
borderColor={THEME.border}
|
||||
px={4}
|
||||
py={2}
|
||||
flexWrap="wrap"
|
||||
gap={2}
|
||||
>
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
color={THEME.tabUnselected.color}
|
||||
borderRadius="full"
|
||||
px={4}
|
||||
py={2}
|
||||
fontSize="sm"
|
||||
_selected={{
|
||||
bg: THEME.tabSelected.bg,
|
||||
color: THEME.tabSelected.color,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
_hover={{
|
||||
bg: THEME.tableHoverBg,
|
||||
}}
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={tab.icon} boxSize={4} />
|
||||
<Text>{tab.name}</Text>
|
||||
</HStack>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
|
||||
<TabPanels p={4}>
|
||||
{tabs.map((tab) => (
|
||||
<TabPanel key={tab.key} p={0}>
|
||||
{renderTabContent(tab)}
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicInfoTab;
|
||||
|
||||
// 导出配置和工具,供外部使用
|
||||
export { THEME, TAB_CONFIG, getEnabledTabs } from "./config";
|
||||
export * from "./utils";
|
||||
Reference in New Issue
Block a user