42 lines
2.6 KiB
Markdown
42 lines
2.6 KiB
Markdown
# 实现方案 —— 2026-04-19-00-24-02
|
||
|
||
## 方案目标
|
||
完善 Dashboard 数据概览：新增全部报告卡片、修复图表重叠、增加时间维度切换。
|
||
|
||
## 需求 1：新增"全部报告总数"卡片
|
||
|
||
### 修改文件：`src/pages/Dashboard.tsx`
|
||
|
||
1. **扩展 stats 结构**：增加 `totalCount` 字段，表示全部报告总数（原 `reportCount` 改为仅统计本月）。
|
||
2. **更新计算逻辑**：在 useEffect 中计算 `userReports.length` 作为 `totalCount`，原 `reportCount` 保留为当月数量。
|
||
3. **调整卡片布局**：将原来的 4 卡片网格改为包含 5 个统计项，或保持 4 卡片但替换/调整内容。根据用户要求，在"本月报告总数"左侧插入"全部报告总数"，并将网格列数从 4 改为 5（`lg:grid-cols-5`）或保持 4 列但替换其中一个卡片。
|
||
|
||
## 需求 2：修复图表日期文字与 X 轴重叠
|
||
|
||
### 修改文件：`src/pages/Dashboard.tsx`
|
||
|
||
1. **增大底部留白**：将 Canvas 的 `padding` 或图表绘制区域的高度计算中加入更大的底部偏移（如 `bottomPadding = 30` 而非原来的 10）。
|
||
2. **调整文字 Y 坐标**：将 `ctx.fillText(label, x, h - 10)` 改为 `ctx.fillText(label, x, h - 5)` 或更下方，确保文字不会与 X 轴线（通常在 `h - padding` 位置绘制）重叠。
|
||
3. **调整字体大小**：30 天模式下缩小字体到 9px，避免文字过密。
|
||
|
||
## 需求 3：时间维度切换
|
||
|
||
### 修改文件：`src/pages/Dashboard.tsx`
|
||
|
||
1. **增加状态**：`const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');`
|
||
2. **响应式计算**：将 `useEffect` 的依赖数组增加 `timeRange`，当切换时重新计算 `trend` 和 `trendLabels`。
|
||
3. **标签格式化**：
|
||
- 7 天模式：显示 `MM-DD`（如 04-13）
|
||
- 30 天模式：显示 `DD`（如 13），避免过密
|
||
4. **UI 控件**：在图表标题右侧增加切换按钮组（最近 7 天 / 最近 30 天）。
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/pages/Dashboard.tsx` | stats 结构扩展、totalCount 计算、卡片布局调整、timeRange 状态、趋势数据响应式计算、Canvas 绘制坐标修复、时间切换 UI |
|
||
|
||
## 风险与注意事项
|
||
1. 原代码中 `reportCount` 可能表示的是全部报告数，需要确认其原意。如果原意是全部报告数，则需要新增 `monthCount` 而非修改 `reportCount`。根据用户方案，将 `reportCount` 改为当月数，`totalCount` 为全部数。
|
||
2. Canvas 绘制中 `padding`、`chartH` 的计算需要同步调整，确保数据线不会画到文字区域。
|
||
3. 30 天模式下数据点密集，需要考虑是否跳点显示标签（如只显示奇数天）。
|