simon/wecom_it_smart_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5311a526af4e354aa125b82c216c5cafc3604049
wecom_it_smart_desk/docs/01-产品文档/07-知识库/知识库迭代-未实现功能原型设计-20260711.md
T

1513 lines
102 KiB
Markdown
Raw Normal View History

feat: 2026-07-11 全量更新 - 代办集成+会议室预定+知识迭代修复+UI统一+Bug修复
2026-07-11 23:13:10 +08:00
# 知识库迭代 — 未实现功能原型设计
> **版本**: v1.0
> **日期**: 2026-07-11
> **作者**: 产品经理
chore: docs 结构整改 + compose 双目录对齐（合并重建提交）
2026-08-07 22:31:32 +08:00
> **关联PRD**: `docs/01-产品文档/IT智能服务台-产品需求文档PRD-v2.md` §4 知识库迭代补充需求
> **关联原型**: `docs/01-产品文档/07-知识库/原型-REQ-知识-001-知识库闭环-v1.0.html`
feat: 2026-07-11 全量更新 - 代办集成+会议室预定+知识迭代修复+UI统一+Bug修复
2026-07-11 23:13:10 +08:00
---
## 目录
1. [设计概述](#1-设计概述)
2. [分诊交互原型](#2-分诊交互原型)
3. [拓扑预览原型](#3-拓扑预览原型)
4. [代答排除原型](#4-代答排除原型)
5. [统一设计规范](#5-统一设计规范)
---
## 1. 设计概述
### 1.1 背景
IT智能服务台"知识库迭代与痛点缓解"功能集中，以下3个功能目前仅有原型HTML或前端组件，尚未完整实现后端逻辑与完整交互链路：
| 功能 | PRD编号 | 当前状态 | 本次设计范围 |
|------|---------|---------|-------------|
| 分诊交互 | P2-02 | 仅前端组件，未接入后端 | H5端分诊流程 + 坐席端分诊看板 |
| 拓扑预览 | P2-01子项 | 仅原型HTML中的SVG示意 | 管理后台完整拓扑预览页面 |
| 代答排除 | P2-03子项 | 仅原型HTML中的排除控件 | 管理后台代答排除配置页面 |
### 1.2 设计目标
| 目标 | 描述 |
|------|------|
| **G1 消除歧义** | 将模糊的功能描述转化为具体到按钮文字、字段名称、状态值的页面原型，供用户确认后进入开发 |
| **G2 风格统一** | 复用现有管理后台（Element Plus + 企微浅色风格）与H5端（Vant4移动适配）的UI规范 |
| **G3 覆盖完整** | 每个功能覆盖正常流程与异常流程，包含空状态、加载状态、错误状态 |
### 1.3 设计原则
| 原则 | 说明 |
|------|------|
| **P1 用户视角优先** | 原型从用户操作路径出发设计，而非从数据结构倒推 |
| **P2 最小认知负荷** | 每个页面聚焦一个核心任务，避免信息堆叠 |
| **P3 渐进式披露** | 复杂信息分层展示，默认折叠次要信息 |
| **P4 可审计** | 关键操作（路由决策、规则变更）留有操作日志 |
### 1.4 适用范围
| 端 | 技术栈 | 设计风格 |
|----|--------|---------|
| H5员工端 | Vue3 + Vant4 | 移动端适配，企微内嵌H5 |
| 坐席端 | Vue3 + Element Plus | 三栏工作台，蓝色系 |
| 管理后台 | Vue3 + Element Plus + Tailwind CSS | 企微浅色扁平风格，accent=#07C160 |
### 1.5 关联决策约束（来自PRD §4.3）
| 编号 | 决策 | 对原型的影响 |
|------|------|-------------|
| D1 | 知识迭代产出直接写 Neo4j 图 | 拓扑预览需展示 Neo4j 图谱数据结构 |
| D2 | 低于置信阈值转人工 | 分诊交互需包含置信度门控横幅 |
| D3 | 坐席可直接回答AI推荐的问题 | 代答排除需与坐席代答场景配合 |
| D5 | 知识建议需训练师审批 | 拓扑预览需显示节点审核状态 |
---
## 2. 分诊交互原型
### 2.1 功能概述
当员工发起IT请求时，系统进行智能分诊，根据问题类型、紧急程度、用户画像等将请求路由到合适的处理渠道：
| 路由渠道 | 触发条件 | 员工体验 |
|---------|---------|---------|
| AI自助 | 置信度 ≥ 70%，非排除类型 | AI直接回复，分诊卡片辅助确认 |
| 自动审批 | 意图识别为审批类（12种/18流程） | 推送审批卡片，点击直跳审批页 |
| 人工坐席 | 置信度 < 70%，或命中排除规则，或VIP用户 | 转接坐席，携带上下文快照 |
### 2.2 H5端分诊交互流程（员工视角）
#### 2.2.1 页面原型 — 分诊确认卡片（AI自助场景）
```html
<!-- H5端：聊天界面中的分诊确认卡片 -->
<!-- 场景：员工提问后，AI置信度≥70%，展示分诊卡片辅助确认 -->
<div style="max-width:375px;margin:0 auto;background:#f5f6fa;font-family:-apple-system,sans-serif">
<!-- 顶部导航栏 -->
<div style="background:#07C160;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:600">IT智能服务台</div>
<!-- 聊天区域 -->
<div style="padding:12px;min-height:500px">
<!-- 员工消息 -->
<div style="display:flex;justify-content:flex-end;margin-bottom:12px">
<div style="background:#07C160;color:#fff;padding:8px 14px;border-radius:12px 12px 4px 12px;max-width:75%;font-size:14px">Outlook登录一直失败，提示无法连接服务器</div>
</div>
<!-- AI回复 + 置信度标签 -->
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#fff;border:1px solid #e5e7eb;padding:8px 14px;border-radius:12px 12px 12px 4px;max-width:75%;font-size:14px">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
<span style="font-size:11px;color:#9ca3af">AI助手</span>
<span style="font-size:10px;background:#dcfce7;color:#16a34a;padding:1px 6px;border-radius:8px;font-weight:600">🟢 85%</span>
</div>
您好！关于Outlook登录失败的问题，我先帮您确认一下具体情况 👇
</div>
</div>
<!-- 分诊确认卡片（核心组件） -->
<div style="background:#fff;border:1.5px solid #07C160;border-radius:12px;padding:16px;margin:10px 0;box-shadow:0 2px 12px rgba(7,193,96,0.12);position:relative">
<div style="position:absolute;top:-10px;left:16px;background:#07C160;color:#fff;font-size:11px;padding:2px 10px;border-radius:10px;font-weight:600">🤖 AI分诊</div>
<div style="font-size:12px;color:#9ca3af;margin-bottom:8px;margin-top:4px">问题确认 · 第 1/3 步</div>
<div style="font-weight:600;font-size:15px;margin-bottom:12px;color:#1f2937">Outlook是否弹出了具体的错误提示？</div>
<!-- 分诊选项 -->
<div style="display:flex;flex-direction:column;gap:8px">
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer">
<div style="width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0"></div>
<span style="font-size:14px;flex:1">弹出了，提示"无法连接到服务器"</span>
<span style="font-size:12px;color:#07C160;font-weight:600">68%</span>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer">
<div style="width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0"></div>
<span style="font-size:14px;flex:1">弹出了，提示"密码错误"</span>
<span style="font-size:12px;color:#07C160;font-weight:600">22%</span>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer">
<div style="width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0"></div>
<span style="font-size:14px;flex:1">没有弹出任何提示，直接闪退</span>
<span style="font-size:12px;color:#f59e0b;font-weight:600">8%</span>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer">
<div style="width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0"></div>
<span style="font-size:14px;flex:1">其他情况</span>
<span style="font-size:12px;color:#9ca3af;font-weight:600">2%</span>
</div>
</div>
<!-- 底部：专家模式开关 + 转人工 -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #f3f4f6">
<span style="font-size:12px;color:#9ca3af">专家模式（一键多步）</span>
<div style="width:36px;height:20px;border-radius:10px;background:#07C160;position:relative">
<div style="width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:18px"></div>
</div>
</div>
</div>
<!-- 转人工入口 -->
<div style="text-align:center;margin-top:8px;font-size:12px;color:#9ca3af">
没有匹配的选项？<a style="color:#07C160;text-decoration:none;font-weight:500">🔔 转人工协助</a>
</div>
</div>
</div>
```
#### 2.2.2 页面原型 — 置信度门控横幅（低置信转人工场景）
```html
<!-- H5端：置信度低于70%时的门控横幅 -->
<div style="max-width:375px;margin:0 auto;background:#f5f6fa;font-family:-apple-system,sans-serif">
<div style="padding:12px;min-height:400px">
<!-- 员工消息 -->
<div style="display:flex;justify-content:flex-end;margin-bottom:12px">
<div style="background:#07C160;color:#fff;padding:8px 14px;border-radius:12px 12px 4px 12px;max-width:75%;font-size:14px">打印机突然不工作了，灯一直闪</div>
</div>
<!-- AI回复（低置信） -->
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#fff;border:1px solid #e5e7eb;padding:8px 14px;border-radius:12px 12px 12px 4px;max-width:75%;font-size:14px">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
<span style="font-size:11px;color:#9ca3af">AI助手</span>
<span style="font-size:10px;background:#fee2e2;color:#ef4444;padding:1px 6px;border-radius:8px;font-weight:600">🔴 48%</span>
</div>
关于您描述的打印机故障，可能涉及硬件层面，我已收集以下上下文供坐席参考...
</div>
</div>
<!-- 置信度门控横幅（核心组件） -->
<div style="background:#fffbeb;border:1px solid #f59e0b;border-radius:8px;padding:12px 14px;margin:10px 0">
<div style="display:flex;align-items:flex-start;gap:10px">
<span style="font-size:18px">⚠️</span>
<div style="flex:1">
<div style="font-size:13px;color:#1f2937;line-height:1.5">
<span style="background:#f59e0b;color:#fff;font-size:11px;padding:1px 8px;border-radius:8px;font-weight:600">置信度 48%</span>
低于安全阈值（70%），AI可能无法准确回答
</div>
<div style="background:#fafafa;border-radius:6px;padding:8px 10px;margin-top:6px;font-size:12px;color:#6b7280">
已收集上下文：打印机型号 HP M404dn · 错误灯闪烁 · 最近更换过墨盒 · 网络连接正常
</div>
</div>
</div>
<div style="text-align:right;margin-top:8px">
<span style="color:#07C160;font-size:13px;cursor:pointer;text-decoration:underline;font-weight:500">转人工 →</span>
</div>
</div>
<!-- 已转人工确认消息 -->
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#e8f5e9;border:1px solid #07C160;padding:10px 14px;border-radius:12px 12px 12px 4px;max-width:75%;font-size:14px;text-align:center">
✅ 已为您转接人工坐席<br>
<span style="font-size:12px;color:#6b7280">预计等待 2 分钟，当前排队第 1 位</span>
</div>
</div>
</div>
</div>
```
#### 2.2.3 页面原型 — 审批卡片路由场景
```html
<!-- H5端：意图识别为审批类，推送审批卡片 -->
<div style="max-width:375px;margin:0 auto;background:#f5f6fa;font-family:-apple-system,sans-serif">
<div style="padding:12px;min-height:350px">
<!-- 员工消息 -->
<div style="display:flex;justify-content:flex-end;margin-bottom:12px">
<div style="background:#07C160;color:#fff;padding:8px 14px;border-radius:12px 12px 4px 12px;max-width:75%;font-size:14px">我需要申请一台笔记本电脑</div>
</div>
<!-- AI回复 -->
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#fff;border:1px solid #e5e7eb;padding:8px 14px;border-radius:12px 12px 12px 4px;max-width:75%;font-size:14px">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
<span style="font-size:11px;color:#9ca3af">AI助手</span>
<span style="font-size:10px;background:#dcfce7;color:#16a34a;padding:1px 6px;border-radius:8px;font-weight:600">🟢 95%</span>
<span style="font-size:10px;background:#dbeafe;color:#3b82f6;padding:1px 6px;border-radius:8px;font-weight:600">审批路由</span>
</div>
已识别为设备申请，请选择具体的审批类型 👇
</div>
</div>
<!-- 审批卡片（核心组件） -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;margin:10px 0">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
<span style="font-size:11px;background:#e8f5e9;color:#07C160;padding:2px 8px;border-radius:8px;font-weight:600">📋 设备申请</span>
<span style="font-size:11px;color:#9ca3af;margin-left:auto">3个可选流程</span>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px;cursor:pointer">
<div style="font-weight:600;font-size:14px;color:#1f2937">IT资产领用登记</div>
<div style="font-size:12px;color:#6b7280;margin-top:2px">企微审批 · 新领用设备</div>
<div style="text-align:right;margin-top:4px"><span style="font-size:12px;color:#07C160;font-weight:500">去申请 →</span></div>
</div>
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px;cursor:pointer">
<div style="font-weight:600;font-size:14px;color:#1f2937">IT资产借用申请</div>
<div style="font-size:12px;color:#6b7280;margin-top:2px">企微审批 · 临时借用设备</div>
<div style="text-align:right;margin-top:4px"><span style="font-size:12px;color:#07C160;font-weight:500">去申请 →</span></div>
</div>
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px;cursor:pointer">
<div style="font-weight:600;font-size:14px;color:#1f2937">IT设备升级与硬件维修</div>
<div style="font-size:12px;color:#6b7280;margin-top:2px">运维平台 · 设备升级/维修</div>
<div style="text-align:right;margin-top:4px"><span style="font-size:12px;color:#3b82f6;font-weight:500">去申请 →</span></div>
</div>
</div>
</div>
<div style="text-align:center;margin-top:8px;font-size:12px;color:#9ca3af">
不确定选哪个？<a style="color:#07C160;text-decoration:none;font-weight:500">🔔 转人工协助</a>
</div>
</div>
</div>
```
#### 2.2.4 页面原型 — 分诊中加载状态 & 超时状态
```html
<!-- H5端：AI正在分诊分析中的加载状态 -->
<div style="max-width:375px;margin:0 auto;background:#f5f6fa;font-family:-apple-system,sans-serif">
<div style="padding:12px;min-height:200px">
<div style="display:flex;justify-content:flex-end;margin-bottom:12px">
<div style="background:#07C160;color:#fff;padding:8px 14px;border-radius:12px 12px 4px 12px;max-width:75%;font-size:14px">VPN连不上，报错691</div>
</div>
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#fff;border:1px solid #e5e7eb;padding:12px 14px;border-radius:12px 12px 12px 4px;max-width:75%">
<div style="display:flex;align-items:center;gap:8px">
<div style="display:flex;gap:3px">
<div style="width:6px;height:6px;border-radius:50%;background:#07C160"></div>
<div style="width:6px;height:6px;border-radius:50%;background:#07C160;opacity:0.6"></div>
<div style="width:6px;height:6px;border-radius:50%;background:#07C160;opacity:0.3"></div>
</div>
<span style="font-size:13px;color:#6b7280">AI正在分诊分析中...</span>
</div>
<div style="font-size:11px;color:#9ca3af;margin-top:6px">正在识别问题类型 · 匹配知识库 · 评估紧急程度</div>
</div>
</div>
</div>
</div>
```
```html
<!-- H5端：分诊超时或失败时的兜底状态 -->
<div style="max-width:375px;margin:0 auto;background:#f5f6fa;font-family:-apple-system,sans-serif">
<div style="padding:12px;min-height:200px">
<div style="display:flex;justify-content:flex-end;margin-bottom:12px">
<div style="background:#07C160;color:#fff;padding:8px 14px;border-radius:12px 12px 4px 12px;max-width:75%;font-size:14px">系统突然蓝屏了，代码0x0000007B</div>
</div>
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#fff;border:1px solid #fecaca;padding:10px 14px;border-radius:12px 12px 12px 4px;max-width:75%">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px">
<span style="font-size:16px">⚠️</span>
<span style="font-size:13px;color:#ef4444;font-weight:600">分诊超时</span>
</div>
<div style="font-size:13px;color:#6b7280;line-height:1.5">AI分诊服务暂时不可用，已自动为您转接人工坐席。</div>
</div>
</div>
<div style="display:flex;justify-content:flex-start;margin-bottom:8px">
<div style="background:#e8f5e9;border:1px solid #07C160;padding:10px 14px;border-radius:12px 12px 12px 4px;max-width:75%;font-size:14px;text-align:center">
✅ 已为您转接人工坐席<br>
<span style="font-size:12px;color:#6b7280">预计等待 3 分钟，当前排队第 2 位</span>
</div>
</div>
</div>
</div>
```
### 2.3 坐席端分诊看板原型（坐席视角）
#### 2.3.1 页面原型 — 分诊看板主页面
```html
<!-- 坐席端：分诊看板主页面 -->
<!-- 布局：左侧待分诊列表 + 右侧分诊详情与路由操作 -->
<div style="background:#f5f7fa;font-family:'PingFang SC',sans-serif;font-size:13px;padding:16px">
<!-- 页面标题栏 -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px">
<h2 style="font-size:18px;font-weight:600;margin:0;color:#1e293b">🔀 智能分诊看板</h2>
<span style="background:#dbeafe;color:#3b82f6;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600">实时</span>
</div>
<div style="display:flex;gap:8px">
<button style="padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:13px">📥 导出</button>
<button style="padding:6px 14px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px">⚙️ 分诊规则配置</button>
</div>
</div>
<!-- 统计概要栏 -->
<div style="display:flex;gap:12px;margin-bottom:16px">
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #f59e0b">
<div style="font-size:24px;font-weight:700;color:#f59e0b">8</div><div style="font-size:12px;color:#64748b">待分诊</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #3b82f6">
<div style="font-size:24px;font-weight:700;color:#3b82f6">23</div><div style="font-size:12px;color:#64748b">今日已分诊</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #22c55e">
<div style="font-size:24px;font-weight:700;color:#22c55e">15</div><div style="font-size:12px;color:#64748b">AI自助解决</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #8b5cf6">
<div style="font-size:24px;font-weight:700;color:#8b5cf6">6</div><div style="font-size:12px;color:#64748b">转人工坐席</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #07C160">
<div style="font-size:24px;font-weight:700;color:#07C160">2</div><div style="font-size:12px;color:#64748b">自动审批</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #ef4444">
<div style="font-size:24px;font-weight:700;color:#ef4444">2.3min</div><div style="font-size:12px;color:#64748b">平均分诊耗时</div>
</div>
</div>
<!-- 主体区域：左列表 + 右详情 -->
<div style="display:flex;gap:12px;height:480px">
<!-- 左侧：待分诊列表 -->
<div style="width:380px;background:#fff;border-radius:8px;display:flex;flex-direction:column;overflow:hidden">
<div style="padding:10px 14px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between">
<span style="font-weight:600;font-size:14px;color:#1e293b">待分诊请求</span>
<div style="display:flex;gap:6px;align-items:center">
<select style="font-size:12px;padding:3px 8px;border:1px solid #e2e8f0;border-radius:4px;background:#fff">
<option>全部紧急度</option><option>🔴 紧急</option><option>🟡 一般</option><option>🟢 低</option>
</select>
<select style="font-size:12px;padding:3px 8px;border:1px solid #e2e8f0;border-radius:4px;background:#fff">
<option>全部类型</option><option>硬件</option><option>软件</option><option>网络</option><option>账号</option>
</select>
</div>
</div>
<div style="flex:1;overflow-y:auto">
<!-- 选中项 -->
<div style="padding:10px 14px;border-bottom:1px solid #f1f5f9;background:#eff6ff;border-left:3px solid #3b82f6;cursor:pointer">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
<span style="font-weight:600;font-size:13px;color:#1e293b">Outlook登录失败</span>
<span style="font-size:10px;background:#fee2e2;color:#ef4444;padding:1px 6px;border-radius:8px;font-weight:600">🔴 紧急</span>
</div>
<div style="font-size:12px;color:#64748b;margin-bottom:4px">张三 · 财务部 · VIP用户</div>
<div style="display:flex;gap:6px;align-items:center">
<span style="font-size:10px;background:#e8f5e9;color:#07C160;padding:1px 6px;border-radius:8px">软件</span>
<span style="font-size:10px;background:#fef3c7;color:#b45309;padding:1px 6px;border-radius:8px">置信 72%</span>
<span style="font-size:11px;color:#9ca3af;margin-left:auto">2分钟前</span>
</div>
</div>
<!-- 未选中项 -->
<div style="padding:10px 14px;border-bottom:1px solid #f1f5f9;cursor:pointer">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
<span style="font-weight:600;font-size:13px;color:#1e293b">打印机卡纸</span>
<span style="font-size:10px;background:#fef3c7;color:#b45309;padding:1px 6px;border-radius:8px;font-weight:600">🟡 一般</span>
</div>
<div style="font-size:12px;color:#64748b;margin-bottom:4px">李四 · 行政部</div>
<div style="display:flex;gap:6px;align-items:center">
<span style="font-size:10px;background:#e8f5e9;color:#07C160;padding:1px 6px;border-radius:8px">硬件</span>
<span style="font-size:10px;background:#fee2e2;color:#ef4444;padding:1px 6px;border-radius:8px">置信 48%</span>
<span style="font-size:11px;color:#9ca3af;margin-left:auto">5分钟前</span>
</div>
</div>
<div style="padding:10px 14px;border-bottom:1px solid #f1f5f9;cursor:pointer">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
<span style="font-weight:600;font-size:13px;color:#1e293b">VPN连接超时</span>
<span style="font-size:10px;background:#fef3c7;color:#b45309;padding:1px 6px;border-radius:8px;font-weight:600">🟡 一般</span>
</div>
<div style="font-size:12px;color:#64748b;margin-bottom:4px">王五 · 技术部</div>
<div style="display:flex;gap:6px;align-items:center">
<span style="font-size:10px;background:#dbeafe;color:#3b82f6;padding:1px 6px;border-radius:8px">网络</span>
<span style="font-size:10px;background:#fef3c7;color:#b45309;padding:1px 6px;border-radius:8px">置信 65%</span>
<span style="font-size:11px;color:#9ca3af;margin-left:auto">8分钟前</span>
</div>
</div>
<div style="padding:10px 14px;border-bottom:1px solid #f1f5f9;cursor:pointer">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
<span style="font-weight:600;font-size:13px;color:#1e293b">设备申请</span>
<span style="font-size:10px;background:#dcfce7;color:#16a34a;padding:1px 6px;border-radius:8px;font-weight:600">🟢 低</span>
</div>
<div style="font-size:12px;color:#64748b;margin-bottom:4px">赵六 · 市场部</div>
<div style="display:flex;gap:6px;align-items:center">
<span style="font-size:10px;background:#e8f5e9;color:#07C160;padding:1px 6px;border-radius:8px">审批</span>
<span style="font-size:10px;background:#dcfce7;color:#16a34a;padding:1px 6px;border-radius:8px">置信 95%</span>
<span style="font-size:11px;color:#9ca3af;margin-left:auto">12分钟前</span>
</div>
</div>
</div>
<div style="padding:8px 14px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center">
<span style="font-size:12px;color:#64748b">共 8 条待分诊</span>
<button style="font-size:12px;color:#3b82f6;background:none;border:none;cursor:pointer">查看全部 →</button>
</div>
</div>
<!-- 右侧：分诊详情与路由操作 -->
<div style="flex:1;background:#fff;border-radius:8px;display:flex;flex-direction:column;overflow:hidden">
<div style="padding:12px 16px;border-bottom:1px solid #e2e8f0">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
<span style="font-weight:600;font-size:15px;color:#1e293b">Outlook登录失败</span>
<div style="display:flex;gap:6px">
<span style="font-size:11px;background:#fee2e2;color:#ef4444;padding:2px 8px;border-radius:8px;font-weight:600">🔴 紧急</span>
<span style="font-size:11px;background:#fef3c7;color:#b45309;padding:2px 8px;border-radius:8px;font-weight:600">VIP用户</span>
</div>
</div>
<div style="font-size:12px;color:#64748b">请求ID: TRIAGE-20260711-001 · 提交时间: 2026-07-11 15:32 · 来源: 企微H5</div>
</div>
<div style="flex:1;overflow-y:auto;padding:16px">
<!-- 用户信息 -->
<div style="margin-bottom:16px">
<div style="font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px">👤 用户画像</div>
<div style="display:flex;gap:16px;font-size:13px">
<div><span style="color:#9ca3af">姓名:</span> 张三</div>
<div><span style="color:#9ca3af">部门:</span> 财务部</div>
<div><span style="color:#9ca3af">职级:</span> P7</div>
<div><span style="color:#9ca3af">设备:</span> ThinkPad T14</div>
</div>
</div>
<!-- 问题描述 -->
<div style="margin-bottom:16px">
<div style="font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px">📝 问题描述</div>
<div style="background:#f8fafc;border-radius:6px;padding:10px 12px;font-size:13px;color:#1e293b;line-height:1.5">Outlook登录一直失败，提示无法连接服务器</div>
</div>
<!-- AI分诊分析 -->
<div style="margin-bottom:16px">
<div style="font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px">🤖 AI分诊分析</div>
<div style="background:#f8fafc;border-radius:6px;padding:12px">
<div style="display:flex;gap:16px;margin-bottom:8px">
<div><span style="font-size:12px;color:#9ca3af">问题类型:</span> <span style="font-size:13px;font-weight:500;color:#1e293b">软件 - Outlook</span></div>
<div><span style="font-size:12px;color:#9ca3af">置信度:</span> <span style="font-size:13px;font-weight:600;color:#f59e0b">72%</span></div>
<div><span style="font-size:12px;color:#9ca3af">紧急度:</span> <span style="font-size:13px;font-weight:500;color:#ef4444">高</span></div>
</div>
<div style="font-size:12px;color:#64748b;margin-bottom:6px">建议路由: <span style="color:#3b82f6;font-weight:600">人工坐席</span>（置信度接近阈值+VIP用户优先）</div>
<div style="font-size:12px;color:#64748b">匹配知识: Outlook登录失败 → 密码过期检查（89%匹配）</div>
</div>
</div>
<!-- 已收集上下文 -->
<div style="margin-bottom:16px">
<div style="font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px">📦 已收集上下文</div>
<div style="display:flex;flex-wrap:wrap;gap:6px">
<span style="font-size:12px;background:#f1f5f9;padding:3px 10px;border-radius:12px;color:#475569">Outlook 2019</span>
<span style="font-size:12px;background:#f1f5f9;padding:3px 10px;border-radius:12px;color:#475569">Windows 10</span>
<span style="font-size:12px;background:#f1f5f9;padding:3px 10px;border-radius:12px;color:#475569">AD域用户</span>
<span style="font-size:12px;background:#f1f5f9;padding:3px 10px;border-radius:12px;color:#475569">密码90天未修改</span>
<span style="font-size:12px;background:#f1f5f9;padding:3px 10px;border-radius:12px;color:#475569">网络正常</span>
</div>
</div>
</div>
<!-- 路由操作区（固定底部） -->
<div style="padding:12px 16px;border-top:1px solid #e2e8f0;background:#f8fafc">
<div style="font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px">🔀 路由操作</div>
<div style="display:flex;gap:8px">
<button style="flex:1;padding:8px 16px;border:1px solid #22c55e;border-radius:6px;background:#fff;color:#22c55e;cursor:pointer;font-size:13px;font-weight:500">🤖 AI自助处理</button>
<button style="flex:1;padding:8px 16px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px;font-weight:500">👤 转人工坐席</button>
<button style="flex:1;padding:8px 16px;border:1px solid #07C160;border-radius:6px;background:#fff;color:#07C160;cursor:pointer;font-size:13px;font-weight:500">📋 自动审批</button>
<button style="padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;cursor:pointer;font-size:13px">⏭️ 跳过</button>
</div>
<div style="margin-top:8px">
<input type="text" placeholder="路由备注（可选）" style="width:100%;padding:6px 10px;border:1px solid #e2e8f0;border-radius:4px;font-size:13px;box-sizing:border-box">
</div>
</div>
</div>
</div>
</div>
```
#### 2.3.2 页面原型 — 分诊看板空状态
```html
<!-- 坐席端：无待分诊请求时的空状态 -->
<div style="background:#f5f7fa;font-family:'PingFang SC',sans-serif;font-size:13px;padding:16px">
<div style="display:flex;gap:12px;margin-bottom:16px">
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #f59e0b">
<div style="font-size:24px;font-weight:700;color:#f59e0b">0</div><div style="font-size:12px;color:#64748b">待分诊</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #3b82f6">
<div style="font-size:24px;font-weight:700;color:#3b82f6">23</div><div style="font-size:12px;color:#64748b">今日已分诊</div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center;border-left:3px solid #22c55e">
<div style="font-size:24px;font-weight:700;color:#22c55e">15</div><div style="font-size:12px;color:#64748b">AI自助解决</div>
</div>
</div>
<div style="background:#fff;border-radius:8px;padding:60px 20px;text-align:center">
<div style="font-size:48px;margin-bottom:12px">✅</div>
<div style="font-size:16px;font-weight:600;color:#1e293b;margin-bottom:6px">暂无待分诊请求</div>
<div style="font-size:13px;color:#64748b;margin-bottom:16px">所有请求已处理完毕，新请求将实时推送至此</div>
<button style="padding:8px 20px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#3b82f6;cursor:pointer;font-size:13px">🔄 手动刷新</button>
</div>
</div>
```
### 2.4 交互流程Mermaid图
#### 2.4.1 分诊主流程
```mermaid
flowchart TD
A[员工发起IT请求] --> B{AI分诊引擎}
B --> C[识别问题类型]
B --> D[评估置信度]
B --> E[判断紧急度]
B --> F[用户画像分析]
C & D & E & F --> G{路由决策}
G -->|置信度≥70% 且 非排除类型| H[AI自助渠道]
G -->|意图=审批类| I[自动审批渠道]
G -->|置信度<70%| J[人工坐席渠道]
G -->|命中排除规则| J
G -->|VIP用户 且 置信度<85%| J
G -->|分诊超时/失败| J
H --> H1[展示分诊确认卡片]
H1 --> H2{员工确认}
H2 -->|选项匹配| H3[AI回复解决方案]
H2 -->|无匹配选项| H4[转人工]
H3 --> H5{问题解决?}
H5 -->|是| H6[关闭会话 生成知识建议]
H5 -->|否| H4
I --> I1[展示审批卡片]
I1 --> I2[员工选择审批类型]
I2 --> I3[跳转审批页面]
I3 --> I4[会话关闭]
J --> J1[展示置信度门控横幅]
J1 --> J2[携带上下文转接坐席]
J2 --> J3[坐席端分诊看板接收]
J3 --> J4[坐席处理]
J4 --> J5{坐席路由操作}
J5 -->|AI自助| H3
J5 -->|转人工| J6[分配坐席开始服务]
J5 -->|自动审批| I1
J5 -->|跳过| J7[标记为已跳过]
H4 --> J2
H6 --> K[会话关闭]
I4 --> K
J6 --> K
J7 --> K
```
#### 2.4.2 坐席端分诊操作流程
```mermaid
flowchart LR
A[新请求进入待分诊列表] --> B[坐席选中请求]
B --> C[查看分诊详情]
C --> D{查看AI分析建议}
D --> E{坐席路由决策}
E -->|同意AI建议| F[点击建议路由按钮]
E -->|不同意AI建议| G[手动选择路由]
F --> H{路由类型}
G --> H
H -->|AI自助| I[确认AI自助处理]
H -->|转人工| J[选择目标坐席/队列]
H -->|自动审批| K[确认审批路由]
H -->|跳过| L[填写跳过原因]
I --> M[填写路由备注]
J --> N[填写转接说明]
K --> O[确认审批类型]
L --> P[标记已跳过]
M & N & O & P --> Q[记录操作日志]
Q --> R[请求离开待分诊列表]
R --> S[更新统计数据]
```
### 2.5 页面状态说明表
#### H5端页面状态
| 页面状态 | 触发条件 | UI表现 | 用户可操作 |
|---------|---------|--------|-----------|
| 分诊中 | 员工发送消息后，AI正在分析 | 加载动画 + "AI正在分诊分析中..." | 无（等待） |
| 分诊确认 | 置信度≥70%，AI自助场景 | 展示分诊卡片，含选项和概率 | 选择选项、切换专家模式、转人工 |
| 置信门控 | 置信度<70% | 展示黄色门控横幅 + 上下文快照 | 点击"转人工" |
| 审批路由 | 意图=审批类 | 展示审批卡片，列出可选审批流程 | 选择审批类型、跳转审批页、转人工 |
| 分诊超时 | 分诊服务超时(>5s)或异常 | 展示红色超时提示 + 自动转人工 | 等待转接 |
| AI回复中 | 分诊确认后AI生成回复 | 打字机效果加载 | 无（等待） |
| 转人工确认 | 路由到人工坐席 | 绿色确认消息 + 预计等待时间 | 无（等待坐席接入） |
#### 坐席端页面状态
| 页面状态 | 触发条件 | UI表现 | 坐席可操作 |
|---------|---------|--------|-----------|
| 待分诊列表加载 | 页面初始化/刷新 | 列表骨架屏 | 无（等待） |
| 有待分诊请求 | 列表数据加载完成 | 展示请求列表，按紧急度排序 | 选择请求、筛选、导出 |
| 无待分诊请求 | 列表为空 | 展示空状态 + 手动刷新按钮 | 手动刷新 |
| 请求选中 | 点击列表项 | 右侧展示详情，列表项高亮 | 查看详情、路由操作 |
| 路由操作中 | 点击路由按钮 | 按钮loading + 确认弹窗 | 确认/取消 |
| 路由完成 | 路由操作成功 | Toast提示成功 + 列表移除该项 | 继续处理下一条 |
| 路由失败 | 路由操作异常 | Toast提示错误 + 保留在列表 | 重试 |
### 2.6 字段定义表
#### H5端分诊卡片字段
| 字段名 | 类型 | 必填 | 说明 | 示例 |
|--------|------|------|------|------|
| triage_step | string | 是 | 当前分诊步骤 | "第 1/3 步" |
| triage_question | string | 是 | 分诊确认问题 | "Outlook是否弹出了具体的错误提示？" |
| triage_options | array | 是 | 分诊选项列表 | [{label:"弹出了", prob:0.68}] |
| triage_options[].label | string | 是 | 选项文字 | "弹出了，提示"无法连接到服务器"" |
| triage_options[].prob | float | 是 | 选项概率(0-1) | 0.68 |
| expert_mode | boolean | 否 | 专家模式开关 | true |
| confidence | float | 是 | AI置信度(0-1) | 0.85 |
| confidence_threshold | float | 是 | 置信度阈值(固定0.7) | 0.7 |
| context_snapshot | string | 否 | 上下文快照（低置信时展示） | "打印机型号 HP M404dn..." |
| transfer_wait_time | string | 否 | 预计等待时间 | "2分钟" |
| transfer_queue_position | int | 否 | 排队位置 | 1 |
#### 坐席端分诊看板字段
| 字段名 | 类型 | 必填 | 说明 | 示例 |
|--------|------|------|------|------|
| triage_id | string | 是 | 分诊请求唯一ID | "TRIAGE-20260711-001" |
| request_title | string | 是 | 请求标题 | "Outlook登录失败" |
| request_content | string | 是 | 请求原始内容 | "Outlook登录一直失败..." |
| submit_time | datetime | 是 | 提交时间 | "2026-07-11 15:32" |
| source | string | 是 | 来源渠道 | "企微H5" |
| user_name | string | 是 | 用户姓名 | "张三" |
| user_dept | string | 是 | 用户部门 | "财务部" |
| user_level | string | 否 | 用户职级 | "P7" |
| is_vip | boolean | 否 | 是否VIP用户 | true |
| device_info | string | 否 | 设备信息 | "ThinkPad T14" |
| problem_type | string | 是 | 问题类型 | "软件" |
| problem_category | string | 是 | 问题分类 | "Outlook" |
| confidence | float | 是 | AI置信度 | 0.72 |
| urgency | enum | 是 | 紧急度 | "high" / "medium" / "low" |
| suggested_route | string | 是 | AI建议路由 | "human" / "ai_self" / "auto_approval" |
| matched_knowledge | string | 否 | 匹配的知识条目 | "Outlook登录失败 → 密码过期检查" |
| match_score | float | 否 | 知识匹配度 | 0.89 |
| context_tags | array | 否 | 上下文标签 | ["Outlook 2019","Windows 10"] |
| route_action | enum | 是 | 坐席路由操作 | "ai_self" / "human" / "auto_approval" / "skip" |
| route_note | string | 否 | 路由备注 | "VIP用户优先处理" |
| operator_id | string | 是 | 操作坐席ID | "AGENT_001" |
| operated_at | datetime | 是 | 操作时间 | "2026-07-11 15:35" |
---
## 3. 拓扑预览原型
### 3.1 功能概述
在知识图谱管理界面提供拓扑关系预览功能，展示知识点（Neo4j图节点）之间的依赖关系、派生关系，支持节点展开/折叠、高亮路径、搜索定位。
### 3.2 管理后台拓扑预览页面原型
#### 3.2.1 页面原型 — 拓扑预览主页面
```html
<!-- 管理后台：知识图谱拓扑预览页面 -->
<div style="background:#f5f7fa;font-family:'PingFang SC',sans-serif;font-size:13px;padding:20px">
<!-- 页面标题栏 -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px">
<h2 style="font-size:20px;font-weight:600;margin:0;color:#1e293b">🔮 知识图谱拓扑预览</h2>
<span style="background:#e8f5e9;color:#07C160;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600">Neo4j</span>
</div>
<div style="display:flex;gap:8px">
<button style="padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:13px">📥 导出图谱</button>
<button style="padding:8px 16px;border:none;border-radius:6px;background:#07C160;color:#fff;cursor:pointer;font-size:13px">🔄 同步Neo4j</button>
</div>
</div>
<!-- 统计栏 -->
<div style="display:flex;gap:12px;margin-bottom:16px">
<div style="flex:1;background:#fff;border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:#dcfce7;display:flex;align-items:center;justify-content:center;font-size:16px">🔵</div>
<div><div style="font-size:20px;font-weight:700;color:#1e293b">156</div><div style="font-size:11px;color:#64748b">Issue节点</div></div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:#fef3c7;display:flex;align-items:center;justify-content:center;font-size:16px">🟡</div>
<div><div style="font-size:20px;font-weight:700;color:#1e293b">89</div><div style="font-size:11px;color:#64748b">Action节点</div></div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:16px">⚪</div>
<div><div style="font-size:20px;font-weight:700;color:#1e293b">234</div><div style="font-size:11px;color:#64748b">Relation节点</div></div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:16px">🔗</div>
<div><div style="font-size:20px;font-weight:700;color:#1e293b">412</div><div style="font-size:11px;color:#64748b">关系边</div></div>
</div>
<div style="flex:1;background:#fff;border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:#fee2e2;display:flex;align-items:center;justify-content:center;font-size:16px">⏳</div>
<div><div style="font-size:20px;font-weight:700;color:#1e293b">12</div><div style="font-size:11px;color:#64748b">待审核节点</div></div>
</div>
</div>
<!-- 工具栏 -->
<div style="background:#fff;border-radius:8px;padding:10px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap">
<div style="display:flex;align-items:center;gap:6px">
<input type="text" placeholder="搜索节点名称..." style="width:220px;padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px">
<button style="padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:#3b82f6">🔍 搜索</button>
</div>
<div style="display:flex;align-items:center;gap:6px">
<span style="font-size:12px;color:#64748b">类型:</span>
<label style="display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer"><input type="checkbox" checked> <span style="color:#07C160">● Issue</span></label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer"><input type="checkbox" checked> <span style="color:#f59e0b">● Action</span></label>
<label style="display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer"><input type="checkbox" checked> <span style="color:#9ca3af">● Relation</span></label>
</div>
<div style="display:flex;align-items:center;gap:6px">
<span style="font-size:12px;color:#64748b">关系:</span>
<select style="padding:4px 10px;border:1px solid #e2e8f0;border-radius:4px;font-size:12px;background:#fff">
<option>全部关系</option><option>LEADS_TO</option><option>RELATES_TO</option><option>CAN_JUMP_TO</option><option>DERIVED_FROM</option>
</select>
</div>
<div style="display:flex;gap:0;margin-left:auto">
<button style="padding:5px 14px;border:1px solid #07C160;border-radius:6px 0 0 6px;background:#07C160;color:#fff;cursor:pointer;font-size:12px">🌐 力导向</button>
<button style="padding:5px 14px;border:1px solid #e2e8f0;border-left:none;border-radius:0 6px 6px 0;background:#fff;color:#64748b;cursor:pointer;font-size:12px">📋 层次树</button>
</div>
<div style="display:flex;gap:4px">
<button style="width:30px;height:30px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:14px">＋</button>
<button style="width:30px;height:30px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:14px">－</button>
<button style="width:30px;height:30px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px">1:1</button>
</div>
</div>
<!-- 主体区域：图谱画布 + 右侧节点详情 -->
<div style="display:flex;gap:12px;height:520px">
<!-- 图谱画布 -->
<div style="flex:1;background:#fff;border-radius:8px;border:1px solid #e2e8f0;position:relative;overflow:hidden">
<!-- 图例 -->
<div style="position:absolute;top:12px;left:12px;background:rgba(255,255,255,0.95);border:1px solid #e2e8f0;border-radius:6px;padding:8px 12px;z-index:10">
<div style="font-size:11px;font-weight:600;color:#64748b;margin-bottom:6px">图例</div>
<div style="display:flex;flex-direction:column;gap:4px">
<div style="display:flex;align-items:center;gap:6px;font-size:11px"><div style="width:12px;height:12px;border-radius:50%;background:#07C160"></div><span style="color:#1e293b">Issue（问题）</span></div>
<div style="display:flex;align-items:center;gap:6px;font-size:11px"><div style="width:12px;height:12px;border-radius:50%;background:#f59e0b"></div><span style="color:#1e293b">Action（处置）</span></div>
<div style="display:flex;align-items:center;gap:6px;font-size:11px"><div style="width:12px;height:12px;border-radius:50%;background:#9ca3af"></div><span style="color:#1e293b">Relation（关联）</span></div>
</div>
</div>
<!-- 拓扑图SVG示意 -->
<svg viewBox="0 0 600 500" style="width:100%;height:100%">
<!-- 关系连线 -->
<line x1="300" y1="60" x2="150" y2="180" stroke="#07C160" stroke-width="2" opacity="0.6"/>
<line x1="300" y1="60" x2="450" y2="180" stroke="#07C160" stroke-width="2" opacity="0.6"/>
<line x1="150" y1="180" x2="150" y2="320" stroke="#f59e0b" stroke-width="2" opacity="0.6"/>
<line x1="450" y1="180" x2="450" y2="320" stroke="#07C160" stroke-width="2" opacity="0.6"/>
<line x1="150" y1="320" x2="300" y2="420" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="5"/>
<line x1="450" y1="320" x2="300" y2="420" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="5"/>
<line x1="150" y1="180" x2="450" y2="180" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="4"/>
<!-- 高亮路径（选中节点到根节点） -->
<line x1="300" y1="60" x2="150" y2="180" stroke="#3b82f6" stroke-width="3.5" opacity="0.8"/>
<line x1="150" y1="180" x2="150" y2="320" stroke="#3b82f6" stroke-width="3.5" opacity="0.8"/>
<!-- 关系标签 -->
<text x="225" y="120" text-anchor="middle" font-size="9" fill="#07C160" font-weight="600">LEADS_TO</text>
<text x="375" y="120" text-anchor="middle" font-size="9" fill="#07C160" font-weight="600">LEADS_TO</text>
<text x="180" y="250" text-anchor="middle" font-size="9" fill="#f59e0b" font-weight="600">LEADS_TO</text>
<text x="300" y="370" text-anchor="middle" font-size="9" fill="#9ca3af">RELATES_TO</text>
<!-- 根节点：邮箱客户端问题 -->
<circle cx="300" cy="60" r="24" fill="#07C160" opacity="0.15"/>
<circle cx="300" cy="60" r="24" fill="none" stroke="#07C160" stroke-width="2.5"/>
<text x="300" y="56" text-anchor="middle" font-size="9" fill="#64748b">问题</text>
<text x="300" y="68" text-anchor="middle" font-size="8" fill="#07C160" font-weight="600">邮箱客户端</text>
<!-- Issue节点：Outlook登录失败（选中状态-高亮） -->
<circle cx="150" cy="180" r="22" fill="#3b82f6" opacity="0.2"/>
<circle cx="150" cy="180" r="22" fill="none" stroke="#3b82f6" stroke-width="3"/>
<text x="150" y="176" text-anchor="middle" font-size="9" fill="#64748b">问题</text>
<text x="150" y="188" text-anchor="middle" font-size="8" fill="#3b82f6" font-weight="600">登录失败</text>
<!-- Issue节点：OWA访问 -->
<circle cx="450" cy="180" r="22" fill="#07C160" opacity="0.15"/>
<circle cx="450" cy="180" r="22" fill="none" stroke="#07C160" stroke-width="2"/>
<text x="450" y="176" text-anchor="middle" font-size="9" fill="#64748b">问题</text>
<text x="450" y="188" text-anchor="middle" font-size="8" fill="#07C160" font-weight="600">OWA访问</text>
<!-- Action节点：密码重置（选中路径中-高亮） -->
<circle cx="150" cy="320" r="20" fill="#f59e0b" opacity="0.2"/>
<circle cx="150" cy="320" r="20" fill="none" stroke="#f59e0b" stroke-width="2.5"/>
<text x="150" y="316" text-anchor="middle" font-size="9" fill="#64748b">处置</text>
<text x="150" y="328" text-anchor="middle" font-size="8" fill="#b45309" font-weight="600">密码重置</text>
<!-- Action节点：使用Web版 -->
<circle cx="450" cy="320" r="20" fill="#f59e0b" opacity="0.15"/>
<circle cx="450" cy="320" r="20" fill="none" stroke="#f59e0b" stroke-width="2"/>
<text x="450" y="316" text-anchor="middle" font-size="9" fill="#64748b">处置</text>
<text x="450" y="328" text-anchor="middle" font-size="8" fill="#b45309" font-weight="600">Web版</text>
<!-- Relation节点：AD域 -->
<circle cx="300" cy="420" r="16" fill="#e2e8f0"/>
<circle cx="300" cy="420" r="16" fill="none" stroke="#9ca3af" stroke-width="1.5"/>
<text x="300" y="424" text-anchor="middle" font-size="8" fill="#64748b">AD域</text>
</svg>
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:11px;color:#9ca3af;background:rgba(255,255,255,0.8);padding:3px 10px;border-radius:4px">📌 拖拽可移动节点 · 滚轮缩放 · 点击节点查看详情 · 双击展开/折叠</div>
</div>
<!-- 右侧：节点详情面板 -->
<div style="width:280px;background:#fff;border-radius:8px;display:flex;flex-direction:column;overflow:hidden">
<div style="padding:12px 14px;border-bottom:1px solid #e2e8f0">
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
<div style="width:10px;height:10px;border-radius:50%;background:#3b82f6"></div>
<span style="font-weight:600;font-size:14px;color:#1e293b">Outlook登录失败</span>
</div>
<div style="font-size:11px;color:#9ca3af">节点ID: issue_outlook_login_fail</div>
</div>
<div style="flex:1;overflow-y:auto;padding:12px 14px">
<div style="margin-bottom:12px">
<div style="font-size:11px;font-weight:600;color:#64748b;margin-bottom:6px">节点属性</div>
<div style="display:flex;flex-direction:column;gap:4px">
<div style="display:flex;font-size:12px"><span style="color:#9ca3af;width:70px">类型</span><span style="color:#1e293b;font-weight:500">Issue（问题）</span></div>
<div style="display:flex;font-size:12px"><span style="color:#9ca3af;width:70px">标签</span><span style="color:#1e293b">outlook, login, password</span></div>
<div style="display:flex;font-size:12px"><span style="color:#9ca3af;width:70px">置信度</span><span style="color:#22c55e;font-weight:600">92%</span></div>
<div style="display:flex;font-size:12px"><span style="color:#9ca3af;width:70px">状态</span><span style="font-size:11px;background:#dcfce7;color:#16a34a;padding:1px 8px;border-radius:8px;font-weight:600">已审核</span></div>
<div style="display:flex;font-size:12px"><span style="color:#9ca3af;width:70px">采纳次数</span><span style="color:#1e293b">3次</span></div>
<div style="display:flex;font-size:12px"><span style="color:#9ca3af;width:70px">创建时间</span><span style="color:#1e293b">2026-07-08</span></div>
</div>
</div>
<div style="margin-bottom:12px">
<div style="font-size:11px;font-weight:600;color:#64748b;margin-bottom:6px">关联关系</div>
<div style="display:flex;flex-direction:column;gap:6px">
<div style="background:#f8fafc;border-radius:4px;padding:6px 8px;font-size:12px"><span style="color:#9ca3af">← LEADS_TO</span><div style="color:#07C160;font-weight:500;margin-top:2px">邮箱客户端问题（父节点）</div></div>
<div style="background:#f8fafc;border-radius:4px;padding:6px 8px;font-size:12px"><span style="color:#9ca3af">→ LEADS_TO</span><div style="color:#f59e0b;font-weight:500;margin-top:2px">密码重置（处置方案）</div></div>
<div style="background:#f8fafc;border-radius:4px;padding:6px 8px;font-size:12px"><span style="color:#9ca3af">⇄ RELATES_TO</span><div style="color:#9ca3af;font-weight:500;margin-top:2px">OWA访问（关联问题）</div></div>
</div>
</div>
<div style="margin-bottom:12px">
<div style="font-size:11px;font-weight:600;color:#64748b;margin-bottom:6px">当前高亮路径</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;padding:8px;font-size:12px;color:#3b82f6">邮箱客户端 → 登录失败 → 密码重置</div>
<div style="font-size:11px;color:#9ca3af;margin-top:4px">路径深度: 3 · 关系数: 2</div>
</div>
</div>
<div style="padding:10px 14px;border-top:1px solid #e2e8f0;display:flex;gap:6px">
<button style="flex:1;padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#3b82f6;cursor:pointer;font-size:12px">📝 编辑</button>
<button style="flex:1;padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#07C160;cursor:pointer;font-size:12px">➕ 添加子节点</button>
<button style="padding:6px 12px;border:1px solid #ef4444;border-radius:6px;background:#fff;color:#ef4444;cursor:pointer;font-size:12px">🗑️</button>
</div>
</div>
</div>
</div>
```
#### 3.2.2 页面原型 — 空状态 & 搜索定位
```html
<!-- 管理后台：知识图谱为空时的状态 -->
<div style="background:#fff;border-radius:8px;padding:80px 20px;text-align:center">
<div style="font-size:48px;margin-bottom:12px">📭</div>
<div style="font-size:16px;font-weight:600;color:#1e293b;margin-bottom:6px">知识图谱暂无数据</div>
<div style="font-size:13px;color:#64748b;margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto">请先通过知识迭代管理审核知识建议，审核通过后自动写入Neo4j图</div>
<div style="display:flex;gap:8px;justify-content:center">
<button style="padding:8px 20px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#3b82f6;cursor:pointer;font-size:13px">📚 前往知识迭代管理</button>
<button style="padding:8px 20px;border:none;border-radius:6px;background:#07C160;color:#fff;cursor:pointer;font-size:13px">🔄 从Neo4j同步</button>
</div>
</div>
```
```html
<!-- 管理后台：搜索节点后的高亮定位效果 -->
<div style="background:#fff;border-radius:8px;border:1px solid #e2e8f0;padding:16px;position:relative;height:400px">
<!-- 搜索结果浮层 -->
<div style="position:absolute;top:12px;right:12px;width:240px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);z-index:20">
<div style="padding:8px 12px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between">
<span style="font-size:12px;font-weight:600;color:#1e293b">搜索结果（3条）</span>
<span style="font-size:12px;color:#9ca3af;cursor:pointer">✕</span>
</div>
<div style="max-height:280px;overflow-y:auto">
<div style="padding:8px 12px;border-bottom:1px solid #f8fafc;cursor:pointer;background:#eff6ff">
<div style="display:flex;align-items:center;gap:6px"><div style="width:8px;height:8px;border-radius:50%;background:#3b82f6"></div><span style="font-size:13px;font-weight:500;color:#1e293b">Outlook登录失败</span></div>
<div style="font-size:11px;color:#9ca3af;margin-left:14px;margin-top:2px">Issue · 置信92% · 采纳3次</div>
</div>
<div style="padding:8px 12px;border-bottom:1px solid #f8fafc;cursor:pointer">
<div style="display:flex;align-items:center;gap:6px"><div style="width:8px;height:8px;border-radius:50%;background:#07C160"></div><span style="font-size:13px;font-weight:500;color:#1e293b">Outlook邮件发送失败</span></div>
<div style="font-size:11px;color:#9ca3af;margin-left:14px;margin-top:2px">Issue · 置信85% · 采纳1次</div>
</div>
<div style="padding:8px 12px;cursor:pointer">
<div style="display:flex;align-items:center;gap:6px"><div style="width:8px;height:8px;border-radius:50%;background:#f59e0b"></div><span style="font-size:13px;font-weight:500;color:#1e293b">Outlook配置重置</span></div>
<div style="font-size:11px;color:#9ca3af;margin-left:14px;margin-top:2px">Action · 置信78% · 采纳2次</div>
</div>
</div>
</div>
<!-- 图谱画布（搜索高亮：匹配节点脉冲，非匹配变暗） -->
<svg viewBox="0 0 500 350" style="width:100%;height:100%">
<line x1="250" y1="50" x2="120" y2="150" stroke="#e2e8f0" stroke-width="1"/>
<line x1="250" y1="50" x2="380" y2="150" stroke="#e2e8f0" stroke-width="1"/>
<line x1="120" y1="150" x2="120" y2="270" stroke="#e2e8f0" stroke-width="1"/>
<!-- 匹配节点高亮 + 周围脉冲圈 -->
<circle cx="120" cy="150" r="30" fill="none" stroke="#3b82f6" stroke-width="1" opacity="0.3"/>
<circle cx="120" cy="150" r="38" fill="none" stroke="#3b82f6" stroke-width="1" opacity="0.15"/>
<circle cx="120" cy="150" r="22" fill="#3b82f6" opacity="0.25"/>
<circle cx="120" cy="150" r="22" fill="none" stroke="#3b82f6" stroke-width="3"/>
<text x="120" y="146" text-anchor="middle" font-size="9" fill="#3b82f6" font-weight="600">Issue</text>
<text x="120" y="158" text-anchor="middle" font-size="8" fill="#3b82f6" font-weight="600">登录失败</text>
<!-- 非匹配节点变暗 -->
<circle cx="250" cy="50" r="20" fill="#07C160" opacity="0.08"/>
<circle cx="250" cy="50" r="20" fill="none" stroke="#07C160" stroke-width="1.5" opacity="0.3"/>
<text x="250" y="54" text-anchor="middle" font-size="8" fill="#9ca3af">邮箱客户端</text>
<circle cx="380" cy="150" r="18" fill="#07C160" opacity="0.08"/>
<circle cx="380" cy="150" r="18" fill="none" stroke="#07C160" stroke-width="1.5" opacity="0.3"/>
<text x="380" y="154" text-anchor="middle" font-size="8" fill="#9ca3af">OWA</text>
<circle cx="120" cy="270" r="16" fill="#f59e0b" opacity="0.1"/>
<circle cx="120" cy="270" r="16" fill="none" stroke="#f59e0b" stroke-width="1.5" opacity="0.3"/>
<text x="120" y="274" text-anchor="middle" font-size="7" fill="#9ca3af">密码重置</text>
</svg>
</div>
```
### 3.3 工具栏设计
| 工具 | 控件类型 | 功能说明 | 交互行为 |
|------|---------|---------|---------|
| 搜索框 | input + button | 按节点名称模糊搜索 | 回车/点击搜索，展示结果浮层，点击结果定位并高亮节点 |
| 节点类型筛选 | checkbox × 3 | 筛选Issue/Action/Relation节点 | 勾选/取消即时过滤画布节点 |
| 关系类型筛选 | select | 筛选LEADS_TO/RELATES_TO/CAN_JUMP_TO/DERIVED_FROM | 选择后即时过滤画布连线 |
| 布局切换 | button-group | 力导向布局 / 层次树布局 | 切换后重新渲染图谱 |
| 缩放控制 | button × 3 | 放大 / 缩小 / 重置1:1 | 点击调整画布缩放比例 |
| 导出 | button | 导出图谱为PNG/SVG | 点击弹出格式选择 |
| 同步Neo4j | button | 从Neo4j同步最新图数据 | 点击后loading，完成后刷新统计和图谱 |
### 3.4 节点交互说明
| 交互动作 | 触发方式 | 效果 | 说明 |
|---------|---------|------|------|
| 选中节点 | 单击节点 | 节点高亮（蓝色描边加粗）+ 右侧面板显示详情 + 高亮根节点到该节点的路径 | 同时仅一个节点可被选中 |
| 展开/折叠 | 双击节点 | 折叠时隐藏子节点及其连线，展开时恢复显示 | 折叠节点显示"+"标记 |
| 拖拽移动 | 鼠标按住拖拽 | 节点跟随鼠标移动，连线实时更新 | 力导向布局下其他节点自适应调整 |
| 画布平移 | 鼠标按住空白处拖拽 | 整个图谱平移 | |
| 缩放 | 滚轮 / 缩放按钮 | 以鼠标位置为中心缩放 | 缩放范围 0.3x ~ 3x |
| 搜索定位 | 搜索框输入+回车 | 匹配节点高亮脉冲+非匹配节点变暗+右侧浮层展示结果列表 | 点击结果项定位到对应节点 |
| 右键菜单 | 右键节点 | 弹出菜单：编辑、添加子节点、删除、查看关联会话 | 删除需二次确认 |
### 3.5 数据结构建议
```json
{
"nodes": [
{
"id": "issue_outlook_login_fail",
"name": "Outlook登录失败",
"type": "issue",
"properties": {
"category": "软件",
"tags": ["outlook", "login", "password"],
"confidence": 0.92,
"status": "approved",
"adopted_count": 3,
"created_at": "2026-07-08T10:30:00Z",
"source": "conversation_analysis"
},
"parent_id": "issue_email_client"
},
{
"id": "action_password_reset",
"name": "密码重置",
"type": "action",
"properties": {
"content": "引导用户通过CTRL+ALT+DEL更改AD域密码",
"confidence": 0.89,
"status": "approved",
"adopted_count": 5
}
},
{
"id": "relation_ad_domain",
"name": "AD域",
"type": "relation",
"properties": {
"description": "Active Directory域服务",
"tags": ["ad", "domain", "auth"]
}
}
],
"links": [
{
"source": "issue_email_client",
"target": "issue_outlook_login_fail",
"type": "LEADS_TO",
"weight": 0.9
},
{
"source": "issue_outlook_login_fail",
"target": "action_password_reset",
"type": "LEADS_TO",
"weight": 0.92
},
{
"source": "action_password_reset",
"target": "relation_ad_domain",
"type": "RELATES_TO",
"weight": 0.7
}
]
}
```
### 3.6 页面状态说明表
| 页面状态 | 触发条件 | UI表现 | 用户可操作 |
|---------|---------|--------|-----------|
| 加载中 | 页面初始化/同步Neo4j | 画布显示骨架屏 + loading动画 | 无（等待） |
| 图谱为空 | Neo4j无数据 | 展示空状态 + 引导按钮 | 前往知识迭代管理、从Neo4j同步 |
| 图谱加载完成 | 数据返回 | 展示拓扑图 + 统计数据 | 搜索、筛选、缩放、拖拽、选中节点 |
| 节点选中 | 单击节点 | 节点高亮 + 路径高亮 + 右侧详情面板 | 编辑、添加子节点、删除 |
| 搜索中 | 输入搜索词 | 画布非匹配节点变暗 + 右侧结果浮层 | 点击结果定位、关闭搜索 |
| 搜索无结果 | 无匹配节点 | 画布恢复 + 浮层显示"未找到匹配节点" | 修改搜索词 |
| 布局切换中 | 切换布局类型 | 画布loading + 重新渲染动画 | 无（等待渲染完成） |
| 同步中 | 点击同步Neo4j | 按钮loading + 统计数据刷新中 | 无（等待） |
| 同步失败 | Neo4j连接异常 | Toast错误提示 + 保留旧数据 | 重试同步 |
---
## 4. 代答排除原型
### 4.1 功能概述
在AI自动回复场景中，支持配置排除规则，避免AI代答特定类型的问题（如敏感问题、需人工判断的问题、合规要求等），被排除的问题转人工处理。
### 4.2 管理后台代答排除配置页面原型
#### 4.2.1 页面原型 — 规则列表主页面
```html
<!-- 管理后台：代答排除规则列表页面 -->
<div style="background:#f5f7fa;font-family:'PingFang SC',sans-serif;font-size:13px;padding:20px">
<!-- 页面标题栏 -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px">
<h2 style="font-size:20px;font-weight:600;margin:0;color:#1e293b">✋ 代答排除配置</h2>
<span style="background:#fef3c7;color:#b45309;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600">合规</span>
</div>
<div style="display:flex;gap:8px">
<button style="padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:13px">📥 导入规则</button>
<button style="padding:8px 16px;border:none;border-radius:6px;background:#07C160;color:#fff;cursor:pointer;font-size:13px">＋ 新建规则</button>
</div>
</div>
<!-- 说明横幅 -->
<div style="background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:10px 14px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px">
<span style="font-size:16px">💡</span>
<div style="flex:1;font-size:12px;color:#92400e;line-height:1.6">
<strong>代答排除规则</strong>用于阻止AI自动回复特定类型的问题。当用户提问命中排除规则时，AI不会自动回复，而是直接转人工坐席处理。<br>
适用场景：敏感问题（薪资/人事）、需人工判断的问题（投诉/纠纷）、合规要求（数据删除/权限变更）等。
</div>
</div>
<!-- 统计栏 -->
<div style="display:flex;gap:12px;margin-bottom:16px">
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center"><div style="font-size:24px;font-weight:700;color:#07C160">8</div><div style="font-size:12px;color:#64748b">启用规则</div></div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center"><div style="font-size:24px;font-weight:700;color:#9ca3af">3</div><div style="font-size:12px;color:#64748b">停用规则</div></div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center"><div style="font-size:24px;font-weight:700;color:#3b82f6">156</div><div style="font-size:12px;color:#64748b">本月命中次数</div></div>
<div style="flex:1;background:#fff;border-radius:8px;padding:12px;text-align:center"><div style="font-size:24px;font-weight:700;color:#8b5cf6">156</div><div style="font-size:12px;color:#64748b">本月转人工数</div></div>
</div>
<!-- 筛选栏 -->
<div style="background:#fff;border-radius:8px;padding:10px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap">
<input type="text" placeholder="搜索规则名称..." style="width:200px;padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px">
<select style="padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;background:#fff"><option>全部状态</option><option>启用</option><option>停用</option></select>
<select style="padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;background:#fff"><option>全部匹配方式</option><option>关键词匹配</option><option>正则匹配</option><option>意图匹配</option><option>分类排除</option></select>
<select style="padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;background:#fff"><option>全部优先级</option><option>P0-最高</option><option>P1-高</option><option>P2-中</option><option>P3-低</option></select>
<button style="padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:#3b82f6">🔍 查询</button>
<button style="padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:#64748b">重置</button>
</div>
<!-- 规则列表表格 -->
<div style="background:#fff;border-radius:8px;overflow:hidden">
<table style="width:100%;border-collapse:collapse;font-size:13px">
<thead>
<tr style="background:#f8fafc;border-bottom:2px solid #e2e8f0">
<th style="padding:10px 12px;text-align:left;font-weight:600;color:#64748b;width:40px"><input type="checkbox"></th>
<th style="padding:10px 12px;text-align:left;font-weight:600;color:#64748b;width:50px">优先级</th>
<th style="padding:10px 12px;text-align:left;font-weight:600;color:#64748b">规则名称</th>
<th style="padding:10px 12px;text-align:left;font-weight:600;color:#64748b;width:100px">匹配方式</th>
<th style="padding:10px 12px;text-align:left;font-weight:600;color:#64748b">匹配条件</th>
<th style="padding:10px 12px;text-align:center;font-weight:600;color:#64748b;width:80px">状态</th>
<th style="padding:10px 12px;text-align:center;font-weight:600;color:#64748b;width:90px">本月命中</th>
<th style="padding:10px 12px;text-align:left;font-weight:600;color:#64748b;width:140px">更新时间</th>
<th style="padding:10px 12px;text-align:center;font-weight:600;color:#64748b;width:140px">操作</th>
</tr>
</thead>
<tbody>
<!-- 规则行1：P0 关键词 启用 -->
<tr style="border-bottom:1px solid #f1f5f9">
<td style="padding:10px 12px"><input type="checkbox"></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:600">P0</span></td>
<td style="padding:10px 12px"><div style="font-weight:500;color:#1e293b">薪资人事类问题排除</div><div style="font-size:11px;color:#9ca3af;margin-top:2px">防止AI回答薪资、人事变动等敏感问题</div></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#dbeafe;color:#3b82f6;padding:2px 8px;border-radius:4px">关键词</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">薪资, 工资, 调薪, 晋升, 辞退, 离职...</td>
<td style="padding:10px 12px;text-align:center"><div style="display:inline-block;width:32px;height:18px;border-radius:9px;background:#07C160;position:relative"><div style="width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:16px"></div></div></td>
<td style="padding:10px 12px;text-align:center"><span style="font-size:13px;font-weight:600;color:#1e293b">42</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">2026-07-09 14:30</td>
<td style="padding:10px 12px;text-align:center">
<button style="font-size:12px;color:#3b82f6;background:none;border:none;cursor:pointer;padding:2px 6px">编辑</button>
<button style="font-size:12px;color:#f59e0b;background:none;border:none;cursor:pointer;padding:2px 6px">停用</button>
<button style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:2px 6px">删除</button>
</td>
</tr>
<!-- 规则行2：P0 意图 启用 -->
<tr style="border-bottom:1px solid #f1f5f9">
<td style="padding:10px 12px"><input type="checkbox"></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#fee2e2;color:#ef4444;padding:2px 6px;border-radius:4px;font-weight:600">P0</span></td>
<td style="padding:10px 12px"><div style="font-weight:500;color:#1e293b">数据删除/修改操作排除</div><div style="font-size:11px;color:#9ca3af;margin-top:2px">涉及数据安全的操作需人工审核</div></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#ede9fe;color:#8b5cf6;padding:2px 8px;border-radius:4px">意图</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">意图: data_deletion, data_modification</td>
<td style="padding:10px 12px;text-align:center"><div style="display:inline-block;width:32px;height:18px;border-radius:9px;background:#07C160;position:relative"><div style="width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:16px"></div></div></td>
<td style="padding:10px 12px;text-align:center"><span style="font-size:13px;font-weight:600;color:#1e293b">18</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">2026-07-08 10:15</td>
<td style="padding:10px 12px;text-align:center">
<button style="font-size:12px;color:#3b82f6;background:none;border:none;cursor:pointer;padding:2px 6px">编辑</button>
<button style="font-size:12px;color:#f59e0b;background:none;border:none;cursor:pointer;padding:2px 6px">停用</button>
<button style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:2px 6px">删除</button>
</td>
</tr>
<!-- 规则行3：P1 正则 启用 -->
<tr style="border-bottom:1px solid #f1f5f9">
<td style="padding:10px 12px"><input type="checkbox"></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#fef3c7;color:#b45309;padding:2px 6px;border-radius:4px;font-weight:600">P1</span></td>
<td style="padding:10px 12px"><div style="font-weight:500;color:#1e293b">投诉纠纷类问题排除</div><div style="font-size:11px;color:#9ca3af;margin-top:2px">投诉类问题需人工安抚和处理</div></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#fce7f3;color:#ec4899;padding:2px 8px;border-radius:4px">正则</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">/(投诉|举报|纠纷|不公平|歧视).*/</td>
<td style="padding:10px 12px;text-align:center"><div style="display:inline-block;width:32px;height:18px;border-radius:9px;background:#07C160;position:relative"><div style="width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:16px"></div></div></td>
<td style="padding:10px 12px;text-align:center"><span style="font-size:13px;font-weight:600;color:#1e293b">35</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">2026-07-07 16:45</td>
<td style="padding:10px 12px;text-align:center">
<button style="font-size:12px;color:#3b82f6;background:none;border:none;cursor:pointer;padding:2px 6px">编辑</button>
<button style="font-size:12px;color:#f59e0b;background:none;border:none;cursor:pointer;padding:2px 6px">停用</button>
<button style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:2px 6px">删除</button>
</td>
</tr>
<!-- 规则行4：P1 分类 启用 -->
<tr style="border-bottom:1px solid #f1f5f9">
<td style="padding:10px 12px"><input type="checkbox"></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#fef3c7;color:#b45309;padding:2px 6px;border-radius:4px;font-weight:600">P1</span></td>
<td style="padding:10px 12px"><div style="font-weight:500;color:#1e293b">权限变更操作排除</div><div style="font-size:11px;color:#9ca3af;margin-top:2px">系统权限变更需人工审批</div></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#e8f5e9;color:#07C160;padding:2px 8px;border-radius:4px">分类</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">分类: 账号权限申请, 系统管理员权限</td>
<td style="padding:10px 12px;text-align:center"><div style="display:inline-block;width:32px;height:18px;border-radius:9px;background:#07C160;position:relative"><div style="width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:16px"></div></div></td>
<td style="padding:10px 12px;text-align:center"><span style="font-size:13px;font-weight:600;color:#1e293b">28</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">2026-07-06 09:20</td>
<td style="padding:10px 12px;text-align:center">
<button style="font-size:12px;color:#3b82f6;background:none;border:none;cursor:pointer;padding:2px 6px">编辑</button>
<button style="font-size:12px;color:#f59e0b;background:none;border:none;cursor:pointer;padding:2px 6px">停用</button>
<button style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:2px 6px">删除</button>
</td>
</tr>
<!-- 规则行5：P2 关键词 停用 -->
<tr style="border-bottom:1px solid #f1f5f9;opacity:0.6">
<td style="padding:10px 12px"><input type="checkbox"></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#f1f5f9;color:#64748b;padding:2px 6px;border-radius:4px;font-weight:600">P2</span></td>
<td style="padding:10px 12px"><div style="font-weight:500;color:#1e293b">外部网络访问排除</div><div style="font-size:11px;color:#9ca3af;margin-top:2px">已停用：误报率过高</div></td>
<td style="padding:10px 12px"><span style="font-size:11px;background:#dbeafe;color:#3b82f6;padding:2px 8px;border-radius:4px">关键词</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">VPN, 外网, 代理, 翻墙</td>
<td style="padding:10px 12px;text-align:center"><div style="display:inline-block;width:32px;height:18px;border-radius:9px;background:#e2e8f0;position:relative"><div style="width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px"></div></div></td>
<td style="padding:10px 12px;text-align:center"><span style="font-size:13px;font-weight:600;color:#9ca3af">0</span></td>
<td style="padding:10px 12px;font-size:12px;color:#64748b">2026-07-03 11:00</td>
<td style="padding:10px 12px;text-align:center">
<button style="font-size:12px;color:#3b82f6;background:none;border:none;cursor:pointer;padding:2px 6px">编辑</button>
<button style="font-size:12px;color:#22c55e;background:none;border:none;cursor:pointer;padding:2px 6px">启用</button>
<button style="font-size:12px;color:#ef4444;background:none;border:none;cursor:pointer;padding:2px 6px">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 分页 -->
<div style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1f5f9">
<span style="font-size:12px;color:#64748b">共 11 条规则，第 1/3 页</span>
<div style="display:flex;gap:4px">
<button style="padding:4px 10px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px;color:#9ca3af" disabled>上一页</button>
<button style="padding:4px 10px;border:1px solid #07C160;border-radius:4px;background:#07C160;color:#fff;cursor:pointer;font-size:12px">1</button>
<button style="padding:4px 10px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px">2</button>
<button style="padding:4px 10px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px">3</button>
<button style="padding:4px 10px;border:1px solid #e2e8f0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px">下一页</button>
</div>
</div>
</div>
<!-- 批量操作栏 -->
<div style="margin-top:12px;display:flex;gap:8px;align-items:center">
<span style="font-size:12px;color:#64748b">批量操作:</span>
<button style="padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#22c55e">批量启用</button>
<button style="padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#f59e0b">批量停用</button>
<button style="padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#ef4444">批量删除</button>
<span style="font-size:12px;color:#9ca3af;margin-left:8px">已选择 0 条</span>
</div>
</div>
```
#### 4.2.2 页面原型 — 新建/编辑规则表单
```html
<!-- 管理后台：代答排除规则新建/编辑弹窗 -->
<div style="max-width:640px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.12);overflow:hidden;font-family:'PingFang SC',sans-serif;font-size:13px">
<!-- 弹窗标题 -->
<div style="padding:16px 20px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">✋</span><span style="font-size:16px;font-weight:600;color:#1e293b">新建代答排除规则</span></div>
<span style="font-size:18px;color:#9ca3af;cursor:pointer">✕</span>
</div>
<!-- 表单内容 -->
<div style="padding:20px;max-height:520px;overflow-y:auto">
<!-- 规则名称 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">规则名称</span><span style="color:#ef4444;font-size:13px"> *</span></div>
<input type="text" value="薪资人事类问题排除" style="width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;box-sizing:border-box">
<div style="font-size:11px;color:#9ca3af;margin-top:4px">规则名称需唯一，建议使用"排除类型+问题域"格式</div>
</div>
<!-- 规则描述 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">规则描述</span></div>
<textarea style="width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;box-sizing:border-box;resize:vertical;min-height:60px">防止AI回答薪资、人事变动等敏感问题，命中后直接转人工坐席处理</textarea>
</div>
<!-- 优先级 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">优先级</span><span style="color:#ef4444;font-size:13px"> *</span></div>
<div style="display:flex;gap:8px">
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:6px 14px;border:1px solid #ef4444;border-radius:6px;background:#fee2e2"><input type="radio" name="priority" checked> <span style="font-size:13px;color:#ef4444;font-weight:600">P0-最高</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff"><input type="radio" name="priority"> <span style="font-size:13px;color:#b45309">P1-高</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff"><input type="radio" name="priority"> <span style="font-size:13px;color:#64748b">P2-中</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:6px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff"><input type="radio" name="priority"> <span style="font-size:13px;color:#9ca3af">P3-低</span></label>
</div>
<div style="font-size:11px;color:#9ca3af;margin-top:4px">优先级越高越先匹配，同优先级按创建时间排序</div>
</div>
<!-- 匹配方式 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">匹配方式</span><span style="color:#ef4444;font-size:13px"> *</span></div>
<div style="display:flex;gap:8px">
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border:1px solid #07C160;border-radius:6px;background:#e8f5e9;flex:1;justify-content:center"><input type="radio" name="matchType" checked><span style="font-size:13px;color:#07C160;font-weight:600">关键词匹配</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;flex:1;justify-content:center"><input type="radio" name="matchType"><span style="font-size:13px;color:#64748b">正则匹配</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;flex:1;justify-content:center"><input type="radio" name="matchType"><span style="font-size:13px;color:#64748b">意图匹配</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;flex:1;justify-content:center"><input type="radio" name="matchType"><span style="font-size:13px;color:#64748b">分类排除</span></label>
</div>
</div>
<!-- 匹配条件（关键词匹配模式） -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">匹配关键词</span><span style="color:#ef4444;font-size:13px"> *</span></div>
<div style="border:1px solid #e2e8f0;border-radius:6px;padding:8px;min-height:80px">
<span style="display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#07C160;padding:3px 10px;border-radius:12px;font-size:12px;margin:2px">薪资 <span style="cursor:pointer">✕</span></span>
<span style="display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#07C160;padding:3px 10px;border-radius:12px;font-size:12px;margin:2px">工资 <span style="cursor:pointer">✕</span></span>
<span style="display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#07C160;padding:3px 10px;border-radius:12px;font-size:12px;margin:2px">调薪 <span style="cursor:pointer">✕</span></span>
<span style="display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#07C160;padding:3px 10px;border-radius:12px;font-size:12px;margin:2px">晋升 <span style="cursor:pointer">✕</span></span>
<span style="display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#07C160;padding:3px 10px;border-radius:12px;font-size:12px;margin:2px">辞退 <span style="cursor:pointer">✕</span></span>
<span style="display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:#07C160;padding:3px 10px;border-radius:12px;font-size:12px;margin:2px">离职 <span style="cursor:pointer">✕</span></span>
<input type="text" placeholder="输入关键词后回车添加..." style="border:none;outline:none;font-size:13px;padding:4px;width:200px">
</div>
<div style="font-size:11px;color:#9ca3af;margin-top:4px">用户提问包含任一关键词即命中排除规则</div>
</div>
<!-- 匹配范围 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">匹配范围</span></div>
<div style="display:flex;gap:16px">
<label style="display:flex;align-items:center;gap:4px;cursor:pointer"><input type="checkbox" checked> <span style="font-size:13px;color:#1e293b">仅AI自动回复时</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer"><input type="checkbox"> <span style="font-size:13px;color:#1e293b">AI分诊确认时</span></label>
<label style="display:flex;align-items:center;gap:4px;cursor:pointer"><input type="checkbox"> <span style="font-size:13px;color:#1e293b">坐席代答推荐时</span></label>
</div>
<div style="font-size:11px;color:#9ca3af;margin-top:4px">选择在哪些AI环节生效，默认仅在AI自动回复时排除</div>
</div>
<!-- 命中后动作 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">命中后动作</span><span style="color:#ef4444;font-size:13px"> *</span></div>
<select style="width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;background:#fff;box-sizing:border-box">
<option>转人工坐席（默认）</option><option>转人工坐席 + 携带上下文</option><option>仅提示用户转人工</option><option>静默转人工（不提示用户）</option>
</select>
</div>
<!-- 转接提示语 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">转接提示语</span></div>
<textarea style="width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;box-sizing:border-box;resize:vertical;min-height:50px">该问题涉及敏感信息，已为您转接人工坐席处理，请稍候。</textarea>
<div style="font-size:11px;color:#9ca3af;margin-top:4px">命中规则后展示给员工的消息，留空则使用系统默认提示</div>
</div>
<!-- 启用状态 -->
<div style="margin-bottom:16px">
<div style="margin-bottom:6px"><span style="font-size:13px;font-weight:500;color:#1e293b">启用状态</span></div>
<div style="display:flex;align-items:center;gap:8px">
<div style="width:40px;height:22px;border-radius:11px;background:#07C160;position:relative;cursor:pointer"><div style="width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:20px"></div></div>
<span style="font-size:13px;color:#07C160;font-weight:500">已启用</span>
</div>
</div>
</div>
<!-- 弹窗底部操作 -->
<div style="padding:12px 20px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;background:#f8fafc">
<button style="padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;cursor:pointer;font-size:13px">🔍 测试匹配</button>
<div style="display:flex;gap:8px">
<button style="padding:8px 20px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;cursor:pointer;font-size:13px">取消</button>
<button style="padding:8px 20px;border:none;border-radius:6px;background:#07C160;color:#fff;cursor:pointer;font-size:13px;font-weight:500">保存规则</button>
</div>
</div>
</div>
```
#### 4.2.3 页面原型 — 空状态 & 测试匹配弹窗
```html
<!-- 管理后台：无排除规则时的空状态 -->
<div style="background:#fff;border-radius:8px;padding:80px 20px;text-align:center">
<div style="font-size:48px;margin-bottom:12px">📋</div>
<div style="font-size:16px;font-weight:600;color:#1e293b;margin-bottom:6px">暂无代答排除规则</div>
<div style="font-size:13px;color:#64748b;margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto">当前未配置任何代答排除规则，AI将对所有问题尝试自动回复。<br>建议为敏感问题、合规要求等场景配置排除规则。</div>
<button style="padding:10px 24px;border:none;border-radius:6px;background:#07C160;color:#fff;cursor:pointer;font-size:14px;font-weight:500">＋ 新建第一条规则</button>
</div>
```
```html
<!-- 管理后台：规则匹配测试弹窗 -->
<div style="max-width:500px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.12);overflow:hidden;font-family:'PingFang SC',sans-serif;font-size:13px">
<div style="padding:16px 20px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🔍</span><span style="font-size:16px;font-weight:600;color:#1e293b">测试规则匹配</span></div>
<span style="font-size:18px;color:#9ca3af;cursor:pointer">✕</span>
</div>
<div style="padding:20px">
<div style="margin-bottom:12px"><span style="font-size:13px;font-weight:500;color:#1e293b">输入测试文本</span></div>
<textarea style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;box-sizing:border-box;resize:vertical;min-height:70px">我想了解一下最近有没有调薪计划</textarea>
<div style="text-align:right;margin-top:8px"><button style="padding:6px 16px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px">▶ 执行测试</button></div>
<!-- 测试结果 -->
<div style="margin-top:16px;border:1px solid #e2e8f0;border-radius:8px;padding:14px">
<div style="margin-bottom:10px"><span style="font-size:12px;font-weight:600;color:#64748b">测试结果</span></div>
<div style="display:flex;align-items:flex-start;gap:10px;padding:10px;background:#fef2f2;border-radius:6px">
<span style="font-size:20px">🚫</span>
<div style="flex:1">
<div style="font-weight:600;font-size:14px;color:#ef4444">命中排除规则</div>
<div style="font-size:12px;color:#64748b;margin-top:4px">命中规则: <strong>薪资人事类问题排除</strong>（P0）</div>
<div style="font-size:12px;color:#64748b;margin-top:2px">命中关键词: <span style="background:#fee2e2;color:#ef4444;padding:1px 6px;border-radius:4px;font-weight:600">调薪</span></div>
<div style="font-size:12px;color:#64748b;margin-top:2px">执行动作: 转人工坐席 + 携带上下文</div>
</div>
</div>
<div style="margin-top:10px;font-size:12px;color:#64748b">
<div style="margin-bottom:4px"><strong>匹配详情:</strong></div>
<div style="background:#f8fafc;border-radius:4px;padding:8px;font-family:monospace;font-size:11px;color:#1e293b">
输入文本: "我想了解一下最近有没有<span style="background:#fee2e2;color:#ef4444">调薪</span>计划"<br>
匹配模式: 关键词包含<br>
匹配位置: 第15-17字符<br>
匹配耗时: 2ms
</div>
</div>
</div>
</div>
<div style="padding:12px 20px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;background:#f8fafc">
<button style="padding:8px 20px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;cursor:pointer;font-size:13px">关闭</button>
<button style="padding:8px 20px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px">再次测试</button>
</div>
</div>
```
### 4.3 规则匹配流程Mermaid图
```mermaid
flowchart TD
A[员工发送消息] --> B[AI意图识别]
B --> C{代答排除检查}
C -->|无启用规则| D[正常AI自动回复流程]
C -->|有启用规则| E[按优先级排序规则列表]
E --> F[取最高优先级规则]
F --> G{匹配方式判断}
G -->|关键词匹配| H[检查用户消息是否包含关键词]
G -->|正则匹配| I[正则表达式匹配用户消息]
G -->|意图匹配| J[检查AI识别的意图是否在排除列表中]
G -->|分类排除| K[检查问题分类是否在排除分类中]
H --> L{是否命中}
I --> L
J --> L
K --> L
L -->|命中| M[执行命中后动作]
L -->|未命中| N{还有下一优先级规则?}
N -->|是| O[取下一优先级规则]
O --> G
N -->|否| D
M --> P{命中后动作类型}
P -->|转人工坐席| Q[携带上下文转接坐席]
P -->|转人工+上下文| Q
P -->|仅提示转人工| R[展示提示语 等待用户确认]
P -->|静默转人工| S[静默转接 不提示用户]
Q --> T[记录命中日志]
R --> T
S --> T
T --> U[更新规则命中统计]
U --> V[流程结束]
D --> V
```
### 4.4 字段定义表
#### 规则列表字段
| 字段名 | 类型 | 必填 | 说明 | 示例 |
|--------|------|------|------|------|
| rule_id | string | 是 | 规则唯一ID（自动生成） | "RULE_001" |
| rule_name | string | 是 | 规则名称（唯一） | "薪资人事类问题排除" |
| rule_description | string | 否 | 规则描述 | "防止AI回答薪资、人事变动等敏感问题" |
| priority | enum | 是 | 优先级 | "P0" / "P1" / "P2" / "P3" |
| match_type | enum | 是 | 匹配方式 | "keyword" / "regex" / "intent" / "category" |
| match_condition | string | 是 | 匹配条件 | "薪资,工资,调薪,晋升,辞退,离职" |
| match_scope | array | 是 | 匹配范围 | ["ai_auto_reply"] |
| action_type | enum | 是 | 命中后动作 | "transfer_human" / "transfer_human_with_context" / "prompt_transfer" / "silent_transfer" |
| transfer_message | string | 否 | 转接提示语 | "该问题涉及敏感信息，已为您转接人工坐席处理" |
| status | enum | 是 | 启用状态 | "enabled" / "disabled" |
| hit_count | int | 是 | 命中次数（本月） | 42 |
| created_by | string | 是 | 创建人 | "admin" |
| created_at | datetime | 是 | 创建时间 | "2026-07-09 14:30:00" |
| updated_at | datetime | 是 | 更新时间 | "2026-07-09 14:30:00" |
#### 匹配方式说明
| 匹配方式 | 标识色 | 匹配条件格式 | 匹配逻辑 | 适用场景 |
|---------|--------|-------------|---------|---------|
| 关键词匹配 | 蓝色 | 逗号分隔的关键词列表 | 用户消息包含任一关键词即命中 | 敏感词、特定术语 |
| 正则匹配 | 粉色 | 正则表达式 | 用户消息匹配正则即命中 | 复杂模式匹配（投诉句式） |
| 意图匹配 | 紫色 | 逗号分隔的意图ID列表 | AI识别的意图在列表中即命中 | 需AI意图识别配合的场景 |
| 分类排除 | 绿色 | 逗号分隔的分类名称列表 | 问题分类在列表中即命中 | 按问题大类整体排除 |
#### 命中后动作说明
| 动作类型 | 说明 | 员工体验 | 坐席体验 |
|---------|------|---------|---------|
| 转人工坐席 | 直接转接坐席队列 | 看到"已转接人工"提示 | 收到转接会话，含基本信息 |
| 转人工+上下文 | 转接时携带AI已收集的上下文 | 看到"已转接人工"提示 | 收到转接会话，含上下文快照 |
| 仅提示转人工 | 提示用户后等待确认 | 看到提示语，可选择确认转人工 | 用户确认后才收到转接 |
| 静默转人工 | 不提示用户直接转接 | 无感知，直接进入人工队列 | 收到转接会话 |
---
## 5. 统一设计规范
### 5.1 颜色规范
| 用途 | 变量名 | 色值 | 使用场景 |
|------|--------|------|---------|
| 主色（企微绿） | --accent | #07C160 | 管理后台主按钮、H5端主色调、AI自助标识 |
| 主色浅 | --accent-light | #e8f5e9 | 主色背景、标签背景 |
| 辅助色（蓝） | --info | #3B82F6 | 坐席端主色调、链接、信息提示 |
| 辅助色浅 | --info-light | #dbeafe | 蓝色标签背景 |
| 警告色（橙） | --warning | #F59E0B | 置信度中等、待处理状态、P1优先级 |
| 警告色浅 | --warning-light | #fef3c7 | 警告标签背景 |
| 危险色（红） | --danger | #EF4444 | 置信度低、紧急、删除操作、P0优先级 |
| 危险色浅 | --danger-light | #fee2e2 | 危险标签背景 |
| 成功色（绿） | --success | #22C55E | 成功状态、启用状态、高置信度 |
| 成功色浅 | --success-light | #dcfce7 | 成功标签背景 |
| 紫色 | --purple | #8B5CF6 | 意图匹配标识、转人工统计 |
| 紫色浅 | --purple-light | #ede9fe | 紫色标签背景 |
| 背景色 | --bg-primary | #f5f7fa | 页面背景 |
| 卡片背景 | --bg-secondary | #ffffff | 卡片、表格背景 |
| 边框色 | --border | #e2e8f0 | 分割线、卡片边框 |
| 主文字 | --text-primary | #1e293b / #1f2937 | 标题、正文 |
| 次文字 | --text-secondary | #64748b / #6b7280 | 描述、标签 |
| 辅助文字 | --text-muted | #9ca3af | 时间、辅助说明 |
### 5.2 字体规范
| 层级 | 管理后台/坐席端 | H5端 |
|------|----------------|------|
| 页面标题 | 20px / 600 | 16px / 600 |
| 区块标题 | 16px / 600 | 15px / 600 |
| 卡片标题 | 14px / 600 | 14px / 500 |
| 正文 | 13px / 400 | 14px / 400 |
| 辅助文字 | 12px / 400 | 12px / 400 |
| 标签文字 | 11px / 600 | 10-11px / 600 |
| 字体族 | 'PingFang SC', 'Microsoft YaHei', sans-serif | -apple-system, BlinkMacSystemFont, sans-serif |
### 5.3 间距规范
| 用途 | 管理后台/坐席端 | H5端 |
|------|----------------|------|
| 页面内边距 | 20px | 12px |
| 卡片内边距 | 14-16px | 12-14px |
| 元素间距 | 12-16px | 8-12px |
| 紧凑间距 | 8px | 6px |
| 圆角 | 6-8px（卡片）/ 4px（输入框） | 12px（气泡）/ 8px（卡片） |
### 5.4 组件复用说明
#### 跨页面复用组件
| 组件名 | 使用页面 | 说明 |
|--------|---------|------|
| 统计概要栏 | 分诊看板、拓扑预览、代答排除 | flex布局，每项含数值+标签，左侧色条标识 |
| 筛选工具栏 | 分诊看板、拓扑预览、代答排除 | input+select组合，右侧操作按钮 |
| 空状态 | 分诊看板、拓扑预览、代答排除 | 居中图标+标题+描述+操作按钮 |
| 状态开关 | 代答排除规则列表 | 32×18px胶囊开关，绿色=启用/灰色=停用 |
| 优先级标签 | 代答排除规则列表 | P0红/P1橙/P2灰/P3浅灰 |
| 匹配方式标签 | 代答排除规则列表 | 蓝(关键词)/粉(正则)/紫(意图)/绿(分类) |
| 置信度标签 | H5分诊卡片、坐席分诊看板 | 绿(≥70%)/橙(50-70%)/红(<50%) |
| 紧急度标签 | 坐席分诊看板 | 红(紧急)/橙(一般)/绿(低) |
#### 图标使用规范
| 图标 | 含义 | 使用场景 |
|------|------|---------|
| 🤖 | AI/机器人 | AI分诊标识、AI自助路由 |
| 👤 | 人工/人员 | 转人工路由、用户信息 |
| 📋 | 列表/审批 | 审批路由、列表视图 |
| 🔀 | 分诊/路由 | 分诊看板标题 |
| 🔮 | 图谱/预览 | 拓扑预览标题 |
| ✋ | 排除/阻止 | 代答排除标题 |
| ⚠️ | 警告 | 置信门控、超时提示 |
| ✅ | 成功/完成 | 转接成功、审核通过 |
| 🔍 | 搜索 | 搜索按钮、测试匹配 |
| 📊 | 统计 | 统计概要栏 |
### 5.5 响应式适配说明
| 端 | 断点 | 布局变化 |
|----|------|---------|
| H5端 | <500px | 单栏布局，分诊卡片全宽 |
| H5端 | ≥500px | 双栏布局（对话+面板），分诊卡片75%宽 |
| 坐席端 | ≥1280px | 三栏工作台（会话列表+对话+AI面板） |
| 管理后台 | ≥1024px | 完整工具栏+表格+侧边面板 |
| 管理后台 | <1024px | 工具栏折叠为图标，侧边面板变为弹窗 |
---
## 附录：文档变更记录
| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| v1.0 | 2026-07-11 | 初始版本，包含分诊交互、拓扑预览、代答排除3个功能的原型设计 | 产品经理 |
---
> **文档结束** | IT智能服务台 · 知识库迭代 · 未实现功能原型设计 v1.0
Reference in New Issue Copy Permalink