ac7e627b2d
- 创建共享的 LoadingState 组件（黑金主题） - DeepAnalysisTab: 使用统一 LoadingState 替换蓝色 Spinner - FinancialPanorama: 使用 LoadingState 替换 Skeleton - MarketDataView: 使用 LoadingState 替换自定义 Spinner - ForecastReport: 使用 LoadingState 替换 Skeleton 骨架屏 所有一级 Tab 现在使用一致的金色 Spinner + 加载提示文案 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
/**
|
||
* 深度分析 Tab 主组件
|
||
*
|
||
* 使用 SubTabContainer 二级导航组件，分为 4 个子 Tab：
|
||
* 1. 战略分析 - 核心定位 + 战略分析 + 竞争地位
|
||
* 2. 业务结构 - 业务结构树 + 业务板块详情
|
||
* 3. 产业链 - 产业链分析（独立，含 Sankey 图）
|
||
* 4. 发展历程 - 关键因素 + 时间线
|
||
*
|
||
* 支持懒加载：通过 activeTab 和 onTabChange 实现按需加载数据
|
||
*/
|
||
|
||
import React, { useMemo } from 'react';
|
||
import { Card, CardBody } from '@chakra-ui/react';
|
||
import { FaBrain, FaBuilding, FaLink, FaHistory } from 'react-icons/fa';
|
||
import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer';
|
||
import LoadingState from '../../LoadingState';
|
||
import { StrategyTab, BusinessTab, ValueChainTab, DevelopmentTab } from './tabs';
|
||
import type { DeepAnalysisTabProps, DeepAnalysisTabKey } 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 },
|
||
];
|
||
|
||
/**
|
||
* Tab key 到 index 的映射
|
||
*/
|
||
const TAB_KEY_TO_INDEX: Record<DeepAnalysisTabKey, number> = {
|
||
strategy: 0,
|
||
business: 1,
|
||
valueChain: 2,
|
||
development: 3,
|
||
};
|
||
|
||
const DeepAnalysisTab: React.FC<DeepAnalysisTabProps> = ({
|
||
comprehensiveData,
|
||
valueChainData,
|
||
keyFactorsData,
|
||
industryRankData,
|
||
loading,
|
||
cardBg,
|
||
expandedSegments,
|
||
onToggleSegment,
|
||
activeTab,
|
||
onTabChange,
|
||
}) => {
|
||
// 计算当前 Tab 索引（受控模式）
|
||
const currentIndex = useMemo(() => {
|
||
if (activeTab) {
|
||
return TAB_KEY_TO_INDEX[activeTab] ?? 0;
|
||
}
|
||
return undefined; // 非受控模式
|
||
}, [activeTab]);
|
||
|
||
// 加载状态
|
||
if (loading) {
|
||
return (
|
||
<Card bg={THEME.cardBg} shadow="md" border="1px solid" borderColor={THEME.border}>
|
||
<CardBody p={0}>
|
||
<SubTabContainer
|
||
tabs={DEEP_ANALYSIS_TABS}
|
||
index={currentIndex}
|
||
onTabChange={onTabChange}
|
||
componentProps={{}}
|
||
themePreset="blackGold"
|
||
/>
|
||
<LoadingState message="加载数据中..." height="200px" />
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Card bg={THEME.cardBg} shadow="md" border="1px solid" borderColor={THEME.border}>
|
||
<CardBody p={0}>
|
||
<SubTabContainer
|
||
tabs={DEEP_ANALYSIS_TABS}
|
||
index={currentIndex}
|
||
onTabChange={onTabChange}
|
||
componentProps={{
|
||
comprehensiveData,
|
||
valueChainData,
|
||
keyFactorsData,
|
||
industryRankData,
|
||
cardBg,
|
||
expandedSegments,
|
||
onToggleSegment,
|
||
}}
|
||
themePreset="blackGold"
|
||
/>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default DeepAnalysisTab;
|