@neatui/vue 5.1.11 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @neatui/vue 更新记录
 
+## 5.2.1
+
+### IFollowView（移动端底部面板）
+- 面板改为从底部滑入滑出，暗层同步淡入淡出，使用 `cubic-bezier(0.32, 0.72, 0, 1)` 减速曲线；支持“减少动态效果”。
+- 面板通过 Popover API 进入浏览器 top layer，不再依赖 z-index；不支持时回退为普通 fixed。
+- 插槽内容撑满面板宽度，覆盖桌面端写死的宽度。
+- 面板贴底，Home 指示条安全区以面板底色留白（需页面 viewport 设置 `viewport-fit=cover`）。
+- 顶部圆角改为 `0.75em`；上方间距统一由标题栏提供；关闭按钮改用 CSS 图标 `ui-icon="close"`。
+- 移动端样式只作用于本层面板盒子，不再影响插槽内其他 `ui-tips` 结构。
+
+### 依赖
+- CSS 依赖更新为 `@neatui/css@^5.2.1`。
+
+## 5.2.0
+
+### Layer
+- 新增 `on.cancel` 回调，修正 show / hide 回调的语义。
+- 加强注册逻辑；动画失败时有兜底；点击遮罩关闭更可靠。
+- 离开分组时释放遮罩；校验挂载区域的容器。
+- 排队中的弹层在同一时刻先 show 再 hide 时，仍按队列规则处理；任意 hide 都会丢弃排队中的请求。
+- 关闭或立即挂起后，下层弹层能正确恢复。
+
+### IFollowView
+- 重写点击外部关闭的逻辑；同步嵌套浮层、`v-model` 和 hover 的状态。
+- 挂载时就是打开状态的，也会初始化定位。
+- 手动切换开关时取消 hover 计时器；鼠标在嵌套子浮层上时父浮层保持打开。
+- 释放已失效的 Follow 实例。
+
+### Select
+- 选中“其他”后立即显示输入框，有独立字段时也不再要求先有值；输入框会自动聚焦。
+- 回车和失焦确认不再重复触发 `change`。
+- 有独立字段时，空输入会保留已选的“其他”，等待补填。
+- 新增 `footer` 插槽，可通过插槽参数拿到 `close` 方法。
+
+### DateView
+- 手机端宽度撑满。
+
+### 依赖
+- CSS 依赖更新为 `@neatui/css@^5.2.0`。Grid 间距的不兼容变更见 5.1.11 一节。
+
 ## 5.1.11
 
 - FormLoader 新增 `mode="read"`：保留表单控件，统一设置 `disabled`；禁止字段写回、数组增删和排序，隐藏校验提示。插槽的 `bind.disabled` 同步为 `true`，自定义控件需绑定该属性。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.1.11",
+  "version": "5.2.1",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.1.11",
+    "@neatui/css": "^5.2.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/IFollowView.vue

@@ -12,19 +12,19 @@
         :style="`position: fixed; pointer-events: none; ${tipStyle}`"
         :ui-tips="uiTips"
         :ui-tips-view="state.show ? 1 : 0"
-        @mouseover="hovershow"
-        @mouseout="hoverhide"
+        @mouseover="tipHover(1)"
+        @mouseout="tipHover(0)"
         @click="clickhide"
       >
-        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="[tipBoxStyle, dragPassing ? 'pointer-events: none;' : '']">
-          <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
+        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
+          <div ui-hide=">mob" class="mob-follow-tips w-full nx-sl nt-sl nb-ss" ui-flex="row xm">
             <div class="w-xs*s"></div>
             <div>
               <h5 class="bold">{{ title }}</h5>
             </div>
             <div class="w-xs*s" ui-flex="row rm">
               <button ui-btn="@a none s :square" @click="toggle">
-                <i class="icon icon-close"></i>
+                <i ui-icon="close"></i>
               </button>
             </div>
           </div>
@@ -35,8 +35,15 @@
     </Teleport>
   </div>
 </template>
+<script lang="ts">
+  // 每个实例只登记自己的后代，Teleport 后仍可辨认嵌套浮层。
+  type FollowBoundary = { contains: (target: Node) => boolean; hide: () => void };
+  // hover：Teleport 内容的鼠标进出不会冒泡到祖先，需要逐级通知。
+  type FollowContext = { children: Set<FollowBoundary>; hover: (on: boolean) => void };
+  const followContextKey = Symbol('follow-context');
+</script>
 <script setup lang="ts">
-  import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
+  import { reactive, ref, onMounted, onUnmounted, watch, inject, provide } from 'vue';
   import Follow from '@fekit/follow';
 
   const emits = defineEmits(['update:modelValue', 'onhide', 'onshow']);
@@ -55,6 +62,7 @@
     tipBoxStyle?: string;
     arrow?: any;
     clickTipHide?: boolean;
+    /** @deprecated 已移除，不再生效，将在 6.0 删除该属性。 */
     dragTipHide?: boolean;
     mobile?: boolean;
     title?: string;
@@ -75,7 +83,7 @@
     tipBoxStyle: '',
     arrow: {},
     clickTipHide: false,
-    dragTipHide: false,
+    dragTipHide: undefined,
     mobile: true,
     title: '',
     zIndex: undefined,
@@ -87,87 +95,23 @@
   const teleportReady = ref(false);
   const state = reactive({
     view: 0,
-    show: 0,
+    show: props.modelValue ? 1 : 0,
     pos: props.pos,
     hover: 0,
-    tipdom: false,
-    isMobile: false,
   });
 
+  if (props.dragTipHide !== undefined) {
+    console.warn('「IFollowView」 dragTipHide 已移除且不再生效，将在 6.0 删除该属性，请移除 drag-tip-hide。');
+  }
+
   const showTimer: any = ref(null);
   const hideTimer: any = ref(null);
