---
type: research
title: 监控工作台体验设计
summary: 参考 Ant Design Pro 的页面信息层级，以监控结果为默认入口的桌面与移动交互设计
status: 交互设计提案，待用户体验评审
date: 2026-10-07
updated: 2026-10-07
---

# 监控工作台体验设计

## 需求纠正与本轮目标

用户原话：“我不是要pagecontainer，我说的是可以参考他的设计，同时我们需要重新启动本项目然后进行uiux的设计”。因此目标是重新组织导航、信息层级和监控操作流程，不以新增某个布局组件作为设计完成标准。此前容器改动及其[验收记录](../records/2026-10-07-PageContainer布局修复.md)保留为实现历史；不把这次提案写成已上线行为。任务状态只维护在 [BACKLOG](../../../BACKLOG.md)。

本轮先聚焦“打开主题 → 判断采集情况 → 看帖子 → 读评论 → 调整规则”的核心闭环。产品目标仍以[总 PRD](../product/prd/01-PRD.md)为准。采用 `pm-market-research:customer-journey-map` 与 `pm-execution:test-scenarios`，依据当前源码、恢复后的真实页面和既有实采记录设计；没有开展新用户访谈，关于使用感受和优先级的判断均为设计假设。

## 可操作设计稿

源文件为仓库内 `workspace/designs/monitor-workbench.html`，无外部依赖；在该目录执行 `python3 -m http.server 8680 --bind 127.0.0.1`，打开 `http://127.0.0.1:8680/monitor-workbench.html`。它是独立设计附件，不是正式前端路由，也不调用业务接口。重启终端服务后可以复看。

可切换四个页签、搜索两条固定样本、查看内容与评论弹层、查看来源说明、预览设置保存反馈，并切换正常、空、加载、错误、无权限五种状态。真实工作台、来源配置、新建主题和内容详情均有明确的跳转入口。设计稿写操作只显示预览反馈，不更改账号、主题或采集预算。

样本来自[真实工作台接入记录](../records/2026-10-07-Chrome工作台接入验收.md)：2026-10-07 20:09:24 入库的两条 B 站帖子。根评论本轮返回 0，样本上限为 2 帖；不代表全平台评论为 0，也不能证明完整覆盖或长期运行。设计稿顶部常驻“固定实采样本，非实时数据”。

## 当前页面的问题与设计取舍

| 当前证据 | 对任务的影响（假设） | 本轮设计 |
|---|---|---|
| 页头“监控主题”、位置栏“我的关注”和侧栏“工作台”并列 | 用户需要判断几个入口是否表达同一任务 | 登录后的核心入口统一称“关键词监控”，顶部只保留位置；主题名称作为唯一一级标题 |
| 单个主题列表仍占三分之一宽度 | 主题少时形成大面积空白，挤压帖子阅读区 | 桌面主题列约 14–16rem，详情区占剩余宽度；窄屏改为顶部当前主题摘要 |
| 规则摘要、暂停/复制/归档和手动运行区位于帖子之前 | 打开页面需要滚动才能查看新内容 | 默认“监控结果”，头部只保留“立即采集”和“编辑设置” |
| 最近一次手动运行与定时运行信息不同源 | “本页尚无手动运行”容易被误读为没有自动监控 | “定时已启用”表示配置；运行记录单独表示某一次任务，自动记录需有接口后才接入 |
| 设置、来源、报告、告警全部堆在同一页 | 阅读结果和修改规则相互干扰 | 四页签：监控结果、采集记录、主题设置、告警；保存反馈与结果浏览分离 |
| 原始来源标识 bilibili 和未完成语义分析 | 可能把关键词命中误当高相关结果 | 显示来源名称“B 站”和“关键词匹配”，不制造相关度分数或情绪结论 |

