vome-core 0.0.98 → 0.0.100

package/dist/admin/crud/components/vm-color-picker.vue

@@ -1,34 +1,181 @@
 <template>
-  <div class="vm-color-picker" :class="{ 'is-disabled': disabled }">
-    <label class="vm-color-picker__swatch" :title="disabled ? undefined : '选择颜色'">
+  <div
+    ref="rootRef"
+    class="vm-color-picker"
+    :class="{ 'is-disabled': disabled, 'is-sm': size === 'sm', 'is-open': open }"
+  >
+    <button
+      ref="triggerRef"
+      type="button"
+      class="vm-color-picker__swatch"
+      :disabled="disabled"
+      :title="disabled ? undefined : '选择颜色'"
+      @click="toggle"
+    >
       <span
         class="vm-color-picker__swatch-fill"
         :style="{ background: cssColor }"
       />
-      <input
-        type="color"
-        class="vm-color-picker__native"
-        :value="pickerValue"
-        :disabled="disabled"
-        @input="onPicker"
-      />
-    </label>
+    </button>
+
     <input
       type="text"
       class="vm-color-picker__input"
-      :value="display"
-      :placeholder="placeholder"
+      :value="inlineHex"
+      :placeholder="placeholderText"
       :disabled="disabled"
       spellcheck="false"
       autocomplete="off"
-      @input="onText"
-      @blur="onBlur"
+      @input="onInlineInput"
+      @focus="openPanel"
+      @blur="onInlineBlur"
+      @keydown.esc.stop="closePanel"
     />
