refactor(FinancialPanorama): 重构为 SubTabContainer 二级导航
- 主组件从 Chakra Tabs 迁移到 SubTabContainer - 新增 PeriodSelector 时间选择器组件 - IndustryRankingView 增加深色主题支持 - 拆分出 6 个独立 Tab 组件到 tabs/ 目录 - 类型定义优化,props 改为可选
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 财务概览 Tab
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { VStack } from '@chakra-ui/react';
|
||||
import { ComparisonAnalysis, FinancialMetricsTable } from '../components';
|
||||
import type { FinancialMetricsData, ComparisonData } from '../types';
|
||||
|
||||
export interface OverviewTabProps {
|
||||
comparison: ComparisonData[];
|
||||
financialMetrics: FinancialMetricsData[];
|
||||
showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
|
||||
calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
|
||||
getCellBackground: (change: number, intensity: number) => string;
|
||||
positiveColor: string;
|
||||
negativeColor: string;
|
||||
bgColor: string;
|
||||
hoverBg: string;
|
||||
}
|
||||
|
||||
const OverviewTab: React.FC<OverviewTabProps> = ({
|
||||
comparison,
|
||||
financialMetrics,
|
||||
showMetricChart,
|
||||
calculateYoYChange,
|
||||
getCellBackground,
|
||||
positiveColor,
|
||||
negativeColor,
|
||||
bgColor,
|
||||
hoverBg,
|
||||
}) => {
|
||||
const tableProps = {
|
||||
showMetricChart,
|
||||
calculateYoYChange,
|
||||
getCellBackground,
|
||||
positiveColor,
|
||||
negativeColor,
|
||||
bgColor,
|
||||
hoverBg,
|
||||
};
|
||||
|
||||
return (
|
||||
<VStack spacing={4} align="stretch">
|
||||
<ComparisonAnalysis comparison={comparison} />
|
||||
<FinancialMetricsTable data={financialMetrics} {...tableProps} />
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default OverviewTab;
|
||||
Reference in New Issue
Block a user