vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FinancialPanorama): 添加页面骨架屏

Browse Source 
- 创建 FinancialPanoramaSkeleton 组件
- 初始加载时显示完整骨架屏（概览面板、图表、主营业务、Tab）
- 优化加载体验，避免内容闪烁

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 15:13:24 +08:00
parent e71f42b608
commit 27b0e9375a
6 changed files with 810 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/views/Company/components/FinancialPanorama/components/FinancialPanoramaSkeleton.tsx Normal file
View File

@@ -0,0 +1,151 @@
/**
* 财务全景骨架屏组件
*/
import React, { memo } from 'react';
import {
Box,
VStack,
HStack,
Skeleton,
SkeletonText,
SimpleGrid,
Card,
CardBody,
} from '@chakra-ui/react';
// 黑金主题配色
const SKELETON_COLORS = {
startColor: 'rgba(26, 32, 44, 0.6)',
endColor: 'rgba(212, 175, 55, 0.2)',
};
/**
* 财务概览面板骨架屏
*/
const OverviewPanelSkeleton: React.FC = memo(() => (
<Card bg="gray.900" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
<CardBody>
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={6}>
{[1, 2, 3].map((i) => (
<Box key={i}>
<Skeleton
height="20px"
width="100px"
mb={4}
{...SKELETON_COLORS}
/>
<VStack align="stretch" spacing={3}>
{[1, 2, 3, 4].map((j) => (
<HStack key={j} justify="space-between">
<Skeleton height="16px" width="80px" {...SKELETON_COLORS} />
<Skeleton height="16px" width="60px" {...SKELETON_COLORS} />
</HStack>
))}
</VStack>
</Box>
))}
</SimpleGrid>
</CardBody>
</Card>
));
OverviewPanelSkeleton.displayName = 'OverviewPanelSkeleton';
/**
* 图表区域骨架屏
*/
const ChartSkeleton: React.FC = memo(() => (
<Card bg="gray.900" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
<CardBody>
<Skeleton height="20px" width="120px" mb={4} {...SKELETON_COLORS} />
<Skeleton height="200px" borderRadius="md" {...SKELETON_COLORS} />
</CardBody>
</Card>
));
ChartSkeleton.displayName = 'ChartSkeleton';
/**
* 主营业务骨架屏
*/
const MainBusinessSkeleton: React.FC = memo(() => (
<Box>
<Skeleton height="24px" width="100px" mb={4} {...SKELETON_COLORS} />
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
{[1, 2].map((i) => (
<Card key={i} bg="gray.900" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
<CardBody>
<Skeleton height="18px" width="80px" mb={3} {...SKELETON_COLORS} />
<VStack align="stretch" spacing={2}>
{[1, 2, 3].map((j) => (
<HStack key={j} justify="space-between">
<Skeleton height="14px" width="100px" {...SKELETON_COLORS} />
<Skeleton height="14px" width="50px" {...SKELETON_COLORS} />
</HStack>
))}
</VStack>
</CardBody>
</Card>
))}
</SimpleGrid>
</Box>
));
MainBusinessSkeleton.displayName = 'MainBusinessSkeleton';
/**
* Tab 区域骨架屏
*/
const TabSkeleton: React.FC = memo(() => (
<Card bg="gray.900" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
<CardBody p={0}>
{/* Tab 栏 */}
<HStack
spacing={2}
p={3}
borderBottom="1px solid"
borderColor="rgba(212, 175, 55, 0.2)"
overflowX="auto"
>
{[1, 2, 3, 4, 5, 6, 7].map((i) => (
<Skeleton
key={i}
height="32px"
width="80px"
borderRadius="md"
{...SKELETON_COLORS}
/>
))}
</HStack>
{/* Tab 内容 */}
<Box p={4}>
<SkeletonText
noOfLines={8}
spacing={4}
skeletonHeight={4}
{...SKELETON_COLORS}
/>
</Box>
</CardBody>
</Card>
));
TabSkeleton.displayName = 'TabSkeleton';
/**
* 财务全景完整骨架屏
*/
const FinancialPanoramaSkeleton: React.FC = memo(() => (
<VStack spacing={6} align="stretch">
<OverviewPanelSkeleton />
<ChartSkeleton />
<MainBusinessSkeleton />
<TabSkeleton />
</VStack>
));
FinancialPanoramaSkeleton.displayName = 'FinancialPanoramaSkeleton';
export { FinancialPanoramaSkeleton };
export default FinancialPanoramaSkeleton;

