From bc2b6ae41c95c7322fbd42adc654304105c13911 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 17 Dec 2025 10:34:36 +0800 Subject: [PATCH] =?UTF-8?q?fix(MarketDataView):=20loading=20=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E8=89=B2=E6=94=B9=E4=B8=BA=E6=B7=B1=E8=89=B2=E4=B8=8E?= =?UTF-8?q?=E6=95=B4=E4=BD=93=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除白色 ThemedCard 包装 - 使用 gray.900 背景 + 金色边框 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/views/Company/STRUCTURE.md | 214 ++++++++++++------ .../components/MarketDataView/index.tsx | 17 +- 2 files changed, 150 insertions(+), 81 deletions(-) diff --git a/src/views/Company/STRUCTURE.md b/src/views/Company/STRUCTURE.md index 1e06cbdf..e247fa7d 100644 --- a/src/views/Company/STRUCTURE.md +++ b/src/views/Company/STRUCTURE.md @@ -1,6 +1,6 @@ # Company 目录结构说明 -> 最后更新：2025-12-16 +> 最后更新：2025-12-17 ## 目录结构 @@ -8,6 +8,7 @@ src/views/Company/ ├── index.js # 页面入口（纯组合层） ├── STRUCTURE.md # 本文档 +├── LoadingState.tsx # 通用加载状态组件 │ ├── components/ # UI 组件 │ │ @@ -16,19 +17,29 @@ src/views/Company/ │ │ └── SearchBar.js # 股票搜索栏 │ │ │ ├── CompanyTabs/ # Tab 切换容器 -│ │ ├── index.js # Tab 容器（状态管理 + 内容渲染） -│ │ └── TabNavigation.js # Tab 导航栏 +│ │ └── index.js # Tab 容器（状态管理 + 内容渲染） │ │ -│ ├── StockQuoteCard/ # 股票行情卡片（TypeScript） +│ ├── StockQuoteCard/ # 股票行情卡片（TypeScript，已拆分） │ │ ├── index.tsx # 主组件 │ │ ├── types.ts # 类型定义 -│ │ └── mockData.ts # Mock 数据 +│ │ ├── mockData.ts # Mock 数据 +│ │ └── components/ # 子组件 +│ │ ├── index.ts # 组件导出 +│ │ ├── theme.ts # 主题配置 +│ │ ├── formatters.ts # 格式化工具 +│ │ ├── StockHeader.tsx # 股票头部（名称、代码、收藏按钮） +│ │ ├── PriceDisplay.tsx # 价格显示组件 +│ │ ├── CompanyInfo.tsx # 公司信息（行业、市值等） +│ │ ├── KeyMetrics.tsx # 关键指标（PE、PB、换手率等） +│ │ ├── MainForceInfo.tsx # 主力资金信息 +│ │ ├── SecondaryQuote.tsx # 副行情（对比股票） +│ │ ├── CompareStockInput.tsx # 对比股票输入 +│ │ └── StockCompareModal.tsx # 股票对比弹窗 │ │ │ ├── CompanyOverview/ # Tab: 公司概览（TypeScript） │ │ ├── index.tsx # 主组件（组合层） │ │ ├── types.ts # 类型定义 │ │ ├── utils.ts # 格式化工具 -│ │ ├── DeepAnalysisTab/ # 深度分析 Tab（21 个 TS 文件） │ │ ├── NewsEventsTab.js # 新闻事件 Tab │ │ │ │ │ ├── hooks/ # 数据 Hooks @@ -47,29 +58,69 @@ src/views/Company/ │ │ │ ├── ConcentrationCard.tsx # 股权集中度卡片 │ │ │ └── ShareholdersTable.tsx # 股东表格 │ │ │ -│ │ └── BasicInfoTab/ # 基本信息 Tab（可配置化） -│ │ ├── index.tsx # 主组件（可配置） -│ │ ├── config.ts # Tab 配置 + 黑金主题 -│ │ ├── utils.ts # 格式化工具函数 -│ │ └── components/ # 子组件 -│ │ ├── index.ts # 组件统一导出 -│ │ ├── LoadingState.tsx # 加载状态组件 -│ │ ├── ShareholderPanel.tsx # 股权结构面板 -│ │ ├── AnnouncementsPanel.tsx # 公告信息面板 -│ │ ├── BranchesPanel.tsx # 分支机构面板 -│ │ ├── BusinessInfoPanel.tsx # 工商信息面板 -│ │ ├── DisclosureSchedulePanel.tsx # 披露日程面板 -│ │ └── management/ # 管理团队模块 -│ │ ├── index.ts # 模块导出 -│ │ ├── types.ts # 类型定义 -│ │ ├── ManagementPanel.tsx # 主组件（useMemo） -│ │ ├── CategorySection.tsx # 分类区块（memo） -│ │ └── ManagementCard.tsx # 人员卡片（memo） +│ │ ├── BasicInfoTab/ # 基本信息 Tab（可配置化） +│ │ │ ├── index.tsx # 主组件（可配置） +│ │ │ ├── config.ts # Tab 配置 + 黑金主题 +│ │ │ ├── utils.ts # 格式化工具函数 +│ │ │ └── components/ # 子组件 +│ │ │ ├── index.ts # 组件统一导出 +│ │ │ ├── LoadingState.tsx # 加载状态组件 +│ │ │ ├── ShareholderPanel.tsx # 股权结构面板 +│ │ │ ├── AnnouncementsPanel.tsx # 公告信息面板 +│ │ │ ├── BranchesPanel.tsx # 分支机构面板 +│ │ │ ├── BusinessInfoPanel.tsx # 工商信息面板 +│ │ │ ├── DisclosureSchedulePanel.tsx # 披露日程面板 +│ │ │ └── management/ # 管理团队模块 +│ │ │ ├── index.ts # 模块导出 +│ │ │ ├── types.ts # 类型定义 +│ │ │ ├── ManagementPanel.tsx # 主组件（useMemo） +│ │ │ ├── CategorySection.tsx # 分类区块（memo） +│ │ │ └── ManagementCard.tsx # 人员卡片（memo） +│ │ │ +│ │ └── DeepAnalysisTab/ # 深度分析 Tab（原子设计模式） +│ │ ├── index.tsx # 主入口组件 +│ │ ├── types.ts # 类型定义 +│ │ ├── atoms/ # 原子组件 +│ │ │ ├── index.ts +│ │ │ ├── DisclaimerBox.tsx # 免责声明 +│ │ │ ├── ScoreBar.tsx # 评分进度条 +│ │ │ ├── BusinessTreeItem.tsx # 业务树形项 +│ │ │ ├── KeyFactorCard.tsx # 关键因素卡片 +│ │ │ ├── ProcessNavigation.tsx # 流程导航 +│ │ │ └── ValueChainFilterBar.tsx # 产业链筛选栏 +│ │ ├── components/ # Card 组件 +│ │ │ ├── index.ts +│ │ │ ├── CorePositioningCard/ # 核心定位卡片（含 atoms） +│ │ │ │ ├── index.tsx +│ │ │ │ ├── theme.ts +│ │ │ │ └── atoms/ +│ │ │ ├── CompetitiveAnalysisCard.tsx +│ │ │ ├── BusinessStructureCard.tsx +│ │ │ ├── BusinessSegmentsCard.tsx +│ │ │ ├── ValueChainCard.tsx +│ │ │ ├── KeyFactorsCard.tsx +│ │ │ ├── TimelineCard.tsx +│ │ │ └── StrategyAnalysisCard.tsx +│ │ ├── organisms/ # 复杂交互组件 +│ │ │ ├── ValueChainNodeCard/ +│ │ │ │ ├── index.tsx +│ │ │ │ └── RelatedCompaniesModal.tsx +│ │ │ └── TimelineComponent/ +│ │ │ ├── index.tsx +│ │ │ └── EventDetailModal.tsx +│ │ ├── tabs/ # Tab 面板 +│ │ │ ├── index.ts +│ │ │ ├── BusinessTab.tsx +│ │ │ ├── DevelopmentTab.tsx +│ │ │ ├── StrategyTab.tsx +│ │ │ └── ValueChainTab.tsx +│ │ └── utils/ +│ │ └── chartOptions.ts │ │ │ ├── MarketDataView/ # Tab: 股票行情（TypeScript） -│ │ ├── index.tsx # 主组件入口（~285 行，Tab 容器） +│ │ ├── index.tsx # 主组件入口 │ │ ├── types.ts # 类型定义 -│ │ ├── constants.ts # 主题配置、常量（含黑金主题 darkGoldTheme） +│ │ ├── constants.ts # 主题配置（含黑金主题 darkGoldTheme） │ │ ├── services/ │ │ │ └── marketService.ts # API 服务层 │ │ ├── hooks/ @@ -83,65 +134,84 @@ src/views/Company/ │ │ ├── MarkdownRenderer.tsx # Markdown 渲染 │ │ ├── AnalysisModal.tsx # 涨幅分析模态框 │ │ ├── StockSummaryCard/ # 股票概览卡片（黑金主题 4 列布局） -│ │ │ ├── index.tsx # 主组件（4 列 SimpleGrid 布局） -│ │ │ ├── StockHeaderCard.tsx # 股票信息卡片（名称、价格、涨跌幅） -│ │ │ ├── MetricCard.tsx # 指标卡片模板 -│ │ │ ├── utils.ts # 状态计算工具函数 -│ │ │ └── atoms/ # 原子组件 -│ │ │ ├── index.ts # 原子组件导出 -│ │ │ ├── DarkGoldCard.tsx # 黑金主题卡片容器 -│ │ │ ├── CardTitle.tsx # 卡片标题（图标+标题+副标题） -│ │ │ ├── MetricValue.tsx # 核心数值展示 -│ │ │ ├── PriceDisplay.tsx # 价格显示（价格+涨跌箭头） -│ │ │ └── StatusTag.tsx # 状态标签（活跃/健康等） +│ │ │ ├── index.tsx +│ │ │ ├── StockHeaderCard.tsx +│ │ │ ├── MetricCard.tsx +│ │ │ ├── utils.ts +│ │ │ └── atoms/ +│ │ │ ├── index.ts +│ │ │ ├── DarkGoldCard.tsx +│ │ │ ├── CardTitle.tsx +│ │ │ ├── MetricValue.tsx +│ │ │ ├── PriceDisplay.tsx +│ │ │ └── StatusTag.tsx │ │ └── panels/ # Tab 面板组件 -│ │ ├── index.ts # 面板组件统一导出 -│ │ ├── TradeDataPanel/ # 交易数据面板（原子设计模式） -│ │ │ ├── index.tsx # 主入口组件（~50 行） -│ │ │ ├── KLineChart.tsx # 日K线图组件（~40 行） -│ │ │ ├── MinuteKLineSection.tsx # 分钟K线区域（~95 行） -│ │ │ ├── TradeTable.tsx # 交易明细表格（~75 行） -│ │ │ └── atoms/ # 原子组件 -│ │ │ ├── index.ts # 统一导出 -│ │ │ ├── MinuteStats.tsx # 分钟数据统计（~80 行） -│ │ │ ├── TradeAnalysis.tsx # 成交分析（~65 行） -│ │ │ └── EmptyState.tsx # 空状态组件（~35 行） -│ │ ├── FundingPanel.tsx # 融资融券面板 -│ │ ├── BigDealPanel.tsx # 大宗交易面板 -│ │ ├── UnusualPanel.tsx # 龙虎榜面板 -│ │ └── PledgePanel.tsx # 股权质押面板 +│ │ ├── index.ts +│ │ ├── TradeDataPanel/ +│ │ │ ├── index.tsx +│ │ │ └── KLineModule.tsx +│ │ ├── FundingPanel.tsx +│ │ ├── BigDealPanel.tsx +│ │ ├── UnusualPanel.tsx +│ │ └── PledgePanel.tsx │ │ -│ ├── DeepAnalysis/ # Tab: 深度分析 +│ ├── DeepAnalysis/ # Tab: 深度分析（入口） │ │ └── index.js │ │ │ ├── DynamicTracking/ # Tab: 动态跟踪 -│ │ └── index.js +│ │ ├── index.js # 主组件 +│ │ └── components/ +│ │ ├── index.js # 组件导出 +│ │ ├── NewsPanel.js # 新闻面板 +│ │ └── ForecastPanel.js # 业绩预告面板 │ │ │ ├── FinancialPanorama/ # Tab: 财务全景（TypeScript 模块化） -│ │ ├── index.tsx # 主组件入口（~400 行） +│ │ ├── index.tsx # 主组件入口 │ │ ├── types.ts # TypeScript 类型定义 │ │ ├── constants.ts # 常量配置（颜色、指标定义） │ │ ├── hooks/ -│ │ │ ├── index.ts # Hook 统一导出 -│ │ │ └── useFinancialData.ts # 财务数据加载 Hook +│ │ │ ├── index.ts +│ │ │ └── useFinancialData.ts │ │ ├── utils/ -│ │ │ ├── index.ts # 工具函数统一导出 -│ │ │ ├── calculations.ts # 计算工具（同比变化、单元格颜色） -│ │ │ └── chartOptions.ts # ECharts 图表配置生成器 +│ │ │ ├── index.ts +│ │ │ ├── calculations.ts +│ │ │ └── chartOptions.ts +│ │ ├── tabs/ # Tab 面板组件 +│ │ │ ├── index.ts +│ │ │ ├── BalanceSheetTab.tsx +│ │ │ ├── CashflowTab.tsx +│ │ │ ├── FinancialMetricsTab.tsx +│ │ │ ├── IncomeStatementTab.tsx +│ │ │ └── MetricsCategoryTab.tsx │ │ └── components/ -│ │ ├── index.ts # 组件统一导出 -│ │ ├── StockInfoHeader.tsx # 股票信息头部 -│ │ ├── BalanceSheetTable.tsx # 资产负债表 -│ │ ├── IncomeStatementTable.tsx # 利润表 -│ │ ├── CashflowTable.tsx # 现金流量表 -│ │ ├── FinancialMetricsTable.tsx # 财务指标表 -│ │ ├── MainBusinessAnalysis.tsx # 主营业务分析 -│ │ ├── IndustryRankingView.tsx # 行业排名 -│ │ ├── StockComparison.tsx # 股票对比 -│ │ └── ComparisonAnalysis.tsx # 综合对比分析 +│ │ ├── index.ts +│ │ ├── StockInfoHeader.tsx +│ │ ├── FinancialTable.tsx # 通用财务表格 +│ │ ├── FinancialOverviewPanel.tsx # 财务概览面板 +│ │ ├── KeyMetricsOverview.tsx # 关键指标概览 +│ │ ├── PeriodSelector.tsx # 期数选择器 +│ │ ├── BalanceSheetTable.tsx +│ │ ├── IncomeStatementTable.tsx +│ │ ├── CashflowTable.tsx +│ │ ├── FinancialMetricsTable.tsx +│ │ ├── MainBusinessAnalysis.tsx +│ │ ├── IndustryRankingView.tsx +│ │ ├── StockComparison.tsx +│ │ └── ComparisonAnalysis.tsx │ │ -│ └── ForecastReport/ # Tab: 盈利预测（待拆分） -│ └── index.js +│ └── ForecastReport/ # Tab: 盈利预测（TypeScript，已模块化） +│ ├── index.tsx # 主组件入口 +│ ├── types.ts # 类型定义 +│ ├── constants.ts # 配色、图表配置常量 +│ └── components/ +│ ├── index.ts +│ ├── ChartCard.tsx # 图表卡片容器 +│ ├── IncomeProfitGrowthChart.tsx # 营收与利润趋势图 +│ ├── IncomeProfitChart.tsx # 营收利润图（备用） +│ ├── GrowthChart.tsx # 增长率图（备用） +│ ├── EpsChart.tsx # EPS 趋势图 +│ ├── PePegChart.tsx # PE/PEG 分析图 +│ └── DetailTable.tsx # 详细数据表格 │ ├── hooks/ # 页面级 Hooks │ ├── useCompanyStock.js # 股票代码管理（URL 同步） diff --git a/src/views/Company/components/MarketDataView/index.tsx b/src/views/Company/components/MarketDataView/index.tsx index c67d46e5..d67dc944 100644 --- a/src/views/Company/components/MarketDataView/index.tsx +++ b/src/views/Company/components/MarketDataView/index.tsx @@ -5,10 +5,6 @@ import React, { useState, useEffect, ReactNode, useMemo, useCallback } from 'rea import { Box, Container, - CardBody, - Center, - VStack, - Text, useDisclosure, } from '@chakra-ui/react'; import { @@ -161,11 +157,14 @@ const MarketDataView: React.FC = ({ stockCode: propStockCod {/* 主要内容区域 - Tab */} {loading ? ( - - - - - + + + ) : (