@gx-design-vue/pro-table 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/hooks/useAutoScroll.js

@@ -0,0 +1,127 @@
+//#region src/hooks/useAutoScroll.ts
+const ScrollDirection = {
+	Idle: 0,
+	Forward: 1,
+	Reverse: -1
+};
+const SCROLL_EPSILON = .5;
+/**
+* 纵向自动滚动 —— 精简复刻 `@dnd-kit/dom` 的 `detectScrollIntent` + `Scroller` 思路，
+* 与 pro-layout Tabs 的横向 `useAutoScroll` 同构（仅轴向不同）。
+*
+* 指针进入 `scrollEl` 上/下边缘 threshold 区域时，按距边缘的比例计算速度
+* （越靠边越快）。滚动方向必须先被用户同向移动解锁；如果当前方向已经到达边界，
+* 则不产生滚动 intent，避免触底后因为鼠标还在边缘区被反复重新激活。
+*
+* 关键：`maxScrollTop` 在 `start()` 时快照一次（`??` 仅在 undefined 时 fallback 到实时值），
+* 拖拽全程都用快照值判定能否滚动。这样即使拖拽中 `transform` 撑大了 `scrollHeight`，
+* 也不会污染滚动判定，避免死循环。
+*/
+function useAutoScroll(scrollEl, getPointerY, options = {}) {
+	const { threshold = .2, acceleration = 18, tolerance = 10, onScroll } = options;
+	let rafId;
+	let lastPointerY = null;
+	let maxScrollTop;
+	const unlockedDirections = /* @__PURE__ */ new Set();
+	function getMaxScrollTop() {
+		const el = scrollEl.value;
+		if (!el) return 0;
+		return maxScrollTop ?? Math.max(0, el.scrollHeight - el.clientHeight);
+	}
+	function canScroll(direction) {
+		const el = scrollEl.value;
+		if (!el) return false;
+		const max = getMaxScrollTop();
+		if (direction === ScrollDirection.Forward) return el.scrollTop < max - SCROLL_EPSILON;
+		if (direction === ScrollDirection.Reverse) return el.scrollTop > SCROLL_EPSILON;
+		return false;
+	}
+	function getEdgeIntent() {
+		const el = scrollEl.value;
+		const pointerY = getPointerY();
+		if (!el || pointerY == null) return {
+			direction: ScrollDirection.Idle,
+			speed: 0
+		};
+		const rect = el.getBoundingClientRect();
+		const triggerHeight = rect.height * threshold;
+		if (triggerHeight <= 0) return {
+			direction: ScrollDirection.Idle,
+			speed: 0
+		};
+		let direction = ScrollDirection.Idle;
+		let speed = 0;
+		const distBottom = rect.bottom - pointerY;
+		const distTop = pointerY - rect.top;
+		const canScrollDown = canScroll(ScrollDirection.Forward);
+		const canScrollUp = canScroll(ScrollDirection.Reverse);
+		if (canScrollDown && distBottom <= triggerHeight && pointerY <= rect.bottom + tolerance) {
+			const ratio = Math.abs((rect.bottom - triggerHeight - pointerY) / triggerHeight);
+			direction = ScrollDirection.Forward;
+			speed = acceleration * Math.min(ratio, 1);
+		} else if (canScrollUp && distTop <= triggerHeight && pointerY >= rect.top - tolerance) {
+			const ratio = Math.abs((rect.top + triggerHeight - pointerY) / triggerHeight);
+			direction = ScrollDirection.Reverse;
+			speed = acceleration * Math.min(ratio, 1);
+		}
+		return {
+			direction,
+			speed
+		};
+	}
+	function applyScroll() {
+		const el = scrollEl.value;
+		if (!el) return false;
+		const { direction, speed } = getEdgeIntent();
+		if (direction === ScrollDirection.Idle) return false;
+		if (!unlockedDirections.has(direction)) return false;
+		if (!canScroll(direction)) return false;
+		const delta = direction * speed;
+		if (delta !== 0) {
+			const before = el.scrollTop;
+			const next = Math.min(getMaxScrollTop(), Math.max(0, before + delta));
+			if (Math.abs(next - before) <= SCROLL_EPSILON) return false;
+			el.scrollTop = next;
+			onScroll?.();
+			return true;
+		}
+		return false;
+	}
+	function tick() {
+		rafId = void 0;
+		if (applyScroll()) rafId = requestAnimationFrame(tick);
+	}
+	function scroll() {
+		const pointerY = getPointerY();
+		if (pointerY == null) return false;
+		if (lastPointerY != null) {
+			const moveDirection = Math.sign(pointerY - lastPointerY);
+			if (moveDirection !== ScrollDirection.Idle) unlockedDirections.add(moveDirection);
+		}
+		lastPointerY = pointerY;
+		const didScroll = applyScroll();
+		if (didScroll) rafId ??= requestAnimationFrame(tick);
+		return didScroll;
+	}
+	function start() {
+		const el = scrollEl.value;
+		maxScrollTop = el ? Math.max(0, el.scrollHeight - el.clientHeight) : void 0;
+		scroll();
+	}
+	function stop() {
+		if (rafId != null) {
+			cancelAnimationFrame(rafId);
+			rafId = void 0;
+		}
+		lastPointerY = null;
+		maxScrollTop = void 0;
+		unlockedDirections.clear();
+	}
+	return {
+		scroll,
+		start,
+		stop
+	};
+}
+//#endregion
+export { useAutoScroll };