374
src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx Normal file
View File

@@ -0,0 +1,374 @@
/**
* 统一财务表格组件 - Ant Design 黑金主题
*
* 支持两种表格类型:
* - metrics: 财务指标表格（7个分类，扁平结构）
* - statement: 财务报表表格（3个报表，分组结构）
*/
import React, { useMemo, memo } from 'react';
import { Box, Text, HStack, Badge as ChakraBadge, Button, Spinner, Center } from '@chakra-ui/react';
import { Table, ConfigProvider, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Eye } from 'lucide-react';
import { formatUtils } from '@services/financialService';
import { BLACK_GOLD_TABLE_THEME, getTableStyles, calculateYoY, getValueByPath, isNegativeIndicator } from '../utils';
import type { MetricConfig, MetricSectionConfig } from '../types';
// ==================== 类型定义 ====================
export type TableType = 'metrics' | 'statement';
export interface UnifiedFinancialTableProps {
/** 表格类型: metrics=指标表格, statement=报表表格 */
type: TableType;
/** 数据数组 */
data: Array<{ period: string; [key: string]: unknown }>;
/** metrics 类型: 指标分类 key */
categoryKey?: string;
/** metrics 类型: 分类标题 */
categoryTitle?: string;
/** metrics 类型: 指标配置数组 */
metrics?: MetricConfig[];
/** statement 类型: 分组配置数组 */
sections?: MetricSectionConfig[];
/** 是否隐藏汇总行的分组标题 */
hideTotalSectionTitle?: boolean;
/** 点击行显示图表回调 */
showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
/** 是否为成长类指标（正负值着色） */
isGrowthCategory?: boolean;
/** 核心指标 keys（用于 cashflow 表格） */
coreMetricKeys?: string[];
/** 加载中 */
loading?: boolean;
}
// 表格行数据类型
interface TableRowData {
key: string;
name: string;
path: string;
isCore?: boolean;
isTotal?: boolean;
isSubtotal?: boolean;
isSection?: boolean;
indent?: number;
[period: string]: unknown;
}
const TABLE_CLASS_NAME = 'unified-financial-table';
// 扩展样式（支持 positive-value, negative-value）
const extendedTableStyles = getTableStyles(TABLE_CLASS_NAME) + `
.${TABLE_CLASS_NAME} .positive-value {
color: #E53E3E;
}
.${TABLE_CLASS_NAME} .negative-value {
color: #48BB78;
}
.${TABLE_CLASS_NAME} .ant-table-tbody > tr.subtotal-row > td {
background: rgba(212, 175, 55, 0.1) !important;
font-weight: 500;
}
`;
// ==================== 组件实现 ====================
const UnifiedFinancialTableInner: React.FC<UnifiedFinancialTableProps> = ({
type,
data,
categoryKey,
categoryTitle,
metrics,
sections,
hideTotalSectionTitle = true,
showMetricChart,
isGrowthCategory = false,
coreMetricKeys = [],
loading = false,
}) => {
// 加载中状态
if (loading && (!Array.isArray(data) || data.length === 0)) {
return (
<Center py={12}>
<Spinner size="lg" color="#D4AF37" thickness="3px" />
</Center>
);
}
// 数据安全检查
if (!Array.isArray(data) || data.length === 0) {
return (
<Box p={4} textAlign="center" color="gray.400">
暂无数据
</Box>
);
}
// 限制显示列数
const maxColumns = type === 'metrics' ? 6 : (type === 'statement' ? 8 : 6);
const displayData = data.slice(0, Math.min(data.length, maxColumns));
// 构建表格数据
const tableData = useMemo(() => {
const rows: TableRowData[] = [];
if (type === 'metrics' && metrics) {
// 财务指标表格: 扁平结构
metrics.forEach((metric) => {
const row: TableRowData = {
key: metric.key,
name: metric.name,
path: metric.path,
isCore: metric.isCore || coreMetricKeys.includes(metric.key),
};
displayData.forEach((item) => {
const value = getValueByPath<number>(item, metric.path);
row[item.period] = value;
});
rows.push(row);
});
} else if (type === 'statement' && sections) {
// 财务报表表格: 分组结构
sections.forEach((section) => {
// 添加分组标题行（可配置隐藏汇总行标题）
const isTotalSection = section.title.includes('总计') || section.title.includes('合计');
if (!isTotalSection || !hideTotalSectionTitle) {
rows.push({
key: `section-${section.key}`,
name: section.title,
path: '',
isSection: true,
});
}
// 添加指标行
section.metrics.forEach((metric) => {
const row: TableRowData = {
key: metric.key,
name: metric.name,
path: metric.path,
isCore: metric.isCore,
isTotal: metric.isTotal || isTotalSection,
isSubtotal: metric.isSubtotal,
indent: metric.isTotal || metric.isSubtotal ? 0 : (metric.name.startsWith('　') ? 2 : 1),
};
displayData.forEach((item) => {
const value = getValueByPath<number>(item, metric.path);
row[item.period] = value;
});
rows.push(row);
});
});
}
return rows;
}, [type, metrics, sections, displayData, data, hideTotalSectionTitle, coreMetricKeys]);
// 计算同比变化
const calcYoY = (
currentValue: number | undefined,
currentPeriod: string,
path: string
): number | null => {
return calculateYoY(data, currentValue, currentPeriod, path, getValueByPath);
};
// 构建列定义
const columns: ColumnsType<TableRowData> = useMemo(() => {
const cols: ColumnsType<TableRowData> = [
// 指标名称列
{
title: type === 'metrics' ? (categoryTitle || '指标') : '项目',
dataIndex: 'name',
key: 'name',
fixed: 'left',
width: type === 'metrics' ? 200 : 250,
render: (name: string, record: TableRowData) => {
if (record.isSection) {
return <Text fontWeight="bold" color="#D4AF37">{name}</Text>;
}
return (
<HStack spacing={2} pl={record.indent ? record.indent * 4 : 0}>
<Text
fontWeight={record.isTotal || record.isSubtotal ? 'bold' : type === 'metrics' ? 'medium' : 'normal'}
fontSize={type === 'metrics' ? 'xs' : undefined}
>
{name}
</Text>
{record.isCore && (
<ChakraBadge size="sm" bg="rgba(212, 175, 55, 0.2)" color="#D4AF37">
核心
</ChakraBadge>
)}
</HStack>
);
},
},
// 各期数据列
...displayData.map((item) => ({
title: (
<Box textAlign="center">
<Text fontSize="xs">{formatUtils.getReportType(item.period)}</Text>
<Text fontSize="2xs" color="gray.400">{item.period.substring(0, 10)}</Text>
</Box>
),
dataIndex: item.period,
key: item.period,
width: type === 'metrics' ? 100 : 120,
align: 'right' as const,
render: (value: number | undefined, record: TableRowData) => {
if (record.isSection) return null;
const yoy = calcYoY(value, item.period, record.path);
const isNegative = isNegativeIndicator(record.key);
// 值格式化
let formattedValue: string;
let valueColorClass = '';
if (type === 'metrics') {
formattedValue = value?.toFixed(2) || '-';
// 成长类指标: 正值红色，负值绿色
if (isGrowthCategory) {
valueColorClass = value !== undefined && value > 0
? 'positive-value'
: value !== undefined && value < 0
? 'negative-value'
: '';
}
} else {
// 财务报表：使用大数格式化
const isEPS = record.key.includes('eps');
formattedValue = isEPS ? (value?.toFixed(3) || '-') : formatUtils.formatLargeNumber(value, 0);
// 利润表负值着色
if (value !== undefined && value < 0) {
valueColorClass = 'negative-value';
}
}
// 同比变化颜色（负向指标逻辑反转）
const changeColor = isNegative
? (yoy && yoy > 0 ? 'negative-change' : 'positive-change')
: (yoy && yoy > 0 ? 'positive-change' : 'negative-change');
// 显示同比箭头的阈值
const yoyThreshold = type === 'metrics' ? 20 : 30;
const showYoyArrow = yoy !== null && Math.abs(yoy) > yoyThreshold && !record.isTotal;
return (
<Tooltip
title={
<Box>
<Text>{record.name}: {type === 'metrics' ? (value?.toFixed(2) || '-') : formatUtils.formatLargeNumber(value)}</Text>
{yoy !== null && <Text>同比: {yoy.toFixed(2)}%</Text>}
</Box>
}
>
<Box position="relative">
<Text
fontSize={type === 'metrics' ? 'xs' : undefined}
fontWeight={record.isTotal || record.isSubtotal ? 'bold' : 'normal'}
className={valueColorClass || undefined}
>
{formattedValue}
</Text>
{showYoyArrow && value !== undefined && Math.abs(value) > 0.01 && (
<Text
position="absolute"
top="-12px"
right="0"
fontSize="10px"
className={changeColor}
>
{yoy > 0 ? '↑' : '↓'}{type === 'statement' && Math.abs(yoy) < 100 ? `${Math.abs(yoy).toFixed(0)}%` : ''}
</Text>
)}
</Box>
</Tooltip>
);
},
})),
// 操作列
{
title: '',
key: 'action',
width: type === 'metrics' ? 40 : 80,
fixed: 'right',
render: (_: unknown, record: TableRowData) => {
if (record.isSection) return null;
if (type === 'metrics') {
return (
<Eye
size={14}
color="#D4AF37"
style={{ cursor: 'pointer', opacity: 0.7 }}
onClick={(e) => {
e.stopPropagation();
showMetricChart(record.name, record.key, data, record.path);
}}
/>
);
}
return (
<Button
size="xs"
variant="outline"
color="#D4AF37"
borderColor="#D4AF37"
_hover={{ bg: 'rgba(212, 175, 55, 0.2)' }}
onClick={(e) => {
e.stopPropagation();
showMetricChart(record.name, record.key, data, record.path);
}}
>
趋势
</Button>
);
},
},
];
return cols;
}, [type, displayData, data, showMetricChart, categoryTitle, isGrowthCategory]);
return (
<Box className={TABLE_CLASS_NAME}>
<style>{extendedTableStyles}</style>
<ConfigProvider theme={BLACK_GOLD_TABLE_THEME}>
<Table
columns={columns}
dataSource={tableData}
pagination={false}
size="small"
scroll={{ x: 'max-content' }}
rowClassName={(record) => {
if (record.isSection) return 'section-header';
if (record.isTotal) return 'total-row';
if (record.isSubtotal) return 'subtotal-row';
return '';
}}
onRow={(record) => ({
onClick: () => {
if (!record.isSection) {
showMetricChart(record.name, record.key, data, record.path);
}
},
style: { cursor: record.isSection ? 'default' : 'pointer' },
})}
locale={{ emptyText: '暂无数据' }}
/>
</ConfigProvider>
</Box>
);
};
export const UnifiedFinancialTable = memo(UnifiedFinancialTableInner);
export default UnifiedFinancialTable;

