From 997724e0b195ea980b018b163e64e13e8daf44e0 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 18 Dec 2025 18:15:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(FinancialPanorama):=20=E4=BC=98=E5=8C=96=20?=
 =?UTF-8?q?loading=20=E7=8A=B6=E6=80=81=EF=BC=8CTabs=20=E7=AB=8B=E5=8D=B3?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 SubTabContainer 的 loading 条件渲染，Tabs 始终可见
- 各 Tab 组件内部处理 loading 状态，显示 Spinner
- 传递 loading 和 loadingTab 到 componentProps
- 修改 BalanceSheetTab、IncomeStatementTab、CashflowTab、
  FinancialMetricsTab、MetricsCategoryTab 支持 loading 属性

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/FinancialPanorama/index.tsx    | 45 ++++++++++---------
 .../tabs/BalanceSheetTab.tsx                  | 13 +++++-
 .../FinancialPanorama/tabs/CashflowTab.tsx    | 13 +++++-
 .../tabs/FinancialMetricsTab.tsx              | 12 +++++
 .../tabs/IncomeStatementTab.tsx               | 13 +++++-
 .../tabs/MetricsCategoryTab.tsx               | 13 +++++-
 6 files changed, 84 insertions(+), 25 deletions(-)

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<FinancialPanoramaProps> = ({ stockCode: propSt
       incomeStatement,
       cashflow,
       financialMetrics,
+      // 加载状态
+      loading,
+      loadingTab,
       // 工具函数
       showMetricChart,
       calculateYoYChange,
@@ -265,6 +268,8 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
       incomeStatement,
       cashflow,
       financialMetrics,
+      loading,
+      loadingTab,
       showMetricChart,
       positiveColor,
       negativeColor,
@@ -302,27 +307,25 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
         )}
 
         {/* 三大财务报表 - 使用 SubTabContainer 二级导航 */}
-        {!loading && stockInfo && (
-          <Card bg="gray.900" shadow="md" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
-            <CardBody p={0}>
-              <SubTabContainer
-                tabs={tabConfigs}
-                componentProps={componentProps}
-                themePreset="blackGold"
-                isLazy
-                onTabChange={handleTabChange}
-                rightElement={
-                  <PeriodSelector
-                    selectedPeriods={selectedPeriods}
-                    onPeriodsChange={setSelectedPeriods}
-                    onRefresh={handleRefresh}
-                    isLoading={loadingTab !== null}
-                  />
-                }
-              />
-            </CardBody>
-          </Card>
-        )}
+        <Card bg="gray.900" shadow="md" border="1px solid" borderColor="rgba(212, 175, 55, 0.3)">
+          <CardBody p={0}>
+            <SubTabContainer
+              tabs={tabConfigs}
+              componentProps={componentProps}
+              themePreset="blackGold"
+              isLazy
+              onTabChange={handleTabChange}
+              rightElement={
+                <PeriodSelector
+                  selectedPeriods={selectedPeriods}
+                  onPeriodsChange={setSelectedPeriods}
+                  onRefresh={handleRefresh}
+                  isLoading={loadingTab !== null || loading}
+                />
+              }
+            />
+          </CardBody>
+        </Card>
 
         {/* 错误提示 */}
         {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<BalanceSheetTabProps> = ({
   balanceSheet,
+  loading,
   showMetricChart,
   calculateYoYChange,
   getCellBackground,
@@ -28,6 +30,15 @@ const BalanceSheetTab: React.FC<BalanceSheetTabProps> = ({
   bgColor,
   hoverBg,
 }) => {
+  // 加载中状态
+  if (loading && (!Array.isArray(balanceSheet) || balanceSheet.length === 0)) {
+    return (
+      <Center py={12}>
+        <Spinner size="lg" color="#D4AF37" thickness="3px" />
+      </Center>
+    );
+  }
+
   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<CashflowTabProps> = ({
   cashflow,
+  loading,
   showMetricChart,
   calculateYoYChange,
   getCellBackground,
@@ -28,6 +30,15 @@ const CashflowTab: React.FC<CashflowTabProps> = ({
   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,
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<FinancialMetricsTabProps> = ({
   financialMetrics,
+  loading,
   showMetricChart,
   calculateYoYChange,
   getCellBackground,
@@ -27,6 +30,15 @@ const FinancialMetricsTab: React.FC<FinancialMetricsTabProps> = ({
   bgColor,
   hoverBg,
 }) => {
+  // 加载中状态
+  if (loading && (!Array.isArray(financialMetrics) || financialMetrics.length === 0)) {
+    return (
+      <Center py={12}>
+        <Spinner size="lg" color="#D4AF37" thickness="3px" />
+      </Center>
+    );
+  }
+
   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<IncomeStatementTabProps> = ({
   incomeStatement,
+  loading,
   showMetricChart,
   calculateYoYChange,
   getCellBackground,
@@ -28,6 +30,15 @@ const IncomeStatementTab: React.FC<IncomeStatementTabProps> = ({
   bgColor,
   hoverBg,
 }) => {
+  // 加载中状态
+  if (loading && (!Array.isArray(incomeStatement) || incomeStatement.length === 0)) {
+    return (
+      <Center py={12}>
+        <Spinner size="lg" color="#D4AF37" thickness="3px" />
+      </Center>
+    );
+  }
+
   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<MetricsCategoryTabProps> = ({
   categoryKey,
   financialMetrics,
+  loading,
   showMetricChart,
   calculateYoYChange,
 }) => {
+  // 加载中状态
+  if (loading && (!Array.isArray(financialMetrics) || financialMetrics.length === 0)) {
+    return (
+      <Center py={12}>
+        <Spinner size="lg" color="#D4AF37" thickness="3px" />
+      </Center>
+    );
+  }
+
   // 数组安全检查
   if (!Array.isArray(financialMetrics) || financialMetrics.length === 0) {
     return (