Simon
44e77dcb0e
**重构前**（旧编号 02-11）： - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计（HTML 原型） - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书（重复） - docs/11-历史归档/ → deploy-nas-archived **重构后**（新编号 00-07，语义化）： - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ （PRD/原型/认证/会话/AI 服务/坐席/集成） - docs/02-技术文档/ （技术方案/架构图/重构记录/前端改造/实现配置） - docs/03-测试文档/ （E2E/功能用例/版本报告/缺陷单） - docs/04-运维文档/ （部署运维/运维指南） - docs/05-运营文档/ （品牌推广/用户手册） - docs/06-安全审计/ （审计报告） - docs/07-项目管理/ （任务说明书/日报/计划/看板） **净收益**： - 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号） - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录） - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
504 lines
23 KiB
HTML
504 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>统一意图路由层原型</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background: #f5f5f5;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
h1 { color: #333; margin-bottom: 20px; font-size: 24px; }
|
||
h2 { color: #555; margin: 30px 0 15px; font-size: 18px; }
|
||
.prototype-section { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||
|
||
/* 用户端消息处理流程 */
|
||
.flow-container { display: flex; flex-direction: column; gap: 12px; max-width: 600px; margin: 0 auto; }
|
||
.flow-step {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 16px; border-radius: 8px; border: 1px solid #e0e0e0;
|
||
background: #fafafa;
|
||
}
|
||
.flow-step.active { border-color: #1890ff; background: #e6f7ff; }
|
||
.flow-step.success { border-color: #52c41a; background: #f6ffed; }
|
||
.flow-step.fail { border-color: #ff4d4f; background: #fff2f0; }
|
||
.flow-number {
|
||
width: 32px; height: 32px; border-radius: 50%;
|
||
background: #1890ff; color: white;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: bold; font-size: 14px; flex-shrink: 0;
|
||
}
|
||
.flow-content { flex: 1; }
|
||
.flow-title { font-weight: 500; color: #333; }
|
||
.flow-desc { font-size: 13px; color: #666; margin-top: 4px; }
|
||
.flow-arrow {
|
||
text-align: center; color: #999; font-size: 20px;
|
||
}
|
||
|
||
/* 管理员规则配置 */
|
||
.admin-panel { max-width: 900px; margin: 0 auto; }
|
||
.panel-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding-bottom: 16px; border-bottom: 1px solid #e8e8e8; margin-bottom: 16px;
|
||
}
|
||
.panel-title { font-size: 18px; font-weight: 500; }
|
||
.btn {
|
||
padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer;
|
||
font-size: 14px; transition: all 0.2s;
|
||
}
|
||
.btn-primary { background: #1890ff; color: white; }
|
||
.btn-primary:hover { background: #40a9ff; }
|
||
.btn-default { background: white; border: 1px solid #d9d9d9; color: #333; }
|
||
.btn-default:hover { border-color: #40a9ff; color: #40a9ff; }
|
||
|
||
.rule-table { width: 100%; border-collapse: collapse; }
|
||
.rule-table th, .rule-table td {
|
||
padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
.rule-table th { background: #fafafa; font-weight: 500; color: #666; }
|
||
.rule-table tr:hover { background: #fafafa; }
|
||
.tag {
|
||
display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px;
|
||
}
|
||
.tag-blue { background: #e6f7ff; color: #1890ff; }
|
||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||
|
||
/* 知识闭环流程 */
|
||
.cycle-diagram {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 30px 20px; background: #f0f5ff; border-radius: 8px;
|
||
max-width: 800px; margin: 0 auto;
|
||
flex-wrap: wrap; gap: 20px;
|
||
}
|
||
.cycle-step {
|
||
text-align: center; flex: 1; min-width: 120px;
|
||
}
|
||
.cycle-icon {
|
||
width: 60px; height: 60px; border-radius: 50%;
|
||
background: white; border: 2px solid #1890ff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin: 0 auto 8px; font-size: 24px;
|
||
}
|
||
.cycle-label { font-size: 14px; color: #333; }
|
||
.cycle-arrow { font-size: 24px; color: #1890ff; }
|
||
|
||
/* 新增规则弹窗 */
|
||
.modal-overlay {
|
||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
.modal { background: white; border-radius: 8px; width: 500px; max-height: 80vh; overflow: auto; }
|
||
.modal-header {
|
||
padding: 16px 20px; border-bottom: 1px solid #e8e8e8;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.modal-title { font-size: 16px; font-weight: 500; }
|
||
.modal-close { cursor: pointer; font-size: 20px; color: #999; }
|
||
.modal-body { padding: 20px; }
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; }
|
||
.form-input {
|
||
width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
.form-input:focus { border-color: #40a9ff; outline: none; box-shadow: 0 0 0 2px rgba(24,144,255,0.2); }
|
||
.form-select { width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; }
|
||
.modal-footer { padding: 16px 20px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px; }
|
||
|
||
/* 响应结果展示 */
|
||
.result-card {
|
||
background: white; border-radius: 8px; padding: 20px;
|
||
max-width: 500px; margin: 20px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
|
||
.result-icon {
|
||
width: 40px; height: 40px; border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
||
}
|
||
.result-icon.success { background: #f6ffed; color: #52c41a; }
|
||
.result-icon.info { background: #e6f7ff; color: #1890ff; }
|
||
.result-title { font-weight: 500; }
|
||
.result-content { background: #fafafa; padding: 12px; border-radius: 4px; font-size: 14px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🏗️ 统一意图路由层 - 场景原型图</h1>
|
||
|
||
<!-- 场景1：用户端消息处理流程 -->
|
||
<div class="prototype-section">
|
||
<h2>场景1：用户端消息处理流程</h2>
|
||
<div class="flow-container">
|
||
<div class="flow-step">
|
||
<div class="flow-number">1</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">接收用户消息</div>
|
||
<div class="flow-desc">用户发送文本消息"我想申请BYOD补贴"</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step active">
|
||
<div class="flow-number">2</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">第1层：本地快速规则</div>
|
||
<div class="flow-desc">检测到"BYOD"关键词，命中BYOD规则</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step success">
|
||
<div class="flow-number">✓</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">直接返回结果</div>
|
||
<div class="flow-desc">返回BYOD补贴申请链接，流程结束</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分支：未命中本地规则 -->
|
||
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px dashed #ddd;">
|
||
<h3 style="font-size: 14px; color: #666; margin-bottom: 15px;">分支：未命中本地规则</h3>
|
||
<div class="flow-container">
|
||
<div class="flow-step">
|
||
<div class="flow-number">2</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">第1层：本地快速规则</div>
|
||
<div class="flow-desc">未匹配关键词，进入下一层</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step">
|
||
<div class="flow-number">3</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">第2层：Neo4j图谱查询</div>
|
||
<div class="flow-desc">查询知识图谱，匹配问题"如何重置密码"</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step success">
|
||
<div class="flow-number">✓</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">返回解决方案</div>
|
||
<div class="flow-desc">返回重置密码的操作步骤</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景2：知识闭环流程 -->
|
||
<div class="prototype-section">
|
||
<h2>场景2：知识自循环体系</h2>
|
||
<div class="cycle-diagram">
|
||
<div class="cycle-step">
|
||
<div class="cycle-icon">📄</div>
|
||
<div class="cycle-label">训练师上传文档</div>
|
||
</div>
|
||
<div class="cycle-arrow">→</div>
|
||
<div class="cycle-step">
|
||
<div class="cycle-icon">🔄</div>
|
||
<div class="cycle-label">RAGFlow处理</div>
|
||
</div>
|
||
<div class="cycle-arrow">→</div>
|
||
<div class="cycle-step">
|
||
<div class="cycle-icon">✅</div>
|
||
<div class="cycle-label">审批入库</div>
|
||
</div>
|
||
<div class="cycle-arrow">→</div>
|
||
<div class="cycle-step">
|
||
<div class="cycle-icon">🔄</div>
|
||
<div class="cycle-label">同步到Dify</div>
|
||
</div>
|
||
<div class="cycle-arrow">→</div>
|
||
<div class="cycle-step">
|
||
<div class="cycle-icon">🤖</div>
|
||
<div class="cycle-label">AI回答用户</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景3：管理员规则配置 -->
|
||
<div class="prototype-section">
|
||
<h2>场景3：管理员规则配置（后台）</h2>
|
||
<div class="admin-panel">
|
||
<div class="panel-header">
|
||
<div class="panel-title">本地规则配置</div>
|
||
<button class="btn btn-primary">+ 新增规则</button>
|
||
</div>
|
||
|
||
<table class="rule-table">
|
||
<thead>
|
||
<tr>
|
||
<th>规则名称</th>
|
||
<th>类型</th>
|
||
<th>关键词</th>
|
||
<th>优先级</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>打招呼</td>
|
||
<td><span class="tag tag-blue">打招呼</span></td>
|
||
<td>你好、hello、hi</td>
|
||
<td>1</td>
|
||
<td><span class="tag tag-green">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-default" style="padding: 4px 8px; font-size: 12px;">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>转人工</td>
|
||
<td><span class="tag tag-orange">转人工</span></td>
|
||
<td>找人工、转人工、客服</td>
|
||
<td>2</td>
|
||
<td><span class="tag tag-green">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-default" style="padding: 4px 8px; font-size: 12px;">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>BYOD补贴</td>
|
||
<td><span class="tag tag-blue">业务拦截</span></td>
|
||
<td>BYOD、byod、电脑补贴</td>
|
||
<td>3</td>
|
||
<td><span class="tag tag-green">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-default" style="padding: 4px 8px; font-size: 12px;">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>考勤问题</td>
|
||
<td><span class="tag tag-blue">业务拦截</span></td>
|
||
<td>考勤、请假、打卡</td>
|
||
<td>4</td>
|
||
<td><span class="tag tag-green">启用</span></td>
|
||
<td>
|
||
<button class="btn btn-default" style="padding: 4px 8px; font-size: 12px;">编辑</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景4：新增规则弹窗 -->
|
||
<div class="prototype-section">
|
||
<h2>场景4：新增规则（弹窗）</h2>
|
||
<div class="result-card" style="margin: 0 auto;">
|
||
<div class="modal-header">
|
||
<div class="modal-title">新增规则</div>
|
||
<span class="modal-close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">规则名称 *</label>
|
||
<input type="text" class="form-input" placeholder="请输入规则名称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">规则类型 *</label>
|
||
<select class="form-select">
|
||
<option value="">请选择规则类型</option>
|
||
<option value="greeting">打招呼</option>
|
||
<option value="transfer">转人工</option>
|
||
<option value="business">业务拦截</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">关键词 *</label>
|
||
<input type="text" class="form-input" placeholder="多个关键词用逗号分隔">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">返回内容</label>
|
||
<textarea class="form-input" rows="3" placeholder="匹配成功时返回的内容，支持变量"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">优先级</label>
|
||
<input type="number" class="form-input" value="10" min="1" max="100">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-default">取消</button>
|
||
<button class="btn btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景5：响应结果展示 -->
|
||
<div class="prototype-section">
|
||
<h2>场景5：响应结果展示</h2>
|
||
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
|
||
<div class="result-card">
|
||
<div class="result-header">
|
||
<div class="result-icon success">✓</div>
|
||
<div class="result-title">BYOD资格检查结果</div>
|
||
</div>
|
||
<div class="result-content">
|
||
<p><strong>✓ 您符合自备电脑补贴资格</strong></p>
|
||
<p style="margin-top: 8px; color: #666;">请访问以下链接完成申请：</p>
|
||
<p style="margin-top: 8px; color: #1890ff;">https://oa.servyou.com.cn/byod/apply</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<div class="result-header">
|
||
<div class="result-icon info">📋</div>
|
||
<div class="result-title">知识库答案</div>
|
||
</div>
|
||
<div class="result-content">
|
||
<p><strong>重置密码步骤：</strong></p>
|
||
<ol style="margin-top: 8px; padding-left: 20px; color: #666;">
|
||
<li>打开OA系统登录页面</li>
|
||
<li>点击"忘记密码"</li>
|
||
<li>输入工号和手机号</li>
|
||
<li>接收验证码并重置</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景6：业务路由-非IT问题识别 -->
|
||
<div class="prototype-section">
|
||
<h2>场景6：业务路由-非IT问题识别（Dify）</h2>
|
||
<div class="flow-container">
|
||
<div class="flow-step">
|
||
<div class="flow-number">1</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">用户消息</div>
|
||
<div class="flow-desc">"打印机坏了，找谁修？"</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step active">
|
||
<div class="flow-number">2</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">Dify 意图识别</div>
|
||
<div class="flow-desc">intent_type: "non_it_routing", business_category: "行政", routing_confidence: 0.85</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step success">
|
||
<div class="flow-number">3</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">查询业务路由配置</div>
|
||
<div class="flow-desc">匹配到"行政-设备管理"联系人：王芳，分机8002</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow">↓</div>
|
||
|
||
<div class="flow-step success">
|
||
<div class="flow-number">✓</div>
|
||
<div class="flow-content">
|
||
<div class="flow-title">发送联系人名片卡片</div>
|
||
<div class="flow-desc">contact_card 消息，推送企微名片</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景7：业务路由-多层级配置 -->
|
||
<div class="prototype-section">
|
||
<h2>场景7：多层级路由配置（后台）</h2>
|
||
<div style="max-width: 900px; margin: 0 auto;">
|
||
<div style="background: #f5f5f5; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
||
<span style="background: #1890ff; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">部门</span>
|
||
<span style="font-weight: 500;">人力资源部 (HR)</span>
|
||
</div>
|
||
<div style="padding-left: 20px; border-left: 2px solid #ddd; margin-left: 10px;">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
||
<span style="background: #52c41a; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">业务</span>
|
||
<span style="font-weight: 500;">招聘管理</span>
|
||
</div>
|
||
<div style="padding-left: 20px; border-left: 2px solid #ddd; margin-left: 10px;">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
||
<span style="background: #fa8c16; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">应用</span>
|
||
<span>招聘管理系统</span>
|
||
</div>
|
||
<div style="padding-left: 20px; border-left: 2px solid #ddd; margin-left: 10px;">
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="background: #eb2f96; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">联系方式</span>
|
||
<span>张三 - 分机8001</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center; color: #888; font-size: 13px;">
|
||
← 就近匹配原则：优先使用最细粒度的联系方式
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景8：路由决策日志 -->
|
||
<div class="prototype-section">
|
||
<h2>场景8：路由决策日志（后台）</h2>
|
||
<div style="max-width: 800px; margin: 0 auto;">
|
||
<table class="rule-table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>用户消息</th>
|
||
<th>命中层</th>
|
||
<th>结果</th>
|
||
<th>耗时</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>10:30:25</td>
|
||
<td>我想申请BYOD补贴</td>
|
||
<td><span class="tag tag-blue">本地规则</span></td>
|
||
<td><span class="tag tag-green">命中</span></td>
|
||
<td>5ms</td>
|
||
</tr>
|
||
<tr>
|
||
<td>10:31:12</td>
|
||
<td>怎么重置密码</td>
|
||
<td><span class="tag tag-blue">Neo4j图谱</span></td>
|
||
<td><span class="tag tag-green">命中</span></td>
|
||
<td>180ms</td>
|
||
</tr>
|
||
<tr>
|
||
<td>10:32:05</td>
|
||
<td>打印机驱动在哪下载</td>
|
||
<td><span class="tag tag-blue">Dify AI</span></td>
|
||
<td><span class="tag tag-green">回答</span></td>
|
||
<td>2.3s</td>
|
||
</tr>
|
||
<tr>
|
||
<td>10:33:00</td>
|
||
<td>帮我订会议室</td>
|
||
<td><span class="tag tag-blue">转人工</span></td>
|
||
<td><span class="tag tag-orange">转接中</span></td>
|
||
<td>1.2s</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 30px; color: #999; font-size: 13px;">
|
||
<p>统一意图路由层 - 原型图 v1.1（含业务路由推荐）| 2026-07-18</p>
|
||
</div>
|
||
</body>
|
||
</html> |