6a4c475d3a
- 主组件从 Chakra Tabs 迁移到 SubTabContainer - 新增 PeriodSelector 时间选择器组件 - IndustryRankingView 增加深色主题支持 - 拆分出 6 个独立 Tab 组件到 tabs/ 目录 - 类型定义优化，props 改为可选
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
/**
|
|
* 财务概览 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;
|