@vue-ui-kit/ant 2.4.2 → 2.4.4

package/src/packages/components/PGrid.vue

@@ -5,16 +5,42 @@
   setup
 >
   import { ColumnProps, PFormItemProps, PGridProps, ResponsePathConfig } from '#/antProxy';
+  import PFormCol from '@/components/PFormCol.vue';
+  import RenderDefaultSlots from '@/components/RenderDefaultSlots';
+  import RenderTitleSlots from '@/components/RenderTitleSlots';
+  import { $confirm } from '@/hooks/useMessage';
+  import Icon from '@/renders/Icon';
+  import { getGridDefaults } from '@/utils/config';
+  import {
+    createAutoViewportBoxController,
+    parseAutoViewportBoxOffset,
+    type AutoViewportBoxController,
+    type AutoViewportBoxOffsetInput,
+  } from '@/utils/autoViewportBox';
+  import { cleanCol, defaultLabelCol } from '@/utils/core';
+  import { isGoodValue } from '@/utils/is';
+  import { eachTree } from '@/utils/treeHelper';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import {
+    message as $message,
+    Button as AButton,
+    Form as AForm,
+    Row as ARow,
+    Spin as ASpin,
+    Table as ATable,
+  } from 'ant-design-vue';
+  import { v4 as uuid_v4 } from 'uuid';
   import {
-    computed,
-    useAttrs,
-    ref,
     Ref,
-    reactive,
+    computed,
+    nextTick,
+    onBeforeUnmount,
     onMounted,
-    watch,
+    reactive,
+    ref,
     toRefs,
-    onBeforeUnmount,
+    useAttrs,
+    watch,
   } from 'vue';
   import {
     debounce,
@@ -27,34 +53,15 @@
     merge,
     omit,
   } from 'xe-utils';
-  import { eachTree } from '@/utils/treeHelper';
-  import { message as $message } from 'ant-design-vue';
-  import RenderTitleSlots from '@/components/RenderTitleSlots';
-  import RenderDefaultSlots from '@/components/RenderDefaultSlots';
-  import { v4 as uuid_v4 } from 'uuid';
-  import { isGoodValue } from '@/utils/is';
-  import PFormCol from '@/components/PFormCol.vue';
-  import { cleanCol, defaultLabelCol } from '@/utils/core';
-  import { getGridDefaults } from '@/utils/config';
-  import Icon from '@/renders/Icon';
-  import { $confirm } from '@/hooks/useMessage';
-  import {
-    Table as ATable,
-    Button as AButton,
-    Form as AForm,
-    Row as ARow,
-    Spin as ASpin,
-  } from 'ant-design-vue';
-  import { TablePaginationConfig } from 'ant-design-vue/es/table/interface';
-  import { DownOutlined } from '@ant-design/icons-vue';
 
   const props = withDefaults(defineProps<PGridProps<D, F>>(), {
     rowKey: 'id',
     scrollMode: 'inner',
     align: () => getGridDefaults().align ?? 'left',
     lazyReset: () => getGridDefaults().lazyReset ?? false,
-    fitHeight: () => getGridDefaults().fitHeight ?? 170,
+    fitHeight: () => getGridDefaults().fitHeight ?? 30,
     striped: () => getGridDefaults().striped ?? false,
+    autoBoxSize: false,
   });
 
   const {
@@ -67,6 +74,16 @@
     selectConfig,
     scrollMode,
   } = toRefs(props);
