@neatui/vue 5.5.1 → 5.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "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.5.1",
+    "@neatui/css": "^5.6.0",
     "@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

@@ -16,14 +16,23 @@
         @mouseout="tipHover(0)"
         @click="clickhide"
       >
-        <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
+          ref="box"
+          :ui-tips-box="state.pos"
+          :class="tipBoxClass"
+          :style="tipBoxStyle"
+          @touchstart="onSheetTouchStart"
+          @touchmove="onSheetTouchMove"
+          @touchend="onSheetTouchEnd"
+          @touchcancel="onSheetTouchCancel"
+        >
+          <div ui-hide=">mob" :class="`mob-follow-tips w-full nx-sl nt-sl ${closable ? 'nb-ss' : 'nb-sl'}`" 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">
+              <button v-if="closable" ui-btn="@a none s :square" aria-label="关闭" @click="toggle">
                 <i ui-icon="close"></i>
               </button>
             </div>
@@ -41,6 +50,12 @@
   // hover：Teleport 内容的鼠标进出不会冒泡到祖先，需要逐级通知。
   type FollowContext = { children: Set<FollowBoundary>; hover: (on: boolean) => void };
   const followContextKey = Symbol('follow-context');
+  // 按打开顺序记录已打开的浮层，Esc 只由最后打开的一层处理。
+  const openStack: FollowBoundary[] = [];
+  const removeOpen = (item: FollowBoundary) => {
+    const idx = openStack.indexOf(item);
+    if (idx > -1) openStack.splice(idx, 1);
+  };
 </script>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch, inject, provide } from 'vue';
@@ -66,6 +81,8 @@
     dragTipHide?: boolean;
     mobile?: boolean;
     title?: string;
+    /** 移动端底部面板标题栏是否显示关闭按钮。 */
+    closable?: boolean;
     zIndex?: string | number | null;
     /** 桌面端是否放入浏览器 top layer（Popover API），盖住整页任意层级；移动端底部面板始终放入。 */
     topLayer?: boolean;
@@ -88,6 +105,7 @@
     dragTipHide: undefined,
     mobile: true,
     title: '',
+    closable: false,
     zIndex: undefined,
     topLayer: true,
   });
@@ -162,8 +180,13 @@
     () => state.show,
     (show) => {
       if (show) {
+        removeOpen(containsFollow);
+        openStack.push(containsFollow);
         emits('onshow');
       } else {
+        removeOpen(containsFollow);
+        // 拖动中被其他途径关闭时，清理拖动残留的内联样式。
+        if (sheetDrag) endSheetDrag(false);
         children.forEach(item => item.hide());
         emits('onhide');
       }
@@ -359,6 +382,156 @@
   };
   const onTouchCancel = () => { outsideTouch = null; };
 
