@vue-ui-kit/ant 2.5.1 → 2.5.3

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

@@ -1,4 +1,61 @@
 @charset "UTF-8";
+/**
+ * EVirtTable（PCanvasGrid / PCanvasTable）主题变量
+ * - 与 PGrid 共用 --p-* 语义变量，保证 Canvas 表格与 DOM 表格同色
+ * - 无对应 --p-* 的项使用 storybook theme.css 默认值
+ * - e-virt-table 初始化时通过 Config.updateCssVar() 读取 --evt-*
+ */
+:root {
+  --evt-border-color: var(--p-border-color, #d9d9d9);
+  --evt-header-bg-color: var(--p-table-thead-bg-color, #f2f3f6);
+  --evt-body-bg-color: var(--p-table-row-bg-color, #fff);
+  --evt-stripe-color: var(--p-striped-bg-color, #f2f3f6);
+  --evt-highlight-hover-row-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  --evt-select-border-color: var(--p-primary-color, #4096ff);
+  --evt-sort-icon-color: var(--p-primary-color, #4096ff);
+  --evt-required-color: var(--p-danger-color, #f5222d);
+  --evt-error-tip-color: var(--p-danger-color, #f5222d);
+  --evt-error-tip-icon-color: var(--p-danger-color, #f5222d);
+  --evt-readonly-color: var(--p-table-row-bg-color, #fff);
+  --evt-scroller-track-color: var(--p-table-row-bg-color, #fff);
+  /* Canvas 专用（白天 = storybook 默认值） */
+  --evt-header-text-color: #1d2129;
+  --evt-body-text-color: #4e5969;
+  --evt-footer-text-color: #4e5969;
+  --evt-readonly-text-color: #4e5969;
+  --evt-scroller-color: #dee0e3;
+  --evt-scroller-focus-color: #bbbec4;
+  --evt-edit-bg-color: #fcf6ed;
+  --evt-footer-bg-color: #fafafa;
+  --evt-autofill-point-border-color: #fff;
+  --evt-editor-bg-color: #fff;
+  --evt-editor-text-color: #333;
+  --evt-context-menu-bg-color: #fff;
+  --evt-context-menu-text-color: #333;
+  --evt-context-menu-item-hover-bg-color: #f5f5f5;
+}
+
+/* 夜间：背景随 --p-* 传递，仅覆盖 Canvas 专用色 */
+html[theme-mode=dark],
+:root[data-theme=dark],
+:root.dark {
+  --evt-header-text-color: #a3a6ad;
+  --evt-body-text-color: #cfd3dc;
+  --evt-footer-text-color: #cfd3dc;
+  --evt-readonly-text-color: #a3a6ad;
+  --evt-scroller-color: #414243;
+  --evt-scroller-track-color: #141414;
+  --evt-scroller-focus-color: #a3a6ad;
+  --evt-edit-bg-color: #141414;
+  --evt-footer-bg-color: #262727;
+  --evt-autofill-point-border-color: #a3a6ad;
+  --evt-editor-bg-color: #434343;
+  --evt-editor-text-color: #cfd3dc;
+  --evt-context-menu-bg-color: #141414;
+  --evt-context-menu-text-color: #cfd3dc;
+  --evt-context-menu-item-hover-bg-color: #414243;
+}
+
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;
@@ -159,7 +216,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

@@ -1,3 +1,5 @@
+@use 'canvas-theme';
+
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;
@@ -164,7 +166,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.3",
   "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

@@ -4,20 +4,6 @@
   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';
   import {
     CanvasColumnProps,
     PCanvasGridProps,
@@ -25,28 +11,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,
@@ -655,7 +655,7 @@
           </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"

package/src/packages/components/PCanvasTable.vue

@@ -12,7 +12,7 @@
     OverlayerContainer,
     FormatterMethod,
   } from 'e-virt-table';
-  import { ref, onMounted, computed, useAttrs, watch } from 'vue';
+  import { ref, onMounted, onUnmounted, computed, useAttrs, watch } from 'vue';
   import { EventCallback } from 'e-virt-table/dist/lib/EventBus';
   import { isArray, isEqual, isFunction, isString, omit } from 'xe-utils';
   import renderStore from '@/store/renderStore';
@@ -20,8 +20,10 @@
   import type { CanvasColumnProps, CanvasTableProps, FormatterFunc, CellRender } from '#/antProxy';
   import { v4 as uuidv4 } from 'uuid';
   import { antFormatters } from '@/utils/AFormatters';
+  import { bindCanvasTableThemeSync, syncCanvasThemeCssVars, type CanvasTableThemeHandle } from '@/utils/canvasTableTheme';
   import { getCanvasTableDefaults } from '@/utils/config';
   import { watchPreviousDeep } from '@/utils/core';
+  import '../styles/canvas-theme.scss';
 
   const emit = defineEmits<{
     (e: 'change', value: any[]): void; // 需要默认实现change，不能动态绑定
@@ -45,6 +47,7 @@
     },
   }));
   let eVirtTable: EVirtTable | null = null;
+  let themeSyncHandle: CanvasTableThemeHandle | null = null;
   const attrs = useAttrs();
   const eVirtTableRef = ref(null);
   const eVirtTableEditorRef = ref(null);
@@ -150,6 +153,7 @@
     if (!eVirtTableRef.value) {
       return;
     }
+    syncCanvasThemeCssVars();
     eVirtTable = new EVirtTable(eVirtTableRef.value, {
       config: propsWithDefaults.value.config,
       columns: props.columns.map((col) => parseToEVirtColumn(col)),
@@ -190,6 +194,13 @@
       emit('selectionChange', selection);
     });
     emit('ready', eVirtTable);
+    themeSyncHandle = bindCanvasTableThemeSync({
+      getTable: () => eVirtTable,
+      getConfig: () => propsWithDefaults.value.config,
+    });
+  });
+  onUnmounted(() => {
+    themeSyncHandle?.disconnect();
   });
   function saveCellValue(value) {
     if (!eVirtTable || !editorCell.value) {

package/src/packages/styles/canvas-theme.scss

@@ -0,0 +1,57 @@
+/**
+ * EVirtTable（PCanvasGrid / PCanvasTable）主题变量
+ * - 与 PGrid 共用 --p-* 语义变量，保证 Canvas 表格与 DOM 表格同色
+ * - 无对应 --p-* 的项使用 storybook theme.css 默认值
+ * - e-virt-table 初始化时通过 Config.updateCssVar() 读取 --evt-*
+ */
+:root {
+  --evt-border-color: var(--p-border-color, #d9d9d9);
+  --evt-header-bg-color: var(--p-table-thead-bg-color, #f2f3f6);
+  --evt-body-bg-color: var(--p-table-row-bg-color, #fff);
+  --evt-stripe-color: var(--p-striped-bg-color, #f2f3f6);
+  --evt-highlight-hover-row-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  --evt-select-border-color: var(--p-primary-color, #4096ff);
+  --evt-sort-icon-color: var(--p-primary-color, #4096ff);
+  --evt-required-color: var(--p-danger-color, #f5222d);
+  --evt-error-tip-color: var(--p-danger-color, #f5222d);
+  --evt-error-tip-icon-color: var(--p-danger-color, #f5222d);
+  --evt-readonly-color: var(--p-table-row-bg-color, #fff);
+  --evt-scroller-track-color: var(--p-table-row-bg-color, #fff);
+
+  /* Canvas 专用（白天 = storybook 默认值） */
+  --evt-header-text-color: #1d2129;
+  --evt-body-text-color: #4e5969;
+  --evt-footer-text-color: #4e5969;
+  --evt-readonly-text-color: #4e5969;
+  --evt-scroller-color: #dee0e3;
+  --evt-scroller-focus-color: #bbbec4;
+  --evt-edit-bg-color: #fcf6ed;
+  --evt-footer-bg-color: #fafafa;
+  --evt-autofill-point-border-color: #fff;
+  --evt-editor-bg-color: #fff;
+  --evt-editor-text-color: #333;
+  --evt-context-menu-bg-color: #fff;
+  --evt-context-menu-text-color: #333;
+  --evt-context-menu-item-hover-bg-color: #f5f5f5;
+}
+
+/* 夜间：背景随 --p-* 传递，仅覆盖 Canvas 专用色 */
+html[theme-mode='dark'],
+:root[data-theme='dark'],
+:root.dark {
+  --evt-header-text-color: #a3a6ad;
+  --evt-body-text-color: #cfd3dc;
+  --evt-footer-text-color: #cfd3dc;
+  --evt-readonly-text-color: #a3a6ad;
+  --evt-scroller-color: #414243;
+  --evt-scroller-track-color: #141414;
+  --evt-scroller-focus-color: #a3a6ad;
+  --evt-edit-bg-color: #141414;
+  --evt-footer-bg-color: #262727;
+  --evt-autofill-point-border-color: #a3a6ad;
+  --evt-editor-bg-color: #434343;
+  --evt-editor-text-color: #cfd3dc;
+  --evt-context-menu-bg-color: #141414;
+  --evt-context-menu-text-color: #cfd3dc;
+  --evt-context-menu-item-hover-bg-color: #414243;
+}

package/src/packages/styles/index.scss

@@ -1,3 +1,5 @@
+@use 'canvas-theme';
+
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;
@@ -164,7 +166,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/src/packages/utils/canvasTableTheme.ts

@@ -0,0 +1,111 @@
+import type EVirtTable from 'e-virt-table';
+import type { ConfigType } from 'e-virt-table';
+
+/** --p-* → --evt-* 桥接（与 canvas-theme.scss / storybook theme.css 对齐） */
+const P_TO_EVT_BRIDGE: ReadonlyArray<readonly [evt: string, p: string, fallback: string]> = [
+  ['--evt-border-color', '--p-border-color', '#d9d9d9'],
+  ['--evt-header-bg-color', '--p-table-thead-bg-color', '#f2f3f6'],
+  ['--evt-body-bg-color', '--p-table-row-bg-color', '#fff'],
+  ['--evt-stripe-color', '--p-striped-bg-color', '#f2f3f6'],
+  ['--evt-highlight-hover-row-color', '--p-table-row-hover-bg-color', '#e6e7ea'],
+  ['--evt-select-border-color', '--p-primary-color', '#4096ff'],
+  ['--evt-sort-icon-color', '--p-primary-color', '#4096ff'],
+  ['--evt-required-color', '--p-danger-color', '#f5222d'],
+  ['--evt-error-tip-color', '--p-danger-color', '#f5222d'],
+  ['--evt-error-tip-icon-color', '--p-danger-color', '#f5222d'],
+  ['--evt-readonly-color', '--p-table-row-bg-color', '#fff'],
+  ['--evt-scroller-track-color', '--p-table-row-bg-color', '#fff'],
+];
+
+/** Canvas 专用色（无 --p-* 对应项，storybook 默认值） */
+const LIGHT_EVT_DEDICATED: Readonly<Record<string, string>> = {
+  '--evt-header-text-color': '#1d2129',
+  '--evt-body-text-color': '#4e5969',
+  '--evt-footer-text-color': '#4e5969',
+  '--evt-readonly-text-color': '#4e5969',
+  '--evt-scroller-color': '#dee0e3',
+  '--evt-scroller-focus-color': '#bbbec4',
+  '--evt-edit-bg-color': '#fcf6ed',
+  '--evt-footer-bg-color': '#fafafa',
+  '--evt-autofill-point-border-color': '#fff',
+  '--evt-editor-bg-color': '#fff',
+  '--evt-editor-text-color': '#333',
+  '--evt-context-menu-bg-color': '#fff',
+  '--evt-context-menu-text-color': '#333',
+  '--evt-context-menu-item-hover-bg-color': '#f5f5f5',
+};
+
+const DARK_EVT_DEDICATED: Readonly<Record<string, string>> = {
+  '--evt-header-text-color': '#a3a6ad',
+  '--evt-body-text-color': '#cfd3dc',
+  '--evt-footer-text-color': '#cfd3dc',
+  '--evt-readonly-text-color': '#a3a6ad',
+  '--evt-scroller-color': '#414243',
+  '--evt-scroller-track-color': '#141414',
+  '--evt-scroller-focus-color': '#a3a6ad',
+  '--evt-edit-bg-color': '#141414',
+  '--evt-footer-bg-color': '#262727',
+  '--evt-autofill-point-border-color': '#a3a6ad',
+  '--evt-editor-bg-color': '#434343',
+  '--evt-editor-text-color': '#cfd3dc',
+  '--evt-context-menu-bg-color': '#141414',
+  '--evt-context-menu-text-color': '#cfd3dc',
+  '--evt-context-menu-item-hover-bg-color': '#414243',
+};
+
+export function isDarkThemeRoot(el: HTMLElement = document.documentElement): boolean {
+  return (
+    el.getAttribute('theme-mode') === 'dark' ||
+    el.getAttribute('data-theme') === 'dark' ||
+    el.classList.contains('dark')
+  );
+}
+
+/**
+ * 将 --p-* 解析值写入 --evt-*，覆盖 e-virt-table 运行时注入的浅色默认值。
+ */
+export function syncCanvasThemeCssVars(el: HTMLElement = document.documentElement): void {
+  const computed = getComputedStyle(el);
+  for (const [evt, p, fallback] of P_TO_EVT_BRIDGE) {
+    const value = computed.getPropertyValue(p).trim() || fallback;
+    el.style.setProperty(evt, value);
+  }
+  const dedicated = isDarkThemeRoot(el) ? DARK_EVT_DEDICATED : LIGHT_EVT_DEDICATED;
+  for (const [evt, value] of Object.entries(dedicated)) {
+    el.style.setProperty(evt, value);
+  }
+}
+
+export type CanvasTableThemeHandle = {
+  disconnect: () => void;
+  sync: () => void;
+};
+
+/**
+ * 同步 CSS 变量并 loadConfig，使 Canvas 表格与 PGrid 主题一致。
+ */
+export function bindCanvasTableThemeSync(options: {
+  getTable: () => EVirtTable | null;
+  getConfig: () => ConfigType;
+}): CanvasTableThemeHandle {
+  const sync = () => {
+    syncCanvasThemeCssVars();
+    const table = options.getTable();
+    if (table) {
+      table.loadConfig(options.getConfig());
+    }
+  };
+
+  const observer = new MutationObserver(sync);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['theme-mode', 'class', 'data-theme'],
+  });
+
+  sync();
+
+  return {
+    sync,
+    disconnect: () => observer.disconnect(),
+  };
+}