modelstage 0.0.0-stage → 0.5.24

package/src/web/panel/color-picker.css

@@ -0,0 +1,199 @@
+/* panel/color-picker.css —— 自研调色盘的**全部**样式（组件内不写任何内联 style）
+ *
+ * 结构：
+ *   .cp-mask            全屏遮罩（点击 = 取消）
+ *   .cp-panel           面板本体（可被锚点定位）
+ *   .cp-preview         颜色预览块（背景由 --cp-preview 驱动）
+ *   .cp-rows            三行滑块（色相 / 饱和度 / 亮度）
+ *   .cp-hex             #rrggbb 输入框（非法时 .is-bad）
+ *   .cp-actions         取消 / 确定
+ *
+ * 渐变轨道为什么用 CSS 变量：
+ *   色相条是固定渐变（红→黄→绿→青→蓝→洋红）⇒ 直接写在 CSS 里；
+ *   饱和度/亮度条的端点色随当前颜色变化 ⇒ 由 JS 只设 --cp-sat-from / --cp-sat-to /
+ *   --cp-lit-from / --cp-lit-to 四个变量，渐变本身仍在 CSS 里声明。
+ *   这样"颜色值怎么变成渐变"这件事只有一处（这里），JS 不拼 background 字面量。
+ */
+
+.cp-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.cp-panel {
+  /* 定位：默认居中（遮罩是 flex 居中）；给了 anchor 时由 JS 写 left/top 并加 .is-anchored */
+  position: relative;
+  width: 268px;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--color-border, #3a3f45);
+  background: var(--color-card, #23272b);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  color: var(--color-fg, #e6e8ea);
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+.cp-panel.is-anchored {
+  position: fixed;
+  margin: 0;
+}
+
+.cp-top {
+  display: flex;
+  gap: 10px;
+  align-items: stretch;
+}
+
+.cp-preview {
+  width: 62px;
+  flex: none;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  /* 预览色只由变量决定 */
+  background: var(--cp-preview, #2a2a2a);
+  /* 棋盘格打底：半透明色也能看出是"有颜色" */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+}
+
+.cp-rows {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cp-row {
+  display: grid;
+  grid-template-columns: 14px 1fr;
+  align-items: center;
+  gap: 6px;
+}
+
+.cp-row-label {
+  font-size: 11px;
+  opacity: 0.75;
+  text-align: center;
+}
+
+/* 三条轨道共用外观，只有 background 不同 */
+.cp-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  outline: none;
+  cursor: pointer;
+}
+
+.cp-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: transparent;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.cp-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: transparent;
+}
+
+/* 色相：固定渐变（0°红 → 60°黄 → 120°绿 → 180°青 → 240°蓝 → 300°洋红 → 360°红） */
+.cp-slider--h {
+  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+}
+
+/* 饱和度：从"同亮度下的灰"到"当前色相的纯色"，端点色由 JS 给变量 */
+.cp-slider--s {
+  background: linear-gradient(to right, var(--cp-sat-from, #808080), var(--cp-sat-to, #f00));
+}
+
+/* 亮度：黑 → 当前色 → 白 */
+.cp-slider--l {
+  background: linear-gradient(to right, #000, var(--cp-lit-mid, #f00) 50%, #fff);
+}
+
+.cp-hex-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.cp-hex-label {
+  flex: none;
+  font-size: 11px;
+  opacity: 0.75;
+}
+
+.cp-hex {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 26px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border, #3a3f45);
+  background: var(--color-bg, #1b1e21);
+  color: var(--color-fg, #e6e8ea);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+.cp-hex:focus {
+  outline: 1px solid var(--color-primary, #1fc0c5);
+  border-color: var(--color-primary, #1fc0c5);
+}
+
+/* 非法：#rrggbb 之外的内容 —— 输入框标红 + 确定禁用 */
+.cp-hex.is-bad {
+  border-color: #e05252;
+  color: #ffb4b4;
+}
+
+.cp-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.cp-btn {
+  height: 26px;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border, #3a3f45);
+  background: var(--color-secondary, #2d3237);
+  color: var(--color-fg, #e6e8ea);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.cp-btn:hover {
+  border-color: var(--color-primary, #1fc0c5);
+}
+
+.cp-btn--primary {
+  border-color: var(--color-primary, #1fc0c5);
+  color: var(--color-primary, #1fc0c5);
+}
+
+.cp-btn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/src/web/panel/color-picker.js

@@ -0,0 +1,278 @@
+// panel/color-picker.js —— 自研调色盘（**纯 UI 组件，无状态**）
+//
+// 职责边界（硬约束）：
+//   只做：弹出调色盘 → 用户选完 → 回调返回一个 '#rrggbb' 字符串。
+//   不做：不碰本地存储、不调任何接口、不认识"预设"这个概念、不负责命名、不缓存上次选择。
+//   自证方式：`openColorPicker` 的函数体里只做「取值 → 校色 → 回调」，没有任何外部状态读写。
+//
+// 为什么自己写：项目零依赖（不引第三方取色器），而原生 <input type="color"> 在无头环境与
+//   部分浏览器下弹的是系统对话框，样式不可控、也无法做"十六进制输入 + 三滑块双向同步"。
+//
+// 交互口径：
+//   · HSL 三滑块驱动预览；hex 输入双向同步（合法即回写滑块，非法则标红 + 禁用确定）
+//   · Esc / 点遮罩 / 取消 ⇒ onCancel（不回调 onConfirm）
+//   · 单例：重复 open 会先销毁前一个，避免两个遮罩叠在一起
+
+import { el } from './dom.js';
+
+/** 样式表只注入一次（面板会重建，重复插入 <link> 会浪费） */
+const CSS_HREF = 'panel/color-picker.css';
+const CSS_ATTR = 'data-color-picker-css';
+
+/** 当前打开的实例（单例约束） */
+let current = null;
+
+/** 严格校验 6 位十六进制（大小写都收，输出统一小写） */
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+
+/**
+ * 规范化颜色：合法则返回小写 '#rrggbb'，否则返回 null。
+ * @param {string} v
+ * @returns {string|null}
+ */
+function normalizeHex(v) {
+  const s = String(v || '').trim();
+  return HEX_RE.test(s) ? s.toLowerCase() : null;
+}
+
+/**
+ * #rrggbb → {h,s,l}（h:0-360, s/l:0-100）。
+ * @param {string} hex 已规范化的颜色
+ * @returns {{h:number,s:number,l:number}}
+ */
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  // 不取整：取整会在「输入 hex → 转 HSL → 再转回 hex」时丢精度（实测 #8844cc 会变成 #8743cb）
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+
+/**
+ * {h,s,l} → '#rrggbb'。
+ * @param {number} h 0-360
+ * @param {number} s 0-100
+ * @param {number} l 0-100
+ * @returns {string}
+ */
+function hslToHex(h, s, l) {
+  const hh = ((h % 360) + 360) % 360 / 360;
+  const ss = Math.min(100, Math.max(0, s)) / 100;
+  const ll = Math.min(100, Math.max(0, l)) / 100;
+  const f = (n) => {
+    const k = (n + hh * 12) % 12;
+    const a = ss * Math.min(ll, 1 - ll);
+    const v = ll - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    return Math.round(255 * v).toString(16).padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+/** 注入样式表（幂等；失败不阻塞组件可用） */
+function ensureStylesheet(doc) {
+  if (doc.querySelector(`link[${CSS_ATTR}]`)) return;
+  const link = doc.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = CSS_HREF;
+  link.setAttribute(CSS_ATTR, '1');
+  (doc.head || doc.documentElement).append(link);
+}
+
+/**
+ * 打开调色盘。
+ *
+ * @param {object} opts
+ * @param {string} [opts.initial] 初始颜色 '#rrggbb'（非法/缺省时用 #000000）
+ * @param {HTMLElement} [opts.anchor] 可选锚点（就近弹出；缺省居中）
+ * @param {(color:string)=>void} opts.onConfirm 用户点确定时回调，参数是规范化后的 '#rrggbb'
+ * @param {()=>void} [opts.onCancel] 取消/Esc/点遮罩时回调
+ * @returns {{destroy: () => void}} 句柄（重复 open 会先销毁上一个）
+ */
+export function openColorPicker(opts = {}) {
+  if (current) { try { current.destroy(); } catch { /* 旧实例销毁失败不影响新开 */ } }
+
+  const doc = (opts.anchor && opts.anchor.ownerDocument) || document;
+  ensureStylesheet(doc);
+
+  const start = hexToHsl(normalizeHex(opts.initial) || '#000000');
+  let hue = start.h;
+  let sat = start.s;
+  let lit = start.l;
+  let hex = hslToHex(hue, sat, lit);
+  /** 用户直接输入且合法的原始值（滑块没动过就原样返回，避免 HSL 往返丢精度） */
+  let exactHex = null;
+  let closed = false;
+
+  const mask = el('div', 'cp-mask');
+  const panel = el('div', 'cp-panel');
+  panel.setAttribute('role', 'dialog');
+  panel.setAttribute('aria-label', '选择颜色');
+
+  const preview = el('div', 'cp-preview');
+  const rows = el('div', 'cp-rows');
+
+  /** 造一行滑块（标签 + input[type=range]） */
+  const makeRow = (label, cls, max, value) => {
+    const row = el('div', 'cp-row');
+    row.append(el('span', 'cp-row-label', label));
+    const input = el('input', `cp-slider ${cls}`);
+    input.type = 'range';
+    input.min = '0';
+    input.max = String(max);
+    input.step = '1';
+    input.value = String(value);
+    input.setAttribute('aria-label', { H: '色相', S: '饱和度', L: '亮度' }[label] || label);
+    row.append(input);
+    rows.append(row);
+    return input;
+  };
+
+  const hIn = makeRow('H', 'cp-slider--h', 360, hue);
+  const sIn = makeRow('S', 'cp-slider--s', 100, sat);
+  const lIn = makeRow('L', 'cp-slider--l', 100, lit);
+
+  const top = el('div', 'cp-top');
+  top.append(preview, rows);
+
+  const hexRow = el('div', 'cp-hex-row');
+  hexRow.append(el('span', 'cp-hex-label', '十六进制'));
+  const hexIn = el('input', 'cp-hex');
+  hexIn.type = 'text';
+  hexIn.value = hex;
+  hexIn.spellcheck = false;
+  hexIn.setAttribute('aria-label', '十六进制颜色');
+  hexRow.append(hexIn);
+
+  const actions = el('div', 'cp-actions');
+  const btnCancel = el('button', 'cp-btn', '取消');
+  btnCancel.type = 'button';
+  const btnOk = el('button', 'cp-btn cp-btn--primary', '确定');
+  btnOk.type = 'button';
+  actions.append(btnCancel, btnOk);
+
+  panel.append(top, hexRow, actions);
+  mask.append(panel);
+  (doc.body || doc.documentElement).append(mask);
+
+  /**
+   * 把当前 h/s/l 写进 DOM（预览、滑块、变量、hex）。
+   * 只设 CSS 变量与 input.value —— 不拼 background 字面量。
+   */
+  const paint = () => {
+    hex = exactHex || hslToHex(hue, sat, lit);
+    preview.style.setProperty('--cp-preview', hex);
+    // 饱和度条两端：左端同亮度灰、右端当前色相纯色
+    panel.style.setProperty('--cp-sat-from', hslToHex(hue, 0, lit));
+    panel.style.setProperty('--cp-sat-to', hslToHex(hue, 100, lit));
+    // 亮度条中点：当前色相/饱和度的"标准亮度"
+    panel.style.setProperty('--cp-lit-mid', hslToHex(hue, sat, 50));
+    hIn.value = String(hue);
+    sIn.value = String(sat);
+    lIn.value = String(lit);
+    hexIn.value = hex;
+    hexIn.classList.remove('is-bad');
+    btnOk.disabled = false;
+  };
+
+  /** 滑块 → 状态 → 重绘 */
+  const onSlide = () => {
+    hue = Number(hIn.value);
+    sat = Number(sIn.value);
+    lit = Number(lIn.value);
+    exactHex = null;   // 滑块一动就按 HSL 算，原始输入值不再代表当前色
+    paint();
+  };
+
+  /** hex 输入 → 合法则回写滑块；非法标红并禁用确定 */
+  const onHexInput = () => {
+    const ok = normalizeHex(hexIn.value);
+    if (!ok) {
+      hexIn.classList.add('is-bad');
+      btnOk.disabled = true;
+      return;
+    }
+    const hsl = hexToHsl(ok);
+    hue = hsl.h; sat = hsl.s; lit = hsl.l;
+    exactHex = ok;     // 原样保留用户输入的精确值
+    paint();
+  };
+
+  hIn.addEventListener('input', onSlide);
+  sIn.addEventListener('input', onSlide);
+  lIn.addEventListener('input', onSlide);
+  hexIn.addEventListener('input', onHexInput);
+
+  /** 关闭并清理（先标记 closed，避免 Esc 与遮罩点击重复回调） */
+  const close = (confirmed) => {
+    if (closed) return;
+    closed = true;
+    doc.removeEventListener('keydown', onKey, true);
+    try { mask.remove(); } catch { /* 已被移除 */ }
+    current = null;
+    if (confirmed) {
+      const v = normalizeHex(hexIn.value) || hex;
+      if (typeof opts.onConfirm === 'function') opts.onConfirm(v);
+    } else if (typeof opts.onCancel === 'function') opts.onCancel();
+  };
+
+  /** Esc 只取消（捕获阶段，避免被页面其它 Esc 处理抢先） */
+  function onKey(e) {
+    if (e.key === 'Escape') { e.stopPropagation(); close(false); }
+  }
+  doc.addEventListener('keydown', onKey, true);
+
+  btnCancel.addEventListener('click', () => close(false));
+  btnOk.addEventListener('click', () => { if (!btnOk.disabled) close(true); });
+  mask.addEventListener('click', (e) => { if (e.target === mask) close(false); });
+
+  // 就近弹出：贴着锚点下方；越界时翻到上方/左移，保证整块在视口内
+  if (opts.anchor && typeof opts.anchor.getBoundingClientRect === 'function') {
+    /**
+     * 定位一次。
+     * 为什么要在 rAF 里再跑一次：刚 append 的面板还没布局，getBoundingClientRect 尺寸为 0，
+     *   拿 0 尺寸判越界会把坐标错误地夹到视口边缘（实测跑到左下角 8px）。
+     */
+    const place = () => {
+      const r = opts.anchor.getBoundingClientRect();
+      const box = panel.getBoundingClientRect();
+      const vw = window.innerWidth || 0;
+      const vh = window.innerHeight || 0;
+      let left = r.left;
+      let top = r.bottom + 6;
+      if (vw && box.width && left + box.width > vw - 8) left = Math.max(8, vw - box.width - 8);
+      if (vh && box.height && top + box.height > vh - 8) top = Math.max(8, r.top - box.height - 6);
+      panel.classList.add('is-anchored');
+      // 坐标是运行时算出来的动态值（契约允许的唯一动态例外）
+      panel.style.left = `${Math.round(left)}px`;
+      panel.style.top = `${Math.round(top)}px`;
+    };
+    place();
+    requestAnimationFrame(place);
+  }
+
+  paint();
+
+  const handle = {
+    destroy() {
+      if (closed) return;
+      closed = true;
+      doc.removeEventListener('keydown', onKey, true);
+      try { mask.remove(); } catch { /* 已被移除 */ }
+      if (current === handle) current = null;
+    },
+  };
+  current = handle;
+  return handle;
+}

package/src/web/panel/dialog.css

@@ -0,0 +1,116 @@
+/* panel/dialog.css —— 自绘弹窗的全部样式（组件内不写内联 style）
+ *
+ * 配色一律走主题变量（--color-*），这样夜间/日间主题切换时弹窗跟着变，
+ *   不会出现"深色面板 + 系统白底弹窗"的视觉断层。
+ * z-index 10000：必须高于现有最高层（调试日志浮层 9500），否则被浮层盖住。
+ */
+
+.dlg-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.dlg-panel {
+  width: 320px;
+  max-width: calc(100vw - 32px);
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid var(--color-border, #3a3f45);
+  background: var(--color-card, #23272b);
+  color: var(--color-fg, #e6e8ea);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+}
+
+.dlg-title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.dlg-message {
+  margin: 0 0 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  /* 用前景色 + 降透明度：--color-muted 在深色底上对比太低（实拍几乎看不见） */
+  color: var(--color-fg, #e6e8ea);
+  opacity: 0.78;
+  /* 长名称（图片名可能很长）要能换行，不能撑破面板 */
+  word-break: break-word;
+}
+
+/* 输入行：输入框 + 右侧实时字数 */
+.dlg-input-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.dlg-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #3a3f45);
+  background: var(--color-bg, #1b1e21);
+  color: var(--color-fg, #e6e8ea);
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.dlg-input:focus {
+  outline: 1px solid var(--color-primary, #1fc0c5);
+  border-color: var(--color-primary, #1fc0c5);
+}
+
+.dlg-counter {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--color-fg, #e6e8ea);
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.dlg-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.dlg-btn {
+  /* 44px：手机手指友好的最小高度 */
+  min-height: 44px;
+  min-width: 84px;
+  padding: 0 16px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #3a3f45);
+  background: var(--color-secondary, #2d3237);
+  color: var(--color-fg, #e6e8ea);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dlg-btn:hover { border-color: var(--color-primary, #1fc0c5); }
+
+.dlg-btn--primary {
+  border-color: var(--color-primary, #1fc0c5);
+  color: var(--color-primary, #1fc0c5);
+}
+
+/* 危险操作的确定键：红色，与"删除"语义一致 */
+.dlg-btn--danger {
+  border-color: #e05a5a;
+  color: #fff;
+  background: #c94444;
+}
+
+.dlg-btn--danger:hover { border-color: #ff7b7b; }