155a921113
新增组件： - TabPanelContainer: 三级容器，统一 loading 状态 + VStack 布局 + 免责声明 - SubTabContainer: 二级导航容器，支持黑金/默认主题预设 重构： - BasicInfoTab: 使用 SubTabContainer 替代原有 Tabs 实现 - DeepAnalysisTab: 拆分为 4 个子 Tab（战略分析/业务结构/产业链/发展历程） - TabContainer: 样式调整，与 SubTabContainer 保持一致 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
/**
|
||
* 深度分析 Tab 主组件
|
||
*
|
||
* 使用 SubTabContainer 二级导航组件，分为 4 个子 Tab：
|
||
* 1. 战略分析 - 核心定位 + 战略分析 + 竞争地位
|
||
* 2. 业务结构 - 业务结构树 + 业务板块详情
|
||
* 3. 产业链 - 产业链分析（独立，含 Sankey 图）
|
||
* 4. 发展历程 - 关键因素 + 时间线
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { Card, CardBody, Center, VStack, Spinner, Text } from '@chakra-ui/react';
|
||
import { FaBrain, FaBuilding, FaLink, FaHistory } from 'react-icons/fa';
|
||
import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer';
|
||
import { StrategyTab, BusinessTab, ValueChainTab, DevelopmentTab } from './tabs';
|
||
import type { DeepAnalysisTabProps } from './types';
|
||
|
||
// 主题配置（与 BasicInfoTab 保持一致）
|
||
const THEME = {
|
||
cardBg: 'gray.900',
|
||
border: 'rgba(212, 175, 55, 0.3)',
|
||
};
|
||
|
||
/**
|
||
* Tab 配置
|
||
*/
|
||
const DEEP_ANALYSIS_TABS: SubTabConfig[] = [
|
||
{ key: 'strategy', name: '战略分析', icon: FaBrain, component: StrategyTab },
|
||
{ key: 'business', name: '业务结构', icon: FaBuilding, component: BusinessTab },
|
||
{ key: 'valueChain', name: '产业链', icon: FaLink, component: ValueChainTab },
|
||
{ key: 'development', name: '发展历程', icon: FaHistory, component: DevelopmentTab },
|
||
];
|
||
|
||
const DeepAnalysisTab: React.FC<DeepAnalysisTabProps> = ({
|
||
comprehensiveData,
|
||
valueChainData,
|
||
keyFactorsData,
|
||
loading,
|
||
cardBg,
|
||
expandedSegments,
|
||
onToggleSegment,
|
||
}) => {
|
||
// 加载状态
|
||
if (loading) {
|
||
return (
|
||
<Center h="200px">
|
||
<VStack spacing={4}>
|
||
<Spinner size="xl" color="blue.500" />
|
||
<Text>加载深度分析数据...</Text>
|
||
</VStack>
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Card bg={THEME.cardBg} shadow="md" border="1px solid" borderColor={THEME.border}>
|
||
<CardBody p={0}>
|
||
<SubTabContainer
|
||
tabs={DEEP_ANALYSIS_TABS}
|
||
componentProps={{
|
||
comprehensiveData,
|
||
valueChainData,
|
||
keyFactorsData,
|
||
cardBg,
|
||
expandedSegments,
|
||
onToggleSegment,
|
||
}}
|
||
themePreset="blackGold"
|
||
/>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default DeepAnalysisTab;
|