@wordrhyme/auto-crud 0.10.0 → 1.0.0

package/dist/index.cjs

@@ -35,6 +35,8 @@ let tailwind_merge = require("tailwind-merge");
 tailwind_merge = __toESM(tailwind_merge);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
+let nanoid = require("nanoid");
+nanoid = __toESM(nanoid);
 let __dnd_kit_core = require("@dnd-kit/core");
 __dnd_kit_core = __toESM(__dnd_kit_core);
 let __dnd_kit_modifiers = require("@dnd-kit/modifiers");
@@ -47,8 +49,6 @@ let __radix_ui_react_slot = require("@radix-ui/react-slot");
 __radix_ui_react_slot = __toESM(__radix_ui_react_slot);
 let react_dom = require("react-dom");
 react_dom = __toESM(react_dom);
-let nanoid = require("nanoid");
-nanoid = __toESM(nanoid);
 let __radix_ui_react_direction = require("@radix-ui/react-direction");
 __radix_ui_react_direction = __toESM(__radix_ui_react_direction);
 let zod = require("zod");
@@ -474,6 +474,104 @@ function DataTable({ table, actionBar, children, className,...props }) {
 	});
 }
 
+//#endregion
+//#region src/lib/id.ts
+const prefixes = {};
+function generateId(prefixOrOptions, inputOptions = {}) {
+	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
+	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
+	const { length = 12, separator = "_" } = finalOptions;
+	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
+	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
+}
+
+//#endregion
+//#region src/lib/readable-filters.ts
+const OP_SUFFIX = "__op";
+const INDEX_SEPARATOR = "__";
+const RANGE_VARIANTS = new Set(["range", "dateRange"]);
+function getColumnId(column) {
+	if ("id" in column && column.id) return String(column.id);
+	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
+	return null;
+}
+function getColumnVariant(column) {
+	if ("columnDef" in column) return column.columnDef.meta?.variant;
+	return column.meta?.variant;
+}
+function splitKey(key) {
+	const match = key.match(/^(.*?)(?:__(\d+))?$/);
+	if (!match) return { base: key };
+	const index = match[2] ? Number(match[2]) : void 0;
+	return {
+		base: match[1] ?? key,
+		index
+	};
+}
+function isFilterKey(key, columnIds) {
+	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
+	return columnIds.has(base);
+}
+function parseValueByVariant(value, variant) {
+	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
+	if (RANGE_VARIANTS.has(variant)) {
+		const parts = value.split(",");
+		return [parts[0] ?? "", parts[1] ?? ""];
+	}
+	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
+	return value;
+}
+function serializeValue(value, variant) {
+	if (Array.isArray(value)) {
+		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
+		return value.join(",");
+	}
+	return value;
+}
+function parseReadableFilters(params, columns) {
+	const columnsById = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const id = getColumnId(column);
+		if (id) columnsById.set(id, column);
+	}
+	const filters = [];
+	for (const [key, rawValue] of params.entries()) {
+		if (key.endsWith(OP_SUFFIX)) continue;
+		const { base } = splitKey(key);
+		const column = columnsById.get(base);
+		if (!column) continue;
+		const variant = getColumnVariant(column) ?? "text";
+		const opKey = `${key}${OP_SUFFIX}`;
+		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
+		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
+		filters.push({
+			id: base,
+			value: parsedValue,
+			variant,
+			operator,
+			filterId: key || generateId({ length: 8 })
+		});
+	}
+	return filters;
+}
+function applyReadableFilters(params, columns, filters) {
+	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
+	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
+	const counters = /* @__PURE__ */ new Map();
+	for (const filter of filters) {
+		const columnId = String(filter.id);
+		const count = (counters.get(columnId) ?? 0) + 1;
+		counters.set(columnId, count);
+		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
+		const variant = filter.variant ?? "text";
+		const value = serializeValue(filter.value, variant);
+		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
+		const defaultOperator = getDefaultFilterOperator(variant);
+		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
+	}
+	return params;
+}
+
 //#endregion
 //#region src/hooks/use-url-state.ts
 const parseAsInteger = {
@@ -724,6 +822,54 @@ function useQueryStates(parsers, options = {}) {
 	}, [setValues])];
 }
 
