@qin-ui/antd-vue-pro 2.5.3 → 2.6.0

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

@@ -0,0 +1,139 @@
+import { computed, toRaw, toValue, type ComputedRef } from 'vue';
+import { isObjectItem, isPlainObject } from '../../../shared/core';
+import { ELLIPSIS_TOOLTIP_CELL_ATTR } from './useEllipsisTooltip';
+
+type ColumnTransformResult = {
+  columns: any[];
+  changed: boolean;
+  hasTooltip: boolean;
+};
+
+/**
+ * 省略 Tooltip 列转换
+ *
+ * @description 一次遍历完成 hidden 过滤、分组子列递归与 showTooltip 列标记；
+ * 仅对发生变化的列生成克隆并登记原始列，供宿主回传列对象时还原。
+ * 列还原最多回溯两跳（宿主克隆 → 转换克隆 → 原始列），依赖单遍转换每列最多产生一层克隆。
+ *
+ * @param getColumns - 读取原始列配置
+ * @param globalEnabled - 是否全局启用列 Tooltip
+ * @returns 可见列、是否含 Tooltip 列与列还原函数
+ */
+export function useEllipsisTooltipColumns(
+  getColumns: () => any[],
+  globalEnabled: () => boolean = () => false
+): {
+  columns: ComputedRef<any[]>;
+  hasTooltip: ComputedRef<boolean>;
+  resolveOriginalColumn: (column: any) => any;
+  resolveSorterColumn: (sorter: any) => any;
+} {
+  const originalColumns = new WeakMap<object, any>();
+
+  const registerColumnClone = (next: any, source: any) => {
+    if (next !== source && isObjectItem(next) && !originalColumns.has(next)) {
+      originalColumns.set(next, source);
+    }
+    return next;
+  };
+
+  // 宿主内部列克隆通过 __originColumn__ 回指原始列（@private）
+  const resolveOriginalColumn = (column: any) => {
+    const raw = toRaw(column);
+    const source = originalColumns.get(raw) ?? raw.__originColumn__;
+    if (!isObjectItem(source)) return column;
+    return originalColumns.get(toRaw(source)) ?? source;
+  };
+
+  const resolveSorterColumn = (sorter: any) =>
+    sorter && typeof sorter === 'object' && sorter.column
+      ? { ...sorter, column: resolveOriginalColumn(sorter.column) }
+      : sorter;
+
+  const transformColumns = (
+    columns: any[],
+    global: boolean,
+    ancestors: Set<object> = new Set()
+  ): ColumnTransformResult => {
+    const list: any[] = [];
+    let changed = false;
+    let hasTooltip = false;
+
+    for (const column of columns) {
+      if (!isObjectItem(column) || toValue(column.hidden)) {
+        changed = true;
+        continue;
+      }
+
+      let childChanged = false;
+      let childColumns = column.children;
+      let childHasTooltip = false;
+
+      if (Array.isArray(column.children) && column.children.length > 0) {
+        if (ancestors.has(column)) {
+          changed = true;
+          continue;
+        }
+        ancestors.add(column);
+        const child = transformColumns(column.children, global, ancestors);
+        ancestors.delete(column);
+        childChanged = child.changed;
+        childColumns = child.columns;
+        childHasTooltip = child.hasTooltip;
+      }
+
+      const ellipsis = column.ellipsis;
+      const explicit =
+        ellipsis === false
+          ? false
+          : isPlainObject(ellipsis)
+            ? ellipsis.showTooltip
+            : undefined;
+      const tooltipEnabled =
+        explicit === false ? false : global || explicit === true;
+      let next = column;
+
+      if (childChanged || tooltipEnabled) {
+        const { showTooltip: _showTooltip, ...restEllipsis } = isPlainObject(
+          ellipsis
+        )
+          ? ellipsis
+          : {};
+        const customCell = column.customCell;
+        next = {
+          ...column,
+          ...(childChanged ? { children: childColumns } : {}),
+          ...(tooltipEnabled
+            ? {
+                ellipsis: { ...restEllipsis, showTitle: false },
+                customCell: (
+                  record: any,
+                  rowIndex: number,
+                  cellColumn: any
+                ) => ({
+                  ...(customCell?.(record, rowIndex, cellColumn) ?? {}),
+                  [ELLIPSIS_TOOLTIP_CELL_ATTR]: '',
+                }),
+              }
+            : {}),
+        };
+        registerColumnClone(next, column);
+        changed = true;
+      }
+
+      if (tooltipEnabled || childHasTooltip) hasTooltip = true;
+      list.push(next);
+    }
+
+    return { columns: changed ? list : columns, changed, hasTooltip };
+  };
+
+  const state = computed(() => transformColumns(getColumns(), globalEnabled()));
+
+  return {
+    columns: computed(() => state.value.columns),
+    hasTooltip: computed(() => state.value.hasTooltip),
+    resolveOriginalColumn,
+    resolveSorterColumn,
+  };
+}

package/src/components/table/index.ts

