@vue-ui-kit/ant 2.4.3 → 2.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "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;
   /**

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,7 @@
     lazyReset: () => getGridDefaults().lazyReset ?? false,
     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,
@@ -360,9 +377,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 +429,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 => {
@@ -511,7 +564,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 +591,7 @@
       ...c,
     }));
   onBeforeUnmount(() => {
+    clearAutoViewportBox();
     if (resizeRaf) cancelAnimationFrame(resizeRaf);
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
@@ -545,7 +602,14 @@
   });
 </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

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,156 @@
+/**
+ * 按视口从元素左上角铺满宽高（与 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 列等窄容器里仍按整屏宽度赋值，从而撑出页面级横向滚动条。
+ */
+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);
+  let 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);
+    }
+    if (pr.height > 0) {
+      targetH = Math.min(targetH, pr.height);
+    }
+  }
+
+  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,
   };
 }