-  const dragPointerId = ref<number | null>(null);
-  const dragFromInternal = ref(false);
-  const dragStartX = ref(0);
-  const dragStartY = ref(0);
-  const dragPassing = ref(false);
-  const DRAG_HIDE_PX = 6;
-
   const containsPoint = (el: HTMLElement | null, x: number, y: number) => {
     if (!el) return false;
     const rect = el.getBoundingClientRect();
     return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
   };
 
-  const isOutsideFollow = (x: number, y: number) => {
-    return !containsPoint(box.value, x, y) && !containsPoint(dom.value, x, y);
-  };
-
-  const isInternalDragSource = (target: EventTarget | null) => {
-    if (!(target instanceof Element)) return false;
-    if (target.closest('input, textarea, select, [contenteditable="true"], [role="slider"]')) return true;
-    const stop = box.value?.parentElement || null;
-    let el: Element | null = target;
-    while (el && el !== stop) {
-      const style = window.getComputedStyle(el);
-      const canScroll =
-        ((style.overflowY === 'auto' || style.overflowY === 'scroll') && el.scrollHeight > el.clientHeight) ||
-        ((style.overflowX === 'auto' || style.overflowX === 'scroll') && el.scrollWidth > el.clientWidth);
-      if (canScroll) return true;
-      el = el.parentElement;
-    }
-    return false;
-  };
-
-  const clearDragSession = () => {
-    dragPointerId.value = null;
-    dragFromInternal.value = false;
-  };
-
-  const hideFromDrag = () => {
-    dragPassing.value = true;
-    state.show = 0;
-    state.hover = 0;
-    clearDragSession();
-  };
-
-  const onDragPointerDown = (ev: PointerEvent) => {
-    if (!props.dragTipHide || !state.show || ev.button !== 0) return;
-    if (!box.value?.contains(ev.target as Node)) return;
-    dragPointerId.value = ev.pointerId;
-    dragFromInternal.value = isInternalDragSource(ev.target);
-    dragStartX.value = ev.clientX;
-    dragStartY.value = ev.clientY;
-  };
-
-  const onDragPointerMove = (ev: PointerEvent) => {
-    if (!props.dragTipHide || dragPointerId.value !== ev.pointerId || ev.buttons === 0) return;
-    if (isOutsideFollow(ev.clientX, ev.clientY)) {
-      hideFromDrag();
-      return;
-    }
-    if (dragFromInternal.value) return;
-    const dx = ev.clientX - dragStartX.value;
-    const dy = ev.clientY - dragStartY.value;
-    if (dx * dx + dy * dy >= DRAG_HIDE_PX * DRAG_HIDE_PX) {
-      hideFromDrag();
-    }
-  };
-
-  const onDragPointerUp = (ev: PointerEvent) => {
-    if (dragPointerId.value === ev.pointerId) clearDragSession();
-  };
-
   watch(
     () => state.hover,
     () => {
@@ -183,26 +127,86 @@
         }, 100);
       }
     },
+    // 同步创建定时器，使同一事件中随后的 hide()/show() 能够取消它。
+    { flush: 'sync' },
   );
 
+  // 主动切换状态时取消待执行的 hover 定时器，避免被延迟回调覆盖。
+  const setShow = (value: number) => {
+    clearTimeout(showTimer.value);
+    clearTimeout(hideTimer.value);
+    state.show = value;
+  };
+
   // 开关
   const toggle = () => {
     if (props.event === 'click') {
-      state.show = state.show ? 0 : 1;
+      setShow(state.show ? 0 : 1);
     }
   };
 