+//#endregion
+//#region src/hooks/use-readable-filters.ts
+const URL_CHANGE_EVENT = "urlchange";
+function useReadableFilters(columns, options = {}) {
+	const { history = "replace", scroll = false } = options;
+	const columnSnapshot = react.useMemo(() => columns, [columns]);
+	const lastWrittenUrlRef = react.useRef("");
+	const filtersRef = react.useRef(null);
+	const [filters, setFilters] = react.useState(() => {
+		const initial = parseReadableFilters(getUrlParams(), columnSnapshot);
+		filtersRef.current = initial;
+		return initial;
+	});
+	react.useEffect(() => {
+		const handleUrlChange = () => {
+			if (window.location.search === lastWrittenUrlRef.current) return;
+			const next = parseReadableFilters(getUrlParams(), columnSnapshot);
+			filtersRef.current = next;
+			setFilters(next);
+		};
+		window.addEventListener("popstate", handleUrlChange);
+		window.addEventListener(URL_CHANGE_EVENT, handleUrlChange);
+		return () => {
+			window.removeEventListener("popstate", handleUrlChange);
+			window.removeEventListener(URL_CHANGE_EVENT, handleUrlChange);
+		};
+	}, [columnSnapshot]);
+	const writeToUrl = react.useCallback((next) => {
+		const params = getUrlParams();
+		applyReadableFilters(params, columnSnapshot, next);
+		setSearchParams(params, {
+			history,
+			scroll
+		});
+		lastWrittenUrlRef.current = `?${params.toString()}`;
+	}, [
+		columnSnapshot,
+		history,
+		scroll
+	]);
+	return [filters, react.useCallback((updater) => {
+		const next = typeof updater === "function" ? updater(filtersRef.current) : updater;
+		filtersRef.current = next;
+		setFilters(next);
+		writeToUrl(next);
+	}, [writeToUrl])];
+}
+
 //#endregion
 //#region src/components/data-table/data-table-range-filter.tsx
 function DataTableRangeFilter({ filter, column, inputId, onFilterUpdate, className,...props }) {
@@ -1291,159 +1437,6 @@ function formatDate(date, opts = {}) {
 	}
 }
 
