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:
@@ -1,6 +1,6 @@
|
|||||||
# Company 目录结构说明
|
# Company 目录结构说明
|
||||||
|
|
||||||
> 最后更新:2025-12-10
|
> 最后更新:2025-12-11
|
||||||
|
|
||||||
## 目录结构
|
## 目录结构
|
||||||
|
|
||||||
@@ -28,7 +28,7 @@ src/views/Company/
|
|||||||
│ │ ├── index.tsx # 主组件(组合层)
|
│ │ ├── index.tsx # 主组件(组合层)
|
||||||
│ │ ├── types.ts # 类型定义
|
│ │ ├── types.ts # 类型定义
|
||||||
│ │ ├── utils.ts # 格式化工具
|
│ │ ├── utils.ts # 格式化工具
|
||||||
│ │ ├── DeepAnalysisTab.js # 深度分析 Tab
|
│ │ ├── DeepAnalysisTab/ # 深度分析 Tab(21 个 TS 文件)
|
||||||
│ │ ├── NewsEventsTab.js # 新闻事件 Tab
|
│ │ ├── NewsEventsTab.js # 新闻事件 Tab
|
||||||
│ │ │
|
│ │ │
|
||||||
│ │ ├── hooks/ # 数据 Hooks
|
│ │ ├── hooks/ # 数据 Hooks
|
||||||
@@ -335,7 +335,7 @@ CompanyOverview/
|
|||||||
├── index.tsx # 主组件(组合层,约 60 行)
|
├── index.tsx # 主组件(组合层,约 60 行)
|
||||||
├── CompanyHeaderCard.tsx # 头部卡片组件(约 130 行)
|
├── CompanyHeaderCard.tsx # 头部卡片组件(约 130 行)
|
||||||
├── BasicInfoTab.js # 基本信息 Tab(懒加载版本,约 994 行)
|
├── BasicInfoTab.js # 基本信息 Tab(懒加载版本,约 994 行)
|
||||||
├── DeepAnalysisTab.js # 深度分析 Tab
|
├── DeepAnalysisTab/ # 深度分析 Tab(21 个 TS 文件,见 2025-12-11 重构记录)
|
||||||
├── NewsEventsTab.js # 新闻事件 Tab
|
├── NewsEventsTab.js # 新闻事件 Tab
|
||||||
├── types.ts # 类型定义(约 50 行)
|
├── types.ts # 类型定义(约 50 行)
|
||||||
├── utils.ts # 格式化工具(约 20 行)
|
├── utils.ts # 格式化工具(约 20 行)
|
||||||
@@ -534,3 +534,102 @@ components/management/
|
|||||||
- **职责分离**:卡片渲染、分类区块、数据处理各自独立
|
- **职责分离**:卡片渲染、分类区块、数据处理各自独立
|
||||||
- **类型安全**:消除 `any` 类型,完整的 TypeScript 类型定义
|
- **类型安全**:消除 `any` 类型,完整的 TypeScript 类型定义
|
||||||
- **可复用性**:`ManagementCard` 可独立使用
|
- **可复用性**:`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 等原子组件多处复用
|
||||||
Reference in New Issue
Block a user