+  // 底部面板下滑关闭（对齐 iOS/Android 原生嵌套滚动）：
+  // 标题栏随时可拖；内容区在手指下所有可滚动祖先都位于顶部时，向下拖动由面板接管；
+  // 同一手势中内容先滚回顶部、继续下拉也会接力为拖动；拖回原位后交还内容滚动。
+  const DRAG_SLOP = 4;
+  const SHEET_MASK_ALPHA = 0.5; // 与样式中暗层透明度一致
+  const VELOCITY_WINDOW = 100; // ms
+  type SheetDrag = {
+    id: number;
+    x: number;
+    y: number;
+    lastY: number;
+    anchor: number;
+    offset: number;
+    mode: 'pending' | 'drag' | 'scroll' | 'none';
+    scrollers: HTMLElement[];
+    samples: { y: number; t: number }[];
+  };
+  let sheetDrag: SheetDrag | null = null;
+  const isScrollableY = (el: HTMLElement) => /(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight + 1;
+  const scrollersOf = (target: EventTarget | null) => {
+    const list: HTMLElement[] = [];
+    for (let el = target instanceof Element ? target : null; el && el !== box.value; el = el.parentElement) {
+      if (el instanceof HTMLElement && isScrollableY(el)) list.push(el);
+    }
+    return list;
+  };
+  // 留 3px 容差：惯性回弹或小数像素未完全归零时也视为顶部，被遮住的内容可忽略。
+  const TOP_TOLERANCE = 3;
+  const atTop = (d: SheetDrag) => d.scrollers.every(el => el.scrollTop < TOP_TOLERANCE);
+  const setSheetOffset = (offset: number | null) => {
+    const panel: HTMLElement | null = box.value;
+    const mask: HTMLElement | null = tip.value;
+    if (!panel || !mask) return;
+    if (offset === null) {
+      // 移除内联样式，交还 CSS 过渡：从当前位置动画到打开或关闭状态。
+      panel.style.removeProperty('transform');
+      panel.style.removeProperty('transition');
+      mask.style.removeProperty('background-color');
+      mask.style.removeProperty('transition');
+      return;
+    }
+    const height = panel.offsetHeight || 1;
+    panel.style.setProperty('transition', 'none', 'important');
+    panel.style.setProperty('transform', `translate3d(0, ${offset}px, 0)`, 'important');
+    mask.style.setProperty('transition', 'none', 'important');
+    mask.style.setProperty('background-color', `rgba(0, 0, 0, ${SHEET_MASK_ALPHA * Math.max(0, 1 - offset / height)})`, 'important');
+  };
+  const findTouch = (list: TouchList, id: number) => [...list].find(item => item.identifier === id);
+  const endSheetDrag = (dismiss: boolean) => {
+    sheetDrag = null;
+    setSheetOffset(null);
+    if (dismiss) dismissOutside();
+  };
+  const onSheetTouchStart = (event: TouchEvent) => {
+    // 拖动中有新手指落下：放弃本次拖动并回弹，不开始新的拖动；
+    // 单指时视为上一手势的结束事件丢失，清理后正常开始。
+    if (sheetDrag) {
+      endSheetDrag(false);
+      if (event.touches.length > 1) return;
+    }
+    const touch = event.touches[0];
+    if (!state.show || !isSheet() || event.touches.length !== 1 || !touch) return;
+    // 滑块等自身需要拖动的控件不参与。
+    if (event.target instanceof Element && event.target.closest('input[type="range"], [ui-sheet-nodrag]')) return;
+    sheetDrag = {
+      id: touch.identifier,
+      x: touch.clientX,
+      y: touch.clientY,
+      lastY: touch.clientY,
+      anchor: touch.clientY,
+      offset: 0,
+      mode: 'pending',
+      scrollers: scrollersOf(event.target),
+      samples: [{ y: touch.clientY, t: event.timeStamp }],
+    };
+  };
+  const onSheetTouchMove = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d) return;
+    const touch = findTouch(event.touches, d.id);
+    if (!touch || event.touches.length !== 1) {
+      // 多指介入：放弃本次拖动并回弹。
+      if (d.mode === 'drag') endSheetDrag(false);
+      sheetDrag = null;
+      return;
+    }
+    const y = touch.clientY;
+    if (d.mode === 'pending') {
+      const dx = touch.clientX - d.x;
+      const dy = y - d.y;
+      if (Math.abs(dx) < DRAG_SLOP && Math.abs(dy) < DRAG_SLOP) return;
+      if (Math.abs(dx) > Math.abs(dy)) d.mode = 'none';
+      else if (dy > 0 && atTop(d)) d.mode = 'drag';
+      else d.mode = 'scroll';
+      d.anchor = y;
+    } else if (d.mode === 'scroll' && y > d.lastY && atTop(d)) {
+      // 内容已滚到顶部仍在下拉：接力为拖动面板。
+      d.mode = 'drag';
+      d.anchor = y;
+    }
+    d.lastY = y;
+    if (d.mode !== 'drag') return;
+    if (event.cancelable) event.preventDefault();
+    const offset = y - d.anchor;
+    // 接管瞬间锚点即当前位置（offset 为 0），只有真正推过原位才交还。
+    if (offset < 0 && d.scrollers.length) {
+      // 拖回原位且继续上推：交还内容滚动。
+      d.offset = 0;
+      setSheetOffset(null);
+      d.mode = 'scroll';
+      return;
+    }
+    d.offset = Math.max(0, offset);
+    setSheetOffset(d.offset);
+    d.samples.push({ y, t: event.timeStamp });
+    while (d.samples.length > 2 && event.timeStamp - d.samples[0]!.t > VELOCITY_WINDOW) d.samples.shift();
+  };
+  const onSheetTouchEnd = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d || !findTouch(event.changedTouches, d.id)) return;
+    sheetDrag = null;
+    if (d.mode !== 'drag' || d.offset <= 0) {
+      setSheetOffset(null);
+      return;
+    }
+    const first = d.samples[0]!;
+    const last = d.samples[d.samples.length - 1]!;
+    const elapsed = event.timeStamp - last.t > VELOCITY_WINDOW ? Infinity : last.t - first.t;
+    const velocity = elapsed > 0 && elapsed !== Infinity ? (last.y - first.y) / elapsed : 0; // px/ms，向下为正
+    const height = box.value?.offsetHeight || 1;
+    // 按速度投射落点（快速下甩即关闭），明显上推时回弹。
+    const projected = d.offset + velocity * 200;
+    endSheetDrag(velocity > -0.2 && (projected > height / 2 || velocity > 0.6));
+  };
+
+  // 系统中断手势（来电、手势被接管等）：只回弹，不做关闭判定。
+  const onSheetTouchCancel = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d || !findTouch(event.changedTouches, d.id)) return;
+    endSheetDrag(false);
+  };
+
+  // Esc 关闭最后打开的浮层；捕获阶段先于 Layer 的 Esc 处理，并以 preventDefault 阻止其关闭外层弹窗。
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing || !state.show) return;
+    if (openStack[openStack.length - 1] !== containsFollow) return;
+    event.preventDefault();
+    dismissOutside();
+  };
+
   const ensureTeleportTarget = () => {
     let area = document.querySelector('#ifollow');
     if (!area) {
@@ -370,6 +543,8 @@
   };
 
   onMounted(() => {
+    // 初始即显示（modelValue=1）时 show 监听不会触发，补登记打开顺序。
+    if (state.show && !openStack.includes(containsFollow)) openStack.push(containsFollow);
     ensureTeleportTarget();
     document.addEventListener('pointerdown', onPressStart, true);
     document.addEventListener('pointerup', onPressEnd, true);
@@ -380,6 +555,7 @@
     document.addEventListener('touchmove', onTouchMove, { passive: false });
     document.addEventListener('touchend', onTouchEnd, { passive: false });
     document.addEventListener('touchcancel', onTouchCancel);
+    document.addEventListener('keydown', onKeydown, true);
   });
 
   const ex: any = ref(null);
@@ -433,6 +609,9 @@
     document.removeEventListener('touchmove', onTouchMove);
     document.removeEventListener('touchend', onTouchEnd);
     document.removeEventListener('touchcancel', onTouchCancel);
+    document.removeEventListener('keydown', onKeydown, true);
+    sheetDrag = null;
+    removeOpen(containsFollow);
     parentChildren?.delete(containsFollow);
     releaseSheet();
     outsideTouch = null;
@@ -542,6 +721,12 @@
         [ui-tips-arrow] {
           display: none;
         }
+
+        // 内容滚到顶部后的继续下拉交给面板拖动，禁止滚动链与回弹抢手势。
+        &,
+        * {
+          overscroll-behavior-y: none;
+        }
       }
     }
 

