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
2.1 KiB
2.1 KiB
title, author, date, status, category
| title | author | date | status | category |
|---|---|---|---|---|
| 图表样式全面优化 | AI Assistant | 2026-02-16 | draft | UI/UX |
Why
当前应用中统计页面和预算页面的图表样式存在明显问题：
- 支出分类饼图出现了不应该有的坐标轴（X轴0-7，Y轴¥0-¥1），严重干扰视觉
- 使用情况仪表盘周围也有坐标轴干扰，影响美观
- 所有图表整体样式缺乏现代感，显得凌乱
为提升用户体验和视觉品质，需要对应用内所有图表进行全面样式优化。
What Changes
统计页面 (Statistics)
- 修复 支出分类饼图的坐标轴问题，移除所有不必要的坐标轴和网格线
- 优化 收入/支出趋势图的样式，使其更简洁清晰
- 统一 图表配色方案，与 Vant 设计系统保持一致
- 改进 图表响应式布局和触控交互体验
预算页面 (Budget)
- 修复 使用情况仪表盘（月度/年度）的坐标轴干扰
- 优化 预算进度燃尽图的视觉层次和颜色对比度
- 美化 偏差分析图表的数据展示形式
- 统一 图表组件的圆角、阴影等视觉元素
通用改进
- 更新 Chart.js 全局配置，移除默认坐标轴样式
- 为暗色模式优化图表颜色
- 添加平滑的动画过渡效果
- 确保所有图表在移动设备上的可读性
Capabilities
New Capabilities
chart-theme-system: 统一的图表主题系统，支持明暗模式切换和主题色自动适配responsive-chart-layout: 响应式图表布局组件，自动适配不同屏幕尺寸
Modified Capabilities
- 无现有 spec 需要修改（本次主要是样式优化，不涉及功能需求变更）
Impact
受影响文件:
Web/src/components/Charts/BaseChart.vueWeb/src/composables/useChartTheme.tsWeb/src/views/StatisticsView.vueWeb/src/views/BudgetView.vueWeb/src/utils/chartHelpers.ts
依赖:
- Chart.js 4.5+
- vue-chartjs 5.3+
- Vant UI 主题系统
风险:
- 低 - 纯样式变更，不影响业务逻辑
- 需验证所有图表在暗色模式下的可读性
更新日志
- 2026-02-16: 创建提案，定义图表优化范围