vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(MarketDataView): loading 背景色改为深色与整体一致

Browse Source 
- 移除白色 ThemedCard 包装
- 使用 gray.900 背景 + 金色边框

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-17 10:34:36 +08:00
parent ac7e627b2d
commit bc2b6ae41c
2 changed files with 150 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/views/Company/STRUCTURE.md
View File

@@ -1,6 +1,6 @@
# Company 目录结构说明 # Company 目录结构说明
> 最后更新：2025-12-16 > 最后更新：2025-12-17
## 目录结构 ## 目录结构
@@ -8,6 +8,7 @@
src/views/Company/ src/views/Company/
├── index.js # 页面入口（纯组合层） ├── index.js # 页面入口（纯组合层）
├── STRUCTURE.md # 本文档 ├── STRUCTURE.md # 本文档
├── LoadingState.tsx # 通用加载状态组件
│ │
├── components/ # UI 组件 ├── components/ # UI 组件
│ │ │ │
@@ -16,19 +17,29 @@ src/views/Company/
│ │ └── SearchBar.js # 股票搜索栏 │ │ └── SearchBar.js # 股票搜索栏
│ │ │ │
│ ├── CompanyTabs/ # Tab 切换容器 │ ├── CompanyTabs/ # Tab 切换容器
│ │ ├── index.js # Tab 容器（状态管理 + 内容渲染） │ │ └── index.js # Tab 容器（状态管理 + 内容渲染）
│ │ └── TabNavigation.js # Tab 导航栏
│ │ │ │
│ ├── StockQuoteCard/ # 股票行情卡片（TypeScript） │ ├── StockQuoteCard/ # 股票行情卡片（TypeScript，已拆分）
│ │ ├── index.tsx # 主组件 │ │ ├── index.tsx # 主组件
│ │ ├── types.ts # 类型定义 │ │ ├── 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） │ ├── CompanyOverview/ # Tab: 公司概览（TypeScript）
│ │ ├── index.tsx # 主组件（组合层） │ │ ├── index.tsx # 主组件（组合层）
│ │ ├── types.ts # 类型定义 │ │ ├── types.ts # 类型定义
│ │ ├── utils.ts # 格式化工具 │ │ ├── utils.ts # 格式化工具
│ │ ├── DeepAnalysisTab/ # 深度分析 Tab（21 个 TS 文件）
│ │ ├── NewsEventsTab.js # 新闻事件 Tab │ │ ├── NewsEventsTab.js # 新闻事件 Tab
│ │ │ │ │ │
│ │ ├── hooks/ # 数据 Hooks │ │ ├── hooks/ # 数据 Hooks
@@ -47,29 +58,69 @@ src/views/Company/
│ │ │ ├── ConcentrationCard.tsx # 股权集中度卡片 │ │ │ ├── ConcentrationCard.tsx # 股权集中度卡片
│ │ │ └── ShareholdersTable.tsx # 股东表格 │ │ │ └── ShareholdersTable.tsx # 股东表格
│ │ │ │ │ │
│ │ └── BasicInfoTab/ # 基本信息 Tab（可配置化） │ │ ├── BasicInfoTab/ # 基本信息 Tab（可配置化）
│ │ ├── index.tsx # 主组件（可配置） │ │ │ ├── index.tsx # 主组件（可配置）
│ │ ├── config.ts # Tab 配置 + 黑金主题 │ │ │ ├── config.ts # Tab 配置 + 黑金主题
│ │ ├── utils.ts # 格式化工具函数 │ │ │ ├── utils.ts # 格式化工具函数
│ │ └── components/ # 子组件 │ │ │ └── components/ # 子组件
│ │ ├── index.ts # 组件统一导出 │ │ │ ├── index.ts # 组件统一导出
│ │ ├── LoadingState.tsx # 加载状态组件 │ │ │ ├── LoadingState.tsx # 加载状态组件
│ │ ├── ShareholderPanel.tsx # 股权结构面板 │ │ │ ├── ShareholderPanel.tsx # 股权结构面板
│ │ ├── AnnouncementsPanel.tsx # 公告信息面板 │ │ │ ├── AnnouncementsPanel.tsx # 公告信息面板
│ │ ├── BranchesPanel.tsx # 分支机构面板 │ │ │ ├── BranchesPanel.tsx # 分支机构面板
│ │ ├── BusinessInfoPanel.tsx # 工商信息面板 │ │ │ ├── BusinessInfoPanel.tsx # 工商信息面板
│ │ ├── DisclosureSchedulePanel.tsx # 披露日程面板 │ │ │ ├── DisclosureSchedulePanel.tsx # 披露日程面板
│ │ └── management/ # 管理团队模块 │ │ │ └── management/ # 管理团队模块
│ │ ├── index.ts # 模块导出 │ │ │ ├── index.ts # 模块导出
│ │ ├── types.ts # 类型定义 │ │ │ ├── types.ts # 类型定义
│ │ ├── ManagementPanel.tsx # 主组件（useMemo） │ │ │ ├── ManagementPanel.tsx # 主组件（useMemo）
│ │ ├── CategorySection.tsx # 分类区块（memo） │ │ │ ├── CategorySection.tsx # 分类区块（memo）
│ │ └── ManagementCard.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） │ ├── MarketDataView/ # Tab: 股票行情（TypeScript）
│ │ ├── index.tsx # 主组件入口（~285 行，Tab 容器） │ │ ├── index.tsx # 主组件入口
│ │ ├── types.ts # 类型定义 │ │ ├── types.ts # 类型定义
│ │ ├── constants.ts # 主题配置、常量（含黑金主题 darkGoldTheme） │ │ ├── constants.ts # 主题配置（含黑金主题 darkGoldTheme）
│ │ ├── services/ │ │ ├── services/
│ │ │ └── marketService.ts # API 服务层 │ │ │ └── marketService.ts # API 服务层
│ │ ├── hooks/ │ │ ├── hooks/
@@ -83,65 +134,84 @@ src/views/Company/
│ │ ├── MarkdownRenderer.tsx # Markdown 渲染 │ │ ├── MarkdownRenderer.tsx # Markdown 渲染
│ │ ├── AnalysisModal.tsx # 涨幅分析模态框 │ │ ├── AnalysisModal.tsx # 涨幅分析模态框
│ │ ├── StockSummaryCard/ # 股票概览卡片（黑金主题 4 列布局） │ │ ├── StockSummaryCard/ # 股票概览卡片（黑金主题 4 列布局）
│ │ │ ├── index.tsx # 主组件（4 列 SimpleGrid 布局） │ │ │ ├── index.tsx
│ │ │ ├── StockHeaderCard.tsx # 股票信息卡片（名称、价格、涨跌幅） │ │ │ ├── StockHeaderCard.tsx
│ │ │ ├── MetricCard.tsx # 指标卡片模板 │ │ │ ├── MetricCard.tsx
│ │ │ ├── utils.ts # 状态计算工具函数 │ │ │ ├── utils.ts
│ │ │ └── atoms/ # 原子组件 │ │ │ └── atoms/
│ │ │ ├── index.ts # 原子组件导出 │ │ │ ├── index.ts
│ │ │ ├── DarkGoldCard.tsx # 黑金主题卡片容器 │ │ │ ├── DarkGoldCard.tsx
│ │ │ ├── CardTitle.tsx # 卡片标题（图标+标题+副标题） │ │ │ ├── CardTitle.tsx
│ │ │ ├── MetricValue.tsx # 核心数值展示 │ │ │ ├── MetricValue.tsx
│ │ │ ├── PriceDisplay.tsx # 价格显示（价格+涨跌箭头） │ │ │ ├── PriceDisplay.tsx
│ │ │ └── StatusTag.tsx # 状态标签（活跃/健康等） │ │ │ └── StatusTag.tsx
│ │ └── panels/ # Tab 面板组件 │ │ └── panels/ # Tab 面板组件
│ │ ├── index.ts # 面板组件统一导出 │ │ ├── index.ts
│ │ ├── TradeDataPanel/ # 交易数据面板（原子设计模式） │ │ ├── TradeDataPanel/
│ │ │ ├── index.tsx # 主入口组件（~50 行） │ │ │ ├── index.tsx
│ │ │ ├── KLineChart.tsx # 日K线图组件（~40 行） │ │ │ └── KLineModule.tsx
│ │ │ ├── MinuteKLineSection.tsx # 分钟K线区域（~95 行） │ │ ├── FundingPanel.tsx
│ │ │ ├── TradeTable.tsx # 交易明细表格（~75 行） │ │ ├── BigDealPanel.tsx
│ │ │ └── atoms/ # 原子组件 │ │ ├── UnusualPanel.tsx
│ │ │ ├── index.ts # 统一导出 │ │ └── PledgePanel.tsx
│ │ │ ├── MinuteStats.tsx # 分钟数据统计（~80 行）
│ │ │ ├── TradeAnalysis.tsx # 成交分析（~65 行）
│ │ │ └── EmptyState.tsx # 空状态组件（~35 行）
│ │ ├── FundingPanel.tsx # 融资融券面板
│ │ ├── BigDealPanel.tsx # 大宗交易面板
│ │ ├── UnusualPanel.tsx # 龙虎榜面板
│ │ └── PledgePanel.tsx # 股权质押面板
│ │ │ │
│ ├── DeepAnalysis/ # Tab: 深度分析 │ ├── DeepAnalysis/ # Tab: 深度分析（入口）
│ │ └── index.js │ │ └── index.js
│ │ │ │
│ ├── DynamicTracking/ # Tab: 动态跟踪 │ ├── DynamicTracking/ # Tab: 动态跟踪
│ │ └── index.js │ │ ├── index.js # 主组件
│ │ └── components/
│ │ ├── index.js # 组件导出
│ │ ├── NewsPanel.js # 新闻面板
│ │ └── ForecastPanel.js # 业绩预告面板
│ │ │ │
│ ├── FinancialPanorama/ # Tab: 财务全景（TypeScript 模块化） │ ├── FinancialPanorama/ # Tab: 财务全景（TypeScript 模块化）
│ │ ├── index.tsx # 主组件入口（~400 行） │ │ ├── index.tsx # 主组件入口
│ │ ├── types.ts # TypeScript 类型定义 │ │ ├── types.ts # TypeScript 类型定义
│ │ ├── constants.ts # 常量配置（颜色、指标定义） │ │ ├── constants.ts # 常量配置（颜色、指标定义）
│ │ ├── hooks/ │ │ ├── hooks/
│ │ │ ├── index.ts # Hook 统一导出 │ │ │ ├── index.ts
│ │ │ └── useFinancialData.ts # 财务数据加载 Hook │ │ │ └── useFinancialData.ts
│ │ ├── utils/ │ │ ├── utils/
│ │ │ ├── index.ts # 工具函数统一导出 │ │ │ ├── index.ts
│ │ │ ├── calculations.ts # 计算工具（同比变化、单元格颜色） │ │ │ ├── calculations.ts
│ │ │ └── chartOptions.ts # ECharts 图表配置生成器 │ │ │ └── chartOptions.ts
│ │ ├── tabs/ # Tab 面板组件
│ │ │ ├── index.ts
│ │ │ ├── BalanceSheetTab.tsx
│ │ │ ├── CashflowTab.tsx
│ │ │ ├── FinancialMetricsTab.tsx
│ │ │ ├── IncomeStatementTab.tsx
│ │ │ └── MetricsCategoryTab.tsx
│ │ └── components/ │ │ └── components/
│ │ ├── index.ts # 组件统一导出 │ │ ├── index.ts
│ │ ├── StockInfoHeader.tsx # 股票信息头部 │ │ ├── StockInfoHeader.tsx
│ │ ├── BalanceSheetTable.tsx # 资产负债表 │ │ ├── FinancialTable.tsx # 通用财务表格
│ │ ├── IncomeStatementTable.tsx # 利润表 │ │ ├── FinancialOverviewPanel.tsx # 财务概览面板
│ │ ├── CashflowTable.tsx # 现金流量表 │ │ ├── KeyMetricsOverview.tsx # 关键指标概览
│ │ ├── FinancialMetricsTable.tsx # 财务指标表 │ │ ├── PeriodSelector.tsx # 期数选择器
│ │ ├── MainBusinessAnalysis.tsx # 主营业务分析 │ │ ├── BalanceSheetTable.tsx
│ │ ├── IndustryRankingView.tsx # 行业排名 │ │ ├── IncomeStatementTable.tsx
│ │ ├── StockComparison.tsx # 股票对比 │ │ ├── CashflowTable.tsx
│ │ └── ComparisonAnalysis.tsx # 综合对比分析 │ │ ├── FinancialMetricsTable.tsx
│ │ ├── MainBusinessAnalysis.tsx
│ │ ├── IndustryRankingView.tsx
│ │ ├── StockComparison.tsx
│ │ └── ComparisonAnalysis.tsx
│ │ │ │
│ └── ForecastReport/ # Tab: 盈利预测（待拆分） │ └── ForecastReport/ # Tab: 盈利预测（TypeScript，已模块化）
│ └── index.js │ ├── 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 ├── hooks/ # 页面级 Hooks
│ ├── useCompanyStock.js # 股票代码管理（URL 同步） │ ├── useCompanyStock.js # 股票代码管理（URL 同步）

17
src/views/Company/components/MarketDataView/index.tsx
View File

@@ -5,10 +5,6 @@ import React, { useState, useEffect, ReactNode, useMemo, useCallback } from 'rea
import { import {
Box, Box,
Container, Container,
CardBody,
Center,
VStack,
Text,
useDisclosure, useDisclosure,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { import {
@@ -161,11 +157,14 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
{/* 主要内容区域 - Tab */} {/* 主要内容区域 - Tab */}
{loading ? ( {loading ? (
<ThemedCard theme={theme}> <Box
<CardBody> bg="gray.900"
<LoadingState message="数据加载中..." height="400px" /> border="1px solid"
</CardBody> borderColor="rgba(212, 175, 55, 0.3)"
</ThemedCard> borderRadius="xl"
>
<LoadingState message="数据加载中..." height="400px" />
</Box>
) : ( ) : (
<SubTabContainer <SubTabContainer
tabs={tabConfigs} tabs={tabConfigs}