package/src/components/form/Cascader.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" class="mc-cascader">
-    <IFollowView :ui-tips="uiTips"
+    <IFollowView :ui-tips="uiTips" :closable="closable"
       ref="ifollow"
       :tipBoxStyle="`${state.flatOpts.length && state.flatOpts[0]?.length > 0 ? 'min-width: 10em;' : 'min-width: 100%'}`"
       pos="bl"
@@ -96,6 +96,7 @@
   const props = defineProps({
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView :ui-tips="uiTips" ref="ifollow">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"
         :clearable="false"
@@ -47,6 +47,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -78,6 +79,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/DateRangePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView :ui-tips="uiTips" ref="ifollow">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow">
       <InputRange
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"
         :clearable="false"
@@ -40,6 +40,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -71,6 +72,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/DateView.vue

@@ -173,8 +173,8 @@
         <div>&nbsp;</div>
       </div>
       <div class="ml-ss-sub" ui-flex="row rm">
-        <button v-if="state.panel" ui-btn="@a xs none" class="nx-ss co-risk" @click="remove">清除</button>
-        <button v-if="state.panel && !state.isNoTime" ui-btn="@a xs none" class="nx-ss co-main" @click="update">确定</button>
+        <button v-if="state.panel" ui-btn="@a s none" class="nx-ss mob:nx-ms co-risk" @click="remove">清除</button>
+        <button v-if="state.panel && !state.isNoTime" ui-btn="@a s none" class="nx-ss mob:nx-ms co-main" @click="update">确定</button>
       </div>
     </div>
   </div>

package/src/components/form/MoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <slot>
         <Input
           v-bind="{ placeholder, rules, theme, sz, co, block, ready: true, type: 'text', tips, disabled, readonly, clearable: false, verify, prefix, suffix, interacted }"
@@ -108,6 +108,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -137,6 +138,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/MoreSelectTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type: 'text', tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         :modelValue="state.label"
@@ -103,6 +103,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -133,6 +134,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/PageMoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <slot>
         <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd">
           <template #suffix><i ui-form-select=""></i></template>
@@ -61,6 +61,7 @@
   const props: any = defineProps({
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String, default: '' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/PageSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" 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>
@@ -56,6 +56,7 @@
     },
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/SearchMoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" 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>
@@ -60,6 +60,7 @@
     },
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/SearchSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" 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 }"
         v-model="state.selectd.label"
@@ -101,6 +101,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -133,6 +134,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/Select.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" 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 }"
         v-model="state.displayLabel"
@@ -132,6 +132,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -167,6 +168,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: 'm',
     co: '',
     block: true,

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

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" 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 }"
         v-model="state.label"
@@ -97,6 +97,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -132,6 +133,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/loader/FormLoader/FormLoader.vue

@@ -29,16 +29,16 @@
               :interacted="touched"
               :debug="debug"
               rows=""
-              :class="isVertical(col) ? 'w-full' : 'flex-fixed nr-sm'"
+              :class="[isVertical(col) ? 'w-full' : 'flex-fixed nr-sm', titleLayer(col)]"
               :style="isVertical(col) ? undefined : labelStyle(col)"
               :ui-flex="isVertical(col) ? 'row lm' : 'row rm'"
             />
-            <h6 v-else-if="labelText(col.label) && isVertical(col)" :style="showStar(col) ? 'text-indent: -1em' : undefined" :class="labelClass || undefined" v-bind="labelAttrs(col.label)">
+            <h6 v-else-if="labelText(col.label) && isVertical(col)" :style="showStar(col) ? 'text-indent: -1em' : undefined" :class="[labelClass, titleLayer(col)]" v-bind="labelAttrs(col.label)">
               <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
               <template v-else-if="labelText(col.label) !== '*' && showStar(col)"><b class="co-risk pr" style="left: 0.1em">﹡</b>{{ formatLabel(col) }}</template>
               <template v-else-if="labelText(col.label) !== '*'">{{ formatLabel(col) }}</template>
             </h6>
-            <p v-else-if="labelText(col.label)" :class="[labelClass, clh({ ...(col.model[1] || {}) })]" :style="labelStyle(col)" class="ar nr-sm flex-fixed o-ls" v-bind="labelAttrs(col.label)">
+            <p v-else-if="labelText(col.label)" :class="[labelClass, clh({ ...(col.model[1] || {}) }), titleLayer(col)]" :style="labelStyle(col)" class="ar nr-sm flex-fixed o-ls" v-bind="labelAttrs(col.label)">
               <slot v-if="labelSlot(col)" :name="labelSlot(col)" :col="col" :node="col" :data="col._data" :text="formatLabel(col)"></slot>
               <template v-else-if="labelText(col.label) !== '*' && showStar(col)"><b class="co-risk">﹡</b>{{ formatLabel(col) }}</template>
               <template v-else-if="labelText(col.label) !== '*'">{{ formatLabel(col) }}</template>
@@ -263,14 +263,19 @@
   const checkRules = async (value: any, rules: FormRule[] = []) => {
     if (!isArray(rules)) return null;
     if (!isEmpty(value)) {
+      // warn 不阻断：记下第一条警告后继续检查，遇到阻断规则立即返回
+      let warning: { msg: string; type: string } | null = null;
       for (const rule of rules) {
         if (rule && isFunction(rule.validator) && !(await rule.validator!(value))) {
-          return { msg: rule.msg || '', type: rule.type || 'risk' };
+          const type = rule.type || 'risk';
+          if (type !== 'warn') return { msg: rule.msg || '', type };
+          warning ||= { msg: rule.msg || '', type };
         }
       }
-      return null;
+      return warning;
     }
-    const rule = rules.find((item) => item?.required);
+    const required = rules.filter((item) => item?.required);
+    const rule = required.find((item) => (item.type || 'risk') !== 'warn') || required[0];
     return rule ? { msg: rule.msg || '', type: rule.type || 'risk' } : null;
   };
 
@@ -627,6 +632,7 @@
   });
 
   // 各层级共享：Label 宽度、校验状态、隐藏字段暂存、已挂载的表单实例
