100 lines
4.5 KiB
HTML
100 lines
4.5 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>crm-new · LibreDesk Widget 测试页</title>
|
||
<style>
|
||
body { font-family: -apple-system, "Segoe UI", "PingFang SC", sans-serif; margin: 0; background: #f4f7fb; color: #1f2937; }
|
||
.card { max-width: 720px; margin: 48px auto; background: #fff; border-radius: 14px; padding: 28px 32px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
|
||
h1 { font-size: 20px; margin: 0 0 4px; }
|
||
.sub { color: #6b7280; font-size: 13px; margin-bottom: 20px; }
|
||
label { display: block; font-size: 13px; color: #374151; margin: 14px 0 6px; }
|
||
input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
|
||
.row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
|
||
button { padding: 10px 16px; border: 0; border-radius: 8px; font-size: 14px; cursor: pointer; }
|
||
.primary { background: #1f6feb; color: #fff; }
|
||
.ghost { background: #eef2f7; color: #1f2937; }
|
||
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #e0f2fe; color: #0369a1; margin-left: 6px; }
|
||
.hint { margin-top: 22px; font-size: 13px; color: #6b7280; border-top: 1px dashed #e5e7eb; padding-top: 16px; line-height: 1.9; }
|
||
code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
|
||
#status { margin-top: 12px; font-size: 13px; color: #065f46; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<h1>LibreDesk Widget 测试 <span class="badge" id="modeBadge">匿名</span></h1>
|
||
<div class="sub">页面打开后右下角应出现聊天气泡（自动加载，无需点击）· v2</div>
|
||
|
||
<label>登录用户邮箱（dev 模式）</label>
|
||
<input id="email" value="buyer@test-customer.nl" />
|
||
|
||
<label>站点 JWT（生产路径；留空则用上面的 dev 邮箱）</label>
|
||
<input id="siteJwt" placeholder="由 yehwang 站点登录后注入" />
|
||
|
||
<div class="row">
|
||
<button class="primary" onclick="reload('login')">切换为登录身份</button>
|
||
<button class="ghost" onclick="reload('anonymous')">切换为匿名访客</button>
|
||
<button class="ghost" onclick="location.href=location.pathname">重新加载</button>
|
||
</div>
|
||
|
||
<div id="status"></div>
|
||
|
||
<div class="hint">
|
||
<b>排查</b><br />
|
||
· 气泡没出现：打开浏览器控制台看 <code>[YehwangChat]</code> / <code>Failed to initialize Libredesk Widget</code> 报错<br />
|
||
· 登录身份：页面会先调 bridge <code>POST /identity</code> 拿 <code>userJWT</code>，再加载 widget<br />
|
||
· 聊天窗口打不开：检查 LibreDesk 可信域名里是否有 <code>localhost:8088</code>（CSP frame-ancestors）
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var params = new URLSearchParams(location.search);
|
||
var mode = params.get('as') === 'login' ? 'login' : 'anonymous';
|
||
var email = params.get('email') || 'buyer@test-customer.nl';
|
||
document.getElementById('email').value = email;
|
||
document.getElementById('modeBadge').textContent = mode === 'login' ? '登录身份' : '匿名';
|
||
|
||
function reload(nextMode) {
|
||
var q = new URLSearchParams();
|
||
q.set('as', nextMode);
|
||
if (nextMode === 'login') {
|
||
q.set('email', document.getElementById('email').value.trim());
|
||
var jwt = document.getElementById('siteJwt').value.trim();
|
||
if (jwt) q.set('siteJwt', jwt);
|
||
}
|
||
location.search = q.toString();
|
||
}
|
||
|
||
function boot() {
|
||
var cfg = {
|
||
baseURL: 'http://localhost:9000',
|
||
inboxID: '10fd5207-d235-4c49-beaa-a65eed0ddd0e',
|
||
identityURL: 'http://localhost:4100/identity',
|
||
};
|
||
if (mode === 'login') {
|
||
var siteJwt = params.get('siteJwt');
|
||
if (siteJwt) cfg.siteJWT = siteJwt;
|
||
else {
|
||
cfg.demoEmail = email;
|
||
cfg.demoFirstName = 'Jan';
|
||
cfg.demoLastName = 'Jansen';
|
||
}
|
||
}
|
||
window.YehwangChatConfig = cfg;
|
||
var s = document.createElement('script');
|
||
s.src = '/ai-snippet.js?v=' + Date.now();
|
||
s.onload = function () {
|
||
document.getElementById('status').textContent = mode === 'login'
|
||
? '已按登录身份加载 widget（右下角气泡）'
|
||
: '已按匿名访客加载 widget（右下角气泡）';
|
||
};
|
||
document.body.appendChild(s);
|
||
}
|
||
|
||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
|
||
else boot();
|
||
</script>
|
||
</body>
|
||
</html>
|