t
18c9354095
- 注入数据库、运行时配置、统一响应、文件存储和平台 AI 能力，补充业务读写工具与客户快捷操作契约。 - 移除模块内重复的组织、客户、工单、标签、技能、旧工作流、MCP 和迁移实现，将身份权限与业务主体交由宿主管理。 - 使用 libSQL 重构向量存储，并完善图片消息、访客身份、排队调度、企业微信和支持聊天页面。 - 统一 HTTP、DTO 与 WebSocket 的 snake_case 协议，补齐模块初始化、业务动作和公共载荷等回归测试。
64 lines
3.9 KiB
HTML
64 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<meta name="theme-color" content="#f5f7fc" />
|
|
<title>客服渠道测试页</title>
|
|
<link rel="stylesheet" href="./demo.css" />
|
|
</head>
|
|
<body>
|
|
<main class="demo-app">
|
|
<header class="demo-header">
|
|
<div class="demo-header__inner">
|
|
<div class="demo-brand">
|
|
<span class="demo-brand__mark" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24"><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><path d="M5 11h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2Z"/><path d="M19 11h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h2a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2Z"/></svg>
|
|
</span>
|
|
<span><strong>示例业务网站</strong><small>在线客服接入预览</small></span>
|
|
</div>
|
|
<div id="widget-status" class="demo-status"><i></i><span>客服组件已就绪</span></div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="demo-hero">
|
|
<div class="demo-hero__copy">
|
|
<div class="demo-eyebrow">
|
|
<svg viewBox="0 0 24 24"><path d="m12 3-1.7 4.3L6 9l4.3 1.7L12 15l1.7-4.3L18 9l-4.3-1.7Z"/><path d="m5 16-.8 2.2L2 19l2.2.8L5 22l.8-2.2L8 19l-2.2-.8Z"/></svg>
|
|
真实渠道预览
|
|
</div>
|
|
<h1>点击右下角客服按钮，<br />测试当前渠道</h1>
|
|
<p>这是客服后台生成的 Web 渠道测试页面，将使用当前 <code>channel_id</code> 和 <code>external_id</code> 加载真实客服窗口。</p>
|
|
|
|
<div class="identity-grid">
|
|
<div><span>CHANNEL_ID</span><strong id="channel-value">—</strong></div>
|
|
<div><span>EXTERNAL_ID</span><strong id="external-value">—</strong></div>
|
|
<div><span>EXTERNAL_NAME</span><strong id="name-value">—</strong></div>
|
|
</div>
|
|
|
|
<div id="action-hint" class="action-hint">
|
|
<span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"/><path d="M8 9h8M8 13h5"/></svg></span>
|
|
客服入口已经就绪，请点击页面右下角开始咨询。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-list" aria-label="测试能力">
|
|
<article><i class="blue"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></i><div><h2>实时消息</h2><p>使用 WebSocket 接收客服消息，无需轮询刷新。</p></div></article>
|
|
<article><i class="violet"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg></i><div><h2>External ID 身份</h2><p>测试客户身份通过 external_id 和 external_name 透传。</p></div></article>
|
|
<article><i class="green"><svg viewBox="0 0 24 24"><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><path d="M5 11h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2ZM19 11h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h2a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2Z"/></svg></i><div><h2>完整客服流程</h2><p>可测试快捷服务、附件上传、人工接入和消息已读状态。</p></div></article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="widget-frame-shell" class="widget-frame-shell" hidden>
|
|
<iframe id="widget-frame" title="在线客服" allow="clipboard-write"></iframe>
|
|
</section>
|
|
<button id="widget-launcher" class="widget-launcher" type="button" aria-label="打开在线客服" aria-expanded="false">
|
|
<svg viewBox="0 0 24 24"><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><path d="M5 11h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2Z"/><path d="M19 11h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h2a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2Z"/></svg>
|
|
<span>客服</span>
|
|
</button>
|
|
</main>
|
|
<script src="./demo.js" defer></script>
|
|
</body>
|
|
</html>
|