@wordrhyme/auto-crud 0.5.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 }) {
@@ -1292,204 +1438,47 @@ 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;
-const THROTTLE_MS$2 = 50;
-const FILTER_SHORTCUT_KEY$1 = "f";
-const REMOVE_FILTER_SHORTCUTS$1 = ["backspace", "delete"];
-function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = THROTTLE_MS$2, shallow = true, disabled,...props }) {
-	const id = react.useId();
-	const labelId = react.useId();
-	const descriptionId = react.useId();
-	const [open, setOpen] = react.useState(false);
-	const addButtonRef = react.useRef(null);
-	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 debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
-	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
-	const onFilterAdd = react.useCallback(() => {
-		const column = columns[0];
-		if (!column) return;
-		debouncedSetFilters([...filters, {
-			id: column.id,
-			value: "",
-			variant: column.columnDef.meta?.variant ?? "text",
-			operator: getDefaultFilterOperator(column.columnDef.meta?.variant ?? "text"),
-			filterId: generateId({ length: 8 })
-		}]);
-	}, [
-		columns,
-		filters,
-		debouncedSetFilters
-	]);
-	const onFilterUpdate = react.useCallback((filterId, updates) => {
-		debouncedSetFilters((prevFilters) => {
-			return prevFilters.map((filter) => {
-				if (filter.filterId === filterId) return {
-					...filter,
-					...updates
-				};
-				return filter;
-			});
+//#region src/components/data-table/data-table-filter-list.tsx
+const DEBOUNCE_MS$2 = 300;
+const THROTTLE_MS$2 = 50;
+const FILTER_SHORTCUT_KEY$1 = "f";
+const REMOVE_FILTER_SHORTCUTS$1 = ["backspace", "delete"];
+function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = THROTTLE_MS$2, shallow = true, disabled,...props }) {
+	const id = react.useId();
+	const labelId = react.useId();
+	const descriptionId = react.useId();
+	const [open, setOpen] = react.useState(false);
+	const addButtonRef = react.useRef(null);
+	const columns = react.useMemo(() => {
+		return table.getAllColumns().filter((column) => column.columnDef.enableColumnFilter);
+	}, [table]);
+	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(() => {
+		const column = columns[0];
+		if (!column) return;
+		debouncedSetFilters([...filters, {
+			id: column.id,
+			value: "",
+			variant: column.columnDef.meta?.variant ?? "text",
+			operator: getDefaultFilterOperator(column.columnDef.meta?.variant ?? "text"),
+			filterId: generateId({ length: 8 })
+		}]);
+	}, [
+		columns,
+		filters,
+		debouncedSetFilters
+	]);
+	const onFilterUpdate = react.useCallback((filterId, updates) => {
+		debouncedSetFilters((prevFilters) => {
+			return prevFilters.map((filter) => {
+				if (filter.filterId === filterId) return {
+					...filter,
+					...updates
+				};
+				return filter;
+			});
 		});
 	}, [debouncedSetFilters]);
 	const onFilterRemove = react.useCallback((filterId) => {
@@ -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;
@@ -2684,7 +2669,7 @@ function DataTableViewOptions({ table, disabled,...props }) {
 			role: "combobox",
 			variant: "outline",
 			size: "sm",
-			className: "ml-auto hidden h-8 font-normal lg:flex",
+			className: "ml-auto flex h-8 font-normal",
 			disabled,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings2, { className: "text-muted-foreground" }), "View"]
 		})
@@ -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 }) {
@@ -3515,352 +3591,44 @@ function ActionBarSeparator(props) {
 }
 
 //#endregion
-//#region src/lib/export.ts
-function exportTableToCSV(table, opts = {}) {
-	const { filename = "table", excludeColumns = [], onlySelected = false } = opts;
-	const headers = table.getAllLeafColumns().map((column) => column.id).filter((id) => !excludeColumns.includes(id));
-	const csvContent = [headers.join(","), ...(onlySelected ? table.getFilteredSelectedRowModel().rows : table.getRowModel().rows).map((row) => headers.map((header) => {
-		const cellValue = row.getValue(header);
-		return typeof cellValue === "string" ? `"${cellValue.replace(/"/g, "\"\"")}"` : cellValue;
-	}).join(","))].join("\n");
-	const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-	const url = URL.createObjectURL(blob);
-	const link = document.createElement("a");
-	link.setAttribute("href", url);
-	link.setAttribute("download", `${filename}.csv`);
-	link.style.visibility = "hidden";
-	document.body.appendChild(link);
-	link.click();
-	document.body.removeChild(link);
-}
-
-//#endregion
-//#region src/components/auto-crud/auto-table-action-bar.tsx
-function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUpdateFields, enableExport = true, enableDelete = true, extraActions }) {
-	const rows = table.getFilteredSelectedRowModel().rows;
-	const onOpenChange = react.useCallback((open) => {
-		if (!open) table.toggleAllRowsSelected(false);
-	}, [table]);
-	const onExport = react.useCallback(() => {
-		exportTableToCSV(table, {
-			excludeColumns: ["select", "actions"],
-			onlySelected: true
-		});
-	}, [table]);
-	const onDelete = react.useCallback(() => {
-		if (onDeleteSelected) onDeleteSelected(rows.map((row) => row.original));
-	}, [rows, onDeleteSelected]);
-	const handleBatchUpdate = react.useCallback((field, value) => {
-		if (onUpdateSelected) {
-			onUpdateSelected(rows.map((row) => row.original), { [field]: value });
-			table.toggleAllRowsSelected(false);
-		}
-	}, [
-		rows,
-		onUpdateSelected,
-		table
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBar, {
-		open: rows.length > 0,
-		onOpenChange,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarSelection, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "font-medium",
-					children: rows.length
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "selected" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarSeparator, {}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarClose, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {}) })
-			] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarSeparator, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarGroup, { children: [
-				batchUpdateFields?.map((fieldConfig) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
-					asChild: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-						variant: "ghost",
-						size: "sm",
-						className: "h-7 gap-1 px-2",
-						children: [fieldConfig.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-3.5" })]
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuContent, {
-					align: "start",
-					children: fieldConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
-						onClick: () => handleBatchUpdate(fieldConfig.field, option.value),
-						children: option.label
-					}, option.value))
-				})] }, fieldConfig.field)),
-				extraActions,
-				enableExport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarItem, {
-					onClick: onExport,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, {}), "Export"]
-				}),
-				enableDelete && onDeleteSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarItem, {
-					variant: "destructive",
-					onClick: onDelete,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {}), "Delete"]
-				})
-			] })
-		]
+//#region src/components/data-table/data-table-column-header.tsx
+function DataTableColumnHeader({ column, label, className,...props }) {
+	if (!column.getCanSort() && !column.getCanHide()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn(className),
+		children: label
 	});
