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)
7.7 KiB
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的「星盘页」一节。