Evan
/
DoTouchAI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
							<!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}
.sidebar .logo b{color:var(--purple-l)}
.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(--purple),var(--green));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.side-user .email{font-size:11.5px;color:var(--muted);word-break:break-all}
.side-user .logout{font-size:11px;color:var(--muted);cursor:pointer}
.side-user .logout:hover{color:var(--red)}

.main{flex:1;padding:28px 32px;max-width:1080px}

/* ── 顶栏 ── */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.topbar h1{font-size:20px;font-weight:800}
.topbar .lang-select select{appearance:none;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:12px;border-radius:999px;padding:6px 26px 6px 12px;cursor:pointer;outline:none;font-family:var(--font)}

/* ── 卡片 ── */
.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}

/* ── 概览统计 ── */
.overview{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.o-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.o-card .label{font-size:12px;color:var(--muted)}
.o-card .val{font-size:24px;font-weight:800;margin-top:4px}
.o-card .val small{font-size:13px;font-weight:400;color:var(--muted)}
.o-card .sub{font-size:11.5px;color:var(--green-l);margin-top:2px}
.o-card .sub.gold{color:var(--gold)}
.o-card .sub.red{color:var(--red)}

/* ── 表格 ── */
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)}
.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)}

/* ── 进度条（用量限额）── */
.progress{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--green))}
.progress.warn i{background:linear-gradient(90deg,var(--gold),var(--red))}
.banner-warn{border:1px solid rgba(255,194,77,.3);background:rgba(255,194,77,.08);color:var(--gold);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:18px}

/* ── 充值金额选项 ── */
.amounts{display:flex;gap:10px;flex-wrap:wrap}
.amount{border:1px solid var(--border);background:var(--card2);border-radius:10px;padding:12px 18px;text-align:center;cursor:pointer;min-width:88px;transition:.2s}
.amount b{display:block;font-size:15px}
.amount span{font-size:11px;color:var(--muted)}
.amount.active{border-color:var(--purple);background:rgba(124,92,255,.12)}

