jesse-uxandGrok (agent loop)
352d45b2ef
桌面侧栏可在 200 到 360 像素之间拖宽，拖到最左收起，宽度记在本机。手机从左边滑出。会话在同一组里拖动排序，顺序写入可空的 sidebar_order，收藏仍置顶。账户菜单、设置、反馈和退出确认改用组件库。顶栏点数只显示图标和数字。启程清单还在。菜单、拖宽、拖动排序和翻页在首屏之后再载入。
自测：tsc 退出码 0；npm run lint 0 error、121 warning；改到的前端测试 205 项全过；npm run build 后首页仍是 static；首屏 gzip 630350，相对 8f7c0f7d 的 621226 为 +1.47%。test:db 92 项里 79 过、13 败，失败名与 Windows 已知清单一致，排序列在通过的 ok 37。没有跑全量 npm test，没有跑 Python 快速门。没有登录态，没有在浏览器里拖侧栏。
Co-Authored-By: Grok (agent loop)
88 lines
11 KiB
Markdown
88 lines
11 KiB
Markdown
# PROGRESS · 组件库 K1 外壳（2026-10-25）
|
||
|
||
工单 #105。分支 `codex/ui-kit-1-shell-20261023`。基线 `origin/staging` `8f7c0f7db42f8cca6122ae39498435f59d63a483`（#97 已在这个提交里）。只做任务书 **K1 外壳**。K0 已完成，K2 及之后没做。
|
||
|
||
## 结论
|
||
|
||
桌面侧栏可以在 200 到 360 像素之间拖宽。拖到最左边收成窄轨，再拉开回到刚才的宽度，这个宽度记在这台浏览器里。手机上侧栏从左边滑出。会话可以在同一组里拖动排序，键盘也可以排；换一台登录的设备，顺序还在。收藏的会话仍然整组排在最前。星盘档案这次不排序。账户菜单和设置换成组件库。顶栏点数只显示硬币图标和数字。右上角启程清单还在。
|
||
|
||
## 做了什么
|
||
|
||
- 桌面侧栏放进可拖分栏。宽度 200–360，默认 288，记在本机 `sidebar_width`。拖到最左收成 64 像素窄轨；64 不写进记住的宽度。手机用组件库 Sheet，从左边滑出，宽 `min(86vw, 320px)`。
|
||
- 当前页高亮在动效库载入之后用已有的 `layoutId` 滑动。在那之前是一块静止的底色，不另写时长。
|
||
- 翻页在动效库载入之后用已有的页面进入 280ms、离开 150ms，方向跟着侧栏顺序：新对话、星盘、星历、报告、合盘、人物。路由不等待动效。连点五项时停在最后一项。动效库还没到时，页面就是普通容器，首页不会因为库到了再挂载一次。库到达之后的第一次切换可能看不到离开的那一页叠在上面，之后的切换按规范重叠。
|
||
- 会话行的更多菜单是收藏或取消收藏、重命名、转发、删除。删除前用确认框。拖动排序用 dnd-kit，只在收藏组内或最近的一组内移动。顺序写入新列 `sidebar_order`。没保存过的空会话只改本机顺序，不发请求。保存失败的几条退回原位，并提示「排序没有保存」。只改顺序时不改会话的更新时间。列表查询仍按更新时间取，收藏仍先列出，组内再按这个顺序。
|
||
- 左下角账户按钮只显示头像和名字。主题在菜单里用单选组。点数不在这个按钮上重复。
|
||
- 设置是对话框加三个页签，名字仍是个人资料、账户与点数、通用设置。主题用分段页签。退出登录要再确认一次。反馈与投诉仍是对话框。注销账号的确认还在。
|
||
- 顶栏点数是正常大小的描边按钮，硬币图标加数字，44px。「点」只在读屏名称「余额 N 点，会员与充值」里。数字变少往下滚，变多往上滚，360ms；系统要求减少动态时立刻换数字。启程清单胶囊仍是 32px，仍在点数左边。
|
||
- 菜单、可拖分栏、拖动排序和翻页用的库在页面出来后再载入，不进首屏同步包。Motion 仍走已有的按需 `domAnimation`，没有把整页包进动效提供者。手机抽屉的 Sheet 留在侧栏零件里，打开抽屉的测试要当场看见它。
|
||
- `Home()` 的 `useState` / `useRef` 没有增加。增长合同通过。白名单去掉 8 个已经不再违规的文件，没有加长，也没有改测试里写死的基线名单。`page.tsx` 仍在白名单里。
|
||
- 删掉迁移后不再使用的手写类：`.session-row`、`.session-actions`、`.profile-trigger`、`.new-chat`、`.report-nav-button`、`.sidebar-scrim`，以及手机抽屉的位移。对应合同测试同一轮改了，见下表。
|
||
- 新出现的一句是「排序没有保存」。对照文案口径：短句，不另加解释。`frontend/docs/VOICE.md` 没有改，它不是这句的清单。
|
||
- 没有改 `.gitea/**`，没有改生产部署配置，没有给 `scripts/jyotish_api_server.py` 加方法。
|
||
|
||
## 数据库
|
||
|
||
只加列：`chat_sessions.sidebar_order integer null default null`，并授权已登录用户更新这一列。迁移文件 `frontend/supabase/migrations/20261025010000_chat_session_sidebar_order.sql`。没有放进 `frontend/db/migrations`。没有删列，没有改类型，没有收紧 `NOT NULL`。
|
||
|
||
`npm run test:db`（frontend，Docker 29.8.0）退出码 1。92 项，通过 79，失败 13。失败的 13 个名字与 `tools/agent-loop/windows-known-failures.txt` 逐条一致（备份目录 7 项、环境文件权限 3 项、个人报告任务权限 2 项）。含排序列的那一项通过：`ok 37 - local PostgreSQL applies the reviewed business schema and serves authenticated business calls`。它核对迁移已应用，列是可空 integer，并且没有复制到 `frontend/db/migrations`。不把整套写成通过，也不记入 `BLOCKED.md`。
|
||
|
||
## 断言改动（原值 / 新值 / 原因）
|
||
|
||
| 位置 | 原值 | 新值 | 原因 |
|
||
| --- | --- | --- | --- |
|
||
| 账户按钮 | `profile-trigger` | `sidebar-account-trigger` | 去掉手写类。仍是按钮，不是回首页的链接 |
|
||
| 账户菜单 | `Menu.Item` / `Menu.Root` | `DropdownMenu` / `DropdownMenuItem` | 改用组件库。站外页仍链到 `/?account=` |
|
||
| 设置弹窗 | `renderToString` 看到分区名和表单类 | 这些字符串锁在源码里 | 组件库对话框在这个测试环境里不输出 HTML。三个分区名不变 |
|
||
| 注销确认 | `role="dialog"` | 组件库根是 `alert-dialog` | 确认框改用 AlertDialog。页面仍被 inert 盖住 |
|
||
| 侧栏导航类 | `.new-chat`、`.report-nav-button` | `.sidebar-nav-link`，新建对话再加 `data-nav="new"` | 导航合成一套菜单行。左对齐、行动色和图标尺寸不变 |
|
||
| 手机抽屉 | 手写遮罩、`translateX`、禁止出现 Sheet | `Sheet`，`side="left"`，桌面直接渲染同一棵侧栏 | 手机从左边滑出。内容仍是同一个侧栏变量 |
|
||
| 会话行 | `.session-row` | `.sidebar-session`；收藏用 `renderSortableGroup` | 行改名，组内可拖。收藏整组仍在最前 |
|
||
| 顶栏点数 | `.credit-button`，与校正窥视同为 40px | `.credit-balance` 高 44px；窥视仍 40px | 点数是正常大小的描边按钮 |
|
||
| 外壳孩子 | `SidebarInset` 直接包 `{children}` | 中间是 `PageSwitch`，再原样放 `{children}` | 翻页包在外壳上。首页内容没有被复制 |
|
||
| 侧栏宽度 | `.chat-app` 网格列 288 / 240 / 64 | 纵向 flex，宽度由可拖面板记住 | 桌面可以拖宽，不再写死三档 |
|
||
| 列表列 | 到 `pinned,archived_at` | 末尾加 `sidebar_order`，仍不含 `created_at` 与 `messages` | 只加排序列。查询仍按更新时间 |
|
||
| 人物切换 | 直接写 base-ui `Popover.Root` | shadcn `Popover` | 改用组件库。关合和 Escape 不变 |
|
||
| 反馈表单 | 渲染整个 `FeedbackDialog`，类型是 radio | 渲染 `FeedbackDialogBody`，类型是 tab | 对话框要等浏览器挂上。提交字段不变 |
|
||
| 手机测试找侧栏 | 只在页面容器里找 | 容器和 `document.body` 都找 | Sheet 打开后挂在 body 上 |
|
||
| 测试替身 `self` | `self: window` | `self: globalThis` | 残缺的 window 让 `cn` 解析失败。真实全局才有 `setTimeout` |
|
||
| 白名单 | 含设置、反馈、账户、主题等 8 个文件 | 这 8 个移出 | 它们已经改用组件库。名单只许变短 |
|
||
| 加号入口 | 字符「＋ 添加一个人」 | Lucide `Plus` 加「添加一个人」 | 去掉当图标用的字符。入口和人数上限不变 |
|
||
| 头像说明 | 必须出现「刷新和换设备后保持一致」 | 这句不再出现 | 去掉重复解释布局的小字。配色和尺寸仍在 |
|
||
|
||
白名单移出的 8 个文件：`account-deletion-gate.tsx`、`account-deletion-section.tsx`、`account-dialog-overlay.tsx`、`billing-panel.tsx`、`feedback-dialog.tsx`、`profile-panel.tsx`、`subject-switcher.tsx`、`theme-preference-menu.tsx`。
|
||
|
||
## 自测
|
||
|
||
| 检查 | 命令 | 结果 |
|
||
| --- | --- | --- |
|
||
| 类型 | 仓库根 `frontend\node_modules\.bin\tsc.cmd --noEmit -p frontend` | 退出码 0 |
|
||
| 检查 | 在 `frontend` 下 `npm run lint` | 退出码 0。0 error，121 warning。与 #96、#97 记下的 121 条相同。没有去修无关警告 |
|
||
| 定向测试 | 在 `frontend` 下 `node node_modules/tsx/dist/cli.mjs --test` 下面列出的文件 | 205 项，pass 205，fail 0，cancelled 0，skipped 0，todo 0，退出码 0 |
|
||
| 数据库 | 在 `frontend` 下 `npm run test:db` | 退出码 1。92 项，通过 79，失败 13，名字与 Windows 已知清单一致。排序列在通过的 ok 37 里 |
|
||
| 构建 | 在 `frontend` 下 `npm run build` | 退出码 0。`/` 在 `.next/prerender-manifest.json` 里 `compute` 为 `static`。`skill-package-registry.ts` 的 Turbopack 追踪警告是改前就有的，没有改 |
|
||
| 首屏体积 | 首页 HTML 引用的 `/_next/static/**.js`，gzip-9 相加，不含 CSS | 基线 `8f7c0f7d`：32 个文件，缺失 0，621226 字节。这一张：36 个文件，缺失 0，630350 字节。+9124 字节，+1.47%。621226 × 1.02 = 633650.52，留约 3300 字节 |
|
||
|
||
定向测试文件：`account-dialog-inert-20260918`、`account-dialog-overlay`、`account-menu-every-page-20260928`、`beam-avatar`、`chart-birth-editor-and-report-table`、`chat-navigation-a11y-contract`、`chat-profile-picker`、`chat-session-authority`、`consultation-session-capacity`、`feedback-complaints-20260930`、`home-sidebar-rerender`、`home-shell-growth-contract`、`mobile-viewport-scroll-lock-20260917`、`motion-presets`、`new-chat-from-people-lifecycle`、`personal-report-entry`、`session-list-lifecycle`、`session-list-provider`、`sidebar-contract`、`starter-questions`、`synastry-report-surface`、`ui-kit-whitelist`。
|
||
|
||
首屏里没有 `ProjectionNode`、`DndContext`、`dropdown-menu`、`resizable`（这四项在首屏脚本中都是 0，在其余产物里分别是 3、1、2、2）。动效、拖动排序、菜单和可拖分栏都在页面出来之后再载入。
|
||
|
||
没有跑前端全量 `npm test`，没有跑 Python 快速门。Python 入口和 `scripts/jyotish_api_server.py` 没有改。
|
||
|
||
## 偏离
|
||
|
||
- 为了停在 ±2% 以内，翻页、高亮、拖宽、拖动排序和账户菜单都改成页面出来后再载入。没有为了体积去改启程清单，也没有删无关页面。
|
||
- 菜单库还没到时，账户按钮和会话「更多」先是普通按钮，点不开菜单。库到了之后才是真正的菜单。账户按钮的焦点引用也在这时接上。
|
||
- 手机 Sheet 没有再拆出首屏。拆掉会让「打开抽屉」的测试和源码锁对不上，而体积已经在限额内。
|
||
|
||
## 环境缺口
|
||
|
||
- 没有登录态。没有在浏览器里拖过侧栏，没有点过菜单，没有用键盘排过会话。不能写成已经在真机上看过。可照做的步骤在 `docs/testing/ui-kit-migration-20261023.md`。
|
||
- 排序跨设备保留，靠上面的数据库测试核对列已经加上、可空、类型是 integer。没有第二台登录设备可看。
|
||
|
||
## 记录
|
||
|
||
- BUG-1433，状态 `enhancement`。不是缺陷。编号接在 BUG-1432 之后。
|
||
- `CHANGELOG.md`（条目日期 2026-10-24）、`frontend/DESIGN.md`、`docs/testing/ui-kit-migration-20261023.md`。
|
||
- Skill 版本不变。
|