feat: 新增统计视图（ADR-012）

- 新增 /stats 路由与导航入口，与看板、今日视图平级
- 完成热力图：近一年 53 周，按每天完成数固定阈值分五档着色
- 汇总指标：今天 / 连续 / 本月 / 累计；连续天数允许「今天还没开始」
- 「时间花在哪」按标签分布（多标签任务每个标签各计一次）
- 「一些细节」：完成周期中位数 / 最长连续 / 有记录天数 / 平均每天
- 统计只从 completedAt 推算，不新增计数表，数字随删除偏少但永不自相矛盾

热力图的布局约束记在 ADR-012 结论 9：
- 月份标签绝对定位，避免 whitespace-nowrap 撑宽列而多出横向滚动条
- 富余宽度交给列间隙（justify-between），格子保持 11×11 正方
- 右侧补与星期标签列等宽的留白，使左右对称并给 ring 描边留出余量

新增 utils/activity.ts（纯函数）、views/StatsView.vue 及两个 spec、e2e/stats.spec.ts；
同步更新 README、docs/adr.md 与 AppNav 的三入口断言。

README.md

@@ -13,6 +13,7 @@
 - **标签管理**：全局重命名、合并、删除标签，不必逐个任务改
 - **标签颜色**：8 色色板，设过颜色的标签在卡片与筛选下拉里带一个圆点；重命名 / 合并时颜色自动跟随
 - **今日视图**：按紧急度分组汇总（逾期 / 今天到期 / 进行中 / 待办），含本周完成等统计
+- **统计视图**：近一年完成热力图（按当天完成数分五档着色）、连续完成天数、本月与累计完成，附带标签分布与完成周期
 - 键盘快捷键；任务卡片可用方向键换列与调序
 - **深色模式**：跟随系统 / 浅色 / 深色三态
 - 导出导入 JSON（**覆盖 / 合并**两种模式）+ 启动自动备份；覆盖或合并前都会自动留档
@@ -112,14 +113,15 @@ npm run dev
 
 ---
 
-## 两个视图
+## 三个视图
 
-顶部导航可在两个视图之间切换：
+顶部导航可在三个视图之间切换：
 
 | 视图 | 路径     | 组织方式                                        |
 | ---- | -------- | ----------------------------------------------- |
 | 看板 | `/`      | 按**状态**：待办 / 进行中 / 已完成              |
 | 今日 | `/today` | 按**紧急度**：已逾期 → 今天到期 → 进行中 → 待办 |
+| 统计 | `/stats` | 按**时间**：近一年的每日完成量                  |
 
 今日视图顶部有四张统计卡片（逾期 / 今天到期 / 进行中 / 本周完成），下方是可直接勾选完成的待办列表。
 
@@ -127,6 +129,24 @@ npm run dev
 
 只要任务未完成且未归档，就一定会出现在某个分组里 —— 包括没设截止日期的待办（归入「待办」组）。
 
+### 统计视图
+
+今日视图往前看（今天该做什么），统计视图往回看（这些天做过什么）。
+
+- **顶部四张卡片**：今天完成 / 连续完成天数 / 本月完成 / 累计完成
+- **完成热力图**：近一年（53 周），一列一周、一行一天，颜色分五档（0 / 1 / 2 / 3 / 4 个及以上）。悬停任意格子可看当天日期与完成数；今天那格带一圈描边
+- **最忙的一天**：完成数最多的一天（并列时取最近的）
+- **时间花在哪**：已完成任务按标签分布（前 6 项，条形长度按最大项归一）。一个任务带多个标签时每个标签各计一次，没有标签的归入「未分类」
+- **一些细节**：平均完成周期（中位数）/ 最长连续 / 有记录天数 / 平均每天
+
+「连续完成」允许今天还没开始：只要昨天有记录就继续算，不会在零点一过就把成绩清零。
+
+平均完成周期取**中位数**而不是平均值：一条躺了半年的任务就能把平均值拉偏到没法看，中位数描述的是「通常要多久」。不足一天显示「当天」。
+
+「平均每天」按**有记录的天数**算，不是按自然日 —— 否则周末不干活会被算成效率下降，而这只是没上班。
+
+热力图只根据任务上的 `completedAt` 推算，**不额外维护计数表**。代价是永久删除或清空回收站会连同那天的记录一起消失，所以这里的数字通常比实际做过的偏少 —— 换来的是「数字永远和任务对得上」，不会出现恢复一条任务后计数却对不上的情况。
+
 ---
 
 ## 安装与离线（PWA）
@@ -358,7 +378,9 @@ PLAYWRIGHT_CHANNEL=chromium npm run test:e2e  # 用自带 Chromium（需先 npx
 - 「已完成」列固定按完成时间倒序，不支持手动调序（拖拽与方向键只能跨列）。
 - 归档阈值固定为「已完成超过 7 天」，暂不可配置。
 - 今日视图的分组规则固定（逾期 > 今天到期 > 进行中 > 待办），不可自定义。
-- 统计只覆盖本周完成数等基础指标，没有趋势图或历史留存。
+- 统计只根据任务上的完成时间推算，永久删除或清空回收站会带走相应记录，因此数字比实际偏少。
+- 统计没有按优先级拆分，也不支持自定义时间范围。
+- 统计的标签分布按「每个标签各计一次」汇总，因此各项之和会大于任务数（多标签任务对多个方向都算贡献）。
 - 深色模式只跟随系统或手动三态切换，没有按时间段自动切换。
 - 回收站固定保留 30 天，没有搜索 / 筛选，只有「按删除时间」一种顺序。
 - 撤销栈只保留最近 50 步，且仅存在于当前会话与当前标签页：刷新或换标签页即清空，不跨设备同步；另一标签页改动数据后，本页的历史会作废。

docs/adr.md

@@ -382,3 +382,96 @@ ADR-007 明确否决了「批量改属性做 `[{id, before}]` 快照式撤销」
 - 标签圆点带 `data-role="tag-dot"`：卡片上本来就有别的圆点元素（状态点、勾选框），
   用 `.rounded-full` 这类样式选择器会误伤，单测与 e2e 一律按 `data-role` 定位。
 - 导出 JSON 不含颜色，README 的已知限制已写明。
