137 lines
6.4 KiB
HTML
137 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>后台管理 · 模型评测站</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="topbar">
|
||
<div class="brand"><span class="logo">⚡</span> 模型评测站 · 后台管理</div>
|
||
<nav class="nav">
|
||
<a href="/index.html">🏆 速度排行</a>
|
||
<a href="/capabilities.html">🧪 能力测试</a>
|
||
<a href="/compare.html">⚖️ 模型对比</a>
|
||
</nav>
|
||
<div class="spacer"></div>
|
||
<button class="btn small danger" id="btn-logout" hidden>退出登录</button>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<!-- 登录 -->
|
||
<div class="admin-login" id="login-box">
|
||
<h2>🔐 后台管理登录</h2>
|
||
<div class="field"><label>账号</label><input type="text" id="login-user" placeholder="admin" autocomplete="username"></div>
|
||
<div class="field"><label>密码</label><input type="password" id="login-pass" placeholder="••••••" autocomplete="current-password"></div>
|
||
<button class="btn primary block" id="btn-login" style="width:100%">登 录</button>
|
||
<div class="notice red" id="login-err" hidden style="margin-top:12px"></div>
|
||
</div>
|
||
|
||
<!-- 管理界面 -->
|
||
<div id="admin-box" hidden>
|
||
<div class="admin-head">
|
||
<h2>🗂 后台管理</h2>
|
||
<div class="tabs" id="admin-tabs">
|
||
<button data-tab="subs" class="active">📥 提交管理</button>
|
||
<button data-tab="accs">👥 账号管理</button>
|
||
<button data-tab="caps">🧪 能力测试管理</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交管理 -->
|
||
<div class="panel" id="tab-subs">
|
||
<div class="form-row">
|
||
<input type="search" id="sub-search" placeholder="搜索：模型 / 账号 / 测试名称 / 硬件…" style="width:280px">
|
||
<button class="btn" id="btn-search">搜索</button>
|
||
<span class="hint" id="sub-total"></span>
|
||
<div class="spacer" style="flex:1"></div>
|
||
<button class="btn primary" id="btn-seed">🎲 生成演示数据</button>
|
||
</div>
|
||
<div class="tbl-wrap">
|
||
<table id="subs"><thead><tr>
|
||
<th>提交</th><th>账号</th><th>时间</th><th>提供商</th><th>模型</th>
|
||
<th>硬件</th><th class="num">采样</th><th class="num">预填充 tok/s</th>
|
||
<th class="num">解码 tok/s</th><th class="num">首字 ms</th><th>操作</th>
|
||
</tr></thead><tbody><tr><td colspan="11" class="empty">加载中…</td></tr></tbody></table>
|
||
</div>
|
||
<div class="pagination">
|
||
<button class="btn small" id="sub-prev">← 上一页</button>
|
||
<span class="info" id="sub-pg"></span>
|
||
<button class="btn small" id="sub-next">下一页 →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账号管理 -->
|
||
<div class="panel" id="tab-accs" hidden>
|
||
<div class="form-row">
|
||
<div><label>账号名称</label><input type="text" id="acc-name" placeholder="如：性能评测组" style="width:220px"></div>
|
||
<div><label>备注</label><input type="text" id="acc-remark" placeholder="选填" style="width:220px"></div>
|
||
<button class="btn primary" id="btn-add-acc" style="margin-top:18px">➕ 新增账号</button>
|
||
</div>
|
||
<div class="tbl-wrap">
|
||
<table id="accs"><thead><tr>
|
||
<th>账号</th><th>备注</th><th>创建时间</th><th class="num">提交数</th><th>操作</th>
|
||
</tr></thead><tbody><tr><td colspan="5" class="empty">加载中…</td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 能力测试管理 -->
|
||
<div class="panel" id="tab-caps" hidden>
|
||
<div class="form-row">
|
||
<button class="btn primary" id="btn-cap-add">➕ 新增能力测试</button>
|
||
<button class="btn" id="btn-cap-seed">🎲 生成演示能力测试</button>
|
||
<span class="hint">能力测试模块内容仅在此后台编辑，前台只读展示</span>
|
||
</div>
|
||
<div class="tbl-wrap">
|
||
<table id="caps"><thead><tr>
|
||
<th>#</th><th>图标</th><th>名称</th><th>分类</th><th>测试项数</th>
|
||
<th>说明</th><th>排序</th><th>状态</th><th>操作</th>
|
||
</tr></thead><tbody><tr><td colspan="9" class="empty">加载中…</td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交详情弹窗 -->
|
||
<div class="mask" id="sub-mask" hidden>
|
||
<div class="modal">
|
||
<div class="modal-head"><h3>评测提交详情 <span id="sub-id"></span></h3>
|
||
<button class="btn small" id="sub-close">✕ 关闭</button></div>
|
||
<div class="modal-body" id="sub-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 能力测试编辑弹窗 -->
|
||
<div class="mask" id="cap-mask" hidden>
|
||
<div class="modal">
|
||
<div class="modal-head"><h3 id="cap-edit-title">新增能力测试</h3>
|
||
<button class="btn small" id="cap-edit-close">✕ 关闭</button></div>
|
||
<div class="modal-body">
|
||
<div class="cap-edit-grid">
|
||
<div><label>名称 *</label><input type="text" id="ce-name" placeholder="如：数学推理" style="width:100%"></div>
|
||
<div><label>分类</label><input type="text" id="ce-category" placeholder="如：推理 / 编程 / 语言" style="width:100%"></div>
|
||
<div><label>图标(emoji)</label><input type="text" id="ce-icon" placeholder="🧪" style="width:100%"></div>
|
||
<div><label>排序（越小越前）</label><input type="number" id="ce-sort" value="0" style="width:100%"></div>
|
||
</div>
|
||
<div style="margin-top:10px"><label>说明描述</label>
|
||
<textarea id="ce-desc" placeholder="简要描述该能力测试考察什么…" style="width:100%;min-height:60px"></textarea></div>
|
||
<div style="margin-top:10px"><label>测试项（JSON 数组，每项含 title/prompt/expect）</label>
|
||
<textarea id="ce-items" class="items-editor" spellcheck="false" placeholder='[{"title":"题目1","prompt":"提示词内容","expect":"期望结果"}]'></textarea></div>
|
||
<div class="form-row" style="margin-top:10px">
|
||
<label style="display:flex;align-items:center;gap:6px;color:var(--text);cursor:pointer">
|
||
<input type="checkbox" id="ce-status" checked style="accent-color:var(--accent)"> 启用（前台展示）</label>
|
||
</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn primary" id="ce-save">保存</button>
|
||
<button class="btn" id="ce-cancel">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast"></div>
|
||
<script src="/js/app.js"></script>
|
||
</body>
|
||
</html>
|