package/dist/hooks/useBreakpoints.d.ts

@@ -0,0 +1,13 @@
+import { ColConfig } from "../interface.js";
+import { ComputedRef } from "vue";
+
+//#region src/hooks/useBreakpoints.d.ts
+interface UseProBreakpointsReturn {
+  screens: ComputedRef<Record<string, boolean>>;
+  isMobile: ComputedRef<boolean>;
+  screenWidth: ComputedRef<number>;
+  getRowItemsPerBreakpoint: (span: ColConfig | undefined, breakpoint: Record<number, number> | undefined) => number;
+}
+declare function useProBreakpoints(): UseProBreakpointsReturn;
+//#endregion
+export { UseProBreakpointsReturn, useProBreakpoints };

package/dist/hooks/useBreakpoints.js

@@ -0,0 +1,65 @@
+import { DEFAULT_BREAKPOINT_SPANS } from "../utils/formConstants.js";
+import { computed } from "vue";
+import { useBreakpoints, useWindowSize } from "@vueuse/core";
+//#region src/hooks/useBreakpoints.ts
+const ANTD_BREAKPOINTS = {
+	xs: 0,
+	sm: 576,
+	md: 768,
+	lg: 992,
+	xl: 1200,
+	xxl: 1600
+};
+function useProBreakpoints() {
+	const breakpoints = useBreakpoints(ANTD_BREAKPOINTS);
+	const { width: screenWidth } = useWindowSize();
+	const bpGt = {
+		xs: breakpoints.greaterOrEqual("xs"),
+		sm: breakpoints.greaterOrEqual("sm"),
+		md: breakpoints.greaterOrEqual("md"),
+		lg: breakpoints.greaterOrEqual("lg"),
+		xl: breakpoints.greaterOrEqual("xl"),
+		xxl: breakpoints.greaterOrEqual("xxl")
+	};
+	const screens = computed(() => ({
+		xs: bpGt.xs.value,
+		sm: bpGt.sm.value,
+		md: bpGt.md.value,
+		lg: bpGt.lg.value,
+		xl: bpGt.xl.value,
+		xxl: bpGt.xxl.value
+	}));
+	const isMobile = computed(() => !screens.value.xl);
+	function getRowItemsPerBreakpoint(span, breakpoint) {
+		if (breakpoint && typeof breakpoint === "object" && Object.keys(breakpoint).length > 0) return getBreakpointRowLength(breakpoint, screenWidth.value);
+		return getColSpanRowLength(span, screens.value);
+	}
+	return {
+		screens,
+		isMobile,
+		screenWidth: computed(() => screenWidth.value),
+		getRowItemsPerBreakpoint
+	};
+}
+function getBreakpointRowLength(config, rootWidth) {
+	let span = 4;
+	const sortedWidths = Object.keys(config).map(Number).filter((key) => !Number.isNaN(key)).sort((a, b) => b - a);
+	for (const width of sortedWidths) if (config[width] && rootWidth >= width) {
+		span = config[width];
+		break;
+	}
+	return span;
+}
+function getColSpanRowLength(colSpan, rootScreen) {
+	let span = 4;
+	for (let i = 0; i < DEFAULT_BREAKPOINT_SPANS.length; i += 1) {
+		const breakpoint = DEFAULT_BREAKPOINT_SPANS[i].breakpoint;
+		if (rootScreen[breakpoint]) {
+			span = colSpan?.[breakpoint] ?? DEFAULT_BREAKPOINT_SPANS[i].span;
+			break;
+		}
+	}
+	return span;
+}
+//#endregion
+export { useProBreakpoints };

