183 lines
8.4 KiB
HTML
183 lines
8.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>{{ app_name }} - 升级</title>
|
||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg?v=20260428h" />
|
||
<link rel="stylesheet" href="/static/style.css?v=20260428zd" />
|
||
</head>
|
||
<body>
|
||
<div class="product-shell">
|
||
<aside class="side-nav" aria-label="主导航">
|
||
<div class="side-brand">
|
||
<div class="brand-lockup">
|
||
<img class="logo-mark" src="/static/favicon.svg?v=20260428h" alt="" />
|
||
<h1>{{ app_name }}</h1>
|
||
</div>
|
||
</div>
|
||
<nav class="nav-group">
|
||
<div class="nav-label">工作台</div>
|
||
<a class="nav-item" href="/">内容生产</a>
|
||
<a class="nav-item" href="/settings">账号与模型</a>
|
||
<a class="nav-item" href="/billing">账单中心</a>
|
||
<a class="nav-item is-active" href="/upgrade">升级</a>
|
||
<a class="nav-item" href="/profile">个人中心</a>
|
||
<a class="nav-item" href="/guide">新手引导</a>
|
||
</nav>
|
||
<div class="side-footer">免费额度 · 平台模型</div>
|
||
</aside>
|
||
|
||
<div class="workspace">
|
||
<header class="topbar topbar-compact upgrade-topbar">
|
||
<div class="topbar-spacer" aria-hidden="true"></div>
|
||
<div class="topbar-center">
|
||
<span id="vipModeHint" class="mode-badge global-mode-hint">当前模型模式：自由模型</span>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<a class="icon-btn" href="/" aria-label="返回工作台" title="返回工作台">⌂</a>
|
||
<a class="icon-btn" href="/settings" aria-label="账号与模型设置" title="账号与模型设置">⚙</a>
|
||
<a class="icon-btn" href="/profile" aria-label="个人中心" title="个人中心">☺</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="layout upgrade-layout">
|
||
<section class="panel upgrade-panel">
|
||
<div class="panel-scroll upgrade-scroll">
|
||
<section class="upgrade-hero">
|
||
<div>
|
||
<p class="guide-eyebrow">VIP 平台模型</p>
|
||
<h2>Token Plan 订阅</h2>
|
||
<p class="muted">新用户免费 {{ trial_tokens }} Credits。按支付成功时间起算月周期，到期席位与加油包额度清零。</p>
|
||
</div>
|
||
<div class="upgrade-balance-card">
|
||
<span>当前可用</span>
|
||
<strong id="upgradeTokenBalanceHero">0</strong>
|
||
<small>Credits</small>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="upgrade-grid">
|
||
<div class="upgrade-plans-stack">
|
||
<div class="upgrade-plan-grid">
|
||
<article class="upgrade-plan is-highlighted">
|
||
<div class="plan-head">
|
||
<span>推荐</span>
|
||
<h3>标准坐席</h3>
|
||
</div>
|
||
<p>适合轻度使用 AI 辅助写作与生图，采用 Credits 统一抵扣。</p>
|
||
<div class="plan-price">19.9/月</div>
|
||
<ul>
|
||
<li>{{ seat_quota }} Credits /月（优先抵扣）</li>
|
||
<li>席位额度用尽后，从共享加油包继续抵扣</li>
|
||
</ul>
|
||
<div class="upgrade-toggle-row">
|
||
<label>平台模型</label>
|
||
<select id="vipEnabledSelect" class="ui-select">
|
||
<option value="1">开启</option>
|
||
<option value="0">关闭</option>
|
||
</select>
|
||
</div>
|
||
<button id="saveVipBtn" class="secondary" type="button">保存升级设置</button>
|
||
</article>
|
||
|
||
<article class="upgrade-plan">
|
||
<div class="plan-head">
|
||
<span>自定义</span>
|
||
<h3>自备模型</h3>
|
||
</div>
|
||
<p>继续使用你在设置页配置的文本模型和文生图模型。</p>
|
||
<div class="plan-price">自有额度</div>
|
||
<ul>
|
||
<li>适合已有 API Key 的团队</li>
|
||
<li>模型、Base URL 可自行维护</li>
|
||
<li>平台 Credits 不参与扣减</li>
|
||
</ul>
|
||
<a class="subtle-link" href="/settings#model-settings">配置自定义模型</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="upgrade-purchase-card">
|
||
<div class="purchase-head">
|
||
<h3>标准坐席</h3>
|
||
<p class="muted small">席位：1 席</p>
|
||
<p id="purchaseCycleText" class="muted small">时长：按支付成功时间起算 30 天（到期清零）</p>
|
||
</div>
|
||
<div class="purchase-section purchase-meta-grid">
|
||
<div class="purchase-row">
|
||
<span>套餐单价</span>
|
||
<strong>¥{{ package_amount }} / {{ package_credits }} Credits</strong>
|
||
</div>
|
||
<div class="purchase-row">
|
||
<span>座位数量</span>
|
||
<strong>1</strong>
|
||
</div>
|
||
</div>
|
||
<div class="purchase-section purchase-summary">
|
||
<div class="purchase-summary-row"><span>合计 Credits</span><strong id="purchaseCredits">0</strong></div>
|
||
<div class="purchase-summary-row"><span>应付金额</span><strong id="purchaseAmount">¥0.00</strong></div>
|
||
</div>
|
||
<div class="purchase-section purchase-qty">
|
||
<p class="muted tiny">支付方式</p>
|
||
<div class="pay-channel-group" role="radiogroup" aria-label="支付方式">
|
||
<button class="pay-channel-option is-active" type="button" data-channel="wechat" aria-pressed="true">微信支付</button>
|
||
<button class="pay-channel-option" type="button" data-channel="alipay" aria-pressed="false">支付宝</button>
|
||
</div>
|
||
</div>
|
||
<input
|
||
id="vipRechargeTokens"
|
||
type="number"
|
||
min="1"
|
||
step="1"
|
||
value="{{ package_credits }}"
|
||
data-package-credits="{{ package_credits }}"
|
||
hidden
|
||
/>
|
||
<input
|
||
id="vipRechargeAmount"
|
||
type="number"
|
||
min="0.01"
|
||
step="0.01"
|
||
value="{{ package_amount }}"
|
||
data-package-amount="{{ package_amount }}"
|
||
hidden
|
||
/>
|
||
<div class="purchase-section purchase-action">
|
||
<button id="vipRechargeBtn" class="primary" type="button">订阅</button>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="settings-card upgrade-wallet">
|
||
<div class="guide-section-head">
|
||
<h3>额度与充值</h3>
|
||
</div>
|
||
<div class="upgrade-stats">
|
||
<div>
|
||
<span>席位剩余额度</span>
|
||
<strong id="vipSeatRemaining">0</strong>
|
||
</div>
|
||
<div>
|
||
<span>共享加油包</span>
|
||
<strong id="vipTokenBalance">0</strong>
|
||
</div>
|
||
<div>
|
||
<span>总可用 Credits</span>
|
||
<strong id="upgradeTokenBalance">0</strong>
|
||
</div>
|
||
</div>
|
||
<p id="vipCycleHint" class="muted small">当前未开始月周期。</p>
|
||
<p id="status" class="status"></p>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
<script src="/static/ui-dialog.js?v=20260428a"></script>
|
||
<script src="/static/mode-hint.js?v=20260428a"></script>
|
||
<script src="/static/upgrade.js?v=20260428ag"></script>
|
||
</body>
|
||
</html>
|