@vue-ui-kit/ant 2.3.9 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.3.9",
+  "version": "2.4.1",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/declarations/antProxy.ts

@@ -75,11 +75,13 @@ export interface PFormItemProps<F extends Recordable = Recordable> {
 }
 
 export interface PFormProps<F extends Recordable = Recordable> extends FormProps {
+  name?: string;
   items: PFormItemProps<F>[];
   customReset?: () => void;
 }
 
 export interface PBlockProps<F extends Recordable = Recordable> {
+  name?: string;
   getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
   source: Partial<F>;
 }
@@ -114,6 +116,7 @@ export interface GroupMenuItem<F extends Recordable = Recordable> {
 }
 
 export interface PFormGroupProps<F extends Recordable = Recordable> {
+  name?: string;
   getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
   title?: string;
   tabLabel?: string;

package/src/packages/components/PCanvasGrid.vue

@@ -5,18 +5,18 @@
   name="PCanvasGrid"
 >
   import PCanvasTable from './PCanvasTable.vue';
-  import { computed, useAttrs, ref, Ref, reactive, onMounted, toRefs, onBeforeUnmount } from 'vue';
   import {
-    debounce,
-    get,
-    isBoolean,
-    isFunction,
-    isObject,
-    isString,
-    omit,
-    toNumber,
-    uniq,
-  } from 'xe-utils';
+    computed,
+    useAttrs,
+    ref,
+    Ref,
+    reactive,
+    onMounted,
+    toRefs,
+    onBeforeUnmount,
+    watch,
+  } from 'vue';
+  import { debounce, get, isBoolean, isFunction, isObject, isString, omit, uniq } from 'xe-utils';
   import {
     CanvasColumnProps,
     PCanvasGridProps,
@@ -109,6 +109,7 @@
   const canvasTableRef = ref<PCanvasTableInstance<D>>();
   const boxEl = ref<HTMLDivElement>();
   const pFormWrapper = ref<HTMLDivElement>();
+  const tableWrapperEl = ref<HTMLDivElement>();
   const renderHeight = ref(500);
   /* 分页时缓存的跨页选择数据,风险：数据可能会更新导致串页，读取计算的时候要去重 */
   const pageSelections = ref<{
@@ -375,34 +376,42 @@
     pageSelections.value = {};
     return resetQueryFormData();
   };
+  let resizeRaf: number | null = null;
   const resizeTable = () => {
-    const pNode = boxEl.value?.parentElement;
-    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
-    const formOriginHeight = pFormWrapper.value
-      ? window.getComputedStyle(pFormWrapper.value).height
-      : '0px';
-    const formHeight = formOriginHeight.includes('px')
-      ? toNumber(formOriginHeight.replace('px', ''))
-      : 0;
-    const showCountHeight = staticConfig.value?.showCount ? 22 : 0;
-    renderHeight.value =
-      toNumber(ph.replace('px', '')) -
-      props.fitHeight -
-      (props.toolbarConfig ? 30 : 0) -
-      formHeight -
-      showCountHeight;
+    if (resizeRaf) cancelAnimationFrame(resizeRaf);
+    resizeRaf = requestAnimationFrame(() => {
+      resizeRaf = null;
+      if (!tableWrapperEl.value) return;
+      const rect = tableWrapperEl.value.getBoundingClientRect();
+      renderHeight.value = Math.max(window.innerHeight - rect.top - props.fitHeight, 100);
+    });
   };
+
+  // 监听表单区域高度变化（响应式布局换行/收起时自动重算）
+  let formWrapperResizeObserver: ResizeObserver | null = null;
+  watch(
+    pFormWrapper,
+    (el) => {
+      formWrapperResizeObserver?.disconnect();
+      formWrapperResizeObserver = null;
+      if (!el) return;
+      formWrapperResizeObserver = new ResizeObserver(() => resizeTable());
+      formWrapperResizeObserver.observe(el);
+    },
+    { immediate: true },
+  );
+
   let observer: MutationObserver;
+  let boxElResizeObserver: ResizeObserver | null = null;
   onMounted(() => {
     resizeTable();
     window.addEventListener('resize', resizeTable);
-    // 还需要在组件根节点由不可见转为可见时重新计算高度（display:none等样式控制时）
+    // 组件根节点由不可见转为可见时重新计算（display:none 切换场景）
     observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
           const el = mutation.target as HTMLElement;
-          const style = window.getComputedStyle(el);
-          if (style.display !== 'none') {
+          if (window.getComputedStyle(el).display !== 'none') {
             resizeTable();
           }
         }
@@ -410,12 +419,23 @@
     });
     if (boxEl.value) {
       observer.observe(boxEl.value, { attributes: true, attributeFilter: ['style'] });
+      // 往上观察多级祖先：父容器可能是内容撑开的，真正因外部兄弟变化而 resize
+      // 的元素可能在更高层（如 flex 容器）。观察多层确保能感知到
+      boxElResizeObserver = new ResizeObserver(() => resizeTable());
+      let ancestor: Element | null = boxEl.value.parentElement;
+      for (let i = 0; i < 5 && ancestor && ancestor !== document.body; i++) {
+        boxElResizeObserver.observe(ancestor);
+        ancestor = ancestor.parentElement;
+      }
     }
     resetQueryFormData(props.manualFetch);
   });
   onBeforeUnmount(() => {
+    if (resizeRaf) cancelAnimationFrame(resizeRaf);
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
+    formWrapperResizeObserver?.disconnect();
+    boxElResizeObserver?.disconnect();
   });
   defineExpose({
     commitProxy: {
@@ -534,7 +554,7 @@
           </template>
         </span>
       </div>
-      <div :class="`p-pane flex-1 h-0 p-inner-scroll`">
+      <div ref="tableWrapperEl" :class="`p-pane flex-1 h-0 p-inner-scroll`">
         <div
           v-if="staticConfig?.selectable && staticConfig.showCount"
           class="w-full text-slate-5 pl-4"

package/src/packages/components/PForm.vue

@@ -75,7 +75,14 @@
     v-if="items.some((s: PFormItemProps<F>) => (s.field && s.itemRender) || s.slots?.default)"
     class="p-pane p-wrapper"
   >
-    <a-form :key="renderFormKey" ref="formEl" :model="formData" v-bind="fc" @submit="handleSubmit">
+    <a-form
+      :name="name"
+      :key="renderFormKey"
+      ref="formEl"
+      :model="formData"
+      v-bind="fc"
+      @submit="handleSubmit"
+    >
       <a-row :gutter="[6, 12]">
         <p-form-col
           v-for="(item, idx) in items"

package/src/packages/components/PFormGroup.vue

@@ -310,6 +310,7 @@
           ref="blockInstance"
           :key="idx"
           :source="item"
+          :name="name ? `${name}_${idx}` : undefined"
           :get-form-setting="getFormSetting"
           @focus.capture="debounceHandleBlockFocus(idx)"
           @click.capture="debounceHandleBlockFocus(idx)"

package/src/packages/components/PGrid.vue

@@ -26,7 +26,6 @@
     isString,
     merge,
     omit,
-    toNumber,
   } from 'xe-utils';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
@@ -86,6 +85,7 @@
   };
   const boxEl = ref<HTMLDivElement>();
   const pFormWrapper = ref<HTMLDivElement>();
+  const tableWrapperEl = ref<HTMLDivElement>();
   const renderHeight = ref(500);
   const selectedRowKeys = ref<Array<string | number>>([]);
   const selectedCaches = ref<D[]>([]);
@@ -423,25 +423,32 @@
     },
     { deep: true },
   );
