rootandClaude Opus 5.5
21c55dfb3a
控制台导航最多两层(侧栏一项 = 一页,页内最多一层页签 / 分段);从列表打开的
记录改成列表页上的右侧抽屉,打开的记录写在 ?open=,刷新、分享、前进后退都能还原,
后退就是关抽屉。标准写在 docs/design/console-ia.md §9,ui-controls.md 引用。
- DetailSheet 加 xl 宽度、标题下操作行;抽屉里再开的 DetailSheet 在同一抽屉里换成子视图(返回 / Esc)
- record-sheet.tsx:useRecordSheet / RecordLink / useOpenRecord / recordPath / taskPath
- 整理记录、订阅、站点(含页签)、下载、日志任务改成抽屉;旧业务任务 / 下载任务 id 在任务抽屉里换算
- 回收站并进文件管理右侧视图(?view=trash);设置左栏只列分区
- 规则组、策略版本、媒体库未识别 / 外部身份、设置实例编辑走 ?open=
- 旧地址 /console/{organize,subscriptions,sites,downloads}/:id、/tasks/:id、/files/trash 跳到列表页抽屉
- 站内链接、铃铛、命令面板、任务时间线改拼新地址;冒烟按 ?open= 检查抽屉
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
设计系统
控制台(apps/web)沿用 /opt/uhd_web 的设计系统:token 定义在 app.css,shadcn 组件在 apps/web/app/components/ui/,控制台共享件在 apps/web/app/components/console/。
| 文档 | 内容 |
|---|---|
| design-tokens.md | 颜色 token 分层、命名与使用规则,字号/圆角/时长/缓动阶梯 |
| interface-materials.md | 材质:pg-chrome 贴边、pg-slab 内容卡、pg-float 悬浮层 |
| ui-controls.md | 按钮、选中态、状态反馈、动效与圆角角色 |
硬规则
- 新增语义先加 token 再用。 需要新的颜色、字号、圆角、时长或缓动时,先在
app.css定义语义 token(日夜两套值都给),跑deno task gen:tokens,再在组件里引用。 - 禁止原色与十六进制。 组件里不写
#xxxxxx、text-[#..]、bg-red-500这类 Tailwind 调色板色、white/10之类的黑白透明度,也不写text-[13px]、duration-300、ease-[cubic..]、裸rounded。状态只用success/warning/destructive,并且配文字,不只靠颜色。 - 材质按层级只有三种,不在玻璃上叠玻璃:已在卡片里的空态用
<EmptyState plain>。 - 确需例外(第三方库的颜色参数等),在该行或上一行写
token-allow: 原因。
以上规则由 deno task check:tokens(apps/web/scripts/check-design-tokens.sh + 生成物校验)在 deno task ci 中守住。
控制台共享件
PageHeader:页面标题 + 一句说明 + 右侧操作区。EmptyState:空态/建设中占位;plain用于卡片内部。StatusBadge:success | warning | destructive | neutral四种语气,必须带文字。nav.ts:12 个工作区的导航表,标题与说明同时供占位页使用。SegmentedControl(components/ui/segmented.tsx):单选分段,滑动的seg-thumb;用法见 ui-controls.md「本项目(控制台)的落地」。