new-api-key-usage/docs/design/交互设计-成员视图.md

交互设计 · 成员视图

成员世界——布局与信息结构对齐管理端（侧边栏壳 + 页内区块 + 表格优先），内容仍是「我的用量」：名下 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 可深链。支付参数页的「该时段涉及」：订阅 = 涉及我日志的 subscription_id ∪ 我域内进行中；充值 = 我域内且 paid_at 落在窗口内。

数据刷新心智：仅总览作看板自动刷新（约 60s）；调用日志 / 支付参数为查询台，不主动轮询（改条件或手动重试才拉）；相对时间窗在选定后定格，避免每分钟打穿缓存。

无账号设置、无审计、无健康带（成员世界定位边界，见《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 胶囊墙	紧凑摘要条 + 表格
支付参数卡堆在长卷里	独立「支付参数」页
明细表嵌在页尾	独立「调用日志」页，表体视口滚动