跳至正文

状态：交互设计提案，待用户体验评审日期：2026-10-07更新：2026-10-07

监控工作台体验设计

需求纠正与本轮目标

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

本轮先聚焦“打开主题 → 判断采集情况 → 看帖子 → 读评论 → 调整规则”的核心闭环。产品目标仍以总 PRD为准。采用 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。它是独立设计附件，不是正式前端路由，也不调用业务接口。重启终端服务后可以复看。

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

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

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

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

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

用户旅程与关键时刻

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

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

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

信息架构与布局

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

桌面固定主导航与位置栏，主题列表稳定，结果区独立滚动；正文约束最大宽度，避免长标题横跨整个屏幕。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。正式前端本轮未替换为该设计，既有未提交代码保持原样；代码完成与真实能力验收仍按工程规范执行。

PRD：Ripplesight
原始 Markdown