vome-core 0.1.24 → 0.1.26

package/dist/admin/components/vm-icon-picker.vue

@@ -91,12 +91,26 @@
               <i :class="name" />
             </button>
             <button
-              v-if="showRefresh"
+              v-if="showPager"
               type="button"
-              class="vm-icon-picker__more"
+              class="vm-icon-picker__page-btn"
+              :disabled="!canPrev"
+              title="上一页"
+              aria-label="上一页"
+              @click.prevent.stop="prevBatch"
+            >
+              <i class="ri-arrow-left-s-line" />
+            </button>
+            <button
+              v-if="showPager"
+              type="button"
+              class="vm-icon-picker__page-btn"
+              :disabled="!canNext"
+              title="下一页"
+              aria-label="下一页"
               @click.prevent.stop="nextBatch"
             >
-              换一批
+              <i class="ri-arrow-right-s-line" />
             </button>
             <p v-if="!filtered.length" class="vm-icon-picker__empty">无匹配图标</p>
           </div>
@@ -138,7 +152,7 @@ const emit = defineEmits<{
   'update:modelValue': [v: string]
 }>()
 
-/** 10 列 × 5 行 = 50 格，末尾 2 格给「换一批」 */
+/** 10 列 × 5 行 = 50 格，末尾 2 格给上一页 / 下一页 */
 const PAGE_SIZE = 48
 const ALL = allIcons as string[]
 
@@ -221,11 +235,15 @@ const pageCount = computed(() =>
 )
 
 const pageIcons = computed(() => {
-  const start = (page.value % pageCount.value) * PAGE_SIZE
+  const start = page.value * PAGE_SIZE
   return filtered.value.slice(start, start + PAGE_SIZE)
 })
 