+
+  /** 局部 `autoBoxSizeOffset` 优先，否则用 `getGridDefaults().autoBoxSizeOffset`（`setUIKitConfig`） */
+  const resolvedAutoBoxSizeOffset = computed<AutoViewportBoxOffsetInput>(() => {
+    const local = props.autoBoxSizeOffset;
+    if (local !== undefined && local !== null) {
+      return local;
+    }
+    return getGridDefaults().autoBoxSizeOffset as AutoViewportBoxOffsetInput;
+  });
+
   const loading = reactive({
     table: false,
     toolbar: false,
@@ -86,6 +103,7 @@
   const boxEl = ref<HTMLDivElement>();
   const pFormWrapper = ref<HTMLDivElement>();
   const tableWrapperEl = ref<HTMLDivElement>();
+  const tableFooterEl = ref<HTMLDivElement>();
   const renderHeight = ref(500);
   const selectedRowKeys = ref<Array<string | number>>([]);
   const selectedCaches = ref<D[]>([]);
@@ -184,6 +202,8 @@
         : 'list'
       : 'bad',
   );
+  /** 底部展示「已选」统计（与 multiple 无关，仅看 showCount） */
+  const showSelectionCount = computed(() => !!selectConfig.value?.showCount);
   const attrs = useAttrs();
   const emit = defineEmits<{
     (
@@ -286,7 +306,6 @@
       : {
           list: response,
         };
-  const enoughSpacing = ref(true);
   const reload = () => {
     selectedCaches.value = [];
     selectedRowKeys.value = [];
@@ -298,15 +317,9 @@
     selectedRowKeys.value = [];
     return fetchData();
   };
-  /**
-   * @description
-   * @param p
-   * @param _filters todo filters
-   * @param _sorter todo sorter
-   */
-  const handleTableChange = (p: TablePaginationConfig, _filters, _sorter) => {
-    pagination.page = p.current!;
-    pagination.size = p.pageSize!;
+  const handlePaginationChange = (page: number, pageSize: number) => {
+    pagination.page = page;
+    pagination.size = pageSize;
     return fetchData();
   };
 
@@ -363,22 +376,10 @@
     pagination.page = 1;
     return lazy ? Promise.resolve() : debounceFetchData();
   };
-  const pg = computed(() =>
-    mode.value === 'pagination'
-      ? {
-          current: pagination.page,
-          total: totalCount.value,
-          pageSize: pagination.size,
-          responsive: false,
-          showSizeChanger: true,
-          showTotal: (total: number) => `共${total}条数据`,
-        }
-      : false,
-  );
   const defaultTableConfig = {
-    size: 'small',
+    size: 'small' as const,
     sticky: true,
-    transformCellText: ({ text }) => {
+    transformCellText: ({ text }: { text: any }) => {
       return isArray(text) && text.length === 0 ? '-' : text;
     },
   };
@@ -423,16 +424,73 @@
     },
     { deep: true },
   );
+  watch(
+    () => [renderTableKey.value, dataSeed.value, mode.value, showSelectionCount.value],
+    () => nextTick(() => resizeTable()),
+    { flush: 'post' },
+  );
+
+  let autoViewportBoxCtrl: AutoViewportBoxController | null = null;
+  const clearAutoViewportBox = () => {
+    autoViewportBoxCtrl?.destroy();
+    autoViewportBoxCtrl = null;
+  };
+  const syncAutoViewportBox = () => {
+    clearAutoViewportBox();
+    if (!props.autoBoxSize || !boxEl.value) return;
+    autoViewportBoxCtrl = createAutoViewportBoxController(
+      () => boxEl.value ?? undefined,
+      () => parseAutoViewportBoxOffset(resolvedAutoBoxSizeOffset.value),
+      {
+        onLayout: () => {
+          nextTick(() => resizeTable());
+        },
+      },
+    );
+    autoViewportBoxCtrl.attach();
+  };
+
+  watch(
+    () => props.autoBoxSize,
+    (on) => {
+      if (!on) clearAutoViewportBox();
+      else nextTick(() => syncAutoViewportBox());
+    },
+  );
+  watch(
+    resolvedAutoBoxSizeOffset,
+    () => {
+      if (props.autoBoxSize) autoViewportBoxCtrl?.update();
+    },
+    { deep: true },
+  );
+
   let resizeRaf: number | null = null;
+
+  const resolveTableHeaderEl = (wrapper: HTMLElement): HTMLElement | null => {
+    const root = wrapper.querySelector('.ant-table-wrapper');
+    if (!root) return null;
+    const byHeader = root.querySelector('.ant-table-header') as HTMLElement | null;
+    if (byHeader) return byHeader;
+    return root.querySelector('.ant-table-thead') as HTMLElement | null;
+  };
+
   const resizeTable = () => {
     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;
+      if (isGoodValue(props.renderY)) {
+        renderHeight.value = props.renderY as number;
+        return;
+      }
+      const wrapperH = tableWrapperEl.value.clientHeight;
+      const footerH = tableFooterEl.value?.offsetHeight ?? 0;
+      const tableHeaderEl = resolveTableHeaderEl(tableWrapperEl.value);
+      const headerH = tableHeaderEl?.getBoundingClientRect().height ?? 0;
+      const reserve = props.fitHeight ?? 30;
+      const y = Math.max(wrapperH - footerH - headerH - reserve, 100);
+      renderHeight.value = y;
     });
   };
 
