41da6fa372
- MetricsCategoryTab: 使用共享主题，主组件和 7 个子组件添加 memo - BalanceSheetTab: 添加 memo - IncomeStatementTab: 添加 memo - CashflowTab: 添加 memo - FinancialMetricsTab: 添加 memo - 减少不必要的重渲染 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
/**
|
||
* 现金流量表 Tab
|
||
*/
|
||
|
||
import React, { memo } from 'react';
|
||
import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react';
|
||
import { CashflowTable } from '../components';
|
||
import type { CashflowData } from '../types';
|
||
|
||
export interface CashflowTabProps {
|
||
cashflow: CashflowData[];
|
||
loading?: boolean;
|
||
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 CashflowTabInner: React.FC<CashflowTabProps> = ({
|
||
cashflow,
|
||
loading,
|
||
showMetricChart,
|
||
calculateYoYChange,
|
||
getCellBackground,
|
||
positiveColor,
|
||
negativeColor,
|
||
bgColor,
|
||
hoverBg,
|
||
}) => {
|
||
// 加载中状态
|
||
if (loading && (!Array.isArray(cashflow) || cashflow.length === 0)) {
|
||
return (
|
||
<Center py={12}>
|
||
<Spinner size="lg" color="#D4AF37" thickness="3px" />
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
const tableProps = {
|
||
showMetricChart,
|
||
calculateYoYChange,
|
||
getCellBackground,
|
||
positiveColor,
|
||
negativeColor,
|
||
bgColor,
|
||
hoverBg,
|
||
};
|
||
|
||
return (
|
||
<Box>
|
||
<VStack align="stretch" spacing={2} mb={4}>
|
||
<HStack justify="space-between">
|
||
<Heading size="md" color="#D4AF37">现金流量表</Heading>
|
||
<HStack spacing={2}>
|
||
<Badge bg="rgba(212, 175, 55, 0.2)" color="#D4AF37">
|
||
显示最近{Math.min(cashflow.length, 8)}期
|
||
</Badge>
|
||
<Text fontSize="sm" color="gray.400">
|
||
红涨绿跌 | 同比变化
|
||
</Text>
|
||
</HStack>
|
||
</HStack>
|
||
<Text fontSize="xs" color="gray.500">
|
||
提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出
|
||
</Text>
|
||
</VStack>
|
||
<CashflowTable data={cashflow} {...tableProps} />
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
const CashflowTab = memo(CashflowTabInner);
|
||
export default CashflowTab;
|