Jesse_ChenandClaude Opus 5.5
dd5ae8d032
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014Ad9rqAB8pXXvyzh7f4X8v
81 lines
6.1 KiB
Markdown
81 lines
6.1 KiB
Markdown
# TASK · 星盘页本命 / 月亮盘的行星表被挤进左栏（issue #102，2026-10-23）
|
||
|
||
## 基线
|
||
|
||
- `origin/staging`：写本单时为 `9049b5e99`。开工时以当时的 `origin/staging` 为准。
|
||
- 执行方：Grok（Windows + Docker）。分支 `codex/chart-table-span-20261023`，只推这一个分支。
|
||
- BUG 编号：开工时运行 `grep -oE "BUG-[0-9]+" docs/BUG_HISTORY.md | sort -t- -k2 -n | tail -1`，从下一个号起（写本单时最大号是 BUG-1420）。
|
||
|
||
## 事故实证
|
||
|
||
- **现象**：桌面宽度（≥1024px）下，星盘页选「本命」或「月亮」时，行星表只占左栏，和盘一样宽（约 466px）。宿主、pada、状态三列要横向拖动才看得到；右栏在参数卡下面空着。D2–D60、Bhava、行运的表都正常。
|
||
- **布局规则**：`frontend/src/app/globals.css` 的桌面媒体段（`@media (min-width: 1024px)`，符号 `.chart-page-planet-table-wrap, .chart-page-varga-table-block { grid-column: 1 / -1; }`）把这两个类名排成跨两栏的整行。
|
||
- **网格结构**：`frontend/src/components/chart-page/chart-vedic-tab.tsx` 的 `VedicLayout` 网格下有三类直接子项：`.chart-page-vedic-stage`（盘）、`.chart-page-params`（参数卡）、`{children}`（表）。
|
||
- **出问题的地方**：同文件 `NatalTable` 在 #87（`d2edf8b7a`，「上升的状态格改成「/」」）里被外包了一层 `ChartSymbolHelp`，渲染出来是 `<div class="chart-page-symbol-help">`。网格的直接子项变成了这个 div，上面的跨栏规则匹配不上，表就被自动排进了左栏第二行。
|
||
- **为什么分盘没事**：`ChartTypeBody` 里分盘外面多了一层 `.chart-page-varga-table-block`，仍然命中跨栏规则。本命、月亮两处直接放 `NatalTable`，所以出事。
|
||
- **违反的设计**：`frontend/DESIGN.md` 写着「桌面（≥1024）盘面与参数表左右并排，行星表是跨两列的整行——它的列宽需要完整版心」。
|
||
- **为什么没拦住**：#87 的进度记录（`docs/tasks/PROGRESS-chart-ascendant-slash-20261021.md`）写明没跑全量 `npm test`、没跑 `next build`，也没登录后看页面；而且现有测试没有一条断言 `grid-column`。
|
||
|
||
## 根因
|
||
|
||
跨栏规则是按「表格外层恰好是某个类名」写的，网格自己并不掌握「第三行是整行」这件事。所以任何人往表外面再包一层，布局就会悄悄坏掉。这一次是 #87 包了一层 `ChartSymbolHelp`，下一次可能是别的。
|
||
|
||
## 决策记录
|
||
|
||
- 产品 2026-10-22 把本问题提成 issue #102，2026-10-23 要求先规划。
|
||
- 按 AGENTS.md §5「修在根因上」，**不采用**「在跨栏规则里再补一个 `.chart-page-symbol-help` 类名」这种对症补丁。改为让网格自己掌握结构：`VedicLayout` 用一个固定的整行容器装 `children`，跨栏规则只认这个容器。
|
||
- 不改表格的列数、列宽，不动 D1 的字节冻结。
|
||
|
||
## 硬红线
|
||
|
||
1. 不改表格内容、列、列宽，也不改 `ChartSymbolHelp` 的行为（「/」的说明气泡必须照常弹出，不能被裁掉）。
|
||
2. 手机端不得回归 BUG-1083：390px 宽时页面 `scrollWidth` 必须等于 390，表格只能在自己的盒子里横滚。
|
||
3. `chart-varga-table.test.tsx` 的 D1 字节冻结、`chart-page-mobile-width-20260929.test.ts` 的现有断言都要照常通过。若必须改，按「原值 / 新值 / 原因」三栏写。
|
||
4. 本单只修布局。组件库迁移 K3（#107）会整体改造这一页，本单不要提前换组件。
|
||
|
||
## 任务
|
||
|
||
### T1 网格自己掌握整行
|
||
|
||
- `VedicLayout` 里把 `{children}` 包进一个固定容器，比如 `<div className="chart-page-vedic-tables">`。这个容器永远是网格的第三个直接子项。
|
||
- `globals.css` 桌面段的跨栏规则改为针对这个容器（`grid-column: 1 / -1`）。原来那两个类名如果别处不再需要跨栏，就从规则里删掉；删之前先按 AGENTS.md §7 第 8 条 grep 源码文本合同测试。
|
||
- 容器加 `min-width: 0`，保证窄屏时表格只在自己的盒子里横滚。
|
||
- `ChartTypeBody` 里分盘、Bhava、行运的 `.chart-page-varga-table-block` 保持不变。它们现在落在新容器里面，不再负责跨栏。
|
||
|
||
**验收**：在 1024px、1280px 宽下，「本命」「月亮」「D9」「Bhava」「行运」五种盘型的表都占满整行，宿主、pada、状态三列不用横拖就看得到。
|
||
|
||
### T2 回归测试
|
||
|
||
- 新增测试：分别渲染 `ChartVedicTab` 的 D1、MOON、D9、BHAVA、TRANSIT，断言 `.chart-page-vedic-layout` 恰好有三个直接子项，并且第三个是 `.chart-page-vedic-tables`。
|
||
- 在同一个测试文件里，断言 `globals.css` 的桌面媒体段包含 `.chart-page-vedic-tables { grid-column: 1 / -1; }`（或等价写法）。
|
||
- 以后谁再往表外包东西，这两条断言就会失败。
|
||
|
||
### T3 文档
|
||
|
||
- `docs/BUG_HISTORY.md` 新增一条：回归来源 #87，根因写「跨栏按类名而非结构」，防复发写上面 T2 的两条断言。
|
||
- `frontend/DESIGN.md` 星盘页一节补一句：「表格区由 `VedicLayout` 的整行容器承载，不靠表格自身类名跨栏。」
|
||
- `CHANGELOG.md` 写一行。
|
||
|
||
## 开工前置命令
|
||
|
||
```bash
|
||
git fetch origin --prune
|
||
git worktree add -b codex/chart-table-span-20261023 .worktrees/chart-table-span-20261023 origin/staging
|
||
cd .worktrees/chart-table-span-20261023 && git status -sb
|
||
cd frontend && npm ci && ./node_modules/.bin/tsc --noEmit && npm run lint
|
||
./node_modules/.bin/tsx --test tests/chart-page-view.test.tsx tests/chart-varga-table.test.tsx tests/chart-page-mobile-width-20260929.test.ts # 记下基线
|
||
```
|
||
|
||
## 验收分工
|
||
|
||
- **Grok 自跑**：
|
||
- `tsc --noEmit`；
|
||
- `npm run lint`；
|
||
- 上面三个测试文件加新测试；
|
||
- `npm run build`，记录 `/` 是否 Static 和首屏 gzip；
|
||
- 在本机浏览器 1280px 和 390px 宽下各截一张本命盘页面的图，附在回报里。
|
||
- **Claude 验收时跑**：
|
||
- 前端全量 `npm test`，和基线逐条对比（#87 当时就是漏了这一步）；
|
||
- 复核截图。
|
||
- **真机清单**：`docs/testing/chart-table-span-20261023.md`，写两步：宽屏看本命和月亮的表是不是整行；手机上页面不横向滚动。
|