@vue-ui-kit/ant 2.4.5 → 2.5.0

package/package.json

@@ -1,82 +1,84 @@
-{
-  "name": "@vue-ui-kit/ant",
-  "version": "2.4.5",
-  "description": "Vue3 UI Kit based on Ant Design",
-  "type": "module",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/es/index.js",
-  "types": "./dist/index.d.ts",
-  "style": "./dist/style.css",
-  "sass": "./dist/style.scss",
-  "exports": {
-    ".": {
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/es/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./style.css": "./dist/style.css",
-    "./style.scss": "./src/packages/styles/index.scss",
-    "./dist/style.scss": "./dist/style.scss",
-    "./dist/style.css": "./dist/style.css"
-  },
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "README.zh.md",
-    "tsconfig.json"
-  ],
-  "scripts": {
-    "dev": "vue-tsc --noEmit --skipLibCheck & vite",
-    "build": "ts-patch install && vite build && sass src/packages/styles/index.scss dist/style.css --no-source-map",
-    "prepack": "rimraf dist && pnpm build",
-    "prepare": "husky",
-    "lint:lint-staged": "lint-staged",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
-  },
-  "keywords": [
-    "vue3",
-    "ui kit",
-    "ant design",
-    "ant",
-    "antdv"
-  ],
-  "author": {
-    "name": "adoin",
-    "email": "adoin@qq.com"
-  },
-  "dependencies": {
-    "e-virt-table": "^1.3.17",
-    "uuid": "^10.0.0",
-    "xe-utils": "^3.7.6"
-  },
-  "peerDependencies": {
-    "@ant-design/icons-vue": ">=7.0.0",
-    "ant-design-vue": ">=4.0.0",
-    "vue": ">=3.2.0"
-  },
-  "license": "GPL",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
-  "devDependencies": {
-    "@ant-design/icons-vue": ">=7.0.0",
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "ant-design-vue": "^4.2.3",
-    "esbuild": "^0.28.0",
-    "husky": "^9.1.5",
-    "lint-staged": "^15.2.9",
-    "prettier": "^3.3.3",
-    "rimraf": "^6.0.1",
-    "sass": "^1.77.8",
-    "ts-patch": "^3.2.1",
-    "typescript-transform-paths": "^3.5.0",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.4.38"
-  }
-}
+{
+  "name": "@vue-ui-kit/ant",
+  "version": "2.5.0",
+  "description": "Vue3 UI Kit based on Ant Design",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/style.css",
+  "sass": "./dist/style.scss",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/es/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./style.scss": "./src/packages/styles/index.scss",
+    "./dist/style.scss": "./dist/style.scss",
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "README.zh.md",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "dev": "vue-tsc --noEmit --skipLibCheck & vite",
+    "build": "ts-patch install && vite build && sass src/packages/styles/index.scss dist/style.css --no-source-map",
+    "prepack": "rimraf dist && pnpm build",
+    "prepare": "husky",
+    "lint:lint-staged": "lint-staged",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
+  },
+  "keywords": [
+    "vue3",
+    "ui kit",
+    "ant design",
+    "ant",
+    "antdv"
+  ],
+  "author": {
+    "name": "adoin",
+    "email": "adoin@qq.com"
+  },
+  "dependencies": {
+    "e-virt-table": "^1.3.25",
+    "uuid": "^10.0.0",
+    "xe-utils": "^3.7.6"
+  },
+  "peerDependencies": {
+    "@ant-design/icons-vue": ">=7.0.0",
+    "ant-design-vue": ">=4.0.0",
+    "vue": ">=3.2.0"
+  },
+  "license": "GPL",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "devDependencies": {
+    "@ant-design/icons-vue": ">=7.0.0",
+    "@commitlint/cli": "^21.0.0",
+    "@commitlint/config-conventional": "^21.0.0",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "ant-design-vue": "^4.2.3",
+    "esbuild": "^0.28.0",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.9",
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "sass": "^1.77.8",
+    "scroll-into-view-if-needed": "^2.2.31",
+    "ts-patch": "^3.2.1",
+    "typescript-transform-paths": "^3.5.0",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.33",
+    "vue-types": "^3.0.2"
+  }
+}

