@wordrhyme/auto-crud 1.12.2 → 1.14.0

package/dist/index.cjs

@@ -25,6 +25,8 @@ let __wordrhyme_formily_shadcn = require("@wordrhyme/formily-shadcn");
 __wordrhyme_formily_shadcn = require_position.__toESM(__wordrhyme_formily_shadcn);
 let __formily_core = require("@formily/core");
 __formily_core = require_position.__toESM(__formily_core);
+let __formily_react = require("@formily/react");
+__formily_react = require_position.__toESM(__formily_react);
 let __formily_reactive = require("@formily/reactive");
 __formily_reactive = require_position.__toESM(__formily_reactive);
 let sonner = require("sonner");
@@ -5120,7 +5122,7 @@ function useDataTable(props) {
 			...tableProps.defaultColumn,
 			enableColumnFilter: false
 		},
-		enableRowSelection: true,
+		enableRowSelection: tableProps.enableRowSelection ?? true,
 		onRowSelectionChange: setRowSelection,
 		onPaginationChange,
 		onSortingChange,
@@ -5186,7 +5188,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
+function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, queryKeys, initialColumnVisibility, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
 	if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
 	const enableExpansion = !!expandedRow;
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
@@ -5196,7 +5198,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 		shallow: false,
 		clearOnDefault: true
 	});
