Skip to content

feat(ui): full-width API Key table on settings page #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
argszero merged 1 commit into from
Aug 17, 2026
Merged

feat(ui): full-width API Key table on settings page #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ python3 -m http.server 8000 --directory ui
3. 共享管理 Sharing — 默认只显示统计 + 我的共享列表（key 脱敏展示，可暂停/恢复/重新上架/彻底删除；列表展示「厂商 · Plan / 模型 · 可用时间段」，如「智谱 · GLM Coding Plan / glm-5.2 · 周一~周五 09:00-18:00」，未设置显示「全天」）；点击"＋ 添加 / 上架新 key"展开上架表单（**三级联动：厂商 → Plan → 模型**——内置国内已知 Plan 清单（阿里云百炼 / 智谱 / 火山方舟 / Kimi / MiniMax / DeepSeek，每家含「API（按量）」= 按量计价的 key），选 Plan 后显示 key 前缀 / 专属端点提示；**可用时间段为结构化字段**：星期多选 chips + 起止时间（留空 = 全天不限），备注仅纯文本；须填 API Key，平台加密托管；分享者只填声明额度，单价由平台按模型定价自动计算并展示参考价），提交成功或取消后自动收起
4. 钱包 Wallet — 点数余额、**本月点数变化（近 1 月按类型汇总收支 + 净变化，与仪表盘一致）**、**充值入口（US-4：模拟流程——输入点数 → 余额增加 → topup 交易记录；文案注明"演示，真实支付后续接入"；提现仍 disabled）**、**申请加额（US-20：企业成员余额低时申请更多点数 → 提交后等待管理员审批，默认需审批）**；收支明细已去重，统一到【交易记录】（页内提供跳转提示）
5. 交易记录 Transactions — 消费/收益/充值/提现/赠送（gift）唯一明细入口，Tab 筛选 + MRT 风格表格（列排序/列筛选/分页，与 Tab 叠加生效）
6. 设置 Settings — 账户、API Key 管理（完整增删改查：生成带名字、改名、删除需确认「删除后该 key 立即失效」、按名字搜索、一键复制完整 key——列表脱敏展示 atk_live_****xxxx，复制为完整值；file:// 下 clipboard API 受限时降级为选中+Ctrl/Cmd+C）、通知、偏好
6. 设置 Settings — 账户、**API Key 管理（独占整行全宽，表格字段不挤压；完整增删改查：生成带名字、改名、删除需确认「删除后该 key 立即失效」、按名字搜索、一键复制完整 key——列表脱敏展示 atk_live_****xxxx，复制为完整值；file:// 下 clipboard API 受限时降级为选中+Ctrl/Cmd+C）**、通知、偏好
7. 管理视图 Admin（管理员 / 运营者角色专属）— 成员管理（改部门：下拉可选部门或"未分配"；任意金额充值，正整数校验；新注册成员默认未分配部门；**加额申请审批（US-20：待审批列表 → 批准=成员余额+申请点数 / 驳回；申请默认需审批）**）、用量报表（按模型/成员）、组织管理（部门列表 + 部门增删改查 + 每月点数分配，含部门汇总统计，未分配成员不计入任何部门；**添加/编辑部门用表单弹层 modal（名称+月分配，替代 window.prompt）**，删除有确认；**无「组织设置」表单**——组织名称 / 默认成员配额 / 开关均移除，"关闭外部注册"为部署配置项不在 UI 中）、平台运营（运营者 = 宿主本人，职责最小化：① 运行概览——运行状态 / 用户数 / 共享 key 数 / 交易量 / 点数流入流出；② 用户充值——按用户名 / 邮箱搜索定位，输入点数金额（可为小数）确认后余额增加永久有效点数并产生一条交易记录）。**无独立 Key 池管理**——管理员与普通用户一样通过共享管理页「上架 key」配置上游 key（共享列表即 key 池视图，可暂停/删除）

## 文件结构
Expand Down
10 changes: 10 additions & 0 deletions ui/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,15 @@ select.input option { background: var(--bg-card); }
}
.settings-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* API Key 独占整行全宽（rant 11:01:02：不与账户/通知/偏好挤在窄列） */
.api-key-card {
width: 100%;
margin-top: 16px;
}
.api-key-card .table-wrap { overflow-x: auto; }
.api-key-card .table th,
.api-key-card .table td { white-space: nowrap; }

.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
Expand Down Expand Up @@ -459,4 +468,5 @@ select.input option { background: var(--bg-card); }
@media (max-width: 560px) {
.stat-grid { grid-template-columns: 1fr 1fr; }
.card-grid { grid-template-columns: 1fr; }
.api-key-card { margin-top: 12px; }
}
24 changes: 12 additions & 12 deletions ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,18 @@ <h2>交易记录 <span class="en">Transactions</span></h2>
<h2>设置 <span class="en">Settings</span></h2>
<p>账户 · API Key · 通知 · 偏好（原型展示）</p>
</header>
<div class="card api-key-card">
<h3>API Key <span class="en">API keys</span></h3>
<p class="muted">用于本地工具 / 代码接入平台的密钥。独占整行，避免表格字段挤压。</p>
<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-grid settings-grid">
<div class="card">
<h3>账户 <span class="en">Account</span></h3>
Expand All @@ -251,18 +263,6 @@ <h3>账户 <span class="en">Account</span></h3>
<button class="btn btn-primary">保存 <span class="en">(Save)</span></button>
</div>
</div>
<div class="card">
<h3>API Key <span class="en">API keys</span></h3>
<p class="muted">用于本地工具 / 代码接入平台的密钥。</p>
<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">
<h3>通知 <span class="en">Notifications</span></h3>
<div class="form">
Expand Down
Loading