diff --git a/docs/tasks/README.md b/docs/tasks/README.md index 5be974e0..9ed91e8d 100644 --- a/docs/tasks/README.md +++ b/docs/tasks/README.md @@ -37,6 +37,7 @@ | 任务书 | 进度 | 主题 | 状态 | 落点 | | --- | --- | --- | --- | --- | +| `TASK-chart-table-span-20261023.md` | — | **星盘页本命 / 月亮行星表挤进左栏(issue #102)**:#87 给表包了 `ChartSymbolHelp` 后跨栏规则失配;根因修法是 `VedicLayout` 用固定整行容器承载表格,跨栏只认容器;加结构断言防复发 | 待执行(循环) | 分支 `codex/chart-table-span-20261023` | | `TASK-ui-kit-migration-20261023.md` | — | **界面统一换成组件库**:shadcn base-nova(补 `shadcn/tailwind.css`)· Lucide · Motion · react-resizable-panels · dnd-kit · Zustand;lint 拦手写控件(白名单只减不增);对话旁星盘面板;会话、档案拖动排序(动表);长相不变。产品 2026-10-23 拍板 D1~D8;8 个 issue(K0~K7)串行,取代全站动效 #98 #100 #101 | 待领取(循环) | 原型 https://claude.ai/artifact/PGnWsjHhu38KJseEfEMNWG | | `TASK-onboarding-journey-20261022.md` | — | **新用户启程**:建档加「先看谁的盘」(自己 / 帮别人看,本人资料可后补)、人物关系字段、首问免费(服务端原子)、起步三问、启程清单(七项从数据推导,收费项标价,老用户可见)、八条一次性提示(含星盘四页签)、启程流程专用动效。产品 2026-10-22 拍板 D1~D6;动表经产品同意进循环,拆四个 issue 串行。BUG-1420 起 | 待领取(循环) | 原型 https://claude.ai/artifact/PcTwMVb9RD611R3qStxv3U | | `TASK-site-motion-20261022.md` | — | **全站动效**:换页按侧栏方向滑入、选中块跟随、页签、盘型切换星体移宫、换人、翻日期、列表补位、弹窗从触发处长出、抽屉、顶部提示、点数滚动、中英交叉淡入;重写 DESIGN §6(推翻 180 ms 上限与 Spatial Instant),不引动画库,先验证 View Transitions。产品 2026-10-22 拍板;三个 issue,排在启程(三)之后、启程(四)之前;**2026-10-23 被 ui-kit-migration 取代** | 已取代 | 原型 https://claude.ai/artifact/7u9goivnmTNSGTNWNeVMQd | diff --git a/docs/tasks/TASK-chart-table-span-20261023.md b/docs/tasks/TASK-chart-table-span-20261023.md new file mode 100644 index 00000000..fe0812e9 --- /dev/null +++ b/docs/tasks/TASK-chart-table-span-20261023.md @@ -0,0 +1,80 @@ +# 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,上面的跨栏规则匹配不上,表就被自动排进了左栏第二行。 +- **为什么分盘没事**:`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}` 包进一个固定容器,比如 `
`。这个容器永远是网格的第三个直接子项。 +- `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`,写两步:宽屏看本命和月亮的表是不是整行;手机上页面不横向滚动。