309 lines
17 KiB
HTML
309 lines
17 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>AI回复来源标识 - 原型图</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); }
|
||
|
|
|
||
|
|
/* H5移动端 */
|
||
|
|
.h5-container { max-width: 375px; margin: 0 auto; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||
|
|
.h5-header { background: linear-gradient(135deg, #07C160, #06ad56); color: white; padding: 16px; text-align: center; font-weight: 600; font-size: 16px; }
|
||
|
|
.h5-messages { height: 500px; overflow-y: auto; padding: 16px; background: #f5f5f5; }
|
||
|
|
.msg { margin-bottom: 16px; display: flex; flex-direction: column; }
|
||
|
|
.msg-user { align-items: flex-end; }
|
||
|
|
.msg-ai { align-items: flex-start; }
|
||
|
|
.msg-time { font-size: 10px; color: #999; margin-top: 4px; text-align: center; }
|
||
|
|
|
||
|
|
.msg-bubble { max-width: 85%; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; position: relative; }
|
||
|
|
.msg-user .msg-bubble { background: linear-gradient(135deg, #07C160, #06ad56); color: white; border-bottom-right-radius: 2px; }
|
||
|
|
.msg-ai .msg-bubble { background: white; border: 1px solid #e8e8e8; border-bottom-left-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||
|
|
|
||
|
|
/* 来源标识样式 */
|
||
|
|
.source-marker { margin-top: 8px; font-size: 14px; letter-spacing: 2px; }
|
||
|
|
.marker-byod { color: #fa8c16; }
|
||
|
|
.marker-rule { color: #1890ff; }
|
||
|
|
.marker-vision { color: #722ed1; }
|
||
|
|
.marker-graph { color: #52c41a; }
|
||
|
|
.marker-dify { color: #eb2f96; }
|
||
|
|
.marker-routing { color: #fa541c; }
|
||
|
|
.marker-assets { color: #13c2c2; }
|
||
|
|
.marker-fallback { color: #f5222d; }
|
||
|
|
|
||
|
|
/* 坐席端 */
|
||
|
|
.agent-container { display: flex; height: 550px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
|
||
|
|
.agent-sidebar { width: 200px; background: #fafafa; border-right: 1px solid #e8e8e8; }
|
||
|
|
.sidebar-header { padding: 16px; background: #f0f2f5; font-weight: 600; border-bottom: 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; }
|
||
|
|
.sidebar-item.active { border-left: 3px solid #07C160; }
|
||
|
|
.conversation-title { font-size: 14px; font-weight: 500; }
|
||
|
|
.conversation-status { font-size: 12px; color: #52c41a; }
|
||
|
|
|
||
|
|
.agent-main { flex: 1; display: flex; flex-direction: column; }
|
||
|
|
.agent-header { padding: 12px 16px; background: #fafafa; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; }
|
||
|
|
.agent-user-info { display: flex; align-items: center; gap: 8px; }
|
||
|
|
.agent-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #07C160, #06ad56); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
|
||
|
|
.agent-name { font-weight: 500; }
|
||
|
|
.agent-dept { font-size: 12px; color: #888; }
|
||
|
|
|
||
|
|
.agent-messages { flex: 1; overflow-y: auto; padding: 16px; }
|
||
|
|
.agent-msg { margin-bottom: 12px; display: flex; gap: 10px; }
|
||
|
|
.agent-msg-user { justify-content: flex-end; }
|
||
|
|
.agent-msg-ai { justify-content: flex-start; }
|
||
|
|
.agent-msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
|
||
|
|
.agent-msg-user .agent-msg-bubble { background: #07C160; color: white; }
|
||
|
|
.agent-msg-ai .agent-msg-bubble { background: white; border: 1px solid #e8e8e8; }
|
||
|
|
|
||
|
|
/* 来源详情 */
|
||
|
|
.source-detail { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 10px; background: #f0f5ff; border-radius: 4px; margin-top: 6px; }
|
||
|
|
.source-detail-label { color: #666; }
|
||
|
|
.source-detail-value { color: #1890ff; font-weight: 500; }
|
||
|
|
|
||
|
|
/* 图例 */
|
||
|
|
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 12px; background: #fafafa; border-radius: 8px; }
|
||
|
|
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 12px; }
|
||
|
|
.legend-icon { font-size: 14px; }
|
||
|
|
|
||
|
|
/* 多来源叠加示例 */
|
||
|
|
.multi-source { display: flex; gap: 4px; }
|
||
|
|
|
||
|
|
/* 输入框 */
|
||
|
|
.h5-input { padding: 12px; background: white; border-top: 1px solid #e8e8e8; display: flex; gap: 8px; }
|
||
|
|
.h5-input input { flex: 1; padding: 10px 14px; border: 1px solid #e8e8e8; border-radius: 20px; font-size: 14px; outline: none; }
|
||
|
|
.h5-input input:focus { border-color: #07C160; }
|
||
|
|
.h5-input button { width: 40px; height: 40px; border-radius: 50%; background: #07C160; color: white; border: none; font-size: 18px; cursor: pointer; }
|
||
|
|
|
||
|
|
.agent-input { padding: 12px; border-top: 1px solid #e8e8e8; display: flex; gap: 8px; }
|
||
|
|
.agent-input input { flex: 1; padding: 10px 14px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
|
||
|
|
.agent-input button { padding: 8px 16px; background: #07C160; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>🏷️ AI回复来源标识 - 原型图</h1>
|
||
|
|
<p style="color: #666; margin-bottom: 20px;">REQ-AI-004 - IT智能服务台</p>
|
||
|
|
|
||
|
|
<!-- 1. H5员工端 - 单来源 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>场景1：H5员工端 - 单来源（图谱回复）</h2>
|
||
|
|
<div class="h5-container">
|
||
|
|
<div class="h5-header">IT智能服务台</div>
|
||
|
|
<div class="h5-messages">
|
||
|
|
<div class="msg msg-user">
|
||
|
|
<div class="msg-bubble">你好，我想咨询一下重置密码的问题</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg-time">10:30</div>
|
||
|
|
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="msg-bubble">
|
||
|
|
您好！重置密码有以下两种方式：
|
||
|
|
<br><br>
|
||
|
|
<strong>方式一：自助重置</strong>
|
||
|
|
<br>
|
||
|
|
登录OA系统 → 个人中心 → 安全管理 → 重置密码
|
||
|
|
<br><br>
|
||
|
|
<strong>方式二：联系IT协助</strong>
|
||
|
|
<br>
|
||
|
|
如需人工协助，请点击"转人工"
|
||
|
|
<br><br>
|
||
|
|
如有其他问题，欢迎继续咨询！
|
||
|
|
<div class="source-marker marker-graph">🕸️</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg-time">10:30</div>
|
||
|
|
</div>
|
||
|
|
<div class="h5-input">
|
||
|
|
<input type="text" placeholder="请描述您的问题...">
|
||
|
|
<button>➤</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="legend">
|
||
|
|
<div class="legend-item"><span class="legend-icon">🕸️</span> 图谱</div>
|
||
|
|
<div class="legend-item"><span class="legend-icon">🤖</span> Dify</div>
|
||
|
|
<div class="legend-item"><span class="legend-icon">⚡️</span> 本地快判</div>
|
||
|
|
<div class="legend-item"><span class="legend-icon">📋</span> 业务路由</div>
|
||
|
|
<div class="legend-item"><span class="legend-icon">💻</span> 资产推荐</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 2. H5员工端 - 多来源 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>场景2：H5员工端 - 多来源叠加（业务路由+资产推荐）</h2>
|
||
|
|
<div class="h5-container">
|
||
|
|
<div class="h5-header">IT智能服务台</div>
|
||
|
|
<div class="h5-messages">
|
||
|
|
<div class="msg msg-user">
|
||
|
|
<div class="msg-bubble">推荐一款适合办公的笔记本电脑</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg-time">10:35</div>
|
||
|
|
|
||
|
|
<div class="msg msg-ai">
|
||
|
|
<div class="msg-bubble">
|
||
|
|
为您推荐以下IT资产：
|
||
|
|
<br><br>
|
||
|
|
<strong>ThinkPad X1 Carbon</strong>
|
||
|
|
<br>
|
||
|
|
• 轻薄便携，适合移动办公
|
||
|
|
<br>
|
||
|
|
• 14英寸2K高清屏
|
||
|
|
<br>
|
||
|
|
• 续航可达15小时
|
||
|
|
<br><br>
|
||
|
|
<strong>联系IT资产部门获取采购流程</strong>
|
||
|
|
<div class="source-marker">
|
||
|
|
<span class="marker-routing">📋</span>
|
||
|
|
<span class="marker-assets">💻</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="msg-time">10:35</div>
|
||
|
|
</div>
|
||
|
|
<div class="h5-input">
|
||
|
|
<input type="text" placeholder="请描述您的问题...">
|
||
|
|
<button>➤</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 3. 坐席工作台 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>场景3：坐席工作台 - 来源详情</h2>
|
||
|
|
<div class="agent-container">
|
||
|
|
<div class="agent-sidebar">
|
||
|
|
<div class="sidebar-header">会话列表</div>
|
||
|
|
<div class="sidebar-item">
|
||
|
|
<div>
|
||
|
|
<div class="conversation-title">张三 - IT咨询</div>
|
||
|
|
<div class="conversation-status">● 进行中</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-item active">
|
||
|
|
<div>
|
||
|
|
<div class="conversation-title">李四 - 资产申请</div>
|
||
|
|
<div class="conversation-status">● 进行中</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-item">
|
||
|
|
<div>
|
||
|
|
<div class="conversation-title">王五 - 重置密码</div>
|
||
|
|
<div class="conversation-status">✓ 已完成</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-main">
|
||
|
|
<div class="agent-header">
|
||
|
|
<div class="agent-user-info">
|
||
|
|
<div class="agent-avatar">李</div>
|
||
|
|
<div>
|
||
|
|
<div class="agent-name">李四</div>
|
||
|
|
<div class="agent-dept">财务部</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-messages">
|
||
|
|
<div class="agent-msg agent-msg-user">
|
||
|
|
<div class="agent-msg-bubble">推荐一款适合办公的笔记本电脑</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="agent-msg agent-msg-ai">
|
||
|
|
<div class="agent-avatar" style="background: linear-gradient(135deg, #1890ff, #096dd9);">AI</div>
|
||
|
|
<div class="agent-msg-bubble">
|
||
|
|
为您推荐以下IT资产：
|
||
|
|
<br><br>
|
||
|
|
<strong>ThinkPad X1 Carbon</strong>
|
||
|
|
<br>
|
||
|
|
• 轻薄便携，适合移动办公
|
||
|
|
<br>
|
||
|
|
• 14英寸2K高清屏
|
||
|
|
<br><br>
|
||
|
|
<div class="source-detail">
|
||
|
|
<span class="source-detail-label">来源：</span>
|
||
|
|
<span class="source-detail-value">📋 业务路由 + 💻 资产推荐</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-input">
|
||
|
|
<input type="text" placeholder="输入回复内容...">
|
||
|
|
<button>发送</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 4. 坐席工作台 - 详情面板 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>场景4：坐席工作台 - 消息详情面板</h2>
|
||
|
|
<div class="agent-container">
|
||
|
|
<div class="agent-sidebar">
|
||
|
|
<div class="sidebar-header">会话列表</div>
|
||
|
|
<div class="sidebar-item active">
|
||
|
|
<div>
|
||
|
|
<div class="conversation-title">李四 - 资产申请</div>
|
||
|
|
<div class="conversation-status">● 进行中</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-main">
|
||
|
|
<div class="agent-header">
|
||
|
|
<div class="agent-user-info">
|
||
|
|
<div class="agent-avatar">李</div>
|
||
|
|
<div>
|
||
|
|
<div class="agent-name">李四</div>
|
||
|
|
<div class="agent-dept">财务部</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="agent-messages" style="background: #f5f5f5;">
|
||
|
|
<div style="padding: 12px; background: white; border-radius: 8px; margin-bottom: 12px;">
|
||
|
|
<div style="font-size: 12px; color: #888; margin-bottom: 8px;">点击消息查看详情</div>
|
||
|
|
<div class="agent-msg agent-msg-ai">
|
||
|
|
<div class="agent-msg-bubble" style="max-width: 100%;">
|
||
|
|
为您推荐以下IT资产...
|
||
|
|
<div class="source-detail">
|
||
|
|
<span class="source-detail-label">来源：</span>
|
||
|
|
<span class="source-detail-value">📋 业务路由 + 💻 资产推荐</span>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 8px; font-size: 11px; color: #888;">
|
||
|
|
路由决策：Dify识别"笔记本电脑"→业务路由→资产推荐
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 来源类型汇总 -->
|
||
|
|
<div class="page-container">
|
||
|
|
<h2>来源类型汇总</h2>
|
||
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 14px;">
|
||
|
|
<thead>
|
||
|
|
<tr style="background: #f8f9fa;">
|
||
|
|
<th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">来源Key</th>
|
||
|
|
<th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">来源名称</th>
|
||
|
|
<th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">图标</th>
|
||
|
|
<th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">说明</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">byod</td><td>BYOD拦截</td><td>🔒</td><td>员工自带设备策略拦截</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">rule</td><td>本地快判</td><td>⚡️</td><td>打招呼/呼叫人工等规则匹配</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">vision</td><td>图片增强</td><td>🖼️</td><td>Vision多模态理解</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">graph</td><td>Neo4j图谱</td><td>🕸️</td><td>知识图谱匹配命中</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">dify</td><td>Dify推理</td><td>🤖</td><td>Dify主推理链路</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">routing</td><td>业务路由</td><td>📋</td><td>非IT问题路由到业务负责人</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">assets</td><td>资产推荐</td><td>💻</td><td>IT资产管理推荐</td></tr>
|
||
|
|
<tr><td style="padding: 10px; border-bottom: 1px solid #eee;">fallback</td><td>降级回复</td><td>⚠️</td><td>所有路由均未命中时的兜底回复</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|