+
+---
+
+## ADR-012 · 统计视图：完成趋势与热力图
+
+**背景**
+
+README 的「已知限制」里长期挂着一条「统计只覆盖本周完成数等基础指标，没有趋势图或历史留存」。
+而 `completedAt` 从 T03 起就在数据里，除了算「本周完成」和判断归档候选之外没有任何出口 ——
+用户想知道「我这几周到底做了多少」，只能导出 JSON 自己数。
+
+ADR-005 在引入路由时就写明：「若未来增加今日视图、统计等真正的独立页面，再引入路由」。
+统计视图正是那句话里的第二个页面。
+
+**结论**
+
+1. **独立路由 `/stats`**，与今日视图平级。今日视图往前看（今天该做什么），统计往回看（做过什么），
+   两者的信息密度和使用时机都不同，塞在同一屏会互相稀释。按 ADR-005 的既有惯例懒加载。
+2. **数据只从 `completedAt` 推算**，不引入「每日完成计数」表。按本地日期分组，
+   逐条走 `localDateOf` —— `completedAt` 存的是 UTC ISO，直接截前 10 位在东八区会把晚上完成的任务算到前一天。
+3. **热力图 53 周（一年）**，列为一周、行为周一到周日（周一为一周之始，与 `utils/stats.ts` 口径一致）。
+   先用 26 周试过：只占卡片一半宽，右侧大片留白，且看不出季节性起伏。
+4. **强度固定阈值分档**（0 / 1 / 2 / 3 / 4+）。按最大值相对分档会让数据一变多就所有格子一起变深，
+   反而看不出「哪天特别猛」；固定阈值可预测，也便于测试。
+5. **月份标签只打在该月第一周**（周一落在 1–7 号）。最初用「月份变了就打」，结果 4 月与 5 月
+   这种相邻两周各打一个，而每列只有 14px 宽，两个标签直接叠在一起。每月一次后间隔必然 ≥ 4 列。
+6. **连续完成天数允许「今天还没开始」**：今天没有记录就从昨天起算。否则每天零点一过 streak 归零，
+   等于在用户还没开始工作的时候先把成绩抹掉。
+7. 回收站里的任务不计入（软删除的语义是「这件事不算了」），已归档的计入（归档只是隐藏）。
+8. 没有完成记录时仍然渲染完整网格，只把脚注换成引导文案 —— 空白的热力图本身就在表达「还没有开始」。
+9. **月份标签绝对定位**。53 列时容器 `clientWidth` 814px、`scrollWidth` 828px，凭空多出一条横向滚动条。
+   根因不是格子尺寸（11px + 3px 间距本是按 814px 排的），而是月份标签的 `whitespace-nowrap` 把所在列
+   从 11px 撑到 20px 以上 —— 流内文字参与了列宽计算。改为 `absolute` 定位后列宽恒定，原位置只留
+   `h-[14px]` 占位块保住行高，1280 / 1024 / 900 三种宽度下 `scrollWidth === clientWidth`。
+   **_2026-10-25 修正_**：当时用 `inline-flex w-fit mx-auto` 想让整块居中，但 `inline-flex` 是**行内级**
+   元素，auto margin 在水平方向按 0 处理，居中根本没生效 —— 实测 814 的容器里左边贴 15px、右边空 60px，
+   整块偏左，右侧一大块空白。
+   改为让周列容器 `flex-1` 占满剩余宽度、**`justify-between` 把富余空间均分到 52 个间隙**：
+   宽屏时间隙从 3px 涨到 4.15px，格子保持 11×11 正方。
+   窄屏用 `minWidth: weeks × 14 − 3`（53 列 = 739px）兜住 3px 最小间隙，装不下就横向滚动 ——
+   格子尺寸在任何宽度下都不变，只是间隙变化。
+   **_同日二次修正_**：铺满后最右列顶死在容器右边界（`rightGap = 0`），把今天那格的 `ring-1` 切掉一条 ——
+   `ring` 是画在元素外侧的 box-shadow，超出 `overflow-x-auto` 边界即被裁（实测超出 `innerRight` 恰好 1px）。
+   给内容补 `pr-[15px]`，即左侧星期标签列的镜像（`w-3` 12px + 父级 gap 3px），
+   方块阵列距内容左右边界各 15px，几何上真正对称，同时给描边留出余量（`ringOverflow` 由 +1 变 −14）。
+   `pt-[1px]` 同理，为落在最上面一行的 today 描边留出上侧空间。
+   _不靠 `justify-center` 居中_：内容超宽时它会从左边缘开始裁，第一列看不见。
+   _不把富余宽度摊给格子_：那会让格子变成 12.1×11 的扁方块，14px 见方的阵列里 1px 的偏差是能看出来的。
+   _不给 `overflow` 容器直接加 `padding-right`_：历史实现里 padding 不计入 `scrollWidth`，
+   放在内层 flex 上可以绕开这个差异。
+10. **热力图之后补两块内容**：标签分布（「时间花在哪」）与四项细节指标（平均完成周期 / 最长连续 /
+   有记录 / 平均每天）。理由：热力图只回答「哪几天动了手」，回答不了「时间花在什么方向」。
+   两块都是既有数据的第二种切法，没有引入新存储。
+11. **标签分布按「每个标签各计一次」**，而不是把任务分桶到某个标签。一个任务同时属于「后端」和「安全」，
+   对两个方向都算贡献；因此各项之和会大于完成任务数，这一点在卡片脚注与 README 里都写明，
+   免得用户拿它跟「累计完成」对不上账。
+12. **完成周期取中位数**，并且不足一天显示「当天」。平均值会被一条躺了半年的任务拉到 60 天以上，
+   中位数仍然描述「大多数活多久能做完」。负数跨度（时钟回拨或被手工改过的数据）直接跳过。
+13. **「平均每天」按有记录的天数算**，不按自然日。按自然日会把周末与休假算成效率下降。
+
+**被否决的方案**
+
+- _新增 `dailyCompletions` 计数表_：能得到不随删除变化的准确历史，代价是「两份真相」——
+  恢复一条被删的任务要不要把计数加回去？撤销删除、合并导入、快照恢复都会撞上这个问题。
+  宁可数字偏保守，也不要出现「热力图说完成了 5 个，任务列表只有 3 个」。
+- _把热力图放进今日视图顶部_：今日视图腾不开（一排 7 个分组 + 统计卡片已经够满），
+  而且它回答的不是「今天该做什么」。做成独立页面才能给足高度和一年的宽度。
+- _画柱状趋势图_：热力图本身就是趋势的可视化，再叠一个按周聚合的柱状图是同一组数据的第二遍表达。
+  确实要看「最近几周在变多还是变少」时，热力图右侧那几列的深浅已经能看出来。
+- _按最大值相对分档上色_：见结论 4。
+- _给热力图每个格子加独立的可访问名称_：一年 371 个格子逐个朗读只会变成噪音，
+  改为容器一个 `role="img"` 汇总「有多少天产生过记录、累计多少个」，格子本身 `aria-hidden`，
+  悬停的 `title` 作为视觉用户的补充。
+- _把统计入口做成今日视图里的一个按钮_：不可深链、无法收藏，PWA 的 shortcuts 也没有落点。
+- _完成周期用平均值_：见结论 12。平均值仍然算出来留在 `completionCycle().mean` 里供后续使用，
+  只是不作为主指标展示 —— 将来若要做「异常长尾」的提示，那个字段就是入口。
+- _标签分布用饼图_：六个标签的饼图无法按长度比较，且标签名必须挤在图例里。横向条形按长度对齐，
+  标签名左侧留白足够，还能顺便带上标签自己的颜色圆点。
+- _压缩热力图格子来消除滚动条_：把 11px 压到 8px 确实能塞下，但 8px 的方块已经分不清是「一格」
+  还是「两个挨着的格子」。滚动条是果，列宽被文字撑开才是因，改因不改果。
+
+**影响**
+
+- 新增 `src/utils/activity.ts`（纯函数：分组、热力图排布、汇总、连续天数、标签分布、完成周期、
+  最长连续）与 `src/views/StatsView.vue`。
+  组件的职责只有取数与渲染，所有口径都在纯函数里，时间可注入，便于测跨周与跨月的边界。
+- 路由新增 `/stats`；`AppNav` 的入口从两个变三个，`AppNav.spec.ts` 的断言同步更新。
+- 热力图格子带 `data-role="heatmap-cell"` 与 `data-date` / `data-count` / `data-level`，
+  标签条形带 `data-role="tag-bar"` 与 `data-tag` / `data-count`：
+  单测和 e2e 都靠它定位，避免依赖 `size-[11px]` 这类会被改动的样式类。
+- 窄屏（< 768px）热力图仍然横向滚动，这是有意的：一年 53 列在手机上无法在不失真的前提下压缩。
+- 数值会随删除而减少。这一点写进了 README 的已知限制，也写在统计页脚注里 ——
+  用户看到数字变少时能立刻知道原因，而不是怀疑数据坏了。

e2e/stats.spec.ts

@@ -0,0 +1,144 @@
+import { expect, test } from '@playwright/test'
+
+import { addTask } from './helpers'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+/** 点卡片左侧的勾选按钮标记完成 */
+async function completeTask(page: Parameters<typeof addTask>[0], title: string): Promise<void> {
+  await page.locator('article').filter({ hasText: title }).locator('button').first().click()
+}
+
+/** 本地日期 YYYY-MM-DD，与热力图的口径一致 */
+async function todayIso(page: Parameters<typeof addTask>[0]): Promise<string> {
+  return page.evaluate(() => {
+    const now = new Date()
+    const pad = (value: number) => String(value).padStart(2, '0')
+    return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
+  })
+}
+
+test('统计页可从导航进入，汇总数字与热力图同步更新', async ({ page }) => {
+  await addTask(page, '统计任务 A')
+  await completeTask(page, '统计任务 A')
+  await addTask(page, '统计任务 B')
+  await completeTask(page, '统计任务 B')
+
+  await page.getByRole('link', { name: '统计' }).click()
+  await expect(page).toHaveURL(/\/stats$/)
+  await expect(page.getByRole('heading', { name: '统计' })).toBeVisible()
+
+  // 累计与「今天完成」都是 2
+  await expect(
+    page.locator('dl > div').filter({ hasText: '累计完成' }).locator('dd'),
+  ).toContainText('2')
+  await expect(
+    page.locator('dl > div').filter({ hasText: '今天完成' }).locator('dd'),
+  ).toContainText('2')
+
+  // 一年 53 周 × 7 天
+  await expect(page.locator('[data-role="heatmap-cell"]')).toHaveCount(53 * 7)
+
+  const today = await todayIso(page)
+  await expect(page.locator(`[data-role="heatmap-cell"][data-date="${today}"]`)).toHaveAttribute(
+    'data-count',
+    '2',
+  )
+})
+
+test('深链 /stats 可以直接打开，空数据时给出引导', async ({ page }) => {
+  await page.goto('/stats')
+
+  await expect(page.getByRole('heading', { name: '统计' })).toBeVisible()
+  await expect(page.getByText('还没有完成记录')).toBeVisible()
+  // 空数据也渲染完整网格，只是全部为最浅档
+  await expect(page.locator('[data-role="heatmap-cell"]')).toHaveCount(53 * 7)
+})
+
+test('回收站里的任务不计入统计', async ({ page }) => {
+  await addTask(page, '要删掉的任务')
+  await completeTask(page, '要删掉的任务')
+
+  // 删除入口在详情抽屉底部（卡片上只有完成勾选）
+  await page.locator('article').filter({ hasText: '要删掉的任务' }).click()
+  await page.getByRole('dialog').getByRole('button', { name: '删除' }).click()
+
+  await page.goto('/stats')
+  await expect(
+    page.locator('dl > div').filter({ hasText: '累计完成' }).locator('dd'),
+  ).toContainText('0')
+})
+
+test('热力图左右留白对称，不产生横向滚动条也不裁切描边', async ({ page }) => {
+  await page.goto('/stats')
+  await page.waitForSelector('[data-role="heatmap-cell"]')
+
+  const metrics = await page.evaluate(() => {
+    const scroller = document.querySelector('[role="img"]') as HTMLElement
+    const cells = [...document.querySelectorAll('[data-role="heatmap-cell"]')]
+    const box = scroller.getBoundingClientRect()
+    const style = getComputedStyle(scroller)
+    const innerLeft = box.left + parseFloat(style.paddingLeft)
+    const innerRight = box.right - parseFloat(style.paddingRight)
+    const first = cells[0]!.getBoundingClientRect()
+    const last = cells[cells.length - 1]!.getBoundingClientRect()
+    // 今天那格带 ring-1：描边画在元素外侧 1px，贴边就会被 overflow 容器裁掉
+    const today = document.querySelector('[data-role="heatmap-cell"].ring-1')
+
+    return {
+      clientWidth: scroller.clientWidth,
+      scrollWidth: scroller.scrollWidth,
+      leftGap: Math.round(first.left - innerLeft),
+      rightGap: Math.round(innerRight - last.right),
+      ringOverflow: today
+        ? Math.round(today.getBoundingClientRect().right + 1 - innerRight)
+        : null,
+    }
+  })
+
+  // 宽屏（e2e 默认 1280）下内容不溢出，也就没有滚动条
+  expect(metrics.scrollWidth).toBe(metrics.clientWidth)
+
+  // 左右留白相等：左侧是星期标签列（一 / 三 / 五）的宽度，右侧补了同样的宽度。
+  // 少了它右侧会一直贴到卡片边缘，既不对称也会把 ring 描边切掉一条。
+  expect(metrics.leftGap).toBeGreaterThan(0)
+  expect(metrics.rightGap).toBe(metrics.leftGap)
+
+  // ring 必须留有余量，不能顶到容器的裁剪边界
+  expect(metrics.ringOverflow).toBeLessThan(0)
+})
+
+test('标签分布与细节指标随完成情况更新', async ({ page }) => {
+  // 建一个带标签的任务，再从卡片上勾完成
+  await addTask(page, '带标签的活')
+  await page.locator('article').filter({ hasText: '带标签的活' }).click()
+  const tagInput = page.getByLabel('添加标签')
+  await tagInput.fill('设计')
+  await tagInput.press('Enter')
+  await page.getByRole('button', { name: '保存' }).click()
+  await completeTask(page, '带标签的活')
+
+  await page.getByRole('link', { name: '统计' }).click()
+
+  // 标签分布：一条记录算在该标签名下
+  const row = page.locator('[data-role="tag-bar"][data-tag="设计"]')
+  await expect(row).toHaveAttribute('data-count', '1')
+  await expect(row).toContainText('#设计')
+
+  // 细节卡片：只有今天这一天有记录，连续 1 天，平均每天 1.0 个
+  await expect(page.locator('dl > div').filter({ hasText: '有记录' }).locator('dd')).toHaveText(
+    '1 天',
+  )
+  await expect(page.locator('dl > div').filter({ hasText: '最长连续' }).locator('dd')).toHaveText(
+    '1 天',
+  )
+  await expect(page.locator('dl > div').filter({ hasText: '平均每天' }).locator('dd')).toHaveText(
+    '1.0 个',
+  )
+  // 刚建完就完成 → 周期不足 1 天，显示「当天」
+  await expect(
+    page.locator('dl > div').filter({ hasText: '平均完成周期' }).locator('dd'),
+  ).toHaveText('当天')
+})

