Etusivu Tutki Apua
Kirjaudu sisään
Evan
/
DoTouchAI
1
0
Haarauta 0
Tiedostot Esitykset 0 Vetopyynnöt 0 Wiki
Puu: 57991a26d6
Haarat Tunnisteet
DoTouchAI
/
docs
/
design
/
user-console-v1.6.1.html

user-console-v1.6.1.html 13 KB
Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>DoTouch.AI 用户控制台设计稿 v1.6.1</title>
    7. 

  7. <style>
    8. 

  8. :root{
    9. 

  9.   --bg:#0B1020; --card:#121831; --card2:#0E1428; --border:rgba(255,255,255,.08);
    10. 

  10.   --purple:#7C5CFF; --purple-l:#9B7BFF; --green:#00E5A0; --green-l:#5FF5C3;
    11. 

  11.   --text:#E8ECF8; --muted:#9AA3C0; --gold:#FFC24D; --red:#FF6B7A;
    12. 

  12.   --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","PingFang SC","Microsoft YaHei",sans-serif;
    13. 

  13.   --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    14. 

  14. }
    15. 

  15. *{margin:0;padding:0;box-sizing:border-box}
    16. 

  16. body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6}
    17. 

  17. a{color:var(--purple-l);text-decoration:none}
    18. 

  18. .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)}
    19. 

  19. 

  20. /* ── 布局：左侧边栏 + 主区 ── */
    21. 

  21. .layout{display:flex;min-height:100vh}
    22. 

  22. .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}
    23. 

  23. .sidebar .logo{font-size:19px;font-weight:800;padding:4px 10px 18px}
    24. 

  24. .sidebar .logo b{color:var(--purple-l)}
    25. 

  25. .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}
    26. 

  26. .side-item:hover{background:rgba(124,92,255,.08);color:var(--text)}
    27. 

  27. .side-item.active{background:rgba(124,92,255,.15);color:var(--purple-l);font-weight:600}
    28. 

  28. .side-item .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
    29. 

  29. .side-item .dot.gold{background:var(--gold)}
    30. 

  30. .side-item .dot.purple{background:var(--purple)}
    31. 

  31. .side-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:14px}
    32. 

  32. .side-user{display:flex;align-items:center;gap:10px;padding:10px 12px}
    33. 

  33. .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}
    34. 

  34. .side-user .email{font-size:11.5px;color:var(--muted);word-break:break-all}
    35. 

  35. .side-user .logout{font-size:11px;color:var(--muted);cursor:pointer}
    36. 

  36. .side-user .logout:hover{color:var(--red)}
    37. 

  37. 

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

  39. 

  40. /* ── 顶栏 ── */
    41. 

  41. .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
    42. 

  42. .topbar h1{font-size:20px;font-weight:800}
    43. 

  43. .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)}
    44. 

  44. 

  45. /* ── 卡片 ── */
    46. 

  46. .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:18px}
    47. 

  47. .card h3{font-size:14.5px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
    48. 

  48. .card h3 .link{font-size:12px;font-weight:400;color:var(--purple-l);cursor:pointer}
    49. 

  49. 

  50. /* ── 概览统计 ── */
    51. 

  51. .overview{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
    52. 

  52. .o-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
    53. 

  53. .o-card .label{font-size:12px;color:var(--muted)}
    54. 

  54. .o-card .val{font-size:24px;font-weight:800;margin-top:4px}
    55. 

  55. .o-card .val small{font-size:13px;font-weight:400;color:var(--muted)}
    56. 

  56. .o-card .sub{font-size:11.5px;color:var(--green-l);margin-top:2px}
    57. 

  57. .o-card .sub.gold{color:var(--gold)}
    58. 

  58. .o-card .sub.red{color:var(--red)}
    59. 

  59. 

  60. /* ── 表格 ── */
    61. 

  61. table{width:100%;border-collapse:collapse;font-size:13px}
    62. 

  62. th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--border)}
    63. 

  63. td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
    64. 

  64. .mono{font-family:var(--mono);font-size:12px}
    65. 

  65. .badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;border:1px solid}
    66. 

  66. .b-green{color:var(--green-l);border-color:rgba(0,229,160,.3);background:rgba(0,229,160,.1)}
    67. 

  67. .b-gold{color:var(--gold);border-color:rgba(255,194,77,.3);background:rgba(255,194,77,.1)}
    68. 

  68. .b-gray{color:var(--muted);border-color:rgba(154,163,192,.3);background:rgba(154,163,192,.1)}
    69. 

  69. .b-red{color:var(--red);border-color:rgba(255,107,122,.3);background:rgba(255,107,122,.1)}
    70. 

  70. .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}
    71. 

  71. .btn-primary{background:var(--purple);border-color:var(--purple)}
    72. 

  72. .btn-green{border-color:rgba(0,229,160,.4);color:var(--green-l)}
    73. 

  73. .btn-red{border-color:rgba(255,107,122,.4);color:var(--red)}
    74. 

  74. 

  75. /* ── 进度条（用量限额）── */
    76. 

  76. .progress{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px}
    77. 

  77. .progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--green))}
    78. 

  78. .progress.warn i{background:linear-gradient(90deg,var(--gold),var(--red))}
    79. 

  79. .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}
    80. 

  80. 

  81. /* ── 充值金额选项 ── */
    82. 

  82. .amounts{display:flex;gap:10px;flex-wrap:wrap}
    83. 

  83. .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}
    84. 

  84. .amount b{display:block;font-size:15px}
    85. 

  85. .amount span{font-size:11px;color:var(--muted)}
    86. 

  86. .amount.active{border-color:var(--purple);background:rgba(124,92,255,.12)}
    87. 

  87. 

  88. /* ── 邀请奖励 ── */
    89. 

  89. .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}
    90. 

  90. .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}
    91. 

  91. .referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
    92. 

  92. </style>
    93. 

  93. </head>
    94. 

  94. <body>
    95. 

  95. 

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

  97. 

  98. <div class="layout">
    99. 

  99.   <!-- ══════════ SIDEBAR ══════════ -->
    100. 

  100.   <aside class="sidebar">
    101. 

  101.     <div class="logo">DoTouch<b>.AI</b></div>
    102. 

  102.     <div class="side-item active"><span class="dot purple"></span>总览</div>
    103. 

  103.     <div class="side-item"><span class="dot"></span>API Keys</div>
    104. 

  104.     <div class="side-item"><span class="dot gold"></span>用量与限额</div>
    105. 

  105.     <div class="side-item"><span class="dot"></span>钱包 · 充值</div>
    106. 

  106.     <div class="side-item"><span class="dot gold"></span>邀请奖励</div>
    107. 

  107.     <div class="side-item"><span class="dot"></span>文档</div>
    108. 

  108.     <div class="side-bottom">
    109. 

  109.       <div class="side-user">
    110. 

  110.         <div class="avatar">D</div>
    111. 

  111.         <div>
    112. 

  112.           <div style="font-size:13px">demo.user@dotouch.ai</div>
    113. 

  113.           <div class="email">用户 · 余额 ¥1,080</div>
    114. 

  114.           <div class="logout">退出登录</div>
    115. 

  115.         </div>
    116. 

  116.       </div>
    117. 

  117.     </div>
    118. 

  118.   </aside>
    119. 

  119. 

  120.   <!-- ══════════ MAIN ══════════ -->
    121. 

  121.   <main class="main">
    122. 

  122.     <div class="topbar">
    123. 

  123.       <h1>总览</h1>
    124. 

  124.       <div class="lang-select">
    125. 

  125.         <select>
    126. 

  126.           <option>Tiếng Việt</option><option>English</option><option selected>简体中文</option>
    127. 

  127.           <option>繁體中文</option><option>Bahasa Indonesia</option><option>Bahasa Melayu</option>
    128. 

  128.           <option>ไทย</option><option>香港繁體</option><option>العربية (RTL)</option>
    129. 

  129.         </select>
    130. 

  130.       </div>
    131. 

  131.     </div>
    132. 

  132. 

  133.     <!-- 概览统计 -->
    134. 

  134.     <div class="overview">
    135. 

  135.       <div class="o-card"><div class="label">可用余额</div><div class="val">¥1,080 <small>≈ $150</small></div><div class="sub">本币稳定汇率计价</div></div>
    136. 

  136.       <div class="o-card"><div class="label">今日请求</div><div class="val">12,483</div><div class="sub">↑ 8.2% 对比昨日</div></div>
    137. 

  137.       <div class="o-card"><div class="label">今日 Token</div><div class="val">3.1M</div><div class="sub">输入 2.0M · 输出 1.1M</div></div>
    138. 

  138.       <div class="o-card"><div class="label">本月增值</div><div class="val">¥1,440</div><div class="sub gold">2 笔交易</div></div>
    139. 

  139.     </div>
    140. 

  140. 

  141.     <!-- 用量预警（限额 80%）-->
    142. 

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

  143. 

  144.     <!-- API Keys -->
    145. 

  145.     <div class="card">
    146. 

  146.       <h3>API Keys <span style="display:flex;gap:8px"><span class="btn btn-primary">+ 创建 API Key</span></span></h3>
    147. 

  147.       <table>
    148. 

  148.         <tr><th>名称</th><th>Key</th><th>创建时间</th><th>最后使用</th><th>状态</th><th>操作</th></tr>
    149. 

  149.         <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>
    150. 

  150.         <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>
    151. 

  151.         <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>
    152. 

  152.       </table>
    153. 

  153.       <p style="font-size:11.5px;color:var(--muted);margin-top:10px">🔒 Key 以 SHA-256 哈希存储。轮换 = 撤销 + 新建。新建后仅显示一次。</p>
    154. 

  154.     </div>
    155. 

  155. 

  156.     <!-- 用量限额 -->
    157. 

  157.     <div class="card">
    158. 

  158.       <h3>用量限额 <span class="link">编辑限额</span></h3>
    159. 

  159.       <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px">
    160. 

  160.         <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>
    161. 

  161.         <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>
    162. 

  162.         <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>
    163. 

  163.       </div>
    164. 

  164.     </div>
    165. 

  165. 

  166.     <!-- 钱包 / 充值 -->
    167. 

  167.     <div class="card">
    168. 

  168.       <h3>充值 <span class="link">查看充值记录</span></h3>
    169. 

  169.       <div class="amounts">
    170. 

  170.         <div class="amount active"><b>$10</b><span>≈ ¥72</span></div>
    171. 

  171.         <div class="amount"><b>$25</b><span>≈ ¥180</span></div>
    172. 

  172.         <div class="amount"><b>$50</b><span>≈ ¥360</span></div>
    173. 

  173.         <div class="amount"><b>$100</b><span>≈ ¥720</span></div>
    174. 

  174.         <div class="amount"><b>自定义</b><span>任意金额</span></div>
    175. 

  175.       </div>
    176. 

  176.       <p style="font-size:11.5px;color:var(--muted);margin-top:10px">支付方式：MoMo · ZaloPay · Stripe · PayPal · Alipay · 银行卡 ｜ 稳定汇率：1 USD ≈ ¥7.2 ≈ 25,400₫</p>
    177. 

  177.     </div>
    178. 

  178. 

  179.     <!-- 邀请奖励 -->
    180. 

  180.     <div class="referral-hero">
    181. 

  181.       <div>
    182. 

  182.         <b style="font-size:15px">邀请奖励</b>
    183. 

  183.         <p style="font-size:12.5px;color:var(--muted);margin-top:4px">你和好友各得首次增值的 10%（单次上限 $5）</p>
    184. 

  184.       </div>
    185. 

  185.       <div class="link-box"><span>https://dotouch.ai/r/ABC123</span><span class="btn btn-green">复制</span></div>
    186. 

  186.     </div>
    187. 

  187.     <div class="referral-stats">
    188. 

  188.       <div class="o-card"><div class="label">邀请人数</div><div class="val">6</div></div>
    189. 

  189.       <div class="o-card"><div class="label">累计奖励</div><div class="val">¥51.8 <small>≈ $7.2</small></div></div>
    190. 

  190.       <div class="o-card"><div class="label">待发放</div><div class="val" style="color:var(--gold)">¥14.4</div></div>
    191. 

  191.     </div>
    192. 

  192.     <div class="card">
    193. 

  193.       <h3>最近交易</h3>
    194. 

  194.       <table>
    195. 

  195.         <tr><th>时间</th><th>类型</th><th>参考号</th><th>金额</th><th>状态</th></tr>
    196. 

  196.         <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>
    197. 

  197.         <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>
    198. 

  198.         <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>
    199. 

  199.       </table>
    200. 

  200.     </div>
    201. 

  201.   </main>
    202. 

  202. </div>
    203. 

  203. 

  204. </body>
    205. 

  205. </html>
    206.