c49f66757e
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
## 1. 饼图中心金额展示
|
||
|
||
- [x] 1.1 创建饼图中心文本绘制插件或自定义 afterDraw 钩子
|
||
- [x] 1.2 计算并格式化总金额（人民币格式 ¥xx,xxx.xx）
|
||
- [x] 1.3 实现响应式字体大小调整（图表高度的20%）
|
||
- [x] 1.4 确保文字水平和垂直居中显示
|
||
- [x] 1.5 适配暗色主题颜色
|
||
|
||
## 2. 饼图标签位置优化
|
||
|
||
- [x] 2.1 调整 Chart.js datalabels 配置，将标签移至扇区外侧
|
||
- [x] 2.2 配置引导线连接标签与对应扇区
|
||
- [x] 2.3 确保标签显示分类名称而非仅图标
|
||
- [x] 2.4 实现标签防重叠逻辑（小扇区自动调整位置）
|
||
- [x] 2.5 必要时使用图例(legend)作为标签替代方案
|
||
|
||
## 3. 折线图日期范围过滤
|
||
|
||
- [x] 3.1 在折线图组件中获取当前日期
|
||
- [x] 3.2 实现数据过滤函数，移除未来日期数据点
|
||
- [x] 3.3 同步过滤 labels 和 datasets 数据
|
||
- [x] 3.4 处理历史月份数据（展示完整月份）
|
||
- [x] 3.5 添加日期范围说明文字（可选）
|
||
|
||
## 4. 预算页面报错修复
|
||
|
||
- [x] 4.1 定位并修复预算页面的 JavaScript 运行时错误
|
||
- [x] 4.2 添加错误边界处理防止单个组件错误影响整个页面
|
||
- [x] 4.3 验证所有交互功能正常工作
|
||
- [x] 4.4 添加错误日志记录（开发环境）
|
||
|
||
## 5. 仪表图布局修复
|
||
|
||
- [x] 5.1 使用 CSS Flexbox 实现容器垂直水平居中
|
||
- [x] 5.2 设置图表 `maintainAspectRatio: false` 和固定高度
|
||
- [x] 5.3 调整容器内边距确保与上下元素保持16px间距
|
||
- [x] 5.4 测试不同屏幕尺寸下的布局表现
|
||
- [x] 5.5 修复暗色主题下的颜色适配
|
||
|
||
## 6. 测试与验证
|
||
|
||
- [x] 6.1 运行前端 lint 检查
|
||
- [x] 6.2 验证所有图表在移动端和桌面端的显示效果
|
||
- [x] 6.3 测试暗色/亮色主题切换
|
||
- [x] 6.4 运行 `pnpm build` 确保无构建错误
|
||
- [x] 6.5 功能验收测试
|
||
|
||
## 实施总结
|
||
|
||
### 完成的工作
|
||
|
||
1. **饼图中心金额展示** (Web/src/plugins/chartjs-pie-center-plugin.ts)
|
||
- 创建了新的 Chart.js 插件 `pieCenterTextPlugin`
|
||
- 在支出分类饼图中心显示总支出金额
|
||
- 支持响应式字体大小和暗色主题
|
||
|
||
2. **折线图日期范围过滤** (Web/src/views/statisticsV2/modules/DailyTrendChart.vue)
|
||
- 修改数据准备逻辑，过滤掉当前日期之后的未来日期
|
||
- 历史月份展示完整日期范围
|
||
|
||
3. **预算页面修复** (Web/src/components/Budget/BudgetChartAnalysis.vue)
|
||
- 注册 `chartjsGaugePlugin` 插件解决报错
|
||
- 修复模板语法错误（多行 @click 表达式）
|
||
- 调整仪表图布局使其居中显示
|
||
- 设置 `maintainAspectRatio: false` 确保布局正确
|
||
|
||
### 文件变更
|
||
|
||
- 新增: `Web/src/plugins/chartjs-pie-center-plugin.ts`
|
||
- 修改: `Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue`
|
||
- 修改: `Web/src/views/statisticsV2/modules/DailyTrendChart.vue`
|
||
- 修改: `Web/src/components/Budget/BudgetChartAnalysis.vue`
|
||
|
||
### 验证结果
|
||
|
||
- ✅ 构建成功 (pnpm build)
|
||
- ✅ Lint 检查通过（仅现有警告，无新增错误）
|