jesse-uxandGrok (agent loop)
b7ec8e78ed
四个页签用下划线，盘型条用分段并可以横滑，全部盘型从底部打开。桌面上盘和参数可以拖宽，窄屏上下排。行星表仍跨满整行。换盘型时星体移到新位置；减少动态效果只淡入。第一次进场不重播。
自测：tsc 退出码 0；frontend 下 npm run lint 0 error（122 警告）；定向测试 188 通过、0 失败、0 取消；npm run build 后 / 仍是 Static；首屏 JS gzip-9 为 640131，相对 d25dfdbe 记下的 639127 多 0.16%。没有跑全量 npm test、Python 快速门和 test:db。
Co-Authored-By: Grok (agent loop)
65 lines
7.7 KiB
Markdown
65 lines
7.7 KiB
Markdown
# PROGRESS · 组件库 K3 星盘页（2026-10-25）
|
||
|
||
工单 #107。分支 `codex/ui-kit-3-chart-20261023`。基线 `origin/staging` `d25dfdbe1abeef1adbe92cb39b52620739a600b1`（#102 行星表跨满整行、#105 侧栏、#99 启程动效、#106 对话页已在这个提交里）。只做任务书 **K3 星盘页**。K4 及之后没做。没有重做对话页，没有给星盘档案加排序列。
|
||
|
||
## 结论
|
||
|
||
星盘页四个页签和盘型条换成组件库。桌面上盘和参数可以拖宽，手机上上下排。行星表仍然横跨整行。换盘型时星体会移到新位置；系统开了减少动态效果就只淡入。第一次打开时的进场不重播。
|
||
|
||
## 做了什么
|
||
|
||
- 四个页签用 `Tabs`，`variant="line"`。盘还没到时四个都不可选。
|
||
- 盘型条是分段式 `Tabs`（灰底槽，选中的一格浮起），放在横向 `ScrollArea` 里。23 种的顺序不变。「星盘类型」是底部 `Sheet`。没有用描边的 `ToggleGroup`。
|
||
- 桌面（不窄于 1024）上，盘和参数放进 `ResizablePanelGroup`，默认约 58% / 42%，最窄约 32% / 24%。宽度不记到本机。分栏零件在这一块载入后再出现，不进首页同步包。更窄或还没载入时，盘在上、参数在下。行星表仍是整行的第三格。
|
||
- 本命和月亮的八列表仍是原来的 `<table>`，这样 D1 冻结的基线文件不用改。状态列改成同一种 `Badge`：落陷、带「敌」的用 `destructive`，其余用 `secondary`。没有状态，以及上升格，写「—」，不画第二种标记。悬停仍是「上升点是命盘的起点，不是行星，不判断入旺或落陷」。分盘、Bhava、行运、西洋表用组件库 `Table`。分盘的庙旺、同位和 Bhava 的换宫仍是字。
|
||
- 出生资料编辑改用 `Dialog`。点框内不关，按 Esc 或点遮罩会关。表单仍是档案页共用的那一份，输入框没有另做成 `Field` 和 `Input`。
|
||
- 换盘型时，星体从旧宫位的坐标移到新宫位，停住后的坐标和直接画出那张盘相同。换人时格线重画，星体不飞。减少动态效果时不做位移。`data-onboarding-draw` 的键没改，第一次进场不重播。大运展开用 `Collapsible`，当前段一开始是开的且不播放展开；之后点开才动。0 年段仍不能展开。已经选中的 Chara 或 Yogini 再点一次会再请求。
|
||
- 星盘的线和符号仍是手绘。对话旁边的本命盘仍只复用绘制组件。
|
||
- 白名单去掉 5 个星盘页文件，没有加长，测试里写死的基线名单没有改。
|
||
- `chart-basics-tab.tsx`、`chart-param-table.tsx`、`chart-symbol-help.tsx` 没有改。参数仍是一张键值表，符号说明仍是原来的气泡。
|
||
- 没有改 `.gitea/**`，没有改生产部署，没有动数据库，没有给 `scripts/jyotish_api_server.py` 加方法，没有改 `page.tsx`。
|
||
|
||
## 断言改动（原值 / 新值 / 原因）
|
||
|
||
| 位置 | 原值 | 新值 | 原因 |
|
||
| --- | --- | --- | --- |
|
||
| 四个页签禁用 | 4 个 `disabled=""` | 4 个 `aria-disabled="true"` | 页签改用 Tabs。base-ui 把禁用写在 aria-disabled 上 |
|
||
| 行星表个数 | 只数原生 `<table className="chart-page-planet-table">` | 原生 table 与 `<Table className="chart-page-planet-table">` 加起来等于外包层 | 分盘、Bhava、行运用组件库表格。本命表仍是原生 table |
|
||
| 大运展开 | `<details>` / `details:not([open])` | `data-slot="collapsible-content"`，收起用 `data-closed` | 大运改用 Collapsible。当前段默认展开，点按高度仍是 44px |
|
||
| 零年大运 | 零年行没有 `<details` | 零年行没有 Collapsible，展开中的行不含「0 年」 | 零年仍然不能展开 |
|
||
| 盘型条 | 原生 `role="tablist"` 里的 button | `data-variant="default"` 的 `role="tab"`，菜单仍是「全部盘型」 | 盘型条改成 Tabs + ScrollArea |
|
||
| 星盘类型面板 | 生命周期宿主点开原生 `<dialog>` | 源码是 Sheet；格子静态渲染 23 项；选中后先关上再回调 | 测试宿主的浮层挂不进 body，不能假装点开过 |
|
||
| D1 上升格 | 基线对照里是「/」按钮 | 可见「—」，说明句仍在 | 没有状态就写「—」。基线文件不改，只在断言里替换 |
|
||
| D1 状态列 | 纯文本 | 同一列换成 Badge；落陷、敌是 destructive，其余是 secondary | 同上，fixture 文件不改 |
|
||
| 分盘和月亮的上升格 | 可见「/」 | 可见「—」 | 没有状态就写「—」 |
|
||
| 出生资料框 | 源码把点击交给 `chartBirthDialogShouldClose` | `Dialog` 的 `onOpenChange` 收到 false 才关；几何函数仍导出 | 改用对话框。点内容区内边距不关，和原来的结果相同 |
|
||
| 白名单 | 含 5 个星盘页文件 | 这 5 个移出 | 它们已经改用组件库。名单只许变短 |
|
||
|
||
移出的 5 个文件：`chart-birth-editor.tsx`、`chart-dasha-tab.tsx`、`chart-page-view.tsx`、`chart-type-picker.tsx`、`chart-vedic-tab.tsx`。
|
||
|
||
## 自测
|
||
|
||
| 检查 | 命令 | 结果 |
|
||
| --- | --- | --- |
|
||
| 类型 | 仓库根 `frontend\node_modules\.bin\tsc --noEmit -p frontend` | 退出码 0 |
|
||
| 检查 | 在 `frontend` 下 `npm run lint` | 退出码 0。122 个警告，0 error |
|
||
| 定向测试 | 在 `frontend` 下 `node node_modules/tsx/dist/cli.mjs --test` 下面列出的文件 | 188 条，通过 188，失败 0，取消 0 |
|
||
| 构建 | 在 `frontend` 下 `npm run build` | 退出码 0。编译 10.3s，TypeScript 30.8s。`/` 仍是 ○ Static。5 条既有 skill-package-registry 警告，没有改 |
|
||
| 首屏体积 | 首页 HTML 引用的 `/_next/static/**.js`，gzip-9 相加，不含 CSS | 基线 `d25dfdbe`（上一单记下的数）：36 个文件，639127 字节。本单：36 个文件，缺失 0，640131 字节，多 1004（+0.16%）。±2% 上限 651910。`react-resizable-panels` 命中 0。`chart-page-vedic-split` 命中 0 |
|
||
|
||
定向测试文件：`billing-panel.test.ts`、`chart-bhava.test.tsx`、`chart-birth-editor-and-report-table.test.tsx`、`chart-dasha-switch-layout.test.ts`、`chart-dasha-yogini.test.ts`、`chart-glyph-motion.test.ts`、`chart-moon-transit.test.tsx`、`chart-page-hook.test.ts`、`chart-page-mobile-width-20260929.test.ts`、`chart-page-view.test.tsx`、`chart-planet-glyphs.test.tsx`、`chart-symbol-help.test.tsx`、`chart-table-span-20261023.test.tsx`、`chart-type-picker.test.tsx`、`chart-varga-table.test.tsx`、`chart-view-zero-year.test.ts`、`secondary-page-entry.test.ts`、`surface-feedback-20260929.test.tsx`、`ui-kit-whitelist.test.ts`、`western-wheel-layout.test.ts`。
|
||
|
||
没有跑前端全量 `npm test`，没有跑 Python 快速门，没有跑 `test:db`。`tests/test_repo_privacy_markers.py` 退出码 0。`page.tsx` 和 `scripts/jyotish_api_server.py` 没有改。
|
||
|
||
## 偏离
|
||
|
||
- 出生资料的输入框仍是档案页共用的那一份，没有拆成第二套 `Field` 和 `Input`。编辑框本身已是对话框。
|
||
- 本命和月亮的行星表仍是原生 table。组件库表格用在分盘、Bhava、行运和西洋表。D1 基线文件没有改，状态列和上升格在断言里替换后再对照。
|
||
- 「星盘类型」抽屉在这个测试宿主里挂不进 body。合同改为源码接线和 23 个格子的静态渲染。
|
||
- 测试用的假文档补了 `head`、`querySelector` 和 `querySelectorAll`。组件库页签会把一段样式挂到 document 上，没有这些会在渲染时抛错。产品页面没有为测试改行为。
|
||
- 可拖分栏的名字在首页脚本里仍出现 1 次，和上一单记下的次数一样。库文件名 `react-resizable-panels` 在首页脚本里是 0。星盘页的分栏是打开星盘后才载入。
|
||
|
||
## 环境缺口
|
||
|
||
- 没有登录态。没有在浏览器里打开过星盘页。1024、1280、390 三种宽度的截图没有做，不写成通过。可照做的步骤在 `docs/testing/ui-kit-migration-20261023.md` 的「星盘页」一节。
|