Jyotisha/docs/tasks/PROGRESS-report-chart-layout-fix-20260909.md

PROGRESS · 报告页星盘重叠 + 滚动重建（2026-09-09）

• 工作树：.worktrees/report-chart-layout-fix-20260909
• 分支：codex/report-chart-layout-fix-20260909（track origin/staging）
• 基线：origin/staging @ 584a56bd（任务书本身；代码基线 17b36f3a）
• BUG：BUG-616、BUG-617
• 未改 .gitea/workflows/**、frontend/src/app/page.tsx、下载剥围栏；不提升 main，未 push

做了什么

任务	状态	说明
1 两栏成组	完成	report-chart-grid-rehype.ts 把 D… / Moon Chart 标题 + 可选 p + jyotish-chart 围栏包进 .personal-report-chart-card，相邻卡进既有 .personal-report-chart-grid；删 float / margin-left: -50%
2 滚动不重建	完成	ReportToc 持有 activeId 与 observer；lead / LazyMarkdownSection 的 renderMarkdown 在 useMemo 内；LazyMarkdownSection memo()
3 记录	完成	BUG-616/617、CHANGELOG、DESIGN、走查清单第 7 节、本文件；任务板改「待验收」

没有砍让步项。rehype 两栏一次做成，未退到 D2 单栏。

口径（与任务书一致）

• 两栏保留，不再用浮动凑。
• skipHtml / 禁止 rehype-raw / 不新增 npm 依赖。
• 下载 .md 仍剥围栏、保留标题。
• 本仓测试无 DOM 运行时，重渲染次数不能自动验；真机两条写在走查清单第 7 节。

组件树（改动前后）

改前：

PersonalReportMarkdownView
  useState(activeId) + IntersectionObserver   ← 目录一变，整树重渲染
  renderMarkdown(lead)                        ← 每次新建 components，子树卸载
  LazyMarkdownSection (无 memo)
    renderMarkdown(section)                   ← 同上

改后：

PersonalReportMarkdownView                    ← 无 useState，只随 markdown 变
  ReportToc
    useState(activeId) + IntersectionObserver
    TocList × 2
  article
    lead = useMemo(renderMarkdown)
    memo(LazyMarkdownSection)
      content = useMemo(renderMarkdown | h2 占位)

滚动只重绘 ReportToc。文章树里的 SVG 保持同一组 DOM 节点（真机第 7 节）。

偏离

1. 两栏折断点跟既有 document-view grid，是 760px 而不是任务书正文里的 860px。 globals.css 里 .personal-report-chart-grid 的单栏媒体查询一直是 max-width: 760px；860px 只折叠 TOC。未改这个既有数字。
2. rehype 插件导出了 groupReportChartNodes。 给同一文件的工厂函数用，测试仍走 PersonalReportMarkdownView 的静态标记，没有另开 hast 单测。

测试数字

项	本轮实测	结论
tsc --noEmit	0 错	通过
npm run lint	0 error / 108 warning	warning 数与 BUG-607 收工相同；新文件无 error
tsx --test tests/personal-report-markdown-view.test.tsx	6 passed	原 1 条 + 本单 5 条
globals.css gzip	开工 35791 B → 工作树 35612 B	−179 B / −0.50%，在 ±2% 内
next build --webpack /	○ Static	交叉 node_modules 符号链接，与 BUG-607 相同改用 webpack
首页 CSS gzip（构建产物）	最大块 a083d2bd2a5e75cb.css = 36,083 B	相对 BUG-607 的 35,779 B 为 +0.85%，在 ±2% 内
npm test tests	3008	高于 BUG-607 的 2975（staging 后来加了测试，本单 +5）
npm test pass	2997
npm test fail	11	全是 Docker Postgres fixture / 迁移 / 超时 / onboarding deadline flake，与图盘无关
npm test skipped	0	Docker 可用

11 条失败（均非本轮图盘代码）：

1. admin-database.test.ts — database migration failed
2. database-admin-account-reset.test.ts — 同上
3. database-admin-owner-recovery.test.ts — 同上
4. database-billing-audit.test.ts — 同上（billing order adjustments…）
5. database-billing-product-admin.test.ts — 300s 超时（当时并行跑过 next build）
6. database-migrate.test.ts — 300s 超时（同上）
7. database-self-hosted-identity.test.ts — Better Auth OTP fixture
8. onboarding-route.test.ts — slow Agent generation 把 deadline 当成了失败（flake） 9–11. rectification-v9-database.test.ts 三条 — database migration failed

无 Docker 基线 28 条本轮未复跑（Docker 可用）。图盘相关 6 条 markdown-view + 既有 report-chart-block.test.ts 全绿。

没做的

• 没有在浏览器里打开过一份真实 /reports/<id>。 无登录态。走查清单第 4 节和第 7 节待真机。
• 未 push。代码进 staging 会走 Staging Backend Quality Gate。
• 收工时 origin/staging 已含 BUG-614～615、BUG-618～620；合并写在本提交之后。