jesse-uxandGrok (agent loop)
d3be9491ee
去掉 GSAP。对话入场改为按需加载的 Motion，仍是 160 毫秒，仍尊重减少动态效果。 用 shadcn@4.21.4 补上任务书列出的组件，不覆盖已有的 8 个。设计令牌映射到 shadcn 变量。 手写控件检查和只减不增的白名单。Motion 预设与四个 store 只是骨架，没有接到页面上。 自测：tsc --noEmit 退出码 0；npm run lint 0 error（122 条原有 warning）； 定向测试 37 项、fail 0、cancelled 0；next build 后 / 仍是 Static； 首屏 JS gzip 578349 → 578435（+86 字节，+0.01%）。 Co-Authored-By: Grok (agent loop)
61 lines
6.0 KiB
Markdown
61 lines
6.0 KiB
Markdown
# PROGRESS · 组件库 K0 底座与规矩（2026-10-24）
|
||
|
||
工单 #104。分支 `codex/ui-kit-0-base-20261023`。基线 `origin/staging` `0f66d92d4d6545972202f209c63c87959d44b87e`。只做任务书「K0 底座与规矩」。侧栏、对话页、星盘页都还没换。
|
||
|
||
## 结论
|
||
|
||
零件和检查规矩已经放进仓库。打开网站时看见的按钮、侧栏、对话和星盘，这一张没有改。对话里新出现的一行仍是一次 160 毫秒的入场；系统开了「减少动态效果」时不做这次入场。
|
||
|
||
## 做了什么
|
||
|
||
- 去掉 `gsap`、`@gsap/react`。加上并钉死：`motion@14.1.0`、`react-resizable-panels@4.14.3`、`@dnd-kit/core@6.3.1`、`@dnd-kit/sortable@10.0.0`、`@dnd-kit/utilities@3.2.2`、`zustand@5.0.15`、`shadcn@4.21.4`。这些版本都在 2026-10-10 之前发布。
|
||
- `npx shadcn@4.21.4 add` 加了任务书列出的全部组件。没有被 CLI 拒绝的名字。已有的 button、calendar、popover、select、sidebar、sonner、tabs、textarea 没有重装、没有覆盖（CLI 问过要不要覆盖 button 和 textarea，回答是不覆盖）。
|
||
- `globals.css` 第二行是 `@import "shadcn/tailwind.css";`。浅色 `:root` 上的 shadcn 变量指向现有色板；深色跟着这些色板变量走，没有另写一套色。
|
||
- 消息入场改成按需 `import("motion")`。模块还没到就不补播。`LazyMotion` 和 `MotionConfig reducedMotion="user"` 写在 `src/lib/motion/provider.tsx`，这一张没有挂到页面上。
|
||
- 动效规范表每一档写成 `src/lib/motion/presets.ts` 里的数据。没有另写动画，也没有接到页面上。现在真正在播的仍是消息入场 160 毫秒，不是表里「发送消息」那一档的 260 毫秒。
|
||
- `src/stores/` 有会话、人物、账户、界面四个空骨架。`Home()` 的 `useState` / `useRef` 没有迁，数量没有增加。
|
||
- `src/components/ui` 以外，新手写 `button` / `dialog` / `select`、勾选和单选、指定的 role、`createPortal`、用字符当图标，lint 会报错。星盘 `personal-report/vedic-chart-svg.tsx` 和星图 `chart-page/western-wheel-svg.tsx` 只豁免 SVG 里的图标字符，按钮仍然报错。迁移前已有的 62 个文件在白名单里。
|
||
|
||
## 断言改动（原值 / 新值 / 原因）
|
||
|
||
| 测试 | 原值 | 新值 | 原因 |
|
||
| --- | --- | --- | --- |
|
||
| `chat-bundle-splitting-contract.test.ts` | 静态图里没有 gsap；动态 `import("gsap")`；`gsap.matchMedia()`；`if (!gsapCore)`；`prefetchOnIdle(loadGsap)` | 没有 `gsap` / `@gsap/react`；没有静态 `from "motion"`；动态 `import("motion")`；`matchMedia("(prefers-reduced-motion: no-preference)")`；`if (!messageMotion)`；`useEntryEffect`；`prefetchOnIdle(loadMessageMotion)` | 入场从 GSAP 换成 Motion，仍按需加载，模块没到不补播。时长 0.16、曲线、clearProps 字符串不变 |
|
||
| `session-conversation-layout.test.ts` | `gsap.matchMedia()` | `matchMedia("(prefers-reduced-motion: no-preference)")` | 同上。时长、曲线、clearProps 的断言没有放宽 |
|
||
| `design-token-contract.test.ts` | `join(directory.pathname, entry.name)` | `join(fileURLToPath(directory), entry.name)` | Windows 上 `URL.pathname` 以 `/G:` 开头，`path.join` 会拼成 `G:\G:\...`，合同还没读到源码就失败。颜色断言没有改 |
|
||
|
||
其余既有断言没有改。
|
||
|
||
## 自测
|
||
|
||
| 检查 | 命令 | 结果 |
|
||
| --- | --- | --- |
|
||
| 类型 | `frontend\node_modules\.bin\tsc --noEmit -p frontend` | 退出码 0 |
|
||
| 检查 | 在 `frontend` 下 `npm run lint` | 0 error，122 warning（都是改前就有的，没有修） |
|
||
| 定向测试 | `node node_modules/tsx/dist/cli.mjs --test` 下面 10 个文件 | 37 项，pass 37，fail 0，cancelled 0，skipped 0，退出码 0 |
|
||
| 构建 | 在 `frontend` 下 `npm run build` | 成功。`/` 是 `○` Static。79 页 |
|
||
| 首屏体积 | 首页 HTML 引用的 `/_next/static/**.js`，gzip-9 相加 | 改前 578349 字节；改后 578435 字节；+86 字节；+0.01%。在 ±2% 以内。33 个文件，没有缺失 |
|
||
| 依赖 | `npm ls` 上述新包 `--depth=0` | 都能看到。`npm ls gsap @gsap/react` 是空的（退出码 1，表示没装） |
|
||
|
||
定向测试文件：`chat-bundle-splitting-contract`、`session-conversation-layout`、`motion-presets`、`ui-kit-stores`、`ui-kit-tokens`、`ui-kit-whitelist`、`design-token-contract`、`dark-theme-contract`、`report-fact-table-print`、`home-shell-growth-contract`。
|
||
|
||
首屏这 33 个 JS 里没有 gsap、没有 Motion 运行时、没有 dnd-kit、zustand、react-resizable-panels，也没有 shadcn 的命令行程序。构建日志里 skill-package-registry 的 5 条 Turbopack 警告是改前就有的，没有动。
|
||
|
||
白名单探针没有留在仓库里。测试用 ESLint 的 `lintText` 假装有一个 `src/components/ui-kit-k0-probe.tsx`，确认 `<button>` 会报错，`src/components/ui/` 里不报，星盘和星图的 SVG 文本不报、旁边的按钮仍报。
|
||
|
||
## 偏离
|
||
|
||
- CLI 额外依赖了 `cn`。它当时装的 `0.5.0` 是 2026-10-16 发布的，不满两周。改钉 `cn@0.4.0`（2026-09-22）。新组件只调用 `cn()`。
|
||
- `@theme` 里的 `--color-border`、`--color-input` 仍是浅色十六进制 `#d8d6cf`、`#b8b5ad`。若改成 `var()`，现有的描边按钮、弹出层、多行输入在深色下会被重新上色。语义变量 `--border`、`--input` 跟着主题走，给以后的组件用。Tailwind 的 `bg-primary` 仍锁在文字阶 `--color-action`；新组件读的 `--primary` 是按钮填充 `--color-action-fill`。深色下这两个颜色不一样（`#d78064` 和 `#8f4a33`）。
|
||
- 没有组件名被 CLI 拒绝。
|
||
|
||
## 环境缺口
|
||
|
||
- 没有浏览器，也没有登录态。K0 不应改可见控件；真机对照留给验收。本机没有打开未登录首页做目视，不能写成「已经看过没有新的等待动画」。
|
||
- 没有跑前端全量 `npm test`，没有跑 Python 快速门，没有跑也没有宣称 `test:db`。K0 不动表。
|
||
|
||
## 记录
|
||
|
||
- BUG-1430，状态 `enhancement`。不是缺陷。
|
||
- `CHANGELOG.md`、`frontend/DESIGN.md`、`docs/tasks/README.md`（这一行标成「K0 待验收（K1–K7 仍待领取）」，没有写成已合入）。
|