799 lines
44 KiB
JavaScript
799 lines
44 KiB
JavaScript
/* dsfree2api web console */
|
||
(function () {
|
||
"use strict";
|
||
|
||
const $ = (s, r) => (r || document).querySelector(s);
|
||
const $$ = (s, r) => Array.from((r || document).querySelectorAll(s));
|
||
const view = $("#view");
|
||
const TITLES = {
|
||
dashboard: "仪表盘", models: "模型与站点", keys: "API Key", proxy: "代理线路",
|
||
turnstile: "Turnstile", playground: "对话调试", logs: "实时日志", settings: "设置"
|
||
};
|
||
|
||
let overviewTimer = null;
|
||
let logStop = null;
|
||
let lastOverview = null;
|
||
|
||
/* ── helpers ─────────────────────────────────────────────── */
|
||
function toast(msg, kind) {
|
||
const t = $("#toast");
|
||
t.textContent = msg;
|
||
t.className = "toast " + (kind || "");
|
||
clearTimeout(t._h);
|
||
t._h = setTimeout(() => t.classList.add("hidden"), 3200);
|
||
}
|
||
|
||
async function api(path, opts) {
|
||
opts = opts || {};
|
||
const init = { method: opts.method || (opts.body !== undefined ? "POST" : "GET"), headers: {} };
|
||
if (opts.signal) init.signal = opts.signal;
|
||
if (opts.body !== undefined) {
|
||
init.headers["Content-Type"] = "application/json";
|
||
init.body = typeof opts.body === "string" ? opts.body : JSON.stringify(opts.body);
|
||
}
|
||
const res = await fetch(path, init);
|
||
let data = null;
|
||
try { data = await res.json(); } catch (e) { data = null; }
|
||
if (res.status === 401 && !path.endsWith("/login")) {
|
||
showLogin();
|
||
throw new Error("unauthorized");
|
||
}
|
||
if (!res.ok) {
|
||
const msg = (data && (data.error || data.detail)) || res.statusText;
|
||
throw new Error(typeof msg === "string" ? msg : JSON.stringify(msg));
|
||
}
|
||
return data;
|
||
}
|
||
|
||
function esc(s) {
|
||
return String(s == null ? "" : s).replace(/[&<>"']/g, c =>
|
||
({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
|
||
}
|
||
const fmtInt = n => (n || 0).toLocaleString("en-US");
|
||
const fmtPct = (a, b) => b ? (a * 100 / b).toFixed(1) + "%" : "0%";
|
||
const fmtMs = ms => ms >= 1000 ? (ms / 1000).toFixed(2) + "s" : Math.round(ms) + "ms";
|
||
const fmtBytes = n => n > 1048576 ? (n / 1048576).toFixed(1) + "MB" : n > 1024 ? (n / 1024).toFixed(1) + "KB" : n + "B";
|
||
const timeStr = t => new Date(t).toLocaleTimeString("zh-CN", { hour12: false });
|
||
|
||
function switchHTML(id, checked) {
|
||
return `<label class="switch"><input type="checkbox" id="${id}" ${checked ? "checked" : ""}><span class="slider"></span></label>`;
|
||
}
|
||
|
||
/* ── auth ────────────────────────────────────────────────── */
|
||
async function ensureSession() {
|
||
try {
|
||
const s = await api("/api/session");
|
||
if (s.authenticated) { $("#login").classList.add("hidden"); return true; }
|
||
} catch (e) { /* ignore */ }
|
||
showLogin();
|
||
return false;
|
||
}
|
||
function showLogin() {
|
||
$("#login").classList.remove("hidden");
|
||
setTimeout(() => $("#login-password").focus(), 50);
|
||
}
|
||
async function doLogin() {
|
||
const pw = $("#login-password").value;
|
||
if (!pw) return;
|
||
try {
|
||
await api("/api/login", { method: "POST", body: { password: pw } });
|
||
$("#login-error").textContent = "";
|
||
$("#login").classList.add("hidden");
|
||
$("#login-password").value = "";
|
||
route();
|
||
} catch (e) {
|
||
$("#login-error").textContent = e.message === "invalid password" ? "密码错误" : e.message;
|
||
}
|
||
}
|
||
|
||
/* ── router ──────────────────────────────────────────────── */
|
||
function route() {
|
||
if (overviewTimer) { clearInterval(overviewTimer); overviewTimer = null; }
|
||
if (logStop) { logStop(); logStop = null; }
|
||
const hash = location.hash.replace(/^#\/?/, "") || "dashboard";
|
||
const page = (hash.split("?")[0] || "dashboard");
|
||
$$("#nav a").forEach(a => a.classList.toggle("active", a.dataset.page === page));
|
||
$("#page-title").textContent = TITLES[page] || page;
|
||
view.innerHTML = '<div class="empty">加载中…</div>';
|
||
const fn = PAGES[page] || PAGES.dashboard;
|
||
fn().catch(e => { view.innerHTML = `<div class="empty">加载失败：${esc(e.message)}</div>`; });
|
||
}
|
||
|
||
/* ── overview poll ───────────────────────────────────────── */
|
||
async function fetchOverview() {
|
||
const ov = await api("/api/overview");
|
||
lastOverview = ov;
|
||
renderBadges(ov);
|
||
return ov;
|
||
}
|
||
function renderBadges(ov) {
|
||
const st = (ov.turnstile.status || []).filter(s => s.valid).length;
|
||
const total = (ov.sites || []).filter(s => s.enabled).length;
|
||
$("#sys-version").textContent = "v" + (ov.system.version || "?");
|
||
$("#sys-badges").innerHTML = `
|
||
<span class="badge ok">运行 ${Math.floor(ov.system.uptime_s / 3600)}h${Math.floor(ov.system.uptime_s % 3600 / 60)}m</span>
|
||
<span class="badge">${esc(ov.system.go)} · ${esc(ov.system.os)}/${esc(ov.system.arch)}</span>
|
||
<span class="badge ${st ? "ok" : "warn"}">Turnstile ${st}/${total}</span>
|
||
<span class="badge">在线 ${fmtInt(ov.metrics.in_flight)}</span>`;
|
||
}
|
||
|
||
/* ── pages ───────────────────────────────────────────────── */
|
||
const PAGES = {};
|
||
|
||
PAGES.dashboard = async () => {
|
||
view.innerHTML = `
|
||
<div class="grid g4">
|
||
<div class="card"><div class="stat-label">总请求</div><div class="stat-value" id="s-req">–</div><div class="stat-sub" id="s-rps"></div></div>
|
||
<div class="card"><div class="stat-label">错误 / 空响应</div><div class="stat-value" id="s-err">–</div><div class="stat-sub" id="s-errpct"></div></div>
|
||
<div class="card"><div class="stat-label">Token（估算）</div><div class="stat-value" id="s-tok">–</div><div class="stat-sub" id="s-toksub"></div></div>
|
||
<div class="card"><div class="stat-label">延迟 P50 / P95</div><div class="stat-value" id="s-lat">–</div><div class="stat-sub" id="s-latsub"></div></div>
|
||
</div>
|
||
<div class="grid g2">
|
||
<div class="card"><h3>模型用量</h3><div class="table-wrap"><table>
|
||
<thead><tr><th>模型</th><th class="num">请求</th><th class="num">错误</th><th class="num">Token</th><th class="num">平均耗时</th></tr></thead>
|
||
<tbody id="tb-models"><tr><td colspan="5" class="empty">暂无数据</td></tr></tbody>
|
||
</table></div></div>
|
||
<div class="card"><h3>站点状态</h3><div id="site-cards" class="grid" style="gap:10px"></div></div>
|
||
</div>
|
||
<div class="card"><div class="toolbar" style="margin-bottom:10px"><h3 style="margin:0">最近请求</h3>
|
||
<div><button class="btn small" id="btn-invalidate">刷新会话缓存</button>
|
||
<button class="btn small danger" id="btn-reset">清空统计</button></div></div>
|
||
<div class="table-wrap"><table>
|
||
<thead><tr><th>时间</th><th>模型</th><th>站点</th><th>线路</th><th>类型</th><th class="num">耗时</th><th class="num">Token</th><th>状态</th></tr></thead>
|
||
<tbody id="tb-recent"><tr><td colspan="8" class="empty">暂无请求</td></tr></tbody>
|
||
</table></div>
|
||
</div>`;
|
||
|
||
$("#btn-invalidate").onclick = async () => { await api("/api/actions", { body: { action: "invalidate" } }); toast("已清除 nonce 与 cookie 缓存", "ok"); };
|
||
$("#btn-reset").onclick = async () => { await api("/api/actions", { body: { action: "reset_metrics" } }); toast("统计已清空", "ok"); refresh(); };
|
||
|
||
async function refresh() {
|
||
let ov;
|
||
try { ov = await fetchOverview(); } catch (e) { return; }
|
||
const m = ov.metrics;
|
||
$("#s-req").textContent = fmtInt(m.requests);
|
||
$("#s-rps").textContent = `${m.rps.toFixed(2)} req/s · 流式 ${fmtInt(m.streams)} · 运行中 ${fmtInt(m.in_flight)}`;
|
||
$("#s-err").textContent = fmtInt(m.errors);
|
||
$("#s-err").className = "stat-value " + (m.errors ? "err" : "ok");
|
||
$("#s-errpct").textContent = `错误率 ${fmtPct(m.errors, m.requests)} · 空响应 ${fmtInt(m.empty)} · 拒绝 ${fmtInt(m.unauthorized)} · 限流 ${fmtInt(m.rate_limited)}`;
|
||
$("#s-tok").textContent = fmtInt(m.prompt_tokens + m.completion_tokens);
|
||
$("#s-toksub").textContent = `输入 ${fmtInt(m.prompt_tokens)} · 输出 ${fmtInt(m.completion_tokens)}`;
|
||
$("#s-lat").textContent = m.latency.count ? `${fmtMs(m.latency.p50)} / ${fmtMs(m.latency.p95)}` : "–";
|
||
$("#s-latsub").textContent = m.latency.count ? `样本 ${m.latency.count} · 最大 ${fmtMs(m.latency.max)}` : "尚无样本";
|
||
|
||
const rows = Object.entries(m.models || {});
|
||
$("#tb-models").innerHTML = rows.length ? rows.map(([id, v]) => `
|
||
<tr><td><span class="tag">${esc(id)}</span></td>
|
||
<td class="num">${fmtInt(v.requests)}</td>
|
||
<td class="num" style="color:${v.errors ? "var(--err)" : "inherit"}">${fmtInt(v.errors)}</td>
|
||
<td class="num">${fmtInt(v.prompt_tokens + v.completion_tokens)}</td>
|
||
<td class="num">${v.requests ? fmtMs(v.sum_ms / v.requests) : "–"}</td></tr>`).join("")
|
||
: '<tr><td colspan="5" class="empty">暂无数据</td></tr>';
|
||
|
||
$("#site-cards").innerHTML = (ov.sites || []).map(s => {
|
||
const ts = (ov.turnstile.status || []).find(x => x.site === s.code) || {};
|
||
const ms = m.sites && m.sites[s.code];
|
||
const pct = ts.remaining_s > 0 ? Math.max(0, Math.min(100, ts.remaining_s / (ov.turnstile.config.cookie_ttl_seconds || 10800) * 100)) : 0;
|
||
return `<div class="card" style="padding:12px">
|
||
<div class="toolbar">
|
||
<div><b>${esc(s.code.toUpperCase())}</b> <span class="pill ${s.enabled ? "on" : "off"}">${s.enabled ? "启用" : "停用"}</span>
|
||
<div class="dim">${esc(s.base_url)}</div></div>
|
||
<div class="right"><button class="btn small" data-probe="${esc(s.code)}">探测</button>
|
||
<button class="btn small" data-quota="${esc(s.code)}">额度</button>
|
||
<button class="btn small" data-rotate="${esc(s.code)}">重置</button></div>
|
||
</div>
|
||
<div class="dim" style="margin-top:8px">请求 ${fmtInt(ms ? ms.requests : 0)} · 错误 ${fmtInt(ms ? ms.errors : 0)} · Cookie ${ts.valid ? "有效 " + Math.round(ts.remaining_s / 60) + " 分钟" : "未建立"}</div>
|
||
<div class="bar"><i style="width:${pct}%"></i></div></div>`;
|
||
}).join("") || '<div class="empty">无站点</div>';
|
||
|
||
$$("[data-probe]").forEach(b => b.onclick = async () => {
|
||
b.disabled = true; b.textContent = "…";
|
||
try {
|
||
const r = await api("/api/actions", { body: { action: "probe_site", site: b.dataset.probe } });
|
||
toast(r.ok ? `${b.dataset.probe}: HTTP ${r.status} · ${r.ms}ms · 对话容器 ${r.chat_container ? "有" : "无"}` : `${b.dataset.probe}: ${r.error || "失败"}`, r.ok ? "ok" : "err");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
b.disabled = false; b.textContent = "探测";
|
||
});
|
||
|
||
$$("[data-quota]").forEach(b => b.onclick = async () => {
|
||
b.disabled = true; b.textContent = "…";
|
||
try {
|
||
const r = await api("/api/actions", { body: { action: "site_balance", site: b.dataset.quota } });
|
||
const period = r.reset_period === "daily" ? "每日" : (r.reset_period || "");
|
||
toast(r.ok ? `${b.dataset.quota}: 剩余 ${fmtInt(r.remaining)} / ${fmtInt(r.limit)} · 已用 ${fmtInt(r.used)} · ${period}重置` : `${b.dataset.quota}: ${r.error || "失败"}`, r.ok ? "ok" : "err");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
b.disabled = false; b.textContent = "额度";
|
||
});
|
||
|
||
$$("[data-rotate]").forEach(b => b.onclick = async () => {
|
||
b.disabled = true; b.textContent = "…";
|
||
try {
|
||
const r = await api("/api/actions", { body: { action: "rotate_guest", site: b.dataset.rotate } });
|
||
toast(r.ok ? `${b.dataset.rotate}: 已换新访客身份，剩余 ${fmtInt(r.remaining)} / ${fmtInt(r.limit)}` : `${b.dataset.rotate}: ${r.error || "失败"}`, r.ok ? "ok" : "err");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
b.disabled = false; b.textContent = "重置";
|
||
});
|
||
|
||
const rec = (m.recent || []).slice(0, 30);
|
||
$("#tb-recent").innerHTML = rec.length ? rec.map(r => `
|
||
<tr><td class="dim">${timeStr(r.at)}</td>
|
||
<td><span class="tag">${esc(r.served_by || r.model)}</span></td>
|
||
<td>${esc(r.site)}</td><td class="dim">${esc(r.route || "–")}</td>
|
||
<td>${r.stream ? "流式" : "同步"}</td>
|
||
<td class="num">${fmtMs(r.duration_ms)}</td>
|
||
<td class="num">${fmtInt((r.prompt_tokens || 0) + (r.completion_tokens || 0))}</td>
|
||
<td><span class="pill ${r.status === "ok" ? "on" : "off"}">${esc(r.status)}</span>${r.error ? ` <span class="dim">${esc(r.error.slice(0, 60))}</span>` : ""}</td></tr>`).join("")
|
||
: '<tr><td colspan="8" class="empty">暂无请求</td></tr>';
|
||
}
|
||
await refresh();
|
||
overviewTimer = setInterval(refresh, 5000);
|
||
};
|
||
|
||
PAGES.models = async () => {
|
||
const ov = await fetchOverview();
|
||
view.innerHTML = `
|
||
<div class="card"><div class="toolbar"><h3 style="margin:0">模型</h3>
|
||
<div class="dim">bot_id / post_id 修改后会自动清除该模型的 nonce 缓存</div></div>
|
||
<div class="table-wrap mt"><table>
|
||
<thead><tr><th>ID</th><th>标签</th><th>站点</th><th>上游模型</th><th>路径</th><th class="num">bot</th><th class="num">post</th><th>启用</th><th></th></tr></thead>
|
||
<tbody id="tb"></tbody></table></div></div>
|
||
<div class="card"><h3>站点</h3><div class="table-wrap"><table>
|
||
<thead><tr><th>代码</th><th>Base URL</th><th>AJAX URL</th><th>语言</th><th>启用</th></tr></thead>
|
||
<tbody id="tb-sites"></tbody></table></div></div>`;
|
||
|
||
$("#tb").innerHTML = ov.models.map(m => `
|
||
<tr data-id="${esc(m.id)}">
|
||
<td><span class="tag">${esc(m.id)}</span></td>
|
||
<td><input data-f="label" value="${esc(m.label)}" style="min-width:130px"></td>
|
||
<td>${esc(m.site)}</td><td class="dim">${esc(m.upstream_id)}</td>
|
||
<td><input data-f="page_path" value="${esc(m.page_path)}" style="width:80px"></td>
|
||
<td class="num"><input data-f="bot_id" type="number" value="${m.bot_id}" style="width:90px;text-align:right"></td>
|
||
<td class="num"><input data-f="post_id" type="number" value="${m.post_id}" style="width:90px;text-align:right"></td>
|
||
<td>${switchHTML("sw-" + m.id, m.enabled)}</td>
|
||
<td><button class="btn small primary" data-save="${esc(m.id)}">保存</button></td>
|
||
</tr>`).join("");
|
||
|
||
$("#tb-sites").innerHTML = ov.sites.map(s => `
|
||
<tr data-code="${esc(s.code)}">
|
||
<td><b>${esc(s.code.toUpperCase())}</b></td>
|
||
<td><input data-f="base_url" value="${esc(s.base_url)}" style="min-width:190px"></td>
|
||
<td><input data-f="ajax_url" value="${esc(s.ajax_url)}" style="min-width:230px"></td>
|
||
<td><input data-f="language" value="${esc(s.language)}" style="min-width:200px"></td>
|
||
<td>${switchHTML("sws-" + s.code, s.enabled)}
|
||
<div class="mt"><button class="btn small primary" data-savesite="${esc(s.code)}">保存</button></div></td>
|
||
</tr>`).join("");
|
||
|
||
$$("[data-save]").forEach(b => b.onclick = async () => {
|
||
const tr = b.closest("tr"), id = b.dataset.save;
|
||
const g = f => $(`[data-f="${f}"]`, tr).value;
|
||
try {
|
||
await api("/api/actions", { body: { action: "update_model", id, label: g("label"), page_path: g("page_path"), bot_id: +g("bot_id"), post_id: +g("post_id") } });
|
||
toast("模型已保存", "ok");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
});
|
||
$$("[data-savesite]").forEach(b => b.onclick = async () => {
|
||
const tr = b.closest("tr"), code = b.dataset.savesite;
|
||
const g = f => $(`[data-f="${f}"]`, tr).value;
|
||
try {
|
||
await api("/api/actions", { body: { action: "update_site", code, base_url: g("base_url"), ajax_url: g("ajax_url"), language: g("language") } });
|
||
toast("站点已保存", "ok");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
});
|
||
ov.models.forEach(m => {
|
||
$("#sw-" + CSS.escape(m.id)).onchange = async ev => {
|
||
try { await api("/api/actions", { body: { action: "toggle_model", id: m.id, enabled: ev.target.checked } }); toast("已更新", "ok"); }
|
||
catch (e) { toast(e.message, "err"); ev.target.checked = !ev.target.checked; }
|
||
};
|
||
});
|
||
ov.sites.forEach(s => {
|
||
$("#sws-" + CSS.escape(s.code)).onchange = async ev => {
|
||
try { await api("/api/actions", { body: { action: "toggle_site", id: s.code, enabled: ev.target.checked } }); toast("已更新", "ok"); }
|
||
catch (e) { toast(e.message, "err"); ev.target.checked = !ev.target.checked; }
|
||
};
|
||
});
|
||
};
|
||
|
||
PAGES.keys = async () => {
|
||
const ov = await fetchOverview();
|
||
view.innerHTML = `
|
||
<div class="card"><div class="toolbar">
|
||
<div><h3 style="margin:0">下游 API Key</h3><div class="dim mt">留空表示不鉴权；请求时使用 <code>Authorization: Bearer <key></code> 或 <code>X-Api-Key</code></div></div>
|
||
<button class="btn primary" id="btn-gen">生成新 Key</button></div>
|
||
<div class="table-wrap mt"><table>
|
||
<thead><tr><th>Key</th><th>状态</th><th></th></tr></thead><tbody id="tb"></tbody></table></div>
|
||
<div class="dim mt">修改会立即生效并写入 config.toml（自动备份为 .bak）</div></div>`;
|
||
const render = keys => {
|
||
$("#tb").innerHTML = keys.length ? keys.map(k => `
|
||
<tr><td><code>${esc(mask(k))}</code></td><td><span class="pill on">启用</span></td>
|
||
<td class="right"><button class="btn small" data-copy="${esc(k)}">复制</button>
|
||
<button class="btn small danger" data-del="${esc(k)}">删除</button></td></tr>`).join("")
|
||
: '<tr><td colspan="3" class="empty">未配置任何 Key —— 当前不鉴权</td></tr>';
|
||
$$("[data-copy]").forEach(b => b.onclick = () => { navigator.clipboard && navigator.clipboard.writeText(b.dataset.copy); toast("已复制", "ok"); });
|
||
$$("[data-del]").forEach(b => b.onclick = async () => {
|
||
if (!confirm("删除该 Key？")) return;
|
||
try { await api("/api/actions", { body: { action: "delete_key", key: b.dataset.del } }); toast("已删除", "ok"); PAGES.keys(); }
|
||
catch (e) { toast(e.message, "err"); }
|
||
});
|
||
};
|
||
render(ov.keys || []);
|
||
$("#btn-gen").onclick = async () => {
|
||
try {
|
||
const r = await api("/api/actions", { body: { action: "create_key" } });
|
||
if (r.ok) { toast("已生成", "ok"); PAGES.keys(); }
|
||
} catch (e) { toast(e.message, "err"); }
|
||
};
|
||
};
|
||
const mask = k => k.length > 16 ? k.slice(0, 7) + "…" + k.slice(-6) : k;
|
||
|
||
PAGES.proxy = async () => {
|
||
const ov = await fetchOverview();
|
||
const p = ov.proxy;
|
||
view.innerHTML = `
|
||
<div class="grid g2">
|
||
<div class="card"><h3>主线路</h3>
|
||
<div class="field"><label>PROXY_URL（留空 = 直连）</label><input id="px-primary" value="${esc(p.url)}" placeholder="socks5://user:pass@host:port"></div>
|
||
<div class="row">
|
||
<button class="btn primary" id="px-save">保存</button>
|
||
<button class="btn" id="px-test">连通性测试</button>
|
||
</div>
|
||
<div class="dim mt">支持 http:// · https:// · socks5://</div>
|
||
</div>
|
||
<div class="card"><h3>降级策略</h3>
|
||
<div class="row">
|
||
<div class="field"><label>slow-start（秒）</label><input id="px-slow" type="number" step="0.5" value="${p.slow_start}"></div>
|
||
<div class="field"><label>每站点并发</label><input id="px-conc" type="number" value="${p.max_concurrent}"></div>
|
||
<div class="field"><label>每 Key 请求/分钟（0=不限）</label><input id="px-rate" type="number" value="${p.rate_per_minute}"></div>
|
||
</div>
|
||
<div class="row mt">
|
||
<div class="field"><label>跨站配额切换</label>${switchHTML("px-cross", p.cross_site_failover)}</div>
|
||
<button class="btn primary right" id="px-savelim">保存</button>
|
||
</div>
|
||
<div class="dim mt">主线路在 slow-start 内无首事件，或输出内容前失败时，自动切换到备用线路。</div>
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="toolbar"><h3 style="margin:0">备用线路</h3>
|
||
<div class="row"><input id="px-fb" placeholder="socks5://..." style="width:280px"><button class="btn" id="px-add">添加</button></div></div>
|
||
<div class="table-wrap mt"><table><thead><tr><th>#</th><th>地址</th><th></th></tr></thead><tbody id="tb-fb"></tbody></table></div>
|
||
<div class="dim mt">当前生效顺序：${ov.cache.routes.map(r => `<span class="tag">${esc(r.name)} → ${esc(r.proxy)}</span>`).join(" ")}</div>
|
||
</div>`;
|
||
|
||
const renderFb = list => {
|
||
$("#tb-fb").innerHTML = list.length ? list.map((u, i) => `
|
||
<tr><td class="num">${i + 1}</td><td><code>${esc(u)}</code></td>
|
||
<td class="right"><button class="btn small danger" data-rm="${esc(u)}">移除</button></td></tr>`).join("")
|
||
: '<tr><td colspan="3" class="empty">无备用线路</td></tr>';
|
||
$$("[data-rm]").forEach(b => b.onclick = async () => {
|
||
try { await api("/api/actions", { body: { action: "remove_fallback", url: b.dataset.rm } }); PAGES.proxy(); }
|
||
catch (e) { toast(e.message, "err"); }
|
||
});
|
||
};
|
||
renderFb(p.fallbacks || []);
|
||
|
||
$("#px-save").onclick = async () => {
|
||
try {
|
||
await api("/api/config", { method: "PUT", body: await merged(c => { c.proxy.url = $("#px-primary").value.trim(); }) });
|
||
toast("主线路已保存", "ok"); PAGES.proxy();
|
||
} catch (e) { toast(e.message, "err"); }
|
||
};
|
||
$("#px-test").onclick = async () => {
|
||
const b = $("#px-test"); b.disabled = true; b.textContent = "测试中…";
|
||
try {
|
||
const r = await api("/api/actions", { body: { action: "test_proxy", url: $("#px-primary").value.trim() } });
|
||
toast(r.ok ? `连通 · HTTP ${r.status} · ${r.ms}ms` : (r.error || "失败"), r.ok ? "ok" : "err");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
b.disabled = false; b.textContent = "连通性测试";
|
||
};
|
||
$("#px-savelim").onclick = async () => {
|
||
try {
|
||
await api("/api/actions", { body: {
|
||
action: "set_limits", slow_start: +$("#px-slow").value,
|
||
max_concurrent: +$("#px-conc").value, rate_per_minute: +$("#px-rate").value,
|
||
cross_site_failover: $("#px-cross").checked } });
|
||
toast("已保存", "ok");
|
||
} catch (e) { toast(e.message, "err"); }
|
||
};
|
||
$("#px-add").onclick = async () => {
|
||
const v = $("#px-fb").value.trim(); if (!v) return;
|
||
try { await api("/api/actions", { body: { action: "add_fallback", url: v } }); $("#px-fb").value = ""; PAGES.proxy(); }
|
||
catch (e) { toast(e.message, "err"); }
|
||
};
|
||
};
|
||
|
||
async function merged(mutate) {
|
||
const cfg = await api("/api/config");
|
||
mutate(cfg);
|
||
return cfg;
|
||
}
|
||
|
||
PAGES.turnstile = async () => {
|
||
const ov = await fetchOverview();
|
||
const t = ov.turnstile.config;
|
||
view.innerHTML = `
|
||
<div class="grid g2">
|
||
<div class="card"><h3>求解器配置</h3>
|
||
<div class="row">
|
||
<div class="field"><label>Token 获取方式</label><select id="ts-provider">
|
||
<option value="api">方式 1：求解服务 API</option>
|
||
<option value="browser">方式 2：本地浏览器自动获取</option>
|
||
<option value="manual">方式 3：手动导入 Cookie</option>
|
||
</select></div>
|
||
<div class="field"><label>启用</label>${switchHTML("ts-en", t.enabled)}</div>
|
||
</div>
|
||
<div id="ts-api" class="ts-panel">
|
||
<div class="ts-panel-title">方式 1 · 求解服务 API</div>
|
||
<div class="field"><label>求解服务 API URL</label><input id="ts-url" value="${esc(t.api_url)}"></div>
|
||
<div class="field"><label>API Key（留空保持不变）</label><input id="ts-key" value="" placeholder="已配置，输入以覆盖"></div>
|
||
<div class="row">
|
||
<div class="field"><label>Sitekey</label><input id="ts-sitekey" value="${esc(t.sitekey)}"></div>
|
||
<div class="field"><label>Action</label><input id="ts-action" value="${esc(t.action)}"></div>
|
||
</div>
|
||
</div>
|
||
<div id="ts-browser" class="ts-panel" style="display:none">
|
||
<div class="ts-panel-title">方式 2 · 本地浏览器自动获取</div>
|
||
<div class="field"><label>浏览器路径（Chrome / Edge 可执行文件）</label>
|
||
<input id="ts-bpath" value="${esc(t.browser_path || "")}"
|
||
placeholder="C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"></div>
|
||
<div class="row">
|
||
<div class="field"><label>无头模式</label>${switchHTML("ts-bhead", !!t.browser_headless)}</div>
|
||
<div class="field"><label>时区（可选，按代理出口对齐）</label>
|
||
<input id="ts-btz" value="${esc(t.browser_timezone || "")}" placeholder="Asia/Tokyo"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="field"><label>Locale（可选）</label>
|
||
<input id="ts-bloc" value="${esc(t.browser_locale || "")}" placeholder="ja-JP"></div>
|
||
<div class="field"><label>用户数据目录（可选）</label>
|
||
<input id="ts-bprof" value="${esc(t.browser_user_data_dir || "")}" placeholder="留空 = 临时 profile"></div>
|
||
</div>
|
||
<div class="dim">CDP 直连浏览器，无需 Playwright / Docker；求解期间会短暂打开一个窗口（无头模式除外）。</div>
|
||
</div>
|
||
<div id="ts-manual" class="ts-panel" style="display:none">
|
||
<div class="ts-panel-title">方式 3 · 手动导入 Cookie</div>
|
||
<div class="row">
|
||
<div class="field"><label>Cookie TTL（秒）</label><input id="ts-ttl" type="number" value="${t.cookie_ttl_seconds}"></div>
|
||
<div class="field"><label>站点</label><select id="im-site">${
|
||
(ov.sites || []).map(s => `<option value="${esc(s.code)}">${esc(s.code.toUpperCase())} · ${esc(s.base_url)}</option>`).join("")
|
||
}</select></div>
|
||
</div>
|
||
<div class="field"><label>Cookie（name=value; name2=value2）</label><textarea id="im-cookies" style="min-height:96px"
|
||
placeholder="在已通过验证的浏览器里执行 document.cookie，或从开发者工具复制请求头 Cookie"></textarea></div>
|
||
<div class="dim">Cookie 与出口 IP / UA 绑定：请在同一代理线路的浏览器中获取。导入后在 TTL 内免求解，状态见右侧「已验证 Cookie」。</div>
|
||
<button class="btn primary mt" id="im-save">导入</button>
|
||
</div>
|
||
<div class="dim" id="ts-hint" style="margin-top:10px"></div>
|
||
<button class="btn primary mt" id="ts-save">保存配置</button>
|
||
</div>
|
||
<div class="card"><h3>已验证 Cookie</h3>
|
||
<div id="ts-status" class="grid" style="gap:10px"></div>
|
||
<div class="row mt">
|
||
<button class="btn" id="ts-refresh">强制刷新全部</button>
|
||
<button class="btn danger" id="ts-clear">清空 Cookie</button>
|
||
</div>
|
||
<div class="dim mt">缓存 TTL ${t.cookie_ttl_seconds}s · 求解失败重试 ${t.retries} 次 · 退避 ${t.retry_backoff_seconds}s</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mt"><h3>求解历史</h3><div class="table-wrap"><table>
|
||
<thead><tr><th>时间</th><th>站点</th><th>线路</th><th class="num">耗时</th><th>结果</th></tr></thead>
|
||
<tbody id="ts-hist"></tbody></table></div></div>`;
|
||
|
||
$("#ts-status").innerHTML = (ov.turnstile.status || []).map(s => `
|
||
<div class="card" style="padding:12px"><div class="toolbar">
|
||
<div><b>${esc(s.site.toUpperCase())}</b> <span class="pill ${s.valid ? "on" : "off"}">${s.valid ? "有效" : "未建立"}</span></div>
|
||
<button class="btn small" data-rf="${esc(s.site)}">刷新</button></div>
|
||
<div class="dim mt">${s.valid ? "剩余 " + Math.round(s.remaining_s / 60) + " 分钟 · " + s.cookie_count + " 个 Cookie" : "下次请求时自动求解"}</div>
|
||
</div>`).join("");
|
||
|
||
const hist = ov.turnstile.history || [];
|
||
$("#ts-hist").innerHTML = hist.length ? hist.slice().reverse().slice(0, 40).map(h => `
|
||
<tr><td class="dim">${timeStr(h.at)}</td><td>${esc(h.site)}</td><td class="dim">${esc(h.proxy)}</td>
|
||
<td class="num">${fmtMs(h.elapsed_ms)}</td>
|
||
<td><span class="pill ${h.ok ? "on" : "off"}">${h.ok ? "成功" : "失败"}</span>${h.error ? ` <span class="dim">${esc(h.error.slice(0, 70))}</span>` : ""}</td></tr>`).join("")
|
||
: '<tr><td colspan="5" class="empty">尚无记录</td></tr>';
|
||
|
||
$$("[data-rf]").forEach(b => b.onclick = async () => {
|
||
b.disabled = true;
|
||
try { await api("/api/actions", { body: { action: "refresh_cookies", site: b.dataset.rf } }); toast("已作废，将在下次请求时重新求解", "ok"); PAGES.turnstile(); }
|
||
catch (e) { toast(e.message, "err"); }
|
||
b.disabled = false;
|
||
});
|
||
$("#ts-provider").value = t.provider || "api";
|
||
const TS_HINTS = {
|
||
api: ["已开启：调用求解服务 API 获取 Turnstile Token", "已关闭：跳过 Turnstile 求解，直接请求上游站点"],
|
||
browser: ["已开启：用下方配置的本地浏览器自动求解 Token", "已关闭：跳过 Turnstile 求解，直接请求上游站点"],
|
||
manual: ["手动方式：不自动求解，导入已通过验证的 Cookie 即可（TTL 内免求解）", "已关闭：跳过 Turnstile 求解，直接请求上游站点"],
|
||
};
|
||
const syncProvider = () => {
|
||
const p = $("#ts-provider").value;
|
||
$("#ts-api").style.display = p === "api" ? "" : "none";
|
||
$("#ts-browser").style.display = p === "browser" ? "" : "none";
|
||
$("#ts-manual").style.display = p === "manual" ? "" : "none";
|
||
$("#ts-refresh").style.display = p === "manual" ? "none" : "";
|
||
const hints = TS_HINTS[p] || TS_HINTS.api;
|
||
$("#ts-hint").textContent = $("#ts-en").checked ? hints[0] : hints[1];
|
||
};
|
||
$("#ts-provider").onchange = syncProvider;
|
||
$("#ts-en").onchange = syncProvider;
|
||
syncProvider();
|
||
$("#ts-save").onclick = async () => {
|
||
try {
|
||
await api("/api/actions", { body: {
|
||
action: "set_turnstile", enabled: $("#ts-en").checked,
|
||
provider: $("#ts-provider").value,
|
||
api_url: $("#ts-url").value.trim(),
|
||
api_key: $("#ts-key").value.trim(), sitekey: $("#ts-sitekey").value.trim(),
|
||
challenge_action: $("#ts-action").value.trim(), cookie_ttl_seconds: +$("#ts-ttl").value,
|
||
browser_path: $("#ts-bpath").value.trim(),
|
||
browser_headless: $("#ts-bhead").checked,
|
||
browser_user_data_dir: $("#ts-bprof").value.trim(),
|
||
browser_timezone: $("#ts-btz").value.trim(),
|
||
browser_locale: $("#ts-bloc").value.trim() } });
|
||
toast("已保存", "ok"); PAGES.turnstile();
|
||
} catch (e) { toast(e.message, "err"); }
|
||
};
|
||
$("#ts-refresh").onclick = async () => {
|
||
try { await api("/api/actions", { body: { action: "invalidate" } }); toast("已作废全部 cookie", "ok"); PAGES.turnstile(); }
|
||
catch (e) { toast(e.message, "err"); }
|
||
};
|
||
$("#ts-clear").onclick = async () => {
|
||
try { await api("/api/actions", { body: { action: "clear_cookies" } }); toast("已清空 Cookie", "ok"); PAGES.turnstile(); }
|
||
catch (e) { toast(e.message, "err"); }
|
||
};
|
||
$("#im-save").onclick = async () => {
|
||
try {
|
||
const r = await api("/api/actions", { body: {
|
||
action: "import_cookies", site: $("#im-site").value, cookies: $("#im-cookies").value } });
|
||
toast(`已导入 ${r.cookie_count} 个 Cookie，${timeStr(r.expires_at * 1000)} 到期`, "ok");
|
||
PAGES.turnstile();
|
||
} catch (e) { toast(e.message, "err"); }
|
||
};
|
||
};
|
||
|
||
PAGES.playground = async () => {
|
||
const ov = await fetchOverview();
|
||
const enabled = ov.models.filter(m => m.enabled);
|
||
view.innerHTML = `
|
||
<div class="grid g2" style="align-items:start">
|
||
<div class="card"><h3>请求</h3>
|
||
<div class="row">
|
||
<div class="field"><label>模型</label><select id="pg-model">${enabled.map(m => `<option value="${esc(m.id)}">${esc(m.id)}</option>`).join("")}</select></div>
|
||
<div class="field" style="flex:0 0 auto"><label>流式</label>${switchHTML("pg-stream", true)}</div>
|
||
</div>
|
||
<div class="field"><label>System 提示</label><textarea id="pg-system" style="min-height:60px">你是一个乐于助人的助手。</textarea></div>
|
||
<div class="field"><label>Tools 定义（JSON，可留空）</label><textarea id="pg-tools" style="min-height:80px" placeholder='[{"type":"function","function":{"name":"get_weather","description":"获取天气","parameters":{"type":"object","properties":{"city":{"type":"string"}},"required":["city"]}}}]'></textarea></div>
|
||
<div class="field"><label>输入</label><textarea id="pg-input" style="min-height:70px" placeholder="输入消息…"></textarea></div>
|
||
<div class="row"><button class="btn primary" id="pg-send">发送</button>
|
||
<button class="btn danger" id="pg-cancel" disabled>取消</button>
|
||
<button class="btn" id="pg-clear">清空输出</button>
|
||
<span class="dim" id="pg-meta"></span></div>
|
||
</div>
|
||
<div class="card"><h3>响应</h3><div class="out-box" id="pg-out"><span class="dim">尚未发送请求</span></div></div>
|
||
</div>`;
|
||
|
||
let ac = null, timer = null;
|
||
const stopTimer = () => { if (timer) { clearInterval(timer); timer = null; } };
|
||
|
||
$("#pg-clear").onclick = () => { stopTimer(); ac = null; $("#pg-out").innerHTML = '<span class="dim">尚未发送请求</span>'; $("#pg-meta").textContent = ""; };
|
||
$("#pg-cancel").onclick = () => { if (ac) ac.abort(); };
|
||
$("#pg-send").onclick = async () => {
|
||
const input = $("#pg-input").value.trim();
|
||
if (!input) { toast("请输入内容", "err"); return; }
|
||
let tools = null;
|
||
const raw = $("#pg-tools").value.trim();
|
||
if (raw) { try { tools = JSON.parse(raw); } catch (e) { toast("Tools JSON 解析失败", "err"); return; } }
|
||
|
||
const messages = [{ role: "system", content: $("#pg-system").value }, { role: "user", content: input }];
|
||
const model = $("#pg-model").value;
|
||
const stream = $("#pg-stream").checked;
|
||
const out = $("#pg-out");
|
||
out.innerHTML = "";
|
||
|
||
const status = document.createElement("span");
|
||
status.className = "dim";
|
||
status.textContent = "连接中… 0.0s";
|
||
const caret = document.createElement("span"); caret.className = "caret";
|
||
out.appendChild(status); out.appendChild(caret);
|
||
|
||
ac = new AbortController();
|
||
const btn = $("#pg-send"), cancel = $("#pg-cancel");
|
||
btn.disabled = true; btn.textContent = "请求中…";
|
||
cancel.disabled = false;
|
||
$("#pg-meta").textContent = "";
|
||
const t0 = Date.now();
|
||
const tick = () => { status.textContent = `连接中… ${((Date.now() - t0) / 1000).toFixed(1)}s`; };
|
||
stopTimer(); timer = setInterval(tick, 100);
|
||
|
||
const finish = () => {
|
||
stopTimer(); ac = null;
|
||
btn.disabled = false; btn.textContent = "发送";
|
||
cancel.disabled = true;
|
||
if (!$("#pg-meta").textContent) $("#pg-meta").textContent = `${fmtMs(Date.now() - t0)}`;
|
||
};
|
||
const firstText = () => { if (status.parentNode) status.remove(); };
|
||
|
||
try {
|
||
if (stream) {
|
||
const res = await fetch("/api/playground", { method: "POST", headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ model, messages, stream: true, tools }), signal: ac.signal });
|
||
if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || res.statusText); }
|
||
out.appendChild(caret);
|
||
const reader = res.body.getReader(), dec = new TextDecoder();
|
||
let buf = "", first = null;
|
||
for (;;) {
|
||
const { done, value } = await reader.read(); if (done) break;
|
||
buf += dec.decode(value, { stream: true });
|
||
let idx;
|
||
while ((idx = buf.indexOf("\n\n")) >= 0) {
|
||
const frame = buf.slice(0, idx); buf = buf.slice(idx + 2);
|
||
if (!frame.startsWith("data: ")) continue;
|
||
const payload = frame.slice(6);
|
||
if (payload === "[DONE]") continue;
|
||
let j; try { j = JSON.parse(payload); } catch (e) { continue; }
|
||
if (j.error) { firstText(); out.insertBefore(document.createTextNode("\n[错误] " + j.error), caret); continue; }
|
||
if (j.delta) { if (!first) first = Date.now(); firstText(); out.insertBefore(document.createTextNode(j.delta), caret); }
|
||
if (j.done) { $("#pg-meta").textContent = `${j.ms}ms · ${j.site} · ${j.route}`; }
|
||
}
|
||
}
|
||
caret.remove();
|
||
} else {
|
||
const j = await api("/api/playground", { body: { model, messages, stream: false, tools }, signal: ac.signal });
|
||
out.textContent = j.text;
|
||
$("#pg-meta").textContent = `${j.ms}ms · ${j.site} · ${j.route} · prompt ${j.prompt_chars} 字符`;
|
||
}
|
||
} catch (e) {
|
||
caret.remove();
|
||
if (e && e.name === "AbortError") {
|
||
out.innerHTML = '<span class="dim">已取消</span>';
|
||
} else {
|
||
out.innerHTML = `<span style="color:var(--err)">请求失败：${esc(e.message)}</span>`;
|
||
}
|
||
}
|
||
finish();
|
||
};
|
||
};
|
||
|
||
PAGES.logs = async () => {
|
||
view.innerHTML = `
|
||
<div class="card"><div class="toolbar">
|
||
<div class="row">
|
||
<div class="field" style="margin:0"><label>最低级别</label>
|
||
<select id="lg-level" style="width:120px"><option>DEBUG</option><option selected>INFO</option><option>WARN</option><option>ERROR</option></select></div>
|
||
<button class="btn" id="lg-toggle">暂停</button>
|
||
<button class="btn danger" id="lg-clear">清屏</button>
|
||
</div>
|
||
<div class="dim" id="lg-state">实时连接中…</div>
|
||
</div>
|
||
<div class="log-box mt" id="lg-box"></div></div>`;
|
||
|
||
const box = $("#lg-box");
|
||
let paused = false, es = null, gen = 0;
|
||
const minVal = { DEBUG: -4, INFO: 0, WARN: 4, ERROR: 8 };
|
||
|
||
function append(e) {
|
||
if (paused) return;
|
||
const sel = $("#lg-level");
|
||
if (sel && minVal[e.level] < minVal[sel.value]) return;
|
||
const line = document.createElement("div");
|
||
line.className = "log-line";
|
||
const attrs = e.attrs ? Object.entries(e.attrs).map(([k, v]) => `${k}=${v}`).join(" ") : "";
|
||
line.innerHTML = `<span class="t">${timeStr(e.ts)}</span> <span class="lv lv-${e.level}">${e.level}</span> ${esc(e.msg)}${attrs ? ' <span class="t">' + esc(attrs) + "</span>" : ""}`;
|
||
box.appendChild(line);
|
||
while (box.children.length > 600) box.removeChild(box.firstChild);
|
||
box.scrollTop = box.scrollHeight;
|
||
}
|
||
|
||
function stopES() { if (es) { es.close(); es = null; } }
|
||
|
||
// (Re)load history and reopen the SSE stream with the currently selected
|
||
// minimum level. Never re-render the page here: rebuilding the select would
|
||
// reset it to INFO before the value is read, and would leak the old stream.
|
||
// History comes solely from the server replay on connect (and on every
|
||
// automatic reconnect), so the box is cleared in onopen instead of fetching
|
||
// the JSON endpoint separately — otherwise entries show up twice.
|
||
async function load() {
|
||
const my = ++gen;
|
||
const level = $("#lg-level").value;
|
||
stopES();
|
||
box.innerHTML = "";
|
||
es = new EventSource("/api/logs?stream=1&level=" + level);
|
||
es.onmessage = ev => { if (my !== gen) return; try { append(JSON.parse(ev.data)); } catch (e) {} };
|
||
es.onerror = () => { if (my !== gen) return; const st = $("#lg-state"); if (st) st.textContent = "连接中断，自动重连中…"; };
|
||
es.onopen = () => {
|
||
if (my !== gen) return;
|
||
box.innerHTML = "";
|
||
const st = $("#lg-state"); if (st) st.textContent = "实时连接中…";
|
||
};
|
||
logStop = () => { gen++; stopES(); };
|
||
}
|
||
|
||
$("#lg-toggle").onclick = e => { paused = !paused; e.target.textContent = paused ? "继续" : "暂停"; };
|
||
$("#lg-clear").onclick = () => { box.innerHTML = ""; };
|
||
$("#lg-level").onchange = load;
|
||
await load();
|
||
};
|
||
|
||
PAGES.settings = async () => {
|
||
const cfg = await api("/api/config");
|
||
view.innerHTML = `
|
||
<div class="grid g2">
|
||
<div class="card"><h3>服务</h3>
|
||
<div class="row">
|
||
<div class="field"><label>监听地址</label><input id="st-host" value="${esc(cfg.server.host)}"></div>
|
||
<div class="field"><label>端口</label><input id="st-port" type="number" value="${cfg.server.port}"></div>
|
||
</div>
|
||
<div class="field"><label>日志级别</label><select id="st-log">
|
||
${["DEBUG", "INFO", "WARN", "ERROR"].map(l => `<option ${cfg.server.log_level === l ? "selected" : ""}>${l}</option>`).join("")}
|
||
</select></div>
|
||
<div class="row">
|
||
<div class="field"><label>管理台地址</label><input id="st-ah" value="${esc(cfg.admin.host)}"></div>
|
||
<div class="field"><label>管理台端口</label><input id="st-ap" type="number" value="${cfg.admin.port}"></div>
|
||
</div>
|
||
<div class="field"><label>管理台密码（留空保持不变）</label><input id="st-pw" type="password" placeholder="••••••••"></div>
|
||
<button class="btn primary" id="st-save">保存服务设置</button>
|
||
</div>
|
||
<div class="card"><h3>上游</h3>
|
||
<div class="row">
|
||
<div class="field"><label>请求超时（秒）</label><input id="st-to" type="number" value="${cfg.upstream.timeout}"></div>
|
||
<div class="field"><label>流式超时（秒）</label><input id="st-sto" type="number" value="${cfg.upstream.stream_timeout}"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="field"><label>配置缓存 TTL（秒）</label><input id="st-ttl" type="number" value="${cfg.upstream.config_ttl_seconds}"></div>
|
||
<div class="field"><label>会话刷新重试</label><input id="st-retry" type="number" value="${cfg.upstream.refresh_retries}"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="field"><label>失败退避（秒）</label><input id="st-back" type="number" step="0.1" value="${cfg.upstream.retry_backoff_seconds}"></div>
|
||
<div class="field"><label>自动刷新会话</label>${switchHTML("st-ar", cfg.upstream.auto_refresh)}</div>
|
||
</div>
|
||
<div class="field"><label>User-Agent</label><input id="st-ua" value="${esc(cfg.upstream.user_agent)}"></div>
|
||
<div class="field"><label>数据目录</label><input id="st-dir" value="${esc(cfg.runtime.data_dir)}"></div>
|
||
<button class="btn primary" id="st-save2">保存上游设置</button>
|
||
</div>
|
||
</div>
|
||
<div class="card"><h3>危险操作</h3>
|
||
<div class="row">
|
||
<button class="btn danger" id="st-reset">清空统计</button>
|
||
<button class="btn danger" id="st-inv">作废全部会话缓存</button>
|
||
</div>
|
||
<div class="dim mt">配置保存会自动备份原文件为 <code>config.toml.bak</code>；修改端口/密码需重启服务生效。</div>
|
||
</div>`;
|
||
|
||
const put = async mutate => {
|
||
try {
|
||
const c = await api("/api/config");
|
||
mutate(c);
|
||
await api("/api/config", { method: "PUT", body: c });
|
||
toast("已保存并写入 config.toml", "ok");
|
||
return true;
|
||
} catch (e) { toast(e.message, "err"); return false; }
|
||
};
|
||
$("#st-save").onclick = () => put(c => {
|
||
c.server.host = $("#st-host").value;
|
||
c.server.port = +$("#st-port").value;
|
||
c.server.log_level = $("#st-log").value;
|
||
c.admin.host = $("#st-ah").value;
|
||
c.admin.port = +$("#st-ap").value;
|
||
if ($("#st-pw").value) c.admin.password = $("#st-pw").value;
|
||
});
|
||
$("#st-save2").onclick = () => put(c => {
|
||
c.upstream.timeout = +$("#st-to").value;
|
||
c.upstream.stream_timeout = +$("#st-sto").value;
|
||
c.upstream.config_ttl_seconds = +$("#st-ttl").value;
|
||
c.upstream.refresh_retries = +$("#st-retry").value;
|
||
c.upstream.retry_backoff_seconds = +$("#st-back").value;
|
||
c.upstream.auto_refresh = $("#st-ar").checked;
|
||
c.upstream.user_agent = $("#st-ua").value;
|
||
c.runtime.data_dir = $("#st-dir").value;
|
||
});
|
||
$("#st-reset").onclick = async () => { try { await api("/api/actions", { body: { action: "reset_metrics" } }); toast("已清空", "ok"); } catch (e) { toast(e.message, "err"); } };
|
||
$("#st-inv").onclick = async () => { try { await api("/api/actions", { body: { action: "invalidate" } }); toast("已作废", "ok"); } catch (e) { toast(e.message, "err"); } };
|
||
};
|
||
|
||
/* ── boot ────────────────────────────────────────────────── */
|
||
window.addEventListener("hashchange", route);
|
||
$("#login-btn").onclick = doLogin;
|
||
$("#login-password").addEventListener("keydown", e => { if (e.key === "Enter") doLogin(); });
|
||
$("#logout-btn").onclick = async () => { try { await api("/api/logout", { method: "POST" }); } catch (e) {} location.hash = "#/dashboard"; showLogin(); };
|
||
|
||
(async function init() {
|
||
if (await ensureSession()) route();
|
||
})();
|
||
})();
|