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:
@@ -90,8 +90,28 @@ src/views/Company/
|
||||
│ ├── DynamicTracking/ # Tab: 动态跟踪
|
||||
│ │ └── index.js
|
||||
│ │
|
||||
│ ├── FinancialPanorama/ # Tab: 财务全景(待拆分)
|
||||
│ │ └── index.js
|
||||
│ ├── FinancialPanorama/ # Tab: 财务全景(TypeScript 模块化)
|
||||
│ │ ├── 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: 盈利预测(待拆分)
|
||||
│ └── index.js
|
||||
@@ -633,3 +653,131 @@ index.tsx
|
||||
- **TypeScript 类型安全**:完整的接口定义,消除 any 类型
|
||||
- **职责分离**:UI 渲染与 API 调用分离,模态框独立管理
|
||||
- **代码复用**: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