# 文案与素材出处

本插件的**代码**是原创的。界面文案、配色、闪电图形与动画时长**不是自己编的**，
而是从本机**已安装**的 Codex 应用里逐条挖出来的；**布局**另外对着一段屏幕录制逐帧核对过。
下面写清出处、原值、用在哪，便于复核。

## 0. 取证对象与解法（可复现）

```
C:\Program Files\WindowsApps\OpenAI.Codex_26.930.2377.0_x64__2p2nqsd0c76g0\app\resources\app.asar
```

- 该 asar 是标准 Electron 归档，用仓库里那个小工具就能读：`node _asar_tool/asar.mjs list|cat|extract <asar> …`
- 界面在 `webview/assets/` 下：
  - `app-primary-85e5c56f1696.js`（≈2.3MB）= 工作模型选择器（含强度控件）那一块；
  - `app-primary-547a6c7b4fb3.css`（≈39KB）= 它的 CSS module（类名前缀 `_Menu_1d00n_` 等）；
  - `zh-CN-523d79e20e0e.js`（≈1.3MB）= 中文 i18n 表（形如 `"键":\`文案\``）。
- 定位手法：先在 JS 里搜 i18n 键（如 `workPower.keyboardControl.ariaLabel`），
  再在 CSS 里搜类名（如 `ViewTrack` / `FastModeToggle` / `UltraUsageWarning`）。
- **布局**来自用户提供的屏幕录制 `C:\Users\Administrator\Videos\屏幕录制\屏幕录制 2026-10-03 223918.mp4`
  （15s / 1426×1110）：这台机器没有 ffmpeg，用 `_vid\extract-frames.ps1`（WPF `MediaPlayer` + `RenderTargetBitmap`）
  抽帧、`_vid\sample-colors.py`（Pillow）取色，关键帧留在 `_vid\keep\`。
  抽帧结论：强度区是「大字档位 `Ultra ›`（顶档紫）+ 下面一行模型名 + 一条**蓝→紫渐变的粗胶囊进度条 + 白色大圆钮**
  + 底行 `Select effort`」，闪电在最左、`↻` 在最右；滑到顶档时那两行被「更快消耗使用额度」替换（进度条不动）。

## 1. 文案（Codex 的 i18n 键 → 原文）

| Codex 的键 | 中文原文 | 英文 defaultMessage | 用在本插件 |
|---|---|---|---|
| `composer.modelPicker.selectEffort.label` | 选择强度 | Select effort | 强度区标题 / 面板标题 |
| `composer.modelPicker.workPower.keyboardControl.ariaLabel` | 强度 | Power | 滑条 `aria-label` |
| `composer.modelPicker.workPower.keyboardControl.instructions` | 使用左右方向键调整强度 | Use Left and Right arrow keys to adjust power | 键盘用法 |
| `composer.modelPicker.workPower.keyboardControl.value` | `{value}，第 {position} 项，共 {total} 项。` | `{value}, {position} of {total}.` | 播报行 + `aria-valuetext` |
| `composer.modelPicker.power.ultraUsageWarning` | **更快消耗使用额度** | **Consumes usage limits faster** | 顶档时占满强度区的大字 |
| `composer.intelligencePicker.fastMode.advanced.title` | 快速 | Fast | 闪电开关（本插件显示「快速模式」） |
| `composer.intelligencePicker.fastMode.toggle.enable.ariaLabel` | 启用快速模式 | Enable fast mode | 开关 `aria-label` |
| `composer.intelligencePicker.fastMode.speed.tooltip` | `{n} 倍速` | `{n}x speed` | 开启后的提示 |
| `composer.intelligencePicker.fastMode.moreUsage.tooltip` | 用量更多 | More usage | 开启后的提示 |
| `composer.intelligencePicker.fastMode.advanced.subtitle` | `{n} 倍速度，用量更多` | `{n}x speed, more usage` | 未开启时的说明 / tooltip |
| `composer.modelPicker.modelList.heading` | 选择模型 | Select model | 模型列表标题 |
| `composer.modelPicker.resetToDefault` | 重置为默认 | Reset to default | 面板右上角按钮 |

## 2. 配色（Codex 主题变量 → 实际色值）

| Codex 变量 | 值 | 用在本插件 |
|---|---|---|
| `--color-chart-blue` → `--color-blue` → `--blue-300` | `#339cff` | 快速模式开启时的颜色、进度条常态 |
| `--color-chart-purple` → `--color-purple` → `--purple-400`（浅）/`--purple-300`（深） | `#924ff7` / `#ad7bf9` | 顶档时的进度、文字与流光 |
| `--pink-400` / `--pink-300` | `#ff66ad` / `#ff8cc1` | 彩色闪电与高档流光的第三色 |
| `--color-text-info`（浅/深） | `#3a83f7` / `#63a8f8` | 仅作参考 |

