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

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

@@ -46,11 +46,12 @@
  * @param {boolean | Partial<Control>} [control] - 是否展示尺寸与列控制按钮；显式传入 columns 时列控入口不渲染
  * @param {SearchFormConfig} [searchFormConfig] - 搜索栏查询字段表单配置
  * @param {ContainerComponent | false} [tableContainer] - 表格区域包裹容器
+ * @param {boolean | EllipsisTooltipConfig} [ellipsisTooltip] - truthy 时全局启用所有列；对象同时作为 Tooltip 配置；列上 `showTooltip: false` 或 `ellipsis: false` 可退出
  *
  * @slot search-form - 搜索区域插槽，作用域参数 form / search / reset
  * @slot button-bar - 表格头部按钮区插槽
  * @slot toolbar - 工具栏插槽
- * @slot default - 透传给宿主表格的默认插槽（可用于以宿主列组件声明列）
+ * @slot default - 透传给宿主表格的默认插槽；未显式绑定 `columns` 且表格实例无列时用于声明列，显式传入（含空数组）时以列配置为准
  * @slot table - 表格区域插槽，作用域参数 columns / dataSource / pagination / loading / size / onChange
  */
 import type {
@@ -58,14 +59,19 @@ import type {
   TableProps,
   ColumnType,
 } from '../../../shared/ui';
-import { Table as ATable, tableProps } from '../../../shared/ui';
+import { Table as ATable, TableColumn, tableProps } from '../../../shared/ui';
 import {
   computed,
   getCurrentInstance,
   nextTick,
   onMounted,
+  onUpdated,
   inject,
+  ref,
+  shallowRef,
   toValue,
+  triggerRef,
+  watch,
   type Slot,
 } from 'vue';
 import { INJECT_CONFIG } from '../../component-provider/constants';
@@ -78,6 +84,7 @@ import { useLocale } from '../../../locale';
 import type { Path } from '../../../shared/core';
 import {
   camelizeProperties,
+  callListeners,
   getObject,
   isObjectItem,
   isPlainObject,
@@ -91,7 +98,15 @@ import DefaultSearchFormContainer from './DefaultSearchFormContainer.vue';
 import DefaultTableContainer from './DefaultTableContainer.vue';
 import SizeControl from './SizeControl.vue';
 import ColumnControl from './ColumnControl.vue';
-import type { Column, Columns, ColumnControlConfig } from '../types';
+import TableEllipsisTooltip from './TableEllipsisTooltip.vue';
+import { useEllipsisTooltip } from '../hooks/useEllipsisTooltip';
+import { useEllipsisTooltipColumns } from '../hooks/useEllipsisTooltipColumns';
+import type {
+  Column,
+  Columns,
+  ColumnControlConfig,
+  EllipsisTooltipConfig,
+} from '../types';
 
 defineOptions({ name: 'ProTable', inheritAttrs: false });
 
@@ -124,6 +139,8 @@ type Props = {
   searchFormConfig?: SearchFormConfig;
   /** 表格区域包裹容器 */
   tableContainer?: ContainerComponent | false;
+  /** 表格级省略 Tooltip 配置；truthy 时全局启用 */
+  ellipsisTooltip?: boolean | EllipsisTooltipConfig;
 } & /* @vue-ignore */ TableProps;
 
 const props = withDefaults(defineProps<Props>(), {
@@ -134,6 +151,7 @@ const props = withDefaults(defineProps<Props>(), {
   control: undefined,
   searchFormConfig: undefined,
   tableContainer: undefined,
+  ellipsisTooltip: undefined,
 });
 
 const { t } = useLocale();
@@ -171,6 +189,8 @@ const searchFormProps = computed(() => {
 
 const attrs: Record<string, any> = useReactiveAttrs();
 
+const rootRef = ref<HTMLElement | null>(null);
+
 const size = defineModel<TableProps['size']>('size');
 const loading = defineModel<boolean>('loading', { default: false });
 
@@ -194,16 +214,21 @@ const _search = async () => {
   if (props.search && attrs.onSearch) {
     warnSearchConfig('duplicate');
   }
-  if (!search) return;
-  const searchPromise = search();
-  if (!isPromise(searchPromise)) {
+  const results = callListeners(search);
+  if (!results.length) return;
+  const promises = results.filter(isPromise);
+  if (!promises.length) {
     warnSearchConfig('not-promise');
     return;
   }
   const seq = ++searchSequence;
   loading.value = true;
   try {
-    await searchPromise;
+    const settled = await Promise.allSettled(promises);
+    const rejected = settled.find(item => item.status === 'rejected') as
+      | PromiseRejectedResult
+      | undefined;
+    if (rejected) throw rejected.reason;
   } finally {
     if (seq === searchSequence) {
       loading.value = false;
@@ -238,9 +263,17 @@ type TableSlots = Omit<ComponentSlots<typeof ATable>, 'bodyCell'> &
       column: Column<RecordType>;
     }) => void;
   }>;
-type Slots = Omit<TableSlots & CustomSlots, 'default'>;
+type Slots = Omit<TableSlots & CustomSlots, 'default'> & {
+  /** 透传宿主表格的默认插槽，用于以宿主列组件声明列 */
+  default?: Slot;
+};
 
 const slots = defineSlots<Slots>();
+/* 默认插槽存在性随父级重渲染更新：运行期增删插槽后插槽列模式可感知 */
+const slotsRef = shallowRef<Record<string, any>>(slots);
+onUpdated(() => {
+  triggerRef(slotsRef);
+});
 const forwardedSlotNames = () =>
   (Object.keys(slots) as Array<Extract<keyof Slots, string>>).filter(
     name => !customSlotNames.includes(name as any)
@@ -318,25 +351,6 @@ const effectiveSize = computed<TableProps['size']>(() => {
   return size.value ?? injectAttrs.value.size;
 });
 
-/*
- * 下发给宿主表格的属性：Provider 注入为底（其不可注入键已在注入层剔除），调用方绑定与 v-model 透传值覆盖同键。
- * size / loading 为声明模型，其 onUpdate:* 回写通道不进入 attrs，无需另行剔除
- */
-const computedTableProps = computed<TableProps>(() => {
-  const merged = {
-    ...injectAttrs.value,
-    ...omitBy(
-      pick(camelAttrs.value, tableProperties),
-      value => value === undefined
-    ),
-  } as Record<string, any>;
-  // onChange 由模板监听器收口，散落 attrs 中的同名监听器并入会形成重复回调
-  delete merged.onChange;
-  merged.size = effectiveSize.value;
-  merged.loading = undefined;
-  return merged as TableProps;
-});
-
 const computedTableContainer = computed(() => {
   const container =
     props.tableContainer ??
@@ -369,53 +383,125 @@ const indexColumn = computed<ColumnType>(() => ({
   customRender: ({ index }) => getIndex(index),
 }));
 
+/** 插槽序号列的单元格渲染：按有效分页偏移行号 */
+const slotIndexRender = ({ index }: { index: number }) => getIndex(index);
+
 // 列来源优先级：显式绑定 > table 实例（useTable 创建的 columns）；显式列原样透传，不补齐 key
-const computedColumns = computed<Columns<RecordType>>(() => {
-  const cols = (resolveOwnedProp('columns') ??
+const columnSource = computed<any[]>(() => {
+  return (resolveOwnedProp('columns') ??
     toValue(props.table?.columns) ??
-    []) as any;
-  const needIndex = props.addIndexColumn ?? injectProps.value.addIndexColumn;
-  return needIndex ? [indexColumn.value, ...cols] : cols;
+    []) as any[];
 });
 
+/* 无列源且存在默认插槽时由宿主消费插槽列，序号列改由插槽内的列组件提供 */
+const slotColumnsMode = computed(
+  () =>
+    !hasExplicitColumns.value &&
+    Boolean(slotsRef.value.default) &&
+    columnSource.value.length === 0
+);
+const indexEnabled = computed(() =>
+  Boolean(props.addIndexColumn ?? injectProps.value.addIndexColumn)
+);
+
+const computedColumns = computed<Columns<RecordType>>(() => {
+  if (slotColumnsMode.value) return [];
+  return indexEnabled.value
+    ? [indexColumn.value, ...columnSource.value]
+    : columnSource.value;
+});
+
+const ellipsisTooltipValue = computed(
+  () => props.ellipsisTooltip ?? injectProps.value.ellipsisTooltip
+);
+const ellipsisTooltipConfig = computed<EllipsisTooltipConfig>(() =>
+  typeof ellipsisTooltipValue.value === 'object' && ellipsisTooltipValue.value
+    ? ellipsisTooltipValue.value
+    : {}
+);
+const ellipsisTooltipGlobal = computed(() =>
+  Boolean(ellipsisTooltipValue.value)
+);
+
+const {
+  columns: visibleComputedColumns,
+  hasTooltip: ellipsisTooltipEnabled,
+  resolveOriginalColumn,
+  resolveSorterColumn,
+} = useEllipsisTooltipColumns(
+  () => computedColumns.value,
+  () => ellipsisTooltipGlobal.value
+);
+
+/* 宿主列绑定：插槽列模式下不下发列配置，其余模式始终以列配置为准 */
+const hostColumns = computed(() =>
+  slotColumnsMode.value ? undefined : visibleComputedColumns.value
+);
+
 /*
- * 递归过滤 hidden 列（含分组子列）：仅对被过滤过子列的列生成浅拷贝，
- * 未发生变动的列保持原对象引用（每次 columns 变化执行一次，不在渲染期递归）
+ * 下发给宿主表格的属性：Provider 注入为底（其不可注入键已在注入层剔除），调用方绑定与 v-model 透传值覆盖同键。
+ * size / loading 为声明模型，其 onUpdate:* 回写通道不进入 attrs，无需另行剔除
  */
-const filterVisibleColumns = (
-  columns: any[],
-  ancestors: Set<object> = new Set()
-): { list: any[]; changed: boolean } => {
-  const list: any[] = [];
-  let changed = false;
-  for (const column of columns) {
-    if (!isObjectItem(column) || toValue((column as Column).hidden)) {
-      changed = true;
-      continue;
-    }
-    if (Array.isArray(column.children) && column.children.length > 0) {
-      // 环状分组列不再深入，重复出现的祖先引用直接剔除
-      if (ancestors.has(column)) {
-        changed = true;
-        continue;
-      }
-      ancestors.add(column);
-      const filtered = filterVisibleColumns(column.children, ancestors);
-      ancestors.delete(column);
-      if (filtered.changed) {
-        changed = true;
-        list.push({ ...column, children: filtered.list });
-        continue;
-      }
-    }
-    list.push(column);
+const computedTableProps = computed<TableProps>(() => {
+  const merged = {
+    ...injectAttrs.value,
+    ...omitBy(
+      pick(camelAttrs.value, tableProperties),
+      value => value === undefined
+    ),
+  } as Record<string, any>;
+  // onChange 由模板监听器收口，散落 attrs 中的同名监听器并入会形成重复回调
+  delete merged.onChange;
+  // resizeColumn 回传转换列时，用户回调仍操作原始列
+  const resizeColumn = merged.onResizeColumn;
+  if (typeof resizeColumn === 'function') {
+    merged.onResizeColumn = (width: number, column: any) =>
+      resizeColumn(width, resolveOriginalColumn(column));
   }
-  return { list, changed };
-};
+  merged.size = effectiveSize.value;
+  merged.loading = undefined;
+  return merged as TableProps;
+});
 
-const visibleComputedColumns = computed(() => {
-  return filterVisibleColumns(computedColumns.value).list;
+const ellipsisTooltipContainer = computed(() => {
+  const getPopupContainer = ellipsisTooltipConfig.value.getPopupContainer;
+  if (!getPopupContainer) return undefined;
+  return () => {
+    if (typeof document === 'undefined') return undefined;
+    const root = rootRef.value ?? document.body;
+    return getPopupContainer(root) ?? document.body;
+  };
 });
+const ellipsisTooltipDelay = computed(() =>
+  Math.max(0, (ellipsisTooltipConfig.value.mouseEnterDelay ?? 0.2) * 1000)
+);
+const ellipsisTooltipLeaveDelay = computed(() =>
+  Math.max(0, (ellipsisTooltipConfig.value.mouseLeaveDelay ?? 0.1) * 1000)
+);
+const ellipsisTooltipProps = computed(() => {
+  const config = ellipsisTooltipConfig.value;
+  const {
+    getPopupContainer: _getPopupContainer,
+    mouseEnterDelay: _mouseEnterDelay,
+    mouseLeaveDelay: _mouseLeaveDelay,
+    ...rest
+  } = config;
+  return rest;
+});
+
+const {
+  open: ellipsisTooltipOpen,
+  content: ellipsisTooltipContent,
+  anchorStyle: ellipsisTooltipAnchorStyle,
+  onMouseOver: onEllipsisMouseOver,
+  onMouseOut: onEllipsisMouseOut,
+  close: closeEllipsisTooltip,
+} = useEllipsisTooltip(
+  rootRef,
+  ellipsisTooltipEnabled,
+  ellipsisTooltipDelay,
+  ellipsisTooltipLeaveDelay
+);
 
 // 数据源优先级：显式绑定 > table 实例（useTable 创建的 dataSource）
 const computedDataSource = computed<RecordType[]>(() => {
@@ -424,6 +510,9 @@ const computedDataSource = computed<RecordType[]>(() => {
   );
 });
 
+// 列或数据变化后旧锚点失效，关闭共享 Tooltip
+watch([visibleComputedColumns, computedDataSource], closeEllipsisTooltip);
+
 /*
  * 分页优先级：显式绑定 > provider 全局配置 > 默认合成；
  * provider 作为基础配置与 table.pageParam 合并，显式绑定的对象形态在其之上覆盖
@@ -479,9 +568,19 @@ const onTableChange: TableProps['onChange'] = (...args) => {
     );
     if (shadowed.length) warnPaginationShadow(shadowed);
   }
-  // change 回放：模板监听器优先，未绑定时回退 Provider 全局配置
-  (attrs.onChange ?? injectProps.value.onChange)?.(...args);
-  _search();
+  // change 回放：模板监听器优先，未绑定时回退 Provider 全局配置；sorter.column 还原为原始列
+  const nextArgs = [...args] as any[];
+  const sorterArg = nextArgs[2];
+  if (Array.isArray(sorterArg)) {
+    nextArgs[2] = sorterArg.map(resolveSorterColumn);
+  } else if (sorterArg) {
+    nextArgs[2] = resolveSorterColumn(sorterArg);
+  }
+  try {
+    callListeners(attrs.onChange ?? injectProps.value.onChange, ...nextArgs);
+  } finally {
+    _search();
+  }
 };
 
 const searchFormVisible = computed(() => {
@@ -541,7 +640,15 @@ defineExpose({
 </script>
 
 <template>
-  <div class="pro-table" :class="attrs.class" :style="attrs.style">
+  <div
+    ref="rootRef"
+    class="pro-table"
+    data-pro-table-root
+    :class="attrs.class"
+    :style="attrs.style"
+    @mouseover="onEllipsisMouseOver"
+    @mouseout="onEllipsisMouseOut"
+  >
     <ContainerFragment
       v-if="searchFormVisible || $slots['search-form']"
       :component="computedSearchFormConfig.container"
@@ -601,7 +708,7 @@ defineExpose({
           class="pro-table_content"
           v-bind="computedTableProps"
           :loading="loading"
-          :columns="visibleComputedColumns"
+          :columns="hostColumns"
           :data-source="computedDataSource"
           :pagination="computedPagination"
           @change="onTableChange"
@@ -611,8 +718,19 @@ defineExpose({
             :key="name"
             #[name]="scoped"
           >
+            <template v-if="name === 'default'">
+              <TableColumn
+                v-if="slotColumnsMode && indexEnabled"
+                key="__INDEX__"
+                :title="t('table.index')"
+                :width="80"
+                data-index="__INDEX__"
+                :custom-render="slotIndexRender"
+              />
+              <slot name="default" v-bind="scoped || {}" />
+            </template>
             <slot
-              v-if="isSlotRenderable(name, scoped)"
+              v-else-if="isSlotRenderable(name, scoped)"
               :name="name"
               v-bind="scoped"
             />
@@ -620,6 +738,15 @@ defineExpose({
         </ATable>
       </slot>
     </ContainerFragment>
+
+    <TableEllipsisTooltip
+      v-if="ellipsisTooltipEnabled"
+      :open="ellipsisTooltipOpen"
+      :content="ellipsisTooltipContent"
+      :anchor-style="ellipsisTooltipAnchorStyle"
+      :container="ellipsisTooltipContainer"
+      v-bind="ellipsisTooltipProps"
+    />
   </div>
 </template>
 

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * 表格级共享省略 Tooltip
+ *
+ * @component TableEllipsisTooltip
+ * @description 以固定定位锚点承载单个宿主 Tooltip，锚点位置由 ProTable 按悬停单元格更新；
+ * 整个表格只渲染一个 Tooltip 实例，实例数量不随单元格数量增长。
+ */
+import { nextTick, ref, useAttrs, watch, type Component } from 'vue';
+import { Tooltip as ATooltip } from '../../../shared/ui';
+import type { EllipsisTooltipAnchorStyle } from '../hooks/useEllipsisTooltip';
+import type { EllipsisTooltipConfig } from '../types';
+
+defineOptions({ name: 'TableEllipsisTooltip', inheritAttrs: false });
+
+type HostTooltipProps = Omit<
+  EllipsisTooltipConfig,
+  'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'
+>;
+
+type Props = {
+  open?: boolean;
+  content?: string;
+  anchorStyle?: EllipsisTooltipAnchorStyle;
+  container?: () => HTMLElement | null | undefined;
+} & /* @vue-ignore */ HostTooltipProps;
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  content: '',
+  anchorStyle: () => ({
+    position: 'fixed',
+    pointerEvents: 'none',
+    opacity: 0,
+  }),
+  container: () => undefined,
+});
+const attrs = useAttrs() as HostTooltipProps;
+const HostTooltip = ATooltip as unknown as Component;
+
+type TooltipInstance = {
+  forceAlign?: () => void;
+  forcePopupAlign?: () => void;
+};
+
+const tooltipRef = ref<TooltipInstance | null>(null);
+
+/** 锚点或内容变化后重算宿主浮层位置 */
+const forceAlign = async () => {
+  if (!props.open) return;
+  await nextTick();
+  const instance = tooltipRef.value;
+  (instance?.forceAlign ?? instance?.forcePopupAlign)?.();
+};
+
+watch(() => props.anchorStyle, forceAlign, { deep: true });
+watch(
+  () => props.open,
+  value => {
+    if (value) forceAlign();
+  }
+);
+
+const getContainerNode = (): HTMLElement | undefined => {
+  const container = props.container?.();
+  if (container) return container;
+  return typeof document !== 'undefined' ? document.body : undefined;
+};
+
+const getPopupContainer = () => getContainerNode() ?? document.body;
+</script>
+
+<template>
+  <Teleport :to="getContainerNode() ?? 'body'">
+    <HostTooltip
+      v-bind="attrs"
+      ref="tooltipRef"
+      :open="open"
+      :title="content"
+      :trigger="[]"
+      :get-popup-container="getPopupContainer"
+    >
+      <span
+        class="pro-table_ellipsis-tooltip-anchor"
+        :style="anchorStyle"
+        aria-hidden="true"
+      />
+    </HostTooltip>
+  </Teleport>
+</template>