+  type ServerError = { msg: string; type: string; input: any };
   interface Shared {
     state: { lw: number; validated: boolean };
     cache: ClearCache;
@@ -640,8 +646,9 @@
     validations: WeakMap<object, { input: any; epoch: number; pending: boolean; result: Promise<any> }>;
     // 根数据任意变化时递增，供 watch: true 的联动共用
     dataVersion: ShallowRef<number>;
-    // 外部回填的错误（如服务端校验），按字段路径保存；字段值变化后自动失效
-    serverErrors: Map<string, { msg: string; type: string; input: any }>;
+    // 外部回填的错误（如服务端校验），按「所在记录 → 行内路径」保存；字段值变化后自动失效。
+    // 外层 WeakMap 以记录对象为键，记录被删除并回收后错误随之释放；清空时整体替换，shallowRef 负责通知已渲染字段
+    serverErrors: ShallowRef<WeakMap<object, Map<string, ServerError>>>;
   }
   const FORM_SHARED = Symbol.for('neatui:form-loader');
   const shared: Shared = (props.root && inject<Shared | null>(FORM_SHARED, null)) || {
@@ -656,7 +663,7 @@
     cancelChecks: new Set(),
     validations: new WeakMap(),
     dataVersion: shallowRef(0),
-    serverErrors: reactive(new Map()),
+    serverErrors: shallowRef(reactive(new WeakMap())),
   };
   provide(FORM_SHARED, shared);
 
