fix(report): group chart cards in the existing grid and stop remounting on scroll (BUG-616, BUG-617)
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jesse_Chen
@@ -0,0 +1,91 @@
|
||||
# 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；合并写在本提交之后。
|
||||
@@ -121,7 +121,7 @@
|
||||
| `TASK-report-list-500-20260907.md`（仓库根） | `PROGRESS-report-list-500-20260907.md` | 列表 PostgREST JSON 路径 500 | 待验收 | `b466a6fc`（BUG-574） |
|
||||
| — | `PROGRESS-report-progress-20260909.md` | 生成等待屏只有 spinner 与秒表：后端 `progressPercent` / `progressPhase` 与分章行已产出，前端解析后一字未渲染，且分章行在 `generating` 时根本不出服务端。改为按章分格进度条 + 章节清单，停滞 90 秒改「用时较长，仍在写」；不画百分比条、不做插值动画、不报预计剩余 | 已验收 | `848e39e6`、`5565b632`（BUG-601） |
|
||||
| `TASK-report-chart-render-20260909.md` | `PROGRESS-report-chart-render-20260909.md` | 报告页所有分盘标题下空白：引擎 22 张 `<svg>` 被 `skipHtml` 丢弃（09-06 Markdown 直渲回归）。引擎旁加 ```jyotish-chart 围栏 JSON，前端 zod 校验后用自绘北印式组件全部渲染；不放开原始 HTML | 已验收（2fdcb14f）：tsc/lint 0 error、chart 测试 29/29、`/` Static、gzip +0.96%；围栏构造在 try 外的 P2 并入 `TASK-upstream-sync2-fix-20260909.md` 任务 3 | `codex/report-chart-render-20260909`（BUG-607） |
|
||||
| `TASK-report-chart-layout-fix-20260909.md` | — | 星盘渲染回归修复：22 张北印盘全部重叠（浮动 + 负 margin 凑两栏对连续多对无效）+ 滚动时 `components` 每渲染新建导致整篇报告卸载重建、页面卡；改 rehype 成组进既有两栏 grid、文章树 `useMemo`、目录状态下沉 | 待领取 | 分支 `codex/report-chart-layout-fix-20260909`（BUG-616/617） |
|
||||
| `TASK-report-chart-layout-fix-20260909.md` | `PROGRESS-report-chart-layout-fix-20260909.md` | 星盘渲染回归修复：22 张北印盘全部重叠（浮动 + 负 margin 凑两栏对连续多对无效）+ 滚动时 `components` 每渲染新建导致整篇报告卸载重建、页面卡；改 rehype 成组进既有两栏 grid、文章树 `useMemo`、目录状态下沉 | 待验收 | `codex/report-chart-layout-fix-20260909`（BUG-616/617） |
|
||||
|
||||
### 前端基础与工程
|
||||
|
||||
|
||||
Reference in New Issue
Block a user