双向联动通过input[type="color"]与data-color色块交互实现：点击色块设value并派发input事件；监听input事件比对value与data-color（统一小写#rrggbb）并高亮匹配项；需处理初始同步和移动端兼容性。
调色盘与预设颜色双向联动的核心逻辑
实现 input[type="color"] 与预设颜色按钮（如色块、色卡）的双向联动，关键在于：用户在调色盘选色 → 同步更新预设色块的背景色和状态；点击预设色块 → 反向设置 input 的 value 值并触发 input 事件。注意浏览器原生 color input 不支持自定义 UI，所以“调色盘”实际就是它本身，“预设颜色”需额外用 div/按钮模拟。
绑定预设色块点击 → 同步 color input
给每个预设色按钮添加 data-color 属性存储颜色值，并监听点击：
- 获取点击元素的
dataset.color - 赋值给
colorInput.value = color - 手动触发
input事件（确保监听器能响应），例如：colorInput.dispatchEvent(new Event('input', { bubbles: true }));
监听 color input 变化 → 高亮匹配的预设色块
为 input[type="color"] 绑定 input 事件（不是 change，因拖拽实时生效）：
- 读取当前
event.target.value（格式为#rrggbb） - 遍历所有预设色块，比对
dataset.color是否完全相等（注意大小写统一，建议转小写比较） - 移除所有色块的激活类（如
active），给匹配项添加该类
细节注意事项
颜色格式要一致：预设色块的 data-color 必须用 #rrggbb 格式（6位十六进制），且字母小写；input.value 默认返回小写 6 位，避免用 rgb() 或 3 位简写（如 #f00）导致比对失败。
初始状态同步：页面加载后，应根据 input 的默认值（或 localStorage 缓存值）主动高亮对应预设色块，否则首次打开不联动。
移动端兼容性：部分安卓 WebView 对 input[type="color"] 支持较弱，可降级为纯 CSS 色块 + 自定义弹层调色器，但原生方案在 iOS 和主流安卓浏览器中表现稳定。
