@gx-design-vue/pro-table 0.2.0-alpha.8 → 0.2.0-alpha.9

package/dist/components/Toolbar/index.js

@@ -0,0 +1,101 @@
+import { useInjectTableContext } from "../../context/TableContext.js";
+import { FullscreenIcon } from "./FullscreenIcon.js";
+import { ListToolBar } from "./ListToolBar.js";
+import { computed, createVNode, defineComponent, unref } from "vue";
+import { Tooltip } from "antdv-next";
+import { ReloadOutlined } from "@antdv-next/icons";
+//#region src/components/Toolbar/index.tsx
+function isObject(val) {
+	return val !== null && typeof val === "object";
+}
+const Toolbar = /* @__PURE__ */ defineComponent({
+	name: "ProTableToolbar",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		options: {
+			type: [Object, Boolean],
+			default: false
+		},
+		titleTipText: {
+			type: String,
+			default: void 0
+		},
+		actionsPlacement: {
+			type: String,
+			default: "right"
+		},
+		actions: {
+			type: Array,
+			default: () => []
+		},
+		headerTitle: {
+			type: null,
+			default: void 0
+		},
+		listToolAfter: {
+			type: null,
+			default: void 0
+		},
+		headerTitleTip: {
+			type: null,
+			default: void 0
+		},
+		proClasses: {
+			type: Object,
+			default: () => ({})
+		},
+		proStyles: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	setup(props) {
+		const ctx = useInjectTableContext();
+		const settings = computed(() => {
+			if (props.options === false) return [];
+			const options = isObject(props.options) ? props.options : {};
+			const result = [];
+			if (options.reload !== false) {
+				const reloadAction = () => ctx?.reload?.();
+				if (typeof options.reload === "function") {
+					const vnode = options.reload(reloadAction);
+					if (vnode) result.push(vnode);
+				} else result.push(createVNode(Tooltip, {
+					"title": "刷新",
+					"key": "reload"
+				}, { default: () => [createVNode("span", { "onClick": reloadAction }, [createVNode(ReloadOutlined, null, null)])] }));
+			}
+			if (options.fullScreen !== false) {
+				const toggleAction = () => ctx?.toggleFullscreen?.();
+				if (typeof options.fullScreen === "function") result.push(createVNode(FullscreenIcon, {
+					"key": "fullscreen",
+					"isFullscreen": !!ctx?.isFullscreen?.value,
+					"onToggle": options.fullScreen
+				}, null));
+				else result.push(createVNode(FullscreenIcon, {
+					"key": "fullscreen",
+					"isFullscreen": !!ctx?.isFullscreen?.value,
+					"onToggle": toggleAction
+				}, null));
+			}
+			return result;
+		});
+		return () => createVNode(ListToolBar, {
+			"prefixCls": props.prefixCls,
+			"actions": props.actions,
+			"actionsPlacement": props.actionsPlacement,
+			"settings": unref(settings),
+			"headerTitle": props.headerTitle,
+			"listToolAfter": props.listToolAfter,
+			"headerTitleTip": props.headerTitleTip,
+			"titleTipText": props.titleTipText,
+			"proClasses": props.proClasses,
+			"proStyles": props.proStyles
+		}, null);
+	}
+});
+//#endregion
+export { Toolbar, Toolbar as default };

package/dist/components/Toolbar/style.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Toolbar/style.d.ts
+declare const genToolbarStyle: GenerateStyle<ProFullToken<'ProTable'>, CSSObject>;
+//#endregion
+export { genToolbarStyle };

package/dist/components/{ListToolBar → Toolbar}/style.js