package/src/declarations/antProxy.ts

@@ -80,6 +80,38 @@ export interface PFormProps<F extends Recordable = Recordable> extends FormProps
   customReset?: () => void;
 }
 
+export interface PDescriptionItemProps<D extends Recordable = Recordable> {
+  field?: string;
+  label?: string;
+  span?: number;
+  labelStyle?: Recordable;
+  contentStyle?: Recordable;
+  /** 只读展示渲染器，派发到 renderStore.renderDefault */
+  readonlyRender?: ItemRender;
+  slots?: {
+    label?: () => any;
+    default?: ({ data, field }: { data: D; field?: string }) => any;
+  };
+}
+
+export interface PDescriptionProps<D extends Recordable = Recordable> {
+  /** 数据源 */
+  data: D;
+  items: PDescriptionItemProps<D>[];
+  /** 透传 a-descriptions */
+  title?: string;
+  extra?: string;
+  bordered?: boolean;
+  size?: 'default' | 'small' | 'middle';
+  column?: number | Partial<Record<'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number>>;
+  layout?: 'horizontal' | 'vertical';
+  colon?: boolean;
+  labelStyle?: Recordable;
+  contentStyle?: Recordable;
+  /** 缺省占位，row[field] 为空时展示 */
+  emptyText?: string;
+}
+
 export interface PBlockProps<F extends Recordable = Recordable> {
   name?: string;
   getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
@@ -314,6 +346,12 @@ export interface RenderFormParams<F extends Recordable = Recordable> {
   field?: string;
 }
 
+export interface RenderReadonlyParams<D extends Recordable = Recordable> {
+  data: D;
+  field?: string;
+  title?: string;
+}
+
 export interface RenderTableParams<D extends Recordable = Recordable> {
   data?: D[];
   row: D;
@@ -389,6 +427,16 @@ export interface PCanvasGridProps<
    * 适应展示区到页面顶部的高度，通常和容器最上的y值有关（正比）
    */
   fitHeight?: number;
+  /**
+   * 开启后组件根节点按视口从其左上角铺满宽高，与 PGrid 的 autoBoxSize 行为一致。
+   * 外层未声明固定高度、需组件自身占满可视区域时使用。
+   */
+  autoBoxSize?: boolean;
+  /**
+   * `autoBoxSize` 时距视口右侧/底部的预留像素；数字或 `"12px"` 同时作用于两侧；对象可分别指定 `right` / `bottom`。
+   * 未传时使用 `setUIKitConfig({ grid: { autoBoxSizeOffset } })` 的全局值。
+   */
+  autoBoxSizeOffset?: number | string | { right?: number; bottom?: number };
 }
 export interface PGridInstance<
   D extends Recordable = Recordable,

package/src/index.ts

@@ -1,4 +1,5 @@
 import { App } from 'vue';
+import type { Component } from 'vue';
 import PForm from '@/components/PForm.vue';
 import PGrid from '@/components/PGrid.vue';
 import PCanvasTable from '@/components/PCanvasTable.vue';
@@ -6,6 +7,7 @@ import PCanvasGrid from '@/components/PCanvasGrid.vue';
 import PFormGroup from '@/components/PFormGroup.vue';
 import PGroupBlock from '@/components/PGroupBlock.vue';
 import PromisePicker from '@/components/PromisePicker.vue';
+import PDescription from '@/components/PDescription.vue';
 import { addFormatter } from '@/utils/AFormatters';
 import { addRender } from '@/store/renderStore';
 import {
@@ -29,9 +31,10 @@ export default {
     app.component('PGrid', PGrid);
     app.component('PCanvasTable', PCanvasTable);
     app.component('PCanvasGrid', PCanvasGrid);
-    app.component('PFormGroup', PFormGroup);
+    app.component('PFormGroup', PFormGroup as unknown as Component);
     app.component('PGroupBlock', PGroupBlock);
     app.component('PromisePicker', PromisePicker);
+    app.component('PDescription', PDescription);
   },
   addFormatter,
   addRender,
@@ -62,6 +65,7 @@ export {
   PFormGroup,
   PGroupBlock,
   PromisePicker,
+  PDescription,
   addFormatter,
   addRender,
 };

package/src/packages/components/PCanvasGrid.vue

@@ -12,6 +12,7 @@
     Ref,
     reactive,
     onMounted,
+    nextTick,
     toRefs,
     onBeforeUnmount,
     watch,
@@ -39,10 +40,17 @@
   } from 'ant-design-vue';
   import { DownOutlined } from '@ant-design/icons-vue';
   import { getCanvasTableDefaults, getGridDefaults } from '@/utils/config';
+  import {
+    createAutoViewportBoxController,
+    parseAutoViewportBoxOffset,
+    type AutoViewportBoxController,
+    type AutoViewportBoxOffsetInput,
+  } from '@/utils/autoViewportBox';
   import { eachTree } from '@/utils/treeHelper';
   const props = withDefaults(defineProps<PCanvasGridProps<D, F>>(), {
     lazyReset: () => getGridDefaults().lazyReset ?? false,
-    fitHeight: () => getGridDefaults().fitCanvasHeight ?? 100,
+    fitHeight: () => getGridDefaults().fitCanvasHeight ?? 0,
+    autoBoxSize: false,
   });
   const attrs = useAttrs();
   const emit = defineEmits<{
@@ -61,6 +69,15 @@
   const { formConfig, pageConfig, columns, toolbarConfig, proxyConfig, config, staticConfig } =
     toRefs(props);
   const canvasTableDefaults = getCanvasTableDefaults();
+
+  /** 局部 `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 renderFormKey = ref(uuid_v4());
   const queryFormData = ref<Partial<F>>({}) as Ref<Partial<F>>;
 
@@ -110,6 +127,8 @@
   const boxEl = ref<HTMLDivElement>();
   const pFormWrapper = ref<HTMLDivElement>();
   const tableWrapperEl = ref<HTMLDivElement>();
+  const tableBodyEl = ref<HTMLDivElement>();
+  const tableFooterEl = ref<HTMLDivElement>();
   const renderHeight = ref(500);
   /* 分页时缓存的跨页选择数据,风险：数据可能会更新导致串页，读取计算的时候要去重 */
   const pageSelections = ref<{
@@ -376,14 +395,59 @@
     pageSelections.value = {};
     return resetQueryFormData();
   };
+
+  const renderContent = (content: string | (() => any)) => {
+    if (isFunction(content)) {
+      return content();
+    }
+    return content;
+  };
+  const isStringContent = (content: any) => isString(content);
+
+  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 resizeTable = () => {
     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);
+      if (!tableBodyEl.value) return;
+      const bodyH = tableBodyEl.value.clientHeight;
+      const reserve = props.fitHeight ?? 0;
+      renderHeight.value = Math.max(bodyH - reserve, 100);
     });
   };
 
