diff --git a/docs/user-stories.md b/docs/user-stories.md index 3a342e5..1ff6177 100644 --- a/docs/user-stories.md +++ b/docs/user-stories.md @@ -9,7 +9,7 @@ > **v1.15（2026-08-17）· A 视觉美化（rant `2026-08-17T15:50:05`）.** 侧边栏导航 emoji → **统一内联 SVG 线性图标**（同尺寸、currentColor、hover/active 态）；卡片 hover 微交互（阴影/边框轻提升）；表格斑马纹 + 行 hover 高亮；**空状态组件**（图标 + 文案 + 行动按钮：市场清除筛选 / 共享上架新 key / 设置生成 key / 部门清除搜索）；状态徽章加**语义色点**（ok/warn/danger/dim 一眼可辨）；响应式加固（窄屏侧边栏折叠配合 SVG 图标、表格横向滚动）。 > > **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–G（数字列对齐、`:focus-visible` 与快捷键、行内校验错误、视图过渡、细节一致性）分批落地。 +> **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` 与快捷键、行内校验错误、视图过渡、细节一致性）分批落地。 > **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 / 企业流程 / 对齐表。 > **v1.10（2026-08-17）· 上架表单"可用时间段"结构化.** 上架 key 的可用时间段改为**正式字段**（星期多选 + 起止时间，可多选；留空 = 全天不限），后端可解析生效；**备注只作纯文本**，不承载任何逻辑。共享列表展示可用时间段（如「周一~周五 09:00-18:00」），未设置显示「全天」。更新 US-8 / US-9 AC。 diff --git a/ui/README.md b/ui/README.md index 9783dd0..dca034f 100644 --- a/ui/README.md +++ b/ui/README.md @@ -91,6 +91,12 @@ ui/ - **相对时间**：`timeAgo(s)` 支持 `MM-DD HH:mm`（默认今年）与 `YYYY-MM-DD[ HH:mm]`，输出 `刚刚 / N 分钟前 / N 小时前 / 昨天 / MM-DD`，非标准格式原样返回；`timeCell(s)` 输出带 `title`（完整绝对时间）的 `.timeago` 单元格，hover 显示； - **统一使用**：交易列表（时间列）、加额申请列表、共享列表（上架时间列）、API Key 最近使用时间；数据新增 / 生成时间用 `nowTime()`（`MM-DD HH:mm`）写入即可自动相对化。 +## 表格数字列约定（v1.17，rant 2026-08-17T16:57:17 C 数字列对齐） + +- **数字列**（价格 / 点数 / 已用 / 额度 / 余额 / 用量）统一 `` + 表头 ``：右对齐 + `--mono` 等宽 + `tabular-nums`，便于纵向扫读；时间列 / 状态列 / 文本列保持左对齐； +- 数据表格渲染器 `buildDataTable` 支持列配置 `align: "num"`（交易表 tokens / pts 已启用）； +- 金额一律 `D.fmt()`（整数千分位；小数保留 2 位），禁止裸数字拼接。 + ## 数据说明 - 点数规则与机制细节见 `docs/user-stories.md`（v1.8：机制说明不再进入面向用户的界面文案）；UI 只呈现结果（余额数字、模型价格点数、交易金额/类型/状态、可用/繁忙） diff --git a/ui/css/style.css b/ui/css/style.css index 3f2118e..cb345f5 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -179,6 +179,10 @@ select.input option { background: var(--bg-card); } white-space: nowrap; } .table td { padding: 10px 12px; border-bottom: 1px solid rgba(42,51,66,.5); white-space: nowrap; } +/* 数字列（rant 16:57:17 C：价格/点数/已用/额度/余额 右对齐 + 等宽字体，便于扫读） */ +.table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } +.table th.num { text-align: right; } +.table th.num .th-sort { text-align: right; } /* 斑马纹（rant 15:50:05 A.3：行 hover 高亮保留，hover 覆盖斑马纹） */ .table tbody tr:nth-child(even) { background: rgba(255,255,255,.018); } .table tbody tr:hover { background: var(--bg-hover); } diff --git a/ui/index.html b/ui/index.html index c07fc0a..3138ff7 100644 --- a/ui/index.html +++ b/ui/index.html @@ -103,7 +103,7 @@

模型市场 Marketplace

- +
厂商 Provider模型 Model输入价 /1M输出价 /1M上下文可用性操作 Use
厂商 Provider模型 Model输入价 /1M输出价 /1M上下文可用性操作 Use
@@ -183,7 +183,7 @@

我的共享列表 My listings

收益已到账

- +
厂商 · Plan / 模型Key已用/额度单价收益上架时间状态
厂商 · Plan / 模型Key已用/额度单价收益上架时间状态
@@ -347,7 +347,7 @@

管理视图 Admin

- +
成员部门配额 / 已用剩余状态
成员部门配额 / 已用剩余状态
@@ -381,7 +381,7 @@

按成员用量 By member

部门列表 Departments

- +
部门成员数月分配（点数）已用剩余状态
部门成员数月分配（点数）已用剩余状态
@@ -416,7 +416,7 @@

用户充值 Top up a user

- +
用户邮箱余额（点数）
用户邮箱余额（点数）
diff --git a/ui/js/app.js b/ui/js/app.js index 43ba154..d6f4698 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -307,8 +307,8 @@ $("#mk-count").textContent = list.length + " 个在售 key"; $("#mk-body").innerHTML = list.length ? list.map((m) => "" + esc(m.provider) + "" + esc(m.model) + "" + - "" + D.fmt(m.in) + " 点" + D.fmt(m.out) + " 点" + - "" + D.ctxFmt(m.ctx) + "" + + '' + D.fmt(m.in) + " 点" + '' + D.fmt(m.out) + " 点" + + '' + D.ctxFmt(m.ctx) + "" + "" + (m.avail ? '可用' : '繁忙') + (m.multi ? ' 多 key · 自动故障转移' : "") + "" + "" + @@ -396,9 +396,9 @@ "" + esc(D.PROVIDER_LABELS[s.provider] || s.provider) + " · " + esc(s.plan || "API") + "
" + esc(s.model) + " · " + esc(fmtAvailable(s)) + "
" + "" + esc(maskKey(s.key)) + "" + - "" + D.fmt(s.used) + " / " + D.fmt(s.quota) + "" + - "" + D.fmt(s.price) + " 点/1M" + - "+" + D.fmt(s.earned) + " 点" + + "" + D.fmt(s.used) + " / " + D.fmt(s.quota) + "" + + '' + D.fmt(s.price) + " 点/1M" + + '+' + D.fmt(s.earned) + " 点" + "" + timeCell(s.time) + "" + "" + badge(s.status, SHARE_STATUS) + "" + "