+
+    <Teleport to="body">
+      <FocusScope
+        v-if="open"
+        as-child
+        loop
+        :trapped="true"
+        @unmount-auto-focus="onPanelUnmountAutoFocus"
+      >
+        <div
+          ref="panelRef"
+          class="vm-color-picker__panel vm-dialog-float"
+          :style="panelStyle"
+          @pointerdown.stop
+          @mousedown.stop
+        >
+          <div
+            ref="svRef"
+            class="vm-color-picker__sv"
+            :style="{ background: svBg }"
+            @pointerdown="onSvPointer"
+          >
+            <span
+              class="vm-color-picker__sv-cursor"
+              :style="svCursorStyle"
+            />
+          </div>
+
+          <div class="vm-color-picker__sliders">
+            <button
+              v-if="hasEyeDropper"
+              type="button"
+              class="vm-color-picker__eyedropper"
+              title="吸取颜色"
+              @click="pickEyeDropper"
+            >
+              <!-- 内联 SVG：不依赖 remixicon 字体是否已加载 -->
+              <svg
+                class="vm-color-picker__eyedropper-ico"
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                aria-hidden="true"
+              >
+                <path
+                  fill="currentColor"
+                  d="M19.07 3.66a2.5 2.5 0 0 1 0 3.54l-1.42 1.41 2.12 2.12-1.41 1.42-2.12-2.13-7.07 7.07c-.3.3-.68.48-1.08.54l-3.36.48a.75.75 0 0 1-.84-.84l.48-3.36c.06-.4.24-.78.54-1.08l7.07-7.07-1.41-1.41 1.41-1.42 2.12 2.13 1.42-1.42a2.5 2.5 0 0 1 3.54 0Zm-2.12 2.12.71-.7a1 1 0 0 0-1.42-1.42l-.7.71 1.41 1.41ZM8.48 15.9l-.17.17-.28 1.9 1.9-.28.17-.17 5.66-5.66-1.62-1.62-5.66 5.66Z"
+                />
+              </svg>
+            </button>
+            <div class="vm-color-picker__slider-col">
+              <div
+                ref="hueRef"
+                class="vm-color-picker__hue"
+                @pointerdown="onHuePointer"
+              >
+                <span
+                  class="vm-color-picker__slider-thumb"
+                  :style="{ left: thumbLeft(hue / 360) }"
+                />
+              </div>
+              <div
+                ref="alphaRef"
+                class="vm-color-picker__alpha"
+                @pointerdown="onAlphaPointer"
+              >
+                <span
+                  class="vm-color-picker__alpha-fill"
+                  :style="{ background: alphaBg }"
+                />
+                <span
+                  class="vm-color-picker__slider-thumb"
+                  :style="{ left: thumbLeft(alpha) }"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="vm-color-picker__footer">
+            <div class="vm-color-picker__format-wrap">
+              <button
+                type="button"
+                class="vm-color-picker__format"
+                :class="{ 'is-open': formatOpen }"
+                title="颜色格式"
+                @click.stop="toggleFormatMenu"
+              >
+                {{ formatLabel }}
+                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+                  <path fill="currentColor" d="M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10 12 15.4Z" />
+                </svg>
+              </button>
+              <div v-if="formatOpen" class="vm-color-picker__format-menu" role="listbox">
+                <button
+                  v-for="opt in FORMAT_OPTS"
+                  :key="opt.id"
+                  type="button"
+                  class="vm-color-picker__format-item"
+                  :class="{ 'is-active': colorFormat === opt.id }"
+                  role="option"
+                  :aria-selected="colorFormat === opt.id"
+                  @click.stop="setFormat(opt.id)"
+                >
+                  <span class="vm-color-picker__format-check" aria-hidden="true">
+                    <svg v-if="colorFormat === opt.id" viewBox="0 0 24 24" width="14" height="14">
+                      <path
+                        fill="currentColor"
+                        d="M9.55 17.6 4.9 12.95l1.4-1.4 3.25 3.25 7.15-7.15 1.4 1.4-8.55 8.55Z"
+                      />
+                    </svg>
+                  </span>
+                  {{ opt.label }}
+                </button>
+              </div>
+            </div>
+            <input
+              type="text"
+              class="vm-color-picker__value"
+              :value="panelValue"
+              spellcheck="false"
+              autocomplete="off"
+              @input="onPanelValueInput"
+              @blur="onPanelValueBlur"
+              @keydown.esc.stop="closePanel"
+            />
+            <input
+              type="text"
+              class="vm-color-picker__alpha-pct"
+              :value="alphaPctText"
+              spellcheck="false"
+              autocomplete="off"
+              @input="onAlphaPctInput"
+              @blur="onAlphaPctBlur"
+              @keydown.esc.stop="closePanel"
+            />
+          </div>
+        </div>
+      </FocusScope>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { FocusScope } from 'reka-ui'
 
 defineOptions({ name: 'vm-color-picker' })
 
@@ -37,9 +184,11 @@ const props = withDefaults(
     modelValue?: string | null
     disabled?: boolean
     placeholder?: string
+    size?: 'default' | 'sm'
   }>(),
   {
     placeholder: '#000000',
+    size: 'default',
   },
 )
 
@@ -48,65 +197,665 @@ const emit = defineEmits<{
   change: [v: string]
 }>()
 
-const FALLBACK = '#000000'
+type Rgba = { r: number; g: number; b: number; a: number }
+type Hsv = { h: number; s: number; v: number }
+type ColorFormat = 'hex' | 'rgb' | 'css' | 'hsl' | 'hsb'
 
-const display = ref(props.modelValue ?? '')
+const FORMAT_OPTS: { id: ColorFormat; label: string }[] = [
+  { id: 'hex', label: 'Hex' },
+  { id: 'rgb', label: 'RGB' },
+  { id: 'css', label: 'CSS' },
+  { id: 'hsl', label: 'HSL' },
+  { id: 'hsb', label: 'HSB' },
+]
 
