vome-core 0.0.99 → 0.0.100

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 _0x3ff90c=_0x5f53;(function(_0x23faa9,_0x3572ce){const _0xa7d377=_0x5f53,_0x8dc756=_0x23faa9();while(!![]){try{const _0x142915=-parseInt(_0xa7d377(0x163))/0x1*(-parseInt(_0xa7d377(0x16b))/0x2)+-parseInt(_0xa7d377(0x171))/0x3+-parseInt(_0xa7d377(0x168))/0x4+-parseInt(_0xa7d377(0x165))/0x5+-parseInt(_0xa7d377(0x16d))/0x6*(-parseInt(_0xa7d377(0x16c))/0x7)+parseInt(_0xa7d377(0x173))/0x8*(-parseInt(_0xa7d377(0x161))/0x9)+-parseInt(_0xa7d377(0x16f))/0xa*(-parseInt(_0xa7d377(0x166))/0xb);if(_0x142915===_0x3572ce)break;else _0x8dc756['push'](_0x8dc756['shift']());}catch(_0x45a0a5){_0x8dc756['push'](_0x8dc756['shift']());}}}(_0x3f1f,0x930a9));function _0x5f53(_0x43315f,_0xc905dc){_0x43315f=_0x43315f-0x161;const _0x3f1f34=_0x3f1f();let _0x5f5342=_0x3f1f34[_0x43315f];if(_0x5f53['clGSmL']===undefined){var _0x101aee=function(_0x464ddb){const _0x4b4663='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x35dbb7='',_0x275b70='';for(let _0x12ab83=0x0,_0xc22f40,_0x4894b0,_0x3d5255=0x0;_0x4894b0=_0x464ddb['charAt'](_0x3d5255++);~_0x4894b0&&(_0xc22f40=_0x12ab83%0x4?_0xc22f40*0x40+_0x4894b0:_0x4894b0,_0x12ab83++%0x4)?_0x35dbb7+=String['fromCharCode'](0xff&_0xc22f40>>(-0x2*_0x12ab83&0x6)):0x0){_0x4894b0=_0x4b4663['indexOf'](_0x4894b0);}for(let _0x392816=0x0,_0xea8127=_0x35dbb7['length'];_0x392816<_0xea8127;_0x392816++){_0x275b70+='%'+('00'+_0x35dbb7['charCodeAt'](_0x392816)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x275b70);};_0x5f53['RkKRtU']=_0x101aee,_0x5f53['UELVwS']={},_0x5f53['clGSmL']=!![];}const _0x226af0=_0x3f1f34[0x0],_0x3f6264=_0x43315f+_0x226af0,_0x35b9fb=_0x5f53['UELVwS'][_0x3f6264];return!_0x35b9fb?(_0x5f5342=_0x5f53['RkKRtU'](_0x5f5342),_0x5f53['UELVwS'][_0x3f6264]=_0x5f5342):_0x5f5342=_0x35b9fb,_0x5f5342;}const ORG=_0x3ff90c(0x167);export function serviceUrlFromDocs(_0x35dbb7){const _0x3faaab=_0x3ff90c,_0x275b70=new URL(_0x35dbb7),_0x12ab83=_0x275b70['hostname'][_0x3faaab(0x17c)](/^www\./,'')[_0x3faaab(0x17c)](/^service\./,'');return _0x275b70[_0x3faaab(0x16e)]+_0x3faaab(0x17b)+_0x12ab83;}export function seatApiBaseFromDocs(_0xc22f40){return serviceUrlFromDocs(_0xc22f40)+'/app/pluginStore/seat';}export function licenseIssueUrlFromDocs(_0x4894b0){const _0x36d9fa=_0x3ff90c;return serviceUrlFromDocs(_0x4894b0)+_0x36d9fa(0x164);}function giteeArchive(_0x3d5255){const _0x228479=_0x3ff90c;return'https://gitee.com/'+ORG+'/'+_0x3d5255+_0x228479(0x17a);}function githubArchive(_0x392816){const _0x5bcdee=_0x3ff90c;return _0x5bcdee(0x169)+ORG+'/'+_0x392816+_0x5bcdee(0x179);}function giteeRepo(_0xea8127){return'https://gitee.com/'+ORG+'/'+_0xea8127;}function githubRepo(_0x32dc63){return'https://github.com/'+ORG+'/'+_0x32dc63;}function _0x3f1f(){const _0x2631af=['57QV5yMn56UV','DM9Tzs1WBhvNAw4TzNjVBNq','mJa4mZqXy3POALbz','DM9Tzs1WBhvNAw4TC2vYDMLJzq','mNzuyuzwBq','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq','ntiZmdeZmgvdsgLVAq','mtfRtuPTsKW','DM9TzwTQ','mJy5mdKYoeLwEerzvq','Ahr0Chm6lY9NAxrODwiUy29TlW','Ahr0Chm6lY9NAxrLzs5JB20V','nZeWodzZyKnMzw0','mJeYnty5y2zrBLzw','nKDXt09vtG','ChjVDg9JB2W','mZu5mde1ndbOu0rjBfa','zNvSBa','mJm3ntuYowL5BNvXCG','5yMn56UVicSG5zco56UV','mJaWD1HzqwDz','DM9Tzs1WBhvNAw4TzNvSBa','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','l3bSDwDPBNmVDxbSB2fK','zNjVBNrLBMq','yMfJA2vUza','l2fYy2HPDMuVCMvMCY9OzwfKCY9Tyxn0zxiUEMLW','l3jLCg9ZAxrVCNKVyxjJAgL2zs9Tyxn0zxiUEMLW','lY9Zzxj2AwnLlG','CMvWBgfJzq','Ahr0Chm6lY92B21LA2OUy29T','57QV5zco56UV'];_0x3f1f=function(){return _0x2631af;};return _0x3f1f();}const docsUrl=_0x3ff90c(0x17d);export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+_0x3ff90c(0x176),'mirrors':{'prefer':'gitee','giteeOrg':_0x3ff90c(0x16a)+ORG,'githubOrg':_0x3ff90c(0x169)+ORG},'scaffolds':{'full':{'key':_0x3ff90c(0x170),'title':_0x3ff90c(0x172),'desc':_0x3ff90c(0x175),'repo':_0x3ff90c(0x174),'repoUrl':giteeRepo(_0x3ff90c(0x174)),'githubRepoUrl':githubRepo(_0x3ff90c(0x174)),'downloadUrl':giteeArchive(_0x3ff90c(0x174)),'githubDownloadUrl':githubArchive(_0x3ff90c(0x174))},'backend':{'key':_0x3ff90c(0x178),'title':_0x3ff90c(0x17e),'desc':'钩子\x20/\x20服务端插件脚手架（.vome：仅\x20server），适合上传、短信、支付等能力扩展。','repo':_0x3ff90c(0x162),'repoUrl':giteeRepo(_0x3ff90c(0x162)),'githubRepoUrl':githubRepo(_0x3ff90c(0x162)),'downloadUrl':giteeArchive('vome-plugin-service'),'githubDownloadUrl':githubArchive(_0x3ff90c(0x162))},'frontend':{'key':_0x3ff90c(0x177),'title':_0x3ff90c(0x17f),'desc':'后台微应用脚手架（.vome：含\x20web/），以\x20wujie\x20挂载独立前端页面。','repo':'vome-plugin-front','repoUrl':giteeRepo(_0x3ff90c(0x180)),'githubRepoUrl':githubRepo(_0x3ff90c(0x180)),'downloadUrl':giteeArchive(_0x3ff90c(0x180)),'githubDownloadUrl':githubArchive('vome-plugin-front')}}};

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

@@ -67,7 +67,19 @@
               title="吸取颜色"
               @click="pickEyeDropper"
             >
-              <i class="ri-eyedropper-line" aria-hidden="true" />
+              <!-- 内联 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
@@ -77,7 +89,7 @@
               >
                 <span
                   class="vm-color-picker__slider-thumb"
-                  :style="{ left: `${(hue / 360) * 100}%` }"
+                  :style="{ left: thumbLeft(hue / 360) }"
                 />
               </div>
               <div
@@ -91,25 +103,57 @@
                 />
                 <span
                   class="vm-color-picker__slider-thumb"
-                  :style="{ left: `${alpha * 100}%` }"
+                  :style="{ left: thumbLeft(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>
+            <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__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 +199,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 +221,17 @@ 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 编辑中的草稿（不含 #） */
+/** 行内 Hex（不含 #）；面板按当前格式展示 */
 const inlineHex = ref('')
-const panelHex = ref('')
+const panelValue = ref('')
 const alphaPctText = ref('100%')
 
 const hasEyeDropper = ref(false)
@@ -184,10 +241,20 @@ const placeholderText = computed(() => {
   return p.startsWith('#') ? p.slice(1) : p
 })
 
+const formatLabel = computed(
+  () => FORMAT_OPTS.find((o) => o.id === colorFormat.value)?.label ?? 'Hex',
+)
+
 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')
 }
@@ -251,6 +318,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 +405,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 +420,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 +494,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 +546,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 +569,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 +590,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 +619,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 +643,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 +685,16 @@ function onAlphaPctBlur() {
   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)
@@ -540,7 +756,11 @@ function onAlphaPointer(e: PointerEvent) {
 }
 
 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 +784,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)
   }
