@neatui/vue 4.4.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@fekit/floor": "^3.0.1",
-    "@fekit/follow": "^1.8.0",
+    "@fekit/follow": "^1.7.0",
     "@fekit/itable": "^1.1.6",
     "@fekit/pullload": "^1.3.5",
     "@fekit/scale": "^2.0.1",

package/src/components/basic/IFollowView.vue

@@ -56,7 +56,6 @@
     clickTipHide?: boolean;
     mobile?: boolean;
     title?: string;
-    zIndex?: string | number | null;
   }
 
   // 入参
@@ -74,7 +73,6 @@
     clickTipHide: false,
     mobile: true,
     title: '',
-    zIndex: undefined,
   });
 
   const dom: any = ref(null);
@@ -216,20 +214,13 @@
             }
           }
         },
-        { hideOnScrollOut: false, zIndex: props.zIndex },
+        { hideOnScrollOut: false },
       );
     } else {
       ex.value = null;
     }
   });
 
-  watch(
-    () => props.zIndex,
-    (zIndex) => {
-      ex.value?.setOptions({ zIndex });
-    },
-  );
-
   onUnmounted(() => {
     document.removeEventListener('click', cancel, true);
     // 移除触摸事件监听器

package/src/components/basic/LayerView/Layer.vue

@@ -6,11 +6,14 @@
         v-if="state.view"
         :am-view="am"
         :data-key="id"
-        :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
+        :data-recess="state.recess || undefined"
+        :data-cover-dark="state.coverDark !== '' ? '' : undefined"
+        :style="layerStyle"
         :view="state.view"
         class="fekit-layer"
       >
         <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+          <div v-if="state.coverDark !== ''" class="fekit-layer-cover-dark"></div>
           <slot :param="_tasks[id]?.params"></slot>
         </div>
       </div>
@@ -18,7 +21,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onBeforeUnmount, reactive, watch } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue';
   import { env, isFunction } from '@fekit/utils';
 
   // 弹层队列
@@ -60,6 +63,21 @@
   const SCROLL_LOCK_STATE = Symbol.for('@neatui/vue.Layer.scrollLock');
   const ESCAPE_STACK = Symbol.for('@neatui/vue.Layer.escapeStack');
   const ESCAPE_LISTENER = Symbol.for('@neatui/vue.Layer.escapeListener');
+  const AREA_GROUPS = Symbol.for('@neatui/vue.Layer.areaGroups');
+
+  type LayerMode = 'cover' | 'cascade' | 'displace' | 'replace' | 'queue';
+
+  type AreaGroup = {
+    dark: {
+      afterHide?: () => void;
+      el: HTMLElement | null;
+      listening: boolean;
+      owners: Set<string>;
+      view: number;
+    };
+    queue: Array<{ id: string; kind: 'open' | 'show'; params: any; then: any }>;
+    stack: string[];
+  };
 
   const getScrollLockState = (): ScrollLockState => {
     if (!_tasks[SCROLL_LOCK_STATE]) {
@@ -119,6 +137,199 @@
     });
   };
 