-watch(
-  () => props.modelValue,
-  (v) => {
-    display.value = v ?? ''
-  },
+const THUMB_PX = 14
+
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const svRef = ref<HTMLElement | null>(null)
+const hueRef = ref<HTMLElement | null>(null)
+const alphaRef = ref<HTMLElement | null>(null)
+
+const open = ref(false)
+const suppressOpen = ref(false)
+const panelStyle = ref<Record<string, string>>({})
+const formatOpen = ref(false)
+const colorFormat = ref<ColorFormat>('hex')
+
+const hue = ref(0)
+const sat = ref(0)
+const val = ref(0)
+const alpha = ref(1)
+
+/** 行内 Hex（不含 #）；面板按当前格式展示 */
+const inlineHex = ref('')
+const panelValue = ref('')
+const alphaPctText = ref('100%')
+
+const hasEyeDropper = ref(false)
+
+const placeholderText = computed(() => {
+  const p = props.placeholder || '#000000'
+  return p.startsWith('#') ? p.slice(1) : p
+})
+
+const formatLabel = computed(
+  () => FORMAT_OPTS.find((o) => o.id === colorFormat.value)?.label ?? 'Hex',
 )
 
-/** 解析为 #rrggbb；无效返回 null */
-function parseHex(raw: string): string | null {
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n))
+}
+
+/** 拇指中心落在轨道内，两端不溢出 */
+function thumbLeft(ratio: number) {
+  const t = clamp(ratio, 0, 1)
+  return `calc(${t} * (100% - ${THUMB_PX}px) + ${THUMB_PX / 2}px)`
+}
+
+function toHex2(n: number) {
+  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')
+}
+
+function rgbToHex(r: number, g: number, b: number, a = 1): string {
+  const base = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`
+  if (a >= 1 - 1e-6) return base
+  return `${base}${toHex2(a * 255)}`
+}
+
+function hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {
+  const hh = ((h % 360) + 360) % 360
+  const c = v * s
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1))
+  const m = v - c
+  let rp = 0
+  let gp = 0
+  let bp = 0
+  if (hh < 60) {
+    rp = c
+    gp = x
+  } else if (hh < 120) {
+    rp = x
+    gp = c
+  } else if (hh < 180) {
+    gp = c
+    bp = x
+  } else if (hh < 240) {
+    gp = x
+    bp = c
+  } else if (hh < 300) {
+    rp = x
+    bp = c
+  } else {
+    rp = c
+    bp = x
+  }
+  return {
+    r: (rp + m) * 255,
+    g: (gp + m) * 255,
+    b: (bp + m) * 255,
+  }
+}
+
+function rgbToHsv(r: number, g: number, b: number): Hsv {
+  const rr = r / 255
+  const gg = g / 255
+  const bb = b / 255
+  const max = Math.max(rr, gg, bb)
+  const min = Math.min(rr, gg, bb)
+  const d = max - min
+  let h = 0
+  if (d !== 0) {
+    if (max === rr) h = ((gg - bb) / d) % 6
+    else if (max === gg) h = (bb - rr) / d + 2
+    else h = (rr - gg) / d + 4
+    h *= 60
+    if (h < 0) h += 360
+  }
+  const s = max === 0 ? 0 : d / max
+  return { h, s, v: max }
+}
+
+function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+  const rr = r / 255
+  const gg = g / 255
+  const bb = b / 255
+  const max = Math.max(rr, gg, bb)
+  const min = Math.min(rr, gg, bb)
+  const l = (max + min) / 2
+  const d = max - min
+  let h = 0
+  let s = 0
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1))
+    if (max === rr) h = ((gg - bb) / d) % 6
+    else if (max === gg) h = (bb - rr) / d + 2
+    else h = (rr - gg) / d + 4
+    h *= 60
+    if (h < 0) h += 360
+  }
+  return { h, s, l }
+}
+
+function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+  const hh = ((h % 360) + 360) % 360
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1))
+  const m = l - c / 2
+  let rp = 0
+  let gp = 0
+  let bp = 0
+  if (hh < 60) {
+    rp = c
+    gp = x
+  } else if (hh < 120) {
+    rp = x
+    gp = c
+  } else if (hh < 180) {
+    gp = c
+    bp = x
+  } else if (hh < 240) {
+    gp = x
+    bp = c
+  } else if (hh < 300) {
+    rp = x
+    bp = c
+  } else {
+    rp = c
+    bp = x
+  }
+  return {
+    r: (rp + m) * 255,
+    g: (gp + m) * 255,
+    b: (bp + m) * 255,
+  }
+}
+
+/** 解析为 rgba；无效返回 null */
+function parseColor(raw: string): Rgba | null {
+  const s = raw.trim()
+  if (!s) return null
+
+  if (s.startsWith('#')) {
+    let h = s.slice(1)
+    if (/^[0-9a-fA-F]{3}$/.test(h)) {
+      h = h
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(h)) {
+      return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+        a: 1,
+      }
+    }
+    if (/^[0-9a-fA-F]{8}$/.test(h)) {
+      return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+        a: parseInt(h.slice(6, 8), 16) / 255,
+      }
+    }
+    return null
+  }
+
+  if (/^[0-9a-fA-F]{3}$/.test(s) || /^[0-9a-fA-F]{6}$/.test(s) || /^[0-9a-fA-F]{8}$/.test(s)) {
+    return parseColor(`#${s}`)
+  }
+
+  const m = s.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i,
+  )
+  if (m) {
+    return {
+      r: clamp(Number(m[1]), 0, 255),
+      g: clamp(Number(m[2]), 0, 255),
+      b: clamp(Number(m[3]), 0, 255),
+      a: m[4] != null ? clamp(Number(m[4]), 0, 1) : 1,
+    }
+  }
+
+  const hsl = s.match(
+    /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,
+  )
+  if (hsl) {
+    const rgb = hslToRgb(Number(hsl[1]), Number(hsl[2]) / 100, Number(hsl[3]) / 100)
+    return {
+      r: rgb.r,
+      g: rgb.g,
+      b: rgb.b,
+      a: hsl[4] != null ? clamp(Number(hsl[4]), 0, 1) : 1,
+    }
+  }
+
+  return null
+}
+
+/** 按当前格式解析面板中间输入（不改变 alpha，除非 CSS/rgba 自带） */
+function parsePanelValue(raw: string, keepAlpha: number): Rgba | null {
   const s = raw.trim()
   if (!s) return null
-  let h = s.startsWith('#') ? s.slice(1) : s
-  if (/^[0-9a-fA-F]{3}$/.test(h)) {
-    h = h
-      .split('')
-      .map((c) => c + c)
-      .join('')
-  }
-  if (/^[0-9a-fA-F]{6}$/.test(h)) return `#${h.toLowerCase()}`
-  if (/^[0-9a-fA-F]{8}$/.test(h)) return `#${h.slice(0, 6).toLowerCase()}`
+  const fmt = colorFormat.value
+
+  if (fmt === 'hex' || fmt === 'css') {
+    const parsed = parseColor(s)
+    if (!parsed) return null
+    if (fmt === 'hex') parsed.a = keepAlpha
+    return parsed
+  }
+
+  if (fmt === 'rgb') {
+    const parts = s.split(/[,\s]+/).filter(Boolean)
+    if (parts.length < 3) return null
+    const r = Number(parts[0])
+    const g = Number(parts[1])
+    const b = Number(parts[2])
+    if (![r, g, b].every(Number.isFinite)) return null
+    return { r: clamp(r, 0, 255), g: clamp(g, 0, 255), b: clamp(b, 0, 255), a: keepAlpha }
+  }
+
+  if (fmt === 'hsl') {
+    const parts = s.replace(/%/g, '').split(/[,\s]+/).filter(Boolean)
+    if (parts.length < 3) return null
+    const h = Number(parts[0])
+    const satPct = Number(parts[1])
+    const lPct = Number(parts[2])
+    if (![h, satPct, lPct].every(Number.isFinite)) return null
+    const rgb = hslToRgb(h, clamp(satPct, 0, 100) / 100, clamp(lPct, 0, 100) / 100)
+    return { ...rgb, a: keepAlpha }
+  }
+
+  if (fmt === 'hsb') {
+    const parts = s.replace(/%/g, '').split(/[,\s]+/).filter(Boolean)
+    if (parts.length < 3) return null
+    const h = Number(parts[0])
+    const sPct = Number(parts[1])
+    const bPct = Number(parts[2])
+    if (![h, sPct, bPct].every(Number.isFinite)) return null
+    const rgb = hsvToRgb(h, clamp(sPct, 0, 100) / 100, clamp(bPct, 0, 100) / 100)
+    return { ...rgb, a: keepAlpha }
+  }
+
   return null
 }
 
