diff --git a/docs/user-stories.md b/docs/user-stories.md index 9c07c62..e088c5d 100644 --- a/docs/user-stories.md +++ b/docs/user-stories.md @@ -10,7 +10,8 @@ > > **v1.16(2026-08-17)· B 交互(UE)优化(rant `2026-08-17T15:50:05`).** **toast 分级**(成功 success / 错误 error / 信息 info,39 个调用点全部分级着色);**按钮 loading 态**(充值 / 加额 / 部门确认 / 上架提交 → 转圈 + 禁用,模拟反馈后恢复);**API Key 复制反馈**(复制后按钮短暂变「已复制 ✓」,1.2s 恢复,降级路径「请 Ctrl+C」);**键盘可达**(充值金额 / 加额金额·原因 / 部门名称·配额 Enter 提交;topup/raise/dept 行内卡片 Esc 关闭;打开时自动聚焦)。**rant 15:50:05 全部验收项满足,UI 美化与 UE 优化波收官(PR #38/#39/#40,docs v1.14→v1.16)。** > **v1.17(2026-08-17)· 多角度 UI/UE 深化(rant `2026-08-17T16:57:17`,分批 PR).** **A. 清除原生弹窗 ✓(PR #41)**:约 5 处原生确认/输入弹窗(key 删除、共享下架、部门删除、API Key 新建/改名、运营者/成员充值)全部改为**行内二次确认**(按钮变「确认删除?」红色态,3 秒无操作或 Esc 还原,再次点击执行)与**行内编辑**(行内展开输入框,Enter 确认 / Esc 取消);抽象可复用 `confirmInline` / `inlineForm` 组件全站统一;`grep ui/` 无原生弹窗残留。**B. 相对时间显示 ✓(PR #42)**:新增 `timeAgo` 格式化(`刚刚 / N 分钟前 / N 小时前 / 昨天 / MM-DD`,hover `title` 显示完整绝对时间),交易列表、加额申请列表、共享列表(新增「上架时间」列)与 API Key 最近使用时间统一使用。**C. 数字列对齐 ✓(PR #43)**:价格 / 点数 / 已用 / 额度 / 余额等**数字列统一右对齐 + 等宽字体**(`--mono` + `tabular-nums`,新增 `.table .num` 类,覆盖市场输入/输出价与上下文、交易 Token 用量/点数、共享已用/额度·单价·收益、成员配额/剩余、部门成员数·月分配·已用·剩余、运营者余额、加额申请点数),时间列 / 状态列保持左对齐;金额统一 `D.fmt`(整数千分位、小数 2 位)全覆盖检查无遗漏。其余 D–G(`:focus-visible` 与快捷键、行内校验错误、视图过渡、细节一致性)分批落地。**D. 键盘可达性 / 无障碍 ✓(PR #44)**:全局 `:focus-visible` 焦点环(accent 色 outline,Tab 导航清晰可见;输入类控件沿用边框高亮不叠加);**全局快捷键**:`/` 聚焦市场搜索框(输入框内不触发)、数字 **1-7** 切换侧边栏视图(仪表盘/市场/共享/钱包/交易/管理/设置,带 title 与右侧键位角标提示,Cmd/Ctrl+数字 不劫持)、Esc 关闭行内新建 Key;侧边栏导航按钮补 `title`(快捷键提示)。**E. 表单行内校验错误 ✓(PR #45)**:新增 `setFieldError(input, msg)` / `clearFieldError(input)`(输入框**红边框** + 字段下方**红字小号行内文案**,输入修正自动清除,打开表单时重置);覆盖**充值金额**(自定义金额非法)、**申请加额**(点数/原因)、**部门表单**(名称/配额/重名)、**共享上架表单**(API Key/厂商·Plan·模型·额度),提交失败不再仅依赖 toast,聚焦首个错误字段。**F. 视图切换过渡 ✓(PR #46)**:页面切换加轻量动画(`.view:not(.hidden)` **fade + 轻微上移 6px,150ms** `viewIn`,替代生硬切换);数据表格更新无闪烁(`.table tbody` **fade-in** `tbodyIn`,新增 `pulseTbody` 在静态 tbody 重渲染后重启动画,动态表格整表重建自动生效)。**G. 细节一致性 ✓(PR #47)**:一致性审计确认——**所有数字/金额统一 `D.fmt`(千分位/2 位小数)**(侧边栏余额、统计卡、表格、钱包点数格式一致)、已用/额度展示统一;表格操作按钮统一小号样式(`padding:4px 10px;font-size:12px`);**行内编辑校验统一走行内错误**(inlineForm 校验失败由 toast 改为 `setFieldError` 红边框+行内文案,API Key 改名/运营者充值/成员充值 3 处对齐 item E);子文本字号统一(11px→12px);上架 toast 单价措辞统一「点/1M(自动)」;移除 3 处「(未生效)」残留文案。**rant 16:57:17 全部验收项满足(A–G 七项,PR #41–#47),UI/UE 深化波收官。** -> **v1.19(2026-08-17)· UI/UE 第四轮多角度深化(rant `2026-08-17T20:39:30`,分批 PR,进行中).** **A. URL hash 路由 ✓(PR #55)**:视图与地址栏 hash 联动——`#/marketplace`、`#/wallet` 等视图 hash 可**直接收藏 / 分享 / 刷新恢复**;规则:① 视图切换(导航 / 快捷键 1-7 / 登录恢复)同步 `history.pushState` 更新 hash(已相同不重复入栈,不触发 hashchange 回环);② **前进 / 后退**(hashchange)视图跟随切换;③ **非法 hash** 回退仪表盘视图但**不重写 URL**(避免 pushState 污染历史、后退需两次);④ 空 hash 不动作(无 hash 时保持默认行为);⑤ 刷新后登录自动恢复 hash 对应视图(游客浏览 / 未登录态无冲突);⑥ 游客受限视图 hash 被拦截时保持原视图、不入栈。**B. 交易记录汇总条 ✓(PR #56)**:交易页卡片顶部加**紧凑汇总条**(`.tx-summary`,三列 inline:总收入 / 总支出 / 净变化,+绿 −红,零值中性显示 `0`);**随 tab 过滤联动**——「全部 / 消费 / 收益」tab 切换即时重算,且**与表格列筛选一致**(抽公共 `filterRows(rows, columns, filters)` 供 `buildDataTable` 与汇总共用,汇总反映与表格可见行相同的过滤集,不受分页影响);窄屏自动换行收窄。**C. 原生 select 美化 ✓(待合入)**:全站 `select` 去掉浏览器原生箭头,改**自定义 SVG 下拉箭头**(`--select-arrow` CSS 变量,内联 data-URI,深/亮主题各一色),`appearance:none` + `padding-right` 预留箭头空间;**hover / focus 边框同 input**(`var(--accent)`,focus 加 1px 光圈);`disabled` 态降透明度;覆盖全部 select 来源——静态 `.input`(市场筛选 `#mk-provider`/`#mk-sort`、共享表单 `#sf-provider/plan/model`、设置语言/默认模型)、动态 `select.th-filter`(表格列筛选)、`select[data-page-size]`(分页每页条数);`option` 深色背景与 `input-error` 错误态保留。**D. toast 队列堆叠 ✓(待合入)**:单例 toast 改为**队列容器** `#toast-wrap`(固定底部居中,纵向堆叠,`gap:10px`,`pointer-events:none` 不拦截点击);`toast(msg, type)` 每次**创建独立元素**(不再覆盖旧消息),**最多同时 3 条**(超限立即移除最旧一条腾位),每条**独立生命周期**——到时(2.6s)加 `.out` 淡出(0.2s `toast-out` 动画)后移除,互不影响;**分级样式保留**(success/error/info 边框色与文字色不变,39 个调用点零改动);toast 自身 `pointer-events:auto` 为后续可交互 toast 预留。**E. 快捷键帮助面板 ✓(待合入)**:按 **`?`**(或 `Shift+/`)在右上角弹出**行内卡片**(`#help-panel`,非 modal、无遮罩、不阻塞页面)展示快捷键速查:`/` 聚焦市场搜索、`1–7` 切换视图、`Esc` 关闭/取消、`?` 开合面板;**Esc 或再按 `?` 关闭**(帮助打开时 Esc 优先于行内表单,不会误关「新建 Key」);面板底部显示**当前上下文**(当前视图 + 亮/深色主题);输入框内按 `?` 不劫持(typing 守卫,正常输入字符);关闭按钮 ×;窄屏(≤560px)全宽贴顶。**F. 市场模型行展开详情 ✓(待合入)**:市场表格每行首列加 **`+`/`−` 展开按钮**(`.row-expand`,hover accent);点击在 **tr 下追加详情行**(`.mk-detail`,`colspan=7` 浅底网格,行内展开不弹窗)展示:**Max tokens**(单次输出上限,模型未公布显示「未公布」)、**价格换算**(`1M tokens ≈ N 点` 按输出价 + 输入价/1M)、**上下文长度**、**可用性**(可用/繁忙 + 成功率)、**多 key 自动故障转移说明**(仅 `multi` 模型显示,架构 v0.2 路由策略);**仅展开当前行**(点其它行自动收起,再点收起),展开态存 `mkExpanded` 数据(搜索/筛选重渲染后保留)。**G. 登录页 polish ✓(待合入)**:登录卡片视觉微调——**logo 加大**(52px + 渐变微光 `0 0 18px rgba(78,205,196,.35)`)、**品牌标题层次**(h1 22px + 副文案行高)、**输入框聚焦光晕**(`0 0 0 3px var(--accent-soft)`,双主题适配);**空邮箱/密码提交行内错误**(复用 `field-error` 组件:红边框 + 行内文案,聚焦首个错误字段,输入修正自动清除,`novalidate` 自管校验);**「记住我」checkbox**(`#login-remember`,localStorage `atp-remember` 记忆,加载时还原)+ **演示模式说明小字**(`demo-hint`:demo@aitokenpool.local / demo1234)。**rant 20:39:30 全部验收项满足(A–G 七项,PR #55–#61),UI/UE 第四轮深化波收官,docs v1.19。** +> **v1.19(2026-08-17)· 设置页「API 接入端点」卡片(rant `2026-08-17T20:44:18`).** 设置页新增**「接入方式 / API 端点」卡片**(`#endpoint-card`,放在 API Key 卡片**上方**——先看端点再生成 key):**OpenAI 兼容** `https://gateway.aitokenpool.local/v1`(Chat Completions · Cursor / Cline / Roo Code / OpenCode / OpenAI SDK)与 **Anthropic 兼容** `https://gateway.aitokenpool.local/anthropic`(Messages API · Claude Code / Goose / OpenClaw)各一行——协议标签(accent 药丸)+ **等宽可整段选中** URL(`user-select:all`)+ **复制按钮**(复用 copyKey 降级链:clipboard API → `execCommand("copy")` → 提示 Ctrl+C,带「已复制 ✓」flash)+ 说明小字;URL 旁小注「部署后替换为你的网关域名」(原型占位);卡片内**使用步骤** ① 生成 API Key → ② 工具 Base URL 填端点 → ③ 填 key;端点为 **UI 静态常量** `API_ENDPOINTS`(注释标明真实值来自部署配置,后端实现时接入 `config.server.base_url`);窄屏端点行纵向堆叠 + URL 自动换行。 +> **v1.19(2026-08-17)· UI/UE 第四轮多角度深化(rant `2026-08-17T20:39:30`,分批 PR,进行中).****A. URL hash 路由 ✓(PR #55)**:视图与地址栏 hash 联动——`#/marketplace`、`#/wallet` 等视图 hash 可**直接收藏 / 分享 / 刷新恢复**;规则:① 视图切换(导航 / 快捷键 1-7 / 登录恢复)同步 `history.pushState` 更新 hash(已相同不重复入栈,不触发 hashchange 回环);② **前进 / 后退**(hashchange)视图跟随切换;③ **非法 hash** 回退仪表盘视图但**不重写 URL**(避免 pushState 污染历史、后退需两次);④ 空 hash 不动作(无 hash 时保持默认行为);⑤ 刷新后登录自动恢复 hash 对应视图(游客浏览 / 未登录态无冲突);⑥ 游客受限视图 hash 被拦截时保持原视图、不入栈。**B. 交易记录汇总条 ✓(PR #56)**:交易页卡片顶部加**紧凑汇总条**(`.tx-summary`,三列 inline:总收入 / 总支出 / 净变化,+绿 −红,零值中性显示 `0`);**随 tab 过滤联动**——「全部 / 消费 / 收益」tab 切换即时重算,且**与表格列筛选一致**(抽公共 `filterRows(rows, columns, filters)` 供 `buildDataTable` 与汇总共用,汇总反映与表格可见行相同的过滤集,不受分页影响);窄屏自动换行收窄。**C. 原生 select 美化 ✓(待合入)**:全站 `select` 去掉浏览器原生箭头,改**自定义 SVG 下拉箭头**(`--select-arrow` CSS 变量,内联 data-URI,深/亮主题各一色),`appearance:none` + `padding-right` 预留箭头空间;**hover / focus 边框同 input**(`var(--accent)`,focus 加 1px 光圈);`disabled` 态降透明度;覆盖全部 select 来源——静态 `.input`(市场筛选 `#mk-provider`/`#mk-sort`、共享表单 `#sf-provider/plan/model`、设置语言/默认模型)、动态 `select.th-filter`(表格列筛选)、`select[data-page-size]`(分页每页条数);`option` 深色背景与 `input-error` 错误态保留。**D. toast 队列堆叠 ✓(待合入)**:单例 toast 改为**队列容器** `#toast-wrap`(固定底部居中,纵向堆叠,`gap:10px`,`pointer-events:none` 不拦截点击);`toast(msg, type)` 每次**创建独立元素**(不再覆盖旧消息),**最多同时 3 条**(超限立即移除最旧一条腾位),每条**独立生命周期**——到时(2.6s)加 `.out` 淡出(0.2s `toast-out` 动画)后移除,互不影响;**分级样式保留**(success/error/info 边框色与文字色不变,39 个调用点零改动);toast 自身 `pointer-events:auto` 为后续可交互 toast 预留。**E. 快捷键帮助面板 ✓(待合入)**:按 **`?`**(或 `Shift+/`)在右上角弹出**行内卡片**(`#help-panel`,非 modal、无遮罩、不阻塞页面)展示快捷键速查:`/` 聚焦市场搜索、`1–7` 切换视图、`Esc` 关闭/取消、`?` 开合面板;**Esc 或再按 `?` 关闭**(帮助打开时 Esc 优先于行内表单,不会误关「新建 Key」);面板底部显示**当前上下文**(当前视图 + 亮/深色主题);输入框内按 `?` 不劫持(typing 守卫,正常输入字符);关闭按钮 ×;窄屏(≤560px)全宽贴顶。**F. 市场模型行展开详情 ✓(待合入)**:市场表格每行首列加 **`+`/`−` 展开按钮**(`.row-expand`,hover accent);点击在 **tr 下追加详情行**(`.mk-detail`,`colspan=7` 浅底网格,行内展开不弹窗)展示:**Max tokens**(单次输出上限,模型未公布显示「未公布」)、**价格换算**(`1M tokens ≈ N 点` 按输出价 + 输入价/1M)、**上下文长度**、**可用性**(可用/繁忙 + 成功率)、**多 key 自动故障转移说明**(仅 `multi` 模型显示,架构 v0.2 路由策略);**仅展开当前行**(点其它行自动收起,再点收起),展开态存 `mkExpanded` 数据(搜索/筛选重渲染后保留)。**G. 登录页 polish ✓(待合入)**:登录卡片视觉微调——**logo 加大**(52px + 渐变微光 `0 0 18px rgba(78,205,196,.35)`)、**品牌标题层次**(h1 22px + 副文案行高)、**输入框聚焦光晕**(`0 0 0 3px var(--accent-soft)`,双主题适配);**空邮箱/密码提交行内错误**(复用 `field-error` 组件:红边框 + 行内文案,聚焦首个错误字段,输入修正自动清除,`novalidate` 自管校验);**「记住我」checkbox**(`#login-remember`,localStorage `atp-remember` 记忆,加载时还原)+ **演示模式说明小字**(`demo-hint`:demo@aitokenpool.local / demo1234)。**rant 20:39:30 全部验收项满足(A–G 七项,PR #55–#61),UI/UE 第四轮深化波收官,docs v1.19。** > **v1.18(2026-08-17)· UI/UE 第三轮多角度深化(rant `2026-08-17T18:06:09`,分批 PR).** **A. 仪表盘数据可视化 ✓(PR #48)**:纯 SVG sparkline(零外部依赖,手写 path,颜色用现有 CSS 变量):「本月点数变化」卡片按天聚合近 7 日净变化画迷你折线图(渐变填充,每点 `` hover 显示当天数值);「我的共享」卡显示共享收益累计趋势 sparkline(`--ok` 色),无上架 key 时保留空状态不画图。**B. 亮色主题 ✓(PR #49)**:CSS 变量重构——新增 `:root[data-theme="light"]` 全套变量重定义(--bg/--bg-card/--border/--text 等),并把原先硬编码颜色(表格行边框/斑马纹、卡片 hover 阴影、确认态、spinner、遮罩)抽为语义变量(--table-row-border/--table-stripe/--card-hover-border/--card-shadow/--danger-soft/--danger-text/--spin-track/--overlay)双主题共用;侧边栏加**日/月 SVG 切换按钮**(按当前主题显隐图标),**localStorage 记忆**(atp-theme),首次加载尊重 **`prefers-color-scheme`**;两主题对比度均达标(正文/次要文字/边框层次清晰)。**C. 移动端表格卡片化 ✓(PR #50)**:`@media (max-width: 560px)` 下关键表格(市场/共享/交易/管理/设置 API Key)**隐藏表头**,每行渲染为**卡片**(`label: value` 布局,`td::before` 取 `data-label`),不再横向滚动;卡片内主字段加粗、状态徽章保留、操作按钮整行宽(`flex: 1 1 45%` 换行);全部表格 td 补齐 `data-label`(含 buildDataTable 动态列用 col.title)。**D. 搜索增强 ✓(PR #51)**:全部搜索框(市场 `#mk-search` / API Key `#ak-search` / 部门 `#od-search` / 运营者用户 `#ops-search`)统一接入 **~150ms 输入防抖**(避免每次按键整表重绘闪烁,连续输入只渲染一次);渲染结果对匹配关键词**大小写不敏感 `<mark>` 高亮**(先 HTML 转义再包裹,`--accent-soft` 底 + `--accent-text` 字,双主题对比度达标;清空后自动清除);搜索框加**「清空 ×」小按钮**(有内容时显示,点击清空立即重绘并聚焦输入框;空状态「清除搜索/清除筛选」按钮同样同步 × 态)。**E. 动效与系统偏好 ✓(PR #52)**:按钮 **`:active` 轻微下压**(`scale(0.98)`,disabled 不触发);统计卡 **hover 微抬升**(`translateY(-2px)` + 边框/阴影提升,与卡片 hover 语言一致);**数字/点数变化轻微跳动动画**(新增 `bump(el)` 助手——remove→reflow→add `.bump` 类重放 `numJump`(`translateY(-3px) scale(1.02)`,0.35s);接入 4 处余额变化点:钱包充值(侧边栏+钱包余额)、聊天消费扣款、加额批准、运营者给自己充值);**尊重 `prefers-reduced-motion: reduce`**——全局 `animation-duration/transition-duration` 压到 0.01ms,禁用过渡/动画但保留全部功能。**F. 动态文档标题 ✓(PR #53)**:`document.title` **跟随视图切换**(`switchView` 内统一设置「视图标题 · AITokenPool」,如「模型市场 Marketplace · AITokenPool」;`VIEW_TITLE` 7 个视图全覆盖;未知视图回退「AITokenPool」);**默认「AITokenPool」**——首次加载(DOMContentLoaded)与登录页/无视图态回默认标题,HTML `<title>` 同步改为「AITokenPool」;游客受限视图被拦截时标题保持不变。**G. 其他细节 ✓(验证确认,PR #54 收尾)**:① **视图切换滚动复位**——`switchView` 内 `$("#main").scrollTop = 0`(`.main` 即 `overflow-y:auto` 滚动容器,渲染后复位,多次切换均生效,DOM 冒烟验证);② **复制按钮「已复制 ✓」态**——`copyKey` 的 flash 反馈(复制成功按钮短暂变「已复制 ✓」并禁用,1.2s 恢复;降级路径「请 Ctrl+C」;v1.16 已实现,DOM 冒烟验证)。**rant 18:06:09 全部验收项满足(A–G 七项,PR #48–#54),UI/UE 第三轮深化波收官,docs v1.18。** > **v1.12(2026-08-17)· 移除「组织设置 Organization settings」表单.** 组织管理页只保留部门列表(部门 CRUD + 每月点数分配),删除底部「组织设置」表单(组织名称 / 默认成员配额 / 开关)。「关闭外部注册」属**部署配置项,不在 UI 中设置**(US-16 标注);「成员自助申请加额需管理员审批」开关移除后,申请加额流程**默认需审批**(US-20 说明)。 > **v1.11(2026-08-17)· 管理视图移除独立「Key 池」管理,统一走「上架 key」.** 管理员与普通用户一样通过**共享管理页「上架新 key」**(选厂商 → Plan → 模型、填 key、声明额度、可用时间段)配置上游 key——企业场景下管理员上架、员工消费,本质上就是 key 池;不再有独立的管理员 Key 池界面。移除 Admin「Key 池」tab(成员管理 / 用量报表 / 组织管理 / 平台运营保留)。「Key 池」保留为**数据层概念**(平台持有的上游 key 集合,见 docs/architecture.md 4.2)。更新 US-12 / 企业流程 / 对齐表。 diff --git a/ui/README.md b/ui/README.md index 4f9d7e5..3caf6e5 100644 --- a/ui/README.md +++ b/ui/README.md @@ -219,6 +219,14 @@ ui/ - **记住我**:`#login-remember` checkbox → localStorage `atp-remember`(登录提交时存,DOMContentLoaded 时还原);`demo-hint` 小字显示演示账号; - 冒烟测试注意:stub 中 `setFieldError` 依赖 `input.parentNode.querySelector(".field-error")` —— stub 的 parentNode 需实现该查询;`insertAdjacentElement` 记录插入元素供断言。 +## 接入端点卡片约定(v1.19,rant 2026-08-17T20:44:18) + +- 设置页 **`#endpoint-card`「接入方式 / API 端点」** 卡片,位于 API Key 卡片**上方**(先看端点再生成 key); +- 每端点一行 `.endpoint-row`:`.ep-tag` 协议标签(OpenAI 兼容 / Anthropic 兼容,accent 药丸)→ `.ep-url`(`--mono` 等宽、`user-select:all` 整段选中、可横向滚动)→ `.ep-copy` 复制按钮 → `.ep-desc` 说明小字(支持的工具列表); +- **URL 数据**:`API_ENDPOINTS` 静态常量(`ui/js/app.js`,注释标明真实值来自部署配置 `config.server.base_url` 之类);卡片内 `.ep-note`「部署后替换为你的网关域名」(原型占位);`.ep-steps` 使用步骤 ①②③(生成 key → 填 Base URL → 填 key); +- **复制**:`copyEndpoint(i)` 复用 copyKey 的降级链(clipboard API → textarea+execCommand → 提示 Ctrl+C)与「已复制 ✓」flash(1.2s 恢复);事件绑定 `document.querySelectorAll("[data-ep-copy]")`(bindEvents); +- 窄屏(≤560px):`.endpoint-row` 纵向堆叠,`.ep-url` `word-break:break-all` 自动换行。 + ## 数据说明 - 点数规则与机制细节见 `docs/user-stories.md`(v1.8:机制说明不再进入面向用户的界面文案);UI 只呈现结果(余额数字、模型价格点数、交易金额/类型/状态、可用/繁忙) diff --git a/ui/css/style.css b/ui/css/style.css index 9bc641c..35cdd53 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -251,6 +251,37 @@ select.input option { background: var(--bg-card); } .api-key-card .table th, .api-key-card .table td { white-space: nowrap; } +/* 接入端点卡片(rant 2026-08-17T20:44:18:OpenAI/Anthropic 兼容 base URL) */ +.endpoint-row { + display: flex; align-items: center; gap: 10px; flex-wrap: wrap; + padding: 8px 0; +} +.ep-tag { + flex: 0 0 auto; font-size: 12px; font-weight: 600; + padding: 3px 9px; border-radius: 999px; + background: var(--accent-soft); color: var(--accent-text); + white-space: nowrap; +} +.ep-url { + font-family: var(--mono); font-size: 13px; + background: var(--bg-soft); border: 1px solid var(--border); + border-radius: 6px; padding: 4px 9px; + user-select: all; white-space: nowrap; overflow-x: auto; max-width: 100%; +} +.ep-copy { padding: 3px 10px; font-size: 12px; } +.ep-desc { color: var(--text-dim); font-size: 12px; flex-basis: 100%; } +.ep-note { color: var(--text-mute); font-size: 12px; margin-top: 6px; } +.ep-steps { + display: flex; flex-wrap: wrap; gap: 6px 18px; + margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); + color: var(--text-dim); font-size: 12px; +} +@media (max-width: 560px) { + .endpoint-row { flex-direction: column; align-items: stretch; } + .ep-url { white-space: normal; word-break: break-all; } + .ep-copy { align-self: flex-start; } +} + .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); diff --git a/ui/index.html b/ui/index.html index 5816327..af35f0a 100644 --- a/ui/index.html +++ b/ui/index.html @@ -291,6 +291,26 @@ <h2>交易记录 <span class="en">Transactions</span></h2> <h2>设置 <span class="en">Settings</span></h2> <p>账户 · API Key · 通知 · 偏好(原型展示)</p> </header> + <div class="card" id="endpoint-card"> + <h3>接入方式 <span class="en">API Endpoints</span></h3> + <p class="muted">生成了 API Key 后,把下面端点填进 Cursor / Cline / Roo Code / Claude Code 等工具的 Base URL。</p> + <div class="endpoint-row"> + <span class="ep-tag">OpenAI 兼容</span> + <code class="ep-url" data-endpoint="https://gateway.aitokenpool.local/v1">https://gateway.aitokenpool.local/v1</code> + <button type="button" class="btn btn-ghost ep-copy" data-ep-copy="0">复制</button> + <span class="ep-desc">Chat Completions · Cursor / Cline / Roo Code / OpenCode / OpenAI SDK</span> + </div> + <div class="endpoint-row"> + <span class="ep-tag">Anthropic 兼容</span> + <code class="ep-url" data-endpoint="https://gateway.aitokenpool.local/anthropic">https://gateway.aitokenpool.local/anthropic</code> + <button type="button" class="btn btn-ghost ep-copy" data-ep-copy="1">复制</button> + <span class="ep-desc">Messages API · Claude Code / Goose / OpenClaw</span> + </div> + <p class="ep-note">部署后替换为你的网关域名(原型占位说明)</p> + <div class="ep-steps"> + <span>① 在下方生成 API Key</span><span>② 工具 Base URL 填上面对应端点</span><span>③ API Key 填刚生成的 key</span> + </div> + </div> <div class="card api-key-card"> <h3>API Key <span class="en">API keys</span></h3> <p class="muted">用于本地工具 / 代码接入平台的密钥。独占整行,避免表格字段挤压。</p> diff --git a/ui/js/app.js b/ui/js/app.js index 36dc7c8..f33b7fc 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -1109,6 +1109,45 @@ } } + /* --- 接入端点(rant 2026-08-17T20:44:18:设置页展示 OpenAI/Anthropic 兼容 base URL) --- */ + // 原型静态常量:真实值来自部署配置(后端实现时接入 config 的 server.base_url 之类) + const API_ENDPOINTS = [ + { tag: "OpenAI 兼容", url: "https://gateway.aitokenpool.local/v1", desc: "Chat Completions · Cursor / Cline / Roo Code / OpenCode / OpenAI SDK" }, + { tag: "Anthropic 兼容", url: "https://gateway.aitokenpool.local/anthropic", desc: "Messages API · Claude Code / Goose / OpenClaw" }, + ]; + + // 复制端点 URL(复用 copyKey 的降级逻辑:clipboard API → execCommand → 提示 Ctrl+C) + function copyEndpoint(i) { + const ep = API_ENDPOINTS[i]; + if (!ep) return; + const btn = document.querySelector('[data-ep-copy="' + i + '"]'); + const flash = (ok) => { + if (!btn) return; + const orig = btn.innerHTML; + btn.disabled = true; + btn.innerHTML = ok ? "已复制 ✓" : "请 Ctrl+C"; + setTimeout(() => { btn.disabled = false; btn.innerHTML = orig; }, 1200); + }; + const okToast = () => { toast("已复制「" + ep.tag + "」端点地址", "success"); flash(true); }; + const fallback = () => { + const ta = document.createElement("textarea"); + ta.value = ep.url; + ta.style.cssText = "position:fixed;opacity:0"; + document.body.appendChild(ta); + ta.select(); + let ok = false; + try { ok = document.execCommand("copy"); } catch (e) { ok = false; } + document.body.removeChild(ta); + if (ok) okToast(); + else { toast("已选中端点地址,请按 Ctrl+C / Cmd+C 复制"); flash(false); } + }; + if (navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard.writeText(ep.url).then(okToast).catch(fallback); + } else { + fallback(); + } + } + // 生成新 API Key(行内编辑,替代原生输入弹窗,Enter 确认 / Esc 取消) function openNewKeyInline() { const wrap = $("#ak-new-inline"); @@ -1703,6 +1742,10 @@ // API Key 搜索 + 行内操作(复制 / 改名 / 删除[行内二次确认]) wireSearch($("#ak-search"), renderSettings); + // 接入端点复制(rant 2026-08-17T20:44:18) + document.querySelectorAll("[data-ep-copy]").forEach((b) => + b.addEventListener("click", () => copyEndpoint(Number(b.dataset.epCopy)))); + $("#api-keys").addEventListener("click", (e) => { const cp = e.target.closest("[data-key-copy]"); if (cp) { copyKey(Number(cp.dataset.keyCopy)); return; }