src/components/AppNav.spec.ts

@@ -25,9 +25,9 @@ async function setup(initialPath = '/') {
 }
 
 describe('AppNav 导航', () => {
-  it('渲染看板与今日两个入口', async () => {
+  it('渲染看板、今日与统计三个入口', async () => {
     const { wrapper } = await setup()
-    expect(wrapper.findAll('a').map((node) => node.text())).toEqual(['看板', '今日'])
+    expect(wrapper.findAll('a').map((node) => node.text())).toEqual(['看板', '今日', '统计'])
   })
 
   it('当前路由的入口标记 aria-current', async () => {

src/components/AppNav.vue

@@ -12,6 +12,7 @@ const store = useTaskStore()
 const LINKS = [
   { to: '/', label: '看板' },
   { to: '/today', label: '今日' },
+  { to: '/stats', label: '统计' },
 ] as const
 </script>
 

src/router/index.ts

@@ -26,6 +26,12 @@ export const routes = [
     component: () => import('@/views/TodayView.vue'),
     meta: { title: '今日' },
   },
+  {
+    path: '/stats',
+    name: 'stats',
+    component: () => import('@/views/StatsView.vue'),
+    meta: { title: '统计' },
+  },
   { path: '/:pathMatch(.*)*', redirect: '/' },
 ]
 

src/utils/activity.spec.ts

@@ -0,0 +1,492 @@
+import { describe, expect, it } from 'vitest'
+
+import type { Task } from '@/types/task'
+
+import {
+  breakdownByTag,
+  buildHeatmap,
+  completionCycle,
+  computeActivitySummary,
+  computeStreak,
+  countCompletionsByDate,
+  DEFAULT_HEATMAP_WEEKS,
+  levelFor,
+  longestStreak,
+  startOfWeekIso,
+  UNTAGGED_LABEL,
+} from './activity'
+
+/** 2026-10-24 是周六，本周一为 2026-10-19 */
+const NOW = new Date(2026, 9, 24, 12, 0, 0)
+
+function makeTask(completedAt: string | null, overrides: Partial<Task> = {}): Task {
+  return {
+    id: `task-${completedAt ?? 'open'}-${overrides.title ?? ''}`,
+    title: '任务',
+    description: '',
+    status: completedAt ? 'done' : 'todo',
+    priority: 2,
+    tags: [],
+    dueDate: null,
+    sortOrder: 1024,
+    createdAt: '2026-10-01T00:00:00.000Z',
+    updatedAt: '2026-10-01T00:00:00.000Z',
+    completedAt,
+    archivedAt: null,
+    deletedAt: null,
+    ...overrides,
+  }
+}
+
+/** 用本地时间构造 ISO，避免测试断言受运行环境时区影响 */
+function localIso(year: number, month: number, day: number, hour = 12): string {
+  return new Date(year, month - 1, day, hour, 0, 0).toISOString()
+}
+
+describe('levelFor', () => {
+  it('0 个为最浅档', () => {
+    expect(levelFor(0)).toBe(0)
+  })
+
+  it('1 到 3 个逐级加深', () => {
+    expect(levelFor(1)).toBe(1)
+    expect(levelFor(2)).toBe(2)
+    expect(levelFor(3)).toBe(3)
+  })
+
+  it('4 个及以上为最深档', () => {
+    expect(levelFor(4)).toBe(4)
+    expect(levelFor(12)).toBe(4)
+  })
+
+  it('负数按 0 处理', () => {
+    expect(levelFor(-1)).toBe(0)
+  })
+})
+
+describe('countCompletionsByDate', () => {
+  it('没有已完成任务时为空', () => {
+    const counts = countCompletionsByDate([makeTask(null)])
+    expect(counts.size).toBe(0)
+  })
+
+  it('同一天完成多条会累加', () => {
+    const counts = countCompletionsByDate([
+      makeTask(localIso(2026, 10, 20)),
+      makeTask(localIso(2026, 10, 20), { title: '第二件' }),
+      makeTask(localIso(2026, 10, 21)),
+    ])
+
+    expect(counts.get('2026-10-20')).toBe(2)
+    expect(counts.get('2026-10-21')).toBe(1)
+  })
+
+  it('晚上完成的任务算在当天，不会被 UTC 推到前一天', () => {
+    const counts = countCompletionsByDate([makeTask(localIso(2026, 10, 24, 23))])
+    expect(counts.get('2026-10-24')).toBe(1)
+  })
+
+  it('清空完成时间后不计入', () => {
+    const counts = countCompletionsByDate([makeTask(localIso(2026, 10, 20)), makeTask(null)])
+    expect(counts.get('2026-10-20')).toBe(1)
+    expect(counts.size).toBe(1)
+  })
+})
+
+describe('startOfWeekIso', () => {
+  it('周六所在周的周一是 10 月 19 日', () => {
+    expect(startOfWeekIso(NOW)).toBe('2026-10-19')
+  })
+
+  it('周一当天返回自己', () => {
+    expect(startOfWeekIso(new Date(2026, 9, 19, 9))).toBe('2026-10-19')
+  })
+
+  it('周日属于上一周，不开启新的一周', () => {
+    expect(startOfWeekIso(new Date(2026, 9, 25, 9))).toBe('2026-10-19')
+  })
+})
+
+describe('buildHeatmap', () => {
+  it('默认生成 53 周（一年），每周 7 天', () => {
+    const weeks = buildHeatmap(new Map(), { now: NOW })
+    expect(weeks).toHaveLength(53)
+    expect(DEFAULT_HEATMAP_WEEKS).toBe(53)
+    expect(weeks.every((week) => week.cells.length === 7)).toBe(true)
+  })
+
+  it('列按时间正序，每列都是周一到周日', () => {
+    const weeks = buildHeatmap(new Map(), { weeks: 3, now: NOW })
+
+    expect(weeks.map((week) => week.key)).toEqual(['2026-10-05', '2026-10-12', '2026-10-19'])
+    expect(weeks[2]?.cells[0]?.date).toBe('2026-10-19')
+    expect(weeks[2]?.cells[6]?.date).toBe('2026-10-25')
+  })
+
+  it('今天之后的格子标记为 future', () => {
+    const weeks = buildHeatmap(new Map(), { weeks: 1, now: NOW })
+    const cells = weeks[0]?.cells ?? []
+
+    // 本周一 19 日到周日 25 日；今天是 24 日（下标 5）
+    expect(cells[5]?.today).toBe(true)
+    expect(cells.slice(0, 6).every((cell) => !cell.future)).toBe(true)
+    expect(cells[6]?.future).toBe(true)
+  })
+
+  it('带入完成数并换算成等级', () => {
+    const counts = new Map([
+      ['2026-10-20', 1],
+      ['2026-10-21', 3],
+      ['2026-10-22', 7],
+    ])
+    const cells = buildHeatmap(counts, { weeks: 1, now: NOW })[0]?.cells ?? []
+
+    expect(cells[1]?.count).toBe(1)
+    expect(cells[1]?.level).toBe(1)
+    expect(cells[2]?.level).toBe(3)
+    expect(cells[3]?.level).toBe(4)
+    expect(cells[0]?.count).toBe(0)
+    expect(cells[0]?.level).toBe(0)
+  })
+
+  it('每个月只在第一周打一个标签', () => {
+    const weeks = buildHeatmap(new Map(), { weeks: 53, now: NOW })
+    const labeled = weeks.filter((week) => week.monthLabel !== null)
+
+    // 一年覆盖 12 个月以上
+    expect(labeled.length).toBeGreaterThanOrEqual(12)
+
+    // 同一个月不会出现两次
+    const months = labeled.map((week) => week.monthLabel as string)
+    expect(new Set(months).size).toBe(months.length)
+
+    // 标签都落在该月第一周（周一在 1–7 号）
+    for (const week of labeled) {
+      expect(Number(week.key.slice(-2))).toBeLessThanOrEqual(7)
+    }
+  })
+
+  it('相邻标签至少隔 4 列，14px 的列宽不会叠字', () => {
+    const weeks = buildHeatmap(new Map(), { weeks: 53, now: NOW })
+    const indexes = weeks.flatMap((week, index) => (week.monthLabel === null ? [] : [index]))
+
+    for (let position = 1; position < indexes.length; position += 1) {
+      expect(indexes[position]! - indexes[position - 1]!).toBeGreaterThanOrEqual(4)
+    }
+  })
+
+  it('周数下限为 1', () => {
+    expect(buildHeatmap(new Map(), { weeks: 0, now: NOW })).toHaveLength(1)
+  })
+})
+
+describe('computeStreak', () => {
+  it('今天有完成时从今天开始数', () => {
+    const counts = new Map([
+      ['2026-10-24', 1],
+      ['2026-10-23', 2],
+      ['2026-10-22', 1],
+    ])
+    expect(computeStreak(counts, NOW)).toBe(3)
+  })
+
+  it('今天还没完成时从昨天开始数，不直接归零', () => {
+    const counts = new Map([
+      ['2026-10-23', 1],
+      ['2026-10-22', 1],
+    ])
+    expect(computeStreak(counts, NOW)).toBe(2)
+  })
+
+  it('断档处停止', () => {
+    const counts = new Map([
+      ['2026-10-24', 1],
+      ['2026-10-22', 1],
+    ])
+    expect(computeStreak(counts, NOW)).toBe(1)
+  })
+
+  it('从未完成过为 0', () => {
+    expect(computeStreak(new Map(), NOW)).toBe(0)
+  })
+
+  it('今天与昨天都没有完成时为 0', () => {
+    const counts = new Map([['2026-10-22', 5]])
+    expect(computeStreak(counts, NOW)).toBe(0)
+  })
+})
+
+describe('computeActivitySummary', () => {
+  const counts = new Map([
+    ['2026-10-24', 2], // 今天
+    ['2026-10-20', 1], // 本周
+    ['2026-10-05', 3], // 本月，非本周
+    ['2026-09-28', 4], // 上个月
+  ])
+
+  it('汇总今天、本周、本月与总数', () => {
+    const summary = computeActivitySummary(counts, NOW)
+
+    expect(summary.today).toBe(2)
+    expect(summary.thisWeek).toBe(3)
+    expect(summary.thisMonth).toBe(6)
+    expect(summary.total).toBe(10)
+    expect(summary.activeDays).toBe(4)
+  })
+
+  it('连续天数复用 computeStreak', () => {
+    expect(computeActivitySummary(counts, NOW).streak).toBe(1)
+  })
+
+  it('最忙的一天取完成数最多的那天', () => {
+    expect(computeActivitySummary(counts, NOW).bestDay).toEqual({
+      date: '2026-09-28',
+      count: 4,
+    })
+  })
+
+  it('并列时取较晚的一天', () => {
+    const tie = new Map([
+      ['2026-10-20', 3],
+      ['2026-10-22', 3],
+    ])
+    expect(computeActivitySummary(tie, NOW).bestDay).toEqual({ date: '2026-10-22', count: 3 })
+  })
+
+  it('没有完成记录时各项为 0，bestDay 为 null', () => {
+    const summary = computeActivitySummary(new Map(), NOW)
+
+    expect(summary).toEqual({
+      today: 0,
+      thisWeek: 0,
+      thisMonth: 0,
+      total: 0,
+      streak: 0,
+      bestDay: null,
+      activeDays: 0,
+    })
+  })
+
+  it('未来日期的记录不计入本周与本月', () => {
+    const future = new Map([['2026-10-30', 5]])
+    const summary = computeActivitySummary(future, NOW)
+
+    expect(summary.total).toBe(5)
+    expect(summary.thisWeek).toBe(0)
+    expect(summary.thisMonth).toBe(0)
+  })
+})
+
+describe('breakdownByTag', () => {
+  it('没有已完成任务时为空数组', () => {
+    expect(breakdownByTag([makeTask(null)])).toEqual([])
+  })
+
+  it('未完成的任务不计入', () => {
+    const items = breakdownByTag([
+      makeTask(localIso(2026, 10, 20), { tags: ['前端'] }),
+      makeTask(null, { title: '还没做', tags: ['前端'] }),
+    ])
+
+    expect(items).toEqual([{ tag: '前端', count: 1 }])
+  })
+
+  it('多标签任务在每个标签下各计一次', () => {
+    const items = breakdownByTag([
+      makeTask(localIso(2026, 10, 20), { tags: ['后端', '安全'] }),
+      makeTask(localIso(2026, 10, 21), { title: 'b', tags: ['安全'] }),
+    ])
+
+    expect(items).toEqual([
+      { tag: '安全', count: 2 },
+      { tag: '后端', count: 1 },
+    ])
+    // 各项之和大于任务数，这是刻意的：多标签任务对多个方向都算贡献
+    expect(items.reduce((sum, item) => sum + item.count, 0)).toBe(3)
+  })
+
+  it('没有标签的已完成任务归入「未分类」', () => {
+    const items = breakdownByTag([
+      makeTask(localIso(2026, 10, 20)),
+      makeTask(localIso(2026, 10, 21), { title: 'b' }),
+      makeTask(localIso(2026, 10, 22), { title: 'c', tags: ['前端'] }),
+    ])
+
+    expect(items).toContainEqual({ tag: UNTAGGED_LABEL, count: 2 })
+    expect(UNTAGGED_LABEL).toBe('未分类')
+  })
+
+  it('全部未分类时不额外产生空标签项', () => {
+    const items = breakdownByTag([makeTask(localIso(2026, 10, 20))])
+    expect(items).toEqual([{ tag: UNTAGGED_LABEL, count: 1 }])
+  })
+
+  it('按数量降序排列', () => {
+    const items = breakdownByTag([
+      makeTask(localIso(2026, 10, 20), { tags: ['少'] }),
+      makeTask(localIso(2026, 10, 21), { title: 'b', tags: ['多'] }),
+      makeTask(localIso(2026, 10, 22), { title: 'c', tags: ['多'] }),
+      makeTask(localIso(2026, 10, 23), { title: 'd', tags: ['多'] }),
+    ])
+
+    expect(items.map((item) => item.tag)).toEqual(['多', '少'])
+  })
+
+  it('数量相同时按标签名排序，保证渲染顺序稳定', () => {
+    const first = breakdownByTag([
+      makeTask(localIso(2026, 10, 20), { tags: ['b'] }),
+      makeTask(localIso(2026, 10, 21), { title: 'x', tags: ['a'] }),
+    ])
+    const second = breakdownByTag([
+      makeTask(localIso(2026, 10, 20), { tags: ['a'] }),
+      makeTask(localIso(2026, 10, 21), { title: 'x', tags: ['b'] }),
+    ])
+
+    expect(first.map((item) => item.tag)).toEqual(['a', 'b'])
+    expect(second.map((item) => item.tag)).toEqual(['a', 'b'])
+  })
+})
+
+describe('completionCycle', () => {
+  it('没有已完成任务时返回 null', () => {
+    expect(completionCycle([makeTask(null)])).toBeNull()
+  })
+
+  it('单个样本时中位数、平均都等于该跨度', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 3, 0), { createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    expect(cycle).toEqual({ median: 2, mean: 2, sample: 1 })
+  })
+
+  it('奇数个样本取中间值', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 3, 0), { title: 'a', createdAt: localIso(2026, 10, 1, 0) }),
+      makeTask(localIso(2026, 10, 13, 0), { title: 'b', createdAt: localIso(2026, 10, 1, 0) }),
+      makeTask(localIso(2026, 10, 8, 0), { title: 'c', createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    // 跨度为 2、12、7 → 排序后 2、7、12，中位数 7
+    expect(cycle?.median).toBe(7)
+    expect(cycle?.sample).toBe(3)
+    expect(cycle?.mean).toBeCloseTo(7, 5)
+  })
+
+  it('偶数个样本取中间两个的平均', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 3, 0), { title: 'a', createdAt: localIso(2026, 10, 1, 0) }),
+      makeTask(localIso(2026, 10, 11, 0), { title: 'b', createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    // 跨度为 2、10 → 中位数 6
+    expect(cycle?.median).toBe(6)
+    expect(cycle?.sample).toBe(2)
+  })
+
+  it('中位数不被极端值拉偏', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 2, 0), { title: 'a', createdAt: localIso(2026, 10, 1, 0) }),
+      makeTask(localIso(2026, 10, 3, 0), { title: 'b', createdAt: localIso(2026, 10, 1, 0) }),
+      makeTask(localIso(2027, 4, 1, 0), { title: '躺了半年', createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    expect(cycle?.median).toBe(2)
+    // 平均被那条躺了半年的任务拉到 60 天以上 —— 这正是主指标用中位数的原因
+    expect(cycle?.mean).toBeGreaterThan(50)
+  })
+
+  it('完成时间早于创建时间的脏数据直接跳过', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 1, 0), { title: '回溯', createdAt: localIso(2026, 10, 5, 0) }),
+      makeTask(localIso(2026, 10, 3, 0), { title: '正常', createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    expect(cycle?.sample).toBe(1)
+    expect(cycle?.median).toBe(2)
+  })
+
+  it('当天创建当天完成时跨度不足 1 天', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 1, 20), { createdAt: localIso(2026, 10, 1, 9) }),
+    ])
+
+    // 9:00 → 20:00 共 11 小时 = 0.46 天；视图据此显示「当天」而不是「0.5 天」
+    expect(cycle?.median).toBeCloseTo(11 / 24, 5)
+    expect(cycle?.median).toBeLessThan(1)
+  })
+
+  it('未完成的任务不参与统计', () => {
+    const cycle = completionCycle([
+      makeTask(localIso(2026, 10, 3, 0), { createdAt: localIso(2026, 10, 1, 0) }),
+      makeTask(null, { title: '还在做', createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    expect(cycle?.sample).toBe(1)
+  })
+})
+
+describe('longestStreak', () => {
+  it('没有任何记录时为 0', () => {
+    expect(longestStreak(new Map())).toBe(0)
+  })
+
+  it('连续的几天取最长的一段', () => {
+    const counts = new Map([
+      ['2026-10-01', 1],
+      ['2026-10-02', 3],
+      ['2026-10-03', 1],
+      ['2026-10-10', 1],
+      ['2026-10-11', 2],
+    ])
+
+    expect(longestStreak(counts)).toBe(3)
+  })
+
+  it('跨月连续合并计算', () => {
+    const counts = new Map([
+      ['2026-09-29', 1],
+      ['2026-09-30', 1],
+      ['2026-10-01', 1],
+      ['2026-10-02', 1],
+    ])
+
+    expect(longestStreak(counts)).toBe(4)
+  })
+
+  it('计数为 0 的日期不算连续', () => {
+    const counts = new Map([
+      ['2026-10-01', 1],
+      ['2026-10-02', 0],
+      ['2026-10-03', 1],
+    ])
+
+    expect(longestStreak(counts)).toBe(1)
+  })
+
+  it('全部不连续时为 1', () => {
+    const counts = new Map([
+      ['2026-10-01', 1],
+      ['2026-10-05', 1],
+      ['2026-10-20', 1],
+    ])
+
+    expect(longestStreak(counts)).toBe(1)
+  })
+
+  it('不受 Map 插入顺序影响', () => {
+    const forward = new Map([
+      ['2026-10-01', 1],
+      ['2026-10-02', 1],
+      ['2026-10-03', 1],
+    ])
+    const backward = new Map([
+      ['2026-10-03', 1],
+      ['2026-10-02', 1],
+      ['2026-10-01', 1],
+    ])
+
+    expect(longestStreak(backward)).toBe(longestStreak(forward))
+    expect(longestStreak(backward)).toBe(3)
+  })
+})

src/utils/activity.ts

@@ -0,0 +1,326 @@
+/**
+ * 完成活动统计：按日汇总、热力图、汇总指标（见 ADR-012）
+ *
+ * 数据来源**只有** `Task.completedAt`，不额外存「每日完成计数」。
+ * 因此这里的统计是「基于现存任务的近似」：永久删除、清空回收站、
+ * 超过 30 天自动清理的任务，会连同它那天的完成记录一起消失。
+ *
+ * 这是刻意取舍：引入第二份计数数据能得到不随删除变化的准确历史，
+ * 代价是「两份真相」—— 恢复一条被删的任务时该不该把计数加回去？
+ * 撤销删除、合并导入都会遇到这个问题。宁可数字偏保守，也不要自相矛盾。
+ */
+
+import dayjs from 'dayjs'
+
+import type { Task } from '@/types/task'
+import { localDateOf } from '@/utils/date'
+
+/** 热力图默认展示的周数（一年）。半年只占卡片一半宽，且看不出季节性的起伏 */
+export const DEFAULT_HEATMAP_WEEKS = 53
+
+export type HeatmapLevel = 0 | 1 | 2 | 3 | 4
+
+/**
+ * 强度分档：当天完成数 → 等级。
+ * 固定阈值比按最大值分档更可预测 —— 后者在数据变多时会让所有格子一起变深，
+ * 反而看不出「哪天特别猛」。
+ */
+export function levelFor(count: number): HeatmapLevel {
+  if (count <= 0) return 0
+  if (count === 1) return 1
+  if (count === 2) return 2
+  if (count === 3) return 3
+  return 4
+}
+
+export interface HeatmapCell {
+  /** YYYY-MM-DD（本地日期） */
+  date: string
+  count: number
+  level: HeatmapLevel
+  /** 今天之后的日期：留白，避免出现「未来已经完成了 0 个」这种噪音 */
+  future: boolean
+  /** 是否为今天 */
+  today: boolean
+}
+
+export interface HeatmapWeek {
+  /** 该周周一的日期，作为渲染 key */
+  key: string
+  /** 周一到周日，共 7 格 */
+  cells: HeatmapCell[]
+  /** 需要显示月份标签时给出（如「9月」），否则为 null */
+  monthLabel: string | null
+}
+
+/**
+ * 按本地日期汇总完成数。
+ *
+ * 必须逐条走 `localDateOf`：`completedAt` 存的是 UTC ISO，
+ * 直接截取前 10 位在东八区会把晚上完成的任务算到前一天。
+ */
+export function countCompletionsByDate(tasks: readonly Task[]): Map<string, number> {
+  const counts = new Map<string, number>()
+
+  for (const task of tasks) {
+    if (task.completedAt === null) continue
+    const date = localDateOf(task.completedAt)
+    if (date === null) continue
+    counts.set(date, (counts.get(date) ?? 0) + 1)
+  }
+
+  return counts
+}
+
+/** 本周周一的日期（周一为一周之始，与 `utils/stats.ts` 的口径一致） */
+export function startOfWeekIso(now: Date = new Date()): string {
+  const current = dayjs(now).startOf('day')
+  return current.subtract((current.day() + 6) % 7, 'day').format('YYYY-MM-DD')
+}
+
+/**
+ * 生成热力图：列为一周，行为周一到周日，按时间正序。
+ *
+ * 传入 `counts` 而不是任务列表，是为了让这个函数只负责「排布」，
+ * 汇总与排布可以分开测试。
+ */
+export function buildHeatmap(
+  counts: ReadonlyMap<string, number>,
+  options: { weeks?: number; now?: Date } = {},
+): HeatmapWeek[] {
+  const weeks = Math.max(1, options.weeks ?? DEFAULT_HEATMAP_WEEKS)
+  const today = dayjs(options.now ?? new Date()).startOf('day')
+
+  const currentWeekStart = today.subtract((today.day() + 6) % 7, 'day')
+  const firstWeekStart = currentWeekStart.subtract(weeks - 1, 'week')
+
+  const result: HeatmapWeek[] = []
+
+  for (let index = 0; index < weeks; index += 1) {
+    const weekStart = firstWeekStart.add(index, 'week')
+    const cells: HeatmapCell[] = []
+
+    for (let offset = 0; offset < 7; offset += 1) {
+      const day = weekStart.add(offset, 'day')
+      const date = day.format('YYYY-MM-DD')
+      const count = counts.get(date) ?? 0
+
+      cells.push({
+        date,
+        count,
+        level: levelFor(count),
+        future: day.isAfter(today, 'day'),
+        today: day.isSame(today, 'day'),
+      })
+    }
+
+    /**
+     * 只在该月第一周打标签（周一落在 1–7 号）。
+     *
+     * 用「月份变了就打」会让 4 月与 5 月这种相邻的两周各打一个，
+     * 而每列只有 14px 宽，两个标签会叠在一起。每个月恰好一次，
+     * 间隔必然在 4 列以上，也就不会撞车。
+     */
+    const labelMonth = weekStart.date() <= 7 ? weekStart.month() + 1 : null
+
+    result.push({
+      key: weekStart.format('YYYY-MM-DD'),
+      cells,
+      monthLabel: labelMonth === null ? null : `${labelMonth}月`,
+    })
+  }
+
+  return result
+}
+
+export interface ActivitySummary {
+  /** 今天完成数 */
+  today: number
+  /** 本周（周一起）完成数 */
+  thisWeek: number
+  /** 本月完成数 */
+  thisMonth: number
+  /** 全部完成数 */
+  total: number
+  /** 连续完成天数 */
+  streak: number
+  /** 完成最多的一天；从未完成过时为 null */
+  bestDay: { date: string; count: number } | null
+  /** 有完成记录的天数 */
+  activeDays: number
+}
+
+/**
+ * 连续完成天数。
+ *
+ * 今天还没完成时从昨天开始数 —— 否则每天零点一过 streak 就归零，
+ * 会在用户还没开始工作的时候先把成绩抹掉。
+ */
+export function computeStreak(counts: ReadonlyMap<string, number>, now: Date = new Date()): number {
+  let cursor = dayjs(now).startOf('day')
+  if ((counts.get(cursor.format('YYYY-MM-DD')) ?? 0) === 0) {
+    cursor = cursor.subtract(1, 'day')
+  }
+
+  let streak = 0
+  while ((counts.get(cursor.format('YYYY-MM-DD')) ?? 0) > 0) {
+    streak += 1
+    cursor = cursor.subtract(1, 'day')
+  }
+
+  return streak
+}
+
+export function computeActivitySummary(
+  counts: ReadonlyMap<string, number>,
+  now: Date = new Date(),
+): ActivitySummary {
+  const todayIso = dayjs(now).format('YYYY-MM-DD')
+  const weekStart = startOfWeekIso(now)
+  const monthStart = dayjs(now).startOf('month').format('YYYY-MM-DD')
+
+  let total = 0
+  let thisWeek = 0
+  let thisMonth = 0
+  let activeDays = 0
+  let bestDay: { date: string; count: number } | null = null
+
+  for (const [date, count] of counts) {
+    if (count <= 0) continue
+
+    total += count
+    activeDays += 1
+    if (date >= weekStart && date <= todayIso) thisWeek += count
+    if (date >= monthStart && date <= todayIso) thisMonth += count
+
+    // 并列时取较晚的一天：最近的高光比上个月的更有参考价值
+    if (
+      bestDay === null ||
+      count > bestDay.count ||
+      (count === bestDay.count && date > bestDay.date)
+    ) {
+      bestDay = { date, count }
+    }
+  }
+
+  return {
+    today: counts.get(todayIso) ?? 0,
+    thisWeek,
+    thisMonth,
+    total,
+    streak: computeStreak(counts, now),
+    bestDay,
+    activeDays,
+  }
+}
+
+/** 没有标签的已完成任务在分布里归到这个名字 */
+export const UNTAGGED_LABEL = '未分类'
+
+export interface TagBreakdownItem {
+  tag: string
+  count: number
+}
+
+/**
+ * 已完任务按标签分布，按数量降序。
+ *
+ * 一个任务有多个标签时每个标签各 +1，因此各项之和会大于任务数。
+ * 这里回答的是「这类活做了多少件」，不是「任务如何分桶」——
+ * 一件同时属于「后端」和「安全」的活，对两个方向都算贡献。
+ */
+export function breakdownByTag(tasks: readonly Task[]): TagBreakdownItem[] {
+  const counter = new Map<string, number>()
+  let untagged = 0
+
+  for (const task of tasks) {
+    if (task.completedAt === null) continue
+
+    if (task.tags.length === 0) {
+      untagged += 1
+      continue
+    }
+    for (const tag of task.tags) {
+      counter.set(tag, (counter.get(tag) ?? 0) + 1)
+    }
+  }
+
+  const items: TagBreakdownItem[] = [...counter.entries()].map(([tag, count]) => ({ tag, count }))
+  if (untagged > 0) items.push({ tag: UNTAGGED_LABEL, count: untagged })
+
+  // 数量相同时按标签名排，保证每次渲染顺序稳定
+  return items.sort(
+    (a, b) => b.count - a.count || a.tag.localeCompare(b.tag, 'zh-Hans-CN'),
+  )
+}
+
+export interface CompletionCycle {
+  /** 中位数天数 —— 抗极端值，代表「通常要多久」 */
+  median: number
+  /** 平均天数 */
+  mean: number
+  /** 参与统计的任务数 */
+  sample: number
+}
+
+/**
+ * 从创建到完成要多久，只统计已完成的任务。
+ *
+ * 用中位数而不是平均作为主指标：一条躺了半年的任务就能把平均值拉到离谱，
+ * 而中位数仍然描述「大多数活多久能做完」。没有可统计的任务时返回 null。
+ */
+export function completionCycle(tasks: readonly Task[]): CompletionCycle | null {
+  const days: number[] = []
+
+  for (const task of tasks) {
+    if (task.completedAt === null) continue
+
+    const created = dayjs(task.createdAt)
+    const completed = dayjs(task.completedAt)
+    if (!created.isValid() || !completed.isValid()) continue
+
+    const span = completed.diff(created, 'day', true)
+    // 时钟回拨或被手工改过的数据会出现负数，直接跳过而不是让它污染中位数
+    if (span < 0) continue
+    days.push(span)
+  }
+
+  if (days.length === 0) return null
+
+  days.sort((a, b) => a - b)
+  const middle = Math.floor(days.length / 2)
+  const median =
+    days.length % 2 === 0
+      ? ((days[middle - 1] ?? 0) + (days[middle] ?? 0)) / 2
+      : (days[middle] ?? 0)
+  const mean = days.reduce((sum, value) => sum + value, 0) / days.length
+
+  return { median, mean, sample: days.length }
+}
+
+/**
+ * 历史最长连续完成天数。
+ *
+ * 与 `computeStreak`（当前连续）不同：这个看整个记录期，
+ * 用来回答「我最拼的那段时间坚持了多久」。
+ */
+export function longestStreak(counts: ReadonlyMap<string, number>): number {
+  const dates = [...counts.entries()]
+    .filter(([, count]) => count > 0)
+    .map(([date]) => date)
+    .sort()
+
+  let best = 0
+  let run = 0
+  let previous: string | null = null
+
+  for (const date of dates) {
+    // 用 dayjs 算相邻差，避免自己处理月份与闰年
+    const adjacent = previous !== null && dayjs(date).diff(dayjs(previous), 'day') === 1
+    run = adjacent ? run + 1 : 1
+    if (run > best) best = run
+    previous = date
+  }
+
+  return best
+}

src/views/StatsView.spec.ts

@@ -0,0 +1,301 @@
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createMemoryTaskRepository } from '@/data/taskRepository'
+import { useTaskStore } from '@/stores/tasks'
+import { DEFAULT_HEATMAP_WEEKS } from '@/utils/activity'
+import type { Task } from '@/types/task'
+
+import StatsView from './StatsView.vue'
+
+/** 2026-10-24 是周六 */
+const NOW = new Date(2026, 9, 24, 12, 0, 0)
+
+function localIso(year: number, month: number, day: number, hour = 12): string {
+  return new Date(year, month - 1, day, hour, 0, 0).toISOString()
+}
+
+function makeTask(completedAt: string | null, overrides: Partial<Task> = {}): Task {
+  return {
+    id: `task-${completedAt ?? 'open'}-${overrides.title ?? ''}`,
+    title: '任务',
+    description: '',
+    status: completedAt ? 'done' : 'todo',
+    priority: 2,
+    tags: [],
+    dueDate: null,
+    sortOrder: 1024,
+    createdAt: '2026-10-01T00:00:00.000Z',
+    updatedAt: '2026-10-01T00:00:00.000Z',
+    completedAt,
+    archivedAt: null,
+    deletedAt: null,
+    ...overrides,
+  }
+}
+
+function mountView(tasks: Task[] = []): VueWrapper {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const store = useTaskStore()
+  store.init({ repository: createMemoryTaskRepository(tasks), crossTab: false })
+
+  return mount(StatsView, { global: { plugins: [pinia] } })
+}
+
+/**
+ * 读取某张统计卡片的数字。
+ * 不能用「包含 dt 的第一个 div」——外层 grid 也满足，会永远读到第一张卡。
+ */
+function cardValue(wrapper: VueWrapper, label: string): string | undefined {
+  const dt = wrapper.findAll('dt').find((node) => node.text() === label)
+  const dd = dt?.element.parentElement?.querySelector('dd')
+  return dd?.textContent?.trim()
+}
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.setSystemTime(NOW)
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('统计视图 · 空状态', () => {
+  it('没有任何完成记录时各项为 0', () => {
+    const wrapper = mountView([makeTask(null)])
+
+    expect(cardValue(wrapper, '今天完成')).toContain('0')
+    expect(cardValue(wrapper, '累计完成')).toContain('0')
+  })
+
+  it('提示如何让热力图亮起来', () => {
+    const wrapper = mountView()
+    expect(wrapper.text()).toContain('还没有完成记录')
+  })
+
+  it('仍然渲染完整的热力图网格', () => {
+    const wrapper = mountView()
+    expect(wrapper.findAll('[data-role="heatmap-cell"]')).toHaveLength(DEFAULT_HEATMAP_WEEKS * 7)
+  })
+})
+
+describe('统计视图 · 汇总数字', () => {
+  const tasks = [
+    makeTask(localIso(2026, 10, 24)), // 今天
+    makeTask(localIso(2026, 10, 24), { title: '今天第二件' }),
+    makeTask(localIso(2026, 10, 20)), // 本周
+    makeTask(localIso(2026, 10, 5)), // 本月
+    makeTask(localIso(2026, 9, 28)), // 上月
+  ]
+
+  it('今天完成数', () => {
+    expect(cardValue(mountView(tasks), '今天完成')).toContain('2')
+  })
+
+  it('本月完成数包含本周但不含上月', () => {
+    expect(cardValue(mountView(tasks), '本月完成')).toContain('4')
+  })
+
+  it('累计完成数包含所有月份', () => {
+    expect(cardValue(mountView(tasks), '累计完成')).toContain('5')
+  })
+
+  it('连续天数按今天与昨天计算', () => {
+    // 今天有记录，昨天没有 → 连续 1 天
+    expect(cardValue(mountView(tasks), '连续完成')).toContain('1')
+  })
+
+  it('显示最忙的一天', () => {
+    const wrapper = mountView(tasks)
+    expect(wrapper.text()).toContain('最忙的一天')
+    // 今天完成了 2 个，是这批数据里最多的一天
+    expect(wrapper.text()).toContain('10月24日 · 2 个')
+  })
+})
+
+describe('统计视图 · 热力图', () => {
+  it('每个格子带上日期与完成数，供悬停查看', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 22)),
+      makeTask(localIso(2026, 10, 22), { title: 'b' }),
+    ])
+    const cell = wrapper.find('[data-role="heatmap-cell"][data-date="2026-10-22"]')
+
+    expect(cell.exists()).toBe(true)
+    expect(cell.attributes('data-count')).toBe('2')
+    expect(cell.attributes('data-level')).toBe('2')
+    expect(cell.attributes('title')).toContain('完成 2 个')
+  })
+
+  it('今天之后的格子不可见', () => {
+    const wrapper = mountView()
+    const future = wrapper.find('[data-role="heatmap-cell"][data-date="2026-10-25"]')
+
+    expect(future.classes()).toContain('invisible')
+  })
+
+  it('今天有标记但与未来格子区分开', () => {
+    const wrapper = mountView()
+    const today = wrapper.find('[data-role="heatmap-cell"][data-date="2026-10-24"]')
+
+    expect(today.classes()).not.toContain('invisible')
+    expect(today.classes()).toContain('ring-1')
+  })
+
+  it('没有完成的那天用最浅档', () => {
+    const wrapper = mountView()
+    const cell = wrapper.find('[data-role="heatmap-cell"][data-date="2026-10-01"]')
+    expect(cell.attributes('data-level')).toBe('0')
+  })
+})
+
+describe('统计视图 · 回收站', () => {
+  it('不统计回收站里的任务', () => {
+    const deleted = makeTask(localIso(2026, 10, 24), {
+      title: '删掉的',
+      deletedAt: localIso(2026, 10, 24),
+    })
+    const wrapper = mountView([deleted])
+
+    expect(cardValue(wrapper, '累计完成')).toContain('0')
+  })
+
+  it('已归档的任务仍然计入', () => {
+    const archived = makeTask(localIso(2026, 10, 20), {
+      title: '归档的',
+      archivedAt: localIso(2026, 10, 21),
+    })
+    const wrapper = mountView([archived])
+
+    expect(cardValue(wrapper, '累计完成')).toContain('1')
+  })
+})
+
+describe('统计视图 · 时间花在哪', () => {
+  /** 读取标签条形图的行，返回 [标签, 数量] 对 */
+  function tagRows(wrapper: VueWrapper): Array<[string, number]> {
+    return wrapper
+      .findAll('[data-role="tag-bar"]')
+      .map((node) => [
+        node.attributes('data-tag') as string,
+        Number(node.attributes('data-count')),
+      ])
+  }
+
+  it('没有完成记录时显示空状态', () => {
+    const wrapper = mountView()
+    expect(wrapper.text()).toContain('还没有带标签的完成记录')
+  })
+
+  it('按标签汇总，数量多的排在前面', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 20), { tags: ['前端'] }),
+      makeTask(localIso(2026, 10, 21), { title: 'b', tags: ['后端'] }),
+      makeTask(localIso(2026, 10, 22), { title: 'c', tags: ['后端'] }),
+    ])
+
+    expect(tagRows(wrapper)).toEqual([
+      ['后端', 2],
+      ['前端', 1],
+    ])
+  })
+
+  it('一个任务带多个标签时，每个标签各计一次', () => {
+    const wrapper = mountView([makeTask(localIso(2026, 10, 20), { tags: ['后端', '安全'] })])
+
+    expect(tagRows(wrapper)).toEqual([
+      ['安全', 1],
+      ['后端', 1],
+    ])
+  })
+
+  it('没有标签的完成记录归入「未分类」', () => {
+    const wrapper = mountView([makeTask(localIso(2026, 10, 20))])
+    expect(tagRows(wrapper)).toEqual([['未分类', 1]])
+  })
+
+  it('最多只展示前 6 个标签', () => {
+    const tasks = Array.from({ length: 8 }, (_, index) =>
+      makeTask(localIso(2026, 10, 10 + index), { title: `t${index}`, tags: [`标签${index}`] }),
+    )
+    const wrapper = mountView(tasks)
+
+    expect(tagRows(wrapper)).toHaveLength(6)
+    expect(wrapper.text()).toContain('前 6 项')
+  })
+
+  it('标签条宽度按最大项归一', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 20), { tags: ['多'] }),
+      makeTask(localIso(2026, 10, 21), { title: 'b', tags: ['多'] }),
+      makeTask(localIso(2026, 10, 22), { title: 'c', tags: ['少'] }),
+    ])
+
+    const bars = wrapper.findAll('[data-role="tag-bar"]')
+    const width = (index: number): string =>
+      bars[index]!.find('[style]').attributes('style') ?? ''
+
+    // 最大项占满、次项占一半
+    expect(width(0)).toContain('width: 100%')
+    expect(width(1)).toContain('width: 50%')
+  })
+
+  it('未完成的任务不进入分布', () => {
+    const wrapper = mountView([makeTask(null, { tags: ['还没做'] })])
+    expect(tagRows(wrapper)).toEqual([])
+  })
+})
+
+describe('统计视图 · 一些细节', () => {
+  it('没有完成记录时周期显示为占位符', () => {
+    const wrapper = mountView()
+    expect(cardValue(wrapper, '平均完成周期')).toBe('—')
+    expect(cardValue(wrapper, '最长连续')).toBe('0 天')
+  })
+
+  it('平均完成周期取中位数', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 22, 0), { title: 'a', createdAt: localIso(2026, 10, 20, 0) }),
+      makeTask(localIso(2026, 10, 23, 0), { title: 'b', createdAt: localIso(2026, 10, 21, 0) }),
+      makeTask(localIso(2027, 4, 1, 0), { title: '躺了很久', createdAt: localIso(2026, 10, 1, 0) }),
+    ])
+
+    // 跨度为 2、2、182 天，中位数 2；平均会被拉偏（60 天以上），所以不用平均
+    expect(cardValue(wrapper, '平均完成周期')).toBe('2.0 天')
+  })
+
+  it('当天完成显示「当天」而不是 0 天', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 24, 18), { createdAt: localIso(2026, 10, 24, 9) }),
+    ])
+
+    expect(cardValue(wrapper, '平均完成周期')).toBe('当天')
+  })
+
+  it('最长连续与有记录天数', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 22)),
+      makeTask(localIso(2026, 10, 23), { title: 'b' }),
+      makeTask(localIso(2026, 10, 24), { title: 'c' }),
+      makeTask(localIso(2026, 10, 10), { title: 'd' }),
+    ])
+
+    expect(cardValue(wrapper, '最长连续')).toBe('3 天')
+    expect(cardValue(wrapper, '有记录')).toBe('4 天')
+  })
+
+  it('平均每天按「有记录的天数」而不是自然日计算', () => {
+    const wrapper = mountView([
+      makeTask(localIso(2026, 10, 22)),
+      makeTask(localIso(2026, 10, 22), { title: 'b' }),
+      makeTask(localIso(2026, 10, 24), { title: 'c' }),
+    ])
+
+    // 3 个任务分布在 2 天 → 1.5；不是 3 / 30 天
+    expect(cardValue(wrapper, '平均每天')).toBe('1.5 个')
+  })
+})