+  // 外部 v-model 控制显示状态。
   watch(
-    [() => state.show, () => state.hover],
-    () => {
-      if (state.show) {
+    () => props.modelValue,
+    (value) => {
+      const next = value ? 1 : 0;
+      if (next !== state.show) setShow(next);
+    },
+  );
+
+  // 只在实际显示状态变化时通知；父层关闭时同步关闭后代浮层（Teleport 后不会随父层隐藏）。
+  watch(
+    () => state.show,
+    (show) => {
+      if (show) {
         emits('onshow');
       } else {
+        children.forEach(item => item.hide());
         emits('onhide');
       }
-      emits('update:modelValue', state.show);
+      emits('update:modelValue', show);
     },
-    { deep: true },
+  );
+
+  // 移动端底部面板放入浏览器 top layer（Popover API），无需比较 z-index 即可盖住整页；
+  // 桌面端不加 popover 属性，仍按 Follow 的祖先层级定位。不支持的浏览器退回普通 fixed。
+  const SHEET_LEAVE_MS = 500;
+  let sheetTimer: ReturnType<typeof setTimeout> | undefined;
+  const supportsPopover = () => typeof HTMLElement !== 'undefined' && 'showPopover' in HTMLElement.prototype;
+  const isSheet = () => props.mobile && window.matchMedia('(max-width: 799px)').matches;
+  const releaseSheet = () => {
+    clearTimeout(sheetTimer);
+    const el = tip.value;
+    if (!el?.hasAttribute('popover')) return;
+    try {
+      if (el.matches(':popover-open')) el.hidePopover();
+    } catch {}
+    el.removeAttribute('popover');
+  };
+  watch(
+    () => state.show,
+    (show) => {
+      const el = tip.value;
+      if (!el || !supportsPopover()) return;
+      clearTimeout(sheetTimer);
+      if (show) {
+        if (!isSheet()) return;
+        el.setAttribute('popover', 'manual');
+        try {
+          // 已打开时先关再开，使其移到 top layer 最上方。
+          if (el.matches(':popover-open')) el.hidePopover();
+          el.showPopover();
+        } catch {
+          el.removeAttribute('popover');
+        }
+      } else if (el.hasAttribute('popover')) {
+        // 等滑出动画结束再离开 top layer。
+        sheetTimer = setTimeout(() => {
+          if (!state.show) releaseSheet();
+        }, SHEET_LEAVE_MS);
+      }
+    },
+    { flush: 'post' },
   );
 
   const hovershow = () => {
@@ -219,35 +223,112 @@
 
   const clickhide = () => {
     if (props.clickTipHide) {
-      state.show = 0;
+      setShow(0);
     }
   };
 
   const show = () => {
-    dragPassing.value = false;
-    state.show = 1;
+    setShow(1);
   };
 
   const hide = () => {
-    state.show = 0;
-    clearDragSession();
+    setShow(0);
+  };
+
+  const parentContext = inject<FollowContext | null>(followContextKey, null);
+  const parentChildren = parentContext?.children ?? null;
+  const children = new Set<FollowBoundary>();
+  // 后代浮层内容的进出视同本层；本层 tip 也是 Teleport 内容，继续向上通知。
+  const notifyHover = (on: boolean) => {
+    if (props.event === 'hover') state.hover = on ? 1 : 0;
+    parentContext?.hover(on);
+  };
+  const tipHover = (on: number) => notifyHover(!!on);
+  provide(followContextKey, { children, hover: notifyHover });
+  const inChildren = (target: Node): boolean => [...children].some(item => item.contains(target));
+  const containsFollow: FollowBoundary = {
+    contains: target => !!dom.value?.contains(target) || (!!state.show && (!!tip.value?.contains(target) || inChildren(target))),
+    hide: () => {
+      state.hover = 0;
+      setShow(0);
+    },
+  };
+  parentChildren?.add(containsFollow);
+  const isInside = (target: Node) => !!dom.value?.contains(target) || !!box.value?.contains(target) || inChildren(target);
+  const isBackdrop = (target: EventTarget | null) =>
+    props.mobile && window.matchMedia('(max-width: 799px)').matches && target === tip.value;
+
+  const dismissOutside = () => {
+    // 暗层 touchstart 被取消默认行为时，主动失焦，让表单先提交再关闭。
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && isInside(active)) active.blur();
+    clearTimeout(showTimer.value);
+    clearTimeout(hideTimer.value);
+    state.hover = 0;
+    hide();
   };
 
-  // 取消
-  const cancel = ({ target }: any = {}) => {
-    if (tip.value && !state.tipdom && !tip.value?.contains(target) && dom.value && !dom.value.contains(target) && !tip.value.querySelector('input:focus')) {
-      state.show = 0;
+  // 记录本次按下是否发生在浮层内：在内部按下、拖到外部松开（拖选文字、拖滑块等）
+  // 产生的 click 目标是共同祖先，不能当作外部点击。
+  let pressedInside = false;
+  const onPressStart = (event: PointerEvent) => {
+    pressedInside = !!state.show && event.target instanceof Node && isInside(event.target);
+  };
+  // 松开后紧随的 click 处理完再清除；没有 click（触摸滚动等）时也不残留到下一次键盘点击。
+  const onPressEnd = () => {
+    if (pressedInside) setTimeout(() => { pressedInside = false; }, 0);
+  };
+
+  // 外部点击以内容盒子为边界；按下位置在内部时不关闭。
+  const cancel = (event?: MouseEvent) => {
+    const fromInside = pressedInside;
+    pressedInside = false;
+    if (!state.show) return;
+    if (event && fromInside) return;
+    const target = event?.target;
+    if (target instanceof Node && isInside(target)) return;
+    if (event && isBackdrop(target ?? null)) {
+      event.preventDefault();
+      // 同一 document 上父浮层的监听器也不能继续处理子暗层点击。
+      event.stopImmediatePropagation();
     }
+    dismissOutside();
   };
 
-  // 阻止触摸事件冒泡和默认行为
-  const preventTouchScroll = (e: TouchEvent) => {
-    // 只有当触摸点在遮罩层本身时才阻止，不影响子元素
-    if (e.target === tip.value && tip.value?.classList.contains('fekit-follow-mobile')) {
-      e.preventDefault();
-      e.stopPropagation();
+  // 轻触跟踪：暗层轻触由组件自己处理（阻止点穿）；外部轻触在 touchend 关闭，
+  // 因为 iOS/WebKit 轻触非可点击元素不会派发 click。
+  const TAP_SLOP = 10;
+  let outsideTouch: { id: number; x: number; y: number; moved: boolean; backdrop: boolean } | null = null;
+  const onTouchStart = (event: TouchEvent) => {
+    outsideTouch = null;
+    if (!state.show) return;
+    const target = event.target;
+    const backdrop = isBackdrop(target);
+    if (!backdrop && (!(target instanceof Node) || isInside(target))) return;
+    if (backdrop) event.preventDefault();
+    const touch = event.touches[0];
+    if (event.touches.length === 1 && touch) {
+      outsideTouch = { id: touch.identifier, x: touch.clientX, y: touch.clientY, moved: false, backdrop };
     }
   };
+  const onTouchMove = (event: TouchEvent) => {
+    if (!outsideTouch) return;
+    // 暗层上阻止页面滚动；外部区域保持原生滚动，滚动则不视为轻触。
+    if (outsideTouch.backdrop) event.preventDefault();
+    const start = outsideTouch;
+    const touch = [...event.touches].find(item => item.identifier === start.id);
+    if (!touch || event.touches.length !== 1 || Math.hypot(touch.clientX - start.x, touch.clientY - start.y) > TAP_SLOP) start.moved = true;
+  };
+  const onTouchEnd = (event: TouchEvent) => {
+    const start = outsideTouch;
+    outsideTouch = null;
+    if (!start) return;
+    if (start.backdrop) event.preventDefault();
+    const touch = [...event.changedTouches].find(item => item.identifier === start.id);
+    if (!state.show || start.moved || !touch || Math.hypot(touch.clientX - start.x, touch.clientY - start.y) > TAP_SLOP) return;
+    if (start.backdrop ? isBackdrop(event.target) && !containsPoint(box.value, touch.clientX, touch.clientY) : true) dismissOutside();
+  };
+  const onTouchCancel = () => { outsideTouch = null; };
 
   const ensureTeleportTarget = () => {
     let area = document.querySelector('#ifollow');
@@ -261,24 +342,21 @@
 
   onMounted(() => {
     ensureTeleportTarget();
+    document.addEventListener('pointerdown', onPressStart, true);
+    document.addEventListener('pointerup', onPressEnd, true);
+    document.addEventListener('pointercancel', onPressEnd, true);
     document.addEventListener('click', cancel, true);
-    document.addEventListener('pointerdown', onDragPointerDown, true);
-    window.addEventListener('pointermove', onDragPointerMove, true);
-    window.addEventListener('pointerup', onDragPointerUp, true);
-    window.addEventListener('pointercancel', onDragPointerUp, true);
-    // 添加触摸事件监听器以防止页面滚动
-    document.addEventListener('touchstart', preventTouchScroll, {
-      passive: false,
-    });
-    document.addEventListener('touchmove', preventTouchScroll, {
-      passive: false,
-    });
-    // 判断是否为移动端
-    state.isMobile = window.innerWidth < 800;
+    // 暗层需要阻止默认行为，触摸监听不能是 passive。
+    document.addEventListener('touchstart', onTouchStart, { passive: false });
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener('touchend', onTouchEnd, { passive: false });
+    document.addEventListener('touchcancel', onTouchCancel);
   });
 
   const ex: any = ref(null);
   watch([() => dom.value, () => tip.value], () => {
+    // 替换或移除 tips 前先注销旧实例的监听。
+    ex.value?.remove();
     if (dom.value && tip.value) {
       ex.value = new Follow(
         dom.value,
@@ -300,6 +378,8 @@
         },
         { hideOnScrollOut: false, zIndex: props.zIndex },
       );
+      // 初始即显示（如 modelValue=1）时 state.show 不会再变化，需要立即启动定位。
+      if (state.show) ex.value.listen();
     } else {
       ex.value = null;
     }
@@ -313,14 +393,17 @@
   );
 
   onUnmounted(() => {
+    document.removeEventListener('pointerdown', onPressStart, true);
+    document.removeEventListener('pointerup', onPressEnd, true);
+    document.removeEventListener('pointercancel', onPressEnd, true);
     document.removeEventListener('click', cancel, true);
-    document.removeEventListener('pointerdown', onDragPointerDown, true);
-    window.removeEventListener('pointermove', onDragPointerMove, true);
-    window.removeEventListener('pointerup', onDragPointerUp, true);
-    window.removeEventListener('pointercancel', onDragPointerUp, true);
-    // 移除触摸事件监听器
-    document.removeEventListener('touchstart', preventTouchScroll);
-    document.removeEventListener('touchmove', preventTouchScroll);
+    document.removeEventListener('touchstart', onTouchStart);
+    document.removeEventListener('touchmove', onTouchMove);
+    document.removeEventListener('touchend', onTouchEnd);
+    document.removeEventListener('touchcancel', onTouchCancel);
+    parentChildren?.delete(containsFollow);
+    releaseSheet();
+    outsideTouch = null;
     state.show = 0;
 
     if (ex.value) {
@@ -331,11 +414,6 @@
   watch(
     () => state.show,
     (show: any) => {
-      if (show) {
-        dragPassing.value = false;
-      } else {
-        clearDragSession();
-      }
       if (ex.value) {
         if (show) {
           ex.value.listen();
@@ -355,6 +433,17 @@
 </script>
 <style lang="scss">
   @use '@neatui/css/query' as neatui;
+  // 抵消 [popover] 的 UA 默认样式；放在媒体查询外，面板打开时切到桌面宽度也不会走样。
+  .fekit-follow-mobile[popover] {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+  }
   @include neatui.mob {
     .fekit-follow-mobile {
       position: fixed !important;
@@ -368,27 +457,52 @@
       align-content: center !important;
       inset: 0 0 0 0 !important;
 
+      // 底部面板：暗层淡入淡出，面板从底部滑入滑出（iOS 风格减速曲线）。
+      --follow-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
+      background-color: rgba(0, 0, 0, 0);
+      transition: background-color 0.4s var(--follow-sheet-ease);
+
       &[ui-tips-view='1'] {
         background-color: rgba(0, 0, 0, 0.5);
         pointer-events: auto !important;
-        touch-action: none !important;
       }
 
-      &[ui-tips] [ui-tips-box] {
+      &[ui-tips][ui-tips-view='1'] > [ui-tips-box] {
+        transform: translate3d(0, 0, 0) !important;
+      }
+
+      &[ui-tips] > [ui-tips-box] {
         position: relative !important;
 
         width: 100% !important;
-        bottom: env(safe-area-inset-bottom) !important;
+        bottom: 0 !important;
+        // iPhone Home 指示条安全区：面板背景铺到屏幕底边，内容让出安全区。
+        // 用透明下边框而非 padding，避免覆盖各组件 tipBoxClass 的内边距（背景默认绘制到边框下）。
+        border-bottom: env(safe-area-inset-bottom, 0px) solid transparent !important;
         right: unset !important;
         top: unset !important;
         left: unset !important;
-        transform: translate3d(0, 0.5em, 0);
+        border-radius: 0.75em 0.75em 0 0 !important;
+        // 上方间距统一由标题栏提供，忽略各组件 tipBoxClass 的上内边距（如 ny-sm）。
+        padding-top: 0 !important;
+        // 全程不透明，只做位移。
+        opacity: 1 !important;
+        transform: translate3d(0, 100%, 0) !important;
+        transition: transform 0.45s var(--follow-sheet-ease) !important;
+        will-change: transform;
 
         display: flex !important;
         flex-direction: column !important;
         justify-content: flex-end !important;
-        align-items: center !important;
-        align-content: center !important;
+        align-items: stretch !important;
+        align-content: stretch !important;
+
+        // 插槽内容撑满面板宽度，覆盖桌面端写死的宽度（如 w-ml*s）。
+        > * {
+          width: 100% !important;
+          max-width: 100%;
+          box-sizing: border-box;
+        }
 
         [ui-tips-arrow] {
           display: none;
@@ -396,9 +510,15 @@
       }
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      .fekit-follow-mobile,
+      .fekit-follow-mobile[ui-tips] > [ui-tips-box] {
+        transition-duration: 0.01s !important;
+      }
+    }
+
     .mob-follow-tips {
       position: relative;
-      padding-bottom: env(safe-area-inset-bottom, 16px);
       &::before {
         position: absolute;
         content: '';
@@ -407,7 +527,7 @@
         height: 3px;
         border-radius: 1em;
         background-color: var(--co-text-o-ss);
-        top: 5px;
+        top: 6px;
         left: 50%;
         transform: translateX(-50%);
       }

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

@@ -12,7 +12,7 @@
         :view="state.view"
         class="fekit-layer"
       >
-        <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+        <div ref="wrapRef" :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @pointerdown="_sys_press" @pointerup="_sys_release" @click="_sys_hide">
           <div v-if="state.coverDark !== ''" class="fekit-layer-cover-dark"></div>
           <slot :param="_tasks[id]?.params"></slot>
         </div>
@@ -21,7 +21,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
   import { env, isFunction } from '@fekit/utils';
 
   // 弹层队列
@@ -73,6 +73,7 @@
       el: HTMLElement | null;
       listening: boolean;
       owners: Set<string>;
+      timer?: ReturnType<typeof setTimeout>;
       view: number;
     };
     queue: Array<{ id: string; kind: 'open' | 'show'; params: any; then: any }>;
@@ -186,9 +187,65 @@
     return task.view === 1 && !!task.parkAfterHide;
   };
 
+  const parseTimeList = (value: string) =>
+    value.split(',').map((item) => {
+      const text = item.trim();
+      const num = Number.parseFloat(text) || 0;
+      return text.endsWith('ms') ? num : num * 1000;
+    });
+
+  // 读取元素当前动画的最长耗时(ms)；没有动画返回 0
+  const getAnimationWait = (el: Element | null | undefined) => {
+    if (!el || !env.client) return 0;
+    const style = window.getComputedStyle(el);
+    const names = style.animationName.split(',');
+    const durations = parseTimeList(style.animationDuration);
+    const delays = parseTimeList(style.animationDelay);
+    let wait = 0;
+    names.forEach((name, index) => {
+      if (name.trim() === 'none') return;
+      const duration = durations[index % durations.length] || 0;
+      const delay = delays[index % delays.length] || 0;
+      wait = Math.max(wait, duration + delay);
+    });
+    return wait;
+  };
+
+  // animationend 兜底：动画缺失/被禁用/事件丢失时也能推进状态
+  const ANIMATION_FALLBACK_SLACK = 100;
+
+  const onGlobalDarkAnimationDone = (group: AreaGroup) => {
+    if (group.dark.timer) {
+      clearTimeout(group.dark.timer);
+      group.dark.timer = undefined;
+    }
+    if (group.dark.view === 2) setGlobalDarkView(group, 3);
+    else if (group.dark.view === 1) {
+      setGlobalDarkView(group, 0);
+      const afterHide = group.dark.afterHide;
+      group.dark.afterHide = undefined;
+      afterHide?.();
+    }
+  };
+
   const setGlobalDarkView = (group: AreaGroup, view: number) => {
     group.dark.view = view;
-    if (group.dark.el) group.dark.el.setAttribute('view', `${view}`);
+    if (group.dark.timer) {
+      clearTimeout(group.dark.timer);
+      group.dark.timer = undefined;
+    }
+    const el = group.dark.el;
+    if (!el) return;
+    el.setAttribute('view', `${view}`);
+    if (view !== 1 && view !== 2) return;
+    const wait = getAnimationWait(el);
+    group.dark.timer = setTimeout(
+      () => {
+        group.dark.timer = undefined;
+        if (group.dark.view === view) onGlobalDarkAnimationDone(group);
+      },
+      wait > 0 ? wait + ANIMATION_FALLBACK_SLACK : 0,
+    );
   };
 
   const ensureGlobalDarkEl = (area: string, group: AreaGroup) => {
@@ -208,13 +265,7 @@
     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?.();
-      }
+      onGlobalDarkAnimationDone(group);
     });
     group.dark.listening = true;
     return el;
@@ -316,8 +367,17 @@
     syncStackIndex(group);
   };
 
+  const runQueuedCancel = (job: { params: any }) => {
+    const cancel = job.params?.on?.cancel;
+    if (typeof cancel === 'function') cancel();
+  };
+
+  // 撤掉队列中的显示请求：该请求不会再显示，视为取消
   const removeFromQueue = (group: AreaGroup, layerId: string) => {
+    const removed = group.queue.filter((job) => job.id === layerId);
+    if (!removed.length) return;
     group.queue = group.queue.filter((job) => job.id !== layerId);
+    removed.forEach(runQueuedCancel);
   };
 
   const getVisibleTop = (group: AreaGroup, exceptId = '') => {
@@ -506,13 +566,23 @@
     wrapStyle: '',
   });
 
-  if (env.client) {
-    const _area: any = document.querySelector(props.area);
+  // 容器不存在时：仅 #id 形式可自动创建；其它选择器无法据此建出可匹配的节点，只提示
+  if (env.client && props.area) {
+    let _area: Element | null = null;
+    try {
+      _area = document.querySelector(props.area);
+    } catch {
+      _area = null;
+    }
     if (!_area) {
-      const el = document.createElement('div');
-      el.id = (props.area || '#fekit').substring(1);
-      el.style.position = 'absolute';
-      document.body.appendChild(el);
+      if (/^#[\w-]+$/.test(props.area)) {
+        const el = document.createElement('div');
+        el.id = props.area.substring(1);
+        el.style.position = 'absolute';
+        document.body.appendChild(el);
+      } else {
+        console.warn('Layer 的 area 容器不存在，且只有 #id 形式可自动创建：', props.area);
+      }
     }
   }
 
@@ -528,6 +598,18 @@
     view: 0,
   });
   const scrollLockOwner = {};
+  const wrapRef = ref<HTMLElement | null>(null);
+  // 本实例注册到 _tasks 的对象；同 id 被其它实例覆盖后不再写全局
+  let self: any = null;
+  const ownsRegistration = () => !!self && _tasks[props.id] === self;
+
+  let animTimer: ReturnType<typeof setTimeout> | undefined;
+  const clearAnimTimer = () => {
+    if (animTimer) {
+      clearTimeout(animTimer);
+      animTimer = undefined;
+    }
+  };
 
   const layerStyle = computed(() => {
     let style = '';
@@ -539,12 +621,12 @@
   });
 
   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;
+    if (!self) return;
+    self.view = view;
+    self.openMode = state.openMode;
+    self.parkAfterHide = state.parkAfterHide;
+    self.participates = participatesInGroup(props.dark);
+    self.dark = props.dark;
   };
 
   const syncOwnDarkOccupancy = () => {
@@ -575,6 +657,7 @@
       else releaseScrollLock(scrollLockOwner);
       syncOwnDarkOccupancy();
       state.immediate = false;
+      armAnimFallback();
       if (participatesInGroup(props.dark) && props.id) {
         nextTick(() => recomputeRecess(getAreaGroup(props.area)));
       }
@@ -584,8 +667,30 @@
 
   watch(
     () => props.dark,
-    () => {
+    (dark, prevDark) => {
+      const was = participatesInGroup(prevDark);
+      const now = participatesInGroup(dark);
       syncTaskView(state.view);
+      if (was !== now && env.client && props.id && ownsRegistration()) {
+        const group = getAreaGroup(props.area);
+        if (!now) {
+          // 退出分组：释放暗层占用并移出栈/队列；不恢复其下被 park 的弹层(不视为关闭)
+          removeFromQueue(group, props.id);
+          removeFromStack(group, props.id);
+          releaseGlobalDark(props.area, group, props.id);
+          state.coverDark = '';
+          state.recess = 0;
+          state.stackIndex = 0;
+          recomputeRecess(group);
+          scheduleFlushQueue(group);
+          return;
+        }
+        // 加入分组：已打开时补上栈位置，暗层占用由 syncOwnDarkOccupancy 接管
+        if (state.view > 0) {
+          ensureOnStack(group, props.id);
+          recomputeRecess(group);
+        }
+      }
       syncOwnDarkOccupancy();
     },
   );
@@ -593,7 +698,7 @@
   watch(
     () => props.escClose,
     (escClose) => {
-      if (_tasks[props.id]) _tasks[props.id].escClose = escClose;
+      if (self) self.escClose = escClose;
     },
     { immediate: true },
   );
@@ -601,7 +706,7 @@
   watch(
     () => props.darkClickClose,
     (darkClickClose) => {
-      if (_tasks[props.id]) _tasks[props.id].darkClickClose = darkClickClose;
+      if (self) self.darkClickClose = darkClickClose;
     },
     { immediate: true },
   );
@@ -612,7 +717,10 @@
     hide: [],
     open: [],
     none: [],
+    cancel: [],
   };
+  // 已发起显示但尚未完成(show 回调未执行)
+  let showPending = false;
 
   const resolveMode = (params: any): LayerMode => {
     const mode = params?.mode;
@@ -623,14 +731,28 @@
   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);
+    if (params?.on?.cancel) on.cancel.push(params.on.cancel);
     on.show.push(then);
   };
 
-  const runCallbacks = (key: 'show' | 'hide' | 'none') => {
-    on[key].forEach((fun: any) => {
+  // 回调执行前，LayerById(id).view 与分组栈都已更新为最终状态
+  const runCallbacks = (key: 'show' | 'hide' | 'none' | 'cancel') => {
+    const list = on[key].splice(0);
+    if (key === 'show') {
+      showPending = false;
+      on.cancel.length = 0;
+    }
+    list.forEach((fun: any) => {
       if (isFunction(fun)) fun();
     });
-    on[key].length = 0;
+  };
+
+  // 显示尚未完成就被关闭：丢弃 show 回调，改为触发 cancel
+  const cancelPendingShow = () => {
+    if (!showPending) return;
+    showPending = false;
+    on.show.length = 0;
+    runCallbacks('cancel');
   };
 
   const flushQueue = (group: AreaGroup) => {
@@ -639,6 +761,7 @@
     if (!job) return;
     const task = _tasks[job.id];
     if (!task) {
+      runQueuedCancel(job);
       flushQueue(group);
       return;
     }
@@ -666,7 +789,9 @@
     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();
+    // 恢复已停放或正在退往停放的下层(unpark 自行判断)
+    const top = topId ? _tasks[topId] : undefined;
+    if (top && (top.view === 4 || top.parkAfterHide)) top.unpark();
     recomputeRecess(group);
     scheduleFlushQueue(group);
   };
@@ -726,16 +851,24 @@
       state.parkAfterHide = false;
       state.immediate = true;
       state.view = 4;
+      syncTaskView(4);
       return;
     }
     if (state.view === 2 || state.view === 3) {
       state.parkAfterHide = true;
-      syncTaskView(state.view);
       state.view = 1;
+      syncTaskView(1);
     }
   };
 
   const unpark = (options: any = {}) => {
+    // 退场动画未结束(尚未进入停放)：取消停放，重新显示
+    if (state.view === 1 && state.parkAfterHide) {
+      state.parkAfterHide = false;
+      state.view = 2;
+      syncTaskView(2);
+      return;
+    }
     if (state.view !== 4) return;
     state.parkAfterHide = false;
     if (options.immediate) {
@@ -746,16 +879,38 @@
     state.view = 2;
   };
 
+  // animationend 兜底：am 无对应样式、动画被禁用或事件丢失时，按动画时长推进 1→0 / 2→3
+  function armAnimFallback() {
+    clearAnimTimer();
+    const view = state.view;
+    if (!env.client || (view !== 1 && view !== 2)) return;
+    nextTick(() => {
+      if (state.view !== view) return;
+      clearAnimTimer();
+      const wait = getAnimationWait(wrapRef.value);
+      animTimer = setTimeout(
+        () => {
+          animTimer = undefined;
+          if (state.view === view) anim();
+        },
+        wait > 0 ? wait + ANIMATION_FALLBACK_SLACK : 0,
+      );
+    });
+  }
+
   // 注入参数
   const init = (params: any = {}) => {
-    _tasks[id].params = params;
+    self.params = params;
     if (params?.on?.show) {
       on.show.push(params.on.show);
     }
     if (params?.on?.hide) {
       on.hide.push(params.on.hide);
     }
-    return _tasks[id];
+    if (params?.on?.cancel) {
+      on.cancel.push(params.on.cancel);
+    }
+    return self;
   };
 
   // 显示弹层
@@ -763,23 +918,35 @@
     if (tryEnqueue('show', params, then)) return;
     if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
     bindOpenCallbacks(params, then);
+    showPending = true;
     state.openMode = resolveMode(params);
     applyIncomingRelation(state.openMode, params, false);
     state.parkAfterHide = false;
     state.view = 2;
+    // 立即同步全局状态，同一调用栈内随后的 queue 请求才能看到本层在显示
+    syncTaskView(2);
     closeReplacedLayers(state.openMode, params, false);
     syncGroupPresentation();
   };
 
   // 隐藏弹层
   const hide = (_params: any = {}, then = () => {}) => {
+    // 先撤销排队中的显示请求(触发其 cancel)，无论当前是否在显示
+    if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    // 已关闭：目标状态已达成，直接回调
+    if (state.view === 0) {
+      if (isFunction(then)) then();
+      return;
+    }
+    cancelPendingShow();
     if (state.view === 4) {
       on.hide.push(then);
       state.parkAfterHide = false;
       state.immediate = true;
       state.view = 0;
-      runCallbacks('hide');
+      syncTaskView(0);
       onGroupLayerClosed(id);
+      runCallbacks('hide');
       return;
     }
     if (state.view === 2 || state.view === 3) {
@@ -787,7 +954,12 @@
       syncTaskView(state.view);
       state.view = 1;
       on.hide.push(then);
+      return;
     }
+    // 正在关闭：回调并入本次关闭；若是 park 的退场过渡，改为真正关闭
+    state.parkAfterHide = false;
+    syncTaskView(state.view);
+    on.hide.push(then);
   };
 
   // 打开弹层(没有动画过程)
@@ -800,6 +972,7 @@
     state.parkAfterHide = false;
     state.immediate = true;
     state.view = 3;
+    syncTaskView(3);
     closeReplacedLayers(state.openMode, params, true);
     syncGroupPresentation();
     runCallbacks('show');
@@ -808,18 +981,34 @@
   const none = (_params: any = {}, then = () => {}) => {
     const wasOpen = state.view > 0;
     if (participatesInGroup(props.dark) && props.id) removeFromQueue(getAreaGroup(props.area), props.id);
+    cancelPendingShow();
     state.parkAfterHide = false;
     state.immediate = true;
     state.view = 0;
+    syncTaskView(0);
     on.none.push(then);
+    if (wasOpen) onGroupLayerClosed(id);
     // 立即执行回调，因为没有动画
     runCallbacks('none');
-    if (wasOpen) onGroupLayerClosed(id);
   };
 
-  // 点暗层关闭
-  const _sys_hide = (ev: any) => {
-    if (props.darkClickClose && ev.target.className === 'fekit-layer-wrap' && state.view === 3) {
+  // 点暗层关闭：按下与松开都必须落在暗层(wrap 本身)上。
+  // 按下和松开分处弹窗内外时(如拖选输入框文本拖出弹窗)，click 会派发到共同祖先 wrap，不能据此关闭。
+  let pressedOnBackdrop = false;
+  let releasedOnBackdrop = false;
+  const _sys_press = (ev: PointerEvent) => {
+    pressedOnBackdrop = ev.target === ev.currentTarget;
+    releasedOnBackdrop = false;
+  };
+  const _sys_release = (ev: PointerEvent) => {
+    releasedOnBackdrop = ev.target === ev.currentTarget;
+  };
+  const _sys_hide = (ev: MouseEvent) => {
+    const fromBackdrop = pressedOnBackdrop && releasedOnBackdrop;
+    pressedOnBackdrop = false;
+    releasedOnBackdrop = false;
+    if (!fromBackdrop || ev.target !== ev.currentTarget) return;
+    if (props.darkClickClose && state.view === 3) {
       hide();
     }
   };
@@ -827,6 +1016,7 @@
   // 监听动画
   const anim = (ev?: AnimationEvent) => {
     if (ev && ev.target !== ev.currentTarget) return;
+    clearAnimTimer();
     if (state.view === 1) {
       if (state.parkAfterHide) {
         state.parkAfterHide = false;
@@ -834,11 +1024,14 @@
         return;
       }
       state.view = 0;
-      runCallbacks('hide');
+      syncTaskView(0);
       onGroupLayerClosed(id);
+      runCallbacks('hide');
+      return;
     }
     if (state.view === 2) {
       state.view = 3;
+      syncTaskView(3);
       runCallbacks('show');
     }
   };
@@ -849,7 +1042,7 @@
     console.error('Layer 有重复 id', id);
   }
   if (id) {
-    _tasks[id] = {
+    self = {
       dark: props.dark,
       darkClickClose: props.darkClickClose,
       escClose: props.escClose,
@@ -868,6 +1061,7 @@
       unpark,
       view: state.view,
     };
+    _tasks[id] = self;
     ensureEscapeListener();
   } else {
     console.error('Layer 必须填写全局统一的 id');
@@ -875,7 +1069,11 @@
 
   // 卸载弹层
   onBeforeUnmount(() => {
-    if (participatesInGroup(props.dark) && id) {
+    clearAnimTimer();
+    cancelPendingShow();
+    // 同 id 已被新实例接管(路由过渡/HMR 时新实例先挂载)：只释放本实例私有资源，不动全局注册与按 id 记录的栈/队列/暗层
+    const owns = ownsRegistration();
+    if (owns && participatesInGroup(props.dark) && id) {
       const group = getAreaGroup(props.area);
       removeFromQueue(group, id);
       if (state.view > 0) {
@@ -885,10 +1083,14 @@
       } else {
         removeFromStack(group, id);
       }
+      // 卸载后 view watcher 可能不再执行，显式释放暗层占用
+      releaseGlobalDark(props.area, group, id, true);
+    }
+    if (owns) {
+      removeEscapeStack(id);
+      delete _tasks[id];
     }
-    removeEscapeStack(id);
     releaseScrollLock(scrollLockOwner);
-    delete _tasks[id];
   });
 </script>
 

package/src/components/form/DateView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ui-date="@a" class="fekit-date-view pr" :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 22em">
+  <div ui-date="@a" class="mob:min-w-full fekit-date-view pr" :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 22em">
     <div ui-date-head="" class="flex-fixed nx-ms mt-ss ny-sm b-solid b-line" ui-flex="row xm">
       <div ui-flex="row lm" class="o-lm">
         <div ui-btn="@a s none :square" @click="prev()">

package/src/components/form/Select.vue

@@ -60,6 +60,9 @@
             </div>
           </li>
         </ul>
+        <div v-if="$slots.footer" class="nx-sm ny-ss">
+          <slot name="footer" :close="closeDropdown"></slot>
+        </div>
       </template>
     </IFollowView>
   </div>
@@ -72,6 +75,7 @@
   import { matchOptionSearch } from './optionSearch';
   const ifollow: any = ref(null);
   const customInputRef: any = ref(null);
+  const closeDropdown = () => ifollow.value?.hide();
 
   const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide', 'update:other']);
 
@@ -187,6 +191,8 @@
 
   // 自定义输入值
   const customInputValue = ref('');
+  // 选择其他后立即显示输入框，不依赖已有自定义值。
+  const typing = ref(false);
 
   const state = reactive({
     show: 0,
@@ -194,9 +200,10 @@
     isInputting: computed(() => {
       // 如果配置了"其他"选项且当前选中的是"其他"
       if (props.other) {
+        if (typing.value) return true;
         if (props.other.field) {
-          // 情况2：有独立字段，当主值匹配other.value且有otherValue时显示输入框
-          return props.modelValue === props.other.value && props.otherValue;
+          // 情况2：独立字段可以尚未填写，主值选中其他即显示输入框。
+          return props.modelValue === props.other.value;
         } else {
           // 情况1：无独立字段，当值不在枚举中时显示输入框
           if (props.modelValue && props.modelValue !== '') {
@@ -323,33 +330,36 @@
         change('');
       }
       customInputValue.value = '';
+      typing.value = true;
       nextTick(() => {
-        customInputRef.value?.focus();
+        // Input 未暴露 focus 方法，聚焦其原生输入框。
+        customInputRef.value?.$el?.querySelector?.('input')?.focus();
       });
     } else {
+      typing.value = false;
       change(item.value);
-      ifollow.value.cancel();
+      closeDropdown();
     }
   };
 
-  // 确认自定义输入
+  // 确认自定义输入（回车与失焦都会触发，需保持幂等，避免重复派发 change）
   const confirmCustomInput = () => {
-    if (customInputValue.value.trim()) {
+    const text = customInputValue.value.trim();
+    if (text) {
       if (props.other?.field) {
         // 如果指定了 field，则主字段存储选项值，field 存储自定义输入
-        change(props.other.value);
-        emits('update:other', customInputValue.value.trim());
-      } else {
+        if (props.modelValue !== props.other.value) change(props.other.value);
+        if (props.otherValue !== text) emits('update:other', text);
+      } else if (props.modelValue !== text) {
         // 如果没有指定 field，则直接在主字段存储自定义输入
-        change(customInputValue.value.trim());
-      }
-      ifollow.value.cancel();
-    } else {
-      // 如果输入为空，清空值
-      change(null);
-      if (props.other?.field) {
-        emits('update:other', '');
+        change(text);
       }
+      closeDropdown();
+    } else if (!props.other?.field) {
+      // 无独立字段时空输入即无值；有独立字段时保留已选的“其他”，等待补填。
+      if (props.modelValue != null && props.modelValue !== '') change(null);
+    } else if (props.otherValue) {
+      emits('update:other', '');
     }
   };
 
@@ -378,8 +388,9 @@
   };
   // 清空
   const remove = () => {
+    typing.value = false;
     change(null);
-    ifollow.value.cancel();
+    closeDropdown();
   };
   // 取消
   const cancel = () => {
@@ -392,6 +403,7 @@
   // 折叠
   const onhide = () => {
     state.search = '';
+    typing.value = false;
     emits('onhide', state.selectd);
   };