-//#endregion
-//#region src/lib/id.ts
-const prefixes = {};
-function generateId(prefixOrOptions, inputOptions = {}) {
-	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
-	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
-	const { length = 12, separator = "_" } = finalOptions;
-	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
-	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
-}
-
-//#endregion
-//#region src/lib/readable-filters.ts
-const OP_SUFFIX = "__op";
-const INDEX_SEPARATOR = "__";
-const RANGE_VARIANTS = new Set(["range", "dateRange"]);
-function getColumnId(column) {
-	if ("id" in column && column.id) return String(column.id);
-	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
-	return null;
-}
-function getColumnVariant(column) {
-	if ("columnDef" in column) return column.columnDef.meta?.variant;
-	return column.meta?.variant;
-}
-function splitKey(key) {
-	const match = key.match(/^(.*?)(?:__(\d+))?$/);
-	if (!match) return { base: key };
-	const index = match[2] ? Number(match[2]) : void 0;
-	return {
-		base: match[1] ?? key,
-		index
-	};
-}
-function isFilterKey(key, columnIds) {
-	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
-	return columnIds.has(base);
-}
-function parseValueByVariant(value, variant) {
-	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
-	if (RANGE_VARIANTS.has(variant)) {
-		const parts = value.split(",");
-		return [parts[0] ?? "", parts[1] ?? ""];
-	}
-	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
-	return value;
-}
-function serializeValue(value, variant) {
-	if (Array.isArray(value)) {
-		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
-		return value.join(",");
-	}
-	return value;
-}
-function parseReadableFilters(params, columns) {
-	const columnsById = /* @__PURE__ */ new Map();
-	for (const column of columns) {
-		const id = getColumnId(column);
-		if (id) columnsById.set(id, column);
-	}
-	const filters = [];
-	for (const [key, rawValue] of params.entries()) {
-		if (key.endsWith(OP_SUFFIX)) continue;
-		const { base } = splitKey(key);
-		const column = columnsById.get(base);
-		if (!column) continue;
-		const variant = getColumnVariant(column) ?? "text";
-		const opKey = `${key}${OP_SUFFIX}`;
-		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
-		if (!rawValue && operator !== "isEmpty" && operator !== "isNotEmpty") continue;
-		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
-		filters.push({
-			id: base,
-			value: parsedValue,
-			variant,
-			operator,
-			filterId: key || generateId({ length: 8 })
-		});
-	}
-	return filters;
-}
-function applyReadableFilters(params, columns, filters) {
-	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
-	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
-	const counters = /* @__PURE__ */ new Map();
-	for (const filter of filters) {
-		const columnId = String(filter.id);
-		const count = (counters.get(columnId) ?? 0) + 1;
-		counters.set(columnId, count);
-		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
-		const variant = filter.variant ?? "text";
-		const value = serializeValue(filter.value, variant);
-		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
-		const defaultOperator = getDefaultFilterOperator(variant);
-		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
-	}
-	return params;
-}
-
-//#endregion
-//#region src/hooks/use-readable-filters.ts
-const URL_CHANGE_EVENT = "urlchange";
-function useReadableFilters(columns, options = {}) {
-	const { debounceMs = 300, history = "replace", scroll = false } = options;
-	const columnSnapshot = react.useMemo(() => columns, [columns]);
-	const skipWriteRef = react.useRef(true);
-	const [filters, setFilters] = react.useState(() => parseReadableFilters(getUrlParams(), columnSnapshot));
-	react.useEffect(() => {
-		const handleUrlChange = () => {
-			skipWriteRef.current = true;
-			setFilters(parseReadableFilters(getUrlParams(), columnSnapshot));
-		};
-		window.addEventListener("popstate", handleUrlChange);
-		window.addEventListener(URL_CHANGE_EVENT, handleUrlChange);
-		return () => {
-			window.removeEventListener("popstate", handleUrlChange);
-			window.removeEventListener(URL_CHANGE_EVENT, handleUrlChange);
-		};
-	}, [columnSnapshot]);
-	const writeFilters = react.useCallback((next) => {
-		const params = getUrlParams();
-		applyReadableFilters(params, columnSnapshot, next);
-		setSearchParams(params, {
-			history,
-			scroll
-		});
-	}, [
-		columnSnapshot,
-		history,
-		scroll
-	]);
-	const updateFilters = react.useCallback((updater) => {
-		setFilters((prev) => {
-			return typeof updater === "function" ? updater(prev) : updater;
-		});
-	}, []);
-	const debouncedWrite = useDebouncedCallback(writeFilters, debounceMs);
-	react.useEffect(() => {
-		if (skipWriteRef.current) {
-			skipWriteRef.current = false;
-			return;
-		}
-		if (debounceMs > 0) debouncedWrite(filters);
-		else writeFilters(filters);
-	}, [
-		filters,
-		debounceMs,
-		debouncedWrite,
-		writeFilters
-	]);
-	return [filters, updateFilters];
-}
-
 //#endregion
 //#region src/components/data-table/data-table-filter-list.tsx
 const DEBOUNCE_MS$2 = 300;
@@ -1459,11 +1452,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 	const columns = react.useMemo(() => {
 		return table.getAllColumns().filter((column) => column.columnDef.enableColumnFilter);
 	}, [table]);
-	const queryStateOptions = table.options.meta?.queryStateOptions;
-	const [filters, setFilters] = useReadableFilters(columns, {
-		...queryStateOptions,
-		debounceMs: 0
-	});
+	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
 	const onFilterAdd = react.useCallback(() => {
@@ -1499,7 +1488,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 		});
 	}, [filters, setFilters]);
 	const onFiltersReset = react.useCallback(() => {
-		setFilters(null);
+		setFilters([]);
 		setJoinOperator("and");
 	}, [setFilters, setJoinOperator]);
 	react.useEffect(() => {
@@ -1963,11 +1952,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			setSelectedColumn(null);
 		}
 	}, [inputValue, selectedColumn]);
-	const queryStateOptions = table.options.meta?.queryStateOptions;
-	const [filters, setFilters] = useReadableFilters(columns, {
-		...queryStateOptions,
-		debounceMs: 0
-	});
+	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const onFilterAdd = react.useCallback((column, value) => {
 		if (!value.trim() && column.columnDef.meta?.variant !== "boolean") return;
@@ -2749,51 +2734,142 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		setFilters
 	]);
 	const hasFilters = filters.length > 0;
