From ac7e627b2d09916ea6750aa6db01934617bcdef1 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 17 Dec 2025 10:31:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Company):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=20Tab=20=E7=9A=84=20loading=20=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建共享的 LoadingState 组件（黑金主题）
- DeepAnalysisTab: 使用统一 LoadingState 替换蓝色 Spinner
- FinancialPanorama: 使用 LoadingState 替换 Skeleton
- MarketDataView: 使用 LoadingState 替换自定义 Spinner
- ForecastReport: 使用 LoadingState 替换 Skeleton 骨架屏

所有一级 Tab 现在使用一致的金色 Spinner + 加载提示文案

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../CompanyOverview/DeepAnalysisTab/index.tsx | 10 ++---
 .../components/FinancialPanorama/index.tsx    |  4 +-
 .../components/ForecastReport/index.tsx       | 14 ++----
 src/views/Company/components/LoadingState.tsx | 44 +++++++++++++++++++
 .../components/MarketDataView/index.tsx       | 15 +------
 5 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 src/views/Company/components/LoadingState.tsx

diff --git a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/index.tsx b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/index.tsx
index 4bac2e69..858e6575 100644
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/index.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/index.tsx
@@ -11,9 +11,10 @@
  */
 
 import React, { useMemo } from 'react';
-import { Card, CardBody, Center, VStack, Spinner, Text } from '@chakra-ui/react';
+import { Card, CardBody } from '@chakra-ui/react';
 import { FaBrain, FaBuilding, FaLink, FaHistory } from 'react-icons/fa';
 import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer';
+import LoadingState from '../../LoadingState';
 import { StrategyTab, BusinessTab, ValueChainTab, DevelopmentTab } from './tabs';
 import type { DeepAnalysisTabProps, DeepAnalysisTabKey } from './types';
 
@@ -75,12 +76,7 @@ const DeepAnalysisTab: React.FC<DeepAnalysisTabProps> = ({
             componentProps={{}}
             themePreset="blackGold"
           />
-          <Center h="200px">
-            <VStack spacing={4}>
-              <Spinner size="xl" color="blue.500" />
-              <Text color="gray.400">加载数据中...</Text>
-            </VStack>
-          </Center>
+          <LoadingState message="加载数据中..." height="200px" />
         </CardBody>
       </Card>
     );
diff --git a/src/views/Company/components/FinancialPanorama/index.tsx b/src/views/Company/components/FinancialPanorama/index.tsx
index 4a58701b..9ea925c0 100644
--- a/src/views/Company/components/FinancialPanorama/index.tsx
+++ b/src/views/Company/components/FinancialPanorama/index.tsx
@@ -13,7 +13,6 @@ import {
   Text,
   Alert,
   AlertIcon,
-  Skeleton,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -47,6 +46,7 @@ import { formatUtils } from '@services/financialService';
 
 // 通用组件
 import SubTabContainer, { type SubTabConfig } from '@components/SubTabContainer';
+import LoadingState from '../LoadingState';
 
 // 内部模块导入
 import { useFinancialData, type DataTypeKey } from './hooks';
@@ -278,7 +278,7 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
       <VStack spacing={6} align="stretch">
         {/* 财务全景面板（三列布局：成长能力、盈利与回报、风险与运营） */}
         {loading ? (
-          <Skeleton height="100px" />
+          <LoadingState message="加载财务数据中..." height="300px" />
         ) : (
           <FinancialOverviewPanel
             stockInfo={stockInfo}
diff --git a/src/views/Company/components/ForecastReport/index.tsx b/src/views/Company/components/ForecastReport/index.tsx
index f4eef29d..ea24c5a6 100644
--- a/src/views/Company/components/ForecastReport/index.tsx
+++ b/src/views/Company/components/ForecastReport/index.tsx
@@ -3,15 +3,15 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { Box, SimpleGrid, Skeleton } from '@chakra-ui/react';
+import { Box, SimpleGrid } from '@chakra-ui/react';
 import { stockService } from '@services/eventService';
 import {
   IncomeProfitGrowthChart,
   EpsChart,
   PePegChart,
   DetailTable,
-  ChartCard,
 } from './components';
+import LoadingState from '../LoadingState';
 import { CHART_HEIGHT } from './constants';
 import type { ForecastReportProps, ForecastData } from './types';
 
@@ -49,15 +49,9 @@ const ForecastReport: React.FC<ForecastReportProps> = ({ stockCode: propStockCod
 
   return (
     <Box>
-      {/* 加载骨架屏 */}
+      {/* 加载状态 */}
       {loading && !data && (
-        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={4}>
-          {[1, 2, 3].map((i) => (
-            <ChartCard key={i} title="加载中...">
-              <Skeleton height={`${CHART_HEIGHT}px`} />
-            </ChartCard>
-          ))}
-        </SimpleGrid>
+        <LoadingState message="加载盈利预测数据中..." height="300px" />
       )}
 
       {/* 图表区域 - 3列布局 */}
diff --git a/src/views/Company/components/LoadingState.tsx b/src/views/Company/components/LoadingState.tsx
new file mode 100644
index 00000000..11df6cba
--- /dev/null
+++ b/src/views/Company/components/LoadingState.tsx
@@ -0,0 +1,44 @@
+// src/views/Company/components/LoadingState.tsx
+// 统一的加载状态组件 - 黑金主题
+
+import React from "react";
+import { Center, VStack, Spinner, Text } from "@chakra-ui/react";
+
+// 黑金主题配置
+const THEME = {
+  gold: "#D4AF37",
+  textSecondary: "gray.400",
+};
+
+interface LoadingStateProps {
+  message?: string;
+  height?: string;
+}
+
+/**
+ * 统一的加载状态组件（黑金主题）
+ *
+ * 用于所有一级 Tab 的 loading 状态展示
+ */
+const LoadingState: React.FC<LoadingStateProps> = ({
+  message = "加载中...",
+  height = "300px",
+}) => {
+  return (
+    <Center h={height}>
+      <VStack spacing={4}>
+        <Spinner
+          size="xl"
+          color={THEME.gold}
+          thickness="4px"
+          speed="0.65s"
+        />
+        <Text fontSize="sm" color={THEME.textSecondary}>
+          {message}
+        </Text>
+      </VStack>
+    </Center>
+  );
+};
+
+export default LoadingState;
diff --git a/src/views/Company/components/MarketDataView/index.tsx b/src/views/Company/components/MarketDataView/index.tsx
index 445cc4c1..c67d46e5 100644
--- a/src/views/Company/components/MarketDataView/index.tsx
+++ b/src/views/Company/components/MarketDataView/index.tsx
@@ -6,7 +6,6 @@ import {
   Box,
   Container,
   CardBody,
-  Spinner,
   Center,
   VStack,
   Text,
@@ -39,6 +38,7 @@ import {
   UnusualPanel,
   PledgePanel,
 } from './components/panels';
+import LoadingState from '../LoadingState';
 import type { MarketDataViewProps, RiseAnalysis } from './types';
 
 /**
@@ -163,18 +163,7 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
           {loading ? (
             <ThemedCard theme={theme}>
               <CardBody>
-                <Center h="400px">
-                  <VStack spacing={4}>
-                    <Spinner
-                      thickness="4px"
-                      speed="0.65s"
-                      emptyColor={theme.bgDark}
-                      color={theme.primary}
-                      size="xl"
-                    />
-                    <Text color={theme.textSecondary}>数据加载中...</Text>
-                  </VStack>
-                </Center>
+                <LoadingState message="数据加载中..." height="400px" />
               </CardBody>
             </ThemedCard>
           ) : (