vome-core 0.0.99 → 0.0.101

package/dist/admin/config/plugin-dev.js

@@ -1 +1 @@
-const _0x1c475a=_0x213d;function _0x4f1c(){const _0x53ec3a=['z2L0zwu','odbWreThzg0','lY9Zzxj2AwnLlG','l2fWCc9WBhvNAw5tDg9Yzs9Zzwf0','Ahr0Chm6lY9NAxrODwiUy29TlW','mtGXmtm0ohLut2rmCa','zNjVBNrLBMq','mtuXode4ngzJrur1ua','Ahr0Chm6lY9NAxrLzs5JB20V','CMvWBgfJzq','mZaXnta0nvbqzgHxvG','DM9Tzs1WBhvNAw4TzNjVBNq','57QV5yMn56UV','mZC3nZqWmLfZrgziwa','DM9Tzs1WBhvNAw4TzNvSBa','5yMn56UVicSG5zco56UV','otmXn1HkB1D3uW','l3bSDwDPBNmVDxbSB2fK','DM9Tzs1WBhvNAw4TC2vYDMLJzq','l2fYy2HPDMuVCMvMCY9OzwfKCY9Tyxn0zxiUEMLW','ChjVDg9JB2W','57QV5zco56UV','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','mJC5nJe0ohDes3vYza','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq','DM9TzwTQ','mZeZotKYmgDkr1b4uq','Ag9ZDg5HBwu'];_0x4f1c=function(){return _0x53ec3a;};return _0x4f1c();}(function(_0x544fe1,_0x220685){const _0x318160=_0x213d,_0x197a6a=_0x544fe1();while(!![]){try{const _0x5894e3=parseInt(_0x318160(0x91))/0x1+parseInt(_0x318160(0xa1))/0x2+-parseInt(_0x318160(0x97))/0x3+parseInt(_0x318160(0xab))/0x4+-parseInt(_0x318160(0x94))/0x5+-parseInt(_0x318160(0xa4))/0x6+-parseInt(_0x318160(0x9a))/0x7*(parseInt(_0x318160(0xa7))/0x8);if(_0x5894e3===_0x220685)break;else _0x197a6a['push'](_0x197a6a['shift']());}catch(_0x1a8493){_0x197a6a['push'](_0x197a6a['shift']());}}}(_0x4f1c,0xece52));const ORG=_0x1c475a(0xa3);export function serviceUrlFromDocs(_0x2104a1){const _0xf68399=_0x1c475a,_0x55a47=new URL(_0x2104a1),_0x52b384=_0x55a47[_0xf68399(0xa5)][_0xf68399(0x93)](/^www\./,'')[_0xf68399(0x93)](/^service\./,'');return _0x55a47[_0xf68399(0x9e)]+_0xf68399(0xa8)+_0x52b384;}export function seatApiBaseFromDocs(_0x4eff18){const _0x2cd62c=_0x1c475a;return serviceUrlFromDocs(_0x4eff18)+_0x2cd62c(0xa9);}export function licenseIssueUrlFromDocs(_0x3fe5d4){const _0x198efe=_0x1c475a;return serviceUrlFromDocs(_0x3fe5d4)+_0x198efe(0xa2);}function giteeArchive(_0x10f00f){return'https://gitee.com/'+ORG+'/'+_0x10f00f+'/repository/archive/master.zip';}function _0x213d(_0x2f7d3e,_0x5706ed){_0x2f7d3e=_0x2f7d3e-0x90;const _0x4f1c2d=_0x4f1c();let _0x213dd0=_0x4f1c2d[_0x2f7d3e];if(_0x213d['scmOUD']===undefined){var _0x18427f=function(_0x34fa42){const _0x1d9d70='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x2104a1='',_0x55a47='';for(let _0x52b384=0x0,_0x4eff18,_0x3fe5d4,_0x10f00f=0x0;_0x3fe5d4=_0x34fa42['charAt'](_0x10f00f++);~_0x3fe5d4&&(_0x4eff18=_0x52b384%0x4?_0x4eff18*0x40+_0x3fe5d4:_0x3fe5d4,_0x52b384++%0x4)?_0x2104a1+=String['fromCharCode'](0xff&_0x4eff18>>(-0x2*_0x52b384&0x6)):0x0){_0x3fe5d4=_0x1d9d70['indexOf'](_0x3fe5d4);}for(let _0x94e48d=0x0,_0x3a65fb=_0x2104a1['length'];_0x94e48d<_0x3a65fb;_0x94e48d++){_0x55a47+='%'+('00'+_0x2104a1['charCodeAt'](_0x94e48d)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x55a47);};_0x213d['lAJuVx']=_0x18427f,_0x213d['dqgAMf']={},_0x213d['scmOUD']=!![];}const _0x305698=_0x4f1c2d[0x0],_0x335753=_0x2f7d3e+_0x305698,_0x28bf1a=_0x213d['dqgAMf'][_0x335753];return!_0x28bf1a?(_0x213dd0=_0x213d['lAJuVx'](_0x213dd0),_0x213d['dqgAMf'][_0x335753]=_0x213dd0):_0x213dd0=_0x28bf1a,_0x213dd0;}function githubArchive(_0x94e48d){const _0x5c499f=_0x1c475a;return _0x5c499f(0xaa)+ORG+'/'+_0x94e48d+_0x5c499f(0x9d);}function giteeRepo(_0x3a65fb){const _0x19ef4d=_0x1c475a;return _0x19ef4d(0x92)+ORG+'/'+_0x3a65fb;}function githubRepo(_0x4539b3){const _0xafa380=_0x1c475a;return _0xafa380(0xaa)+ORG+'/'+_0x4539b3;}const docsUrl='https://vomekj.com';export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+_0x1c475a(0x9b),'mirrors':{'prefer':_0x1c475a(0xa6),'giteeOrg':_0x1c475a(0x92)+ORG,'githubOrg':_0x1c475a(0xaa)+ORG},'scaffolds':{'full':{'key':'full','title':_0x1c475a(0x99),'desc':'完整业务模块脚手架（.vome：含\x20server\x20与\x20web），本地开发打包后发布。','repo':_0x1c475a(0x98),'repoUrl':giteeRepo(_0x1c475a(0x98)),'githubRepoUrl':githubRepo(_0x1c475a(0x98)),'downloadUrl':giteeArchive(_0x1c475a(0x98)),'githubDownloadUrl':githubArchive(_0x1c475a(0x98))},'backend':{'key':'backend','title':_0x1c475a(0x9f),'desc':_0x1c475a(0xa0),'repo':_0x1c475a(0x9c),'repoUrl':giteeRepo('vome-plugin-service'),'githubRepoUrl':githubRepo(_0x1c475a(0x9c)),'downloadUrl':giteeArchive('vome-plugin-service'),'githubDownloadUrl':githubArchive('vome-plugin-service')},'frontend':{'key':_0x1c475a(0x90),'title':_0x1c475a(0x96),'desc':'后台微应用脚手架（.vome：含\x20web/），以\x20wujie\x20挂载独立前端页面。','repo':_0x1c475a(0x95),'repoUrl':giteeRepo(_0x1c475a(0x95)),'githubRepoUrl':githubRepo(_0x1c475a(0x95)),'downloadUrl':giteeArchive(_0x1c475a(0x95)),'githubDownloadUrl':githubArchive(_0x1c475a(0x95))}}};
+const _0x295ee3=_0x594b;(function(_0x54b0a5,_0x9c184a){const _0x56d320=_0x594b,_0x24e3b9=_0x54b0a5();while(!![]){try{const _0x323a0b=-parseInt(_0x56d320(0xff))/0x1+parseInt(_0x56d320(0xf6))/0x2*(parseInt(_0x56d320(0xf9))/0x3)+parseInt(_0x56d320(0xf4))/0x4+parseInt(_0x56d320(0x106))/0x5+-parseInt(_0x56d320(0xf5))/0x6*(parseInt(_0x56d320(0x10e))/0x7)+parseInt(_0x56d320(0xf8))/0x8*(-parseInt(_0x56d320(0x107))/0x9)+-parseInt(_0x56d320(0x110))/0xa*(-parseInt(_0x56d320(0x10d))/0xb);if(_0x323a0b===_0x9c184a)break;else _0x24e3b9['push'](_0x24e3b9['shift']());}catch(_0x108708){_0x24e3b9['push'](_0x24e3b9['shift']());}}}(_0x1bff,0x9cc86));const ORG='vomekj';export function serviceUrlFromDocs(_0x2577b0){const _0x551a2e=_0x594b,_0x2c6bac=new URL(_0x2577b0),_0x7b59b9=_0x2c6bac[_0x551a2e(0xfc)][_0x551a2e(0x100)](/^www\./,'')['replace'](/^service\./,'');return _0x2c6bac[_0x551a2e(0xfe)]+_0x551a2e(0x109)+_0x7b59b9;}export function seatApiBaseFromDocs(_0x34de33){const _0x41d1e5=_0x594b;return serviceUrlFromDocs(_0x34de33)+_0x41d1e5(0xfb);}export function licenseIssueUrlFromDocs(_0x29720f){const _0x59f92b=_0x594b;return serviceUrlFromDocs(_0x29720f)+_0x59f92b(0x111);}function giteeArchive(_0x13730a){const _0x2724f8=_0x594b;return _0x2724f8(0xf7)+ORG+'/'+_0x13730a+_0x2724f8(0xf0);}function _0x1bff(){const _0x5f07f7=['l2fYy2HPDMuVCMvMCY9OzwfKCY9Tyxn0zxiUEMLW','DM9Tzs1WBhvNAw4TzNjVBNq','DM9Tzs1WBhvNAw4TC2vYDMLJzq','mJG0otq1nvDMwLjdBG','mZa1mJaXn0r5t0T1Dq','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','lY9Zzxj2AwnLlG','57QV5zco56UV','yMfJA2vUza','l3bSDwDPBNmVDxbSB2fK','mJjquxHfANe','mtiZodm0owj2wezvqG','zNjVBNrLBMq','nZu1otuZmg5xrfbhEq','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq','l3jLCg9ZAxrVCNKVyxjJAgL2zs9Tyxn0zxiUEMLW','zNvSBa','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','DM9Tzs1WBhvNAw4TzNvSBa','mJi3odq4oezyu1P3sa','ndjJzwDSy0y','mtaYmtj6yMrsuhm','Ahr0Chm6lY9NAxrLzs5JB20V','mJrKAePnzey','mtq3Dvfzuwj3','Ahr0Chm6lY92B21LA2OUy29T','l2fWCc9WBhvNAw5tDg9Yzs9Zzwf0','Ag9ZDg5HBwu','5yMn56UVicSG5zco56UV','ChjVDg9JB2W','mZC0m1zPu3P6vW','CMvWBgfJzq','57QV5yMn56UV','Ahr0Chm6lY9NAxrODwiUy29TlW'];_0x1bff=function(){return _0x5f07f7;};return _0x1bff();}function githubArchive(_0x69973f){const _0x595de4=_0x594b;return _0x595de4(0x102)+ORG+'/'+_0x69973f+_0x595de4(0x103);}function giteeRepo(_0x1257f2){const _0x7ed006=_0x594b;return _0x7ed006(0xf7)+ORG+'/'+_0x1257f2;}function githubRepo(_0x3808b2){const _0x542a09=_0x594b;return _0x542a09(0x102)+ORG+'/'+_0x3808b2;}function _0x594b(_0xa573c2,_0x9e3808){_0xa573c2=_0xa573c2-0xf0;const _0x1bffe9=_0x1bff();let _0x594b39=_0x1bffe9[_0xa573c2];if(_0x594b['zCQQog']===undefined){var _0x144173=function(_0x1d3a22){const _0x4b0e62='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x2577b0='',_0x2c6bac='';for(let _0x7b59b9=0x0,_0x34de33,_0x29720f,_0x13730a=0x0;_0x29720f=_0x1d3a22['charAt'](_0x13730a++);~_0x29720f&&(_0x34de33=_0x7b59b9%0x4?_0x34de33*0x40+_0x29720f:_0x29720f,_0x7b59b9++%0x4)?_0x2577b0+=String['fromCharCode'](0xff&_0x34de33>>(-0x2*_0x7b59b9&0x6)):0x0){_0x29720f=_0x4b0e62['indexOf'](_0x29720f);}for(let _0x69973f=0x0,_0x1257f2=_0x2577b0['length'];_0x69973f<_0x1257f2;_0x69973f++){_0x2c6bac+='%'+('00'+_0x2577b0['charCodeAt'](_0x69973f)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x2c6bac);};_0x594b['nyfQgP']=_0x144173,_0x594b['EWicmL']={},_0x594b['zCQQog']=!![];}const _0xee6628=_0x1bffe9[0x0],_0x5ef687=_0xa573c2+_0xee6628,_0x22fd55=_0x594b['EWicmL'][_0x5ef687];return!_0x22fd55?(_0x594b39=_0x594b['nyfQgP'](_0x594b39),_0x594b['EWicmL'][_0x5ef687]=_0x594b39):_0x594b39=_0x22fd55,_0x594b39;}const docsUrl=_0x295ee3(0xfa);export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+_0x295ee3(0x10c),'mirrors':{'prefer':'gitee','giteeOrg':_0x295ee3(0xf7)+ORG,'githubOrg':_0x295ee3(0x102)+ORG},'scaffolds':{'full':{'key':_0x295ee3(0xf1),'title':_0x295ee3(0xfd),'desc':_0x295ee3(0x108),'repo':_0x295ee3(0xf3),'repoUrl':giteeRepo(_0x295ee3(0xf3)),'githubRepoUrl':githubRepo(_0x295ee3(0xf3)),'downloadUrl':giteeArchive('vome-plugin-full'),'githubDownloadUrl':githubArchive(_0x295ee3(0xf3))},'backend':{'key':_0x295ee3(0x10b),'title':_0x295ee3(0x10a),'desc':_0x295ee3(0xf2),'repo':'vome-plugin-service','repoUrl':giteeRepo(_0x295ee3(0x105)),'githubRepoUrl':githubRepo('vome-plugin-service'),'downloadUrl':giteeArchive(_0x295ee3(0x105)),'githubDownloadUrl':githubArchive(_0x295ee3(0x105))},'frontend':{'key':_0x295ee3(0x10f),'title':_0x295ee3(0x101),'desc':'后台微应用脚手架（.vome：含\x20web/），以\x20wujie\x20挂载独立前端页面。','repo':'vome-plugin-front','repoUrl':giteeRepo(_0x295ee3(0x104)),'githubRepoUrl':githubRepo(_0x295ee3(0x104)),'downloadUrl':giteeArchive(_0x295ee3(0x104)),'githubDownloadUrl':githubArchive(_0x295ee3(0x104))}}};

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

@@ -61,55 +61,81 @@
 
           <div class="vm-color-picker__sliders">
             <button
-              v-if="hasEyeDropper"
               type="button"
               class="vm-color-picker__eyedropper"
               title="吸取颜色"
+              :disabled="!hasEyeDropper"
               @click="pickEyeDropper"
             >
-              <i class="ri-eyedropper-line" aria-hidden="true" />
+              <svg
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="m2 22 1-1h3l9-9" />
+                <path d="M3 21v-3l9-9" />
+                <path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.2-.2" />
+              </svg>
             </button>
             <div class="vm-color-picker__slider-col">
               <div
                 ref="hueRef"
-                class="vm-color-picker__hue"
+                class="vm-color-picker__track"
                 @pointerdown="onHuePointer"
               >
+                <div class="vm-color-picker__rail vm-color-picker__rail--hue" />
                 <span
                   class="vm-color-picker__slider-thumb"
-                  :style="{ left: `${(hue / 360) * 100}%` }"
+                  :style="{ left: sliderThumbLeft(hue / 360) }"
                 />
               </div>
               <div
                 ref="alphaRef"
-                class="vm-color-picker__alpha"
+                class="vm-color-picker__track"
                 @pointerdown="onAlphaPointer"
               >
-                <span
-                  class="vm-color-picker__alpha-fill"
-                  :style="{ background: alphaBg }"
-                />
+                <div class="vm-color-picker__rail vm-color-picker__rail--alpha">
+                  <span
+                    class="vm-color-picker__alpha-fill"
+                    :style="{ background: alphaBg }"
+                  />
+                </div>
                 <span
                   class="vm-color-picker__slider-thumb"
-                  :style="{ left: `${alpha * 100}%` }"
+                  :style="{ left: sliderThumbLeft(alpha) }"
                 />
               </div>
             </div>
           </div>
 
           <div class="vm-color-picker__footer">
-            <span class="vm-color-picker__format" title="颜色格式">
-              Hex
-              <i class="ri-arrow-down-s-line" aria-hidden="true" />
-            </span>
+            <select
+              class="vm-color-picker__format"
+              :value="colorFormat"
+              @change="onFormatChange"
+            >
+              <option
+                v-for="opt in FORMAT_OPTS"
+                :key="opt.id"
+                :value="opt.id"
+              >
+                {{ opt.label }}
+              </option>
+            </select>
             <input
               type="text"
-              class="vm-color-picker__hex"
-              :value="panelHex"
+              class="vm-color-picker__value"
+              :value="panelValue"
               spellcheck="false"
               autocomplete="off"
-              @input="onPanelHexInput"
-              @blur="onPanelHexBlur"
+              @input="onPanelValueInput"
+              @blur="onPanelValueBlur"
               @keydown.esc.stop="closePanel"
             />
             <input
@@ -155,6 +181,17 @@ const emit = defineEmits<{
 
 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 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' },
+]
+
+const THUMB_PX = 14
 
 const rootRef = ref<HTMLElement | null>(null)
 const triggerRef = ref<HTMLElement | null>(null)
@@ -166,15 +203,16 @@ const alphaRef = ref<HTMLElement | null>(null)
 const open = ref(false)
 const suppressOpen = ref(false)
 const panelStyle = ref<Record<string, string>>({})
+const colorFormat = ref<ColorFormat>('hex')
 
 const hue = ref(0)
 const sat = ref(0)
 const val = ref(0)
 const alpha = ref(1)
 
-/** 行内 / 面板 Hex 编辑中的草稿（不含 #） */
+/** 行内 Hex（不含 #）；面板按当前格式展示 */
 const inlineHex = ref('')
-const panelHex = ref('')
+const panelValue = ref('')
 const alphaPctText = ref('100%')
 
 const hasEyeDropper = ref(false)
@@ -188,6 +226,21 @@ function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n))
 }
 
+/** 拇指左缘：0 → 0，1 → 100%-14px，整圆始终在轨道盒内 */
+function sliderThumbLeft(ratio: number) {
+  const t = clamp(ratio, 0, 1)
+  return `calc(${t} * (100% - ${THUMB_PX}px))`
+}
+
+/** 指针映射：扣除两端半拇指宽度 */
+function sliderRatio(el: HTMLElement, e: PointerEvent) {
+  const r = el.getBoundingClientRect()
+  const pad = THUMB_PX / 2
+  const usable = r.width - THUMB_PX
+  if (usable <= 0) return 0
+  return clamp((e.clientX - r.left - pad) / usable, 0, 1)
+}
+
 function toHex2(n: number) {
   return clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')
 }
@@ -251,6 +304,61 @@ function rgbToHsv(r: number, g: number, b: number): Hsv {
   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()
@@ -283,9 +391,8 @@ function parseColor(raw: string): Rgba | null {
     return null
   }
 
-  const bare = s.startsWith('#') ? s.slice(1) : s
-  if (/^[0-9a-fA-F]{3}$/.test(bare) || /^[0-9a-fA-F]{6}$/.test(bare) || /^[0-9a-fA-F]{8}$/.test(bare)) {
-    return parseColor(`#${bare}`)
+  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(
@@ -299,6 +406,68 @@ function parseColor(raw: string): Rgba | null {
       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
+  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
 }
 
@@ -311,6 +480,31 @@ function currentHex(): string {
   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'
@@ -338,9 +532,8 @@ const svCursorStyle = computed(() => ({
 function syncTextsFromState() {
   const hex = currentHex()
   const bare = hex.startsWith('#') ? hex.slice(1) : hex
-  // 行内只展示 RGB 六位；透明度在面板 % 里改
   inlineHex.value = bare.slice(0, 6)
-  panelHex.value = bare.slice(0, 6)
+  panelValue.value = formatPanelValue()
   alphaPctText.value = `${Math.round(alpha.value * 100)}%`
 }
 
@@ -362,7 +555,7 @@ function loadFromModel(raw: string | null | undefined) {
     val.value = 0
     alpha.value = 1
     inlineHex.value = ''
-    panelHex.value = ''
+    panelValue.value = ''
     alphaPctText.value = '100%'
     return
   }
@@ -383,7 +576,6 @@ 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
@@ -413,7 +605,7 @@ function onInlineInput(e: Event) {
     hue.value = hsv.h
     sat.value = hsv.s
     val.value = hsv.v
-    panelHex.value = inlineHex.value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
+    panelValue.value = formatPanelValue()
     commit(currentHex())
   } else {
     const raw = inlineHex.value.trim()
@@ -437,25 +629,25 @@ function onInlineBlur() {
   }
 }
 
-function onPanelHexInput(e: Event) {
-  const v = (e.target as HTMLInputElement).value.replace(/^#/, '')
-  panelHex.value = v
-  const parsed = parseColor(v)
-  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
-    inlineHex.value = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)
-    commit(currentHex())
-  }
+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 onPanelHexBlur() {
-  const parsed = parseColor(panelHex.value)
+function onPanelValueBlur() {
+  const parsed = parsePanelValue(panelValue.value, alpha.value)
   if (parsed) {
-    parsed.a = alpha.value
+    if (colorFormat.value !== 'css') parsed.a = alpha.value
     applyRgba(parsed, true)
   } else {
     syncTextsFromState()
@@ -479,6 +671,12 @@ function onAlphaPctBlur() {
   commit(currentHex())
 }
 
+function onFormatChange(e: Event) {
+  const v = (e.target as HTMLSelectElement).value as ColorFormat
+  colorFormat.value = v
+  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)
@@ -523,8 +721,7 @@ 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
+    hue.value = sliderRatio(el, ev) * 360
     commitFromState()
   })
 }
@@ -533,14 +730,17 @@ function onAlphaPointer(e: PointerEvent) {
   const el = alphaRef.value
   if (!el) return
   bindDrag(el, e, (ev) => {
-    const { x } = ratioFromEvent(el, ev, 'x')
-    alpha.value = x
+    alpha.value = sliderRatio(el, ev)
     commitFromState()
   })
 }
 
 async function pickEyeDropper() {
-  const ED = (window as unknown as { EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> } }).EyeDropper
+  const ED = (
+    window as unknown as {
+      EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> }
+    }
+  ).EyeDropper
   if (!ED) return
   try {
     const result = await new ED().open()
@@ -564,7 +764,7 @@ function syncPanelPos() {
     left = Math.max(8, window.innerWidth - width - 8)
   }
   let top = r.bottom + 6
-  const estH = 280
+  const estH = 320
   if (top + estH > window.innerHeight - 8) {
     top = Math.max(8, r.top - estH - 6)
   }
@@ -623,9 +823,7 @@ function onWinChange() {
 }
 
 onMounted(() => {
-  hasEyeDropper.value =
-    typeof window !== 'undefined' &&
-    'EyeDropper' in window
+  hasEyeDropper.value = typeof window !== 'undefined' && 'EyeDropper' in window
   document.addEventListener('pointerdown', onDocPointer, true)
   window.addEventListener('resize', onWinChange)
   window.addEventListener('scroll', onWinChange, true)
@@ -741,6 +939,7 @@ onUnmounted(() => {
     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 {
@@ -779,17 +978,26 @@ onUnmounted(() => {
   width: 28px;
   height: 28px;
   padding: 0;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border, #e5e5e5);
   border-radius: 6px;
-  background: var(--muted);
-  color: var(--foreground);
-  font-size: 15px;
+  background: #fff;
+  color: #111;
   cursor: pointer;
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--brand, #4e5dff);
     color: var(--brand, #4e5dff);
   }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  svg {
+    display: block;
+    flex-shrink: 0;
+  }
 }
 
 .vm-color-picker__slider-col {
@@ -797,19 +1005,30 @@ onUnmounted(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
+  overflow: visible;
 }
 
-.vm-color-picker__hue,
-.vm-color-picker__alpha {
+.vm-color-picker__track {
   position: relative;
-  height: 12px;
-  border-radius: 999px;
+  width: 100%;
+  height: 14px;
+  overflow: visible;
   cursor: pointer;
   touch-action: none;
 }
 
-.vm-color-picker__hue {
+.vm-color-picker__rail {
+  position: absolute;
+  left: 7px;
+  right: 7px;
+  top: 1px;
+  height: 12px;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.vm-color-picker__rail--hue {
   background: linear-gradient(
     to right,
     #f00 0%,
@@ -822,7 +1041,7 @@ onUnmounted(() => {
   );
 }
 
-.vm-color-picker__alpha {
+.vm-color-picker__rail--alpha {
   background-image:
     linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
     linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
@@ -839,23 +1058,23 @@ onUnmounted(() => {
 }
 
 .vm-color-picker__alpha-fill {
-  position: absolute;
-  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
   border-radius: inherit;
-  pointer-events: none;
 }
 
 .vm-color-picker__slider-thumb {
   position: absolute;
-  top: 50%;
+  top: 0;
   width: 14px;
   height: 14px;
-  margin: -7px 0 0 -7px;
   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 {
@@ -867,33 +1086,31 @@ onUnmounted(() => {
 
 .vm-color-picker__format {
   flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
   height: 28px;
+  max-width: 72px;
   padding: 0 6px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border, #e5e5e5);
   border-radius: 6px;
-  background: var(--muted);
-  color: var(--muted-foreground, var(--foreground));
+  background: var(--muted, #f5f5f5);
+  color: var(--foreground, #111);
   font-size: 12px;
-  line-height: 1;
-  cursor: default;
+  cursor: pointer;
+  appearance: auto;
 
-  i {
-    font-size: 14px;
-    opacity: 0.7;
+  &:focus {
+    border-color: var(--brand, #4e5dff);
+    outline: none;
   }
 }
 
-.vm-color-picker__hex,
+.vm-color-picker__value,
 .vm-color-picker__alpha-pct {
   height: 28px;
   padding: 0 8px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border, #e5e5e5);
   border-radius: 6px;
-  background: var(--muted);
-  color: var(--foreground);
+  background: var(--muted, #f5f5f5);
+  color: var(--foreground, #111);
   font-size: 12px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   outline: none;
@@ -903,7 +1120,7 @@ onUnmounted(() => {
   }
 }
 
-.vm-color-picker__hex {
+.vm-color-picker__value {
   flex: 1;
   min-width: 0;
 }