-}
-
-//#endregion
-//#region src/lib/parsers.ts
-/**
-* 创建自定义 Parser（替代 nuqs 的 createParser）
-*/
-function createParser(config) {
-	return {
-		parse: config.parse,
-		serialize: (value) => value === null ? "" : config.serialize(value),
-		withDefault: (defaultValue) => ({
-			parse: (value) => {
-				const parsed = config.parse(value);
-				return parsed === null ? defaultValue : parsed;
-			},
-			serialize: config.serialize,
-			defaultValue
-		})
-	};
-}
-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;
-			} catch {
-				return null;
-			}
-		},
-		serialize: (value) => JSON.stringify(value)
-	});
-};
-const filterItemSchema = zod.z.object({
-	id: zod.z.string(),
-	value: zod.z.union([zod.z.string(), zod.z.array(zod.z.string())]),
-	variant: zod.z.enum(dataTableConfig.filterVariants),
-	operator: zod.z.enum(dataTableConfig.operators),
-	filterId: zod.z.string()
-});
-
-//#endregion
-//#region src/hooks/use-data-table.ts
-const PAGE_KEY = "page";
-const PER_PAGE_KEY = "perPage";
-const SORT_KEY = "sort";
-const FILTERS_KEY = "filters";
-const JOIN_OPERATOR_KEY = "joinOperator";
-const ARRAY_SEPARATOR = ",";
-const DEBOUNCE_MS = 300;
-const THROTTLE_MS = 50;
-function useDataTable(props) {
-	const { columns, pageCount = -1, initialState, queryKeys, history = "replace", debounceMs = DEBOUNCE_MS, throttleMs = THROTTLE_MS, clearOnDefault = false, enableAdvancedFilter = false, scroll = false, shallow = true, startTransition,...tableProps } = props;
-	const pageKey = queryKeys?.page ?? PAGE_KEY;
-	const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;
-	const sortKey = queryKeys?.sort ?? SORT_KEY;
-	const filtersKey = queryKeys?.filters ?? FILTERS_KEY;
-	const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;
-	const queryStateOptions = react.useMemo(() => ({
-		history,
-		scroll,
-		shallow,
-		throttleMs,
-		debounceMs,
-		clearOnDefault,
-		startTransition
-	}), [
-		history,
-		scroll,
-		shallow,
-		throttleMs,
-		debounceMs,
-		clearOnDefault,
-		startTransition
-	]);
-	const [rowSelection, setRowSelection] = react.useState(initialState?.rowSelection ?? {});
-	const [columnVisibility, setColumnVisibility] = react.useState(initialState?.columnVisibility ?? {});
-	const [page, setPage] = useQueryState(pageKey, parseAsInteger.withDefault(1));
-	const [perPage, setPerPage] = useQueryState(perPageKey, parseAsInteger.withDefault(initialState?.pagination?.pageSize ?? 10));
-	const pagination = react.useMemo(() => {
-		return {
-			pageIndex: page - 1,
-			pageSize: perPage
-		};
-	}, [page, perPage]);
-	const onPaginationChange = react.useCallback((updaterOrValue) => {
-		if (typeof updaterOrValue === "function") {
-			const newPagination = updaterOrValue(pagination);
-			setPage(newPagination.pageIndex + 1);
-			setPerPage(newPagination.pageSize);
-		} else {
-			setPage(updaterOrValue.pageIndex + 1);
-			setPerPage(updaterOrValue.pageSize);
-		}
-	}, [
-		pagination,
-		setPage,
-		setPerPage
-	]);
-	const [sorting, setSorting] = useQueryState(sortKey, getSortingStateParser(react.useMemo(() => {
-		return new Set(columns.map((column) => column.id).filter(Boolean));
-	}, [columns])).withDefault(initialState?.sorting ?? []));
-	const onSortingChange = react.useCallback((updaterOrValue) => {
-		if (typeof updaterOrValue === "function") setSorting(updaterOrValue(sorting));
-		else setSorting(updaterOrValue);
-	}, [sorting, setSorting]);
-	const filterableColumns = react.useMemo(() => {
-		if (enableAdvancedFilter) return [];
-		return columns.filter((column) => column.enableColumnFilter);
-	}, [columns, enableAdvancedFilter]);
-	const [filterValues, setFilterValues] = useQueryStates(react.useMemo(() => {
-		if (enableAdvancedFilter) return {};
-		return filterableColumns.reduce((acc, column) => {
-			if (column.meta?.options) acc[column.id ?? ""] = parseAsArrayOf(parseAsString, ARRAY_SEPARATOR).withDefault([]);
-			else acc[column.id ?? ""] = parseAsString.withDefault("");
-			return acc;
-		}, {});
-	}, [filterableColumns, enableAdvancedFilter]));
-	const debouncedSetFilterValues = useDebouncedCallback((values) => {
-		setPage(1);
-		setFilterValues(values);
-	}, debounceMs);
-	const initialColumnFilters = react.useMemo(() => {
-		if (enableAdvancedFilter) return [];
-		return Object.entries(filterValues).reduce((filters, [key, value]) => {
-			if (value !== null) {
-				const processedValue = Array.isArray(value) ? value : typeof value === "string" && /[^a-zA-Z0-9]/.test(value) ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean) : [value];
-				filters.push({
-					id: key,
-					value: processedValue
-				});
-			}
-			return filters;
-		}, []);
-	}, [filterValues, enableAdvancedFilter]);
-	const [columnFilters, setColumnFilters] = react.useState(initialColumnFilters);
-	const onColumnFiltersChange = react.useCallback((updaterOrValue) => {
-		if (enableAdvancedFilter) return;
-		setColumnFilters((prev) => {
-			const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
-			const filterUpdates = next.reduce((acc, filter) => {
-				if (filterableColumns.find((column) => column.id === filter.id)) acc[filter.id] = filter.value;
-				return acc;
-			}, {});
-			for (const prevFilter of prev) if (!next.some((filter) => filter.id === prevFilter.id)) filterUpdates[prevFilter.id] = null;
-			debouncedSetFilterValues(filterUpdates);
-			return next;
-		});
-	}, [
-		debouncedSetFilterValues,
-		filterableColumns,
-		enableAdvancedFilter
-	]);
-	const table = (0, __tanstack_react_table.useReactTable)({
-		...tableProps,
-		columns,
-		initialState,
-		pageCount,
-		state: {
-			pagination,
-			sorting,
-			columnVisibility,
-			rowSelection,
-			columnFilters
-		},
-		defaultColumn: {
-			...tableProps.defaultColumn,
-			enableColumnFilter: false
-		},
-		enableRowSelection: true,
-		onRowSelectionChange: setRowSelection,
-		onPaginationChange,
-		onSortingChange,
-		onColumnFiltersChange,
-		onColumnVisibilityChange: setColumnVisibility,
-		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)(),
-		getFilteredRowModel: (0, __tanstack_react_table.getFilteredRowModel)(),
-		getPaginationRowModel: (0, __tanstack_react_table.getPaginationRowModel)(),
-		getSortedRowModel: (0, __tanstack_react_table.getSortedRowModel)(),
-		getFacetedRowModel: (0, __tanstack_react_table.getFacetedRowModel)(),
-		getFacetedUniqueValues: (0, __tanstack_react_table.getFacetedUniqueValues)(),
-		getFacetedMinMaxValues: (0, __tanstack_react_table.getFacetedMinMaxValues)(),
-		manualPagination: true,
-		manualSorting: true,
-		manualFiltering: true,
-		meta: {
-			...tableProps.meta,
-			queryKeys: {
-				page: pageKey,
-				perPage: perPageKey,
-				sort: sortKey,
-				filters: filtersKey,
-				joinOperator: joinOperatorKey
-			},
-			queryStateOptions
-		}
-	});
-	return react.useMemo(() => ({
-		table,
-		shallow,
-		debounceMs,
-		throttleMs
-	}), [
-		table,
-		shallow,
-		debounceMs,
-		throttleMs
-	]);
-}
-
-//#endregion
-//#region src/components/data-table/data-table-column-header.tsx
-function DataTableColumnHeader({ column, label, className,...props }) {
-	if (!column.getCanSort() && !column.getCanHide()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn(className),
-		children: label
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuTrigger, {
-		className: cn("-ml-1.5 flex h-8 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-accent focus:outline-none focus:ring-1 focus:ring-ring data-[state=open]:bg-accent [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground", className),
-		...props,
-		children: [label, column.getCanSort() && (column.getIsSorted() === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {}) : column.getIsSorted() === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDown, {}))]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuContent, {
-		align: "start",
-		className: "w-28",
-		children: [column.getCanSort() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuCheckboxItem, {
-				className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
-				checked: column.getIsSorted() === "asc",
-				onClick: () => column.toggleSorting(false),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {}), "Asc"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuCheckboxItem, {
-				className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
-				checked: column.getIsSorted() === "desc",
-				onClick: () => column.toggleSorting(true),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {}), "Desc"]
-			}),
-			column.getIsSorted() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
-				className: "pl-2 [&_svg]:text-muted-foreground",
-				onClick: () => column.clearSorting(),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {}), "Reset"]
-			})
-		] }), column.getCanHide() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuCheckboxItem, {
-			className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
-			checked: !column.getIsVisible(),
-			onClick: () => column.toggleVisibility(false),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeOff, {}), "Hide"]
-		})]
-	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuTrigger, {
+		className: cn("-ml-1.5 flex h-8 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-accent focus:outline-none focus:ring-1 focus:ring-ring data-[state=open]:bg-accent [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground", className),
+		...props,
+		children: [label, column.getCanSort() && (column.getIsSorted() === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {}) : column.getIsSorted() === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDown, {}))]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuContent, {
+		align: "start",
+		className: "w-28",
+		children: [column.getCanSort() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuCheckboxItem, {
+				className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
+				checked: column.getIsSorted() === "asc",
+				onClick: () => column.toggleSorting(false),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {}), "Asc"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuCheckboxItem, {
+				className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
+				checked: column.getIsSorted() === "desc",
+				onClick: () => column.toggleSorting(true),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {}), "Desc"]
+			}),
+			column.getIsSorted() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
+				className: "pl-2 [&_svg]:text-muted-foreground",
+				onClick: () => column.clearSorting(),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {}), "Reset"]
+			})
+		] }), column.getCanHide() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuCheckboxItem, {
+			className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
+			checked: !column.getIsVisible(),
+			onClick: () => column.toggleVisibility(false),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeOff, {}), "Hide"]
+		})]
+	})] });
 }
 
 //#endregion
