# 11 — 取色器的调色板、对勾与吸管

Status: resolved
Type: task

## 需求（用户原话）

> 吸管是手动从当前屏幕的任一点取色，勾选是选择指定的预设颜色，补充各个预设颜色信息图片，最后一张图是使用吸管取色时，会自动在最后一行给出两个邻近颜色，另外最后一行第一个是当前吸管所在的颜色。关于颜色选择的其他信息，可查找官方文档查看

附 17 张图：15 个预设色各一张（对勾 + 十六进制值），以及吸管取色时的一张。

## 官方文档查证

[User Properties](https://docs.wallpaperengine.io/en/web/customization/properties.html) 确认了取值格式：
"The color property will return three numeric values, separated by a space character (`1.0 0.1 0.25` for example)"
——与 `colorToCss` / `cssToColor` 的实现一致。

[Display Conditions](https://docs.wallpaperengine.io/en/web/customization/displaycondition.html) 确认了 condition 的写法就是
`showclock.value == true`，与 `conditionMet` 的实现一致（文档称其为 "JavaScript-compatible `if` condition"）。

**但文档没有描述取色器的界面**（调色板、吸管、对勾都不在文档里）。所以那 17 张截图就是规格。

## ① 调色板：15 个预设色的准确值

原来是我按视觉估的，好几个不对。对着截图逐个改成官方值：

| 行 | 列 1 | 列 2 | 列 3 |
| --- | --- | --- | --- |
| 1 | `#ffffff` | `#c0c0c0` | `#000000` |
| 2 | `#ff0000` | `#ffa500` | `#ffff00` |
| 3 | `#00ff00` | `#008000` | `#254117` |
| 4 | `#add8e6` | `#0000ff` | `#00008b` |
| 5 | `#00ffff` | `#800080` | `#ff00ff` |

原来错的地方：`#c8c8c8`→`#c0c0c0`、`#ff8000`→`#ffa500`、`#004000`→`#254117`、
`#000080`→`#00008b`，以及整行 `#c0c0ff/#8000ff/#ff00ff` → `#00ffff/#800080/#ff00ff`。

## ② 对勾 = 当前颜色命中了某个预设

当前颜色与某个预设色完全相等时，那个色块上加对勾。对勾颜色按色块亮度选黑或白
（`luminance < 0.5` 用白），否则深色块上根本看不见。

## ③ 吸管 = 从屏幕任意位置取色

用浏览器原生的 **EyeDropper API**（`new EyeDropper().open()`）。WE 是原生程序，自带屏幕取色；
浏览器里这是**唯一**的官方途径。本机 CEF 146 **支持**它（测试实测 `dropper.disabled === false`）。
不支持时按钮禁用并把原因写进 `title`，而不是静默失效。

取到的颜色作为新的一行加在调色板末尾，第一个就是取到的颜色，后面跟两个邻近的预设色。

## 一处推断，需要你确认

"两个邻近颜色"我按 **RGB 欧氏距离最近的两个预设色**实现。但你那张图给的是
`#3c3c3c` → 邻近显示 `#ffffff` 与 `#000000`，而按 RGB 距离算，离 `#3c3c3c` 最近的是
`#000000` 与 `#c0c0c0`，**对不上**。所以这条规则我猜错了，图省事写成了最近邻。

图里是白与黑，看起来更像"亮度轴的两端"或别的规则。等你说明真实规则再改。

另：WE 的吸管在**移动过程中**就能实时预览当前颜色（原生程序可以持续采样屏幕）；
浏览器的 EyeDropper 是一次性模态选择，没有实时回调，所以那一行是在**取色完成后**才出现。

## 验证

`tools/checks/verify-panel.mts` 新增断言，全部通过：

- 15 个预设色与官方逐个一致（逐字比对数组）
- 初始颜色 `#63269e` 不是预设色 → 没有对勾
- 把颜色改成 `#ff0000` → 对勾落到那个色块上
- 吸管按钮存在；可用/禁用两种状态都算通过，但会把实际状态与原因打出来

其余回归全绿：`pnpm check`、调试服与浏览器冒烟、四档自包含包 `file://`、静态托管预览、
6 组渲染与重构前逐像素相同。

出图：`tools/checks/shot-panel.mts` 现在出两张——面板本体与取色器。