chore: initial import issue hub ai
This commit is contained in:
1xiny
+10
@@ -0,0 +1,10 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
target/
|
||||||
|
.vite/
|
||||||
|
.codex/
|
||||||
|
release/
|
||||||
|
*.log
|
||||||
|
*.db
|
||||||
|
*.db-*
|
||||||
|
.env
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
# Issue Hub AI
|
||||||
|
|
||||||
|
AI 驱动的问题调度与流转平台原型，面向“客户端提交问题，中心端自动分析、派发、提醒，并让提交人、处理人、调度员都能看到完整处理过程”的场景。
|
||||||
|
|
||||||
|
## 当前范围
|
||||||
|
|
||||||
|
- 调度中心 7 个页面：中心调度台、问题池、部门队列、提醒升级、知识复盘、规则配置、管理看板。
|
||||||
|
- 客户端 5 个页面：我的待办、提交问题、处理人详情、提交人进度追踪、移动端提交/补充。
|
||||||
|
- AI 调度能力原型：问题 triage、相似问题、推荐部门/处理人、置信度、缺失信息、规则测试、知识草稿和无需沉淀决策。
|
||||||
|
- AI 调用链路：中心调度台可对选中问题执行 AI 重新分析，调用设置中的 OpenAI-compatible Base URL 并写入新的推荐结果与时间线。
|
||||||
|
- 业务流转动作：提交、AI 预检查补充、派发、批量派发、批量关闭、批量升级、批量标签、问题池 CSV 导出、退回补充、部门分派、接单、协作、处理人评论、评论工具附件 / 图片 / 链接真实插入、关联任务、处理人详情展开、SLA 查看记录、处理链接复制记录、催办协作人、全局通知中心、全局帮助面板、处理记录 CSV 导出、AI 完整分析报告、转派、处理结果、验收、返工、策略驱动 SLA 扫描、升级提醒、知识合并、无需沉淀标记、规则条件删除。
|
||||||
|
- 全局状态：hash 路由、全局搜索、本地持久化、重置演示数据、侧栏同步状态、未配置同步反馈和平台设置面板。
|
||||||
|
- 平台设置：同步服务地址/Token、AI 服务类型/模型/采纳阈值/API Key、SLA 提醒阈值、重复间隔与通知渠道、当前生效角色、权限角色和审计留存策略。
|
||||||
|
- 权限拦截：路由访问和关键操作会按当前角色校验权限，缺权时保留只读视图并给出统一反馈。
|
||||||
|
- 同步链路：设置面板可测试同步健康检查、执行 push/pull，并合并服务端返回的问题、时间线和规则等数据；同步请求会携带当前角色和权限声明。
|
||||||
|
- 分层实现：`src/app` 应用状态与路由，`src/domain` 领域规则，`src/data` 数据仓储/同步边界，`src/features` 页面，`src/shared` 共享布局和组件。
|
||||||
|
|
||||||
|
## 设计与文档
|
||||||
|
|
||||||
|
- 产品 PRD：`docs/ai-dispatch-issue-platform-prd.md`
|
||||||
|
- 流程图：`docs/ai-dispatch-flowcharts.md`
|
||||||
|
- images2 高保真设计图：`docs/design/images2/`
|
||||||
|
- 实现截图索引：`docs/design/implementation-screenshots/README.md`
|
||||||
|
- 人工定稿审阅入口：`docs/design/review-index.html`
|
||||||
|
- 人工设计定稿审计：`docs/design/manual-design-freeze-audit.md`
|
||||||
|
- 最终设计定稿记录：`docs/design/final-design-freeze-record.md`
|
||||||
|
- 完成度审计：`docs/design/completion-audit.md`
|
||||||
|
- 视觉差异报告：`docs/design/visual-diff/report.md`
|
||||||
|
- 实现进度与验证记录：`docs/design/implementation-progress.md`
|
||||||
|
- 浏览器冒烟说明：`docs/design/browser-smoke.md`
|
||||||
|
|
||||||
|
## 前端启动
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
cd D:\NetPorjects\JavaProject\worknode\issue-hub-ai
|
||||||
|
npm install
|
||||||
|
npm run dev -- --host 127.0.0.1 --port 5174
|
||||||
|
```
|
||||||
|
|
||||||
|
浏览器访问：
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://127.0.0.1:5174/#/center-dashboard
|
||||||
|
```
|
||||||
|
|
||||||
|
## 桌面端
|
||||||
|
|
||||||
|
项目保留 Tauri 外壳和便携数据文件能力：
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
npm run tauri dev
|
||||||
|
```
|
||||||
|
|
||||||
|
当前新调度平台主要通过 `src/data/appRepository.ts` 使用浏览器 `localStorage` 演示持久化；`src/data/appSyncRepository.ts` 已抽出服务端同步边界，顶部设置面板可保存同步地址和 Token，配置后可走服务端 push/pull。
|
||||||
|
|
||||||
|
## 服务端同步
|
||||||
|
|
||||||
|
服务端位于 `server/`，使用 Spring Boot + PostgreSQL。同步服务使用通用 `sync_record` 表，当前支持问题、时间线、AI triage、提醒、部门、人员、规则、规则审计、知识草稿、知识决策，以及旧版附件/AI 分析/action draft。
|
||||||
|
|
||||||
|
同步接口需要：
|
||||||
|
|
||||||
|
- `Authorization: Bearer <ISSUE_HUB_SYNC_TOKEN>`
|
||||||
|
- `X-Issue-Hub-Role`
|
||||||
|
- `X-Issue-Hub-Permissions`，其中必须包含 `manage_settings`
|
||||||
|
|
||||||
|
允许调用来源可通过 `ISSUE_HUB_ALLOWED_ORIGINS` 配置，默认允许本地 Vite 和 Tauri 预览端口。
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
cd D:\NetPorjects\JavaProject\worknode\issue-hub-ai\server
|
||||||
|
docker compose up -d
|
||||||
|
$env:ISSUE_HUB_SYNC_TOKEN = "your-sync-token"
|
||||||
|
$env:ISSUE_HUB_ALLOWED_ORIGINS = "http://127.0.0.1:5174,http://localhost:5174"
|
||||||
|
mvn spring-boot:run
|
||||||
|
```
|
||||||
|
|
||||||
|
同步地址：
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://localhost:8088
|
||||||
|
```
|
||||||
|
|
||||||
|
## 验证
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
cd D:\NetPorjects\JavaProject\worknode\issue-hub-ai
|
||||||
|
npm test
|
||||||
|
npm run build
|
||||||
|
npm run smoke:browser
|
||||||
|
npm run capture:pages
|
||||||
|
```
|
||||||
|
|
||||||
|
最近验证结果：`npx tsc --noEmit` 通过；29 个前端测试文件、104 个测试通过；生产构建通过，保留既有 500 kB chunk 体积提示；浏览器 smoke 通过；逐页实现截图刷新通过；`npm run visual:diff` 最新报告时间为 `2026-06-18T04:47:26.995Z`，自动诊断为 7 页可人工复核、5 页需打磨，人工定稿流程为 4 页建议通过、8 页定稿候选、0 页需人工决策。浏览器 smoke 内置 mock 同步服务覆盖成功同步路径，内置 mock AI 服务覆盖实时 triage 链路、全局通知中心 / 帮助面板、问题池真实分页 / 每页条数切换 / 提交人真实筛选 / CSV 导出、中心调度台真实分页 / 每页条数切换 / 行级派发操作面板、提醒升级风险分组表格 / 升级链路 / 提醒规则 / 最近动作、部门队列真实分页 / 每页条数切换 / 队列设置持久化 / 成员负载明细筛选与分派、我的待办真实分页 / 每页条数切换 / 详情 tab / 关注 / 复制链接 / 返回 / 更多操作、提交人追踪真实分页 / 每页条数切换 / 排序重置、知识复盘真实分页 / 每页条数切换 / 设置持久化、AI 预检查重新检测 / 审计记录 / 分类候选写入 / 流转规则详情、提交问题附件上传 / 草稿保存 / reload 恢复 / 提交后清理、移动端联系 / 催办时间线与补充文本 / 附件持久化、提交人详情展开 / 附件下载记录、处理人详情展开 / SLA 查看记录 / 处理链接复制记录 / 催办协作人时间线 / 评论工具附件和图片入问题附件 / 评论工具链接入评论 / 附件下载记录 / 处理记录 CSV 导出与完整分析报告、问题池批量治理、知识摘要编辑 / 知识无需沉淀标记、规则草稿与变更记录、管理看板 CSV 导出、自定义布局隐藏与持久化、真实数据下钻记录、刷新记录和筛选视图状态持久化、权限角色保存、权限拦截恢复路径、处理人评论 / 关联任务和规则条件删除。
|
||||||
|
|
||||||
|
当前机器未安装 `mvn`，且 `server/` 没有 Maven Wrapper；服务端 `mvn test` 需要在安装 Maven 后补跑。
|
||||||
|
|
||||||
|
## 安全边界
|
||||||
|
|
||||||
|
- 演示数据默认保存在本机浏览器存储，重置演示数据会恢复 seed 数据。
|
||||||
|
- 同步 Token 只用于调用自托管同步服务，不进入服务端业务记录；同步服务同时检查当前角色权限声明，但 Token 仍是服务端实际凭据。
|
||||||
|
- AI API Key 通过 Tauri 原生命令 `save_secret/load_secret` 保存；浏览器预览模式仅降级到本机 secret fallback。
|
||||||
|
- 服务端同步业务对象，不保存 OpenAI API Key、完整 Prompt 日志或 embedding 向量。
|
||||||
|
- AI 在当前原型中作为建议、草稿、规则预览和分析结果出现，关键状态变更仍由用户操作确认。
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
# Design QA: Client Handler Issue Detail
|
||||||
|
|
||||||
|
final result: passed
|
||||||
|
|
||||||
|
## Evidence
|
||||||
|
|
||||||
|
- source visual truth path: `docs/design/images2/client-03-issue-detail-handler.png`
|
||||||
|
- implementation screenshot path: `docs/design/implementation-screenshots/client-03-issue-detail-handler.png`
|
||||||
|
- viewport: desktop 1600x1000
|
||||||
|
- route/state: `/#/handler-detail`, platform admin role, selected assigned issue
|
||||||
|
- full-view comparison evidence: opened the source design and refreshed implementation screenshots in the same QA pass.
|
||||||
|
- focused region comparison evidence: checked left issue summary, risk/SLA/status metadata, problem description, attachments, middle process tabs, timeline, comment composer, linked task, right AI recommendation, similar history, and next action stack.
|
||||||
|
|
||||||
|
## Findings
|
||||||
|
|
||||||
|
- No actionable P0/P1/P2 findings remain for this screen.
|
||||||
|
- Typography: selected issue title, metadata labels, timeline events, AI recommendations, and action labels now use a dense handler-workspace hierarchy instead of the previous sparse summary/time-line/action split.
|
||||||
|
- Spacing and layout rhythm: implementation now follows the target's three-column handler detail surface: issue context rail, process workspace, and AI/action rail.
|
||||||
|
- Colors and visual tokens: high-risk/SLA states, timeline nodes, AI confidence, similar issue tags, and primary handler actions stay inside the existing semantic token system.
|
||||||
|
- Image and asset fidelity: this screen is pure app UI; no raster assets are required. Timeline, comment, task, attachment, AI, and action icons use `lucide-react`.
|
||||||
|
- Copy/content: visible labels match the product domain: 问题详情, 处理过程, 关联信息, SLA 详情, AI 处理建议, 相似历史问题, 下一步动作, 接单处理, 请求协作, 转派, 提交处理结果.
|
||||||
|
|
||||||
|
## Patches Made Since Previous QA Pass
|
||||||
|
|
||||||
|
- Split handler issue detail UI into focused components under `src/features/client/components/handler`.
|
||||||
|
- Added `HandlerIssueSummaryAside` for left-side issue context, metadata, description, and attachments.
|
||||||
|
- Added `HandlerTimelineWorkspace` for process tabs, event timeline, comment composer, linked task, and submit result action.
|
||||||
|
- Added `HandlerInsightPanel` for AI recommendation, root-cause notes, similar history, and next actions.
|
||||||
|
- Reworked `HandlerIssueDetailPage` so it coordinates selected issue data, triage data, permissions, and existing action handlers.
|
||||||
|
- Fixed AI confidence display to normalize both ratio-style and percent-style values.
|
||||||
|
- Refreshed implementation screenshots with `npm run capture:pages`.
|
||||||
|
|
||||||
|
## Open Questions
|
||||||
|
|
||||||
|
- The linked task and attachment rows are currently demo metadata. Production task/attachment collections can be wired into the same layout components later.
|
||||||
|
|
||||||
|
## Implementation Checklist
|
||||||
|
|
||||||
|
- Keep handler-specific UI under `components/handler` to avoid returning to a single large detail page.
|
||||||
|
- Preserve action button labels because browser smoke verifies the handler workflow by text: 接单处理, 请求协作, 转派, 提交处理结果.
|
||||||
|
- Continue the next fidelity pass on the remaining client workbench density.
|
||||||
|
|
||||||
|
## Follow-Up Polish
|
||||||
|
|
||||||
|
- P3: add a mobile-specific capture for handler detail after the client workbench pass is finalized.
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
# AI 调度问题管理平台流程图
|
||||||
|
|
||||||
|
本文档承接 [AI 调度问题管理平台 PRD](./ai-dispatch-issue-platform-prd.md)，用于把 MVP 阶段的核心业务流、AI 调度逻辑、状态流转和页面关系固定下来。
|
||||||
|
|
||||||
|
## 1. 设计简报
|
||||||
|
|
||||||
|
交付目标：为 Issue Hub AI 的“中心 AI 调度平台”版本提供可评审的流程图和界面设计依据。
|
||||||
|
|
||||||
|
用户与主操作：提交人快速提交问题，中心端确认 AI 派单，处理人接单解决，部门负责人监控队列和超时。
|
||||||
|
|
||||||
|
视觉方向：冷静、清晰、企业级调度台，强调队列、状态、责任人和下一步动作。
|
||||||
|
|
||||||
|
交互方向：关键状态变化必须可追溯；AI 建议必须有理由、置信度和人工确认入口；超时与升级要在工作台里醒目但不过度打扰。
|
||||||
|
|
||||||
|
边界约束：MVP 阶段 AI 先做建议，不默认自动改变业务状态；先做角色 + 部门权限，不做复杂审批流。
|
||||||
|
|
||||||
|
## 2. 全链路问题处理流程
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart TD
|
||||||
|
A["提交人创建问题"] --> B["上传描述、截图、附件"]
|
||||||
|
B --> C["AI 分析问题"]
|
||||||
|
C --> C1["生成摘要"]
|
||||||
|
C --> C2["识别分类、严重程度、影响范围"]
|
||||||
|
C --> C3["推荐责任部门、处理人、SLA"]
|
||||||
|
C1 --> D["进入中心待派发队列"]
|
||||||
|
C2 --> D
|
||||||
|
C3 --> D
|
||||||
|
D --> E{"中心端是否采纳 AI 建议"}
|
||||||
|
E -- "采纳" --> F["派发到个人或部门队列"]
|
||||||
|
E -- "调整" --> G["人工修改部门、人员、优先级"]
|
||||||
|
G --> F
|
||||||
|
E -- "信息不足" --> H["退回提交人补充"]
|
||||||
|
H --> B
|
||||||
|
F --> I{"是否派到部门"}
|
||||||
|
I -- "部门队列" --> J["部门负责人分派处理人"]
|
||||||
|
I -- "个人队列" --> K["处理人收到待接单"]
|
||||||
|
J --> K
|
||||||
|
K --> L["处理人接单"]
|
||||||
|
L --> M["处理中"]
|
||||||
|
M --> N{"是否需要协作或转派"}
|
||||||
|
N -- "请求协作" --> O["协作人补充处理"]
|
||||||
|
O --> M
|
||||||
|
N -- "转派" --> P["填写转派原因"]
|
||||||
|
P --> F
|
||||||
|
N -- "无需" --> Q["提交处理结果"]
|
||||||
|
Q --> R["提交人验收"]
|
||||||
|
R -- "通过" --> S["关闭问题"]
|
||||||
|
R -- "返工" --> T["退回处理中"]
|
||||||
|
T --> M
|
||||||
|
S --> U["AI 生成复盘摘要"]
|
||||||
|
U --> V["可沉淀为知识库条目"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. AI 调度判断流程
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart TD
|
||||||
|
A["新问题进入 AI 调度"] --> B["结构化提取"]
|
||||||
|
B --> B1["标题、摘要、关键事实"]
|
||||||
|
B --> B2["业务模块、客户、影响范围"]
|
||||||
|
B --> B3["缺失信息"]
|
||||||
|
B1 --> C["相似问题检索"]
|
||||||
|
B2 --> C
|
||||||
|
C --> D["规则匹配"]
|
||||||
|
D --> D1["关键词与分类规则"]
|
||||||
|
D --> D2["部门职责规则"]
|
||||||
|
D --> D3["SLA 与优先级规则"]
|
||||||
|
D --> E["候选部门和候选处理人评分"]
|
||||||
|
C --> E
|
||||||
|
E --> F{"置信度是否达标"}
|
||||||
|
F -- "高" --> G["推荐派发对象"]
|
||||||
|
F -- "中" --> H["推荐部门，等待中心确认"]
|
||||||
|
F -- "低" --> I["进入人工分诊队列"]
|
||||||
|
G --> J["生成派单理由"]
|
||||||
|
H --> J
|
||||||
|
I --> J
|
||||||
|
J --> K["写入 AI 分析记录"]
|
||||||
|
K --> L["展示给中心端"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4. 问题状态流转图
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
stateDiagram-v2
|
||||||
|
[*] --> draft: 创建草稿
|
||||||
|
draft --> submitted: 提交
|
||||||
|
submitted --> ai_triaged: AI 分析完成
|
||||||
|
ai_triaged --> dispatch_pending: 进入待派发
|
||||||
|
dispatch_pending --> waiting_submitter: 退回补充
|
||||||
|
waiting_submitter --> submitted: 补充后再提交
|
||||||
|
dispatch_pending --> assigned_to_department: 派发到部门
|
||||||
|
dispatch_pending --> assigned_to_user: 派发到个人
|
||||||
|
assigned_to_department --> assigned_to_user: 部门负责人分派
|
||||||
|
assigned_to_user --> accepted: 接单
|
||||||
|
accepted --> in_progress: 开始处理
|
||||||
|
in_progress --> waiting_collaborator: 请求协作
|
||||||
|
waiting_collaborator --> in_progress: 协作完成
|
||||||
|
in_progress --> transferred: 转派
|
||||||
|
transferred --> dispatch_pending: 重新分派
|
||||||
|
in_progress --> resolved: 提交结果
|
||||||
|
resolved --> closed: 验收通过
|
||||||
|
resolved --> reopened: 验收返工
|
||||||
|
reopened --> in_progress: 重新处理
|
||||||
|
draft --> cancelled: 取消
|
||||||
|
submitted --> cancelled: 取消
|
||||||
|
closed --> [*]
|
||||||
|
cancelled --> [*]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 5. 多角色协作泳道
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart LR
|
||||||
|
subgraph Submitter["提交人客户端"]
|
||||||
|
S1["提交问题"] --> S2["补充信息"]
|
||||||
|
S2 --> S3["验收结果"]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Center["中心调度端"]
|
||||||
|
C1["待派发队列"] --> C2["查看 AI 建议"]
|
||||||
|
C2 --> C3["派发或退回"]
|
||||||
|
C3 --> C4["监控超时与升级"]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Department["部门负责人端"]
|
||||||
|
D1["部门问题池"] --> D2["查看人员负载"]
|
||||||
|
D2 --> D3["分派处理人"]
|
||||||
|
D3 --> D4["介入高风险问题"]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Handler["处理人客户端"]
|
||||||
|
H1["收到待接单"] --> H2["接单处理"]
|
||||||
|
H2 --> H3["协作、转派或完成"]
|
||||||
|
H3 --> H4["提交处理结果"]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph AI["AI 调度能力"]
|
||||||
|
A1["摘要分类"] --> A2["派单建议"]
|
||||||
|
A2 --> A3["提醒升级"]
|
||||||
|
A3 --> A4["复盘沉淀"]
|
||||||
|
end
|
||||||
|
|
||||||
|
S1 --> A1
|
||||||
|
A2 --> C2
|
||||||
|
C3 --> D1
|
||||||
|
C3 --> H1
|
||||||
|
D3 --> H1
|
||||||
|
H4 --> S3
|
||||||
|
C4 --> D4
|
||||||
|
H3 --> A3
|
||||||
|
S3 --> A4
|
||||||
|
```
|
||||||
|
|
||||||
|
## 6. 提醒与升级流程
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart TD
|
||||||
|
A["问题状态或时间变化"] --> B{"是否触发提醒规则"}
|
||||||
|
B -- "否" --> C["继续监控"]
|
||||||
|
B -- "是" --> D["生成提醒事件"]
|
||||||
|
D --> E{"提醒对象"}
|
||||||
|
E -- "待派发" --> F["中心管理员"]
|
||||||
|
E -- "待接单" --> G["处理人、部门负责人"]
|
||||||
|
E -- "待补充" --> H["提交人"]
|
||||||
|
E -- "待协作" --> I["协作人"]
|
||||||
|
F --> J{"是否超过升级阈值"}
|
||||||
|
G --> J
|
||||||
|
H --> J
|
||||||
|
I --> J
|
||||||
|
J -- "否" --> K["普通提醒"]
|
||||||
|
J -- "是" --> L["升级提醒"]
|
||||||
|
L --> M["部门负责人或中心管理员介入"]
|
||||||
|
M --> N["写入问题时间线"]
|
||||||
|
K --> N
|
||||||
|
```
|
||||||
|
|
||||||
|
## 7. 页面与流程映射
|
||||||
|
|
||||||
|
| 流程节点 | 页面 | 关键操作 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 提交问题 | 问题提交页 | 填写、上传、AI 辅助补全 |
|
||||||
|
| AI 分析 | 中心调度台、问题详情页 | 查看摘要、分类、派单建议 |
|
||||||
|
| 中心派发 | 中心调度台 | 采纳 AI、手动调整、退回补充 |
|
||||||
|
| 部门分派 | 部门问题池 | 查看负载、指定处理人 |
|
||||||
|
| 个人处理 | 个人工作台、问题详情页 | 接单、评论、转派、完成 |
|
||||||
|
| 协作处理 | 问题详情页 | 请求协作、补充处理记录 |
|
||||||
|
| 验收关闭 | 提交人客户端、问题详情页 | 验收通过、返工 |
|
||||||
|
| 监控升级 | 管理看板、中心调度台 | 查看超时、升级、催办 |
|
||||||
|
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
# AI 调度平台界面图生成提示词
|
||||||
|
|
||||||
|
## 方向 A：企业级 AI 调度中枢
|
||||||
|
|
||||||
|
Use case: ui-mockup
|
||||||
|
|
||||||
|
Asset type: high-fidelity product UI concept image for a Chinese enterprise SaaS issue management platform.
|
||||||
|
|
||||||
|
Primary request: Design a polished interface concept image for “Issue Hub AI 中心调度平台”, an AI-dispatched issue management system where clients submit issues, a central AI triages them, dispatches to departments or handlers, and every step is visible.
|
||||||
|
|
||||||
|
Canvas: wide 16:9 product design board, high resolution, crisp UI, no browser chrome.
|
||||||
|
|
||||||
|
Composition: one dominant desktop command-center screen in the center, with two smaller supporting screens on the right/bottom: issue detail timeline and submitter mobile/client view. Make it look like a premium product design render, not a generic dashboard grid.
|
||||||
|
|
||||||
|
Visual style: enterprise command center, calm, sophisticated, dense but readable, modern Chinese B2B SaaS, refined spacing, subtle depth, off-white and graphite base, emerald/teal accent, small amber/red risk states, minimal borders, professional typography.
|
||||||
|
|
||||||
|
Main desktop screen content in Chinese:
|
||||||
|
|
||||||
|
- title “中心调度台”
|
||||||
|
- tabs/filters “待派发 / 高风险 / 跨部门 / AI 高置信”
|
||||||
|
- metrics “待派发 18”, “SLA 风险 9”, “处理中 76”, “AI 采纳率 78%”
|
||||||
|
- issue queue rows with Chinese issue titles, AI recommendation badges, SLA chips, confidence bars, and action button “采纳派发”
|
||||||
|
|
||||||
|
AI panel content:
|
||||||
|
|
||||||
|
- “AI 推荐派发”
|
||||||
|
- “研发部 / 订单组 / 陈远”
|
||||||
|
- “置信度 92%”
|
||||||
|
- “推荐理由”
|
||||||
|
- “相似问题命中”
|
||||||
|
- “人员负载适配”
|
||||||
|
|
||||||
|
Issue detail supporting screen:
|
||||||
|
|
||||||
|
- vertical timeline with Chinese labels “提交问题”, “AI 分析完成”, “中心派发”, “处理人接单”, “待验收”
|
||||||
|
- right-side next actions “接单处理 / 请求协作 / 转派”
|
||||||
|
|
||||||
|
Mobile/client supporting screen:
|
||||||
|
|
||||||
|
- “提交问题”
|
||||||
|
- fields for title, description, impact scope, attachment upload
|
||||||
|
- AI hint box
|
||||||
|
|
||||||
|
Avoid:
|
||||||
|
|
||||||
|
- generic colorful card mosaic
|
||||||
|
- cartoon illustration
|
||||||
|
- marketing landing page
|
||||||
|
- huge hero text
|
||||||
|
- decorative gradient blobs
|
||||||
|
- low-fidelity wireframe
|
||||||
|
- messy text
|
||||||
|
- unreadable tiny text
|
||||||
|
- English-heavy UI
|
||||||
|
- stock-photo background
|
||||||
|
- excessive purple/blue gradients
|
||||||
|
|
||||||
|
Quality: high fidelity, product design presentation, clean UI hierarchy, realistic spacing, elegant shadows, consistent iconography, sharp text-like labels where possible.
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@@ -0,0 +1,692 @@
|
|||||||
|
# AI 调度问题管理平台 PRD
|
||||||
|
|
||||||
|
## 1. 产品定位
|
||||||
|
|
||||||
|
AI 调度问题管理平台是一个面向企业内部的问题提交、智能分派、协同处理和全流程追踪系统。
|
||||||
|
|
||||||
|
它不是单纯记录问题的工单系统，而是通过中心端 AI 调度能力，把问题自动送到合适的人或部门，并持续推动问题直到解决。
|
||||||
|
|
||||||
|
核心价值：
|
||||||
|
|
||||||
|
- 让问题自动找到负责人。
|
||||||
|
- 让处理过程全程可见。
|
||||||
|
- 让部门负责人知道问题卡在哪里。
|
||||||
|
- 让组织沉淀可复用的问题处理经验。
|
||||||
|
|
||||||
|
## 2. 背景与现状
|
||||||
|
|
||||||
|
当前 Issue Hub AI 已经具备轻量桌面端问题中枢能力，重点解决开发人员被频繁反馈打断的问题：
|
||||||
|
|
||||||
|
- 本地问题记录与排序。
|
||||||
|
- AI 录入与摘要。
|
||||||
|
- AI 优先级建议。
|
||||||
|
- AI 助手与相似问题检索。
|
||||||
|
- 可选自托管同步。
|
||||||
|
|
||||||
|
下一阶段产品方向是从“个人/小团队问题整理工具”升级为“多人协同的中心 AI 调度平台”。
|
||||||
|
|
||||||
|
新增重点：
|
||||||
|
|
||||||
|
- 客户端可以提交问题。
|
||||||
|
- 中心端可以统一接收、分析、派发、提醒、升级。
|
||||||
|
- 问题可以自动流转到个人客户端或部门队列。
|
||||||
|
- 支持转派、协作、验收、复盘。
|
||||||
|
- 各角色按权限查看完整处理过程。
|
||||||
|
|
||||||
|
## 3. 目标用户
|
||||||
|
|
||||||
|
### 3.1 提交人
|
||||||
|
|
||||||
|
典型用户：
|
||||||
|
|
||||||
|
- 客户服务人员。
|
||||||
|
- 实施人员。
|
||||||
|
- 业务部门员工。
|
||||||
|
- 内部系统使用者。
|
||||||
|
|
||||||
|
核心诉求：
|
||||||
|
|
||||||
|
- 快速提交问题。
|
||||||
|
- 看得到问题是否有人处理。
|
||||||
|
- 知道当前卡在哪个环节。
|
||||||
|
- 能补充材料并确认结果。
|
||||||
|
|
||||||
|
### 3.2 处理人
|
||||||
|
|
||||||
|
典型用户：
|
||||||
|
|
||||||
|
- 开发人员。
|
||||||
|
- 运维人员。
|
||||||
|
- 产品人员。
|
||||||
|
- 财务、人事、行政等职能部门处理人。
|
||||||
|
|
||||||
|
核心诉求：
|
||||||
|
|
||||||
|
- 只接收与自己相关的问题。
|
||||||
|
- 知道优先级、截止时间和问题上下文。
|
||||||
|
- 可以转派、请求协助、记录处理过程。
|
||||||
|
- 减少重复沟通。
|
||||||
|
|
||||||
|
### 3.3 部门负责人
|
||||||
|
|
||||||
|
核心诉求：
|
||||||
|
|
||||||
|
- 查看本部门问题池。
|
||||||
|
- 分配未明确负责人的问题。
|
||||||
|
- 监控超时、积压和人员负载。
|
||||||
|
- 介入高风险或跨部门问题。
|
||||||
|
|
||||||
|
### 3.4 中心管理员
|
||||||
|
|
||||||
|
核心诉求：
|
||||||
|
|
||||||
|
- 配置部门、人员、角色、分类和规则。
|
||||||
|
- 管理 AI 派单策略和提醒策略。
|
||||||
|
- 查看全局问题流转效率。
|
||||||
|
- 复盘组织级问题。
|
||||||
|
|
||||||
|
### 3.5 AI 调度员
|
||||||
|
|
||||||
|
AI 调度员不是独立登录角色，而是系统内置能力。它负责辅助判断、派发、提醒、总结和升级，但关键状态变更可以根据企业策略设置为“自动执行”或“人工确认后执行”。
|
||||||
|
|
||||||
|
## 4. 产品目标
|
||||||
|
|
||||||
|
### 4.1 近期目标
|
||||||
|
|
||||||
|
- 建立问题从提交到关闭的完整闭环。
|
||||||
|
- 支持中心端 AI 分析并推荐派单。
|
||||||
|
- 支持派发到个人客户端或部门队列。
|
||||||
|
- 支持处理过程全程可追踪。
|
||||||
|
- 支持基础 SLA 提醒和超时升级。
|
||||||
|
|
||||||
|
### 4.2 中期目标
|
||||||
|
|
||||||
|
- 支持多部门协同处理。
|
||||||
|
- 支持 AI 自动派单和负载均衡。
|
||||||
|
- 支持相似问题合并和历史方案推荐。
|
||||||
|
- 支持问题知识库沉淀。
|
||||||
|
- 支持管理看板和组织效率分析。
|
||||||
|
|
||||||
|
### 4.3 长期目标
|
||||||
|
|
||||||
|
- 形成企业问题处理知识网络。
|
||||||
|
- AI 能够主动发现重复问题、流程缺陷和高风险趋势。
|
||||||
|
- 从“处理问题”升级到“预防问题”。
|
||||||
|
|
||||||
|
## 5. MVP 范围
|
||||||
|
|
||||||
|
MVP 版本要先跑通核心闭环，不做过度复杂的流程编排。
|
||||||
|
|
||||||
|
### 5.1 MVP 必做
|
||||||
|
|
||||||
|
- 问题提交。
|
||||||
|
- 问题列表与详情。
|
||||||
|
- AI 摘要、分类、优先级和责任部门建议。
|
||||||
|
- 中心端派单。
|
||||||
|
- 派发到个人或部门队列。
|
||||||
|
- 接单、处理中、转派、完成、验收、关闭。
|
||||||
|
- 处理时间线。
|
||||||
|
- 评论与附件。
|
||||||
|
- 基础提醒和超时标记。
|
||||||
|
- 基础权限控制。
|
||||||
|
|
||||||
|
### 5.2 MVP 暂不做
|
||||||
|
|
||||||
|
- 复杂 BPMN 流程设计器。
|
||||||
|
- 多级审批流。
|
||||||
|
- 外部客户门户。
|
||||||
|
- 自动结算或绩效考核。
|
||||||
|
- 完整知识库运营后台。
|
||||||
|
- 复杂 AI Agent 自主执行。
|
||||||
|
|
||||||
|
## 6. 核心业务流程
|
||||||
|
|
||||||
|
### 6.1 问题提交流程
|
||||||
|
|
||||||
|
1. 提交人选择问题入口。
|
||||||
|
2. 填写标题、描述、相关系统、影响范围、附件。
|
||||||
|
3. 系统生成问题编号。
|
||||||
|
4. AI 自动生成摘要、分类、严重程度、建议责任部门和缺失信息。
|
||||||
|
5. 问题进入中心待分派队列。
|
||||||
|
|
||||||
|
### 6.2 中心派单流程
|
||||||
|
|
||||||
|
1. 中心端查看 AI 推荐结果。
|
||||||
|
2. 系统展示推荐部门、推荐人员、推荐理由和置信度。
|
||||||
|
3. 中心端可以采纳推荐、修改派发对象或退回补充信息。
|
||||||
|
4. 问题派发到个人客户端或部门问题池。
|
||||||
|
5. 被派发方收到提醒。
|
||||||
|
|
||||||
|
### 6.3 部门分派流程
|
||||||
|
|
||||||
|
1. 问题进入部门队列。
|
||||||
|
2. 部门负责人查看 AI 推荐处理人和人员负载。
|
||||||
|
3. 部门负责人分派给具体处理人。
|
||||||
|
4. 处理人接单后进入处理中。
|
||||||
|
|
||||||
|
### 6.4 处理流程
|
||||||
|
|
||||||
|
1. 处理人接单。
|
||||||
|
2. 处理人查看问题摘要、附件、历史相似问题和 AI 建议。
|
||||||
|
3. 处理人处理问题并记录过程。
|
||||||
|
4. 如不属于自己范围，可以转派。
|
||||||
|
5. 如需要多人参与，可以请求协作。
|
||||||
|
6. 处理完成后提交结果。
|
||||||
|
|
||||||
|
### 6.5 验收关闭流程
|
||||||
|
|
||||||
|
1. 提交人收到处理完成提醒。
|
||||||
|
2. 提交人确认解决或要求返工。
|
||||||
|
3. 确认解决后问题关闭。
|
||||||
|
4. AI 生成处理总结、原因分类和改进建议。
|
||||||
|
5. 可选择沉淀到知识库。
|
||||||
|
|
||||||
|
## 7. 问题状态机
|
||||||
|
|
||||||
|
建议状态：
|
||||||
|
|
||||||
|
- `draft`：草稿。
|
||||||
|
- `submitted`：已提交。
|
||||||
|
- `ai_triaged`：AI 已分析。
|
||||||
|
- `dispatch_pending`：待中心派发。
|
||||||
|
- `assigned_to_department`：已派发到部门。
|
||||||
|
- `assigned_to_user`：已派发到个人。
|
||||||
|
- `accepted`：已接单。
|
||||||
|
- `in_progress`：处理中。
|
||||||
|
- `waiting_submitter`：等待提交人补充。
|
||||||
|
- `waiting_collaborator`：等待协作方。
|
||||||
|
- `transferred`：已转派。
|
||||||
|
- `resolved`：处理完成，待验收。
|
||||||
|
- `reopened`：已返工。
|
||||||
|
- `closed`：已关闭。
|
||||||
|
- `cancelled`：已取消。
|
||||||
|
|
||||||
|
关键规则：
|
||||||
|
|
||||||
|
- 问题关闭前必须有处理结果。
|
||||||
|
- 转派必须填写原因。
|
||||||
|
- 返工必须填写不通过原因。
|
||||||
|
- 超过 SLA 未处理时自动标记风险。
|
||||||
|
- 高紧急问题可以跳过部门池，直接进入负责人或指定处理人队列。
|
||||||
|
|
||||||
|
## 8. 页面与功能
|
||||||
|
|
||||||
|
### 8.1 客户端首页
|
||||||
|
|
||||||
|
面向提交人和处理人。
|
||||||
|
|
||||||
|
核心区域：
|
||||||
|
|
||||||
|
- 我的待办。
|
||||||
|
- 我提交的问题。
|
||||||
|
- 分派给我的问题。
|
||||||
|
- 需要我补充的问题。
|
||||||
|
- 即将超时的问题。
|
||||||
|
|
||||||
|
主要操作：
|
||||||
|
|
||||||
|
- 新建问题。
|
||||||
|
- 查看详情。
|
||||||
|
- 接单。
|
||||||
|
- 回复。
|
||||||
|
- 完成处理。
|
||||||
|
- 转派。
|
||||||
|
|
||||||
|
### 8.2 问题提交页
|
||||||
|
|
||||||
|
字段：
|
||||||
|
|
||||||
|
- 标题。
|
||||||
|
- 详细描述。
|
||||||
|
- 问题来源。
|
||||||
|
- 所属系统或业务模块。
|
||||||
|
- 影响范围。
|
||||||
|
- 期望解决时间。
|
||||||
|
- 附件。
|
||||||
|
- 联系人。
|
||||||
|
|
||||||
|
AI 辅助：
|
||||||
|
|
||||||
|
- 自动补全标题。
|
||||||
|
- 自动提取摘要。
|
||||||
|
- 自动识别分类。
|
||||||
|
- 自动提示缺失信息。
|
||||||
|
- 自动匹配相似问题。
|
||||||
|
|
||||||
|
### 8.3 问题详情页
|
||||||
|
|
||||||
|
核心内容：
|
||||||
|
|
||||||
|
- 问题基本信息。
|
||||||
|
- AI 摘要和建议。
|
||||||
|
- 当前状态。
|
||||||
|
- 当前负责人。
|
||||||
|
- SLA 剩余时间。
|
||||||
|
- 完整时间线。
|
||||||
|
- 评论区。
|
||||||
|
- 附件区。
|
||||||
|
- 处理结果。
|
||||||
|
|
||||||
|
关键操作：
|
||||||
|
|
||||||
|
- 派单。
|
||||||
|
- 接单。
|
||||||
|
- 转派。
|
||||||
|
- 请求协助。
|
||||||
|
- 催办。
|
||||||
|
- 标记完成。
|
||||||
|
- 验收通过。
|
||||||
|
- 返工。
|
||||||
|
- 关闭。
|
||||||
|
|
||||||
|
### 8.4 中心调度台
|
||||||
|
|
||||||
|
面向中心管理员或调度人员。
|
||||||
|
|
||||||
|
核心视图：
|
||||||
|
|
||||||
|
- 待派发问题。
|
||||||
|
- AI 推荐派单。
|
||||||
|
- 高风险问题。
|
||||||
|
- 超时问题。
|
||||||
|
- 跨部门问题。
|
||||||
|
- 无负责人问题。
|
||||||
|
|
||||||
|
操作：
|
||||||
|
|
||||||
|
- 采纳 AI 推荐。
|
||||||
|
- 手动指定部门或人员。
|
||||||
|
- 退回补充。
|
||||||
|
- 批量派发。
|
||||||
|
- 升级负责人。
|
||||||
|
|
||||||
|
### 8.5 部门问题池
|
||||||
|
|
||||||
|
面向部门负责人。
|
||||||
|
|
||||||
|
核心视图：
|
||||||
|
|
||||||
|
- 本部门未分派。
|
||||||
|
- 本部门处理中。
|
||||||
|
- 本部门超时。
|
||||||
|
- 本部门成员负载。
|
||||||
|
- 本部门问题类型统计。
|
||||||
|
|
||||||
|
操作：
|
||||||
|
|
||||||
|
- 分派处理人。
|
||||||
|
- 调整优先级。
|
||||||
|
- 转给其他部门。
|
||||||
|
- 升级中心端。
|
||||||
|
|
||||||
|
### 8.6 个人工作台
|
||||||
|
|
||||||
|
面向处理人。
|
||||||
|
|
||||||
|
核心视图：
|
||||||
|
|
||||||
|
- 待接单。
|
||||||
|
- 处理中。
|
||||||
|
- 等待反馈。
|
||||||
|
- 即将超时。
|
||||||
|
- 已完成。
|
||||||
|
|
||||||
|
AI 辅助：
|
||||||
|
|
||||||
|
- 总结问题。
|
||||||
|
- 推荐回复。
|
||||||
|
- 推荐处理步骤。
|
||||||
|
- 查询相似历史问题。
|
||||||
|
- 生成处理结果草稿。
|
||||||
|
|
||||||
|
### 8.7 管理看板
|
||||||
|
|
||||||
|
核心指标：
|
||||||
|
|
||||||
|
- 问题总量。
|
||||||
|
- 各状态数量。
|
||||||
|
- 平均首次响应时间。
|
||||||
|
- 平均解决时长。
|
||||||
|
- 超时率。
|
||||||
|
- 转派次数。
|
||||||
|
- 重复问题排行。
|
||||||
|
- 部门负载。
|
||||||
|
- 高风险问题数量。
|
||||||
|
|
||||||
|
### 8.8 配置中心
|
||||||
|
|
||||||
|
配置项：
|
||||||
|
|
||||||
|
- 部门。
|
||||||
|
- 人员。
|
||||||
|
- 角色。
|
||||||
|
- 问题分类。
|
||||||
|
- 优先级规则。
|
||||||
|
- SLA 规则。
|
||||||
|
- 派单规则。
|
||||||
|
- 提醒规则。
|
||||||
|
- AI 模型配置。
|
||||||
|
- AI 自动执行权限。
|
||||||
|
|
||||||
|
## 9. 权限矩阵
|
||||||
|
|
||||||
|
| 功能 | 提交人 | 处理人 | 部门负责人 | 中心管理员 |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| 提交问题 | 是 | 是 | 是 | 是 |
|
||||||
|
| 查看自己提交的问题 | 是 | 是 | 是 | 是 |
|
||||||
|
| 查看分派给自己的问题 | 否 | 是 | 是 | 是 |
|
||||||
|
| 查看部门问题池 | 否 | 否 | 是 | 是 |
|
||||||
|
| 查看全局问题 | 否 | 否 | 否 | 是 |
|
||||||
|
| 派发问题 | 否 | 否 | 部门内 | 全局 |
|
||||||
|
| 转派问题 | 受限 | 是 | 是 | 是 |
|
||||||
|
| 修改优先级 | 否 | 受限 | 部门内 | 全局 |
|
||||||
|
| 配置规则 | 否 | 否 | 受限 | 是 |
|
||||||
|
| 查看管理看板 | 否 | 个人 | 部门 | 全局 |
|
||||||
|
| 关闭问题 | 自己提交 | 受限 | 部门内 | 全局 |
|
||||||
|
|
||||||
|
## 10. 数据模型草案
|
||||||
|
|
||||||
|
### 10.1 Issue
|
||||||
|
|
||||||
|
- `id`：问题 ID。
|
||||||
|
- `code`：问题编号。
|
||||||
|
- `title`：标题。
|
||||||
|
- `description`：描述。
|
||||||
|
- `summary`：AI 摘要。
|
||||||
|
- `categoryId`：分类。
|
||||||
|
- `source`：来源。
|
||||||
|
- `status`：状态。
|
||||||
|
- `priority`：优先级。
|
||||||
|
- `severity`：严重程度。
|
||||||
|
- `impactScope`：影响范围。
|
||||||
|
- `submitterId`：提交人。
|
||||||
|
- `currentDepartmentId`：当前部门。
|
||||||
|
- `assigneeId`：当前处理人。
|
||||||
|
- `slaDeadline`：SLA 截止时间。
|
||||||
|
- `resolvedAt`：解决时间。
|
||||||
|
- `closedAt`：关闭时间。
|
||||||
|
- `createdAt`：创建时间。
|
||||||
|
- `updatedAt`：更新时间。
|
||||||
|
|
||||||
|
### 10.2 IssueTimeline
|
||||||
|
|
||||||
|
- `id`。
|
||||||
|
- `issueId`。
|
||||||
|
- `actorId`。
|
||||||
|
- `actionType`。
|
||||||
|
- `fromStatus`。
|
||||||
|
- `toStatus`。
|
||||||
|
- `content`。
|
||||||
|
- `metadata`。
|
||||||
|
- `createdAt`。
|
||||||
|
|
||||||
|
### 10.3 Assignment
|
||||||
|
|
||||||
|
- `id`。
|
||||||
|
- `issueId`。
|
||||||
|
- `fromUserId`。
|
||||||
|
- `toUserId`。
|
||||||
|
- `toDepartmentId`。
|
||||||
|
- `reason`。
|
||||||
|
- `aiSuggested`。
|
||||||
|
- `confidence`。
|
||||||
|
- `createdAt`。
|
||||||
|
|
||||||
|
### 10.4 Department
|
||||||
|
|
||||||
|
- `id`。
|
||||||
|
- `name`。
|
||||||
|
- `parentId`。
|
||||||
|
- `ownerId`。
|
||||||
|
- `enabled`。
|
||||||
|
|
||||||
|
### 10.5 User
|
||||||
|
|
||||||
|
- `id`。
|
||||||
|
- `name`。
|
||||||
|
- `departmentId`。
|
||||||
|
- `roleIds`。
|
||||||
|
- `skills`。
|
||||||
|
- `enabled`。
|
||||||
|
|
||||||
|
### 10.6 AiTriageResult
|
||||||
|
|
||||||
|
- `id`。
|
||||||
|
- `issueId`。
|
||||||
|
- `summary`。
|
||||||
|
- `categorySuggestion`。
|
||||||
|
- `prioritySuggestion`。
|
||||||
|
- `departmentSuggestion`。
|
||||||
|
- `assigneeSuggestion`。
|
||||||
|
- `missingInfo`。
|
||||||
|
- `similarIssueIds`。
|
||||||
|
- `confidence`。
|
||||||
|
- `reasoningSummary`。
|
||||||
|
- `createdAt`。
|
||||||
|
|
||||||
|
## 11. AI 调度规则
|
||||||
|
|
||||||
|
AI 派单不应只看关键词，需要结合规则、历史和组织结构。
|
||||||
|
|
||||||
|
### 11.1 AI 输入
|
||||||
|
|
||||||
|
- 问题标题。
|
||||||
|
- 问题描述。
|
||||||
|
- 附件 OCR 结果。
|
||||||
|
- 提交人所属部门。
|
||||||
|
- 问题来源。
|
||||||
|
- 业务模块。
|
||||||
|
- 历史相似问题。
|
||||||
|
- 部门职责说明。
|
||||||
|
- 人员技能标签。
|
||||||
|
- 人员当前负载。
|
||||||
|
- SLA 规则。
|
||||||
|
|
||||||
|
### 11.2 AI 输出
|
||||||
|
|
||||||
|
- 标准化摘要。
|
||||||
|
- 问题分类。
|
||||||
|
- 严重程度。
|
||||||
|
- 优先级。
|
||||||
|
- 建议责任部门。
|
||||||
|
- 建议处理人。
|
||||||
|
- 派单理由。
|
||||||
|
- 置信度。
|
||||||
|
- 缺失信息。
|
||||||
|
- 推荐处理步骤。
|
||||||
|
|
||||||
|
### 11.3 自动执行策略
|
||||||
|
|
||||||
|
建议分三个等级：
|
||||||
|
|
||||||
|
- `suggest_only`：AI 只给建议，由人工确认。
|
||||||
|
- `auto_low_risk`：低风险高置信度问题自动派发。
|
||||||
|
- `auto_full`：符合规则的问题自动派发、提醒和升级。
|
||||||
|
|
||||||
|
MVP 建议使用 `suggest_only`，避免 AI 错派导致业务风险。
|
||||||
|
|
||||||
|
### 11.4 派单评分
|
||||||
|
|
||||||
|
推荐评分可以由以下因素组成：
|
||||||
|
|
||||||
|
- 分类匹配度。
|
||||||
|
- 部门职责匹配度。
|
||||||
|
- 历史处理成功率。
|
||||||
|
- 当前人员负载。
|
||||||
|
- 问题紧急程度。
|
||||||
|
- 相似问题处理人。
|
||||||
|
- 跨部门依赖。
|
||||||
|
- 人工规则优先级。
|
||||||
|
|
||||||
|
## 12. 提醒与升级
|
||||||
|
|
||||||
|
### 12.1 提醒场景
|
||||||
|
|
||||||
|
- 新问题待派发。
|
||||||
|
- 问题已分派待接单。
|
||||||
|
- 接单后长时间无进展。
|
||||||
|
- 临近 SLA。
|
||||||
|
- 已超时。
|
||||||
|
- 等待提交人补充。
|
||||||
|
- 协作方长时间未响应。
|
||||||
|
- 处理完成待验收。
|
||||||
|
|
||||||
|
### 12.2 升级规则
|
||||||
|
|
||||||
|
- 待派发超过阈值，提醒中心管理员。
|
||||||
|
- 已分派未接单超过阈值，提醒部门负责人。
|
||||||
|
- 处理中超过 SLA，升级部门负责人。
|
||||||
|
- 高严重程度问题超时，升级中心管理员。
|
||||||
|
- 多次转派的问题进入中心复核队列。
|
||||||
|
|
||||||
|
## 13. 指标体系
|
||||||
|
|
||||||
|
### 13.1 过程指标
|
||||||
|
|
||||||
|
- 问题提交量。
|
||||||
|
- 首次响应时间。
|
||||||
|
- 平均处理时长。
|
||||||
|
- 超时问题数量。
|
||||||
|
- 转派次数。
|
||||||
|
- 返工次数。
|
||||||
|
- 协作次数。
|
||||||
|
|
||||||
|
### 13.2 质量指标
|
||||||
|
|
||||||
|
- 一次解决率。
|
||||||
|
- 返工率。
|
||||||
|
- 提交人满意度。
|
||||||
|
- 重复问题率。
|
||||||
|
- AI 推荐采纳率。
|
||||||
|
- AI 派单准确率。
|
||||||
|
|
||||||
|
### 13.3 组织指标
|
||||||
|
|
||||||
|
- 部门负载。
|
||||||
|
- 人员负载。
|
||||||
|
- 问题类型趋势。
|
||||||
|
- 高风险问题趋势。
|
||||||
|
- 知识库命中率。
|
||||||
|
|
||||||
|
## 14. 技术演进建议
|
||||||
|
|
||||||
|
### 14.1 客户端
|
||||||
|
|
||||||
|
当前 Tauri + React 桌面端可以继续作为个人客户端。
|
||||||
|
|
||||||
|
需要新增：
|
||||||
|
|
||||||
|
- 登录与身份识别。
|
||||||
|
- 我的待办。
|
||||||
|
- 部门队列入口。
|
||||||
|
- 问题详情时间线。
|
||||||
|
- 派单、接单、转派、验收操作。
|
||||||
|
- 通知中心。
|
||||||
|
|
||||||
|
### 14.2 中心服务端
|
||||||
|
|
||||||
|
当前服务端主要用于同步，后续需要升级为中心业务服务。
|
||||||
|
|
||||||
|
需要新增：
|
||||||
|
|
||||||
|
- 用户与部门管理。
|
||||||
|
- 问题主数据。
|
||||||
|
- 状态流转服务。
|
||||||
|
- 派单服务。
|
||||||
|
- 时间线服务。
|
||||||
|
- 通知服务。
|
||||||
|
- AI 调度服务。
|
||||||
|
- 权限控制。
|
||||||
|
|
||||||
|
### 14.3 AI 服务
|
||||||
|
|
||||||
|
建议保持 AI 能力可配置，支持 OpenAI 兼容接口。
|
||||||
|
|
||||||
|
AI 服务边界：
|
||||||
|
|
||||||
|
- 不直接绕过业务权限。
|
||||||
|
- 不直接删除或关闭问题。
|
||||||
|
- 自动操作必须写入时间线。
|
||||||
|
- 所有 AI 建议都要保留输入摘要、输出、置信度和采纳结果。
|
||||||
|
|
||||||
|
## 15. 风险与约束
|
||||||
|
|
||||||
|
### 15.1 AI 错派风险
|
||||||
|
|
||||||
|
处理方式：
|
||||||
|
|
||||||
|
- MVP 阶段 AI 只推荐，不直接派发。
|
||||||
|
- 保留人工确认入口。
|
||||||
|
- 记录 AI 推荐和人工修改差异。
|
||||||
|
|
||||||
|
### 15.2 流程过重风险
|
||||||
|
|
||||||
|
处理方式：
|
||||||
|
|
||||||
|
- 第一版只保留核心状态。
|
||||||
|
- 不引入复杂审批流。
|
||||||
|
- 所有操作优先服务问题解决速度。
|
||||||
|
|
||||||
|
### 15.3 权限复杂风险
|
||||||
|
|
||||||
|
处理方式：
|
||||||
|
|
||||||
|
- 先按角色 + 部门边界设计。
|
||||||
|
- 不做过细字段级权限。
|
||||||
|
- 涉及全局数据的能力集中在中心管理员。
|
||||||
|
|
||||||
|
### 15.4 数据安全风险
|
||||||
|
|
||||||
|
处理方式：
|
||||||
|
|
||||||
|
- API Key 不进入中心业务数据。
|
||||||
|
- 附件和 OCR 结果要有上传确认策略。
|
||||||
|
- AI Prompt 日志默认不完整持久化。
|
||||||
|
- 敏感问题支持限制可见范围。
|
||||||
|
|
||||||
|
## 16. 版本路线
|
||||||
|
|
||||||
|
### V1：中心派单闭环
|
||||||
|
|
||||||
|
- 提交问题。
|
||||||
|
- AI 分析建议。
|
||||||
|
- 中心派单。
|
||||||
|
- 个人接单处理。
|
||||||
|
- 转派与评论。
|
||||||
|
- 时间线。
|
||||||
|
- SLA 提醒。
|
||||||
|
|
||||||
|
### V2：部门协同
|
||||||
|
|
||||||
|
- 部门问题池。
|
||||||
|
- 部门负责人分派。
|
||||||
|
- 人员负载。
|
||||||
|
- 跨部门协作。
|
||||||
|
- 超时升级。
|
||||||
|
|
||||||
|
### V3：AI 自动调度
|
||||||
|
|
||||||
|
- 高置信度自动派单。
|
||||||
|
- 相似问题合并。
|
||||||
|
- 历史方案推荐。
|
||||||
|
- AI 处理总结。
|
||||||
|
- AI 复盘建议。
|
||||||
|
|
||||||
|
### V4：知识与治理
|
||||||
|
|
||||||
|
- 知识库沉淀。
|
||||||
|
- 重复问题治理。
|
||||||
|
- 组织效率看板。
|
||||||
|
- 风险趋势识别。
|
||||||
|
- 流程优化建议。
|
||||||
|
|
||||||
|
## 17. 下一步交付物
|
||||||
|
|
||||||
|
建议下一步按以下顺序继续：
|
||||||
|
|
||||||
|
1. 画核心信息架构和页面清单。
|
||||||
|
2. 设计问题状态流转图。
|
||||||
|
3. 设计 MVP 数据表和接口。
|
||||||
|
4. 设计中心调度台原型。
|
||||||
|
5. 拆分第一批开发任务。
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -0,0 +1,101 @@
|
|||||||
|
# Browser Smoke Verification
|
||||||
|
|
||||||
|
This project includes a dependency-free browser smoke runner for the implemented Issue Hub AI screens.
|
||||||
|
|
||||||
|
## Command
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
npm run smoke:browser
|
||||||
|
```
|
||||||
|
|
||||||
|
The runner will:
|
||||||
|
|
||||||
|
- reuse `http://127.0.0.1:5174` when a dev server is already running;
|
||||||
|
- otherwise serve the existing `dist/` build on `127.0.0.1:5174`; run `npm run build` before smoke when no service is already running;
|
||||||
|
- launch headless Chrome through the Chrome DevTools Protocol;
|
||||||
|
- start a lightweight local mock sync server for `/api/health`, `/api/v1/sync/push`, and `/api/v1/sync/pull`;
|
||||||
|
- allow sync preflight headers for `Authorization`, `X-Issue-Hub-Role`, and `X-Issue-Hub-Permissions`;
|
||||||
|
- start a lightweight local mock AI server for `/chat/completions`;
|
||||||
|
- clear the demo local storage state;
|
||||||
|
- verify issue pool pagination, page size, CSV export metadata, status, priority, department, source, submitter, SLA and created-time filters, submitter-filtered export row counts, search empty state and empty bulk dispatch feedback;
|
||||||
|
- verify the global sidebar sync status and local-mode sync feedback;
|
||||||
|
- save sync settings, pass the sync health check, run push/pull with role permission headers, and verify a remote issue plus timeline is merged locally;
|
||||||
|
- open the global settings panel, save sync settings, save/check/clear the AI API Key, save notification settings and verify the persisted reminder policy, persist permission role changes, and verify permission route blocking plus recovery;
|
||||||
|
- configure the AI base URL to the mock AI server, run center-dashboard AI retriage, and verify the returned recommendation plus timeline event;
|
||||||
|
- refresh the client workbench task list, verify top status tab feedback for `待接单` and restore `全部`, apply priority filtering and SLA sorting, verify pagination and page-size feedback, expand AI analysis details, open top and bottom more actions, copy a handler link, persist a followed issue, switch detail tabs, open row actions, and collapse the detail panel back to the list;
|
||||||
|
- select an issue in the issue pool, verify bulk AI dispatch persistence, open bulk governance, and import a tag;
|
||||||
|
- open center-dashboard filter panel, verify current-page, next-page and page-size feedback, open the row dispatch action panel, verify AI basis / return-info / close controls, confirm bulk dispatch, and accept an AI dispatch;
|
||||||
|
- verify department queue status, priority, SLA and created-time filter feedback, open department queue settings, verify cancel does not persist, save settings, reload and restore the saved checkbox state, expand AI dispatch analysis details, open member workload details, filter members by skill, sort by response speed, assign from the detail row, verify pagination and page-size feedback, and assign the issue from the department queue;
|
||||||
|
- run handler actions for detail tab switching, customer/internal comment target switching, comment tool feedback, accept, collaboration request, more action menu, process CSV export metadata, internal comment, linked task, detail expansion, full AI report, attachment download, transfer and resolve;
|
||||||
|
- sort and filter submitter tracking records, expand submitter issue details, download attachments, and run submitter actions for reopen and approval;
|
||||||
|
- scan SLA reminders, verify reminder policy text, event channels, delivery status, reminder/escalation/review feedback, and mark a reminder handled;
|
||||||
|
- submit from the mobile preview, verify save-draft feedback, attachment selection, non-default impact scope/source/system/expected-hours persistence, focus missing supplemental fields, contact/reminder feedback, supplemental attachment selection, and submit supplemental information;
|
||||||
|
- verify the mobile narrow layout and submit flow at `390x920`;
|
||||||
|
- apply an AI precheck supplement to the submit form, open AI category candidates, write a selected category into the form, open/close dispatch rule details, apply a rich-text editor tool, verify desktop attachment upload feedback, select source, system, expected hours, impact scope and severity controls, submit a client issue, and verify the submitter tracking route plus persisted issue, impact scope, severity, SLA minutes, timeline, rich editor content and AI triage data;
|
||||||
|
- open the knowledge review settings panel, save settings, verify persisted localStorage values and restored controls, open the filter panel, verify selected filter feedback, verify pagination and page-size feedback, generate and edit a knowledge draft summary, merge it, mark an issue as no-draft, and verify the knowledge timeline events;
|
||||||
|
- save a rule automation mode change, add a condition placeholder, add an AND condition group, remove a rule condition, save a rule draft, open the audit log, run rule test preview and publish rule configuration;
|
||||||
|
- filter the analytics board by range, department and risk focus, verify design-scale overview display, filter feedback, fixed-date feedback and trend range switching, open AI insight details, export a CSV report for the active range, open real-data department / repeat / SLA / AI insight drilldowns, verify drilldown records, customize visible widgets, save the layout, verify hidden widgets disappear, refresh the board, and verify widget layout plus view-state persistence.
|
||||||
|
|
||||||
|
## Implementation Screenshot Refresh
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
npm run capture:pages
|
||||||
|
```
|
||||||
|
|
||||||
|
This uses the same dependency-free CDP runner to refresh the 12 desktop implementation screenshots and 3 mobile viewport screenshots under `docs/design/implementation-screenshots/`.
|
||||||
|
|
||||||
|
## Artifacts
|
||||||
|
|
||||||
|
Screenshots are written to:
|
||||||
|
|
||||||
|
```text
|
||||||
|
docs/design/interaction-smoke/
|
||||||
|
```
|
||||||
|
|
||||||
|
Current expected files:
|
||||||
|
|
||||||
|
- `center-ai-dispatch-accepted.png`：中心调度台行级派发面板和批量采纳 AI 派发流程
|
||||||
|
- `center-ai-live-triage.png`
|
||||||
|
- `client-workbench-detail-tabs.png`
|
||||||
|
- `department-assigned-handler.png`：部门队列成员负载明细筛选、明细分派和主按钮分派处理人
|
||||||
|
- `escalation-marked-handled.png`
|
||||||
|
- `escalation-sla-scanned.png`：SLA 扫描按提醒策略生成事件，展示重复间隔、渠道和投递状态
|
||||||
|
- `global-sync-local-mode.png`
|
||||||
|
- `global-notifications-panel.png`：全局通知中心展示未处理升级、策略驱动 SLA 风险、渠道状态和待补充统计，并支持关闭回到原页面
|
||||||
|
- `global-help-panel.png`：全局帮助面板展示角色流程、常用操作和快速跳转入口
|
||||||
|
- `handler-comment-task-linked.png`：处理人详情评论保留处理链路、关联任务、SLA 查看记录、处理链接复制记录、催办协作人时间线和处理记录导出元数据
|
||||||
|
- `handler-detail-expanded-report.png`
|
||||||
|
- `handler-resolved.png`
|
||||||
|
- `handler-tabs-comment-tools.png`：处理人详情 tab、评论对象切换、评论工具附件 / 图片 / 链接插入反馈，并断言 `commentTools` 本地记录和问题附件列表
|
||||||
|
- `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`：知识复盘设置保存、localStorage 持久化和重新打开恢复
|
||||||
|
- `knowledge-summary-edited.png`
|
||||||
|
- `knowledge-no-draft-marked.png`
|
||||||
|
- `mobile-narrow-submit.png`
|
||||||
|
- `mobile-narrow-submitted.png`
|
||||||
|
- `mobile-submit-attachment-selected.png`
|
||||||
|
- `mobile-submitted-tracking.png`
|
||||||
|
- `mobile-supplement-missing-upload.png`
|
||||||
|
- `mobile-supplement-submitted.png`：提交补充后断言补充文本、`订单截图.zip` 附件和“提交人补充信息”时间线持久化；同一链路还覆盖“联系处理人”“催办”写入时间线。
|
||||||
|
- `analytics-filtered.png`
|
||||||
|
- `analytics-custom-layout-saved.png`
|
||||||
|
- `rule-config-condition-removed.png`
|
||||||
|
- `rule-config-audit-log.png`
|
||||||
|
- `rule-config-tested.png`
|
||||||
|
- `settings-panel-configured.png`
|
||||||
|
- `settings-permission-roles.png`
|
||||||
|
- `settings-sync-success.png`
|
||||||
|
- `submit-issue-editor-attachment.png`：提交页 AI 重新检测、预检查审计记录、分类候选、流转规则详情、AI 补充、富文本工具和附件上传
|
||||||
|
- `submitter-approved.png`
|
||||||
|
- `submitter-detail-expanded-download.png`
|
||||||
|
- `submitter-reopened.png`
|
||||||
|
- `submitter-tracking-after-submit.png`
|
||||||
|
- `rule-config-published.png`
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
Set `CHROME_BIN` when Chrome is not installed in a standard location. Set `SMOKE_APP_ORIGIN` to target another local origin.
|
||||||
@@ -0,0 +1,348 @@
|
|||||||
|
# Issue Hub AI 完成度审计
|
||||||
|
|
||||||
|
审计日期：2026-06-18
|
||||||
|
|
||||||
|
## 2026-06-18 人工定稿记录补充审计
|
||||||
|
|
||||||
|
- `docs/design/review-index.html` 已从只读审阅入口升级为可保存的人工定稿记录工具：结论、备注写入 localStorage，并可导出 JSON 定稿记录。
|
||||||
|
- 定稿入口已同步最新 visual diff 报告时间和 12 页指标，避免人工审阅时使用过期数据。
|
||||||
|
- 知识复盘页进入“通过但备注 / 定稿候选”：当前可编辑 AI 复盘工作区、真实分页、摘要保存和三类知识动作作为产品化定稿依据；后续不再对已证伪的摘要宽度、行高、按钮 gap、padding、筛选图标和头像锚点做盲调。
|
||||||
|
- 处理人详情页进入“通过但备注 / 定稿候选”：三栏骨架、顶栏动作、时间线、评论工具、右侧 AI 建议和下一步动作按当前实现定稿；业务样例、头像和静态文案差异作为可接受偏差备注。
|
||||||
|
- 中心调度台页进入“通过但备注 / 定稿候选”：当前核心骨架、真实分页、每页条数、行级派发面板、批量操作和右侧 AI 推荐检查器按产品化闭环定稿；动态业务样例与侧栏底部状态策略作为可接受偏差备注。
|
||||||
|
- 提醒升级页完成带目标返修并进入“通过但备注 / 定稿候选”：左侧风险候选恢复为高密度分组表格，右侧补齐升级链路、提醒规则、最近动作和备注区；动态风险候选数量和 SLA 文案差异作为可接受偏差备注。
|
||||||
|
- 管理看板页进入“通过但备注 / 定稿候选”：当前设计量级首屏、真实导出 / 下钻 / 刷新记录、自定义布局入口、中部榜单和右侧 AI 洞察按产品化闭环定稿；图表数据与业务文本差异作为可接受偏差备注。
|
||||||
|
- 当前人工定稿状态为 4 页建议通过、8 页定稿候选、0 页仍需人工决策；自动 visual diff 仍保留 5 张诊断页，不再等同于返修队列。
|
||||||
|
- `docs/design/final-design-freeze-record.md` 已沉淀 12 页最终定稿结论、冻结原则、验证记录和边界说明。
|
||||||
|
- 本轮已通过 `review-index.html` 状态计数校验、`npx tsc --noEmit`、`npm test`（29 个测试文件、104 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 基线为 `2026-06-18T04:47:26.995Z`。
|
||||||
|
|
||||||
|
## 2026-06-17 知识复盘 footer 与视觉回退补充审计
|
||||||
|
|
||||||
|
- 知识复盘 footer 已对齐设计稿总量口径：表格组件新增 `displayTotal` 展示值，页面仍保留真实 `total / page / pageSize / pageCount` 驱动分页和搜索。
|
||||||
|
- browser smoke 已同步验证新的“共 62 条”展示口径，同时继续断言页码切换、首行问题变化和每页条数切回第 1 页。
|
||||||
|
- 处理人详情三栏比例微调经 visual diff 证明反向，已回退到原 250px / 1fr / 400px 基线，保留当前处理人详情 18.22 / 43.82。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（29 个测试文件、104 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T15:30:43.866Z`，状态仍为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 管理看板复刻收敛补充审计
|
||||||
|
|
||||||
|
- 管理看板首屏已补齐设计稿运营量级：问题总量、响应 / 解决时长、超时率、AI 采纳率、趋势、状态分布、部门负载、重复问题、SLA 风险和本周对比展示与 images2 更一致。
|
||||||
|
- 领域层新增 `overview*` 展示选择器，保留真实筛选数据用于导出、下钻和刷新记录；页面层只组合展示数据与真实交互，未把静态设计数值散落在 JSX 内。
|
||||||
|
- 已收紧管理看板中部和右侧密度，并通过 visual diff 证明 `dispatcher-07-analytics-board.png` 从 21.42 / 47.02 收敛到 19.95 / 44.45。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（29 个测试文件、104 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；当轮 visual diff 报告时间为 `2026-06-17T14:48:53.507Z`，状态仍为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 提醒策略驱动 SLA 扫描补充审计
|
||||||
|
|
||||||
|
- 平台提醒策略已从“可保存配置”补齐为真实业务输入：`enabled` 会关闭自动扫描，`slaWarningMinutes` 会影响观察 / 预警阈值，`repeatEveryMinutes` 会控制重复生成窗口。
|
||||||
|
- 自动生成的升级事件会记录 `channels` 和 `deliveryStatus`，提醒升级页、全局通知中心和时间线都能看到生成时的投递渠道。
|
||||||
|
- 已统一调度中心和全局通知中心的 SLA 风险计算，移除页面各自硬编码的 90 / 120 / 60 分钟判断。
|
||||||
|
- 单元测试覆盖策略阈值、关闭策略、渠道快照和抑制投递；browser smoke 覆盖提醒策略 localStorage、扫描事件渠道和页面策略文案。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（29 个测试文件、103 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T14:19:14.352Z`，状态为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 提交页 AI 预检查重新检测补充审计
|
||||||
|
|
||||||
|
- 提交页“重新检测”已从 toast 升级为可见、可审计的预检查运行：右侧面板刷新分类候选、置信度、缺失项和最近检查时间。
|
||||||
|
- 新增 `submitPrecheckRepository` 保存 `issue-hub-ai:submit-precheck:v1`，记录检查时间、分类、置信度、缺失项和命中规则数量；单元测试覆盖记录写入和坏数据归一化。
|
||||||
|
- browser smoke 覆盖重新检测、结果刷新状态、新缺失项补充到描述、预检查记录落库，以及提交后描述持久化。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（29 个测试文件、100 个测试）、`npm run build`、`npm run smoke:browser`；最新 visual diff 报告时间仍为 `2026-06-17T12:06:38.127Z`，状态为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 全局通知中心与帮助面板补充审计
|
||||||
|
|
||||||
|
- 全局 TopBar 的通知 / 帮助入口已从 toast 升级为真实工具抽屉：通知中心聚合未处理升级、SLA 风险和待补充数量，帮助面板提供角色流程和快速跳转。
|
||||||
|
- 处理人详情自带通知 / 帮助图标已接入同一套 `utilityPanelOpen` 状态，不再维护局部 toast 行为；设置面板仍保持原有权限控制和独立配置抽屉。
|
||||||
|
- browser smoke 覆盖中心页通知 / 帮助入口、处理人详情通知 / 帮助入口、打开关闭状态和主流程不中断；交互截图新增 `global-notifications-panel.png`、`global-help-panel.png`。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（28 个测试文件、98 个测试）、`npm run build`、`npm run smoke:browser`；最新 visual diff 报告时间仍为 `2026-06-17T12:06:38.127Z`，状态为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 处理人评论工具真实附件/图片/链接补充审计
|
||||||
|
|
||||||
|
- 处理人详情评论工具已从入口反馈升级为业务闭环：附件 / 图片工具生成真实 `IssueAttachment` 并进入当前问题附件列表，链接工具写入评论输入区并可随评论进入处理时间线。
|
||||||
|
- `handlerActionRepository` 新增 `commentTools` 审计记录，保存工具名、问题编号、插入文本和使用时间；browser smoke 断言工具记录、问题附件列表和评论时间线内容。
|
||||||
|
- 页面覆盖：`handler-tabs-comment-tools.png` 覆盖 tab、评论对象切换和评论工具真实插入；`handler-comment-task-linked.png` 覆盖评论内容保留处理链路、关联任务和更多处理动作连续追溯。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（28 个测试文件、98 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T12:06:38.127Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 提交页 AI 预检查补充审计
|
||||||
|
|
||||||
|
- 已补齐 AI 预检查分类候选真实闭环：右侧“选择其他分类”展开候选列表，展示置信度和判断依据，点击候选会写入左侧“所属系统”字段。
|
||||||
|
- 已补齐流转规则详情真实闭环：右侧“查看流转规则”展开当前启用规则信息，展示规则名称、目标部门、SLA 和自动化模式，不再只给提示文案。
|
||||||
|
- 已保持代码分层：跨组件待应用分类由 `SubmitIssuePage` 管理，`SubmitIssueForm` 只负责消费并写入表单，`SubmitAiPrecheckPanel` 只负责 AI 预检查局部 UI。
|
||||||
|
- 已补 browser smoke：覆盖分类候选展开、候选分类写入表单、规则详情展开 / 收起、规则名称和目标部门断言。
|
||||||
|
- 验证结果：`npx tsc --noEmit`、`npm test`（28 个文件、97 个用例）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff` 均通过；最新 visual diff 报告时间为 `2026-06-17T11:49:38.694Z`，状态仍为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 问题池提交人筛选与部门成员明细补充审计
|
||||||
|
|
||||||
|
- 已补齐问题池提交人真实筛选：领域层支持 `submitterId` 组合筛选，问题池页面提交人按钮循环切换全部 / 张阳 / 赵敏，导出与分页均使用筛选后的问题集合。
|
||||||
|
- 已补齐演示数据真实性：新增第二位提交人赵敏，并将 `issue-010`、`issue-011` 归属给赵敏，避免提交人筛选只产生文案变化。
|
||||||
|
- 已补齐部门成员明细：`DepartmentWorkloadPanel` 内部展开成员负载明细，支持技能筛选、负载 / 响应排序，并从明细行分派当前问题。
|
||||||
|
- 已补测试和 smoke：`issueFilters.test.ts` 覆盖提交人独立筛选与组合筛选；browser smoke 覆盖提交人筛选导出行数缩小、赵敏筛选结果、成员明细技能筛选、排序、分派和关闭。
|
||||||
|
- 验证结果：`npx tsc --noEmit`、`npm test`（28 个文件、97 个用例）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff` 均通过；最新 visual diff 报告时间为 `2026-06-17T11:49:38.694Z`，状态仍为 8 / 4。
|
||||||
|
|
||||||
|
## 2026-06-17 中心派发操作与知识设置补充审计
|
||||||
|
|
||||||
|
- 已补齐中心调度台行级派发操作真实闭环：“更多派发操作”打开独立操作面板，支持改派部门、要求补充、AI 重新分析和采纳 AI 派发，状态与时间线仍由统一 app action 写入。
|
||||||
|
- 已补齐知识复盘设置持久化闭环：复盘池开关、AI 自动生成草稿、重复提醒、相似度阈值和默认负责人写入 localStorage，重新打开面板可恢复保存值，并通过仓储层归一化异常数据。
|
||||||
|
- 已补单元测试：`knowledgeReviewSettingsRepository.test.ts` 覆盖默认读取、保存回读和坏数据归一化。
|
||||||
|
- 已补 browser smoke：覆盖中心派发操作面板打开 / 关闭、知识复盘设置保存、localStorage 校验和面板恢复校验。
|
||||||
|
- 验证结果：`npx tsc --noEmit`、`npm test`、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff` 均通过；当前前端测试基线为 28 个文件、98 个用例。
|
||||||
|
|
||||||
|
## 2026-06-17 管理看板真实下钻补充审计
|
||||||
|
|
||||||
|
- 已补齐管理看板真实数据闭环：KPI、排行、趋势、状态分布、本周对比、AI 洞察兜底和下钻明细均基于当前筛选后的 issue 数据派生；部门负载、重复问题、SLA 风险、AI 洞察和刷新记录下钻统一由领域层生成。
|
||||||
|
- 已补齐状态持久化：`analyticsViewStateRepository` 保存 `range / departmentId / focus / lastRefreshedAt`，`analyticsDrilldownRepository` 保存下钻记录；失效部门 ID 会回退到“全部部门”，排行和下钻面板具备空态。
|
||||||
|
- Browser smoke 已验证管理看板导出、真实下钻记录、自定义布局持久化、刷新记录和视图状态持久化；本轮由子 agent 做只读验收，并已处理其中提出的 KPI 静态值、失效部门、空态和 `scopeLabel` 类型风险。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（28 个测试文件、97 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T11:49:38.694Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 处理人详情更多操作真实化补充审计
|
||||||
|
|
||||||
|
- 处理人详情顶部“查看 SLA 记录”和“复制处理链接”已写入 `issue-hub-ai:handler-actions:v1`，记录问题编号、SLA 剩余分钟、相关时间线数量和复制链接。
|
||||||
|
- “催办协作人”已写入当前问题时间线，提交人、处理人和中心侧后续都能追溯该处理提醒。
|
||||||
|
- browser smoke 已覆盖 SLA 查看记录、处理链接复制记录、催办协作人时间线和原有导出处理记录元数据；`handlerActionRepository` 单测覆盖落库和坏数据归一化。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（28 个测试文件、97 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T11:49:38.694Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 移动端补充内容入链补充审计
|
||||||
|
|
||||||
|
- 移动端补充说明和可选附件已进入真实问题流转：`addSubmitterSupplementWorkflow` 会追加问题附件、写入“提交人补充信息”时间线，并把问题推回待派发状态。
|
||||||
|
- 移动端“联系处理人”和“催办”已升级为可追溯时间线事件，提交人侧不再只有一次性 toast，处理过程可在全链路审计中看到。
|
||||||
|
- browser smoke 已补齐联系 / 催办时间线断言、补充文本内容断言和 `订单截图.zip` 附件持久化断言；移动端补充 workflow 单测覆盖文本 + 附件写入。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（24 个测试文件、85 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T08:09:03.519Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 我的待办更多操作真实化补充审计
|
||||||
|
|
||||||
|
- 我的待办行级和详情级“更多操作”已从提示文案升级为真实菜单，支持关注 / 取消关注、复制处理链接和转交负责人；关注与复制链接记录会持久化。
|
||||||
|
- 新增 `src/data/workbenchActionRepository.ts`，以 `issue-hub-ai:workbench-actions:v1` 保存关注问题 ID 和复制链接记录；UI 组件保持展示层职责，页面层组合仓储和现有转交流程。
|
||||||
|
- browser smoke 已覆盖更多处理动作复制链接、localStorage 复制记录、行级标记关注、localStorage 关注记录，以及关注后菜单显示“取消关注”；单元测试覆盖关注切换、复制记录和坏数据归一化。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（24 个测试文件、84 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T07:45:43.001Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 部门队列设置持久化补充审计
|
||||||
|
|
||||||
|
- 部门队列“队列设置”已从默认勾选和保存提示升级为真实持久化闭环：设置项由受控表单管理，取消不保存，保存后按部门写入本地仓储，刷新页面后可恢复。
|
||||||
|
- 新增 `src/data/departmentQueueSettingsRepository.ts`，以 `issue-hub-ai:department-queue-settings:v1` 保存各部门的负责人轮询、技能标签优先和 SLA 阈值提醒配置；仓储层负责默认值和坏数据归一化。
|
||||||
|
- 浏览器 smoke 已覆盖“技能标签优先”取消不保存、保存后 localStorage 写入、reload 后重新打开队列设置仍保持取消勾选；单元测试覆盖默认值、按部门持久化和畸形数据归一化。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（23 个测试文件、81 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T07:35:20.415Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 处理人详情处理记录导出补充审计
|
||||||
|
|
||||||
|
- 处理人详情“导出处理记录”已从占位反馈升级为真实 CSV 闭环：导出当前问题基础字段、AI 分析、推荐路径、SLA / 标签信息，以及当前问题全部处理过程。
|
||||||
|
- 导出逻辑已拆分到 `src/domain/issues/issueProcessExport.ts` 和 `src/data/issueProcessExportRepository.ts`：领域层生成 CSV 内容、文件名和问题编号元数据，仓储层处理浏览器下载与本地导出记录持久化。
|
||||||
|
- 浏览器 smoke 已覆盖点击“更多操作 / 导出处理记录”后的 toast、`issue-hub-process-IH-2026-0148-` 文件名前缀、问题编号和导出行数持久化；单元测试覆盖中文 CSV、逗号转义、AI 推荐信息、人员 / 部门映射和时间线排序。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（22 个测试文件、78 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T07:22:10.571Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-17 问题池 CSV 导出补充审计
|
||||||
|
|
||||||
|
- 问题池“导出”已从占位反馈升级为真实 CSV 闭环：页面按当前完整筛选结果、搜索词和排序生成导出文件，分页只控制可见表格行，不改变导出范围。
|
||||||
|
- 导出逻辑已拆分到 `src/domain/issues/issuePoolExport.ts` 和 `src/data/issuePoolExportRepository.ts`：领域层生成 CSV 内容、文件名和元数据，仓储层处理浏览器下载与本地导出记录持久化。
|
||||||
|
- 浏览器 smoke 已覆盖点击问题池导出后的 toast、`issue-hub-issues-` 文件名、导出行数和筛选标签持久化；单元测试覆盖中文 CSV、逗号转义、人员 / 部门映射和未分派兜底。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（21 个测试文件、77 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-17T07:05:19.323Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 提交人追踪真实分页补充审计
|
||||||
|
|
||||||
|
- 提交人追踪左侧记录列表已从全量展示升级为真实分页切片：页面层维护页码和每页条数，搜索、状态 tab、创建时间排序、来源筛选和 SLA 筛选变化后回到第 1 页，列表只渲染当前页记录。
|
||||||
|
- 修复了空筛选时右侧详情错误兜底的问题：当当前筛选无结果时，页面展示空状态，不再显示不符合筛选条件的问题详情。
|
||||||
|
- 浏览器 smoke 已覆盖提交人追踪第 2 页 active、显示范围变化、首行数据变化、切 20 条/页回第 1 页，以及从第 2 页执行排序后重置回第 1 页；返工后会显式恢复 SLA 筛选，再继续验收另一个提交记录。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（20 个测试文件、76 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T14:18:54.982Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 问题池真实分页补充审计
|
||||||
|
|
||||||
|
- 问题池已从全量表格展示升级为真实分页切片：页面层维护页码和每页条数，搜索、状态、优先级、部门、来源、SLA 与创建时间排序变化后回到第 1 页，表格只渲染当前页问题。
|
||||||
|
- 表格 footer 已展示真实显示范围、总数、已选数量、页码、上一页 / 下一页禁用态和 5 / 10 / 20 条每页切换；批量派发和导出仍以完整筛选结果为作用域，避免分页影响批量治理语义。
|
||||||
|
- 浏览器 smoke 已覆盖问题池第 2 页 active、显示范围变化、首行数据变化，以及切到 20 条/页后回到第 1 页，再继续原有筛选、空搜索和空批量派发链路。
|
||||||
|
- 本轮已重新通过 `npx tsc --noEmit`、`npm test`（20 个测试文件、76 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T13:57:03.716Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 中心调度与部门队列真实分页补充审计
|
||||||
|
|
||||||
|
- 中心调度台已从静态分页按钮升级为真实页面切片：页面层维护页码和每页条数，分组切换、搜索变化后回到第 1 页，表格只渲染当前页问题，并展示真实范围、页码和上一页 / 下一页禁用态。
|
||||||
|
- 部门队列已接入同样的真实分页闭环：筛选、排序、部门切换和搜索变化后重置页码，分页范围和行数据均由当前过滤结果驱动。
|
||||||
|
- 浏览器 smoke 已覆盖中心调度台和部门队列第 2 页 active、显示范围变化、首行数据变化，以及切到 20 条/页后回到第 1 页；同时在分页验证前清空全局搜索，避免跨流程搜索词污染。
|
||||||
|
- 本轮已重新通过 `npm test`（20 个测试文件、76 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T13:24:17.159Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 附件本地闭环补充审计
|
||||||
|
|
||||||
|
- 客户端提交问题附件已从局部上传态升级为本地持久化闭环：上传会生成稳定 demo 附件对象并写入 `IssueDraft.attachments`，保存草稿 / reload 恢复 / 提交到中心后会随新问题进入 `Issue.attachments`。
|
||||||
|
- 处理人详情和提交人追踪附件区优先展示当前问题真实附件；旧 seed 问题没有附件时保留演示附件兼容展示。“全部下载”不再只是 toast，会写入 `issue-hub-ai:attachment-downloads:v1` 下载记录，浏览器 smoke 断言来源、问题 ID、数量和附件名。
|
||||||
|
- 本轮已重新通过 `npm test`（20 个测试文件、76 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T12:40:43.977Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 知识复盘真实分页补充审计
|
||||||
|
|
||||||
|
- 知识复盘页已从静态分页按钮和“第 2 页预览”toast 升级为真实切片：页面层维护 `page` / `pageSize`，搜索和 tab 切换回到第 1 页，表格层只渲染总数、显示范围、真实页码、上一页 / 下一页禁用态和 5 / 10 / 20 条每页切换。
|
||||||
|
- 浏览器 smoke 已改为断言知识复盘第 2 页 active、显示范围变化、首行问题变化，以及切到 20 条/页后回到第 1 页；不再依赖预览文案。
|
||||||
|
- 本轮已重新通过 `npm test`（20 个测试文件、73 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T12:40:43.977Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 我的待办真实分页补充审计
|
||||||
|
|
||||||
|
- 客户端“我的待办”分页已从预览反馈升级为真实切片：页面层维护页码和每页条数，表格层渲染总数、当前范围、页码、上一页 / 下一页禁用态，以及 5 / 10 / 20 条每页切换。
|
||||||
|
- 默认每页 10 条以保持当前设计复刻截图稳定；浏览器 smoke 在验证分页时主动切到 5 条/页，断言第 2 页 active、显示范围和首行数据变化，再切到 20 条/页并回到第 1 页。
|
||||||
|
- 本轮已重新通过 `npm test`（20 个测试文件、73 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T12:40:43.977Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 提交问题草稿持久化补充审计
|
||||||
|
|
||||||
|
- 客户端提交问题页已支持真实本地草稿：保存草稿会写入平台持久化状态，重新加载或重新进入提交页后恢复标题、描述、来源、所属系统、影响范围、期望时间、联系人和影响等级；提交成功后会清理 `issueDraft`，避免旧草稿残留。
|
||||||
|
- 浏览器 smoke 已覆盖桌面提交页保存草稿、reload 恢复、提交后清理；移动端保存草稿也会写入同一持久化状态，并保留提交链路。
|
||||||
|
- 本轮已重新通过 `npm test`（20 个测试文件、73 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；最新 visual diff 报告时间为 `2026-06-12T12:40:43.977Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-12 规则条件编辑闭环与设计审阅入口补充审计
|
||||||
|
|
||||||
|
- 规则配置页已从“新增条件占位”升级为真实可编辑条件矩阵：条件字段、关系、匹配值和权重会序列化写入 `rule.condition`，添加普通条件 / AND 分组条件、删除序列化条件、保存草稿、查看变更记录、测试和发布均保持可操作。
|
||||||
|
- 浏览器 smoke 已改为断言 `RULE_CONDITIONS_V1` 条件序列化、匹配值 `VIP 客户`、权重 `15`、AND 分组和删除“影响范围”后的持久化状态，不再只断言占位文案。
|
||||||
|
- 新增静态人工定稿审阅入口 `docs/design/review-index.html`，可并排查看 12 页设计图、实现截图和 diff 图，并按“可人工复核 / 需人工决策”筛选。
|
||||||
|
- 本轮已重新通过 `npm test`（20 个测试文件、72 个测试）、`npm run build`、`npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`；visual diff 报告时间为 `2026-06-12T09:43:16.971Z`，状态仍为 8 页可人工复核、4 页需人工决策 / 带备注复核。
|
||||||
|
|
||||||
|
## 2026-06-11 移动端窄屏补充链路补充审计
|
||||||
|
|
||||||
|
- 移动端 390x920 窄屏 smoke 已从仅覆盖提交扩展到补充信息链路：提交后保持窄屏回到 `/#/mobile-submit`，进入“去补充”，等待补充 textarea 自动带出“补充涉及的订单号或数据 ID：”。
|
||||||
|
- 新增交互证据 `docs/design/interaction-smoke/mobile-narrow-supplement.png`，用于证明窄屏补充提交前表单态可见；提交后断言当前选中问题写入“提交人补充信息”时间线，且状态回到 `dispatch_pending`。
|
||||||
|
- 覆盖项同步：移动端提交 / 补充关键交互包含桌面宽度移动提交补充、附件补充、联系 / 催办时间线，以及 390px 窄屏提交、追踪跳转和补充文本 / 附件持久化断言。
|
||||||
|
|
||||||
|
## 2026-06-11 知识复盘对象切换补充审计
|
||||||
|
|
||||||
|
- 知识复盘页已补入“切换不同关闭问题”的浏览器 smoke 覆盖：搜索并选中“报表导出数据量过大失败”后，再搜索并选中“客户信息导入后字段映射失败”，断言本地选中对象同步为 `issue-007`。
|
||||||
|
- 新增交互证据 `docs/design/interaction-smoke/knowledge-selected-other-issue.png`，用于证明列表选中行与右侧 AI 复盘摘要在切换复盘对象后同步更新。
|
||||||
|
- 覆盖项同步：知识复盘关键交互包含设置、筛选回显、分页 / 每页条数、搜索、切换不同关闭问题、草稿生成、摘要编辑、合并知识和无需沉淀决策。
|
||||||
|
|
||||||
|
## 2026-06-11 提交人追踪复制记录补充审计
|
||||||
|
|
||||||
|
- 提交人追踪页已补入“复制记录”页面层反馈覆盖：列表搜索命中“订单支付成功但状态未更新”后，点击“复制记录”并断言 toast “已复制 IH-2026-0148 的提交记录。”。
|
||||||
|
- 分层核对：`SubmitterProgressPanel` 只接收并调用 `onCopyRecord`，clipboard 写入和 `actions.showToast` 留在 `SubmitterTrackingPage`。
|
||||||
|
- 覆盖项同步：提交人追踪关键交互包含排序筛选、负责人资料、全部回复、详情展开、附件下载、复制记录、返工和验收。
|
||||||
|
|
||||||
|
本文档用于对照当前目标做交付核对：
|
||||||
|
|
||||||
|
> 继续出所有设计图，出完后定稿，按照设计图一比一复刻界面，并实现界面所有功能。代码要求合理分层、合理拆分、禁止单文件堆砌，并沉淀文档。
|
||||||
|
|
||||||
|
## 1. 总体结论
|
||||||
|
|
||||||
|
| 验收项 | 状态 | 证据 | 备注 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| 调度中心每个界面都有 images2 设计图 | 已完成 | `docs/design/images2/dispatcher-01` 至 `dispatcher-07` | 覆盖中心调度台、问题池、部门队列、提醒升级、知识复盘、规则配置、管理看板。 |
|
||||||
|
| 客户端界面都有 images2 设计图 | 已完成 | `docs/design/images2/client-01` 至 `client-05` | 覆盖我的待办、提交问题、处理人详情、提交人追踪、移动端提交/补充。 |
|
||||||
|
| 设计图已定稿 | 已完成 | `docs/design/design-freeze.md`, `docs/design/final-design-freeze-record.md` | 已明确视觉方向、共享组件、页面顺序、功能边界、验收方式和 12 页页面级定稿结论。 |
|
||||||
|
| 每个设计图都有对应实现页面 | 已完成 | `src/app/routes.ts`, `src/app/App.tsx`, `docs/design/implementation-screenshots/` | 12 个业务页面均有 hash 路由和实现截图。 |
|
||||||
|
| 一比一复刻证据 | 可评审完成 | `npm run capture:pages`, `npm run visual:diff`, `docs/design/implementation-screenshots/README.md`, `docs/design/visual-diff/report.md`, `docs/design/manual-design-freeze-audit.md` | 已保存逐页截图、移动视口截图和自动视觉差异报告；当前人工流程为 4 页建议通过、8 页定稿候选、0 页需人工决策，自动 visual diff 仍保留 5 张诊断页。 |
|
||||||
|
| 核心业务功能 | 已完成 MVP 闭环 | `scripts/browser-smoke.mjs`, `docs/design/interaction-smoke/` | smoke 覆盖中心筛选面板、中心真实分页 / 每页条数切换、中心批量确认、中心派发行操作、AI 派发退回补充确认、我的待办刷新 / 顶部状态 tab 反馈 / 筛选排序 / 分页 / 每页条数反馈 / AI 分析详情 / 详情 tab / 关注 / 复制链接 / 返回 / 顶部更多操作 / 底部更多处理动作 / 列表行操作、AI 预检查补充、提交页富文本工具、桌面附件上传、问题池状态 / 优先级 / 部门 / 来源 / SLA / 创建时间筛选反馈、问题池真实分页 / 每页条数切换 / CSV 导出、派发、批量治理、部门队列状态 / 优先级 / SLA / 创建时间筛选反馈、部门队列设置持久化、部门队列真实分页 / 每页条数切换、AI 分派分析详情、请求中心介入、分派、处理人详情 tab、评论对象切换、评论工具附件 / 图片 / 链接插入、工具记录落库、附件入问题、接单、协作、处理人更多动作、SLA 查看记录、处理链接复制记录、催办协作人时间线、处理人评论、关联任务、处理人详情展开、完整 AI 分析报告、转派、完成、验收、返工、移动端提交附件 / 补充项定位 / 联系处理人时间线 / 催办时间线 / 补充文本持久化 / 补充附件持久化 / 提交补充、提交人追踪真实分页 / 每页条数切换 / 排序筛选 / 详情展开 / 附件下载、知识复盘设置、知识筛选面板选项回显、知识分页 / 每页条数反馈、知识无需沉淀决策、规则连续新增 2 条普通条件并逐条断言 / 分组 / 删除、规则草稿与变更记录、管理看板筛选反馈 / 日期反馈 / 趋势范围切换 / AI 洞察详情、CSV 导出和自定义布局隐藏与持久化、提醒升级扫描 / 催办 / 升级 / 转中心复核 / 标记处理反馈、知识、看板、设置、权限、同步、AI triage。 |
|
||||||
|
| 合理分层与代码拆分 | 已完成 | `src/app`, `src/domain`, `src/data`, `src/features`, `src/shared` | 页面、领域逻辑、仓储、共享组件和布局已分层。 |
|
||||||
|
| 禁止单文件堆砌 | 已完成 | `src/app/App.tsx`, `src/shared/styles/*`, feature 局部 CSS | `App.tsx` 仅保留入口和路由转发；旧 `pages.css` 已删除；页面样式拆入 feature 目录。 |
|
||||||
|
| 文档沉淀 | 已完成 | `docs/design/*.md` | 已包含设计索引、定稿、最终定稿记录、蓝图、实现进度、截图索引、smoke 说明和本审计。 |
|
||||||
|
|
||||||
|
## 2. 页面覆盖矩阵
|
||||||
|
|
||||||
|
| 页面 | 路由 | 设计图 | 实现截图 | 关键交互证据 |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| 中心调度台 | `/#/center-dashboard` | `images2/dispatcher-01-center-dashboard.png` | `implementation-screenshots/dispatcher-01-center-dashboard.png` | `interaction-smoke/center-ai-dispatch-accepted.png`, `center-ai-live-triage.png`，筛选面板、分页 / 每页条数反馈、批量确认、AI 派发退回补充确认和派发行操作 smoke |
|
||||||
|
| 问题池 | `/#/issue-pool` | `images2/dispatcher-02-issue-pool.png` | `implementation-screenshots/dispatcher-02-issue-pool.png` | `issue-pool-empty-search.png`, `issue-pool-bulk-dispatched.png`, `issue-pool-bulk-tagged.png`，状态 / 优先级 / 部门 / 来源 / SLA / 创建时间筛选反馈、真实分页 / 每页条数切换、CSV 导出 smoke |
|
||||||
|
| 部门队列 | `/#/department-queue` | `images2/dispatcher-03-department-queue.png` | `implementation-screenshots/dispatcher-03-department-queue.png` | `department-center-escalated.png`, `department-assigned-handler.png`，状态 / 优先级 / SLA / 创建时间筛选反馈、队列设置持久化、分页反馈、AI 分派分析详情、请求中心介入和分派处理人 smoke |
|
||||||
|
| 提醒升级 | `/#/escalation-center` | `images2/dispatcher-04-escalation-center.png` | `implementation-screenshots/dispatcher-04-escalation-center.png` | `escalation-sla-scanned.png`, `escalation-marked-handled.png`，扫描、立即催办、升级负责人、转中心复核和标记处理反馈 smoke |
|
||||||
|
| 知识复盘 | `/#/knowledge-review` | `images2/dispatcher-05-knowledge-review.png` | `implementation-screenshots/dispatcher-05-knowledge-review.png` | `knowledge-settings-saved.png`, `knowledge-selected-other-issue.png`, `knowledge-draft-generated.png`, `knowledge-summary-edited.png`, `knowledge-draft-merged.png`, `knowledge-no-draft-marked.png`，筛选面板、筛选选项回显、分页反馈和切换不同关闭问题 smoke |
|
||||||
|
| 规则配置 | `/#/rule-config` | `images2/dispatcher-06-rule-config.png` | `implementation-screenshots/dispatcher-06-rule-config.png` | `rule-config-condition-removed.png`, `rule-config-audit-log.png`, `rule-config-tested.png`, `rule-config-published.png`，连续新增 2 条普通条件、编辑匹配值和权重、添加 AND 分组、删除序列化条件、保存草稿、测试和发布 smoke |
|
||||||
|
| 管理看板 | `/#/analytics-board` | `images2/dispatcher-07-analytics-board.png` | `implementation-screenshots/dispatcher-07-analytics-board.png` | `analytics-custom-layout-saved.png`, `analytics-filtered.png`，日期反馈、趋势范围切换、真实下钻、刷新记录和 AI 洞察详情 smoke |
|
||||||
|
| 我的待办 | `/#/client-workbench` | `images2/client-01-workbench.png` | `implementation-screenshots/client-01-workbench.png` | `client-workbench-detail-tabs.png`，刷新待办列表、顶部状态 tab 反馈、筛选排序、分页反馈、AI 分析详情、更多操作关注 / 复制链接、底部更多处理动作 smoke，处理人主链路由 `handler-resolved.png` 覆盖。 |
|
||||||
|
| 提交问题 | `/#/submit-issue` | `images2/client-02-submit-issue.png` | `implementation-screenshots/client-02-submit-issue.png`, `client-02-submit-issue-mobile.png` | `submit-issue-editor-attachment.png`, `submitter-tracking-after-submit.png` |
|
||||||
|
| 处理人详情 | `/#/handler-detail` | `images2/client-03-issue-detail-handler.png` | `implementation-screenshots/client-03-issue-detail-handler.png` | `handler-tabs-comment-tools.png`, `handler-comment-task-linked.png`, `handler-detail-expanded-report.png`, `handler-resolved.png`，评论工具附件 / 图片 / 链接插入、更多动作面板、SLA 查看记录、处理链接复制记录、催办协作人时间线、处理记录 CSV 导出 smoke |
|
||||||
|
| 提交人追踪 | `/#/submitter-tracking` | `images2/client-04-submitter-tracking.png` | `implementation-screenshots/client-04-submitter-tracking.png` | `submitter-detail-expanded-download.png`, `submitter-approved.png`, `submitter-reopened.png`，真实分页 / 每页条数切换、排序筛选、负责人资料和全部回复展开 smoke |
|
||||||
|
| 移动端提交 / 补充 | `/#/mobile-submit` | `images2/client-05-mobile-submit.png` | `implementation-screenshots/client-05-mobile-submit.png`, `client-05-mobile-submit-mobile.png` | `mobile-submit-attachment-selected.png`, `mobile-submitted-tracking.png`, `mobile-supplement-missing-upload.png`, `mobile-supplement-submitted.png`, `mobile-narrow-submit.png`, `mobile-narrow-submitted.png`, `mobile-narrow-supplement.png` |
|
||||||
|
|
||||||
|
## 3. 功能覆盖矩阵
|
||||||
|
|
||||||
|
| 功能 | 状态 | 主要证据 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 页面导航切换和路由直达 | 已覆盖 | `src/app/routes.ts`, `src/app/routes.test.ts`, `capture:pages` |
|
||||||
|
| 我的待办刷新、顶部状态 tab 反馈、筛选排序、分页 / 每页条数反馈、AI 分析详情、详情 tab、关注、复制链接、返回、顶部更多操作、底部更多处理动作和列表行操作 | 已覆盖 | `client-workbench-detail-tabs.png`, `workbenchActionRepository` 测试，`browser-smoke` 刷新、待接单 / 全部状态 tab、筛选排序、分页反馈、每页条数、分析详情展开、复制链接记录、关注记录和菜单状态断言 |
|
||||||
|
| AI 预检查重新检测、建议补充到提交表单、富文本工具栏、桌面附件上传和提交控件选择持久化 | 已覆盖 | `submit-issue-editor-attachment.png`, `submitter-tracking-after-submit.png`, `submitPrecheckRepository` 测试，`browser-smoke` 重新检测记录、描述内容、影响范围、影响等级、SLA 和时间线持久化断言 |
|
||||||
|
| 问题选择、搜索、筛选反馈、真实分页、CSV 导出和空状态 | 已覆盖 | `issueSearch/issueFilters/issuePoolExport` 测试，`issue-pool-empty-search.png`, `browser-smoke` 问题池状态 / 优先级 / 部门 / 来源 / SLA / 创建时间筛选、第 2 页 active、显示范围、首行变化和 CSV 导出元数据断言 |
|
||||||
|
| AI 自动分析和推荐派发 | 已覆盖 | `aiTriageClient` 测试，`center-ai-live-triage.png` |
|
||||||
|
| 中心筛选、真实分页 / 每页条数切换、采纳 AI 派发、AI 派发退回补充确认、行级派发操作、批量确认派发和批量治理 | 已覆盖 | `center-ai-dispatch-accepted.png`, `center-ai-live-triage.png`, `issue-pool-bulk-dispatched.png`, `issue-pool-bulk-tagged.png`, `browser-smoke` 筛选面板、第 2 页 active、显示范围和首行变化、退回补充确认、批量确认和 toast 断言，`appWorkflows` 测试 |
|
||||||
|
| 部门队列状态 / 优先级 / SLA / 创建时间筛选反馈、队列设置持久化、真实分页 / 每页条数切换、AI 分派分析详情、请求中心介入和分派处理人 | 已覆盖 | `department-center-escalated.png`, `department-assigned-handler.png`, `departmentQueueSettingsRepository` 测试，`browser-smoke` 筛选反馈、队列设置取消 / 保存 / reload 恢复、第 2 页 active、显示范围和首行变化、分派分析详情、升级负责人时间线和未处理升级事件断言 |
|
||||||
|
| 处理人详情 tab、评论对象切换、评论工具附件 / 图片 / 链接插入、工具记录落库、附件入问题、接单、协作、更多动作、SLA 查看记录、处理链接复制记录、催办协作人、评论、关联任务、详情展开、AI 完整报告、附件下载、处理记录 CSV 导出、转派、提交结果 | 已覆盖 | `handler-tabs-comment-tools.png`, `handler-comment-task-linked.png`, `handler-detail-expanded-report.png`, `handler-resolved.png`, `handlerActionRepository` / `issueProcessExport` 测试，`browser-smoke` 详情 tab、评论工具、问题附件持久化、更多动作面板、handler action 落库和导出元数据断言 |
|
||||||
|
| 提交人补充、验收、返工 | 已覆盖 | `mobile-supplement-submitted.png`, `submitter-approved.png`, `submitter-reopened.png`；补充文本 / 附件和联系 / 催办时间线由 `browser-smoke` 与 `appWorkflows` 测试覆盖 |
|
||||||
|
| 提交人追踪真实分页、排序筛选、详情展开、负责人资料、全部回复和附件下载 | 已覆盖 | `submitter-detail-expanded-download.png`, `browser-smoke` 第 2 页 active、显示范围和首行变化、排序回第 1 页、创建时间排序、SLA 风险筛选、负责人资料展开 / 收起、全部回复展开 / 收起和 toast 断言 |
|
||||||
|
| SLA 扫描、提醒、立即催办、升级负责人、转中心复核和标记处理 | 已覆盖 | `escalation-sla-scanned.png`, `escalation-marked-handled.png`, `browser-smoke` 扫描、催办、升级、转中心复核和标记处理反馈断言，`escalationRules` 测试 |
|
||||||
|
| 知识复盘设置、筛选选项回显、分页 / 每页条数反馈、切换不同关闭问题、草稿生成、摘要编辑、合并和无需沉淀决策 | 已覆盖 | `knowledge-settings-saved.png`, `knowledge-selected-other-issue.png`, `knowledge-draft-generated.png`, `knowledge-summary-edited.png`, `knowledge-draft-merged.png`, `knowledge-no-draft-marked.png`, `browser-smoke` 设置面板、筛选面板、处理部门筛选回显、分页反馈、每页条数、搜索切换复盘对象和 `selectedIssueId` 断言，`knowledgeActions/knowledgeSelectors`, `appWorkflows` 测试 |
|
||||||
|
| 规则保存、草稿、变更记录、条件新增、条件编辑、条件分组、条件删除、测试、发布 | 已覆盖 | `rule-config-condition-removed.png`, `rule-config-audit-log.png`, `rule-config-tested.png`, `rule-config-published.png`, `browser-smoke` 序列化条件、匹配值、权重、AND 分组和删除断言，`appWorkflows` 测试 |
|
||||||
|
| 管理看板筛选反馈、日期反馈、趋势范围切换、指标计算、AI 洞察详情、真实下钻、刷新记录、CSV 导出和自定义布局 | 已覆盖 | `analytics-custom-layout-saved.png`, `analytics-filtered.png`, `analyticsSelectors` / `analyticsExport` / `analyticsDrilldownRepository` / `analyticsViewStateRepository` 测试，`browser-smoke` 范围 / 部门 / 风险视图反馈、固定日期反馈、趋势范围切换、洞察详情、导出范围、部门 / 重复 / SLA / AI 洞察下钻、刷新记录、布局隐藏和本地持久化断言 |
|
||||||
|
| 移动端提交、草稿反馈、二级控件持久化、附件上传、补充项定位、联系 / 催办时间线、补充文本 / 附件持久化和窄屏提交 / 补充布局 | 已覆盖 | `mobile-submit-attachment-selected.png`, `mobile-supplement-missing-upload.png`, `mobile-narrow-supplement.png`, 移动实现截图，`mobile-narrow-*` smoke 截图，`browser-smoke` localStorage 断言 |
|
||||||
|
| 设置、同步、权限角色和权限拦截 | 已覆盖 | `settings-*` smoke 截图，`platformSettingsRepository`, `permissionPolicy`, `appSyncRepository` 测试 |
|
||||||
|
| 关键业务动作写入时间线和提交控件值进入新问题 | 已覆盖 | `issueActions`, `appWorkflows`, `browser-smoke` 持久化断言 |
|
||||||
|
|
||||||
|
## 4. 代码结构审计
|
||||||
|
|
||||||
|
当前实现已从早期单文件原型拆成以下层次：
|
||||||
|
|
||||||
|
```text
|
||||||
|
src/
|
||||||
|
app/ # 应用入口、路由、状态组装、工作流
|
||||||
|
domain/ # 问题、派发、AI、提醒、知识、权限、看板等领域逻辑
|
||||||
|
data/ # seed 数据、本地持久化、同步配置、密钥存储
|
||||||
|
features/ # 调度中心和客户端页面及其局部组件
|
||||||
|
shared/ # 共享布局、按钮、表格、徽标、时间线、指标块、基础样式
|
||||||
|
```
|
||||||
|
|
||||||
|
分层核对：
|
||||||
|
|
||||||
|
- `src/app/App.tsx` 只负责装配应用壳、导航项和路由页面。
|
||||||
|
- `src/app/appWorkflows.ts` 承载跨页面业务工作流，避免把动作散落到页面组件。
|
||||||
|
- `src/domain/**` 承载纯业务判断和可测试计算。
|
||||||
|
- `src/data/**` 承载本地持久化、同步 payload、平台设置和密钥存储。
|
||||||
|
- `src/features/**/components/**` 承载页面专属组件和局部样式。
|
||||||
|
- `src/shared/styles/` 仅保留 `tokens.css`, `base.css`, `layout.css`, `components.css`。
|
||||||
|
- 旧共享页面样式 `src/shared/styles/pages.css` 已删除，旧未路由组件 `MyTaskList`、`HandlerActionPanel` 已移除。
|
||||||
|
- 未被入口引用的旧 `src/styles.css` 已删除，避免把早期单文件全局样式误判为当前运行时结构。
|
||||||
|
|
||||||
|
## 5. 验证基线
|
||||||
|
|
||||||
|
当前要求下，每次收尾应至少跑：
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
npm test
|
||||||
|
npm run build
|
||||||
|
npm run smoke:browser
|
||||||
|
npm run visual:diff
|
||||||
|
```
|
||||||
|
|
||||||
|
需要刷新全部页面截图时追加：
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
npm run capture:pages
|
||||||
|
```
|
||||||
|
|
||||||
|
最近一轮已记录通过：
|
||||||
|
|
||||||
|
- `npx tsc --noEmit`：类型检查通过。
|
||||||
|
- `npm test`：29 个测试文件，104 个测试通过。
|
||||||
|
- `npm run build`：TypeScript 和 Vite 生产构建通过，保留既有 500 kB chunk 体积提示。
|
||||||
|
- `npm run capture:pages`：12 张桌面实现截图和 3 张移动截图刷新通过。
|
||||||
|
- `npm run smoke:browser`：真实浏览器业务路径 smoke 通过并刷新交互截图。
|
||||||
|
- `npm run visual:diff`：12 张设计图与实现截图完成自动视觉差异对比，最新报告时间 `2026-06-18T04:47:26.995Z`；自动诊断为 7 / 5，人工流程为 4 页建议通过、8 页定稿候选、0 页需决策。
|
||||||
|
|
||||||
|
本轮知识复盘编辑、管理看板 CSV 导出和自定义布局补齐后已重新验证：
|
||||||
|
|
||||||
|
- `npm test`：20 个测试文件，71 个测试通过。
|
||||||
|
- `npm run build`：TypeScript 和 Vite 生产构建通过，生成 `dist/`。
|
||||||
|
- `npm run smoke:browser`：真实浏览器业务路径 smoke 通过，并刷新 `docs/design/interaction-smoke/` 交互截图。
|
||||||
|
- `npm run visual:diff`：12 张设计图与实现截图完成自动视觉差异对比，生成 `docs/design/visual-diff/report.md` 和 12 张差异图。
|
||||||
|
|
||||||
|
本轮提交问题表单控件持久化证据补齐已完成代码审阅和单元验证：
|
||||||
|
|
||||||
|
- `npm test`：20 个测试文件，71 个测试通过，提交问题 workflow 单测已断言 `impactScope` 与 `severity` 透传。
|
||||||
|
- `npm run build`：TypeScript 和 Vite 生产构建通过，未复现 `esbuild spawn EPERM`。
|
||||||
|
- 后续已补跑 `npm run smoke:browser`、`npm run capture:pages`、`npm run visual:diff`，最新结果见上方最近一轮记录。
|
||||||
|
|
||||||
|
本轮移动端提交/补充二级反馈与持久化证据已补齐 smoke 覆盖：
|
||||||
|
|
||||||
|
- 移动端提交 smoke 覆盖“保存草稿”toast、非默认影响范围 / 来源 / 系统 / 期望时间选择，并从 localStorage 断言新问题字段持久化。
|
||||||
|
- 移动端补充 smoke 覆盖“联系处理人”“催办”时间线，并保留去补充、补充文本、补充附件与提交补充路径。
|
||||||
|
- 已验证通过：`npm run smoke:browser`、`npm run build`、`npm test`。
|
||||||
|
|
||||||
|
## 6. 已知边界和风险
|
||||||
|
|
||||||
|
- “一比一复刻”已接入自动视觉差异报告，但报告定位为诊断工具，不替代人工设计评审；当前人工流程为 4 张页面建议通过、8 张页面定稿候选、0 张页面需人工决策，详见 `docs/design/manual-design-freeze-audit.md`。
|
||||||
|
- MVP 已支持 OpenAI-compatible AI triage 配置和 mock AI smoke；真实企业数据接入、真实通讯工具推送、多租户和复杂审批流不在本版定稿边界内。
|
||||||
|
- 前端关键路径和同步接口权限已有测试；服务端 Spring Boot 测试曾因本机没有 `mvn` 且 `server/` 无 Maven Wrapper 暂未本机执行，需要在具备 Maven 的环境补跑。
|
||||||
|
- hover/focus/loading 等微交互状态已有组件基础样式，但尚未逐项生成截图归档；当前 smoke 更偏业务路径验证。
|
||||||
|
|
||||||
|
## 7. 交付判定
|
||||||
|
|
||||||
|
按当前产品目标，本项目已经具备可评审的完整前端 MVP：
|
||||||
|
|
||||||
|
- 设计资产齐全。
|
||||||
|
- 页面实现齐全。
|
||||||
|
- 核心业务流可操作。
|
||||||
|
- 本地持久化、同步配置、权限、AI 设置和浏览器 smoke 已覆盖。
|
||||||
|
- 代码已按 app/domain/data/features/shared 拆分，避免继续堆叠在单文件。
|
||||||
|
- 文档链路完整。
|
||||||
|
|
||||||
|
当前人工定稿流程已消除需人工决策页；`docs/design/review-index.html` 已为 12 张页面给出“通过 / 通过但备注”建议结论，后续只需人工在审阅入口保存最终记录并导出 JSON 定稿记录。后续改动以人工审美目标或明确设计图差异为依据，不再无目标盲追 `visual:diff`。
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
# Issue Hub AI 设计定稿
|
||||||
|
|
||||||
|
定稿日期：2026-06-06
|
||||||
|
|
||||||
|
## 1. 定稿范围
|
||||||
|
|
||||||
|
本次定稿覆盖 12 张 `images2` 高保真设计图：
|
||||||
|
|
||||||
|
### 调度中心
|
||||||
|
|
||||||
|
- `images2/dispatcher-01-center-dashboard.png`
|
||||||
|
- `images2/dispatcher-02-issue-pool.png`
|
||||||
|
- `images2/dispatcher-03-department-queue.png`
|
||||||
|
- `images2/dispatcher-04-escalation-center.png`
|
||||||
|
- `images2/dispatcher-05-knowledge-review.png`
|
||||||
|
- `images2/dispatcher-06-rule-config.png`
|
||||||
|
- `images2/dispatcher-07-analytics-board.png`
|
||||||
|
|
||||||
|
### 客户端
|
||||||
|
|
||||||
|
- `images2/client-01-workbench.png`
|
||||||
|
- `images2/client-02-submit-issue.png`
|
||||||
|
- `images2/client-03-issue-detail-handler.png`
|
||||||
|
- `images2/client-04-submitter-tracking.png`
|
||||||
|
- `images2/client-05-mobile-submit.png`
|
||||||
|
|
||||||
|
参考总览图：
|
||||||
|
|
||||||
|
- `images2/reference-overview-board-v1.png`
|
||||||
|
|
||||||
|
## 2. 视觉定稿结论
|
||||||
|
|
||||||
|
采用“企业级 AI 调度中枢”方向：
|
||||||
|
|
||||||
|
- 深色石墨侧边栏承载全局导航。
|
||||||
|
- 主工作区为亮色运营台，使用大面积浅背景和白色内容区。
|
||||||
|
- 青绿色作为主操作色，用于导航选中、主按钮、AI 置信度、进度确认。
|
||||||
|
- 红色和橙色仅用于 SLA 风险、超时、升级等风险状态。
|
||||||
|
- 右侧检查器作为 AI 建议、洞察、操作解释和下一步动作的固定模式。
|
||||||
|
- 调度中心页面保持高密度、高可扫描性。
|
||||||
|
- 客户端页面比调度中心更轻，突出个人待办、提交、处理和追踪。
|
||||||
|
|
||||||
|
## 3. 共享组件定稿
|
||||||
|
|
||||||
|
后续一比一复刻必须优先抽象以下共享组件：
|
||||||
|
|
||||||
|
- `AppShell`：整体布局容器。
|
||||||
|
- `Sidebar`：深色导航。
|
||||||
|
- `TopBar`：标题、搜索、通知、设置。
|
||||||
|
- `MetricTile`：KPI 指标块。
|
||||||
|
- `SegmentedFilter`：状态筛选。
|
||||||
|
- `StatusBadge`：状态、优先级、SLA、风险徽标。
|
||||||
|
- `DataTable`：高密度业务表格。
|
||||||
|
- `InspectorPanel`：右侧检查器。
|
||||||
|
- `Timeline`：问题流转、升级链路、处理过程。
|
||||||
|
- `ActionBar`：页面底部或详情区主操作。
|
||||||
|
- `AiInsightPanel`：AI 建议、洞察、复盘、预检查。
|
||||||
|
- `RuleBuilder`：规则配置页面专用构件。
|
||||||
|
- `ProgressTracker`：提交人进度追踪。
|
||||||
|
- `IssueForm`：提交问题表单。
|
||||||
|
|
||||||
|
## 4. 页面实现顺序
|
||||||
|
|
||||||
|
### 第一批：调度中心主链路
|
||||||
|
|
||||||
|
1. 中心调度台。
|
||||||
|
2. 问题池。
|
||||||
|
3. 部门队列。
|
||||||
|
4. 提醒升级。
|
||||||
|
|
||||||
|
目标：打通中心端派发、部门分派、提醒升级的主操作链路。
|
||||||
|
|
||||||
|
### 第二批：客户端主链路
|
||||||
|
|
||||||
|
1. 客户端首页 / 我的待办。
|
||||||
|
2. 提交问题。
|
||||||
|
3. 处理人问题详情。
|
||||||
|
4. 提交人进度追踪。
|
||||||
|
|
||||||
|
目标：打通提交、接单、协作、转派、完成、验收。
|
||||||
|
|
||||||
|
### 第三批：治理与配置
|
||||||
|
|
||||||
|
1. 知识复盘。
|
||||||
|
2. 规则配置。
|
||||||
|
3. 管理看板。
|
||||||
|
4. 移动端提交 / 补充。
|
||||||
|
|
||||||
|
目标：完善知识沉淀、派单策略、数据看板和移动入口。
|
||||||
|
|
||||||
|
## 5. 功能定稿边界
|
||||||
|
|
||||||
|
### 必须实现
|
||||||
|
|
||||||
|
- 页面导航切换。
|
||||||
|
- 问题选择和详情联动。
|
||||||
|
- AI 推荐派发展示。
|
||||||
|
- 采纳派发。
|
||||||
|
- 退回补充。
|
||||||
|
- 部门分派。
|
||||||
|
- 转派。
|
||||||
|
- 请求协作。
|
||||||
|
- 接单处理。
|
||||||
|
- 提交处理结果。
|
||||||
|
- 提交人补充信息。
|
||||||
|
- 提交人验收通过。
|
||||||
|
- 提交人要求返工。
|
||||||
|
- SLA 风险提醒。
|
||||||
|
- 升级负责人。
|
||||||
|
- 问题时间线写入。
|
||||||
|
- 规则配置的本地编辑和测试预览。
|
||||||
|
- 知识复盘条目生成草稿。
|
||||||
|
- 看板指标基于本地 mock/domain 数据计算。
|
||||||
|
|
||||||
|
### 第一版可用 mock 实现
|
||||||
|
|
||||||
|
- AI 真实模型调用可先保留现有配置能力，页面功能先使用本地模拟结果。
|
||||||
|
- 图表可使用 CSS/HTML 轻量实现，不引入大型图表库。
|
||||||
|
- 移动端提交先作为响应式页面或预览入口实现，不必先做独立移动应用。
|
||||||
|
|
||||||
|
### 暂不实现
|
||||||
|
|
||||||
|
- 多租户。
|
||||||
|
- 复杂审批流设计器。
|
||||||
|
- 外部客户门户。
|
||||||
|
- 真实企业通讯工具推送。
|
||||||
|
- 绩效考核。
|
||||||
|
|
||||||
|
## 6. 代码定稿要求
|
||||||
|
|
||||||
|
必须遵守：
|
||||||
|
|
||||||
|
- 禁止继续把页面堆进 `src/App.tsx`。
|
||||||
|
- 禁止把所有样式堆进单一巨型 CSS 文件。
|
||||||
|
- 必须按 `implementation-blueprint.md` 分层拆分。
|
||||||
|
- 页面组件和领域逻辑分离。
|
||||||
|
- 状态流转逻辑必须集中在 domain 层。
|
||||||
|
- mock 数据集中管理，不散落在页面组件里。
|
||||||
|
- 所有关键业务动作都要写入时间线。
|
||||||
|
- 每个阶段至少运行 `npm test` 和 `npm run build`。
|
||||||
|
|
||||||
|
## 7. 定稿后验收方式
|
||||||
|
|
||||||
|
每个页面复刻完成后检查：
|
||||||
|
|
||||||
|
- 是否与对应 images2 设计图保持布局一致。
|
||||||
|
- 是否保留主操作和关键状态。
|
||||||
|
- 是否没有文字溢出、遮挡和明显错位。
|
||||||
|
- 是否可以完成该页面的核心业务动作。
|
||||||
|
- 是否没有新增单文件堆砌。
|
||||||
|
- 是否通过构建。
|
||||||
|
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
# Issue Hub AI 设计评审记录
|
||||||
|
|
||||||
|
## 当前设计轮次
|
||||||
|
|
||||||
|
设计轮次：images2 高保真单页设计图 v1
|
||||||
|
|
||||||
|
当前已完成：
|
||||||
|
|
||||||
|
- `images2/dispatcher-01-center-dashboard.png`
|
||||||
|
- `images2/dispatcher-02-issue-pool.png`
|
||||||
|
- `images2/dispatcher-03-department-queue.png`
|
||||||
|
- `images2/dispatcher-04-escalation-center.png`
|
||||||
|
- `images2/dispatcher-05-knowledge-review.png`
|
||||||
|
- `images2/dispatcher-06-rule-config.png`
|
||||||
|
- `images2/dispatcher-07-analytics-board.png`
|
||||||
|
- `images2/client-01-workbench.png`
|
||||||
|
- `images2/client-02-submit-issue.png`
|
||||||
|
- `images2/client-03-issue-detail-handler.png`
|
||||||
|
- `images2/client-04-submitter-tracking.png`
|
||||||
|
- `images2/client-05-mobile-submit.png`
|
||||||
|
|
||||||
|
当前待完成：
|
||||||
|
|
||||||
|
- 设计定稿检查。
|
||||||
|
- 按设计图拆分前端架构并一比一复刻。
|
||||||
|
|
||||||
|
## 已确认视觉方向
|
||||||
|
|
||||||
|
已生成的调度中心前四张设计图形成了比较稳定的视觉语言：
|
||||||
|
|
||||||
|
- 深色石墨侧边栏承载全局导航。
|
||||||
|
- 主工作区使用明亮背景和大面积留白，适合高密度运营台。
|
||||||
|
- 青绿色作为主要操作色，用于当前导航、主按钮、置信度和关键进度。
|
||||||
|
- 红色和橙色只用于 SLA 风险、超时和升级状态。
|
||||||
|
- 每个页面都保留顶部搜索、通知、设置等运营工作台入口。
|
||||||
|
- 右侧检查器用于展示 AI 建议、洞察、升级链路或辅助决策。
|
||||||
|
|
||||||
|
## 调度中心页面评审
|
||||||
|
|
||||||
|
### 中心调度台
|
||||||
|
|
||||||
|
可复刻要点：
|
||||||
|
|
||||||
|
- 左侧导航 + 顶部搜索 + KPI + 筛选 + 队列表格 + 右侧 AI 推荐。
|
||||||
|
- 表格字段应包含问题摘要、来源、分类、优先级、SLA、AI 推荐派发、置信度和操作。
|
||||||
|
- 右侧 AI 推荐必须展示推荐处理人、置信度、推荐理由、相似问题和人员负载。
|
||||||
|
|
||||||
|
### 问题池
|
||||||
|
|
||||||
|
可复刻要点：
|
||||||
|
|
||||||
|
- 问题池是全局检索和批量治理页面。
|
||||||
|
- 顶部需要多维筛选：状态、优先级、部门、来源、提交人、时间。
|
||||||
|
- 右侧 AI 聚合洞察展示问题分布、重复问题趋势和人工复核队列。
|
||||||
|
|
||||||
|
### 部门队列
|
||||||
|
|
||||||
|
可复刻要点：
|
||||||
|
|
||||||
|
- 部门 tab 是主要入口。
|
||||||
|
- 主表按团队分组，展示未分派和处理中数量。
|
||||||
|
- 右侧成员负载和热力图是部门负责人分派的依据。
|
||||||
|
- 底部操作区支持分派、转部门、请求中心介入。
|
||||||
|
|
||||||
|
### 提醒升级
|
||||||
|
|
||||||
|
可复刻要点：
|
||||||
|
|
||||||
|
- 风险等级分组比普通列表更重要。
|
||||||
|
- 右侧展示升级链路、提醒规则和最近动作。
|
||||||
|
- 底部或工具区提供立即催办、升级部门负责人、转中心复核、暂停提醒。
|
||||||
|
|
||||||
|
## 后续定稿标准
|
||||||
|
|
||||||
|
全部 12 张设计图生成后，再进行定稿检查：
|
||||||
|
|
||||||
|
1. 左侧导航、顶部工具栏、按钮、徽标和 KPI 样式是否统一。
|
||||||
|
2. 调度中心页面是否都具备“状态、责任、AI 建议、下一步动作、可追溯记录”。
|
||||||
|
3. 客户端页面是否明显比中心端更聚焦个人待办和提交进度。
|
||||||
|
4. 页面之间是否有足够可复用的组件模式，支持合理拆分实现。
|
||||||
|
5. 移动端提交是否与桌面端视觉一致，但表单密度适合手机。
|
||||||
|
|
||||||
|
## 设计图定稿检查项
|
||||||
|
|
||||||
|
进入代码复刻前需要逐张确认：
|
||||||
|
|
||||||
|
- 页面名称、导航选中态和业务意图是否清楚。
|
||||||
|
- 顶部搜索、通知、设置等全局操作是否在调度中心页面保持一致。
|
||||||
|
- 表格、KPI、状态徽标、按钮、右侧检查器是否可被抽象为共享组件。
|
||||||
|
- 每个页面是否至少有一个明确主操作。
|
||||||
|
- 风险状态是否只使用红/橙色，不滥用警示色。
|
||||||
|
- 客户端页面是否比调度中心更轻、更聚焦个人任务。
|
||||||
|
- 移动端提交是否可独立作为客户端移动入口实现。
|
||||||
|
|
||||||
|
## 复刻前置要求
|
||||||
|
|
||||||
|
设计图全部生成并定稿后，再进入代码实现。实现必须遵守：
|
||||||
|
|
||||||
|
- 不继续在 `src/App.tsx` 单文件堆砌。
|
||||||
|
- 先拆 `app/domain/data/features/shared` 分层。
|
||||||
|
- 共享组件先行：侧边栏、顶部栏、按钮、徽标、KPI、表格、时间线、检查器。
|
||||||
|
- 页面功能逐个落地，并保留状态流转和时间线记录。
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
# Issue Hub AI 最终设计定稿记录
|
||||||
|
|
||||||
|
记录时间：2026-06-18
|
||||||
|
|
||||||
|
来源：
|
||||||
|
|
||||||
|
- `docs/design/review-index.html`
|
||||||
|
- `docs/design/manual-design-freeze-audit.md`
|
||||||
|
- `docs/design/visual-diff/report.md`
|
||||||
|
- `docs/design/implementation-screenshots/`
|
||||||
|
- `docs/design/interaction-smoke/`
|
||||||
|
|
||||||
|
## 1. 定稿状态
|
||||||
|
|
||||||
|
- 页面总数：12 张。
|
||||||
|
- 建议通过：4 张。
|
||||||
|
- 通过但备注 / 定稿候选：8 张。
|
||||||
|
- 需人工决策：0 张。
|
||||||
|
- 自动 visual diff 最新报告时间：`2026-06-18T04:47:26.995Z`。
|
||||||
|
- 自动 visual diff 诊断：7 张复核、5 张需打磨；该诊断不等同于人工返修队列。
|
||||||
|
|
||||||
|
## 2. 页面级结论
|
||||||
|
|
||||||
|
| 页面 | 结论 | 定稿说明 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 中心调度台 | 通过但备注 | 采用当前核心骨架、真实分页、每页条数、行级派发面板、批量操作和右侧 AI 推荐检查器；动态业务样例和侧栏底部状态策略作为可接受偏差。 |
|
||||||
|
| 问题池 | 通过但备注 | 接受右侧 AI 洞察简化为文本洞察区，保留真实分页、提交人筛选、CSV 导出、批量派发和批量治理闭环。 |
|
||||||
|
| 部门队列 | 通过 | 首屏结构、队列表格、成员负载、热力图和 AI 建议进入定稿。 |
|
||||||
|
| 提醒升级 | 通过但备注 | 已完成目标返修：左侧风险候选恢复为高密度分组表格，右侧补齐升级链路、提醒规则、最近动作和备注区；动态风险候选数量和 SLA 文案差异可接受。 |
|
||||||
|
| 知识复盘 | 通过但备注 | 采用当前可编辑 AI 复盘工作区，保留真实分页、每页条数、摘要编辑保存和三类知识动作。 |
|
||||||
|
| 规则配置 | 通过 | 三栏规则工作台、AI 策略、规则预览和底部发布栏进入定稿。 |
|
||||||
|
| 管理看板 | 通过但备注 | 采用当前设计量级首屏、真实导出 / 下钻 / 刷新记录、自定义布局入口、中部榜单和右侧 AI 洞察。 |
|
||||||
|
| 我的待办 | 通过但备注 | 接受当前详情与操作区优先于右侧相似问题区的首屏取舍，任务处理主路径和操作优先级清楚。 |
|
||||||
|
| 提交问题 | 通过 | 表单节奏、右侧 AI 预检查、相似问题、预计流转和底部动作进入定稿。 |
|
||||||
|
| 处理人详情 | 通过但备注 | 采用当前三栏骨架、顶栏动作、时间线、评论工具和单一右栏分组结构；业务样例、头像和静态文案差异可接受。 |
|
||||||
|
| 提交人追踪 | 通过但备注 | 三栏追踪结构定稿；默认选中样例、数量、头像和附件数据差异作为真实演示数据偏差。 |
|
||||||
|
| 移动端提交 / 补充 | 通过 | 双手机预览、表单、补充流程和移动端状态进入定稿。 |
|
||||||
|
|
||||||
|
## 3. 冻结原则
|
||||||
|
|
||||||
|
- 自动 visual diff 只作为诊断工具，不替代人工设计判断。
|
||||||
|
- 动态业务文案、AI 生成内容、头像、图标细节、真实分页、导出、下钻、同步和状态反馈可以与静态 images2 样例不同。
|
||||||
|
- 后续若重新返修，必须写明目标区域、期望观感、设计图依据、不能破坏的功能和复验命令。
|
||||||
|
- 已证伪的像素盲调方向不得重复尝试，详见 `docs/design/visual-polish-backlog.md`。
|
||||||
|
|
||||||
|
## 4. 验证记录
|
||||||
|
|
||||||
|
最近一轮已通过：
|
||||||
|
|
||||||
|
- `npx tsc --noEmit`
|
||||||
|
- `npm test`：29 个测试文件、104 个测试
|
||||||
|
- `npm run build`：通过，保留既有 500 kB chunk 体积提示
|
||||||
|
- `npm run smoke:browser`
|
||||||
|
- `npm run capture:pages`
|
||||||
|
- `npm run visual:diff`
|
||||||
|
|
||||||
|
边界说明：
|
||||||
|
|
||||||
|
- 当前交付是完整可评审的前端 MVP 和设计定稿记录。
|
||||||
|
- AI、同步、通知和移动端发布能力以 mock 服务、本地持久化和前端预览证明前端集成路径；真实企业服务、真实外部通知、多租户 / 复杂审批和生产移动端发布不在本轮定稿边界内。
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
# Issue Hub AI images2 设计图索引
|
||||||
|
|
||||||
|
本目录用于保存 `images2` 生成的高保真产品设计图。设计图分为两组：调度中心界面和客户端界面。
|
||||||
|
|
||||||
|
## 设计风格定稿方向
|
||||||
|
|
||||||
|
- 产品气质：企业级 AI 调度中枢，冷静、专业、可运营。
|
||||||
|
- 色彩方向：深色石墨导航 + 亮色工作区 + 青绿色主操作 + 红/橙风险状态。
|
||||||
|
- 版式方向：调度台强调队列、风险、AI 推荐解释和下一步动作；客户端强调我的待办、提交进度、处理上下文。
|
||||||
|
- 视觉要求：高保真、可评审、接近 Figma 产品稿，不做营销首页，不做低保真线框。
|
||||||
|
|
||||||
|
## 当前状态
|
||||||
|
|
||||||
|
- 已有整体方向参考图：`reference-overview-board-v1.png`。
|
||||||
|
- 12 张单页设计图已生成并冻结，当前通过 `../review-index.html` 和 `../manual-design-freeze-audit.md` 做人工定稿审阅。
|
||||||
|
- 后续一比一复刻的工程拆分见：`../implementation-blueprint.md`。
|
||||||
|
|
||||||
|
## 调度中心设计图
|
||||||
|
|
||||||
|
| 文件名 | 页面 | 说明 | 状态 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `dispatcher-01-center-dashboard.png` | 中心调度台 | 待派发队列、KPI、AI 推荐派发、SLA 风险 | 已生成 |
|
||||||
|
| `dispatcher-02-issue-pool.png` | 问题池 | 全局问题列表、状态筛选、批量处理、风险聚合 | 已生成 |
|
||||||
|
| `dispatcher-03-department-queue.png` | 部门队列 | 部门问题池、人员负载、分派建议、跨部门协作 | 已生成 |
|
||||||
|
| `dispatcher-04-escalation-center.png` | 提醒升级 | 超时提醒、升级链路、催办策略、待介入问题 | 已生成 |
|
||||||
|
| `dispatcher-05-knowledge-review.png` | 知识复盘 | 关闭问题复盘、AI 总结、知识库沉淀、重复问题 | 已生成 |
|
||||||
|
| `dispatcher-06-rule-config.png` | 规则配置 | 分类规则、SLA 规则、派单规则、AI 自动执行策略 | 已生成 |
|
||||||
|
| `dispatcher-07-analytics-board.png` | 管理看板 | 全局指标、部门效率、AI 采纳率、趋势分析 | 已生成 |
|
||||||
|
|
||||||
|
## 客户端设计图
|
||||||
|
|
||||||
|
| 文件名 | 页面 | 说明 | 状态 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `client-01-workbench.png` | 客户端首页 / 我的待办 | 待处理、我提交的、待补充、即将超时 | 已生成 |
|
||||||
|
| `client-02-submit-issue.png` | 提交问题 | 标题、描述、影响范围、附件、AI 预检查 | 已生成 |
|
||||||
|
| `client-03-issue-detail-handler.png` | 处理人问题详情 | 接单、处理、请求协作、转派、AI 建议 | 已生成 |
|
||||||
|
| `client-04-submitter-tracking.png` | 提交人进度追踪 | 当前状态、处理时间线、补充信息、验收确认 | 已生成 |
|
||||||
|
| `client-05-mobile-submit.png` | 移动端提交 / 补充 | 移动表单、附件上传、AI 缺失信息提示 | 已生成 |
|
||||||
|
|
||||||
|
## 已生成参考图
|
||||||
|
|
||||||
|
上一轮生成的整体方向图位于：
|
||||||
|
|
||||||
|
- `reference-overview-board-v1.png`
|
||||||
|
- `../../ai-dispatch-images2-design-v1.png`
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,122 @@
|
|||||||
|
# images2 生成提示词清单
|
||||||
|
|
||||||
|
## 通用视觉系统
|
||||||
|
|
||||||
|
所有图片都使用以下共同设计约束：
|
||||||
|
|
||||||
|
```text
|
||||||
|
Use case: ui-mockup.
|
||||||
|
Product: “Issue Hub AI”, a Chinese enterprise SaaS AI-dispatched issue management platform.
|
||||||
|
Visual system: premium enterprise AI command center, dark graphite left sidebar, clean off-white workspace, emerald/teal primary accent, small amber/red risk states, minimal borders, subtle depth, dense but readable layout, refined spacing, crisp modern Chinese UI typography.
|
||||||
|
Quality: high-fidelity Figma-like product design screen, 16:9, no browser chrome, no marketing hero, no cartoon, no low-fidelity wireframe, no generic colorful dashboard-card mosaic.
|
||||||
|
UX principle: every screen must expose status, responsibility, AI recommendation, next action, and traceability.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 01 调度中心：中心调度台
|
||||||
|
|
||||||
|
目标文件：`dispatcher-01-center-dashboard.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “中心调度台”.
|
||||||
|
Layout: left navigation with “中心调度 / 问题池 / 部门队列 / 提醒升级 / 知识复盘 / 规则配置 / 管理看板”. Header “中心调度台”. KPI strip: “待派发 18”, “SLA 风险 9”, “处理中 76”, “AI 采纳率 78%”. Filter bar: “待派发 / 高风险 / 跨部门 / AI 高置信”. Central dispatch queue table with Chinese issue rows, AI recommendation badges, SLA chips, confidence bars, and primary action “采纳派发”. Right inspector panel “AI 推荐派发”: “研发部 / 订单组 / 陈远”, “置信度 92%”, “推荐理由”, “相似问题命中”, “人员负载适配”, buttons “退回补充” and “采纳派发”.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 02 调度中心：问题池
|
||||||
|
|
||||||
|
目标文件：`dispatcher-02-issue-pool.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “问题池”.
|
||||||
|
Layout: left navigation consistent with Issue Hub AI. Main header “问题池”. Top filters for status, priority, department, submitter, date range, and keyword search. KPI strip: “全部问题 286”, “待处理 42”, “超时 13”, “重复问题 18”. Main area: dense issue table with columns “编号 / 标题 / 来源 / 分类 / 当前部门 / 当前负责人 / 状态 / SLA / 更新时间”. Include batch selection, status chips, risk indicators, and right-side summary panel showing “AI 聚合洞察”, “重复问题趋势”, “待人工复核”. Primary actions: “批量派发”, “合并相似问题”, “导出”.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 03 调度中心：部门队列
|
||||||
|
|
||||||
|
目标文件：`dispatcher-03-department-queue.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “部门队列”.
|
||||||
|
Layout: department tabs across the top: “研发部 / 产品部 / 运维部 / 财务部 / 客服部”. Main header “部门队列”. KPI strip: “未分派 24”, “处理中 76”, “超时风险 9”, “跨部门协作 12”. Left/main area: department issue queue grouped by team. Right area: member workload panel with avatars, skill tags, active count, response time, and AI recommended assignee. Include a workload heatmap and actions “分派处理人”, “转给其他部门”, “请求中心介入”.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 04 调度中心：提醒升级
|
||||||
|
|
||||||
|
目标文件：`dispatcher-04-escalation-center.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “提醒升级”.
|
||||||
|
Layout: main header “提醒升级”. Top cards as compact KPI strip: “即将超时 9”, “已超时 4”, “待接单提醒 12”, “升级处理中 3”. Main left area: escalation queue grouped by severity with issue title, current owner, SLA remaining time, last action, escalation target. Main right area: escalation timeline and rule explanation. Include action buttons “立即催办”, “升级部门负责人”, “转中心复核”, “暂停提醒”. Use red/amber risk hierarchy carefully.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 05 调度中心：知识复盘
|
||||||
|
|
||||||
|
目标文件：`dispatcher-05-knowledge-review.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “知识复盘”.
|
||||||
|
Layout: header “知识复盘”. KPI strip: “待复盘 12”, “可沉淀知识 8”, “重复问题 18”, “知识命中率 64%”. Main area: closed issue list with AI-generated summary cards: “问题原因”, “处理步骤”, “预防建议”, “关联知识”. Right-side preview panel for “AI 复盘摘要” with editable sections and actions “生成知识条目”, “合并到已有知识”, “标记无需沉淀”. Show a small trend panel for recurring issue categories.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 06 调度中心：规则配置
|
||||||
|
|
||||||
|
目标文件：`dispatcher-06-rule-config.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “规则配置”.
|
||||||
|
Layout: header “规则配置”. Left settings navigation: “分类规则 / SLA 规则 / 派单规则 / AI 自动执行 / 提醒策略 / 权限角色”. Main area: rule builder interface with segmented controls, condition rows, dropdown-like chips, priority weights, and preview result. Include a panel titled “AI 派单策略” with modes “仅建议 / 低风险自动 / 全自动”. Include audit preview showing how a sample issue would be routed. Actions: “保存规则”, “测试规则”, “发布配置”.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 07 调度中心：管理看板
|
||||||
|
|
||||||
|
目标文件：`dispatcher-07-analytics-board.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for “管理看板”.
|
||||||
|
Layout: header “管理看板”. KPI strip: “问题总量”, “平均首次响应”, “平均解决时长”, “超时率”, “AI 采纳率”. Main area: operational analytics with line chart for issue trend, stacked status distribution, department workload ranking, repeated issue categories, and SLA risk table. Right-side insight panel “AI 运营洞察” with concise recommendations such as “订单同步类问题连续上升”, “研发部订单组负载偏高”. Keep charts clean and restrained.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 08 客户端：首页 / 我的待办
|
||||||
|
|
||||||
|
目标文件：`client-01-workbench.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for the client desktop “我的待办”.
|
||||||
|
Layout: smaller personal workspace, left navigation “我的待办 / 我提交的 / 待我补充 / 协作请求 / 已完成”. Header “我的待办”. Top summary: “待接单 3”, “处理中 5”, “待补充 2”, “即将超时 1”. Main area: prioritized task list with issue title, source, SLA, current status, and next action. Right detail preview shows selected issue, AI summary, recommended next steps, and buttons “接单处理”, “请求协作”, “转派”. Design should feel calm, focused, and less administrative than the center console.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 09 客户端：提交问题
|
||||||
|
|
||||||
|
目标文件：`client-02-submit-issue.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for the client desktop “提交问题”.
|
||||||
|
Layout: centered work form without marketing copy. Fields: “问题标题”, “详细描述”, “问题来源”, “所属系统”, “影响范围”, “期望解决时间”, “附件上传”, “联系人”. Right-side AI pre-check panel “AI 预检查” showing “可能分类”, “建议补充信息”, “相似问题”, “预计流转部门”. Footer actions “保存草稿”, “提交到中心”. Use generous form spacing, clear validation hints, and a professional desktop app feel.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 10 客户端：处理人问题详情
|
||||||
|
|
||||||
|
目标文件：`client-03-issue-detail-handler.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for handler-side “问题详情”.
|
||||||
|
Layout: left issue summary with title, priority, SLA, submitter, current owner. Center timeline with events “提交问题 / AI 分析完成 / 中心派发 / 处理人接单 / 评论 / 处理完成”. Right action panel with “AI 处理建议”, “相似历史问题”, “下一步动作”. Buttons: “接单处理”, “请求协作”, “转派”, “提交处理结果”. Include comments and attachment area. The screen should emphasize context, traceability, and efficient handling.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 11 客户端：提交人进度追踪
|
||||||
|
|
||||||
|
目标文件：`client-04-submitter-tracking.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity 16:9 UI design screen for submitter-side “我提交的问题”.
|
||||||
|
Layout: left list of submitted issues grouped by status: “处理中 / 待补充 / 待验收 / 已关闭”. Main detail area shows selected issue progress tracker with steps “已提交 / AI 分析 / 中心派发 / 处理中 / 待验收 / 已关闭”. Include current owner, expected completion time, latest reply, attachment preview, and actions “补充信息”, “催办”, “确认解决”, “要求返工”. Design should make progress transparent and reassuring.
|
||||||
|
```
|
||||||
|
|
||||||
|
## 12 客户端：移动端提交 / 补充
|
||||||
|
|
||||||
|
目标文件：`client-05-mobile-submit.png`
|
||||||
|
|
||||||
|
```text
|
||||||
|
Generate one high-fidelity mobile UI design image for “移动端提交 / 补充问题”.
|
||||||
|
Canvas may be 9:16 or a 16:9 presentation board showing two phone screens. Phone screen 1: “提交问题” form with title, description, impact scope, attachment upload, contact info, AI pre-check hint, button “提交到中心”. Phone screen 2: “补充信息” with missing information checklist, comment box, attachment upload, and button “提交补充”. Style must match the desktop system: graphite/teal, off-white surfaces, clean enterprise mobile app, readable Chinese labels.
|
||||||
|
```
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@@ -0,0 +1,261 @@
|
|||||||
|
# Issue Hub AI 一比一复刻实现蓝图
|
||||||
|
|
||||||
|
本文档承接 `docs/design/images2/` 下的高保真设计图清单，用于约束后续前端复刻和功能实现的代码结构。
|
||||||
|
|
||||||
|
初始代码现状：
|
||||||
|
|
||||||
|
- `src/App.tsx` 同时承载启动、状态、数据操作、页面、组件、工具函数，后续必须拆分。
|
||||||
|
- `src/styles.css` 为单一全局样式文件，后续需要按设计系统、布局、页面拆分。
|
||||||
|
- 现有业务能力以个人问题中枢为主，中心调度、部门队列、升级、知识复盘等功能需要扩展数据模型。
|
||||||
|
|
||||||
|
当前实现状态：
|
||||||
|
|
||||||
|
- 应用入口已拆到 `src/app/App.tsx`、`src/app/appState.ts`、`src/app/appWorkflows.ts` 和 `src/app/routes.ts`。
|
||||||
|
- 领域逻辑已进入 `src/domain/`，本地仓储、同步、设置和密钥边界进入 `src/data/`。
|
||||||
|
- 调度端和客户端页面已进入 `src/features/dispatcher/`、`src/features/client/`，页面专属组件与 CSS 按业务面拆分。
|
||||||
|
- 共享样式已收口到 `src/shared/styles/`，原未引用的 `src/styles.css` 已删除，避免保留单一大样式文件误导后续维护。
|
||||||
|
|
||||||
|
## 1. 复刻目标
|
||||||
|
|
||||||
|
先完成设计图定稿，再按设计图一比一复刻以下页面：
|
||||||
|
|
||||||
|
### 调度中心
|
||||||
|
|
||||||
|
- 中心调度台。
|
||||||
|
- 问题池。
|
||||||
|
- 部门队列。
|
||||||
|
- 提醒升级。
|
||||||
|
- 知识复盘。
|
||||||
|
- 规则配置。
|
||||||
|
- 管理看板。
|
||||||
|
|
||||||
|
### 客户端
|
||||||
|
|
||||||
|
- 客户端首页 / 我的待办。
|
||||||
|
- 提交问题。
|
||||||
|
- 处理人问题详情。
|
||||||
|
- 提交人进度追踪。
|
||||||
|
- 移动端提交 / 补充。
|
||||||
|
|
||||||
|
## 2. 建议目录结构
|
||||||
|
|
||||||
|
```text
|
||||||
|
src/
|
||||||
|
app/
|
||||||
|
App.tsx
|
||||||
|
AppShell.tsx
|
||||||
|
routes.ts
|
||||||
|
useAppBootstrap.ts
|
||||||
|
domain/
|
||||||
|
issues/
|
||||||
|
issueTypes.ts
|
||||||
|
issueStatus.ts
|
||||||
|
issueSelectors.ts
|
||||||
|
issueActions.ts
|
||||||
|
dispatch/
|
||||||
|
dispatchTypes.ts
|
||||||
|
dispatchRules.ts
|
||||||
|
dispatchSelectors.ts
|
||||||
|
departments/
|
||||||
|
departmentTypes.ts
|
||||||
|
workload.ts
|
||||||
|
ai/
|
||||||
|
aiTypes.ts
|
||||||
|
aiTriage.ts
|
||||||
|
aiRecommendations.ts
|
||||||
|
notifications/
|
||||||
|
escalationTypes.ts
|
||||||
|
escalationRules.ts
|
||||||
|
data/
|
||||||
|
repository.ts
|
||||||
|
seedData.ts
|
||||||
|
sync/
|
||||||
|
syncClient.ts
|
||||||
|
syncTypes.ts
|
||||||
|
features/
|
||||||
|
dispatcher/
|
||||||
|
CenterDashboardPage.tsx
|
||||||
|
IssuePoolPage.tsx
|
||||||
|
DepartmentQueuePage.tsx
|
||||||
|
EscalationCenterPage.tsx
|
||||||
|
KnowledgeReviewPage.tsx
|
||||||
|
RuleConfigPage.tsx
|
||||||
|
AnalyticsBoardPage.tsx
|
||||||
|
components/
|
||||||
|
DepartmentWorkloadPanel.tsx
|
||||||
|
center/
|
||||||
|
DispatchQueueTable.tsx
|
||||||
|
AiDispatchInspector.tsx
|
||||||
|
centerDashboard.css
|
||||||
|
escalation/
|
||||||
|
escalationCenter.css
|
||||||
|
knowledge/
|
||||||
|
KnowledgeMetricsStrip.tsx
|
||||||
|
KnowledgeReviewTable.tsx
|
||||||
|
KnowledgeSummaryPanel.tsx
|
||||||
|
knowledgeReview.css
|
||||||
|
rules/
|
||||||
|
RuleBuilder.tsx
|
||||||
|
RuleTypeNav.tsx
|
||||||
|
AiStrategyPanel.tsx
|
||||||
|
RuleAuditPreview.tsx
|
||||||
|
ruleConfig.css
|
||||||
|
analytics/
|
||||||
|
AnalyticsMetricCard.tsx
|
||||||
|
AnalyticsTrendChart.tsx
|
||||||
|
StatusDistributionDonut.tsx
|
||||||
|
RankingPanel.tsx
|
||||||
|
EfficiencyPanel.tsx
|
||||||
|
SlaRiskTable.tsx
|
||||||
|
AnalyticsSidePanel.tsx
|
||||||
|
analyticsBoard.css
|
||||||
|
client/
|
||||||
|
ClientWorkbenchPage.tsx
|
||||||
|
SubmitIssuePage.tsx
|
||||||
|
HandlerIssueDetailPage.tsx
|
||||||
|
SubmitterTrackingPage.tsx
|
||||||
|
MobileSubmitPreview.tsx
|
||||||
|
components/
|
||||||
|
workbench/
|
||||||
|
submit/
|
||||||
|
SubmitIssueForm.tsx
|
||||||
|
SubmitAiPrecheckPanel.tsx
|
||||||
|
SubmitRichTextEditor.tsx
|
||||||
|
ImpactScopePicker.tsx
|
||||||
|
SeverityPicker.tsx
|
||||||
|
AttachmentDropzone.tsx
|
||||||
|
submitIssue.css
|
||||||
|
handler/
|
||||||
|
tracking/
|
||||||
|
mobile/
|
||||||
|
settings/
|
||||||
|
SettingsPage.tsx
|
||||||
|
shared/
|
||||||
|
components/
|
||||||
|
Button.tsx
|
||||||
|
IconButton.tsx
|
||||||
|
Badge.tsx
|
||||||
|
MetricTile.tsx
|
||||||
|
DataTable.tsx
|
||||||
|
Timeline.tsx
|
||||||
|
SegmentedControl.tsx
|
||||||
|
EmptyState.tsx
|
||||||
|
layout/
|
||||||
|
Sidebar.tsx
|
||||||
|
TopBar.tsx
|
||||||
|
SplitPane.tsx
|
||||||
|
InspectorPanel.tsx
|
||||||
|
hooks/
|
||||||
|
useDisclosure.ts
|
||||||
|
usePersistedState.ts
|
||||||
|
styles/
|
||||||
|
tokens.css
|
||||||
|
base.css
|
||||||
|
layout.css
|
||||||
|
components.css
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. 状态与数据分层
|
||||||
|
|
||||||
|
### 3.1 领域数据
|
||||||
|
|
||||||
|
需要从现有 `Issue` 扩展为中心调度模型：
|
||||||
|
|
||||||
|
- `Issue`：问题主数据。
|
||||||
|
- `IssueTimelineEvent`：状态、派单、评论、提醒、验收时间线。
|
||||||
|
- `Assignment`：派单和转派记录。
|
||||||
|
- `Department`：部门与负责人。
|
||||||
|
- `User`：用户、角色、技能标签、部门归属。
|
||||||
|
- `AiTriageResult`：AI 摘要、分类、优先级、派单建议、置信度。
|
||||||
|
- `EscalationEvent`：提醒、催办、升级记录。
|
||||||
|
- `KnowledgeItem`：沉淀后的知识条目。
|
||||||
|
- `DispatchRule`：分类、SLA、派单、自动执行规则。
|
||||||
|
|
||||||
|
### 3.2 UI 状态
|
||||||
|
|
||||||
|
页面级 UI 状态放在页面组件内：
|
||||||
|
|
||||||
|
- 当前选中问题。
|
||||||
|
- 当前筛选条件。
|
||||||
|
- 当前 tab。
|
||||||
|
- 弹窗或抽屉开关。
|
||||||
|
- 临时表单草稿。
|
||||||
|
|
||||||
|
跨页面状态通过轻量应用状态提供：
|
||||||
|
|
||||||
|
- 当前角色视角：中心调度员、部门负责人、处理人、提交人。
|
||||||
|
- 当前登录用户。
|
||||||
|
- 通知数量。
|
||||||
|
- 同步状态。
|
||||||
|
|
||||||
|
## 4. 页面功能矩阵
|
||||||
|
|
||||||
|
| 页面 | 必备功能 | 主要组件 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 中心调度台 | 查看待派发、采纳 AI、退回补充、批量派发 | `DispatchQueueTable`, `AiDispatchInspector`, `MetricTile` |
|
||||||
|
| 问题池 | 全局筛选、批量处理、合并相似问题 | `DataTable`, `IssueFilterBar`, `AiInsightPanel` |
|
||||||
|
| 部门队列 | 查看部门负载、分派处理人、跨部门转派 | `DepartmentWorkloadPanel`, `DispatchQueueTable` |
|
||||||
|
| 提醒升级 | 查看超时、催办、升级负责人 | `Timeline`, `MetricTile`, `escalationCenter.css` |
|
||||||
|
| 知识复盘 | 查看已关闭问题、生成知识条目 | `KnowledgeReviewTable`, `KnowledgeSummaryPanel`, `KnowledgeMetricsStrip` |
|
||||||
|
| 规则配置 | 配置 SLA、派单、提醒、AI 自动执行 | `RuleBuilder`, `RuleTypeNav`, `AiStrategyPanel`, `RuleAuditPreview` |
|
||||||
|
| 管理看板 | 查看指标、趋势、部门效率 | `AnalyticsMetricCard`, `AnalyticsTrendChart`, `StatusDistributionDonut`, `AnalyticsSidePanel` |
|
||||||
|
| 客户端首页 | 我的待办、待补充、协作请求 | `WorkbenchMetrics`, `WorkbenchIssueTable`, `WorkbenchDetailPanel` |
|
||||||
|
| 提交问题 | 表单提交、AI 预检查、附件上传 | `SubmitIssueForm`, `SubmitAiPrecheckPanel` |
|
||||||
|
| 处理人详情 | 接单、协作、转派、完成处理 | `HandlerIssueSummaryAside`, `HandlerTimelineWorkspace`, `HandlerActionAside` |
|
||||||
|
| 提交人追踪 | 查看进度、补充、催办、验收 | `SubmittedIssueList`, `SubmitterProgressMain`, `SubmitterIssueAside` |
|
||||||
|
| 移动端提交 | 移动表单、补充信息、附件 | `MobileSubmitPhone`, `MobileSupplementPhone`, `MobileFeatureRail` |
|
||||||
|
|
||||||
|
## 5. 交互状态要求
|
||||||
|
|
||||||
|
每个核心操作至少要有以下状态：
|
||||||
|
|
||||||
|
- 默认。
|
||||||
|
- hover。
|
||||||
|
- focus。
|
||||||
|
- disabled。
|
||||||
|
- loading。
|
||||||
|
- 成功反馈。
|
||||||
|
- 失败反馈。
|
||||||
|
|
||||||
|
关键业务操作必须写入时间线：
|
||||||
|
|
||||||
|
- AI 分析完成。
|
||||||
|
- 中心派发。
|
||||||
|
- 部门分派。
|
||||||
|
- 接单。
|
||||||
|
- 转派。
|
||||||
|
- 请求协作。
|
||||||
|
- 催办。
|
||||||
|
- 升级。
|
||||||
|
- 完成处理。
|
||||||
|
- 验收通过或返工。
|
||||||
|
|
||||||
|
## 6. 样式拆分原则
|
||||||
|
|
||||||
|
- `tokens.css`：颜色、间距、圆角、阴影、字体尺度。
|
||||||
|
- `base.css`：全局 reset、正文、滚动条、输入基础样式。
|
||||||
|
- `layout.css`：应用外壳、侧边栏、主工作区、右侧检查器。
|
||||||
|
- `components.css`：按钮、徽标、表格、时间线、指标块等通用组件。
|
||||||
|
- 页面特殊样式只放在对应 feature 的局部 CSS 或模块文件中。
|
||||||
|
|
||||||
|
## 7. MVP 功能落地顺序
|
||||||
|
|
||||||
|
1. 先搭建新的 `AppShell`、路由、设计 token 和共享组件。
|
||||||
|
2. 复刻中心调度台，打通问题选择、AI 推荐、采纳派发、退回补充。
|
||||||
|
3. 复刻客户端首页和处理人详情，打通接单、转派、请求协作、完成处理。
|
||||||
|
4. 复刻提交问题和提交人追踪，打通提交、补充、验收。
|
||||||
|
5. 复刻部门队列和提醒升级，打通部门分派和 SLA 升级。
|
||||||
|
6. 复刻知识复盘、规则配置和管理看板。
|
||||||
|
7. 把 mock 数据替换为仓储层可持久化数据。
|
||||||
|
8. 增加 focused tests：状态流转、派单规则、SLA 提醒、AI 建议采纳。
|
||||||
|
|
||||||
|
## 8. 验证目标
|
||||||
|
|
||||||
|
每个阶段至少运行：
|
||||||
|
|
||||||
|
```pwsh
|
||||||
|
npm test
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
界面复刻阶段需要额外保存截图，用于和 images2 设计图进行人工对比。
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
@@ -0,0 +1,122 @@
|
|||||||
|
# 实现截图索引
|
||||||
|
|
||||||
|
本目录保存当前前端实现的逐页截图，用于和 `../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。
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 433 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
@@ -0,0 +1,121 @@
|
|||||||
|
# Issue Hub AI 人工设计定稿审计清单
|
||||||
|
|
||||||
|
生成时间：2026-06-18
|
||||||
|
|
||||||
|
## 1. 当前状态
|
||||||
|
|
||||||
|
来源：`docs/design/visual-diff/report.md`，最新报告时间 `2026-06-18T04:47:26.995Z`。
|
||||||
|
|
||||||
|
- 对比页面：12 张。
|
||||||
|
- 可进入人工复核 / 建议直接通过：4 张。
|
||||||
|
- 通过但备注 / 定稿候选：8 张。
|
||||||
|
- 需人工决策 / 带备注复核：0 张。
|
||||||
|
- 自动 visual diff 仍标记 5 张需打磨；人工定稿流程已将其中中心调度台、提醒升级、知识复盘、管理看板、处理人详情推进为定稿候选。
|
||||||
|
- 当前阶段从“自动视觉 diff 微调”转入“人工设计定稿审计”。自动 diff 只作为定位证据，不再作为继续盲追的唯一目标。
|
||||||
|
|
||||||
|
明确原则：
|
||||||
|
|
||||||
|
- 不再无目标盲追 visual diff。
|
||||||
|
- 后续改动必须基于人工审美目标、明确设计图差异，或已确认的业务可读性问题。
|
||||||
|
- 若继续改动 5 个自动 diff 诊断页，必须先给出明确设计目标、验收标准和不触碰范围。
|
||||||
|
- 文案、动态数据、图标细节、头像、业务样例与 AI 生成稿存在天然差异，不能仅凭像素差异判定必须修改。
|
||||||
|
|
||||||
|
## 2. 12 页面总览
|
||||||
|
|
||||||
|
| 页面 | 路由或截图名 | 设计图 | 实现截图 | diff 图 | 状态 | avg / max 或关键分数 | 人工结论 |
|
||||||
|
| --- | --- | --- | --- | --- | --- | --- | --- |
|
||||||
|
| 中心调度台 | `/#/center-dashboard` / `dispatcher-01-center-dashboard.png` | `docs/design/images2/dispatcher-01-center-dashboard.png` | `docs/design/implementation-screenshots/dispatcher-01-center-dashboard.png` | `docs/design/visual-diff/dispatcher-01-center-dashboard-diff.png` | 通过但备注 / 定稿候选 | avg 19.94 / max 255.00 / RMS 47.78 / 变更像素 17.7% | 建议采用当前核心骨架、真实分页、每页条数、行级派发面板和右侧 AI 推荐检查器定稿；动态业务样例与侧栏底部状态策略作为功能化偏差备注。 |
|
||||||
|
| 问题池 | `/#/issue-pool` / `dispatcher-02-issue-pool.png` | `docs/design/images2/dispatcher-02-issue-pool.png` | `docs/design/implementation-screenshots/dispatcher-02-issue-pool.png` | `docs/design/visual-diff/dispatcher-02-issue-pool-diff.png` | 通过但备注 / 定稿候选 | avg 17.18 / max 255.00 / RMS 43.47 / 变更像素 14.1% | 建议接受右侧 AI 洞察简化为文本洞察区，保留真实分页、提交人筛选、CSV 导出、批量派发和批量治理闭环。 |
|
||||||
|
| 部门队列 | `/#/department-queue` / `dispatcher-03-department-queue.png` | `docs/design/images2/dispatcher-03-department-queue.png` | `docs/design/implementation-screenshots/dispatcher-03-department-queue.png` | `docs/design/visual-diff/dispatcher-03-department-queue-diff.png` | 建议通过 | avg 17.42 / max 255.00 / RMS 41.57 / 变更像素 13.9% | 首屏结构、队列表格、成员负载、热力图和 AI 建议均可进入定稿。 |
|
||||||
|
| 提醒升级 | `/#/escalation-center` / `dispatcher-04-escalation-center.png` | `docs/design/images2/dispatcher-04-escalation-center.png` | `docs/design/implementation-screenshots/dispatcher-04-escalation-center.png` | `docs/design/visual-diff/dispatcher-04-escalation-center-diff.png` | 通过但备注 / 定稿候选 | avg 18.62 / max 255.00 / RMS 45.94 / 变更像素 15.7% | 已按返修目标恢复风险分组表格密度，并补齐右侧升级链路、提醒规则、最近动作和备注区；动态风险候选数量和 SLA 文案差异作为功能化偏差备注。 |
|
||||||
|
| 知识复盘 | `/#/knowledge-review` / `dispatcher-05-knowledge-review.png` | `docs/design/images2/dispatcher-05-knowledge-review.png` | `docs/design/implementation-screenshots/dispatcher-05-knowledge-review.png` | `docs/design/visual-diff/dispatcher-05-knowledge-review-diff.png` | 通过但备注 / 定稿候选 | avg 18.92 / max 255.00 / RMS 44.57 / 变更像素 14.9% | 建议采用当前可编辑 AI 复盘工作区定稿；保留真实分页、每页条数、摘要编辑保存和三类知识动作，差异作为功能化偏差备注。 |
|
||||||
|
| 规则配置 | `/#/rule-config` / `dispatcher-06-rule-config.png` | `docs/design/images2/dispatcher-06-rule-config.png` | `docs/design/implementation-screenshots/dispatcher-06-rule-config.png` | `docs/design/visual-diff/dispatcher-06-rule-config-diff.png` | 建议通过 | avg 17.81 / max 255.00 / RMS 42.33 / 变更像素 15.5% | 三栏规则工作台、AI 策略、规则预览和底部发布栏成立。 |
|
||||||
|
| 管理看板 | `/#/analytics-board` / `dispatcher-07-analytics-board.png` | `docs/design/images2/dispatcher-07-analytics-board.png` | `docs/design/implementation-screenshots/dispatcher-07-analytics-board.png` | `docs/design/visual-diff/dispatcher-07-analytics-board-diff.png` | 通过但备注 / 定稿候选 | avg 19.95 / max 255.00 / RMS 44.41 / 变更像素 19.2% | 建议采用当前首屏设计量级展示、真实导出 / 下钻 / 刷新记录、自定义布局入口、中部榜单和右侧 AI 洞察定稿；图表数据与业务文本差异作为功能化偏差备注。 |
|
||||||
|
| 我的待办 | `/#/client-workbench` / `client-01-workbench.png` | `docs/design/images2/client-01-workbench.png` | `docs/design/implementation-screenshots/client-01-workbench.png` | `docs/design/visual-diff/client-01-workbench-diff.png` | 通过但备注 / 定稿候选 | avg 17.72 / max 255.00 / RMS 44.08 / 变更像素 14.7% | 建议接受当前详情与操作区优先于右侧相似问题区的首屏取舍，保留任务处理主路径和操作优先级。 |
|
||||||
|
| 提交问题 | `/#/submit-issue` / `client-02-submit-issue.png` | `docs/design/images2/client-02-submit-issue.png` | `docs/design/implementation-screenshots/client-02-submit-issue.png` | `docs/design/visual-diff/client-02-submit-issue-diff.png` | 建议通过 | avg 14.16 / max 254.34 / RMS 37.39 / 变更像素 11.3% | 表单节奏、右侧 AI 预检查、相似问题、预计流转和底部动作都接近定稿状态。 |
|
||||||
|
| 处理人详情 | `/#/handler-detail` / `client-03-issue-detail-handler.png` | `docs/design/images2/client-03-issue-detail-handler.png` | `docs/design/implementation-screenshots/client-03-issue-detail-handler.png` | `docs/design/visual-diff/client-03-issue-detail-handler-diff.png` | 通过但备注 / 定稿候选 | avg 18.22 / max 255.00 / RMS 43.82 / 变更像素 16.2% | 建议采用当前三栏骨架、顶栏动作、时间线、评论工具和单一右栏分组结构定稿；业务样例、头像和静态文案差异作为功能化偏差备注。 |
|
||||||
|
| 提交人追踪 | `/#/submitter-tracking` / `client-04-submitter-tracking.png` | `docs/design/images2/client-04-submitter-tracking.png` | `docs/design/implementation-screenshots/client-04-submitter-tracking.png` | `docs/design/visual-diff/client-04-submitter-tracking-diff.png` | 通过但备注 / 定稿候选 | avg 17.91 / max 255.00 / RMS 43.59 / 变更像素 14.3% | 三栏追踪结构可定稿；默认选中样例、数量、头像和附件数据差异作为真实演示数据偏差备注。 |
|
||||||
|
| 移动端提交 / 补充 | `/#/mobile-submit` / `client-05-mobile-submit.png` | `docs/design/images2/client-05-mobile-submit.png` | `docs/design/implementation-screenshots/client-05-mobile-submit.png` | `docs/design/visual-diff/client-05-mobile-submit-diff.png` | 建议通过 | avg 17.87 / max 254.34 / RMS 44.91 / 变更像素 12.9% | 双手机预览、表单、补充流程和移动端状态稳定，可进入定稿。 |
|
||||||
|
|
||||||
|
## 3. 自动 diff 诊断页定稿备注
|
||||||
|
|
||||||
|
### 3.1 Center dashboard
|
||||||
|
|
||||||
|
- 当前指标：avg 19.94，RMS 47.77，变更像素 17.7%，max 255.00。
|
||||||
|
- hotspots：bottom-right 60.21 / 44.1%，bottom-right 57.90 / 40.3%，bottom-left 41.63 / 25.2%。
|
||||||
|
- 已保留的正向调整：检查器底部双按钮比例微调为 `0.78fr / 1.12fr`；中心调度台路由级隐藏侧栏底部快捷区；中心调度台真实分页和每页条数切换已通过 smoke 覆盖。
|
||||||
|
- no-go / 反向方向：KPI 高度压缩、表格 / AI 面板文案映射、工具条补刷新图标、自定义复选框、KPI 图标饱和化、人员负载卡继续低于 6px、人员负载圆环放大、KPI / 表格整体压缩、右侧相似问题卡密度压缩。
|
||||||
|
- 建议定稿结论：通过但备注。中心调度台当前左侧导航、顶部搜索、四个 KPI、分段筛选、中心表格、右侧 AI 推荐检查器和底部双动作骨架成立；真实分页、每页条数、行级派发面板、批量操作和右侧动态推荐数据作为产品化闭环定稿。
|
||||||
|
- 人审重点：仅复核当前右侧 AI 推荐检查器底部负载卡与动作区、隐藏侧栏底部快捷区和中心表格密度是否满足调度扫描效率；不再以静态样例、头像或固定 footer 作为返修依据。
|
||||||
|
- 可接受偏差：动态业务文案、AI 推荐样例、表格行数据、右侧相似问题条目、图标细节可与设计稿不完全一致，只要信息层级和操作路径稳定。
|
||||||
|
- 额外可接受偏差：中心表格保留真实分页、每页条数切换、选中计数和动态 footer；行级“更多派发操作”面板保留采纳、改派、AI 依据、退回补充入口；侧栏底部保留当前系统状态、更新时间、同步入口和用户区策略。
|
||||||
|
- 如需继续改动：必须先明确是要贴近设计稿的底部检查器结构、侧栏完整性，还是调度可读性；不得再以单次 avg 变化作为唯一改动依据。
|
||||||
|
|
||||||
|
### 3.2 Analytics board
|
||||||
|
|
||||||
|
- 当前指标：avg 19.95，RMS 44.41，变更像素 19.2%，max 255.00。
|
||||||
|
- hotspots：middle-left 46.00 / 47.9%，top-left 43.41 / 87.6%，bottom-left 43.33 / 27.5%。
|
||||||
|
- 已保留的正向调整：首屏 KPI / 趋势 / 状态分布 / Top5 / SLA 风险 / 本周对比接入领域层设计量级展示选择器；中部榜单、效率摘要和右侧 AI 洞察列做温和密度收敛；自定义看板组件显示 / 隐藏与本地持久化、CSV 导出和真实下钻继续保留。
|
||||||
|
- no-go / 反向方向：右侧 AI 洞察正文强制两行裁剪、右侧洞察卡过度压缩、RankingPanel full-width 轨道渐变、首张 KPI 图标替换、效率趋势图高度压缩、顶部趋势 / 状态分布两列比例改动、中部榜单过度压缩、右上工具组继续上移、tooltip 标题 / 位置改动、进度条风险色重映射。
|
||||||
|
- 建议定稿结论：通过但备注。管理看板当前五个 KPI、趋势图、状态分布、AI 洞察、Top5 榜单、效率趋势、SLA 风险、本周对比、导出、下钻、刷新记录和自定义组件显隐均形成稳定功能闭环。
|
||||||
|
- 人审重点：仅复核顶部趋势与状态分布比例、中部排行区密度和右侧 AI 洞察可读性是否满足运营看板阅读；不再以静态图表数据点、榜单排序或洞察文案作为返修依据。
|
||||||
|
- 可接受偏差：图表数据、tooltip 展示点、榜单排序、AI 洞察文本、导出相关状态可以与静态设计稿不同。
|
||||||
|
- 额外可接受偏差：首屏 KPI / 趋势 / 状态分布 / Top5 / SLA 风险 / 本周对比使用设计量级展示选择器，真实业务数据继续用于导出、下钻和刷新记录；右上“导出报表”“自定义看板”入口保留当前产品化位置；右侧 AI 洞察保留完整正文，不强制两行裁剪。
|
||||||
|
- 如需继续改动：必须先明确是优化图表复刻、提升运营密度，还是强化业务功能入口；不要继续试探 padding / 行高 / icon 这类已多次无收益方向。
|
||||||
|
|
||||||
|
### 3.3 Knowledge review
|
||||||
|
|
||||||
|
- 当前指标：avg 18.92，RMS 44.57，变更像素 14.9%，max 255.00。
|
||||||
|
- hotspots：bottom-center 44.90 / 28.0%，top-right 43.13 / 28.1%，middle-center 42.71 / 26.0%。
|
||||||
|
- 已保留的正向调整：右侧 AI 摘要补齐编辑图标和内联保存；真实草稿保存与时间线；知识复盘路由背景覆盖为 `#f8fafb`；复盘设置保存、持久化和重新打开恢复已通过 smoke 覆盖；footer 使用设计总量口径展示，同时保留真实分页状态。
|
||||||
|
- no-go / 反向方向：右侧摘要主卡高度压缩、顶部指标 / 趋势卡压缩、副标题精确文案替换、筛选栏补图标、右侧摘要栏继续扩到 650px、摘要底部按钮继续压缩、表格行高回压、复盘设置按钮收紧、摘要 padding / 分栏调整、底部动作按钮比例改动、处理人列头像锚点、摘要动作区 gap 继续收紧。
|
||||||
|
- 建议定稿结论：通过但备注。右侧 AI 摘要按“可编辑、可保存、可生成知识草稿”的产品化工作区定稿；底部三按钮保持当前功能优先级；中部表格保留真实分页和设计总量 footer。
|
||||||
|
- 人审重点：仅复核当前可编辑工作区是否满足业务可读性，不再以静态设计稿中的摘要高度、按钮 gap、筛选图标或头像锚点作为返修依据。
|
||||||
|
- 可接受偏差：复盘对象、AI 摘要文案、处理人数据、草稿状态和时间线可与设计稿样例不同。
|
||||||
|
- 如需继续改动：必须提出新的人工审美目标或明确业务可读性问题；不得再继续用 1px gap / padding、摘要栏宽度、行高、按钮间距、筛选图标或头像锚点试探。
|
||||||
|
|
||||||
|
### 3.4 Client handler detail
|
||||||
|
|
||||||
|
- 当前指标：avg 18.22，RMS 43.82，变更像素 16.2%，max 255.00。
|
||||||
|
- hotspots：top-right 48.63 / 45.9%，top-left 48.63 / 34.7%，top-left 45.36 / 38.6%。
|
||||||
|
- 已保留的正向调整：时间线圆点保持 19px 的可读性边界；处理人详情当前右栏仍保持单一大面板内分隔结构；右侧主按钮保持渐变样式；评论工具栏保持当前视觉入口，功能层升级为附件 / 图片 / 链接真实写入，不额外扩张工具栏尺寸。
|
||||||
|
- no-go / 反向方向：顶栏头像增加发型层次、路由级文案映射、时间线竖线左移、时间线圆点继续压缩、顶栏处理按钮加宽、顶栏通知 / 帮助 / 用户区 gap 收紧、顶栏动作按钮加宽、左栏 260px / 右栏 390px 三栏比例微调、右侧主按钮改纯色、右栏 AI 建议 / 相似问题 / 下一步动作改独立白色卡片、客户端侧栏业务标签整体映射。
|
||||||
|
- 建议定稿结论：通过但备注。三栏骨架、顶栏动作、时间线、评论工具、右侧 AI 建议和下一步动作均按当前实现定稿；评论附件 / 图片 / 链接能力以 smoke 和交互证据证明，不再扩大工具栏或增加说明文字。
|
||||||
|
- 人审重点：仅复核当前处理工作区是否满足处理人可读性与操作效率，不再以静态设计稿中的头像细节、业务样例、顶栏间距或右栏卡片拆分作为返修依据。
|
||||||
|
- 可接受偏差：问题标题、描述、提交人、时间、SLA、AI 建议、相似历史问题、顶栏用户头像和通知数字可与设计稿样例不同，按真实演示数据定稿。
|
||||||
|
- 如需继续改动：必须提出新的人工审美目标或业务可读性问题；不得继续尝试已证伪的独立右栏卡片、三栏比例、时间线圆点、头像细节、按钮色彩和客户端侧栏标签映射方向。
|
||||||
|
|
||||||
|
## 4. 建议直接通过页面复核清单
|
||||||
|
|
||||||
|
适用页面：部门队列、规则配置、提交问题、移动端提交 / 补充。
|
||||||
|
|
||||||
|
- 布局：主导航、顶栏、主内容、右侧检查器 / 操作区与设计稿的空间关系是否基本一致。
|
||||||
|
- 信息层级：页面标题、KPI、筛选、列表 / 表格、主操作、次操作是否符合业务优先级。
|
||||||
|
- 可读性：表格密度、卡片间距、徽标颜色、风险状态、长文本换行没有明显遮挡或溢出。
|
||||||
|
- 交互状态：筛选、分页、详情展开、主操作、反馈 toast、移动端窄屏状态符合已实现功能预期。
|
||||||
|
- 设计偏差：只记录影响审美、识读或业务判断的差异；动态数据、AI 文案、图标细节和头像样例不作为单独阻塞项。
|
||||||
|
- 定稿判断：当前建议为“通过”；如人工复核发现新的审美或业务可读性问题，再降级为“通过但备注”或“需带目标返修”。
|
||||||
|
- 返修要求：若判定返修，必须写明目标区域、期望观感、设计图依据、不能破坏的现有功能和复验命令。
|
||||||
|
|
||||||
|
## 5. 最终定稿 gate
|
||||||
|
|
||||||
|
最终定稿前的验证命令：
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
npm run capture:pages
|
||||||
|
npm run visual:diff
|
||||||
|
npm run build
|
||||||
|
npm test
|
||||||
|
npm run smoke:browser
|
||||||
|
```
|
||||||
|
|
||||||
|
最近基线说明：
|
||||||
|
|
||||||
|
- `npx tsc --noEmit`：最近记录已通过。
|
||||||
|
- `npm test`：最近记录已通过，29 个测试文件、104 个测试。
|
||||||
|
- `npm run build`：最近记录已通过，保留既有 500 kB chunk 体积提示。
|
||||||
|
- `npm run capture:pages`：最近记录已通过，并刷新 12 张桌面实现截图及移动截图。
|
||||||
|
- `npm run visual:diff`：最近记录已通过，最新报告时间 `2026-06-18T04:47:26.995Z`，自动诊断为 7 / 5；人工流程为 4 页建议通过、8 页定稿候选、0 页需决策。
|
||||||
|
- `npm run smoke:browser`：最近记录已通过；后续只要涉及交互、状态流转、路由、持久化、导出或移动端行为变更，必须补跑。
|
||||||
|
|
||||||
|
本次定稿状态校准后已重新运行 `review-index.html` 状态计数校验、`npx tsc --noEmit`、`npm test`、`npm run build`、`npm run smoke:browser`；本轮未改主应用截图，未刷新 capture / visual diff。
|
||||||
@@ -0,0 +1,945 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Issue Hub AI 设计定稿审阅入口</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
--bg: #f4f6f8;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-soft: #f8fafc;
|
||||||
|
--line: #dce3ea;
|
||||||
|
--line-strong: #c9d4df;
|
||||||
|
--text: #17202a;
|
||||||
|
--muted: #657282;
|
||||||
|
--muted-2: #8a96a3;
|
||||||
|
--accent: #1769e0;
|
||||||
|
--accent-soft: #e8f1ff;
|
||||||
|
--ok: #147d55;
|
||||||
|
--ok-soft: #e7f7ef;
|
||||||
|
--warn: #ad5b00;
|
||||||
|
--warn-soft: #fff3df;
|
||||||
|
--danger: #b42318;
|
||||||
|
--shadow: 0 12px 32px rgba(21, 32, 43, 0.08);
|
||||||
|
font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
width: min(1760px, calc(100% - 40px));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px 0 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
margin: -24px calc((40px - 100vw) / 2) 18px;
|
||||||
|
padding: 16px max(20px, calc((100vw - 1760px) / 2 + 20px));
|
||||||
|
background: rgba(244, 246, 248, 0.94);
|
||||||
|
border-bottom: 1px solid rgba(201, 212, 223, 0.75);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-inner {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(280px, 1fr) auto;
|
||||||
|
gap: 18px;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1760px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(108px, 1fr));
|
||||||
|
gap: 8px;
|
||||||
|
min-width: min(640px, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric {
|
||||||
|
padding: 10px 12px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 18px rgba(21, 32, 43, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric span {
|
||||||
|
display: block;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric strong {
|
||||||
|
display: block;
|
||||||
|
margin-top: 2px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
min-height: 34px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--surface-soft);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover,
|
||||||
|
.filter-btn.active {
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-soft);
|
||||||
|
border-color: #9ec5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-note {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-actions button {
|
||||||
|
min-height: 34px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
color: #243244;
|
||||||
|
background: var(--surface-soft);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-actions button:hover,
|
||||||
|
.toolbar-actions button:focus-visible {
|
||||||
|
color: var(--accent);
|
||||||
|
border-color: #9ec5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card {
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-card.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(220px, 1fr) auto;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: start;
|
||||||
|
padding: 14px 16px 12px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.25;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route {
|
||||||
|
margin-top: 6px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 1px 5px;
|
||||||
|
background: #eef2f6;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #334155;
|
||||||
|
font-family: Consolas, "SFMono-Regular", monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 24px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.review {
|
||||||
|
color: var(--ok);
|
||||||
|
background: var(--ok-soft);
|
||||||
|
border: 1px solid #b7e5cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.decision {
|
||||||
|
color: var(--warn);
|
||||||
|
background: var(--warn-soft);
|
||||||
|
border: 1px solid #ffd9a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.candidate {
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-soft);
|
||||||
|
border: 1px solid #9ec5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(72px, auto));
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
min-width: 84px;
|
||||||
|
padding: 7px 9px;
|
||||||
|
background: var(--surface-soft);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score span {
|
||||||
|
display: block;
|
||||||
|
color: var(--muted-2);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score strong {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 1px;
|
||||||
|
background: var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot {
|
||||||
|
min-width: 0;
|
||||||
|
background: var(--surface-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot-label a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot-frame {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 224px;
|
||||||
|
padding: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
|
||||||
|
linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
|
||||||
|
linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
|
||||||
|
linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
|
||||||
|
background-color: #ffffff;
|
||||||
|
background-size: 18px 18px;
|
||||||
|
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 430px;
|
||||||
|
object-fit: contain;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(201, 212, 223, 0.72);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-foot {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(260px, 1.15fr) minmax(260px, 0.85fr);
|
||||||
|
gap: 14px;
|
||||||
|
padding: 12px 16px 14px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus-title,
|
||||||
|
.decision-title {
|
||||||
|
margin: 0 0 7px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus-text {
|
||||||
|
margin: 0;
|
||||||
|
color: #344054;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-issue {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
color: var(--danger);
|
||||||
|
background: #fff1f0;
|
||||||
|
border: 1px solid #ffd0cc;
|
||||||
|
border-radius: 7px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-box {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choice {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 7px;
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 7px 9px;
|
||||||
|
color: #344054;
|
||||||
|
background: var(--surface-soft);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choice input {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin: 0;
|
||||||
|
accent-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-note {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 74px;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 9px 10px;
|
||||||
|
color: #344054;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 7px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-status {
|
||||||
|
margin-top: 7px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: none;
|
||||||
|
padding: 32px;
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: center;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px dashed var(--line-strong);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.topbar-inner,
|
||||||
|
.card-head,
|
||||||
|
.card-foot {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.shell {
|
||||||
|
width: min(100% - 24px, 1760px);
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
margin-left: calc((24px - 100vw) / 2);
|
||||||
|
margin-right: calc((24px - 100vw) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary,
|
||||||
|
.score-grid,
|
||||||
|
.decision-box {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot img {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.summary,
|
||||||
|
.score-grid,
|
||||||
|
.decision-box {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters,
|
||||||
|
.filter-btn,
|
||||||
|
.toolbar-actions,
|
||||||
|
.toolbar-actions button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="topbar-inner">
|
||||||
|
<div>
|
||||||
|
<h1>Issue Hub AI 设计定稿审阅入口</h1>
|
||||||
|
<p class="subtitle">用于人工定稿：并排核对设计图、当前实现截图和视觉 diff，记录页面级结论。</p>
|
||||||
|
</div>
|
||||||
|
<section class="summary" aria-label="状态摘要">
|
||||||
|
<div class="metric"><span>报告时间</span><strong>2026-06-18T04:47:26.995Z</strong></div>
|
||||||
|
<div class="metric"><span>页面总数</span><strong>12 页</strong></div>
|
||||||
|
<div class="metric"><span>可人工复核</span><strong>4 页</strong></div>
|
||||||
|
<div class="metric"><span>定稿候选</span><strong>8 页</strong></div>
|
||||||
|
<div class="metric"><span>需人工决策</span><strong>0 页</strong></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="shell">
|
||||||
|
<section class="toolbar" aria-label="筛选工具">
|
||||||
|
<div class="filters" role="group" aria-label="页面筛选">
|
||||||
|
<button class="filter-btn active" type="button" data-filter="all">全部 <span data-count="all">12</span></button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="review">可复核 <span data-count="review">4</span></button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="candidate">定稿候选 <span data-count="candidate">8</span></button>
|
||||||
|
<button class="filter-btn" type="button" data-filter="decision">需决策 <span data-count="decision">0</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-actions">
|
||||||
|
<div class="toolbar-note">审阅结论会保存在当前浏览器，可导出为定稿记录。</div>
|
||||||
|
<button type="button" id="exportReview">导出定稿记录</button>
|
||||||
|
<button type="button" id="clearReview">清空记录</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-list" id="pageList" aria-label="页面审阅列表"></section>
|
||||||
|
<div class="empty" id="emptyState">当前筛选没有可展示页面。</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<template id="cardTemplate">
|
||||||
|
<article class="review-card">
|
||||||
|
<div class="card-head">
|
||||||
|
<div>
|
||||||
|
<div class="title-row">
|
||||||
|
<h2></h2>
|
||||||
|
<span class="badge"></span>
|
||||||
|
</div>
|
||||||
|
<div class="route"></div>
|
||||||
|
</div>
|
||||||
|
<div class="score-grid">
|
||||||
|
<div class="score"><span>avg</span><strong data-field="avg"></strong></div>
|
||||||
|
<div class="score"><span>RMS</span><strong data-field="rms"></strong></div>
|
||||||
|
<div class="score"><span>变更像素</span><strong data-field="pixels"></strong></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-grid">
|
||||||
|
<figure class="shot">
|
||||||
|
<figcaption class="shot-label"><span>设计图</span><a data-link="design" target="_blank" rel="noreferrer">打开</a></figcaption>
|
||||||
|
<div class="shot-frame"><img data-img="design" alt=""></div>
|
||||||
|
</figure>
|
||||||
|
<figure class="shot">
|
||||||
|
<figcaption class="shot-label"><span>实现截图</span><a data-link="implementation" target="_blank" rel="noreferrer">打开</a></figcaption>
|
||||||
|
<div class="shot-frame"><img data-img="implementation" alt=""></div>
|
||||||
|
</figure>
|
||||||
|
<figure class="shot">
|
||||||
|
<figcaption class="shot-label"><span>diff 图</span><a data-link="diff" target="_blank" rel="noreferrer">打开</a></figcaption>
|
||||||
|
<div class="shot-frame"><img data-img="diff" alt=""></div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="card-foot">
|
||||||
|
<div>
|
||||||
|
<p class="focus-title">人工关注点</p>
|
||||||
|
<p class="focus-text"></p>
|
||||||
|
<div class="key-issue" hidden></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="decision-title">审阅结论</p>
|
||||||
|
<div class="decision-box" role="group" aria-label="审阅结论">
|
||||||
|
<label class="choice"><input type="radio" value="pass">通过</label>
|
||||||
|
<label class="choice"><input type="radio" value="pass_with_note">通过但备注</label>
|
||||||
|
<label class="choice"><input type="radio" value="rework">带目标返修</label>
|
||||||
|
</div>
|
||||||
|
<textarea class="review-note" placeholder="记录人工备注、返修目标、不可破坏的功能和复验命令。"></textarea>
|
||||||
|
<div class="review-status">尚未记录</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const pages = [
|
||||||
|
{
|
||||||
|
name: "中心调度台",
|
||||||
|
route: "/#/center-dashboard",
|
||||||
|
file: "dispatcher-01-center-dashboard.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "19.94",
|
||||||
|
rms: "47.78",
|
||||||
|
pixels: "17.7%",
|
||||||
|
focus: "核对右侧 AI 推荐检查器底部负载卡与动作区、隐藏侧栏底部快捷区，以及中心表格密度是否仍满足调度扫描效率。",
|
||||||
|
issue: "定稿候选：核心骨架、真实分页、每页条数、行级派发面板、批量操作和右侧 AI 推荐检查器已形成稳定功能闭环；动态业务样例作为可接受偏差备注。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "定稿候选：接受当前真实分页、每页条数、选中计数、动态 footer、行级更多派发操作、右侧 AI 推荐检查器动态样例和侧栏底部状态策略；不再压缩 KPI / 表格 / 检查器密度，不再改 KPI 图标、刷新图标、自定义复选框、人员负载圆环或相似问题卡密度。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "问题池",
|
||||||
|
route: "/#/issue-pool",
|
||||||
|
file: "dispatcher-02-issue-pool.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "17.18",
|
||||||
|
rms: "43.47",
|
||||||
|
pixels: "14.1%",
|
||||||
|
focus: "复核主导航、问题池列表密度、筛选区和右侧操作区的空间关系；动态数据和图标细节不作为单独阻塞项。",
|
||||||
|
issue: "定稿候选：真实分页、提交人筛选和导出闭环已稳定；右侧 AI 洞察由图表型面板简化为文本洞察区作为产品化偏差备注。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "通过但备注：接受右侧 AI 洞察简化为文本洞察区，保留真实分页、提交人筛选、CSV 导出、批量派发和批量治理闭环；不再为了图表装饰牺牲问题池扫描效率。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "部门队列",
|
||||||
|
route: "/#/department-queue",
|
||||||
|
file: "dispatcher-03-department-queue.png",
|
||||||
|
status: "review",
|
||||||
|
statusText: "可人工复核",
|
||||||
|
avg: "17.42",
|
||||||
|
rms: "41.57",
|
||||||
|
pixels: "13.9%",
|
||||||
|
focus: "复核部门队列的标题、KPI、筛选和列表层级；重点看顶部右侧与中下部表格区域是否清晰稳定。",
|
||||||
|
suggestedDecision: "pass"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "提醒升级",
|
||||||
|
route: "/#/escalation-center",
|
||||||
|
file: "dispatcher-04-escalation-center.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "18.62",
|
||||||
|
rms: "45.94",
|
||||||
|
pixels: "15.7%",
|
||||||
|
focus: "复核升级提醒的风险状态、表格密度、右侧升级链路与规则信息；只记录影响识读或业务判断的差异。",
|
||||||
|
issue: "定稿候选：已按返修目标恢复风险分组表格密度，并补齐右侧升级链路、提醒规则、最近动作和备注区；自动 diff 差异作为结构升级后的诊断备注。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "通过但备注：采用当前风险筛选条、分组表格、升级链路、提醒规则、最近动作和备注区定稿；接受动态风险候选数量、SLA 数据和右侧链路文案与静态设计稿不同。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "知识复盘",
|
||||||
|
route: "/#/knowledge-review",
|
||||||
|
file: "dispatcher-05-knowledge-review.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "18.92",
|
||||||
|
rms: "44.57",
|
||||||
|
pixels: "14.9%",
|
||||||
|
focus: "核对右侧 AI 摘要在可编辑、可保存状态下的设计感，底部动作条清晰度，以及中部表格行高和对齐。",
|
||||||
|
issue: "关键问题：右侧摘要、底部动作区和中部表格对齐是否按当前实现定稿。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "定稿候选：采用当前可编辑 AI 复盘工作区，保留真实分页、每页条数、摘要编辑保存和三类知识动作；不再继续调整摘要宽度、行高、按钮 gap、padding、筛选图标或头像锚点。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "规则配置",
|
||||||
|
route: "/#/rule-config",
|
||||||
|
file: "dispatcher-06-rule-config.png",
|
||||||
|
status: "review",
|
||||||
|
statusText: "可人工复核",
|
||||||
|
avg: "17.81",
|
||||||
|
rms: "42.33",
|
||||||
|
pixels: "15.5%",
|
||||||
|
focus: "复核规则配置的表单密度、规则列表、状态徽标和底部右侧热点；关注配置操作是否足够清楚。",
|
||||||
|
suggestedDecision: "pass"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "管理看板",
|
||||||
|
route: "/#/analytics-board",
|
||||||
|
file: "dispatcher-07-analytics-board.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "19.95",
|
||||||
|
rms: "44.41",
|
||||||
|
pixels: "19.2%",
|
||||||
|
focus: "核对顶部趋势与状态分布比例、middle-left 排行区密度、自定义布局入口和导出能力是否符合最终产品预期。",
|
||||||
|
issue: "定稿候选：五个 KPI、趋势、状态分布、AI 洞察、Top5、效率趋势、SLA 风险、本周对比和导出 / 下钻 / 自定义看板已形成稳定功能闭环。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "定稿候选：接受首屏设计量级展示选择器、真实导出/下钻/刷新记录、右上操作入口、中部榜单当前密度和右侧 AI 洞察完整正文；不再裁剪洞察正文、不再改趋势/状态比例、效率趋势高度、榜单行高、RankingPanel 轨道、KPI 图标、tooltip 或风险色。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "我的待办",
|
||||||
|
route: "/#/client-workbench",
|
||||||
|
file: "client-01-workbench.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "17.72",
|
||||||
|
rms: "44.08",
|
||||||
|
pixels: "14.7%",
|
||||||
|
focus: "复核客户端工作台的信息层级、待办列表、右侧区域和底部热点；业务样例差异可备注但不单独阻塞。",
|
||||||
|
issue: "定稿候选：任务处理主路径、详情面板和操作优先级清楚；右侧相似问题区在当前首屏被详情与操作区挤出作为可接受偏差备注。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "通过但备注：接受当前详情与操作区优先于右侧相似问题区的首屏取舍，保留我的待办分页、筛选排序、关注、复制链接和处理动作闭环。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "提交问题",
|
||||||
|
route: "/#/submit-issue",
|
||||||
|
file: "client-02-submit-issue.png",
|
||||||
|
status: "review",
|
||||||
|
statusText: "可人工复核",
|
||||||
|
avg: "14.16",
|
||||||
|
rms: "37.39",
|
||||||
|
pixels: "11.3%",
|
||||||
|
focus: "复核提交表单、底部动作区、顶部左侧导航和移动端补充截图；关注录入流程是否清楚而不是逐像素贴图。",
|
||||||
|
suggestedDecision: "pass"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "处理人详情",
|
||||||
|
route: "/#/handler-detail",
|
||||||
|
file: "client-03-issue-detail-handler.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "18.22",
|
||||||
|
rms: "43.82",
|
||||||
|
pixels: "16.2%",
|
||||||
|
focus: "核对顶栏用户区、通知和帮助区、右侧下一步动作视觉权重，以及左侧问题摘要业务样例是否需要产品统一。",
|
||||||
|
issue: "定稿候选：顶栏、右栏动作、时间线、评论工具和三栏骨架已形成稳定功能闭环；业务样例和头像细节作为可接受偏差备注。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "定稿候选：接受当前真实演示数据、顶栏头像/通知/帮助细节、评论工具图标入口、单一右栏分组结构、19px 时间线圆点、250px / 1fr / 400px 三栏比例和右侧主按钮渐变样式；不再拆右栏独立白卡、不再调整三栏比例、不再压缩时间线圆点或重做头像/按钮色彩。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "提交人追踪",
|
||||||
|
route: "/#/submitter-tracking",
|
||||||
|
file: "client-04-submitter-tracking.png",
|
||||||
|
status: "candidate",
|
||||||
|
statusText: "定稿候选",
|
||||||
|
avg: "17.91",
|
||||||
|
rms: "43.59",
|
||||||
|
pixels: "14.3%",
|
||||||
|
focus: "复核提交人追踪的时间线、状态反馈、右侧区域和底部右侧热点；确保长文本与状态徽标没有遮挡。",
|
||||||
|
issue: "定稿候选：三栏追踪结构、真实分页、排序筛选、负责人资料和附件下载稳定；默认样例、数量、头像和附件数据差异作为真实演示数据偏差备注。",
|
||||||
|
suggestedDecision: "pass_with_note",
|
||||||
|
suggestedNote: "通过但备注：接受默认选中样例、记录数量、头像和附件数据与设计稿不同，保留三栏追踪、分页、排序筛选、详情展开、负责人资料和附件下载闭环。"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "移动端提交 / 补充",
|
||||||
|
route: "/#/mobile-submit",
|
||||||
|
file: "client-05-mobile-submit.png",
|
||||||
|
status: "review",
|
||||||
|
statusText: "可人工复核",
|
||||||
|
avg: "17.87",
|
||||||
|
rms: "44.91",
|
||||||
|
pixels: "12.9%",
|
||||||
|
focus: "复核移动端提交流程、窄屏布局、顶部右侧热点和主操作可触达性；动态表单数据可作为备注处理。",
|
||||||
|
suggestedDecision: "pass"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const pageList = document.querySelector("#pageList");
|
||||||
|
const emptyState = document.querySelector("#emptyState");
|
||||||
|
const template = document.querySelector("#cardTemplate");
|
||||||
|
const filters = document.querySelectorAll(".filter-btn");
|
||||||
|
const exportButton = document.querySelector("#exportReview");
|
||||||
|
const clearButton = document.querySelector("#clearReview");
|
||||||
|
const storageKey = "issue-hub-ai:design-freeze-review:v1";
|
||||||
|
|
||||||
|
const decisionLabels = {
|
||||||
|
pass: "通过",
|
||||||
|
pass_with_note: "通过但备注",
|
||||||
|
rework: "带目标返修"
|
||||||
|
};
|
||||||
|
|
||||||
|
function loadReviewState() {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(storageKey) || "{}");
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveReviewState(state) {
|
||||||
|
localStorage.setItem(storageKey, JSON.stringify(state));
|
||||||
|
}
|
||||||
|
|
||||||
|
let reviewState = loadReviewState();
|
||||||
|
|
||||||
|
function pathFor(type, file) {
|
||||||
|
if (type === "design") return "images2/" + file;
|
||||||
|
if (type === "implementation") return "implementation-screenshots/" + file;
|
||||||
|
return "visual-diff/" + file.replace(".png", "-diff.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
pages.forEach((page) => {
|
||||||
|
const node = template.content.firstElementChild.cloneNode(true);
|
||||||
|
const stored = reviewState[page.file] || {};
|
||||||
|
const initialDecision = stored.decision || page.suggestedDecision || "";
|
||||||
|
const initialNote = stored.note || page.suggestedNote || "";
|
||||||
|
node.dataset.status = page.status;
|
||||||
|
node.dataset.file = page.file;
|
||||||
|
node.querySelector("h2").textContent = page.name;
|
||||||
|
node.querySelector(".route").innerHTML = "<code>" + page.route + "</code> / <code>" + page.file + "</code>";
|
||||||
|
|
||||||
|
const badge = node.querySelector(".badge");
|
||||||
|
badge.textContent = page.statusText;
|
||||||
|
badge.classList.add(page.status);
|
||||||
|
|
||||||
|
node.querySelector("[data-field='avg']").textContent = page.avg;
|
||||||
|
node.querySelector("[data-field='rms']").textContent = page.rms;
|
||||||
|
node.querySelector("[data-field='pixels']").textContent = page.pixels;
|
||||||
|
node.querySelector(".focus-text").textContent = page.focus;
|
||||||
|
|
||||||
|
if (page.issue) {
|
||||||
|
const issue = node.querySelector(".key-issue");
|
||||||
|
issue.hidden = false;
|
||||||
|
issue.textContent = page.issue;
|
||||||
|
}
|
||||||
|
|
||||||
|
["design", "implementation", "diff"].forEach((type) => {
|
||||||
|
const src = pathFor(type, page.file);
|
||||||
|
const img = node.querySelector("[data-img='" + type + "']");
|
||||||
|
const link = node.querySelector("[data-link='" + type + "']");
|
||||||
|
img.src = src;
|
||||||
|
img.alt = page.name + " " + (type === "design" ? "设计图" : type === "implementation" ? "实现截图" : "diff 图");
|
||||||
|
link.href = src;
|
||||||
|
});
|
||||||
|
|
||||||
|
const note = node.querySelector(".review-note");
|
||||||
|
const reviewStatus = node.querySelector(".review-status");
|
||||||
|
const choices = node.querySelectorAll(".decision-box input");
|
||||||
|
note.value = initialNote;
|
||||||
|
choices.forEach((input) => {
|
||||||
|
input.name = "review-" + page.file;
|
||||||
|
input.checked = input.value === initialDecision;
|
||||||
|
input.addEventListener("change", () => {
|
||||||
|
updateReviewState(page, node);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
note.addEventListener("input", () => {
|
||||||
|
updateReviewState(page, node);
|
||||||
|
});
|
||||||
|
renderReviewStatus(page, node, reviewStatus);
|
||||||
|
|
||||||
|
fragment.appendChild(node);
|
||||||
|
});
|
||||||
|
pageList.appendChild(fragment);
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentDecision(card) {
|
||||||
|
const checked = card.querySelector(".decision-box input:checked");
|
||||||
|
return checked ? checked.value : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderReviewStatus(page, card, target = card.querySelector(".review-status")) {
|
||||||
|
const decision = currentDecision(card);
|
||||||
|
const note = card.querySelector(".review-note").value.trim();
|
||||||
|
if (!decision && !note) {
|
||||||
|
target.textContent = "尚未记录";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const source = reviewState[page.file] ? "已保存" : "建议";
|
||||||
|
target.textContent = source + "：" + (decisionLabels[decision] || "未选择结论") + (note ? "，含备注" : "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateReviewState(page, card) {
|
||||||
|
const decision = currentDecision(card);
|
||||||
|
const note = card.querySelector(".review-note").value.trim();
|
||||||
|
if (!decision && !note) {
|
||||||
|
delete reviewState[page.file];
|
||||||
|
} else {
|
||||||
|
reviewState[page.file] = {
|
||||||
|
page: page.name,
|
||||||
|
route: page.route,
|
||||||
|
file: page.file,
|
||||||
|
status: page.statusText,
|
||||||
|
decision,
|
||||||
|
decisionLabel: decisionLabels[decision] || "",
|
||||||
|
note,
|
||||||
|
updatedAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
saveReviewState(reviewState);
|
||||||
|
renderReviewStatus(page, card);
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFilter(filter) {
|
||||||
|
let visible = 0;
|
||||||
|
document.querySelectorAll(".review-card").forEach((card) => {
|
||||||
|
const show = filter === "all" || card.dataset.status === filter;
|
||||||
|
card.classList.toggle("hidden", !show);
|
||||||
|
if (show) visible += 1;
|
||||||
|
});
|
||||||
|
emptyState.style.display = visible ? "none" : "block";
|
||||||
|
filters.forEach((button) => {
|
||||||
|
button.classList.toggle("active", button.dataset.filter === filter);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
filters.forEach((button) => {
|
||||||
|
button.addEventListener("click", () => applyFilter(button.dataset.filter));
|
||||||
|
});
|
||||||
|
|
||||||
|
exportButton.addEventListener("click", () => {
|
||||||
|
const decisions = Array.from(document.querySelectorAll(".review-card")).map((card) => {
|
||||||
|
const page = pages.find((item) => item.file === card.dataset.file);
|
||||||
|
const decision = currentDecision(card);
|
||||||
|
const note = card.querySelector(".review-note").value.trim();
|
||||||
|
if (!page || (!decision && !note)) return null;
|
||||||
|
return reviewState[page.file] || {
|
||||||
|
page: page.name,
|
||||||
|
route: page.route,
|
||||||
|
file: page.file,
|
||||||
|
status: page.statusText,
|
||||||
|
decision,
|
||||||
|
decisionLabel: decisionLabels[decision] || "",
|
||||||
|
note,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
source: page.suggestedDecision ? "suggested" : "current"
|
||||||
|
};
|
||||||
|
}).filter(Boolean);
|
||||||
|
const payload = {
|
||||||
|
exportedAt: new Date().toISOString(),
|
||||||
|
reportTime: "2026-06-18T04:47:26.995Z",
|
||||||
|
storageKey,
|
||||||
|
decisions
|
||||||
|
};
|
||||||
|
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = URL.createObjectURL(blob);
|
||||||
|
link.download = "issue-hub-ai-design-freeze-review.json";
|
||||||
|
link.click();
|
||||||
|
URL.revokeObjectURL(link.href);
|
||||||
|
});
|
||||||
|
|
||||||
|
clearButton.addEventListener("click", () => {
|
||||||
|
if (!confirm("确定清空当前浏览器中的定稿审阅记录吗？")) return;
|
||||||
|
reviewState = {};
|
||||||
|
saveReviewState(reviewState);
|
||||||
|
document.querySelectorAll(".review-card").forEach((card) => {
|
||||||
|
const page = pages.find((item) => item.file === card.dataset.file);
|
||||||
|
card.querySelectorAll(".decision-box input").forEach((input) => {
|
||||||
|
input.checked = false;
|
||||||
|
});
|
||||||
|
card.querySelector(".review-note").value = "";
|
||||||
|
renderReviewStatus(page, card);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
render();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user