-const normalized = computed(() => parseHex(display.value))
+function currentRgb() {
+  return hsvToRgb(hue.value, sat.value, val.value)
+}
+
+function currentHex(): string {
+  const { r, g, b } = currentRgb()
+  return rgbToHex(r, g, b, alpha.value)
+}
+
+function formatPanelValue(): string {
+  const { r, g, b } = currentRgb()
+  const rr = Math.round(r)
+  const gg = Math.round(g)
+  const bb = Math.round(b)
+  const a = alpha.value
+  switch (colorFormat.value) {
+    case 'rgb':
+      return `${rr}, ${gg}, ${bb}`
+    case 'css':
+      return a < 1 - 1e-6
+        ? `rgba(${rr}, ${gg}, ${bb}, ${Number(a.toFixed(2))})`
+        : `#${toHex2(rr)}${toHex2(gg)}${toHex2(bb)}`
+    case 'hsl': {
+      const hsl = rgbToHsl(rr, gg, bb)
+      return `${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%`
+    }
+    case 'hsb':
+      return `${Math.round(hue.value)}, ${Math.round(sat.value * 100)}%, ${Math.round(val.value * 100)}%`
+    case 'hex':
+    default:
+      return `${toHex2(rr)}${toHex2(gg)}${toHex2(bb)}`
+  }
+}
+
+const cssColor = computed(() => {
+  const parsed = parseColor(props.modelValue ?? '')
+  if (!parsed && !(props.modelValue ?? '').trim()) return 'transparent'
+  if (!parsed) return 'transparent'
+  const { r, g, b, a } = parsed
+  return a < 1 ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`
+})
 
-const cssColor = computed(() => normalized.value || 'transparent')
+const svBg = computed(() => {
+  const { r, g, b } = hsvToRgb(hue.value, 1, 1)
+  return `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)}))`
+})
 
-const pickerValue = computed(() => normalized.value || FALLBACK)
+const alphaBg = computed(() => {
+  const { r, g, b } = currentRgb()
+  const c = `rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)})`
+  return `linear-gradient(to right, transparent, ${c})`
+})
+
+const svCursorStyle = computed(() => ({
+  left: `${sat.value * 100}%`,
+  top: `${(1 - val.value) * 100}%`,
+}))
+
+function syncTextsFromState() {
+  const hex = currentHex()
+  const bare = hex.startsWith('#') ? hex.slice(1) : hex
+  inlineHex.value = bare.slice(0, 6)
+  panelValue.value = formatPanelValue()
+  alphaPctText.value = `${Math.round(alpha.value * 100)}%`
+}
+
+function applyRgba(c: Rgba, emitValue = true) {
+  const hsv = rgbToHsv(c.r, c.g, c.b)
+  hue.value = hsv.h
+  sat.value = hsv.s
+  val.value = hsv.v
+  alpha.value = clamp(c.a, 0, 1)
+  syncTextsFromState()
+  if (emitValue) commit(currentHex())
+}
+
+function loadFromModel(raw: string | null | undefined) {
+  const s = raw ?? ''
+  if (!s.trim()) {
+    hue.value = 0
+    sat.value = 0
+    val.value = 0
+    alpha.value = 1
+    inlineHex.value = ''
+    panelValue.value = ''
+    alphaPctText.value = '100%'
+    return
+  }
+  const parsed = parseColor(s)
+  if (!parsed) {
+    inlineHex.value = s.startsWith('#') ? s.slice(1) : s
+    return
+  }
+  const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+  hue.value = hsv.h
+  sat.value = hsv.s
+  val.value = hsv.v
+  alpha.value = parsed.a
+  syncTextsFromState()
+}
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (open.value) {
+      const cur = currentHex()
+      const parsed = parseColor(v ?? '')
+      if (parsed && rgbToHex(parsed.r, parsed.g, parsed.b, parsed.a) === cur) return
+    }
+    loadFromModel(v)
+  },
+  { immediate: true },
+)
 
 function commit(v: string) {
-  display.value = v
   emit('update:modelValue', v)
   emit('change', v)
 }
 
-function onPicker(e: Event) {
-  const v = (e.target as HTMLInputElement).value
-  commit(v.toLowerCase())
+function commitFromState() {
+  syncTextsFromState()
+  commit(currentHex())
 }
 
-function onText(e: Event) {
+function onInlineInput(e: Event) {
   const v = (e.target as HTMLInputElement).value
-  display.value = v
-  emit('update:modelValue', v)
-  emit('change', v)
+  inlineHex.value = v.replace(/^#/, '')
+  const parsed = parseColor(inlineHex.value)
+  if (parsed) {
+    parsed.a = alpha.value
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+    hue.value = hsv.h
+    sat.value = hsv.s
+    val.value = hsv.v
+    panelValue.value = formatPanelValue()
+    commit(currentHex())
+  } else {
+    const raw = inlineHex.value.trim()
+    commit(raw ? (raw.startsWith('#') ? raw : `#${raw}`) : '')
+  }
 }
 