@@ -795,6 +802,8 @@
     if (isCleared(col)) out.style = joinClass(own.style, { display: 'none' });
     return out;
   };
+  // 分组内容区的栅格负边距会伸进标题区域，标题提一层以保证按钮可点
+  const titleLayer = (col: any) => (isGroup(col) || col._array ? 'pr z-xs' : undefined);
   // 有标题分组的子节点容器
   const boxAttrs = (col: any) => {
     const { attrs } = levelOf(col);
@@ -1024,7 +1033,7 @@
       }
 
       // 添加ID
-      item._fid = item.field ? [baseIdx.value, fieldPath(item).replace(/\./g, '-')].filter(Boolean).join('-') : '';
+      item._fid = fieldIdOf(item);
 
       // 数据路径处理
       item._data = resolvePath(props.data, item.paths);
@@ -1042,6 +1051,9 @@
     if (props.debug) console.debug(`[FormLoader] ${props.path || 'root'}`, deepcopy(toRaw(state.form)));
   };
 
+  // 字段 ID 随数据路径变化；行实例复用时由下方监听单独刷新，不触发重建
+  const fieldIdOf = (item: any) => (item.field ? [baseIdx.value, fieldPath(item).replace(/\./g, '-')].filter(Boolean).join('-') : '');
+
   // 调试信息
   const debugInfo = (col: any = {}) => [fieldPath(col) || '(group)', col.model?.[0] || (isGroup(col) ? 'child' : col._array ? 'array' : 'Input')].join(' · ');
   watch(
@@ -1052,9 +1064,16 @@
     { deep: true, immediate: true },
   );
   watch([() => props.data, () => props.idx], ([data], [previous]) => {
-    if (!props.root && data !== previous) captureInitial();
+    if (!props.root && data !== previous) {
+      captureInitial();
+      clearValidate(); // 换了一条记录：上一条的服务端错误和校验状态不再适用
+    }
     rebuild(props.form);
   });