+  let resizeRaf: number | null = null;
   const resizeTable = () => {
-    const pNode = boxEl.value?.parentElement;
-    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
-    const formOriginHeight = pFormWrapper.value
-      ? window.getComputedStyle(pFormWrapper.value).height
-      : '0px';
-    const formHeight = formOriginHeight.includes('px')
-      ? toNumber(formOriginHeight.replace('px', ''))
-      : 0;
-    const showCountHeight = selectConfig.value?.showCount ? 22 : 0;
-    renderHeight.value =
-      props.renderY ??
-      toNumber(ph.replace('px', '')) -
-        props.fitHeight -
-        (props.toolbarConfig ? 30 : 0) -
-        formHeight -
-        showCountHeight;
-    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+    if (resizeRaf) cancelAnimationFrame(resizeRaf);
+    resizeRaf = requestAnimationFrame(() => {
+      resizeRaf = null;
+      if (!tableWrapperEl.value) return;
+      const rect = tableWrapperEl.value.getBoundingClientRect();
+      renderHeight.value =
+        props.renderY ?? Math.max(window.innerHeight - rect.top - props.fitHeight, 100);
+      enoughSpacing.value = window.innerHeight > 600;
+    });
   };
+
+  // 监听表单区域高度变化（响应式布局换行/收起时自动重算）
+  let formWrapperResizeObserver: ResizeObserver | null = null;
+  watch(
+    pFormWrapper,
+    (el) => {
+      formWrapperResizeObserver?.disconnect();
+      formWrapperResizeObserver = null;
+      if (!el) return;
+      formWrapperResizeObserver = new ResizeObserver(() => resizeTable());
+      formWrapperResizeObserver.observe(el);
+    },
+    { immediate: true },
+  );
   defineExpose({
     commitProxy: {
       query: debounceFetchData,
@@ -461,16 +468,16 @@
   });
 
   let observer: MutationObserver;
+  let boxElResizeObserver: ResizeObserver | null = null;
   onMounted(() => {
     resizeTable();
     window.addEventListener('resize', resizeTable);
-    // 还需要在组件根节点由不可见转为可见时重新计算高度（display:none等样式控制时）
+    // 组件根节点由不可见转为可见时重新计算（display:none 切换场景）
     observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
           const el = mutation.target as HTMLElement;
-          const style = window.getComputedStyle(el);
-          if (style.display !== 'none') {
+          if (window.getComputedStyle(el).display !== 'none') {
             resizeTable();
           }
         }
@@ -479,6 +486,14 @@
 
     if (boxEl.value) {
       observer.observe(boxEl.value, { attributes: true, attributeFilter: ['style'] });
+      // 往上观察多级祖先：父容器可能是内容撑开的，真正因外部兄弟变化而 resize
+      // 的元素可能在更高层（如 flex 容器）。观察多层确保能感知到
+      boxElResizeObserver = new ResizeObserver(() => resizeTable());
+      let ancestor: Element | null = boxEl.value.parentElement;
+      for (let i = 0; i < 5 && ancestor && ancestor !== document.body; i++) {
+        boxElResizeObserver.observe(ancestor);
+        ancestor = ancestor.parentElement;
+      }
     }
     resetQueryFormData(props.manualFetch);
   });
@@ -504,8 +519,11 @@
       ...c,
     }));
   onBeforeUnmount(() => {
+    if (resizeRaf) cancelAnimationFrame(resizeRaf);
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
+    formWrapperResizeObserver?.disconnect();
+    boxElResizeObserver?.disconnect();
   });
 </script>
 <template>
@@ -519,6 +537,7 @@
       >
         <a-spin :spinning="loading.form">
           <a-form
+            :name="formConfig?.name"
             :key="renderFormKey"
             ref="formEl"
             :model="queryFormData"
@@ -619,7 +638,10 @@
           </template>
         </span>
       </div>
-      <div :class="`p-pane flex-1 ${enoughSpacing ? 'h-0' : ''} p-${scrollMode ?? 'inner'}-scroll`">
+      <div
+        ref="tableWrapperEl"
+        :class="`p-pane flex-1 ${enoughSpacing ? 'h-0' : ''} p-${scrollMode ?? 'inner'}-scroll`"
+      >
         <div
           v-if="selectConfig?.multiple && selectConfig.showCount"
           class="w-full text-slate-5 pl-4"

package/src/packages/components/PGroupBlock.vue

@@ -13,5 +13,5 @@
   });
 </script>
 <template>
-  <p-form ref="formEl" v-bind="formSetting" :data="source!" />
+  <p-form :name="name" ref="formEl" v-bind="formSetting" :data="source!" />
 </template>