feat(chart): add multi-axis overlay controls
This commit is contained in:
李启源
@@ -4,14 +4,14 @@
|
||||
|
||||
### 代码行数变化
|
||||
|
||||
| 文件 | 重构前 | 重构后 | 变化 |
|
||||
|------|--------|--------|------|
|
||||
| WaveformChart.vue | 1975 行 | 1913 行 | ✅ **减少 62 行** |
|
||||
| utils/domain.ts | - | 29 行 | ✅ 新增 |
|
||||
| utils/formatters.ts | - | 64 行 | ✅ 新增 |
|
||||
| utils/geometry.ts | - | 50 行 | ✅ 新增 |
|
||||
| utils/index.ts | - | 19 行 | ✅ 新增 |
|
||||
| **总计** | 1975 行 | 2075 行 | +100 行（含注释和导出） |
|
||||
| 文件 | 重构前 | 重构后 | 变化 |
|
||||
| ------------------- | ------- | ------- | ----------------------- |
|
||||
| WaveformChart.vue | 1975 行 | 1913 行 | ✅ **减少 62 行** |
|
||||
| utils/domain.ts | - | 29 行 | ✅ 新增 |
|
||||
| utils/formatters.ts | - | 64 行 | ✅ 新增 |
|
||||
| utils/geometry.ts | - | 50 行 | ✅ 新增 |
|
||||
| utils/index.ts | - | 19 行 | ✅ 新增 |
|
||||
| **总计** | 1975 行 | 2075 行 | +100 行（含注释和导出） |
|
||||
|
||||
**实际效果**：主组件复杂度降低 **3.1%**，工具函数模块化后代码更清晰。
|
||||
|
||||
@@ -22,14 +22,18 @@
|
||||
### 1. 创建工具函数模块
|
||||
|
||||
#### 📁 `src/utils/domain.ts` - 域计算工具
|
||||
|
||||
**功能**：
|
||||
|
||||
- `paddedDomain()` - 计算带边距的数据域，处理空数组边界情况
|
||||
- `buildMinorTicks()` - 在主刻度之间生成次要刻度
|
||||
|
||||
**测试状态**：✅ 通过 (已有测试覆盖)
|
||||
|
||||
#### 📁 `src/utils/formatters.ts` - 格式化工具
|
||||
|
||||
**功能**：
|
||||
|
||||
- `displayTime()` - 根据时间单位转换显示值
|
||||
- `endpointFractionDigits()` - 计算端点标签的小数位数
|
||||
- `formatEndpointTime()` - 格式化端点时间（动态精度）
|
||||
@@ -41,7 +45,9 @@
|
||||
**测试状态**：✅ 通过
|
||||
|
||||
#### 📁 `src/utils/geometry.ts` - 几何计算工具
|
||||
|
||||
**功能**：
|
||||
|
||||
- `resolveTrackGeometry()` - 计算轨道布局几何信息
|
||||
- `clamp()` - 限制数值在指定范围内
|
||||
|
||||
@@ -50,6 +56,7 @@
|
||||
**测试状态**：✅ 通过
|
||||
|
||||
#### 📁 `src/utils/index.ts` - 统一导出
|
||||
|
||||
**功能**：提供统一的导出入口，简化导入语句
|
||||
|
||||
---
|
||||
@@ -57,12 +64,14 @@
|
||||
### 2. 重构 WaveformChart.vue
|
||||
|
||||
**变更内容**：
|
||||
|
||||
- ✅ 删除 8 个工具函数定义（~73 行代码）
|
||||
- ✅ 添加工具函数导入语句
|
||||
- ✅ 更新所有函数调用，传递正确的参数
|
||||
- ✅ 解决重复导入冲突
|
||||
|
||||
**导入优化**：
|
||||
|
||||
```typescript
|
||||
// 重构前：函数定义混杂在组件中
|
||||
function paddedDomain(values: number[]): [number, number] { ... }
|
||||
@@ -86,6 +95,7 @@ import {
|
||||
### 3. 重构 waveform-markup.ts
|
||||
|
||||
**变更内容**：
|
||||
|
||||
- ✅ 删除 `clamp` 函数定义
|
||||
- ✅ 从 `../utils/geometry` 导入 `clamp`
|
||||
- ✅ 保持所有功能正常运行
|
||||
@@ -97,6 +107,7 @@ import {
|
||||
## 🎯 验证结果
|
||||
|
||||
### 测试通过 ✅
|
||||
|
||||
```bash
|
||||
✅ 24/24 测试通过
|
||||
✅ 所有功能正常运行
|
||||
@@ -104,12 +115,14 @@ import {
|
||||
```
|
||||
|
||||
### 类型检查通过 ✅
|
||||
|
||||
```bash
|
||||
✅ vue-tsc -b 无错误
|
||||
✅ TypeScript 类型安全
|
||||
```
|
||||
|
||||
### 代码规范通过 ✅
|
||||
|
||||
```bash
|
||||
✅ ESLint 0 错误 0 警告
|
||||
✅ 代码风格一致
|
||||
@@ -120,21 +133,25 @@ import {
|
||||
## 📈 重构收益
|
||||
|
||||
### 1. 可维护性提升
|
||||
|
||||
- ✅ **工具函数独立**：8 个函数抽离到专门模块
|
||||
- ✅ **职责清晰**：domain（域计算）、formatters（格式化）、geometry（几何计算）
|
||||
- ✅ **主组件简化**：WaveformChart.vue 减少 62 行
|
||||
|
||||
### 2. 可测试性提升
|
||||
|
||||
- ✅ **独立测试**：工具函数可单独测试，无需渲染组件
|
||||
- ✅ **纯函数**：所有工具函数都是纯函数，易于测试
|
||||
- ✅ **边界情况覆盖**：空数组、特殊值等边界情况已覆盖
|
||||
|
||||
### 3. 可复用性提升
|
||||
|
||||
- ✅ **跨组件复用**：工具函数可在其他组件中使用
|
||||
- ✅ **统一导出**：`utils/index.ts` 提供便捷的导入方式
|
||||
- ✅ **框架无关**：核心工具函数不依赖 Vue
|
||||
|
||||
### 4. 类型安全提升
|
||||
|
||||
- ✅ **明确类型导出**：`TimeUnit` 类型导出
|
||||
- ✅ **接口定义**：`TrackGeometry` 接口规范几何信息
|
||||
- ✅ **参数类型化**：所有函数都有完整的类型注解
|
||||
@@ -144,6 +161,7 @@ import {
|
||||
## 🔄 对比分析
|
||||
|
||||
### 重构前
|
||||
|
||||
```typescript
|
||||
// WaveformChart.vue 内部 (1975 行)
|
||||
function paddedDomain(values: number[]): [number, number] { ... }
|
||||
@@ -157,12 +175,14 @@ function resolveTrackGeometry(trackCount: number): {...} {
|
||||
```
|
||||
|
||||
**问题**：
|
||||
|
||||
- ❌ 函数依赖组件 props 和状态
|
||||
- ❌ 难以单独测试
|
||||
- ❌ 无法在其他组件复用
|
||||
- ❌ 代码组织混乱
|
||||
|
||||
### 重构后
|
||||
|
||||
```typescript
|
||||
// utils/formatters.ts
|
||||
export function formatEndpointTime(
|
||||
@@ -186,6 +206,7 @@ const label = formatEndpointTime(domain[0], domain, props.timeUnit)
|
||||
```
|
||||
|
||||
**改进**：
|
||||
|
||||
- ✅ 纯函数，所有依赖通过参数传递
|
||||
- ✅ 易于单独测试
|
||||
- ✅ 可在任何地方复用
|
||||
@@ -215,7 +236,7 @@ export function paddedDomain(values: number[]): [number, number]
|
||||
export function formatEndpointTime(
|
||||
value: number,
|
||||
domain: [number, number],
|
||||
timeUnit: TimeUnit
|
||||
timeUnit: TimeUnit,
|
||||
): string
|
||||
```
|
||||
|
||||
@@ -224,6 +245,7 @@ export function formatEndpointTime(
|
||||
## 🚀 下一步计划
|
||||
|
||||
### 阶段 2：抽取核心引擎（3-5 天）
|
||||
|
||||
```
|
||||
src/core/
|
||||
├── scales.ts # 比例尺创建与管理
|
||||
@@ -233,11 +255,13 @@ src/core/
|
||||
```
|
||||
|
||||
**预期收益**：
|
||||
|
||||
- 主组件减少 ~400 行
|
||||
- D3 逻辑框架无关
|
||||
- 可跨框架复用
|
||||
|
||||
### 阶段 3：抽取 Composables（2-3 天）
|
||||
|
||||
```
|
||||
src/hooks/
|
||||
├── useZoom.ts # 缩放交互
|
||||
@@ -247,10 +271,12 @@ src/hooks/
|
||||
```
|
||||
|
||||
**预期收益**：
|
||||
|
||||
- 主组件减少 ~500 行
|
||||
- 交互逻辑可复用
|
||||
|
||||
### 阶段 4：组件拆分（2-3 天）
|
||||
|
||||
```
|
||||
src/components/
|
||||
├── WaveformChart.vue # 主容器 (~400 行)
|
||||
@@ -260,6 +286,7 @@ src/components/
|
||||
```
|
||||
|
||||
**预期收益**：
|
||||
|
||||
- 组件职责清晰
|
||||
- 单文件平均 ~120 行
|
||||
|
||||
@@ -270,6 +297,7 @@ src/components/
|
||||
✅ **阶段 1 成功完成**
|
||||
|
||||
**实际收益**：
|
||||
|
||||
- 主组件减少 62 行（3.1%）
|
||||
- 新增 3 个工具模块（162 行，含注释）
|
||||
- 所有测试通过，无功能回退
|
||||
@@ -278,6 +306,7 @@ src/components/
|
||||
**时间投入**：约 2 小时（按计划 1-2 天的任务提前完成）
|
||||
|
||||
**质量保证**：
|
||||
|
||||
- ✅ 24 个单元测试全部通过
|
||||
- ✅ TypeScript 类型检查通过
|
||||
- ✅ ESLint 代码规范检查通过
|
||||
@@ -285,6 +314,7 @@ src/components/
|
||||
- ✅ 向后兼容
|
||||
|
||||
**团队建议**：
|
||||
|
||||
- 继续执行阶段 2-4，预计 7-11 天完成全部重构
|
||||
- 重构后主组件将从 1975 行缩减到 ~400 行（减少 80%）
|
||||
- 长期维护成本预计降低 50%+
|
||||
|
||||
Reference in New Issue
Block a user