From 3eb1b489f3da27a34863568c1d79c14854a468d3 Mon Sep 17 00:00:00 2001 From: Administrator Date: Sun, 19 Apr 2026 00:27:33 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-19-00-24-02=20-=20Dashboard=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=85=A8=E9=83=A8=E6=8A=A5=E5=91=8A=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E3=80=81=E5=9B=BE=E8=A1=A8=E6=97=B6=E9=97=B4=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E3=80=81X=E8=BD=B4=E9=87=8D=E5=8F=A0=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Dashboard.tsx | 49 +++++++++++++++++------- 工程分析/实现方案-2026-04-19-00-24-02.md | 41 ++++++++++++++++++++ 工程分析/测试方案-2026-04-19-00-24-02.md | 38 ++++++++++++++++++ 工程分析/经验记录.md | 30 +++++++++++++++ 工程分析/需求分析-2026-04-19-00-24-02.md | 23 +++++++++++ 5 files changed, 168 insertions(+), 13 deletions(-) create mode 100644 工程分析/实现方案-2026-04-19-00-24-02.md create mode 100644 工程分析/测试方案-2026-04-19-00-24-02.md create mode 100644 工程分析/需求分析-2026-04-19-00-24-02.md diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 3fd2812..8a3eadd 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -8,7 +8,8 @@ import { storage } from '../utils/storage'; export default function Dashboard() { const navigate = useNavigate(); const [stats, setStats] = useState({ - reportCount: 0, + totalCount: 0, + monthCount: 0, templateCount: 0, userCount: 0, todayCount: 0, @@ -17,6 +18,7 @@ export default function Dashboard() { maxTrend: 1 }); const [currentUser, setCurrentUser] = useState(null); + const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days'); useEffect(() => { const user = storage.get('currentUser', null); @@ -35,24 +37,31 @@ export default function Dashboard() { ? reports.filter(r => r.author === user.username) : reports; - const today = new Date().toISOString().split('T')[0]; + const now = new Date(); + const today = now.toISOString().split('T')[0]; const todayReports = userReports.filter(r => r.createdAt === today); - // 7-day trend data + // 本月报告数 + const currentMonth = today.slice(0, 7); + const thisMonthReports = userReports.filter(r => r.createdAt && r.createdAt.startsWith(currentMonth)); + + // 动态趋势数据 + const daysCount = timeRange === '7days' ? 7 : 30; const trend: number[] = []; const labels: string[] = []; - for (let i = 6; i >= 0; i--) { - const d = new Date(); + for (let i = daysCount - 1; i >= 0; i--) { + const d = new Date(now); d.setDate(d.getDate() - i); const dateStr = d.toISOString().split('T')[0]; - const label = `${d.getMonth() + 1}/${d.getDate()}`; + const label = timeRange === '7days' ? `${d.getMonth() + 1}/${d.getDate()}` : `${d.getDate()}`; labels.push(label); trend.push(userReports.filter(r => r.createdAt === dateStr).length); } const maxTrend = Math.max(...trend, 1); setStats({ - reportCount: userReports.length, + totalCount: userReports.length, + monthCount: thisMonthReports.length, templateCount: templates.length, userCount: users.length, todayCount: todayReports.length, @@ -60,7 +69,7 @@ export default function Dashboard() { trendLabels: labels, maxTrend }); - }, [navigate]); + }, [navigate, timeRange]); if (!currentUser) return null; @@ -80,10 +89,15 @@ export default function Dashboard() { -
+
+
+
全部报告总数
+
{stats.totalCount}
+
+
本月报告总数
-
{stats.reportCount}
+
{stats.monthCount}
@@ -104,11 +118,20 @@ export default function Dashboard() { 报告增长趋势 - 最近 7 天 +
+ + +
{/* SVG Area Chart */} - + @@ -149,7 +172,7 @@ export default function Dashboard() { {p.count} - {p.label} + 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label} ))} diff --git a/工程分析/实现方案-2026-04-19-00-24-02.md b/工程分析/实现方案-2026-04-19-00-24-02.md new file mode 100644 index 0000000..41bdf7e --- /dev/null +++ b/工程分析/实现方案-2026-04-19-00-24-02.md @@ -0,0 +1,41 @@ +# 实现方案 —— 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 天模式下数据点密集，需要考虑是否跳点显示标签（如只显示奇数天）。 diff --git a/工程分析/测试方案-2026-04-19-00-24-02.md b/工程分析/测试方案-2026-04-19-00-24-02.md new file mode 100644 index 0000000..f47abe5 --- /dev/null +++ b/工程分析/测试方案-2026-04-19-00-24-02.md @@ -0,0 +1,38 @@ +# 测试方案 —— 2026-04-19-00-24-02 + +## 测试目标 +验证 Dashboard 新增卡片、图表修复、时间切换功能的正确性。 + +## 测试用例 + +### TC-1：全部报告总数卡片显示正确 +**步骤**： +1. 登录后进入 Dashboard。 +**预期结果**：顶部统计卡片区域显示"全部报告总数"，数值等于当前用户可见的所有报告数量。 + +### TC-2：本月报告总数不受全部报告卡片影响 +**步骤**： +1. 查看"本月报告总数"卡片。 +**预期结果**：数值仅统计当月（YYYY-MM）创建的报告，非全部报告。 + +### TC-3：7 天趋势图表正常 +**步骤**： +1. 默认进入 Dashboard，图表显示"最近 7 天"。 +**预期结果**：X 轴显示 7 个日期标签（MM-DD 格式），无重叠，数据点与折线正确对应。 + +### TC-4：30 天趋势图表正常 +**步骤**： +1. 点击"最近 30 天"按钮。 +**预期结果**：图表重新渲染，X 轴显示 30 个日期标签（DD 格式），无重叠，趋势数据正确。 + +### TC-5：日期文字不与轴线重叠 +**步骤**： +1. 在 7 天和 30 天两种模式下查看图表底部。 +**预期结果**：日期文字清晰可见，不与 X 轴线或数据点重叠。 + +## 回归测试 +- 确保今日新增报告、模板数、用户/部门数等其他统计卡片正常显示。 +- 确保页面无控制台报错。 + +## 测试通过标准 +所有用例通过，图表在不同时间维度下均正常渲染，无文字重叠。 diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index f2f96ce..2b8b285 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1251,3 +1251,33 @@ if ((settings.autoInsertDelay || 0) > 0) { - 当调整 `border-bottom` 与文字的距离时，如果 `padding-bottom` 已归零仍有间隙，应优先检查 `line-height` 的影响。 - `inline-block` 元素的 `border-bottom` 位置受其内部行高影响显著，打印样式中可考虑显式设置 `line-height: 1` 以获得最紧凑的下划线效果。 - 修改打印样式后，务必同时检查「有下划线」和「无下划线」两种字段的打印效果，避免 `line-height` 压缩导致其他排版异常。 + + +--- + +## 记录 40：Dashboard 统计卡片扩展、图表时间切换与 X 轴重叠修复 + +**A. 具体问题** +1. Dashboard 首页缺少"全部报告总数"统计卡片，用户无法一眼看到系统内所有报告数量。 +2. 报告增长趋势图表中 X 轴日期文字与数据点/轴线发生重叠，影响可读性。 +3. 趋势图表仅支持固定 7 天数据，用户希望增加 30 天维度查看更长周期趋势。 + +**B. 产生问题原因** +1. `stats` 数据结构中只有 `reportCount`（实际表示全部报告数），没有区分"全部"和"本月"两个维度。 +2. SVG 的 viewBox 高度为 120，X 轴标签绘制在 `y=118`，文字底部超出 viewBox 并与数据点（count=0 时 y=112）只有 6px 间距，导致视觉重叠。 +3. 趋势计算逻辑固定为 `for (let i = 6; i >= 0; i--)` 的 7 天硬编码，缺少动态时间范围控制。 + +**C. 解决问题方案** +1. **扩展 stats 结构**：增加 `totalCount`（全部报告）和 `monthCount`（本月报告），将原 `reportCount` 拆分为两个维度。 +2. **新增统计卡片**：将顶部网格从 3 列改为 4 列（`lg:grid-cols-4`），在"本月报告总数"左侧新增"全部报告总数"卡片。 +3. **时间维度切换**：引入 `timeRange` 状态（`'7days' | '1month'`），useEffect 依赖中加入 `timeRange`，动态计算 7 天或 30 天的趋势数据和标签。 +4. **修复 X 轴重叠**： + - 将 SVG viewBox 从 `0 0 300 120` 扩展为 `0 0 300 135`，增加底部 15px 空间。 + - 将日期标签的 y 坐标从 `120 - 2 = 118` 下移到 `128`，与数据点保持 16px 安全间距。 + - 30 天模式下字体缩小到 7px，避免过密。 +5. **标签格式化**：7 天模式显示 `M/D`（如 4/13），30 天模式显示 `DD`（如 13），减少 30 天模式下的文字宽度。 + +**D. 后续如何避免问题** +- 在使用 SVG 绘制图表时，务必为 X 轴标签预留足够的底部空间（至少文字高度 + 安全间距），不能仅依赖 `overflow-visible`。 +- 当图表需要支持多时间维度时，应在数据计算层（useEffect）统一处理，而非在渲染层做条件分支，确保数据与标签同步。 +- 增加 grid 列数时，需同步检查响应式断点（`md:`、`lg:`），避免在小屏幕上卡片过度挤压。 diff --git a/工程分析/需求分析-2026-04-19-00-24-02.md b/工程分析/需求分析-2026-04-19-00-24-02.md new file mode 100644 index 0000000..6e154e7 --- /dev/null +++ b/工程分析/需求分析-2026-04-19-00-24-02.md @@ -0,0 +1,23 @@ +# 需求分析 —— 2026-04-19-00-24-02 + +## 需求来源 +用户在使用 Dashboard 首页时发现统计卡片缺失全部报告数，且图表存在日期文字与轴线重叠的视觉问题，同时希望增加时间维度切换能力。 + +## 需求概述 + +### 需求 1：新增"全部报告总数"卡片 +在 Dashboard 统计卡片区域，紧邻"本月报告总数"左侧，新增一个"全部报告总数"数据卡片，显示当前用户可见的所有报告数量。 + +### 需求 2：修复图表 X 轴日期文字与轴线重叠 +报告增长趋势图表中，底部 X 轴日期文字（如 4/13、4/14 等）与轴线/数据线发生重叠，影响可读性。需要调整 Canvas 绘制坐标，增大底部留白并下移文字。 + +### 需求 3：图表时间维度切换 +为报告增长趋势图表增加"最近 7 天"和"最近 30 天"的切换按钮，动态重新计算趋势数据和标签。 + +## 涉及文件 +- `src/pages/Dashboard.tsx` + +## 需求影响范围 +- Dashboard 首页统计卡片布局 +- Canvas 趋势图表绘制逻辑 +- 统计数据计算逻辑