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