diff --git a/src/views/Company/components/FinancialPanorama/index.tsx b/src/views/Company/components/FinancialPanorama/index.tsx index 9ea925c0..6e0dd619 100644 --- a/src/views/Company/components/FinancialPanorama/index.tsx +++ b/src/views/Company/components/FinancialPanorama/index.tsx @@ -250,6 +250,9 @@ const FinancialPanorama: React.FC = ({ stockCode: propSt incomeStatement, cashflow, financialMetrics, + // 加载状态 + loading, + loadingTab, // 工具函数 showMetricChart, calculateYoYChange, @@ -265,6 +268,8 @@ const FinancialPanorama: React.FC = ({ stockCode: propSt incomeStatement, cashflow, financialMetrics, + loading, + loadingTab, showMetricChart, positiveColor, negativeColor, @@ -302,27 +307,25 @@ const FinancialPanorama: React.FC = ({ stockCode: propSt )} {/* 三大财务报表 - 使用 SubTabContainer 二级导航 */} - {!loading && stockInfo && ( - - - - } - /> - - - )} + + + + } + /> + + {/* 错误提示 */} {error && ( diff --git a/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx index 9257f1a9..a35e4022 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/BalanceSheetTab.tsx @@ -3,12 +3,13 @@ */ import React from 'react'; -import { Box, VStack, HStack, Heading, Badge, Text } from '@chakra-ui/react'; +import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react'; import { BalanceSheetTable } from '../components'; import type { BalanceSheetData } from '../types'; export interface BalanceSheetTabProps { balanceSheet: BalanceSheetData[]; + 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; @@ -20,6 +21,7 @@ export interface BalanceSheetTabProps { const BalanceSheetTab: React.FC = ({ balanceSheet, + loading, showMetricChart, calculateYoYChange, getCellBackground, @@ -28,6 +30,15 @@ const BalanceSheetTab: React.FC = ({ bgColor, hoverBg, }) => { + // 加载中状态 + if (loading && (!Array.isArray(balanceSheet) || balanceSheet.length === 0)) { + return ( +
+ +
+ ); + } + const tableProps = { showMetricChart, calculateYoYChange, diff --git a/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx index b03d7c9e..5d0cda91 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/CashflowTab.tsx @@ -3,12 +3,13 @@ */ import React from 'react'; -import { Box, VStack, HStack, Heading, Badge, Text } from '@chakra-ui/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; @@ -20,6 +21,7 @@ export interface CashflowTabProps { const CashflowTab: React.FC = ({ cashflow, + loading, showMetricChart, calculateYoYChange, getCellBackground, @@ -28,6 +30,15 @@ const CashflowTab: React.FC = ({ bgColor, hoverBg, }) => { + // 加载中状态 + if (loading && (!Array.isArray(cashflow) || cashflow.length === 0)) { + return ( +
+ +
+ ); + } + const tableProps = { showMetricChart, calculateYoYChange, diff --git a/src/views/Company/components/FinancialPanorama/tabs/FinancialMetricsTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/FinancialMetricsTab.tsx index c8f209e1..e3ae7c17 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/FinancialMetricsTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/FinancialMetricsTab.tsx @@ -3,11 +3,13 @@ */ import React from 'react'; +import { Spinner, Center } from '@chakra-ui/react'; import { FinancialMetricsTable } from '../components'; import type { FinancialMetricsData } from '../types'; export interface FinancialMetricsTabProps { financialMetrics: FinancialMetricsData[]; + 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; @@ -19,6 +21,7 @@ export interface FinancialMetricsTabProps { const FinancialMetricsTab: React.FC = ({ financialMetrics, + loading, showMetricChart, calculateYoYChange, getCellBackground, @@ -27,6 +30,15 @@ const FinancialMetricsTab: React.FC = ({ bgColor, hoverBg, }) => { + // 加载中状态 + if (loading && (!Array.isArray(financialMetrics) || financialMetrics.length === 0)) { + return ( +
+ +
+ ); + } + const tableProps = { showMetricChart, calculateYoYChange, diff --git a/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx index 52223625..b1af31b9 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/IncomeStatementTab.tsx @@ -3,12 +3,13 @@ */ import React from 'react'; -import { Box, VStack, HStack, Heading, Badge, Text } from '@chakra-ui/react'; +import { Box, VStack, HStack, Heading, Badge, Text, Spinner, Center } from '@chakra-ui/react'; import { IncomeStatementTable } from '../components'; import type { IncomeStatementData } from '../types'; export interface IncomeStatementTabProps { incomeStatement: IncomeStatementData[]; + 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; @@ -20,6 +21,7 @@ export interface IncomeStatementTabProps { const IncomeStatementTab: React.FC = ({ incomeStatement, + loading, showMetricChart, calculateYoYChange, getCellBackground, @@ -28,6 +30,15 @@ const IncomeStatementTab: React.FC = ({ bgColor, hoverBg, }) => { + // 加载中状态 + if (loading && (!Array.isArray(incomeStatement) || incomeStatement.length === 0)) { + return ( +
+ +
+ ); + } + const tableProps = { showMetricChart, calculateYoYChange, diff --git a/src/views/Company/components/FinancialPanorama/tabs/MetricsCategoryTab.tsx b/src/views/Company/components/FinancialPanorama/tabs/MetricsCategoryTab.tsx index b224e1d0..8b4d38d2 100644 --- a/src/views/Company/components/FinancialPanorama/tabs/MetricsCategoryTab.tsx +++ b/src/views/Company/components/FinancialPanorama/tabs/MetricsCategoryTab.tsx @@ -4,7 +4,7 @@ */ import React, { useMemo } from 'react'; -import { Box, Text, HStack, Badge as ChakraBadge } from '@chakra-ui/react'; +import { Box, Text, HStack, Badge as ChakraBadge, Spinner, Center } from '@chakra-ui/react'; import { Table, ConfigProvider, Tooltip } from 'antd'; import type { ColumnsType } from 'antd/es/table'; import { Eye } from 'lucide-react'; @@ -86,6 +86,7 @@ const tableStyles = ` export interface MetricsCategoryTabProps { categoryKey: CategoryKey; financialMetrics: FinancialMetricsData[]; + 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; @@ -107,9 +108,19 @@ interface TableRowData { const MetricsCategoryTab: React.FC = ({ categoryKey, financialMetrics, + loading, showMetricChart, calculateYoYChange, }) => { + // 加载中状态 + if (loading && (!Array.isArray(financialMetrics) || financialMetrics.length === 0)) { + return ( +
+ +
+ ); + } + // 数组安全检查 if (!Array.isArray(financialMetrics) || financialMetrics.length === 0) { return (