# 用量总览面板 · 重设计记录（design-taste-frontend / tasteskill v2）

对象：`@local/usage-overview` 的 DSH 内嵌面板（设置 → 账号与余额 →「查询用量」）。
v1 原始 → … → v6 月历热力图 → v7 月份选择器 + 当天浮层 →
**v8 当前：修好月份按钮箭头与下拉空白，每月消耗改成「月份格子」。**

---

## v8（当前）

### 1. 月份按钮的箭头重叠

- 原因：`.uo-pill` 的基础内边距规则写在 `.uo-picker-trigger` 之后，把右侧 26px 的
  留白覆盖掉了，箭头于是压在「月」字上。
- 修法：把触发器写成 `.uo-pill.uo-picker-trigger`（更高优先级），右侧留白与颜色都拿回来；
  API 键的触发器同理（`.uo-pill.uo-select-trigger`）。

### 2. API Key 下拉的白色空白

- 原生 `<select>` 的弹出菜单由系统绘制，在这套深色界面里会是一块白底、还带一段空行。
- 改成自绘列表：触发器是同一个胶囊（`API Key 全部 API Key ⌄`），点开是深色浮层，
  选项为按钮（当前项填充品牌色），点外部或 Esc 关闭；键盘可用。
  空白、白底、主题不一致三个问题一起消失。

### 3. 每月消耗 → 和每日消耗一样的月份格子

- 去掉「表格 + 收起/展开」，改成 **月份网格**：一行 6 格（手机 3 格），
  每格是一个月：左上「2026年9月」、左下 Tokens、右下金额；底色按「该月花费 ÷ 最贵月份」
  分四档热力，当前月用墨色细环绕一圈。
- 点任意一个月份格子 = 把上面的每日日历切到那个月（和月份选择器等价，少点一步）。
- 月份从账号首月补到当前月，中间没有数据的月份显示 `¥0.00`；月份多了会自然换行，
  不再需要折叠按钮。

### 实机验证（这一轮 Host 不用重启）

- 月份选择器：在真实界面里从 2026年11月 切到 2026年10月、再通过月份格子切到 9月，
  日报表数据、统计条、热力都跟着变（Host 的 `?month=` 已经在上一轮重启后生效）。
- 当天浮层：点 10/20 弹出「2026年10月20日 · 消费金额 ¥0.00 · Tokens 0 · API 请求 0」，
  点外部 / Esc 关闭。
- API Key：自绘下拉在真实界面里正常展开、选中、收起。
- `inspect.mjs --app`：深色 / 浅色均 `0 FAIL`；`lint.mjs`：`0 FAIL`。

### 仍然存在的小问题

- 月份较少时（比如现在 3 个），6 列网格右侧会留空，随月份累积会逐渐填满。
- 月份选择器的可选范围是「账号首月 → 本月」，更早的月份置灰。
- 11 月刚过零点，当月数据只有 1 天，默认打开当前月时会显得空——这是真实数据。

---

## v7（归档）— 月份选择器 + 当天浮层 + 可折叠每月消耗

- 时间维度改月份选择器；点日期弹当天明细；每月消耗可收起（v8 已改为格子）。

## v6（归档）— 月历热力图

- 每日消耗改为整月日历：每格日期 + 金额 + Tokens，四档热力、今天墨色环、统计条与脚注。

## v5（归档）— 每月消耗 + Host 按月汇总

- 删每日明细，新增「每月消耗」；Host 端 `monthlyTotals()` 按月回填。

## v4（归档）— 柱上数值、固定标注带

## v3（归档）— Apple 式极简

## v2（归档）— Achromatic ledger

---

## 数据与任务（inventory）

- 对象：账户余额、累计消费、累计 Tokens、累计 API 请求；按日 / 按月的消费、Tokens、请求。
- 任务：看还剩多少钱、某个月每天花多少、每月花了多少、切月份/Key、导出、刷新。

## 一屏一问

> 账户还剩多少钱，某个月每天和每个月各花了多少？

## 文件

- `lib/client.js` —— 面板客户端（样式 `STYLE_TEXT` + React 组件）。
- `lib/index.js` —— Host 路由（余额、区间、月份、按月汇总）。
- `docs/DESIGN.md` —— 本文件，设计迭代与自检记录。

> 迭代过程中用到的预览页、整页截图与 `.taste-skill/` 中间产物已经清理，
> 不纳入工程；设计结论保留在本文件里。需要重新截图时，从 `lib` 的两个文件
> 直接渲染即可（组件本身不依赖这些文件）。