AICLW/wechatAiclaw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:优化界面

Browse Source
This commit is contained in:
丹尼尔
2026-03-11 00:22:41 +08:00
parent 0655410134
commit 0e8639fde1
4268 changed files with 1224126 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
public/chat.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>实时消息 - WS 同步展示</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
color-scheme: light dark;
--bg: #0f172a;
--card: #020617;
--border: #1e293b;
--accent: #22c55e;
--accent-soft: rgba(34, 197, 94, 0.12);
--text: #e5e7eb;
--muted: #9ca3af;
--radius: 16px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
font-family: system-ui, -apple-system, sans-serif;
color: var(--text);
}
.nav {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
border-bottom: 1px solid var(--border);
background: rgba(2, 6, 23, 0.95);
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
}
.nav a:hover { color: var(--accent); }
.nav a.current { color: var(--accent); font-weight: 500; }
.container {
max-width: 720px;
margin: 0 auto;
padding: 24px;
}
.card {
border-radius: var(--radius);
border: 1px solid var(--border);
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.9), #020617);
padding: 20px;
margin-bottom: 20px;
}
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.small-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.key-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.key-row input { max-width: 280px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,0.9); color: var(--text); }
.msg-list {
max-height: 360px;
overflow: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(15, 23, 42, 0.6);
padding: 8px;
margin-bottom: 16px;
}
.msg-item { font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.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; }
.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; }
.form-row input[type="text"] { min-width: 180px; }
.form-row input[name="content"] { flex: 1; min-width: 200px; }
.primary { padding: 10px 20px; border-radius: 8px; background: var(--accent); color: #000; border: none; cursor: pointer; font-weight: 500; }
.secondary { padding: 8px 16px; border-radius: 8px; background: rgba(30,41,59,0.9); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 13px; }
</style>
</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>
</nav>
<div class="container">
<div class="card">
<div class="card-title">实时展示 WS 返回的消息</div>
<p class="small-label">后端通过 GetSyncMsg 连接微信服务，收到消息后写入存储；此处拉取并展示，非传统聊天界面。</p>
<div class="key-row">
<label for="key">账号 key</label>
<input type="text" id="key" placeholder="与登录页一致" autocomplete="off" />
</div>
<button type="button" class="secondary" id="btn-refresh-msg" style="margin-bottom:12px">刷新消息列表</button>
<div id="message-list" class="msg-list"></div>
</div>
<div class="card">
<div class="card-title">发送消息</div>
<div class="form-row">
<div>
<label for="send-to">对方 wxid / 用户名</label>
<input type="text" id="send-to" name="to" placeholder="wxid_xxx" />
</div>
<div style="flex:1;min-width:200px">
<label for="send-content">内容</label>
<input type="text" id="send-content" name="content" placeholder="消息内容" />
</div>
<button type="button" class="primary" id="btn-send-msg">发送</button>
</div>
</div>
</div>
<script>
const $ = (id) => document.getElementById(id);
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;
}
async function callApi(path, options = {}) {
const url = API_BASE + path;
const res = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } });
let body = null;
try { body = await res.json(); } catch (_) {}
if (!res.ok) throw new Error((body && (body.detail || body.message)) || res.statusText || '请求失败');
return body;
}
async function loadMessages() {
const key = $('key').value.trim();
if (!key) { $('message-list').innerHTML = '<p class="small-label">请先填写账号 key。</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 => {
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>'; }
}
async function sendMessage() {
const key = getKey();
if (!key) return;
const to = $('send-to').value.trim();
const content = $('send-content').value.trim();
if (!to || !content) { alert('请填写对方用户名和内容'); return; }
try {
await callApi('/api/send-message', { method: 'POST', body: JSON.stringify({ key, to_user_name: to, content }) });
$('send-content').value = '';
loadMessages();
} catch (e) { alert('发送失败: ' + e.message); }
}
$('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() {
let wasConnected = false;
const CHECK_MS = 8000;
const t = setInterval(async () => {
try {
const r = await fetch(API_BASE + '/api/ws-status', { cache: 'no-store' });
const d = await r.json().catch(() => ({}));
if (d && d.connected) wasConnected = true;
if (wasConnected && d && d.connected === false) {
clearInterval(t);
alert('连接已断开，请重新登录');
window.location.href = 'index.html';
}
} catch (_) {}
}, CHECK_MS);
})();
</script>
</body>
</html>

325
public/index.html
View File