-function onBlur() {
-  const n = parseHex(display.value)
-  if (display.value.trim() === '') {
+function onInlineBlur() {
+  const t = inlineHex.value.trim()
+  if (!t) {
     commit('')
+    syncTextsFromState()
     return
   }
-  if (n && n !== display.value) commit(n)
+  const parsed = parseColor(t)
+  if (parsed) {
+    parsed.a = alpha.value
+    applyRgba(parsed, true)
+  } else {
+    loadFromModel(props.modelValue)
+  }
+}
+
+function onPanelValueInput(e: Event) {
+  panelValue.value = (e.target as HTMLInputElement).value
+  const parsed = parsePanelValue(panelValue.value, alpha.value)
+  if (!parsed) return
+  const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+  hue.value = hsv.h
+  sat.value = hsv.s
+  val.value = hsv.v
+  if (colorFormat.value === 'css') alpha.value = parsed.a
+  const hex = currentHex()
+  inlineHex.value = hex.replace(/^#/, '').slice(0, 6)
+  alphaPctText.value = `${Math.round(alpha.value * 100)}%`
+  commit(hex)
+}
+
+function onPanelValueBlur() {
+  const parsed = parsePanelValue(panelValue.value, alpha.value)
+  if (parsed) {
+    if (colorFormat.value !== 'css') parsed.a = alpha.value
+    applyRgba(parsed, true)
+  } else {
+    syncTextsFromState()
+  }
+}
+
+function onAlphaPctInput(e: Event) {
+  alphaPctText.value = (e.target as HTMLInputElement).value
+  const n = Number(String(alphaPctText.value).replace(/%/g, '').trim())
+  if (!Number.isFinite(n)) return
+  alpha.value = clamp(n / 100, 0, 1)
+  commitFromState()
+}
+
+function onAlphaPctBlur() {
+  const n = Number(String(alphaPctText.value).replace(/%/g, '').trim())
+  if (Number.isFinite(n)) {
+    alpha.value = clamp(n / 100, 0, 1)
+  }
+  syncTextsFromState()
+  commit(currentHex())
+}
+
+function toggleFormatMenu() {
+  formatOpen.value = !formatOpen.value
+}
+
+function setFormat(id: ColorFormat) {
+  colorFormat.value = id
+  formatOpen.value = false
+  syncTextsFromState()
+}
+
+function ratioFromEvent(el: HTMLElement, e: PointerEvent, axis: 'x' | 'y' | 'both') {
+  const r = el.getBoundingClientRect()
+  const x = clamp((e.clientX - r.left) / r.width, 0, 1)
+  const y = clamp((e.clientY - r.top) / r.height, 0, 1)
+  if (axis === 'x') return { x, y: 0 }
+  if (axis === 'y') return { x: 0, y }
+  return { x, y }
+}
+
+function bindDrag(
+  el: HTMLElement,
+  e: PointerEvent,
+  onMove: (ev: PointerEvent) => void,
+) {
+  e.preventDefault()
+  el.setPointerCapture(e.pointerId)
+  onMove(e)
+  const move = (ev: PointerEvent) => onMove(ev)
+  const up = (ev: PointerEvent) => {
+    el.releasePointerCapture(ev.pointerId)
+    el.removeEventListener('pointermove', move)
+    el.removeEventListener('pointerup', up)
+    el.removeEventListener('pointercancel', up)
+  }
+  el.addEventListener('pointermove', move)
+  el.addEventListener('pointerup', up)
+  el.addEventListener('pointercancel', up)
+}
+
+function onSvPointer(e: PointerEvent) {
+  const el = svRef.value
+  if (!el) return
+  bindDrag(el, e, (ev) => {
+    const { x, y } = ratioFromEvent(el, ev, 'both')
+    sat.value = x
+    val.value = 1 - y
+    commitFromState()
+  })
+}
+
+function onHuePointer(e: PointerEvent) {
+  const el = hueRef.value
+  if (!el) return
+  bindDrag(el, e, (ev) => {
+    const { x } = ratioFromEvent(el, ev, 'x')
+    hue.value = x * 360
+    commitFromState()
+  })
+}
+
+function onAlphaPointer(e: PointerEvent) {
+  const el = alphaRef.value
+  if (!el) return
+  bindDrag(el, e, (ev) => {
+    const { x } = ratioFromEvent(el, ev, 'x')
+    alpha.value = x
+    commitFromState()
+  })
+}
+
+async function pickEyeDropper() {
+  const ED = (
+    window as unknown as {
+      EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> }
+    }
+  ).EyeDropper
+  if (!ED) return
+  try {
+    const result = await new ED().open()
+    const parsed = parseColor(result.sRGBHex)
+    if (parsed) {
+      parsed.a = alpha.value
+      applyRgba(parsed, true)
+    }
+  } catch {
+    /* 用户取消 */
+  }
+}
+
+function syncPanelPos() {
+  const el = triggerRef.value
+  if (!el) return
+  const r = el.getBoundingClientRect()
+  const width = 240
+  let left = r.left
+  if (left + width > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - width - 8)
+  }
+  let top = r.bottom + 6
+  const estH = 320
+  if (top + estH > window.innerHeight - 8) {
+    top = Math.max(8, r.top - estH - 6)
+  }
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    zIndex: '100',
+  }
+}
+
+async function openPanel() {
+  if (props.disabled || suppressOpen.value) return
+  loadFromModel(props.modelValue)
+  formatOpen.value = false
+  open.value = true
+  await nextTick()
+  syncPanelPos()
+}
+
+function onPanelUnmountAutoFocus(event: Event) {
+  event.preventDefault()
+}
+
+function closePanel() {
+  if (!open.value) return
+  suppressOpen.value = true
+  formatOpen.value = false
+  open.value = false
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      suppressOpen.value = false
+    })
+  })
+}
+
+async function toggle() {
+  if (props.disabled) return
+  if (open.value) {
+    closePanel()
+    return
+  }
+  await openPanel()
+}
+
+function onDocPointer(e: Event) {
+  if (!open.value) return
+  const t = e.target as Node | null
+  if (!t) return
+  if (rootRef.value?.contains(t)) return
+  if (panelRef.value?.contains(t)) return
+  closePanel()
+}
+
+function onWinChange() {
+  if (open.value) syncPanelPos()
 }
