171 lines
12 KiB
HTML
171 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>账户 · 流·Studio</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/restraint.css">
|
|
<style>
|
|
.acc-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
|
|
.balance-banner {
|
|
background: var(--accent-black);
|
|
color: var(--accent-white);
|
|
padding: 28px 32px;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
border: 1px solid var(--accent-black);
|
|
border-radius: var(--r-md);
|
|
}
|
|
.balance-banner::before, .balance-banner::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
|
|
.balance-banner::before { top: -7px; left: -7px; }
|
|
.balance-banner::after { bottom: -7px; right: -7px; }
|
|
.balance-banner .corner-tr, .balance-banner .corner-bl { position: absolute; color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 13px; }
|
|
.balance-banner .corner-tr { top: -8px; right: -8px; }
|
|
.balance-banner .corner-bl { bottom: -8px; left: -8px; }
|
|
.balance-banner .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .04em; }
|
|
.balance-banner .v { font-size: 42px; font-weight: 700; letter-spacing: -.018em; margin-top: 8px; font-variant-numeric: tabular-nums; }
|
|
.balance-banner .meta { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 8px; font-family: var(--font-mono); letter-spacing: .02em; }
|
|
.balance-banner .actions { display: flex; gap: 8px; margin-top: 18px; }
|
|
.balance-banner .btn { background: var(--accent-white); color: var(--accent-black); border-color: var(--accent-white); }
|
|
.balance-banner .btn:hover { background: var(--background-base); }
|
|
.balance-banner .btn-ghost { background: transparent; color: var(--accent-white); border: 1px solid rgba(255,255,255,.25); }
|
|
.balance-banner .btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--accent-white); }
|
|
|
|
.recharge-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
|
|
.recharge-card { border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 18px; text-align: center; cursor: pointer; background: var(--surface); position: relative; }
|
|
.recharge-card:hover { background: var(--background-lighter); }
|
|
.recharge-card.selected { border-color: var(--heat); background: var(--heat-12); }
|
|
.recharge-card.selected::before, .recharge-card.selected::after { content: ''; position: absolute; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23FA5D19'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; pointer-events: none; }
|
|
.recharge-card.selected::before { top: -7px; left: -7px; }
|
|
.recharge-card.selected::after { bottom: -7px; right: -7px; }
|
|
.recharge-card .amt { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.recharge-card .gift { font-size: 11px; color: var(--black-alpha-48); margin-top: 4px; font-family: var(--font-mono); }
|
|
.recharge-card .gift.bonus { color: var(--accent-forest); font-weight: 600; }
|
|
.recharge-card .ribbon { position: absolute; top: -8px; right: 8px; font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; background: var(--heat); color: var(--accent-white); letter-spacing: .04em; font-weight: 600; border-radius: var(--r-sm); }
|
|
|
|
.pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
|
|
.pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
|
|
.pane h3 + .desc { font-size: 12px; color: var(--black-alpha-48); margin-top: -10px; margin-bottom: 14px; font-family: var(--font-mono); letter-spacing: .02em; }
|
|
|
|
.bills .neg { color: var(--accent-black); font-variant-numeric: tabular-nums; font-weight: 500; }
|
|
.bills .pos { color: var(--accent-forest); font-variant-numeric: tabular-nums; font-weight: 500; }
|
|
.bills .ref { color: var(--black-alpha-48); font-size: 11px; font-family: var(--font-mono); }
|
|
|
|
.usage-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
|
|
.usage-line .v { font-variant-numeric: tabular-nums; color: var(--accent-black); font-weight: 600; }
|
|
.usage-bar { height: 4px; background: var(--background-lighter); border-radius: 2px; margin: 6px 0 12px; overflow: hidden; }
|
|
.usage-bar > span { display: block; height: 100%; }
|
|
|
|
.rule-list { font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.7; }
|
|
.rule-list strong { color: var(--accent-black); font-weight: 600; }
|
|
.rule-list .mono { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 1px 5px; font-size: 11.5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>账户</h1>
|
|
<div class="sub"><span class="mono">// 余额 · 充值 · 消费明细</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="acc-grid">
|
|
<div>
|
|
<div class="balance-banner">
|
|
<span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
|
|
<div class="lbl">[ CURRENT BALANCE ]</div>
|
|
<div class="v">¥327.40</div>
|
|
<div class="meta">// 本月已消费 ¥162.60 · 可使用约 32 个项目</div>
|
|
<div class="actions">
|
|
<button class="btn btn-lg" onclick="Shell.toast('充值', '/billing/topup')">充值</button>
|
|
<button class="btn btn-ghost btn-lg" onclick="Shell.toast('提取明细', '/billing/export')">提取消费明细</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pane">
|
|
<h3>快速充值</h3>
|
|
<div class="desc">// 充值后立刻到账,可开发票</div>
|
|
<div class="recharge-row">
|
|
<div class="recharge-card" onclick="Shell.toast('选择 ¥100')"><div class="amt">¥100</div><div class="gift">无赠送</div></div>
|
|
<div class="recharge-card selected"><span class="ribbon">推荐</span><div class="amt">¥500</div><div class="gift bonus">+ ¥30 赠送</div></div>
|
|
<div class="recharge-card" onclick="Shell.toast('选择 ¥1000')"><div class="amt">¥1000</div><div class="gift bonus">+ ¥80 赠送</div></div>
|
|
<div class="recharge-card" onclick="Shell.toast('选择 ¥3000')"><div class="amt">¥3000</div><div class="gift bonus">+ ¥300 赠送</div></div>
|
|
</div>
|
|
<div style="display:flex; gap:10px; margin-top:14px;">
|
|
<input class="input" placeholder="自定义金额(最低 ¥50)" style="flex:1;">
|
|
<button class="btn btn-primary" onclick="Shell.toast('微信支付', '¥500 · WechatPay')">微信支付 ¥500</button>
|
|
<button class="btn" onclick="Shell.toast('支付宝', '¥500 · Alipay')">支付宝</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; align-items:baseline; margin-bottom:12px;">
|
|
<h2 style="font-size:15px; font-weight:600;">消费明细</h2>
|
|
<span class="spacer"></span>
|
|
<div class="hstack">
|
|
<button class="chip" style="height:28px; font-size:12px;">近 30 天</button>
|
|
<button class="chip" style="height:28px; font-size:12px;">导出</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="t bills">
|
|
<thead>
|
|
<tr><th>时间</th><th>项目 / 类型</th><th>详情</th><th style="text-align:right;">金额</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.09 14:08</td><td>补水面膜 · v3</td><td class="muted">故事板 image-2 · 1 次</td><td style="text-align:right;" class="neg">-¥0.45</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.09 14:02</td><td>补水面膜 · v3</td><td class="muted">脚本 LLM · 2.4k tokens</td><td style="text-align:right;" class="neg">-¥0.04</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.09 13:38</td><td>补水面膜 · v3</td><td class="muted">基础资产 · 5 张图</td><td style="text-align:right;" class="neg">-¥1.05</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.08 18:21</td><td>透真防晒 · 通勤对比</td><td class="muted">视频片段 · 6 镜</td><td style="text-align:right;" class="neg">-¥1.20</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.08 11:02</td><td>充值</td><td class="muted">微信支付 · <span class="ref">TX2024050811021Z</span></td><td style="text-align:right;" class="pos">+¥500.00</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.07 20:14</td><td>蓝牙耳机 · 开箱</td><td class="muted">视频片段 · 5 镜(1 镜重跑不扣)</td><td style="text-align:right;" class="neg">-¥0.94</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.07 15:48</td><td>咖啡冻干 · 早八</td><td class="muted">故事板生成失败 · <span style="color:var(--black-alpha-48);">不扣费</span></td><td style="text-align:right;" class="muted-2">¥0.00</td></tr>
|
|
<tr><td class="muted-2 mono" style="font-size:11.5px;">05.06 10:30</td><td>瑜伽裤 · 通勤穿搭</td><td class="muted">项目导出 · 1 次</td><td style="text-align:right;" class="neg">-¥3.20</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="pane">
|
|
<h3>本月消费分布</h3>
|
|
<div class="usage-line"><span>视频片段(Seedance)</span><span class="v">¥98.40</span></div>
|
|
<div class="usage-bar"><span style="width:60%; background:var(--heat);"></span></div>
|
|
|
|
<div class="usage-line"><span>故事板(image-2)</span><span class="v">¥36.00</span></div>
|
|
<div class="usage-bar"><span style="width:22%; background:var(--accent-forest);"></span></div>
|
|
|
|
<div class="usage-line"><span>基础资产</span><span class="v">¥21.00</span></div>
|
|
<div class="usage-bar"><span style="width:13%; background:var(--black-alpha-56);"></span></div>
|
|
|
|
<div class="usage-line"><span>脚本 LLM</span><span class="v">¥7.20</span></div>
|
|
<div class="usage-bar"><span style="width:5%; background:var(--black-alpha-48);"></span></div>
|
|
|
|
<div class="divider"></div>
|
|
<div class="usage-line" style="font-weight:600;"><span>合计</span><span class="v">¥162.60</span></div>
|
|
</div>
|
|
|
|
<div class="pane">
|
|
<h3>扣费规则</h3>
|
|
<div class="rule-list">
|
|
<strong>① 失败不扣</strong>:模型超时、内容审核拦截、生成异常一律不扣费。<br>
|
|
<strong>② 用户重跑不扣首次</strong>:第一次重跑保留原扣费,第二次起按次结算。<br>
|
|
<strong>③ 仅在你点击 <span class="mono">[ 确认通过 ]</span> 时入账</strong>。<br>
|
|
<strong>④ 导出不再扣费</strong>,所有 token 已在过程中结算。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pane">
|
|
<h3>开发票</h3>
|
|
<div style="font-size:12.5px; color:var(--black-alpha-56); margin-bottom:10px;">本月可开发票额度:<strong style="color:var(--accent-black);">¥162.60</strong></div>
|
|
<button class="btn" style="width:100%;" onclick="Shell.toast('申请发票', '/billing/invoice')">申请发票</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="assets/shell.js"></script>
|
|
<script>Shell.render({ active: 'account', crumbs: [{ label: '工作台', href: 'index.html' }, { label: '账户' }] });</script>
|
|
</body>
|
|
</html>
|