1
src/views/Company/components/FinancialPanorama/components/index.ts
View File

@@ -17,3 +17,4 @@ export { StockComparison } from './StockComparison';
export { ComparisonAnalysis } from './ComparisonAnalysis';
export { MetricChartModal } from './MetricChartModal';
export type { MetricChartModalProps } from './MetricChartModal';
export { FinancialPanoramaSkeleton } from './FinancialPanoramaSkeleton';

27
src/views/Company/components/FinancialPanorama/index.tsx
View File

@@ -30,7 +30,6 @@ import {
// 通用组件
import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer';
import LoadingState from '../LoadingState';
// 内部模块导入
import { useFinancialData, type DataTypeKey } from './hooks';
@@ -42,6 +41,7 @@ import {
MainBusinessAnalysis,
ComparisonAnalysis,
MetricChartModal,
FinancialPanoramaSkeleton,
} from './components';
import {
BalanceSheetTab,
@@ -172,26 +172,31 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
]
);
// 初始加载显示骨架屏
if (loading && !stockInfo) {
return (
<Container maxW="container.xl" py={5}>
<FinancialPanoramaSkeleton />
</Container>
);
}
return (
<Container maxW="container.xl" py={5}>
<VStack spacing={6} align="stretch">
{/* 财务全景面板（三列布局：成长能力、盈利与回报、风险与运营） */}
{loading ? (
<LoadingState message="加载财务数据中..." height="300px" variant="skeleton" skeletonRows={6} />
) : (
<FinancialOverviewPanel
stockInfo={stockInfo}
financialMetrics={financialMetrics}
/>
)}
<FinancialOverviewPanel
stockInfo={stockInfo}
financialMetrics={financialMetrics}
/>
{/* 营收与利润趋势 */}
{!loading && comparison && comparison.length > 0 && (
{comparison && comparison.length > 0 && (
<ComparisonAnalysis comparison={comparison} />
)}
{/* 主营业务 */}
{!loading && stockInfo && (
{stockInfo && (
<Box>
<Text fontSize="lg" fontWeight="bold" mb={4} color="#D4AF37">
主营业务

264
src/views/Company/components/FinancialPanorama/tabs/UnifiedTabs.tsx Normal file
View File

@@ -0,0 +1,264 @@
/**
* 统一的财务 Tab 组件
*
* 使用 UnifiedFinancialTable 实现所有 10 个财务表格:
* - 7 个财务指标分类 Tab
* - 3 个财务报表 Tab
*/
import React, { memo } from 'react';
import { UnifiedFinancialTable } from '../components/UnifiedFinancialTable';
import {
FINANCIAL_METRICS_CATEGORIES,
CURRENT_ASSETS_METRICS,
NON_CURRENT_ASSETS_METRICS,
TOTAL_ASSETS_METRICS,
CURRENT_LIABILITIES_METRICS,
NON_CURRENT_LIABILITIES_METRICS,
TOTAL_LIABILITIES_METRICS,
EQUITY_METRICS,
INCOME_STATEMENT_SECTIONS,
CASHFLOW_METRICS,
} from '../constants';
import type { FinancialMetricsData, BalanceSheetData, IncomeStatementData, CashflowData } from '../types';
// ==================== 通用 Props 类型 ====================
/** 财务指标 Tab Props */
export interface MetricsTabProps {
financialMetrics: FinancialMetricsData[];
loading?: boolean;
loadingTab?: string | null;
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;
}
/** 资产负债表 Tab Props */
export interface BalanceSheetTabProps {
balanceSheet: BalanceSheetData[];
loading?: boolean;
loadingTab?: string | null;
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;
}
/** 利润表 Tab Props */
export interface IncomeStatementTabProps {
incomeStatement: IncomeStatementData[];
loading?: boolean;
loadingTab?: string | null;
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;
}
/** 现金流量表 Tab Props */
export interface CashflowTabProps {
cashflow: CashflowData[];
loading?: boolean;
loadingTab?: string | null;
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;
}
// ==================== 财务指标 Tab (7个) ====================
/** 盈利能力 Tab */
export const ProfitabilityTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.profitability;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="profitability"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
/>
);
});
ProfitabilityTab.displayName = 'ProfitabilityTab';
/** 每股指标 Tab */
export const PerShareTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.perShare;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="perShare"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
/>
);
});
PerShareTab.displayName = 'PerShareTab';
/** 成长能力 Tab */
export const GrowthTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.growth;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="growth"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
isGrowthCategory
/>
);
});
GrowthTab.displayName = 'GrowthTab';
/** 运营效率 Tab */
export const OperationalTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.operational;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="operational"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
/>
);
});
OperationalTab.displayName = 'OperationalTab';
/** 偿债能力 Tab */
export const SolvencyTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.solvency;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="solvency"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
/>
);
});
SolvencyTab.displayName = 'SolvencyTab';
/** 费用率 Tab */
export const ExpenseTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.expense;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="expense"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
/>
);
});
ExpenseTab.displayName = 'ExpenseTab';
/** 现金流指标 Tab */
export const CashflowMetricsTab = memo<MetricsTabProps>(({ financialMetrics, loading, showMetricChart }) => {
const category = FINANCIAL_METRICS_CATEGORIES.cashflow;
return (
<UnifiedFinancialTable
type="metrics"
data={financialMetrics}
categoryKey="cashflow"
categoryTitle={category.title}
metrics={category.metrics}
showMetricChart={showMetricChart}
loading={loading}
/>
);
});
CashflowMetricsTab.displayName = 'CashflowMetricsTab';
// ==================== 财务报表 Tab (3个) ====================
// 资产负债表分组配置
const BALANCE_SHEET_SECTIONS = [
CURRENT_ASSETS_METRICS,
NON_CURRENT_ASSETS_METRICS,
TOTAL_ASSETS_METRICS,
CURRENT_LIABILITIES_METRICS,
NON_CURRENT_LIABILITIES_METRICS,
TOTAL_LIABILITIES_METRICS,
EQUITY_METRICS,
];
/** 资产负债表 Tab */
export const BalanceSheetTab = memo<BalanceSheetTabProps>(({ balanceSheet, loading, showMetricChart }) => (
<UnifiedFinancialTable
type="statement"
data={balanceSheet}
sections={BALANCE_SHEET_SECTIONS}
showMetricChart={showMetricChart}
loading={loading}
/>
));
BalanceSheetTab.displayName = 'BalanceSheetTab';
/** 利润表 Tab */
export const IncomeStatementTab = memo<IncomeStatementTabProps>(({ incomeStatement, loading, showMetricChart }) => (
<UnifiedFinancialTable
type="statement"
data={incomeStatement}
sections={INCOME_STATEMENT_SECTIONS}
hideTotalSectionTitle={false}
showMetricChart={showMetricChart}
loading={loading}
/>
));
IncomeStatementTab.displayName = 'IncomeStatementTab';
// 现金流量表配置（转换为 sections 格式）
const CASHFLOW_SECTIONS = [{
title: '现金流量',
key: 'cashflow',
metrics: CASHFLOW_METRICS.map(m => ({
...m,
isCore: ['operating_net', 'free_cash_flow'].includes(m.key),
})),
}];
/** 现金流量表 Tab */
export const CashflowTab = memo<CashflowTabProps>(({ cashflow, loading, showMetricChart }) => (
<UnifiedFinancialTable
type="statement"
data={cashflow}
sections={CASHFLOW_SECTIONS}
hideTotalSectionTitle
showMetricChart={showMetricChart}
loading={loading}
/>
));
CashflowTab.displayName = 'CashflowTab';

4
src/views/Company/components/StockQuoteCard/hooks/useStockQuoteData.ts
View File

@@ -126,6 +126,10 @@ export const useStockQuoteData = (stockCode?: string): UseStockQuoteDataResult =
return;
}
// 立即清空旧数据，触发骨架屏显示
setQuoteData(null);
setBasicInfo(null);
const controller = new AbortController();
let isCancelled = false;