vome-core 0.1.25 → 0.1.27

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

@@ -1 +1 @@
-const _0x4ce1fa=_0x2abb;(function(_0x2d47bb,_0x23fffb){const _0x13567b=_0x2abb,_0x142a3a=_0x2d47bb();while(!![]){try{const _0x1f4e59=-parseInt(_0x13567b(0xcf))/0x1+-parseInt(_0x13567b(0xcc))/0x2*(parseInt(_0x13567b(0xde))/0x3)+-parseInt(_0x13567b(0xd4))/0x4*(-parseInt(_0x13567b(0xe8))/0x5)+parseInt(_0x13567b(0xd6))/0x6+-parseInt(_0x13567b(0xce))/0x7*(parseInt(_0x13567b(0xe7))/0x8)+parseInt(_0x13567b(0xdc))/0x9*(-parseInt(_0x13567b(0xe4))/0xa)+-parseInt(_0x13567b(0xd5))/0xb*(-parseInt(_0x13567b(0xd1))/0xc);if(_0x1f4e59===_0x23fffb)break;else _0x142a3a['push'](_0x142a3a['shift']());}catch(_0x2e9673){_0x142a3a['push'](_0x142a3a['shift']());}}}(_0x3942,0x6850c));const ORG=_0x4ce1fa(0xda);export function serviceUrlFromDocs(_0x151de4){const _0x3ead6a=_0x4ce1fa,_0x23aecd=new URL(_0x151de4),_0x326b33=_0x23aecd[_0x3ead6a(0xe5)][_0x3ead6a(0xe2)](/^www\./,'')[_0x3ead6a(0xe2)](/^service\./,'');return _0x23aecd['protocol']+'//service.'+_0x326b33;}export function seatApiBaseFromDocs(_0x51c72c){const _0x27216f=_0x4ce1fa;return serviceUrlFromDocs(_0x51c72c)+_0x27216f(0xdb);}function _0x2abb(_0x29b7e4,_0x57e7e1){_0x29b7e4=_0x29b7e4-0xcb;const _0x3942b0=_0x3942();let _0x2abb1c=_0x3942b0[_0x29b7e4];if(_0x2abb['cqlRSa']===undefined){var _0x3de77b=function(_0x21ce86){const _0x51cacd='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x151de4='',_0x23aecd='';for(let _0x326b33=0x0,_0x51c72c,_0x16d2e3,_0xc843f3=0x0;_0x16d2e3=_0x21ce86['charAt'](_0xc843f3++);~_0x16d2e3&&(_0x51c72c=_0x326b33%0x4?_0x51c72c*0x40+_0x16d2e3:_0x16d2e3,_0x326b33++%0x4)?_0x151de4+=String['fromCharCode'](0xff&_0x51c72c>>(-0x2*_0x326b33&0x6)):0x0){_0x16d2e3=_0x51cacd['indexOf'](_0x16d2e3);}for(let _0x35b1c7=0x0,_0xdb5a6b=_0x151de4['length'];_0x35b1c7<_0xdb5a6b;_0x35b1c7++){_0x23aecd+='%'+('00'+_0x151de4['charCodeAt'](_0x35b1c7)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x23aecd);};_0x2abb['SZsmxe']=_0x3de77b,_0x2abb['qBHrLr']={},_0x2abb['cqlRSa']=!![];}const _0x27a24c=_0x3942b0[0x0],_0x88488e=_0x29b7e4+_0x27a24c,_0x2403d4=_0x2abb['qBHrLr'][_0x88488e];return!_0x2403d4?(_0x2abb1c=_0x2abb['SZsmxe'](_0x2abb1c),_0x2abb['qBHrLr'][_0x88488e]=_0x2abb1c):_0x2abb1c=_0x2403d4,_0x2abb1c;}export function licenseIssueUrlFromDocs(_0x16d2e3){const _0x185257=_0x4ce1fa;return serviceUrlFromDocs(_0x16d2e3)+_0x185257(0xd9);}function giteeArchive(_0xc843f3){const _0x1946cc=_0x4ce1fa;return _0x1946cc(0xd7)+ORG+'/'+_0xc843f3+_0x1946cc(0xd2);}function githubArchive(_0x35b1c7){const _0x39cbae=_0x4ce1fa;return _0x39cbae(0xdd)+ORG+'/'+_0x35b1c7+_0x39cbae(0xdf);}function giteeRepo(_0xdb5a6b){const _0x4c5fc6=_0x4ce1fa;return _0x4c5fc6(0xd7)+ORG+'/'+_0xdb5a6b;}function githubRepo(_0x29838a){const _0x3f5578=_0x4ce1fa;return _0x3f5578(0xdd)+ORG+'/'+_0x29838a;}const docsUrl='https://vomekj.com';export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+_0x4ce1fa(0xd0),'mirrors':{'prefer':_0x4ce1fa(0xd3),'giteeOrg':_0x4ce1fa(0xd7)+ORG,'githubOrg':'https://github.com/'+ORG},'scaffolds':{'full':{'key':'full','title':'前端\x20+\x20后端','desc':'完整业务模块脚手架（.vome：含\x20server\x20与\x20web），本地开发打包后发布。','repo':'vome-plugin-full','repoUrl':giteeRepo('vome-plugin-full'),'githubRepoUrl':githubRepo(_0x4ce1fa(0xe6)),'downloadUrl':giteeArchive(_0x4ce1fa(0xe6)),'githubDownloadUrl':githubArchive('vome-plugin-full')},'backend':{'key':_0x4ce1fa(0xe3),'title':_0x4ce1fa(0xcd),'desc':'钩子\x20/\x20服务端插件脚手架（.vome：仅\x20server），适合上传、短信、支付等能力扩展。','repo':'vome-plugin-service','repoUrl':giteeRepo('vome-plugin-service'),'githubRepoUrl':githubRepo(_0x4ce1fa(0xcb)),'downloadUrl':giteeArchive(_0x4ce1fa(0xcb)),'githubDownloadUrl':githubArchive(_0x4ce1fa(0xcb))},'frontend':{'key':'frontend','title':_0x4ce1fa(0xe1),'desc':_0x4ce1fa(0xd8),'repo':_0x4ce1fa(0xe0),'repoUrl':giteeRepo(_0x4ce1fa(0xe0)),'githubRepoUrl':githubRepo(_0x4ce1fa(0xe0)),'downloadUrl':giteeArchive('vome-plugin-front'),'githubDownloadUrl':githubArchive(_0x4ce1fa(0xe0))}}};function _0x3942(){const _0x1dcafd=['mJrxsgPzCMe','mtm5mJqYnxfqD3PYzq','DM9Tzs1WBhvNAw4TC2vYDMLJzq','mtG4nK9ftKTrtG','57QV5zco56UV','mtqZmty0vhnfv2Hi','nZG4mtyWvxHbweDT','l3bSDwDPBNmVDxbSB2fK','otiWmtq4zuDsvvju','l3jLCg9ZAxrVCNKVyxjJAgL2zs9Tyxn0zxiUEMLW','z2L0zwu','oefbEMnKuG','mtu0zhHeChLr','mZK2mJiZmLPosKfWqW','Ahr0Chm6lY9NAxrLzs5JB20V','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq','DM9TzwTQ','l2fWCc9WBhvNAw5tDg9Yzs9Zzwf0','mJm0otLHC1bQCKW','Ahr0Chm6lY9NAxrODwiUy29TlW','otC1tg14zeXS','l2fYy2HPDMuVCMvMCY9OzwfKCY9Tyxn0zxiUEMLW','DM9Tzs1WBhvNAw4TzNjVBNq','57QV5yMn56UV','CMvWBgfJzq','yMfJA2vUza','mJCXmgjbsxr4va','Ag9ZDg5HBwu','DM9Tzs1WBhvNAw4TzNvSBa'];_0x3942=function(){return _0x1dcafd;};return _0x3942();}
+const _0x245ea6=_0x5738;(function(_0x217bd0,_0x3783bd){const _0x8ef90f=_0x5738,_0x24f6a2=_0x217bd0();while(!![]){try{const _0x19b1e6=parseInt(_0x8ef90f(0x178))/0x1+-parseInt(_0x8ef90f(0x193))/0x2+parseInt(_0x8ef90f(0x189))/0x3+-parseInt(_0x8ef90f(0x18f))/0x4+parseInt(_0x8ef90f(0x191))/0x5*(-parseInt(_0x8ef90f(0x183))/0x6)+-parseInt(_0x8ef90f(0x190))/0x7*(parseInt(_0x8ef90f(0x17d))/0x8)+parseInt(_0x8ef90f(0x186))/0x9*(parseInt(_0x8ef90f(0x181))/0xa);if(_0x19b1e6===_0x3783bd)break;else _0x24f6a2['push'](_0x24f6a2['shift']());}catch(_0x318829){_0x24f6a2['push'](_0x24f6a2['shift']());}}}(_0x1ba4,0xadcb7));const ORG=_0x245ea6(0x17e);export function serviceUrlFromDocs(_0x518aec){const _0x368b3f=_0x245ea6,_0x12bba5=new URL(_0x518aec),_0x515ef0=_0x12bba5['hostname'][_0x368b3f(0x18c)](/^www\./,'')['replace'](/^service\./,'');return _0x12bba5[_0x368b3f(0x182)]+'//service.'+_0x515ef0;}export function seatApiBaseFromDocs(_0x167144){const _0xd6b169=_0x245ea6;return serviceUrlFromDocs(_0x167144)+_0xd6b169(0x17a);}export function licenseIssueUrlFromDocs(_0x58196e){const _0x84dd57=_0x245ea6;return serviceUrlFromDocs(_0x58196e)+_0x84dd57(0x180);}function _0x1ba4(){const _0x4d745a=['mtGZmJK5mhHjEMPQDa','ChjVDg9JB2W','nte3og1TtwHdzG','5yMn56UVicSG5zco56UV','DM9Tzs1WBhvNAw4TC2vYDMLJzq','mta4z1fTwgn4','z2L0zwu','l2fYy2HPDMuVCMvMCY9OzwfKCY9Tyxn0zxiUEMLW','mZyYnJG3neros2Dctq','zNvSBa','DM9Tzs1WBhvNAw4TzNvSBa','CMvWBgfJzq','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','57QV5yMn56UV','ndyXnJe2ohH4ywDSDG','n0XvsfjNwG','nJq3mgnMwNrvwG','Ahr0Chm6lY9NAxrODwiUy29TlW','mJuYota4mNzTs0rbrW','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','Ahr0Chm6lY9NAxrLzs5JB20V','DM9Tzs1WBhvNAw4TzNjVBNq','mteYnZC3m0zey2L4sG','yMfJA2vUza','l2fWCc9WBhvNAw5tDg9Yzs9Zzwf0','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','zNjVBNrLBMq','mJmXmZiWohLmDhH6uq','DM9TzwTQ','l3bSDwDPBNmVDxbSB2fK','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq'];_0x1ba4=function(){return _0x4d745a;};return _0x1ba4();}function giteeArchive(_0x31818e){const _0x3f07f3=_0x245ea6;return _0x3f07f3(0x176)+ORG+'/'+_0x31818e+'/repository/archive/master.zip';}function githubArchive(_0x37a8f5){const _0x51d5ee=_0x245ea6;return _0x51d5ee(0x192)+ORG+'/'+_0x37a8f5+_0x51d5ee(0x188);}function giteeRepo(_0x649b87){return'https://gitee.com/'+ORG+'/'+_0x649b87;}function githubRepo(_0x39d849){return'https://github.com/'+ORG+'/'+_0x39d849;}function _0x5738(_0x3d205a,_0x49a45f){_0x3d205a=_0x3d205a-0x175;const _0x1ba4c1=_0x1ba4();let _0x573808=_0x1ba4c1[_0x3d205a];if(_0x5738['BzNZAs']===undefined){var _0x32c628=function(_0x3248e0){const _0x9056ea='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x518aec='',_0x12bba5='';for(let _0x515ef0=0x0,_0x167144,_0x58196e,_0x31818e=0x0;_0x58196e=_0x3248e0['charAt'](_0x31818e++);~_0x58196e&&(_0x167144=_0x515ef0%0x4?_0x167144*0x40+_0x58196e:_0x58196e,_0x515ef0++%0x4)?_0x518aec+=String['fromCharCode'](0xff&_0x167144>>(-0x2*_0x515ef0&0x6)):0x0){_0x58196e=_0x9056ea['indexOf'](_0x58196e);}for(let _0x37a8f5=0x0,_0x649b87=_0x518aec['length'];_0x37a8f5<_0x649b87;_0x37a8f5++){_0x12bba5+='%'+('00'+_0x518aec['charCodeAt'](_0x37a8f5)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x12bba5);};_0x5738['UlgIzL']=_0x32c628,_0x5738['zMFEqs']={},_0x5738['BzNZAs']=!![];}const _0x956bbb=_0x1ba4c1[0x0],_0x506e04=_0x3d205a+_0x956bbb,_0x1be382=_0x5738['zMFEqs'][_0x506e04];return!_0x1be382?(_0x573808=_0x5738['UlgIzL'](_0x573808),_0x5738['zMFEqs'][_0x506e04]=_0x573808):_0x573808=_0x1be382,_0x573808;}const docsUrl='https://vomekj.com';export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+_0x245ea6(0x17f),'mirrors':{'prefer':_0x245ea6(0x187),'giteeOrg':_0x245ea6(0x176)+ORG,'githubOrg':_0x245ea6(0x192)+ORG},'scaffolds':{'full':{'key':_0x245ea6(0x18a),'title':_0x245ea6(0x184),'desc':_0x245ea6(0x17b),'repo':'vome-plugin-full','repoUrl':giteeRepo(_0x245ea6(0x18b)),'githubRepoUrl':githubRepo(_0x245ea6(0x18b)),'downloadUrl':giteeArchive('vome-plugin-full'),'githubDownloadUrl':githubArchive(_0x245ea6(0x18b))},'backend':{'key':_0x245ea6(0x179),'title':'纯后端','desc':_0x245ea6(0x175),'repo':_0x245ea6(0x185),'repoUrl':giteeRepo(_0x245ea6(0x185)),'githubRepoUrl':githubRepo('vome-plugin-service'),'downloadUrl':giteeArchive(_0x245ea6(0x185)),'githubDownloadUrl':githubArchive(_0x245ea6(0x185))},'frontend':{'key':_0x245ea6(0x17c),'title':_0x245ea6(0x18e),'desc':_0x245ea6(0x18d),'repo':'vome-plugin-front','repoUrl':giteeRepo(_0x245ea6(0x177)),'githubRepoUrl':githubRepo(_0x245ea6(0x177)),'downloadUrl':giteeArchive(_0x245ea6(0x177)),'githubDownloadUrl':githubArchive(_0x245ea6(0x177))}}};

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

@@ -21,15 +21,16 @@
     <input
       type="text"
       class="vm-color-picker__input"
-      :value="inlineHex"
+      :value="inlineDisplay"
       :placeholder="placeholderText"
       :disabled="disabled"
       spellcheck="false"
       autocomplete="off"
+      :title="isThemeBound ? themeBoundLabel : undefined"
       @input="onInlineInput"
       @focus="openPanel"
       @blur="onInlineBlur"
-      @keydown.esc.stop="closePanel"
+      @keydown.esc.stop="onEscEnd"
     />
 
     <Teleport to="body">
@@ -47,6 +48,69 @@
           @pointerdown.stop
           @mousedown.stop
         >
+          <div class="vm-color-picker__toolbar">
+            <div
+              v-if="hasThemeOptions"
+              class="vm-color-picker__modes"
+              role="tablist"
+            >
+              <button
+                type="button"
+                class="vm-color-picker__mode"
+                :class="{ 'is-on': panelMode === 'theme' }"
+                role="tab"
+                @click="panelMode = 'theme'"
+              >
+                主题
+              </button>
+              <button
+                type="button"
+                class="vm-color-picker__mode"
+                :class="{ 'is-on': panelMode === 'picker' }"
+                role="tab"
+                @click="panelMode = 'picker'"
+              >
+                取色器
+              </button>
+            </div>
+            <span v-else class="vm-color-picker__toolbar-spacer" />
+            <button
+              type="button"
+              class="vm-color-picker__close"
+              title="关闭"
+              aria-label="关闭"
+              @click="closePanel"
+            >
+              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M6.4 19 5 17.6 10.6 12 5 6.4 6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19Z"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div v-if="panelMode === 'theme' && hasThemeOptions" class="vm-color-picker__theme">
+            <button
+              v-for="opt in themeOptions"
+              :key="opt.key"
+              type="button"
+              class="vm-color-picker__theme-item"
+              :class="{ 'is-on': themeBoundKey === opt.key }"
+              @click="pickTheme(opt.key)"
+            >
+              <span
+                class="vm-color-picker__theme-swatch"
+                :style="{ background: opt.value }"
+              />
+              <span class="vm-color-picker__theme-meta">
+                <span class="vm-color-picker__theme-label">{{ opt.label }}</span>
+                <span class="vm-color-picker__theme-key">{{ opt.key }}</span>
+              </span>
+            </button>
+          </div>
+
+          <template v-else>
           <div
             ref="svRef"
             class="vm-color-picker__sv"
@@ -154,7 +218,7 @@
               autocomplete="off"
               @input="onPanelValueInput"
               @blur="onPanelValueBlur"
-              @keydown.esc.stop="closePanel"
+              @keydown.esc.stop="onEscEnd"
             />
             <input
               type="text"
@@ -164,9 +228,10 @@
               autocomplete="off"
               @input="onAlphaPctInput"
               @blur="onAlphaPctBlur"
-              @keydown.esc.stop="closePanel"
+              @keydown.esc.stop="onEscEnd"
             />
           </div>
+          </template>
         </div>
       </FocusScope>
     </Teleport>
@@ -179,16 +244,26 @@ import { FocusScope } from 'reka-ui'
 
 defineOptions({ name: 'vm-color-picker' })
 
+/** 主题色选项（有则显示「主题 / 取色器」） */
+export type VmColorThemeOption = {
+  key: string
+  label: string
+  /** 当前模式下的预览色 */
+  value: string
+}
+
 const props = withDefaults(
   defineProps<{
     modelValue?: string | null
     disabled?: boolean
     placeholder?: string
     size?: 'default' | 'sm'
+    themeOptions?: VmColorThemeOption[]
   }>(),
   {
     placeholder: '#000000',
     size: 'default',
+    themeOptions: () => [],
   },
 )
 
@@ -201,6 +276,19 @@ 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'
 
+function parseCssVarRef(raw: string): string | null {
+  const s = String(raw || '').trim()
+  const m = s.match(/^var\(\s*--([a-zA-Z0-9_-]+)\s*(?:,[^)]*)?\)$/i)
+  return m ? m[1]! : null
+}
+
+function toCssVarRef(key: string): string {
+  const k = String(key || '')
+    .trim()
+    .replace(/^--/, '')
+  return k ? `var(--${k})` : ''
+}
+
 const FORMAT_OPTS: { id: ColorFormat; label: string }[] = [
   { id: 'hex', label: 'Hex' },
   { id: 'rgb', label: 'RGB' },
@@ -223,6 +311,8 @@ const suppressOpen = ref(false)
 const panelStyle = ref<Record<string, string>>({})
 const formatOpen = ref(false)
 const colorFormat = ref<ColorFormat>('hex')
+/** 面板：主题变量 | 取色器 */
+const panelMode = ref<'theme' | 'picker'>('picker')
 
 const hue = ref(0)
 const sat = ref(0)
@@ -236,6 +326,38 @@ const alphaPctText = ref('100%')
 
 const hasEyeDropper = ref(false)
 
+const themeOptions = computed(() => props.themeOptions || [])
+const hasThemeOptions = computed(() => themeOptions.value.length > 0)
+const themeBoundKey = computed(() => parseCssVarRef(props.modelValue ?? ''))
+const isThemeBound = computed(() => Boolean(themeBoundKey.value))
+const themeBoundOpt = computed(() => {
+  const k = themeBoundKey.value
+  if (!k) return null
+  return themeOptions.value.find((o) => o.key === k) || null
+})
+const themeBoundLabel = computed(() => {
+  const opt = themeBoundOpt.value
+  if (opt) return opt.label
+  const k = themeBoundKey.value
+  return k ? k : ''
+})
+const inlineDisplay = computed(() => {
+  if (isThemeBound.value) {
+    return String(props.modelValue || '').trim() || themeBoundLabel.value
+  }
+  return inlineHex.value
+})
+
+/** 行内：主题变量 / mustache，不当作 hex 强行加 # */
+function isInlineExpr(raw: string): boolean {
+  const s = String(raw || '').trim()
+  if (!s) return false
+  if (/\{\{[\s\S]*?\}\}/.test(s)) return true
+  if (parseCssVarRef(s)) return true
+  if (/^var\s*\(/i.test(s)) return true
+  return false
+}
+
 const placeholderText = computed(() => {
   const p = props.placeholder || '#000000'
   return p.startsWith('#') ? p.slice(1) : p
@@ -520,13 +642,33 @@ function formatPanelValue(): string {
 }
 
 const cssColor = computed(() => {
-  const parsed = parseColor(props.modelValue ?? '')
-  if (!parsed && !(props.modelValue ?? '').trim()) return 'transparent'
+  const themePreview = themeBoundOpt.value?.value
+  if (themePreview) {
+    const parsed = parseColor(themePreview)
+    if (parsed) {
+      const { r, g, b, a } = parsed
+      return a < 1 ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`
+    }
+    return String(themePreview)
+  }
+  if (themeBoundKey.value) {
+    return `var(--${themeBoundKey.value})`
+  }
+  const raw = props.modelValue ?? ''
+  const parsed = parseColor(raw)
+  if (!parsed && !String(raw).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})`
 })
 
+function pickTheme(key: string) {
+  const ref = toCssVarRef(key)
+  if (!ref) return
+  commit(ref)
+  closePanel()
+}
+
 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)}))`
@@ -563,6 +705,26 @@ function applyRgba(c: Rgba, emitValue = true) {
 
 function loadFromModel(raw: string | null | undefined) {
   const s = raw ?? ''
+  const varKey = parseCssVarRef(s)
+  if (varKey) {
+    const opt = themeOptions.value.find((o) => o.key === varKey)
+    const preview = opt?.value || ''
+    if (preview) {
+      const parsed = parseColor(preview)
+      if (parsed) {
+        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()
+        return
+      }
+    }
+    inlineHex.value = varKey
+    panelValue.value = varKey
+    return
+  }
   if (!s.trim()) {
     hue.value = 0
     sat.value = 0
@@ -610,9 +772,15 @@ function commitFromState() {
 }
 
 function onInlineInput(e: Event) {
-  const v = (e.target as HTMLInputElement).value
-  inlineHex.value = v.replace(/^#/, '')
-  const parsed = parseColor(inlineHex.value)
+  const rawInput = (e.target as HTMLInputElement).value
+  if (isInlineExpr(rawInput)) {
+    inlineHex.value = rawInput
+    commit(rawInput.trim())
+    return
+  }
+  const v = rawInput.replace(/^#/, '')
+  inlineHex.value = v
+  const parsed = parseColor(v)
   if (parsed) {
     parsed.a = alpha.value
     const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
@@ -621,26 +789,44 @@ function onInlineInput(e: Event) {
     val.value = hsv.v
     panelValue.value = formatPanelValue()
     commit(currentHex())
-  } else {
-    const raw = inlineHex.value.trim()
-    commit(raw ? (raw.startsWith('#') ? raw : `#${raw}`) : '')
+    return
+  }
+  const raw = v.trim()
+  if (!raw) {
+    commit('')
+    return
+  }
+  if (/^[0-9a-fA-F]{1,8}$/.test(raw)) {
+    commit(`#${raw}`)
+    return
   }
+  commit(raw)
 }
 
 function onInlineBlur() {
   const t = inlineHex.value.trim()
   if (!t) {
     commit('')
-    syncTextsFromState()
+    hue.value = 0
+    sat.value = 0
+    val.value = 0
+    alpha.value = 1
+    inlineHex.value = ''
+    panelValue.value = ''
+    alphaPctText.value = '100%'
+    return
+  }
+  if (isInlineExpr(t)) {
+    commit(t)
     return
   }
   const parsed = parseColor(t)
   if (parsed) {
     parsed.a = alpha.value
     applyRgba(parsed, true)
-  } else {
-    loadFromModel(props.modelValue)
+    return
   }
+  loadFromModel(props.modelValue)
 }
 
 function onPanelValueInput(e: Event) {
@@ -801,6 +987,13 @@ async function openPanel() {
   if (props.disabled || suppressOpen.value) return
   loadFromModel(props.modelValue)
   formatOpen.value = false
+  if (hasThemeOptions.value) {
+    const bound = parseCssVarRef(props.modelValue ?? '')
+    const empty = !(props.modelValue ?? '').trim()
+    panelMode.value = bound || empty ? 'theme' : 'picker'
+  } else {
+    panelMode.value = 'picker'
+  }
   open.value = true
   await nextTick()
   syncPanelPos()
@@ -822,6 +1015,13 @@ function closePanel() {
   })
 }
 
+/** Esc：收起面板并失焦 */
+function onEscEnd(e: KeyboardEvent) {
+  closePanel()
+  const el = e.target
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) el.blur()
+}
+
 async function toggle() {
   if (props.disabled) return
   if (open.value) {
@@ -964,6 +1164,146 @@ onUnmounted(() => {
   overflow: visible;
 }
 
+.vm-color-picker__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.vm-color-picker__toolbar-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-color-picker__close {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground, #9aa0b0);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--muted, #f4f6fc);
+    color: var(--foreground);
+  }
+}
+
+.vm-color-picker__modes {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  margin: 0;
+  padding: 3px;
+  border-radius: 8px;
+  background: var(--muted, #f4f6fc);
+}
+
+.vm-color-picker__mode {
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground, #9aa0b0);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &.is-on {
+    background: var(--card, #fff);
+    color: var(--foreground);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
+  }
+}
+
+.vm-color-picker__theme {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 280px;
+  overflow: auto;
+  margin: 0 -4px;
+  padding: 0 4px;
+}
+
+.vm-color-picker__theme-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  margin: 0;
+  padding: 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+
+  &:hover {
+    background: color-mix(in srgb, var(--brand, #4e5dff) 8%, transparent);
+  }
+
+  &.is-on {
+    border-color: color-mix(in srgb, var(--brand, #4e5dff) 45%, transparent);
+    background: color-mix(in srgb, var(--brand, #4e5dff) 10%, transparent);
+  }
+}
+
+.vm-color-picker__theme-swatch {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1px solid var(--border, #e8ebf5);
+  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%);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+}
+
+.vm-color-picker__theme-meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vm-color-picker__theme-label {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-color-picker__theme-key {
+  font-size: 11px;
+  color: var(--muted-foreground, #9aa0b0);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .vm-color-picker__sv {
   position: relative;
   width: 100%;