参考 Ant Design Pro 的页面组织原则：稳定导航、紧凑页头、上下文操作区、分层内容区、页签组织任务。视觉继续遵守[现有设计规范](../../../frontend/DESIGN.md)的黑白、留白和克制分隔；不引入 Ant Design 依赖或复制其组件。当前正式布局仍按该规范运行，本提案导航优先级与页内结构需在实施时同步更新规范。

## 用户旅程与关键时刻

目标用户：本人在本机持续追踪关键词相关的公开内容。JTBD：当我返回监控工作台时，快速知道采集是否可靠、出现了什么新内容，以及哪些内容值得进一步阅读。

| 阶段与触点 | 用户行为与问题 | 可能的感受（待验证假设） | 设计响应 | 观察方式 |
|---|---|---|---|---|
| 打开工作台 | 找到正在关注的主题 | 多个相似入口造成迟疑 | 主导航优先监控，选中主题与标题一致 | 用户是否无需解释就找到 DeepSeek 主题 |
| 判断运行情况 | “定时还开着吗？数据什么时候来的？” | 把启用状态当作正在采集 | 启用状态、频率、采集时间各自表达；失败独立提示 | 能否说明定时启用与本次部分完成的区别 |
| 浏览结果 | 找到新帖并判断是否相关 | 看到命中词，却不知为何收录 | 来源、发布时间、关键词命中；无模型判断时明确待评估 | 能否判断匹配依据与时间先后 |
| 核实讨论 | 打开帖子并读评论、回到原文 | 空评论可能被误读成无人讨论 | 评论空态注明“本次未返回”，保留真实内容入口 | 能否辨别 0 条返回与平台无评论 |
| 调整监控 | 改关键词、来源或频率 | 担心保存导致立即外发或丢失草稿 | 设置页签；保存与立即采集分离，正式实施保留现有校验/版本冲突/草稿规则 | 修改后是否清楚何时生效 |
| 遇到失败 | 识别登录、预算、网络或权限问题 | 不确定是否仍在采集 | 原因与下一步相邻；禁止失败降级为空结果 | 能否在不查看日志的情况下选择正确入口 |

关键时刻是“看到第一条结果前，能否正确理解数据状态”。本轮不加趋势图、热度排名和 AI 摘要，避免以无数据的装饰抢占结果位置。提出的可用性目标为：用户能从首屏指出当前主题、频率、数据时间及覆盖限制；这是待观察目标，不是已完成访谈结论。

## 信息架构与布局

```text
关键词监控
├─ 我的主题（桌面窄列 / 移动摘要）
└─ 当前主题
   ├─ 紧凑页头：主题、启用状态、频率、来源、关键词、上下文操作
   ├─ 监控结果：数据范围 → 搜索与排序说明 → 帖子 → 内容与评论
   ├─ 采集记录：时间、来源、任务状态、保存结果、未完成原因
   ├─ 主题设置：关键词、来源、频率 → 进阶设置 → 保存
   └─ 告警：规则、触发原因、关联内容、处理动作
```

桌面固定主导航与位置栏，主题列表稳定，结果区独立滚动；正文约束最大宽度，避免长标题横跨整个屏幕。390px 时移除常驻左栏，保留当前主题、新建入口、底部导航；页签横向布局，正文不横向溢出。高频动作使用文本按钮与清楚名称，不只依赖图标或颜色。

设计稿仅包含一个已有主题，多主题切换、归档视图和分页仍须保留正式能力；这不是删除现有功能的方案。暂停/复制/归档在正式实施时移入主题操作菜单，保留当前确认语义。公开阅读的完整导航保持公开可达，当前原型只展示一个跳转入口，不代表删掉专题、收藏、报告或排行榜。

## 数据与能力契约