src/views/StatsView.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+/**
+ * 统计视图：完成趋势与热力图（ADR-012）
+ *
+ * 与今日视图的分工：今日视图往前看（该做什么），这里往回看（做过什么）。
+ * 因此做成独立路由而不是塞进今日视图 —— 两者的信息密度和使用时机都不同。
+ */
+
+import dayjs from 'dayjs'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { useTagColorStore } from '@/stores/tagColors'
+import { useTaskStore } from '@/stores/tasks'
+import {
+  breakdownByTag,
+  buildHeatmap,
+  completionCycle,
+  computeActivitySummary,
+  countCompletionsByDate,
+  DEFAULT_HEATMAP_WEEKS,
+  longestStreak,
+  UNTAGGED_LABEL,
+  type HeatmapLevel,
+} from '@/utils/activity'
+
+/**
+ * 只显示 周一 / 周三 / 周五，其余留空占位。
+ * 七个标签全写会挤成一列噪音，GitHub 的惯例只标奇数行。
+ */
+const WEEKDAY_LABELS = ['一', '', '三', '', '五', '', ''] as const
+
+/**
+ * 强度色阶。必须是**完整类名字符串** —— Tailwind v4 构建时扫描源码，
+ * 动态拼接（`bg-emerald-${level}00`）不会被生成，样式会静默失效。
+ *
+ * 用 emerald 而不是蓝色：项目里「完成」一律是绿色，和看板已完成列的语义一致。
+ */
+const LEVEL_CLASSES: Record<HeatmapLevel, string> = {
+  0: 'bg-slate-100 dark:bg-zinc-800',
+  1: 'bg-emerald-200 dark:bg-emerald-900',
+  2: 'bg-emerald-300 dark:bg-emerald-700',
+  3: 'bg-emerald-400 dark:bg-emerald-600',
+  4: 'bg-emerald-500 dark:bg-emerald-400',
+}
+
+const LEVELS: readonly HeatmapLevel[] = [0, 1, 2, 3, 4]
+
+const store = useTaskStore()
+const tagColors = useTagColorStore()
+const { activeTasks } = storeToRefs(store)
+
+/** 只展示前 6 个标签，再多就成一张读不完的清单了 */
+const TOP_TAGS = 6
+
+/** 回收站里的任务不计入：软删除的语义是「这件事不算了」 */
+const counts = computed(() => countCompletionsByDate(activeTasks.value))
+const summary = computed(() => computeActivitySummary(counts.value))
+const heatmap = computed(() => buildHeatmap(counts.value, { weeks: DEFAULT_HEATMAP_WEEKS }))
+
+const cycle = computed(() => completionCycle(activeTasks.value))
+const longest = computed(() => longestStreak(counts.value))
+
+const tagBreakdown = computed(() => breakdownByTag(activeTasks.value).slice(0, TOP_TAGS))
+/** 条长按最大项归一；全为 0 时兜底 1，避免除零 */
+const tagMax = computed(() => Math.max(1, ...tagBreakdown.value.map((item) => item.count)))
+
+const averagePerActiveDay = computed(() => {
+  const days = summary.value.activeDays
+  return days === 0 ? 0 : summary.value.total / days
+})
+
+/** 小数只保留一位；超过 10 天再带小数就没意义了 */
+function formatDays(value: number): string {
+  return value < 10 ? value.toFixed(1) : String(Math.round(value))
+}
+
+const cycleLabel = computed(() => {
+  const stats = cycle.value
+  if (stats === null) return '—'
+  if (stats.median < 1) return '当天'
+  return `${formatDays(stats.median)} 天`
+})
+
+const detailCards = computed(() => [
+  { label: '平均完成周期', value: cycleLabel.value },
+  { label: '最长连续', value: `${longest.value} 天` },
+  { label: '有记录', value: `${summary.value.activeDays} 天` },
+  { label: '平均每天', value: `${formatDays(averagePerActiveDay.value)} 个` },
+])
+
+/** 标签条的颜色跟随标签圆点；未分类与未设色的标签用中性灰 */
+function barClass(tag: string): string {
+  if (tag === UNTAGGED_LABEL) return 'bg-slate-400'
+  return tagColors.dotClassOf(tag) ?? 'bg-slate-400'
+}
+
+const cards = computed(() => [
+  { label: '今天完成', value: summary.value.today, unit: '个', dot: 'bg-sky-500' },
+  { label: '连续完成', value: summary.value.streak, unit: '天', dot: 'bg-emerald-500' },
+  { label: '本月完成', value: summary.value.thisMonth, unit: '个', dot: 'bg-violet-500' },
+  { label: '累计完成', value: summary.value.total, unit: '个', dot: 'bg-slate-400' },
+])
+
+const bestDayLabel = computed(() => {
+  const best = summary.value.bestDay
+  if (!best) return null
+  return `${dayjs(best.date).format('M月D日')} · ${best.count} 个`
+})
+
+/** 热力图的读屏摘要：几百个格子逐个念出来只会变成噪音，聚合到容器上 */
+const heatmapLabel = computed(
+  () =>
+    `最近一年的完成热力图，` +
+    `有 ${summary.value.activeDays} 天产生过完成记录，累计 ${summary.value.total} 个任务`,
+)
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+    <div class="mx-auto flex w-full max-w-4xl flex-col gap-5 p-4 md:p-6">
+      <header class="flex flex-col gap-0.5">
+        <h1
+          class="text-xl font-semibold tracking-tight text-slate-900 md:text-2xl dark:text-zinc-100"
+        >
+          统计
+        </h1>
+        <p class="text-sm text-slate-500 dark:text-zinc-400">
+          基于任务的完成时间统计，不含回收站里的任务
+        </p>
+      </header>
+
+      <dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <div
+          v-for="card in cards"
+          :key="card.label"
+          class="rounded-xl border border-slate-200 bg-white px-4 py-3.5 shadow-card dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <dt class="flex items-center gap-1.5 text-xs text-slate-500 dark:text-zinc-400">
+            <span class="size-1.5 rounded-full" :class="card.dot" aria-hidden="true" />
+            {{ card.label }}
+          </dt>
+          <dd
+            class="mt-1.5 text-2xl font-bold tracking-tight tabular-nums text-slate-900 dark:text-zinc-100"
+          >
+            {{ card.value
+            }}<span class="ml-0.5 text-sm font-normal text-slate-400 dark:text-zinc-500">{{
+              card.unit
+            }}</span>
+          </dd>
+        </div>
+      </dl>
+
+      <section
+        class="rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-card dark:border-zinc-800 dark:bg-zinc-900"
+      >
+        <div class="mb-3 flex flex-wrap items-baseline justify-between gap-2">
+          <h2 class="text-sm font-medium text-slate-900 dark:text-zinc-100">
+            完成热力图
+            <span class="ml-1 text-xs font-normal text-slate-400 dark:text-zinc-500"> 近一年 </span>
+          </h2>
+
+          <div class="flex items-center gap-1 text-[10px] text-slate-400 dark:text-zinc-500">
+            <span>少</span>
+            <span
+              v-for="level in LEVELS"
+              :key="level"
+              class="size-[11px] rounded-[2px]"
+              :class="LEVEL_CLASSES[level]"
+              aria-hidden="true"
+            />
+            <span>多</span>
+          </div>
+        </div>
+
+        <!--
+          格子固定 11px（压到 8px 以下就分不清了），多出来的宽度交给列间距：
+          周列容器用 `flex-1` 占满剩余宽度，`justify-between` 把富余空间均分到 52 个间隙。
+          宽屏下间隙从 3px 涨到 4.1px，整块热力图铺满卡片、左右不再偏斜。
+
+          `pr-[15px]` 是左侧星期标签列的镜像（`w-3` 12px + 父级 gap 3px）：
+          补上它，方块阵列距内容左右边界各 15px，视觉才真正对称；
+          同时也给最后一列今天那格的 `ring-1` 留出位置 —— ring 画在元素外侧 1px，
+          贴到 overflow 容器边界上会被裁掉（实测超出 1px，右侧描边缺一条）。
+
+          不能靠 `mx-auto` 居中：`inline-flex` 是行内级元素，auto margin 在水平方向
+          按 0 处理，实测 814 的容器里左边贴 15px、右边空 60px，整块偏左。
+        -->
+        <div class="overflow-x-auto pt-[1px] pb-1" role="img" :aria-label="heatmapLabel">
+          <div class="flex gap-[3px] pr-[15px]">
+            <div class="mt-[17px] flex shrink-0 flex-col gap-[3px]" aria-hidden="true">
+              <span
+                v-for="(label, index) in WEEKDAY_LABELS"
+                :key="index"
+                class="h-[11px] w-3 text-[10px] leading-[11px] text-slate-400 dark:text-zinc-500"
+              >
+                {{ label }}
+              </span>
+            </div>
+
+            <!-- 53 列 × 11px + 52 × 3px = 739px：容器窄于它时保持最小间隙，让外层滚动 -->
+            <div
+              class="flex min-w-0 flex-1 justify-between"
+              :style="{ minWidth: `${heatmap.length * 14 - 3}px` }"
+            >
+              <!--
+                月份标签必须绝对定位：它是 whitespace-nowrap 的文字，宽度远超 11px 的格子，
+                留在流内会把所在列撑宽 —— 实测 53 列会被撑到 828px，容器只有 814px，
+                于是凭空多出一条滚动条。用 h-[14px] 的占位块保住行高即可。
+              -->
+              <div v-for="week in heatmap" :key="week.key" class="relative flex flex-col gap-[3px]">
+                <span
+                  v-if="week.monthLabel"
+                  class="absolute top-0 left-0 h-[14px] text-[10px] leading-[14px] whitespace-nowrap text-slate-400 dark:text-zinc-500"
+                >
+                  {{ week.monthLabel }}
+                </span>
+                <div class="h-[14px]" aria-hidden="true" />
+
+                <div
+                  v-for="cell in week.cells"
+                  :key="cell.date"
+                  data-role="heatmap-cell"
+                  :data-date="cell.date"
+                  :data-count="cell.count"
+                  :data-level="cell.level"
+                  class="size-[11px] rounded-[2px]"
+                  :class="[
+                    cell.future ? 'invisible' : LEVEL_CLASSES[cell.level],
+                    cell.today ? 'ring-1 ring-slate-400 dark:ring-zinc-500' : '',
+                  ]"
+                  :title="`${cell.date} · 完成 ${cell.count} 个`"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <p class="mt-3 text-xs text-slate-400 dark:text-zinc-500">
+          <template v-if="summary.bestDay">最忙的一天：{{ bestDayLabel }}</template>
+          <template v-else>还没有完成记录 —— 把任务拖到「已完成」，这里就会亮起来。</template>
+        </p>
+      </section>
+
+      <div class="grid gap-3 md:grid-cols-2">
+        <section
+          class="flex flex-col rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-card dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <div class="mb-3 flex items-baseline justify-between gap-2">
+            <h2 class="text-sm font-medium text-slate-900 dark:text-zinc-100">时间花在哪</h2>
+            <span class="text-[10px] text-slate-400 dark:text-zinc-500">
+              按标签 · 前 {{ TOP_TAGS }} 项
+            </span>
+          </div>
+
+          <p v-if="tagBreakdown.length === 0" class="py-8 text-center text-xs text-slate-400 dark:text-zinc-500">
+            还没有带标签的完成记录
+          </p>
+
+          <ul v-else class="flex flex-col gap-2.5">
+            <li
+              v-for="item in tagBreakdown"
+              :key="item.tag"
+              data-role="tag-bar"
+              :data-tag="item.tag"
+              :data-count="item.count"
+            >
+              <div class="flex items-baseline justify-between gap-2 text-xs">
+                <span class="flex min-w-0 items-center gap-1.5 text-slate-600 dark:text-zinc-300">
+                  <span
+                    class="size-1.5 shrink-0 rounded-full"
+                    :class="barClass(item.tag)"
+                    aria-hidden="true"
+                  />
+                  <span class="truncate">#{{ item.tag }}</span>
+                </span>
+                <span class="shrink-0 tabular-nums text-slate-400 dark:text-zinc-500">
+                  {{ item.count }}
+                </span>
+              </div>
+              <div class="mt-1 h-1.5 overflow-hidden rounded-full bg-slate-100 dark:bg-zinc-800">
+                <div
+                  class="h-full rounded-full"
+                  :class="barClass(item.tag)"
+                  :style="{ width: `${(item.count / tagMax) * 100}%` }"
+                />
+              </div>
+            </li>
+          </ul>
+
+          <p class="mt-auto pt-3 text-[10px] leading-relaxed text-slate-400 dark:text-zinc-500">
+            一个任务有多个标签时，每个标签各计一次。
+          </p>
+        </section>
+
+        <section
+          class="flex flex-col rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-card dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <h2 class="mb-3 text-sm font-medium text-slate-900 dark:text-zinc-100">一些细节</h2>
+
+          <dl class="grid grid-cols-2 gap-x-3 gap-y-4">
+            <div v-for="item in detailCards" :key="item.label">
+              <dt class="text-xs text-slate-500 dark:text-zinc-400">{{ item.label }}</dt>
+              <dd
+                class="mt-1 text-lg font-semibold tracking-tight tabular-nums text-slate-900 dark:text-zinc-100"
+              >
+                {{ item.value }}
+              </dd>
+            </div>
+          </dl>
+
+          <p class="mt-auto pt-3 text-[10px] leading-relaxed text-slate-400 dark:text-zinc-500">
+            完成周期取中位数 —— 一条躺了半年的任务就能把平均值拉偏，中位数描述的是「通常要多久」。
+          </p>
+        </section>
+      </div>
+
+      <p class="text-xs leading-relaxed text-slate-400 dark:text-zinc-500">
+        统计只根据任务上记录的完成时间推算。永久删除或清空回收站会连同那天的记录一起消失，
+        因此这里的数字通常比实际做过的偏少 —— 宁可保守，也不维护一份会与任务对不上的计数。
+      </p>
+    </div>
+  </div>
+</template>