@@ -469,6 +527,8 @@
 
   let observer: MutationObserver;
   let boxElResizeObserver: ResizeObserver | null = null;
+  let tableWrapperResizeObserver: ResizeObserver | null = null;
+  let tableFooterResizeObserver: ResizeObserver | null = null;
   onMounted(() => {
     resizeTable();
     window.addEventListener('resize', resizeTable);
@@ -495,7 +555,19 @@
         ancestor = ancestor.parentElement;
       }
     }
+    tableWrapperResizeObserver = new ResizeObserver(() => resizeTable());
+    if (tableWrapperEl.value) {
+      tableWrapperResizeObserver.observe(tableWrapperEl.value);
+    }
+    tableFooterResizeObserver = new ResizeObserver(() => resizeTable());
+    if (tableFooterEl.value) {
+      tableFooterResizeObserver.observe(tableFooterEl.value);
+    }
     resetQueryFormData(props.manualFetch);
+    nextTick(() => {
+      if (props.autoBoxSize) syncAutoViewportBox();
+      resizeTable();
+    });
   });
   const renderContent = (content: string | (() => any)) => {
     if (isFunction(content)) {
@@ -519,15 +591,25 @@
       ...c,
     }));
   onBeforeUnmount(() => {
+    clearAutoViewportBox();
     if (resizeRaf) cancelAnimationFrame(resizeRaf);
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
     formWrapperResizeObserver?.disconnect();
     boxElResizeObserver?.disconnect();
+    tableWrapperResizeObserver?.disconnect();
+    tableFooterResizeObserver?.disconnect();
   });
 </script>
 <template>
-  <div ref="boxEl" class="h-full p-wrapper flex flex-col gap-8px overflow-y-auto" v-bind="attrs">
+  <div
+    ref="boxEl"
+    :class="[
+      'p-wrapper flex flex-col gap-8px overflow-y-auto',
+      autoBoxSize ? 'min-h-0 min-w-0 flex-1 w-full' : 'h-full',
+    ]"
+    v-bind="attrs"
+  >
     <div v-if="mode === 'bad'">请检查配置</div>
     <template v-else>
       <div
@@ -640,51 +722,72 @@
       </div>
       <div
         ref="tableWrapperEl"
-        :class="`p-pane flex-1 ${enoughSpacing ? 'h-0' : ''} p-${scrollMode ?? 'inner'}-scroll`"
+        :class="`p-pane flex-1 h-0 min-h-0 flex flex-col p-${scrollMode ?? 'inner'}-scroll`"
       >