+	const filterColumns = react.useMemo(() => columns.filter((col) => col.columnDef.meta?.variant && col.columnDef.enableColumnFilter !== false), [columns]);
+	const [expanded, setExpanded] = react.useState(false);
+	const [visibleCount, setVisibleCount] = react.useState(null);
+	const containerRef = react.useRef(null);
+	const calcVisibleCount = react.useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const items = el.querySelectorAll("[data-filter-item]");
+		if (items.length === 0) return;
+		const restoreList = [];
+		el.querySelectorAll(".hidden").forEach((node) => {
+			const htmlNode = node;
+			htmlNode.classList.remove("hidden");
+			restoreList.push(htmlNode);
+		});
+		el.style.flex = "1 1 0%";
+		el.offsetHeight;
+		const firstTop = items[0].offsetTop;
+		let count = 0;
+		for (const item of Array.from(items)) {
+			if (item.offsetTop > firstTop) break;
+			count++;
+		}
+		const btn = el.querySelector("[data-filter-toggle]");
+		if (btn && count < items.length && count > 0) {
+			if (btn.offsetTop > firstTop) count--;
+		}
+		el.style.flex = "";
+		restoreList.forEach((node) => node.classList.add("hidden"));
+		setVisibleCount(count >= items.length ? null : count);
+	}, []);
+	react.useLayoutEffect(() => {
+		if (!mounted) return;
+		calcVisibleCount();
+	}, [
+		mounted,
+		filterColumns.length,
+		calcVisibleCount
+	]);
+	react.useEffect(() => {
+		const parent = containerRef.current?.closest("[data-filter-parent]");
+		if (!mounted || !parent) return;
+		let lastWidth = parent.offsetWidth;
+		let rafId = 0;
+		const ro = new ResizeObserver(() => {
+			const newWidth = parent.offsetWidth;
+			if (newWidth === lastWidth) return;
+			lastWidth = newWidth;
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(calcVisibleCount);
+		});
+		ro.observe(parent);
+		return () => {
+			cancelAnimationFrame(rafId);
+			ro.disconnect();
+		};
+	}, [
+		mounted,
+		filterColumns.length,
+		calcVisibleCount
+	]);
 	if (!mounted) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-wrap items-center gap-2",
-		children: [columns.map((column) => {
-			const meta = column.columnDef.meta;
-			if (!meta?.variant) return null;
-			const value = getFilterValue(column.id);
-			switch (meta.variant) {
-				case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
-					placeholder: meta.label ?? column.id,
-					value: typeof value === "string" ? value : "",
-					onChange: (e) => updateFilter(column.id, e.target.value || void 0),
-					className: "h-8 w-36"
-				}, column.id);
-				case "select":
-				case "multiSelect": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleFacetedFilter, {
-					title: meta.label ?? column.id,
-					options: meta.options ?? [],
-					multiple: meta.variant === "multiSelect",
-					value: Array.isArray(value) ? value : value ? [value] : [],
-					onChange: (v) => updateFilter(column.id, v.length ? v : void 0)
-				}, column.id);
-				case "range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSliderFilter, {
-					title: meta.label ?? column.id,
-					range: meta.range,
-					unit: meta.unit,
-					value: Array.isArray(value) ? value.map(Number) : void 0,
-					onChange: (v) => updateFilter(column.id, v ? v.map(String) : void 0)
-				}, column.id);
-				case "date":
-				case "dateRange": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleDateFilter, {
-					title: meta.label ?? column.id,
-					multiple: meta.variant === "dateRange",
-					value,
-					onChange: (v) => updateFilter(column.id, v)
-				}, column.id);
-				default: return null;
-			}
-		}), hasFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-			variant: "outline",
-			size: "sm",
-			className: "h-8 border-dashed",
-			onClick: () => setFilters([]),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), "Reset"]
-		})]
+		ref: containerRef,
+		className: "flex flex-wrap items-center gap-2 min-w-0",
+		children: [
+			filterColumns.map((column, index) => {
+				const meta = column.columnDef.meta;
+				const value = getFilterValue(column.id);
+				const isHidden = !expanded && visibleCount !== null && index >= visibleCount;
+				switch (meta.variant) {
+					case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
+							placeholder: meta.placeholder ?? meta.label ?? column.id,
+							value: typeof value === "string" ? value : "",
+							onChange: (e) => updateFilter(column.id, e.target.value || void 0),
+							className: "h-8 w-36 shrink-0"
+						})
+					}, column.id);
+					case "select":
+					case "multiSelect": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleFacetedFilter, {
+							title: meta.label ?? column.id,
+							options: meta.options ?? [],
+							multiple: meta.variant === "multiSelect",
+							value: Array.isArray(value) ? value : value ? [value] : [],
+							onChange: (v) => updateFilter(column.id, v.length ? v : void 0)
+						})
+					}, column.id);
+					case "range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSliderFilter, {
+							title: meta.label ?? column.id,
+							range: meta.range,
+							unit: meta.unit,
+							value: Array.isArray(value) ? value.map(Number) : void 0,
+							onChange: (v) => updateFilter(column.id, v ? v.map(String) : void 0)
+						})
+					}, column.id);
+					case "date":
+					case "dateRange": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleDateFilter, {
+							title: meta.label ?? column.id,
+							multiple: meta.variant === "dateRange",
+							value,
+							onChange: (v) => updateFilter(column.id, v)
+						})
+					}, column.id);
+					default: return null;
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				"data-filter-toggle": true,
+				variant: "ghost",
+				size: "icon",
+				className: cn("h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground", visibleCount === null && "hidden"),
+				onClick: () => setExpanded((prev) => !prev),
+				"aria-label": expanded ? "收起筛选" : "展开更多筛选",
+				"aria-expanded": expanded,
+				children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4" })
+			}),
+			hasFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+				variant: "outline",
+				size: "sm",
+				className: "h-8 border-dashed shrink-0",
+				onClick: () => setFilters([]),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), "Reset"]
+			})
+		]
 	});
 }
 function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
