# 实现方案 —— 2026-04-19-00-33-44

## 方案目标
解决 30 天趋势图表过密问题，通过稀疏化标签 + Tooltip 提升可读性。

## 修改点

### 修改文件：`src/pages/Dashboard.tsx`

1. **条件渲染数据点和数值**：在 SVG 的 `points.map()` 中，对圆点和数值文本增加条件判断：
   - 7 天模式：正常显示圆点和数值
   - 30 天模式：不显示圆点和数值文本（仅保留折线和面积图）

2. **稀疏化 X 轴标签**：
   - 7 天模式：每天显示标签
   - 30 天模式：每隔 5 天显示一次标签（`i % 5 === 0`）

3. **SVG 鼠标事件与 Tooltip**：
   - 在图表容器上绑定 `onMouseMove` 和 `onMouseLeave`
   - 计算鼠标在 SVG 坐标系中的相对位置，映射到最近的数据点索引
   - 用 React state 管理 `tooltipData: { index, x, y, visible }`
   - 用绝对定位的 div 渲染 Tooltip，显示日期和数值

4. **透明捕获层**：在 SVG 中增加一个覆盖整个图表区域的透明 `<rect>`，确保鼠标在空白区域也能触发事件。

## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/pages/Dashboard.tsx` | 条件渲染 circle/text、标签稀疏化、Tooltip state、SVG 鼠标事件、透明捕获层 |

## 风险与注意事项
1. Tooltip 坐标计算需考虑 SVG 的 viewBox 到屏幕像素的映射比例。
2. 鼠标移出 SVG 区域时必须隐藏 Tooltip。
3. 7 天模式的显示效果必须保持完全不变。