@vue-ui-kit/ant 2.4.3 → 2.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -77,7 +77,6 @@
     "typescript-transform-paths": "^3.5.0",
     "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^5.1.4",
     "vue": "^3.4.38"
   }
 }

package/src/declarations/antProxy.ts

@@ -164,7 +164,8 @@ export interface ColumnProps<D extends Recordable = Recordable> extends Omit<
 export interface PButtonProps extends Omit<ButtonProps, 'type'> {
   content?: string | (() => any);
   icon?: string;
-  type?: string;
+  /** 与 `a-button` 一致，便于模板类型检查 */
+  type?: ButtonProps['type'];
 }
 
 export interface ToolbarButtonProps extends PButtonProps {
@@ -231,6 +232,16 @@ export type PGridProps<D extends Recordable = Recordable, F extends Recordable =
   proxyConfig?: ProxyConfig<D, F>;
   tableConfig?: TableProps<D>;
   scrollMode?: 'outer' | 'inner';
+  /**
+   * 为 true 时根容器按视口从左上角铺满（与 v-rest 同源），用于外层未声明高度、靠内部撑开的布局。
+   * 偏移见 `autoBoxSizeOffset`。
+   */
+  autoBoxSize?: boolean;
+  /**
+   * `autoBoxSize` 时距视口右侧/底部的预留像素；数字或 `"12px"` 同时作用于两侧；对象可分别指定 `right` / `bottom`。
+   * 未传时使用 `setUIKitConfig({ grid: { autoBoxSizeOffset } })` 的全局值。
+   */
+  autoBoxSizeOffset?: number | string | { right?: number; bottom?: number };
   // 重置后不自动提交
   lazyReset?: boolean;
   /**
@@ -245,6 +256,15 @@ export type PGridProps<D extends Recordable = Recordable, F extends Recordable =
    * 虚拟列表 Y区计算高度
    */
   renderY?: number;
+  /**
+   * 适应「外层高度由内容撑开」的布局（典型如弹窗 `PromisePicker`）。
+   *
+   * 开启后：
+   * - 根容器/表体宿主不再 `flex:1` 强行撑满（避免父无固定高度时塌陷到 0）；
+   * - `a-table` 的纵向 `scroll.y` 作为「最多滚动到多少」的上限，由 `renderY` 显式指定；
+   *   若不传 `renderY`，使用基于视口的默认值。内容少时不会出现行区域下方的大片空白。
+   */
+  fitContent?: boolean;
 };
 
 export interface RenderOptions {

package/src/index.ts

@@ -40,6 +40,7 @@ export default {
 
 // 导出所有类型
 export * from '#/antProxy';
+export * from '@/utils/autoViewportBox';
 export * from '@/utils/core';
 
 // 导出配置方法

package/src/packages/components/PGrid.vue

@@ -11,6 +11,12 @@
   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';
@@ -55,6 +61,8 @@
     lazyReset: () => getGridDefaults().lazyReset ?? false,
     fitHeight: () => getGridDefaults().fitHeight ?? 30,
     striped: () => getGridDefaults().striped ?? false,
+    autoBoxSize: false,
+    fitContent: false,
   });
 
   const {
@@ -67,6 +75,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,
@@ -360,9 +378,9 @@
     return lazy ? Promise.resolve() : debounceFetchData();
   };
   const defaultTableConfig = {
-    size: 'small',
+    size: 'small' as const,
     sticky: true,
-    transformCellText: ({ text }) => {
+    transformCellText: ({ text }: { text: any }) => {
       return isArray(text) && text.length === 0 ? '-' : text;
     },
   };
@@ -412,6 +430,42 @@
     () => 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 => {
@@ -431,6 +485,13 @@
         renderHeight.value = props.renderY as number;
         return;
       }
+      // 内容撑开模式（弹窗等）：scroll.y 作为上限，内容不足时 a-table-body 按自然高度展示。
+      if (props.fitContent) {
+        const vh = typeof window !== 'undefined' ? window.innerHeight : 800;
+        const reserve = props.fitHeight ?? 30;
+        renderHeight.value = Math.max(Math.floor(vh * 0.6) - reserve, 160);
+        return;
+      }
       const wrapperH = tableWrapperEl.value.clientHeight;
       const footerH = tableFooterEl.value?.offsetHeight ?? 0;
       const tableHeaderEl = resolveTableHeaderEl(tableWrapperEl.value);
@@ -511,7 +572,10 @@
       tableFooterResizeObserver.observe(tableFooterEl.value);
     }
     resetQueryFormData(props.manualFetch);
