506 lines
30 KiB
HTML
506 lines
30 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>统一意图路由层 - 前端页面原型v2</title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; 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; border-bottom: 2px solid #07C160; padding-bottom: 8px; }
|
||
|
|
.page-container { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||
|
|
|
||
|
|
/* 管理后台统一样式 */
|
||
|
|
.admin-container { display: flex; min-height: 600px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
|
||
|
|
.admin-menu { width: 180px; background: #fafafa; border-right: 1px solid #e8e8e8; }
|
||
|
|
.menu-item { padding: 14px 20px; cursor: pointer; border-left: 3px solid transparent; display: flex; align-items: center; gap: 10px; }
|
||
|
|
.menu-item:hover { background: #e6f7ff; }
|
||
|
|
.menu-item.active { background: #e6f7ff; border-left-color: #07C160; color: #07C160; font-weight: 500; }
|
||
|
|
.menu-icon { font-size: 16px; }
|
||
|
|
.admin-content { flex: 1; padding: 20px; }
|
||
|
|
|
||
|
|
/* 搜索栏 */
|
||
|
|
.search-bar { display: flex; gap: 12px; margin-bottom: 16px; padding: 16px; background: #fafafa; border-radius: 8px; }
|
||
|
|
.search-bar input { flex: 1; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
|
||
|
|
.search-bar select { padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
|
||
|
|
.btn { padding: 8px 16px; border-radius: 4px; font-size: 13px; cursor: pointer; border: none; }
|
||
|
|
.btn-primary { background: #07C160; color: white; }
|
||
|
|
.btn-default { background: white; border: 1px solid #d9d9d9; color: #333; }
|
||
|
|
|
||
|
|
/* 表格 */
|
||
|
|
.data-table { width: 100%; border-collapse: collapse; }
|
||
|
|
.data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8; }
|
||
|
|
.data-table th { background: #fafafa; font-weight: 500; color: #666; font-size: 13px; }
|
||
|
|
.data-table tr:hover { background: #fafafa; }
|
||
|
|
|
||
|
|
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
||
|
|
.tag-green { background: #f6ffed; color: #52c41a; }
|
||
|
|
.tag-blue { background: #e6f7ff; color: #1890ff; }
|
||
|
|
.tag-orange { background: #fff7e6; color: #fa8c16; }
|
||
|
|
.tag-purple { background: #f9f0ff; color: #722ed1; }
|
||
|
|
.tag-gray { background: #f5f5f5; color: #999; }
|
||
|
|
|
||
|
|
/* 规则类型图标 */
|
||
|
|
.rule-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; font-size: 12px; margin-right: 8px; }
|
||
|
|
.icon-greeting { background: #e6f7ff; color: #1890ff; }
|
||
|
|
.icon-transfer { background: #fff7e6; color: #fa8c16; }
|
||
|
|
.icon-bypass { background: #f6ffed; color: #52c41a; }
|
||
|
|
.icon-routing { background: #f9f0ff; color: #722ed1; }
|
||
|
|
|
||
|
|
/* 分隔线 */
|
||
|
|
.divider { height: 1px; background: #e8e8e8; margin: 8px 0; }
|
||
|
|
|
||
|
|
/* H5用户端 */
|
||
|
|
.h5-container { max-width: 375px; margin: 0 auto; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
|
||
|
|
.h5-header { background: #07C160; color: white; padding: 14px 16px; text-align: center; font-weight: 500; font-size: 16px; }
|
||
|
|
.h5-messages { height: 500px; overflow-y: auto; padding: 12px; background: #f5f5f5; }
|
||
|
|
.msg { margin-bottom: 12px; display: flex; align-items: flex-start; }
|
||
|
|
.msg-user { justify-content: flex-end; }
|
||
|
|
.msg-ai { justify-content: flex-start; }
|
||
|
|
.msg-bubble { max-width: 80%; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
|
||
|
|
.msg-user .msg-bubble { background: #07C160; color: white; border-top-right-radius: 2px; }
|
||
|
|
.msg-ai .msg-bubble { background: white; border: 1px solid #e8e8e8; border-top-left-radius: 2px; }
|
||
|
|
|
||
|
|
/* 名片卡片 */
|
||
|
|
.contact-card { background: white; border-radius: 8px; border: 1px solid #e8e8e8; overflow: hidden; width: 260px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
||
|
|
.card-header { display: flex; align-items: center; padding: 12px; background: #fafafa; border-bottom: 1px solid #eee; }
|
||
|
|
.card-avatar { width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(135deg, #07C160, #06ad56); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; }
|
||
|
|
.card-info { margin-left: 12px; flex: 1; }
|
||
|
|
.card-name { font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 6px; }
|
||
|
|
.card-badge { font-size: 10px; background: #eee; color: #666; padding: 2px 6px; border-radius: 2px; }
|
||
|
|
.card-title { font-size: 12px; color: #888; margin-top: 2px; }
|
||
|
|
.card-body { padding: 12px; }
|
||
|
|
.card-row { display: flex; margin-bottom: 6px; font-size: 13px; }
|
||
|
|
.card-label { color: #888; width: 56px; }
|
||
|
|
.card-value { flex: 1; color: #333; }
|
||
|
|
.card-value.highlight { color: #07C160; font-weight: 500; }
|
||
|
|
.card-action { padding: 12px; border-top: 1px solid #eee; }
|
||
|
|
.card-btn { width: 100%; padding: 10px; background: #07C160; color: white; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; }
|
||
|
|
|
||
|
|
/* 坐席端 */
|
||
|
|
.agent-container { display: flex; height: 550px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
|
||
|
|
.agent-sidebar { width: 180px; background: #fafafa; border-right: 1px solid #e8e8e8; }
|
||
|
|
.sidebar-item { padding: 12px 16px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; gap: 8px; }
|
||
|
|
.sidebar-item:hover, .sidebar-item.active { background: #e6f7ff; border-left: 3px solid #1890ff; }
|
||
|
|
.agent-main { flex: 1; display: flex; flex-direction: column; }
|
||
|
|
.agent-header { padding: 12px 16px; background: #fafafa; border-bottom: 1px solid #e8e8e8; font-weight: 500; }
|
||
|
|
.agent-messages { flex: 1; overflow-y: auto; padding: 12px; }
|
||
|
|
.agent-input { padding: 12px; border-top: 1px solid #e8e8e8; display: flex; gap: 8px; }
|
||
|
|
.agent-input input { flex: 1; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; }
|
||
|
|
.agent-input button { padding: 8px 16px; background: #07C160; color: white; border: none; border-radius: 4px; }
|
||
|
|
|
||
|
|
/* 页面标题 */
|
||
|
|
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||
|
|
.page-title { font-size: 16px; font-weight: 500; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>🏗️ 统一意图路由层 - 前端页面原型 v2（统一配置）</h1>
|
||
|
|
|
||
|
|
<!-- 1. 管理后台 - 统一规则配置（核心页面） -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面1：管理后台 - 统一规则配置（核心）</h2>
|
||
|
|
<div class="admin-container">
|
||
|
|
<div class="admin-menu">
|
||
|
|
<div class="menu-item active"><span class="menu-icon">⚡</span>统一规则配置</div>
|
||
|
|
<div class="menu-item"><span class="menu-icon">📊</span>路由日志</div>
|
||
|
|
<div class="menu-item"><span class="menu-icon">⚙️</span>系统配置</div>
|
||
|
|
</div>
|
||
|
|
<div class="admin-content">
|
||
|
|
<div class="page-header">
|
||
|
|
<div class="page-title">统一规则配置</div>
|
||
|
|
<button class="btn btn-primary">+ 新增规则</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="search-bar">
|
||
|
|
<input type="text" placeholder="搜索规则名称/关键词...">
|
||
|
|
<select>
|
||
|
|
<option>全部类型</option>
|
||
|
|
<option>打招呼</option>
|
||
|
|
<option>转人工</option>
|
||
|
|
<option>业务拦截</option>
|
||
|
|
<option>业务路由</option>
|
||
|
|
</select>
|
||
|
|
<select>
|
||
|
|
<option>全部状态</option>
|
||
|
|
<option>启用</option>
|
||
|
|
<option>禁用</option>
|
||
|
|
</select>
|
||
|
|
<button class="btn btn-primary">搜索</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="data-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th style="width: 40px;">类型</th>
|
||
|
|
<th>规则名称</th>
|
||
|
|
<th>关键词</th>
|
||
|
|
<th>返回方式</th>
|
||
|
|
<th>优先级</th>
|
||
|
|
<th>状态</th>
|
||
|
|
<th>操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><span class="rule-icon icon-greeting">聊</span></td>
|
||
|
|
<td>打招呼</td>
|
||
|
|
<td>你好、hello、hi、您好</td>
|
||
|
|
<td><span class="tag tag-blue">文字</span></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><span class="rule-icon icon-transfer">转</span></td>
|
||
|
|
<td>转人工</td>
|
||
|
|
<td>找人工、转人工、客服、我要投诉</td>
|
||
|
|
<td><span class="tag tag-orange">操作</span></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><span class="rule-icon icon-bypass">BY</span></td>
|
||
|
|
<td>BYOD补贴</td>
|
||
|
|
<td>BYOD、byod、电脑补贴、自备电脑</td>
|
||
|
|
<td><span class="tag tag-blue">文字</span></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><span class="rule-icon icon-routing">路</span></td>
|
||
|
|
<td>行政-设备管理</td>
|
||
|
|
<td>打印机、复印机、扫描仪</td>
|
||
|
|
<td><span class="tag tag-purple">名片卡片</span></td>
|
||
|
|
<td>10</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><span class="rule-icon icon-routing">路</span></td>
|
||
|
|
<td>HR-工牌补办</td>
|
||
|
|
<td>工牌、丢卡、补卡、门禁卡</td>
|
||
|
|
<td><span class="tag tag-purple">名片卡片</span></td>
|
||
|
|
<td>11</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><span class="rule-icon icon-routing">路</span></td>
|
||
|
|
<td>财务-报销问题</td>
|
||
|
|
<td>报销、发票、贴票</td>
|
||
|
|
<td><span class="tag tag-purple">名片卡片</span></td>
|
||
|
|
<td>12</td>
|
||
|
|
<td><span class="tag tag-gray">禁用</span></td>
|
||
|
|
<td><button class="btn btn-default" style="padding: 4px 8px; font-size: 12px;">编辑</button></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div style="margin-top: 16px; display: flex; justify-content: space-between; align-items: center;">
|
||
|
|
<div style="font-size: 13px; color: #888;">共 6 条规则</div>
|
||
|
|
<div style="display: flex; gap: 8px;">
|
||
|
|
<button class="btn btn-default">导入</button>
|
||
|
|
<button class="btn btn-default">导出</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 2. 新增/编辑规则弹窗 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面2：新增/编辑规则弹窗</h2>
|
||
|
|
<div style="max-width: 600px; margin: 0 auto; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden;">
|
||
|
|
<div style="padding: 16px 20px; background: #fafafa; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center;">
|
||
|
|
<div style="font-weight: 500;">编辑规则</div>
|
||
|
|
<div style="cursor: pointer; color: #999;">✕</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 20px;">
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">规则类型 <span style="color: red;">*</span></div>
|
||
|
|
<select style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
|
||
|
|
<option value="greeting">打招呼</option>
|
||
|
|
<option value="transfer">转人工</option>
|
||
|
|
<option value="bypass">业务拦截（BYOD等）</option>
|
||
|
|
<option value="routing">业务路由（行政/HR/财务）</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">规则名称 <span style="color: red;">*</span></div>
|
||
|
|
<input type="text" value="BYOD补贴" style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">关键词 <span style="color: red;">*</span></div>
|
||
|
|
<textarea style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; min-height: 80px;" placeholder="多个关键词用逗号分隔">BYOD,byod,电脑补贴,自备电脑</textarea>
|
||
|
|
<div style="font-size: 12px; color: #888; margin-top: 4px;">支持模糊匹配</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">返回类型 <span style="color: red;">*</span></div>
|
||
|
|
<select style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
|
||
|
|
<option value="text">文字</option>
|
||
|
|
<option value="card">名片卡片</option>
|
||
|
|
<option value="action">操作（转人工）</option>
|
||
|
|
</select>
|
||
|
|
<div style="font-size: 12px; color: #888; margin-top: 4px;">文字：纯文本回复 | 名片卡片：展示联系人名片 | 操作：系统操作（如转人工）</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">返回内容</div>
|
||
|
|
<textarea style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; min-height: 100px;" placeholder="命中时返回的内容，支持变量">您符合自备电脑补贴资格！
|
||
|
|
|
||
|
|
申请链接：https://oa.servyou.com.cn/byod/apply</textarea>
|
||
|
|
<div style="font-size: 12px; color: #888; margin-top: 4px;">选「名片卡片」时需选择关联的联系人</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">优先级</div>
|
||
|
|
<input type="number" value="3" style="width: 100px; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px;">
|
||
|
|
<div style="font-size: 12px; color: #888; margin-top: 4px;">数字越小越优先匹配</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||
|
|
<input type="checkbox" checked> <span>启用</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 16px 20px; background: #fafafa; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px;">
|
||
|
|
<button class="btn btn-default">取消</button>
|
||
|
|
<button class="btn btn-primary">保存</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3a. H5用户端 - BYOD文字回复 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面3a：H5用户端 - BYOD文字回复（返回类型=文字）</h2>
|
||
|
|
<div class="h5-container">
|
||
|
|
<div class="h5-header">IT智能服务台</div>
|
||
|
|
<div class="h5-messages">
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="msg-bubble">您好！我是IT智能助手，请问有什么可以帮您？</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg msg-user">
|
||
|
|
<div class="msg-bubble">我想申请BYOD补贴</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="msg-bubble">
|
||
|
|
您符合自备电脑补贴资格！<br><br>
|
||
|
|
申请链接：<a href="#" style="color: #07C160;">https://oa.servyou.com.cn/byod/apply</a><br><br>
|
||
|
|
如有疑问请联系IT服务台。
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 2b. 名片卡片类型规则弹窗 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面2b：编辑规则 - 名片卡片类型（业务路由）</h2>
|
||
|
|
<div style="max-width: 600px; margin: 0 auto; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden;">
|
||
|
|
<div style="padding: 16px 20px; background: #fafafa; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center;">
|
||
|
|
<div style="font-weight: 500;">编辑规则 - 行政-设备管理</div>
|
||
|
|
<div style="cursor: pointer; color: #999;">✕</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 20px;">
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">规则类型</div>
|
||
|
|
<input type="text" value="业务路由" readonly style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #f5f5f5; font-size: 14px;">
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">规则名称 <span style="color: red;">*</span></div>
|
||
|
|
<input type="text" value="行政-设备管理" style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px;">
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">关键词 <span style="color: red;">*</span></div>
|
||
|
|
<textarea style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; min-height: 60px;">打印机,复印机,扫描仪,坏了一般,维修</textarea>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">返回类型 <span style="color: red;">*</span></div>
|
||
|
|
<select style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px;">
|
||
|
|
<option value="text">文字</option>
|
||
|
|
<option value="card" selected>名片卡片</option>
|
||
|
|
<option value="action">操作</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px; padding: 12px; background: #f6ffed; border-radius: 4px; border: 1px solid #b7eb8f;">
|
||
|
|
<div style="font-weight: 500; margin-bottom: 8px;">关联联系人（选填）</div>
|
||
|
|
<select style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px;">
|
||
|
|
<option value="">-- 选择联系人 --</option>
|
||
|
|
<option value="wangfang" selected>王芳 - 行政部 · 设备管理岗（8002）</option>
|
||
|
|
<option value="lilei">李雷 - 行政部 · 物资管理岗（8003）</option>
|
||
|
|
</select>
|
||
|
|
<div style="font-size: 12px; color: #888; margin-top: 4px;">联系人数据来自"业务路由配置"模块</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">路由说明文字</div>
|
||
|
|
<textarea style="width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; min-height: 60px;">打印机问题属于行政设备范畴，不在IT服务台服务范围内，为您推荐行政服务联系人：</textarea>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px;">
|
||
|
|
<div style="margin-bottom: 6px; font-weight: 500;">优先级</div>
|
||
|
|
<input type="number" value="10" style="width: 100px; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px;">
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
|
||
|
|
<input type="checkbox" checked> <span>启用</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 16px 20px; background: #fafafa; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px;">
|
||
|
|
<button class="btn btn-default">取消</button>
|
||
|
|
<button class="btn btn-primary">保存</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3b. H5用户端 - 业务路由名片卡片 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面3b：H5用户端 - 业务路由名片（返回类型=名片卡片）</h2>
|
||
|
|
<div class="h5-container">
|
||
|
|
<div class="h5-header">IT智能服务台</div>
|
||
|
|
<div class="h5-messages">
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="msg-bubble">您好！我是IT智能助手，请问有什么可以帮您？</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg msg-user">
|
||
|
|
<div class="msg-bubble">打印机坏了，找谁修？</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="msg-bubble" style="margin-bottom: 8px;">打印机问题属于行政设备范畴，为您推荐行政服务联系人：</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="contact-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="card-avatar">王</div>
|
||
|
|
<div class="card-info">
|
||
|
|
<div class="card-name">王芳 ♀ <span class="card-badge">员工名片</span></div>
|
||
|
|
<div class="card-title">行政部 · 设备管理岗</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="card-row"><span class="card-label">负责业务</span><span class="card-value highlight">打印机/复印机</span></div>
|
||
|
|
<div class="card-row"><span class="card-label">分机号</span><span class="card-value">8002</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="card-action">
|
||
|
|
<button class="card-btn">💬 联系TA</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 4. 坐席端 - 会话页面 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面4：坐席端 - 会话页面</h2>
|
||
|
|
<div class="agent-container">
|
||
|
|
<div class="agent-sidebar">
|
||
|
|
<div class="sidebar-item active">💬 会话列表</div>
|
||
|
|
<div class="sidebar-item">📊 数据统计</div>
|
||
|
|
<div class="sidebar-item">⚙️ 系统设置</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-main">
|
||
|
|
<div class="agent-header">当前会话：李四（研发部）</div>
|
||
|
|
<div class="agent-messages">
|
||
|
|
<div class="msg msg-user"><div class="msg-bubble">打印机坏了，找谁修？</div></div>
|
||
|
|
<div class="msg msg-ai"><div class="msg-bubble">打印机问题属于行政设备范畴...</div></div>
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="contact-card" style="width: 240px;">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="card-avatar" style="background: linear-gradient(135deg, #fa8c16, #d46b08);">王</div>
|
||
|
|
<div class="card-info">
|
||
|
|
<div class="card-name">王芳 ♀</div>
|
||
|
|
<div class="card-title">行政部 · 设备管理</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="card-row"><span class="card-label">负责:</span><span class="card-value highlight">打印机</span></div>
|
||
|
|
<div class="card-row"><span class="card-label">分机:</span><span class="card-value">8002</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 12px; color: #999; padding: 8px 0;">🤖 AI已发送业务路由推荐 · 行政设备问题</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-input">
|
||
|
|
<input type="text" placeholder="输入回复内容...">
|
||
|
|
<button>发送</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 5. 路由日志 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>页面5：管理后台 - 路由日志</h2>
|
||
|
|
<div class="admin-container">
|
||
|
|
<div class="admin-menu">
|
||
|
|
<div class="menu-item"><span class="menu-icon">⚡</span>统一规则配置</div>
|
||
|
|
<div class="menu-item active"><span class="menu-icon">📊</span>路由日志</div>
|
||
|
|
<div class="menu-item"><span class="menu-icon">⚙️</span>系统配置</div>
|
||
|
|
</div>
|
||
|
|
<div class="admin-content">
|
||
|
|
<div class="search-bar">
|
||
|
|
<input type="text" placeholder="搜索用户消息...">
|
||
|
|
<select>
|
||
|
|
<option>全部类型</option>
|
||
|
|
<option>打招呼</option>
|
||
|
|
<option>转人工</option>
|
||
|
|
<option>业务拦截</option>
|
||
|
|
<option>业务路由</option>
|
||
|
|
</select>
|
||
|
|
<input type="date" value="2026-07-18">
|
||
|
|
<button class="btn btn-primary">查询</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="data-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>时间</th>
|
||
|
|
<th>用户</th>
|
||
|
|
<th>用户消息</th>
|
||
|
|
<th>命中规则</th>
|
||
|
|
<th>结果</th>
|
||
|
|
<th>耗时</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>10:30:25</td>
|
||
|
|
<td>zhangsan</td>
|
||
|
|
<td>我想申请BYOD补贴</td>
|
||
|
|
<td><span class="tag tag-orange">业务拦截-BYD补贴</span></td>
|
||
|
|
<td><span class="tag tag-green">命中</span></td>
|
||
|
|
<td>5ms</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>10:31:12</td>
|
||
|
|
<td>lisi</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>wangwu</td>
|
||
|
|
<td>打印机坏了</td>
|
||
|
|
<td><span class="tag tag-purple">业务路由-行政</span></td>
|
||
|
|
<td><span class="tag tag-green">命中</span></td>
|
||
|
|
<td>2.1s</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>10:33:00</td>
|
||
|
|
<td>zhaoliu</td>
|
||
|
|
<td>你好</td>
|
||
|
|
<td><span class="tag tag-blue">打招呼</span></td>
|
||
|
|
<td><span class="tag tag-green">命中</span></td>
|
||
|
|
<td>3ms</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center; margin-top: 30px; color: #999; font-size: 13px;">
|
||
|
|
<p>统一意图路由层 - 前端页面原型 v2 | 2026-07-18</p>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|