@vue-ui-kit/ant 2.5.1 → 2.5.2

package/dist/index.d.ts

@@ -782,6 +782,12 @@ declare class Config {
     CELL_HOVER_ICON_BG_COLOR: string;
     /** hover编辑图标边框颜色 */
     CELL_HOVER_ICON_BORDER_COLOR: string;
+    /** 内容缩放最小比例 */
+    MIN_ZOOM: number;
+    /** 内容缩放最大比例 */
+    MAX_ZOOM: number;
+    /** 启用 Ctrl + 滚轮内容缩放 */
+    ENABLE_ZOOM_WHEEL: boolean;
     /** 滚动条轨道尺寸 */
     SCROLLER_TRACK_SIZE: number;
     /** 滚动条滑块尺寸 */
@@ -1075,6 +1081,10 @@ declare class Context {
     loadingElement?: HTMLDivElement;
     stageWidth: number;
     stageHeight: number;
+    stagePhysicalWidth: number;
+    stagePhysicalHeight: number;
+    zoomScale: ZoomScale;
+    get zoom(): number;
     paint: Paint;
     icons: Icons;
     domSelectionStr: string;
@@ -1156,6 +1166,12 @@ declare class Context {
         offsetX: number;
         offsetY: number;
     };
+    toVisual(value: number): number;
+    toLogical(value: number): number;
+    toVisualPx(value: number): string;
+    scaleStyle<T extends Record<string, any>>(style: T): T;
+    setZoom(zoom: number): void;
+    getZoom(): number;
     hasEvent(event: string): boolean;
     on(event: string, callback: EventCallback): void;
     once(event: string, callback: EventCallback): void;
@@ -1617,6 +1633,12 @@ declare class EVirtTable {
     clearEditableData(value?: null): ChangeItem[];
     clearEditor(): void;
     doLayout(): void;
+    /**
+     * 设置内容缩放比例(容器大小不变,内容变大/变小,基于原生分辨率重绘不失清晰度)
+     * @param zoom 缩放比例,范围 MIN_ZOOM ~ MAX_ZOOM
+     */
+    setZoom(zoom: number): void;
+    getZoom(): number;
     getChangedData(): {
         rowKey: string;
         colKey: string;
@@ -1911,7 +1933,7 @@ declare class Paint {
     constructor(target: HTMLCanvasElement);
     getCtx(): CanvasRenderingContext2D;
     clearTextCache(): void;
-    scale(dpr: number): void;
+    scale(dpr: number, zoom?: number): void;
     save(): void;
     restore(): void;
     translate(x: number, y: number): void;
@@ -5363,6 +5385,17 @@ declare type ValidatorFunction<T> = (value: T) => boolean
 
 declare type VerticalAlign = 'top' | 'middle' | 'bottom';
 
+declare type ViewportRect = {
+    x: number;
+    y: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+
 declare interface VueTypeBaseDef<
 T = unknown,
 D = DefaultType<T>,
@@ -5387,4 +5420,48 @@ declare interface VueTypeValidableDef<T = unknown> extends VueTypeBaseDef<T> {
 
 export declare function watchPreviousDeep<T extends object>(source: WatchSource<T>, cb: (value: T, oldValue: T, onCleanup: () => void) => void, options?: WatchOptions): WatchHandle;
 
+/** 内容缩放：逻辑坐标 ↔ 物理像素，canvas / DOM 共用 */
+declare class ZoomScale {
+    value: number;
+    get isDefault(): boolean;
+    clamp(value: number, min: number, max: number): number;
+    /** @returns 是否发生变化 */
+    set(value: number, min: number, max: number): boolean;
+    /** 逻辑 -> 物理 */
+    toVisual(logical: number): number;
+    /** 物理 -> 逻辑 */
+    toLogical(physical: number): number;
+    toPx(logical: number): string;
+    /** DOM 测量高度 -> 逻辑高度 */
+    domHeightToLogical(physicalHeight: number): number;
+    /** 逻辑内容尺寸 -> 物理尺寸 */
+    contentToPhysical(logical: number): number;
+    scaleStyle<T extends Record<string, any>>(style: T): T;
+    assignScaledStyle(el: HTMLElement, style: Record<string, any>): void;
+    /** 容器物理宽度 -> 逻辑可视宽度 */
+    containerWidth(containerPhysicalWidth: number): number;
+    resolveStageWidth(options: {
+        containerPhysicalWidth: number;
+        contentWidth: number;
+        scrollerTrackSize: number;
+        fillContainer: boolean;
+    }): {
+        stageWidth: number;
+        stagePhysicalWidth: number;
+    };
+    applyStageHeight(stageElement: HTMLDivElement, physicalHeight: number): {
+        stageHeight: number;
+        stagePhysicalHeight: number;
+    };
+    /** floating-ui 锚点：逻辑单元格 -> 视口物理矩形 */
+    getViewportRect(logical: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, containerRect: DOMRect): ViewportRect;
+    /** overlayer 单元格：外层物理定位 + 内层 zoom 缩放自定义 render */
+    createOverlayerCellElement(cell: Cell | CellHeader, cssPrefix: string): HTMLDivElement;
+}
+
 export { }

package/dist/style.css

@@ -159,7 +159,7 @@
   margin-bottom: -0.5em;
 }
 .p-wrapper .p-canvas-toolbar-wrapper {
-  box-shadow: 0 8px var(--p-bg-color, #fff);
+  box-shadow: 0 8px var(--p-theme-bg, #fff);
   border-radius: 0.5em 0.5em 0 0;
 }
 .p-wrapper .ant-form .ant-form-item {

package/dist/style.scss

@@ -164,7 +164,7 @@
     margin-bottom: -0.5em;
   }
   .p-canvas-toolbar-wrapper {
-    box-shadow: 0 8px var(--p-bg-color, #fff);
+    box-shadow: 0 8px var(--p-theme-bg, #fff);
     border-radius: 0.5em 0.5em 0 0;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -47,7 +47,7 @@
     "email": "adoin@qq.com"
   },
   "dependencies": {
-    "e-virt-table": "^1.4.1",
+    "e-virt-table": "1.4.2",
     "uuid": "^11.1.1",
     "xe-utils": "^3.7.6"
   },

package/src/packages/components/PCanvasGrid.vue

@@ -1,23 +1,5 @@
-<script
-  lang="ts"
-  setup
-  generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
-  name="PCanvasGrid"
->
-  import PCanvasTable from './PCanvasTable.vue';
-  import {
-    computed,
-    useAttrs,
-    ref,
-    Ref,
-    reactive,
-    onMounted,
-    nextTick,
-    toRefs,
-    onBeforeUnmount,
-    watch,
-  } from 'vue';
-  import { debounce, get, isBoolean, isFunction, isObject, isString, omit, uniq } from 'xe-utils';
+<script lang="ts" setup generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
+  name="PCanvasGrid">
   import {
     CanvasColumnProps,
     PCanvasGridProps,
@@ -25,28 +7,42 @@
     PFormItemProps,
     ResponsePathConfig,
   } from '#/antProxy';
-  import { v4 as uuid_v4 } from 'uuid';
-  import { isGoodValue } from '@/utils/is';
   import PFormCol from '@/components/PFormCol.vue';
-  import { defaultLabelCol } from '@/utils/core';
-  import Icon from '@/renders/Icon';
   import { $confirm, $error, $success, $warning } from '@/hooks/useMessage';
-  import {
-    Button as AButton,
-    Form as AForm,
-    Row as ARow,
-    Spin as ASpin,
-    Pagination as APagination,
-  } from 'ant-design-vue';
-  import { DownOutlined } from '@ant-design/icons-vue';
-  import { getCanvasTableDefaults, getGridDefaults } from '@/utils/config';
+  import Icon from '@/renders/Icon';
   import {
     createAutoViewportBoxController,
     parseAutoViewportBoxOffset,
     type AutoViewportBoxController,
     type AutoViewportBoxOffsetInput,
   } from '@/utils/autoViewportBox';
+  import { getCanvasTableDefaults, getGridDefaults } from '@/utils/config';
+  import { defaultLabelCol } from '@/utils/core';
+  import { isGoodValue } from '@/utils/is';
   import { eachTree } from '@/utils/treeHelper';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import {
+    Button as AButton,
+    Form as AForm,
+    Pagination as APagination,
+    Row as ARow,
+    Spin as ASpin,
+  } from 'ant-design-vue';
+  import { v4 as uuid_v4 } from 'uuid';
+  import {
+    Ref,
+    computed,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    reactive,
+    ref,
+    toRefs,
+    useAttrs,
+    watch,
+  } from 'vue';
+  import { debounce, get, isBoolean, isFunction, isObject, isString, omit, uniq } from 'xe-utils';
+  import PCanvasTable from './PCanvasTable.vue';
   const props = withDefaults(defineProps<PCanvasGridProps<D, F>>(), {
     lazyReset: () => getGridDefaults().lazyReset ?? false,
     fitHeight: () => getGridDefaults().fitCanvasHeight ?? 0,
@@ -99,13 +95,13 @@
   const pg = computed(() =>
     mode.value === 'pagination'
       ? {
-          current: pagination.page,
-          total: totalCount.value,
-          pageSize: pagination.size,
-          responsive: false,
-          showSizeChanger: true,
-          showTotal: (total: number) => `共${total}条数据`,
-        }
+        current: pagination.page,
+        total: totalCount.value,
+        pageSize: pagination.size,
+        responsive: false,
+        showSizeChanger: true,
+        showTotal: (total: number) => `共${total}条数据`,
+      }
       : false,
   );
 
@@ -188,30 +184,30 @@
   const handleResponse = (response: Recordable, pathConfig?: ResponsePathConfig<D>) =>
     pathConfig
       ? {
-          list: isString(pathConfig.list)
-            ? get(response, pathConfig.list)
-            : isFunction(pathConfig.list)
-              ? pathConfig.list(response)
-              : undefined,
-          total: isString(pathConfig.total)
-            ? get(response, pathConfig.total)
-            : isFunction(pathConfig.total)
-              ? pathConfig.total(response)
-              : undefined,
-          result: isString(pathConfig.result)
-            ? get(response, pathConfig.result)
-            : isFunction(pathConfig.result)
-              ? pathConfig.result(response)
-              : undefined,
-          message: isString(pathConfig.message)
-            ? get(response, pathConfig.message)
-            : isFunction(pathConfig.message)
-              ? pathConfig.message(response)
-              : undefined,
-        }
+        list: isString(pathConfig.list)
+          ? get(response, pathConfig.list)
+          : isFunction(pathConfig.list)
+            ? pathConfig.list(response)
+            : undefined,
+        total: isString(pathConfig.total)
+          ? get(response, pathConfig.total)
+          : isFunction(pathConfig.total)
+            ? pathConfig.total(response)
+            : undefined,
+        result: isString(pathConfig.result)
+          ? get(response, pathConfig.result)
+          : isFunction(pathConfig.result)
+            ? pathConfig.result(response)
+            : undefined,
+        message: isString(pathConfig.message)
+          ? get(response, pathConfig.message)
+          : isFunction(pathConfig.message)
+            ? pathConfig.message(response)
+            : undefined,
+      }
       : {
-          list: response,
-        };
+        list: response,
+      };
   const toolBtnClick = (code: string) => {
     emit('toolbarButtonClick', {
       data: tableData.value,
@@ -333,31 +329,31 @@
     const firstColumn: CanvasColumnProps<D> =
       staticConfig.value.selectable && staticConfig.value.tree
         ? {
-            type: 'selection-tree',
+          type: 'selection-tree',
+          width: 40,
+          widthFillDisable: true,
+          title: '',
+        }
+        : staticConfig.value.selectable
+          ? {
+            type: 'selection',
             width: 40,
             widthFillDisable: true,
             title: '',
           }
-        : staticConfig.value.selectable
-          ? {
-              type: 'selection',
+          : staticConfig.value.tree
+            ? {
+              type: 'tree',
               width: 40,
               widthFillDisable: true,
               title: '',
             }
-          : staticConfig.value.tree
-            ? {
-                type: 'tree',
-                width: 40,
-                widthFillDisable: true,
-                title: '',
-              }
             : {
-                type: 'index',
-                width: 40,
-                widthFillDisable: true,
-                title: '',
-              };
+              type: 'index',
+              width: 40,
+              widthFillDisable: true,
+              title: '',
+            };
     return [firstColumn, ...columns.value];
   });
   const resetQueryFormData = (lazy?: boolean) => {
@@ -535,66 +531,40 @@
   });
 </script>
 <template>
-  <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 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
-        v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
-        class="p-pane p-form-wrapper"
-        ref="pFormWrapper"
-      >
+      <div v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
+        class="p-pane p-form-wrapper" ref="pFormWrapper">
         <a-spin :spinning="loading.form">
-          <a-form
-            :key="renderFormKey"
-            ref="formEl"
-            :model="queryFormData"
-            v-bind="fc"
-            @submit="handleFormSubmit"
-          >
+          <a-form :key="renderFormKey" ref="formEl" :model="queryFormData" v-bind="fc" @submit="handleFormSubmit">
             <a-row :gutter="[6, 12]">
-              <p-form-col
-                v-for="(item, idx) in formConfig!.items"
-                :key="`_col_${item.field || idx}`"
-                :form-data="queryFormData"
-                :item="item as PFormItemProps<Partial<F>>"
-                @reset="resetQueryFormData(props.lazyReset)"
-              />
+              <p-form-col v-for="(item, idx) in formConfig!.items" :key="`_col_${item.field || idx}`"
+                :form-data="queryFormData" :item="item as PFormItemProps<Partial<F>>"
+                @reset="resetQueryFormData(props.lazyReset)" />
             </a-row>
           </a-form>
         </a-spin>
       </div>
-      <div
-        v-if="toolbarConfig"
-        class="p-canvas-toolbar-wrapper flex items-center w-full justify-between p-theme-bg pt-8px px-16px"
-      >
+      <div v-if="toolbarConfig"
+        class="p-canvas-toolbar-wrapper flex items-center w-full justify-between p-theme-bg pt-8px px-16px">
         <div class="flex items-center flex-1 gap-4px">
           <template v-if="toolbarConfig.buttons && toolbarConfig.buttons.length > 0">
             <template v-for="(btn, idx) in toolbarConfig.buttons" :key="idx">
               <a-dropdown v-if="btn.dropdowns && btn.dropdowns.length">
                 <template #overlay>
                   <a-menu @click="toolBtnMenuClick">
-                    <a-menu-item v-for="sub in btn.dropdowns" :key="sub.code"
-                      >{{ sub.content }}
+                    <a-menu-item v-for="sub in btn.dropdowns" :key="sub.code">{{ sub.content }}
                     </a-menu-item>
                   </a-menu>
                 </template>
-                <a-button
-                  :type="btn.type"
-                  :size="btn.size ?? 'middle'"
+                <a-button :type="btn.type" :size="btn.size ?? 'middle'"
                   :disabled="toolbarConfig.disabled || btn.disabled"
-                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
-                  :danger="btn.danger"
-                  :shape="btn.shape"
-                  :ghost="btn.ghost"
-                  :block="btn.block"
-                >
+                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])" :danger="btn.danger"
+                  :shape="btn.shape" :ghost="btn.ghost" :block="btn.block">
                   <div class="flex items-center gap-4px">
                     <Icon v-if="btn.icon" :icon="btn.icon" />
                     <template v-if="btn.content && isStringContent(renderContent(btn.content))">
@@ -605,18 +575,10 @@
                   </div>
                 </a-button>
               </a-dropdown>
-              <a-button
-                v-else-if="btn.code"
-                :type="btn.type"
-                :size="btn.size ?? 'middle'"
+              <a-button v-else-if="btn.code" :type="btn.type" :size="btn.size ?? 'middle'"
                 :disabled="toolbarConfig.disabled || btn.disabled"
-                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
-                :danger="btn.danger"
-                :shape="btn.shape"
-                :ghost="btn.ghost"
-                :block="btn.block"
-                @click="debounceToolBtnClick(btn.code)"
-              >
+                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])" :danger="btn.danger"
+                :shape="btn.shape" :ghost="btn.ghost" :block="btn.block" @click="debounceToolBtnClick(btn.code)">
                 <div class="flex items-center gap-4px">
                   <Icon v-if="btn.icon" :icon="btn.icon" />
                   <template v-if="btn.content && isStringContent(renderContent(btn.content))">
@@ -631,19 +593,10 @@
         </div>
         <span class="flex items-center gap-4px">
           <template v-if="toolbarConfig.tools && toolbarConfig.tools.length > 0">
-            <a-button
-              v-for="(tool, idx) in toolbarConfig.tools"
-              :key="idx"
-              :type="tool.type"
-              :size="tool.size ?? 'middle'"
-              :disabled="toolbarConfig.disabled || tool.disabled"
-              :danger="tool.danger"
-              :shape="tool.shape"
-              :ghost="tool.ghost"
-              :block="tool.block"
-              @click="debounceToolToolClick(tool.code)"
-              :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
-            >
+            <a-button v-for="(tool, idx) in toolbarConfig.tools" :key="idx" :type="tool.type"
+              :size="tool.size ?? 'middle'" :disabled="toolbarConfig.disabled || tool.disabled" :danger="tool.danger"
+              :shape="tool.shape" :ghost="tool.ghost" :block="tool.block" @click="debounceToolToolClick(tool.code)"
+              :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])">
               <div class="flex items-center gap-4px">
                 <Icon v-if="tool.icon" :icon="tool.icon" />
                 <template v-if="tool.content && isStringContent(renderContent(tool.content))">
@@ -655,40 +608,23 @@
           </template>
         </span>
       </div>
-      <div ref="tableWrapperEl" class="p-pane flex-1 h-0 min-h-0 flex flex-col p-inner-scroll">
+      <div ref="tableWrapperEl" class="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"
-          >
+          <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"
-          >
+          <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"
-          />
+          <a-pagination class="p-canvas-pagination" v-if="mode === 'pagination'" size="small" :current="pagination.page"
+            :page-size="pagination.size" :total="totalCount" @change="handleTableChange" />
         </div>
       </div>
     </template>

package/src/packages/styles/index.scss

@@ -164,7 +164,7 @@
     margin-bottom: -0.5em;
   }
   .p-canvas-toolbar-wrapper {
-    box-shadow: 0 8px var(--p-bg-color, #fff);
+    box-shadow: 0 8px var(--p-theme-bg, #fff);
     border-radius: 0.5em 0.5em 0 0;
   }