feat: 弹出式颜色选择器 + 图标预览旁颜色入口

- showColorPickerPopup: 新增独立弹窗颜色选择器,支持最近使用颜色(8个)、RGB滑块实时调色、常用色网格、透明度滑块
- 图标预览区实时反馏,确定后自动保存到最近列表
- 在 ShortX 图标预览卡片旁新增“颜色”按钮,直接打开颜色选择器
- 更新 README 文档
- 修复调色板卡片未加入 form 的问题
This commit is contained in:
Hermes
2026-04-20 20:32:06 +08:00
parent 99547894b6
commit 86a4ed7927
2 changed files with 201 additions and 22 deletions

View File

@@ -130,7 +130,6 @@ ToolHub/
按钮编辑页里的 ShortX 图标选择器现已改为:
- **ShortX 图标名称编辑框已取消**,改为预览卡片 + 图标库点选
- **图标颜色支持折叠式完整调色板**,支持常用色、最近 5 色、透明度调节、RGB 三色调色器0-255并可切回跟随主题
- **分页模式**,不再一次性塞入大批图标
- **图标列表按当前可用宽度自动排列列数,并结合可见高度计算每页容量**
- 保留 **搜索 / 分类 / 上一页 / 下一页**
@@ -138,12 +137,28 @@ ToolHub/
- 收起后再次点击 **展开图标库** 可正常重新打开
当前交互要点:
1. 图标库与调色板默认收起,点击 **展开图标库 / 展开调色板** 后打开
2. 常用颜色会按色相自动排序,主题色固定在最前,并像 ShortX 图标列表一样按当前可用宽度自动排布
3. 列数按当前可用宽度自动计算,屏幕更宽时一页可显示更多图标
4. 每页容量按自动列数 × 当前可见行数实时计算
5. 搜索、切分类、翻页时都会回到顶部,减少卡顿感和误触
6. 选中图标后自动回填并收起图标库
1. 图标库默认收起,点击 **展开图标库** 后打开
2. 列数按当前可用宽度自动计算,屏幕更宽时一页可显示更多图标
3. 每页容量按自动列数 × 当前可见行数实时计算
4. 搜索、切分类、翻页时都会回到顶部,减少卡顿感和误触
5. 选中图标后自动回填并收起图标库
## 弹出式颜色选择器
点击 **选择颜色** 按钮弹出独立颜色选择器弹窗:
- **图标预览区**:实时显示当前图标着色效果
- **最近使用**:最多 8 个,点击直接复用,自动去重并置顶
- **常用颜色**21 色固定网格7 列),点击直接选中
- **RGB 三色调色器**:红/绿/蓝各 0-255 拖动进度条,实时同步预览
- **透明度滑块**A 通道 0-255支持半透明图标着色
- **清空按钮**:一键恢复跟随主题
- **确定按钮**:确认选择并将颜色加入最近使用列表
交互要点:
1. 拖动 RGB 滑块时,预览图标实时变色,当前颜色值文本实时更新
2. 点击常用色或最近色后RGB 滑块自动同步到对应值
3. 清空后滑块重置为 255/255/255/255白/不透明)
4. 最近颜色持久化存储,跨会话保留
---
@@ -208,3 +223,4 @@ shortx.getShortXDir() + "/ToolHub/logs/init.log"
- 优化入口返回信息格式
- **设置面板改造**:取消“执行与查看器”、“悬浮球文字/大小/颜色”设置项
- **悬浮球图标配置** 支持 ShortX 图标选择器(弹窗列表+搜索)和调色板拖拽选色
- **弹出式颜色选择器**新增独立弹窗支持最近使用颜色8 个、RGB 实时调色、常用色网格、透明度滑块,最近颜色持久化存储