@@ -4222,25 +4298,32 @@ function createParser(config) {
 		})
 	};
 }
-const sortingItemSchema = zod.z.object({
-	id: zod.z.string(),
-	desc: zod.z.boolean()
-});
 const getSortingStateParser = (columnIds) => {
 	const validKeys = columnIds ? columnIds instanceof Set ? columnIds : new Set(columnIds) : null;
 	return createParser({
 		parse: (value) => {
 			try {
-				const parsed = JSON.parse(value);
-				const result = zod.z.array(sortingItemSchema).safeParse(parsed);
-				if (!result.success) return null;
-				if (validKeys && result.data.some((item) => !validKeys.has(item.id))) return null;
-				return result.data;
+				if (!value || value.trim() === "") return [];
+				const items = value.split(",").map((item) => {
+					const lastDot = item.lastIndexOf(".");
+					if (lastDot === -1) return null;
+					const id = item.slice(0, lastDot);
+					const dir = item.slice(lastDot + 1);
+					if (!id || dir !== "asc" && dir !== "desc") return null;
+					return {
+						id,
+						desc: dir === "desc"
+					};
+				});
+				if (items.some((item) => item === null)) return null;
+				const result = items;
+				if (validKeys && result.some((item) => !validKeys.has(item.id))) return null;
+				return result;
 			} catch {
 				return null;
 			}
 		},
-		serialize: (value) => JSON.stringify(value)
+		serialize: (value) => value.map((item) => `${item.id}.${item.desc ? "desc" : "asc"}`).join(",")
 	});
 };
 const filterItemSchema = zod.z.object({
@@ -4446,7 +4529,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		"advanced",
 		"command"
 	];
-	const [currentMode, setCurrentMode] = (0, react.useState)(modes[0] ?? "simple");
+	const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
 	const showToggle = modes.length > 1;
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
@@ -4541,7 +4624,8 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex w-full items-start justify-between gap-2 p-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-1 flex-wrap items-center gap-2",
+					className: "flex flex-1 items-start gap-2 min-h-[40px]",
+					"data-filter-parent": true,
 					children: [currentMode !== "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
 						table,
 						align: "start"
@@ -5125,92 +5209,36 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title = "导
 	});
 }
 