@@ -276,16 +276,19 @@
width: 190px;
height: 190px;
border-radius: 18px;
background: #020617;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 16px; /* 给二维码留出白边（quiet zone） */
box-sizing: border-box;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.9),
0 15px 32px rgba(15, 23, 42, 0.9);
}
.qr-img img {
.qr-img img,
.qr-img canvas {
max-width: 100%;
max-height: 100%;
display: block;
@@ -295,6 +298,15 @@
color: var(--muted);
text-align: center;
}
.qr-expired {
font-size: 13px;
color: var(--muted);
text-align: center;
padding: 12px;
background: rgba(15, 23, 42, 0.95);
border-radius: 12px;
border: 1px dashed rgba(148, 163, 184, 0.5);
}
.hint {
font-size: 11px;
color: var(--muted);
@@ -397,6 +409,48 @@
white-space: pre-wrap;
word-break: break-all;
}
.ticket-card {
border-radius: 20px;
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.98);
padding: 10px 10px 8px;
margin-top: 12px;
display: none;
flex-direction: column;
gap: 6px;
}
.ticket-body {
max-height: 80px;
overflow: auto;
font-size: 11px;
color: var(--muted);
background: rgba(15, 23, 42, 0.9);
border-radius: 10px;
padding: 6px 8px;
white-space: pre-wrap;
word-break: break-all;
}
.data62-card {
border-radius: 20px;
border: 1px solid rgba(55, 65, 81, 0.9);
background: rgba(15, 23, 42, 0.98);
padding: 10px 10px 8px;
margin-top: 12px;
display: none;
flex-direction: column;
gap: 6px;
}
.data62-body {
max-height: 120px;
overflow: auto;
font-size: 11px;
color: var(--muted);
background: rgba(15, 23, 42, 0.9);
border-radius: 10px;
padding: 6px 8px;
white-space: pre-wrap;
word-break: break-all;
}
.result-actions {
display: flex;
justify-content: space-between;
@@ -426,12 +480,39 @@
border: 1px solid rgba(30, 64, 175, 0.8);
background: #020617;
}
.page-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 100vh;
}
.home-banner {
width: 100%;
text-align: center;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--border);
background: rgba(2, 6, 23, 0.6);
}
.home-banner .banner-text {
font-size: 28px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text);
margin: 0;
text-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}
.home-banner .banner-text span { color: var(--accent); }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<div class="shell">
<div class="shell-inner">
<div class="page-wrap">
<div class="home-banner">
<h1 class="banner-text">Wechat <span>智能托管服务</span></h1>
</div>
<div class="shell">
<div class="shell-inner">
<section>
<header>
<div class="title">
@@ -439,9 +520,6 @@
微信登录控制台
<span class="pill">Admin · iPad / Mac 直登</span>
</div>
<div class="title-sub">
按文档流程封装的可视化工具：生成二维码 · 轮询扫码 · 查看在线状态 · 一键退出登录
</div>
</div>
<div>
<div class="status-row">
@@ -503,11 +581,6 @@
退出当前账号
</button>
</div>
<div class="tag-row">
<span class="tag">通过 /api/auth/qrcode 代理 swagger 登录接口</span>
<span class="tag">无需直接暴露 8069 服务</span>
</div>
</div>
<div class="log-card" style="margin-top: 12px">
@@ -547,37 +620,25 @@
<div class="small-label" id="login-extra">尚未查询</div>
</div>
<div class="result-card" id="result-card" style="display: none">
<div class="result-actions">
<span class="small-label">最近一次扫码状态返回数据</span>
<button class="secondary" id="btn-copy-result">复制结果到剪贴板</button>
</div>
<div class="result-body" id="result-body"></div>
</div>
<div class="slider-card" id="slider-card">
<div class="small-label">新设备滑块验证（内嵌窗口）</div>
<div class="slider-card" id="slider-card" style="display: none">
<div class="small-label">第三方滑块(7765)，参数已自动填充，点击「开始验证」提交</div>
<iframe
id="slider-frame"
class="slider-frame"
src=""
referrerpolicy="no-referrer"
></iframe>
<div class="small-label">
如 iframe 无法加载，可在新标签页打开：
<a href="http://113.44.162.180:7765/?key=408449830" target="_blank" style="color: #60a5fa">
滑块验证页面
</a>
</div>
</div>
</aside>
</div>
</div>
</div>
<script>
const $ = (id) => document.getElementById(id);
const SLIDER_VERIFY_URL = 'http://113.44.162.180:7765/?key=408449830';
const API_BASE = 'http://localhost:8000';
const state = {
pollingScan: null,
@@ -653,6 +714,99 @@
}
}
function extractQrTextFromObject(obj) {
let result = null;
const base64Like = /^[A-Za-z0-9+/=]+$/;
function walk(value, keyHint) {
if (result || value == null) return;
if (typeof value === 'string') {
// 1) 优先从 URL / 文本中找 data= 后面的内容
const idx = value.indexOf('data=');
if (idx !== -1) {
let s = value.slice(idx + 5);
const stop = s.search(/[&\s"]/);
if (stop > 0) s = s.slice(0, stop);
if (s && s.length >= 16 && base64Like.test(s)) {
result = s;
return;
}
}
// 2) 兜底：如果键名看起来与二维码相关，并且值是长 base64，则直接当作二维码数据
if (
keyHint &&
/qr|code|data/i.test(keyHint) &&
!/62/i.test(keyHint) &&
value.length >= 32 &&
base64Like.test(value)
) {
result = value;
return;
}
} else if (typeof value === 'object') {
if (Array.isArray(value)) {
value.forEach((v) => walk(v, keyHint));
} else {
Object.entries(value).forEach(([k, v]) => walk(v, k));
}
}
}
walk(obj, '');
return result;
}
// 从 QrCodeUrl 中解析出微信登录链接（url= 参数），扫码后才能唤起微信登录
function getWechatLoginUrlFromResponse(data) {
if (!data || typeof data !== 'object') return null;
const qrCodeUrl = data.Data?.QrCodeUrl || data.QrCodeUrl || data.qrCodeUrl || data.qrUrl || data.url;
if (!qrCodeUrl || typeof qrCodeUrl !== 'string') return null;
const idx = qrCodeUrl.indexOf('url=');
if (idx === -1) {
if (/^https?:\/\/weixin\.qq\.com\//i.test(qrCodeUrl)) return qrCodeUrl;
return qrCodeUrl;
}
let url = qrCodeUrl.slice(idx + 4);
const end = url.search(/[&\s]/);
if (end > 0) url = url.slice(0, end);
try {
url = decodeURIComponent(url);
} catch (_) {}
return url || null;
}
function _unused_extractCleanTicketFromResponse(data) {
if (!data || typeof data !== 'object') return null;
const obj = data;
const d = obj.Data && typeof obj.Data === 'object' ? obj.Data : obj;
let raw =
d.ticket ||
obj.ticket ||
obj.Ticket ||
(typeof obj.wechat_verify_url === 'string' &&
obj.wechat_verify_url.includes('ticket=')
? obj.wechat_verify_url.slice(obj.wechat_verify_url.indexOf('ticket=') + 7)
: '');
if (!raw || typeof raw !== 'string') return null;
// 如果来自 wechat_verify_url，去掉后续参数
const amp = raw.indexOf('&');
if (amp > 0) raw = raw.slice(0, amp);
let clean = '';
for (let i = 0; i < raw.length; i++) {
const ch = raw[i];
const code = ch.charCodeAt(0);
// '<27>' 或非可见 ASCII 视为乱码起点
if (ch === '<27>' || code < 32 || code > 126) break;
clean += ch;
}
if (!clean) return null;
return clean;
}
function renderQrFromResponse(data) {
const box = $('qr-img-box');
box.innerHTML = '';
@@ -660,11 +814,17 @@
let qrText = null;
if (data && typeof data === 'object') {
if (data.qrUrl || data.qrcodeUrl || data.qr || data.url) {
// 1) 优先用「微信登录链接」绘制二维码，扫码后才会唤起登录；Data62 是二进制数据，不能当二维码内容
qrText = getWechatLoginUrlFromResponse(data);
if (!qrText && (data.qrUrl || data.qrcodeUrl || data.qr || data.url)) {
qrText = data.qrUrl || data.qrcodeUrl || data.qr || data.url;
} else if (data.qrcode || data.qr_code) {
}
if (!qrText && (data.qrcode || data.qr_code)) {
qrText = data.qrcode || data.qr_code;
}
if (!qrText) {
qrText = extractQrTextFromObject(data);
}
if (!qrText) {
const json = JSON.stringify(data, null, 2);
const pre = document.createElement('pre');
@@ -674,19 +834,24 @@
pre.style.whiteSpace = 'pre-wrap';
pre.style.wordBreak = 'break-all';
box.appendChild(pre);
$('qr-hint').textContent = '返回结果中未找到二维码字符串，请根据具体字段名在前端进行适配。';
$('qr-hint').textContent =
'当前接口返回中未包含可识别的二维码字符串，请检查上游服务是否已按文档返回 data= 或专门的二维码字段。';
log('二维码接口返回（未能自动识别二维码字段）: ' + json, 'warn');
return;
}
} else if (typeof data === 'string') {
qrText = data;
}
log('用于生成二维码的 data= 内容: ' + qrText, 'ok');
const qrContainer = document.createElement('div');
qrContainer.id = 'qr-code';
box.appendChild(qrContainer);
try {
// 使用前端 QRCode 库将登录链接渲染为二维码
// 使用前端 QRCode 库将登录链接渲染为二维码（每次获取二维码后均根据后端返回数据刷新）
// @ts-ignore
new QRCode(qrContainer, {
text: qrText,
@@ -703,11 +868,25 @@
fallback.style.wordBreak = 'break-all';
box.appendChild(fallback);
$('qr-hint').textContent = '二维码生成失败，请复制链接手动生成二维码。';
log('二维码渲染失败: ' + (e && e.message ? e.message : e), 'error');
}
}
// 根据扫码状态：扫完或过期时刷新二维码区域为「已过期」提示
function showQrExpired(message) {
const box = $('qr-img-box');
if (!box) return;
box.innerHTML = '';
const placeholder = document.createElement('div');
placeholder.className = 'qr-expired';
placeholder.textContent = message || '二维码已过期，请重新获取';
box.appendChild(placeholder);
const hint = $('qr-hint');
if (hint) hint.textContent = message || '二维码已过期，请点击「获取登录二维码」重新取码。';
}
async function callApi(path, options = {}) {
const url = '/api' + path.replace(/^\/api/, '');
const url = API_BASE + path;
const res = await fetch(url, {
...options,
headers: {
@@ -746,6 +925,13 @@
log('获取二维码成功');
renderQrFromResponse(data);
updateLoginState('等待扫码 / 确认中', 'pending', '请在 60 秒内使用微信扫码。');
// 启动自动轮询，每 5 秒检测一次扫码状态
if (state.pollingScan) {
clearInterval(state.pollingScan);
}
state.pollingScan = setInterval(() => {
onCheckScanStatus(true);
}, 5000);
} catch (e) {
log('获取二维码失败: ' + e.message, 'error');
updateLoginState('二维码获取失败', 'offline', e.message || '');
@@ -767,39 +953,41 @@
log('扫码状态: ' + text);
const lower = text.toLowerCase();
const obj = data && typeof data === 'object' ? data : {};
const d = obj.Data && typeof obj.Data === 'object' ? obj.Data : obj;
const stateVal = d.state ?? d.State;
// 显示最近一次返回的数据，方便复制
const resultCard = $('result-card');
const resultBody = $('result-body');
if (resultCard && resultBody) {
resultBody.textContent = text;
resultCard.style.display = 'flex';
}
// 自动识别「新设备验证」，展示滑块 iframe
if (!state.sliderOpened && (text.includes('新设备') || lower.includes('new device'))) {
// 后端返回滑块表单页 path（/auth/slider-form?…），iframe 加载后自动填充 Key/Data62/Original Ticket，提交到第三方 7765
const sliderUrl = data.slider_url;
if (sliderUrl && typeof sliderUrl === 'string') {
state.sliderOpened = true;
log('检测到新设备验证，打开内嵌滑块验证窗口。', 'warn');
log('使用第三方滑块(7765)，参数已自动填充。', 'warn');
const sliderCard = $('slider-card');
const sliderFrame = $('slider-frame');
if (sliderCard && sliderFrame) {
sliderFrame.src = SLIDER_VERIFY_URL;
const iframeSrc = sliderUrl.startsWith('/') ? (API_BASE + sliderUrl) : sliderUrl;
sliderFrame.src = iframeSrc;
sliderCard.style.display = 'flex';
}
}
if (lower.includes('\"state\":2') || /\"state\"\\s*:\\s*2/.test(lower)) {
// state == 2 → 登录成功，跳转后端管理页
if (stateVal === 2 || lower.includes('\"state\":2') || /\"state\"\\s*:\\s*2/.test(lower)) {
updateLoginState('登录成功', 'ok', text);
if (state.pollingScan) {
clearInterval(state.pollingScan);
state.pollingScan = null;
}
} else if (lower.includes('expired') || lower.includes('timeout')) {
showQrExpired('登录成功，正在跳转…');
window.location.href = 'manage.html';
// state == 1 → 二维码失效 / 不可用（按你的规则）
} else if (stateVal === 1 || lower.includes('\"state\":1') || /\"state\"\\s*:\\s*1/.test(lower)) {
updateLoginState('二维码已过期，请重新获取', 'offline', text);
if (state.pollingScan) {
clearInterval(state.pollingScan);
state.pollingScan = null;
}
showQrExpired('二维码已过期，请重新获取');
} else {
updateLoginState('扫码状态更新', 'pending', text);
}
@@ -877,41 +1065,20 @@
$('btn-clear-log').addEventListener('click', () => {
$('log-body').innerHTML = '';
});
const copyBtn = $('btn-copy-result');
if (copyBtn) {
copyBtn.addEventListener('click', async () => {
const body = $('result-body');
if (!body || !body.textContent) {
alert('当前没有可复制的结果。');
return;
}
const text = body.textContent;
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
} else {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
log('扫码状态结果已复制到剪贴板。', 'ok');
alert('结果已复制到剪贴板，可直接粘贴使用。');
} catch (e) {
log('复制结果到剪贴板失败: ' + e.message, 'error');
alert('复制失败，请手动选择文本复制。');
}
});
}
}
bindEvents();
checkHealth();
(function() {
try {
if (typeof localStorage !== 'undefined' && localStorage.getItem('wechat_key')) {
var keyEl = $('key');
if (keyEl && !keyEl.value.trim()) keyEl.value = localStorage.getItem('wechat_key');
}
$('key').addEventListener('change', function() { try { localStorage.setItem('wechat_key', this.value.trim()); } catch (_) {} });
$('key').addEventListener('blur', function() { try { localStorage.setItem('wechat_key', this.value.trim()); } catch (_) {} });
} catch (_) {}
})();
</script>
</body>
</html>

489
public/manage.html Normal file
View File

@@ -0,0 +1,489 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>客户与消息管理 - 后端管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
color-scheme: light dark;
--bg: #0f172a;
--card: #020617;
--border: #1e293b;
--accent: #22c55e;
--accent-soft: rgba(34, 197, 94, 0.12);
--text: #e5e7eb;
--muted: #9ca3af;
--radius: 16px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
font-family: system-ui, -apple-system, sans-serif;
color: var(--text);
}
.nav {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
border-bottom: 1px solid var(--border);
background: rgba(2, 6, 23, 0.95);
}
.nav a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
}
.nav a:hover { color: var(--accent); }
.nav a.current { color: var(--accent); font-weight: 500; }
.container {
max-width: 960px;
margin: 0 auto;
padding: 24px;
}
.card {
border-radius: var(--radius);
border: 1px solid var(--border);
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.9), #020617);
padding: 20px;
margin-bottom: 20px;
}
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.small-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.field label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.field input, .field select, .field textarea {
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
background: rgba(15, 23, 42, 0.9); color: var(--text); font-size: 13px;
}
.mgmt-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.mgmt-tabs button {
padding: 8px 14px; font-size: 13px; border-radius: 8px;
background: rgba(30, 41, 59, 0.8); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.mgmt-tabs button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mgmt-panel { display: none; }
.mgmt-panel.show { display: block; }
.mgmt-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.mgmt-table th, .mgmt-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.mgmt-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mgmt-form-grid .full { grid-column: 1 / -1; }
.mgmt-form-grid label { font-size: 11px; color: var(--muted); }
.mgmt-form-grid input, .mgmt-form-grid select, .mgmt-form-grid textarea {
padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(15,23,42,0.9); color: var(--text); font-size: 12px;
}
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(30,41,59,0.9); border: 1px solid var(--border); font-size: 12px; margin-right: 6px; margin-bottom: 6px; }
.primary { padding: 10px 20px; border-radius: 8px; background: var(--accent); color: #000; border: none; cursor: pointer; font-weight: 500; }
.secondary { padding: 8px 16px; border-radius: 8px; background: rgba(30,41,59,0.9); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 13px; }
.key-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.key-row input { max-width: 280px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,0.9); color: var(--text); }
.error-msg { color: #f87171; font-size: 12px; }
.tags-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tags-chips .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent); font-size: 12px; color: var(--accent); }
.tags-chips .chip button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
.tags-chips .chip button:hover { color: var(--text); }
</style>
</head>
<body>
<nav class="nav">
<a href="index.html">登录</a>
<a href="manage.html" class="current">客户与消息管理</a>
<a href="chat.html">实时消息</a>
<a href="models.html">模型管理</a>
</nav>
<div class="container">
<div class="card">
<div class="card-title">客户与消息管理（R1-2 / R1-3 / R1-4）</div>
<div class="key-row">
<label for="key">账号 key</label>
<input type="text" id="key" placeholder="与登录页一致，如 HBpEnbtj9BJZ" autocomplete="off" />
</div>
<div class="mgmt-tabs">
<button type="button" class="mgmt-tab active" data-panel="panel-customers">客户档案</button>
<button type="button" class="mgmt-tab" data-panel="panel-greeting">定时问候</button>
<button type="button" class="mgmt-tab" data-panel="panel-push">分群推送</button>
</div>
<div id="panel-customers" class="mgmt-panel show">
<div class="mgmt-form-grid">
<div class="field full"><label>微信ID (wxid)</label><input id="c-wxid" placeholder="wxid_xxx" /></div>
<div class="field"><label>备注名</label><input id="c-remark" placeholder="客户备注" /></div>
<div class="field"><label>地区</label><input id="c-region" placeholder="如：广东" /></div>
<div class="field"><label>年龄</label><input id="c-age" placeholder="25" /></div>
<div class="field"><label>性别</label><select id="c-gender"><option value="">-</option><option value="男">男</option><option value="女">女</option></select></div>
<div class="field"><label>拿货等级</label><input id="c-level" placeholder="如：A/B/C" /></div>
<div class="field full"><label>标签（逗号分隔）</label><input id="c-tags" placeholder="VIP, 复购" /></div>
</div>
<button type="button" class="secondary" id="btn-customer-save" style="margin-bottom:12px">保存客户</button>
<div id="customer-list"></div>
</div>
<div id="panel-greeting" class="mgmt-panel">
<div class="mgmt-form-grid">
<div class="field"><label>任务名称</label><input id="g-name" placeholder="每日早安" /></div>
<div class="field"><label>触发日期</label><input type="date" id="g-date" /></div>
<div class="field"><label>触发时间（时:分:秒）</label><input type="time" id="g-time" step="1" placeholder="09:00:00" /></div>
<div class="field full" id="g-time-error-wrap" style="display:none"><label>&nbsp;</label><span id="g-time-error" class="error-msg"></span></div>
<div class="field full">
<label>客户标签（从客户档案中选）</label>
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
<select id="g-tag-select" style="max-width:160px"><option value="">请先选账号 key 并加载</option></select>
<button type="button" class="secondary" id="g-tag-add" style="padding:4px 10px;font-size:12px">添加标签</button>
<span id="g-tags-chips" class="tags-chips"></span>
</div>
<p class="small-label" style="margin-top:4px">在下方「客户档案」中维护的标签会出现在下拉列表；可多选，发送时仅推送给带这些标签的客户。</p>
</div>
<div class="field full"><label>问候语模板（可用 {{name}}）</label><textarea id="g-template" rows="2" placeholder="早安，{{name}}！今日上新…"></textarea></div>
<div class="field"><label>&nbsp;</label><label><input type="checkbox" id="g-use-qwen" /> 使用千问生成个性化问候</label></div>
</div>
<button type="button" class="secondary" id="btn-greeting-add" style="margin-bottom:12px">添加定时任务</button>
<div id="greeting-list"></div>
</div>
<div id="panel-push" class="mgmt-panel">
<div class="small-label">商品标签</div>
<div class="mgmt-form-grid">
<div class="field"><input id="pt-name" placeholder="如：爆款、清仓、新中式" /></div>
<button type="button" class="secondary" id="btn-pt-add">添加标签</button>
</div>
<div id="product-tag-list" style="margin-bottom:12px"></div>
<div class="small-label">推送群组 <button type="button" class="secondary" id="btn-push-group-add" style="margin-left:8px;padding:4px 10px;font-size:12px">新建群组</button></div>
<div id="push-group-list" style="margin-bottom:12px"></div>
<div class="small-label">创建推送任务</div>
<div class="mgmt-form-grid">
<div class="field"><label>商品标签</label><select id="push-tag"></select></div>
<div class="field"><label>目标群组</label><select id="push-group"></select></div>
<div class="field full"><label>推送内容</label><textarea id="push-content" rows="2" placeholder="文案…"></textarea></div>
<button type="button" class="primary" id="btn-push-send">一键发送</button>
</div>
<div id="push-task-list"></div>
</div>
</div>
</div>
<script>
const $ = (id) => document.getElementById(id);
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;
}
async function callApi(path, options = {}) {
const url = API_BASE + path;
const res = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } });
let body = null;
try { body = await res.json(); } catch (_) {}
if (!res.ok) throw new Error((body && (body.detail || body.message)) || res.statusText || '请求失败');
return body;
}
let greetingSelectedTags = [];
function switchPanel(panelId) {
document.querySelectorAll('.mgmt-panel').forEach(p => p.classList.remove('show'));
document.querySelectorAll('.mgmt-tab').forEach(t => t.classList.remove('active'));
const panel = $(panelId);
if (panel) panel.classList.add('show');
const tab = document.querySelector('.mgmt-tab[data-panel="' + panelId + '"]');
if (tab) tab.classList.add('active');
if (panelId === 'panel-greeting') loadCustomerTagsForGreeting();
}
function renderGreetingTagChips() {
const el = $('g-tags-chips');
if (!el) return;
el.innerHTML = greetingSelectedTags.map(tag => '<span class="chip">' + escapeHtml(tag) + ' <button type="button" data-tag="' + escapeHtml(tag) + '" data-action="remove-g-tag">×</button></span>').join('');
el.querySelectorAll('[data-action="remove-g-tag"]').forEach(btn => {
btn.addEventListener('click', () => {
greetingSelectedTags = greetingSelectedTags.filter(t => t !== btn.dataset.tag);
renderGreetingTagChips();
});
});
}
function escapeHtml(s) {
const div = document.createElement('div');
div.textContent = s;
return div.innerHTML;
}
async function loadCustomerTagsForGreeting() {
const key = $('key').value.trim();
const sel = $('g-tag-select');
if (!sel) return;
if (!key) {
sel.innerHTML = '<option value="">请先填写账号 key</option>';
return;
}
try {
const data = await callApi('/api/customer-tags?key=' + encodeURIComponent(key));
const tags = data.tags || [];
sel.innerHTML = '<option value="">选择标签…</option>' + tags.map(t => '<option value="' + escapeHtml(t) + '">' + escapeHtml(t) + '</option>').join('');
} catch (e) {
sel.innerHTML = '<option value="">加载失败</option>';
}
}
async function loadCustomers() {
const key = $('key').value.trim();
if (!key) { $('customer-list').innerHTML = '<p class="small-label">请先填写账号 key。</p>'; return; }
try {
const data = await callApi('/api/customers?key=' + encodeURIComponent(key));
const list = data.items || [];
const html = list.length ? '<table class="mgmt-table"><thead><tr><th>备注</th><th>wxid</th><th>地区</th><th>等级</th><th>标签</th><th></th></tr></thead><tbody>' +
list.map(c => '<tr><td>' + (c.remark_name || '-') + '</td><td>' + (c.wxid || '-') + '</td><td>' + (c.region || '-') + '</td><td>' + (c.level || '-') + '</td><td>' + (c.tags || []).join(',') + '</td><td><button type="button" class="secondary" data-id="' + c.id + '" data-action="del-customer">删</button></td></tr>').join('') + '</tbody></table>' : '<p class="small-label">暂无客户，请先保存。</p>';
$('customer-list').innerHTML = html;
$('customer-list').querySelectorAll('[data-action="del-customer"]').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('确定删除？')) return;
try {
await callApi('/api/customers/' + btn.dataset.id, { method: 'DELETE' });
loadCustomers();
} catch (e) { alert('删除失败: ' + e.message); }
});
});
} catch (e) { $('customer-list').innerHTML = '<p class="small-label">加载失败: ' + e.message + '</p>'; }
}
async function saveCustomer() {
const key = getKey();
if (!key) return;
const wxid = $('c-wxid').value.trim();
if (!wxid) { alert('请填写微信ID'); return; }
const tagsStr = $('c-tags').value.trim();
const tags = tagsStr ? tagsStr.split(',').map(s => s.trim()).filter(Boolean) : [];
try {
await callApi('/api/customers', { method: 'POST', body: JSON.stringify({ key, wxid, remark_name: $('c-remark').value.trim(), region: $('c-region').value.trim(), age: $('c-age').value.trim(), gender: $('c-gender').value, level: $('c-level').value.trim(), tags }) });
loadCustomers();
} catch (e) { alert('保存失败: ' + e.message); }
}
function getGreetingSendTimeISO() {
const dateVal = $('g-date').value.trim();
const timeVal = $('g-time').value.trim();
if (!dateVal || !timeVal) return null;
const timePart = timeVal.length === 5 ? timeVal + ':00' : timeVal;
return dateVal + 'T' + timePart;
}
function validateGreetingTime() {
const iso = getGreetingSendTimeISO();
const wrap = $('g-time-error-wrap');
const msgEl = $('g-time-error');
if (!iso) {
wrap.style.display = 'none';
return { valid: false, message: '' };
}
const chosen = new Date(iso);
if (isNaN(chosen.getTime())) {
wrap.style.display = 'block';
msgEl.textContent = '请选择有效的日期和时间';
return { valid: false, message: msgEl.textContent };
}
if (chosen <= new Date()) {
wrap.style.display = 'block';
msgEl.textContent = '触发时间必须是未来时间，请重新选择';
return { valid: false, message: msgEl.textContent };
}
wrap.style.display = 'none';
msgEl.textContent = '';
return { valid: true, message: '' };
}
async function loadGreetingTasks() {
const key = $('key').value.trim();
if (!key) { $('greeting-list').innerHTML = '<p class="small-label">请先填写账号 key。</p>'; return; }
try {
const data = await callApi('/api/greeting-tasks?key=' + encodeURIComponent(key));
const list = data.items || [];
const fmt = (t) => (t.send_time || t.cron || '-').replace('T', ' ');
const html = list.length ? '<table class="mgmt-table"><thead><tr><th>名称</th><th>触发时间</th><th>标签</th><th>千问</th><th></th></tr></thead><tbody>' +
list.map(t => '<tr><td>' + t.name + '</td><td>' + fmt(t) + '</td><td>' + (t.customer_tags || []).join(',') + '</td><td>' + (t.use_qwen ? '是' : '否') + '</td><td><button type="button" class="secondary" data-id="' + t.id + '" data-action="del-greeting">删</button></td></tr>').join('') + '</tbody></table>' : '<p class="small-label">暂无定时任务。</p>';
$('greeting-list').innerHTML = html;
$('greeting-list').querySelectorAll('[data-action="del-greeting"]').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('确定删除？')) return;
try {
await callApi('/api/greeting-tasks/' + btn.dataset.id, { method: 'DELETE' });
loadGreetingTasks();
} catch (e) { alert(e.message); }
});
});
} catch (e) { $('greeting-list').innerHTML = '<p class="small-label">加载失败: ' + e.message + '</p>'; }
}
async function addGreetingTask() {
const key = getKey();
if (!key) return;
const name = $('g-name').value.trim();
if (!name) { alert('请填写任务名称'); return; }
const send_time = getGreetingSendTimeISO();
if (!send_time) { alert('请选择触发日期和时分秒'); return; }
const check = validateGreetingTime();
if (!check.valid) {
alert(check.message || '触发时间必须是未来时间，请重新选择');
return;
}
const customer_tags = greetingSelectedTags.slice();
const template = $('g-template').value.trim() || '早安，{{name}}！';
try {
await callApi('/api/greeting-tasks', { method: 'POST', body: JSON.stringify({ key, name, send_time, customer_tags, template, use_qwen: $('g-use-qwen').checked }) });
greetingSelectedTags = [];
renderGreetingTagChips();
loadGreetingTasks();
} catch (e) { alert(e.message); }
}
async function loadProductTags() {
const key = $('key').value.trim();
if (!key) { $('product-tag-list').innerHTML = '<span class="small-label">请先填写账号 key。</span>'; return; }
try {
const data = await callApi('/api/product-tags?key=' + encodeURIComponent(key));
const list = data.items || [];
$('product-tag-list').innerHTML = list.length ? list.map(t => '<span class="tag">' + t.name + ' <button type="button" data-id="' + t.id + '" data-action="del-pt">×</button></span>').join('') : '<span class="small-label">暂无标签</span>';
$('product-tag-list').querySelectorAll('[data-action="del-pt"]').forEach(btn => {
btn.addEventListener('click', async () => {
try {
await callApi('/api/product-tags/' + btn.dataset.id, { method: 'DELETE' });
loadProductTags();
fillPushSelects();
} catch (e) { alert(e.message); }
});
});
fillPushSelects();
} catch (e) { $('product-tag-list').innerHTML = '<span class="small-label">加载失败</span>'; }
}
async function loadPushGroups() {
const key = $('key').value.trim();
if (!key) { $('push-group-list').innerHTML = '<p class="small-label">请先填写账号 key。</p>'; return; }
try {
const data = await callApi('/api/push-groups?key=' + encodeURIComponent(key));
const list = data.items || [];
$('push-group-list').innerHTML = list.length ? '<table class="mgmt-table"><tr><th>群组名</th><th>客户数</th><th></th></tr>' + list.map(g => '<tr><td>' + g.name + '</td><td>' + (g.customer_ids || []).length + '</td><td><button type="button" class="secondary" data-id="' + g.id + '" data-action="del-pg">删</button></td></tr>').join('') + '</table>' : '<p class="small-label">暂无群组。</p>';
$('push-group-list').querySelectorAll('[data-action="del-pg"]').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('确定删除？')) return;
try {
await callApi('/api/push-groups/' + btn.dataset.id, { method: 'DELETE' });
loadPushGroups();
fillPushSelects();
} catch (e) { alert(e.message); }
});
});
fillPushSelects();
} catch (e) { $('push-group-list').innerHTML = '<p class="small-label">加载失败</p>'; }
}
function fillPushSelects() {
const key = $('key').value.trim();
if (!key) return;
Promise.all([callApi('/api/product-tags?key=' + encodeURIComponent(key)), callApi('/api/push-groups?key=' + encodeURIComponent(key))]).then(([tagsRes, groupsRes]) => {
const tags = tagsRes.items || [], groups = groupsRes.items || [];
const tagSel = $('push-tag');
const groupSel = $('push-group');
if (tagSel) tagSel.innerHTML = '<option value="">选择标签</option>' + tags.map(t => '<option value="' + t.id + '">' + t.name + '</option>').join('');
if (groupSel) groupSel.innerHTML = '<option value="">选择群组</option>' + groups.map(g => '<option value="' + g.id + '">' + g.name + '</option>').join('');
}).catch(() => {});
}
async function addProductTag() {
const key = getKey();
if (!key) return;
const name = $('pt-name').value.trim();
if (!name) { alert('请输入标签名'); return; }
try {
await callApi('/api/product-tags', { method: 'POST', body: JSON.stringify({ key, name }) });
$('pt-name').value = '';
loadProductTags();
} catch (e) { alert(e.message); }
}
async function createPushGroup() {
const key = getKey();
if (!key) return;
const name = prompt('群组名称');
if (!name) return;
try {
await callApi('/api/push-groups', { method: 'POST', body: JSON.stringify({ key, name, customer_ids: [], tag_ids: [] }) });
loadPushGroups();
} catch (e) { alert(e.message); }
}
async function doPushSend() {
const key = getKey();
if (!key) return;
const tagId = $('push-tag').value;
const groupId = $('push-group').value;
const content = $('push-content').value.trim();
if (!tagId || !groupId || !content) { alert('请选择标签、群组并填写内容'); return; }
try {
await callApi('/api/push-tasks', { method: 'POST', body: JSON.stringify({ key, product_tag_id: tagId, group_id: groupId, content }) });
$('push-content').value = '';
} catch (e) { alert(e.message); }
}
document.querySelectorAll('.mgmt-tab').forEach(tab => tab.addEventListener('click', () => switchPanel(tab.dataset.panel)));
$('btn-customer-save').addEventListener('click', saveCustomer);
$('btn-greeting-add').addEventListener('click', addGreetingTask);
$('g-tag-add').addEventListener('click', () => {
const sel = $('g-tag-select');
const v = sel && sel.value ? sel.value.trim() : '';
if (!v) return;
if (greetingSelectedTags.indexOf(v) >= 0) return;
greetingSelectedTags.push(v);
renderGreetingTagChips();
});
$('key').addEventListener('input', () => { if ($('panel-greeting') && $('panel-greeting').classList.contains('show')) loadCustomerTagsForGreeting(); });
(function initGreetingTimeMin() {
const today = new Date().toISOString().slice(0, 10);
const dateEl = $('g-date');
if (dateEl) dateEl.setAttribute('min', today);
function updateTimeMin() {
const d = $('g-date').value;
const timeEl = $('g-time');
const todayStr = new Date().toISOString().slice(0, 10);
if (!d || d !== todayStr) { timeEl.removeAttribute('min'); return; }
const now = new Date();
const h = String(now.getHours()).padStart(2, '0');
const m = String(now.getMinutes()).padStart(2, '0');
const s = String(now.getSeconds()).padStart(2, '0');
timeEl.setAttribute('min', h + ':' + m + ':' + s);
}
function onGreetingTimeChange() {
updateTimeMin();
validateGreetingTime();
}
if ($('g-date')) { $('g-date').addEventListener('change', onGreetingTimeChange); $('g-date').addEventListener('input', onGreetingTimeChange); }
if ($('g-time')) { $('g-time').addEventListener('change', onGreetingTimeChange); $('g-time').addEventListener('input', onGreetingTimeChange); }
})();
$('btn-pt-add').addEventListener('click', addProductTag);
$('btn-push-group-add').addEventListener('click', createPushGroup);
$('btn-push-send').addEventListener('click', doPushSend);
$('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);
loadCustomers();
loadGreetingTasks();
loadProductTags();
loadPushGroups();
(function wsStatusCheck() {
let wasConnected = false;
const CHECK_MS = 8000;
const t = setInterval(async () => {
try {
const r = await fetch(API_BASE + '/api/ws-status', { cache: 'no-store' });
const d = await r.json().catch(() => ({}));
if (d && d.connected) wasConnected = true;
if (wasConnected && d && d.connected === false) {
clearInterval(t);
alert('连接已断开，请重新登录');
window.location.href = 'index.html';
}
} catch (_) {}
}, CHECK_MS);
})();
</script>
</body>
</html>

177
public/models.html Normal file
View File

@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>模型管理 - 多模型切换与 API Key</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
color-scheme: light dark;
--bg: #0f172a;
--card: #020617;
--border: #1e293b;
--accent: #22c55e;
--accent-soft: rgba(34, 197, 94, 0.12);
--text: #e5e7eb;
--muted: #9ca3af;
--radius: 16px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
font-family: system-ui, -apple-system, sans-serif;
color: var(--text);
}
.nav {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
border-bottom: 1px solid var(--border);
background: rgba(2, 6, 23, 0.95);
}
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--accent); }
.nav a.current { color: var(--accent); font-weight: 500; }
.container { max-width: 720px; margin: 0 auto; padding: 24px; }
.card {
border-radius: var(--radius);
border: 1px solid var(--border);
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.9), #020617);
padding: 20px;
margin-bottom: 20px;
}
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.small-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid > div { display: flex; flex-direction: column; }
.form-grid label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.form-grid input, .form-grid select {
padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,0.9); color: var(--text); font-size: 13px;
}
.form-grid input[type="password"], .form-grid input[name="api_key"] { font-family: monospace; }
.mgmt-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.mgmt-table th, .mgmt-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.mgmt-table .current-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.primary { padding: 10px 20px; border-radius: 8px; background: var(--accent); color: #000; border: none; cursor: pointer; font-weight: 500; }
.secondary { padding: 6px 12px; border-radius: 8px; background: rgba(30,41,59,0.9); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 12px; margin-right: 6px; }
</style>
</head>
<body>
<nav class="nav">
<a href="index.html">登录</a>
<a href="manage.html">客户与消息管理</a>
<a href="chat.html">实时消息</a>
<a href="models.html" class="current">模型管理</a>
</nav>
<div class="container">
<div class="card">
<div class="card-title">多模型切换 · 填写对应 API Key</div>
<p class="small-label">添加模型后设为「当前使用」，问候语生成、千问生成等将使用当前模型的 API Key 与端点。支持千问（DashScope）与 OpenAI 兼容接口。</p>
<div class="form-grid" style="margin-top:14px">
<div class="full"><label>显示名称</label><input id="m-name" placeholder="如：千问-turbo、GPT-4" /></div>
<div><label>类型</label><select id="m-provider"><option value="qwen">千问（DashScope）</option><option value="doubao">豆包（Volcengine ARK）</option><option value="openai">OpenAI 兼容</option></select></div>
<div class="full"><label>API Key</label><input type="password" id="m-api_key" name="api_key" placeholder="sk-xxx" autocomplete="off" /></div>
<div class="full"><label>Base URL（可选，千问默认 DashScope）</label><input id="m-base_url" placeholder="留空则用默认" /></div>
<div><label>模型名</label><input id="m-model_name" placeholder="如 qwen-turbo、doubao-seed-2-0-pro-260215、gpt-3.5-turbo" /></div>
<div style="display:flex;align-items:flex-end"><label><input type="checkbox" id="m-is_current" /> 设为当前使用</label></div>
</div>
<button type="button" class="primary" id="btn-model-add">添加模型</button>
</div>
<div class="card">
<div class="card-title">已配置模型</div>
<div id="model-list"></div>
</div>
</div>
<script>
const $ = (id) => document.getElementById(id);
const API_BASE = 'http://localhost:8000';
async function callApi(path, options = {}) {
const url = API_BASE + path;
const res = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } });
let body = null;
try { body = await res.json(); } catch (_) {}
if (!res.ok) throw new Error((body && (body.detail || body.message)) || res.statusText || '请求失败');
return body;
}
async function loadModels() {
try {
const data = await callApi('/api/models');
const list = data.items || [];
const html = list.length ? '<table class="mgmt-table"><thead><tr><th>名称</th><th>类型</th><th>模型</th><th>当前</th><th>操作</th></tr></thead><tbody>' +
list.map(m => '<tr><td>' + (m.name || '-') + '</td><td>' + (m.provider === 'qwen' ? '千问' : m.provider === 'doubao' ? '豆包' : 'OpenAI') + '</td><td>' + (m.model_name || '-') + '</td><td>' + (m.is_current ? '<span class="current-tag">当前</span>' : '<button type="button" class="secondary" data-id="' + m.id + '" data-action="set-current">设为当前</button>') + '</td><td><button type="button" class="secondary" data-id="' + m.id + '" data-action="del">删除</button></td></tr>').join('') + '</tbody></table>' : '<p class="small-label">暂无模型，请在上方添加并填写 API Key。</p>';
$('model-list').innerHTML = html;
$('model-list').querySelectorAll('[data-action="set-current"]').forEach(btn => {
btn.addEventListener('click', async () => {
try {
await callApi('/api/models/' + btn.dataset.id + '/set-current', { method: 'POST' });
loadModels();
} catch (e) { alert('设置失败: ' + e.message); }
});
});
$('model-list').querySelectorAll('[data-action="del"]').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('确定删除该模型？')) return;
try {
await callApi('/api/models/' + btn.dataset.id, { method: 'DELETE' });
loadModels();
} catch (e) { alert('删除失败: ' + e.message); }
});
});
} catch (e) { $('model-list').innerHTML = '<p class="small-label">加载失败: ' + e.message + '</p>'; }
}
async function addModel() {
const name = $('m-name').value.trim();
const provider = $('m-provider').value;
const api_key = $('m-api_key').value.trim();
if (!name || !api_key) { alert('请填写显示名称和 API Key'); return; }
try {
await callApi('/api/models', {
method: 'POST',
body: JSON.stringify({
name,
provider,
api_key,
base_url: $('m-base_url').value.trim() || undefined,
model_name: $('m-model_name').value.trim() || undefined,
is_current: $('m-is_current').checked,
}),
});
$('m-name').value = '';
$('m-api_key').value = '';
$('m-base_url').value = '';
$('m-model_name').value = '';
$('m-is_current').checked = false;
loadModels();
} catch (e) { alert('添加失败: ' + e.message); }
}
$('btn-model-add').addEventListener('click', addModel);
loadModels();
(function wsStatusCheck() {
const API_BASE = 'http://localhost:8000';
let wasConnected = false;
const CHECK_MS = 8000;
const t = setInterval(async () => {
try {
const r = await fetch(API_BASE + '/api/ws-status', { cache: 'no-store' });
const d = await r.json().catch(() => ({}));
if (d && d.connected) wasConnected = true;
if (wasConnected && d && d.connected === false) {
clearInterval(t);
alert('连接已断开，请重新登录');
window.location.href = 'index.html';
}
} catch (_) {}
}, CHECK_MS);
})();
</script>
</body>
</html>