# 余额展示 · 圆环灯管方案

替代 header 里直白的「余额 ¥12.80」。用圆环灯管表达累计额度与已消耗比例，剩余部分用另一色发光段表示。点击/悬停可看具体金额。

累计充值（总额） ¥50.00 当前余额（剩余） ¥12.80

## 对比：当前 vs 方案 A（推荐）

方案 A 仅显示圆环 + 剩余百分比，不直接暴露金额，适合 header 紧凑场景。

John
新对话
余额 ¥12.80

当前：金额完全外露，像账单条目。

John
新对话

#### 账户额度

剩余 ¥12.80
已消耗 ¥37.20
累计充值 ¥50.00
青绿 = 剩余可用 琥珀 = 已消耗

方案 A：圆环总长 = 累计充值；两段颜色从 12 点顺时针排列。中心显示剩余占比。

## 方案 B：圆环 + 点击固定浮层移动端友好

与 A 相同圆环，但浮层通过点击打开（避免手机无 hover）。适合需要明确金额时再展开。

John
新对话

#### 账户额度

剩余¥12.80
已消耗¥37.20

点击圆环切换浮层；低余额时环色变黄，耗尽时红色脉冲。

## 方案 C：胶囊微环折中

保留简短文案「可用 26%」，圆环缩小嵌在胶囊左侧，比纯数字含蓄但仍有一行提示。

John
新对话
可用 26%

## 充值弹窗 · 大号圆环（配套）

弹窗内可用 88px 大圆环 + 三项明细，与 header 小环视觉语言一致。

#### 账户充值

剩余 ¥12.80
已消耗 ¥37.20
累计充值 ¥50.00

## 数据口径 & 实现要点

圆环语义：外圈总长 = 累计充值总额；琥珀段 = 已消耗；青绿段 = 当前余额。
计算公式：已消耗 = 累计充值 − 当前余额（需后端返回 `totalRechargeCents`，或从流水汇总）。
状态色：剩余 > ¥1 青绿；≤ ¥1 琥珀警告；≤ ¥0 红色脉冲 + 点击直达充值。
无障碍：`aria-label="账户额度，剩余 26%"`，浮层内展示具体金额。
推荐：Header 用 方案 A（纯圆环 + hover 浮层）；移动端同一组件点击展开（方案 B 行为）。