-	const [, setSearchPage] = useUrlState("page", parseAsInteger.withDefault(1), {
+	const [, setSearchPage] = useUrlState(queryKeys?.page ?? "page", parseAsInteger.withDefault(1), {
 		shallow: false,
 		clearOnDefault: true
 	});
@@ -5263,6 +5265,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	]);
 	const stableInitialState = (0, react.useMemo)(() => ({
 		sorting: initialSorting,
+		columnVisibility: initialColumnVisibility,
 		expanded: enableExpansion && defaultExpanded ? true : {},
 		columnPinning: pinnedColumns ?? {
 			left: [...enableExpansion ? [expandColumnId] : [], ...enableRowSelection ? ["select"] : []],
@@ -5270,6 +5273,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 		}
 	}), [
 		initialSorting,
+		initialColumnVisibility,
 		pinnedColumns,
 		enableRowSelection,
 		enableExpansion,
@@ -5281,6 +5285,8 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns,
+		queryKeys,
+		enableRowSelection,
 		getRowId,
 		getRowCanExpand: () => enableExpansion,
 		getExpandedRowModel: enableExpansion ? expandedRowModel : void 0,
@@ -5478,6 +5484,7 @@ function FormModal({ open, onOpenChange, title, description, children, variant =
 		open,
 		onOpenChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.SheetContent, {
+			...!description ? { "aria-describedby": void 0 } : {},
 			side,
 			className: cn("sm:max-w-lg flex flex-col p-0", className),
 			children: [
@@ -5503,6 +5510,7 @@ function FormModal({ open, onOpenChange, title, description, children, variant =
 		open,
 		onOpenChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogContent, {
+			...!description ? { "aria-describedby": void 0 } : {},
 			className: cn("max-w-2xl sm:max-w-2xl flex flex-col max-h-[85vh] overflow-hidden p-0", className),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogHeader, {
@@ -5624,6 +5632,8 @@ function createFormSchema(schema, options) {
 		const inferredByName = inferComponentByFieldName(key);
 		const component = inferredByName?.component ?? fieldTypeToFormilyComponent[parsed.type];
 		const inferredProps = inferredByName?.props ?? {};
+		const componentProps = getComponentProps(parsed.type, parsed);
+		if (parsed.type === "enum" && override?.enum) componentProps.options = override.enum;
 		properties[key] = {
 			type: mapToJsonSchemaType(parsed.type),
 			title: humanize$1(key),
@@ -5632,7 +5642,7 @@ function createFormSchema(schema, options) {
 			"x-decorator-props": decoratorProps,
 			"x-component": component,
 			"x-component-props": {
-				...getComponentProps(parsed.type, parsed),
+				...componentProps,
 				...inferredProps
 			},
 			...parsed.enumValues && { enum: parsed.enumValues.map((v) => ({
@@ -5666,6 +5676,51 @@ function createEditFormSchema(schema, options) {
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/read-pretty-field.tsx
+const ReadPrettyBooleanLocale = (0, react.createContext)(zhCN.boolean);
+const ReadPrettyRenderers = (0, react.createContext)({});
+function ReadPrettyField({ options }) {
+	const field = (0, __formily_react.useField)();
+	const schema = (0, __formily_react.useFieldSchema)();
+	const renderCustomValue = (0, react.useContext)(ReadPrettyRenderers)[field.path.toString()];
+	return renderCustomValue ? renderCustomValue() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyValue, {
+		value: field.value,
+		options: options?.length ? options : field.dataSource,
+		date: schema["x-component"] === "DatePicker"
+	});
+}
+function ReadPrettyValue({ value, options: choices, date }) {
+	const booleanLocale = (0, react.useContext)(ReadPrettyBooleanLocale);
+	useDateFormatterVersion();
+	const renderValue = (item) => {
+		if (item == null || item === "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground",
+			children: "-"
+		});
+		const option = choices?.find((choice) => String(choice.value) === String(item));
+		if (option) return Array.isArray(value) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
+			variant: "secondary",
+			className: "font-normal",
+			children: option.label
+		}) : option.label;
+		if (typeof item === "boolean") return item ? booleanLocale.true : booleanLocale.false;
+		if (item instanceof Date || date) return formatDate(item);
+		if (typeof item === "object") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+			className: "rounded-md bg-muted/50 p-3 text-sm whitespace-pre-wrap break-words",
+			children: JSON.stringify(item, null, 2)
+		});
+		return String(item);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "min-w-0 whitespace-pre-wrap break-words text-base leading-6 text-foreground",
+		children: Array.isArray(value) ? value.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap gap-2",
+			children: value.map((item, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: renderValue(item) }, index$1))
+		}) : renderValue(null) : renderValue(value)
+	});
+}
+
 //#endregion
 //#region src/lib/crud-reference-projection.ts
 function isRecord$1(value) {
@@ -5814,12 +5869,8 @@ function normalizeFieldOptions$1(options) {
 * 从统一字段配置生成 Formily overrides。
 * `legacyOverrides` 保持兼容旧 API，字段级 `form` 配置优先级最高。
 */
-function buildFormOverrides(fields, legacyOverrides, denyFields) {
+function buildFormOverrides(fields, legacyOverrides, denyFields, mode = "edit") {
 	const result = { ...legacyOverrides };
-	if (denyFields) for (const field of denyFields) result[field] = {
-		...result[field],
-		"x-hidden": true
-	};
 	if (fields) for (const [key, config] of Object.entries(fields)) {
 		const fieldOptions = normalizeFieldOptions$1((config.form && typeof config.form === "object" ? config.form : void 0)?.enum) ?? normalizeFieldOptions$1(config.enum);
 		const fieldDataSource = fieldOptions || !config.dataSource ? void 0 : normalizeDataSourceConfig(config.dataSource);
@@ -5827,10 +5878,6 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 			...result[key],
 			title: config.label
 		};
-		if (config.hidden) result[key] = {
-			...result[key],
-			"x-hidden": true
-		};
 		if (fieldOptions) result[key] = {
 			...result[key],
 			enum: fieldOptions
@@ -5839,15 +5886,27 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 			...result[key],
 			"x-data-source": config.dataSource
 		};
-		if (config.form === false) result[key] = {
+		if (config.form === false && mode !== "view") result[key] = {
 			...result[key],
 			"x-hidden": true
 		};
-		else if (config.form && typeof config.form === "object") result[key] = {
+		else if (config.form && typeof config.form === "object") {
+			const { "x-hidden": formHidden,...sharedFormConfig } = config.form;
+			result[key] = {
+				...result[key],
+				...sharedFormConfig,
+				...mode !== "view" && formHidden !== void 0 ? { "x-hidden": formHidden } : {}
+			};
+		}
+		if (config.hidden) result[key] = {
 			...result[key],
-			...config.form
+			"x-hidden": true
 		};
 	}
+	for (const field of denyFields ?? []) result[field] = {
+		...result[field],
+		"x-hidden": true
+	};
 	return result;
 }
 
@@ -5910,6 +5969,13 @@ const defaultFieldComponents = {
 		decorator: "FormItem"
 	}
 };
+const readPrettyFieldComponents = Object.fromEntries(Object.entries({
+	...__wordrhyme_formily_shadcn.defaultComponentRegistry,
+	...defaultFieldComponents
+}).filter(([, config]) => "decorator" in config).map(([name, config]) => [name, {
+	...config,
+	component: (0, __wordrhyme_formily_shadcn.connect)(config.component, (0, __formily_react.mapReadPretty)(ReadPrettyField))
+}]));
 const AUTO_CRUD_DATA_SOURCE_SCOPE_KEY = "$autoCrudDataSource";
 const POPUP_SCROLL_LOAD_THRESHOLD$1 = 24;
 const dataSourceReactionStates = /* @__PURE__ */ new WeakMap();
@@ -5938,7 +6004,8 @@ function mergeReactions(existing, reaction) {
 	if (Array.isArray(existing)) return existing.includes(reaction) ? existing : [...existing, reaction];
 	return [existing, reaction];
 }
-function applyDataSourceReactions(schema) {
+function applyDataSourceReactions(schema, readPretty = false) {
+	if (readPretty) schema["x-pattern"] = "readPretty";
 	const dataSourceConfig = getSchemaDataSourceConfig(schema);
 	if (dataSourceConfig) {
 		const reaction = `{{${AUTO_CRUD_DATA_SOURCE_SCOPE_KEY}(${JSON.stringify(dataSourceConfig)})}}`;
@@ -5946,12 +6013,12 @@ function applyDataSourceReactions(schema) {
 	}
 	const properties = schema.properties;
 	if (properties && typeof properties === "object" && !Array.isArray(properties)) {
-		for (const property of Object.values(properties)) if (property && typeof property === "object" && !Array.isArray(property)) applyDataSourceReactions(property);
+		for (const property of Object.values(properties)) if (property && typeof property === "object" && !Array.isArray(property)) applyDataSourceReactions(property, readPretty);
 	}
 	const items = schema.items;
 	if (Array.isArray(items)) {
-		for (const item of items) if (item && typeof item === "object") applyDataSourceReactions(item);
-	} else if (items && typeof items === "object") applyDataSourceReactions(items);
+		for (const item of items) if (item && typeof item === "object") applyDataSourceReactions(item, readPretty);
+	} else if (items && typeof items === "object") applyDataSourceReactions(items, readPretty);
 }
 function getDataSourceReactionState(field) {
 	const existing = dataSourceReactionStates.get(field);
@@ -5996,7 +6063,7 @@ function loadAutoCrudDataSource({ entry, field, registryVersion, search, sourceK
 	});
 	setAutoCrudDataSourceOptions(field, state.options);
 	if (!append && state.loadKey === loadKey && state.registryVersion === registryVersion) return;
-	if (entry.reset && state.dependencyKey !== void 0 && state.dependencyKey !== dependencyKey) field.setValue(void 0);
+	if (entry.reset && !field.readPretty && state.dependencyKey !== void 0 && state.dependencyKey !== dependencyKey) field.setValue(void 0);
 	state.dependencyKey = dependencyKey;
 	if (!append) {
 		state.loadKey = loadKey;
@@ -6172,7 +6239,10 @@ function createAutoCrudDataSourceReaction(config, registryState) {
 	};
 }
 function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, overrides, scope: scopeProp, mode = "create", loading = false, gridColumns = 1, labelAlign = "top", labelWidth, showSubmitButton = true }, ref) {
-	const form = (0, react.useMemo)(() => (0, __formily_core.createForm)({ initialValues }), [JSON.stringify(initialValues)]);
+	const form = (0, react.useMemo)(() => (0, __formily_core.createForm)({
+		initialValues,
+		pattern: mode === "view" ? "readPretty" : "editable"
+	}), [JSON.stringify(initialValues), mode]);
 	const dataSourceRegistryState = (0, react.useMemo)(() => (0, __formily_reactive.observable)({ version: 0 }), []);
 	const updateDataSourceRegistryState = (0, react.useCallback)(() => {
 		(0, __formily_reactive.action)(() => {
@@ -6180,40 +6250,75 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, ove
 		});
 	}, [dataSourceRegistryState]);
 	const dataSourceRegistryVersion = useRegistryVersion$1(dataSources.subscribe, updateDataSourceRegistryState);
-	const formOverrides = (0, react.useMemo)(() => buildFormOverrides(fields, overrides), [fields, overrides]);
+	const formOverrides = (0, react.useMemo)(() => buildFormOverrides(fields, overrides, void 0, mode), [
+		fields,
+		overrides,
+		mode
+	]);
 	const formSchema = (0, react.useMemo)(() => {
-		const nextSchema = createEditFormSchema(zodSchema, {
+		const nextSchema = (mode === "view" ? createFormSchema : createEditFormSchema)(zodSchema, {
 			overrides: formOverrides,
 			layout: "grid",
 			gridColumns
 		});
-		applyDataSourceReactions(nextSchema);
+		const grid = typeof nextSchema.properties === "object" ? nextSchema.properties.layout : void 0;
+		if (mode === "view" && grid && typeof grid === "object") {
+			grid["x-component-props"] = {
+				...grid["x-component-props"],
+				className: (0, __wordrhyme_shadcn.cn)(grid["x-component-props"]?.className, "gap-x-10 gap-y-7 py-2")
+			};
+			const properties = typeof grid.properties === "object" ? grid.properties : {};
+			for (const property of Object.values(properties)) {
+				const decoratorProps = property["x-decorator-props"];
+				const fullWidth = property.type === "object" || property.type === "array" || ["Textarea", "RichTextEditor"].includes(property["x-component"]);
+				property["x-decorator-props"] = {
+					colon: false,
+					...decoratorProps,
+					className: (0, __wordrhyme_shadcn.cn)(fullWidth && decoratorProps?.gridSpan == null && "col-span-full", decoratorProps?.className)
+				};
+			}
+		}
+		applyDataSourceReactions(nextSchema, mode === "view");
 		return nextSchema;
 	}, [
 		zodSchema,
 		formOverrides,
 		gridColumns,
-		dataSourceRegistryVersion
+		dataSourceRegistryVersion,
+		mode
 	]);
 	const formLayout = (0, react.useMemo)(() => {
 		const inlineLabel = labelAlign === "left" || labelAlign === "right";
-		return {
-			labelPlacement: inlineLabel ? "start" : "top",
-			itemProps: inlineLabel ? { label: {
-				className: labelAlign === "right" ? "text-right" : void 0,
-				style: labelWidth != null ? { width: labelWidth } : void 0
-			} } : void 0
-		};
-	}, [labelAlign, labelWidth]);
+		return { itemProps: {
+			container: mode === "view" ? { className: "min-w-0 space-y-0 gap-2" } : void 0,
+			label: {
+				placement: inlineLabel ? "start" : "top",
+				className: (0, __wordrhyme_shadcn.cn)(mode === "view" && "mb-0 text-sm font-normal text-muted-foreground leading-5", labelAlign === "right" && "text-right"),
+				style: inlineLabel && labelWidth != null ? { width: labelWidth } : void 0
+			}
+		} };
+	}, [
+		labelAlign,
+		labelWidth,
+		mode
+	]);
 	const fieldComponents = (0, react.useMemo)(() => ({ fields: {
 		...defaultFieldComponents,
+		...mode === "view" ? {
+			...readPrettyFieldComponents,
+			ObjectField: {
+				component: ReadPrettyField,
+				decorator: "FormItem"
+			}
+		} : {},
 		...components.all()
-	} }), [useRegistryVersion$1(components.subscribe)]);
+	} }), [useRegistryVersion$1(components.subscribe), mode]);
 	const scope = (0, react.useMemo)(() => ({
 		...scopeProp,
 		[AUTO_CRUD_DATA_SOURCE_SCOPE_KEY]: (config) => createAutoCrudDataSourceReaction(config, dataSourceRegistryState)
 	}), [dataSourceRegistryState, scopeProp]);
 	const handleSubmit = async () => {
+		if (mode === "view" || !onSubmit) return;
 		await form.validate();
 		if (form.valid) await onSubmit(form.values);
 	};
@@ -6225,7 +6330,7 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, ove
 			schema: formSchema,
 			components: fieldComponents,
 			scope
-		}), showSubmitButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), mode !== "view" && showSubmitButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex justify-end gap-2 mt-6",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 				type: "button",
@@ -6241,7 +6346,7 @@ const AutoForm = (0, react.forwardRef)(AutoFormInner);
 //#endregion
 //#region src/components/auto-crud/crud-form-modal.tsx
 function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubmit, loading = false, variant = "dialog", overrides, scope, title, locale = zhCN.formModal, gridColumns, labelAlign, labelWidth, className }) {
-	const defaultTitle = mode === "create" ? locale.createTitle : locale.editTitle;
+	const defaultTitle = mode === "create" ? locale.createTitle : mode === "edit" ? locale.editTitle : zhCN.viewModal.title;
 	const formRef = (0, react.useRef)(null);
 	const handleSubmit = async () => {
 		await formRef.current?.submit();
@@ -6252,7 +6357,7 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 		title: title ?? defaultTitle,
 		variant,
 		className,
-		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		footer: mode !== "view" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex justify-end gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 				type: "button",
@@ -6265,14 +6370,16 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 				disabled: loading,
 				children: loading ? locale.submitting : mode === "create" ? locale.create : locale.save
 			})]
-		}),
+		}) : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoForm, {
 			ref: formRef,
 			schema,
-			mode,
+			...mode === "view" ? { mode } : {
+				mode,
+				onSubmit
+			},
 			initialValues,
 			loading,
-			onSubmit,
 			overrides,
 			scope,
 			gridColumns,
@@ -7652,7 +7759,7 @@ function ViewModal(props) {
 	if (!props.open || !props.data) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModalContent, { ...props });
 }
