56474264d6
All three admin pages had two parallel inline <script> blocks (a modern S1 that used adminRuntime + a legacy S2 that was self-contained). Both had a nested <script> text inside S1 that the browser tolerated only because the second script re-ran any state-affecting calls. Merge into a single inline script per page; fix the nested <script> comment. - providers.html: 100371 -> 62761 chars (-37610, -37%) - accounts.html: 54878 -> 33098 chars (-21780, -40%) - batch-import: 43861 -> 26570 chars (-17291, -39%) Also rename draftProviderIDInput -> providerIDInput in providers.html (the old draft-provider-id input was removed during the earlier workflow merge, leaving the script with a null addEventListener on draft id). All scripts pass node --check. Both test_tksea_portal_assets.sh and verify_frontend_smoke.sh PASS.
1447 lines
64 KiB
HTML
1447 lines
64 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Provider Admin</title>
|
||
<link rel="stylesheet" href="/portal/portal.css">
|
||
<link rel="stylesheet" href="/portal/admin-common.css">
|
||
<style>
|
||
/* Page-specific layout only. Tokens, cards, buttons come from portal.css + admin-common.css. */
|
||
.layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--s-5); }
|
||
.field-grid { display: grid; gap: 12px; }
|
||
.field-grid.two { grid-template-columns: 1fr 1fr; }
|
||
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
.catalog { display: grid; gap: 12px; max-height: 32rem; overflow: auto; padding-right: 4px; }
|
||
.catalog-item, .route-item {
|
||
padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--border-subtle);
|
||
background: var(--bg-elev-1); cursor: pointer;
|
||
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
|
||
}
|
||
.catalog-item:hover, .route-item:hover { transform: translateY(-1px); border-color: rgba(20,184,166,0.32); }
|
||
.catalog-item.is-selected, .route-item.is-selected { background: var(--color-primary-soft); border-color: rgba(20,184,166,0.32); }
|
||
.catalog-item strong, .route-item strong { display: block; margin-bottom: 6px; font-size: 15px; color: var(--text-strong); }
|
||
.catalog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
||
.grid-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
|
||
.list-card { padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--bg-elev-1); }
|
||
.list-card strong { display: block; margin-bottom: 6px; color: var(--text-strong); }
|
||
.empty { color: var(--text-muted); font-size: 13px; line-height: 1.6; }
|
||
.panel-desc { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
|
||
.inline-code { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); word-break: break-word; }
|
||
.tone-healthy { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(34,197,94,0.2); }
|
||
.tone-cooldown { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(245,158,11,0.2); }
|
||
.tone-failing { background: var(--color-danger-soft); color: var(--color-danger); border-color: rgba(239,68,68,0.2); }
|
||
.tone-disabled { background: var(--color-neutral-soft); color: var(--color-neutral); border-color: rgba(100,116,139,0.2); }
|
||
.tone-ready { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(34,197,94,0.2); }
|
||
.tone-note { background: var(--color-primary-soft); color: var(--color-primary); border-color: rgba(20,184,166,0.2); }
|
||
.tone-warn { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(245,158,11,0.2); }
|
||
pre {
|
||
margin: 0; padding: 16px; border-radius: var(--r-md);
|
||
border: 1px solid var(--border-subtle);
|
||
background: rgba(2, 6, 23, 0.6); color: var(--text-default);
|
||
font-size: 12px; line-height: 1.65; overflow: auto; white-space: pre-wrap; word-break: break-word;
|
||
}
|
||
[data-theme="light"] pre { background: var(--slate-900); color: var(--slate-100); }
|
||
.table-wrap { margin-top: 12px; }
|
||
@media (max-width: 1200px) {
|
||
.layout, .grid-columns, .field-grid.two, .field-grid.three { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="shell fade-in">
|
||
<nav class="topnav" aria-label="Admin Navigation" data-admin-nav data-admin-current="providers"></nav>
|
||
|
||
<section class="page-hero">
|
||
<div>
|
||
<span class="page-hero__eyebrow">Provider Admin</span>
|
||
<h1>新增模型 / 供应商目录：先看 pack 再做 preview-import</h1>
|
||
<p>这页负责浏览已安装 pack、选择 provider、调用 <code>preview-import</code> / <code>import</code>，同时提供 provider manifest 草稿生成与发布。Provider Manifest 草稿支持先保存到服务端，再经由 CRM 提交到仓库。</p>
|
||
<ul style="display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none;">
|
||
<li style="padding:8px 12px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-elev-1);font-size:13px;font-weight:700;color:var(--text-muted);">默认 API Base：<code>/portal-admin-api</code></li>
|
||
<li style="padding:8px 12px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-elev-1);font-size:13px;font-weight:700;color:var(--text-muted);">支持管理员登录，也保留 Bearer admin token 兜底</li>
|
||
<li style="padding:8px 12px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-elev-1);font-size:13px;font-weight:700;color:var(--text-muted);">服务端草稿路径：<code>/api/provider-drafts</code>，发布：<code>/publish</code></li>
|
||
</ul>
|
||
</div>
|
||
<div class="stack" style="gap:var(--s-3);">
|
||
<div class="stat-card">
|
||
<div class="stat-icon stat-icon-primary" id="pr-m1"></div>
|
||
<div class="min-w-0">
|
||
<p class="stat-label">API Root</p>
|
||
<p class="stat-value" id="metric-api-root">-</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon stat-icon-info" id="pr-m2"></div>
|
||
<div class="min-w-0">
|
||
<p class="stat-label">Packs</p>
|
||
<p class="stat-value" id="metric-pack-count">0</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon stat-icon-success" id="pr-m3"></div>
|
||
<div class="min-w-0">
|
||
<p class="stat-label">Providers</p>
|
||
<p class="stat-value" id="metric-provider-count">0</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon stat-icon-warning" id="pr-m4"></div>
|
||
<div class="min-w-0">
|
||
<p class="stat-label">草稿</p>
|
||
<p class="stat-value" id="metric-draft-count">0</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="layout">
|
||
<article class="card panel">
|
||
<h2>连接与目录</h2>
|
||
<p class="panel-desc">
|
||
先建立到 CRM 的连接，再拉取 pack 与 provider 目录。当前页面优先使用 <code>host_id</code> 驱动导入，
|
||
不再要求浏览器直接知道宿主 base URL。
|
||
</p>
|
||
|
||
<div class="field-grid two">
|
||
<label>API Base
|
||
<input id="api-base" type="text" placeholder="https://sub.tksea.top/portal-admin-api">
|
||
</label>
|
||
<label>Admin Token（可选）
|
||
<input id="admin-token" type="password" placeholder="crm-admin-token">
|
||
<span class="hint">优先使用下方管理员登录；这里只保留给脚本联调或紧急兜底。</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="field-grid two">
|
||
<label>管理员用户名
|
||
<input id="admin-username" type="text" placeholder="admin">
|
||
</label>
|
||
<label>管理员密码
|
||
<input id="admin-password" type="password" placeholder="请输入管理员密码">
|
||
</label>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button id="admin-login-btn" type="button">管理员登录</button>
|
||
<button id="admin-logout-btn" type="button" class="ghost">退出登录</button>
|
||
<span id="admin-session-status" class="status">尚未检查管理员会话。</span>
|
||
</div>
|
||
|
||
<div class="field-grid two">
|
||
<label>Pack
|
||
<select id="pack-id"></select>
|
||
</label>
|
||
<label>Host ID
|
||
<select id="host-id"></select>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="field-grid">
|
||
<label>Pack Path
|
||
<input id="pack-path" type="text" value="/app/packs/openai-cn-pack">
|
||
<span class="hint">preview/import 当前仍需显式带上 pack_path，默认按 remote43 的运行路径填写。</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button class="primary" id="load-catalog-btn">加载目录</button>
|
||
<button class="ghost" id="save-config-btn">保存本地配置</button>
|
||
</div>
|
||
|
||
<div class="statusbar" id="catalog-status">等待加载目录。</div>
|
||
|
||
<div class="catalog" id="provider-catalog">
|
||
<div class="empty">还没有 provider 目录。</div>
|
||
</div>
|
||
</article>
|
||
|
||
<section class="stack">
|
||
<article class="card panel" id="provider-workflow">
|
||
<h2>Provider 工作流 · 模板 + 批量导入</h2>
|
||
<p class="panel-desc">
|
||
这页整合了 <strong>Provider Manifest 草稿</strong>生成、<code>preview-import</code> 预检与 <code>import</code> 走 access closure 的批量导入。
|
||
三步走：<strong>① 选/新建 provider</strong> → <strong>② 维护模板</strong> → <strong>③ 选模型 + 加 key</strong>。
|
||
模板存在时（已加载目录或已保存草稿）自动填充；否则就是新建。
|
||
改完模板字段点「保存草稿」生效，发布前可继续改。
|
||
</p>
|
||
|
||
<!-- ============ Step 1: Provider ID + Display Name ============ -->
|
||
<div class="field-grid two">
|
||
<label>Provider ID（共享：从目录选 或 新建一个）
|
||
<input id="provider-id" type="text" list="preset-provider-id-from-catalog" placeholder="选现有 / 新建一个">
|
||
<datalist id="preset-provider-id-from-catalog">
|
||
<!-- 由 JS 从 state.providers 自动填充 -->
|
||
</datalist>
|
||
<span class="hint">从目录选 → 模板自动填；手填新名字 → 新建。系统会根据 display name / base url / models 自动生成 provider_id 并尽量避免与现有 provider_id 冲突。</span>
|
||
</label>
|
||
<label>Display Name
|
||
<input id="draft-display-name" type="text" placeholder="OpenAI 中转 / DeepSeek / 硅基流动" list="preset-display-name">
|
||
<datalist id="preset-display-name">
|
||
<option value="OpenAI 中转"></option>
|
||
<option value="OpenAI 直连"></option>
|
||
<option value="DeepSeek"></option>
|
||
<option value="硅基流动 (SiliconFlow)"></option>
|
||
<option value="Moonshot Kimi"></option>
|
||
<option value="智谱 GLM"></option>
|
||
<option value="Anthropic Claude"></option>
|
||
<option value="零一万物"></option>
|
||
<option value="MiniMax"></option>
|
||
<option value="通义千问 Qwen"></option>
|
||
<option value="百川 Baichuan"></option>
|
||
<option value="腾讯混元"></option>
|
||
</datalist>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="statusbar" id="provider-id-preview">Provider ID 预览：等待填写模型信息。</div>
|
||
<div class="statusbar" id="model-conflicts">同模型已存在：当前未发现冲突。</div>
|
||
|
||
<!-- ============ Step 2: 模板参数（默认展开，可折叠） ============ -->
|
||
<details open id="template-section">
|
||
<summary style="cursor:pointer; padding: 8px 0; font-weight: 700; color: var(--text-strong);">
|
||
② 模板参数（修改后请「保存草稿」生效）
|
||
</summary>
|
||
|
||
<div class="field-grid two" style="margin-top: 8px;">
|
||
<label>Platform
|
||
<input id="draft-platform" type="text" placeholder="openai" list="preset-platform">
|
||
<datalist id="preset-platform">
|
||
<option value="openai"></option>
|
||
<option value="openai-compatible"></option>
|
||
<option value="deepseek"></option>
|
||
<option value="anthropic"></option>
|
||
<option value="gemini"></option>
|
||
<option value="zhipu"></option>
|
||
<option value="moonshot"></option>
|
||
<option value="minimax"></option>
|
||
<option value="qwen"></option>
|
||
<option value="baichuan"></option>
|
||
<option value="hunyuan"></option>
|
||
<option value="yi"></option>
|
||
</datalist>
|
||
</label>
|
||
<label>Smoke Test Model
|
||
<input id="draft-smoke-model" type="text" placeholder="从 models 自动取第一个" list="preset-smoke-model">
|
||
<datalist id="preset-smoke-model">
|
||
<option value="gpt-5.4"></option>
|
||
<option value="gpt-5.4-mini"></option>
|
||
<option value="deepseek-chat"></option>
|
||
<option value="MiniMax-M2.7-highspeed"></option>
|
||
<option value="claude-sonnet-4-5"></option>
|
||
<option value="gemini-2.5-pro"></option>
|
||
<option value="kimi-k2.6"></option>
|
||
<option value="glm-4.6"></option>
|
||
<option value="qwen3-coder-plus"></option>
|
||
</datalist>
|
||
<span class="hint">建议填「最便宜最快」的模型作为健康探针，留空则从 Models 取第一个</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="field-grid two">
|
||
<label>Base URL Placeholder
|
||
<input id="draft-base-url" type="text" placeholder="https://api.example.com/v1" list="preset-base-url">
|
||
<datalist id="preset-base-url">
|
||
<option value="https://api.openai.com/v1"></option>
|
||
<option value="https://api.deepseek.com/v1"></option>
|
||
<option value="https://api.siliconflow.cn/v1"></option>
|
||
<option value="https://api.moonshot.cn/v1"></option>
|
||
<option value="https://open.bigmodel.cn/api/paas/v4"></option>
|
||
<option value="https://api.anthropic.com/v1"></option>
|
||
<option value="https://generativelanguage.googleapis.com/v1beta"></option>
|
||
<option value="https://api.minimax.chat/v1"></option>
|
||
<option value="https://dashscope.aliyuncs.com/compatible-mode/v1"></option>
|
||
<option value="https://api.baichuan-ai.com/v1"></option>
|
||
<option value="https://hunyuan.tencent.com/v1"></option>
|
||
<option value="https://api.lingyiwanwu.com/v1"></option>
|
||
</datalist>
|
||
</label>
|
||
<label>Models（用逗号分隔，或点击下方 chip 一键加入）
|
||
<input id="draft-models" type="text" placeholder="gpt-5.4,gpt-5.4-mini">
|
||
<div class="chip-row" id="model-presets" style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;">
|
||
<button type="button" class="chip" data-model="gpt-5.4">+ gpt-5.4</button>
|
||
<button type="button" class="chip" data-model="gpt-5.4-mini">+ gpt-5.4-mini</button>
|
||
<button type="button" class="chip" data-model="deepseek-chat">+ deepseek-chat</button>
|
||
<button type="button" class="chip" data-model="MiniMax-M2.7-highspeed">+ MiniMax-M2.7-highspeed</button>
|
||
<button type="button" class="chip" data-model="kimi-k2.6">+ kimi-k2.6</button>
|
||
<button type="button" class="chip" data-model="glm-4.6">+ glm-4.6</button>
|
||
<button type="button" class="chip" data-model="claude-sonnet-4-5">+ claude-sonnet-4-5</button>
|
||
<button type="button" class="chip" data-model="gemini-2.5-pro">+ gemini-2.5-pro</button>
|
||
<button type="button" class="chip" data-model="qwen3-coder-plus">+ qwen3-coder-plus</button>
|
||
<button type="button" class="chip" data-model="gpt-4o">+ gpt-4o</button>
|
||
<button type="button" class="chip" data-model="o4-mini">+ o4-mini</button>
|
||
<button type="button" class="ghost chip-clear" data-action="clear-models" style="margin-left:6px;">清空</button>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<label>发布 Commit Message
|
||
<input id="draft-commit-message" type="text" placeholder="feat(pack): publish provider draft openai-zhongzhuan">
|
||
<span class="hint">留空时会按 provider_id 自动生成标准 commit message</span>
|
||
</label>
|
||
|
||
<div class="actions">
|
||
<button class="secondary" id="generate-draft-btn">生成草稿</button>
|
||
<button class="primary" id="save-draft-btn">保存草稿</button>
|
||
<button class="secondary" id="update-draft-btn">更新草稿</button>
|
||
<button class="primary" id="publish-draft-btn">发布到仓库</button>
|
||
<button class="ghost" id="delete-draft-btn">删除草稿</button>
|
||
<button class="ghost" id="copy-draft-btn">复制 JSON</button>
|
||
<button class="ghost" id="refresh-drafts-btn">刷新草稿列表</button>
|
||
</div>
|
||
|
||
<div class="statusbar" id="draft-status">填写模板后保存草稿。</div>
|
||
<div class="statusbar" id="recent-template-meta">最近成功模板：暂无。首次可以先按一份已有 provider 作为参考修改。</div>
|
||
</details>
|
||
|
||
<hr style="border:0; border-top: 1px solid var(--border-subtle); margin: 20px 0;">
|
||
|
||
<!-- ============ Step 3: 批量导入 key ============ -->
|
||
<h3 style="margin: 0 0 8px 0; font-size: 17px;">③ 批量导入 Key</h3>
|
||
<p class="panel-desc">
|
||
模板保存后，从 <strong>模板支持的模型</strong> 里勾选要启用的，粘 key，每行一个。
|
||
点「预检导入」先验证，再「执行导入」走 access closure。
|
||
</p>
|
||
|
||
<div class="field-grid two">
|
||
<label>Access Mode
|
||
<select id="access-mode">
|
||
<option value="self_service">self_service</option>
|
||
<option value="subscription">subscription</option>
|
||
</select>
|
||
</label>
|
||
<label>Mode
|
||
<select id="mode">
|
||
<option value="strict">strict</option>
|
||
<option value="partial">partial</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="field-grid two">
|
||
<label>Probe API Key（self_service 必填）
|
||
<input id="access-api-key" type="text" placeholder="sk-probe">
|
||
</label>
|
||
<div id="subscription-fields" hidden style="display:grid; grid-template-columns: 1fr 1fr; gap: 12px;">
|
||
<label>Subscription Users
|
||
<input id="subscription-users" type="text" placeholder="relay-sub-1,relay-sub-2">
|
||
</label>
|
||
<label>Subscription Days
|
||
<input id="subscription-days" type="number" min="1" value="30">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<label>选择要启用的模型
|
||
<div id="model-picker" class="model-picker" style="padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--bg-elev-1); min-height: 48px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;">
|
||
<span class="hint" style="margin: 0;">保存模板后，这里会自动列出模板的 supported_models，勾选要启用的</span>
|
||
</div>
|
||
</label>
|
||
|
||
<label>Keys
|
||
<textarea id="provider-keys" rows="6" placeholder="sk-example-1
|
||
sk-example-2
|
||
sk-example-3"></textarea>
|
||
<span class="hint">一行一个供应商帐号 key（多 key 批量导入）。例如 <code>sk-prod-xxx</code></span>
|
||
</label>
|
||
|
||
<div class="actions">
|
||
<button class="secondary" id="preview-provider-btn">预检导入</button>
|
||
<button class="primary" id="import-provider-btn">执行导入</button>
|
||
<a class="ghost" href="/portal/admin/batch-import.html" style="text-decoration:none; display:inline-flex; align-items:center;">打开 Batch Import</a>
|
||
</div>
|
||
|
||
<div class="statusbar" id="provider-status">先选 provider 并保存模板。</div>
|
||
</article>
|
||
</section>
|
||
</section>
|
||
|
||
<section class="result-grid">
|
||
<article class="card panel">
|
||
<h2>Preview 结果</h2>
|
||
<p class="panel-desc">这里直接展示 <code>POST /api/providers/{providerID}/preview-import</code> 的原始 JSON。</p>
|
||
<pre id="preview-result">{
|
||
"hint": "还没有 preview 结果"
|
||
}</pre>
|
||
</article>
|
||
|
||
<article class="card panel">
|
||
<h2>Import / Draft 结果</h2>
|
||
<p class="panel-desc">导入结果与 manifest 草稿都收在这里，便于直接复制或继续跳转到 batch-import 页面。</p>
|
||
<pre id="import-result">{
|
||
"hint": "还没有 import 或 draft 结果"
|
||
}</pre>
|
||
</article>
|
||
|
||
<article class="card panel">
|
||
<h2>服务端草稿</h2>
|
||
<p class="panel-desc">
|
||
这里展示已经保存到 CRM SQLite 的 provider 草稿。点击条目会把内容回填到 manifest 表单，继续编辑或再次复制。
|
||
</p>
|
||
<div class="draft-list" id="server-draft-list">
|
||
<div class="empty">还没有服务端草稿。</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<span id="metric-pack-id" hidden></span>
|
||
<span id="metric-provider-id" hidden></span>
|
||
</main>
|
||
|
||
<script src="/portal/admin-common.js"></script>
|
||
<script src="/portal/portal.js"></script>
|
||
<script>
|
||
|
||
const AdminCommon = window.Sub2ApiAdminCommon;
|
||
window.Sub2ApiPortal.renderModernAdminNav(document.querySelector("[data-admin-nav]"), "providers");
|
||
(function injectIcons(){
|
||
const M = (id, n) => { const el = document.getElementById(id); if (el) el.innerHTML = window.Sub2ApiPortal.svg(n, 22); };
|
||
M("pr-m1", "shield");
|
||
M("pr-m2", "package");
|
||
M("pr-m3", "package");
|
||
M("pr-m4", "edit");
|
||
})();
|
||
|
||
// <script>
|
||
AdminCommon.renderAdminNav(document.querySelector("[data-admin-nav]"), "providers");
|
||
const storageKey = "sub2api-crm-provider-admin-v1";
|
||
const lastPublishedTemplateKey = "sub2api-crm-provider-admin:last-published-template";
|
||
const sampleDraftTemplate = {
|
||
provider_id: "openai-zhongzhuan",
|
||
display_name: "OpenAI 中转",
|
||
platform: "openai",
|
||
base_url: "https://api.example.com/v1",
|
||
smoke_test_model: "gpt-5.4",
|
||
supported_models: ["gpt-5.4", "gpt-5.4-mini"],
|
||
};
|
||
const state = {
|
||
packs: [],
|
||
hosts: [],
|
||
providers: [],
|
||
selectedProvider: null,
|
||
drafts: [],
|
||
currentDraftID: "",
|
||
draftTemplateHydrated: false,
|
||
draftProviderIDAuto: true,
|
||
};
|
||
|
||
const apiBaseInput = document.getElementById("api-base");
|
||
const adminTokenInput = document.getElementById("admin-token");
|
||
const adminUsernameInput = document.getElementById("admin-username");
|
||
const adminPasswordInput = document.getElementById("admin-password");
|
||
const adminLoginButton = document.getElementById("admin-login-btn");
|
||
const adminLogoutButton = document.getElementById("admin-logout-btn");
|
||
const adminSessionStatus = document.getElementById("admin-session-status");
|
||
const packIDInput = document.getElementById("pack-id");
|
||
const hostIDInput = document.getElementById("host-id");
|
||
const packPathInput = document.getElementById("pack-path");
|
||
const providerIDInput = document.getElementById("provider-id");
|
||
const modeInput = document.getElementById("mode");
|
||
const accessModeInput = document.getElementById("access-mode");
|
||
const accessAPIKeyInput = document.getElementById("access-api-key");
|
||
const subscriptionUsersInput = document.getElementById("subscription-users");
|
||
const subscriptionDaysInput = document.getElementById("subscription-days");
|
||
const providerKeysInput = document.getElementById("provider-keys");
|
||
const subscriptionFields = document.getElementById("subscription-fields");
|
||
const providerCatalog = document.getElementById("provider-catalog");
|
||
const catalogStatus = document.getElementById("catalog-status");
|
||
const providerStatus = document.getElementById("provider-status");
|
||
const draftStatus = document.getElementById("draft-status");
|
||
const previewResult = document.getElementById("preview-result");
|
||
const importResult = document.getElementById("import-result");
|
||
const serverDraftList = document.getElementById("server-draft-list");
|
||
|
||
const metricApiRoot = document.getElementById("metric-api-root");
|
||
const metricPackID = document.getElementById("metric-pack-id");
|
||
const metricProviderID = document.getElementById("metric-provider-id");
|
||
|
||
const draftDisplayNameInput = document.getElementById("draft-display-name");
|
||
const draftPlatformInput = document.getElementById("draft-platform");
|
||
const draftSmokeModelInput = document.getElementById("draft-smoke-model");
|
||
const draftBaseURLInput = document.getElementById("draft-base-url");
|
||
const draftModelsInput = document.getElementById("draft-models");
|
||
const draftCommitMessageInput = document.getElementById("draft-commit-message");
|
||
const recentTemplateMeta = document.getElementById("recent-template-meta");
|
||
const providerIdPreview = document.getElementById("provider-id-preview");
|
||
const modelConflicts = document.getElementById("model-conflicts");
|
||
|
||
const adminRuntime = AdminCommon.createAdminPageRuntime({
|
||
apiBaseInput,
|
||
adminTokenInput,
|
||
adminUsernameInput,
|
||
adminPasswordInput,
|
||
adminSessionStatus,
|
||
onSessionPersist: saveConfig,
|
||
});
|
||
|
||
function defaultApiBase() {
|
||
return adminRuntime.defaultApiBase();
|
||
}
|
||
|
||
function normalizeApiBase() {
|
||
return adminRuntime.normalizeApiBase();
|
||
}
|
||
|
||
function setStatus(target, message, tone = "note") {
|
||
AdminCommon.setStatus(target, message, tone);
|
||
}
|
||
|
||
function authHeaders() {
|
||
return {
|
||
"Content-Type": "application/json",
|
||
...adminRuntime.authHeaders(),
|
||
};
|
||
}
|
||
|
||
async function requestJSON(path, options = {}) {
|
||
return adminRuntime.requestJSON(path, options);
|
||
}
|
||
|
||
function syncMetrics() {
|
||
metricApiRoot.textContent = normalizeApiBase();
|
||
metricPackID.textContent = packIDInput.value || "-";
|
||
metricProviderID.textContent = providerIDInput.value || "-";
|
||
}
|
||
|
||
function parseDraftModels() {
|
||
return draftModelsInput.value
|
||
.split(",")
|
||
.map((value) => value.trim())
|
||
.filter(Boolean);
|
||
}
|
||
|
||
function draftFieldsAreEmpty() {
|
||
return ![
|
||
providerIDInput.value,
|
||
draftDisplayNameInput.value,
|
||
draftPlatformInput.value,
|
||
draftSmokeModelInput.value,
|
||
draftBaseURLInput.value,
|
||
draftModelsInput.value,
|
||
].some((value) => String(value || "").trim());
|
||
}
|
||
|
||
function slugifyProviderPart(value) {
|
||
return String(value || "")
|
||
.trim()
|
||
.toLowerCase()
|
||
.replace(/https?:\/\//g, "")
|
||
.replace(/[^a-z0-9]+/g, "-")
|
||
.replace(/^-+|-+$/g, "");
|
||
}
|
||
|
||
function inferRouteSuffix(displayName, baseURL) {
|
||
const display = String(displayName || "").toLowerCase();
|
||
const url = String(baseURL || "").toLowerCase();
|
||
if (display.includes("官方") || display.includes("official") || url.includes("deepseek.com")) {
|
||
return "official";
|
||
}
|
||
if (display.includes("中转") || display.includes("relay")) {
|
||
const host = slugifyProviderPart(url.split("/")[0] || "");
|
||
if (host && !["api", "com", "www", "example"].includes(host)) {
|
||
return host;
|
||
}
|
||
return "relay";
|
||
}
|
||
const host = slugifyProviderPart(url.split("/")[0] || "");
|
||
return host || "";
|
||
}
|
||
|
||
function draftPrimaryModel() {
|
||
return parseDraftModels()[0] || draftSmokeModelInput.value.trim() || "";
|
||
}
|
||
|
||
function existingProviderIDs() {
|
||
const ids = new Set();
|
||
state.providers.forEach((provider) => ids.add((provider.provider_id || "").trim()));
|
||
state.drafts.forEach((draft) => ids.add((draft.provider_id || "").trim()));
|
||
return ids;
|
||
}
|
||
|
||
function detectModelConflicts(models, ignoreProviderID = "") {
|
||
const normalizedModels = models.map((value) => value.trim()).filter(Boolean);
|
||
const ignored = ignoreProviderID.trim();
|
||
const conflicts = [];
|
||
const seen = new Set();
|
||
const scan = (entries, source) => {
|
||
entries.forEach((entry) => {
|
||
const providerID = (entry.provider_id || entry.providerID || "").trim();
|
||
if (!providerID || providerID === ignored) {
|
||
return;
|
||
}
|
||
const supportedModels = Array.isArray(entry.supported_models || entry.supportedModels)
|
||
? (entry.supported_models || entry.supportedModels)
|
||
: [];
|
||
const matched = supportedModels.filter((model) => normalizedModels.includes(String(model || "").trim()));
|
||
if (!matched.length) {
|
||
return;
|
||
}
|
||
const key = `${providerID}:${matched.join(",")}`;
|
||
if (seen.has(key)) {
|
||
return;
|
||
}
|
||
seen.add(key);
|
||
conflicts.push({
|
||
providerID,
|
||
displayName: entry.display_name || entry.displayName || providerID,
|
||
matchedModels: matched,
|
||
source,
|
||
});
|
||
});
|
||
};
|
||
scan(state.providers, "provider");
|
||
scan(state.drafts, "draft");
|
||
return conflicts;
|
||
}
|
||
|
||
function updateConflictSummary() {
|
||
const conflicts = detectModelConflicts(parseDraftModels(), providerIDInput.value);
|
||
if (!conflicts.length) {
|
||
setStatus(modelConflicts, "同模型已存在：当前未发现冲突。", "success");
|
||
return conflicts;
|
||
}
|
||
const labels = conflicts
|
||
.map((item) => `${item.matchedModels.join("/")} -> ${item.providerID}`)
|
||
.join("；");
|
||
setStatus(modelConflicts, `同模型已存在：${labels}。通常不需要因为“官方 / 中转”再重复新增 provider，优先复用或修改已有 provider。`, "warning");
|
||
return conflicts;
|
||
}
|
||
|
||
function buildSuggestedProviderID() {
|
||
const primaryModel = draftPrimaryModel();
|
||
const displayName = draftDisplayNameInput.value.trim();
|
||
const baseURL = draftBaseURLInput.value.trim();
|
||
const conflicts = detectModelConflicts(parseDraftModels(), providerIDInput.value);
|
||
if (primaryModel && conflicts.length === 1) {
|
||
return conflicts[0].providerID;
|
||
}
|
||
const baseCandidate = slugifyProviderPart(primaryModel) || slugifyProviderPart(displayName) || "provider";
|
||
const suffix = inferRouteSuffix(displayName, baseURL);
|
||
let candidate = [baseCandidate, suffix].filter(Boolean).join("-");
|
||
if (!candidate) {
|
||
candidate = "provider";
|
||
}
|
||
const ids = existingProviderIDs();
|
||
const currentValue = providerIDInput.value.trim();
|
||
if (currentValue) {
|
||
ids.delete(currentValue);
|
||
}
|
||
if (!ids.has(candidate)) {
|
||
return candidate;
|
||
}
|
||
let index = 2;
|
||
while (ids.has(`${candidate}-${index}`)) {
|
||
index += 1;
|
||
}
|
||
return `${candidate}-${index}`;
|
||
}
|
||
|
||
function syncDraftHelperState(forceProviderID = false) {
|
||
const suggested = buildSuggestedProviderID();
|
||
setStatus(providerIdPreview, `providerIdPreview: ${suggested}`, "note");
|
||
updateConflictSummary();
|
||
if (forceProviderID || state.draftProviderIDAuto || !providerIDInput.value.trim()) {
|
||
providerIDInput.value = suggested;
|
||
}
|
||
// Auto-fill smoke_test_model with first model if user hasn't filled it yet
|
||
if (!draftSmokeModelInput.value.trim()) {
|
||
const models = parseDraftModels();
|
||
if (models.length > 0) {
|
||
draftSmokeModelInput.value = models[0];
|
||
}
|
||
}
|
||
}
|
||
|
||
function rememberLastPublishedTemplate() {
|
||
const payload = {
|
||
provider_id: providerIDInput.value.trim(),
|
||
display_name: draftDisplayNameInput.value.trim(),
|
||
platform: draftPlatformInput.value.trim(),
|
||
base_url: draftBaseURLInput.value.trim(),
|
||
smoke_test_model: draftSmokeModelInput.value.trim(),
|
||
supported_models: parseDraftModels(),
|
||
saved_at: new Date().toISOString(),
|
||
};
|
||
localStorage.setItem(lastPublishedTemplateKey, JSON.stringify(payload));
|
||
renderRecentTemplateMeta(payload);
|
||
}
|
||
|
||
function readLastPublishedTemplate() {
|
||
try {
|
||
const raw = localStorage.getItem(lastPublishedTemplateKey);
|
||
if (!raw) {
|
||
return null;
|
||
}
|
||
return JSON.parse(raw);
|
||
} catch (error) {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function renderRecentTemplateMeta(template) {
|
||
if (!template) {
|
||
setStatus(recentTemplateMeta, "最近成功模板：暂无。首次可以先按一份已有 provider 作为参考修改。", "note");
|
||
return;
|
||
}
|
||
const models = Array.isArray(template.supported_models) ? template.supported_models.join(", ") : "";
|
||
setStatus(recentTemplateMeta, `最近成功模板：${template.provider_id || "-"} · ${template.display_name || "-"} · ${models || "-"}`, "success");
|
||
}
|
||
|
||
function fillDraftForm(draft, options = {}) {
|
||
const { preserveCommitMessage = false, lockProviderID = false } = options;
|
||
state.currentDraftID = draft.draft_id || "";
|
||
state.draftProviderIDAuto = !lockProviderID;
|
||
providerIDInput.value = draft.provider_id || "";
|
||
draftDisplayNameInput.value = draft.display_name || "";
|
||
draftPlatformInput.value = draft.platform || "";
|
||
draftSmokeModelInput.value = draft.smoke_test_model || "";
|
||
draftBaseURLInput.value = draft.base_url || "";
|
||
draftModelsInput.value = Array.isArray(draft.supported_models) ? draft.supported_models.join(",") : "";
|
||
if (!preserveCommitMessage && !draftCommitMessageInput.value.trim()) {
|
||
draftCommitMessageInput.value = `feat(pack): publish provider draft ${draft.provider_id || ""}`.trim();
|
||
}
|
||
syncDraftHelperState();
|
||
}
|
||
|
||
function hydrateDraftTemplateIfNeeded() {
|
||
if (state.draftTemplateHydrated || !draftFieldsAreEmpty()) {
|
||
return;
|
||
}
|
||
const template = readLastPublishedTemplate()
|
||
|| state.drafts[0]
|
||
|| state.providers[0]
|
||
|| sampleDraftTemplate;
|
||
fillDraftForm(template, { preserveCommitMessage: true });
|
||
state.currentDraftID = "";
|
||
state.draftTemplateHydrated = true;
|
||
renderRecentTemplateMeta(template === sampleDraftTemplate ? null : template);
|
||
}
|
||
|
||
function saveConfig() {
|
||
const payload = {
|
||
apiBase: apiBaseInput.value.trim(),
|
||
adminToken: adminTokenInput.value,
|
||
adminUsername: adminUsernameInput.value.trim(),
|
||
packID: packIDInput.value,
|
||
hostID: hostIDInput.value,
|
||
packPath: packPathInput.value.trim(),
|
||
providerID: providerIDInput.value.trim(),
|
||
mode: modeInput.value,
|
||
accessMode: accessModeInput.value,
|
||
accessAPIKey: accessAPIKeyInput.value.trim(),
|
||
subscriptionUsers: subscriptionUsersInput.value.trim(),
|
||
subscriptionDays: subscriptionDaysInput.value,
|
||
providerKeys: providerKeysInput.value,
|
||
draftProviderID: providerIDInput.value.trim(),
|
||
draftDisplayName: draftDisplayNameInput.value.trim(),
|
||
draftPlatform: draftPlatformInput.value.trim(),
|
||
draftSmokeModel: draftSmokeModelInput.value.trim(),
|
||
draftBaseURL: draftBaseURLInput.value.trim(),
|
||
draftModels: draftModelsInput.value.trim(),
|
||
draftCommitMessage: draftCommitMessageInput.value.trim(),
|
||
};
|
||
AdminCommon.writeStoredConfig(storageKey, payload);
|
||
syncMetrics();
|
||
setStatus(catalogStatus, "本地配置已保存。", "success");
|
||
}
|
||
|
||
function restoreConfig() {
|
||
const payload = AdminCommon.readStoredConfig(storageKey);
|
||
apiBaseInput.value = defaultApiBase();
|
||
packPathInput.value = "/app/packs/openai-cn-pack";
|
||
subscriptionDaysInput.value = "30";
|
||
if (!Object.keys(payload).length) {
|
||
syncMetrics();
|
||
return;
|
||
}
|
||
apiBaseInput.value = payload.apiBase || defaultApiBase();
|
||
adminTokenInput.value = payload.adminToken || "";
|
||
adminUsernameInput.value = payload.adminUsername || "";
|
||
packPathInput.value = payload.packPath || "/app/packs/openai-cn-pack";
|
||
providerIDInput.value = payload.providerID || "";
|
||
modeInput.value = payload.mode || "strict";
|
||
accessModeInput.value = payload.accessMode || "self_service";
|
||
accessAPIKeyInput.value = payload.accessAPIKey || "";
|
||
subscriptionUsersInput.value = payload.subscriptionUsers || "";
|
||
subscriptionDaysInput.value = payload.subscriptionDays || "30";
|
||
providerKeysInput.value = payload.providerKeys || "";
|
||
providerIDInput.value = payload.draftProviderID || "";
|
||
draftDisplayNameInput.value = payload.draftDisplayName || "";
|
||
draftPlatformInput.value = payload.draftPlatform || "";
|
||
draftSmokeModelInput.value = payload.draftSmokeModel || "";
|
||
draftBaseURLInput.value = payload.draftBaseURL || "";
|
||
draftModelsInput.value = payload.draftModels || "";
|
||
draftCommitMessageInput.value = payload.draftCommitMessage || "";
|
||
syncMetrics();
|
||
}
|
||
|
||
function updateAccessModeFields() {
|
||
subscriptionFields.hidden = accessModeInput.value !== "subscription";
|
||
}
|
||
|
||
async function refreshAdminSession() {
|
||
return adminRuntime.refreshAdminSession();
|
||
}
|
||
|
||
async function loginAdminSession() {
|
||
return adminRuntime.loginAdminSession();
|
||
}
|
||
|
||
async function logoutAdminSession() {
|
||
return adminRuntime.logoutAdminSession();
|
||
}
|
||
|
||
function renderSelectOptions(select, values, currentValue, emptyLabel) {
|
||
select.innerHTML = "";
|
||
if (!values.length) {
|
||
const option = document.createElement("option");
|
||
option.value = "";
|
||
option.textContent = emptyLabel;
|
||
select.appendChild(option);
|
||
return;
|
||
}
|
||
values.forEach((entry) => {
|
||
const option = document.createElement("option");
|
||
option.value = entry.value;
|
||
option.textContent = entry.label;
|
||
if (entry.value === currentValue) {
|
||
option.selected = true;
|
||
}
|
||
select.appendChild(option);
|
||
});
|
||
}
|
||
|
||
function renderCatalog() {
|
||
if (!state.providers.length) {
|
||
providerCatalog.innerHTML = '<div class="empty">当前 pack 下没有 provider。</div>';
|
||
return;
|
||
}
|
||
providerCatalog.innerHTML = state.providers.map((provider) => `
|
||
<button type="button" class="catalog-item ${state.selectedProvider?.provider_id === provider.provider_id ? "is-selected" : ""}" data-provider-id="${escapeHTML(provider.provider_id)}">
|
||
<strong>${escapeHTML(provider.display_name || provider.provider_id)}</strong>
|
||
<div class="empty">${escapeHTML(provider.provider_id)}</div>
|
||
<div class="catalog-meta">
|
||
<span class="pill tone-note">${escapeHTML(provider.platform || "unknown")}</span>
|
||
<span class="pill ${provider.host_overlays > 0 ? "tone-ready" : ""}">host overlays: ${escapeHTML(provider.host_overlays || 0)}</span>
|
||
</div>
|
||
</button>
|
||
`).join("");
|
||
providerCatalog.querySelectorAll("[data-provider-id]").forEach((element) => {
|
||
element.addEventListener("click", () => {
|
||
const providerID = element.getAttribute("data-provider-id");
|
||
const selected = state.providers.find((item) => item.provider_id === providerID);
|
||
if (!selected) return;
|
||
state.selectedProvider = selected;
|
||
providerIDInput.value = selected.provider_id;
|
||
syncMetrics();
|
||
renderCatalog();
|
||
setStatus(providerStatus, `已选择 provider：${selected.provider_id}`, "success");
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderServerDrafts() {
|
||
if (!state.drafts.length) {
|
||
serverDraftList.innerHTML = '<div class="empty">还没有服务端草稿。</div>';
|
||
return;
|
||
}
|
||
serverDraftList.innerHTML = state.drafts.map((draft) => `
|
||
<button type="button" class="draft-item" data-draft-id="${escapeHTML(draft.draft_id)}">
|
||
<strong>${escapeHTML(draft.display_name || draft.provider_id)}</strong>
|
||
<div class="empty">${escapeHTML(draft.provider_id)} · ${escapeHTML(draft.pack_id)}</div>
|
||
<div class="catalog-meta">
|
||
<span class="pill tone-note">${escapeHTML(draft.platform || "unknown")}</span>
|
||
<span class="pill">${escapeHTML(draft.draft_id)}</span>
|
||
</div>
|
||
</button>
|
||
`).join("");
|
||
serverDraftList.querySelectorAll("[data-draft-id]").forEach((element) => {
|
||
element.addEventListener("click", () => {
|
||
const draftID = element.getAttribute("data-draft-id");
|
||
const draft = state.drafts.find((item) => item.draft_id === draftID);
|
||
if (!draft) {
|
||
return;
|
||
}
|
||
fillDraftForm(draft, { lockProviderID: true });
|
||
importResult.textContent = JSON.stringify(draft.manifest || {}, null, 2);
|
||
setStatus(draftStatus, `已回填服务端草稿：${draft.draft_id}`, "success");
|
||
});
|
||
});
|
||
}
|
||
|
||
function clearDraftFormSelection() {
|
||
state.currentDraftID = "";
|
||
state.draftProviderIDAuto = true;
|
||
}
|
||
|
||
async function loadCatalog() {
|
||
const button = document.getElementById("load-catalog-btn");
|
||
button.disabled = true;
|
||
try {
|
||
setStatus(catalogStatus, "正在加载 pack / host / provider 目录 ...");
|
||
syncMetrics();
|
||
const [packsPayload, hostsPayload] = await Promise.all([
|
||
requestJSON("/api/packs", { headers: authHeaders() }),
|
||
requestJSON("/api/hosts", { headers: authHeaders() }),
|
||
]);
|
||
state.packs = Array.isArray(packsPayload.packs) ? packsPayload.packs : [];
|
||
state.hosts = Array.isArray(hostsPayload.hosts) ? hostsPayload.hosts : [];
|
||
|
||
const packOptions = state.packs.map((pack) => ({
|
||
value: pack.pack_id,
|
||
label: `${pack.pack_id} (${pack.version})`,
|
||
}));
|
||
const hostOptions = state.hosts.map((host) => ({
|
||
value: host.host_id,
|
||
label: `${host.host_id} · ${host.host_version || "unknown"}`,
|
||
}));
|
||
|
||
const storedConfig = AdminCommon.readStoredConfig(storageKey);
|
||
const savedPackID = storedConfig.packID || "";
|
||
const savedHostID = storedConfig.hostID || "";
|
||
renderSelectOptions(packIDInput, packOptions, savedPackID || packOptions[0]?.value || "", "暂无 pack");
|
||
renderSelectOptions(hostIDInput, hostOptions, savedHostID || hostOptions[0]?.value || "", "暂无 host");
|
||
|
||
const packID = packIDInput.value;
|
||
if (!packID) {
|
||
state.providers = [];
|
||
renderCatalog();
|
||
setStatus(catalogStatus, "没有可用 pack。", "warning");
|
||
return;
|
||
}
|
||
|
||
const providersPayload = await requestJSON(`/api/packs/${encodeURIComponent(packID)}/providers`, {
|
||
headers: authHeaders(),
|
||
});
|
||
state.providers = Array.isArray(providersPayload.providers) ? providersPayload.providers : [];
|
||
state.selectedProvider = state.providers.find((item) => item.provider_id === providerIDInput.value) || state.providers[0] || null;
|
||
if (state.selectedProvider) {
|
||
providerIDInput.value = state.selectedProvider.provider_id;
|
||
}
|
||
renderCatalog();
|
||
syncMetrics();
|
||
saveCurrentIDsOnly();
|
||
await loadServerDrafts();
|
||
hydrateDraftTemplateIfNeeded();
|
||
setStatus(catalogStatus, `目录已加载：${state.packs.length} 个 pack，${state.providers.length} 个 provider。`, "success");
|
||
} catch (error) {
|
||
setStatus(catalogStatus, `加载目录失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
function saveCurrentIDsOnly() {
|
||
const payload = AdminCommon.readStoredConfig(storageKey);
|
||
payload.packID = packIDInput.value;
|
||
payload.hostID = hostIDInput.value;
|
||
AdminCommon.writeStoredConfig(storageKey, payload);
|
||
}
|
||
|
||
function parseKeys() {
|
||
const keys = providerKeysInput.value
|
||
.split("\n")
|
||
.map((value) => value.trim())
|
||
.filter(Boolean);
|
||
if (!keys.length) {
|
||
throw new Error("至少填写一把供应商 key");
|
||
}
|
||
return keys;
|
||
}
|
||
|
||
function selectedProviderID() {
|
||
const providerID = providerIDInput.value.trim();
|
||
if (!providerID) {
|
||
throw new Error("provider_id 不能为空");
|
||
}
|
||
return providerID;
|
||
}
|
||
|
||
function baseProviderPayload() {
|
||
const hostID = hostIDInput.value.trim();
|
||
const packPath = packPathInput.value.trim();
|
||
if (!hostID) {
|
||
throw new Error("host_id 不能为空");
|
||
}
|
||
if (!packPath) {
|
||
throw new Error("pack_path 不能为空");
|
||
}
|
||
return {
|
||
host_id: hostID,
|
||
pack_path: packPath,
|
||
provider_id: selectedProviderID(),
|
||
keys: parseKeys(),
|
||
mode: modeInput.value,
|
||
};
|
||
}
|
||
|
||
function buildImportPayload() {
|
||
const payload = {
|
||
...baseProviderPayload(),
|
||
access_mode: accessModeInput.value,
|
||
access_api_key: accessAPIKeyInput.value.trim(),
|
||
};
|
||
if (!payload.access_api_key) {
|
||
throw new Error("access_api_key / probe_api_key 不能为空");
|
||
}
|
||
if (payload.access_mode === "subscription") {
|
||
payload.subscription_users = subscriptionUsersInput.value
|
||
.split(",")
|
||
.map((value) => value.trim())
|
||
.filter(Boolean);
|
||
payload.subscription_days = Number(subscriptionDaysInput.value || 30);
|
||
if (!payload.subscription_users.length) {
|
||
throw new Error("subscription 模式下 subscription_users 不能为空");
|
||
}
|
||
}
|
||
return payload;
|
||
}
|
||
|
||
async function previewProvider() {
|
||
const button = document.getElementById("preview-provider-btn");
|
||
button.disabled = true;
|
||
try {
|
||
const providerID = selectedProviderID();
|
||
setStatus(providerStatus, `正在预检 ${providerID} ...`);
|
||
const payload = baseProviderPayload();
|
||
const preview = await requestJSON(`/api/providers/${encodeURIComponent(providerID)}/preview-import`, {
|
||
method: "POST",
|
||
headers: authHeaders(),
|
||
body: JSON.stringify(payload),
|
||
});
|
||
previewResult.textContent = JSON.stringify(preview, null, 2);
|
||
setStatus(providerStatus, `preview-import 已完成：${providerID}`, "success");
|
||
} catch (error) {
|
||
setStatus(providerStatus, `预检失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function importProvider() {
|
||
const button = document.getElementById("import-provider-btn");
|
||
button.disabled = true;
|
||
try {
|
||
const providerID = selectedProviderID();
|
||
setStatus(providerStatus, `正在导入 ${providerID} ...`);
|
||
const payload = buildImportPayload();
|
||
const result = await requestJSON(`/api/providers/${encodeURIComponent(providerID)}/import`, {
|
||
method: "POST",
|
||
headers: authHeaders(),
|
||
body: JSON.stringify(payload),
|
||
});
|
||
importResult.textContent = JSON.stringify(result, null, 2);
|
||
setStatus(providerStatus, `import 已完成：${providerID}`, "success");
|
||
} catch (error) {
|
||
setStatus(providerStatus, `导入失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
function buildDraftPayload() {
|
||
const providerID = providerIDInput.value.trim();
|
||
const displayName = draftDisplayNameInput.value.trim();
|
||
if (!providerID || !displayName) {
|
||
throw new Error("provider_id 和 display_name 不能为空");
|
||
}
|
||
const models = draftModelsInput.value
|
||
.split(",")
|
||
.map((value) => value.trim())
|
||
.filter(Boolean);
|
||
return {
|
||
provider_id: providerID,
|
||
display_name: displayName,
|
||
platform: draftPlatformInput.value.trim() || "openai",
|
||
smoke_test_model: draftSmokeModelInput.value.trim() || (models[0] || ""),
|
||
base_url_placeholder: draftBaseURLInput.value.trim() || "https://api.example.com/v1",
|
||
supported_models: models,
|
||
};
|
||
}
|
||
|
||
function buildServerDraftPayload() {
|
||
const draft = buildDraftPayload();
|
||
return {
|
||
pack_id: packIDInput.value || "openai-cn-pack",
|
||
provider_id: draft.provider_id,
|
||
display_name: draft.display_name,
|
||
platform: draft.platform,
|
||
base_url: draft.base_url_placeholder,
|
||
smoke_test_model: draft.smoke_test_model,
|
||
supported_models: draft.supported_models,
|
||
source_host_id: hostIDInput.value || "",
|
||
manifest: {
|
||
provider_id: draft.provider_id,
|
||
display_name: draft.display_name,
|
||
platform: draft.platform,
|
||
base_url: draft.base_url_placeholder,
|
||
smoke_test_model: draft.smoke_test_model,
|
||
supported_models: draft.supported_models,
|
||
},
|
||
};
|
||
}
|
||
|
||
function generateDraft() {
|
||
try {
|
||
const draft = buildDraftPayload();
|
||
const output = {
|
||
provider_id: draft.provider_id,
|
||
display_name: draft.display_name,
|
||
platform: draft.platform,
|
||
smoke_test_model: draft.smoke_test_model,
|
||
base_url: draft.base_url_placeholder,
|
||
supported_models: draft.supported_models,
|
||
};
|
||
importResult.textContent = JSON.stringify(output, null, 2);
|
||
setStatus(draftStatus, "manifest 草稿已生成，可以直接复制。", "success");
|
||
} catch (error) {
|
||
setStatus(draftStatus, `生成失败：${error.message}`, "danger");
|
||
}
|
||
}
|
||
|
||
async function copyDraft() {
|
||
try {
|
||
await navigator.clipboard.writeText(importResult.textContent);
|
||
setStatus(draftStatus, "JSON 草稿已复制。", "success");
|
||
} catch (error) {
|
||
setStatus(draftStatus, "复制失败，请手动复制下方 JSON。", "warning");
|
||
}
|
||
}
|
||
|
||
async function saveDraftToServer() {
|
||
const button = document.getElementById("save-draft-btn");
|
||
button.disabled = true;
|
||
try {
|
||
const payload = buildServerDraftPayload();
|
||
const result = await requestJSON("/api/provider-drafts", {
|
||
method: "POST",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
importResult.textContent = JSON.stringify(result.draft || result, null, 2);
|
||
state.currentDraftID = result.draft?.draft_id || "";
|
||
setStatus(draftStatus, `草稿已保存：${result.draft?.draft_id || "-"}`, "success");
|
||
await loadServerDrafts();
|
||
} catch (error) {
|
||
setStatus(draftStatus, `保存失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function updateDraftOnServer() {
|
||
const button = document.getElementById("update-draft-btn");
|
||
button.disabled = true;
|
||
try {
|
||
if (!state.currentDraftID) {
|
||
throw new Error("请先从服务端草稿列表选择一条草稿");
|
||
}
|
||
const payload = buildServerDraftPayload();
|
||
const result = await requestJSON(`/api/provider-drafts/${encodeURIComponent(state.currentDraftID)}`, {
|
||
method: "PUT",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
importResult.textContent = JSON.stringify(result.draft || result, null, 2);
|
||
setStatus(draftStatus, `草稿已更新：${state.currentDraftID}`, "success");
|
||
await loadServerDrafts();
|
||
} catch (error) {
|
||
setStatus(draftStatus, `更新失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function deleteDraftOnServer() {
|
||
const button = document.getElementById("delete-draft-btn");
|
||
button.disabled = true;
|
||
try {
|
||
if (!state.currentDraftID) {
|
||
throw new Error("请先从服务端草稿列表选择一条草稿");
|
||
}
|
||
await requestJSON(`/api/provider-drafts/${encodeURIComponent(state.currentDraftID)}`, {
|
||
method: "DELETE",
|
||
});
|
||
const deletedDraftID = state.currentDraftID;
|
||
clearDraftFormSelection();
|
||
importResult.textContent = JSON.stringify({ deleted_draft_id: deletedDraftID }, null, 2);
|
||
setStatus(draftStatus, `草稿已删除：${deletedDraftID}`, "success");
|
||
await loadServerDrafts();
|
||
} catch (error) {
|
||
setStatus(draftStatus, `删除失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function loadServerDrafts() {
|
||
try {
|
||
const params = new URLSearchParams();
|
||
if (packIDInput.value) {
|
||
params.set("pack_id", packIDInput.value);
|
||
}
|
||
const suffix = params.toString() ? `?${params.toString()}` : "";
|
||
const payload = await requestJSON(`/api/provider-drafts${suffix}`, {
|
||
});
|
||
state.drafts = Array.isArray(payload.provider_drafts) ? payload.provider_drafts : [];
|
||
renderServerDrafts();
|
||
hydrateDraftTemplateIfNeeded();
|
||
} catch (error) {
|
||
serverDraftList.innerHTML = `<div class="empty">加载草稿失败：${escapeHTML(error.message)}</div>`;
|
||
}
|
||
}
|
||
|
||
async function publishDraftToRepo() {
|
||
const button = document.getElementById("publish-draft-btn");
|
||
button.disabled = true;
|
||
try {
|
||
if (!state.currentDraftID) {
|
||
throw new Error("请先从服务端草稿列表选择一条草稿");
|
||
}
|
||
const result = await requestJSON(`/api/provider-drafts/${encodeURIComponent(state.currentDraftID)}/publish`, {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
commit_message: draftCommitMessageInput.value.trim(),
|
||
}),
|
||
});
|
||
importResult.textContent = JSON.stringify(result.publish || result, null, 2);
|
||
rememberLastPublishedTemplate();
|
||
setStatus(
|
||
draftStatus,
|
||
`已发布到仓库：${result.publish?.provider_path || "-"} · ${result.publish?.pack_version_before || "-"} -> ${result.publish?.pack_version_after || "-"} · ${result.publish?.commit_sha || "-"}`,
|
||
"success",
|
||
);
|
||
} catch (error) {
|
||
setStatus(draftStatus, `发布失败：${error.message}`, "danger");
|
||
} finally {
|
||
button.disabled = false;
|
||
}
|
||
}
|
||
|
||
function escapeHTML(value) {
|
||
return String(value)
|
||
.replaceAll("&", "&")
|
||
.replaceAll("<", "<")
|
||
.replaceAll(">", ">")
|
||
.replaceAll('"', """)
|
||
.replaceAll("'", "'");
|
||
}
|
||
|
||
document.getElementById("load-catalog-btn").addEventListener("click", loadCatalog);
|
||
document.getElementById("save-config-btn").addEventListener("click", saveConfig);
|
||
document.getElementById("preview-provider-btn").addEventListener("click", previewProvider);
|
||
document.getElementById("import-provider-btn").addEventListener("click", importProvider);
|
||
document.getElementById("generate-draft-btn").addEventListener("click", generateDraft);
|
||
document.getElementById("save-draft-btn").addEventListener("click", saveDraftToServer);
|
||
document.getElementById("update-draft-btn").addEventListener("click", updateDraftOnServer);
|
||
document.getElementById("publish-draft-btn").addEventListener("click", publishDraftToRepo);
|
||
document.getElementById("delete-draft-btn").addEventListener("click", deleteDraftOnServer);
|
||
document.getElementById("copy-draft-btn").addEventListener("click", copyDraft);
|
||
document.getElementById("refresh-drafts-btn").addEventListener("click", loadServerDrafts);
|
||
adminLoginButton.addEventListener("click", async () => {
|
||
try {
|
||
await loginAdminSession();
|
||
await loadCatalog();
|
||
} catch (error) {}
|
||
});
|
||
adminLogoutButton.addEventListener("click", async () => {
|
||
try {
|
||
await logoutAdminSession();
|
||
await refreshAdminSession();
|
||
} catch (error) {}
|
||
});
|
||
accessModeInput.addEventListener("change", updateAccessModeFields);
|
||
packIDInput.addEventListener("change", loadCatalog);
|
||
providerIDInput.addEventListener("input", syncMetrics);
|
||
apiBaseInput.addEventListener("input", syncMetrics);
|
||
draftDisplayNameInput.addEventListener("input", () => syncDraftHelperState(false));
|
||
draftBaseURLInput.addEventListener("input", () => syncDraftHelperState(false));
|
||
draftSmokeModelInput.addEventListener("input", () => syncDraftHelperState(false));
|
||
draftModelsInput.addEventListener("input", () => syncDraftHelperState(false));
|
||
providerIDInput.addEventListener("input", () => {
|
||
const currentValue = providerIDInput.value.trim();
|
||
state.draftProviderIDAuto = !currentValue || currentValue === buildSuggestedProviderID();
|
||
syncDraftHelperState(false);
|
||
});
|
||
|
||
restoreConfig();
|
||
updateAccessModeFields();
|
||
syncMetrics();
|
||
renderRecentTemplateMeta(readLastPublishedTemplate());
|
||
syncDraftHelperState();
|
||
refreshAdminSession().catch(() => {});
|
||
renderServerDrafts();
|
||
|
||
// ===== Unified Provider Workflow glue =====
|
||
// When the user types/selects a provider_id, look it up in the loaded
|
||
// catalog and auto-populate the template fields + model picker.
|
||
(function wireUnifiedProviderWorkflow() {
|
||
const providerIdInput = document.getElementById("provider-id");
|
||
const modelPicker = document.getElementById("model-picker");
|
||
const catalogDatalist = document.getElementById("preset-provider-id-from-catalog");
|
||
if (!providerIdInput || !modelPicker) return;
|
||
|
||
// Render model checkboxes into the picker area
|
||
function renderModelPicker(models) {
|
||
if (!models || models.length === 0) {
|
||
modelPicker.innerHTML = '<span class="hint" style="margin:0;">模板还没保存或未选模型，<a href="#template-section">先在上面填 Models 字段</a> 再保存草稿</span>';
|
||
return;
|
||
}
|
||
const wrap = document.createElement("div");
|
||
wrap.style.display = "flex";
|
||
wrap.style.flexWrap = "wrap";
|
||
wrap.style.gap = "6px";
|
||
models.forEach((m) => {
|
||
const label = document.createElement("label");
|
||
label.style.cssText = "display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:9999px; background:var(--bg-elev-2); border:1px solid var(--border-subtle); font-size:12px; font-weight:600; cursor:pointer; color:var(--text-default);";
|
||
const cb = document.createElement("input");
|
||
cb.type = "checkbox";
|
||
cb.value = m;
|
||
cb.checked = true;
|
||
cb.dataset.role = "model-pick";
|
||
label.appendChild(cb);
|
||
label.appendChild(document.createTextNode(m));
|
||
wrap.appendChild(label);
|
||
});
|
||
const actions = document.createElement("div");
|
||
actions.style.cssText = "display:flex; gap:6px; margin-left:auto;";
|
||
const allBtn = document.createElement("button");
|
||
allBtn.type = "button";
|
||
allBtn.className = "ghost";
|
||
allBtn.textContent = "全选";
|
||
allBtn.style.cssText = "padding:2px 8px; font-size:11px;";
|
||
allBtn.addEventListener("click", (ev) => {
|
||
ev.preventDefault();
|
||
wrap.querySelectorAll('input[data-role="model-pick"]').forEach((c) => (c.checked = true));
|
||
});
|
||
const noneBtn = document.createElement("button");
|
||
noneBtn.type = "button";
|
||
noneBtn.className = "ghost";
|
||
noneBtn.textContent = "全不选";
|
||
noneBtn.style.cssText = "padding:2px 8px; font-size:11px;";
|
||
noneBtn.addEventListener("click", (ev) => {
|
||
ev.preventDefault();
|
||
wrap.querySelectorAll('input[data-role="model-pick"]').forEach((c) => (c.checked = false));
|
||
});
|
||
actions.appendChild(allBtn);
|
||
actions.appendChild(noneBtn);
|
||
wrap.appendChild(actions);
|
||
modelPicker.innerHTML = "";
|
||
modelPicker.appendChild(wrap);
|
||
}
|
||
|
||
function findProvider(id) {
|
||
if (!id || !Array.isArray(state.providers)) return null;
|
||
return state.providers.find((p) => p.provider_id === id) || null;
|
||
}
|
||
|
||
function syncFromProviderId() {
|
||
const id = providerIdInput.value.trim();
|
||
// Mirror into provider-id (the shared input) so the existing draft logic picks it up
|
||
if (providerIdInput && id) {
|
||
providerIdInput.value = id;
|
||
state.draftProviderIDAuto = false;
|
||
}
|
||
const p = findProvider(id);
|
||
if (p) {
|
||
// Auto-fill template fields from catalog
|
||
if (p.display_name && draftDisplayNameInput) draftDisplayNameInput.value = p.display_name;
|
||
if (p.platform && draftPlatformInput) draftPlatformInput.value = p.platform;
|
||
if (p.smoke_test_model && draftSmokeModelInput) draftSmokeModelInput.value = p.smoke_test_model;
|
||
if (p.base_url_placeholder && draftBaseURLInput) draftBaseURLInput.value = p.base_url_placeholder;
|
||
if (Array.isArray(p.supported_models) && draftModelsInput) {
|
||
draftModelsInput.value = p.supported_models.join(",");
|
||
}
|
||
renderModelPicker(p.supported_models || []);
|
||
AdminCommon.setStatus(document.getElementById("provider-status"), `已从目录加载 provider "${id}" 的模板和模型。可直接修改后点「保存草稿」或继续填 Keys 批量导入。`, "note");
|
||
} else if (id) {
|
||
// New provider — clear picker, leave template fields for the user to fill
|
||
renderModelPicker([]);
|
||
AdminCommon.setStatus(document.getElementById("provider-status"), `新 provider "${id}"：先在 ② 模板参数 里填 Models / Display Name / Base URL 等，再「保存草稿」。`, "note");
|
||
} else {
|
||
renderModelPicker([]);
|
||
}
|
||
syncDraftHelperState(false);
|
||
}
|
||
|
||
// Re-render catalog datalist when providers list changes
|
||
function refreshCatalogDatalist() {
|
||
if (!catalogDatalist) return;
|
||
catalogDatalist.innerHTML = "";
|
||
if (Array.isArray(state.providers)) {
|
||
state.providers.forEach((p) => {
|
||
const opt = document.createElement("option");
|
||
opt.value = p.provider_id;
|
||
catalogDatalist.appendChild(opt);
|
||
});
|
||
}
|
||
}
|
||
|
||
// Hook: input change on provider-id
|
||
providerIdInput.addEventListener("input", syncFromProviderId);
|
||
providerIdInput.addEventListener("change", syncFromProviderId);
|
||
|
||
// Hook: refresh catalog datalist after loadCatalog runs.
|
||
// loadCatalog is the function name in the main script. We poll state
|
||
// with a short interval since it's not directly exposed.
|
||
let lastProvidersRef = null;
|
||
setInterval(() => {
|
||
if (state.providers !== lastProvidersRef) {
|
||
lastProvidersRef = state.providers;
|
||
refreshCatalogDatalist();
|
||
// Also re-sync if the current id is now known
|
||
syncFromProviderId();
|
||
}
|
||
}, 500);
|
||
|
||
// Hook: when Models field changes, refresh the picker
|
||
draftModelsInput.addEventListener("input", () => {
|
||
// Only refresh if no provider is currently auto-populating from catalog
|
||
const id = providerIdInput.value.trim();
|
||
const p = findProvider(id);
|
||
if (!p) {
|
||
const models = parseDraftModels();
|
||
if (models.length > 0) {
|
||
renderModelPicker(models);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Initial render
|
||
refreshCatalogDatalist();
|
||
syncFromProviderId();
|
||
})();
|
||
|
||
// Wire up the "常用模型" preset chips — click to append to Models field.
|
||
// Placed after the main script so the input refs are available.
|
||
(function wireModelPresets() {
|
||
const wrap = document.getElementById("model-presets");
|
||
if (!wrap) return;
|
||
wrap.addEventListener("click", (ev) => {
|
||
const btn = ev.target.closest("button[data-model]");
|
||
if (!btn) return;
|
||
ev.preventDefault();
|
||
const model = btn.getAttribute("data-model");
|
||
const current = (draftModelsInput.value || "")
|
||
.split(",")
|
||
.map((s) => s.trim())
|
||
.filter(Boolean);
|
||
if (current.includes(model)) {
|
||
setStatus(document.getElementById("draft-status"), `模型 ${model} 已在列表中`, "note");
|
||
return;
|
||
}
|
||
current.push(model);
|
||
draftModelsInput.value = current.join(",");
|
||
syncDraftHelperState(false);
|
||
setStatus(document.getElementById("draft-status"), `已加入 ${model}（共 ${current.length} 个）`, "success");
|
||
});
|
||
const clearBtn = wrap.querySelector('[data-action="clear-models"]');
|
||
if (clearBtn) {
|
||
clearBtn.addEventListener("click", (ev) => {
|
||
ev.preventDefault();
|
||
draftModelsInput.value = "";
|
||
syncDraftHelperState(false);
|
||
setStatus(document.getElementById("draft-status"), "已清空 Models 字段", "note");
|
||
});
|
||
}
|
||
})();
|
||
</script>>
|
||
</html>
|