Skip to content
60 changes: 60 additions & 0 deletions ui/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# AITokenPool UI 原型(Static HTML Prototype)

纯静态 HTML + CSS + JS 原型,无框架、无构建工具、无外部 CDN 依赖。
浏览器直接打开即可浏览与演示。

## 产品模型(重要)

**一套产品,两种部署场景,角色区分**:

- **公共版**:部署在公网,任何人都能注册、分享 key、赚点数、消费别人共享的 key;
- **企业版**:部署在企业内网,管理员(IT)把采购的 key 放进池子、给成员分配点数;
- 两者的**功能集合完全相同**(市场 / 共享 / 钱包 / 交易 / 设置),不存在"企业版专属功能";
- 差异只在**谁会主动分享**(公共版人人可分享;企业版只有管理员有动力采购/分享 key);
- **角色是权限差异,不是产品差异**:管理员额外拥有"管理视图"(key 池 / 成员点数 / 用量报表 / 组织设置),普通用户没有;员工就是普通用户,用同一套界面。

本原型据此实现:单一登录入口(角色由账号决定),一套导航(仪表盘 / 模型市场 / 共享管理 / 钱包 / 交易记录 / 设置 + 管理员角色视图)。

## 如何浏览

**方式一(推荐)**:双击 `index.html`,用浏览器打开即可。

**方式二**:本地起一个静态服务器(可选):

```bash
python3 -m http.server 8000 --directory ui
# 然后访问 http://localhost:8000
```

## 页面清单

登录页:单一入口(邮箱登录占位),不做公共版/企业版二选一。

同一套界面(角色视图):

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 池管理(添加/撤销)、成员管理(配额调整)、用量报表(按模型/成员)、组织设置(含"关闭外部注册"企业部署开关)

## 文件结构

```
ui/
├── index.html # 入口(登录页 + 应用外壳 + 全部视图)
├── css/style.css # 设计系统(深色主题 · 强调色 #4ecdc4 · 响应式预留)
├── js/data.js # 内嵌 mock 数据(模型价格、交易、共享、成员等)
├── js/app.js # 交互逻辑(导航、筛选、表单、分页、Toast)
└── README.md # 本文件
```

## 数据说明

- 点数规则:1 USD = 1000 点;模型价格折算自 `data/models.example.json`(CNY 按 ~7.2 汇率示例折算)
- 上架单价不由分享者手填:单价是模型×厂商的客观属性,平台按模型价格表自动计算(参考单价 = 该模型输出价 点数/1M);模型无定价数据时给出"按默认价"兜底,不报错
- 上架需提交 API Key(password 输入):平台加密托管、仅用于代理调用;共享列表只展示脱敏值(如 sk-****1234,前 3 后 4),不展示明文
- 删除 = 彻底下架(key 从平台移除,不可恢复);暂停 = 临时不接单,可恢复
- 全部数据为前端常量(mock),无后端、无真实调用
Loading