pro-design-vue 1.3.40 → 1.4.0

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Pro Design Vue v1.3.40 */
+/*! Pro Design Vue v1.4.0 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ant-design-vue'), require('vue'), require('ant-design-vue/es/locale/zh_CN.js')) :
@@ -32,7 +32,7 @@
   const DEFAULT_NAMESPACE = "pro";
   const DEFAULT_LOCALE = "zh-CN";
 
-  const version$1 = "1.3.40";
+  const version$1 = "1.4.0";
 
   const makeInstaller = (components = []) => {
     const install = (app) => {
@@ -8460,6 +8460,7 @@
       form: { type: Object, required: false },
       modal: { type: Object, required: false },
       drawer: { type: Object, required: false },
+      page: { type: Object, required: false },
       app: { type: Object, required: false },
       iconPrefixCls: { type: String, required: false },
       getTargetContainer: { type: Function, required: false },
@@ -8490,6 +8491,7 @@
       useCssVariables(vue.computed(() => props.dark));
       useProConfigProvide({
         table: vue.computed(() => props.table),
+        page: vue.computed(() => props.page),
         form: vue.computed(() => props.form),
         modal: vue.computed(() => props.modal),
         drawer: vue.computed(() => props.drawer),
@@ -8531,6 +8533,7 @@
       form: { type: Object, required: false },
       modal: { type: Object, required: false },
       drawer: { type: Object, required: false },
+      page: { type: Object, required: false },
       app: { type: Object, required: false },
       iconPrefixCls: { type: String, required: false },
       getTargetContainer: { type: Function, required: false },
@@ -8556,7 +8559,7 @@
       wave: { type: Object, required: false }
     },
     setup(__props) {
-      const rest = vue.createPropsRestProxy(__props, ["intl", "proPrefixCls", "dark", "compact", "token", "locale", "theme", "table", "drawer", "modal", "form", "app", "prefixCls", "componentSize", "accessCodes"]);
+      const rest = vue.createPropsRestProxy(__props, ["intl", "proPrefixCls", "dark", "compact", "token", "locale", "theme", "table", "page", "drawer", "modal", "form", "app", "prefixCls", "componentSize", "accessCodes"]);
       if (__props.locale.locale === DEFAULT_LOCALE.toLocaleLowerCase()) {
         Promise.resolve().then(function () { return zhCn$1; }).then((value) => {
           dayjs.locale(value);
@@ -8627,6 +8630,7 @@
                     proPrefixCls: _ctx.proPrefixCls,
                     table: _ctx.table,
                     form: _ctx.form,
+                    page: _ctx.page,
                     locale: _ctx.locale,
                     drawer: _ctx.drawer,
                     modal: _ctx.modal,
@@ -8639,7 +8643,7 @@
                     ]),
                     _: 3
                     /* FORWARDED */
-                  }, 8, ["contentOffsetTop", "intl", "dark", "proPrefixCls", "table", "form", "locale", "drawer", "modal", "prefixCls", "componentSize", "accessCodes"])
+                  }, 8, ["contentOffsetTop", "intl", "dark", "proPrefixCls", "table", "form", "page", "locale", "drawer", "modal", "prefixCls", "componentSize", "accessCodes"])
                 ]),
                 _: 3
                 /* FORWARDED */
@@ -10295,7 +10299,7 @@
 
   const ProIcon = withInstall(_sfc_main$W);
 
-  function _isSlot$8(s) {
+  function _isSlot$9(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var Button = /* @__PURE__ */ vue.defineComponent({
@@ -10469,7 +10473,7 @@
           })();
           defaultDom = vue.createVNode(antDesignVue.Tooltip, vue.mergeProps(props.tooltipProps, {
             "title": props.tooltip
-          }), _isSlot$8(defaultDom) ? defaultDom : {
+          }), _isSlot$9(defaultDom) ? defaultDom : {
             default: () => [_defaultDom]
           });
         }
@@ -10483,7 +10487,7 @@
               var _a2;
               return (_a2 = props.onCancel) == null ? void 0 : _a2.call(props, props.data);
             }
-          }), _isSlot$8(defaultDom) ? defaultDom : {
+          }), _isSlot$9(defaultDom) ? defaultDom : {
             default: () => [defaultDom]
           });
         }
@@ -13721,7 +13725,7 @@
       }
     },
     setup(props, { slots }) {
-      const currentValue = vue.reactive({});
+      const currentValue = vue.shallowReactive({});
       vue.watch(
         () => props.value,
         () => {
@@ -14051,7 +14055,7 @@
     return vue.inject(FormContextKey, {});
   };
 
-  function _isSlot$7(s) {
+  function _isSlot$8(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FieldReadonly = /* @__PURE__ */ vue.defineComponent({
@@ -14130,7 +14134,7 @@
         if (props.copy && props.text) {
           return vue.createVNode(ProClipboard, {
             "text": props.text
-          }, _isSlot$7(dom) ? dom : {
+          }, _isSlot$8(dom) ? dom : {
             default: () => [dom]
           });
         }
@@ -14141,7 +14145,7 @@
               "placement": "topLeft",
               "title": title,
               "getPopupContainer": getPopupContainer
-            }, _isSlot$7(dom) ? dom : {
+            }, _isSlot$8(dom) ? dom : {
               default: () => [dom]
             });
           }
@@ -15261,7 +15265,7 @@
     }
   });
 
