Skip to content
8 changes: 4 additions & 4 deletions ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ python3 -m http.server 8000 --directory ui
1. 仪表盘 Dashboard — 点数余额、本月用量、共享收益、最近交易
2. 模型市场 Marketplace — 模型浏览、搜索、厂商筛选、排序(按价格/上下文)
3. 共享管理 Sharing — 默认只显示统计 + 我的共享列表(key 脱敏展示,可暂停/恢复/重新上架/彻底删除);点击"+ 添加 / 上架新 key"展开上架表单(须填 API Key,平台加密托管;分享者只填声明额度,单价由平台按模型定价自动计算并展示参考价),提交成功或取消后自动收起
4. 钱包 Wallet — 点数余额、充值/提现占位入口、收支明细(MRT 风格表格:列排序/列筛选/分页/每页行数切换)
5. 交易记录 Transactions — 消费/收益/充值/提现,Tab 筛选 + MRT 风格表格(列排序/列筛选/分页,与 Tab 叠加生效)
6. 设置 Settings — 账户、API Key 管理(可生成)、通知、偏好
7. 管理视图 Admin(管理员角色专属)— Key 池管理(添加/撤销)、成员管理(配额调整)、用量报表(按模型/成员)、组织设置(含"关闭外部注册"企业部署开关)
4. 钱包 Wallet — 点数余额、充值/提现占位入口;收支明细已去重,统一到【交易记录】(页内提供跳转提示)
5. 交易记录 Transactions — 消费/收益/充值/提现唯一明细入口,Tab 筛选 + MRT 风格表格(列排序/列筛选/分页,与 Tab 叠加生效)
6. 设置 Settings — 账户、API Key 管理(完整增删改查:生成带名字、改名、删除需确认「删除后该 key 立即失效」、按名字搜索、一键复制完整 key——列表脱敏展示 atk_live_****xxxx,复制为完整值;file:// 下 clipboard API 受限时降级为选中+Ctrl/Cmd+C)、通知、偏好
7. 管理视图 Admin(管理员角色专属)— Key 池管理(添加/撤销)、成员管理(改部门:下拉可选部门或"未分配";任意金额充值,正整数校验;新注册成员默认未分配部门)、用量报表(按模型/成员)、组织管理(部门列表 + 部门增删改查 + 每月点数分配,含部门汇总统计,未分配成员不计入任何部门;保留组织设置卡片,含"关闭外部注册"企业部署开关)

## 文件结构

Expand Down
5 changes: 4 additions & 1 deletion ui/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ body {
}
.btn-danger:hover { background: rgba(229, 102, 106, 0.12); border-color: var(--danger); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.input, select.input {
width: 100%;
Expand Down Expand Up @@ -371,7 +372,9 @@ select.input option { background: var(--bg-card); }

.wallet-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.balance-big { font-size: 42px; font-weight: 800; color: var(--accent-text); line-height: 1.2; }
.wallet-actions { display: flex; gap: 10px; }
.wallet-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wallet-note { font-size: 12px; }
.wallet-hint { color: var(--text-mute); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.toast {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
Expand Down
40 changes: 31 additions & 9 deletions ui/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ <h3>我的共享列表 <span class="en">My listings</span></h3>
<section class="view hidden" id="view-wallet">
<header class="page-head">
<h2>钱包 <span class="en">Wallet</span></h2>
<p>点数余额 · 充值 / 提现 · 收支明细</p>
<p>点数余额 · 充值 / 提现(收支明细见【交易记录】)</p>
</header>
<div class="card wallet-hero">
<div>
Expand All @@ -176,21 +176,23 @@ <h3>点数余额 <span class="en">Points balance</span></h3>
<p>1 USD = 1000 点 <span class="en">(1 USD = 1,000 points)</span></p>
</div>
<div class="wallet-actions">
<button class="btn btn-primary" id="topup-btn">充值 <span class="en">Top up</span></button>
<button class="btn btn-ghost" id="withdraw-btn">提现 <span class="en">Withdraw</span></button>
<button class="btn btn-primary" id="topup-btn" disabled>充值 <span class="en">Top up</span></button>
<button class="btn btn-ghost" id="withdraw-btn" disabled>提现 <span class="en">Withdraw</span></button>
<span class="muted wallet-note">充值 / 提现暂不支持(即将上线)</span>
</div>
</div>
<div class="card">
<h3>收支明细 <span class="en">Ledger</span></h3>
<div class="table-wrap compact" id="wallet-table"></div>
<p class="wallet-hint">收支明细已统一到
<button class="btn btn-ghost" id="wallet-goto-tx">交易记录</button>
——涵盖消费(用别人的 key)、收益(别人用我的 key)、充值、提现</p>
</div>
</section>

<!-- 交易记录 Transactions -->
<section class="view hidden" id="view-transactions">
<header class="page-head">
<h2>交易记录 <span class="en">Transactions</span></h2>
<p>消费记录(用谁的 key)与收益记录(谁用了我的 key)</p>
<p>涵盖消费(用别人的 key)、收益(别人用我的 key)、充值、提现</p>
</header>
<div class="tabs" id="tx-tabs">
<button class="tab active" data-tx-tab="all">全部</button>
Expand Down Expand Up @@ -220,7 +222,13 @@ <h3>账户 <span class="en">Account</span></h3>
<div class="card">
<h3>API Key <span class="en">API keys</span></h3>
<p class="muted">用于本地工具 / 代码接入平台的密钥。</p>
<div class="mini-list" id="api-keys"></div>
<input id="ak-search" class="input" placeholder="搜索 key 名字…" style="margin-bottom:10px">
<div class="table-wrap compact">
<table class="table">
<thead><tr><th>名字</th><th>Key</th><th>创建时间</th><th>最近使用</th><th>状态</th><th></th></tr></thead>
<tbody id="api-keys"></tbody>
</table>
</div>
<button class="btn btn-ghost" id="new-api-key-btn">生成新 Key <span class="en">(Generate)</span></button>
</div>
<div class="card">
Expand Down Expand Up @@ -249,13 +257,13 @@ <h3>偏好 <span class="en">Preferences</span></h3>
<section class="view hidden" id="view-admin">
<header class="page-head">
<h2>管理视图 <span class="en">Admin</span></h2>
<p>管理员角色专属:Key 池 · 成员/员工点数 · 用量报表 · 组织设置(普通用户无此视图)</p>
<p>管理员角色专属:Key 池 · 成员/员工点数 · 用量报表 · 组织管理(普通用户无此视图)</p>
</header>
<div class="tabs" id="admin-tabs">
<button class="tab active" data-admin-tab="keys">Key 池</button>
<button class="tab" data-admin-tab="employees">成员管理</button>
<button class="tab" data-admin-tab="usage">用量报表</button>
<button class="tab" data-admin-tab="org">组织设置</button>
<button class="tab" data-admin-tab="org">组织管理</button>
</div>

<div class="admin-pane" data-admin-pane="keys">
Expand Down Expand Up @@ -299,6 +307,20 @@ <h3>按成员用量 <span class="en">By member</span></h3>
</div>

<div class="admin-pane hidden" data-admin-pane="org">
<div class="stat-grid" id="dept-stats"></div>
<div class="toolbar">
<input id="od-search" class="input" placeholder="搜索部门…">
<button class="btn btn-primary" id="add-dept-btn">添加部门 <span class="en">(+ Add dept)</span></button>
</div>
<div class="card">
<h3>部门列表 <span class="en">Departments</span></h3>
<div class="table-wrap compact">
<table class="table">
<thead><tr><th>部门</th><th>成员数</th><th>月分配(点数)</th><th>已用</th><th>剩余</th><th>状态</th><th></th></tr></thead>
<tbody id="dept-body"></tbody>
</table>
</div>
</div>
<div class="card">
<h3>组织设置 <span class="en">Organization settings</span></h3>
<div class="form">
Expand Down
Loading
Loading