+  // 数组行增删、排序后行实例被复用，只刷新字段 ID，保留校验状态和联动
+  watch(() => props.path, () => {
+    state.form.forEach((item: any) => { item._fid = fieldIdOf(item); });
+  });
 
   // 隐藏的字段清空数据并暂存，重新显示时还原（restore: false 时只清空）
   // 只在「隐藏 → 显示」的那一次和首次运行时还原，避免和分组内的子表单来回争抢同一个值
@@ -1112,8 +1131,19 @@
     return keys.length === Object.keys(b).length && keys.every(key => Object.prototype.hasOwnProperty.call(b, key) && sameInput(a[key], b[key]));
   };
   // path 由收集字段的那一层计算（validate 在根表单调用时，嵌套字段的路径不能用根表单拼）
+  // 回填错误以「所在记录（数组行）+ 行内路径」为键保存，不依赖完整路径：
+  // 排序、删除前面的行后错误随原记录走；路径上换成别的记录时不显示；记录被删除后不再匹配
+  const localPathOf = (col: any = {}) => [col.paths, col.field].filter(Boolean).join('.');
+  const serverErrorOf = (col: any, data: any) => shared.serverErrors.value.get(toRaw(data))?.get(localPathOf(col));
+  const deleteServerError = (col: any, data: any) => shared.serverErrors.value.get(toRaw(data))?.delete(localPathOf(col));
+  const setServerError = (col: any, data: any, error: ServerError) => {
+    const store = shared.serverErrors.value;
+    const owner = toRaw(data);
+    if (!store.has(owner)) store.set(owner, new Map());
+    store.get(owner)!.set(localPathOf(col), error);
+  };
   const validateField = (col: any, ctx: FormContext, path: string, force = false): Promise<any> => {
-    const server = shared.serverErrors.get(path);
+    const server = serverErrorOf(col, ctx.data);
     if (server) return Promise.resolve({ msg: server.msg, type: server.type });
     const input = deepcopy([displayOf(col, ctx), rulesOf(col), col.model]);
     const previous = shared.validations.get(col);
@@ -1127,7 +1157,7 @@
         error = message ? { msg: message, type: 'risk' } : await checkRules(input[0], input[1]);
       } catch { error = { msg: '校验失败，请重试', type: 'risk' }; }
       job.pending = false;
-      if (shared.validations.get(col) === job && shared.validationEpoch === job.epoch && !shared.serverErrors.has(path)) { col._error = error; col._checked = true; }
+      if (shared.validations.get(col) === job && shared.validationEpoch === job.epoch && !serverErrorOf(col, ctx.data)) { col._error = error; col._checked = true; }
       return error;
     })();
     return job.result;
@@ -1140,14 +1170,14 @@
       deepcopy(col.model);
       // 回填的错误在字段值变化前一直显示，值一变就交回正常校验
       const path = col.field ? fieldPath(col) : '';
-      const server = path ? shared.serverErrors.get(path) : undefined;
+      const server = path ? serverErrorOf(col, props.data) : undefined;
       if (server && !isCleared(col)) {
         if (sameInput(server.input, value)) {
           col._error = { msg: server.msg, type: server.type };
           col._checked = true;
           continue;
         }
-        shared.serverErrors.delete(path);
+        deleteServerError(col, props.data);
       }
       if (col.field && !isGroup(col) && !isCleared(col) && (touched.value || col._touched)) {
         void validateField(col, context(), path);
@@ -1202,11 +1232,17 @@
           if (shared.pending.size) await Promise.all([...shared.pending]);
         } while (revision !== shared.revision || shared.pending.size);
         revision = shared.revision;
