feat(web): 记录抽屉与两层导航标准

控制台导航最多两层(侧栏一项 = 一页,页内最多一层页签 / 分段);从列表打开的
记录改成列表页上的右侧抽屉,打开的记录写在 ?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
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-10-08 14:03:47 +08:00
1 parent dd0f6e2c09
commit 21c55dfb3a
60 files changed
+2768 -2461

No files matched your search

+59 -3
View File
@@ -178,10 +178,10 @@
| 类型 | 规范 | 现有组件 |
| --- | --- | --- |
| 列表页 | `PageHeader`(标题 + 一句描述 + 主操作)→ `FilterBar`(搜索、状态、对象筛选,状态写入 URL query)→ `DataTable`(行点击开 `DetailSheet`,不跳页)→ 分页 | `page-header` `filter-bar` `data-table` `detail-sheet` 均已有 |
| 列表页 | `PageHeader`(标题 + 一句描述 + 主操作)→ `FilterBar`(搜索、状态、对象筛选,状态写入 URL query)→ `DataTable`(行点击开 `DetailSheet`,不跳页,见 §9)→ 分页 | `page-header` `filter-bar` `data-table` `detail-sheet` 均已有 |
| 详情页 | 统一头部:标题 + `StatusBadge` + 主操作 1 个 + 次操作收进"更多";下方 `DetailSection` 分节,节顺序:概况 → 进度/状态 → 关联对象 → 历史/证据 | `status-badge` `kv-list` `timeline` |
| 跨页关联 | 任何对象名都可点,点开同一个 `DetailSheet` 或深链到其"家"页面 | — |
| 设置 | **左侧分区导航(二级路由)+ 分区内锚点 + 分节表单**,每节独立保存 | 复用 `SettingsCard` / `resource-section` |
| 设置 | **左侧分区导航 + 分区内锚点 + 分节表单**,每节独立保存;左栏只有分区一层(§9.1) | 复用 `SettingsCard` / `resource-section` |
设置用"左侧分区 + 锚点"而不是 MP 的顶部 Tab,理由:
1. 9 个分区在顶部 Tab 会横向溢出(MP 靠 `show-arrows`,现有 9 Tab 在窄屏已挤);左栏能放每区一句描述,等同 MP 的 `settingTabs.*.description`。
@@ -383,5 +383,61 @@ W10 已补(2026-09-28):
## 8. 界面第二轮:系统组只留日志、运行状态、设置(2026-10-06)
- 侧栏 4 组 13 项:概览(首页、智能体会话)/ 获取 / 整理 / 系统(日志、运行状态、设置)。任务、审计、引擎面板、计划不再有入口。
- 日志页 `/console/logs`:任务、定时与自动、登录、审计合成一份列表,可实时追加、勾选后问智能体;第二个页签「定时任务」是原计划页。旧地址:`/console/tasks`(含 `?tab=` `?status=` `?kind=&ref=` `?run=`)、`/console/engine(/:id)`、`/console/audit`(`?targetType=&targetId=` → 对象筛选)、`/console/schedules(?job=)` 都跳到日志页对应筛选;`/console/tasks/:id` 独立页保留,侧栏高亮「日志」。
- 日志页 `/console/logs`:任务、定时与自动、登录、审计合成一份列表,可实时追加、勾选后问智能体;第二个页签「定时任务」是原计划页。旧地址:`/console/tasks`(含 `?tab=` `?status=` `?kind=&ref=` `?run=`)、`/console/engine(/:id)`、`/console/audit`(`?targetType=&targetId=` → 对象筛选)、`/console/schedules(?job=)` 都跳到日志页对应筛选;`/console/tasks/:id` 起初保留为独立页,2026-10-08 起改成日志页的任务抽屉(§9)。
- 运行状态页加「资源」节(CPU / 内存 / 网络 / 磁盘读写与趋势),首页「存储情况」卡换成运行状态简版卡。细节见 `docs/runbook/logs.md`。
## 9. 导航层级与记录抽屉(2026-10-08,现行标准)
控制台怎么分层、从列表打开一条记录怎么展示,以这一节为准;[控件标准](ui-controls.md)只引用这里,不另写一份。
### 9.1 最多两层
- 侧栏一项 = 一个页面。页面里最多再有**一层**切换(页签或分段控件),不再往下嵌第三层。
- 筛选、视图(卡片 / 列表 / 日历)、图表的时间范围是同一页的显示方式,不算一层导航。
- 设置页左栏只有一层:分区。节不出现在左栏和窄屏的下拉下面,是页面里的小标题;搜索与 `#分区/节` 深链仍能滚到节和字段。
### 9.2 从列表打开记录 = 右侧抽屉
- 列表 / 卡片里点一条(看详情、编辑、排查)打开右侧抽屉 `DetailSheet`(`components/console/detail-sheet.tsx`),列表留在原处,滚动位置和筛选都不动。抽屉材质是 `pg-float`,手机上全宽。
- 宽度:`md`(约 32rem,简单记录)、`lg`(约 44rem,有时间线或文件明细)、`xl`(约 64rem,内容重的:订阅对比、站点)。
- 打开的记录写在地址栏 `?open=<id>`,其余参数照留;刷新、分享链接、前进后退都能还原。抽屉里的页签等只属于抽屉的参数(站点的 `?tab=`)随抽屉走,关掉时一起去掉。
- 在本页打开是 push,所以浏览器后退就是关抽屉;关闭按钮 / Esc 在本页打开时等于后退一步,从别处链接直接进来时 replace 去掉参数、留在列表。抽屉开着时换一条记录是 replace。
- 不叠第二层抽屉。抽屉里再打开的详情(站点里的资源、RSS,订阅里的格子)在同一个抽屉里换成子视图,顶部「返回」(Esc 也是先返回);需要更多空间就链到对象自己的页面。
- 动作表单(新建、从「⋯」菜单打开的编辑表单、确认)是对话框性质,可以不进地址栏。
- 实现:列表页用 `useRecordSheet()`,链接用 `<RecordLink page id>`,代码里跳转用 `useOpenRecord()`,别处拼地址用 `recordPath(page, id)`(都在 `components/console/record-sheet.tsx`)。日志页的记录参数是 `?log=<日志 id>`,任务也可以只带 `?run=<引擎运行 id>`(`taskPath(id)`),规则同上。
### 9.3 独立页面只给要待一阵子的工作对象
- 作品:`/console/library/:id`、`/console/media/tmdb/:type/:id`。
- 智能体会话:`/console/agent/:runId`。
- 其余对象(整理记录、订阅、站点、下载、任务、规则组、外部身份、未识别资源、设置里的实例)都是所属列表页上的抽屉。
### 9.4 旧地址
`routes/console/redirects.ts` 把旧的详情页地址换到列表页抽屉,其余参数跟在后面:
| 旧 | 新 |
| --- | --- |
| `/console/organize/:id` | `/console/organize?open=:id` |
| `/console/subscriptions/:id` | `/console/subscriptions?open=:id` |
| `/console/sites/:id(?tab=…)` | `/console/sites?open=:id(&tab=…)` |
| `/console/downloads/:id` | `/console/downloads?open=:id`(`/downloads/plans(/:id)` 仍按 §7 跳 `?plan=`) |
| `/console/tasks/:id` | `/console/logs?type=task&run=:id`;id 是旧业务任务时抽屉里换成它的引擎运行或显示旧任务概况,是下载任务时换到 `/console/downloads?open=:id` |
| `/console/files/trash` | `/console/files?view=trash`(回收站是文件管理右侧的一个视图,左栏「回收站」切过去) |
| `/console/sources?siteId=x` | `/console/sites?open=x&tab=rss` |
站内链接、铃铛、命令面板、任务时间线、整理队列都直接拼新地址;智能体会话里的链接与服务端 `agent/challenge.ts` 生成的地址还是旧格式,靠上表跳转。
### 9.5 现状对照
| 页面 | 处理 |
| --- | --- |
| 整理记录 | 行点开 `lg` 抽屉:状态、操作、路径、文件明细、整理后刮削;队列面板里的「整理记录」换成记录抽屉 |
| 订阅 | 卡片 / 列表 / 日历点开 `xl` 抽屉,覆盖对比的格子在同一抽屉里换成子视图 |
| 站点 | 卡片 / 列表点开 `xl` 抽屉,里面一层页签(概览、资源、原站视图、抓取、RSS、账号);资源、RSS 详情是子视图 |
| 下载面板 | 行点开 `lg` 抽屉,`?open=` 是下载任务或计划 id;不在当前分段里的也能打开 |
| 日志 | 行点开抽屉(`?log=` / `?run=`),不再有「打开任务页」 |
| 文件管理 | 文件详情原本就是 `?sel=`;回收站并进右侧视图 |
| 规则 | 规则组编辑、「自动收新作品」的策略版本查看走 `?open=` |
| 媒体库 | 「未识别」「外部身份」的行抽屉走 `?open=`;作品仍是独立页 |
| 设置 | 左栏只列分区;各分区里实例列表(下载器、媒体服务器、媒体库目录等)的编辑抽屉走 `?open=` |
+1
View File
@@ -28,6 +28,7 @@
- **页头与工具栏**:一屏一个主操作,其余是描边胶囊;工具栏里的图标按钮是描边圆钮(`variant="outline" size="icon-sm"`)。`ghost` 只留给行内文字动作(返回链接、表格行尾的「⋯」、卡片里的「详情」「清除选择」)和顶栏胶囊里的按钮。下拉一律用 `Select`,不用原生 `<select>`。
- **分页**(`Pagination`):一页放得下时只留「共 N 条」(超过最小档 10 条时保留每页条数),没有条目时不渲染;卡片网格下面传 `hideSingle`,一页时整块不显示。翻页按钮按容器宽度收起(`@container`),窄卡片里不折行。
- **顶栏搜索**在右侧玻璃胶囊的第一格(与 uhd_web 流媒体顶栏一致):桌面是平涂淡底胶囊加 Ctrl K 提示,手机只留图标,都打开命令面板。
- **层级与抽屉**:页面里最多一层页签 / 分段;从列表打开记录用右侧抽屉 `DetailSheet`、写进 `?open=`,抽屉里不再叠抽屉。规则只写在 [控制台信息架构 §9](console-ia.md#9-导航层级与记录抽屉2026-10-08现行标准)。
右上角账户模块全站共用 `account-popover.tsx`:用户中心用头像 + 名字的胶囊,流媒体与测速用圆头像;菜单里是另外两块的跳转(当前所在的不列,流媒体与测速需有生效订阅)与退出登录。