-    nextTick(() => resizeTable());
+    nextTick(() => {
+      if (props.autoBoxSize) syncAutoViewportBox();
+      resizeTable();
+    });
   });
   const renderContent = (content: string | (() => any)) => {
     if (isFunction(content)) {
@@ -535,6 +599,7 @@
       ...c,
     }));
   onBeforeUnmount(() => {
+    clearAutoViewportBox();
     if (resizeRaf) cancelAnimationFrame(resizeRaf);
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
@@ -545,7 +610,18 @@
   });
 </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',
+      fitContent
+        ? 'w-full h-auto'
+        : autoBoxSize
+          ? 'overflow-y-auto min-h-0 min-w-0 flex-1 w-full'
+          : 'overflow-y-auto h-full',
+    ]"
+    v-bind="attrs"
+  >
     <div v-if="mode === 'bad'">请检查配置</div>
     <template v-else>
       <div
@@ -658,9 +734,17 @@
       </div>
       <div
         ref="tableWrapperEl"
-        :class="`p-pane flex-1 h-0 min-h-0 flex flex-col p-${scrollMode ?? 'inner'}-scroll`"
+        :class="
+          fitContent
+            ? 'p-pane'
+            : `p-pane flex-1 h-0 min-h-0 flex flex-col p-${scrollMode ?? 'inner'}-scroll`
+        "
       >
-        <div class="p-grid-table-body flex-1 min-h-0 overflow-hidden">
+        <div
+          :class="
+            fitContent ? 'p-grid-table-body' : 'p-grid-table-body flex-1 min-h-0 overflow-hidden'
+          "
+        >
           <a-table
             :key="renderTableKey + '_table'"
             :row-key="rowKey ?? 'id'"

package/src/packages/components/PromisePicker.vue

@@ -4,15 +4,14 @@
   name="PromisePicker"
   generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
 >
-  import { reactive, ref, computed, onMounted, nextTick } from 'vue';
-  import { PGridInstance, PromisePickerProps } from '#/antProxy';
+  import { PGridInstance, PGridProps, PromisePickerProps } from '#/antProxy';
   import PGrid from '@/components/PGrid.vue';
   import { $warning } from '@/hooks/useMessage';
   import { Button as AButton, Modal as AModal } from 'ant-design-vue';
+  import { computed, reactive, ref } from 'vue';
 
   const gridEl = ref<PGridInstance<D>>();
 
-  const rendered = ref(false);
   const props = withDefaults(defineProps<PromisePickerProps<D, F>>(), {
     title: '数据选择',
     width: '70%',
@@ -21,6 +20,24 @@
     beforePick: () => Promise.resolve(),
   });
   const isMultiple = computed(() => props.gridSetting.selectConfig?.multiple);
+  /**
+   * 合并内置的 `fitContent: true`：
+   * - 弹窗容器由内容撑开，外层不写死高度；
+   * - 数据少时按内容自然高显示，避免出现大面积空白；
+   * - 数据多时由外层 `max-height` 限制总高度，表格内部 `scroll.y` 作为上限滚动。
+   * 用户在 `gridSetting` 中若显式传入 `fitContent`/`renderY` 可覆盖。
+   */
+  const mergedGridSetting = computed<PGridProps<D, F>>(() => ({
+    fitContent: true,
+    ...props.gridSetting,
+  }));
+  const pickerBodyStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    maxHeight: 'min(80dvh, calc(100dvh - 200px))',
+    overflow: 'hidden',
+  } as const;
   let resolvePromise: (
     value: { row: D; field?: string } | PromiseLike<{ row: D; field?: string }>,
   ) => void;
