issue-hub-ai/docs/design/design-review-notes.md

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、表格、时间线、检查器。
• 页面功能逐个落地，并保留状态流转和时间线记录。