主题色改为完整色板：画布 342x200，加明度条，删除右侧预设圆点

用户：「还是不对呀，需要一个完整的色板，右侧那些默认颜色就不要了。」两个改动： 1. 删掉右侧那排 12 个预设圆点（$presets 变量、CSS、JS 同步逻辑一并删）。色板本身能取任意颜色，再摆一排样例是重复，还挤占横向空间。 2. 色板做成「完整」的：面板 248×246 → 372×357 画布 226×150 → 342×200（太小拖着不好定位颜色）新增明度条，底色随当前色相实时刷新 —— 否则永远是灰阶，用户看不出拖到那里会得到什么颜色面板加标题「选择颜色」，按钮文案「确定」→「完成」顺带简化光标定位：原来 cursor 挂在 .cp 里，要靠两个 getBoundingClientRect 相减算偏移；现在改挂到 .cp-sv-wrap（与 canvas 同级），坐标直接相对 canvas 算，少一层偏移、少一个坑。验证（浏览器实测）： .color-preset 残留 0 个、.color-presets 容器 0 个面板 372×357、画布 342×200，完整在视口内色相 200° → 明度条背景 linear-gradient(#000, rgb(0,170,255))，确实跟着变画布 80%/20% 处取色 → #2996cc，光标落在画布范围内明度拖到 50% → #1a5e80（同色相压暗，符合预期）手输 #2E7D5B → 隐藏字段 #2e7d5b，点完成关闭 4 个路由 200
2026-11-04 18:57:18 +08:00
parent ad1b0eedf4
commit 338a35cacd
4 changed files with 95 additions and 84 deletions
@@ -710,18 +710,18 @@
  }

  /* ---------- 主题色选择器（后台软件编辑） ----------
-   * 用户 2026-11-04：「还是不够丰富，让用户自己选：点击之后弹出一个颜色选择器。」
+   * 用户 2026-11-04：「还是不对呀，需要一个完整的色板，右侧那些默认颜色就不要了。」
   *
-   * 原来是原生 <input type="color">：只有个小方块，用户不知道能点，
-   * 而且各浏览器系统面板样式不一。现在自带一个面板：
-   *   色相/饱和度渐变板（Canvas）+ 明度滑块 + 十六进制输入。
-   * 预设圆点保留为快捷色，但真正的能力是**任意取色**。
+   * 现在的形态是一块**完整色板**（不是小浮窗）：
+   *   340×200 的色相/饱和度画布 + 色相条 + 明度条 + 十六进制输入。
+   * 右侧那排预设圆点已删除 —— 既能任意取色，再摆一排样例就是重复。
   *
   * 交互约定：
-   *   - 点色块 → 面板出现（定位在其下方/上方，视空间而定）
-   *   - 在渐变板上拖动 → 实时更新；滑条调明度
-   *   - 十六进制框可手输，输入合法立即同步
-   *   - 点「确定」或点面板外 → 关闭，值已写入隐藏字段
+   *   - 点色块 → 色板出现（下方空间不够自动翻到上方）
+   *   - 画布内拖动 = 同时调饱和度与明度
+   *   - 色相条单独调 H；明度条单独调 V
+   *   - 十六进制框可手输，合法立即同步
+   *   - 点「完成」/ 点色板外 / Esc → 关闭（值早已写入隐藏字段）
   */
  function bindColorPicker() {
    var rows = document.querySelectorAll('[data-colorpicker]');
@@ -730,7 +730,6 @@
      (function (row) {
        var trigger = row.querySelector('[data-color-trigger]');
        var valueEl = row.querySelector('[data-color-value]');
-        var presets = row.querySelectorAll('.color-preset');
        var reset   = row.querySelector('.color-reset');
        var panel   = row.querySelector('[data-color-panel]');
        if (!trigger || !valueEl || !panel) { return; }
@@ -738,6 +737,7 @@
        var canvas = panel.querySelector('[data-cp-sv]');
        var cursor = panel.querySelector('[data-cp-cursor]');
        var hueEl  = panel.querySelector('[data-cp-hue]');
+        var valEl  = panel.querySelector('[data-cp-val]');   // 明度条（可能不存在，做兼容）
        var prevEl = panel.querySelector('[data-cp-prev]');
        var hexEl  = panel.querySelector('[data-cp-hex]');
        var okBtn  = panel.querySelector('[data-cp-ok]');
@@ -801,17 +801,16 @@
        }

        function moveCursor() {
-          /* ⚠️ 两个坑，都踩过：
-           *  ① cursor 是 position:absolute 相对 .cp 定位，canvas 在 .cp 的
-           *     内边距里侧 —— 要补 offsetLeft/offsetTop，否则整体偏移；
-           *  ② canvas 的**显示尺寸**受 CSS width:100% 影响，不等于其内部
-           *     像素宽高（220×150）。按内部尺寸算会越拉越偏。
+          /* cursor 现在是 .cp-sv-wrap 的子元素（和 canvas 同级），
+           * 所以坐标可以直接相对 canvas 自己算 —— 不用再管 .cp 的 padding：
+           *   left/top 相对 wrap，wrap 和 canvas 左/上边重合。
+           * 但仍要注意：canvas 显示尺寸（CSS width:100%）≠ 内部像素宽高，
           * 必须用 getBoundingClientRect() 的宽高。 */
-          var rect = canvas.getBoundingClientRect();
-          var w = rect.width || canvas.width;
-          var h = rect.height || canvas.height;
-          cursor.style.left = (canvas.offsetLeft + hsv.s * w) + 'px';
-          cursor.style.top  = (canvas.offsetTop + (1 - hsv.v) * h) + 'px';
+          var br = canvas.getBoundingClientRect();
+          var w = br.width || canvas.width;
+          var h = br.height || canvas.height;
+          cursor.style.left = (hsv.s * w) + 'px';
+          cursor.style.top  = ((1 - hsv.v) * h) + 'px';
          cursor.style.background = curHex();
        }

@@ -824,16 +823,19 @@
          if (prevEl) { prevEl.style.background = hex; }
          if (!skipHex && hexEl) { hexEl.value = hex.toUpperCase(); }
          hueEl.value = Math.round(hsv.h);
+          if (valEl) { valEl.value = Math.round(hsv.v * 100); }
          drawSV();
+          drawValTrack();
          moveCursor();
-          syncPresets(hex);
        }

-        function syncPresets(v) {
-          for (var k = 0; k < presets.length; k++) {
-            var same = (presets[k].getAttribute('data-color') || '').toLowerCase() === (v || '').toLowerCase();
-            if (same) { presets[k].classList.add('on'); } else { presets[k].classList.remove('on'); }
-          }
+        /* 明度条的底色要跟着当前色相变 —— 否则永远是灰阶，
+         * 用户看不清"拖到这里会得到什么颜色"。 */
+        function drawValTrack() {
+          if (!valEl) { return; }
+          var pure = hsvToRgb(hsv.h, hsv.s, 1);
+          var top = rgbToHex(pure[0], pure[1], pure[2]);
+          valEl.style.background = 'linear-gradient(to right, #000, ' + top + ')';
        }

        function setHex(hex, skipHex) {
@@ -893,6 +895,14 @@
          syncAll();
        });

+        // ---- 明度滑条 ----
+        if (valEl) {
+          valEl.addEventListener('input', function () {
+            hsv.v = (parseFloat(this.value) || 0) / 100;
+            syncAll();
+          });
+        }
+
        // ---- 十六进制手输 ----
        hexEl.addEventListener('input', function () {
          var v = this.value.trim();
@@ -903,21 +913,15 @@

        okBtn.addEventListener('click', function () { closePanel(); });

-        // ---- 预设 / 用默认 ----
-        for (var j = 0; j < presets.length; j++) {
-          presets[j].addEventListener('click', function () {
-            setHex(this.getAttribute('data-color') || '');
-          });
-        }
+        // ---- 用默认（清空 = 保存后回落到按 id 取的默认色）----
        if (reset) {
          reset.addEventListener('click', function () {
-            // 清空 = 保存后回落到按 id 取的默认色
            valueEl.value = '';
            valueEl.setAttribute('name', 'color');
-            syncPresets('');
            trigger.style.setProperty('--cur', '#cccccc');
            var hexTxt = trigger.querySelector('.color-trigger-hex');
            if (hexTxt) { hexTxt.textContent = '跟随默认'; }
+            closePanel();
          });
        }

@@ -387,9 +387,9 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
  border-radius:9px; background:var(--card); cursor:pointer; flex:none;
 }

-/* ---------- 自绘取色面板 ----------
- * 用户 2026-11-04：「点击之后弹出一个颜色选择器，让用户自己选。」
- * 点击色块 → 面板出现在其下方；下方空间不够时翻到上方（JS 加 .cp-up）。 */
+/* ---------- 自绘色板 ----------
+ * 用户 2026-11-04：「需要一个完整的色板，右侧那些默认颜色就不要了。」
+ * ⇒ 面板做大（宽 372），色板画布 340×200；右侧预设圆点已删除。 */
 .color-trigger{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 12px 5px 6px; height:34px;
@@ -405,52 +405,63 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
 }
 .color-trigger-hex{font-weight:600; letter-spacing:.2px}
+.color-trigger-caret{font-size:10px; color:var(--muted); margin-left:1px}

 .cp{
  position:absolute; top:calc(100% + 8px); left:0; z-index:80;
-  width:248px; padding:10px;
+  width:372px; padding:14px;
  background:var(--card); border:1px solid var(--line-strong);
-  border-radius:12px; box-shadow:0 10px 30px rgba(16,24,40,.16);
-  user-select:none;
+  border-radius:14px; box-shadow:0 12px 36px rgba(16,24,40,.20);
+  user-select:none; box-sizing:border-box;
 }
 .cp.cp-up{top:auto; bottom:calc(100% + 8px)}
+.cp-hd{
+  font-size:12.5px; font-weight:700; color:var(--muted);
+  letter-spacing:.3px; margin:0 0 10px;
+}
+/* 画布容器：相对定位，光标挂在这里面，坐标计算就不用管面板 padding */
+.cp-sv-wrap{position:relative; border-radius:9px; overflow:hidden; line-height:0}
 .cp-sv{
-  display:block; width:100%; height:150px; border-radius:8px;
+  display:block; width:100%; height:200px; border-radius:9px;
  cursor:crosshair;
 }
 .cp-cursor{
-  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
+  position:absolute; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border:2px solid #fff; border-radius:50%; pointer-events:none;
-  box-shadow:0 0 0 1px rgba(0,0,0,.35);
-  /* 位置由 JS 写入 left/top，相对面板内边距（10px）计算，这里不加偏移 */
+  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
+}
+/* 两条滑条：色相 + 明度 */
+.cp-slider{margin:11px 0 0}
+.cp-slider input[type=range]{
+  -webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:7px;
+  outline:none; cursor:pointer; display:block;
 }
-.cp-hue{margin:9px 0 8px}
 .cp-hue input[type=range]{
-  -webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:6px;
  background:linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-  outline:none; cursor:pointer;
 }
-.cp-hue input[type=range]::-webkit-slider-thumb{
-  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
-  background:#fff; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); cursor:pointer;
+.cp-val input[type=range]{background:linear-gradient(to right, #000, #fff)}
+.cp-slider input[type=range]::-webkit-slider-thumb{
+  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
+  background:#fff; border:2px solid #fff;
+  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25); cursor:pointer;
 }
-.cp-hue input[type=range]::-moz-range-thumb{
-  width:14px; height:14px; border-radius:50%; background:#fff;
+.cp-slider input[type=range]::-moz-range-thumb{
+  width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); cursor:pointer;
 }
-.cp-foot{display:flex; align-items:center; gap:7px}
+.cp-foot{display:flex; align-items:center; gap:8px; margin-top:13px}
 .cp-preview{
-  width:26px; height:26px; border-radius:7px; flex:none;
+  width:30px; height:30px; border-radius:8px; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
 }
 .cp-hex{
-  flex:1; min-width:0; height:28px; padding:0 8px;
-  border:1px solid var(--line-strong); border-radius:7px;
-  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px;
+  flex:1; min-width:0; height:30px; padding:0 9px;
+  border:1px solid var(--line-strong); border-radius:8px;
+  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px;
  text-transform:uppercase; background:var(--card); color:var(--fg);
 }
-.cp-ok{flex:none; padding:5px 11px !important; font-size:12.5px !important}
+.cp-ok{flex:none; padding:6px 14px !important; font-size:13px !important}
 .color-presets{display:flex; gap:6px; flex-wrap:wrap}
 .color-preset{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
@@ -538,44 +538,40 @@ function fb_admin_taxonomy_page($pdo, $editSw, $editCat) {
    // 主题色：前台按软件换色，用短链接进不同软件一眼就能区分
    $curColor  = $esw ? fb_color_norm((string)$esw['color']) : '';
    $sugColor  = $curColor !== '' ? $curColor : fb_color_default_for($esw ? (int)$esw['id'] : 0);
-    /* 🔴 必须用 fb_color_palette()，不要再在这里写死一份数组。
-     *    以前这里硬编码了另外 8 个色值，和 util.php 的调色板完全不同步 ——
-     *    结果后台只能选那 8 个，用户在后台挑不到新颜色。 */
-    $presets   = fb_color_palette();
-    /* 颜色选择：**点色块弹出取色面板**（色相/饱和度渐变 + 明度条 + 十六进制），
-     * 而不是只给一排预设圆点。
-     * 用户 2026-11-04：「还是不够丰富，让用户自己选：点击之后弹出一个颜色选择器。」
-     * ⇒ 预设只是快捷方式，真正要给的是**任意取色**能力。
-     *   原生 <input type="color"> 只有一个小方块，用户不知道能点，
-     *   而且它的系统面板不在我们控制内（各浏览器样式不一）。
-     *   这里自带一个面板：Canvas 渐变 + 拖动，谁都看得懂怎么用。 */
+    /* 颜色选择：**点色块弹出一整块色板**。
+     * 用户 2026-11-04：「还是不对呀，需要一个完整的色板，右侧那些默认颜色就不要了。」
+     * ⇒ ① 右侧那排预设圆点删除，界面更干净，能力靠色板本身（任意取色）覆盖；
+     *   ② 色板要"完整"：足够大的色相/饱和度画布 + 色相条 + 明度条 +
+     *      十六进制输入。太小会让人觉得是"玩具"，拖着不好定位颜色。
+     * ⚠️ 不再需要 $presets：色板本身就能取任意颜色，
+     *    留着那排小圆点反而和色板重复、还占横向空间（用户明确要求去掉）。 */
    echo '  <div class="field"><span>主题色<i class="hint">前台进这个软件时整体配色跟着变，用来区分不同软件</i></span>';
    echo '    <div class="color-row" data-colorpicker>';
    echo '      <button type="button" class="color-trigger" data-color-trigger'
       . ' style="--cur:' . e($sugColor) . '" title="点击选择颜色">'
       . '        <span class="color-trigger-chip"></span>'
       . '        <span class="color-trigger-hex">' . e(strtoupper($sugColor)) . '</span>'
+       . '        <span class="color-trigger-caret">▾</span>'
       . '      </button>';
    echo '      <input type="hidden" name="color" value="' . e($sugColor) . '" data-color-value>';
-    // 预设作为快捷色（点了就直接生效），保留但不占主位
-    echo '      <div class="color-presets" aria-label="常用颜色">';
-    foreach ($presets as $pc) {
-        $on = strcasecmp($pc, $sugColor) === 0 ? ' on' : '';
-        echo '<button type="button" class="color-preset' . $on . '" data-color="' . e($pc)
-           . '" style="background:' . e($pc) . '" title="' . e($pc) . '"></button>';
-    }
-    echo '      </div>';
    echo '      <button type="button" class="btn sm color-reset">用默认</button>';

-    /* 取色面板：默认隐藏，点色块才出现。位置由 JS 定位到触发按钮下方。 */
+    /* 色板：默认隐藏，点色块才出现。 */
    echo '      <div class="cp" data-color-panel hidden>';
-    echo '        <canvas class="cp-sv" width="220" height="150" data-cp-sv></canvas>';
+    echo '        <div class="cp-hd">选择颜色</div>';
+    // 画布做大：340×200，拖起来才好定位
+    echo '        <div class="cp-sv-wrap">';
+    echo '          <canvas class="cp-sv" width="340" height="200" data-cp-sv></canvas>';
    echo '          <div class="cp-cursor" data-cp-cursor></div>';
-    echo '        <div class="cp-hue"><input type="range" min="0" max="360" value="0" data-cp-hue aria-label="色相"></div>';
+    echo '        </div>';
+    // 色相条
+    echo '        <div class="cp-slider cp-hue"><input type="range" min="0" max="360" value="0" data-cp-hue aria-label="色相"></div>';
+    // 明度条：背景由 JS 按当前色相刷新
+    echo '        <div class="cp-slider cp-val"><input type="range" min="0" max="100" value="100" data-cp-val aria-label="明度"></div>';
    echo '        <div class="cp-foot">';
    echo '          <span class="cp-preview" data-cp-prev></span>';
    echo '          <input type="text" class="cp-hex" maxlength="7" value="' . e(strtoupper($sugColor)) . '" data-cp-hex aria-label="十六进制颜色值">';
-    echo '          <button type="button" class="btn sm cp-ok" data-cp-ok>确定</button>';
+    echo '          <button type="button" class="btn sm cp-ok" data-cp-ok>完成</button>';
    echo '        </div>';
    echo '      </div>';
    echo '    </div>';
@@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) {
    define('FB_ROOT', dirname(__DIR__));
    // 静态资源版本号：改 assets/ 下的 css/js 后把这个数字 +1，
    // 让浏览器与 CDN 缓存失效。全站只此一处，别再往页面里写死数字。
-    if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 41); }
+    if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 43); }
 }

 /* ------------------------------------------------------------------