@@ -61,27 +78,18 @@
       });
     }
   };
-  onMounted(() => {});
   defineExpose({
     pick: () =>
       new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         resolvePromise = resolve;
         rejectPromise = reject;
-        rendered.value = false;
         visible.modal = true;
-        nextTick(() => {
-          rendered.value = true;
-        });
       }),
     pickMultiple: () =>
       new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         multipleResolver = resolve;
         rejectPromise = reject;
-        rendered.value = false;
         visible.modal = true;
-        nextTick(() => {
-          rendered.value = true;
-        });
       }),
     grid: gridEl,
     hide: () => {
@@ -99,8 +107,8 @@
     @cancel="handleCancel"
     :body-style="bodyStyle"
   >
-    <div :style="{ minHeight: rendered ? 'unset' : '642px' }">
-      <p-grid v-bind="gridSetting" ref="gridEl" @pick="selectRow" />
+    <div :style="pickerBodyStyle">
+      <p-grid v-bind="mergedGridSetting" ref="gridEl" @pick="selectRow" />
     </div>
     <template v-if="isMultiple" #footer>
       <div class="w-full text-right p-2">

package/src/packages/components/RenderAntCell.tsx

@@ -17,7 +17,7 @@ export default defineComponent(
         renderStore.renders[cellRender!.name]?.renderDefault?.(
           cellRender!,
           { data, row, field, rowIndex },
-          props.defaultHandler,
+          props.defaultHandler ?? {},
         ) ?? null
       );
     };

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/utils/autoViewportBox.ts

