|
|
@@ -0,0 +1,221 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>DoTouch.AI 管理后台设计稿 v1.6.1</title>
|
|
|
+<style>
|
|
|
+:root{
|
|
|
+ --bg:#0B1020; --card:#121831; --card2:#0E1428; --border:rgba(255,255,255,.08);
|
|
|
+ --purple:#7C5CFF; --purple-l:#9B7BFF; --green:#00E5A0; --green-l:#5FF5C3;
|
|
|
+ --text:#E8ECF8; --muted:#9AA3C0; --gold:#FFC24D; --red:#FF6B7A;
|
|
|
+ --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","PingFang SC","Microsoft YaHei",sans-serif;
|
|
|
+ --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
|
|
+}
|
|
|
+*{margin:0;padding:0;box-sizing:border-box}
|
|
|
+body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6}
|
|
|
+a{color:var(--purple-l);text-decoration:none}
|
|
|
+.dev-note{position:fixed;right:14px;bottom:14px;z-index:99;background:rgba(18,24,49,.92);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--muted)}
|
|
|
+
|
|
|
+.layout{display:flex;min-height:100vh}
|
|
|
+.sidebar{width:224px;background:var(--card2);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
|
|
|
+.sidebar .logo{font-size:19px;font-weight:800;padding:4px 10px 18px;display:flex;align-items:center;justify-content:space-between}
|
|
|
+.sidebar .logo b{color:var(--purple-l)}
|
|
|
+.sidebar .logo .tag-admin{font-size:10px;font-weight:600;color:var(--gold);border:1px solid rgba(255,194,77,.35);border-radius:6px;padding:1px 6px}
|
|
|
+.side-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:13.5px;cursor:pointer;transition:.2s}
|
|
|
+.side-item:hover{background:rgba(124,92,255,.08);color:var(--text)}
|
|
|
+.side-item.active{background:rgba(124,92,255,.15);color:var(--purple-l);font-weight:600}
|
|
|
+.side-item .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
|
|
|
+.side-item .dot.gold{background:var(--gold)}
|
|
|
+.side-item .dot.purple{background:var(--purple)}
|
|
|
+.side-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:14px}
|
|
|
+.side-user{display:flex;align-items:center;gap:10px;padding:10px 12px}
|
|
|
+.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--purple));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
|
|
|
+.side-user .email{font-size:11.5px;color:var(--muted)}
|
|
|
+.side-user .role{font-size:10.5px;color:var(--gold)}
|
|
|
+
|
|
|
+.main{flex:1;padding:28px 32px;max-width:1200px}
|
|
|
+.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
|
|
|
+.topbar h1{font-size:20px;font-weight:800}
|
|
|
+.topbar .sub{font-size:12px;color:var(--muted)}
|
|
|
+
|
|
|
+.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:18px}
|
|
|
+.card h3{font-size:14.5px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
|
|
|
+.card h3 .link{font-size:12px;font-weight:400;color:var(--purple-l);cursor:pointer}
|
|
|
+
|
|
|
+/* 数据看板 */
|
|
|
+.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
|
|
|
+.kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
|
|
|
+.kpi .label{font-size:11.5px;color:var(--muted)}
|
|
|
+.kpi .val{font-size:21px;font-weight:800;margin-top:4px}
|
|
|
+.kpi .sub{font-size:11px;color:var(--green-l);margin-top:2px}
|
|
|
+.kpi .sub.red{color:var(--red)}
|
|
|
+.kpi .sub.gold{color:var(--gold)}
|
|
|
+.charts{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
|
|
|
+.chart{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
|
|
|
+.chart h3{font-size:14px;font-weight:700;margin-bottom:12px}
|
|
|
+.bars{display:flex;align-items:flex-end;gap:8px;height:120px}
|
|
|
+.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--purple),rgba(124,92,255,.25));min-height:6px}
|
|
|
+.bars i.g{background:linear-gradient(180deg,var(--green),rgba(0,229,160,.25))}
|
|
|
+.bars i.o{background:linear-gradient(180deg,var(--gold),rgba(255,194,77,.25))}
|
|
|
+.days{display:flex;gap:8px;margin-top:6px}
|
|
|
+.days span{flex:1;text-align:center;font-size:10px;color:var(--muted)}
|
|
|
+
|
|
|
+table{width:100%;border-collapse:collapse;font-size:13px}
|
|
|
+th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--border)}
|
|
|
+td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
|
|
|
+.mono{font-family:var(--mono);font-size:12px}
|
|
|
+.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;border:1px solid}
|
|
|
+.b-green{color:var(--green-l);border-color:rgba(0,229,160,.3);background:rgba(0,229,160,.1)}
|
|
|
+.b-gold{color:var(--gold);border-color:rgba(255,194,77,.3);background:rgba(255,194,77,.1)}
|
|
|
+.b-gray{color:var(--muted);border-color:rgba(154,163,192,.3);background:rgba(154,163,192,.1)}
|
|
|
+.b-red{color:var(--red);border-color:rgba(255,107,122,.3);background:rgba(255,107,122,.1)}
|
|
|
+.b-purple{color:var(--purple-l);border-color:rgba(124,92,255,.35);background:rgba(124,92,255,.12)}
|
|
|
+.btn{display:inline-flex;align-items:center;gap:5px;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);transition:.2s}
|
|
|
+.btn-primary{background:var(--purple);border-color:var(--purple)}
|
|
|
+.btn-green{border-color:rgba(0,229,160,.4);color:var(--green-l)}
|
|
|
+.btn-red{border-color:rgba(255,107,122,.4);color:var(--red)}
|
|
|
+
|
|
|
+/* 设置行 */
|
|
|
+.set-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.05);padding:13px 0}
|
|
|
+.set-row:last-child{border-bottom:0}
|
|
|
+.set-row b{font-size:13.5px}
|
|
|
+.set-row .desc{font-size:11.5px;color:var(--muted);margin-top:2px}
|
|
|
+.set-input{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-size:13px;font-family:var(--mono);min-width:120px}
|
|
|
+.switch{width:38px;height:20px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;cursor:pointer;flex:none}
|
|
|
+.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:.2s}
|
|
|
+.switch.on{background:rgba(0,229,160,.35)}
|
|
|
+.switch.on::after{left:20px;background:var(--green)}
|
|
|
+
|
|
|
+/* 工具条 */
|
|
|
+.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
|
|
|
+.search{background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 14px;color:var(--text);font-size:13px;min-width:220px;outline:none}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="dev-note">v1.6.1 · 2026-08-09 · 平台管理后台设计稿 · 稳定汇率策略 · 邀请策略可配</div>
|
|
|
+
|
|
|
+<div class="layout">
|
|
|
+ <!-- ══════════ SIDEBAR ══════════ -->
|
|
|
+ <aside class="sidebar">
|
|
|
+ <div class="logo">DoTouch<b>.AI</b><span class="tag-admin">ADMIN</span></div>
|
|
|
+ <div class="side-item active"><span class="dot purple"></span>数据看板</div>
|
|
|
+ <div class="side-item"><span class="dot"></span>用户管理</div>
|
|
|
+ <div class="side-item"><span class="dot"></span>模型管理（236）</div>
|
|
|
+ <div class="side-item"><span class="dot gold"></span>交易流水</div>
|
|
|
+ <div class="side-item"><span class="dot"></span>限额管理</div>
|
|
|
+ <div class="side-item"><span class="dot gold"></span>邀请策略</div>
|
|
|
+ <div class="side-item"><span class="dot"></span>系统设置</div>
|
|
|
+ <div class="side-bottom">
|
|
|
+ <div class="side-user">
|
|
|
+ <div class="avatar">A</div>
|
|
|
+ <div>
|
|
|
+ <div style="font-size:13px">admin@dotouch.ai</div>
|
|
|
+ <div class="role">平台运营</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- ══════════ MAIN ══════════ -->
|
|
|
+ <main class="main">
|
|
|
+ <div class="topbar">
|
|
|
+ <div><h1>数据看板</h1><div class="sub">2026-08-09 · 实时数据（演示）</div></div>
|
|
|
+ <div style="display:flex;gap:8px"><span class="btn">7 天</span><span class="btn btn-primary">30 天</span></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- KPI -->
|
|
|
+ <div class="kpis">
|
|
|
+ <div class="kpi"><div class="label">今日订单</div><div class="val">86</div><div class="sub">↑ 12%</div></div>
|
|
|
+ <div class="kpi"><div class="label">DAU</div><div class="val">1,284</div><div class="sub">↑ 8%</div></div>
|
|
|
+ <div class="kpi"><div class="label">WAU</div><div class="val">4,913</div><div class="sub">↑ 5%</div></div>
|
|
|
+ <div class="kpi"><div class="label">付费率</div><div class="val">18.6%</div><div class="sub gold">↑ 1.2pp</div></div>
|
|
|
+ <div class="kpi"><div class="label">退订率</div><div class="val">2.3%</div><div class="sub red">↓ 0.4pp</div></div>
|
|
|
+ <div class="kpi"><div class="label">30 日留存</div><div class="val">41.2%</div><div class="sub">稳定</div></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图表 -->
|
|
|
+ <div class="charts">
|
|
|
+ <div class="chart">
|
|
|
+ <h3>订单趋势（30 天）</h3>
|
|
|
+ <div class="bars">
|
|
|
+ <i style="height:35%"></i><i style="height:48%"></i><i style="height:42%"></i><i style="height:58%"></i>
|
|
|
+ <i style="height:52%"></i><i style="height:66%"></i><i style="height:60%"></i><i style="height:74%"></i>
|
|
|
+ <i style="height:68%"></i><i style="height:82%"></i><i style="height:76%"></i><i style="height:92%" class="g"></i>
|
|
|
+ </div>
|
|
|
+ <div class="days"><span>08-01</span><span>08-04</span><span>08-07</span><span>08-10</span><span>08-13</span><span>08-16</span><span>08-19</span><span>08-22</span><span>08-25</span><span>08-28</span><span>08-31</span><span>今日</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <h3>邀请奖励发放（30 天）</h3>
|
|
|
+ <div class="bars">
|
|
|
+ <i style="height:22%" class="g"></i><i style="height:34%" class="g"></i><i style="height:28%" class="g"></i><i style="height:45%" class="g"></i>
|
|
|
+ <i style="height:40%" class="g"></i><i style="height:55%" class="g"></i><i style="height:50%" class="g"></i><i style="height:64%" class="g"></i>
|
|
|
+ </div>
|
|
|
+ <div class="days"><span>W1</span><span>W2</span><span>W3</span><span>W4</span></div>
|
|
|
+ <p style="font-size:11.5px;color:var(--muted);margin-top:8px">注册奖励 ¥1/人 · 首充双方 10%（上限 $5）· SystemConfig 可配</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 用户管理 -->
|
|
|
+ <div class="card">
|
|
|
+ <h3>最近注册用户 <span class="link">查看全部 →</span></h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>邮箱</th><th>来源</th><th>注册方式</th><th>余额</th><th>状态</th><th>注册时间</th></tr>
|
|
|
+ <tr><td>nguyen.v@…</td><td>邀请码 ABC123</td><td>本地</td><td>¥72.00</td><td><span class="badge b-green">active</span></td><td>2026-08-09 10:24</td></tr>
|
|
|
+ <tr><td>siti@…</td><td>官网</td><td>Google</td><td>¥0.00</td><td><span class="badge b-gray">pending</span></td><td>2026-08-09 09:47</td></tr>
|
|
|
+ <tr><td>tanawat@…</td><td>邀请码 XYZ789</td><td>Facebook</td><td>¥216.00</td><td><span class="badge b-green">active</span></td><td>2026-08-09 08:15</td></tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 模型管理 -->
|
|
|
+ <div class="card">
|
|
|
+ <h3>模型管理 <span class="link">共 236 个模型 · 已全部上架</span></h3>
|
|
|
+ <div class="toolbar">
|
|
|
+ <input class="search" placeholder="搜索模型（如 deepseek、qwen、glm）…">
|
|
|
+ <span class="btn">全部（236）</span><span class="btn">对话</span><span class="btn">视觉</span><span class="btn">图像</span><span class="btn">语音</span>
|
|
|
+ </div>
|
|
|
+ <table>
|
|
|
+ <tr><th>模型</th><th>供应商</th><th>输入 / 1M</th><th>输出 / 1M</th><th>状态</th><th>操作</th></tr>
|
|
|
+ <tr><td class="mono">deepseek-v4</td><td>DeepSeek</td><td class="mono">$0.14</td><td class="mono">$0.28</td><td><span class="badge b-green">✓ verified</span></td><td><span class="btn">编辑</span></td></tr>
|
|
|
+ <tr><td class="mono">glm-5.2</td><td>Zhipu AI</td><td class="mono">$0.98</td><td class="mono">$3.08</td><td><span class="badge b-green">✓ verified</span></td><td><span class="btn">编辑</span></td></tr>
|
|
|
+ <tr><td class="mono">qwen-max</td><td>Alibaba</td><td class="mono">$1.96</td><td class="mono">$7.84</td><td><span class="badge b-green">✓ verified</span></td><td><span class="btn">编辑</span></td></tr>
|
|
|
+ </table>
|
|
|
+ <p style="font-size:11.5px;color:var(--muted);margin-top:10px">批量工具：按稳定汇率批量定价 ｜ 一键上架全部（含价格未确认模型标记 pending）</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 邀请策略配置 -->
|
|
|
+ <div class="card">
|
|
|
+ <h3>邀请策略配置（SystemConfig 驱动 · 保存即时生效）</h3>
|
|
|
+ <div class="set-row"><div><b>转介绍比例</b><div class="desc">付费转介绍双方各得首充的百分比</div></div><input class="set-input" value="10 %"></div>
|
|
|
+ <div class="set-row"><div><b>单次奖励上限</b><div class="desc">每次转介绍奖励上限（美元）</div></div><input class="set-input" value="$5.00"></div>
|
|
|
+ <div class="set-row"><div><b>注册奖励</b><div class="desc">新用户经邀请注册的奖励（可多次邀请）</div></div><input class="set-input" value="$1.00"></div>
|
|
|
+ <div class="set-row"><div><b>新客首充奖励</b><div class="desc">好友首次增值奖励（仅一次）</div></div><span class="switch on"></span></div>
|
|
|
+ <div style="margin-top:12px;text-align:right"><span class="btn btn-primary">保存配置</span></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 系统设置：货币与汇率（7 币种稳定汇率）-->
|
|
|
+ <div class="card">
|
|
|
+ <h3>系统设置 · 货币与汇率</h3>
|
|
|
+ <div class="set-row"><div><b>美元 → 越南盾</b><div class="desc">稳定汇率 · 因本币收款，低频人工维护（建议月度），不接实时 API 避免定价波动</div></div><input class="set-input" value="25,400"></div>
|
|
|
+ <div class="set-row"><div><b>美元 → 人民币</b><div class="desc">展示汇率 · 稳定策略同上</div></div><input class="set-input" value="7.20"></div>
|
|
|
+ <div class="set-row"><div><b>美元 → 印尼盾</b><div class="desc">印尼（id-ID）展示汇率</div></div><input class="set-input" value="16,200"></div>
|
|
|
+ <div class="set-row"><div><b>美元 → 马币</b><div class="desc">马来西亚（ms-MY）展示汇率</div></div><input class="set-input" value="4.70"></div>
|
|
|
+ <div class="set-row"><div><b>美元 → 泰铢</b><div class="desc">泰国（th-TH）展示汇率</div></div><input class="set-input" value="36.50"></div>
|
|
|
+ <div class="set-row"><div><b>美元 → 港币</b><div class="desc">香港（zh-HK）展示汇率</div></div><input class="set-input" value="7.80"></div>
|
|
|
+ <div class="set-row"><div><b>美元 → 沙特里亚尔</b><div class="desc">沙特（ar-SA）展示汇率</div></div><input class="set-input" value="3.75"></div>
|
|
|
+ <div class="set-row"><div><b>汇率更新提醒</b><div class="desc">低频人工更新（建议每月校准一次）</div></div><span class="switch"></span></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 上游配置 -->
|
|
|
+ <div class="card">
|
|
|
+ <h3>系统设置 · 上游（阿里云百炼）</h3>
|
|
|
+ <div class="set-row"><div><b>DASHSCOPE_API_KEY</b><div class="desc">当前为演示占位，生产配置真实 Key 后启用 /admin/models/sync 自动同步</div></div><span class="badge b-gold">待配置</span></div>
|
|
|
+ <div class="set-row"><div><b>基础地址</b><div class="desc">演示指向内置 mock 上游（零成本可离线）</div></div><span class="mono" style="font-size:12px;color:var(--muted)">http://demo-mock-upstream:19090/v1</span></div>
|
|
|
+ <div class="set-row"><div><b>支付渠道</b><div class="desc">生产接入 MoMo / ZaloPay 真实沙箱（T-02）</div></div><span class="badge b-purple">mock → momo/zalopay</span></div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+</div>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
DoTouch Dev