-function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: fieldConfig, dynamicOptions, denyFields, locale, tableOverrides, view }) {
+function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: fieldConfig, dynamicOptions, denyFields, locale, tableOverrides, view, form }) {
 	const excluded = react.useMemo(() => {
 		const denied = new Set(denyFields ?? []);
 		return Object.keys(schema.shape).filter((key) => {
@@ -7667,70 +7774,82 @@ function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: f
 	]);
 	const rows = react.useMemo(() => data ? [data] : [], [data]);
 	const resolvedOptions = useDynamicResolveOptions(fieldConfig, rows, excluded);
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
-		className: "grid gap-4 py-4",
-		children: (0, __tanstack_react_table.useReactTable)({
-			data: rows,
-			columns: react.useMemo(() => {
-				const overrides = {};
-				for (const [key, fieldSchema] of Object.entries(schema.shape).filter(([fieldKey]) => !excluded.includes(fieldKey))) {
-					const config = fieldConfig?.[key] ?? {};
-					const tableConfig = getTableConfig(config);
-					const listOverride = tableOverrides?.[key];
-					const options = getTableOptions(config) ?? resolvedOptions.optionsByField[key] ?? (tableConfig?.dataSource !== void 0 ? void 0 : dynamicOptions?.[key]);
-					overrides[key] = {
-						label: tableConfig?.label ?? config.label ?? listOverride?.label ?? humanize(key),
-						index: tableConfig?.index ?? listOverride?.index,
-						cell: ({ getValue, row }) => {
-							const value = getValue();
-							return config.format?.(value, {
-								row: row.original,
-								target: "display"
-							}) ?? renderFieldValue(value, parseZodField(fieldSchema).type, locale.boolean, options, tableConfig?.display ?? "auto", Infinity);
-						},
-						...view?.presentation === "table" ? listOverride : void 0,
-						hidden: false,
-						...view?.overrides?.[key]
-					};
-				}
-				return createTableSchema(schema, {
-					overrides,
-					exclude: excluded
-				});
-			}, [
-				schema,
-				excluded,
-				fieldConfig,
-				tableOverrides,
-				view,
-				resolvedOptions.optionsByField,
-				dynamicOptions,
-				locale.boolean
-			]),
-			getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)()
-		}).getRowModel().rows[0]?.getAllCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid grid-cols-3 items-start gap-4",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-				className: "text-sm font-medium text-muted-foreground",
-				children: cell.column.columnDef.meta?.label ?? humanize(cell.column.id)
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-				className: "col-span-2 min-w-0 whitespace-pre-wrap break-words text-sm",
-				children: (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-			})]
-		}, cell.id))
-	});
-	if (variant === "sheet") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.Sheet, {
-		open,
-		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.SheetContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.SheetHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.SheetTitle, { children: locale.viewModal.title }) }), content] })
+	const table = (0, __tanstack_react_table.useReactTable)({
+		data: rows,
+		columns: react.useMemo(() => {
+			const overrides$1 = {};
+			for (const [key, fieldSchema] of Object.entries(schema.shape).filter(([fieldKey]) => !excluded.includes(fieldKey))) {
+				const config = fieldConfig?.[key] ?? {};
+				const tableConfig = getTableConfig(config);
+				const listOverride = tableOverrides?.[key];
+				const options = getTableOptions(config) ?? resolvedOptions.optionsByField[key] ?? (tableConfig?.dataSource !== void 0 ? void 0 : dynamicOptions?.[key]);
+				overrides$1[key] = {
+					label: tableConfig?.label ?? config.label ?? listOverride?.label ?? humanize(key),
+					index: tableConfig?.index ?? listOverride?.index,
+					cell: ({ getValue, row }) => {
+						const value = getValue();
+						return config.format?.(value, {
+							row: row.original,
+							target: "display"
+						}) ?? (tableConfig?.display && tableConfig.display !== "auto" || options?.some((option) => option.badgeTone) ? renderFieldValue(value, parseZodField(fieldSchema).type, locale.boolean, options, tableConfig?.display ?? "auto", Infinity) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyValue, {
+							value,
+							options,
+							date: parseZodField(fieldSchema).type === "date"
+						}));
+					},
+					...view?.presentation === "table" ? listOverride : void 0,
+					hidden: false,
+					...view?.overrides?.[key]
+				};
+			}
+			return createTableSchema(schema, {
+				overrides: overrides$1,
+				exclude: excluded
+			});
+		}, [
+			schema,
+			excluded,
+			fieldConfig,
+			tableOverrides,
+			view,
+			resolvedOptions.optionsByField,
+			dynamicOptions,
+			locale.boolean
+		]),
+		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)()
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.Dialog, {
-		open,
-		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogContent, {
-			"aria-describedby": void 0,
-			className: "max-w-2xl max-h-[80vh] overflow-y-auto",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DialogTitle, { children: locale.viewModal.title }) }), content]
+	const detailSchema = react.useMemo(() => schema.omit(Object.fromEntries(excluded.map((key) => [key, true]))), [schema, excluded]);
+	const overrides = buildFormOverrides(fieldConfig, form?.overrides, denyFields, "view");
+	const renderers = {};
+	for (const [index$1, cell] of (table.getRowModel().rows[0]?.getAllCells() ?? []).entries()) {
+		const key = cell.column.id;
+		overrides[key] = {
+			...overrides[key],
+			title: cell.column.columnDef.meta?.label ?? humanize(key),
+			"x-index": index$1
+		};
+		renderers[key] = () => (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
+		delete overrides[key]["x-data-source"];
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyBooleanLocale.Provider, {
+		value: locale.boolean,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadPrettyRenderers.Provider, {
+			value: renderers,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudFormModal, {
+				open,
+				onOpenChange,
+				mode: "view",
+				variant,
+				schema: detailSchema,
+				initialValues: data ?? void 0,
+				overrides,
+				scope: form?.scope,
+				title: locale.viewModal.title,
+				gridColumns: form?.columns,
+				labelAlign: form?.labelAlign,
+				labelWidth: form?.labelWidth,
+				className: form?.className
+			})
 		})
 	});
 }
