# 用法与排版

> [README.md](../README.md) 的补充材料：安装、基本操作、设定面板见主文档。

## 对话框的三张内容页

同一时刻只显示一张：

| 内容页 | 什么时候出现 | 显示什么 |
|---|---|---|
| **语音台词** | 点击立绘 / 自动播放 | 台词，打字机逐字显示、居中；此时底栏整条移除 |
| **本轮收据** | 一轮对话结束 | `消耗 128.5K token`、`花费 ￥0.28`，两行都是黑色，整块居中，停留 5 秒 |
| **余额页** | 点击对话框；或点击立绘而这条语音没有台词 | `余额 ¥XX`、`今日已用 ¥XX`，整块居中 |

* 点对话框**不播放音效**（设定按钮的音效不受影响）。
* 语音包没放内容表时，点击立绘不显示台词，改为显示余额页；语音照常播放、立绘照常随机更换。
* 点对话框会把消失倒计时重新计为 `dialogHoldSeconds`（默认 3 秒），从这次点击算起。

## 什么时候消失

* 台词显示完后停留 **3 秒**再淡出：打字机放完**且**语音播完，两个条件都满足才开始计时。
* 秒数由 `dialogHoldSeconds` 控制（默认 3，范围 0.5–120，超出会被夹回边界）。
* **本轮收据固定停 5 秒**，不跟随该配置；要改就改 `lib/client.js` 顶部的 `COST_HOLD_SECONDS`。
* **打开设定面板期间对话框常驻**，关掉面板恢复自动消失。
* 对话框消失后，立绘切回该立绘包的**默认立绘**（`spriteRevertOnHide: false` 可关闭）。

## 内部排版

* **素材字节都走 fetch + blob**：DSH 网页端的连接很紧张时，浏览器会把**优先级最低的请求排在队尾** ——
  媒体元素自己的下载和 `<img>` 的下载都实测卡过十几秒（一发消息才一起放行）。
  所以语音、立绘、对话框底图、设定图标都由挂件自己把字节取回来，再交给 `blob:` 播放 / 渲染；
  取不到就退回原来的直连方式。这也是"点了立绘语音响了、立绘却没换"这类问题的根治办法。
* **全部居中**：台词、收据、余额都是水平居中的。
* **语音顺序默认洗牌池**：整个语音包洗成一轮，逐条不放回，放完自动重洗，一轮之内不重复
  （实测 400 次点击里任何一句最多出现 1 次）。想改回每次独立随机，设定面板切「语音顺序 → 纯随机」；
  想让某几句多放少放，见 [customize.md](customize.md) 的 `weights.json`。
* **token 用 K / M 计数**：`128.5K token`、`1.23M token`；一千以内照原样显示。金额始终精确到分。
* **打字机**：逐字显示，句尾有闪烁光标；整句约 1–2.2 秒。
* **字号自适应**：按完整台词算出能放下的最大字号，长句自动缩小、短句放大，打字过程中不跳动。
* **短句上限 28px**（`lib/client.js` 顶部的 `MAX_LINE_FONT`）。
* **数字不换错行**：`余额 ¥12.39`、`今日已用 ¥0.59` 各自是不可拆分的整体，窄框时只在两组之间换行。
* **避开 logo**：收据与余额页只使用对话框上方的一段高度。用哪一段由底图说了算——
  自带底图右下角有 logo，用上方 **72%**；自带的空白底图（或自己换的无 logo 底图，`logoShare: 1`）
  用满整块，实测能到画面的 **93%**。

### 各档位的实测结果

最长台词 64 字（含 2 个硬换行）、最短 1 个字：

| 内容页 | 完整显示 | 截断（带淡出提示） |
|---|---|---|
| 语音台词 | **3 档及以上** | 1–2 档 |
| 极短台词（1 个字） | **全部 10 档** | — |
| 本轮收据 | **全部 10 档** | — |
| 余额页 | **全部 10 档** | — |

## 对话框位置的自适应规则

选「立绘下方」时：

| 情况 | 行为 |
|---|---|
| 下方空间足够 | 显示在立绘下面 |
| 立绘贴着屏幕底边 | 与立绘**底部对齐、相互重叠** |
| 下方有缝隙但不够放 | 把**立绘往上推**，腾出完整空间 |

选「立绘上方」时：

| 情况 | 行为 |
|---|---|
| 上方空间足够 | 显示在立绘上面 |
| 立绘贴着屏幕顶边 | **翻到立绘下方** |
| 上方有缝隙但不够放 | 把**立绘往下推**，腾出完整空间 |

自动推移只是布局偏移，不会改写拖拽保存的位置；对话框始终被拉回屏幕内。