package/dist/hooks/useCellRender.d.ts

@@ -0,0 +1,13 @@
+import { ProColumnType } from "../interface.js";
+import { ComputedRef } from "vue";
+
+//#region src/hooks/useCellRender.d.ts
+interface UseCellRenderOptions {
+  columnEmptyText?: ComputedRef<string | ((record: any) => string) | undefined>;
+  prefixCls: ComputedRef<string>;
+}
+declare function useCellRender(options: UseCellRenderOptions): {
+  wrapColumnRender: (column: ProColumnType) => ProColumnType;
+};
+//#endregion
+export { UseCellRenderOptions, useCellRender };

package/dist/hooks/useCellRender.js

@@ -0,0 +1,40 @@
+import EllipsisText_default from "../components/EllipsisText/index.js";
+import { normalizeEllipsis } from "../utils/ellipsis.js";
+import { valueFormat } from "../utils/valueFormat.js";
+import { h, isVNode } from "vue";
+import { handleEmptyField, isNil } from "@gx-design-vue/pro-utils";
+//#region src/hooks/useCellRender.ts
+function resolveEmptyText(column, record, tableLevelEmptyText) {
+	if (column.columnEmptyText !== void 0) return typeof column.columnEmptyText === "function" ? column.columnEmptyText(record) : column.columnEmptyText;
+	if (tableLevelEmptyText !== void 0) return typeof tableLevelEmptyText === "function" ? tableLevelEmptyText(record) : tableLevelEmptyText;
+	return "-";
+}
+function useCellRender(options) {
+	function wrapColumnRender(column) {
+		const userRender = column.render;
+		const normalizedEllipsis = normalizeEllipsis(column.ellipsis);
+		const wrappedRender = (value, record, index) => {
+			let cellValue = userRender ? userRender(value, record, index) : value;
+			if (!userRender && column.valueType && !isVNode(cellValue)) cellValue = valueFormat(cellValue, column.valueType, { className: options.prefixCls.value });
+			const emptyText = resolveEmptyText(column, record, options.columnEmptyText?.value);
+			const { value: finalValue } = handleEmptyField(cellValue, emptyText);
+			let measurableText = null;
+			if (typeof cellValue === "string" && cellValue !== "" || typeof cellValue === "number") measurableText = String(cellValue);
+			else if (column.valueType === "link" && !isNil(value) && value !== "" && (typeof value === "string" || typeof value === "number")) measurableText = String(value);
+			if (normalizedEllipsis.enabled && measurableText !== null) return h(EllipsisText_default, {
+				text: measurableText,
+				ellipsis: normalizedEllipsis,
+				prefixCls: options.prefixCls.value
+			}, { default: () => finalValue });
+			return finalValue;
+		};
+		return {
+			...column,
+			ellipsis: false,
+			render: wrappedRender
+		};
+	}
+	return { wrapColumnRender };
+}
+//#endregion
+export { useCellRender };

package/dist/hooks/useColumnResize.d.ts

@@ -0,0 +1,29 @@
+import { ProColumnType } from "../interface.js";
+import { ComputedRef } from "vue";
+
+//#region src/hooks/useColumnResize.d.ts
+interface UseColumnResizeOptions {
+  columns: ComputedRef<ProColumnType[]>;
+  onResize?: (width: number, column: ProColumnType) => void;
+}
+interface UseColumnResizeReturn {
+  resizableColumns: ComputedRef<ProColumnType[]>;
+  resizableComponents: ComputedRef<{
+    header: {
+      cell: ReturnType<typeof createResizableTitle>;
+    };
+  }>;
+}
+interface ResizeInfo {
+  size: {
+    width: number;
+  };
+}
+interface ResizableHeaderCellProps {
+  width?: number;
+  onResize?: (event: MouseEvent, info: ResizeInfo) => void;
+}
+declare function createResizableTitle(): import("vue").DefineComponent<ResizableHeaderCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResizableHeaderCellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare function useColumnResize(options: UseColumnResizeOptions): UseColumnResizeReturn;
+//#endregion
+export { ResizeInfo, UseColumnResizeOptions, UseColumnResizeReturn, useColumnResize };

