issue-hub-ai/docs/design/implementation-screenshots/README.md

# 实现截图索引

本目录保存当前前端实现的逐页截图，用于和 `../images2/` 中的高保真设计图对比。

生成方式：

```pwsh
npm run capture:pages
```

脚本会复用 `http://127.0.0.1:5174` 上已有的服务；若没有运行中的服务，会直接托管 `dist/` 构建产物并刷新以下截图。运行前请先执行 `npm run build`。

桌面截图视口已按对应 `../images2/` 设计图尺寸采集，便于执行自动视觉差异对比。

| 实现截图 | hash 路由 | 视口 | 对应设计图 |
| --- | --- | --- | --- |
| `dispatcher-01-center-dashboard.png` | `/#/center-dashboard` | `1672x941` | `../images2/dispatcher-01-center-dashboard.png` |
| `dispatcher-02-issue-pool.png` | `/#/issue-pool` | `1672x941` | `../images2/dispatcher-02-issue-pool.png` |
| `dispatcher-03-department-queue.png` | `/#/department-queue` | `1672x941` | `../images2/dispatcher-03-department-queue.png` |
| `dispatcher-04-escalation-center.png` | `/#/escalation-center` | `1672x941` | `../images2/dispatcher-04-escalation-center.png` |
| `dispatcher-05-knowledge-review.png` | `/#/knowledge-review` | `1672x941` | `../images2/dispatcher-05-knowledge-review.png` |
| `dispatcher-06-rule-config.png` | `/#/rule-config` | `1672x941` | `../images2/dispatcher-06-rule-config.png` |
| `dispatcher-07-analytics-board.png` | `/#/analytics-board` | `1672x941` | `../images2/dispatcher-07-analytics-board.png` |
| `client-01-workbench.png` | `/#/client-workbench` | `1672x941` | `../images2/client-01-workbench.png` |
| `client-02-submit-issue.png` | `/#/submit-issue` | `1672x941` | `../images2/client-02-submit-issue.png` |
| `client-03-issue-detail-handler.png` | `/#/handler-detail` | `1672x941` | `../images2/client-03-issue-detail-handler.png` |
| `client-04-submitter-tracking.png` | `/#/submitter-tracking` | `1622x969` | `../images2/client-04-submitter-tracking.png` |
| `client-05-mobile-submit.png` | `/#/mobile-submit` | `1536x1024` | `../images2/client-05-mobile-submit.png` |

## 视觉差异报告

生成方式：

```pwsh
npm run visual:diff
```

报告和差异图输出到 `../visual-diff/`：

- `../visual-diff/report.md`
- `../visual-diff/*-diff.png`

当前报告时间：`2026-06-18T04:47:26.995Z`。自动 visual diff 诊断为 7 张可人工复核、5 张需打磨；人工定稿流程已推进为 4 张建议通过、8 张定稿候选、0 张需人工决策。后续以 `docs/design/review-index.html` 和 `docs/design/manual-design-freeze-audit.md` 做人工定稿审阅。`review-index.html` 支持在当前浏览器保存页面级结论、备注，并导出 JSON 定稿记录。

## 移动视口截图

| 实现截图 | hash 路由 | 视口 |
| --- | --- | --- |
| `client-05-mobile-submit-mobile.png` | `/#/mobile-submit` | `390x920` |
| `client-02-submit-issue-mobile.png` | `/#/submit-issue` | `430x932` |
| `dispatcher-02-issue-pool-mobile.png` | `/#/issue-pool` | `430x932` |

## 交互 smoke 截图

交互截图位于 `../interaction-smoke/`，由 `npm run smoke:browser` 自动生成。

