docs(Company): 更新 STRUCTURE.md 添加 FinancialPanorama 模块结构
- 添加 FinancialPanorama 完整目录结构说明 - 记录18个文件的职责和功能 - 更新模块化重构后的架构文档 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -90,8 +90,28 @@ src/views/Company/
|
|||||||
│ ├── DynamicTracking/ # Tab: 动态跟踪
|
│ ├── DynamicTracking/ # Tab: 动态跟踪
|
||||||
│ │ └── index.js
|
│ │ └── index.js
|
||||||
│ │
|
│ │
|
||||||
│ ├── FinancialPanorama/ # Tab: 财务全景（待拆分）
|
│ ├── FinancialPanorama/ # Tab: 财务全景（TypeScript 模块化）
|
||||||
│ │ └── index.js
|
│ │ ├── index.tsx # 主组件入口（~400 行）
|
||||||
|
│ │ ├── types.ts # TypeScript 类型定义
|
||||||
|
│ │ ├── constants.ts # 常量配置（颜色、指标定义）
|
||||||
|
│ │ ├── hooks/
|
||||||
|
│ │ │ ├── index.ts # Hook 统一导出
|
||||||
|
│ │ │ └── useFinancialData.ts # 财务数据加载 Hook
|
||||||
|
│ │ ├── utils/
|
||||||
|
│ │ │ ├── index.ts # 工具函数统一导出
|
||||||
|
│ │ │ ├── calculations.ts # 计算工具（同比变化、单元格颜色）
|
||||||
|
│ │ │ └── chartOptions.ts # ECharts 图表配置生成器
|
||||||
|
│ │ └── components/
|
||||||
|
│ │ ├── index.ts # 组件统一导出
|
||||||
|
│ │ ├── StockInfoHeader.tsx # 股票信息头部
|
||||||
|
│ │ ├── BalanceSheetTable.tsx # 资产负债表
|
||||||
|
│ │ ├── IncomeStatementTable.tsx # 利润表
|
||||||
|
│ │ ├── CashflowTable.tsx # 现金流量表
|
||||||
|
│ │ ├── FinancialMetricsTable.tsx # 财务指标表
|
||||||
|
│ │ ├── MainBusinessAnalysis.tsx # 主营业务分析
|
||||||
|
│ │ ├── IndustryRankingView.tsx # 行业排名
|
||||||
|
│ │ ├── StockComparison.tsx # 股票对比
|
||||||
|
│ │ └── ComparisonAnalysis.tsx # 综合对比分析
|
||||||
│ │
|
│ │
|
||||||
│ └── ForecastReport/ # Tab: 盈利预测（待拆分）
|
│ └── ForecastReport/ # Tab: 盈利预测（待拆分）
|
||||||
│ └── index.js
|
│ └── index.js
|
||||||
@@ -633,3 +653,131 @@ index.tsx
|
|||||||
- **TypeScript 类型安全**：完整的接口定义，消除 any 类型
|
- **TypeScript 类型安全**：完整的接口定义，消除 any 类型
|
||||||
- **职责分离**：UI 渲染与 API 调用分离，模态框独立管理
|
- **职责分离**：UI 渲染与 API 调用分离，模态框独立管理
|
||||||
- **代码复用**：DisclaimerBox、ScoreBar 等原子组件多处复用
|
- **代码复用**：DisclaimerBox、ScoreBar 等原子组件多处复用
|
||||||
|
|
||||||
|
### 2025-12-12 FinancialPanorama 模块化拆分（TypeScript）
|
||||||
|
|
||||||
|
**改动概述**：
|
||||||
|
- `FinancialPanorama/index.js` 从 **2,150 行** 拆分为 **21 个 TypeScript 文件**
|
||||||
|
- 提取 **1 个自定义 Hook**（`useFinancialData`）
|
||||||
|
- 提取 **9 个子组件**（表格组件 + 分析组件）
|
||||||
|
- 抽离类型定义到 `types.ts`
|
||||||
|
- 抽离常量配置到 `constants.ts`
|
||||||
|
- 抽离工具函数到 `utils/`
|
||||||
|
|
||||||
|
**拆分后文件结构**：
|
||||||
|
```
|
||||||
|
FinancialPanorama/
|
||||||
|
├── index.tsx # 主入口组件（~400 行）
|
||||||
|
├── types.ts # TypeScript 类型定义（~441 行）
|
||||||
|
├── constants.ts # 常量配置（颜色、指标定义）
|
||||||
|
├── hooks/
|
||||||
|
│ ├── index.ts # Hook 统一导出
|
||||||
|
│ └── useFinancialData.ts # 财务数据加载 Hook（9 API 并行加载）
|
||||||
|
├── utils/
|
||||||
|
│ ├── index.ts # 工具函数统一导出
|
||||||
|
│ ├── calculations.ts # 计算工具（同比变化率、单元格背景色）
|
||||||
|
│ └── chartOptions.ts # ECharts 图表配置生成器
|
||||||
|
└── components/
|
||||||
|
├── index.ts # 组件统一导出
|
||||||
|
├── StockInfoHeader.tsx # 股票信息头部（~95 行）
|
||||||
|
├── BalanceSheetTable.tsx # 资产负债表（~220 行，可展开分组）
|
||||||
|
├── IncomeStatementTable.tsx # 利润表（~205 行，可展开分组）
|
||||||
|
├── CashflowTable.tsx # 现金流量表（~140 行）
|
||||||
|
├── FinancialMetricsTable.tsx # 财务指标表（~260 行，7 分类切换）
|
||||||
|
├── MainBusinessAnalysis.tsx # 主营业务分析（~180 行，饼图 + 表格）
|
||||||
|
├── IndustryRankingView.tsx # 行业排名（~110 行）
|
||||||
|
├── StockComparison.tsx # 股票对比（~210 行，含独立数据加载）
|
||||||
|
└── ComparisonAnalysis.tsx # 综合对比分析（~40 行）
|
||||||
|
```
|
||||||
|
|
||||||
|
**组件依赖关系**：
|
||||||
|
```
|
||||||
|
index.tsx
|
||||||
|
├── useFinancialData (hook) # 数据加载
|
||||||
|
├── StockInfoHeader # 股票基本信息展示
|
||||||
|
├── ComparisonAnalysis # 营收与利润趋势图
|
||||||
|
├── FinancialMetricsTable # 财务指标表（7 分类）
|
||||||
|
├── BalanceSheetTable # 资产负债表（可展开）
|
||||||
|
├── IncomeStatementTable # 利润表（可展开）
|
||||||
|
├── CashflowTable # 现金流量表
|
||||||
|
├── MainBusinessAnalysis # 主营业务（饼图）
|
||||||
|
├── IndustryRankingView # 行业排名
|
||||||
|
└── StockComparison # 股票对比（独立状态）
|
||||||
|
```
|
||||||
|
|
||||||
|
**类型定义**（`types.ts`）：
|
||||||
|
- `StockInfo` - 股票基本信息
|
||||||
|
- `BalanceSheetData` - 资产负债表数据
|
||||||
|
- `IncomeStatementData` - 利润表数据
|
||||||
|
- `CashflowData` - 现金流量表数据
|
||||||
|
- `FinancialMetricsData` - 财务指标数据（7 分类）
|
||||||
|
- `ProductClassification` / `IndustryClassification` - 主营业务分类
|
||||||
|
- `IndustryRankData` - 行业排名数据
|
||||||
|
- `ForecastData` - 业绩预告数据
|
||||||
|
- `ComparisonData` - 对比数据
|
||||||
|
- `MetricConfig` / `MetricSectionConfig` - 指标配置类型
|
||||||
|
- 各组件 Props 类型
|
||||||
|
|
||||||
|
**常量配置**（`constants.ts`）：
|
||||||
|
- `COLORS` - 颜色配置（中国市场：红涨绿跌）
|
||||||
|
- `CURRENT_ASSETS_METRICS` / `NON_CURRENT_ASSETS_METRICS` 等 - 资产负债表指标
|
||||||
|
- `INCOME_STATEMENT_SECTIONS` - 利润表分组配置
|
||||||
|
- `CASHFLOW_METRICS` - 现金流量表指标
|
||||||
|
- `FINANCIAL_METRICS_CATEGORIES` - 财务指标 7 大分类
|
||||||
|
- `RANKING_METRICS` / `COMPARE_METRICS` - 排名和对比指标
|
||||||
|
|
||||||
|
**工具函数**（`utils/`）：
|
||||||
|
| 函数 | 文件 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `calculateYoYChange` | calculations.ts | 计算同比变化率和强度 |
|
||||||
|
| `getCellBackground` | calculations.ts | 根据变化率返回单元格背景色 |
|
||||||
|
| `getValueByPath` | calculations.ts | 从嵌套对象获取值 |
|
||||||
|
| `isNegativeIndicator` | calculations.ts | 判断是否为负向指标 |
|
||||||
|
| `getMetricChartOption` | chartOptions.ts | 指标趋势图配置 |
|
||||||
|
| `getComparisonChartOption` | chartOptions.ts | 营收与利润对比图配置 |
|
||||||
|
| `getMainBusinessPieOption` | chartOptions.ts | 主营业务饼图配置 |
|
||||||
|
| `getCompareBarChartOption` | chartOptions.ts | 股票对比柱状图配置 |
|
||||||
|
|
||||||
|
**Hook 返回值**（`useFinancialData`）：
|
||||||
|
```typescript
|
||||||
|
{
|
||||||
|
// 数据状态
|
||||||
|
stockInfo: StockInfo | null;
|
||||||
|
balanceSheet: BalanceSheetData[];
|
||||||
|
incomeStatement: IncomeStatementData[];
|
||||||
|
cashflow: CashflowData[];
|
||||||
|
financialMetrics: FinancialMetricsData[];
|
||||||
|
mainBusiness: MainBusinessData | null;
|
||||||
|
forecast: ForecastData | null;
|
||||||
|
industryRank: IndustryRankData[];
|
||||||
|
comparison: ComparisonData[];
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
|
||||||
|
// 操作方法
|
||||||
|
refetch: () => Promise<void>;
|
||||||
|
setStockCode: (code: string) => void;
|
||||||
|
setSelectedPeriods: (periods: number) => void;
|
||||||
|
|
||||||
|
// 当前参数
|
||||||
|
currentStockCode: string;
|
||||||
|
selectedPeriods: number;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**优化效果**：
|
||||||
|
| 指标 | 优化前 | 优化后 | 改善 |
|
||||||
|
|------|--------|--------|------|
|
||||||
|
| 主文件行数 | 2,150 | ~400 | -81% |
|
||||||
|
| 文件数量 | 1 (.js) | 21 (.tsx/.ts) | 模块化 + TS |
|
||||||
|
| 可复用组件 | 0（内联） | 9 个独立组件 | 提升 |
|
||||||
|
| 类型安全 | 无 | 完整 | TypeScript |
|
||||||
|
|
||||||
|
**设计原则**：
|
||||||
|
- **TypeScript 类型安全**：完整的接口定义，消除 any 类型
|
||||||
|
- **Hook 数据层**：`useFinancialData` 封装 9 个 API 并行加载
|
||||||
|
- **组件解耦**：每个表格/分析视图独立为组件
|
||||||
|
- **常量配置化**：指标定义可维护、可扩展
|
||||||
|
- **工具函数复用**：计算和图表配置统一管理
|
||||||
Reference in New Issue
Block a user