docs(Company): 更新 STRUCTURE.md 添加数据下沉优化记录
- 更新目录结构:新增 StockQuoteCard/hooks/ - 更新 hooks 目录说明:标注 useStockQuote.js 已下沉 - 更新入口文件说明:列出已移除的模块 - 新增 2025-12-17 重构记录:StockQuoteCard 数据下沉优化详情 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
# Company 目录结构说明
|
# Company 目录结构说明
|
||||||
|
|
||||||
> 最后更新:2025-12-17
|
> 最后更新:2025-12-17(StockQuoteCard 数据下沉优化)
|
||||||
|
|
||||||
## 目录结构
|
## 目录结构
|
||||||
|
|
||||||
@@ -8,10 +8,11 @@
|
|||||||
src/views/Company/
|
src/views/Company/
|
||||||
├── index.js # 页面入口(纯组合层)
|
├── index.js # 页面入口(纯组合层)
|
||||||
├── STRUCTURE.md # 本文档
|
├── STRUCTURE.md # 本文档
|
||||||
├── LoadingState.tsx # 通用加载状态组件
|
|
||||||
│
|
│
|
||||||
├── components/ # UI 组件
|
├── components/ # UI 组件
|
||||||
│ │
|
│ │
|
||||||
|
│ ├── LoadingState.tsx # 通用加载状态组件
|
||||||
|
│ │
|
||||||
│ ├── CompanyHeader/ # 页面头部
|
│ ├── CompanyHeader/ # 页面头部
|
||||||
│ │ ├── index.js # 组合导出
|
│ │ ├── index.js # 组合导出
|
||||||
│ │ └── SearchBar.js # 股票搜索栏
|
│ │ └── SearchBar.js # 股票搜索栏
|
||||||
@@ -19,10 +20,14 @@ src/views/Company/
|
|||||||
│ ├── CompanyTabs/ # Tab 切换容器
|
│ ├── CompanyTabs/ # Tab 切换容器
|
||||||
│ │ └── index.js # Tab 容器(状态管理 + 内容渲染)
|
│ │ └── index.js # Tab 容器(状态管理 + 内容渲染)
|
||||||
│ │
|
│ │
|
||||||
│ ├── StockQuoteCard/ # 股票行情卡片(TypeScript,已拆分)
|
│ ├── StockQuoteCard/ # 股票行情卡片(TypeScript,数据已下沉)
|
||||||
│ │ ├── index.tsx # 主组件
|
│ │ ├── index.tsx # 主组件(Props 从 11 个精简为 4 个)
|
||||||
│ │ ├── types.ts # 类型定义
|
│ │ ├── types.ts # 类型定义
|
||||||
│ │ ├── mockData.ts # Mock 数据
|
│ │ ├── mockData.ts # Mock 数据
|
||||||
|
│ │ ├── hooks/ # 内部数据 Hooks(2025-12-17 新增)
|
||||||
|
│ │ │ ├── index.ts # hooks 导出索引
|
||||||
|
│ │ │ ├── useStockQuoteData.ts # 行情数据+基本信息获取
|
||||||
|
│ │ │ └── useStockCompare.ts # 股票对比逻辑
|
||||||
│ │ └── components/ # 子组件
|
│ │ └── components/ # 子组件
|
||||||
│ │ ├── index.ts # 组件导出
|
│ │ ├── index.ts # 组件导出
|
||||||
│ │ ├── theme.ts # 主题配置
|
│ │ ├── theme.ts # 主题配置
|
||||||
@@ -216,8 +221,8 @@ src/views/Company/
|
|||||||
├── hooks/ # 页面级 Hooks
|
├── hooks/ # 页面级 Hooks
|
||||||
│ ├── useCompanyStock.js # 股票代码管理(URL 同步)
|
│ ├── useCompanyStock.js # 股票代码管理(URL 同步)
|
||||||
│ ├── useCompanyWatchlist.js # 自选股管理(Redux 集成)
|
│ ├── useCompanyWatchlist.js # 自选股管理(Redux 集成)
|
||||||
│ ├── useCompanyEvents.js # PostHog 事件追踪
|
│ └── useCompanyEvents.js # PostHog 事件追踪
|
||||||
│ └── useStockQuote.js # 股票行情数据 Hook
|
│ # 注:useStockQuote.js 已下沉到 StockQuoteCard/hooks/useStockQuoteData.ts
|
||||||
│
|
│
|
||||||
└── constants/ # 常量定义
|
└── constants/ # 常量定义
|
||||||
└── index.js # Tab 配置、Toast 消息、默认值
|
└── index.js # Tab 配置、Toast 消息、默认值
|
||||||
@@ -231,13 +236,18 @@ src/views/Company/
|
|||||||
|
|
||||||
#### `index.js` - 页面入口
|
#### `index.js` - 页面入口
|
||||||
- **职责**:纯组合层,协调 Hooks 和 Components
|
- **职责**:纯组合层,协调 Hooks 和 Components
|
||||||
- **代码行数**:95 行
|
- **代码行数**:~105 行(2025-12-17 优化后精简)
|
||||||
- **依赖**:
|
- **依赖**:
|
||||||
- `useCompanyStock` - 股票代码状态
|
- `useCompanyStock` - 股票代码状态
|
||||||
- `useCompanyWatchlist` - 自选股状态
|
- `useCompanyWatchlist` - 自选股状态
|
||||||
- `useCompanyEvents` - 事件追踪
|
- `useCompanyEvents` - 事件追踪
|
||||||
- `CompanyHeader` - 页面头部
|
- `CompanyHeader` - 页面头部
|
||||||
|
- `StockQuoteCard` - 股票行情卡片(内部自行获取数据)
|
||||||
- `CompanyTabs` - Tab 切换区
|
- `CompanyTabs` - Tab 切换区
|
||||||
|
- **已移除**(2025-12-17):
|
||||||
|
- `useStockQuote` - 已下沉到 StockQuoteCard
|
||||||
|
- `useBasicInfo` - 已下沉到 StockQuoteCard
|
||||||
|
- 股票对比逻辑 - 已下沉到 StockQuoteCard
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -1069,4 +1079,98 @@ index.tsx
|
|||||||
- **原子设计模式**:atoms(MinuteStats、TradeAnalysis、EmptyState)→ 业务组件(KLineChart、MinuteKLineSection、TradeTable)→ 主组件
|
- **原子设计模式**:atoms(MinuteStats、TradeAnalysis、EmptyState)→ 业务组件(KLineChart、MinuteKLineSection、TradeTable)→ 主组件
|
||||||
- **职责分离**:图表、统计、表格各自独立
|
- **职责分离**:图表、统计、表格各自独立
|
||||||
- **组件复用**:EmptyState 可在其他场景复用
|
- **组件复用**:EmptyState 可在其他场景复用
|
||||||
- **类型安全**:完整的 Props 类型定义和导出
|
- **类型安全**:完整的 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
|
||||||
|
<StockQuoteCard
|
||||||
|
data={quoteData}
|
||||||
|
isLoading={isQuoteLoading}
|
||||||
|
basicInfo={basicInfo}
|
||||||
|
currentStockInfo={currentStockInfo}
|
||||||
|
compareStockInfo={compareStockInfo}
|
||||||
|
isCompareLoading={isCompareLoading}
|
||||||
|
onCompare={handleCompare}
|
||||||
|
onCloseCompare={handleCloseCompare}
|
||||||
|
isInWatchlist={isInWatchlist}
|
||||||
|
isWatchlistLoading={isWatchlistLoading}
|
||||||
|
onWatchlistToggle={handleWatchlistToggle}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
**优化后(4 个 Props)**:
|
||||||
|
```tsx
|
||||||
|
<StockQuoteCard
|
||||||
|
stockCode={stockCode}
|
||||||
|
isInWatchlist={isInWatchlist}
|
||||||
|
isWatchlistLoading={isWatchlistLoading}
|
||||||
|
onWatchlistToggle={handleWatchlistToggle}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
**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<void>; // 触发对比
|
||||||
|
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 可独立在其他页面使用
|
||||||
Reference in New Issue
Block a user