| 实现截图 | 验证点 |
| --- | --- |
| `analytics-filtered.png` | 管理看板按近 30 日、研发部、仅风险筛选，验证设计量级展示、CSV 导出、真实下钻、刷新记录和视图状态持久化 |
| `center-ai-dispatch-accepted.png` | 中心调度台行级派发操作面板与采纳 AI 派发 |
| `center-ai-live-triage.png` | mock AI 服务返回实时 triage 并写入时间线 |
| `client-workbench-detail-tabs.png` | 客户端我的待办详情 tab、列表行操作、更多操作、关注 / 复制链接和返回列表 |
| `department-assigned-handler.png` | 部门队列成员负载明细筛选、明细分派与分派处理人 |
| `escalation-sla-scanned.png` | SLA 扫描按提醒策略生成提醒，展示重复间隔、渠道和投递状态 |
| `escalation-marked-handled.png` | 提醒标记处理 |
| `global-sync-local-mode.png` | 侧栏同步状态和未配置同步服务反馈 |
| `global-notifications-panel.png` | 全局通知中心，聚合升级提醒、策略驱动 SLA 风险、渠道状态和待补充统计 |
| `global-help-panel.png` | 全局帮助面板，展示角色流程、常用操作和快速跳转 |
| `handler-comment-task-linked.png` | 处理人内部评论保留处理链路、关联任务、SLA 查看记录、处理链接复制记录、催办协作人和处理记录 CSV 导出 |
| `handler-detail-expanded-report.png` | 处理人详情展开、附件下载和完整 AI 分析报告 |
| `handler-resolved.png` | 处理人接单、协作、转派、提交处理结果 |
| `handler-tabs-comment-tools.png` | 处理人详情 tab、评论对象切换和评论工具附件 / 图片 / 链接真实插入 |
| `issue-pool-bulk-dispatched.png` | 问题池勾选后批量派发 |
| `issue-pool-bulk-tagged.png` | 问题池批量治理面板导入标签 |
| `issue-pool-empty-search.png` | 问题池搜索空状态和空批量派发反馈 |
| `knowledge-draft-generated.png` | 知识复盘生成知识草稿 |
| `knowledge-draft-merged.png` | 知识复盘合并知识条目 |
| `knowledge-settings-saved.png` | 知识复盘设置面板保存、持久化与重新打开恢复 |
| `knowledge-summary-edited.png` | 知识复盘编辑 AI 摘要并保存草稿 |
| `mobile-narrow-submit.png` | `390x920` 移动窄屏提交页 |
| `mobile-narrow-submitted.png` | `390x920` 移动窄屏提交后追踪 |
| `mobile-submit-attachment-selected.png` | 移动端提交手机附件上传选择反馈 |
| `mobile-submitted-tracking.png` | 移动端提交后进入进度追踪 |
| `mobile-supplement-missing-upload.png` | 移动端补充手机定位缺失项并选择补充附件 |
| `mobile-supplement-submitted.png` | 移动端提交补充信息，补充文本和附件进入时间线 |
| `rule-config-audit-log.png` | 规则保存草稿后查看变更记录 |
| `rule-config-tested.png` | 规则自动化模式保存和测试预览 |
| `settings-panel-configured.png` | 全局设置面板保存同步、AI/API Key 和提醒配置 |
| `settings-permission-roles.png` | 全局设置面板保存当前生效角色、权限角色矩阵和审计留存天数 |
| `settings-sync-success.png` | mock 服务端同步健康检查、push/pull 和远端问题合并 |
| `submit-issue-editor-attachment.png` | 桌面提交页 AI 重新检测、分类候选、流转规则详情、AI 补充、富文本工具和附件上传 |
| `submitter-reopened.png` | 提交人要求返工 |
| `submitter-approved.png` | 提交人确认解决 |
| `submitter-tracking-after-submit.png` | 客户端提交后进入进度追踪 |
| `submitter-detail-expanded-download.png` | 提交人负责人资料、全部回复展开、详情展开和附件下载 |
| `rule-config-published.png` | 规则发布反馈 |

## 当前 QA 观察