@@ -0,0 +1,160 @@
+/**
+ * 按视口从元素左上角铺满宽高（与 storybook 中 v-rest / v-height / v-width 同源思路），
+ * 用于外层未声明高度、需由根节点自行占满可视区域的场景。
+ */
+
+export type AutoViewportBoxOffsetInput =
+  | number
+  | string
+  | { right?: number; bottom?: number }
+  | undefined;
+
+export interface AutoViewportBoxOffset {
+  right: number;
+  bottom: number;
+}
+
+function parseSingle(value: unknown): number {
+  if (typeof value === 'number' && !Number.isNaN(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const match = value.match(/^(-?\d+(?:\.\d+)?)(px)?$/i);
+    if (match) {
+      return Number.parseFloat(match[1]);
+    }
+  }
+  return 0;
+}
+
+/** 解析与 v-rest 一致的偏移：数字/字符串同时作用于 right+bottom；对象可单独指定 */
+export function parseAutoViewportBoxOffset(
+  value: AutoViewportBoxOffsetInput,
+): AutoViewportBoxOffset {
+  if (value === undefined || value === null || value === '') {
+    return { right: 0, bottom: 0 };
+  }
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const o = value as { right?: number; bottom?: number };
+    return {
+      right: typeof o.right === 'number' ? o.right : 0,
+      bottom: typeof o.bottom === 'number' ? o.bottom : 0,
+    };
+  }
+  const single = parseSingle(value);
+  return { right: single, bottom: single };
+}
+
+function findResizeAncestor(start: Element | null): Element {
+  let el: Element | null = start?.parentElement ?? null;
+  while (el && el !== document.body) {
+    const overflow = window.getComputedStyle(el).overflow;
+    if (overflow === 'auto' || overflow === 'scroll' || overflow === 'hidden') {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return document.body;
+}
+
+/**
+ * 宽/高先按「视口内从元素左上角到右/下边缘」计算。
+ *
+ * 宽度会再与**直接父元素**布局框取较小值，避免嵌套在侧栏 + flex 列等窄容器里仍按整屏宽度赋值，
+ * 从而撑出页面级横向滚动条。
+ *
+ * 高度不做 parent 截断：autoBoxSize 的语义就是「一直撑到视口底」。若对 parent 取 min，
+ * 遇到「父容器没有明确高度、靠子元素内容撑开」的常见布局（外层未写死高度，p-grid 根节点
+ * 自身决定可视高度），会形成循环依赖（子依赖父、父又靠子撑开），导致高度被截成极小值，
+ * 反映到 PGrid 上就是表体下方出现大面积空白。
+ */
+export function applyViewportRestSize(el: HTMLElement, offset: AutoViewportBoxOffset): void {
+  const rect = el.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  let targetW = Math.max(0, vw - rect.left - offset.right);
+  const targetH = Math.max(0, vh - rect.top - offset.bottom);
+
+  const parent = el.parentElement;
+  if (parent) {
+    const pr = parent.getBoundingClientRect();
+    if (pr.width > 0) {
+      targetW = Math.min(targetW, pr.width);
+    }
+  }
+
+  el.style.width = `${targetW}px`;
+  el.style.height = `${targetH}px`;
+}
+
+function clearViewportBoxSize(el: HTMLElement): void {
+  el.style.width = '';
+  el.style.height = '';
+}
+
+export interface AutoViewportBoxControllerOptions {
+  /** 每次尺寸写回后回调（例如触发内部表格 resize） */
+  onLayout?: () => void;
+}
+
+export interface AutoViewportBoxController {
+  attach: () => void;
+  update: () => void;
+  destroy: () => void;
+}
+
+export function createAutoViewportBoxController(
+  getEl: () => HTMLElement | null | undefined,
+  getOffset: () => AutoViewportBoxOffset,
+  options?: AutoViewportBoxControllerOptions,
+): AutoViewportBoxController {
+  let resizeObserver: ResizeObserver | null = null;
+  let onWinResize: (() => void) | null = null;
+
+  const disconnect = () => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (onWinResize) {
+      window.removeEventListener('resize', onWinResize);
+      onWinResize = null;
+    }
+  };
+
+  const update = () => {
+    const el = getEl();
+    if (!el) return;
+    applyViewportRestSize(el, getOffset());
+    options?.onLayout?.();
+  };
+
+  const attach = () => {
+    disconnect();
+    const el = getEl();
+    if (!el) return;
+
+    onWinResize = () => update();
+    window.addEventListener('resize', onWinResize);
+
+    const scrollAncestor = findResizeAncestor(el);
+    resizeObserver = new ResizeObserver(() => update());
+    resizeObserver.observe(scrollAncestor);
+    if (el.parentElement) {
+      resizeObserver.observe(el.parentElement);
+    }
+
+    update();
+  };
+
+  return {
+    attach,
+    update,
+    destroy: () => {
+      disconnect();
+      const el = getEl();
+      if (el) clearViewportBoxSize(el);
+    },
+  };
+}

package/src/packages/utils/config.ts

@@ -1,4 +1,5 @@
 import { PFormProps, PGridProps } from '#/antProxy';
+import type { AutoViewportBoxOffsetInput } from '@/utils/autoViewportBox';
 import { ConfigType } from 'e-virt-table';
 import { clone } from 'xe-utils';
 import type { VNode } from 'vue';
@@ -15,6 +16,8 @@ export interface UIKitConfig {
     fitHeight?: number;
     fitCanvasHeight?: number;
     striped?: boolean;
+    /** `PGrid` 开启 `autoBoxSize` 且未传 `autoBoxSizeOffset` 时的视口边距，与 props 类型一致 */
+    autoBoxSizeOffset?: AutoViewportBoxOffsetInput;
   };
   canvasTable?: ConfigType;
   /**
@@ -91,6 +94,7 @@ export function getGridDefaults(): Partial<PGridProps> {
     lazyReset: currentConfig.grid?.lazyReset,
     fitHeight: currentConfig.grid?.fitHeight,
     striped: currentConfig.grid?.striped,
+    autoBoxSizeOffset: currentConfig.grid?.autoBoxSizeOffset,
   };
 }