-const showRefresh = computed(() => filtered.value.length > PAGE_SIZE)
+const showPager = computed(() => filtered.value.length > PAGE_SIZE)
+const canPrev = computed(() => page.value > 0)
+const canNext = computed(
+  () => page.value < pageCount.value - 1 && filtered.value.length > PAGE_SIZE,
+)
 
 watch(filtered, () => {
   page.value = 0
@@ -321,8 +339,14 @@ function pick(name: string) {
   closePanel()
 }
 
+function prevBatch() {
+  if (!canPrev.value) return
+  page.value -= 1
+}
+
 function nextBatch() {
-  page.value = (page.value + 1) % pageCount.value
+  if (!canNext.value) return
+  page.value += 1
 }
 
 function onDocPointer(e: Event) {
@@ -586,10 +610,8 @@ onUnmounted(() => {
   }
 }
 
-.vm-icon-picker__more {
-  grid-column: span 2;
-  height: 100%;
-  min-height: 32px;
+.vm-icon-picker__page-btn {
+  aspect-ratio: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -597,14 +619,21 @@ onUnmounted(() => {
   border-radius: 8px;
   background: var(--brand-soft);
   color: var(--brand);
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 18px;
+  line-height: 1;
   cursor: pointer;
-  transition: background 0.12s;
+  transition:
+    background 0.12s,
+    opacity 0.12s;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: color-mix(in srgb, var(--brand) 16%, #fff);
   }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
 }
 
 .vm-icon-picker__empty {

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

@@ -1 +1 @@
-const _0x7c3064=_0x5a49;(function(_0x30139c,_0x343d8a){const _0x5ec467=_0x5a49,_0x47f4d3=_0x30139c();while(!![]){try{const _0x58794f=-parseInt(_0x5ec467(0x120))/0x1*(-parseInt(_0x5ec467(0x112))/0x2)+parseInt(_0x5ec467(0x12b))/0x3+-parseInt(_0x5ec467(0x125))/0x4+-parseInt(_0x5ec467(0x11e))/0x5+parseInt(_0x5ec467(0x118))/0x6+parseInt(_0x5ec467(0x129))/0x7+-parseInt(_0x5ec467(0x121))/0x8*(parseInt(_0x5ec467(0x124))/0x9);if(_0x58794f===_0x343d8a)break;else _0x47f4d3['push'](_0x47f4d3['shift']());}catch(_0x9b46ab){_0x47f4d3['push'](_0x47f4d3['shift']());}}}(_0xc483,0x8adee));const ORG=_0x7c3064(0x12a);function _0x5a49(_0x1e384d,_0x586e8a){_0x1e384d=_0x1e384d-0x110;const _0xc483b7=_0xc483();let _0x5a49c1=_0xc483b7[_0x1e384d];if(_0x5a49['lwkcRA']===undefined){var _0x32eb68=function(_0x42a750){const _0x207912='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x5cf414='',_0x26be99='';for(let _0x4d29af=0x0,_0x2fe957,_0x5e9baa,_0xfd23fd=0x0;_0x5e9baa=_0x42a750['charAt'](_0xfd23fd++);~_0x5e9baa&&(_0x2fe957=_0x4d29af%0x4?_0x2fe957*0x40+_0x5e9baa:_0x5e9baa,_0x4d29af++%0x4)?_0x5cf414+=String['fromCharCode'](0xff&_0x2fe957>>(-0x2*_0x4d29af&0x6)):0x0){_0x5e9baa=_0x207912['indexOf'](_0x5e9baa);}for(let _0x10cf53=0x0,_0x53e02a=_0x5cf414['length'];_0x10cf53<_0x53e02a;_0x10cf53++){_0x26be99+='%'+('00'+_0x5cf414['charCodeAt'](_0x10cf53)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x26be99);};_0x5a49['wEAMQF']=_0x32eb68,_0x5a49['nqVHSJ']={},_0x5a49['lwkcRA']=!![];}const _0x5f4e77=_0xc483b7[0x0],_0x446f7b=_0x1e384d+_0x5f4e77,_0x929765=_0x5a49['nqVHSJ'][_0x446f7b];return!_0x929765?(_0x5a49c1=_0x5a49['wEAMQF'](_0x5a49c1),_0x5a49['nqVHSJ'][_0x446f7b]=_0x5a49c1):_0x5a49c1=_0x929765,_0x5a49c1;}export function serviceUrlFromDocs(_0x5cf414){const _0xbe122e=_0x7c3064,_0x26be99=new URL(_0x5cf414),_0x4d29af=_0x26be99[_0xbe122e(0x122)][_0xbe122e(0x126)](/^www\./,'')[_0xbe122e(0x126)](/^service\./,'');return _0x26be99[_0xbe122e(0x128)]+'//service.'+_0x4d29af;}export function seatApiBaseFromDocs(_0x2fe957){return serviceUrlFromDocs(_0x2fe957)+'/app/pluginStore/seat';}export function licenseIssueUrlFromDocs(_0x5e9baa){const _0x403dfc=_0x7c3064;return serviceUrlFromDocs(_0x5e9baa)+_0x403dfc(0x11c);}function giteeArchive(_0xfd23fd){const _0x18613e=_0x7c3064;return _0x18613e(0x113)+ORG+'/'+_0xfd23fd+_0x18613e(0x114);}function githubArchive(_0x10cf53){return'https://github.com/'+ORG+'/'+_0x10cf53+'/archive/refs/heads/master.zip';}function _0xc483(){const _0x5aa9e8=['zNvSBa','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','l3bSDwDPBNmVDxbSB2fK','mJa0ndi0mK1zyuXZqq','Ahr0Chm6lY9NAxrLzs5JB20V','l3jLCg9ZAxrVCNKVyxjJAgL2zs9Tyxn0zxiUEMLW','Ahr0Chm6lY92B21LA2OUy29T','DM9Tzs1WBhvNAw4TC2vYDMLJzq','DM9Tzs1WBhvNAw4TzNjVBNq','ntCYntq3mhHWBxDVua','Ahr0Chm6lY9NAxrODwiUy29TlW','DM9Tzs1WBhvNAw4TzNvSBa','zNjVBNrLBMq','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq','yMfJA2vUza','mtuWmZCZme1KBMDguG','57QV5zco56UV','muLoAuDIsW','ogfNCNzKAq','Ag9ZDg5HBwu','5yMn56UVicSG5zco56UV','mtGYotmWmZftrezAyvq','otqWnJb2C1fXDui','CMvWBgfJzq','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','ChjVDg9JB2W','nJiZmtG1nwHbCw56qG','DM9TzwTQ','mtC3mda5u2noqvbZ'];_0xc483=function(){return _0x5aa9e8;};return _0xc483();}function giteeRepo(_0x53e02a){const _0x2ca372=_0x7c3064;return _0x2ca372(0x113)+ORG+'/'+_0x53e02a;}function githubRepo(_0x4a3be5){const _0x195c5c=_0x7c3064;return _0x195c5c(0x119)+ORG+'/'+_0x4a3be5;}const docsUrl=_0x7c3064(0x115);export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+_0x7c3064(0x111),'mirrors':{'prefer':'gitee','giteeOrg':_0x7c3064(0x113)+ORG,'githubOrg':_0x7c3064(0x119)+ORG},'scaffolds':{'full':{'key':_0x7c3064(0x12c),'title':_0x7c3064(0x123),'desc':'完整业务模块脚手架（.vome：含\x20server\x20与\x20web），本地开发打包后发布。','repo':_0x7c3064(0x11a),'repoUrl':giteeRepo(_0x7c3064(0x11a)),'githubRepoUrl':githubRepo('vome-plugin-full'),'downloadUrl':giteeArchive('vome-plugin-full'),'githubDownloadUrl':githubArchive(_0x7c3064(0x11a))},'backend':{'key':_0x7c3064(0x11d),'title':_0x7c3064(0x11f),'desc':_0x7c3064(0x110),'repo':_0x7c3064(0x116),'repoUrl':giteeRepo(_0x7c3064(0x116)),'githubRepoUrl':githubRepo('vome-plugin-service'),'downloadUrl':giteeArchive(_0x7c3064(0x116)),'githubDownloadUrl':githubArchive(_0x7c3064(0x116))},'frontend':{'key':_0x7c3064(0x11b),'title':'纯前端','desc':_0x7c3064(0x127),'repo':'vome-plugin-front','repoUrl':giteeRepo('vome-plugin-front'),'githubRepoUrl':githubRepo(_0x7c3064(0x117)),'downloadUrl':giteeArchive(_0x7c3064(0x117)),'githubDownloadUrl':githubArchive(_0x7c3064(0x117))}}};
+const _0x3c321b=_0x412f;(function(_0x5828f9,_0x1524b3){const _0x44ee95=_0x412f,_0x246a4e=_0x5828f9();while(!![]){try{const _0x42dd1c=parseInt(_0x44ee95(0x1a0))/0x1+parseInt(_0x44ee95(0x19e))/0x2+parseInt(_0x44ee95(0x1a1))/0x3+-parseInt(_0x44ee95(0x197))/0x4*(-parseInt(_0x44ee95(0x1ac))/0x5)+parseInt(_0x44ee95(0x196))/0x6*(parseInt(_0x44ee95(0x1a6))/0x7)+parseInt(_0x44ee95(0x199))/0x8+-parseInt(_0x44ee95(0x18f))/0x9;if(_0x42dd1c===_0x1524b3)break;else _0x246a4e['push'](_0x246a4e['shift']());}catch(_0x300b9e){_0x246a4e['push'](_0x246a4e['shift']());}}}(_0x11f6,0xacacd));const ORG=_0x3c321b(0x19f);export function serviceUrlFromDocs(_0x185a02){const _0x5739f8=_0x3c321b,_0x3671af=new URL(_0x185a02),_0x46bac4=_0x3671af[_0x5739f8(0x190)]['replace'](/^www\./,'')[_0x5739f8(0x1a7)](/^service\./,'');return _0x3671af[_0x5739f8(0x198)]+_0x5739f8(0x19d)+_0x46bac4;}export function seatApiBaseFromDocs(_0x6f0391){const _0x26b314=_0x3c321b;return serviceUrlFromDocs(_0x6f0391)+_0x26b314(0x1ab);}function _0x412f(_0x56722d,_0x21dfed){_0x56722d=_0x56722d-0x18f;const _0x11f6ef=_0x11f6();let _0x412f44=_0x11f6ef[_0x56722d];if(_0x412f['knSTYd']===undefined){var _0xc38e37=function(_0x25f388){const _0x7c1e01='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x185a02='',_0x3671af='';for(let _0x46bac4=0x0,_0x6f0391,_0x29d51e,_0x487c63=0x0;_0x29d51e=_0x25f388['charAt'](_0x487c63++);~_0x29d51e&&(_0x6f0391=_0x46bac4%0x4?_0x6f0391*0x40+_0x29d51e:_0x29d51e,_0x46bac4++%0x4)?_0x185a02+=String['fromCharCode'](0xff&_0x6f0391>>(-0x2*_0x46bac4&0x6)):0x0){_0x29d51e=_0x7c1e01['indexOf'](_0x29d51e);}for(let _0x427ed8=0x0,_0x308e54=_0x185a02['length'];_0x427ed8<_0x308e54;_0x427ed8++){_0x3671af+='%'+('00'+_0x185a02['charCodeAt'](_0x427ed8)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x3671af);};_0x412f['gYbhhk']=_0xc38e37,_0x412f['oxBKWP']={},_0x412f['knSTYd']=!![];}const _0x43fcd4=_0x11f6ef[0x0],_0x69870b=_0x56722d+_0x43fcd4,_0x7ebf1e=_0x412f['oxBKWP'][_0x69870b];return!_0x7ebf1e?(_0x412f44=_0x412f['gYbhhk'](_0x412f44),_0x412f['oxBKWP'][_0x69870b]=_0x412f44):_0x412f44=_0x7ebf1e,_0x412f44;}export function licenseIssueUrlFromDocs(_0x29d51e){const _0x9f4c2f=_0x3c321b;return serviceUrlFromDocs(_0x29d51e)+_0x9f4c2f(0x195);}function giteeArchive(_0x487c63){const _0x153b44=_0x3c321b;return _0x153b44(0x19c)+ORG+'/'+_0x487c63+_0x153b44(0x193);}function githubArchive(_0x427ed8){const _0x51b92f=_0x3c321b;return _0x51b92f(0x191)+ORG+'/'+_0x427ed8+'/archive/refs/heads/master.zip';}function giteeRepo(_0x308e54){const _0x53b464=_0x3c321b;return _0x53b464(0x19c)+ORG+'/'+_0x308e54;}function githubRepo(_0x3a7ee1){const _0x54bd7c=_0x3c321b;return _0x54bd7c(0x191)+ORG+'/'+_0x3a7ee1;}const docsUrl=_0x3c321b(0x1ad);export const pluginDev={'docsUrl':docsUrl,'serviceUrl':serviceUrlFromDocs(docsUrl),'uploadUrl':docsUrl+'/plugins/upload','mirrors':{'prefer':'gitee','giteeOrg':_0x3c321b(0x19c)+ORG,'githubOrg':_0x3c321b(0x191)+ORG},'scaffolds':{'full':{'key':_0x3c321b(0x1a9),'title':_0x3c321b(0x1a8),'desc':_0x3c321b(0x192),'repo':_0x3c321b(0x1a3),'repoUrl':giteeRepo('vome-plugin-full'),'githubRepoUrl':githubRepo(_0x3c321b(0x1a3)),'downloadUrl':giteeArchive('vome-plugin-full'),'githubDownloadUrl':githubArchive(_0x3c321b(0x1a3))},'backend':{'key':_0x3c321b(0x194),'title':'纯后端','desc':_0x3c321b(0x1a5),'repo':_0x3c321b(0x1aa),'repoUrl':giteeRepo(_0x3c321b(0x1aa)),'githubRepoUrl':githubRepo(_0x3c321b(0x1aa)),'downloadUrl':giteeArchive('vome-plugin-service'),'githubDownloadUrl':githubArchive(_0x3c321b(0x1aa))},'frontend':{'key':_0x3c321b(0x1a2),'title':_0x3c321b(0x19b),'desc':_0x3c321b(0x1a4),'repo':_0x3c321b(0x19a),'repoUrl':giteeRepo(_0x3c321b(0x19a)),'githubRepoUrl':githubRepo('vome-plugin-front'),'downloadUrl':giteeArchive('vome-plugin-front'),'githubDownloadUrl':githubArchive('vome-plugin-front')}}};function _0x11f6(){const _0x1d4525=['Ahr0Chm6lY92B21LA2OUy29T','ndq4nJa4nZHIuxvUvui','Ag9ZDg5HBwu','Ahr0Chm6lY9NAxrODwiUy29TlW','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','l3jLCg9ZAxrVCNKVyxjJAgL2zs9Tyxn0zxiUEMLW','yMfJA2vUza','l2fWCc9WBhvNAw5tDg9Yzs93ywXSzxqVBgLJzw5Zzs9PC3n1zq','nZHAA3nsDMm','nejlr0jKCq','ChjVDg9JB2W','mZG0ndC1mMXlqvvfAG','DM9Tzs1WBhvNAw4TzNjVBNq','57QV5yMn56UV','Ahr0Chm6lY9NAxrLzs5JB20V','lY9Zzxj2AwnLlG','mJa4nZi4ofHNte1KAq','DM9TzwTQ','mJKWntyXzvbnAvzp','nda3mtmYmvjJrgn6vW','zNjVBNrLBMq','DM9Tzs1WBhvNAw4TzNvSBa','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','nJK4ndG4zMPSrwDm','CMvWBgfJzq','5yMn56UVicSG5zco56UV','zNvSBa','DM9Tzs1WBhvNAw4TC2vYDMLJzq','l2fWCc9WBhvNAw5tDg9Yzs9Zzwf0','nJeXmZyWnwXLrhfutG'];_0x11f6=function(){return _0x1d4525;};return _0x11f6();}

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%;

package/dist/admin/crud/config.js

@@ -1 +1 @@
-(function(_0x367676,_0x34dca1){const _0x2e62f8=_0x14af,_0x4e9da8=_0x367676();while(!![]){try{const _0x583181=-parseInt(_0x2e62f8(0xd3))/0x1+-parseInt(_0x2e62f8(0xd1))/0x2+-parseInt(_0x2e62f8(0xd2))/0x3*(parseInt(_0x2e62f8(0xdd))/0x4)+parseInt(_0x2e62f8(0xdb))/0x5+parseInt(_0x2e62f8(0xd8))/0x6+parseInt(_0x2e62f8(0xdc))/0x7*(-parseInt(_0x2e62f8(0xde))/0x8)+parseInt(_0x2e62f8(0xdf))/0x9*(parseInt(_0x2e62f8(0xd7))/0xa);if(_0x583181===_0x34dca1)break;else _0x4e9da8['push'](_0x4e9da8['shift']());}catch(_0x4f0e5d){_0x4e9da8['push'](_0x4e9da8['shift']());}}}(_0x3192,0xecb7a));function _0x3192(){const _0x2f35a3=['yxbP','C29YDa','CgfNAw5HDgLVBG','mtmWExz4uKre','ndeWnJy3mhfNuurtrq','zgLJDa','C2vHCMnO','mZa1mdm5me9XBwn1ta','nJaXmdL2yMHdy1K','mti0mti4oeD1s3vtyG','odH4BhjNCLy','mJiXmduZnvDnvuDREG','mJK0mZC1mg5Rwgzpyq','nMHfyvfoBG','mtmZmdK0ohbcruXWvG'];_0x3192=function(){return _0x2f35a3;};return _0x3192();}function _0x14af(_0x2e809a,_0x1f95d5){_0x2e809a=_0x2e809a-0xd1;const _0x3192a9=_0x3192();let _0x14af03=_0x3192a9[_0x2e809a];if(_0x14af['bCdOsO']===undefined){var _0x1e3dc1=function(_0x452de4){const _0x52aa02='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x59078f='',_0x531c32='';for(let _0x371a5a=0x0,_0x56acea,_0x5c254e,_0xef6e24=0x0;_0x5c254e=_0x452de4['charAt'](_0xef6e24++);~_0x5c254e&&(_0x56acea=_0x371a5a%0x4?_0x56acea*0x40+_0x5c254e:_0x5c254e,_0x371a5a++%0x4)?_0x59078f+=String['fromCharCode'](0xff&_0x56acea>>(-0x2*_0x371a5a&0x6)):0x0){_0x5c254e=_0x52aa02['indexOf'](_0x5c254e);}for(let _0xb7fd86=0x0,_0x206dbd=_0x59078f['length'];_0xb7fd86<_0x206dbd;_0xb7fd86++){_0x531c32+='%'+('00'+_0x59078f['charCodeAt'](_0xb7fd86)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x531c32);};_0x14af['RnzTEs']=_0x1e3dc1,_0x14af['WpllYH']={},_0x14af['bCdOsO']=!![];}const _0x585df7=_0x3192a9[0x0],_0x3b5a41=_0x2e809a+_0x585df7,_0x58863c=_0x14af['WpllYH'][_0x3b5a41];return!_0x58863c?(_0x14af03=_0x14af['RnzTEs'](_0x14af03),_0x14af['WpllYH'][_0x3b5a41]=_0x14af03):_0x14af03=_0x58863c,_0x14af03;}import{getCrudConfig}from'./style';import{CRUD_LABELS,DEFAULT_CRUD_DICT}from'./dict';export{CRUD_LABELS,DEFAULT_CRUD_DICT};export const DEFAULT_CRUD_PERMISSION={'page':!![],'list':!![],'info':!![],'add':!![],'delete':!![],'update':!![]};export function mergeDict(_0x59078f){const _0x319044=_0x14af,_0x531c32=getCrudConfig()[_0x319044(0xd9)];if(!_0x59078f)return{..._0x531c32,'label':{..._0x531c32['label']}};return{..._0x531c32,..._0x59078f,'api':{..._0x531c32[_0x319044(0xd4)],..._0x59078f[_0x319044(0xd4)]},'pagination':{..._0x531c32[_0x319044(0xd6)],..._0x59078f['pagination']},'search':{..._0x531c32[_0x319044(0xda)],..._0x59078f[_0x319044(0xda)]},'sort':{..._0x531c32[_0x319044(0xd5)],..._0x59078f[_0x319044(0xd5)]},'label':{..._0x531c32['label'],..._0x59078f['label']}};}export function mergePermission(_0x371a5a,_0x56acea){return{...DEFAULT_CRUD_PERMISSION,..._0x56acea,..._0x371a5a};}
+(function(_0x4e90ff,_0x185d54){const _0x589786=_0x1acb,_0x2745ca=_0x4e90ff();while(!![]){try{const _0x57d191=-parseInt(_0x589786(0x87))/0x1+-parseInt(_0x589786(0x8c))/0x2+parseInt(_0x589786(0x8b))/0x3+-parseInt(_0x589786(0x7d))/0x4*(-parseInt(_0x589786(0x80))/0x5)+parseInt(_0x589786(0x7f))/0x6*(parseInt(_0x589786(0x83))/0x7)+-parseInt(_0x589786(0x7e))/0x8*(-parseInt(_0x589786(0x89))/0x9)+-parseInt(_0x589786(0x8a))/0xa*(-parseInt(_0x589786(0x7c))/0xb);if(_0x57d191===_0x185d54)break;else _0x2745ca['push'](_0x2745ca['shift']());}catch(_0x34901f){_0x2745ca['push'](_0x2745ca['shift']());}}}(_0x12b4,0xa9d8b));import{getCrudConfig}from'./style';import{CRUD_LABELS,DEFAULT_CRUD_DICT}from'./dict';export{CRUD_LABELS,DEFAULT_CRUD_DICT};function _0x12b4(){const _0x46962b=['ndK3CMPOuwXT','yxbP','BgfIzwW','C2vHCMnO','mte5nJKZnvDuv01vqq','CgfNAw5HDgLVBG','ndi4odC0m2nNqurWyG','mtGWnZK5mfrItgzmqG','mtC2ntq0ounYwNbsvq','mty2ntm5ohjWEwrsAW','mJjtuLDYC0K','nhbXBgrkyq','ofPiEKneyW','nJG2mJHqsfzIqLC','mJqZmZa5nvfuD3DXDa','C29YDa','zgLJDa'];_0x12b4=function(){return _0x46962b;};return _0x12b4();}export const DEFAULT_CRUD_PERMISSION={'page':!![],'list':!![],'info':!![],'add':!![],'delete':!![],'update':!![]};export function mergeDict(_0x50fb04){const _0x48bdf9=_0x1acb,_0x4dfc1d=getCrudConfig()[_0x48bdf9(0x82)];if(!_0x50fb04)return{..._0x4dfc1d,'label':{..._0x4dfc1d[_0x48bdf9(0x85)]}};return{..._0x4dfc1d,..._0x50fb04,'api':{..._0x4dfc1d[_0x48bdf9(0x84)],..._0x50fb04[_0x48bdf9(0x84)]},'pagination':{..._0x4dfc1d[_0x48bdf9(0x88)],..._0x50fb04[_0x48bdf9(0x88)]},'search':{..._0x4dfc1d[_0x48bdf9(0x86)],..._0x50fb04[_0x48bdf9(0x86)]},'sort':{..._0x4dfc1d[_0x48bdf9(0x81)],..._0x50fb04[_0x48bdf9(0x81)]},'label':{..._0x4dfc1d['label'],..._0x50fb04['label']}};}function _0x1acb(_0x2b72b3,_0x2330e7){_0x2b72b3=_0x2b72b3-0x7c;const _0x12b41b=_0x12b4();let _0x1acb75=_0x12b41b[_0x2b72b3];if(_0x1acb['ZAYsbL']===undefined){var _0x3069ff=function(_0x4f6c03){const _0x5b31e5='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x50fb04='',_0x4dfc1d='';for(let _0x25fcb0=0x0,_0x3eadc9,_0x3f1ffc,_0x6ac374=0x0;_0x3f1ffc=_0x4f6c03['charAt'](_0x6ac374++);~_0x3f1ffc&&(_0x3eadc9=_0x25fcb0%0x4?_0x3eadc9*0x40+_0x3f1ffc:_0x3f1ffc,_0x25fcb0++%0x4)?_0x50fb04+=String['fromCharCode'](0xff&_0x3eadc9>>(-0x2*_0x25fcb0&0x6)):0x0){_0x3f1ffc=_0x5b31e5['indexOf'](_0x3f1ffc);}for(let _0x132774=0x0,_0x43daaf=_0x50fb04['length'];_0x132774<_0x43daaf;_0x132774++){_0x4dfc1d+='%'+('00'+_0x50fb04['charCodeAt'](_0x132774)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x4dfc1d);};_0x1acb['ATwHAh']=_0x3069ff,_0x1acb['ttxAeV']={},_0x1acb['ZAYsbL']=!![];}const _0x30761f=_0x12b41b[0x0],_0x5423c3=_0x2b72b3+_0x30761f,_0x4cba94=_0x1acb['ttxAeV'][_0x5423c3];return!_0x4cba94?(_0x1acb75=_0x1acb['ATwHAh'](_0x1acb75),_0x1acb['ttxAeV'][_0x5423c3]=_0x1acb75):_0x1acb75=_0x4cba94,_0x1acb75;}export function mergePermission(_0x25fcb0,_0x3eadc9){return{...DEFAULT_CRUD_PERMISSION,..._0x3eadc9,..._0x25fcb0};}