1

openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-16

openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/design.md

@@ -0,0 +1,173 @@
+---
+title: 图表样式优化设计文档
+author: AI Assistant
+date: 2026-02-16
+status: draft
+---
+
+## Context
+
+### 当前状态
+应用中的图表存在以下样式问题：
+
+1. **支出分类饼图 (ExpenseCategoryCard.vue)**
+   - 问题：显示了不应该有的坐标轴（X轴 0-7，Y轴 ¥0-¥1）
+   - 原因：`useChartTheme.ts` 中的基础配置默认包含坐标轴，饼图配置未覆盖
+   
+2. **使用情况仪表盘 (BudgetChartAnalysis.vue)**
+   - 问题：仪表盘周围有坐标轴和网格线干扰
+   - 影响：视觉上显得混乱，不够简洁
+
+3. **预算进度燃尽图**
+   - 现状：样式基本可用，但缺乏现代感
+   - 可优化：颜色对比度、网格线样式、动画效果
+
+### 技术背景
+- 使用 Chart.js 4.5+ 和 vue-chartjs 5.3+
+- 主题配置通过 `useChartTheme.ts` 统一管理
+- 支持 Vant UI 的暗色模式
+
+## Goals / Non-Goals
+
+**Goals:**
+1. 移除所有饼图/环形图/仪表盘的不必要坐标轴
+2. 统一图表的视觉风格，符合 Vant 设计系统
+3. 优化配色方案，提高可读性和美观度
+4. 增强动画效果，提升交互体验
+5. 确保暗色模式下的显示效果
+
+**Non-Goals:**
+- 不添加新的图表类型
+- 不修改业务逻辑或数据结构
+- 不改变现有的 API 接口
+
+## Decisions
+
+### Decision 1: 图表类型感知配置
+
+**选择**: 修改 `useChartTheme.ts`，使其根据图表类型自动调整默认配置
+
+**理由**:
+- 饼图/环形图/仪表盘不需要坐标轴
+- 折线图/柱状图需要坐标轴但可简化
+- 减少每个组件手动覆盖配置的重复工作
+
+**实现**:
+```typescript
+// 新增根据图表类型获取配置的方法
+const getChartOptionsByType = (type: 'line' | 'bar' | 'pie' | 'doughnut', customOptions = {}) => {
+  const baseOptions = baseChartOptions.value
+  
+  // 无坐标轴图表类型
+  if (['pie', 'doughnut'].includes(type)) {
+    return mergeDeep(baseOptions, {
+      scales: { x: { display: false }, y: { display: false } }
+    }, customOptions)
+  }
+  
+  return mergeDeep(baseOptions, customOptions)
+}
+```
+
+**替代方案**: 在每个使用饼图的组件中手动添加 `scales: { x: { display: false }, y: { display: false } }`
+- **排除原因**: 重复代码多，容易遗漏
+
+### Decision 2: 简化坐标轴样式
+
+**选择**: 对于需要坐标轴的图表，采用极简风格
+
+**具体措施**:
+- 网格线：使用极淡的颜色 (`--van-border-color` 30% 透明度)
+- 刻度标签：减小字体大小至 10px
+- 移除坐标轴边框 (`drawBorder: false`)
+
+**理由**:
+- 减少视觉噪音，突出数据本身
+- 移动设备上更清晰的阅读体验
+
+### Decision 3: 优化配色方案
+
+**选择**: 使用更现代、和谐的颜色方案
+
+**具体措施**:
+1. **主色调扩展**:
+   - 保留 Vant 主题色作为基础
+   - 添加柔和的辅助色（降低饱和度）
+   
+2. **饼图/环形图**:
+   - 使用 8 色渐进色板
+   - 颜色从 Vant 主题派生但降低饱和度 20%
+   
+3. **折线图/柱状图**:
+   - 支出：暖色调（橙红系）
+   - 收入：冷色调（青绿系）
+   - 对比度符合 WCAG AA 标准
+
+**理由**:
+- 更符合现代移动端 UI 审美
+- 色盲友好
+
+### Decision 4: 增强交互体验
+
+**选择**: 添加微妙的悬停和点击效果
+
+**具体措施**:
+1. **悬停效果**:
+   - 饼图扇区：`hoverOffset: 8`（从 4 增加）
+   - 折线点：`pointHoverRadius: 6`（从 4 增加）
+   
+2. **动画优化**:
+   - 持续时间：750ms → 600ms（更快响应）
+   - 缓动函数：`easeInOutQuart` → `easeOutQuart`（更自然的结束）
+   
+3. **触控优化**:
+   - 增加触控目标大小
+   - 支持捏合缩放（对于趋势图）
+
+## Risks / Trade-offs
+
+**风险 1**: 颜色变更可能影响用户习惯
+- **影响**: 低 - 纯视觉变化
+- **缓解**: 保持色相大致不变，只调整饱和度和明度
+
+**风险 2**: 移除坐标轴可能降低某些图表的可读性
+- **影响**: 中 - 对于复杂数据集
+- **缓解**: 保留关键刻度，仅淡化网格线
+
+**风险 3**: 动画增强可能影响低性能设备
+- **影响**: 低 - 已考虑 `prefers-reduced-motion`
+- **缓解**: 动画持续时间控制在 600ms 以内
+
+## Migration Plan
+
+### 实施顺序
+1. **Phase 1**: 修复坐标轴问题（最高优先级）
+   - 修改 `useChartTheme.ts`
+   - 更新 `ExpenseCategoryCard.vue`
+   - 更新 `BudgetChartAnalysis.vue`
+
+2. **Phase 2**: 配色优化
+   - 更新图表色板
+   - 调整渐变效果
+
+3. **Phase 3**: 动画和交互增强
+   - 优化悬停效果
+   - 添加触控支持
+
+### 回滚策略
+- 所有变更都是样式层面的
+- 可通过 git revert 回滚
+- 建议分步提交，便于部分回滚
+
+## Open Questions
+
+1. 是否需要提供图表主题切换开关（明亮/暗黑/高对比度）？
+2. 预算页面的仪表盘是否需要添加中心数值显示？
+3. 是否需要支持图表数据的导出功能？
+
+## 附录
+
+### 参考资源
+- [Vant Design 色彩系统](https://vant-ui.github.io/vant/#/zh-CN/design-color)
+- [Chart.js 配置文档](https://www.chartjs.org/docs/latest/configuration/)
+- [WCAG 颜色对比度指南](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)

openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/proposal.md

@@ -0,0 +1,67 @@
+---
+title: 图表样式全面优化
+author: AI Assistant
+date: 2026-02-16
+status: draft
+category: UI/UX
+---
+
+## Why
+
+当前应用中统计页面和预算页面的图表样式存在明显问题：
+1. **支出分类饼图**出现了不应该有的坐标轴（X轴0-7，Y轴¥0-¥1），严重干扰视觉
+2. **使用情况仪表盘**周围也有坐标轴干扰，影响美观
+3. 所有图表整体样式缺乏现代感，显得凌乱
+
+为提升用户体验和视觉品质，需要对应用内所有图表进行全面样式优化。
+
+## 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.vue`
+- `Web/src/composables/useChartTheme.ts`
+- `Web/src/views/StatisticsView.vue`
+- `Web/src/views/BudgetView.vue`
+- `Web/src/utils/chartHelpers.ts`
+
+**依赖**:
+- Chart.js 4.5+
+- vue-chartjs 5.3+
+- Vant UI 主题系统
+
+**风险**:
+- 低 - 纯样式变更，不影响业务逻辑
+- 需验证所有图表在暗色模式下的可读性
+
+## 更新日志
+
+- 2026-02-16: 创建提案，定义图表优化范围

openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/specs/chart-theme-system/spec.md

@@ -0,0 +1,70 @@
+---
+title: 图表主题系统规格
+author: AI Assistant
+date: 2026-02-16
+---
+
+## ADDED Requirements
+
+### Requirement: 图表类型感知配置
+`useChartTheme` 组合式函数 SHALL 根据图表类型自动提供合适的默认配置。
+
+#### Scenario: 饼图/环形图自动隐藏坐标轴
+- **WHEN** 调用 `getChartOptionsByType('doughnut', customOptions)`
+- **THEN** 返回的配置中 `scales.x.display` 和 `scales.y.display` 均为 `false`
+- **AND** 返回的配置 SHALL 与 customOptions 深度合并
+
+#### Scenario: 折线图/柱状图保留简化坐标轴
+- **WHEN** 调用 `getChartOptionsByType('line', customOptions)`
+- **THEN** 返回的配置包含简化的坐标轴样式
+- **AND** 网格线使用 `--van-border-color` 30% 透明度
+- **AND** 刻度标签字体大小为 10px
+
+### Requirement: 现代化配色方案
+图表主题系统 SHALL 提供符合现代审美的配色方案。
+
+#### Scenario: 主色板包含 8 个颜色
+- **WHEN** 访问 `chartPalette`
+- **THEN** 返回包含 8 个颜色的数组
+- **AND** 颜色 SHALL 从 Vant 主题色派生并降低 20% 饱和度
+
+#### Scenario: 支出/收入颜色区分
+- **WHEN** 配置支出相关图表
+- **THEN** 默认使用暖色调（橙红系）
+- **WHEN** 配置收入相关图表
+- **THEN** 默认使用冷色调（青绿系）
+
+### Requirement: 暗色模式适配
+图表 SHALL 自动适配 Vant UI 的暗色模式。
+
+#### Scenario: 暗色模式颜色切换
+- **WHEN** Vant 主题切换为暗色模式
+- **THEN** 图表文本颜色 SHALL 自动变为浅色
+- **AND** 图表背景色 SHALL 与卡片背景一致
+- **AND** 网格线颜色 SHALL 变为深色系的边框色
+
+#### Scenario: 手动颜色获取
+- **WHEN** 调用 `colors.text`
+- **THEN** 返回当前主题的文本颜色 CSS 变量值
+- **AND** SHALL 实时响应主题切换
+
+### Requirement: 动画配置
+图表 SHALL 支持可配置的动画效果。
+
+#### Scenario: 默认动画配置
+- **WHEN** 获取图表配置
+- **THEN** 默认动画持续时间为 600ms
+- **AND** 缓动函数为 `easeOutQuart`
+
+#### Scenario: 减少动画偏好
+- **WHEN** 用户系统偏好 `prefers-reduced-motion: reduce`
+- **THEN** 动画持续时间 SHALL 自动设为 0
+- **AND** 图表 SHALL 立即渲染完成
+
+## MODIFIED Requirements
+
+无修改的现有需求。
+
+## REMOVED Requirements
+
+无删除的需求。

openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/specs/responsive-chart-layout/spec.md

@@ -0,0 +1,63 @@
+---
+title: 响应式图表布局规格
+author: AI Assistant
+date: 2026-02-16
+---
+
+## ADDED Requirements
+
+### Requirement: 容器自适应
+BaseChart 组件 SHALL 自动适应父容器大小。
+
+#### Scenario: 容器大小变化
+- **WHEN** 父容器大小发生变化
+- **THEN** 图表 SHALL 自动调整尺寸
+- **AND** 使用 ResizeObserver 进行监听
+- **AND** 图表 SHALL 保持比例不失真
+
+#### Scenario: 横竖屏切换
+- **WHEN** 移动设备从竖屏切换到横屏
+- **THEN** 图表 SHALL 在 300ms 内完成重绘
+- **AND** 所有元素 SHALL 保持可读性
+
+### Requirement: 触控交互优化
+图表 SHALL 针对移动设备触控操作进行优化。
+
+#### Scenario: 悬停效果增强
+- **WHEN** 用户悬停/触摸饼图扇区
+- **THEN** `hoverOffset` SHALL 为 8px（比默认值大）
+- **AND** 过渡动画 SHALL 流畅自然
+
+#### Scenario: 折线图点触控
+- **WHEN** 用户触摸折线图数据点
+- **THEN** 点的 `pointHoverRadius` SHALL 为 6px
+- **AND** 触控目标 SHALL 足够大（最小 44px）
+
+### Requirement: 空状态处理
+图表组件 SHALL 优雅处理空数据情况。
+
+#### Scenario: 无数据时显示空状态
+- **WHEN` 传入的数据为空数组或 datasets 为空
+- **THEN** 显示 VanEmpty 组件
+- **AND** 显示文案 "暂无数据"
+
+#### Scenario: 加载状态
+- **WHEN** `loading` prop 为 true
+- **THEN** 显示 VanLoading 组件
+- **AND** 显示文案 "加载中..."
+
+### Requirement: 最小高度限制
+图表容器 SHALL 有最小高度限制以确保可读性。
+
+#### Scenario: 小容器适配
+- **WHEN** 父容器高度小于 200px
+- **THEN** 图表 SHALL 使用 200px 作为最小高度
+- **AND** SHALL 显示滚动条或缩放提示
+
+## MODIFIED Requirements
+
+无修改的现有需求。
+
+## REMOVED Requirements
+
+无删除的需求。

openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/tasks.md

@@ -0,0 +1,97 @@
+---
+title: 图表样式优化任务清单
+author: AI Assistant
+date: 2026-02-16
+---
+
+## 1. 核心配置更新
+
+- [x] 1.1 修改 `useChartTheme.ts`，添加 `getChartOptionsByType` 方法
+  - 根据图表类型自动隐藏/显示坐标轴
+  - 为饼图/环形图设置默认 `scales: { x: { display: false }, y: { display: false } }`
+  
+- [x] 1.2 优化基础配色方案
+  - 更新 `chartPalette` 为 8 色低饱和度色板
+  - 调整 `colors` 对象以更好适配暗色模式
+  
+- [x] 1.3 简化坐标轴样式
+  - 网格线透明度降至 30%
+  - 刻度字体大小调整为 10px
+  - 确保 `drawBorder: false`
+
+## 2. 统计页面图表修复
+
+- [x] 2.1 修复支出分类饼图 (ExpenseCategoryCard.vue)
+  - 更新图表配置调用方式，使用新的类型感知配置
+  - 验证坐标轴已完全隐藏
+  
+- [x] 2.2 优化每日趋势图 (DailyTrendChart.vue)
+  - 更新渐变色使用新的配色方案
+  - 调整动画参数（600ms, easeOutQuart）
+  - 增大触控目标大小
+
+- [x] 2.3 验证其他统计图表
+  - 检查收入分类图表
+  - 检查支出排行图表
+
+## 3. 预算页面图表修复
+
+- [x] 3.1 修复使用情况仪表盘 (BudgetChartAnalysis.vue)
+  - 移除仪表盘周围的坐标轴和网格线
+  - 优化中心文字显示
+  
+- [x] 3.2 优化预算进度燃尽图
+  - 调整线条颜色和粗细
+  - 优化网格线样式
+  - 更新图例位置和样式
+
+- [x] 3.3 检查偏差分析图表
+  - 确保无坐标轴干扰
+  - 优化数据标签显示
+
+## 4. 通用组件优化
+
+- [x] 4.1 更新 BaseChart.vue
+  - 集成新的类型感知配置
+  - 优化加载和空状态显示
+  
+- [x] 4.2 增强响应式处理
+  - 确保 ResizeObserver 正常工作
+  - 优化横竖屏切换体验
+
+- [x] 4.3 更新 chartHelpers.ts
+  - 优化渐变创建函数
+  - 添加颜色格式化工具
+
+## 5. 测试与验证
+
+- [x] 5.1 运行前端构建
+  - 执行 `pnpm build`
+  - 确保无 TypeScript 错误
+  
+- [x] 5.2 验证明亮模式
+  - 统计页面所有图表显示正常
+  - 预算页面所有图表显示正常
+  - 坐标轴问题已修复
+  
+- [x] 5.3 验证暗色模式
+  - 主题系统自动适配暗色模式
+  - 所有图表颜色适配正常
+  
+- [x] 5.4 移动端测试
+  - 触控目标已增大（pointHoverRadius: 6, hitRadius: 20）
+  - 动画参数已优化（600ms, easeOutQuart）
+
+## 6. 代码整理
+
+- [x] 6.1 运行代码格式化
+  - 执行 `pnpm lint`
+  - 执行 `pnpm format`
+  
+- [x] 6.2 清理无用代码
+  - 删除重复函数定义
+  - 移除未使用的导入
+  
+- [x] 6.3 更新文档注释
+  - 为新增函数添加 JSDoc
+  - 使用中文注释解释业务逻辑