# 交互设计 · 成员视图

> 成员世界——**布局与信息结构对齐管理端**（侧边栏壳 + 页内区块 + 表格优先），内容仍是「我的用量」：名下 key 的调用日志、用量聚合、完全公开透明的支付参数。**R12 的交互落点**（日志行携带所属订阅/充值信息：徽章弹窗 + 行展开调用详情）。页面无任何「应付」概念（分摊哲学裁决）。

| 项目 | 内容 |
|------|------|
| 状态 | 定稿（2026-10-09，作者认可布局重写） |
| 关联 | 《交互设计-总览与共性》（数值呈现、时间选择器、响应式）·《交互设计-调用日志》（明细表列语义同构参照）· R12（裁决记录）· `members表字段设计.md`（令牌）· `usage_logs表字段设计.md`（来源提列）· `subscriptions` / `topups` 表字段设计（参数数据源）·《API契约-成员视图》 |
| 数据 | 名下 key 的 `usage_logs` 聚合与明细 · 相关 `subscriptions` / `topups`（完全可见） |
| 前置 | 经登录壳（令牌）进入；**侧边栏布局**（与管理端同构，菜单与数据不同） |

---

## 1. 布局壳（与管理端同构）

成员视图**不再做单页长卷**，改为与管理端同一套页面壳：

| 构件 | 形态 |
|------|------|
| 整体 | `a-layout`：左侧固定可折叠侧边栏 + 右侧顶栏 / 内容区；高度锁 `100vh`，**仅内容区滚动** |
| 品牌区 | 侧边栏顶部两行：`NAKU` +「成员用量」（收起只留 N 徽标）——与管理端同源，描述行区分世界 |
| 菜单 | 深色 `a-menu`，三项（见 §2）；收起态只留图标 |
| 顶栏 | 右侧成员名 + 下拉「退出」（与管理端账号菜单位置一致） |
| 内容区 | `bg-layout` 上的白色内容面（8px 圆角）；页内统一 `PageHeader` + 区块 |
| 退出 | 清 sessionStorage 令牌 → 登录壳（无服务端登出——令牌档语义） |

> 与管理端**物理隔离**不变：两套路由、两套凭证中间件；布局同构 ≠ 世界打通。

## 2. 导航结构

| 菜单 | 页面 | 职责一句话 | 登录后落地 |
|------|------|-----------|-----------|
| 总览 | 成员总览 | 该时段用量与名下 key 全景 | **是** |
| 调用日志 | 调用明细 | 名下 key 的模型请求流水 | |
| 支付参数 | 支付参数 | 订阅 / 充值登记参数（完全公开） | |

顺序逻辑：先看汇总 → 查事实（流水）→ 对参数（支付）——与管理端「总览 → 对象 → 事实」同型，体量收成三项。

**时间范围全局共享**：三页共用同一对账窗口——切页保留当前范围（菜单带 `from/to`），任一页改范围即全局生效；URL 可深链。支付参数页的「该时段涉及」：订阅看期间重叠 ∪ 进行中，充值看 `paid_at`。

无账号设置、无审计、无健康带（成员世界定位边界，见《API契约-成员视图》导语）。

## 3. 总览页

### 3.1 页头

`PageHeader`：标题「总览」+ 副文案「你在本池的名下用量 · 仅统计消费行」；**右侧操作位放时间范围选择器**（共性 §3.1，默认最近 30 天，快捷项含「本订阅期间」）。

### 3.2 用量摘要条（页首，非海报）

一行紧凑摘要，**不做超大号 Hero 数字**（与管理端密度一致）：

- 总用量：次数 / quota / 美元（标注「按当时换算率」）
- **按来源分解**：订阅消耗 / 充值消耗（分段条）——回答「我的用量花在哪个池子」
- 口径标注：「2026-09-02 ~ 10-01」（共性：杜绝无口径数字）

### 3.3 我的 Key（表格，非窄卡）

管理端总览「按 key」区的成员版——**表格优先**：

| 列 | 内容 |
|----|------|
| Key 名称 | `token_name` |
| 数据截止 | 分钟级；落后 > 2h 停滞标注 |
| 调用次数 | 该时段消费日志条数 |
| 额度消耗 | quota + $ 双单位 |

- 行操作「查调用」→ 调用日志页并带上该 `api_key_id` + 当前时间范围
- 空态：名下无 key →「作者尚未为你分配 key」；有 key 无日志 → 表正常、用量 0 +「该时段内无调用」

### 3.4 支付参数（摘要入口）

表头或区块脚注链到**支付参数页**；总览可放 1–2 行摘要（进行中订阅一行）或仅入口链接——**完整参数不在此页堆叠**（对齐管理端「对象各归其页」）。

- 纯用量模式（无登记）：不放行动引导；入口仍可进支付参数页看中性空态

## 4. 调用日志页

与管理端调用日志**列语义同构**（《交互设计-调用日志》为参照），范围恒为**名下 key**；明细**默认全类型**（消费 + 错误，可筛）；聚合仍仅消费行。

