Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
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> |