+
+onMounted(() => {
+  hasEyeDropper.value = typeof window !== 'undefined' && 'EyeDropper' in window
+  document.addEventListener('pointerdown', onDocPointer, true)
+  window.addEventListener('resize', onWinChange)
+  window.addEventListener('scroll', onWinChange, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true)
+  window.removeEventListener('resize', onWinChange)
+  window.removeEventListener('scroll', onWinChange, true)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -128,19 +877,35 @@ function onBlur() {
   flex-shrink: 0;
   width: var(--vm-control-height);
   height: var(--vm-control-height);
+  padding: 0;
   border: 1px solid var(--border);
   border-radius: var(--vm-control-radius);
   background: var(--muted);
   cursor: pointer;
   overflow: hidden;
+
+  &:hover:not(:disabled),
+  .is-open & {
+    border-color: var(--brand, #4e5dff);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.vm-color-picker.is-sm .vm-color-picker__swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
 }
 
 .vm-color-picker__swatch-fill {
   display: block;
   width: 100%;
   height: 100%;
-  /* 无效色时显示棋盘，便于识别透明/空 */
-  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
     linear-gradient(-45deg, #ccc 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #ccc 75%),
     linear-gradient(-45deg, transparent 75%, #ccc 75%);
@@ -152,17 +917,6 @@ function onBlur() {
     -4px 0;
 }
 
-.vm-color-picker__native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
 .vm-color-picker__input {
   flex: 1;
   min-width: 0;
@@ -185,4 +939,263 @@ function onBlur() {
     color: var(--muted-foreground);
   }
 }
+
+.vm-color-picker.is-sm .vm-color-picker__input {
+  height: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+</style>
+
+<style lang="scss">
+/* Teleport 到 body，不可 scoped */
+.vm-color-picker__panel {
+  box-sizing: border-box;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--popover, var(--background, #fff));
+  color: var(--foreground);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 10%),
+    0 10px 24px -4px rgb(0 0 0 / 12%);
+  user-select: none;
+  overflow: visible;
+}
+
+.vm-color-picker__sv {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  cursor: crosshair;
+  touch-action: none;
+  overflow: hidden;
+}
+
+.vm-color-picker__sv-cursor {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
+  pointer-events: none;
+}
+
+.vm-color-picker__sliders {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.vm-color-picker__eyedropper {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--brand, #4e5dff);
+    color: var(--brand, #4e5dff);
+  }
+}
+
+.vm-color-picker__eyedropper-ico {
+  display: block;
+}
+
+.vm-color-picker__slider-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vm-color-picker__hue,
+.vm-color-picker__alpha {
+  position: relative;
+  height: 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  touch-action: none;
+  /* 允许拇指画出轨道高度，但水平用 thumbLeft 钳在内 */
+  overflow: visible;
+}
+
+.vm-color-picker__hue {
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+
+.vm-color-picker__alpha {
+  background-image:
+    linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
+    linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
+    linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+  background-color: #fff;
+}
+
+.vm-color-picker__alpha-fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.vm-color-picker__slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translate(-50%, -50%);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.vm-color-picker__footer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.vm-color-picker__format-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.vm-color-picker__format {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover,
+  &.is-open {
+    border-color: var(--brand, #4e5dff);
+  }
+
+  svg {
+    opacity: 0.7;
+  }
+}
+
+.vm-color-picker__format-menu {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 4px);
+  z-index: 2;
+  min-width: 96px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--popover, var(--background, #fff));
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 10%),
+    0 10px 20px -4px rgb(0 0 0 / 12%);
+}
+
+.vm-color-picker__format-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: color-mix(in srgb, var(--brand, #4e5dff) 12%, transparent);
+  }
+
+  &.is-active {
+    background: var(--brand, #4e5dff);
+    color: #fff;
+  }
+}
+
+.vm-color-picker__format-check {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.vm-color-picker__value,
+.vm-color-picker__alpha-pct {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  outline: none;
+
+  &:focus {
+    border-color: var(--brand, #4e5dff);
+  }
+}
+
+.vm-color-picker__value {
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-color-picker__alpha-pct {
+  width: 52px;
+  flex-shrink: 0;
+  text-align: center;
+}
 </style>