1xiny
实现截图索引
本目录保存当前前端实现的逐页截图，用于和 ../images2/ 中的高保真设计图对比。
生成方式：
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 |
视觉差异报告
生成方式：
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。