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:
zdl
2025-12-17 11:17:25 +08:00
parent 7736212235
commit c4900bd280

View File

@@ -1,6 +1,6 @@
# Company 目录结构说明
> 最后更新2025-12-17
> 最后更新2025-12-17StockQuoteCard 数据下沉优化)
## 目录结构
@@ -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/ # 内部数据 Hooks2025-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
---
@@ -1070,3 +1080,97 @@ index.tsx
- **职责分离**:图表、统计、表格各自独立
- **组件复用**EmptyState 可在其他场景复用
- **类型安全**:完整的 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 可独立在其他页面使用