- 处理人评论工具已从入口态进入可审计业务态：附件和图片进入问题附件列表，链接进入评论内容，工具使用记录写入 `commentTools`。
- hash 路由已可直接打开每个页面，便于截图和人工验收。
- 调度中心和客户端页面均非空白，导航选中态正常。
- 中心调度台默认待派发问题已提升到 6 条，首屏表格密度更接近 images2 的高密度调度台。
- 侧栏系统状态已显示当前生效角色；权限不足的导航项会呈现锁定态，点击后由统一权限拦截反馈。
- 第一版实现已经具备定稿页的主结构和关键动作，但细节仍需继续贴近 images2：图标密度、右侧检查器内容、部分图表精细度、移动端视觉质感。
- 规则配置页已补充真实规则推荐预览，提醒升级页已补充 SLA 自动扫描和提醒处理队列；这两页截图需要作为下一轮重点复核对象。
- 中心调度台、问题池、部门队列已补充真实筛选和批量动作；客户端提交页已补充保存草稿和 AI 重新检查反馈；移动端提交页已可直接提交演示问题。下一轮截图需要刷新这些页面并重点观察表格勾选、筛选按钮和移动端纵向布局。
- 顶部搜索已从占位文本升级为全局输入框，并接入调度台、问题池、部门队列、提醒升级、知识复盘、客户端待办和提交人追踪列表。截图刷新时需要确认输入框宽度、快捷键标识和顶部按钮不会互相挤压。
- DataTable 已补充统一空结果状态；后续截图或交互验收可通过输入一个无命中搜索词观察调度台、问题池、部门队列的空状态提示。
- 移动端已修复左侧导航占宽问题：窄屏下导航切换为顶部图标条，主内容全宽显示；移动提交页手机模拟框在 `390x920` 下完整居中。
- DataTable 行已改为 `div role="button"`，避免行按钮中嵌套复选框和操作按钮，真实浏览器点击由 smoke 覆盖。
- 浏览器 smoke 已覆盖问题池批量派发和批量标签、SLA 扫描/处理、移动端提交/补充、全局同步状态、设置面板配置保存、权限角色保存、权限拦截与恢复、带角色权限头的 mock 服务端同步成功路径、AI API Key 保存/检查/清除，以及 mock AI 实时 triage 链路；下一轮可继续补规则多条变更、知识复盘切换不同关闭问题。
- 管理看板已补充时间范围、部门、风险视图筛选、CSV 报表导出、自定义组件显示 / 隐藏、真实数据下钻、刷新记录和视图状态持久化，并已按 images2 细化为高密度运营屏：首屏包含动态 KPI、趋势折线、状态环图、部门负载、重复问题、效率趋势、SLA 风险、AI 洞察和本周对比。
- 规则配置页已按 images2 细化为规则工作台：首屏包含规则类型导航、条件矩阵、规则动作、AI 派单策略、规则预览和底部发布栏，并保留测试、草稿、变更记录和发布 smoke 路径。
- 知识复盘页已按 images2 细化为高密度复盘工作台：首屏包含 KPI、双趋势图、复盘 tab、筛选条、问题表格、AI 复盘摘要、知识应用效果和可见知识动作。
- 客户端提交问题页已按 images2 细化为结构化提交工作台：主表单包含标题计数、描述工具栏、来源/系统、影响范围、期望时间、影响等级、上传和联系人信息；右侧 AI 预检查包含分类置信度、建议补充、相似问题、预计流转部门和 AI 提示。
- 客户端我的待办页已按 images2 细化为高密度任务工作台：首屏包含 4 个任务指标、待办筛选、SLA 排序、任务表格、右侧 AI 摘要、推荐下一步、相似问题和固定底部操作条。
- 处理人问题详情页已按 images2 细化为三栏处理工作台：左侧显示风险/SLA、状态元数据、可展开问题描述和附件下载，中间显示处理过程 tab、时间线、评论区和关联任务，右侧显示 AI 处理建议、完整分析报告、相似历史问题和下一步动作。
- 提交人进度追踪页已按 images2 细化为三栏追踪工作台：左侧提交记录含状态筛选和 SLA 标签，中间显示选中问题、处理进度、负责人资料、预计完成/优先级、最新回复、全部回复展开、处理记录和我的操作，右侧显示问题描述、相关信息和附件。
- 移动端提交 / 补充页已按 images2 细化为能力说明加双手机构图：提交手机包含原生顶部、结构化表单、附件上传、AI 预检查和底部提交动作；补充手机包含缺失信息清单、补充说明、上传、处理进度、负责人/预计时间和联系/催办/提交补充动作。
- `npm run capture:pages` 已加固清空本地数据后的页面刷新方式，避免 CDP 导航与 `location.reload()` 竞态造成空白截图；失败诊断会输出页面快照和最近资源列表。
- 规则配置、知识复盘、同步本地模式和平台设置面板的关键路径已进入 smoke。