## 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 检查通过（仅现有警告，无新增错误）