-        results = await Promise.all(fieldsOf().filter(({ path }) => withinPaths(path, paths)).map(async ({ col, path, ctx }) => {
+        const collected = fieldsOf().filter(({ path }) => withinPaths(path, paths));
+        results = await Promise.all(collected.map(async ({ col, ctx, path }) => {
           if (paths) col._touched = true;
-          const res = await validateField(col, ctx, path, true);
-          return res ? { field: col.field, path, label: labelText(col.label), msg: res.msg, type: res.type, fid: col._fid } : null;
+          return validateField(col, ctx, path, true);
         }));
+        // 校验期间 setErrors 回填的错误优先于本轮规则结果
+        results = collected.map(({ col, path, ctx }, i) => {
+          const server = serverErrorOf(col, ctx.data);
+          const res = server ? { msg: server.msg, type: server.type } : results[i];
+          return res ? { field: col.field, path, label: labelText(col.label), msg: res.msg, type: res.type, fid: col._fid } : null;
+        });
         if (epoch !== shared.validationEpoch) return cancelledResult();
       } while (revision !== shared.revision);
       const found = (results.filter(Boolean) as any[]).sort(byPosition);
@@ -1234,7 +1270,7 @@
 
   const clearValidate = () => {
     cancelValidation();
-    shared.serverErrors.clear();
+    shared.serverErrors.value = reactive(new WeakMap());
     shared.validations = new WeakMap();
     shared.state.validated = false;
     fieldsOf().forEach(({ col }) => { col._touched = false; col._error = null; col._checked = false; });
@@ -1251,7 +1287,7 @@
     list.forEach(({ path, msg, type = 'risk' }) => {
       const found = fields.find((item) => item.path === path);
       if (!found) return missing.push(path);
-      shared.serverErrors.set(path, { msg, type, input: deepcopy(displayOf(found.col, found.ctx)) });
+      setServerError(found.col, found.ctx.data, { msg, type, input: deepcopy(displayOf(found.col, found.ctx)) });
     });
     const first = list.find((item) => !missing.includes(item.path));
     if (scroll && first) scrollToField(first.path);

package/src/components/loader/TableLoader/TableLoader.vue

@@ -210,7 +210,7 @@
             </p>
           </li>
           <template v-if="treeEnabled && !item.__folding">
-            <template v-for="(child, cidx) in childrenOf(item)" :key="`${rowKeyOf(item, idx)}-${cidx}`">
+            <template v-for="(child, cidx) in childrenOf(item)" :key="childKeyOf(rowKeyOf(item, idx), child, cidx)">
               <li v-if="childVisible(child)" class="table-tree-item bg-fore r-sm my-sl n-ms">
                 <table>
                   <tbody>
@@ -232,7 +232,7 @@
                 </p>
               </li>
               <template v-if="depth > 2 && !child.__folding">
-                <template v-for="(grand, gidx) in childrenOf(child)" :key="`${rowKeyOf(item, idx)}-${cidx}-${gidx}`">
+                <template v-for="(grand, gidx) in childrenOf(child)" :key="childKeyOf(childKeyOf(rowKeyOf(item, idx), child, cidx), grand, gidx)">
                   <li v-if="childVisible(grand)" class="table-tree-item table-tree-item-3 bg-fore r-sm my-sl n-ms">
                     <table>
                       <tbody>
@@ -652,6 +652,12 @@
     if (key && item && typeof item === 'object') return item[key] ?? idx;
     return idx;
   };
+  // 子行标识：编码完整层级路径（设了 rowKey 时排序、增删后状态跟着记录走）。
+  // 用 JSON 数组而不是连字符拼接，避免「父 a + 子 b」与顶层 id「a-b」撞 key
+  const childKeyOf = (parentKey: any, item: any, idx: number) => {
+    const parent = typeof parentKey === 'string' && parentKey.startsWith('\u0000') ? JSON.parse(parentKey.slice(1)) : [parentKey];
+    return `\u0000${JSON.stringify([...parent, rowKeyOf(item, idx)])}`;
+  };
 
   /**
    * 虚拟滚动：上下用占位行撑出滚动高度，只渲染可视区附近的行。
@@ -705,11 +711,12 @@
       const kids = childrenOf(item);
       kids.forEach((child, cidx) => {
         const last = cidx === kids.length - 1;
-        out.push({ item: child, idx: cidx, level: 2, parent: item, key: `${key}-${cidx}`, last, parentLast: false });
+        const childKey = childKeyOf(key, child, cidx);
+        out.push({ item: child, idx: cidx, level: 2, parent: item, key: childKey, last, parentLast: false });
         if (props.depth < 3 || child?.__folding) return;
         const grand = childrenOf(child);
         grand.forEach((g, gidx) => {
-          out.push({ item: g, idx: gidx, level: 3, parent: child, key: `${key}-${cidx}-${gidx}`, last: gidx === grand.length - 1, parentLast: last });
+          out.push({ item: g, idx: gidx, level: 3, parent: child, key: childKeyOf(childKey, g, gidx), last: gidx === grand.length - 1, parentLast: last });
         });
       });
     });