@@ -4161,73 +3929,578 @@ function createTableSchema(schema, options) {
 			meta,
 			...restOverride
 		});
-	}
-	return columns;
-}
-/**
-* 创建选择列
-*/
-function createSelectColumn() {
-	return {
-		id: "select",
-		header: ({ table }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Checkbox, {
-			"aria-label": "Select all",
-			className: "translate-y-0.5",
-			checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
-			onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
-		}),
-		cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Checkbox, {
-			"aria-label": "Select row",
-			className: "translate-y-0.5",
-			checked: row.getIsSelected(),
-			onCheckedChange: (value) => row.toggleSelected(!!value)
-		}),
-		enableHiding: false,
-		enableSorting: false,
-		size: 40
-	};
-}
-/**
-* 创建操作列
-*/
-function createActionsColumn(config) {
-	const { onEdit, onDelete, onView, onCopy } = config;
-	return {
-		id: "actions",
-		cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
-				"aria-label": "Open menu",
-				variant: "ghost",
-				className: "flex size-8 p-0 data-[state=open]:bg-muted",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Ellipsis, { className: "size-4" })
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuContent, {
-			align: "end",
-			className: "w-40",
-			children: [
-				onView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
-					onClick: () => onView(row.original),
-					children: "查看"
-				}),
-				onEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
-					onClick: () => onEdit(row.original),
-					children: "编辑"
-				}),
-				onCopy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
-					onClick: () => onCopy(row.original),
-					children: "复制"
-				}),
-				(onView || onEdit || onCopy) && onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuSeparator, {}),
-				onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
-					className: "text-destructive",
-					onClick: () => onDelete(row.original),
-					children: "删除"
-				})
-			]
-		})] }),
-		size: 40
-	};
+	}
+	return columns;
+}
+/**
+* 创建选择列
+*/
+function createSelectColumn() {
+	return {
+		id: "select",
+		header: ({ table }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Checkbox, {
+			"aria-label": "Select all",
+			className: "translate-y-0.5",
+			checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+			onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+		}),
+		cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Checkbox, {
+			"aria-label": "Select row",
+			className: "translate-y-0.5",
+			checked: row.getIsSelected(),
+			onCheckedChange: (value) => row.toggleSelected(!!value)
+		}),
+		enableHiding: false,
+		enableSorting: false,
+		size: 40
+	};
+}
+/**
+* 创建操作列
+*/
+function createActionsColumn(config) {
+	const { onEdit, onDelete, onView, onCopy } = config;
+	return {
+		id: "actions",
+		cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				"aria-label": "Open menu",
+				variant: "ghost",
+				className: "flex size-8 p-0 data-[state=open]:bg-muted",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Ellipsis, { className: "size-4" })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuContent, {
+			align: "end",
+			className: "w-40",
+			children: [
+				onView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
+					onClick: () => onView(row.original),
+					children: "查看"
+				}),
+				onEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
+					onClick: () => onEdit(row.original),
+					children: "编辑"
+				}),
+				onCopy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
+					onClick: () => onCopy(row.original),
+					children: "复制"
+				}),
+				(onView || onEdit || onCopy) && onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuSeparator, {}),
+				onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
+					className: "text-destructive",
+					onClick: () => onDelete(row.original),
+					children: "删除"
+				})
+			]
+		})] }),
+		size: 40
+	};
+}
+
+//#endregion
+//#region src/lib/import.ts
+/**
+* 解析 CSV 字符串为对象数组
+* 支持：引号包裹、逗号转义、换行符、空值
+*/
+function parseCSV(content) {
+	const lines = parseCSVLines(content);
+	if (lines.length === 0) return {
+		headers: [],
+		rows: []
+	};
+	const headers = lines[0];
+	const rows = [];
+	for (let i = 1; i < lines.length; i++) {
+		const line = lines[i];
+		if (line.length === 1 && line[0] === "") continue;
+		const row = {};
+		for (let j = 0; j < headers.length; j++) {
+			const header = headers[j];
+			row[header] = line[j] ?? "";
+		}
+		rows.push(row);
+	}
+	return {
+		headers,
+		rows
+	};
+}
+/**
+* 将 CSV 文本解析为二维数组（处理引号转义）
+*/
+function parseCSVLines(text) {
+	const result = [];
+	let current = "";
+	let inQuotes = false;
+	let row = [];
+	for (let i = 0; i < text.length; i++) {
+		const char = text[i];
+		const next = text[i + 1];
+		if (inQuotes) if (char === "\"" && next === "\"") {
+			current += "\"";
+			i++;
+		} else if (char === "\"") inQuotes = false;
+		else current += char;
+		else if (char === "\"") inQuotes = true;
+		else if (char === ",") {
+			row.push(current);
+			current = "";
+		} else if (char === "\r" && next === "\n") {
+			row.push(current);
+			current = "";
+			result.push(row);
+			row = [];
+			i++;
+		} else if (char === "\n") {
+			row.push(current);
+			current = "";
+			result.push(row);
+			row = [];
+		} else current += char;
+	}
+	if (current !== "" || row.length > 0) {
+		row.push(current);
+		result.push(row);
+	}
+	return result;
+}
+/**
+* 解析 JSON 字符串为对象数组
+* 支持 JSON 数组或 { data: [...] } 格式
+*/
+function parseJSON(content) {
+	const parsed = JSON.parse(content);
+	if (Array.isArray(parsed)) return parsed;
+	if (parsed && typeof parsed === "object" && Array.isArray(parsed.data)) return parsed.data;
+	throw new Error("Invalid JSON format: expected an array or { data: [...] } object");
+}
+/**
+* 统一解析入口：根据文件扩展名自动选择解析器
+*/
+async function parseImportFile(file) {
+	const content = await file.text();
+	if (file.name.split(".").pop()?.toLowerCase() === "json") {
+		const rows$1 = parseJSON(content);
+		return {
+			headers: rows$1.length > 0 ? Object.keys(rows$1[0]) : [],
+			rows: rows$1,
+			format: "json"
+		};
+	}
+	const { headers, rows } = parseCSV(content);
+	return {
+		headers,
+		rows,
+		format: "csv"
+	};
+}
+/**
+* 生成 CSV 模板（仅包含表头，用于下载空模板）
+*/
+function generateCSVTemplate(headers) {
+	return headers.map((h) => escapeCSVField(h)).join(",") + "\n";
+}
+/**
+* 将数据数组转换为 CSV 字符串
+*/
+function dataToCSV(data, opts = {}) {
+	if (data.length === 0) return "";
+	const allHeaders = Object.keys(data[0]);
+	const headers = (opts.headers ?? allHeaders).filter((h) => !opts.excludeColumns?.includes(h));
+	return [headers.map((h) => escapeCSVField(h)).join(","), ...data.map((row) => headers.map((h) => escapeCSVField(String(row[h] ?? ""))).join(","))].join("\n");
+}
+function escapeCSVField(field) {
+	if (field.includes(",") || field.includes("\"") || field.includes("\n") || field.includes("\r")) return `"${field.replace(/"/g, "\"\"")}"`;
+	return field;
+}
+/**
+* 根据 Zod Schema 将 CSV 解析出的 string 值转换为正确类型
+*
+* CSV 解析后所有值都是 string，需要根据 schema 字段类型进行转换：
+* - number: parseFloat
+* - boolean: "true"/"1"/"yes" → true, 其他 → false
+* - date: new Date(value)
+* - 空字符串 → undefined（让 schema 默认值生效）
+*/
+function coerceRowValues(rows, schema) {
+	const shape = schema.shape;
+	const fieldTypes = /* @__PURE__ */ new Map();
+	for (const [key, fieldSchema] of Object.entries(shape)) {
+		const parsed = parseZodField(fieldSchema);
+		fieldTypes.set(key, parsed.type);
+	}
+	return rows.map((row) => {
+		const coerced = {};
+		for (const [key, value] of Object.entries(row)) {
+			const type = fieldTypes.get(key);
+			if (!type) {
+				coerced[key] = value;
+				continue;
+			}
+			if (value === "" || value === null || value === void 0) {
+				coerced[key] = void 0;
+				continue;
+			}
+			if (typeof value !== "string") {
+				coerced[key] = value;
+				continue;
+			}
+			switch (type) {
+				case "number": {
+					const num = parseFloat(value);
+					coerced[key] = isNaN(num) ? void 0 : num;
+					break;
+				}
+				case "boolean": {
+					const lower = value.toLowerCase().trim();
+					coerced[key] = lower === "true" || lower === "1" || lower === "yes";
+					break;
+				}
+				case "date": {
+					const date = new Date(value);
+					coerced[key] = isNaN(date.getTime()) ? void 0 : date;
+					break;
+				}
+				default: coerced[key] = value;
+			}
+		}
+		return coerced;
+	});
+}
+
+//#endregion
+//#region src/lib/export.ts
+function exportTableToCSV(table, opts = {}) {
+	const { filename = "table", excludeColumns = [], onlySelected = false } = opts;
+	const headers = table.getAllLeafColumns().map((column) => column.id).filter((id) => !excludeColumns.includes(id));
+	downloadCSV([headers.join(","), ...(onlySelected ? table.getFilteredSelectedRowModel().rows : table.getRowModel().rows).map((row) => headers.map((header) => {
+		const cellValue = row.getValue(header);
+		return typeof cellValue === "string" ? `"${cellValue.replace(/"/g, "\"\"")}"` : cellValue;
+	}).join(","))].join("\n"), filename);
+}
+/**
+* 导出原始数据数组为 CSV（用于服务端全量导出）
+*/
+function exportAllToCSV(data, opts = {}) {
+	const { filename = "export",...csvOpts } = opts;
+	downloadCSV(dataToCSV(data, csvOpts), filename);
+}
+/**
+* 下载 CSV 模板文件
+*/
+function downloadCSVTemplate(headers, filename = "template") {
+	downloadCSV(headers.map((h) => {
+		if (h.includes(",") || h.includes("\"") || h.includes("\n")) return `"${h.replace(/"/g, "\"\"")}"`;
+		return h;
+	}).join(",") + "\n", filename);
+}
+function downloadCSV(csvContent, filename) {
+	const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.setAttribute("href", url);
+	link.setAttribute("download", `${filename}.csv`);
+	link.style.visibility = "hidden";
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+}
+
+//#endregion
+//#region src/components/auto-crud/auto-table-action-bar.tsx
+function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUpdateFields, enableExport = true, enableDelete = true, extraActions }) {
+	const rows = table.getFilteredSelectedRowModel().rows;
+	const onOpenChange = react.useCallback((open) => {
+		if (!open) table.toggleAllRowsSelected(false);
+	}, [table]);
+	const onExport = react.useCallback(() => {
+		exportTableToCSV(table, {
+			excludeColumns: ["select", "actions"],
+			onlySelected: true
+		});
+	}, [table]);
+	const onDelete = react.useCallback(() => {
+		if (onDeleteSelected) onDeleteSelected(rows.map((row) => row.original));
+	}, [rows, onDeleteSelected]);
+	const handleBatchUpdate = react.useCallback((field, value) => {
+		if (onUpdateSelected) {
+			onUpdateSelected(rows.map((row) => row.original), { [field]: value });
+			table.toggleAllRowsSelected(false);
+		}
+	}, [
+		rows,
+		onUpdateSelected,
+		table
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBar, {
+		open: rows.length > 0,
+		onOpenChange,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarSelection, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium",
+					children: rows.length
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "selected" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarSeparator, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarClose, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {}) })
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionBarSeparator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarGroup, { children: [
+				batchUpdateFields?.map((fieldConfig) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-7 gap-1 px-2",
+						children: [fieldConfig.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-3.5" })]
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuContent, {
+					align: "start",
+					children: fieldConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuItem, {
+						onClick: () => handleBatchUpdate(fieldConfig.field, option.value),
+						children: option.label
+					}, option.value))
+				})] }, fieldConfig.field)),
+				extraActions,
+				enableExport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarItem, {
+					onClick: onExport,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, {}), "Export"]
+				}),
+				enableDelete && onDeleteSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionBarItem, {
+					variant: "destructive",
+					onClick: onDelete,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {}), "Delete"]
+				})
+			] })
+		]
+	});
+}
+
+//#endregion
+//#region src/lib/parsers.ts
+/**
+* 创建自定义 Parser（替代 nuqs 的 createParser）
+*/
+function createParser(config) {
+	return {
+		parse: config.parse,
+		serialize: (value) => value === null ? "" : config.serialize(value),
+		withDefault: (defaultValue) => ({
+			parse: (value) => {
+				const parsed = config.parse(value);
+				return parsed === null ? defaultValue : parsed;
+			},
+			serialize: config.serialize,
+			defaultValue
+		})
+	};
+}
+const getSortingStateParser = (columnIds) => {
+	const validKeys = columnIds ? columnIds instanceof Set ? columnIds : new Set(columnIds) : null;
+	return createParser({
+		parse: (value) => {
+			try {
+				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) => value.map((item) => `${item.id}.${item.desc ? "desc" : "asc"}`).join(",")
+	});
+};
+const filterItemSchema = zod.z.object({
+	id: zod.z.string(),
+	value: zod.z.union([zod.z.string(), zod.z.array(zod.z.string())]),
+	variant: zod.z.enum(dataTableConfig.filterVariants),
+	operator: zod.z.enum(dataTableConfig.operators),
+	filterId: zod.z.string()
+});
+
+//#endregion
+//#region src/hooks/use-data-table.ts
+const PAGE_KEY = "page";
+const PER_PAGE_KEY = "perPage";
+const SORT_KEY = "sort";
+const FILTERS_KEY = "filters";
+const JOIN_OPERATOR_KEY = "joinOperator";
+const ARRAY_SEPARATOR = ",";
+const DEBOUNCE_MS = 300;
+const THROTTLE_MS = 50;
+function useDataTable(props) {
+	const { columns, pageCount = -1, initialState, queryKeys, history = "replace", debounceMs = DEBOUNCE_MS, throttleMs = THROTTLE_MS, clearOnDefault = false, enableAdvancedFilter = false, scroll = false, shallow = true, startTransition,...tableProps } = props;
+	const pageKey = queryKeys?.page ?? PAGE_KEY;
+	const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;
+	const sortKey = queryKeys?.sort ?? SORT_KEY;
+	const filtersKey = queryKeys?.filters ?? FILTERS_KEY;
+	const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;
+	const queryStateOptions = react.useMemo(() => ({
+		history,
+		scroll,
+		shallow,
+		throttleMs,
+		debounceMs,
+		clearOnDefault,
+		startTransition
+	}), [
+		history,
+		scroll,
+		shallow,
+		throttleMs,
+		debounceMs,
+		clearOnDefault,
+		startTransition
+	]);
+	const [rowSelection, setRowSelection] = react.useState(initialState?.rowSelection ?? {});
+	const [columnVisibility, setColumnVisibility] = react.useState(initialState?.columnVisibility ?? {});
+	const [page, setPage] = useQueryState(pageKey, parseAsInteger.withDefault(1));
+	const [perPage, setPerPage] = useQueryState(perPageKey, parseAsInteger.withDefault(initialState?.pagination?.pageSize ?? 10));
+	const pagination = react.useMemo(() => {
+		return {
+			pageIndex: page - 1,
+			pageSize: perPage
+		};
+	}, [page, perPage]);
+	const onPaginationChange = react.useCallback((updaterOrValue) => {
+		if (typeof updaterOrValue === "function") {
+			const newPagination = updaterOrValue(pagination);
+			setPage(newPagination.pageIndex + 1);
+			setPerPage(newPagination.pageSize);
+		} else {
+			setPage(updaterOrValue.pageIndex + 1);
+			setPerPage(updaterOrValue.pageSize);
+		}
+	}, [
+		pagination,
+		setPage,
+		setPerPage
+	]);
+	const [sorting, setSorting] = useQueryState(sortKey, getSortingStateParser(react.useMemo(() => {
+		return new Set(columns.map((column) => column.id).filter(Boolean));
+	}, [columns])).withDefault(initialState?.sorting ?? []));
+	const onSortingChange = react.useCallback((updaterOrValue) => {
+		if (typeof updaterOrValue === "function") setSorting(updaterOrValue(sorting));
+		else setSorting(updaterOrValue);
+	}, [sorting, setSorting]);
+	const filterableColumns = react.useMemo(() => {
+		if (enableAdvancedFilter) return [];
+		return columns.filter((column) => column.enableColumnFilter);
+	}, [columns, enableAdvancedFilter]);
+	const [filterValues, setFilterValues] = useQueryStates(react.useMemo(() => {
+		if (enableAdvancedFilter) return {};
+		return filterableColumns.reduce((acc, column) => {
+			if (column.meta?.options) acc[column.id ?? ""] = parseAsArrayOf(parseAsString, ARRAY_SEPARATOR).withDefault([]);
+			else acc[column.id ?? ""] = parseAsString.withDefault("");
+			return acc;
+		}, {});
+	}, [filterableColumns, enableAdvancedFilter]));
+	const debouncedSetFilterValues = useDebouncedCallback((values) => {
+		setPage(1);
+		setFilterValues(values);
+	}, debounceMs);
+	const initialColumnFilters = react.useMemo(() => {
+		if (enableAdvancedFilter) return [];
+		return Object.entries(filterValues).reduce((filters, [key, value]) => {
+			if (value !== null) {
+				const processedValue = Array.isArray(value) ? value : typeof value === "string" && /[^a-zA-Z0-9]/.test(value) ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean) : [value];
+				filters.push({
+					id: key,
+					value: processedValue
+				});
+			}
+			return filters;
+		}, []);
+	}, [filterValues, enableAdvancedFilter]);
+	const [columnFilters, setColumnFilters] = react.useState(initialColumnFilters);
+	const onColumnFiltersChange = react.useCallback((updaterOrValue) => {
+		if (enableAdvancedFilter) return;
+		setColumnFilters((prev) => {
+			const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+			const filterUpdates = next.reduce((acc, filter) => {
+				if (filterableColumns.find((column) => column.id === filter.id)) acc[filter.id] = filter.value;
+				return acc;
+			}, {});
+			for (const prevFilter of prev) if (!next.some((filter) => filter.id === prevFilter.id)) filterUpdates[prevFilter.id] = null;
+			debouncedSetFilterValues(filterUpdates);
+			return next;
+		});
+	}, [
+		debouncedSetFilterValues,
+		filterableColumns,
+		enableAdvancedFilter
+	]);
+	const table = (0, __tanstack_react_table.useReactTable)({
+		...tableProps,
+		columns,
+		initialState,
+		pageCount,
+		state: {
+			pagination,
+			sorting,
+			columnVisibility,
+			rowSelection,
+			columnFilters
+		},
+		defaultColumn: {
+			...tableProps.defaultColumn,
+			enableColumnFilter: false
+		},
+		enableRowSelection: true,
+		onRowSelectionChange: setRowSelection,
+		onPaginationChange,
+		onSortingChange,
+		onColumnFiltersChange,
+		onColumnVisibilityChange: setColumnVisibility,
+		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)(),
+		getFilteredRowModel: (0, __tanstack_react_table.getFilteredRowModel)(),
+		getPaginationRowModel: (0, __tanstack_react_table.getPaginationRowModel)(),
+		getSortedRowModel: (0, __tanstack_react_table.getSortedRowModel)(),
+		getFacetedRowModel: (0, __tanstack_react_table.getFacetedRowModel)(),
+		getFacetedUniqueValues: (0, __tanstack_react_table.getFacetedUniqueValues)(),
+		getFacetedMinMaxValues: (0, __tanstack_react_table.getFacetedMinMaxValues)(),
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		meta: {
+			...tableProps.meta,
+			queryKeys: {
+				page: pageKey,
+				perPage: perPageKey,
+				sort: sortKey,
+				filters: filtersKey,
+				joinOperator: joinOperatorKey
+			},
+			queryStateOptions
+		}
+	});
+	return react.useMemo(() => ({
+		table,
+		shallow,
+		debounceMs,
+		throttleMs
+	}), [
+		table,
+		shallow,
+		debounceMs,
+		throttleMs
+	]);
 }
 
 //#endregion