+  const getAreaGroups = (): Record<string, AreaGroup> => {
+    if (!_tasks[AREA_GROUPS]) {
+      Object.defineProperty(_tasks, AREA_GROUPS, {
+        configurable: true,
+        value: {},
+      });
+    }
+    return _tasks[AREA_GROUPS];
+  };
+
+  const getAreaGroup = (area: string): AreaGroup => {
+    const groups = getAreaGroups();
+    if (!groups[area]) {
+      groups[area] = {
+        dark: {
+          el: null,
+          listening: false,
+          owners: new Set<string>(),
+          view: 0,
+        },
+        queue: [],
+        stack: [],
+      };
+    }
+    return groups[area];
+  };
+
+  const resolveDarkOpacity = (value: string | number | undefined) => {
+    return `${value ?? ''}` === '' ? '0.75' : `${value}`;
+  };
+
+  const participatesInGroup = (dark: string | number | undefined) => `${dark ?? ''}` !== '0';
+  const DEFAULT_COVER_DARK = 0.32;
+
+  const resolveCoverDark = (mode: LayerMode, hasPrev: boolean, coverDark: unknown) => {
+    if (mode !== 'cover' || !hasPrev) return '';
+    if (coverDark === false || `${coverDark}` === '0') return '';
+    if (coverDark === undefined || coverDark === true || `${coverDark}` === '') return DEFAULT_COVER_DARK;
+    return coverDark as string | number;
+  };
+
+  const isBlockingView = (view: number) => view === 1 || view === 2 || view === 3;
+
+  const occupiesGlobalDark = (task: any) => {
+    if (!task?.participates) return false;
+    if (task.view === 2 || task.view === 3 || task.view === 4) return true;
+    return task.view === 1 && !!task.parkAfterHide;
+  };
+
+  const setGlobalDarkView = (group: AreaGroup, view: number) => {
+    group.dark.view = view;
+    if (group.dark.el) group.dark.el.setAttribute('view', `${view}`);
+  };
+
+  const ensureGlobalDarkEl = (area: string, group: AreaGroup) => {
+    if (!env.client) return null;
+    if (group.dark.el?.isConnected) return group.dark.el;
+    group.dark.el = null;
+    group.dark.listening = false;
+    const container = document.querySelector(area);
+    if (!container) return null;
+    let el = container.querySelector(':scope > .fekit-layer-dark') as HTMLElement | null;
+    if (!el) {
+      el = document.createElement('div');
+      el.className = 'fekit-layer-dark';
+      el.setAttribute('view', '0');
+      container.insertBefore(el, container.firstChild);
+    }
+    group.dark.el = el;
+    el.addEventListener('animationend', (ev) => {
+      if (ev.target !== el) return;
+      if (group.dark.view === 2) setGlobalDarkView(group, 3);
+      if (group.dark.view === 1) {
+        setGlobalDarkView(group, 0);
+        const afterHide = group.dark.afterHide;
+        group.dark.afterHide = undefined;
+        afterHide?.();
+      }
+    });
+    group.dark.listening = true;
+    return el;
+  };
+
+  const syncGlobalDarkOpacity = (area: string, group: AreaGroup) => {
+    let opacity = '0.75';
+    for (let index = group.stack.length - 1; index >= 0; index -= 1) {
+      const task = _tasks[group.stack[index]];
+      if (occupiesGlobalDark(task)) {
+        opacity = resolveDarkOpacity(task.dark);
+        break;
+      }
+    }
+    const el = group.dark.owners.size ? ensureGlobalDarkEl(area, group) : group.dark.el;
+    if (el) el.style.setProperty('--layer-dark', opacity);
+  };
+
+  const acquireGlobalDark = (area: string, group: AreaGroup, layerId: string, immediate = false) => {
+    if (!layerId) return;
+    if (group.dark.owners.has(layerId)) {
+      syncGlobalDarkOpacity(area, group);
+      return;
+    }
+    group.dark.owners.add(layerId);
+    const el = ensureGlobalDarkEl(area, group);
+    if (!el) return;
+    syncGlobalDarkOpacity(area, group);
+    if (group.dark.owners.size > 1) {
+      if (group.dark.view === 1) setGlobalDarkView(group, 3);
+      else if (group.dark.view === 0) setGlobalDarkView(group, immediate ? 3 : 2);
+      return;
+    }
+    if (immediate) {
+      setGlobalDarkView(group, 3);
+      return;
+    }
+    if (group.dark.view === 0) setGlobalDarkView(group, 2);
+    else if (group.dark.view === 1) setGlobalDarkView(group, 3);
+  };
+
+  const releaseGlobalDark = (area: string, group: AreaGroup, layerId: string, immediate = false) => {
+    if (!layerId || !group.dark.owners.delete(layerId)) {
+      syncGlobalDarkOpacity(area, group);
+      return;
+    }
+    syncGlobalDarkOpacity(area, group);
+    if (group.dark.owners.size > 0) return;
+    if (immediate || !group.dark.el) {
+      setGlobalDarkView(group, 0);
+      const afterHide = group.dark.afterHide;
+      group.dark.afterHide = undefined;
+      afterHide?.();
+      return;
+    }
+    if (group.dark.view === 0) return;
+    setGlobalDarkView(group, 1);
+  };
+
+  const visibleGroupIds = (group: AreaGroup) =>
+    group.stack.filter((layerId) => {
+      const view = _tasks[layerId]?.view;
+      return view === 2 || view === 3;
+    });
+
+  const groupHasBlocking = (group: AreaGroup, exceptId = '') =>
+    group.stack.some((layerId) => layerId !== exceptId && isBlockingView(_tasks[layerId]?.view));
+
+  const syncStackIndex = (group: AreaGroup) => {
+    group.stack.forEach((layerId, index) => {
+      _tasks[layerId]?.setStackIndex?.(index);
+    });
+  };
+
+  const recomputeRecess = (group: AreaGroup) => {
+    const visible = visibleGroupIds(group);
+    visible.forEach((layerId, index) => {
+      let depth = 0;
+      for (let next = index + 1; next < visible.length; next += 1) {
+        if (_tasks[visible[next]]?.openMode === 'cascade') depth += 1;
+      }
+      _tasks[layerId]?.setRecess?.(depth > 2 ? 2 : depth);
+    });
+    group.stack.forEach((layerId) => {
+      if (!visible.includes(layerId)) _tasks[layerId]?.setRecess?.(0);
+    });
+  };
+
+  const ensureOnStack = (group: AreaGroup, layerId: string) => {
+    const index = group.stack.indexOf(layerId);
+    if (index !== -1) group.stack.splice(index, 1);
+    group.stack.push(layerId);
+    syncStackIndex(group);
+  };
+
+  const removeFromStack = (group: AreaGroup, layerId: string) => {
+    const index = group.stack.indexOf(layerId);
+    if (index !== -1) group.stack.splice(index, 1);
+    syncStackIndex(group);
+  };
+
+  const removeFromQueue = (group: AreaGroup, layerId: string) => {
+    group.queue = group.queue.filter((job) => job.id !== layerId);
+  };
+
+  const getVisibleTop = (group: AreaGroup, exceptId = '') => {
+    for (let index = group.stack.length - 1; index >= 0; index -= 1) {
+      const layerId = group.stack[index];
+      if (layerId === exceptId) continue;
+      const task = _tasks[layerId];
+      if (task && (task.view === 2 || task.view === 3)) return task;
+    }
+    return undefined;
+  };
+
   const hasInlineProperty = (style: CSSStyleDeclaration, property: string) => {
     for (let index = 0; index < style.length; index += 1) {
       if (style.item(index) === property) return true;
@@ -307,25 +518,78 @@
 
   // 状态管理
   const state = reactive({
-    view: 0,
+    coverDark: '' as string | number,
+    immediate: false,
+    openMode: 'cover' as LayerMode,
     params: {},
+    parkAfterHide: false,
+    recess: 0,
+    stackIndex: 0,
+    view: 0,
   });
   const scrollLockOwner = {};
 
+  const layerStyle = computed(() => {
+    let style = '';
+    if (`${props.dark}` !== '') style += `--layer-dark:${props.dark};`;
+    if (`${state.coverDark}` !== '') style += `--layer-cover-dark:${state.coverDark};`;
+    if (props.zIndex) style += `z-index:${props.zIndex};`;
+    else if (state.stackIndex > 0) style += `z-index:${50 + state.stackIndex};`;
+    return style;
+  });
+
+  const syncTaskView = (view: number) => {
+    if (!_tasks[props.id]) return;
+    _tasks[props.id].view = view;
+    _tasks[props.id].openMode = state.openMode;
+    _tasks[props.id].parkAfterHide = state.parkAfterHide;
+    _tasks[props.id].participates = participatesInGroup(props.dark);
+    _tasks[props.id].dark = props.dark;
+  };
+
+  const syncOwnDarkOccupancy = () => {
+    if (!env.client || !participatesInGroup(props.dark) || !props.id) return;
+    const group = getAreaGroup(props.area);
+    const immediate = state.immediate;
+    if (
+      occupiesGlobalDark({
+        dark: props.dark,
+        parkAfterHide: state.parkAfterHide,
+        participates: true,
+        view: state.view,
+      })
+    ) {
+      acquireGlobalDark(props.area, group, props.id, immediate);
+    } else {
+      releaseGlobalDark(props.area, group, props.id, immediate);
+    }
+  };
+
   watch(
     () => state.view,
     (view: any) => {
-      if (_tasks[props.id]) {
-        _tasks[props.id].view = view;
-      }
+      syncTaskView(view);
       if (view === 2 || view === 3) pushEscapeStack(props.id);
       else removeEscapeStack(props.id);
       if (view > 0) acquireScrollLock(scrollLockOwner);
       else releaseScrollLock(scrollLockOwner);
+      syncOwnDarkOccupancy();
+      state.immediate = false;
+      if (participatesInGroup(props.dark) && props.id) {
+        nextTick(() => recomputeRecess(getAreaGroup(props.area)));
+      }
     },
     { deep: true, immediate: true },
   );
 
+  watch(
+    () => props.dark,
+    () => {
+      syncTaskView(state.view);
+      syncOwnDarkOccupancy();
+    },
+  );
+
   watch(
     () => props.escClose,
     (escClose) => {
@@ -350,6 +614,138 @@
     none: [],
   };
 
+  const resolveMode = (params: any): LayerMode => {
+    const mode = params?.mode;
+    if (mode === 'cascade' || mode === 'displace' || mode === 'replace' || mode === 'queue') return mode;
+    return 'cover';
+  };
+
+  const bindOpenCallbacks = (params: any = {}, then = () => {}) => {
+    if (params?.on?.show) on.show.push(params.on.show);
+    if (params?.on?.hide) on.hide.push(params.on.hide);
+    on.show.push(then);
+  };
+
+  const runCallbacks = (key: 'show' | 'hide' | 'none') => {
+    on[key].forEach((fun: any) => {
+      if (isFunction(fun)) fun();
+    });
+    on[key].length = 0;
+  };
+
+  const flushQueue = (group: AreaGroup) => {
+    if (groupHasBlocking(group) || !group.queue.length) return;
+    const job = group.queue.shift();
+    if (!job) return;
+    const task = _tasks[job.id];
+    if (!task) {
+      flushQueue(group);
+      return;
+    }
+    const playParams = { ...job.params };
+    if (playParams.mode === 'queue') delete playParams.mode;
+    if (job.kind === 'open') task.open(playParams, job.then);
+    else task.show(playParams, job.then);
+  };
+
+  const scheduleFlushQueue = (group: AreaGroup) => {
+    const flush = () => flushQueue(group);
+    if (group.dark.view === 1) {
+      const prev = group.dark.afterHide;
+      group.dark.afterHide = () => {
+        prev?.();
+        flush();
+      };
+      return;
+    }
+    nextTick(flush);
+  };
+
+  const onGroupLayerClosed = (layerId: string) => {
+    if (!participatesInGroup(props.dark)) return;
+    const group = getAreaGroup(props.area);
+    removeFromStack(group, layerId);
+    const topId = group.stack[group.stack.length - 1];
+    if (topId && _tasks[topId]?.view === 4) _tasks[topId].unpark();
+    recomputeRecess(group);
+    scheduleFlushQueue(group);
+  };
+
+  const closeReplacedLayers = (mode: LayerMode, params: any, immediate: boolean) => {
+    if (mode !== 'replace' || !participatesInGroup(props.dark) || !props.id) return;
+    const group = getAreaGroup(props.area);
+    const prev = getVisibleTop(group, props.id);
+    const targets = params?.replace === 'all' ? group.stack.filter((layerId) => layerId !== props.id) : prev ? [prev.id] : [];
+    targets.forEach((layerId) => {
+      const task = _tasks[layerId];
+      if (!task) return;
+      if (immediate) task.none();
+      else task.hide();
+    });
+  };
+
+  const applyIncomingRelation = (mode: LayerMode, params: any, immediate: boolean) => {
+    if (!participatesInGroup(props.dark) || !props.id) {
+      state.coverDark = '';
+      state.recess = 0;
+      return;
+    }
+    const group = getAreaGroup(props.area);
+    const prev = getVisibleTop(group, props.id);
+    state.coverDark = resolveCoverDark(mode, !!prev, params?.coverDark);
+    state.recess = 0;
+
+    if (mode === 'displace' && prev) prev.park({ immediate });
+    ensureOnStack(group, props.id);
+  };
+
+  const syncGroupPresentation = () => {
+    if (!participatesInGroup(props.dark) || !props.id) return;
+    recomputeRecess(getAreaGroup(props.area));
+  };
+
+  const tryEnqueue = (kind: 'open' | 'show', params: any, then: any) => {
+    if (!participatesInGroup(props.dark) || resolveMode(params) !== 'queue' || !props.id) return false;
+    const group = getAreaGroup(props.area);
+    if (!groupHasBlocking(group, props.id)) return false;
+    removeFromQueue(group, props.id);
+    group.queue.push({ id: props.id, kind, params, then });
+    return true;
+  };
+
+  const setRecess = (depth: number) => {
+    state.recess = depth;
+  };
+
+  const setStackIndex = (index: number) => {
+    state.stackIndex = index;
+  };
+
+  const park = (options: any = {}) => {
+    if (options.immediate) {
+      state.parkAfterHide = false;
+      state.immediate = true;
+      state.view = 4;
+      return;
+    }
+    if (state.view === 2 || state.view === 3) {
+      state.parkAfterHide = true;
+      syncTaskView(state.view);
+      state.view = 1;
+    }
+  };
+
+  const unpark = (options: any = {}) => {
+    if (state.view !== 4) return;
+    state.parkAfterHide = false;
+    if (options.immediate) {
+      state.immediate = true;
+      state.view = 3;
+      return;
+    }
+    state.view = 2;
+  };
+
   // 注入参数
   const init = (params: any = {}) => {
     _tasks[id].params = params;
@@ -364,68 +760,86 @@
 
   // 显示弹层
   const show = (params: any = {}, then = () => {}) => {
+    if (tryEnqueue('show', params, then)) return;
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    bindOpenCallbacks(params, then);
+    state.openMode = resolveMode(params);
+    applyIncomingRelation(state.openMode, params, false);
+    state.parkAfterHide = false;
     state.view = 2;
-    if (params?.on?.show) {
-      on.show.push(params.on.show);
-    }
-    if (params?.on?.hide) {
-      on.hide.push(params.on.hide);
-    }
-    on.show.push(then);
+    closeReplacedLayers(state.openMode, params, false);
+    syncGroupPresentation();
   };
 
   // 隐藏弹层
   const hide = (_params: any = {}, then = () => {}) => {
-    if (state.view === 3) {
+    if (state.view === 4) {
+      on.hide.push(then);
+      state.parkAfterHide = false;
+      state.immediate = true;
+      state.view = 0;
+      runCallbacks('hide');
+      onGroupLayerClosed(id);
+      return;
+    }
+    if (state.view === 2 || state.view === 3) {
+      state.parkAfterHide = false;
+      syncTaskView(state.view);
       state.view = 1;
       on.hide.push(then);
     }
   };
 
   // 打开弹层(没有动画过程)
-  const open = (_params: any = {}, then = () => {}) => {
+  const open = (params: any = {}, then = () => {}) => {
+    if (tryEnqueue('open', params, then)) return;
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    bindOpenCallbacks(params, then);
+    state.openMode = resolveMode(params);
+    applyIncomingRelation(state.openMode, params, true);
+    state.parkAfterHide = false;
+    state.immediate = true;
     state.view = 3;
-    on.show.push(then);
+    closeReplacedLayers(state.openMode, params, true);
+    syncGroupPresentation();
+    runCallbacks('show');
   };
   // 关闭弹层(没有动画过程)
   const none = (_params: any = {}, then = () => {}) => {
+    const wasOpen = state.view > 0;
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    state.parkAfterHide = false;
+    state.immediate = true;
     state.view = 0;
     on.none.push(then);
     // 立即执行回调，因为没有动画
-    on.none.forEach((fun: any) => {
-      if (isFunction(fun)) {
-        fun();
-      }
-    });
-    on.none.length = 0;
+    runCallbacks('none');
+    if (wasOpen) onGroupLayerClosed(id);
   };
 
   // 点暗层关闭
   const _sys_hide = (ev: any) => {
     if (props.darkClickClose && ev.target.className === 'fekit-layer-wrap' && state.view === 3) {
-      state.view = 1;
+      hide();
     }
   };
 
   // 监听动画
-  const anim = () => {
+  const anim = (ev?: AnimationEvent) => {
+    if (ev && ev.target !== ev.currentTarget) return;
     if (state.view === 1) {
+      if (state.parkAfterHide) {
+        state.parkAfterHide = false;
+        state.view = 4;
+        return;
+      }
       state.view = 0;
-      on.hide.forEach((fun: any) => {
-        if (isFunction(fun)) {
-          fun();
-        }
-      });
-      on.hide.length = 0; // 清空回调数组
+      runCallbacks('hide');
+      onGroupLayerClosed(id);
     }
     if (state.view === 2) {
       state.view = 3;
-      on.show.forEach((fun: any) => {
-        if (isFunction(fun)) {
-          fun();
-        }
-      });
-      on.show.length = 0; // 清空回调数组
+      runCallbacks('show');
     }
   };
 
@@ -435,7 +849,25 @@
     console.error('Layer 有重复 id', id);
   }
   if (id) {
-    _tasks[id] = { init, show, hide, open, none, view: state.view, escClose: props.escClose, darkClickClose: props.darkClickClose };
+    _tasks[id] = {
+      dark: props.dark,
+      darkClickClose: props.darkClickClose,
+      escClose: props.escClose,
+      hide,
+      id,
+      init,
+      none,
+      open,
+      openMode: state.openMode,
+      park,
+      parkAfterHide: state.parkAfterHide,
+      participates: participatesInGroup(props.dark),
+      setRecess,
+      setStackIndex,
+      show,
+      unpark,
+      view: state.view,
+    };
     ensureEscapeListener();
   } else {
     console.error('Layer 必须填写全局统一的 id');
@@ -443,6 +875,17 @@
 
   // 卸载弹层
   onBeforeUnmount(() => {
+    if (participatesInGroup(props.dark) && id) {
+      const group = getAreaGroup(props.area);
+      removeFromQueue(group, id);
+      if (state.view > 0) {
+        state.immediate = true;
+        state.view = 0;
+        onGroupLayerClosed(id);
+      } else {
+        removeFromStack(group, id);
+      }
+    }
     removeEscapeStack(id);
     releaseScrollLock(scrollLockOwner);
     delete _tasks[id];
@@ -453,24 +896,122 @@
   @use '@neatui/css' as neatui;
 
   // 弹层
+  @keyframes am-layer-dark-show {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes am-layer-dark-hide {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .fekit-layer-dark {
+    --layer-dark: 0.75;
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    pointer-events: none;
+    background-color: rgba(0, 0, 0, var(--layer-dark));
+    opacity: 0;
+    transition: background-color 180ms linear;
+
+    &[view='2'] {
+      animation: am-layer-dark-show 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='3'] {
+      opacity: 1;
+    }
+
+    &[view='1'] {
+      animation: am-layer-dark-hide 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='0'] {
+      opacity: 0;
+    }
+  }
+
   .fekit-layer {
+    --layer-dark: 0.75;
+    --layer-cover-dark: 0.32;
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     z-index: 50;
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: transparent;
     pointer-events: none;
 
+    .fekit-layer-cover-dark {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      background-color: rgba(0, 0, 0, var(--layer-cover-dark));
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &[view='2'] .fekit-layer-cover-dark {
+      animation: am-layer-dark-show 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='3'] .fekit-layer-cover-dark {
+      opacity: 1;
+    }
+
+    &[view='1'] .fekit-layer-cover-dark {
+      animation: am-layer-dark-hide 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
+    }
+
+    &[view='4'] {
+      pointer-events: none;
+
+      .fekit-layer-wrap {
+        pointer-events: none;
+
+        & > * {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+    }
+
+    &[view='3'][data-recess='1'] .fekit-layer-wrap > *:not(.fekit-layer-cover-dark) {
+      transform: scale(0.94);
+      opacity: 0.88;
+      transition:
+        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &[view='3'][data-recess='2'] .fekit-layer-wrap > *:not(.fekit-layer-cover-dark) {
+      transform: scale(0.88);
+      opacity: 0.76;
+      transition:
+        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
     &-wrap {
       position: relative;
       width: 100%;
       height: 100%;
       pointer-events: auto;
 
-      & > * {
+      & > *:not(.fekit-layer-cover-dark) {
         position: relative !important;
+        z-index: 1;
 
         &.com-dialog {
           max-width: 80%;

package/src/components/form/Cascader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" class="mc-cascader">
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" class="mc-cascader">
     <IFollowView
       ref="ifollow"
       :tipBoxStyle="`${state.flatOpts.length && state.flatOpts[0]?.length > 0 ? 'min-width: 10em;' : 'min-width: 100%'}`"
@@ -17,7 +17,7 @@
               <template v-if="multiple">
                 <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm r-ss nowrap" @click="multiSelect(item, optIndex)">
                   <div ui-flex="row xm">
-                    <div ui-form="@a type:checkbox :block`">
+                    <div :ui-form="`${theme} type:checkbox :block`">
                       <input
                         :checked="item.checkedStatus === 'all'"
                         :class="`mr-sm ${item.checkedStatus === 'part' ? 'part-style' : ''}`"
@@ -71,7 +71,7 @@
                 <span>单选</span>
               </p>
             </div>
-            <label v-else class="nx-sm r-ss nowrap" ui-form="@a type:checkbox :block`">
+            <label v-else class="nx-sm r-ss nowrap" :ui-form="`${theme} type:checkbox :block`">
               <input :checked="state.checkAll" name="checkAll" type="checkbox" @change="checkAllChange" />
               <span :class="`${state.checkAll ? 'co-main' : ''}`">全选</span>
             </label>

package/src/components/form/DatePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
+  <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
     <IFollowView ref="ifollow">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"

package/src/components/form/DateRangePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
+  <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
     <IFollowView ref="ifollow">
       <InputRange
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"

package/src/components/form/ImgUpload.vue

@@ -11,7 +11,7 @@
     </template>
     <template v-if="(!multiple && files && files.length === 0) || (multiple && (!limit || (limit && files && files.length < limit)))">
       <slot>
-        <div ui-flex="row cm" ui-form="@a type:upload tips:hover" :class="`upload bg-fore b-solid b-case b-xs mb-sl ${uploadClass}`" :style="uploadStyle">
+        <div ui-flex="row cm" :ui-form="`${theme} type:upload tips:hover`" :class="`upload bg-fore b-solid b-case b-xs mb-sl ${uploadClass}`" :style="uploadStyle">
           <div v-if="tips" ui-form-tips>
             {{ tips }}
           </div>
@@ -52,6 +52,7 @@
     multiple?: boolean; // 是否可以上传多个文件
     crop?: boolean; // 是否需要抠图处理
     action?: string; // 上传路径
+    theme?: string;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -64,6 +65,7 @@
     multiple: false,
     crop: false,
     action: '/common/updateFile',
+    theme: '@a',
   });
 
   const emit = defineEmits(['update:modelValue', 'change']);

package/src/components/form/MoreSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select ${sz ? 'sz:' + sz : ''}`">
+  <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
       <slot>
         <Input
@@ -14,7 +14,7 @@
       </slot>
       <template #tips>
         <div v-if="search" class="ny-sm nx-sl">
-          <Input v-model="state.search" sz="s">
+          <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>
             </template>
@@ -23,13 +23,13 @@
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <template v-for="(item, idx) of state.filter" :key="idx">
             <li v-if="item.disabled" class="ux-hover nx-sm r-ss o-ms nowrap">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <del class="ml-sm">{{ item.label || item }}</del>
               </label>
             </li>
             <li v-else class="ux-hover nx-sm r-ss nowrap" @click.stop="select(item.value)">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <span class="ml-sm">{{ item.label || item }}</span>
               </label>
@@ -41,7 +41,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="ux-hover nx-sm ny-ss r-ss nowrap co-main" @click.stop="allselect()">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.selectedCount }}/{{ state.availableCount }})</span>
               </label>

package/src/components/form/MoreSelectList.vue

@@ -8,7 +8,7 @@
       class="n-sm r-ss b-solid b-xs"
       @click.stop="select(item.value)"
     >
-      <label ui-form="@a type:checkbox :block" style="pointer-events: none">
+      <label :ui-form="`${theme} type:checkbox :block`" style="pointer-events: none">
         <input :checked="mv?.some((i: any) => `${i}` === `${item.value}`)" :name="field" type="checkbox" />
         <span class="ml-sm">{{ item.label || item }}</span>
       </label>

package/src/components/form/MoreSelectPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select ${sz ? 'sz:' + sz : ''}`">
+  <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
     <IPickerView ref="ipicker" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
       <slot>
         <Input
@@ -16,13 +16,13 @@
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <template v-for="(item, idx) of props.options" :key="idx">
             <li v-if="item.disable" class="ux-hover nx-sm r-ss o-ms">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <del class="ml-sm">{{ item.label || item }}</del>
               </label>
             </li>
             <li v-else class="ux-hover nx-sm r-ss" @click.stop="select(item.value)">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <span class="ml-sm">{{ item.label || item }}</span>
               </label>
@@ -34,7 +34,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="ux-hover nx-sm r-ss nowrap co-main" @click.stop="allselect()">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
                 <span class="ml-sm">全选({{ props.options?.length || 0 }})</span>
               </label>

package/src/components/form/MoreSelectPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" ref="dom">
+  <div :ui-form="`${theme} type:select sz:${sz}`" ref="dom">
     <IPickerView ref="ipicker">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.value">
         <template #suffix><i ui-form-select=""></i></template>
@@ -14,7 +14,7 @@
             <IScrollView class="full n-ms" :pull="false" :load="false">
               <ul v-if="props.options?.length" class="my-sm-sub">
                 <li class="ux-hover n-sm r-ss nowrap b-solid b-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
-                  <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+                  <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                     <input type="checkbox" :name="field" :checked="mv?.some((i: any) => `${i}` === `${item.value}`)" />
                     <span class="ml-sm">{{ item.label || item }}</span>
                   </label>

package/src/components/form/PageMoreSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select ${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
+  <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
       <slot>
         <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd">
@@ -8,7 +8,7 @@
       </slot>
       <template #tips>
         <div v-if="filterable" class="ny-sm nx-sl" style="height: 3em">
-          <div :ui-form="`@a type:input sz:s :block`">
+          <div :ui-form="`${theme} type:input sz:s :block`">
             <input type="text" :placeholder="props.placeholder" v-model="state.search" />
             <div ui-form-suffix="">
               <i ui-form-clean="" v-if="state.search" @click.stop="state.search = ''"></i>
@@ -18,7 +18,7 @@
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <li class="ux-hover nx-sm r-ss nowrap" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
-            <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+            <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
             </label>
@@ -29,7 +29,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="ux-hover nx-sm r-ss nowrap co-main" @click.stop="allselect()">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <!-- <span class="ml-sm">全选({{ props.options?.length || 0 }})</span> -->
                 <span class="ml-sm">全选</span>
@@ -37,7 +37,7 @@
             </div>
             <div ui-flex="row cm" class="nx-sm">
               <button :ui-btn="`@a xs read :border :square ${state.pageInfo.page > 1 ? '' : ':disabled'}`" @click="prev"><i class="icon icon-prev"></i></button>
-              <div :ui-form="`@a type:input sz:xs`" class="page-input mx-ss">
+              <div :ui-form="`${theme} type:input sz:xs`" class="page-input mx-ss">
                 <input type="number" class="ac" :placeholder="props.placeholder" v-model="state.pageInfo.page" @change="pageChange" />
               </div>
               <button :ui-btn="`@a xs read :border :square ${state.pageInfo.page < pageInfo.pages ? '' : ':disabled'}`" @click="next"><i class="icon icon-next"></i></button>

package/src/components/form/PageSelect.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd.label" :interacted="interacted">
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips>
         <div v-if="filterable" class="ny-sm nx-sl" style="height: 3em">
-          <div :ui-form="`@a type:input sz:s :block`">
+          <div :ui-form="`${theme} type:input sz:s :block`">
             <input type="text" :placeholder="props.placeholder" v-model="state.search" />
             <div ui-form-suffix="">
               <i ui-form-clean="" v-if="state.search" @click.stop="state.search = ''"></i>
@@ -25,7 +25,7 @@
           <li ui-flex="row xm">
             <div ui-flex="row cm" class="nx-sm">
               <button :ui-btn="`@a s read :border :square ${state.pageInfo.page > 1 ? '' : ':disabled'}`" @click="prev"><i class="icon icon-prev"></i></button>
-              <div :ui-form="`@a type:input sz:s`" class="page-input mx-ss">
+              <div :ui-form="`${theme} type:input sz:s`" class="page-input mx-ss">
                 <input type="number" class="ac" :placeholder="props.placeholder" v-model="state.pageInfo.page" @change="pageChange" />
               </div>
               <button :ui-btn="`@a s read :border :square ${state.pageInfo.page < pageInfo.pages ? '' : ':disabled'}`" @click="next"><i class="icon icon-next"></i></button>

package/src/components/form/SearchMoreSelect.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd" @click="toggle" :interacted="interacted">
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
       <template #tips>
         <div class="ny-sm nx-sl" style="height: 3em">
-          <div :ui-form="`@a type:input sz:s :block`">
+          <div :ui-form="`${theme} type:input sz:s :block`">
             <input type="text" :placeholder="props.placeholder" v-model="state.search" />
             <div ui-form-suffix="">
               <i ui-form-clean="" v-if="state.search" @click.stop="state.search = ''"></i>
@@ -16,7 +16,7 @@
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <li class="ux-hover nx-sm r-ss nowrap" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
-            <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+            <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
             </label>
@@ -27,7 +27,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="ux-hover nx-sm r-ss nowrap co-main" @click.stop="allselect()">
-              <label style="pointer-events: none" ui-form="@a type:checkbox :block">
+              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.filter?.length || 0 }})</span>
               </label>

package/src/components/form/SearchSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
@@ -10,7 +10,7 @@
       </Input>
       <template #tips v-if="!readonly || !disabled">
         <div v-if="search" class="ny-sm nx-sl">
-          <Input v-model="state.search" sz="s">
+          <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>
             </template>

package/src/components/form/Select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
@@ -13,7 +13,7 @@
       </Input>
       <template #tips v-if="!readonly && !disabled">
         <div v-if="search" class="ny-sm nx-sl">
-          <Input v-model="state.search" :sz="sz">
+          <Input v-model="state.search" :theme="theme" :sz="sz">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>
             </template>
@@ -38,6 +38,7 @@
               v-model="customInputValue"
               v-bind="other.config || {}"
               :placeholder="other.config?.placeholder || '请输入自定义内容'"
+              :theme="theme"
               sz="s"
               @keyup.enter="confirmCustomInput"
               @blur="confirmCustomInput"

package/src/components/form/SelectList.vue

@@ -7,7 +7,7 @@
       :key="idx"
       @click="mv = item.value === mv ? '' : item.value"
     >
-      <label ui-form="@a type:radio" style="pointer-events: none">
+      <label :ui-form="`${theme} type:radio`" style="pointer-events: none">
         <input type="radio" :name="field" :data-name="field" :checked="item.value === mv" /><span class="lh-ss">{{ item.label || item }}</span>
       </label>
     </li>

package/src/components/form/SelectPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" ref="dom">
+  <div :ui-form="`${theme} type:select sz:${sz}`" ref="dom">
     <IPickerView ref="ipicker">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd.label">
         <template #suffix><i ui-form-select=""></i></template>
@@ -14,7 +14,7 @@
             <IScrollView class="full n-ms" :pull="false" :load="false">
               <ul v-if="props.options?.length" class="my-sm-sub">
                 <li class="ux-hover n-sm r-ss b-solid b-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click="mv = item.value">
-                  <label ui-form="@a type:radio">
+                  <label :ui-form="`${theme} type:radio`">
                     <input type="radio" :name="item.field" :checked="item.value === mv" /><span>{{ item.label || item }}</span>
                   </label>
                 </li>

package/src/components/form/SelectTree/SelectTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
     <IFollowView ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
@@ -10,7 +10,7 @@
       </Input>
       <template #tips v-if="!readonly || !disabled">
         <div v-if="search" class="nb-sm nx-sl">
-          <Input v-model="state.search" sz="s">
+          <Input v-model="state.search" :theme="theme" sz="s">
             <template #suffix>
               <i ui-form-search="" class="co-note"></i>
             </template>

package/src/components/form/Switch.vue

@@ -1,5 +1,5 @@
 <template>
-  <label ui-form="@a type:switch">
+  <label :ui-form="`${theme} type:switch`">
     <input type="checkbox" v-model="internalValue" :disabled="disabled" />
     <slot>
       <span>{{ text }}</span>

package/src/components/form/Upload.vue

@@ -164,7 +164,7 @@
         <label
           class="pr flex-block"
           :class="{ 'ux-disable': disabled }"
-          ui-form="@a type:upload tips:hover"
+          :ui-form="`${theme} type:upload tips:hover`"
           :style="`width: ${isNumber(width) ? width + 'em' : width}`"
           v-bind="itemAttrs"
         >
@@ -209,6 +209,7 @@
     disabled?: boolean;
     width?: number | string;
     ratio?: number;
+    theme?: string;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -226,6 +227,7 @@
     disabled: false,
     width: 10,
     ratio: 100,
+    theme: '@a',
   });
 
   interface UploadFile {