Codex 的用法（原样照抄）：
- `._ViewToggleEffortLabel_[data-maximum=true]{color:var(--color-chart-purple)}`
- `._ModelPickerTriggerEffortText_[data-max-effort=true]{color:var(--color-chart-purple)}`
- `._FastModeToggle_[data-fast-mode-enabled=true]{color:var(--color-chart-blue)}`
- `._FastModeToggle_[data-max-power-selection=true]{color:var(--color-chart-purple)}`

## 3. 顶档警告：Codex 的原样配方

```css
/* 位置与行为 */
._ViewControls_[data-ultra-warning-visible=true] ._ViewToggle_,
._ViewControls_[data-ultra-warning-visible=true] ._FastModeToggle_,
._ViewControls_[data-ultra-warning-visible=true] ._ResetToDefault_{ visibility:hidden; pointer-events:none }
._ViewControls_[data-ultra-warning-visible=true] ._UltraUsageWarning_{ opacity:1 }
._ViewControls_[data-ultra-warning-visible=true] ._UltraUsageWarningText_{ animation:1.1s ease-out _UltraUsageWarningShimmer_ }

._UltraUsageWarning_{ color:var(--color-chart-purple); font-size:var(--text-sm);
  opacity:0; pointer-events:none; white-space:nowrap;
  justify-content:center; align-items:center; display:flex; position:absolute; inset:0 }

._UltraUsageWarningText_{
  background:linear-gradient(100deg, var(--color-chart-purple) 42%,
    color-mix(in srgb, var(--color-chart-purple) 70%, var(--color-text)) 47%,
    color-mix(in srgb, var(--color-chart-purple) 40%, var(--color-text)) 50%,
    color-mix(in srgb, var(--color-chart-purple) 70%, var(--color-text)) 53%,
    var(--color-chart-purple) 58%);
  color:#0000; -webkit-text-fill-color:transparent;
  background-repeat:no-repeat; background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text }

@keyframes _UltraUsageWarningShimmer_ { 0%{background-position:100% 0} to{background-position:0 0} }
```

本插件用的就是这一套（`cxe-shimmer` + `cxe-warn__text`），并且把「可见」的时长设成 **1.1 秒**（= 它自己的 animation 时长）。

## 4. 闪电图形

`webview/assets/LightningBoltFill-db6af1013cb6.js` 里的 SVG 路径（`viewBox="0 0 24 24"`、
`width/height="1em"`、`fill="currentColor"`），逐字节抄进 `client.js` 的 `BOLT_PATH`；
本插件额外用 SVG `linearGradient`（`#339cff → #924ff7 → #ff66ad`）做「通电变彩色」那一态：

```
M11.9125 21.4125C11.5292 21.8625 11.0292 22.0958 10.4125 22.1125C9.79586 22.1291 9.29586 21.9208 8.91252 21.4875C8.53752 21.0541 8.45836 20.4541 8.67503 19.6875L9.68752 16H4.57502C4.00836 16 3.56669 15.8375 3.25002 15.5125C2.93336 15.1791 2.77502 14.7791 2.77502 14.3125C2.77502 13.8375 2.92919 13.4125 3.23752 13.0375L12.1375 2.47497C12.5209 2.02497 13.0209 1.79164 13.6375 1.77497C14.2542 1.75831 14.75 1.96664 15.125 2.39997C15.5084 2.83331 15.5917 3.43331 15.375 4.19997L14.3125 7.99998H19.425C19.9917 7.99998 20.4334 8.16664 20.75 8.49997C21.075 8.83331 21.2375 9.23748 21.2375 9.71247C21.2375 10.1791 21.0792 10.5958 20.7625 10.9625L11.9125 21.4125Z
```

## 5. 布局：来自录屏的实测（不是猜的）

| 录屏里看到的 | 本插件 |
|---|---|
| 大字档位（`Ultra ›`，顶档紫、平时蓝）+ 下面一行小字模型名，两行居中 | `.cxe-head__effort`（16px/500，`data-max` 时紫）+ `.cxe-head__model`（12px，secondary） |
| 一条**粗胶囊**进度条：整条蓝→紫渐变，**白色大圆钮**坐在进度处，右侧未填充段是浅灰 | `.cxe-bar`（14px 胶囊，`linear-gradient(90deg,#3b30d9,#6b32e0 55%,#9a4dff)`）+ `.cxe-bar__empty`（右侧遮罩）+ `.cxe-bar__knob`（26px 白圆） |
| 闪电在最左（开启/顶档时彩色） | `.cxe-bolt--panel`（16px） |
| `↻` 在最右上 | `.cxe-reset` |
| 底行左侧 `Select effort` | `.cxe-foot__caption`（= `selectEffort.label`） |
| 滑到顶档：大字那两行变成「更快消耗使用额度」，进度条保持不变 | `.cxe-head[data-warn='1']` 藏起两行 + `.cxe-warn` 覆盖 |
| 收起态芯片：`⚡ 模型名 档位 ⌄`（档位在最后、顶档紫） | 触发态：`[⚡][模型名][档位][⌄]` |