-        <div
-          v-if="selectConfig?.multiple && selectConfig.showCount"
-          class="w-full text-slate-5 pl-4"
-        >
-          已选：{{ selectedRowKeys.length }}
+        <div class="p-grid-table-body flex-1 min-h-0 overflow-hidden">
+          <a-table
+            :key="renderTableKey + '_table'"
+            :row-key="rowKey ?? 'id'"
+            ref="tableEl"
+            :row-class-name="
+              striped ? (_record, index) => (index % 2 === 1 ? 'p-grid-row-striped' : '') : ''
+            "
+            :columns="passDefaultColumnProps(columns ?? []).map((c) => cleanCol(c as ColumnProps))"
+            :data-source="tableData"
+            :loading="loading.table"
+            :pagination="false"
+            v-bind="tc"
+            :scroll="{
+              x: 'max-content',
+              y: renderHeight,
+            }"
+          >
+            <template v-if="slotTitleColumns.length > 0" #headerCell="{ column }">
+              <render-title-slots
+                v-if="slotTitleColumns.some((s) => column.key && s.field === column.key)"
+                :key="renderTableKey + '_title_' + dataSeed + '_slot_' + column.key"
+                :column="slotTitleColumns.find((f) => column.key && f.field === column.key)!"
+              />
+            </template>
+            <template v-if="slotDefaultColumns.length > 0" #bodyCell="{ column, record, index }">
+              <render-default-slots
+                v-if="slotDefaultColumns.some((s) => column.key && s.field === column.key)"
+                :key="renderTableKey + '_cell_' + dataSeed + '_slot_' + column.key"
+                :column="slotDefaultColumns.find((f) => column.key && f.field === column.key)!"
+                :default-handler="{ pick: pickRow, setLoadings }"
+                :row="record"
+                :row-index="index"
+                :table-data="tableData as Recordable[]"
+              />
+            </template>
+          </a-table>
         </div>
-        <a-table
-          :key="renderTableKey + '_table'"
-          :row-key="rowKey ?? 'id'"
-          ref="tableEl"
-          :row-class-name="
-            striped ? (_record, index) => (index % 2 === 1 ? 'p-grid-row-striped' : '') : ''
-          "
-          :columns="passDefaultColumnProps(columns ?? []).map((c) => cleanCol(c as ColumnProps))"
-          :data-source="tableData"
-          :loading="loading.table"
-          :pagination="pg"
-          v-bind="tc"
-          :scroll="{
-            x: 'max-content',
-            y: renderHeight,
-          }"
-          @change="handleTableChange"
-        >
-          <template v-if="slotTitleColumns.length > 0" #headerCell="{ column }">
-            <render-title-slots
-              v-if="slotTitleColumns.some((s) => column.key && s.field === column.key)"
-              :key="renderTableKey + '_title_' + dataSeed + '_slot_' + column.key"
-              :column="slotTitleColumns.find((f) => column.key && f.field === column.key)!"
-            />
-          </template>
-          <template v-if="slotDefaultColumns.length > 0" #bodyCell="{ column, record, index }">
-            <render-default-slots
-              v-if="slotDefaultColumns.some((s) => column.key && s.field === column.key)"
-              :key="renderTableKey + '_cell_' + dataSeed + '_slot_' + column.key"
-              :column="slotDefaultColumns.find((f) => column.key && f.field === column.key)!"
-              :default-handler="{ pick: pickRow, setLoadings }"
-              :row="record"
-              :row-index="index"
-              :table-data="tableData as Recordable[]"
+        <div ref="tableFooterEl" class="flex-shrink-0">
+          <div
+            v-if="mode !== 'pagination' && showSelectionCount"
+            class="w-full pt-8px px-16px text-slate-5"
+          >
+            已选：{{ selectedRowKeys.length }}
+          </div>
+          <div
+            v-else-if="mode === 'pagination'"
+            class="flex w-full items-center gap-12px pt-8px px-16px"
+          >
+            <div class="flex-1 min-w-0 text-slate-5 flex items-center">
+              <template v-if="showSelectionCount"> 已选：{{ selectedRowKeys.length }} </template>
+            </div>
+            <a-pagination
+              size="small"
+              :responsive="false"
+              :show-size-changer="true"
+              :show-total="(total: number) => `共${total}条数据`"
+              :current="pagination.page"
+              :page-size="pagination.size"
+              :total="totalCount"
+              @change="handlePaginationChange"
             />
-          </template>
-        </a-table>
+          </div>
+        </div>
       </div>
     </template>
   </div>

package/src/packages/components/RenderAntCell.tsx