-  function _isSlot$6(s) {
+  function _isSlot$7(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FieldRadioGroup = /* @__PURE__ */ vue.defineComponent({
@@ -15325,7 +15329,7 @@
             "value": props.value
           }, attrs, {
             "onChange": onChange
-          }), _isSlot$6(_slot = mergeOptions.value.map((option) => {
+          }), _isSlot$7(_slot = mergeOptions.value.map((option) => {
             var _a2;
             return vue.createVNode(antDesignVue.Radio, {
               "value": option.value,
@@ -17575,7 +17579,7 @@
   const useInitialValues = (props) => {
     const hasInitial = vue.ref(true);
     const requestLoading = vue.ref(false);
-    const initialValues = vue.ref({ ...props.initialValues });
+    const initialValues = vue.shallowRef({ ...props.initialValues });
     const fetchData = useFetchData$1({ request: props.request });
     vue.onMounted(async () => {
       var _a;
@@ -17596,7 +17600,14 @@
   const useLinkage = () => {
     const hiddenKeys = vue.shallowRef([]);
     const disabledKeys = vue.shallowRef([]);
-    const excludeKeys = vue.computed(() => hiddenKeys.value.map((key) => key.split(":")[1]));
+    const hiddenExcludeSet = vue.computed(() => {
+      const set = /* @__PURE__ */ new Set();
+      for (const key of hiddenKeys.value) {
+        const target = key.split(":")[1];
+        if (target) set.add(target);
+      }
+      return set;
+    });
     const genNewKeys = (originKeys, fieldKey, keys) => {
       if (!Array.isArray(keys)) {
         keys = [keys];
@@ -17612,10 +17623,30 @@
       disabledKeys.value = genNewKeys(disabledKeys.value, fieldKey, keys);
     };
     const allHiddenKeys = vue.computed(() => {
-      return hiddenKeys.value.filter((key) => !excludeKeys.value.includes(key.split(":")[0])).map((key) => key.split(":")[1]);
+      const excludeSet = hiddenExcludeSet.value;
+      const result = [];
+      for (const key of hiddenKeys.value) {
+        const idx = key.indexOf(":");
+        const source = key.substring(0, idx);
+        const target = key.substring(idx + 1);
+        if (!excludeSet.has(source)) {
+          result.push(target);
+        }
+      }
+      return result;
     });
     const allDisabledKeys = vue.computed(() => {
-      return disabledKeys.value.filter((key) => !excludeKeys.value.includes(key.split(":")[0])).map((key) => key.split(":")[1]);
+      const excludeSet = hiddenExcludeSet.value;
+      const result = [];
+      for (const key of disabledKeys.value) {
+        const idx = key.indexOf(":");
+        const source = key.substring(0, idx);
+        const target = key.substring(idx + 1);
+        if (!excludeSet.has(source)) {
+          result.push(target);
+        }
+      }
+      return result;
     });
     return {
       allHiddenKeys,
@@ -17766,6 +17797,7 @@
     props,
     formRef,
     formData,
+    formDataVersion,
     initialValues,
     hasInitial,
     transformerMap,
@@ -17821,6 +17853,7 @@
       const namePath = covertFormName(name);
       if (!namePath) throw new Error("name is require");
       set(formData.value, namePath, value);
+      formDataVersion.value++;
     };
     const setFieldsValue = (values, isMerge = true) => {
       if (!values) throw new Error("values is require");
@@ -17829,6 +17862,7 @@
       } else {
         formData.value = cloneDeep(values);
       }
+      formDataVersion.value++;
     };
     const resetInitialValues = (values) => {
       if (!values) throw new Error("values is require");
@@ -17841,6 +17875,7 @@
       hasInitial.value = true;
       (_a = formRef.value) == null ? void 0 : _a.clearValidate();
       formData.value = cloneDeep(convertKeyInitialValue(initialValues.value, transformerMap.value));
+      formDataVersion.value++;
       Promise.resolve().then(() => {
         hasInitial.value = false;
         onReset == null ? void 0 : onReset(transformKeySubmitValue(formData.value, transformerMap.value, props.omitNil));
@@ -17852,6 +17887,7 @@
       if (!namePath) throw new Error("name is require");
       (_a = formRef.value) == null ? void 0 : _a.clearValidate(name);
       set(formData.value, name, cloneDeep(get(initialValues.value, name)));
+      formDataVersion.value++;
     };
     const clearValidate = (name) => {
       var _a;
@@ -18046,7 +18082,7 @@
     }
   });
 
-  function _isSlot$5(s) {
+  function _isSlot$6(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FormGroup = /* @__PURE__ */ vue.defineComponent({
@@ -18098,12 +18134,18 @@
         formData
       } = useInjectForm();
       const items = vue.computed(() => {
-        var _a, _b;
-        return (_b = formatItems == null ? void 0 : formatItems(runFunction((_a = props.items) != null ? _a : [], formData.value))) != null ? _b : [];
+        var _a, _b, _c;
+        const raw = (_a = props.items) != null ? _a : [];
+        const fields = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
+        return (_c = formatItems == null ? void 0 : formatItems(fields)) != null ? _c : [];
       });
       const formItemProps = vue.computed(() => {
         var _a;
-        return (_a = runFunction(props.formItemProps, formData.value)) != null ? _a : {};
+        const raw = props.formItemProps;
+        if (typeof raw === "function") {
+          return (_a = runFunction(raw, formData.value)) != null ? _a : {};
+        }
+        return raw != null ? raw : {};
       });
       const isExistTitle = vue.computed(() => {
         if (!props.title) {
@@ -18146,7 +18188,7 @@
           }, null)]), vue.createVNode("div", null, [vue.createVNode(FormRowWrapper, {
             "rowProps": props.rowProps,
             "grid": props.grid
-          }, _isSlot$5(defaultDom) ? defaultDom : {
+          }, _isSlot$6(defaultDom) ? defaultDom : {
             default: () => [defaultDom]
           })])])]
         });
@@ -18160,31 +18202,31 @@
     convertValue
   }) {
     const fieldValue = vue.shallowRef();
-    const { formData, initialValues } = useInjectForm();
-    const modelValue = vue.computed(() => get(formData.value, namePath.value));
+    const { formData, formDataVersion, initialValues } = useInjectForm();
+    const modelValue = vue.computed(() => {
+      void formDataVersion.value;
+      return get(formData.value, namePath.value);
+    });
     const onValueChange = (value) => {
       set(formData.value, namePath.value, value);
+      formDataVersion.value++;
     };
     vue.watch(
       modelValue,
       (newValue) => {
-        fieldValue.value = cloneDeep(newValue);
+        fieldValue.value = newValue;
       },
       {
-        immediate: true,
-        deep: true
+        immediate: true
       }
     );
     const initFieldInitialValue = () => {
       var _a;
-      if (
-        // !mountedRef.value &&
-        typeof modelValue.value === "undefined" && typeof initialValue !== "undefined"
-      ) {
+      if (typeof modelValue.value === "undefined" && typeof initialValue !== "undefined") {
         const value = convertValue ? convertValue(initialValue, namePath.value) : initialValue;
         set((_a = initialValues == null ? void 0 : initialValues.value) != null ? _a : {}, namePath.value, cloneDeep(initialValue));
         set(formData.value, namePath.value, cloneDeep(value));
-        fieldValue.value = value;
+        fieldValue.value = get(formData.value, namePath.value);
       }
     };
     initFieldInitialValue();
@@ -18261,14 +18303,19 @@
       });
       const formItemProps = vue.computed(() => {
         var _a;
-        return (_a = runFunction(props.formItemProps, formData.value)) != null ? _a : {};
+        const raw = props.formItemProps;
+        if (typeof raw === "function") {
+          return (_a = runFunction(raw, formData.value)) != null ? _a : {};
+        }
+        return raw != null ? raw : {};
       });
       const restItemProps = vue.computed(() => omitUndefined({
         ...pickKeys(formItemProps.value, ALL_ANTD_PROP_KEYS$2)
       }));
       const items = vue.computed(() => {
         var _a, _b, _c;
-        let children = (_b = runFunction((_a = props.items) != null ? _a : [], formData.value)) != null ? _b : [];
+        const raw = (_a = props.items) != null ? _a : [];
+        let children = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
         if (Array.isArray(props.initialValue) && props.initialValue.length) {
           children = children.filter((item) => {
             var _a2;
@@ -18454,24 +18501,27 @@
         return newDependencies;
       };
       const genListItems = (fields) => {
-        return cloneDeep(fields).filter((item) => {
+        return fields.filter((item) => {
           var _a;
           return !NOT_ALLOW_FIELD_TYPES.includes((_a = item.fieldType) != null ? _a : "");
         }).map((field) => {
           var _a, _b, _c, _d, _e, _f;
-          if (field.fieldType === ProFieldType.GROUP) {
-            field.children = genListItems((_b = runFunction((_a = field.children) != null ? _a : [], formData.value)) != null ? _b : []);
-            return field;
-          }
-          const originName = (_c = field.originName) != null ? _c : field.name;
-          const originKey = (_d = field.originKey) != null ? _d : field.key;
-          const namePath = covertFormName(field.name);
-          const title = index.value === 0 || props.alwaysShowItemLabel ? field.title : void 0;
+          const cloned = {
+            ...field
+          };
+          if (cloned.fieldType === ProFieldType.GROUP) {
+            cloned.children = genListItems((_b = runFunction((_a = cloned.children) != null ? _a : [], formData.value)) != null ? _b : []);
+            return cloned;
+          }
+          const originName = (_c = cloned.originName) != null ? _c : cloned.name;
+          const originKey = (_d = cloned.originKey) != null ? _d : cloned.key;
+          const namePath = covertFormName(cloned.name);
+          const title = index.value === 0 || props.alwaysShowItemLabel ? cloned.title : void 0;
           const item = {
-            ...field,
+            ...cloned,
             title,
             originKey,
-            key: `${listKey.value}_${(_e = field.key) != null ? _e : namePath == null ? void 0 : namePath.join("_")}`,
+            key: `${listKey.value}_${(_e = cloned.key) != null ? _e : namePath == null ? void 0 : namePath.join("_")}`,
             originName,
             name: [...(_f = listName == null ? void 0 : listName.value) != null ? _f : [], namePath].filter((item2) => item2 !== void 0).flat(1)
           };
@@ -18483,7 +18533,8 @@
       };
       const items = vue.computed(() => {
         var _a, _b, _c;
-        const fields = (_b = runFunction((_a = props.items) != null ? _a : [], formData.value)) != null ? _b : [];
+        const raw = (_a = props.items) != null ? _a : [];
+        const fields = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
         return (_c = formatItems == null ? void 0 : formatItems(genListItems(fields))) != null ? _c : [];
       });
       const showRowTitle = vue.computed(() => props.alwaysShowRowTitle && props.rowTitle);
@@ -18621,7 +18672,7 @@
     }
   });
 
-  function _isSlot$4(s) {
+  function _isSlot$5(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FormListContainer = /* @__PURE__ */ vue.defineComponent({
@@ -18726,14 +18777,16 @@
       slots
     }) {
       const loading = vue.ref(false);
-      const listValues = vue.ref([]);
       const {
         prefixCls
       } = useInjectForm();
+      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const keyRef = vue.shallowRef({
         keys: [],
         id: 0
       });
+      let lastActionVersion = 0;
+      let watchedActionVersion = 0;
       const {
         fieldValue,
         onValueChange
@@ -18743,31 +18796,35 @@
         convertValue: props.convertValue,
         transform: props.transform
       });
-      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const count = vue.computed(() => {
         var _a, _b;
         return (_b = (_a = fieldValue.value) == null ? void 0 : _a.length) != null ? _b : 0;
       });
       const action = {
         add: async (defaultValue, index) => {
-          var _a, _b, _c;
+          var _a, _b;
           if ((_a = props.actionGuard) == null ? void 0 : _a.beforeAddRow) {
             const success = await ((_b = props.actionGuard) == null ? void 0 : _b.beforeAddRow(defaultValue, index, count.value));
             if (!success) {
               return false;
             }
           }
-          const newValue = cloneDeep((_c = fieldValue.value) != null ? _c : []);
+          const newValue = fieldValue.value ? [...fieldValue.value] : [];
           if (index !== void 0 && index >= 0 && index <= newValue.length) {
-            keyRef.value.keys = [...keyRef.value.keys.slice(0, index), keyRef.value.id, ...keyRef.value.keys.slice(index)];
-            onValueChange(cloneDeep([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]));
-            formItemContext.onFieldChange();
+            keyRef.value = {
+              keys: [...keyRef.value.keys.slice(0, index), keyRef.value.id, ...keyRef.value.keys.slice(index)],
+              id: keyRef.value.id + 1
+            };
+            onValueChange([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]);
           } else {
-            keyRef.value.keys = [...keyRef.value.keys, keyRef.value.id];
-            onValueChange(cloneDeep([...newValue, defaultValue]));
-            formItemContext.onFieldChange();
+            keyRef.value = {
+              keys: [...keyRef.value.keys, keyRef.value.id],
+              id: keyRef.value.id + 1
+            };
+            onValueChange([...newValue, defaultValue]);
           }
-          keyRef.value.id += 1;
+          lastActionVersion++;
+          formItemContext.onFieldChange();
           Promise.resolve().then(() => {
             var _a2;
             (_a2 = props.onAfterAdd) == null ? void 0 : _a2.call(props, defaultValue, index, count.value);
@@ -18775,21 +18832,24 @@
           return true;
         },
         remove: async (index) => {
-          var _a, _b, _c;
+          var _a, _b;
           if ((_a = props.actionGuard) == null ? void 0 : _a.beforeRemoveRow) {
             const success = await ((_b = props.actionGuard) == null ? void 0 : _b.beforeRemoveRow(index, count.value));
             if (!success) {
               return false;
             }
           }
-          const newValue = cloneDeep((_c = fieldValue.value) != null ? _c : []);
+          const newValue = fieldValue.value ? [...fieldValue.value] : [];
           const indexSet = new Set(Array.isArray(index) ? index : [index]);
           if (indexSet.size <= 0) {
             return false;
           }
-          keyRef.value.keys = keyRef.value.keys.filter((_, keysIndex) => !indexSet.has(keysIndex));
-          const value = newValue.filter((_, valueIndex) => !indexSet.has(valueIndex));
-          onValueChange(value);
+          keyRef.value = {
+            keys: keyRef.value.keys.filter((_, keysIndex) => !indexSet.has(keysIndex)),
+            id: keyRef.value.id
+          };
+          onValueChange(newValue.filter((_, valueIndex) => !indexSet.has(valueIndex)));
+          lastActionVersion++;
           formItemContext.onFieldChange();
           Promise.resolve().then(() => {
             var _a2;
@@ -18814,10 +18874,32 @@
       const onCopy = async (index) => {
         await action.add(cloneDeep(fieldValue.value[index]), count.value + 1);
       };
-      vue.watch(fieldValue, () => {
-        var _a;
-        if (!isEqual(listValues.value, fieldValue.value)) {
-          listValues.value = cloneDeep((_a = fieldValue.value) != null ? _a : []);
+      vue.watch(fieldValue, (newVal, oldVal) => {
+        var _a, _b;
+        if (lastActionVersion !== watchedActionVersion) {
+          watchedActionVersion = lastActionVersion;
+          return;
+        }
+        const len = (_a = newVal == null ? void 0 : newVal.length) != null ? _a : 0;
+        const keysLen = keyRef.value.keys.length;
+        if (keysLen !== len) {
+          const newKeys = [];
+          for (let i = 0; i < len; i++) {
+            newKeys.push((_b = keyRef.value.keys[i]) != null ? _b : keyRef.value.id++);
+          }
+          keyRef.value = {
+            keys: newKeys,
+            id: keyRef.value.id
+          };
+        } else if (newVal !== oldVal) {
+          const newKeys = [];
+          for (let i = 0; i < len; i++) {
+            newKeys.push(keyRef.value.id++);
+          }
+          keyRef.value = {
+            keys: newKeys,
+            id: keyRef.value.id
+          };
         }
       }, {
         immediate: true
@@ -18842,7 +18924,7 @@
         }, restProps, {
           "loading": loading.value,
           "onClick": onAdd
-        }), _isSlot$4(creatorButtonText) ? creatorButtonText : {
+        }), _isSlot$5(creatorButtonText) ? creatorButtonText : {
           default: () => [creatorButtonText]
         });
         if (slots.creator) {
@@ -18858,17 +18940,15 @@
         return defaultDom;
       });
       return () => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (props.readonly && !((_a = listValues.value) == null ? void 0 : _a.length)) {
-          listValues.value = [{}];
-        }
+        var _a, _b, _c, _d, _e;
+        const listData = props.readonly && !((_a = fieldValue.value) == null ? void 0 : _a.length) ? [{}] : (_b = fieldValue.value) != null ? _b : [];
         return vue.createVNode("div", {
           "style": "width: max-content; max-width: 100%; min-width: 100%; ",
           "class": {
             [`${prefixCls}-list-container`]: true,
-            [`${prefixCls}-list-empty`]: ((_c = (_b = fieldValue.value) != null ? _b : []) == null ? void 0 : _c.length) == 0
+            [`${prefixCls}-list-empty`]: listData.length === 0
           }
-        }, [props.creatorButtonProps !== false && ((_d = props.creatorButtonProps) == null ? void 0 : _d.position) === "top" && creatorButton.value, ((_e = listValues.value) != null ? _e : []).map((record, index) => {
+        }, [props.creatorButtonProps !== false && ((_c = props.creatorButtonProps) == null ? void 0 : _c.position) === "top" && creatorButton.value, listData.map((record, index) => {
           let key = keyRef.value.keys[index];
           if (key === void 0) {
             keyRef.value.keys[index] = keyRef.value.id;
@@ -18901,7 +18981,7 @@
             action: slots.action,
             item: slots.item
           });
-        }), props.creatorButtonProps !== false && (((_f = props.creatorButtonProps) == null ? void 0 : _f.position) === "bottom" || ((_g = props.creatorButtonProps) == null ? void 0 : _g.position) === void 0) && creatorButton.value]);
+        }), props.creatorButtonProps !== false && (((_d = props.creatorButtonProps) == null ? void 0 : _d.position) === "bottom" || ((_e = props.creatorButtonProps) == null ? void 0 : _e.position) === void 0) && creatorButton.value]);
       };
     }
   });
@@ -19058,8 +19138,10 @@
         });
       });
       const items = vue.computed(() => {
-        var _a, _b;
-        return (_b = formatItems == null ? void 0 : formatItems(runFunction((_a = props.items) != null ? _a : [], formData.value))) != null ? _b : [];
+        var _a, _b, _c;
+        const raw = (_a = props.items) != null ? _a : [];
+        const fields = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
+        return (_c = formatItems == null ? void 0 : formatItems(fields)) != null ? _c : [];
       });
       const slotsGetter = vue.computed(() => {
         const temp = {};
@@ -19787,6 +19869,7 @@
         formKey,
         prefixCls,
         formData,
+        formDataVersion,
         readonly,
         readonlyProps,
         disabledKeys,
@@ -19805,6 +19888,7 @@
         rowData
       } = useInjectFormList();
       const formSlotsContext = useInjectSlots$1();
+      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const {
         fieldValue,
         onValueChange
@@ -19825,7 +19909,11 @@
       });
       const mergeReadonly = vue.computed(() => {
         var _a;
-        return runFunction((_a = props.item.readonly) != null ? _a : readonly == null ? void 0 : readonly.value, formData.value, rowData == null ? void 0 : rowData.value);
+        const readonlyProp = (_a = props.item.readonly) != null ? _a : readonly == null ? void 0 : readonly.value;
+        if (typeof readonlyProp === "function") {
+          return runFunction(readonlyProp, formData.value, rowData == null ? void 0 : rowData.value);
+        }
+        return readonlyProp;
       });
       const mergeReadonlyProps = vue.computed(() => merge({}, readonlyProps == null ? void 0 : readonlyProps.value, props.item.readonlyProps));
       const linkageDisabledKeys = vue.computed(() => disabledKeys.value.map((key) => key.split(":")[1]));
@@ -19836,17 +19924,22 @@
       });
       const formItemProps = vue.computed(() => {
         var _a;
-        return (_a = runFunction(props.item.formItemProps, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _a : {};
+        const raw = props.item.formItemProps;
+        if (typeof raw === "function") {
+          return (_a = runFunction(raw, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _a : {};
+        }
+        return raw != null ? raw : {};
       });
       const restItemProps = vue.computed(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rulesProp = (_a = props.item.rules) != null ? _a : formItemProps.value.rules;
         return omitUndefined({
           ...pickKeys(formItemProps.value, ALL_ANTD_PROP_KEYS),
-          labelCol: (_b = (_a = formItemProps.value) == null ? void 0 : _a.labelCol) != null ? _b : labelCol == null ? void 0 : labelCol.value,
-          wrapperCol: (_d = (_c = formItemProps.value) == null ? void 0 : _c.wrapperCol) != null ? _d : wrapperCol == null ? void 0 : wrapperCol.value,
+          labelCol: (_c = (_b = formItemProps.value) == null ? void 0 : _b.labelCol) != null ? _c : labelCol == null ? void 0 : labelCol.value,
+          wrapperCol: (_e = (_d = formItemProps.value) == null ? void 0 : _d.wrapperCol) != null ? _e : wrapperCol == null ? void 0 : wrapperCol.value,
           name: mergeReadonly.value ? void 0 : props.item.name,
-          htmlFor: mergeReadonly.value ? void 0 : (_g = (_e = formItemProps.value) == null ? void 0 : _e.htmlFor) != null ? _g : `form-${(_f = formKey.value) != null ? _f : ""}-${props.item.key}`,
-          rules: mergeReadonly.value ? void 0 : runFunction((_h = props.item.rules) != null ? _h : formItemProps.value.rules, formData.value, action, rowData == null ? void 0 : rowData.value)
+          htmlFor: mergeReadonly.value ? void 0 : (_h = (_f = formItemProps.value) == null ? void 0 : _f.htmlFor) != null ? _h : `form-${(_g = formKey.value) != null ? _g : ""}-${props.item.key}`,
+          rules: mergeReadonly.value ? void 0 : runFunction(rulesProp, formData.value, action, rowData == null ? void 0 : rowData.value)
         });
       });
       const clearOnChange = (newValue) => {
@@ -19857,27 +19950,33 @@
         if (clear) {
           const clearNamePaths = (_b = runFunction(clear, newValue, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _b : [];
           if (clearNamePaths.length > 0) {
+            let changed = false;
             clearNamePaths.forEach((namePath) => {
               var _a2;
               const path = isList ? [...(_a2 = listName == null ? void 0 : listName.value) != null ? _a2 : [], ...covertFormName(namePath)].filter((item) => item !== void 0).flat(1) : covertFormName(namePath);
               const value = get(formData.value, path);
               if (typeof value !== "undefined") {
                 set(formData.value, path, void 0);
+                changed = true;
               }
             });
+            if (changed) {
+              formDataVersion.value++;
+            }
           }
         }
       };
       const fieldProps = vue.computed(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-        const baseProps = runFunction((_a = props.item.fieldProps) != null ? _a : {}, formData.value, action, rowData == null ? void 0 : rowData.value);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        const raw = props.item.fieldProps;
+        const baseProps = runFunction(raw != null ? raw : {}, formData.value, action, rowData == null ? void 0 : rowData.value);
         const mergeProps = {
           ...baseProps,
-          id: (_c = baseProps == null ? void 0 : baseProps.id) != null ? _c : `form-${(_b = formKey.value) != null ? _b : ""}-${props.item.key}`,
-          disabled: ((_e = runFunction((_d = props.item.disabled) != null ? _d : baseProps == null ? void 0 : baseProps.disabled, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _e : allDisabledKeys.value.includes(props.item.key)) ? true : void 0,
-          placeholder: (_f = props.item.placeholder) != null ? _f : baseProps == null ? void 0 : baseProps.placeholder,
-          options: (_h = (_g = props.item.options) != null ? _g : baseProps == null ? void 0 : baseProps.options) != null ? _h : baseProps == null ? void 0 : baseProps.treeData,
-          allowClear: (_j = (_i = props.item.allowClear) != null ? _i : baseProps == null ? void 0 : baseProps.allowClear) != null ? _j : true
+          id: (_b = baseProps == null ? void 0 : baseProps.id) != null ? _b : `form-${(_a = formKey.value) != null ? _a : ""}-${props.item.key}`,
+          disabled: ((_d = runFunction((_c = props.item.disabled) != null ? _c : baseProps == null ? void 0 : baseProps.disabled, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _d : allDisabledKeys.value.includes(props.item.key)) ? true : void 0,
+          placeholder: (_e = props.item.placeholder) != null ? _e : baseProps == null ? void 0 : baseProps.placeholder,
+          options: (_g = (_f = props.item.options) != null ? _f : baseProps == null ? void 0 : baseProps.options) != null ? _g : baseProps == null ? void 0 : baseProps.treeData,
+          allowClear: (_i = (_h = props.item.allowClear) != null ? _h : baseProps == null ? void 0 : baseProps.allowClear) != null ? _i : true
         };
         return omitUndefined({
           valueEnum: props.item.valueEnum,
@@ -19890,6 +19989,7 @@
             var _a2, _b2;
             clearOnChange(value);
             onValueChange(value);
+            formItemContext.onFieldChange();
             (_b2 = (_a2 = props.item).onChange) == null ? void 0 : _b2.call(_a2, value, ...args, action);
           },
           ...fieldPropsMap[fieldType.value] ? pickKeys(mergeProps, fieldPropsMap[fieldType.value]) : mergeProps
@@ -19897,9 +19997,8 @@
       });
       const fieldStyle = vue.computed(() => {
         var _a;
-        const baseProps = runFunction((_a = props.item.fieldProps) != null ? _a : {}, formData.value, rowData == null ? void 0 : rowData.value);
         const newStyle = {
-          ...baseProps == null ? void 0 : baseProps.style
+          ...(_a = fieldProps.value) == null ? void 0 : _a.style
         };
         if (props.item.width && !fieldWidthSizeMap[props.item.width]) {
           newStyle.width = isNumber$2(props.item.width) ? props.item.width + "px" : props.item.width;
@@ -19995,8 +20094,10 @@
       vue.watch(() => {
         var _a;
         return (_a = restItemProps.value) == null ? void 0 : _a.rules;
-      }, () => {
-        action.clearValidate(props.item.name);
+      }, (newRules, oldRules) => {
+        if (!isEqual(newRules, oldRules)) {
+          action.clearValidate(props.item.name);
+        }
       });
       return () => {
         var _a, _b;
@@ -20063,6 +20164,9 @@
     }
   });
 
+  function _isSlot$4(s) {
+    return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+  }
   const LIST_PROP_KEYS = ["min", "max", "rowTitle", "rowTitleStyle", "alwaysShowRowTitle", "isValidateList", "emptyListMessage", "creatorRecord", "creatorButtonProps", "alwaysShowItemLabel", "actionGuard", "copyIconProps", "deleteIconProps", "onAfterAdd", "onAfterRemove"];
   const LIST_SLOT_NAMES = ["action", "creator", "item"];
   var FormItems = /* @__PURE__ */ vue.defineComponent({
@@ -20101,86 +20205,86 @@
         var _a;
         return (_a = props.grid) != null ? _a : grid == null ? void 0 : grid.value;
       });
-      const getItemsDom = vue.computed(() => {
-        return props.list.filter((item) => !allHiddenKeys.value.includes(item.key)).map((item) => {
-          var _a;
-          if (item.fieldType === ProFieldType.GROUP) {
-            return vue.createVNode(FormGroup, {
-              "key": item.key,
-              "items": item.children,
-              "title": item.title,
-              "tooltip": item.tooltip,
-              "colProps": item.colProps,
-              "rowProps": item.rowProps,
-              "spaceProps": item.spaceProps,
-              "grid": item.grid,
-              "item": item,
-              "formItemProps": item.formItemProps
-            }, null);
-          }
-          if (item.fieldType === ProFieldType.FORM_SET) {
-            return vue.createVNode(FormSet, {
-              "key": item.key,
-              "name": item.name,
-              "items": item.children,
-              "title": item.title,
-              "tooltip": item.tooltip,
-              "colProps": item.colProps,
-              "rowProps": item.rowProps,
-              "spaceProps": item.spaceProps,
-              "formItemProps": item.formItemProps,
-              "initialValue": item.initialValue,
-              "convertValue": item.convertValue,
-              "transform": item.transform
-            }, null);
-          }
-          if (item.fieldType === ProFieldType.FORM_LIST) {
-            const fieldProps = omitUndefined(pickKeys((_a = item.fieldProps) != null ? _a : {}, LIST_PROP_KEYS));
-            const slotsGetter = {};
-            LIST_SLOT_NAMES.forEach((name) => {
-              var _a2;
-              const slot = getSlot((_a2 = item.fieldProps) == null ? void 0 : _a2[`${name}Render`], formSlotsContext);
-              if (slot) {
-                slotsGetter[name] = (args) => vue.createVNode(RenderVNode$1, {
-                  "vnode": slot,
-                  "props": args
-                }, null);
-              }
-            });
-            return vue.createVNode(FormList, vue.mergeProps({
-              "key": item.key,
-              "name": item.name,
-              "originName": item.originName,
-              "items": item.children,
-              "title": item.title,
-              "tooltip": item.tooltip,
-              "rules": item.rules,
-              "colProps": item.colProps,
-              "rowProps": item.rowProps,
-              "formItemProps": item.formItemProps,
-              "initialValue": item.initialValue,
-              "convertValue": item.convertValue,
-              "transform": item.transform
-            }, fieldProps), {
-              ...slotsGetter
-            });
-          }
-          return vue.createVNode(FormItem, {
+      const visibleList = vue.computed(() => props.list.filter((item) => !allHiddenKeys.value.includes(item.key)));
+      const renderItem = (item) => {
+        var _a;
+        if (item.fieldType === ProFieldType.GROUP) {
+          return vue.createVNode(FormGroup, {
             "key": item.key,
+            "items": item.children,
+            "title": item.title,
+            "tooltip": item.tooltip,
+            "colProps": item.colProps,
+            "rowProps": item.rowProps,
+            "spaceProps": item.spaceProps,
+            "grid": item.grid,
             "item": item,
-            "grid": mergeGrid.value
+            "formItemProps": item.formItemProps
           }, null);
-        });
-      });
+        }
+        if (item.fieldType === ProFieldType.FORM_SET) {
+          return vue.createVNode(FormSet, {
+            "key": item.key,
+            "name": item.name,
+            "items": item.children,
+            "title": item.title,
+            "tooltip": item.tooltip,
+            "colProps": item.colProps,
+            "rowProps": item.rowProps,
+            "spaceProps": item.spaceProps,
+            "formItemProps": item.formItemProps,
+            "initialValue": item.initialValue,
+            "convertValue": item.convertValue,
+            "transform": item.transform
+          }, null);
+        }
+        if (item.fieldType === ProFieldType.FORM_LIST) {
+          const fieldProps = omitUndefined(pickKeys((_a = item.fieldProps) != null ? _a : {}, LIST_PROP_KEYS));
+          const slotsGetter = {};
+          LIST_SLOT_NAMES.forEach((name) => {
+            var _a2;
+            const slot = getSlot((_a2 = item.fieldProps) == null ? void 0 : _a2[`${name}Render`], formSlotsContext);
+            if (slot) {
+              slotsGetter[name] = (args) => vue.createVNode(RenderVNode$1, {
+                "vnode": slot,
+                "props": args
+              }, null);
+            }
+          });
+          return vue.createVNode(FormList, vue.mergeProps({
+            "key": item.key,
+            "name": item.name,
+            "originName": item.originName,
+            "items": item.children,
+            "title": item.title,
+            "tooltip": item.tooltip,
+            "rules": item.rules,
+            "colProps": item.colProps,
+            "rowProps": item.rowProps,
+            "formItemProps": item.formItemProps,
+            "initialValue": item.initialValue,
+            "convertValue": item.convertValue,
+            "transform": item.transform
+          }, fieldProps), {
+            ...slotsGetter
+          });
+        }
+        return vue.createVNode(FormItem, {
+          "key": item.key,
+          "item": item,
+          "grid": mergeGrid.value
+        }, null);
+      };
       return () => {
+        const items = visibleList.value.map(renderItem);
         if (props.type === "space" && !(mergeGrid == null ? void 0 : mergeGrid.value)) {
           return vue.createVNode(antDesignVue.Space, vue.mergeProps(props.spaceProps, {
             "align": "start"
-          }), {
-            default: () => [getItemsDom.value]
+          }), _isSlot$4(items) ? items : {
+            default: () => [items]
           });
         }
-        return getItemsDom.value;
+        return items;
       };
     }
   });
@@ -20383,6 +20487,7 @@
       const formRef = vue.ref();
       const prefixCls = usePrefixCls("form");
       const formData = vue.ref({});
+      const formDataVersion = vue.ref(0);
       const formItems = vue.ref([]);
       const formKey = vue.computed(() => {
         var _a;
@@ -20405,7 +20510,7 @@
       const formProps = vue.computed(() => {
         var _a;
         return {
-          ...omitUndefined(omit(props, ["colProps", "submitter", "loading", "showLoading", "omitNil", "grid", "theme", "colon", "customUi", "gridSubmitter", "requestAbort", "isKeyPressSubmit", "formKey", "initialValues", "rowProps", "dateFormatter", "params", "readonly", "readonlyProps", "items", "request", "validateMessages", "requiredMark", "labelAlign", "labelCol", "wrapperCol", "submitOnLoading", "onLoadingChange", "onFinish", "onValuesChange"])),
+          ...omitUndefined(omit(props, ["colProps", "submitter", "loading", "showLoading", "omitNil", "grid", "theme", "colon", "customUi", "gridSubmitter", "requestAbort", "isKeyPressSubmit", "formKey", "initialValues", "rowProps", "dateFormatter", "params", "readonly", "readonlyProps", "items", "request", "validateMessages", "requiredMark", "labelAlign", "labelCol", "wrapperCol", "submitOnLoading", "onLoadingChange", "onFinish", "onFinishFailed", "onReset", "onValuesChange", "onInit"])),
           layout: (_a = props.layout) != null ? _a : "vertical"
         };
       });
@@ -20447,6 +20552,7 @@
       vue.watch(initialValues, (newValues, oldValues) => {
         if (!isEqual(newValues, oldValues)) {
           formData.value = cloneDeep(convertKeyInitialValue(newValues, transformerMap.value));
+          formDataVersion.value++;
           if (!props.request || props.requestAbort) {
             Promise.resolve().then(() => {
               hasInitial.value = false;
@@ -20454,8 +20560,7 @@
           }
         }
       }, {
-        immediate: true,
-        deep: true
+        immediate: true
       });
       const onValuesChange = debounce(() => {
         var _a;
@@ -20478,18 +20583,17 @@
           }
         }
       };
-      vue.watch(formData, () => {
+      vue.watch(formDataVersion, () => {
         if (!hasInitial.value) {
           onValuesChange();
         }
-      }, {
-        deep: true
       });
       const linkage = useLinkage();
       const action = useAction({
         props,
         formRef,
         formData,
+        formDataVersion,
         initialValues,
         hasInitial,
         transformerMap,
@@ -20554,6 +20658,7 @@
         prefixCls,
         initialValues,
         formData,
+        formDataVersion,
         hasInitial,
         theme: vue.computed(() => props.theme),
         customUi: vue.computed(() => props.customUi),
@@ -20646,7 +20751,8 @@
     emits: ["update:open"],
     setup(props, {
       slots,
-      emit
+      emit,
+      expose
     }) {
       const _open = vue.ref(false);
       const loading = vue.ref(false);
@@ -20698,7 +20804,7 @@
       });
       const submitterConfig = vue.computed(() => {
         var _a, _b, _c, _d;
-        if (props.submitter === false) {
+        if (props.submitter === false || props.readonly) {
           return false;
         }
         return merge({
@@ -20758,6 +20864,7 @@
           (_c = (_b = formRef.value) == null ? void 0 : _b.reset) == null ? void 0 : _c.call(_b);
         }
       };
+      expose(useFormExpose(formRef));
       const onFinishHandle = async (values) => {
         var _a;
         const response = (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
@@ -20796,7 +20903,7 @@
         }
       }), {
         default: () => [vue.createVNode(BaseForm, vue.mergeProps(formProps.value, {
-          "submitter": submitterConfig.value,
+          "submitter": props.readonly ? false : submitterConfig.value,
           "onFinish": async (values) => {
             const result = await onFinishHandle(values);
             return result;
@@ -20822,10 +20929,12 @@
           }
         }), formSlots.value)],
         ...drawerSlots.value,
-        footer: props.submitter !== false ? () => vue.createVNode("div", {
-          "style": "display: flex; justify-content: flex-end;",
-          "ref": footerRef
-        }, null) : void 0
+        ...props.submitter !== false && !props.readonly ? {
+          footer: () => vue.createVNode("div", {
+            "style": "display: flex; justify-content: flex-end;",
+            "ref": footerRef
+          }, null)
+        } : {}
       }), triggerDom.value]);
     }
   });
@@ -20843,7 +20952,8 @@
     emits: ["update:open"],
     setup(props, {
       slots,
-      emit
+      emit,
+      expose
     }) {
       const _open = vue.ref(false);
       const loading = vue.ref(false);
@@ -20887,7 +20997,7 @@
           ...omit((_a = props.modalProps) != null ? _a : {}, ["title", "width", "footer", "onCancel", "afterClose"]),
           width: props.width,
           title: props.title,
-          footer: props.submitter === false ? null : void 0
+          footer: props.readonly || props.submitter === false ? null : void 0
         });
       });
       const modalSlots = vue.computed(() => {
@@ -20897,7 +21007,7 @@
       });
       const submitterConfig = vue.computed(() => {
         var _a, _b, _c, _d;
-        if (props.submitter === false) {
+        if (props.submitter === false || props.readonly) {
           return false;
         }
         return merge({
@@ -20957,6 +21067,7 @@
           (_c = (_b = formRef.value) == null ? void 0 : _b.reset) == null ? void 0 : _c.call(_b);
         }
       };
+      expose(useFormExpose(formRef));
       const onFinishHandle = async (values) => {
         var _a;
         const response = (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
@@ -20995,7 +21106,7 @@
         }
       }), {
         default: () => [vue.createVNode(BaseForm, vue.mergeProps(formProps.value, {
-          "submitter": submitterConfig.value,
+          "submitter": props.readonly ? false : submitterConfig.value,
           "onFinish": async (values) => {
             const result = await onFinishHandle(values);
             return result;
@@ -21021,10 +21132,12 @@
           }
         }), formSlots.value)],
         ...modalSlots.value,
-        footer: props.submitter !== false ? () => vue.createVNode("div", {
-          "style": "display: flex; justify-content: flex-end;",
-          "ref": footerRef
-        }, null) : void 0
+        ...props.submitter !== false && !props.readonly ? {
+          footer: () => vue.createVNode("div", {
+            "style": "display: flex; justify-content: flex-end;",
+            "ref": footerRef
+          }, null)
+        } : {}
       }), triggerDom.value]);
     }
   });
@@ -21073,7 +21186,7 @@
   const flatMapItems = (items, ignoreRules) => {
     return items == null ? void 0 : items.flatMap((item) => {
       if (item.fieldType === ProFieldType.GROUP && !item.title) {
-        return item.props.children;
+        return item.children;
       }
       if (ignoreRules) {
         return {
@@ -21112,17 +21225,13 @@
       const {
         form
       } = useProConfigInject();
-      const totalSpan = vue.ref(0);
-      const totalSize = vue.ref(0);
-      const currentSpan = vue.ref(0);
       const intl = useIntl();
       const prefixCls = usePrefixCls("query-filter");
       const wrapEl = vue.useTemplateRef("wrapper");
       const formRef = vue.ref();
-      const processedList = vue.ref([]);
       const [width, setWidth] = useMergedState$1(defaultWidth);
       const formExpose = useFormExpose(formRef);
-      useResizeObserver(wrapEl, (entries) => {
+      useResizeObserver(wrapEl, useDebounceFn((entries) => {
         const entry = entries[0];
         const {
           width: newWidth,
@@ -21132,7 +21241,7 @@
           setWidth(newWidth);
         }
         emit("resize", newWidth, height);
-      });
+      }, 100));
       const spanSize = vue.computed(() => getSpanConfig(props.layout, width.value + 16, props.span));
       const showLength = vue.computed(() => {
         if (props.defaultFormItemsNumber !== void 0) {
@@ -21144,20 +21253,6 @@
         }
         return Math.max(1, 24 / spanSize.value.span - 1);
       });
-      const hiddenNum = vue.computed(() => props.showHiddenNum && processedList.value.filter((item) => item.hidden).length);
-      const needCollapse = vue.computed(() => {
-        if (totalSpan.value < 24 || totalSize.value <= showLength.value) {
-          return false;
-        }
-        return true;
-      });
-      const offset = vue.computed(() => {
-        const offsetSpan = currentSpan.value % 24 + spanSize.value.span;
-        if (offsetSpan > 24) {
-          return 24 - spanSize.value.span;
-        }
-        return 24 - offsetSpan;
-      });
       const formItemFixStyle = vue.computed(() => {
         var _a2, _b, _c;
         const labelWidth = (_c = (_b = props.labelWidth) != null ? _b : (_a2 = form == null ? void 0 : form.value) == null ? void 0 : _a2.labelWidth) != null ? _c : "80";
@@ -21184,6 +21279,80 @@
           emit("collapse", val);
         }
       });
+      const processedResult = vue.computed(() => {
+        var _a2;
+        let _totalSpan = 0;
+        let _totalSize = 0;
+        let _currentSpan = 0;
+        let list = [];
+        if ((_a2 = props.items) == null ? void 0 : _a2.length) {
+          let firstRowFull = false;
+          list = flatMapItems(props.items, props.ignoreRules).map((item, index) => {
+            var _a3;
+            const colSize = (_a3 = item.colSize) != null ? _a3 : 1;
+            const colSpan = Math.min(spanSize.value.span * (colSize || 1), 24);
+            _totalSpan += colSpan;
+            _totalSize += colSize;
+            if (index === 0) {
+              firstRowFull = colSpan === 24 && !item.hidden;
+            }
+            const hidden = item.hidden || collapsed.value && (firstRowFull || _totalSize > showLength.value) && !!index;
+            if (hidden) {
+              if (!props.preserve) {
+                return {
+                  ...item,
+                  colProps: {
+                    span: 0
+                  },
+                  hidden: true
+                };
+              }
+              return {
+                ...item,
+                colProps: {
+                  span: colSpan
+                },
+                hidden: true
+              };
+            }
+            if (24 - _currentSpan % 24 < colSpan) {
+              _totalSpan += 24 - _currentSpan % 24;
+              _currentSpan += 24 - _currentSpan % 24;
+            }
+            _currentSpan += colSpan;
+            return {
+              ...item,
+              hidden,
+              formItemProps: {
+                ...item.title ? formItemFixStyle.value : {},
+                ...item.formItemProps
+              },
+              colProps: {
+                span: colSpan
+              }
+            };
+          });
+        }
+        return {
+          list,
+          totalSpan: _totalSpan,
+          totalSize: _totalSize,
+          currentSpan: _currentSpan
+        };
+      });
+      const needCollapse = vue.computed(() => {
+        if (processedResult.value.totalSpan < 24 || processedResult.value.totalSize <= showLength.value) {
+          return false;
+        }
+        return true;
+      });
+      const offset = vue.computed(() => {
+        const offsetSpan = processedResult.value.currentSpan % 24 + spanSize.value.span;
+        if (offsetSpan > 24) {
+          return 24 - spanSize.value.span;
+        }
+        return 24 - offsetSpan;
+      });
       const formProps = vue.computed(() => {
         return {
           ...omitUndefined(omit(props, [
@@ -21234,66 +21403,7 @@
           }
         }, props.submitter);
       });
-      vue.watch([spanSize, collapsed, () => props.items], () => {
-        var _a2;
-        let firstRowFull = false;
-        currentSpan.value = 0;
-        totalSize.value = 0;
-        totalSpan.value = 0;
-        if ((_a2 = props.items) == null ? void 0 : _a2.length) {
-          processedList.value = flatMapItems(props.items, props.ignoreRules).map((item, index) => {
-            var _a3;
-            const colSize = (_a3 = item.colSize) != null ? _a3 : 1;
-            const colSpan = Math.min(spanSize.value.span * (colSize || 1), 24);
-            totalSpan.value += colSpan;
-            totalSize.value += colSize;
-            if (index === 0) {
-              firstRowFull = colSpan === 24 && !item.hidden;
-            }
-            const hidden = item.hidden || // 如果收起了
-            collapsed.value && (firstRowFull || // 如果 超过显示长度 且 总长度超过了 24
-            totalSize.value > showLength.value) && !!index;
-            if (hidden) {
-              if (!props.preserve) {
-                return {
-                  ...item,
-                  colProps: {
-                    span: 0
-                  },
-                  hidden: true
-                };
-              }
-              return {
-                ...item,
-                colProps: {
-                  span: colSpan
-                },
-                hidden: true
-              };
-            }
-            if (24 - currentSpan.value % 24 < colSpan) {
-              totalSpan.value += 24 - currentSpan.value % 24;
-              currentSpan.value += 24 - currentSpan.value % 24;
-            }
-            currentSpan.value += colSpan;
-            return {
-              ...item,
-              hidden,
-              formItemProps: {
-                ...item.title ? formItemFixStyle.value : {},
-                ...item.formItemProps
-              },
-              colProps: {
-                span: colSpan
-              }
-            };
-          });
-        } else {
-          processedList.value = [];
-        }
-      }, {
-        immediate: true
-      });
+      const hiddenNum = vue.computed(() => props.showHiddenNum && processedResult.value.list.filter((item) => item.hidden).length);
       expose({
         formRef,
         ...formExpose
@@ -21317,7 +21427,7 @@
           "isKeyPressSubmit": (_a2 = props.isKeyPressSubmit) != null ? _a2 : true,
           "showLoading": false,
           "submitter": submitterConfig.value,
-          "items": processedList.value,
+          "items": processedResult.value.list,
           "layout": spanSize.value.layout,
           "onReset": (values) => {
             var _a3, _b, _c, _d;
@@ -26256,43 +26366,68 @@
     }
     target.__resizeObserver__rect = { width: newWidth, height: newHeight };
   }
-  function resizeDisconnect(el) {
-    if (el.__resizeObserver__listeners) {
-      el.__resizeObserver__listeners.unobserve(el);
-      el.__resizeObserver__listeners.disconnect();
-      el.__resizeObserver__listeners = null;
+  const sharedObservers = {};
+  const observerRefCounts = {};
+  function getSharedObserver(arg) {
+    const key = arg || "__default__";
+    if (!sharedObservers[key]) {
+      sharedObservers[key] = new index((entries) => {
+        for (let i = 0; i < entries.length; i++) {
+          const entry = entries[i];
+          const target = entry.target;
+          resizeHandler(
+            target,
+            target.__resizeObserver__arg,
+            entry.contentRect,
+            target.__resizeObserver__rect || {}
+          );
+        }
+      });
+      observerRefCounts[key] = 0;
     }
+    return sharedObservers[key];
   }
-  function resizeCallbackFactory(arg) {
-    return function(entries) {
-      const target = entries[0].target;
-      resizeHandler(target, arg, target.getBoundingClientRect(), target.__resizeObserver__rect || {});
-    };
+  function sharedObserve(el, arg) {
+    const key = arg || "__default__";
+    el.__resizeObserver__arg = arg;
+    const observer = getSharedObserver(arg);
+    observer.observe(el);
+    observerRefCounts[key] = (observerRefCounts[key] || 0) + 1;
+  }
+  function sharedUnobserve(el, arg) {
+    const key = arg || "__default__";
+    const observer = sharedObservers[key];
+    if (observer) {
+      observer.unobserve(el);
+      observerRefCounts[key]--;
+      if (observerRefCounts[key] <= 0) {
+        observer.disconnect();
+        delete sharedObservers[key];
+        delete observerRefCounts[key];
+      }
+    }
+    el.__resizeObserver__arg = void 0;
   }
   const resize = {
     created(el, binding) {
       const { arg, value = true } = binding;
       if (value) {
-        const resizeObserver = new index(resizeCallbackFactory(arg));
-        resizeObserver.observe(el);
-        el.__resizeObserver__listeners = resizeObserver;
+        sharedObserve(el, arg);
       }
     },
     updated(el, binding) {
       const { arg, value = true } = binding;
-      if (value && !el.__resizeObserver__listeners) {
-        const resizeObserver = new index(resizeCallbackFactory(arg));
-        resizeObserver.observe(el);
-        el.__resizeObserver__listeners = resizeObserver;
-      } else if (!value) {
-        resizeDisconnect(el);
+      if (value && el.__resizeObserver__arg === void 0) {
+        sharedObserve(el, arg);
+      } else if (!value && el.__resizeObserver__arg !== void 0) {
+        sharedUnobserve(el, arg);
       }
     },
     beforeUnmount(el, binding) {
       const { arg, value = true } = binding;
       if (value) {
         resizeHandler(el, arg, { width: 0, height: 0 }, el.__resizeObserver__rect || {});
-        resizeDisconnect(el);
+        sharedUnobserve(el, arg);
       }
     }
   };
@@ -26929,189 +27064,201 @@
       }
       mergeColumns.value = newColumns;
     });
-    vue.watch(
-      [mergeColumns, baseHeight, bodyScrollWidth, measureWidthRef],
-      () => {
-        var _a, _b, _c, _d;
-        const originMergeColumns = mergeColumns.value;
-        let newMaxRowSpan = 1;
-        const newLeftColumns = [];
-        const newRightColumns = [];
-        const newCenterColumns = [];
-        const newAutoHeightColumns = [];
-        const newLeftHeaderColumns = [];
-        const newRightHeaderColumns = [];
-        const newCenterHeaderColumns = [];
-        keyColumnMap.value = /* @__PURE__ */ new Map();
-        if (!measureWidthRef.value) {
-          return;
-        }
-        const autoWidthColumns = [];
-        let finallyWidthTotal = 0;
-        const genColumns = (allCols, leftHeaderCols, centerHeaderCols, rightHeaderCols, rowSpan, pos, fix) => {
-          for (let i = 0, len = allCols.length; i < len; i++) {
-            const originColumn = allCols[i];
-            if (!originColumn) {
-              continue;
+    let columnsRafFrame;
+    let isFirstRun = true;
+    const recalcColumns = () => {
+      var _a, _b, _c, _d;
+      const originMergeColumns = mergeColumns.value;
+      let newMaxRowSpan = 1;
+      const newLeftColumns = [];
+      const newRightColumns = [];
+      const newCenterColumns = [];
+      const newAutoHeightColumns = [];
+      const newLeftHeaderColumns = [];
+      const newRightHeaderColumns = [];
+      const newCenterHeaderColumns = [];
+      keyColumnMap.value = /* @__PURE__ */ new Map();
+      if (!measureWidthRef.value) {
+        return;
+      }
+      const autoWidthColumns = [];
+      let finallyWidthTotal = 0;
+      const genColumns = (allCols, leftHeaderCols, centerHeaderCols, rightHeaderCols, rowSpan, pos, fix) => {
+        for (let i = 0, len = allCols.length; i < len; i++) {
+          const originColumn = allCols[i];
+          if (!originColumn) {
+            continue;
+          }
+          const {
+            width,
+            fixed = fix,
+            children,
+            ellipsis = false,
+            tooltip,
+            minWidth,
+            maxWidth
+          } = originColumn;
+          const columnWidth = columnWidthByString(measureWidthRef.value, bodyScrollWidth.value, width);
+          const columnMinWidth = columnWidthByString(
+            measureWidthRef.value,
+            bodyScrollWidth.value,
+            minWidth
+          );
+          const columnMaxWidth = maxWidth ? columnWidthByString(measureWidthRef.value, bodyScrollWidth.value, maxWidth) : 1 / 0;
+          const finallyWidth = Math.min(Math.max(columnWidth, columnMinWidth), columnMaxWidth);
+          const columnPos = getColumnPos(i, pos);
+          const columnKey = originColumn.columnKey || originColumn.key || columnPos;
+          const parseFiexed = fixed === true ? "left" : fixed;
+          const finallyColumn = Object.assign({}, originColumn, {
+            finallyWidth,
+            columnKey,
+            originColumn,
+            showTitle: !tooltip && (ellipsis === true || typeof ellipsis === "object" && (ellipsis == null ? void 0 : ellipsis.showTitle) !== false),
+            fixed: parseFiexed,
+            hidden: true === originColumn.hidden
+          });
+          keyColumnMap.value.set(columnKey, finallyColumn);
+          if (finallyColumn.hidden) {
+            break;
+          }
+          if (children && children.length) {
+            finallyColumn.children = [];
+            if (parseFiexed === "left") {
+              leftHeaderCols.push(finallyColumn);
+            } else if (parseFiexed === "right") {
+              rightHeaderCols.push(finallyColumn);
+            } else {
+              centerHeaderCols.push(finallyColumn);
             }
-            const {
-              width,
-              fixed = fix,
+            newMaxRowSpan = Math.max(newMaxRowSpan, rowSpan + 1);
+            genColumns(
               children,
-              ellipsis = false,
-              tooltip,
-              minWidth,
-              maxWidth
-            } = originColumn;
-            const columnWidth = columnWidthByString(
-              measureWidthRef.value,
-              bodyScrollWidth.value,
-              width
-            );
-            const columnMinWidth = columnWidthByString(
-              measureWidthRef.value,
-              bodyScrollWidth.value,
-              minWidth
+              finallyColumn.children,
+              finallyColumn.children,
+              finallyColumn.children,
+              rowSpan + 1,
+              columnPos,
+              parseFiexed
             );
-            const columnMaxWidth = maxWidth ? columnWidthByString(measureWidthRef.value, bodyScrollWidth.value, maxWidth) : 1 / 0;
-            const finallyWidth = Math.min(Math.max(columnWidth, columnMinWidth), columnMaxWidth);
-            const columnPos = getColumnPos(i, pos);
-            const columnKey = originColumn.columnKey || originColumn.key || columnPos;
-            const parseFiexed = fixed === true ? "left" : fixed;
-            const finallyColumn = Object.assign({}, originColumn, {
-              finallyWidth,
-              columnKey,
-              originColumn,
-              showTitle: !tooltip && (ellipsis === true || typeof ellipsis === "object" && (ellipsis == null ? void 0 : ellipsis.showTitle) !== false),
-              fixed: parseFiexed,
-              hidden: true === originColumn.hidden
-            });
-            keyColumnMap.value.set(columnKey, finallyColumn);
-            if (finallyColumn.hidden) {
-              break;
+          } else {
+            if (finallyColumn.width === void 0) {
+              autoWidthColumns.push(finallyColumn);
             }
-            if (children && children.length) {
-              finallyColumn.children = [];
-              if (parseFiexed === "left") {
-                leftHeaderCols.push(finallyColumn);
-              } else if (parseFiexed === "right") {
-                rightHeaderCols.push(finallyColumn);
-              } else {
-                centerHeaderCols.push(finallyColumn);
-              }
-              newMaxRowSpan = Math.max(newMaxRowSpan, rowSpan + 1);
-              genColumns(
-                children,
-                finallyColumn.children,
-                finallyColumn.children,
-                finallyColumn.children,
-                rowSpan + 1,
-                columnPos,
-                parseFiexed
-              );
+            finallyWidthTotal += finallyColumn.finallyWidth;
+            if (parseFiexed === "left") {
+              newLeftColumns.push(finallyColumn);
+              leftHeaderCols.push(finallyColumn);
+            } else if (parseFiexed === "right") {
+              newRightColumns.push(finallyColumn);
+              rightHeaderCols.push(finallyColumn);
             } else {
-              if (finallyColumn.width === void 0) {
-                autoWidthColumns.push(finallyColumn);
-              }
-              finallyWidthTotal += finallyColumn.finallyWidth;
-              if (parseFiexed === "left") {
-                newLeftColumns.push(finallyColumn);
-                leftHeaderCols.push(finallyColumn);
-              } else if (parseFiexed === "right") {
-                newRightColumns.push(finallyColumn);
-                rightHeaderCols.push(finallyColumn);
-              } else {
-                newCenterColumns.push(finallyColumn);
-                if (finallyColumn.autoHeight) {
-                  newAutoHeightColumns.push(finallyColumn);
-                }
-                centerHeaderCols.push(finallyColumn);
+              newCenterColumns.push(finallyColumn);
+              if (finallyColumn.autoHeight) {
+                newAutoHeightColumns.push(finallyColumn);
               }
+              centerHeaderCols.push(finallyColumn);
             }
           }
-        };
-        genColumns(
-          originMergeColumns,
-          newLeftHeaderColumns,
-          newCenterHeaderColumns,
-          newRightHeaderColumns,
-          1,
-          "__S_TABLE_COLUMN_Key__"
-        );
-        let differenceWidth = bodyScrollWidth.value - finallyWidthTotal;
-        const nonResizableColumns = autoWidthColumns.length ? autoWidthColumns : newLeftColumns.concat(newCenterColumns, newRightColumns).filter((column) => !column.resizable || !column.__Internal__Column__);
-        const widthDiffAverage = Math.floor(differenceWidth / nonResizableColumns.length);
-        if (differenceWidth > 0) {
-          for (let i = 0, len = nonResizableColumns.length; i < len; i++) {
-            const column = nonResizableColumns[i];
-            let finallyWidth = 0;
-            if (i == len - 1 && differenceWidth > widthDiffAverage) {
-              finallyWidth = column.finallyWidth + differenceWidth;
-            } else {
-              finallyWidth = Math.max(
-                Math.min(column.finallyWidth + widthDiffAverage, (_a = column.maxWidth) != null ? _a : 1 / 0),
-                (_b = column.minWidth) != null ? _b : 50
-              );
-            }
-            differenceWidth -= finallyWidth - column.finallyWidth;
-            column.finallyWidth = finallyWidth;
+        }
+      };
+      genColumns(
+        originMergeColumns,
+        newLeftHeaderColumns,
+        newCenterHeaderColumns,
+        newRightHeaderColumns,
+        1,
+        "__S_TABLE_COLUMN_Key__"
+      );
+      let differenceWidth = bodyScrollWidth.value - finallyWidthTotal;
+      const nonResizableColumns = autoWidthColumns.length ? autoWidthColumns : newLeftColumns.concat(newCenterColumns, newRightColumns).filter((column) => !column.resizable || !column.__Internal__Column__);
+      const widthDiffAverage = Math.floor(differenceWidth / nonResizableColumns.length);
+      if (differenceWidth > 0) {
+        for (let i = 0, len = nonResizableColumns.length; i < len; i++) {
+          const column = nonResizableColumns[i];
+          let finallyWidth = 0;
+          if (i == len - 1 && differenceWidth > widthDiffAverage) {
+            finallyWidth = column.finallyWidth + differenceWidth;
+          } else {
+            finallyWidth = Math.max(
+              Math.min(column.finallyWidth + widthDiffAverage, (_a = column.maxWidth) != null ? _a : 1 / 0),
+              (_b = column.minWidth) != null ? _b : 50
+            );
           }
+          differenceWidth -= finallyWidth - column.finallyWidth;
+          column.finallyWidth = finallyWidth;
+        }
+      } else {
+        for (let i = 0, len = autoWidthColumns.length; i < len; i++) {
+          const column = autoWidthColumns[i];
+          column.finallyWidth = Math.min((_c = column.minWidth) != null ? _c : 50, (_d = column.maxWidth) != null ? _d : 1 / 0);
+        }
+      }
+      if (props.headerHeight !== void 0) {
+        if (Array.isArray(props.headerHeight)) {
+          headerHeight.value = props.headerHeight.concat(new Array(newMaxRowSpan).fill(baseHeight.value)).slice(0, newMaxRowSpan);
         } else {
-          for (let i = 0, len = autoWidthColumns.length; i < len; i++) {
-            const column = autoWidthColumns[i];
-            column.finallyWidth = Math.min((_c = column.minWidth) != null ? _c : 50, (_d = column.maxWidth) != null ? _d : 1 / 0);
-          }
+          headerHeight.value = new Array(newMaxRowSpan).fill(props.headerHeight);
         }
-        if (props.headerHeight !== void 0) {
-          if (Array.isArray(props.headerHeight)) {
-            headerHeight.value = props.headerHeight.concat(new Array(newMaxRowSpan).fill(baseHeight.value)).slice(0, newMaxRowSpan);
+      } else {
+        headerHeight.value = new Array(newMaxRowSpan).fill(baseHeight.value);
+      }
+      const genHeaderColumns = (headerColumns, left, top, rowSpan) => {
+        let totalFinallyWidth = 0;
+        let totalLeft = left;
+        headerColumns.forEach((column) => {
+          column.left = totalLeft;
+          column.top = top;
+          if (column.children) {
+            column.rowSpan = 1;
+            column.height = headerHeight.value[newMaxRowSpan - rowSpan];
+            column.finallyWidth = genHeaderColumns(
+              column.children,
+              totalLeft,
+              column.height,
+              rowSpan - 1
+            );
           } else {
-            headerHeight.value = new Array(newMaxRowSpan).fill(props.headerHeight);
+            column.rowSpan = rowSpan;
+            column.height = headerHeight.value.slice(newMaxRowSpan - rowSpan).reduce((pre, cur) => pre + cur, 0);
           }
-        } else {
-          headerHeight.value = new Array(newMaxRowSpan).fill(baseHeight.value);
-        }
-        const genHeaderColumns = (headerColumns, left, top, rowSpan) => {
-          let totalFinallyWidth = 0;
-          let totalLeft = left;
-          headerColumns.forEach((column) => {
-            column.left = totalLeft;
-            column.top = top;
-            if (column.children) {
-              column.rowSpan = 1;
-              column.height = headerHeight.value[newMaxRowSpan - rowSpan];
-              column.finallyWidth = genHeaderColumns(
-                column.children,
-                totalLeft,
-                column.height,
-                rowSpan - 1
-              );
-            } else {
-              column.rowSpan = rowSpan;
-              column.height = headerHeight.value.slice(newMaxRowSpan - rowSpan).reduce((pre, cur) => pre + cur, 0);
-            }
-            totalLeft += column.finallyWidth;
-            totalFinallyWidth += column.finallyWidth;
-          });
-          return totalFinallyWidth;
-        };
-        genHeaderColumns(
-          newLeftHeaderColumns.concat(newCenterHeaderColumns, newRightHeaderColumns),
-          0,
-          0,
-          newMaxRowSpan
-        );
-        leftColumns.value = newLeftColumns;
-        rightColumns.value = newRightColumns;
-        centerColumns.value = newCenterColumns;
-        autoHeightColumns.value = newAutoHeightColumns;
-        leftHeaderColumns.value = newLeftHeaderColumns;
-        rightHeaderColumns.value = newRightHeaderColumns;
-        centerHeaderColumns.value = newCenterHeaderColumns;
-        maxRowSpan.value = newMaxRowSpan;
+          totalLeft += column.finallyWidth;
+          totalFinallyWidth += column.finallyWidth;
+        });
+        return totalFinallyWidth;
+      };
+      genHeaderColumns(
+        newLeftHeaderColumns.concat(newCenterHeaderColumns, newRightHeaderColumns),
+        0,
+        0,
+        newMaxRowSpan
+      );
+      leftColumns.value = newLeftColumns;
+      rightColumns.value = newRightColumns;
+      centerColumns.value = newCenterColumns;
+      autoHeightColumns.value = newAutoHeightColumns;
+      leftHeaderColumns.value = newLeftHeaderColumns;
+      rightHeaderColumns.value = newRightHeaderColumns;
+      centerHeaderColumns.value = newCenterHeaderColumns;
+      maxRowSpan.value = newMaxRowSpan;
+    };
+    vue.watch(
+      [mergeColumns, baseHeight, bodyScrollWidth, measureWidthRef],
+      () => {
+        if (isFirstRun) {
+          isFirstRun = false;
+          recalcColumns();
+          return;
+        }
+        raf.cancel(columnsRafFrame);
+        columnsRafFrame = raf(() => {
+          recalcColumns();
+        });
       },
       { immediate: true }
     );
+    vue.onBeforeUnmount(() => {
+      raf.cancel(columnsRafFrame);
+    });
     const allColumns = vue.shallowRef([]);
     let cacheColumnKeyPositonMap = {};
     const columnKeyIndexMap = vue.shallowRef({});
@@ -32344,8 +32491,8 @@
     rowIndex: { type: Number, required: true },
     flattenRowIndex: { type: Number, required: true },
     rowKey: { type: [Number, String] },
-    column: { type: Object, default: () => ({}) },
-    item: { type: Object, default: () => ({}) },
+    column: { type: Object },
+    item: { type: Object },
     wrapText: { type: Boolean, default: false },
     type: { type: String },
     height: Number,
@@ -32371,6 +32518,39 @@
     error: "#e8353e",
     warning: "#eb8903"
   };
+  let cachedPrefixCls = "";
+  let cls = {
+    cellInner: "",
+    cellContent: "",
+    cellWrapText: "",
+    cellTextEllipsis: "",
+    cell: "",
+    firstCell: "",
+    bodyCell: "",
+    cellMulti: "",
+    cellHidden: "",
+    columnSort: "",
+    withAppend: ""
+  };
+  function getCls(prefixCls) {
+    if (prefixCls !== cachedPrefixCls) {
+      cachedPrefixCls = prefixCls;
+      cls = {
+        cellInner: `${prefixCls}-cell-inner`,
+        cellContent: `${prefixCls}-cell-content`,
+        cellWrapText: `${prefixCls}-cell-wrap-text`,
+        cellTextEllipsis: `${prefixCls}-cell-text-ellipsis`,
+        cell: `${prefixCls}-cell`,
+        firstCell: `${prefixCls}-first-cell`,
+        bodyCell: `${prefixCls}-body-cell`,
+        cellMulti: `${prefixCls}-cell-multi`,
+        cellHidden: `${prefixCls}-cell-hidden`,
+        columnSort: `${prefixCls}-column-sort`,
+        withAppend: `${prefixCls}-with-append`
+      };
+    }
+    return cls;
+  }
   const BodyCell$1 = (props, { slots, emit }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { table } = useProConfigInject();
@@ -32391,11 +32571,13 @@
     let tooltipTitle = value;
     const valueStatus = runFunction(column == null ? void 0 : column.valueStatus, value, props.item, valueEnum == null ? void 0 : valueEnum[value]);
     const recordIndexs = tableContext.getIndexsByKey(rowKey);
-    const cellInnerClass = { [`${prefixCls}-cell-inner`]: true };
+    const c = getCls(prefixCls);
+    const cellInnerClass = c.cellInner;
+    const isWrapText = column.wrapText === void 0 ? wrapText : column.wrapText;
     const cellContentClass = {
-      [`${prefixCls}-cell-content`]: true,
-      [`${prefixCls}-cell-wrap-text`]: column.wrapText === void 0 ? wrapText : column.wrapText,
-      [`${prefixCls}-cell-text-ellipsis`]: !!column.ellipsis
+      [c.cellContent]: true,
+      [c.cellWrapText]: isWrapText,
+      [c.cellTextEllipsis]: !!column.ellipsis
     };
     const cellContentStyle = {
       textAlign: `${column.align}`,
@@ -32412,13 +32594,13 @@
     const cellProps2 = cellRender.props || {};
     const cellRowSpan = cellProps2.rowSpan;
     const cellClass = {
-      [`${prefixCls}-cell`]: true,
-      [`${prefixCls}-first-cell`]: column.columnIndex === 0,
-      [`${prefixCls}-body-cell`]: true,
-      [`${prefixCls}-cell-multi`]: cellRowSpan > 1,
-      [`${prefixCls}-cell-hidden`]: cellRowSpan === 0,
-      [`${prefixCls}-column-sort`]: sorterInfo.sorterOrder,
-      [`${prefixCls}-with-append`]: hasAppendNode
+      [c.cell]: true,
+      [c.firstCell]: column.columnIndex === 0,
+      [c.bodyCell]: true,
+      [c.cellMulti]: cellRowSpan > 1,
+      [c.cellHidden]: cellRowSpan === 0,
+      [c.columnSort]: sorterInfo.sorterOrder,
+      [c.withAppend]: hasAppendNode
     };
     const cellRenderArgs = {
       record: item,
@@ -32426,7 +32608,7 @@
       text: value,
       value,
       index: rowIndex,
-      recordIndexs: tableContext.getIndexsByKey(rowKey),
+      recordIndexs,
       key,
       valueStatus,
       cancelEditable: tableContext.cancelEditable,
@@ -32490,14 +32672,12 @@
       [
         vue.createVNode(
           "div",
-          vue.mergeProps(
-            {
-              class: cellContentClass,
-              style: cellContentStyle,
-              title: altTitle
-            },
-            cellKeyProps
-          ),
+          {
+            class: cellContentClass,
+            style: cellContentStyle,
+            title: altTitle,
+            ...cellKeyProps
+          },
           [hasAppendNode ? (_h = slots.appendNode) == null ? void 0 : _h.call(slots) : null, bodyCell]
         )
       ]
@@ -33044,8 +33224,8 @@
       rowIndex: { type: Number, required: true },
       flattenRowIndex: { type: Number, required: true },
       rowKey: { type: [Number, String] },
-      column: { type: Object, default: () => ({}) },
-      item: { type: Object, default: () => ({}) },
+      column: { type: Object, required: true },
+      item: { type: Object, required: true },
       wrapText: { type: Boolean, default: false },
       type: { type: String },
       height: Number,
@@ -33171,18 +33351,33 @@
       "edit-row": _ctx.editRow,
       "editable-keys": _ctx.editableKeys,
       "is-row-edit": _ctx.isRowEdit
-    }, null, 8, ["prefixCls", "rowIndex", "flattenRowIndex", "rowKey", "column", "item", "edit-row", "editable-keys", "is-row-edit"])) : (vue.openBlock(), vue.createBlock(_component_BodyTextCell, vue.mergeProps({ key: 1 }, _ctx.props, {
-      style: { cursor: _ctx.editable ? "poiner" : "" },
+    }, null, 8, ["prefixCls", "rowIndex", "flattenRowIndex", "rowKey", "column", "item", "edit-row", "editable-keys", "is-row-edit"])) : (vue.openBlock(), vue.createBlock(_component_BodyTextCell, {
+      key: 1,
+      prefixCls: _ctx.prefixCls,
+      rowIndex: _ctx.rowIndex,
+      flattenRowIndex: _ctx.flattenRowIndex,
+      rowKey: _ctx.rowKey,
+      column: _ctx.column,
+      item: _ctx.item,
+      wrapText: _ctx.wrapText,
+      type: _ctx.type,
+      height: _ctx.height,
+      hasAppendNode: _ctx.hasAppendNode,
+      resizeObserver: _ctx.resizeObserver,
+      calMaxHeight: _ctx.calMaxHeight,
+      tooltipOpen: _ctx.tooltipOpen,
+      getPopupContainer: _ctx.getPopupContainer,
+      style: vue.normalizeStyle({ cursor: _ctx.editable ? "poiner" : "" }),
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onCellEvent($event, "click")),
       onDblClick: _cache[1] || (_cache[1] = ($event) => _ctx.onCellEvent($event, "dblClick")),
       onContextmenu: _cache[2] || (_cache[2] = ($event) => _ctx.onCellEvent($event, "contextmenu"))
-    }), {
+    }, {
       appendNode: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "appendNode")
       ]),
       _: 3
       /* FORWARDED */
-    }, 16, ["style"]));
+    }, 8, ["prefixCls", "rowIndex", "flattenRowIndex", "rowKey", "column", "item", "wrapText", "type", "height", "hasAppendNode", "resizeObserver", "calMaxHeight", "tooltipOpen", "getPopupContainer", "style"]));
   }
   var BodyCell = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$j]]);
 
@@ -34651,11 +34846,25 @@
         return summaryStyle.value;
       });
       const emptyStyle = vue.computed(() => ({ width: `${props.bodyWidth}px` }));
+      let resizeRafFrame;
+      let pendingWidth = 0;
+      let pendingHeight = 0;
       useResizeObserver(measureDomRef, (entries) => {
         var _a;
         const contentRect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
-        emit("update:bodyWidth", (contentRect == null ? void 0 : contentRect.width) || 0);
-        emit("update:bodyHeight", (contentRect == null ? void 0 : contentRect.height) || 0);
+        const w = Math.floor((contentRect == null ? void 0 : contentRect.width) || 0);
+        const h = Math.floor((contentRect == null ? void 0 : contentRect.height) || 0);
+        if (w === pendingWidth && h === pendingHeight) return;
+        pendingWidth = w;
+        pendingHeight = h;
+        raf.cancel(resizeRafFrame);
+        resizeRafFrame = raf(() => {
+          emit("update:bodyWidth", pendingWidth);
+          emit("update:bodyHeight", pendingHeight);
+        });
+      });
+      vue.onBeforeUnmount(() => {
+        raf.cancel(resizeRafFrame);
       });
       return {
         bodyContainerStyle,
@@ -37989,10 +38198,11 @@
         return false;
       });
       const showTableCard = vue.computed(() => {
+        var _a2, _b2;
         if (counter.hasFullScreen.value) {
           return false;
         }
-        return props.cardProps !== false && !notNeedCardDom.value;
+        return !!((_b2 = props.cardProps) != null ? _b2 : (_a2 = table == null ? void 0 : table.value) == null ? void 0 : _a2.cardProps) && !notNeedCardDom.value;
       });
       const cardBodyStyle = vue.computed(() => {
         if (!showTableCard.value) return {};
@@ -38187,13 +38397,14 @@
           footer: props.footer || slots.footer
         })]);
         if (showTableCard.value) {
+          const cardProps = isObject$4(props.cardProps) ? props.cardProps : {};
           const _tableDom = /* @__PURE__ */ (function() {
             return tableDom;
           })();
           tableDom = vue.createVNode(antDesignVue.Card, vue.mergeProps({
             "bordered": isBordered("table", (_e = (_d = props.cardBordered) != null ? _d : (_c = table == null ? void 0 : table.value) == null ? void 0 : _c.cardBordered) != null ? _e : dark == null ? void 0 : dark.value),
             "bodyStyle": cardBodyStyle.value
-          }, props.cardProps), _isSlot(tableDom) ? tableDom : {
+          }, cardProps), _isSlot(tableDom) ? tableDom : {
             default: () => [_tableDom]
           });
         }
@@ -38705,12 +38916,13 @@
       title: { type: String, required: false },
       description: { type: String, required: false },
       contentClass: { type: String, required: false, default: "" },
+      pageStyle: { type: Object, required: false },
       contentStyle: { type: Object, required: false },
-      autoContentHeight: { type: Boolean, required: false, default: false },
+      autoContentHeight: { type: Boolean, required: false },
       headerClass: { type: String, required: false, default: "" },
       footerClass: { type: String, required: false, default: "" },
       heightOffset: { type: Number, required: false, default: 0 },
-      contentPadding: { type: Number, required: false, default: 16 },
+      contentPadding: { type: Number, required: false },
       tabList: { type: Array, required: false, default: () => [] },
       onTabChange: { type: null, required: false },
       tabProps: { type: Object, required: false },
@@ -38727,28 +38939,50 @@
       const footerHeight = vue.ref(0);
       const tabsHeight = vue.ref(0);
       const shouldAutoHeight = vue.ref(false);
-      const { contentOffsetTop } = useProConfigInject();
+      const { contentOffsetTop, page } = useProConfigInject();
       const tabActiveKey = vue.useModel(__props, "activeKey");
       const headerRef = vue.useTemplateRef("header");
       const footerRef = vue.useTemplateRef("footer");
       const tabsRef = vue.useTemplateRef("tabs");
-      const headerCls = vue.computed(() => ({
-        [`${prefixCls}-header`]: true,
-        [__props.headerClass]: true
-      }));
-      const contentCls = vue.computed(() => ({
-        [`${prefixCls}-content`]: true,
-        [__props.contentClass]: true
-      }));
-      const footerCls = vue.computed(() => ({
-        [`${prefixCls}-footer`]: true,
-        [__props.footerClass]: true
-      }));
+      const mergeContentPadding = vue.computed(() => {
+        var _a;
+        return __props.contentPadding || ((_a = page == null ? void 0 : page.value) == null ? void 0 : _a.contentPadding) || 16;
+      });
+      const mergeAutoContentHeight = vue.computed(
+        () => {
+          var _a;
+          return __props.autoContentHeight || ((_a = page == null ? void 0 : page.value) == null ? void 0 : _a.autoContentHeight) || false;
+        }
+      );
+      const headerCls = vue.computed(() => {
+        var _a;
+        return {
+          [`${prefixCls}-header`]: true,
+          [((_a = page == null ? void 0 : page.value) == null ? void 0 : _a.headerClass) || ""]: true,
+          [__props.headerClass]: true
+        };
+      });
+      const contentCls = vue.computed(() => {
+        var _a;
+        return {
+          [`${prefixCls}-content`]: true,
+          [((_a = page == null ? void 0 : page.value) == null ? void 0 : _a.contentClass) || ""]: true,
+          [__props.contentClass]: true
+        };
+      });
+      const footerCls = vue.computed(() => {
+        var _a;
+        return {
+          [`${prefixCls}-footer`]: true,
+          [((_a = page == null ? void 0 : page.value) == null ? void 0 : _a.footerClass) || ""]: true,
+          [__props.footerClass]: true
+        };
+      });
       const offset = vue.computed(() => {
-        if (__props.autoContentHeight) {
+        if (mergeAutoContentHeight.value) {
           return {
-            top: -__props.contentPadding,
-            bottom: -__props.contentPadding
+            top: -mergeContentPadding.value,
+            bottom: -mergeContentPadding.value
           };
         }
         return {
@@ -38757,16 +38991,19 @@
         };
       });
       const contentStyles = vue.computed(() => {
-        if (__props.autoContentHeight) {
+        var _a, _b;
+        if (mergeAutoContentHeight.value) {
           return {
             height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${tabsHeight.value}px - ${typeof __props.heightOffset === "number" ? `${__props.heightOffset}px` : __props.heightOffset})`,
             overflowY: shouldAutoHeight.value ? "auto" : "unset",
-            padding: `${__props.contentPadding || 0}px`,
+            padding: `${mergeContentPadding.value || 0}px`,
+            ...(_a = page == null ? void 0 : page.value) == null ? void 0 : _a.contentStyle,
             ...__props.contentStyle
           };
         }
         return {
-          padding: `${__props.contentPadding || 0}px`,
+          padding: `${mergeContentPadding.value || 0}px`,
+          ...(_b = page == null ? void 0 : page.value) == null ? void 0 : _b.contentStyle,
           ...__props.contentStyle
         };
       });
@@ -38801,11 +39038,12 @@
         calcContentHeight();
       });
       return (_ctx, _cache) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return vue.openBlock(), vue.createElementBlock(
           "div",
           {
-            class: vue.normalizeClass([vue.unref(prefixCls), ((_a = _ctx.tabList) == null ? void 0 : _a.length) ? `is-tabs` : ""])
+            class: vue.normalizeClass([vue.unref(prefixCls), ((_a = _ctx.tabList) == null ? void 0 : _a.length) ? `is-tabs` : ""]),
+            style: vue.normalizeStyle((_b = vue.unref(page)) == null ? void 0 : _b.pageStyle)
           },
           [
             _ctx.$slots.header || _ctx.description || _ctx.$slots.description || _ctx.title || _ctx.$slots.title || _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock(
@@ -38859,7 +39097,7 @@
               2
               /* CLASS */
             )) : vue.createCommentVNode("v-if", true),
-            ((_b = _ctx.tabList) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createElementBlock(
+            ((_c = _ctx.tabList) == null ? void 0 : _c.length) ? (vue.openBlock(), vue.createElementBlock(
               "div",
               {
                 key: 1,
@@ -38906,12 +39144,12 @@
               },
               [
                 vue.renderSlot(_ctx.$slots, "default", {
-                  activeKey: (_d = tabActiveKey.value) != null ? _d : (_c = _ctx.tabList[0]) == null ? void 0 : _c.key,
+                  activeKey: (_e = tabActiveKey.value) != null ? _e : (_d = _ctx.tabList[0]) == null ? void 0 : _d.key,
                   offset: offset.value
                 }),
-                ((_e = _ctx.tabList) == null ? void 0 : _e.length) ? vue.renderSlot(_ctx.$slots, "tabs", {
+                ((_f = _ctx.tabList) == null ? void 0 : _f.length) ? vue.renderSlot(_ctx.$slots, "tabs", {
                   key: 0,
-                  activeKey: (_g = tabActiveKey.value) != null ? _g : (_f = _ctx.tabList[0]) == null ? void 0 : _f.key,
+                  activeKey: (_h = tabActiveKey.value) != null ? _h : (_g = _ctx.tabList[0]) == null ? void 0 : _g.key,
                   offset: offset.value
                 }, () => [
                   (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tabComp.value)))
@@ -38934,8 +39172,8 @@
               /* CLASS */
             )) : vue.createCommentVNode("v-if", true)
           ],
-          2
-          /* CLASS */
+          6
+          /* CLASS, STYLE */
         );
       };
     }