> 取色说明：录屏是**手机拍屏幕**（有摩尔纹与暗化），直接采到的进度条颜色是 `#2d2189 → #5d2e9f`；
> 本插件按同样的观感取了偏深的蓝紫渐变（`#3b30d9 → #9a4dff`），紫色文字用 Codex 自己的
> `--color-chart-purple`（`#924ff7`）。

## 6. 明确没有照抄的部分

- **刻度**：本插件早期版本在进度条下面排了 6 个档位刻度，录屏里**没有**，已删除（只在 `title` 里保留档位名）。
- **档位名**：永远取 DSH 模型目录里的真实名字（本机是「轻度/低/中/高/极高/最高」），
  不硬编码 Codex 的 `Standard / Extended / Ultra`。
- **`×2` 标志**：录屏里没有这个元素，是按用户要求加的（Codex 的快速模式在它自己那边只体现在颜色与提示文案上）。
- **Codex CLI（0.154.0）的字符串**只作为早期版本的旁证保留：`Select Reasoning Level for `、
  `More reasoning … usage limits faster`、`⚠ … can quickly consume Plus plan rate limits.` 等。

Codex 的 npm 包声明 `"license": "Apache-2.0"`；本插件借用的都是短界面文案、配色数值、
一个 SVG 路径与一个动画时长，没有复制其代码或资源。

## 7. 踩过的坑（写下来免得再犯）

| 症状 | 真因 | 现在的做法 |
|---|---|---|
| 顶档的「更快消耗使用额度」**完全看不见**（只剩模型名） | 面板用 `react-dom` **portal 到 `document.body`**，而颜色自定义属性 `--cxe-*` 定义在 `.cxe-root` 上 —— panel 在 root **外面**，`var(--cxe-purple)` 取不到 ⇒ `color-mix()` 与渐变整条声明失效，而文字又是 `-webkit-text-fill-color:transparent` + `background-clip:text`，于是**字完全透明** | CSS 里**一律用字面量色值**（`#339cff` / `#924ff7` / `#ff66ad`），不再依赖任何自定义属性；测试里加了不变量：`var(--cxe-` 出现次数必须为 0、警告渐变里不许再掺主题变量、内嵌 CSS 大括号必须平衡 |
| 滑到顶档没有警告 / 一闪而过 | 触发条件原来挂在**拖动预览**上，一边拖就把计时器跑掉了 | 触发条件改成**已提交的档位**，并且**常驻**显示（离开顶档才收） |
| 快速点击 / 快滑之后档位没变 | 拖拽下标存在 React state 里，`onPointerUp` 的闭包可能还是 `null` ⇒ 直接 return | 下标存 `useRef`（同步），另加 window 级 `pointerup` 兜底；提交后**乐观显示**目标档 |
| 顶档警告**只在第一次**能看到，之后再滑/再开面板都不弹 | 触发条件写成"从非顶档变成顶档"的边沿触发，而且用 `wasMax` 记住状态 —— 停在顶档不动的用户就再也触发不了 | 改成**每一次落在顶档的动作都重播**：拖动经过最右端 / 松手提交 / ←→ 键 / `End` / **打开面板时已在顶档**，全部调同一个 `flashWarning()`；值没变（再点一次最右端）也照样重播；2 秒后收起换回「最高 ›」，进度条/⚡/↻ 全程都在 |
| 警告做成常驻后，档位名和闪电**永远看不到** | 常驻会一直占着那一行 | 恢复成弹出 2 秒；并且**不再隐藏 ⚡ 与 ↻**（这条故意不照 Codex 抄） |
| 警告期间选不了模型 | 警告层盖住了「档位大字 + 模型名」两行并一起隐藏 | 只盖**档位大字那一行**，模型名保持可见可点 |

## 8. 运行环境

- **React** 不在本仓库里打包：`client.js` 通过宿主的模块加载器 `require('react')` 取（peer）。
- 预览页与离线测试用仓库自带的**极小 React 运行时**（`test/mini-react.mjs`，原创）。
- 预览页里的 DSH 主题色值是从本机 `@deepseek-ai/dsh-client-ui-theme` 产物里读出来抄进去的；
  插件本体一律用 CSS 变量引用，不写死 DSH 的颜色。

本插件**零运行时依赖、不联网、无遥测**。