From c4900bd2801879d7114a8a614c57a82109af064b Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 17 Dec 2025 11:17:25 +0800 Subject: [PATCH] =?UTF-8?q?docs(Company):=20=E6=9B=B4=E6=96=B0=20STRUCTURE?= =?UTF-8?q?.md=20=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E4=B8=8B=E6=B2=89?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新目录结构：新增 StockQuoteCard/hooks/ - 更新 hooks 目录说明：标注 useStockQuote.js 已下沉 - 更新入口文件说明：列出已移除的模块 - 新增 2025-12-17 重构记录：StockQuoteCard 数据下沉优化详情 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/views/Company/STRUCTURE.md | 120 ++++++++++++++++++++++++++++++--- 1 file changed, 112 insertions(+), 8 deletions(-) diff --git a/src/views/Company/STRUCTURE.md b/src/views/Company/STRUCTURE.md index e247fa7d..d4d6b5ec 100644 --- a/src/views/Company/STRUCTURE.md +++ b/src/views/Company/STRUCTURE.md @@ -1,6 +1,6 @@ # Company 目录结构说明 -> 最后更新：2025-12-17 +> 最后更新：2025-12-17（StockQuoteCard 数据下沉优化） ## 目录结构 @@ -8,10 +8,11 @@ src/views/Company/ ├── index.js # 页面入口（纯组合层） ├── STRUCTURE.md # 本文档 -├── LoadingState.tsx # 通用加载状态组件 │ ├── components/ # UI 组件 │ │ +│ ├── LoadingState.tsx # 通用加载状态组件 +│ │ │ ├── CompanyHeader/ # 页面头部 │ │ ├── index.js # 组合导出 │ │ └── SearchBar.js # 股票搜索栏 @@ -19,10 +20,14 @@ src/views/Company/ │ ├── CompanyTabs/ # Tab 切换容器 │ │ └── index.js # Tab 容器（状态管理 + 内容渲染） │ │ -│ ├── StockQuoteCard/ # 股票行情卡片（TypeScript，已拆分） -│ │ ├── index.tsx # 主组件 +│ ├── StockQuoteCard/ # 股票行情卡片（TypeScript，数据已下沉） +│ │ ├── index.tsx # 主组件（Props 从 11 个精简为 4 个） │ │ ├── types.ts # 类型定义 │ │ ├── mockData.ts # Mock 数据 +│ │ ├── hooks/ # 内部数据 Hooks（2025-12-17 新增） +│ │ │ ├── index.ts # hooks 导出索引 +│ │ │ ├── useStockQuoteData.ts # 行情数据+基本信息获取 +│ │ │ └── useStockCompare.ts # 股票对比逻辑 │ │ └── components/ # 子组件 │ │ ├── index.ts # 组件导出 │ │ ├── theme.ts # 主题配置 @@ -216,8 +221,8 @@ src/views/Company/ ├── hooks/ # 页面级 Hooks │ ├── useCompanyStock.js # 股票代码管理（URL 同步） │ ├── useCompanyWatchlist.js # 自选股管理（Redux 集成） -│ ├── useCompanyEvents.js # PostHog 事件追踪 -│ └── useStockQuote.js # 股票行情数据 Hook +│ └── useCompanyEvents.js # PostHog 事件追踪 +│ # 注：useStockQuote.js 已下沉到 StockQuoteCard/hooks/useStockQuoteData.ts │ └── constants/ # 常量定义 └── index.js # Tab 配置、Toast 消息、默认值 @@ -231,13 +236,18 @@ src/views/Company/ #### `index.js` - 页面入口 - **职责**：纯组合层，协调 Hooks 和 Components -- **代码行数**：95 行 +- **代码行数**：~105 行（2025-12-17 优化后精简） - **依赖**： - `useCompanyStock` - 股票代码状态 - `useCompanyWatchlist` - 自选股状态 - `useCompanyEvents` - 事件追踪 - `CompanyHeader` - 页面头部 + - `StockQuoteCard` - 股票行情卡片（内部自行获取数据） - `CompanyTabs` - Tab 切换区 +- **已移除**（2025-12-17）： + - `useStockQuote` - 已下沉到 StockQuoteCard + - `useBasicInfo` - 已下沉到 StockQuoteCard + - 股票对比逻辑 - 已下沉到 StockQuoteCard --- @@ -1069,4 +1079,98 @@ index.tsx - **原子设计模式**：atoms（MinuteStats、TradeAnalysis、EmptyState）→ 业务组件（KLineChart、MinuteKLineSection、TradeTable）→ 主组件 - **职责分离**：图表、统计、表格各自独立 - **组件复用**：EmptyState 可在其他场景复用 -- **类型安全**：完整的 Props 类型定义和导出 \ No newline at end of file +- **类型安全**：完整的 Props 类型定义和导出 + +### 2025-12-17 StockQuoteCard 数据下沉优化 + +**改动概述**： +- StockQuoteCard Props 从 **11 个** 精简至 **4 个**（减少 64%） +- 行情数据、基本信息、股票对比逻辑全部下沉到组件内部 +- Company/index.js 移除约 **40 行** 数据获取代码 +- 删除 `Company/hooks/useStockQuote.js` + +**创建的文件**： +``` +StockQuoteCard/hooks/ +├── index.ts # hooks 导出索引 +├── useStockQuoteData.ts # 行情数据 + 基本信息获取（~152 行） +└── useStockCompare.ts # 股票对比逻辑（~91 行） +``` + +**Props 对比**： + +**优化前（11 个 Props）**： +```tsx + +``` + +**优化后（4 个 Props）**： +```tsx + +``` + +**Hook 返回值**： + +`useStockQuoteData(stockCode)`: +```typescript +{ + quoteData: StockQuoteCardData | null; // 行情数据 + basicInfo: BasicInfo | null; // 基本信息 + isLoading: boolean; // 加载状态 + error: string | null; // 错误信息 + refetch: () => void; // 手动刷新 +} +``` + +`useStockCompare(stockCode)`: +```typescript +{ + currentStockInfo: StockInfo | null; // 当前股票财务信息 + compareStockInfo: StockInfo | null; // 对比股票财务信息 + isCompareLoading: boolean; // 对比数据加载中 + handleCompare: (code: string) => Promise; // 触发对比 + clearCompare: () => void; // 清除对比 +} +``` + +**修改的文件**： +| 文件 | 操作 | 说明 | +|------|------|------| +| `StockQuoteCard/hooks/useStockQuoteData.ts` | 新建 | 合并行情+基本信息获取 | +| `StockQuoteCard/hooks/useStockCompare.ts` | 新建 | 股票对比逻辑 | +| `StockQuoteCard/hooks/index.ts` | 新建 | hooks 导出索引 | +| `StockQuoteCard/index.tsx` | 修改 | 使用内部 hooks，减少 props | +| `StockQuoteCard/types.ts` | 修改 | Props 从 11 个精简为 4 个 | +| `Company/index.js` | 修改 | 移除下沉的数据获取逻辑 | +| `Company/hooks/useStockQuote.js` | 删除 | 已移到 StockQuoteCard | + +**优化收益**： +| 指标 | 优化前 | 优化后 | 改善 | +|------|--------|--------|------| +| Props 数量 | 11 | 4 | -64% | +| Company/index.js 行数 | ~172 | ~105 | -39% | +| 数据获取位置 | 页面层 | 组件内部 | 就近原则 | +| 可复用性 | 依赖父组件 | 独立可用 | 提升 | + +**设计原则**： +- **数据就近获取**：组件自己获取自己需要的数据 +- **Props 最小化**：只传递真正需要外部控制的状态 +- **职责清晰**：自选股状态保留在页面层（涉及 Redux 和事件追踪） +- **可复用性**：StockQuoteCard 可独立在其他页面使用 \ No newline at end of file