Mdeical_Sur_Report/工程分析/实现方案-2026-04-19-00-24-02.md

实现方案 —— 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 天模式下数据点密集，需要考虑是否跳点显示标签（如只显示奇数天）。