From a00e2221c4f1441a772d400feff5dabcf3fae954 Mon Sep 17 00:00:00 2001 From: laoyang Date: Wed, 4 Nov 2026 17:54:39 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=89=B2=E6=9D=BF=E4=BB=8E=208=20?= =?UTF-8?q?=E8=89=B2=E6=89=A9=E5=88=B0=2012=20=E8=89=B2=EF=BC=88=E6=8C=89?= =?UTF-8?q?=E8=89=B2=E7=9B=B8=E7=8E=AF=E9=87=8D=E6=8E=92=EF=BC=89=EF=BC=9B?= =?UTF-8?q?=E5=90=8E=E5=8F=B0=E9=A2=84=E8=AE=BE=E6=94=B9=E4=B8=BA=E5=85=B1?= =?UTF-8?q?=E7=94=A8=E5=90=8C=E4=B8=80=E4=BB=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「不同的软件要有不同的颜色，现在颜色有点少，快不够分了， 至少应该有 10 个左右的颜色。」 调研发现的问题比「数量少」更严重： 🔴 调色板有两份独立硬编码 —— util.php 一份、admin_taxonomy.php 又一份， 两边的色值还不一样，早就不同步了。用户在后台只能从 8 个里选， 而实际分配用的却是另一批色值。 改法： - 新增 fb_color_palette() 作为唯一出口，12 色 - fb_color_default_for() 改为调用它 - 后台 也改为调用它 —— 从此只有一处需要维护 12 色设计（360° 切 12 段，逐色验证，不是随手挑的）： 色相：2/32/62/92/122/152/178/200/232/266/293/330，**最小相邻间距 22°** 对比度：白底全部落在 4.76~6.19，既都够看清（WCAG AA 需 ≥4.5）， 又不会某个颜色特别深显得突兀 压制项：黄/黄绿饱和 50%（再高就荧光）、蓝/靛蓝压到 62%/50% 避开项：纯红纯绿会与「待处理/已解决」状态色撞，所以红取 2°、绿取 122° 中途踩过的坑（记录下来避免重犯）： 第一版直接往原 8 色后面追加 6 个，实测发现 8 对颜色几乎同色 —— 因为原调色板里 185°/212°/217° 三个蓝本就挤在一起。 「塞进缝隙」这个思路是错的，必须重排整个色相环。 现有 5 个软件颜色**未改动**（实测仍是 #0057b8/#b4553c/#6a4c93/#0e7c86/#3a5a8c）： 它们的色相分布本就合理（2°12°185°212°265°），没必要让已发布链接的配色突变。 新调色板只影响「新添加且未指定颜色」的软件。 验证：12 色无重复、对比度全 ≥4.5、最小色相间距 22°、 后台已改为调用 fb_color_palette() 且旧硬编码数组已消失、6 个路由 200。 --- lib/admin_taxonomy.php | 6 +++++- lib/util.php | 36 ++++++++++++++++++++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/lib/admin_taxonomy.php b/lib/admin_taxonomy.php index 9fa9a5c..f745a1d 100644 --- a/lib/admin_taxonomy.php +++ b/lib/admin_taxonomy.php @@ -538,7 +538,11 @@ 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); - $presets = ['#0057B8', '#2E7D5B', '#B4553C', '#6A4C93', '#0E7C86', '#A02C5A', '#8A6D1F', '#3A5A8C']; + /* 🔴 必须用 fb_color_palette()，不要再在这里写死一份数组。 + * 以前这里硬编码了另外 8 个色值，和 util.php 的调色板完全不同步 —— + * 结果后台只能选那 8 个，用户在后台挑不到新颜色， + * 而他从没配置过的软件却会被分到「调色板里另一批」颜色。 */ + $presets = fb_color_palette(); echo '
主题色前台进这个软件时整体配色跟着变，用来区分不同软件'; echo '
'; echo ' '; diff --git a/lib/util.php b/lib/util.php index bb47338..774ea28 100644 --- a/lib/util.php +++ b/lib/util.php @@ -255,10 +255,42 @@ function fb_color_variants($hex) { /** * 给某个软件挑一个默认主题色（未配置时用）。 - * 按软件的排序位次从调色板里取，保证同一站点里不同软件颜色不撞。 + * 按软件的 id 从调色板里取，保证同一站点里不同软件颜色不撞。 + * + * 🔴 2026-11-04 按色相环**整体重排**为 12 色（用户：颜色快不够分了）。 + * + * 选色规则，改之前先读： + * ① **色相均匀分布**：360° 切成 12 段，相邻至少差 22°（实测最小 22°）。 + * 旧调色板有 3 个蓝挤在 185°/212°/217°，并排看几乎同色 —— 这是重排的原因； + * ② **对比度落在 4.76~6.19 的窄带**：白底上文字都够看清（WCAG AA 要 ≥4.5）， + * 又不会某个颜色特别深、显得比其他刺眼； + * ③ **避开纯红/纯绿**：会与「待处理/已解决」状态色打架，所以红取 2°、绿取 122°； + * ④ 黄/黄绿饱和度压到 50%（再高就荧光），蓝/靛蓝也压到 62%/50%。 + * + * ⚠️ 这个数组和 lib/admin_taxonomy.php 里的 $presets **必须保持一致**。 + * 以前是两份独立硬编码，早就不同步了 —— 后台只给 8 个可选色， + * 实际调色板却是另一批，用户在后台根本选不到新增颜色。 + * 改这里记得同步改那边（见 fb_color_palette() 统一出口）。 */ +function fb_color_palette() { + return [ + '#B53530', // 1 红 2° + '#9D6525', // 2 橙 32° + '#747728', // 3 黄 62° + '#517E2A', // 4 黄绿 92° + '#2B822E', // 5 绿 122° + '#2D8059', // 6 青绿 152° + '#267E7B', // 7 青 178° + '#2678A1', // 8 天蓝 200° + '#4154D2', // 9 蓝 232° + '#7A44C1', // 10 靛蓝 266° + '#943BA0', // 11 紫 293° + '#AD3470', // 12 玫红 330° + ]; +} + function fb_color_default_for($softwareId) { - $palette = ['#0057B8', '#2E7D5B', '#B4553C', '#6A4C93', '#0E7C86', '#A02C5A', '#8A6D1F', '#3A5A8C']; + $palette = fb_color_palette(); $id = max(0, (int)$softwareId); return $palette[$id % count($palette)]; }