docs: 更新 Company 模块目录结构文档

- 添加 DeepAnalysisTab 模块化重构记录(2025-12-11)
- 更新目录结构中 DeepAnalysisTab.js → DeepAnalysisTab/
- 添加组件依赖关系图
- 添加工具函数位置表
- 添加优化效果对比

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-11 10:59:12 +08:00
parent 32a73efb55
commit fba7a7ee96

View File

@@ -1,6 +1,6 @@
# Company 目录结构说明
> 最后更新2025-12-10
> 最后更新2025-12-11
## 目录结构
@@ -28,7 +28,7 @@ src/views/Company/
│ │ ├── index.tsx # 主组件(组合层)
│ │ ├── types.ts # 类型定义
│ │ ├── utils.ts # 格式化工具
│ │ ├── DeepAnalysisTab.js # 深度分析 Tab
│ │ ├── DeepAnalysisTab/ # 深度分析 Tab21 个 TS 文件)
│ │ ├── NewsEventsTab.js # 新闻事件 Tab
│ │ │
│ │ ├── hooks/ # 数据 Hooks
@@ -335,7 +335,7 @@ CompanyOverview/
├── index.tsx # 主组件(组合层,约 60 行)
├── CompanyHeaderCard.tsx # 头部卡片组件(约 130 行)
├── BasicInfoTab.js # 基本信息 Tab懒加载版本约 994 行)
├── DeepAnalysisTab.js # 深度分析 Tab
├── DeepAnalysisTab/ # 深度分析 Tab21 个 TS 文件,见 2025-12-11 重构记录)
├── NewsEventsTab.js # 新闻事件 Tab
├── types.ts # 类型定义(约 50 行)
├── utils.ts # 格式化工具(约 20 行)
@@ -534,3 +534,102 @@ components/management/
- **职责分离**:卡片渲染、分类区块、数据处理各自独立
- **类型安全**:消除 `any` 类型,完整的 TypeScript 类型定义
- **可复用性**`ManagementCard` 可独立使用
### 2025-12-11 DeepAnalysisTab 模块化拆分TypeScript
**改动概述**
- `DeepAnalysisTab.js` 从 **1,796 行** 拆分为 **21 个 TypeScript 文件**
- 采用**原子设计模式**atoms/components/organisms组织代码
- 完整 TypeScript 类型定义
- 格式化工具合并到全局 `src/utils/priceFormatters.js`
**拆分后文件结构**
```
DeepAnalysisTab/
├── index.tsx # 主入口组件,组合所有 Card 子组件
├── types.ts # TypeScript 类型定义(接口、数据结构)
├── atoms/ # 原子组件(基础 UI 元素)
│ ├── index.ts # 原子组件统一导出
│ ├── DisclaimerBox.tsx # 免责声明警告框(黄色 Alert用 6 次)
│ ├── ScoreBar.tsx # 评分进度条(带颜色渐变,用 8 次)
│ ├── BusinessTreeItem.tsx # 业务结构树形项(递归组件)
│ └── KeyFactorCard.tsx # 关键因素卡片(带影响方向图标)
├── components/ # Card 容器组件(页面区块)
│ ├── index.ts # Card 组件统一导出
│ ├── CorePositioningCard.tsx # 核心定位卡片(行业地位、核心优势)
│ ├── CompetitiveAnalysisCard.tsx # 竞争地位分析卡片(雷达图 + 评分条)
│ ├── BusinessStructureCard.tsx # 业务结构分析卡片(树形展示)
│ ├── ValueChainCard.tsx # 产业链分析卡片Tabs: 上游/中游/下游)
│ ├── KeyFactorsCard.tsx # 关键因素卡片Accordion 折叠面板)
│ ├── TimelineCard.tsx # 发展时间线卡片(正面/负面事件统计)
│ ├── BusinessSegmentsCard.tsx # 业务板块详情卡片(可展开/折叠)
│ └── StrategyAnalysisCard.tsx # 战略分析卡片(战略方向 + 战略举措)
├── organisms/ # 复杂组件(含状态管理和 API 调用)
│ ├── ValueChainNodeCard/ # 产业链节点组件
│ │ ├── index.tsx # 产业链节点卡片(点击展开详情)
│ │ └── RelatedCompaniesModal.tsx # 相关公司模态框API 获取公司列表)
│ └── TimelineComponent/ # 时间线组件
│ ├── index.tsx # 时间线主组件(事件列表渲染)
│ └── EventDetailModal.tsx # 事件详情模态框(查看完整事件信息)
└── utils/
└── chartOptions.ts # ECharts 图表配置(雷达图、桑基图)
```
**组件依赖关系**
```
index.tsx
├── CorePositioningCard
├── CompetitiveAnalysisCard
│ ├── ScoreBar (atom)
│ ├── DisclaimerBox (atom)
│ └── ReactECharts (雷达图)
├── BusinessStructureCard
│ └── BusinessTreeItem (atom, 递归)
├── ValueChainCard
│ └── ValueChainNodeCard (organism)
│ └── RelatedCompaniesModal
├── KeyFactorsCard
│ └── KeyFactorCard (atom)
├── TimelineCard
│ └── TimelineComponent (organism)
│ └── EventDetailModal
├── BusinessSegmentsCard
└── StrategyAnalysisCard
└── DisclaimerBox (atom)
```
**类型定义**`types.ts`
- `DeepAnalysisTabProps` - 主组件 Props
- `QualitativeAnalysis` - 定性分析数据
- `CompetitivePosition` - 竞争地位数据
- `BusinessStructureItem` - 业务结构项
- `ValueChainData` - 产业链数据
- `ValueChainNode` - 产业链节点
- `KeyFactor` - 关键因素
- `DevelopmentTimeline` - 发展时间线
- `TimelineEvent` - 时间线事件
- `BusinessSegment` - 业务板块
- `Strategy` - 战略分析
**工具函数位置**
| 函数 | 文件位置 | 说明 |
|------|----------|------|
| `formatCurrency` | `src/utils/priceFormatters.js` | 货币格式化 |
| `formatBusinessRevenue` | `src/utils/priceFormatters.js` | 营收格式化(亿/万) |
| `formatPercentage` | `src/utils/priceFormatters.js` | 百分比格式化 |
| `getRadarChartOption` | `DeepAnalysisTab/utils/chartOptions.ts` | 雷达图 ECharts 配置 |
| `getSankeyChartOption` | `DeepAnalysisTab/utils/chartOptions.ts` | 桑基图 ECharts 配置 |
**优化效果**
| 指标 | 优化前 | 优化后 | 改善 |
|------|--------|--------|------|
| 主文件行数 | 1,796 | ~117 | -93% |
| 文件数量 | 1 (.js) | 21 (.tsx/.ts) | 模块化 + TS |
| 可复用组件 | 0 | 4 原子 + 2 复杂 | 提升 |
| 类型安全 | 无 | 完整 | TypeScript |
**设计原则**
- **原子设计模式**atoms基础元素→ components区块→ organisms复杂交互
- **TypeScript 类型安全**:完整的接口定义,消除 any 类型
- **职责分离**UI 渲染与 API 调用分离,模态框独立管理
- **代码复用**DisclaimerBox、ScoreBar 等原子组件多处复用