@neatui/vue 4.5.0 → 4.7.0

package/package.json

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

package/src/components/basic/IFollowView.vue

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

package/src/components/basic/IPickerView.vue

@@ -123,8 +123,9 @@
     border-radius: 0.5em 0.5em 0 0;
   }
 
-  // 显示动画
-  @keyframes am-show-am {
+  // Keep picker keyframes off the shared am-show-am / am-hide-am names
+  // so Layer's am="am" preset is not overwritten.
+  @keyframes am-picker-show {
     0% {
       opacity: 0;
       transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
@@ -135,8 +136,7 @@
     }
   }
 
-  // 隐藏动画
-  @keyframes am-hide-am {
+  @keyframes am-picker-hide {
     0% {
       opacity: 1;
       transform: translate3d(0, 0%, 0) scale3d(1, 1, 1);
@@ -147,39 +147,34 @@
     }
   }
 
-  // 引用显示
-  %am-show-am {
-    transform: translate3d(0, -150%, 0);
+  %am-picker-show {
+    transform: translate3d(0, 100%, 0);
     opacity: 0;
     transform-style: preserve-3d;
   }
 
-  // 引用隐藏
-  %am-hide-am {
+  %am-picker-hide {
     transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-    opacity: 0;
+    opacity: 1;
     transform-style: preserve-3d;
   }
 
-  // 传参调用
   @mixin am-view-am($time: 450ms, $delay: 100ms) {
     &.show,
     &[view='2'] {
       & > * {
-        @extend %am-show-am;
-        animation: am-show-am $time $delay both;
+        @extend %am-picker-show;
+        animation: am-picker-show $time $delay both;
       }
     }
 
     &.hide,
     &[view='1'] {
-      opacity: 0;
-      transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
       pointer-events: none;
 
       & > * {
-        @extend %am-hide-am;
-        animation: am-hide-am $time $delay both;
+        @extend %am-picker-hide;
+        animation: am-picker-hide $time $delay both;
       }
     }
 
@@ -189,36 +184,11 @@
     }
   }
 
-  // 动画时间
   $time: 400ms;
   $delay: 100ms;
 
-  // 全套引用
-  [am-view='am'] {
-    &.show,
-    &[view='2'] {
-      & > * {
-        @extend %am-show-am;
-        animation: am-show-am $time $delay both;
-      }
-    }
-
-    &.hide,
-    &[view='1'] {
-      opacity: 0;
-      transition: ($time + $delay) * 0.4 ($time + $delay) * 0.6;
-      pointer-events: none;
-
-      & > * {
-        @extend %am-hide-am;
-        animation: am-hide-am $time $delay ease-in-out both;
-      }
-    }
-
-    &.none,
-    &[view='0'] {
-      display: none;
-    }
+  .fekit-picker[am-view='am'] {
+    @include am-view-am($time, $delay);
   }
 
   @keyframes am-dark-show {

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/Textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${isAutoHeight ? 'auto-height' : ''} ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
     @click="emits('click', $event)"
   >
     <div :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
@@ -21,8 +21,8 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
-        :rows="rows"
-        ui-scroll=":y"
+        :rows="displayRows"
+        :ui-scroll="isAutoHeight && !isOverflowing ? undefined : ':y'"
         dir="auto"
         @focus="emits('focus', $event, state)"
         @input="input($event)"
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, watch, ref, nextTick, onMounted } from 'vue';
+  import { reactive, watch, ref, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';
   import { isObject, isFunction } from '@fekit/utils';
 
   const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
@@ -71,8 +71,10 @@
    * prefix         前缀内容
    * suffix         后缀内容
    * interacted     用户是否交互
-   * autoHeight     是否自动调整高度
-   * rows           初始行数
+   * autoHeight     是否自动调整高度；同时传入 minRows 与 maxRows 时默认开启；单独开启时无限增高
+   * rows           初始行数（未开启自动高度，或开启但未同时设 min/max 时）
+   * minRows        与 maxRows 同时传入时生效的最小行数
+   * maxRows        与 minRows 同时传入时生效的最大行数，超出后出现滚动条
    */
 
   // 类型
@@ -95,8 +97,10 @@
     prefix?: Array<any>;
     suffix?: Array<any>;
     interacted?: boolean | number | null;
-    autoHeight?: boolean;
+    autoHeight?: boolean | null;
     rows?: number;
+    minRows?: number;
+    maxRows?: number;
   }
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
@@ -117,8 +121,9 @@
     prefix: () => [],
     suffix: () => [],
     interacted: null,
+    // Boolean 未传时 Vue 会落到 false，无法与「显式关闭」区分
+    autoHeight: null,
     // textarea 特有属性默认值
-    autoHeight: false,
     rows: 3,
   });
 
@@ -132,18 +137,81 @@
   });
 
   // textarea 元素引用
