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 = ({ componentProps={{}} themePreset="blackGold" /> -
- - - 加载数据中... - -
+ ); 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 = ({ stockCode: propSt {/* 财务全景面板(三列布局:成长能力、盈利与回报、风险与运营) */} {loading ? ( - + ) : ( = ({ stockCode: propStockCod return ( - {/* 加载骨架屏 */} + {/* 加载状态 */} {loading && !data && ( - - {[1, 2, 3].map((i) => ( - - - - ))} - + )} {/* 图表区域 - 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 = ({ + message = "加载中...", + height = "300px", +}) => { + return ( +
+ + + + {message} + + +
+ ); +}; + +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 = ({ stockCode: propStockCod {loading ? ( -
- - - 数据加载中... - -
+
) : (