### 4.1 页头与筛选

- `PageHeader`「调用日志」+ 副文案「名下 key 的模型请求流水」；右侧时间范围（同上）
- 筛选一行：Key（Select）· 类型（全部 / 消费 / 错误）· 计费来源（全部 / 订阅 / 充值 / 未关联）· 订阅 ID（可空）
- 切换任一筛选 → 回第 1 页；URL 同步 `from/to` + 筛选 + `page`（可深链）

### 4.2 明细表（页面主体，表体滚动）

| 列 | 内容 |
|----|------|
| 时间 | 到秒（北京时间） |
| Key | `token_name` |
| 模型 | `model_name` |
| 类型 | 消费 / 错误徽章 |
| 来源 | **来源徽章**：`订阅 #N` / `充值` / `未关联`（灰）——R12 携带形态第一层 |
| 用量 | quota + 美元双单位 |
| 操作 | 「详情」按钮 → 详情弹窗 |

**携带形态定案（R12，2026-10-09 修订）** 两层分工——

1. **行内徽章**（常驻）：来源类型 + 订阅编号，零噪声；**点击「订阅 #N」→ 弹窗**展示该笔支付完整参数（期间 / 额度 / 金额 / 备注）——与详情解耦，扫读不被打断
2. **「详情」弹窗**（操作列，居中定高内滚）：调用事实——时间 / Key / 模型 / 类型 / 用量 / Tokens / 耗时流式 / 来源 / 内容（错误详情），以及**原始数据**（落库行 JSON，内滚）

> 弹窗降级：徽章对应订阅**无登记** →「该订阅无登记信息」；「充值 / 未关联」徽章不弹窗（余额池无逐笔关联 / 缺 `subscription_id`）。与《API契约-成员视图》§5 裁定 4 同步：「充值」为纯标识。

### 4.3 表体高度（对齐管理端）

- 内容区固定壳内：**表体 `scroll.y` 按容器实测**（ResizeObserver），分页条贴底；页面不因明细变长而整页膨胀
- 分页：默认 50，档位 20 / 50 / 100 / 200
- 空态：「该时段内无调用日志」

## 5. 支付参数页

完全公开透明的落点——**订阅权益 + 充值入账**两组清单（Tab 或上下两节），参数原貌成表。

### 5.1 页头

`PageHeader`「支付参数」+ 副文案「订阅与充值的登记参数 · 对成员完全公开」；右侧时间范围（全局共享窗口）。

### 5.2 订阅表

| 列 | 内容 |
|----|------|
| 订阅 ID | `subscription_id` |
| 期间 | `period_start` ~ `period_end`（进行中） |
| 额度 | quota + $（`quota_granted`） |
| 付款 | 金额 + `paid_at`（可空显示「—」） |
| 备注 | `remark` |

### 5.3 充值表

| 列 | 内容 |
|----|------|
| 时间 | `paid_at`（入账完成） |
| 计费单位 / 实付 | `amount` · `money` |
| 交易号 / 渠道 | `trade_no` · 支付方式 |
| 派生额度 | `amount × qpu` + $（展示） |
| 备注 | `remark` |

- 脚注：「支付参数对成员完全公开；币种由成员与作者约定」——透明裁决的界面声明
- **不出现**任何派生金额：无「折合人民币」、无「占比 × 金额」、无「应付」
- 空态（纯用量模式）：中性文案「暂无支付记录信息」——**不设行动引导**

### 5.4 与日志订阅弹窗的关系

本页是**完整清单**（订阅 + 充值两组）；日志页徽章弹窗是**单笔快捷透视**——同一数据源（`overview.subscriptions`），不两套口径。

## 6. 状态与边界

| 场景 | 表现 |
|------|------|
| 该时段无日志 | 总览摘要为 0 +「该时段内无调用」；日志页空态 |
| 名下无 key（刚开户） | 总览空态「作者尚未为你分配 key」；其余页正常空态 |
| 令牌失效/停用 | 任意请求 401 → 登录壳（「令牌无效或已停用」） |
| 旧令牌（作者重发后） | 同上——旧令牌即刻作废 |
| 纯用量模式 | 支付参数页中性空态；订阅徽章弹窗「该订阅无登记信息」；「本订阅期间」快捷项隐藏 |

## 7. 窄屏说明

成员可能用手机查看——按《总览与共性》§3.5：**不做移动端 UI 设计**。侧边栏窄屏折叠为抽屉；区块纵向堆叠；明细与参数表保持表格形态，横向滚动即可。

## 8. 与前稿的差异（本次重写）

| 前稿（单页海报） | 本稿（管理端同构） |
|------------------|-------------------|
| 无侧边栏、单页五区滚动 | 侧边栏三页 + 固定壳、内容区滚动 |
| 超大 Hero 数字 + key 胶囊墙 | 紧凑摘要条 + 表格 |
| 支付参数卡堆在长卷里 | 独立「支付参数」页 |
| 明细表嵌在页尾 | 独立「调用日志」页，表体视口滚动 |