feat: 优化部署脚本
This commit is contained in:
丹尼尔
146
public/chat.html
146
public/chat.html
@@ -27,11 +27,14 @@
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(2, 6, 23, 0.95);
|
||||
}
|
||||
.nav-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
|
||||
.nav a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
@@ -39,6 +42,8 @@
|
||||
}
|
||||
.nav a:hover { color: var(--accent); }
|
||||
.nav a.current { color: var(--accent); font-weight: 500; }
|
||||
.nav-banner { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
|
||||
.nav-banner span { color: var(--accent); }
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
@@ -64,12 +69,17 @@
|
||||
padding: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.msg-item { font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
|
||||
.msg-item { font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
|
||||
.msg-item:last-child { border-bottom: none; }
|
||||
.msg-item .from { color: var(--accent); margin-right: 8px; }
|
||||
.msg-item.out { opacity: 0.9; }
|
||||
.msg-item.out .from { color: #94a3b8; }
|
||||
.msg-item .time { font-size: 11px; color: var(--muted); margin-left: 8px; }
|
||||
.msg-item .meta { display:flex; align-items:center; flex-wrap:wrap; }
|
||||
.msg-item .content { margin-left: 0; font-size: 12px; word-break: break-all; }
|
||||
.msg-item .content img { max-width: 100%; border-radius: 6px; margin-top: 4px; }
|
||||
.msg-item .content audio,
|
||||
.msg-item .content video { max-width: 100%; margin-top: 4px; }
|
||||
.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
|
||||
.form-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
|
||||
.form-row input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,0.9); color: var(--text); font-size: 13px; }
|
||||
@@ -81,10 +91,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<a href="index.html">登录</a>
|
||||
<a href="manage.html">客户与消息管理</a>
|
||||
<a href="chat.html" class="current">实时消息</a>
|
||||
<a href="models.html">模型管理</a>
|
||||
<div class="nav-banner">Wechat <span>智能托管服务</span></div>
|
||||
<div class="nav-links">
|
||||
<a href="manage.html">客户与消息管理</a>
|
||||
<a href="chat.html" class="current">实时消息</a>
|
||||
<a href="models.html">模型管理</a>
|
||||
<a href="swagger.html" target="_blank">API 文档 (Swagger)</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
@@ -117,42 +130,119 @@
|
||||
const API_BASE = 'http://localhost:8000';
|
||||
const KEY_STORAGE = 'wechat_key';
|
||||
|
||||
function getKey() {
|
||||
const k = $('key').value.trim();
|
||||
if (!k) { alert('请先填写账号 key'); return null; }
|
||||
return k;
|
||||
function getToken() {
|
||||
try {
|
||||
return localStorage.getItem('auth_token') || '';
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function redirectToLogin(msg) {
|
||||
if (msg) alert(msg);
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
|
||||
async function callApi(path, options = {}) {
|
||||
const url = API_BASE + path;
|
||||
const res = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } });
|
||||
const token = getToken();
|
||||
const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
|
||||
const res = await fetch(url, { ...options, headers });
|
||||
let body = null;
|
||||
try { body = await res.json(); } catch (_) {}
|
||||
if (res.status === 401) {
|
||||
redirectToLogin('登录已失效，请重新扫码登录');
|
||||
throw new Error('unauthorized');
|
||||
}
|
||||
if (!res.ok) throw new Error((body && (body.detail || body.message)) || res.statusText || '请求失败');
|
||||
return body;
|
||||
}
|
||||
|
||||
function renderMessageContent(m) {
|
||||
const msgType = m.MsgType ?? m.msgType;
|
||||
const rawContent = m.Content || m.content || '';
|
||||
const imageContent = m.ImageContent || m.imageContent || '';
|
||||
const from = m.FromUserName || m.from || m.MsgId || '-';
|
||||
|
||||
// 链接检测
|
||||
const isUrl = (s) => typeof s === 'string' && /^https?:\/\//i.test(s.trim());
|
||||
const isBase64Like = (s) => typeof s === 'string' && /^[A-Za-z0-9+/=\s]+$/.test(s) && s.replace(/\s+/g, '').length > 60;
|
||||
|
||||
// 图片：上游通常提供 ImageContent（base64）或 Content 为图片链接
|
||||
if (imageContent || (msgType === 3) || (msgType === 0 && imageContent)) {
|
||||
const src = isUrl(imageContent) ? imageContent :
|
||||
(imageContent ? ('data:image/png;base64,' + imageContent.replace(/\s+/g, '')) :
|
||||
(isUrl(rawContent) ? rawContent : ''));
|
||||
if (src) {
|
||||
return `<div class="content"><div>${rawContent ? String(rawContent) : ''}</div><img src="${src}" alt="图片消息" /></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// 视频 / 音频：简单通过扩展名或 MsgType 约定判断
|
||||
if (msgType === 43 || msgType === 'video') {
|
||||
const src = isUrl(rawContent) ? rawContent : '';
|
||||
if (src) return `<div class="content"><video src="${src}" controls></video></div>`;
|
||||
}
|
||||
if (msgType === 34 || msgType === 'audio') {
|
||||
const src = isUrl(rawContent) ? rawContent : '';
|
||||
if (src) return `<div class="content"><audio src="${src}" controls></audio></div>`;
|
||||
}
|
||||
|
||||
// 若内容是 URL，则渲染为可点击链接
|
||||
if (isUrl(rawContent)) {
|
||||
const safe = String(rawContent);
|
||||
return `<div class="content"><a href="${safe}" target="_blank" rel="noopener noreferrer">${safe}</a></div>`;
|
||||
}
|
||||
|
||||
// 若内容看起来是图片 base64，则按图片渲染
|
||||
if (isBase64Like(rawContent) && (msgType === 3 || msgType === 0)) {
|
||||
const src = 'data:image/png;base64,' + String(rawContent).replace(/\s+/g, '');
|
||||
return `<div class="content"><img src="${src}" alt="图片消息" /></div>`;
|
||||
}
|
||||
|
||||
// 兜底为纯文本（含 MsgType 提示）
|
||||
const text = rawContent ? String(rawContent) : (msgType != null ? `MsgType=${msgType}` : '');
|
||||
return `<div class="content">${text}</div>`;
|
||||
}
|
||||
|
||||
async function loadMessages() {
|
||||
const key = $('key').value.trim();
|
||||
if (!key) { $('message-list').innerHTML = '<p class="small-label">请先填写账号 key。</p>'; return; }
|
||||
const key = (function() {
|
||||
try {
|
||||
return localStorage.getItem(KEY_STORAGE) || '';
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
})();
|
||||
if (!key) {
|
||||
$('message-list').innerHTML = '<p class="small-label">请先在登录页扫码登录。</p>';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 后端已按时间倒序（最新在前）返回，这里保持顺序即可
|
||||
const data = await callApi('/api/messages?key=' + encodeURIComponent(key) + '&limit=80');
|
||||
const list = data.items || [];
|
||||
// 按时间正序排列，最新在底部，便于看完整对话
|
||||
const sorted = [...list].sort((a, b) => (a.CreateTime || 0) - (b.CreateTime || 0));
|
||||
$('message-list').innerHTML = sorted.length ? sorted.map(m => {
|
||||
$('message-list').innerHTML = list.length ? list.map(m => {
|
||||
const isOut = m.direction === 'out';
|
||||
const from = isOut ? ('我 → ' + (m.ToUserName || '')) : (m.FromUserName || m.from || m.MsgId || '-').toString().slice(0, 32);
|
||||
const content = (m.Content || m.content || m.MsgType || '').toString().slice(0, 200);
|
||||
const time = m.CreateTime ? (typeof m.CreateTime === 'number' ? new Date(m.CreateTime * 1000).toLocaleTimeString('zh-CN', { hour12: false }) : m.CreateTime) : '';
|
||||
return '<div class="msg-item' + (isOut ? ' out' : '') + '"><span class="from">' + from + '</span>' + content + (time ? ' <span class="time">' + time + '</span>' : '') + '</div>';
|
||||
}).join('') : '<p class="small-label">暂无对话。请确保已登录且后端 WS 已连接 GetSyncMsg；发送的消息也会在此展示。</p>';
|
||||
} catch (e) { $('message-list').innerHTML = '<p class="small-label">加载失败: ' + e.message + '</p>'; }
|
||||
const fromLabel = isOut ? ('我 → ' + (m.ToUserName || '')) : (m.FromUserName || m.from || m.MsgId || '-').toString().slice(0, 32);
|
||||
const time = m.CreateTime ? (typeof m.CreateTime === 'number'
|
||||
? new Date(m.CreateTime * 1000).toLocaleTimeString('zh-CN', { hour12: false })
|
||||
: m.CreateTime) : '';
|
||||
const meta = '<div class="meta"><span class="from">' + fromLabel + '</span>' + (time ? '<span class="time">' + time + '</span>' : '') + '</div>';
|
||||
const body = renderMessageContent(m);
|
||||
return '<div class="msg-item' + (isOut ? ' out' : '') + '">' + meta + body + '</div>';
|
||||
}).join('') : '<p class="small-label">暂无对话。请确保已登录且后端 WS 已连接 GetSyncMsg；发送的消息（含图片、音视频等）也会在此展示。</p>';
|
||||
} catch (e) {
|
||||
$('message-list').innerHTML = '<p class="small-label">加载失败: ' + e.message + '</p>';
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const key = getKey();
|
||||
if (!key) return;
|
||||
const key = (function() {
|
||||
try { return localStorage.getItem(KEY_STORAGE) || ''; } catch (_) { return ''; }
|
||||
})();
|
||||
if (!key) { alert('请先在登录页扫码登录'); return; }
|
||||
const to = $('send-to').value.trim();
|
||||
const content = $('send-content').value.trim();
|
||||
if (!to || !content) { alert('请填写对方用户名和内容'); return; }
|
||||
@@ -163,10 +253,14 @@
|
||||
} catch (e) { alert('发送失败: ' + e.message); }
|
||||
}
|
||||
|
||||
// 隐藏 key 行，仅内部使用 localStorage 中的 key
|
||||
(function hideKeyRow() {
|
||||
const row = document.querySelector('.key-row');
|
||||
if (row) row.style.display = 'none';
|
||||
})();
|
||||
|
||||
$('btn-refresh-msg').addEventListener('click', loadMessages);
|
||||
$('btn-send-msg').addEventListener('click', sendMessage);
|
||||
$('key').addEventListener('change', function() { try { localStorage.setItem(KEY_STORAGE, this.value.trim()); } catch (_) {} });
|
||||
if (typeof localStorage !== 'undefined' && localStorage.getItem(KEY_STORAGE)) $('key').value = localStorage.getItem(KEY_STORAGE);
|
||||
loadMessages();
|
||||
|
||||
(function wsStatusCheck() {
|
||||
|
||||
Reference in New Issue
Block a user