@@ -401,8 +465,12 @@
     { immediate: true },
   );
 
+  // 分页/已选区域高度变化时重算
+  watch(mode, () => nextTick(() => resizeTable()));
+
   let observer: MutationObserver;
   let boxElResizeObserver: ResizeObserver | null = null;
+  let tableBodyResizeObserver: ResizeObserver | null = null;
   onMounted(() => {
     resizeTable();
     window.addEventListener('resize', resizeTable);
@@ -428,7 +496,16 @@
         ancestor = ancestor.parentElement;
       }
     }
+    // 直接观察实际承载 canvas 的内层盒子，避免 padding/footer 干扰
+    tableBodyResizeObserver = new ResizeObserver(() => resizeTable());
+    if (tableBodyEl.value) {
+      tableBodyResizeObserver.observe(tableBodyEl.value);
+    }
     resetQueryFormData(props.manualFetch);
+    nextTick(() => {
+      if (props.autoBoxSize) syncAutoViewportBox();
+      resizeTable();
+    });
   });
   onBeforeUnmount(() => {
     if (resizeRaf) cancelAnimationFrame(resizeRaf);
@@ -436,6 +513,8 @@
     observer.disconnect();
     formWrapperResizeObserver?.disconnect();
     boxElResizeObserver?.disconnect();
+    tableBodyResizeObserver?.disconnect();
+    clearAutoViewportBox();
   });
   defineExpose({
     commitProxy: {
@@ -456,7 +535,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
@@ -509,9 +595,14 @@
                   :ghost="btn.ghost"
                   :block="btn.block"
                 >
-                  <Icon v-if="btn.icon" :icon="btn.icon" />
-                  {{ btn.content }}
-                  <DownOutlined />
+                  <div class="flex items-center gap-4px">
+                    <Icon v-if="btn.icon" :icon="btn.icon" />
+                    <template v-if="btn.content && isStringContent(renderContent(btn.content))">
+                      {{ renderContent(btn.content) }}
+                    </template>
+                    <component v-else-if="btn.content" :is="renderContent(btn.content)" />
+                    <DownOutlined />
+                  </div>
                 </a-button>
               </a-dropdown>
               <a-button
@@ -526,8 +617,13 @@
                 :block="btn.block"
                 @click="debounceToolBtnClick(btn.code)"
               >
-                <Icon v-if="btn.icon" :icon="btn.icon" />
-                {{ btn.content }}
+                <div class="flex items-center gap-4px">
+                  <Icon v-if="btn.icon" :icon="btn.icon" />
+                  <template v-if="btn.content && isStringContent(renderContent(btn.content))">
+                    {{ renderContent(btn.content) }}
+                  </template>
+                  <component v-else-if="btn.content" :is="renderContent(btn.content)" />
+                </div>
               </a-button>
               <div v-else></div>
             </template>
@@ -548,43 +644,52 @@
               @click="debounceToolToolClick(tool.code)"
               :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
             >
-              <Icon v-if="tool.icon" :icon="tool.icon" />
-              {{ tool.content }}
+              <div class="flex items-center gap-4px">
+                <Icon v-if="tool.icon" :icon="tool.icon" />
+                <template v-if="tool.content && isStringContent(renderContent(tool.content))">
+                  {{ renderContent(tool.content) }}
+                </template>
+                <component v-else-if="tool.content" :is="renderContent(tool.content)" />
+              </div>
             </a-button>
           </template>
         </span>
       </div>
-      <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"
-        >
-          已选：{{ selectedRowKeys.length }}
+      <div ref="tableWrapperEl" class="p-pane flex-1 h-0 min-h-0 flex flex-col p-inner-scroll">
+        <div ref="tableBodyEl" class="flex-1 min-h-0 overflow-hidden">
+          <p-canvas-table
+            ref="canvasTableRef"
+            :columns="finalColumns"
+            :config="{
+              ...propsWithDefaults.config,
+              HEIGHT: renderHeight,
+            }"
+            :data="tableData"
+            :loading="loading.table"
+            @selection-change="handleSelectionChange"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotProps">
+              <slot :name="name" v-bind="slotProps"></slot>
+            </template>
+          </p-canvas-table>
+        </div>
+        <div ref="tableFooterEl" class="flex-shrink-0">
+          <div
+            v-if="staticConfig?.selectable && staticConfig.showCount"
+            class="w-full text-slate-5 pl-4"
+          >
+            已选：{{ selectedRowKeys.length }}
+          </div>
+          <a-pagination
+            class="p-canvas-pagination"
+            v-if="mode === 'pagination'"
+            size="small"
+            :current="pagination.page"
+            :page-size="pagination.size"
+            :total="totalCount"
+            @change="handleTableChange"
+          />
         </div>
-        <p-canvas-table
-          ref="canvasTableRef"
-          :columns="finalColumns"
-          :config="{
-            ...propsWithDefaults.config,
-            HEIGHT: renderHeight,
-          }"
-          :data="tableData"
-          :loading="loading.table"
-          @selection-change="handleSelectionChange"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotProps">
-            <slot :name="name" v-bind="slotProps"></slot>
-          </template>
-        </p-canvas-table>
-        <a-pagination
-          class="p-canvas-pagination"
-          v-if="mode === 'pagination'"
-          size="small"
-          :current="pagination.page"
-          :page-size="pagination.size"
-          :total="totalCount"
-          @change="handleTableChange"
-        />
       </div>
     </template>
   </div>

package/src/packages/components/PDescription.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup generic="D extends Recordable = Recordable" name="PDescription">
+  import { computed } from 'vue';
+  import type { PDescriptionProps } from '#/antProxy';
+  import PDescriptionContent from '@/components/PDescriptionContent';
+
+  const props = withDefaults(defineProps<PDescriptionProps<D>>(), {
+    bordered: false,
+    column: 3,
+    size: 'default',
+    layout: 'horizontal',
+    colon: true,
+    emptyText: '-',
+  });
+
+  const descAttrs = computed(() => ({
+    title: props.title,
+    extra: props.extra,
+    bordered: props.bordered,
+    size: props.size,
+    column: props.column,
+    layout: props.layout,
+    colon: props.colon,
+    labelStyle: props.labelStyle,
+    contentStyle: props.contentStyle,
+  }));
+</script>
+<template>
+  <a-descriptions v-bind="descAttrs" class="p-description">
+    <template v-if="$slots.title || title" #title>
+      <slot name="title">{{ title }}</slot>
+    </template>
+    <template v-if="$slots.extra || extra" #extra>
+      <slot name="extra">{{ extra }}</slot>
+    </template>
+
+    <a-descriptions-item
+      v-for="(item, idx) in items"
+      :key="`_desc_${item.field ?? idx}`"
+      :label="item.label"
+      :span="item.span"
+      :label-style="item.labelStyle"
+      :content-style="item.contentStyle"
+    >
+      <template v-if="item.slots?.label" #label>
+        <component :is="item.slots.label" />
+      </template>
+      <p-description-content :item="item" :data="data" :empty-text="emptyText || '-'" />
+    </a-descriptions-item>
+  </a-descriptions>
+</template>

package/src/packages/components/PDescriptionContent.tsx

@@ -0,0 +1,46 @@
+import { defineComponent } from 'vue';
+import type { PDescriptionItemProps } from '#/antProxy';
+import renderStore from '@/store/renderStore';
+import { isGoodValue } from '@/utils/is';
+
+export default defineComponent(
+  <D extends Recordable = Recordable>(props: {
+    item: PDescriptionItemProps<D>;
+    data: D;
+    emptyText: string;
+  }) => {
+    return () => {
+      const { item, data, emptyText } = props;
+
+      // 1. 插槽优先
+      if (item.slots?.default) {
+        return item.slots.default({ data, field: item.field });
+      }
+
+      // 2. readonlyRender 派发到 renderReadonly（专为只读语境设计的渲染维度）
+      if (item.readonlyRender?.name) {
+        const r = item.readonlyRender;
+        const node =
+          renderStore.renders[r.name]?.renderReadonly?.(
+            r,
+            {
+              data,
+              field: item.field,
+              title: item.label,
+            },
+            {},
+          ) ?? null;
+        if (node !== null) return node;
+      }
+
+      // 3. 原值；空值用 emptyText
+      if (!item.field) return emptyText;
+      const v = (data as Recordable)?.[item.field];
+      return isGoodValue(v) ? v : emptyText;
+    };
+  },
+  {
+    name: 'PDescriptionContent',
+    props: ['item', 'data', 'emptyText'],
+  },
+);