-  const el: any = ref(null);
+  const el = ref<HTMLTextAreaElement | null>(null);
+  const isOverflowing = ref(false);
+
+  const fRowLimit = (value: unknown, fallback: number) => {
+    const n = Number(value);
+    return Number.isFinite(n) && n > 0 ? Math.max(1, Math.floor(n)) : fallback;
+  };
+
+  const hasRowRange = computed(() => props.minRows != null && props.maxRows != null);
+  const isAutoHeight = computed(() => (props.autoHeight === false ? false : props.autoHeight === true ? true : hasRowRange.value));
+  const resolvedMinRows = computed(() => fRowLimit(props.minRows, 1));
+  const resolvedMaxRows = computed(() => Math.max(resolvedMinRows.value, fRowLimit(props.maxRows, 10)));
+  // 有 min/max 时从最小行起算；仅 autoHeight 时保留 rows，并无限增高
+  const displayRows = computed(() => (isAutoHeight.value && hasRowRange.value ? resolvedMinRows.value : props.rows));
+
+  let measurementQueued = false;
+  let resizeObserver: ResizeObserver | undefined;
+  let observedWidth = 0;
+
+  const fMeasureHeight = () => {
+    measurementQueued = false;
+    const node = el.value;
+    if (!node) return;
+
+    if (!isAutoHeight.value) {
+      node.style.height = '';
+      node.style.overflowY = '';
+      isOverflowing.value = false;
+      return;
+    }
+
+    // 未同时设 min/max：跟内容无限增高，不封顶
+    if (!hasRowRange.value) {
+      node.style.height = 'auto';
+      node.style.overflowY = 'hidden';
+      node.style.height = `${node.scrollHeight + 1}px`;
+      isOverflowing.value = false;
+      return;
+    }
+
+    node.style.height = '0px';
+    node.style.overflowY = 'hidden';
+
+    const style = getComputedStyle(node);
+    let lineHeight = parseFloat(style.lineHeight);
+    if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
+      lineHeight = (parseFloat(style.fontSize) || 14) * 1.5;
+    }
+
+    const paddingBlock = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+    const minHeight = resolvedMinRows.value * lineHeight + paddingBlock;
+    const maxHeight = resolvedMaxRows.value * lineHeight + paddingBlock;
+    const contentHeight = node.scrollHeight;
+    const overflowing = contentHeight > maxHeight + 1;
+    const measuredHeight = contentHeight <= minHeight + 1 ? minHeight : contentHeight;
+    const targetHeight = Math.min(Math.max(measuredHeight, minHeight), maxHeight);
+
+    node.style.height = `${Math.ceil(targetHeight)}px`;
+    node.style.overflowY = overflowing ? 'auto' : 'hidden';
+    isOverflowing.value = overflowing;
+  };
 
-  // 自动高度功能
   const fAutoHeight = () => {
-    nextTick(() => {
-      if (props.autoHeight && el.value) {
-        el.value.style.height = 'auto';
-        el.value.style.height = el.value.scrollHeight + 1 + 'px';
-      }
-    });
+    if (measurementQueued) return;
+    measurementQueued = true;
+    nextTick(fMeasureHeight);
   };
 
+  watch(
+    [() => isAutoHeight.value, () => resolvedMinRows.value, () => resolvedMaxRows.value, () => props.modelValue, () => props.rows, () => props.sz, () => props.theme],
+    () => {
+      fAutoHeight();
+    },
+  );
+
   // 外部传入交互标识，主要用于外部没有输入但点击了提交
   watch(
     () => props.interacted,
@@ -267,7 +335,23 @@
 
   // 组件挂载后初始化自动高度
   onMounted(() => {
-    // 自动高度
+    const node = el.value;
+    if (node && typeof ResizeObserver !== 'undefined') {
+      observedWidth = node.getBoundingClientRect().width;
+      resizeObserver = new ResizeObserver(() => {
+        const width = node.getBoundingClientRect().width;
+        if (Math.abs(width - observedWidth) > 0.5) {
+          observedWidth = width;
+          fAutoHeight();
+        }
+      });
+      resizeObserver.observe(node);
+    }
     fAutoHeight();
   });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+  });
 </script>