@@ -4250,13 +4523,13 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, initialSorting, enableExport = true }) {
+function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, initialSorting, enableExport = true, onSelectedCountChange, getSelectedRows }) {
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : [
 		"simple",
 		"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,
@@ -4287,6 +4560,17 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		shallow: false,
 		clearOnDefault: true
 	});
+	const getSelectedRowsFn = (0, react.useCallback)(() => table.getFilteredSelectedRowModel().rows.map((row) => row.original), [table]);
+	(0, react.useEffect)(() => {
+		if (getSelectedRows) getSelectedRows.current = getSelectedRowsFn;
+		return () => {
+			if (getSelectedRows) getSelectedRows.current = null;
+		};
+	}, [getSelectedRows, getSelectedRowsFn]);
+	const selectedRowCount = table.getFilteredSelectedRowModel().rows.length;
+	(0, react.useEffect)(() => {
+		onSelectedCountChange?.(selectedRowCount);
+	}, [selectedRowCount, onSelectedCountChange]);
 	const FilterModeSelect = showToggle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
@@ -4340,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"
@@ -4618,19 +4903,342 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/import-dialog.tsx
+function ImportDialog({ open, onOpenChange, onImport, columns = [], title = "导入数据" }) {
+	const [step, setStep] = react.useState("upload");
+	const [parsedData, setParsedData] = react.useState(null);
+	const [error, setError] = react.useState(null);
+	const [result, setResult] = react.useState(null);
+	const [isDragging, setIsDragging] = react.useState(false);
+	const fileInputRef = react.useRef(null);
+	const reset = react.useCallback(() => {
+		setStep("upload");
+		setParsedData(null);
+		setError(null);
+		setResult(null);
+		setIsDragging(false);
+	}, []);
+	const handleOpenChange = react.useCallback((value) => {
+		if (!value) reset();
+		onOpenChange(value);
+	}, [onOpenChange, reset]);
+	const handleFile = react.useCallback(async (file) => {
+		setError(null);
+		try {
+			const data = await parseImportFile(file);
+			if (data.rows.length === 0) {
+				setError("文件中没有数据行");
+				return;
+			}
+			setParsedData(data);
+			setStep("preview");
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "文件解析失败");
+		}
+	}, []);
+	const handleDrop = react.useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(false);
+		const file = e.dataTransfer.files[0];
+		if (file) handleFile(file);
+	}, [handleFile]);
+	const handleFileInput = react.useCallback((e) => {
+		const file = e.target.files?.[0];
+		if (file) handleFile(file);
+	}, [handleFile]);
+	const handleImport = react.useCallback(async () => {
+		if (!parsedData) return;
+		setStep("importing");
+		try {
+			setResult(await onImport(parsedData.rows));
+			setStep("result");
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "导入失败");
+			setStep("preview");
+		}
+	}, [parsedData, onImport]);
+	const handleDownloadTemplate = react.useCallback(() => {
+		if (columns.length === 0) return;
+		const csv = generateCSVTemplate(columns);
+		const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "import-template.csv";
+		link.click();
+		URL.revokeObjectURL(url);
+	}, [columns]);
+	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-[600px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogDescription, { children: [
+				step === "upload" && "上传 CSV 或 JSON 文件以批量导入数据",
+				step === "preview" && `已解析 ${parsedData?.rows.length ?? 0} 条数据，确认后开始导入`,
+				step === "importing" && "正在导入数据...",
+				step === "result" && "导入完成"
+			] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-4",
+				children: [
+					step === "upload" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50"}`,
+						onDragOver: (e) => {
+							e.preventDefault();
+							setIsDragging(true);
+						},
+						onDragLeave: () => setIsDragging(false),
+						onDrop: handleDrop,
+						onClick: () => fileInputRef.current?.click(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col items-center gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+									className: "h-10 w-10 text-muted-foreground",
+									xmlns: "http://www.w3.org/2000/svg",
+									fill: "none",
+									viewBox: "0 0 24 24",
+									strokeWidth: 1.5,
+									stroke: "currentColor",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-sm text-muted-foreground",
+									children: "拖拽文件到此处，或点击选择文件"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-xs text-muted-foreground/60",
+									children: "支持 CSV、JSON 格式"
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: fileInputRef,
+							type: "file",
+							accept: ".csv,.json",
+							className: "hidden",
+							onChange: handleFileInput
+						})]
+					}), columns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+						variant: "outline",
+						size: "sm",
+						className: "w-full",
+						onClick: handleDownloadTemplate,
+						children: "下载 CSV 模板"
+					})] }),
+					step === "preview" && parsedData && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "rounded-md border",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "max-h-[300px] overflow-auto",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+									className: "w-full text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+										className: "sticky top-0 bg-muted",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: "px-3 py-2 text-left font-medium text-muted-foreground",
+												children: "#"
+											}),
+											parsedData.headers.slice(0, 6).map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: "px-3 py-2 text-left font-medium text-muted-foreground",
+												children: h
+											}, h)),
+											parsedData.headers.length > 6 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
+												className: "px-3 py-2 text-left font-medium text-muted-foreground",
+												children: [
+													"+",
+													parsedData.headers.length - 6,
+													" 列"
+												]
+											})
+										] })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: parsedData.rows.slice(0, 10).map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+										className: "border-t",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "px-3 py-2 text-muted-foreground",
+												children: i + 1
+											}),
+											parsedData.headers.slice(0, 6).map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "px-3 py-2 max-w-[150px] truncate",
+												children: String(row[h] ?? "")
+											}, h)),
+											parsedData.headers.length > 6 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "px-3 py-2 text-muted-foreground",
+												children: "..."
+											})
+										]
+									}, i)) })]
+								})
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								"共 ",
+								parsedData.rows.length,
+								" 条数据",
+								parsedData.rows.length > 10 && "（预览前 10 条）",
+								"，",
+								parsedData.headers.length,
+								" 个字段 ，格式: ",
+								parsedData.format.toUpperCase()
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-2 justify-end",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+								variant: "outline",
+								onClick: reset,
+								children: "重新选择"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+								onClick: handleImport,
+								children: "确认导入"
+							})]
+						})
+					] }),
+					step === "importing" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col items-center gap-4 py-8",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								"正在导入 ",
+								parsedData?.rows.length ?? 0,
+								" 条数据..."
+							]
+						})]
+					}),
+					step === "result" && result && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-4",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 rounded-lg bg-green-50 dark:bg-green-950/30 p-3 text-center",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-2xl font-semibold text-green-600",
+										children: result.success
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-xs text-green-600/80",
+										children: "新建"
+									})]
+								}),
+								(result.updated ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 rounded-lg bg-blue-50 dark:bg-blue-950/30 p-3 text-center",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-2xl font-semibold text-blue-600",
+										children: result.updated
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-xs text-blue-600/80",
+										children: "更新"
+									})]
+								}),
+								result.skipped > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 rounded-lg bg-yellow-50 dark:bg-yellow-950/30 p-3 text-center",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-2xl font-semibold text-yellow-600",
+										children: result.skipped
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-xs text-yellow-600/80",
+										children: "跳过"
+									})]
+								}),
+								result.failed.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 rounded-lg bg-red-50 dark:bg-red-950/30 p-3 text-center",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-2xl font-semibold text-red-600",
+										children: result.failed.length
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-xs text-red-600/80",
+										children: "验证失败"
+									})]
+								})
+							]
+						}), result.failed.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "rounded-md border border-red-200 dark:border-red-900",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "max-h-[200px] overflow-auto",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+									className: "w-full text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+										className: "sticky top-0 bg-red-50 dark:bg-red-950/30",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+											className: "px-3 py-2 text-left font-medium text-red-600",
+											children: "行号"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+											className: "px-3 py-2 text-left font-medium text-red-600",
+											children: "错误"
+										})] })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: result.failed.map((f) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+										className: "border-t border-red-100 dark:border-red-900",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "px-3 py-2 text-red-600",
+											children: f.row + 1
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: "px-3 py-2 text-red-600/80",
+											children: f.errors.join("; ")
+										})]
+									}, f.row)) })]
+								})
+							})
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex gap-2 justify-end",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+							variant: "outline",
+							onClick: () => handleOpenChange(false),
+							children: "关闭"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+							variant: "outline",
+							onClick: reset,
+							children: "继续导入"
+						})]
+					})] }),
+					error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "rounded-md bg-destructive/10 p-3 text-sm text-destructive",
+						children: error
+					})
+				]
+			})]
+		})
+	});
+}
+
 //#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;
 }
 /**
@@ -4777,9 +5385,52 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 		create: permissions?.can?.create ?? true,
 		update: permissions?.can?.update ?? true,
 		delete: permissions?.can?.delete ?? true,
-		export: permissions?.can?.export ?? true
+		export: permissions?.can?.export ?? true,
+		import: permissions?.can?.import ?? true
 	};
 	const denyFields = permissions?.deny;
+	const canImport = can.import && !!resource.handlers.import;
+	const canExport = can.export;
+	const [importOpen, setImportOpen] = 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;
+		const denySet = new Set(denyFields ?? []);
+		return Object.keys(shape).filter((key) => !denySet.has(key));
+	}, [schema, denyFields]);
+	const handleExport = react.useCallback(async (mode) => {
+		const filename = title ?? "export";
+		const excludeColumns = denyFields;
+		if (mode === "selected") {
+			const selectedRows = getSelectedRowsRef.current?.();
+			if (!selectedRows || selectedRows.length === 0) return;
+			exportAllToCSV(selectedRows, {
+				filename,
+				excludeColumns
+			});
+		} else {
+			if (!resource.handlers.export) return;
+			exportAllToCSV(await resource.handlers.export(), {
+				filename,
+				excludeColumns
+			});
+		}
+	}, [
+		resource.handlers.export,
+		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);
@@ -4804,10 +5455,26 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 					children: slots?.toolbarStart
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
-					children: [slots?.toolbarEnd, can.create && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
-						onClick: resource.handlers.openCreate,
-						children: "新建"
-					})]
+					children: [
+						slots?.toolbarEnd,
+						canImport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => setImportOpen(true),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "mr-2 h-4 w-4" }), "导入"]
+						}),
+						canExport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+							variant: "outline",
+							size: "sm",
+							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,
+							children: "新建"
+						})
+					]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTable, {
@@ -4826,8 +5493,10 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				onDeleteSelected: can.delete ? resource.handlers.deleteMany : void 0,
 				onUpdateSelected: can.update ? resource.handlers.updateMany : void 0,
 				batchUpdateFields: can.update ? batchFields : void 0,
-				enableExport: can.export,
-				initialSorting: tableConfig?.defaultSort
+				enableExport: false,
+				initialSorting: tableConfig?.defaultSort,
+				onSelectedCountChange: setSelectedCount,
+				getSelectedRows: getSelectedRowsRef
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudFormModal, {
 				open: resource.modal.createOpen || resource.modal.editOpen,
@@ -4860,11 +5529,90 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 					disabled: resource.mutations.isDeleting,
 					children: resource.mutations.isDeleting ? "删除中..." : "确认删除"
 				})] })] })
+			}),
+			canImport && resource.handlers.import && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImportDialog, {
+				open: importOpen,
+				onOpenChange: setImportOpen,
+				onImport: resource.handlers.import,
+				columns: importColumns
 			})
 		]
 	});
 }
 
+//#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 }) {
@@ -5536,15 +6284,44 @@ function modalReducer(state, action) {
 /**
 * Hook 主函数
 */