-//#endregion
-//#region src/components/auto-crud/export-dialog.tsx
-function ExportDialog({ open, onOpenChange, selectedCount, onExport, canExportFiltered = false }) {
-	const [exporting, setExporting] = react.useState(null);
-	const [done, setDone] = react.useState(false);
-	const reset = react.useCallback(() => {
-		setExporting(null);
-		setDone(false);
-	}, []);
-	const handleOpenChange = react.useCallback((value) => {
-		if (!value) reset();
-		onOpenChange(value);
-	}, [onOpenChange, reset]);
-	const handleExport = react.useCallback(async (mode) => {
-		setExporting(mode);
-		try {
-			await onExport(mode);
-			setDone(true);
-			setTimeout(() => handleOpenChange(false), 800);
-		} catch {
-			setExporting(null);
-		}
-	}, [onExport, handleOpenChange]);
-	const hasSelected = selectedCount > 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
-		open,
-		onOpenChange: handleOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, {
-			className: "sm:max-w-[400px]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: "导出数据" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: "选择导出范围" })] }), done ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col items-center gap-3 py-6",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "h-10 w-10 text-green-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-sm text-muted-foreground",
-					children: "导出成功"
-				})]
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid gap-3 py-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-					variant: "outline",
-					className: "h-auto justify-start gap-3 px-4 py-3",
-					disabled: !hasSelected || exporting !== null,
-					onClick: () => handleExport("selected"),
-					children: [exporting === "selected" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col items-start",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "font-medium",
-							children: ["导出选中", hasSelected ? ` (${selectedCount} 条)` : ""]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-xs text-muted-foreground",
-							children: hasSelected ? "导出当前勾选的数据行" : "请先在表格中勾选数据行"
-						})]
-					})]
-				}), canExportFiltered && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-					variant: "outline",
-					className: "h-auto justify-start gap-3 px-4 py-3",
-					disabled: exporting !== null,
-					onClick: () => handleExport("filtered"),
-					children: [exporting === "filtered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col items-start",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "font-medium",
-							children: "导出筛选结果"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-xs text-muted-foreground",
-							children: "导出当前筛选条件下的所有数据"
-						})]
-					})]
-				})]
-			})]
-		})
-	});
-}
-
 //#endregion
 //#region src/components/auto-crud/auto-crud-table.tsx
 /**
 * 从统一配置生成表格 overrides
+* 当 filter 配置存在时，合并到 meta 中（不影响列隐藏）
 */
 function buildTableOverrides(fields, legacyOverrides) {
 	const result = { ...legacyOverrides };
-	if (fields) for (const [key, config] of Object.entries(fields)) result[key] = {
-		...result[key],
-		...config.label && { label: config.label },
-		...config.hidden && { hidden: true },
-		...config.table
-	};
+	if (fields) for (const [key, config] of Object.entries(fields)) {
+		let filterMeta;
+		if (config.filter && config.filter.enabled !== false && !config.filter.hidden) {
+			const { enabled: _, hidden: __,...filterProps } = config.filter;
+			if (Object.keys(filterProps).length > 0) filterMeta = filterProps;
+		}
+		result[key] = {
+			...result[key],
+			...config.label && { label: config.label },
+			...config.hidden && { hidden: true },
+			...config.table,
+			...filterMeta && { meta: {
+				...result[key]?.meta ?? {},
+				...config.table?.meta ?? {},
+				...filterMeta
+			} }
+		};
+		if (config.filter?.enabled === false || config.filter?.hidden === true) result[key] = {
+			...result[key],
+			enableColumnFilter: false
+		};
+	}
 	return result;
 }
 /**
@@ -5364,8 +5392,8 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 	const canImport = can.import && !!resource.handlers.import;
 	const canExport = can.export;
 	const [importOpen, setImportOpen] = react.useState(false);
-	const [exportOpen, setExportOpen] = react.useState(false);
 	const [selectedCount, setSelectedCount] = react.useState(0);
+	const [exporting, setExporting] = react.useState(false);
 	const getSelectedRowsRef = react.useRef(null);
 	const importColumns = react.useMemo(() => {
 		const shape = schema.shape;
@@ -5394,6 +5422,15 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 		title,
 		denyFields
 	]);
+	const handleExportClick = react.useCallback(async () => {
+		const mode = selectedCount > 0 ? "selected" : "filtered";
+		setExporting(true);
+		try {
+			await handleExport(mode);
+		} finally {
+			setExporting(false);
+		}
+	}, [selectedCount, handleExport]);
 	const tableOverrides = buildTableOverrides(fields, tableConfig?.overrides);
 	const formOverrides = buildFormOverrides(fields, formConfig?.overrides, denyFields);
 	const hiddenColumns = buildHiddenColumns(fields, tableConfig?.hidden, denyFields);
@@ -5429,8 +5466,9 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 						canExport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => setExportOpen(true),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }), "导出"]
+							onClick: handleExportClick,
+							disabled: exporting || selectedCount === 0 && !resource.handlers.export,
+							children: [exporting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }), selectedCount > 0 ? `导出(${selectedCount})` : "导出"]
 						}),
 						can.create && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
 							onClick: resource.handlers.openCreate,
@@ -5497,18 +5535,84 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				onOpenChange: setImportOpen,
 				onImport: resource.handlers.import,
 				columns: importColumns
-			}),
-			canExport && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExportDialog, {
-				open: exportOpen,
-				onOpenChange: setExportOpen,
-				selectedCount,
-				onExport: handleExport,
-				canExportFiltered: !!resource.handlers.export
 			})
 		]
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/export-dialog.tsx
+function ExportDialog({ open, onOpenChange, selectedCount, onExport, canExportFiltered = false }) {
+	const [exporting, setExporting] = react.useState(null);
+	const [done, setDone] = react.useState(false);
+	const reset = react.useCallback(() => {
+		setExporting(null);
+		setDone(false);
+	}, []);
+	const handleOpenChange = react.useCallback((value) => {
+		if (!value) reset();
+		onOpenChange(value);
+	}, [onOpenChange, reset]);
+	const handleExport = react.useCallback(async (mode) => {
+		setExporting(mode);
+		try {
+			await onExport(mode);
+			setDone(true);
+			setTimeout(() => handleOpenChange(false), 800);
+		} catch {
+			setExporting(null);
+		}
+	}, [onExport, handleOpenChange]);
+	const hasSelected = selectedCount > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, {
+			className: "sm:max-w-[400px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: "导出数据" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: "选择导出范围" })] }), done ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-3 py-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "h-10 w-10 text-green-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm text-muted-foreground",
+					children: "导出成功"
+				})]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid gap-3 py-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+					variant: "outline",
+					className: "h-auto justify-start gap-3 px-4 py-3",
+					disabled: !hasSelected || exporting !== null,
+					onClick: () => handleExport("selected"),
+					children: [exporting === "selected" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col items-start",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "font-medium",
+							children: ["导出选中", hasSelected ? ` (${selectedCount} 条)` : ""]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs text-muted-foreground",
+							children: hasSelected ? "导出当前勾选的数据行" : "请先在表格中勾选数据行"
+						})]
+					})]
+				}), canExportFiltered && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+					variant: "outline",
+					className: "h-auto justify-start gap-3 px-4 py-3",
+					disabled: exporting !== null,
+					onClick: () => handleExport("filtered"),
+					children: [exporting === "filtered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col items-start",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-medium",
+							children: "导出筛选结果"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs text-muted-foreground",
+							children: "导出当前筛选条件下的所有数据"
+						})]
+					})]
+				})]
+			})]
+		})
+	});
+}
+
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.tsx
 function DataTableAdvancedToolbar({ table, children, className,...props }) {
@@ -6742,12 +6846,12 @@ function createMemoryDataSource(initialData = []) {
 				});
 			});
 			if (params.sort && params.sort.length > 0) {
-				const { id, desc } = params.sort[0];
+				const sortItem = params.sort[0];
 				filtered.sort((a, b) => {
-					const aVal = a[id];
-					const bVal = b[id];
+					const aVal = a[sortItem.id];
+					const bVal = b[sortItem.id];
 					const result = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
-					return desc ? -result : result;
+					return sortItem.desc ? -result : result;
 				});
 			}
 			const start = (params.page - 1) * params.perPage;
@@ -6775,11 +6879,12 @@ function createMemoryDataSource(initialData = []) {
 		async update(id, updateData) {
 			const index = data.findIndex((item) => item.id === id);
 			if (index === -1) throw new Error(`Item with id ${id} not found`);
-			data[index] = {
+			const updated = {
 				...data[index],
 				...updateData
 			};
-			return data[index];
+			data[index] = updated;
+			return updated;
 		},
 		async delete(id) {
 			const index = data.findIndex((item) => item.id === id);