@@ -580,6 +800,7 @@ function syncPanelPos() {
 async function openPanel() {
   if (props.disabled || suppressOpen.value) return
   loadFromModel(props.modelValue)
+  formatOpen.value = false
   open.value = true
   await nextTick()
   syncPanelPos()
@@ -592,6 +813,7 @@ function onPanelUnmountAutoFocus(event: Event) {
 function closePanel() {
   if (!open.value) return
   suppressOpen.value = true
+  formatOpen.value = false
   open.value = false
   nextTick(() => {
     requestAnimationFrame(() => {
@@ -623,9 +845,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 +961,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 {
@@ -783,7 +1004,6 @@ onUnmounted(() => {
   border-radius: 6px;
   background: var(--muted);
   color: var(--foreground);
-  font-size: 15px;
   cursor: pointer;
 
   &:hover {
@@ -792,6 +1012,10 @@ onUnmounted(() => {
   }
 }
 
+.vm-color-picker__eyedropper-ico {
+  display: block;
+}
+
 .vm-color-picker__slider-col {
   flex: 1;
   min-width: 0;
@@ -807,6 +1031,8 @@ onUnmounted(() => {
   border-radius: 999px;
   cursor: pointer;
   touch-action: none;
+  /* 允许拇指画出轨道高度，但水平用 thumbLeft 钳在内 */
+  overflow: visible;
 }
 
 .vm-color-picker__hue {
@@ -835,7 +1061,6 @@ onUnmounted(() => {
     4px -4px,
     -4px 0;
   background-color: #fff;
-  overflow: hidden;
 }
 
 .vm-color-picker__alpha-fill {
@@ -843,6 +1068,7 @@ onUnmounted(() => {
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
+  overflow: hidden;
 }
 
 .vm-color-picker__slider-thumb {
@@ -850,43 +1076,102 @@ onUnmounted(() => {
   top: 50%;
   width: 14px;
   height: 14px;
-  margin: -7px 0 0 -7px;
+  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 {
+.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 6px;
+  padding: 0 8px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--muted);
-  color: var(--muted-foreground, var(--foreground));
+  color: var(--foreground);
   font-size: 12px;
   line-height: 1;
-  cursor: default;
+  cursor: pointer;
+
+  &:hover,
+  &.is-open {
+    border-color: var(--brand, #4e5dff);
+  }
 
-  i {
-    font-size: 14px;
+  svg {
     opacity: 0.7;
   }
 }
 
-.vm-color-picker__hex,
+.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;
@@ -903,7 +1188,7 @@ onUnmounted(() => {
   }
 }
 
-.vm-color-picker__hex {
+.vm-color-picker__value {
   flex: 1;
   min-width: 0;
 }