@neatui/vue 5.5.1 → 5.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "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.5.2",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

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 });
         });
       });
     });