laoyang
ad1b0eedf4
主题色改为自绘取色面板（任意取色）；图标上传加即时预览与状态提示
一、颜色不够丰富 → 点击弹取色面板
用户：「还是不行，颜色还是不够丰富。让用户选择吧：点击之后弹出一个颜色选择器。」
原来只有一个原生 <input type=color> 小方块，用户不知道能点，
而且系统面板各浏览器样式不一、只能取纯色。
改成自绘面板：
色相/饱和度渐变板（Canvas）+ 明度滑块 + 十六进制输入 + 确定
12 个预设圆点降级为快捷方式，真正的能力是任意取色
交互：点色块弹出（下方空间不够自动翻上方）、板内拖动实时更新、
十六进制可手输、点确定或面板外关闭、Esc 关闭
⚠️ 光标定位踩了两个坑，都写进注释了：
① 不能用 canvas.offsetLeft（相对 offsetParent，受父级 padding 影响，
实测算出 236px 超出画布宽度 226px）；要用两个 getBoundingClientRect 相减
② canvas 显示尺寸受 CSS width:100% 影响，≠ 内部像素 220×150，
必须用 rect.width 而不是 canvas.width
二、图标上传没反馈
用户：「上传的图标没有显示，也没有上传成功、失败之类的提示信息。」
后端逻辑完整（格式/大小/尺寸/存储模式都校验了），问题在**前端零反馈**：
裸 <input type=file>，选完文件什么都不发生，而提示条在页面顶部容易被错过。
加了 bindIconUpload()：
① 选中文件立刻 FileReader 本地预览，不等提交
② 显示文件名 + 尺寸 + 大小，让用户确认选对了
③ 选之前就拦掉明显不合格的（格式/超 2MB/小于 32×32/空文件）
④ 非正方形给出警告（显示时会被裁切）
⚠️ 前端校验只是体验优化，绝不能当安全边界 ——
真正的校验仍在 PHP 的 fb_icon_store_upload() 里。
验证（用独立测试页 + 浏览器实测，不登录后台、不动数据）：
面板初始隐藏 → 点击后 248×246 出现
Canvas 四角像素分别为灰白/蓝/黑 → 渐变确实画出来了
板上取色 → 隐藏字段 #2178d9 同步到按钮文字/十六进制框/预览色
点预设 → #2B822E；手输 → #a020f0；色相滑条 120° → #20f020
光标中心 (238,54) 落在画布区域 (11..237, 11..161) 内
4 个路由 200
2026-11-04 18:52:45 +08:00
..
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-11-04 18:52:45 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-09-28 20:34:37 +08:00
2026-11-04 18:52:45 +08:00