package/dist/hooks/useColumnResize.js

@@ -0,0 +1,112 @@
+import { getColumnKey } from "./useColumns.js";
+import "./useDragHandleColumn.js";
+import { computed, defineComponent, h, onScopeDispose, shallowRef } from "vue";
+//#region src/hooks/useColumnResize.ts
+const MIN_COLUMN_WIDTH = 40;
+function createResizableTitle() {
+	return defineComponent({
+		name: "ResizableTitle",
+		inheritAttrs: false,
+		props: {
+			width: {
+				type: Number,
+				default: void 0
+			},
+			onResize: {
+				type: Function,
+				default: void 0
+			}
+		},
+		setup(props, { slots, attrs }) {
+			const dragging = shallowRef(false);
+			const shouldPreventClick = shallowRef(false);
+			const startX = shallowRef(0);
+			const startWidth = shallowRef(0);
+			function onMouseDown(event) {
+				event.preventDefault();
+				event.stopPropagation();
+				dragging.value = true;
+				shouldPreventClick.value = false;
+				startX.value = event.clientX;
+				startWidth.value = props.width || event.currentTarget?.parentElement?.offsetWidth || 0;
+				function onMouseMove(moveEvent) {
+					if (!dragging.value) return;
+					shouldPreventClick.value = true;
+					const nextWidth = Math.max(startWidth.value + moveEvent.clientX - startX.value, MIN_COLUMN_WIDTH);
+					props.onResize?.(moveEvent, { size: { width: nextWidth } });
+				}
+				function onMouseUp() {
+					dragging.value = false;
+					document.removeEventListener("mousemove", onMouseMove);
+					document.removeEventListener("mouseup", onMouseUp);
+					setTimeout(() => {
+						shouldPreventClick.value = false;
+					}, 0);
+				}
+				document.addEventListener("mousemove", onMouseMove);
+				document.addEventListener("mouseup", onMouseUp);
+			}
+			function onClickCapture(event) {
+				if (shouldPreventClick.value) {
+					event.stopPropagation();
+					event.preventDefault();
+					shouldPreventClick.value = false;
+				}
+			}
+			return () => {
+				if (props.width == null) return h("th", attrs, slots.default?.());
+				return h("th", {
+					...attrs,
+					class: ["resizable-title", attrs.class],
+					style: {
+						...attrs.style,
+						width: `${props.width}px`
+					},
+					onClickCapture
+				}, [slots.default?.(), h("span", {
+					class: "resizable-handle",
+					onMousedown: onMouseDown
+				})]);
+			};
+		}
+	});
+}
+function useColumnResize(options) {
+	const columnWidthOverrides = shallowRef(/* @__PURE__ */ new Map());
+	function handleColumnResize(columnKey, info) {
+		const nextMap = new Map(columnWidthOverrides.value);
+		nextMap.set(columnKey, info.size.width);
+		columnWidthOverrides.value = nextMap;
+	}
+	const ResizableTitle = createResizableTitle();
+	const resizableColumns = computed(() => {
+		const source = options.columns.value;
+		const overrides = columnWidthOverrides.value;
+		return source.map((column) => {
+			if (column.key === "__drag_handle__" || column.dataIndex === "__drag_handle__") return column;
+			const columnKey = getColumnKey(column);
+			const overriddenWidth = overrides.get(columnKey);
+			return {
+				...column,
+				...overriddenWidth != null ? { width: overriddenWidth } : {},
+				onHeaderCell: (col) => ({
+					width: col.width,
+					onResize: (_event, info) => {
+						handleColumnResize(getColumnKey(col), info);
+						options.onResize?.(info.size.width, col);
+					}
+				})
+			};
+		});
+	});
+	const resizableComponents = computed(() => ({ header: { cell: ResizableTitle } }));
+	onScopeDispose(() => {
+		columnWidthOverrides.value = /* @__PURE__ */ new Map();
+	});
+	return {
+		resizableColumns,
+		resizableComponents
+	};
+}
+//#endregion
+export { useColumnResize };