@@ -1,33 +1,25 @@
-//#region src/components/ListToolBar/style.ts
-const genListToolBarStyle = (token) => {
-	return { [`${token.componentCls}-list-toolbar`]: {
+//#region src/components/Toolbar/style.ts
+const genToolbarStyle = (token) => {
+	const prefixCls = token.componentCls;
+	return { [prefixCls]: { [`${prefixCls}-list-toolbar`]: {
 		lineHeight: 1,
-		"&-with-after": { paddingBottom: token.margin },
 		"&-container": {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
 			gap: token.padding,
-			paddingBottom: token.padding,
-			"&-mobile": {
-				flexDirection: "column",
-				flexWrap: "wrap",
-				alignItems: "flex-start",
-				[`${token.componentCls}-left`]: {
-					flexWrap: "wrap",
-					maxWidth: "100%"
-				},
-				[`${token.componentCls}-right`]: { width: "100%" }
-			}
+			paddingBottom: token.padding
 		},
 		"&-title": {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "flex-start",
-			width: "100%",
 			color: token.colorTextHeading,
 			fontWeight: "500",
-			fontSize: token.fontSizeLG
+			fontSize: token.fontSizeLG,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
 		},
 		"&-left": {
 			display: "flex",
@@ -35,20 +27,19 @@ const genListToolBarStyle = (token) => {
 			alignItems: "center",
 			gap: token.marginXS,
 			justifyContent: "flex-start",
-			[`${token.antCls}-tabs`]: { width: "100%" },
-			"&-has-tabs": { overflow: "hidden" }
+			flexShrink: 0
 		},
 		"&-right": {
 			flex: 1,
 			display: "flex",
 			flexWrap: "wrap",
 			justifyContent: "flex-end",
-			gap: token.marginSM,
-			[`${token.componentCls}-actions`]: {
-				display: "flex",
-				alignItems: "center",
-				gap: token.marginXS
-			}
+			gap: token.marginSM
+		},
+		"&-actions": {
+			display: "flex",
+			alignItems: "center",
+			gap: token.marginXS
 		},
 		"&-setting-items": {
 			display: "flex",
@@ -67,8 +58,22 @@ const genListToolBarStyle = (token) => {
 				height: "100%"
 			},
 			"&:hover": { color: token.colorPrimary }
+		},
+		"&-after": { paddingBottom: token.margin },
+		[`@media (max-width: ${token.screenLGMax}px)`]: {
+			[`${prefixCls}-list-toolbar-container`]: {
+				flexDirection: "column",
+				flexWrap: "wrap",
+				alignItems: "flex-start"
+			},
+			[`${prefixCls}-list-toolbar-left`]: {
+				flexWrap: "wrap",
+				maxWidth: "100%",
+				overflow: "visible"
+			},
+			[`${prefixCls}-list-toolbar-right`]: { width: "100%" }
 		}
-	} };
+	} } };
 };
 //#endregion
-export { genListToolBarStyle };
+export { genToolbarStyle };

package/dist/context/TableContext.d.ts

@@ -1,32 +1,20 @@
-import { ProColumnsType } from "../types/ColumnTypings.js";
-import { FormConfig, TableClassNamesType, TableScroll, TableStylesType } from "../types/TableTypings.js";
+import { FormConfig, ProTableSizeType } from "../interface.js";
 import { ComputedRef, Ref } from "vue";
-import { SizeType } from "@gx-design-vue/pro-utils";
-import { PaginationProps } from "ant-design-vue/es/pagination";
 
 //#region src/context/TableContext.d.ts
-interface ProTableContextProps {
-  columns: ComputedRef<ProColumnsType>;
-  isMobile: ComputedRef<boolean>;
-  formConfig: ComputedRef<FormConfig>;
-  formActions: ComputedRef<FormConfig['actions']>;
-  formAutoRequest: ComputedRef<boolean>;
-  cacheColumns: ComputedRef<ProColumnsType>;
-  tableSize: Ref<SizeType>;
-  tableScrollState: ComputedRef<TableScroll>;
-  screenWidth: Ref<number>;
-  styles: Ref<TableStylesType>;
-  classNames: Ref<TableClassNamesType>;
-  hashId: Ref<string>;
-  prefixCls: string;
-  tableListToolsHeight: Ref<number>;
-  action: {
-    /** @name 刷新 */reload: (info?: any) => void;
-    toggle: () => Promise<void>;
-    setTableSize: (size: SizeType) => void;
-  };
-  setPagination: (info: Partial<PaginationProps>) => void;
+interface TableContextProps {
+  reload: (info?: any) => void;
+  setPagination: (info: any) => void;
+  tableSize?: ComputedRef<ProTableSizeType>;
+  setTableSize?: (size: ProTableSizeType) => void;
+  formAutoRequest?: ComputedRef<boolean>;
+  formConfig?: ComputedRef<FormConfig | undefined>;
+  formActions?: ComputedRef<FormConfig['actions'] | undefined>;
+  isMobile?: ComputedRef<boolean>;
+  screenWidth?: ComputedRef<number>;
+  toggleFullscreen?: () => Promise<void>;
+  isFullscreen?: Ref<boolean>;
 }
-declare const provideTableContext: (value: ProTableContextProps) => void, useTableContext: (injectDefaultValue?: ProTableContextProps) => ProTableContextProps;
+declare const useProvideTableContext: (args_0: TableContextProps) => TableContextProps, useInjectTableContext: () => TableContextProps;
 //#endregion
-export { ProTableContextProps, provideTableContext, useTableContext };
+export { TableContextProps, useInjectTableContext, useProvideTableContext };

package/dist/context/TableContext.js

@@ -1,5 +1,5 @@
-import { useContext } from "@gx-design-vue/context";
+import { createInjectionState } from "@vueuse/core";
 //#region src/context/TableContext.ts
-const { provideContext: provideTableContext, useInjectContext: useTableContext } = useContext("pro-table");
+const [useProvideTableContext, useInjectTableContext] = createInjectionState((props) => props);
 //#endregion
-export { provideTableContext, useTableContext };
+export { useInjectTableContext, useProvideTableContext };

package/dist/hooks/index.d.ts

@@ -0,0 +1,16 @@
+import { UseProBreakpointsReturn, useProBreakpoints } from "./useBreakpoints.js";
+import { UseCellRenderOptions, useCellRender } from "./useCellRender.js";
+import { UseColumnResizeOptions, UseColumnResizeReturn, useColumnResize } from "./useColumnResize.js";
+import { UseColumnsOptions, UseColumnsReturn, useColumns } from "./useColumns.js";
+import { FetchDataAction, FetchDataConfig, useFetchData } from "./useFetchData.js";
+import { UseFitPageOptions, UseFitPageReturn, useFitPage } from "./useFitPage.js";
+import { UseKeepAliveReloadOptions, UseKeepAliveReloadReturn, useKeepAliveReload } from "./useKeepAliveReload.js";
+import { UseLoadingOptions, UseLoadingReturn, useLoading } from "./useLoading.js";
+import { usePagination } from "./usePagination.js";
+import { UseRequestOptionsParams, UseRequestOptionsReturn, useRequestOptions } from "./useRequestOptions.js";
+import { UseRowSelectionOptions, UseRowSelectionReturn, useRowSelection } from "./useRowSelection.js";
+import { UseTableOptions, UseTableReturn, useTable } from "./useTable.js";
+import { UseTableFormOptions, UseTableFormReturn, useTableForm } from "./useTableForm.js";
+import { NormalizedTableScrollPolicy, UseTableScrollOptions, UseTableScrollReturn, useTableScroll } from "./useTableScroll.js";
+import { UseTableSizeOptions, UseTableSizeReturn, useTableSize } from "./useTableSize.js";
+export { type FetchDataAction, type FetchDataConfig, type NormalizedTableScrollPolicy, type UseCellRenderOptions, type UseColumnResizeOptions, type UseColumnResizeReturn, type UseColumnsOptions, type UseColumnsReturn, type UseFitPageOptions, type UseFitPageReturn, type UseKeepAliveReloadOptions, type UseKeepAliveReloadReturn, type UseLoadingOptions, type UseLoadingReturn, type UseProBreakpointsReturn, type UseRequestOptionsParams, type UseRequestOptionsReturn, type UseRowSelectionOptions, type UseRowSelectionReturn, type UseTableFormOptions, type UseTableFormReturn, type UseTableOptions, type UseTableReturn, type UseTableScrollOptions, type UseTableScrollReturn, type UseTableSizeOptions, type UseTableSizeReturn, useCellRender, useColumnResize, useColumns, useFetchData, useFitPage, useKeepAliveReload, useLoading, usePagination, useProBreakpoints, useRequestOptions, useRowSelection, useTable, useTableForm, useTableScroll, useTableSize };

package/dist/hooks/index.js

@@ -0,0 +1,16 @@
+import { useProBreakpoints } from "./useBreakpoints.js";
+import { useRequestOptions } from "./useRequestOptions.js";
+import { useCellRender } from "./useCellRender.js";
+import { useColumns } from "./useColumns.js";
+import { useColumnResize } from "./useColumnResize.js";
+import { useFetchData } from "./useFetchData.js";
+import { useFitPage } from "./useFitPage.js";
+import { useKeepAliveReload } from "./useKeepAliveReload.js";
+import { useLoading } from "./useLoading.js";
+import { usePagination } from "./usePagination.js";
+import { useRowSelection } from "./useRowSelection.js";
+import { useTable } from "./useTable.js";
+import { useTableForm } from "./useTableForm.js";
+import { useTableScroll } from "./useTableScroll.js";
+import { useTableSize } from "./useTableSize.js";
+export { useCellRender, useColumnResize, useColumns, useFetchData, useFitPage, useKeepAliveReload, useLoading, usePagination, useProBreakpoints, useRequestOptions, useRowSelection, useTable, useTableForm, useTableScroll, useTableSize };

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,57 @@
+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 screens = computed(() => ({
+		xs: breakpoints.isGreaterOrEqual("xs"),
+		sm: breakpoints.isGreaterOrEqual("sm"),
+		md: breakpoints.isGreaterOrEqual("md"),
+		lg: breakpoints.isGreaterOrEqual("lg"),
+		xl: breakpoints.isGreaterOrEqual("xl"),
+		xxl: breakpoints.isGreaterOrEqual("xxl")
+	}));
+	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,28 @@
+import { valueFormat } from "../utils/valueFormat.js";
+import { isVNode } from "vue";
+import { handleEmptyField } 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 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);
+			return finalValue;
+		};
+		return {
+			...column,
+			render: wrappedRender
+		};
+	}
+	return { wrapColumnRender };
+}
+//#endregion
+export { useCellRender };

package/dist/hooks/useColumnResize.d.ts

@@ -0,0 +1,30 @@
+import { ProColumnType } from "../interface.js";
+import * as _$vue from "vue";
+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(): _$vue.DefineComponent<ResizableHeaderCellProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ResizableHeaderCellProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+declare function useColumnResize(options: UseColumnResizeOptions): UseColumnResizeReturn;
+//#endregion
+export { ResizeInfo, UseColumnResizeOptions, UseColumnResizeReturn, useColumnResize };

package/dist/hooks/useColumnResize.js

@@ -0,0 +1,110 @@
+import { getColumnKey } from "./useColumns.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) => {
+			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 };