| 页面展示 | 当前依据 | 正式实施边界 |
|---|---|---|
| 主题名称、关键词、频率、启用状态 | 现有主题详情/规则版本 | 复用生成客户端；启用状态不得标成任务“运行中” |
| 帖子标题、来源、发布时间、采集时间、详情地址 | 已存在 `TopicResults` / 内容记录 | 缺失字段显示未知，不回填当前时间；详情路径为 `/content/{id}` |
| 本批 2 帖、0 条根评论 | 本轮验收记录固定样本 | 不能把最近 5 条列表长度当总数；总数/批次/评论范围无接口则隐藏指标 |
| 关键词匹配、相关性未评估 | 实际采集依据与分析缺口 | 不显示虚构相似度或“最相关”排序；接入模型后提供判定版本和依据 |
| 采集记录时间线、部分完成 | 既有运行记录样本 | 原型是目标结构；现有页面只有手动受理反馈，补充持久任务查询后才宣称包含定时历史 |
| 来源可用性、登录状态、预算 | 现有来源连接与运行校验 | 实时读取状态；没有响应不能宣称已连接或健康；未验证平台不做可用开关 |
| 告警 | 原型未读取告警接口 | 明确“待接入”；正式页面按真实查询区分尚无规则、无历史、请求失败与无权限 |
| 搜索、页签、设置反馈 | 原型本地交互 | 正式筛选需要明确查询范围和分页，状态写入 URL；保存继续保留校验、草稿、版本冲突和幂等语义 |

## 场景与验收脚本

依据 `pm-execution:test-scenarios`。角色为主题所有者，除特别说明外前置条件为已登录、已有一个主题。下表分别界定设计稿检查与正式接入标准，原型状态模拟不是业务验收。

| 编号 | 起点、步骤 | 设计稿预期 | 正式接入还需证明 |
|---|---|---|---|
| UX-01 正常浏览 | 打开主题，查看首屏，点击帖子 | 默认结果页；有来源/时间/匹配依据；弹层能回到列表 | 使用真实接口；详情链接正确；结果更新不覆盖规则草稿 |
| UX-02 采集判断 | 点击采集记录，再返回结果 | 显示部分完成与 2 帖边界，定时启用与任务状态不同 | 手动与定时记录对应真实任务；失败原因和重试不误发重复任务 |
| UX-03 评论空态 | 打开任一帖子 | 表达“本次未返回”，无虚构评论；关闭后焦点回原触发控件 | 区分尚未采集、采集失败、已返回 0、存在评论及增量 |
| UX-04 修改规则 | 切到设置，修改关键词，预览保存 | 反馈标为预览，真实主题不变化 | 保留字段校验、未保存离开提示、版本冲突处理与成功刷新 |
| UX-05 搜索无匹配 | 搜索不存在词，再清除 | 明确仅搜索本页两条样本；清除后恢复 | 正式范围、分页、URL 状态一致；无匹配和采集空态分开 |
| UX-06 五状态 | 依次选择正常/空/加载/错误/无权限 | 各状态文案与动作不同，失败不显示为空 | 真实 API 故障、401/403/404 及旧数据过期分别验证 |
| UX-07 键盘 | Tab 到页签；左右/Home/End；打开弹层后 Escape | 页签单一入口、焦点可见、弹层关闭并归还焦点 | 接入 Radix 后对所有业务控件、确认弹窗复测 |
| UX-08 390px | 窄屏打开上述流程，滚动到底 | 正文无横向溢出，底栏不覆盖正文，动作仍可达 | 正式布局的导航、会话、主题切换与五状态同样通过 |

优先实施结果前置和状态语义，再拆分设置/操作与来源入口，最后接入可追溯的定时运行时间线。后续任务使用现有 shadcn/Radix 组件，继续调用生成客户端；不为了视觉改动引入新数据库表或采集机制。

## 本轮验证边界

项目已恢复运行：前端 8666、后端 8667、知识库 8668；后端 `/api/ready` 返回 200，Chrome 真实主题页显示两条既有实采内容。这仅证明服务恢复和已有结果可读，不代表执行了新采集、下一小时验收或修复了全部登录路径。

原型的浏览器与文档检查结果在完成后同步到唯一任务进度 BACKLOG。正式前端本轮未替换为该设计，既有未提交代码保持原样；代码完成与真实能力验收仍按工程规范执行。