laoyang/FeedLite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
用户：「还是不对呀，需要一个完整的色板，右侧那些默认颜色就不要了。」

两个改动：
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:
laoyang
2026-11-04 18:57:18 +08:00
parent ad1b0eedf4
commit 338a35cacd
4 changed files with 95 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+35 -24
View File
@@ -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;