@qin-ui/antd-vue-pro 2.6.1 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/antd-vue-pro",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "二次封装antd vue组件",
   "bin": {
     "antd-vue-pro": "./bin/init-ai.mjs"

package/src/components/form/components/ProForm/index.vue

@@ -30,14 +30,14 @@
  * @param {...FormProps} ...attrs - Ant Design Vue Form 组件的其他属性
  *
  * @slot default - 默认插槽，可用于添加额外内容
- * @slot [path] - 以字段 path 命名的动态插槽，可用于自定义字段渲染
+ * @slot [path] - 以字段 path 命名的动态插槽，优先于 component 渲染；作用域含字段值 value、回写通道 onUpdate:value、disabled、path 与合并后的控件属性，可直接 v-bind 给控件
  *
  * @example
  * ```vue
  * <template>
  *   <ProForm :form="form" @submit="handleSubmit">
- *     <template #name="{ value, disabled }">
- *       <a-input :value="value" :disabled="disabled" />
+ *     <template #name="scoped">
+ *       <a-input v-bind="scoped" />
  *     </template>
  *   </ProForm>
  * </template>

package/src/components/table/components/ProTable.vue

@@ -489,6 +489,11 @@ const ellipsisTooltipProps = computed(() => {
   return rest;
 });
 
+const ellipsisTooltipOverlay = shallowRef<HTMLElement | null>(null);
+const setEllipsisTooltipOverlay = (element: HTMLElement | null) => {
+  ellipsisTooltipOverlay.value = element;
+};
+
 const {
   open: ellipsisTooltipOpen,
   content: ellipsisTooltipContent,
@@ -500,7 +505,8 @@ const {
   rootRef,
   ellipsisTooltipEnabled,
   ellipsisTooltipDelay,
-  ellipsisTooltipLeaveDelay
+  ellipsisTooltipLeaveDelay,
+  ellipsisTooltipOverlay
 );
 
 // 数据源优先级：显式绑定 > table 实例（useTable 创建的 dataSource）
@@ -746,6 +752,7 @@ defineExpose({
       :anchor-style="ellipsisTooltipAnchorStyle"
       :container="ellipsisTooltipContainer"
       v-bind="ellipsisTooltipProps"
+      :set-overlay-element="setEllipsisTooltipOverlay"
     />
   </div>
 </template>
@@ -756,15 +763,12 @@ defineExpose({
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    margin-bottom: 8px;
 
     &:empty {
       display: none;
     }
 
-    & + &_content {
-      margin-top: 16px;
-    }
-
     &_button-bar {
       flex: 1;
     }

package/src/components/table/components/TableEllipsisTooltip.vue

@@ -6,9 +6,20 @@
  * @description 以固定定位锚点承载单个宿主 Tooltip，锚点位置由 ProTable 按悬停单元格更新；
  * 整个表格只渲染一个 Tooltip 实例，实例数量不随单元格数量增长。
  */
-import { nextTick, ref, useAttrs, watch, type Component } from 'vue';
+import {
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  useAttrs,
+  watch,
+  type Component,
+} from 'vue';
 import { Tooltip as ATooltip } from '../../../shared/ui';
-import type { EllipsisTooltipAnchorStyle } from '../hooks/useEllipsisTooltip';
+import {
+  registerEllipsisTooltipOverlay,
+  unregisterEllipsisTooltipOverlay,
+  type EllipsisTooltipAnchorStyle,
+} from '../hooks/useEllipsisTooltip';
 import type { EllipsisTooltipConfig } from '../types';
 
 defineOptions({ name: 'TableEllipsisTooltip', inheritAttrs: false });
@@ -23,6 +34,7 @@ type Props = {
   content?: string;
   anchorStyle?: EllipsisTooltipAnchorStyle;
   container?: () => HTMLElement | null | undefined;
+  setOverlayElement?: (element: HTMLElement | null) => void;
 } & /* @vue-ignore */ HostTooltipProps;
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
     opacity: 0,
   }),
   container: () => undefined,
+  setOverlayElement: () => undefined,
 });
 const attrs = useAttrs() as HostTooltipProps;
 const HostTooltip = ATooltip as unknown as Component;
@@ -41,14 +54,58 @@ const HostTooltip = ATooltip as unknown as Component;
 type TooltipInstance = {
   forceAlign?: () => void;
   forcePopupAlign?: () => void;
+  getPopupDomNode?: () => HTMLElement | undefined;
 };
 
 const tooltipRef = ref<TooltipInstance | null>(null);
+let currentOverlay: HTMLElement | null = null;
+let overlaySyncToken = 0;
+
+const getContainerNode = (): HTMLElement | undefined => {
+  const container = props.container?.();
+  if (container) return container;
+  return typeof document !== 'undefined' ? document.body : undefined;
+};
+
+/** 读取宿主 Tooltip 浮层节点 */
+const getPopupElement = (): HTMLElement | null =>
+  tooltipRef.value?.getPopupDomNode?.() ?? null;
+
+/** 同步浮层节点引用与全局登记 */
+const syncOverlayElement = (next: HTMLElement | null) => {
+  if (currentOverlay === next) return;
+  if (currentOverlay) unregisterEllipsisTooltipOverlay(currentOverlay);
+  currentOverlay = next;
+  props.setOverlayElement(next);
+  if (next) registerEllipsisTooltipOverlay(next);
+};
+
+/** 浮层渲染后同步节点引用，宿主延迟挂载时重试 */
+const syncOverlayFromDom = async () => {
+  if (!props.open) return;
+  const token = ++overlaySyncToken;
+  for (let attempt = 0; attempt < 3; attempt += 1) {
+    const popup = getPopupElement();
+    if (popup) {
+      if (token === overlaySyncToken) syncOverlayElement(popup);
+      return;
+    }
+    if (!props.open) return;
+    await new Promise(resolve => setTimeout(resolve, 0));
+  }
+  if (token === overlaySyncToken) syncOverlayElement(null);
+};
+
+const clearOverlay = () => {
+  overlaySyncToken += 1;
+  syncOverlayElement(null);
+};
 
 /** 锚点或内容变化后重算宿主浮层位置 */
 const forceAlign = async () => {
   if (!props.open) return;
   await nextTick();
+  syncOverlayFromDom();
   const instance = tooltipRef.value;
   (instance?.forceAlign ?? instance?.forcePopupAlign)?.();
 };
@@ -57,15 +114,15 @@ watch(() => props.anchorStyle, forceAlign, { deep: true });
 watch(
   () => props.open,
   value => {
-    if (value) forceAlign();
+    if (value) {
+      forceAlign();
+    } else {
+      clearOverlay();
+    }
   }
 );
 
-const getContainerNode = (): HTMLElement | undefined => {
-  const container = props.container?.();
-  if (container) return container;
-  return typeof document !== 'undefined' ? document.body : undefined;
-};
+onBeforeUnmount(clearOverlay);
 
 const getPopupContainer = () => getContainerNode() ?? document.body;
 </script>

package/src/components/table/hooks/useEllipsisTooltip.ts

@@ -13,6 +13,19 @@ export const ELLIPSIS_TOOLTIP_CELL_ATTR = 'data-pro-table-ellipsis';
 /** ProTable 根节点归属标记 */
 export const PRO_TABLE_ROOT_ATTR = 'data-pro-table-root';
 
+/** 当前打开中的省略 Tooltip 浮层 */
+const activeOverlays = new Set<HTMLElement>();
+
+/** 登记省略 Tooltip 浮层 */
+export const registerEllipsisTooltipOverlay = (overlay: HTMLElement) => {
+  activeOverlays.add(overlay);
+};
+
+/** 注销省略 Tooltip 浮层 */
+export const unregisterEllipsisTooltipOverlay = (overlay: HTMLElement) => {
+  activeOverlays.delete(overlay);
+};
+
 /** 共享 Tooltip 锚点样式 */
 export type EllipsisTooltipAnchorStyle = {
   position: 'fixed';
@@ -68,24 +81,85 @@ const measureCell = (cell: HTMLElement): CellMeasurement => {
   };
 };
 
+/** 单元格内容盒矩形 */
+type ContentRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+/** 解析计算样式中的像素长度，非法值按 0 处理 */
+const toPixel = (value: string) => Number.parseFloat(value) || 0;
+
+/** 读取单元格内容盒矩形：扣除边框与内边距 */
+const measureContentRect = (cell: HTMLElement): ContentRect => {
+  const rect = cell.getBoundingClientRect();
+  const style = getComputedStyle(cell);
+  const insetLeft = toPixel(style.borderLeftWidth) + toPixel(style.paddingLeft);
+  const insetTop = toPixel(style.borderTopWidth) + toPixel(style.paddingTop);
+  const insetRight =
+    toPixel(style.borderRightWidth) + toPixel(style.paddingRight);
+  const insetBottom =
+    toPixel(style.borderBottomWidth) + toPixel(style.paddingBottom);
+
+  return {
+    left: rect.left + insetLeft,
+    top: rect.top + insetTop,
+    width: Math.max(0, rect.width - insetLeft - insetRight),
+    height: Math.max(0, rect.height - insetTop - insetBottom),
+  };
+};
+
+/** 读取单元格文本行矩形并裁剪到内容盒，文本行不可用时回退内容盒 */
+const measureTextRect = (
+  cell: HTMLElement,
+  content: ContentRect
+): ContentRect => {
+  if (
+    typeof document === 'undefined' ||
+    typeof document.createRange !== 'function'
+  ) {
+    return content;
+  }
+  const range = document.createRange();
+  range.selectNodeContents(cell);
+  const rect = range.getBoundingClientRect();
+  if (!rect.width || !rect.height) return content;
+  const left = Math.max(rect.left, content.left);
+  const top = Math.max(rect.top, content.top);
+  const right = Math.min(rect.right, content.left + content.width);
+  const bottom = Math.min(rect.bottom, content.top + content.height);
+  if (right <= left || bottom <= top) return content;
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top,
+  };
+};
+
 /**
  * 表格级共享省略 Tooltip
  *
  * @description
- * 在 ProTable 根节点上以事件委托识别带标记的 body 单元格，维护单个 Tooltip 的显隐、文本与固定定位锚点；
- * 仅在单元格文本横向溢出时触发；表格滚动、窗口尺寸变化、KeepAlive 停用时关闭，卸载时移除监听。
+ * 在 ProTable 根节点上以事件委托识别带标记的 body 单元格，维护单个 Tooltip 的显隐、文本与按单元格文本行矩形计算的固定定位锚点，文本行矩形不可用时回退单元格内容盒；
+ * 仅在单元格文本横向溢出时触发；鼠标移入浮层时保持展示，移出浮层后按离开延迟关闭；
+ * 表格滚动、窗口尺寸变化、KeepAlive 停用时关闭，卸载时移除监听。
  *
  * @param rootRef - ProTable 根节点引用
  * @param enabled - 是否启用共享 Tooltip；为 false 时不注册全局监听
  * @param delay - 悬停延迟（ms），0 表示立即展示
  * @param leaveDelay - 移出延迟（ms），0 表示立即关闭
+ * @param overlayElement - 当前 Tooltip 浮层节点引用
  * @returns Tooltip 状态与根节点事件处理器
  */
 export function useEllipsisTooltip(
   rootRef: Ref<HTMLElement | null | undefined>,
   enabled: Ref<boolean>,
   delay: Ref<number>,
-  leaveDelay: Ref<number>
+  leaveDelay: Ref<number>,
+  overlayElement: Ref<HTMLElement | null | undefined>
 ): EllipsisTooltipState {
   const open = ref(false);
   const content = ref('');
@@ -94,14 +168,18 @@ export function useEllipsisTooltip(
   });
   let activeCell: HTMLElement | null = null;
   let pendingCell: HTMLElement | null = null;
+  let pendingContent = '';
+  let pendingRect: ContentRect | null = null;
   let openTimer: ReturnType<typeof setTimeout> | null = null;
   let closeTimer: ReturnType<typeof setTimeout> | null = null;
 
   const clearOpenTimer = () => {
+    pendingCell = null;
+    pendingContent = '';
+    pendingRect = null;
     if (openTimer === null) return;
     clearTimeout(openTimer);
     openTimer = null;
-    pendingCell = null;
   };
 
   const clearCloseTimer = () => {
@@ -110,16 +188,82 @@ export function useEllipsisTooltip(
     closeTimer = null;
   };
 
+  const getEventRoot = (node: Node | null) => {
+    const element = node instanceof Element ? node : node?.parentElement;
+    return element?.closest?.(`[${PRO_TABLE_ROOT_ATTR}]`) ?? null;
+  };
+
   const close = () => {
     clearOpenTimer();
     clearCloseTimer();
     open.value = false;
     activeCell = null;
+    removeOverlayListeners();
   };
 
-  const getEventRoot = (node: Node | null) => {
-    const element = node instanceof Element ? node : node?.parentElement;
-    return element?.closest?.(`[${PRO_TABLE_ROOT_ATTR}]`) ?? null;
+  const scheduleClose = () => {
+    clearCloseTimer();
+    const delayMs = Math.max(0, leaveDelay.value);
+    if (delayMs === 0) {
+      close();
+      return;
+    }
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
+      close();
+    }, delayMs);
+  };
+
+  const isOverlayNode = (node: EventTarget | null) => {
+    const overlay = overlayElement.value;
+    return Boolean(overlay && node instanceof Node && overlay.contains(node));
+  };
+
+  const isForeignOverlayNode = (node: EventTarget | null) => {
+    if (!(node instanceof Node)) return false;
+    const own = overlayElement.value;
+    for (const overlay of activeOverlays) {
+      if (overlay !== own && overlay.contains(node)) return true;
+    }
+    return false;
+  };
+
+  const onOverlayMouseOver = (event: MouseEvent) => {
+    if (!isOverlayNode(event.target)) return;
+    clearCloseTimer();
+  };
+
+  const onOverlayMouseOut = (event: MouseEvent) => {
+    if (!isOverlayNode(event.target)) return;
+    const related = event.relatedTarget;
+    if (isOverlayNode(related)) return;
+    if (isForeignOverlayNode(related)) {
+      close();
+      return;
+    }
+    if (activeCell && related instanceof Node && activeCell.contains(related)) {
+      const relatedRoot = getEventRoot(related);
+      if (!relatedRoot || relatedRoot === rootRef.value) return;
+      close();
+      return;
+    }
+    scheduleClose();
+  };
+
+  let overlayListening = false;
+
+  const addOverlayListeners = () => {
+    if (overlayListening || typeof document === 'undefined') return;
+    overlayListening = true;
+    document.addEventListener('mouseover', onOverlayMouseOver);
+    document.addEventListener('mouseout', onOverlayMouseOut);
+  };
+
+  const removeOverlayListeners = () => {
+    if (!overlayListening) return;
+    overlayListening = false;
+    document.removeEventListener('mouseover', onOverlayMouseOver);
+    document.removeEventListener('mouseout', onOverlayMouseOut);
   };
 
   const getCellFromEvent = (event: MouseEvent) => {
@@ -140,24 +284,32 @@ export function useEllipsisTooltip(
     close();
     const measurement = measureCell(cell);
     if (!measurement.overflow) return;
-    const rect = cell.getBoundingClientRect();
-    if (!rect.width || !rect.height) return;
-    content.value = measurement.text;
-    anchorStyle.value = {
-      ...ANCHOR_BASE_STYLE,
-      left: `${rect.left}px`,
-      top: `${rect.top}px`,
-      width: `${rect.width}px`,
-      height: `${rect.height}px`,
-    };
+    const contentRect = measureContentRect(cell);
+    if (!contentRect.width || !contentRect.height) return;
+    const rect = measureTextRect(cell, contentRect);
+    pendingContent = measurement.text;
+    pendingRect = rect;
     pendingCell = cell;
     openTimer = setTimeout(
       () => {
         openTimer = null;
         pendingCell = null;
-        if (!cell.isConnected) return;
+        const anchorRect = pendingRect;
+        const nextContent = pendingContent;
+        pendingContent = '';
+        pendingRect = null;
+        if (!cell.isConnected || !anchorRect) return;
+        content.value = nextContent;
+        anchorStyle.value = {
+          ...ANCHOR_BASE_STYLE,
+          left: `${anchorRect.left}px`,
+          top: `${anchorRect.top}px`,
+          width: `${anchorRect.width}px`,
+          height: `${anchorRect.height}px`,
+        };
         activeCell = cell;
         open.value = true;
+        addOverlayListeners();
       },
       Math.max(0, delay.value)
     );
@@ -171,6 +323,11 @@ export function useEllipsisTooltip(
     if (!owner || !target || !owner.contains(target)) return;
 
     const related = event.relatedTarget as Node | null;
+    if (isOverlayNode(related)) return;
+    if (isForeignOverlayNode(related)) {
+      close();
+      return;
+    }
     if (related && owner.contains(related)) {
       const relatedRoot = getEventRoot(related);
       if (!relatedRoot || relatedRoot === rootRef.value) return;
@@ -183,16 +340,7 @@ export function useEllipsisTooltip(
       return;
     }
 
-    clearCloseTimer();
-    const delayMs = Math.max(0, leaveDelay.value);
-    if (delayMs === 0) {
-      close();
-      return;
-    }
-    closeTimer = setTimeout(() => {
-      closeTimer = null;
-      close();
-    }, delayMs);
+    scheduleClose();
   };
 
   const onViewportChange = () => close();
@@ -229,6 +377,7 @@ export function useEllipsisTooltip(
 
   onBeforeUnmount(() => {
     removeViewportListeners();
+    removeOverlayListeners();
     clearOpenTimer();
     clearCloseTimer();
   });