-function useAutoCrudResource({ router, queryInput, options = {} }) {
-	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter } = options;
+function useAutoCrudResource({ router, schema, query: queryTransform, options = {} }) {
+	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter, exportFetcher } = options;
 	const toast = (0, react.useMemo)(() => toastAdapter === false ? noopToastAdapter : toastAdapter ?? defaultToastAdapter, [toastAdapter]);
+	const columns = (0, react.useMemo)(() => createTableSchema(schema), [schema]);
+	const [urlParams] = useQueryStates({
+		page: parseAsInteger.withDefault(1),
+		perPage: parseAsInteger.withDefault(10),
+		sort: getSortingStateParser().withDefault([]),
+		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and")
+	}, { shallow: false });
+	const [filters] = useReadableFilters(columns, { shallow: false });
+	const queryInput = (0, react.useMemo)(() => {
+		const autoParams = {
+			page: urlParams.page,
+			perPage: urlParams.perPage,
+			sort: urlParams.sort,
+			filters,
+			joinOperator: urlParams.joinOperator
+		};
+		return queryTransform ? queryTransform(autoParams) : autoParams;
+	}, [
+		urlParams,
+		filters,
+		queryTransform
+	]);
 	const listQuery = router.list.useQuery(queryInput, { placeholderData: keepPreviousData });
 	const createMutation = router.create.useMutation();
 	const updateMutation = router.update.useMutation();
 	const deleteMutation = router.delete.useMutation();
 	const deleteManyMutation = router.deleteMany?.useMutation();
 	const updateManyMutation = router.updateMany?.useMutation();