package/dist/hooks/useColumns.d.ts

@@ -1,28 +1,39 @@
-import { ProColumnType, ProColumnsType } from "../types/ColumnTypings.js";
-import { ProTableProps } from "../types/TableTypings.js";
-import { ComputedRef, Ref } from "vue";
+import { ProColumnType, ProTableIndexColumn } from "../interface.js";
+import { ComputedRef } from "vue";
+import { AlignType, RecordType } from "@gx-design-vue/pro-utils";
 
 //#region src/hooks/useColumns.d.ts
-interface UseColumnsType {
-  scroll: ComputedRef<ProTableProps['scroll']>;
-  breakpoint: ComputedRef<boolean | undefined>;
-  columns: ComputedRef<ProColumnsType>;
-  draggable: Ref<ProTableProps['draggable']>;
-  neverScroll: Ref<ProTableProps['neverScroll']>;
-  autoScroll: Ref<ProTableProps['autoScroll']>;
+interface UseColumnsOptions<T = RecordType> {
+  columns: ComputedRef<ProColumnType<T>[]>;
+  align: ComputedRef<AlignType>;
+  indexColumn?: ComputedRef<boolean | ProTableIndexColumn | undefined>;
+  shouldFixActionColumn?: ComputedRef<boolean>;
+  wrapColumnRender?: (column: ProColumnType<T>) => ProColumnType<T>;
 }
-declare function useColumns({
-  scroll,
-  columns,
-  breakpoint,
-  draggable,
-  autoScroll,
-  neverScroll
-}: UseColumnsType): {
-  breakpoint: ComputedRef<boolean>;
-  proColumns: ComputedRef<ProColumnsType>;
-  setColumns: (columnList: ProColumnsType) => void;
-  resizeColumnWidth: (width: number, col: ProColumnType) => void;
-};
+interface UseColumnsReturn<T = RecordType> {
+  tableColumns: ComputedRef<ProColumnType<T>[]>;
+  cacheColumns: ComputedRef<ProColumnType<T>[]>;
+  setColumns: (columns: ProColumnType<any>[]) => void;
+}
+/** 获取列唯一标识，优先 key，回退 dataIndex */
+declare function getColumnKey(col: ProColumnType<any>): string | number;
+/** 规范化单列：补齐 key/dataIndex/align/order，递归处理 children */
+declare function normalizeColumn<T>(col: ProColumnType<T>, index: number, defaultAlign: AlignType): ProColumnType<T>;
+/** 批量规范化列配置 */
+declare function normalizeColumns<T>(columns: ProColumnType<T>[], defaultAlign: AlignType): ProColumnType<T>[];
+declare function applyIndexColumn<T>(columns: ProColumnType<T>[], indexColumn: boolean | ProTableIndexColumn | undefined, defaultAlign: AlignType): ProColumnType<T>[];
+declare function applyActionColumnFixed<T>(columns: ProColumnType<T>[], shouldFixActionColumn: boolean): ProColumnType<T>[];
+/** 过滤掉 show=false 的列 */
+declare function filterVisible<T>(columns: ProColumnType<T>[]): ProColumnType<T>[];
+/** 按 order 字段升序排列 */
+declare function sortByOrder<T>(columns: ProColumnType<T>[]): ProColumnType<T>[];
+/**
+ * 列配置管理。
+ * 纯函数 + computed 实现，无 watcher/ref 链。
+ * - tableColumns: 仅可见列，按 order 排序
+ * - cacheColumns: 全量规范化列（含隐藏列）
+ * - setColumns: 外部覆写列（用于 sortOrder 同步等），props 变化时自动重置
+ */
+declare function useColumns<T = RecordType>(options: UseColumnsOptions<T>): UseColumnsReturn<T>;
 //#endregion
-export { useColumns };
+export { UseColumnsOptions, UseColumnsReturn, applyActionColumnFixed, applyIndexColumn, filterVisible, getColumnKey, normalizeColumn, normalizeColumns, sortByOrder, useColumns };

package/dist/hooks/useColumns.js

@@ -1,66 +1,97 @@
-import { computed, ref, toRaw, unref, watch } from "vue";
-import { cloneDeep, compareArray, isBoolean, isDeepEqualReact, isNumber } from "@gx-design-vue/pro-utils";
-
+import { computed, onScopeDispose, shallowRef, watch } from "vue";
+import { createUUIDFactory } from "@gx-design-vue/pro-utils";
 //#region src/hooks/useColumns.ts
-function useColumns({ scroll, columns, breakpoint, draggable, autoScroll, neverScroll }) {
-	const proColumnsRef = ref([]);
-	watch([
-		() => scroll.value,
-		() => columns.value,
-		() => breakpoint.value,
-		() => draggable.value,
-		() => breakpoint.value,
-		() => autoScroll.value,
-		() => neverScroll.value
-	], () => {
-		const columnsList = handleColumns(toRaw(columns.value));
-		if (!isDeepEqualReact(columnsList, toRaw(proColumnsRef.value))) proColumnsRef.value = cloneDeep(columnsList);
-	}, {
-		deep: true,
-		immediate: true
+/** 获取列唯一标识，优先 key，回退 dataIndex */
+function getColumnKey(col) {
+	return col.key ?? col.dataIndex;
+}
+function isActionColumn(column) {
+	return getColumnKey(column) === "action" || column.dataIndex === "action";
+}
+function normalizeFixedValue(fixed) {
+	if (fixed === "left") return "start";
+	if (fixed === "right") return "end";
+	return fixed;
+}
+/** 规范化单列：补齐 key/dataIndex/align/order，递归处理 children */
+function normalizeColumn(col, index, defaultAlign) {
+	const key = getColumnKey(col);
+	const normalized = {
+		...col,
+		key,
+		dataIndex: col.dataIndex ?? key,
+		order: col.order ?? index,
+		align: col.align ?? defaultAlign
+	};
+	if (col.children?.length) normalized.children = col.children.map((child, childIndex) => normalizeColumn(child, childIndex, defaultAlign));
+	return normalized;
+}
+/** 批量规范化列配置 */
+function normalizeColumns(columns, defaultAlign) {
+	return columns.map((col, index) => normalizeColumn(col, index, defaultAlign));
+}
+function createIndexColumn(indexColumn, defaultAlign, firstColumn) {
+	const config = typeof indexColumn === "object" ? indexColumn : {};
+	return {
+		title: config.title ?? "序号",
+		align: config.align ?? defaultAlign,
+		fixed: normalizeFixedValue(config.fixed ?? firstColumn?.fixed),
+		width: config.width ?? 60,
+		uuid: createUUIDFactory().uuid(15),
+		dataIndex: "sortIndex",
+		key: "sortIndex"
+	};
+}
+function applyIndexColumn(columns, indexColumn, defaultAlign) {
+	if (!indexColumn || columns.length === 0 || columns.some((column) => column.dataIndex === "sortIndex" || getColumnKey(column) === "sortIndex")) return columns;
+	return [createIndexColumn(indexColumn === true ? true : indexColumn, defaultAlign, columns[0]), ...columns];
+}
+function applyActionColumnFixed(columns, shouldFixActionColumn) {
+	if (!shouldFixActionColumn) return columns;
+	return columns.map((column) => {
+		if (!isActionColumn(column) || column.fixed !== void 0) return column;
+		return {
+			...column,
+			fixed: "end"
+		};
 	});
-	const proColumns = computed(() => {
-		return handleTableSort(unref(proColumnsRef));
+}
+/** 过滤掉 show=false 的列 */
+function filterVisible(columns) {
+	return columns.filter((col) => col.show !== false);
+}
+/** 按 order 字段升序排列 */
+function sortByOrder(columns) {
+	return [...columns].sort((columnA, columnB) => (columnA.order ?? 0) - (columnB.order ?? 0));
+}
+/**
+* 列配置管理。
+* 纯函数 + computed 实现，无 watcher/ref 链。
+* - tableColumns: 仅可见列，按 order 排序
+* - cacheColumns: 全量规范化列（含隐藏列）
+* - setColumns: 外部覆写列（用于 sortOrder 同步等），props 变化时自动重置
+*/
+function useColumns(options) {
+	const overrideColumns = shallowRef(null);
+	const stopWatch = watch(() => options.columns.value, () => {
+		overrideColumns.value = null;
 	});
-	function handleTableSort(data) {
-		return data.sort((a, b) => compareArray(a, b, "order", 0));
-	}
-	function handleColumns(columnsList) {
-		return cloneDeep(columnsList).map((item, index) => {
-			if (item.dataIndex === "action" || index === columnsList.length - 1) item.resizable = false;
-			else item.resizable = isBoolean(item.resizable) ? item.resizable : !!(isNumber(item.width) && unref(draggable));
-			if (!item.width || unref(neverScroll)) return item;
-			if (item.dataIndex === "action" && unref(autoScroll)) if (scroll.value?.x || !unref(breakpoint)) {
-				item.width = item.width || 100;
-				item.fixed = "right";
-			} else {
-				const originCol = unref(columns).find((col) => col.dataIndex === item.dataIndex);
-				item.width = originCol?.width || "";
-				item.fixed = originCol?.fixed;
-			}
-			return item;
-		});
-	}
-	function resizeColumnWidth(width, col) {
-		proColumnsRef.value = proColumnsRef.value.map((item) => {
-			if (item.uuid === col.uuid) item.width = width;
-			return item;
-		});
-	}
-	function setColumns(columnList) {
-		if (columnList.length <= 0) {
-			proColumnsRef.value = [];
-			return;
-		}
-		if (!isDeepEqualReact(handleColumns(columnList), toRaw(proColumnsRef.value))) proColumnsRef.value = handleColumns(columnList);
+	onScopeDispose(() => stopWatch());
+	const cacheColumns = computed(() => {
+		return applyActionColumnFixed(normalizeColumns(applyIndexColumn(overrideColumns.value ?? options.columns.value, options.indexColumn?.value, options.align.value), options.align.value), !!options.shouldFixActionColumn?.value);
+	});
+	const tableColumns = computed(() => {
+		const visible = sortByOrder(filterVisible(cacheColumns.value));
+		return options.wrapColumnRender ? visible.map((col) => options.wrapColumnRender(col)) : visible;
+	});
+	function setColumns(columns) {
+		overrideColumns.value = columns;
 	}
 	return {
-		breakpoint,
-		proColumns,
-		setColumns,
-		resizeColumnWidth
+		tableColumns,
+		cacheColumns,
+		setColumns
 	};
 }
-
 //#endregion
-export { useColumns };
+export { applyActionColumnFixed, applyIndexColumn, filterVisible, getColumnKey, normalizeColumn, normalizeColumns, sortByOrder, useColumns };

package/dist/hooks/useDragHandleColumn.d.ts

@@ -0,0 +1,26 @@
+import { ProColumnType, ProTableRowDragOptions } from "../interface.js";
+import { ComputedRef } from "vue";
+import { RecordType } from "@gx-design-vue/pro-utils";
+
+//#region src/hooks/useDragHandleColumn.d.ts
+interface UseDragHandleColumnOptions<T = RecordType> {
+  columns: ComputedRef<ProColumnType<T>[]>;
+  rowDraggable: ComputedRef<boolean | ProTableRowDragOptions | undefined>;
+  prefixCls: ComputedRef<string>;
+  cssVarCls: ComputedRef<string>;
+}
+interface UseDragHandleColumnReturn<T = RecordType> {
+  dragColumns: ComputedRef<ProColumnType<T>[]>;
+}
+/** 把手列内部标记 key */
+declare const DRAG_HANDLE_COLUMN_KEY = "__drag_handle__";
+/**
+ * 在列首注入行拖拽把手列。
+ *
+ * 纯函数实现（对标 `applyIndexColumn`），在 `useColumns` 的 `cacheColumns` computed 中、
+ * `applyIndexColumn` 之前调用，确保把手列比序号列更靠前。
+ */
+declare function applyDragHandleColumn<T>(columns: ProColumnType<T>[], rowDraggable: boolean | ProTableRowDragOptions | undefined, prefixCls: string, cssVarCls: string): ProColumnType<T>[];
+declare function useDragHandleColumn<T = RecordType>(options: UseDragHandleColumnOptions<T>): UseDragHandleColumnReturn<T>;
+//#endregion
+export { DRAG_HANDLE_COLUMN_KEY, UseDragHandleColumnOptions, UseDragHandleColumnReturn, applyDragHandleColumn, useDragHandleColumn };