@@ -10,7 +10,13 @@ export type ProTableProps = ComponentProps<typeof ProTable>;
 export type ProTableInstance = ComponentExposed<typeof ProTable>;
 
 // 仅导出核心列配置类型
-export { type Column, type ColumnControlConfig, type Columns } from './types';
+export {
+  type Column,
+  type ColumnControlConfig,
+  type ColumnEllipsis,
+  type Columns,
+  type EllipsisTooltipConfig,
+} from './types';
 
 // 仅导出核心表格 Hook 与类型
 export { useTable, type Table } from './hooks';

package/src/components/table/types/index.ts

@@ -1,9 +1,64 @@
-import type { ColumnType } from '../../../shared/ui';
+import type { ColumnType, TooltipProps } from '../../../shared/ui';
 import type { Data, KeyExpandString, Paths, Path } from '../../../shared/core';
 import type { ComputedRef, MaybeRef } from 'vue';
 
 type MaybeRefOrComputedRef<T = any> = MaybeRef<T> | ComputedRef<T>;
 
+/**
+ * 列内容省略配置
+ *
+ * @description 在宿主 `ellipsis` 基础上增加 `showTooltip`：单元格文本横向溢出时，
+ * 悬停由表格级共享的同一个 Tooltip 展示完整文本。`showTooltip` 为 `true` 时不输出宿主原生 `title`。
+ *
+ * @example
+ * ```ts
+ * const column: Column<User> = {
+ *   dataIndex: 'name',
+ *   ellipsis: { showTooltip: true },
+ * }
+ * ```
+ *
+ * @public
+ */
+export type ColumnEllipsis = NonNullable<
+  Exclude<ColumnType['ellipsis'], boolean>
+> & {
+  /** 文本溢出时是否显示表格级共享 Tooltip */
+  showTooltip?: boolean;
+};
+
+/**
+ * ProTable 共享省略 Tooltip 配置
+ *
+ * @description 复用宿主 Tooltip 的容器、延迟、方位与浮层样式字段，控制表格级单例 Tooltip。
+ * ProTable 侧另接受 `true` 作为全局启用简写；列上 `showTooltip: false` 或 `ellipsis: false` 可退出。
+ *
+ * @example
+ * ```ts
+ * const config: EllipsisTooltipConfig = {
+ *   getPopupContainer: () => document.body,
+ *   mouseEnterDelay: 0.2,
+ *   mouseLeaveDelay: 0.1,
+ *   placement: 'top',
+ * }
+ * ```
+ *
+ * @public
+ */
+export type EllipsisTooltipConfig = Pick<
+  TooltipProps,
+  | 'getPopupContainer'
+  | 'mouseEnterDelay'
+  | 'mouseLeaveDelay'
+  | 'placement'
+  | 'arrow'
+  | 'autoAdjustOverflow'
+  | 'color'
+  | 'overlayClassName'
+  | 'overlayStyle'
+  | 'overlayInnerStyle'
+>;
+
 /**
  * 表格列配置类型
  *
@@ -11,6 +66,7 @@ type MaybeRefOrComputedRef<T = any> = MaybeRef<T> | ComputedRef<T>;
  * - 类型安全的 dataIndex（基于泛型 D 推导路径），优先使用
  * - key 作为辅助标识，当 dataIndex 不满足需求时使用
  * - hidden 属性用于控制列显隐
+ * - ellipsis 支持 `{ showTooltip: boolean }` 的表格级共享 Tooltip
  * - 所有 Ant Design Vue 原生的列属性依然可用（title、width、fixed、align 等）
  *
  * @template D - 表格行数据类型
@@ -37,7 +93,7 @@ type MaybeRefOrComputedRef<T = any> = MaybeRef<T> | ComputedRef<T>;
  */
 export type Column<D extends Data = Data> = Omit<
   ColumnType,
-  'dataIndex' | 'key'
+  'dataIndex' | 'key' | 'ellipsis'
 > & {
   /**
    * 列数据路径（主要字段）
@@ -59,6 +115,10 @@ export type Column<D extends Data = Data> = Omit<
    * @default false
    */
   hidden?: MaybeRefOrComputedRef<boolean>;
+  /**
+   * 列内容省略配置；`true` 等价于宿主默认省略，对象形态额外支持表格级共享 Tooltip
+   */
+  ellipsis?: boolean | ColumnEllipsis;
   /**
    * 分组子列；提供时该列作为分组表头渲染，子列沿用同一配置类型
    */

package/src/shared/ui/index.ts

@@ -36,6 +36,7 @@ export {
   Transfer,
   TreeSelect,
   RangePicker,
+  Tooltip,
   type FormItemInstance,
   type FormInstance,
   type RowProps as GridProps,
@@ -45,6 +46,7 @@ export {
 } from 'ant-design-vue';
 
 export { type ColumnType, tableProps } from 'ant-design-vue/es/table';
+export type { TooltipProps } from 'ant-design-vue';
 export { type RangePickerProps } from 'ant-design-vue/es/date-picker';
 export { useConfigContextInject } from 'ant-design-vue/es/config-provider/context';
 export {