90e2a48d66
- 各 Panel 组件适配新的 hooks 参数格式 - 新增 BasicInfoTabSkeleton 骨架屏组件 - 新增 CompanyOverviewNavSkeleton 导航骨架屏组件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
// src/views/Company/components/CompanyOverview/BasicInfoTab/index.tsx
|
||
// 基本信息 Tab 组件 - 使用 SubTabContainer 通用组件
|
||
|
||
import React, { useMemo } from "react";
|
||
import { Card, CardBody } from "@chakra-ui/react";
|
||
import SubTabContainer, { type SubTabConfig } from "@components/SubTabContainer";
|
||
|
||
import { THEME, TAB_CONFIG, getEnabledTabs } from "./config";
|
||
import {
|
||
ShareholderPanel,
|
||
ManagementPanel,
|
||
AnnouncementsPanel,
|
||
BranchesPanel,
|
||
BusinessInfoPanel,
|
||
} from "./components";
|
||
|
||
// Props 类型定义
|
||
export interface BasicInfoTabProps {
|
||
stockCode: string;
|
||
|
||
// 可配置项
|
||
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,
|
||
};
|
||
|
||
/**
|
||
* 构建 SubTabContainer 所需的 tabs 配置
|
||
*/
|
||
const buildTabsConfig = (enabledKeys?: string[]): SubTabConfig[] => {
|
||
const enabledTabs = getEnabledTabs(enabledKeys);
|
||
return enabledTabs.map((tab) => ({
|
||
key: tab.key,
|
||
name: tab.name,
|
||
icon: tab.icon,
|
||
component: TAB_COMPONENTS[tab.key],
|
||
}));
|
||
};
|
||
|
||
/**
|
||
* 基本信息 Tab 组件
|
||
*
|
||
* 特性：
|
||
* - 使用 SubTabContainer 通用组件
|
||
* - 可配置显示哪些 Tab（enabledTabs）
|
||
* - 黑金主题
|
||
* - 懒加载
|
||
* - 支持 Tab 变更回调
|
||
*/
|
||
const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
|
||
stockCode,
|
||
enabledTabs,
|
||
defaultTabIndex = 0,
|
||
onTabChange,
|
||
}) => {
|
||
// 构建 tabs 配置（缓存避免重复计算）
|
||
const tabs = useMemo(() => buildTabsConfig(enabledTabs), [enabledTabs]);
|
||
|
||
return (
|
||
<Card bg="gray.900" shadow="md" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
|
||
<CardBody p={0}>
|
||
<SubTabContainer
|
||
tabs={tabs}
|
||
componentProps={{ stockCode }}
|
||
defaultIndex={defaultTabIndex}
|
||
onTabChange={onTabChange}
|
||
themePreset="blackGold"
|
||
size="sm"
|
||
/>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default BasicInfoTab;
|
||
|
||
// 导出配置和工具，供外部使用
|
||
export { THEME, TAB_CONFIG, getEnabledTabs } from "./config";
|
||
export * from "./utils";
|