@@ -8194,6 +8313,9 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				pageCount: resource.tableData.pageCount,
 				pagination: paginationOptions,
 				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
+				queryKeys: tableConfig?.queryKeys ?? resource.queryKeys,
+				enableRowSelection: tableConfig?.enableRowSelection,
+				initialColumnVisibility: tableConfig?.initialColumnVisibility,
 				getRowId: tableConfig?.getRowId,
 				expandedRow: tableConfig?.expandedRow,
 				defaultExpanded: tableConfig?.defaultExpanded,
@@ -8235,6 +8357,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				scope: formConfig?.scope,
 				locale: locale.formModal,
 				gridColumns: formConfig?.columns,
+				labelAlign: formConfig?.labelAlign,
+				labelWidth: formConfig?.labelWidth,
 				className: formConfig?.className
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModal, {
@@ -8248,7 +8372,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				denyFields,
 				locale,
 				tableOverrides: detailTableOverrides,
-				view: viewConfig
+				view: viewConfig,
+				form: formConfig
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.AlertDialog, {
 				open: resource.modal.deleteOpen,
@@ -9036,7 +9161,7 @@ function modalReducer(state, action$1) {
 /**
 * Hook 主函数
 */
-function useAutoCrudResource({ router, schema, query: queryTransform, fields, options = {} }) {
+function useAutoCrudResource({ router, queryKeys, schema, query: queryTransform, fields, options = {} }) {
 	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter, exportFetcher, defaultSort: defaultSortOption } = options;
 	const toast$1 = (0, react.useMemo)(() => toastAdapter === false ? noopToastAdapter : toastAdapter ?? defaultToastAdapter, [toastAdapter]);
 	const hooksRef = (0, react.useRef)(hooks);
@@ -9057,31 +9182,36 @@ function useAutoCrudResource({ router, schema, query: queryTransform, fields, op
 		fields,
 		metadataFields
 	]);
-	const [urlParams] = useQueryStates({
-		page: parseAsInteger.withDefault(1),
-		perPage: parseAsInteger.withDefault(10),
-		sort: getSortingStateParser().withDefault(defaultSorting),
-		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
-		search: parseAsString.withDefault("")
-	}, { shallow: false });
-	const [filters] = useReadableFilters(columns, { shallow: false });
+	const [page] = useQueryState(queryKeys?.page ?? "page", parseAsInteger.withDefault(1));
+	const [perPage] = useQueryState(queryKeys?.perPage ?? "perPage", parseAsInteger.withDefault(10));
+	const [sort] = useQueryState(queryKeys?.sort ?? "sort", getSortingStateParser().withDefault(defaultSorting));
+	const [joinOperator] = useQueryState(queryKeys?.joinOperator ?? "joinOperator", parseAsStringEnum(["and", "or"]).withDefault("and"));
+	const [search] = useQueryState("search", parseAsString.withDefault(""), { shallow: false });
+	const [filters] = useReadableFilters(columns, {
+		shallow: false,
+		resetPageKey: queryKeys?.page ?? "page"
+	});
 	const metadataPending = Boolean(metadataQuery?.isPending);
 	const [filtersReady, setFiltersReady] = (0, react.useState)(!metadataPending);
 	(0, react.useEffect)(() => setFiltersReady(!metadataPending), [metadataPending]);
 	const listReady = !metadataPending && filtersReady;
 	const queryInput = (0, react.useMemo)(() => {
 		const autoParams = {
-			page: urlParams.page,
-			perPage: urlParams.perPage,
-			sort: urlParams.sort,
+			page,
+			perPage,
+			sort,
 			filters,
-			joinOperator: urlParams.joinOperator,
-			...urlParams.search.trim() ? { search: urlParams.search.trim() } : {}
+			joinOperator,
+			...search.trim() ? { search: search.trim() } : {}
 		};
 		return queryTransform ? queryTransform(autoParams) : autoParams;
 	}, [
-		urlParams,
+		page,
+		perPage,
+		sort,
 		filters,
+		joinOperator,
+		search,
 		queryTransform
 	]);
 	const hasReadyListData = (0, react.useRef)(false);
@@ -9357,6 +9487,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, fields, op
 	}, [listQuery, listReady]);
 	return {
 		idKey,
+		queryKeys,
 		tableData: {
 			data: tableRows,
 			pageCount: listData?.pageCount ?? 0,
@@ -9644,18 +9775,21 @@ function createMemoryDataSource(initialData = []) {
 			let filtered = [...data];
 			if (params.filters) filtered = filtered.filter((item) => {
 				return params.filters.every((filter) => {
-					return item[filter.id] === filter.value;
+					const value = item[filter.id];
+					if (filter.operator === "inArray") return Array.isArray(filter.value) && filter.value.includes(value);
+					if (!filter.operator || filter.operator === "eq") return value === filter.value;
+					throw new Error(`Unsupported memory filter operator: ${filter.operator}`);
 				});
 			});
-			if (params.sort && params.sort.length > 0) {
-				const sortItem = params.sort[0];
-				filtered.sort((a, b) => {
+			if (params.sort && params.sort.length > 0) filtered.sort((a, b) => {
+				for (const sortItem of params.sort) {
 					const aVal = a[sortItem.id];
 					const bVal = b[sortItem.id];
 					const result = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
-					return sortItem.desc ? -result : result;
-				});
-			}
+					if (result) return sortItem.desc ? -result : result;
+				}
+				return 0;
+			});
 			const start = (params.page - 1) * params.perPage;
 			const end = start + params.perPage;
 			return {