/* ── 邀请奖励 ── */
.referral-hero{border:1px solid rgba(124,92,255,.35);background:linear-gradient(135deg,rgba(124,92,255,.1),rgba(0,229,160,.06));border-radius:14px;padding:20px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.referral-hero .link-box{flex:1;min-width:260px;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-family:var(--mono);font-size:12.5px;color:var(--green-l);display:flex;justify-content:space-between;align-items:center}
.referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
</style>
</head>
<body>

<div class="dev-note">v1.6.1 · 2026-08-09 · 用户控制台设计稿 · 9 语言 · 本币显示</div>

<div class="layout">
  <!-- ══════════ SIDEBAR ══════════ -->
  <aside class="sidebar">
    <div class="logo">DoTouch<b>.AI</b></div>
    <div class="side-item active"><span class="dot purple"></span>总览</div>
    <div class="side-item"><span class="dot"></span>API Keys</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">D</div>
        <div>
          <div style="font-size:13px">demo.user@dotouch.ai</div>
          <div class="email">用户 · 余额 ¥1,080</div>
          <div class="logout">退出登录</div>
        </div>
      </div>
    </div>
  </aside>

  <!-- ══════════ MAIN ══════════ -->
  <main class="main">
    <div class="topbar">
      <h1>总览</h1>
      <div class="lang-select">
        <select>
          <option>Tiếng Việt</option><option>English</option><option selected>简体中文</option>
          <option>繁體中文</option><option>Bahasa Indonesia</option><option>Bahasa Melayu</option>
          <option>ไทย</option><option>香港繁體</option><option>العربية (RTL)</option>
        </select>
      </div>
    </div>

    <!-- 概览统计 -->
    <div class="overview">
      <div class="o-card"><div class="label">可用余额</div><div class="val">¥1,080 <small>≈ $150</small></div><div class="sub">本币稳定汇率计价</div></div>
      <div class="o-card"><div class="label">今日请求</div><div class="val">12,483</div><div class="sub">↑ 8.2% 对比昨日</div></div>
      <div class="o-card"><div class="label">今日 Token</div><div class="val">3.1M</div><div class="sub">输入 2.0M · 输出 1.1M</div></div>
      <div class="o-card"><div class="label">本月增值</div><div class="val">¥1,440</div><div class="sub gold">2 笔交易</div></div>
    </div>

    <!-- 用量预警（限额 80%）-->
    <div class="banner-warn">⚠️ 你已使用每日限额的 80%（今日 12,483 / 15,000 请求），请留意。</div>

    <!-- API Keys -->
    <div class="card">
      <h3>API Keys <span style="display:flex;gap:8px"><span class="btn btn-primary">+ 创建 API Key</span></span></h3>
      <table>
        <tr><th>名称</th><th>Key</th><th>创建时间</th><th>最后使用</th><th>状态</th><th>操作</th></tr>
        <tr><td>生产环境</td><td class="mono">dt_sk_8f2a…9c41</td><td>2026-08-05</td><td>2 分钟前</td><td><span class="badge b-green">active</span></td><td><span class="btn btn-green">轮换</span> <span class="btn btn-red">撤销</span></td></tr>
        <tr><td>测试脚本</td><td class="mono">dt_sk_3b77…e02a</td><td>2026-08-01</td><td>3 小时前</td><td><span class="badge b-green">active</span></td><td><span class="btn btn-green">轮换</span> <span class="btn btn-red">撤销</span></td></tr>
        <tr><td>旧版网关</td><td class="mono">dt_sk_c4d9…11f8</td><td>2026-07-20</td><td>6 天前</td><td><span class="badge b-gray">revoked</span></td><td><span class="btn">重新启用</span></td></tr>
      </table>
      <p style="font-size:11.5px;color:var(--muted);margin-top:10px">🔒 Key 以 SHA-256 哈希存储。轮换 = 撤销 + 新建。新建后仅显示一次。</p>
    </div>

    <!-- 用量限额 -->
    <div class="card">
      <h3>用量限额 <span class="link">编辑限额</span></h3>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px">
        <div><div style="font-size:12px;color:var(--muted)">每日请求（80%）</div><div style="font-size:15px;font-weight:700">12,483 / 15,000</div><div class="progress warn"><i style="width:83%"></i></div></div>
        <div><div style="font-size:12px;color:var(--muted)">每日 Token（52%）</div><div style="font-size:15px;font-weight:700">2.6M / 5M</div><div class="progress"><i style="width:52%"></i></div></div>
        <div><div style="font-size:12px;color:var(--muted)">每日费用（31%）</div><div style="font-size:15px;font-weight:700">¥32 / ¥104</div><div class="progress"><i style="width:31%"></i></div></div>
      </div>
    </div>

    <!-- 钱包 / 充值 -->
    <div class="card">
      <h3>充值 <span class="link">查看充值记录</span></h3>
      <div class="amounts">
        <div class="amount active"><b>$10</b><span>≈ ¥72</span></div>
        <div class="amount"><b>$25</b><span>≈ ¥180</span></div>
        <div class="amount"><b>$50</b><span>≈ ¥360</span></div>
        <div class="amount"><b>$100</b><span>≈ ¥720</span></div>
        <div class="amount"><b>自定义</b><span>任意金额</span></div>
      </div>
      <p style="font-size:11.5px;color:var(--muted);margin-top:10px">支付方式：MoMo · ZaloPay · Stripe · PayPal · Alipay · 银行卡 ｜ 稳定汇率：1 USD ≈ ¥7.2 ≈ 25,400₫</p>
    </div>

    <!-- 邀请奖励 -->
    <div class="referral-hero">
      <div>
        <b style="font-size:15px">邀请奖励</b>
        <p style="font-size:12.5px;color:var(--muted);margin-top:4px">你和好友各得首次增值的 10%（单次上限 $5）</p>
      </div>
      <div class="link-box"><span>https://dotouch.ai/r/ABC123</span><span class="btn btn-green">复制</span></div>
    </div>
    <div class="referral-stats">
      <div class="o-card"><div class="label">邀请人数</div><div class="val">6</div></div>
      <div class="o-card"><div class="label">累计奖励</div><div class="val">¥51.8 <small>≈ $7.2</small></div></div>
      <div class="o-card"><div class="label">待发放</div><div class="val" style="color:var(--gold)">¥14.4</div></div>
    </div>
    <div class="card">
      <h3>最近交易</h3>
      <table>
        <tr><th>时间</th><th>类型</th><th>参考号</th><th>金额</th><th>状态</th></tr>
        <tr><td>2026-08-09 10:24</td><td>充值</td><td class="mono">DEP-88213</td><td>¥72.00</td><td><span class="badge b-green">success</span></td></tr>
        <tr><td>2026-08-09 09:47</td><td>邀请奖励</td><td class="mono">REF-1024</td><td>¥7.20</td><td><span class="badge b-gold">rewarded</span></td></tr>
        <tr><td>2026-08-09 08:15</td><td>用量扣费</td><td class="mono">USG-99102</td><td>¥3.56</td><td><span class="badge b-green">success</span></td></tr>
      </table>
    </div>
  </main>
</div>

</body>
</html>