@@ -1,29 +1,29 @@
-import { defineComponent } from 'vue';
-import { CellRender, RenderTableParams } from '#/antProxy';
-import renderStore from '@/store/renderStore';
-
-export default defineComponent(
-  <D extends Recordable = Recordable>(props: {
-    cellRender: CellRender;
-    renderTableParams: RenderTableParams<D>;
-    defaultHandler: {
-      [key: string]: (...args: any[]) => any;
-    };
-  }) => {
-    const { cellRender, renderTableParams } = props;
-    const { data, row, field, rowIndex } = renderTableParams!;
-    return () => {
-      return (
-        renderStore.renders[cellRender!.name]?.renderDefault?.(
-          cellRender!,
-          { data, row, field, rowIndex },
-          props.defaultHandler,
-        ) ?? null
-      );
-    };
-  },
-  {
-    name: 'RenderAntCell',
-    props: ['cellRender', 'renderTableParams', 'defaultHandler'],
-  },
-);
+import { defineComponent } from 'vue';
+import { CellRender, RenderTableParams } from '#/antProxy';
+import renderStore from '@/store/renderStore';
+
+export default defineComponent(
+  <D extends Recordable = Recordable>(props: {
+    cellRender: CellRender;
+    renderTableParams: RenderTableParams<D>;
+    defaultHandler?: {
+      [key: string]: (...args: any[]) => any;
+    };
+  }) => {
+    const { cellRender, renderTableParams } = props;
+    const { data, row, field, rowIndex } = renderTableParams!;
+    return () => {
+      return (
+        renderStore.renders[cellRender!.name]?.renderDefault?.(
+          cellRender!,
+          { data, row, field, rowIndex },
+          props.defaultHandler ?? {},
+        ) ?? null
+      );
+    };
+  },
+  {
+    name: 'RenderAntCell',
+    props: ['cellRender', 'renderTableParams', 'defaultHandler'],
+  },
+);

package/src/packages/components/RenderDefaultSlots.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { ColumnProps } from '#/antProxy';
+import type { ColumnProps } from '#/antProxy';
 import { renderAntFormat } from '@/utils/AFormatters';
 import RenderAntCell from '@/components/RenderAntCell';
 
@@ -7,7 +7,11 @@ export default defineComponent(
   <D extends Recordable = Recordable>(props: {
     tableData: D[];
     row: D;
-    column: ColumnProps<D>;
+    /**
+     * `PGrid` / `columns` 仍为 `ColumnProps<D>[]`；此处不能写 `ColumnProps<D>`：
+     * 模板里 `a-table` 的 `record` 无泛型上下文，会被推断为 `Record<string, any>`，与 `formatter` 里 `row: D` 逆变冲突（TS2322）。
+     */
+    column: ColumnProps<any>;
     rowIndex: number;
     defaultHandler?: {
       [key: string]: (...args: any[]) => any;

package/src/packages/store/renderStore.tsx

@@ -30,7 +30,7 @@ import { computed, ref, Ref } from 'vue';
 
 interface BtnOptions extends Omit<ButtonProps, 'type'> {
   content?: string;
-  type?: string;
+  type?: ButtonProps['type'];
   getContent?: (p: RenderTableParams) => string;
   dynamicClassName?: (p: RenderTableParams) => string;
   dropdowns?: BtnOptions[];

package/src/packages/styles/index.scss

@@ -67,6 +67,22 @@
   gap: 8px;
 }
 
+.gap-12px {
+  gap: 12px;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.min-w-0 {
+  min-width: 0;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
 .pt-8px {
   padding-top: 8px;
 }
@@ -88,6 +104,10 @@
   overflow-y: auto;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 /* #endregion */
 
 /* #region P family styles */
@@ -273,7 +293,8 @@
     }
   }
   .p-inner-scroll {
-    & > .ant-table-wrapper {
+    & > .ant-table-wrapper,
+    & > .p-grid-table-body > .ant-table-wrapper {
       height: 100%;
 
       & > .ant-spin-nested-loading {