主题色改为完整色板：画布 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
This commit is contained in:
+20
-24
@@ -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-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 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>';
|
||||
// 色相条
|
||||
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>';
|
||||
|
||||
+1
-1
@@ -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); }
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user