Files
Jyotisha/docs/tasks/PROGRESS-report-chart-layout-fix-20260909.md
T
Jesse_ChenandCursor af70ae77a5
Independent Staging Quality Gate / validate (push) Failing after 9m55s
Independent Staging Quality Gate / publish (push) Has been skipped
docs: record BUG-616/617 fix SHA 87daffe2 after staging merge
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-09 18:47:28 +08:00

4.8 KiB
Raw Blame History

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

  • 工作树:.worktrees/report-chart-layout-fix-20260909
  • 分支:codex/report-chart-layout-fix-20260909track origin/staging
  • 基线:origin/staging @ 584a56bd(任务书本身;代码基线 17b36f3a
  • BUGBUG-616BUG-617
  • 未改 .gitea/workflows/**frontend/src/app/page.tsx、下载剥围栏;不提升 main
  • 提交:87daffe2(修复)+ df090fd5merge origin/staging,含 BUG-614/615/618620
  • 未 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 与 observerlead / LazyMarkdownSectionrenderMarkdownuseMemo 内;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 的 2975staging 后来加了测试,本单 +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.tsdatabase 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.tsslow Agent generationdeadline 当成了失败(flake 911. 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
  • 收工时已 merge origin/staging @ 5c476ba7BUG-614/615 + BUG-618620)。冲突只在 CHANGELOG / BUG_HISTORY,按编号保留双方记录。