+	const importMutation = router.import?.useMutation();
+	const exportInput = (0, react.useMemo)(() => {
+		if (!queryInput) return {};
+		const { page: _p, perPage: _pp,...rest } = queryInput;
+		return rest;
+	}, [queryInput]);
+	const exportQuery = router.export?.useQuery(exportInput, { enabled: false });
 	const [modal, dispatch] = (0, react.useReducer)(modalReducer, {
 		createOpen: false,
 		editOpen: false,
@@ -5756,6 +6533,33 @@ function useAutoCrudResource({ router, queryInput, options = {} }) {
 			payload: row
 		});
 	}, []);
+	const handleImport = (0, react.useCallback)(async (rows) => {
+		if (!importMutation) throw new Error("Import not supported: router has no import procedure");
+		const coercedRows = coerceRowValues(rows, schema);
+		const result = await importMutation.mutateAsync({
+			rows: coercedRows,
+			onConflict: "upsert"
+		});
+		listQuery.refetch();
+		return result;
+	}, [
+		importMutation,
+		listQuery,
+		schema
+	]);
+	const handleExport = (0, react.useCallback)(async () => {
+		if (exportFetcher) {
+			const { page: _p, perPage: _pp,...exportParams } = queryInput ?? {};
+			return (await exportFetcher(exportParams))?.data ?? [];
+		}
+		if (exportQuery) return (await exportQuery.refetch())?.data?.data ?? [];
+		throw new Error("Export not supported");
+	}, [
+		exportFetcher,
+		exportQuery,
+		queryInput
+	]);
+	const canExport = !!(exportFetcher || exportQuery);
 	return {
 		tableData: {
 			data: listQuery.data?.data ?? [],
@@ -5767,7 +6571,8 @@ function useAutoCrudResource({ router, queryInput, options = {} }) {
 		mutations: {
 			isCreating: createMutation.isPending,
 			isUpdating: updateMutation.isPending,
-			isDeleting: deleteMutation.isPending
+			isDeleting: deleteMutation.isPending,
+			isImporting: importMutation?.isPending ?? false
 		},
 		handlers: {
 			openCreate,
@@ -5781,7 +6586,9 @@ function useAutoCrudResource({ router, queryInput, options = {} }) {
 			confirmDelete,
 			deleteMany,
 			updateMany,
-			setVariant
+			setVariant,
+			import: importMutation ? handleImport : null,
+			export: canExport ? handleExport : null
 		}
 	};
 }
@@ -6039,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;
@@ -6072,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);
@@ -6103,8 +6911,11 @@ exports.DataTableFacetedFilter = DataTableFacetedFilter;
 exports.DataTablePagination = DataTablePagination;
 exports.DataTableToolbar = DataTableToolbar;
 exports.DataTableViewOptions = DataTableViewOptions;
+exports.ExportDialog = ExportDialog;
+exports.ImportDialog = ImportDialog;
 exports.SchemaAdapter = SchemaAdapter;
 exports.cn = cn;
+exports.coerceRowValues = coerceRowValues;
 exports.createActionsColumn = createActionsColumn;
 exports.createEditFormSchema = createEditFormSchema;
 exports.createFormSchema = createFormSchema;
@@ -6112,7 +6923,12 @@ exports.createMemoryDataSource = createMemoryDataSource;
 exports.createSelectColumn = createSelectColumn;
 exports.createTRPCDataSource = createTRPCDataSource;
 exports.createTableSchema = createTableSchema;
+exports.dataToCSV = dataToCSV;
+exports.downloadCSVTemplate = downloadCSVTemplate;
+exports.exportAllToCSV = exportAllToCSV;
+exports.exportTableToCSV = exportTableToCSV;
 exports.formatDate = formatDate;
+exports.generateCSVTemplate = generateCSVTemplate;
 exports.getUrlParams = getUrlParams;
 exports.humanize = humanize;
 exports.noopToastAdapter = noopToastAdapter;
@@ -6120,6 +6936,9 @@ exports.parseAsArrayOf = parseAsArrayOf;
 exports.parseAsInteger = parseAsInteger;
 exports.parseAsString = parseAsString;
 exports.parseAsStringEnum = parseAsStringEnum;
+exports.parseCSV = parseCSV;
+exports.parseImportFile = parseImportFile;
+exports.parseJSON = parseJSON;
 exports.parseZodField = parseZodField;
 exports.setSearchParams = setSearchParams;
 exports.useAutoCrudResource = useAutoCrudResource;