@wordrhyme/auto-crud 1.18.0 → 1.19.0

package/README.md

@@ -1948,7 +1948,7 @@ import {
   createLocalViewStorage,
 } from '@wordrhyme/auto-crud';
 
-// 服务对象应保持引用稳定。后端存储只需实现 ViewStorage 的四个方法。
+// 服务对象应保持引用稳定。后端存储实现 ViewStorage 的四个必需方法，可选实现 reorder。
 const viewStorage = createLocalViewStorage(`${organizationId}:${userId}`);
 
 <QueryClientProvider client={queryClient}>
@@ -1984,6 +1984,37 @@ const viewStorage = createLocalViewStorage(`${organizationId}:${userId}`);
 
 展示方式与当前选中视图的 ID 自动存入浏览器 `localStorage`，键为 `auto-crud:view-preferences:${encodeURIComponent(scope)}:${encodeURIComponent(resourceId)}`，按用户／租户和资源隔离，独立于 `ViewStorage` 的本地或服务端实现。刷新或重新进入时恢复展示方式；视图列表加载成功后恢复选中项。URL 已有筛选、搜索、排序或分页参数时保留 URL 查询，否则应用上次视图的保存条件，使用 replace 更新 URL。上次视图已删除或字段不可用时清除其选中记忆，保留 URL 查询。本地数据损坏或存储不可用时使用配置的初始展示方式，仍可在当前页面切换。未保存的查询不另存到本地偏好中。
 
+### 默认视图、分享链接与排列顺序
+
+```tsx
+<AutoCrudTable
+  id="crm.customers"
+  schema={schema}
+  resource={resource}
+  table={{
+    views: { defaultView: 'vip-customers', selector: 'tabs' },
+    // 可选；同页多个列表或字段名与 view 冲突时使用不同的 URL 参数名。
+    queryKeys: { view: 'customerView' },
+  }}
+/>
+```
+
+`defaultView` 接受视图的 slug 或 ID，独立 `AutoTable` 使用 `views={{ defaultView: 'vip-customers' }}`。初始化优先级为 URL 指定、用户本地选中记忆、`defaultView`、全部；本地明确记住“全部”也优先于默认值。默认项不存在时回到全部，不自动选择其他视图。`views` 仍须显式开启，本地偏好与 URL 都不会自动开启视图功能。
+
+视图可包含可选的 `slug`，例如 `{ id: 'view-123', slug: 'vip-customers', name: '重点客户', query }`。新建时按名称建议 slug，可手动修改；重命名保持原 slug。slug 为 1–80 个文字、数字或连接用的短横线，区分大小写。`ViewStorage.create/update` 须保存并返回该字段，`update` 未传 slug 时保留原值；已有数据无需迁移，没有 slug 时继续使用 ID。同一资源内 ID 和 slug 必须唯一，slug 也不能与另一视图的 ID 相同。服务端须在用户／租户／资源边界内校验唯一性；修改 slug 后旧 slug 链接失效，稳定 ID 仍可定位。
+
+默认参数为 `?view=vip-customers`，也接受 `?view=view-123`；若配置上例的 `queryKeys.view`，则使用 `?customerView=vip-customers`。切换视图会同步参数并创建浏览器历史记录，前进／后退恢复 URL 指定的视图。有 slug 时写入规范 slug，只有 ID 的旧链接会以 replace 规范化。`?view=` 明确表示“全部”。仅带视图参数的链接会应用保存条件；若同时带筛选、搜索、排序或分页参数，保留完整 URL 查询，便于分享未保存的调整。无权访问、已删除或查询字段失效时显示错误并保留 URL 查询，不回退到另一个视图。链接接收者仍需有权限读取该视图及资源，URL 不授予访问权限。
+
+下拉和 Tab 都按 `ViewStorage.list()` 的返回顺序展示，“全部”固定在最前。存储提供可选方法后，设置菜单显示“调整顺序”，拖动手柄（也支持键盘）后点击保存；取消或保存失败不会改变显示顺序或当前选中项：
+
+```ts
+reorder?: (resourceId: string, ids: string[]) => Promise<void>;
+```
+
+`ids` 必须包含该资源的全部视图 ID，顺序即新顺序。服务端应在事务中校验并保存，拒绝重复、未知或缺失 ID；并发新增／删除导致列表不一致时返回错误，让用户刷新后重试。成功后组件重新调用 `list()`。排序不修改视图 ID、slug 或查询条件；服务未实现 `reorder` 时不展示排序入口。`createLocalViewStorage` 已实现本地排序持久化。
+
+Storybook 的 **Default View** 演示按 slug 默认选中，“视图设置 → 调整顺序”可体验排序；所有 Saved views and tags 示例共用本地视图存储，首次加载补齐演示视图；视图、删除操作和排列顺序刷新后保留。客户标签仍为刷新后重置的内存数据。
+
 标签列表调用示例：
 
 ```ts
@@ -2032,7 +2063,7 @@ const loadViewCounts: NonNullable<SavedViewsConfig['counts']> = async ({
 
 首次加载显示 `…`，零结果显示 `0`，缺失或无效数量显示 `—`；请求失败显示 `—` 和重试入口。保存视图条件后重新统计；表格数据引用或 `counts` 回调引用变化时也会重新获取。数量由查询缓存管理，不写入视图存储。独立 `AutoTable` 使用 `views={{ selector: 'tabs', counts: loadViewCounts }}`。
 
-Storybook 的 **Auto CRUD / Saved views and tags / Tabs With Counts** 使用内存视图与标签数据，模拟 300ms 请求延迟，预置数量为 3、2、1、0 的视图。列表和数量共用筛选逻辑，修改客户标签后会重新计算；刷新页面后重置示例数据。
+Storybook 的 **Auto CRUD / Saved views and tags / Tabs With Counts** 与其他视图示例共用本地视图存储，模拟 300ms 统计请求延迟；首次加载预置数量为 3、2、1、0 的视图。列表和数量共用筛选逻辑，修改客户标签后会重新计算。视图与排列顺序刷新后保留，客户标签刷新后重置。
 
 ### 视图 Tab 样式
 

package/dist/index.cjs

@@ -15,12 +15,12 @@ let clsx = require("clsx");
 clsx = require_position.__toESM(clsx);
 let tailwind_merge = require("tailwind-merge");
 tailwind_merge = require_position.__toESM(tailwind_merge);
+let __wordrhyme_shadcn_ui = require("@wordrhyme/shadcn-ui");
+__wordrhyme_shadcn_ui = require_position.__toESM(__wordrhyme_shadcn_ui);
 let nanoid = require("nanoid");
 nanoid = require_position.__toESM(nanoid);
 let __tanstack_react_table = require("@tanstack/react-table");
 __tanstack_react_table = require_position.__toESM(__tanstack_react_table);
-let __wordrhyme_shadcn_ui = require("@wordrhyme/shadcn-ui");
-__wordrhyme_shadcn_ui = require_position.__toESM(__wordrhyme_shadcn_ui);
 let __wordrhyme_ui = require("@wordrhyme/ui");
 __wordrhyme_ui = require_position.__toESM(__wordrhyme_ui);
 let __wordrhyme_formily_shadcn = require("@wordrhyme/formily-shadcn");
@@ -1445,9 +1445,32 @@ const viewQuerySchema = zod.z.object({
 });
 const viewInputSchema = zod.z.object({
 	name: zod.z.string().trim().min(1).max(40),
+	slug: zod.z.string().trim().min(1).max(80).regex(/^[\p{L}\p{N}]+(?:-[\p{L}\p{N}]+)*$/u, "Slug 只能包含文字、数字和连接用的短横线").optional(),
 	query: viewQuerySchema
 });
 const savedViewSchema = viewInputSchema.extend({ id: zod.z.string().min(1) });
+/** IDs and slugs share a lookup namespace within a resource. */
+function parseSavedViews(value) {
+	const views = zod.z.array(savedViewSchema).parse(value);
+	const ids = /* @__PURE__ */ new Set();
+	const references = /* @__PURE__ */ new Map();
+	for (const view of views) {
+		if (ids.has(view.id)) throw new Error("视图 ID 重复");
+		ids.add(view.id);
+		for (const reference of [view.id, view.slug].filter((item) => item !== void 0)) {
+			const owner = references.get(reference);
+			if (owner !== void 0 && owner !== view.id) throw new Error("视图 slug 必须唯一，且不能与其他视图的 ID 相同");
+			references.set(reference, view.id);
+		}
+	}
+	return views;
+}
+/** Require a complete permutation so stale lists cannot silently drop views. */
+function reorderSavedViews(views, ids) {
+	const byId = new Map(views.map((view) => [view.id, view]));
+	if (ids.length !== views.length || new Set(ids).size !== ids.length || ids.some((id) => !byId.has(id))) throw new Error("视图列表已变化，请取消后重新调整顺序");
+	return ids.map((id) => byId.get(id));
+}
 const viewPreferencesSchema = zod.z.object({
 	selector: zod.z.enum(["dropdown", "tabs"]),
 	viewId: zod.z.string().min(1).nullable()
@@ -1491,8 +1514,8 @@ function queryFingerprint(query) {
 function createLocalViewStorage(namespace) {
 	if (!namespace.trim()) throw new Error("A user/tenant storage namespace is required");
 	const key = (resourceId) => `auto-crud:views:${encodeURIComponent(namespace)}:${encodeURIComponent(resourceId)}`;
-	const read = (resourceId) => zod.z.array(savedViewSchema).parse(JSON.parse(localStorage.getItem(key(resourceId)) ?? "[]"));
-	const write = (resourceId, views) => localStorage.setItem(key(resourceId), JSON.stringify(views));
+	const read = (resourceId) => parseSavedViews(JSON.parse(localStorage.getItem(key(resourceId)) ?? "[]"));
+	const write = (resourceId, views) => localStorage.setItem(key(resourceId), JSON.stringify(parseSavedViews(views)));
 	return {
 		async list(resourceId) {
 			return read(resourceId);
@@ -1507,9 +1530,12 @@ function createLocalViewStorage(namespace) {
 		},
 		async update(resourceId, id, input) {
 			const views = read(resourceId);
-			if (!views.some((view$1) => view$1.id === id)) throw new Error("View not found");
+			const current = views.find((view$1) => view$1.id === id);
+			if (!current) throw new Error("View not found");
+			const valid = viewInputSchema.parse(input);
 			const view = {
-				...viewInputSchema.parse(input),
+				...valid,
+				slug: valid.slug ?? current.slug,
 				id
 			};
 			write(resourceId, views.map((item) => item.id === id ? view : item));
@@ -1517,19 +1543,32 @@ function createLocalViewStorage(namespace) {
 		},
 		async remove(resourceId, id) {
 			write(resourceId, read(resourceId).filter((view) => view.id !== id));
+		},
+		async reorder(resourceId, ids) {
+			write(resourceId, reorderSavedViews(read(resourceId), ids));
 		}
 	};
 }
 
 //#endregion
 //#region src/components/auto-crud/saved-views.tsx
-function SavedViews({ resourceId, table, fieldsReady, selector, tabs, counts, onApply, children }) {
+function suggestSlug(name, views) {
+	if (!name.trim()) return "";
+	const base = name.normalize("NFKC").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-|-$/gu, "").slice(0, 70).replace(/-$/gu, "") || "view";
+	const references = new Set(views.flatMap((view) => [view.id, view.slug]));
+	let slug = base;
+	let suffix = 2;
+	while (references.has(slug)) slug = `${base}-${suffix++}`;
+	return slug;
+}
+function SavedViews({ resourceId, table, fieldsReady, defaultView, selector, tabs, counts, onApply, children }) {
 	const config = useAutoCrudConfig();
 	if (!config?.viewStorage) throw new Error("Saved views require AutoCrudProvider.viewStorage");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewMenu, {
 		resourceId,
 		table,
 		fieldsReady,
+		defaultView,
 		onApply,
 		selector,
 		tabs,
@@ -1537,7 +1576,7 @@ function SavedViews({ resourceId, table, fieldsReady, selector, tabs, counts, on
 		children
 	}, `${config.cacheKey}:${resourceId}`);
 }
-function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown", tabs, counts, onApply, children }) {
+function ViewMenu({ resourceId, table, fieldsReady = true, defaultView, selector = "dropdown", tabs, counts, onApply, children }) {
 	const config = useAutoCrudConfig();
 	const storage = config.viewStorage;
 	const client = (0, __tanstack_react_query.useQueryClient)();
@@ -1548,7 +1587,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 	];
 	const views = (0, __tanstack_react_query.useQuery)({
 		queryKey,
-		queryFn: async () => (await storage.list(resourceId)).map((view) => savedViewSchema.parse(view))
+		queryFn: async () => parseSavedViews(await storage.list(resourceId))
 	});
 	const countQueries = (0, react.useMemo)(() => [{
 		key: "all",
@@ -1632,6 +1671,8 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 	}, [config.scope, resourceId]);
 	const [dialog, setDialog] = (0, react.useState)(null);
 	const [name, setName] = (0, react.useState)("");
+	const [slug, setSlug] = (0, react.useState)("");
+	const [orderedViews, setOrderedViews] = (0, react.useState)([]);
 	const [error, setError] = (0, react.useState)(null);
 	const [search, setSearch] = (0, react.useState)(() => getUrlParams().toString());
 	(0, react.useEffect)(() => {
@@ -1645,6 +1686,8 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 	}, []);
 	const columns = table.getAllColumns().filter((column) => column.getCanFilter());
 	const keys = table.options.meta?.queryKeys;
+	const viewKey = keys?.view ?? "view";
+	const lastViewParam = (0, react.useRef)(null);
 	const readQuery = (0, react.useCallback)(() => {
 		const params = getUrlParams();
 		return {
@@ -1665,7 +1708,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 		if (query.filters.some((filter) => !allowed.has(filter.id)) || query.sort.some((sort) => !table.getColumn(sort.id)?.getCanSort())) throw new Error("视图包含已删除或不可用的字段，请修改视图条件");
 		if (query.filters.some((filter) => (table.getColumn(filter.id)?.columnDef.meta?.variant ?? "text") !== filter.variant)) throw new Error("视图中的字段类型已变化，请重新配置筛选条件");
 	}, [columns, table]);
-	const apply = (0, react.useCallback)((query, history = "push") => {
+	const apply = (0, react.useCallback)((query, history = "push", reference) => {
 		validateQuery(query);
 		const params = getUrlParams();
 		applyReadableFilters(params, columns, query.filters);
@@ -1675,43 +1718,76 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 		if (query.sort.length) params.set(keys?.sort ?? "sort", getSortingStateParser().serialize(query.sort));
 		else params.set(keys?.sort ?? "sort", "");
 		params.set(keys?.page ?? "page", "1");
+		if (reference !== void 0) {
+			params.set(viewKey, reference);
+			lastViewParam.current = reference;
+		}
 		setSearchParams(params, { history });
 		onApply?.();
 	}, [
 		columns,
 		keys,
 		validateQuery,
-		onApply
+		onApply,
+		viewKey
 	]);
 	const preferencesRestored = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
-		if (preferencesRestored.current || !views.isSuccess || !fieldsReady) return;
+		if (!views.isSuccess || !fieldsReady) return;
+		const first = !preferencesRestored.current;
+		const urlReference = getUrlParams().get(viewKey);
+		if (!first && urlReference === lastViewParam.current) return;
 		const savedViews = views.data;
 		let cancelled = false;
 		queueMicrotask(() => {
-			if (cancelled || preferencesRestored.current) return;
+			if (cancelled) return;
 			preferencesRestored.current = true;
+			lastViewParam.current = urlReference;
 			const preferences = initialPreferences.current;
-			if (!preferences || preferences.viewId === null) return;
-			const view = savedViews.find((item) => item.id === preferences.viewId);
+			let reference = urlReference;
+			if (first && urlReference === null) reference = preferences ? preferences.viewId : defaultView ?? null;
+			if (reference === null || reference === "") {
+				setSelected(null);
+				setError(null);
+				if (!first || urlReference !== null) writeViewPreferences(config.scope, resourceId, {
+					selector: display,
+					viewId: null
+				});
+				return;
+			}
+			const view = savedViews.find((item) => item.id === reference || item.slug === reference);
 			try {
 				if (view) {
 					validateQuery(view.query);
 					const params = getUrlParams();
-					if (!(readQuery().filters.length > 0 || [
+					const hasUrlQuery = readQuery().filters.length > 0 || [
 						"search",
 						keys?.sort ?? "sort",
 						keys?.joinOperator ?? "joinOperator",
 						keys?.page ?? "page",
 						keys?.perPage ?? "perPage"
-					].some((key) => params.has(key)))) apply(view.query, "replace");
+					].some((key) => params.has(key));
+					const canonical = view.slug ?? view.id;
+					if (!hasUrlQuery) apply(view.query, "replace", canonical);
+					else if (urlReference !== canonical) {
+						params.set(viewKey, canonical);
+						lastViewParam.current = canonical;
+						setSearchParams(params, { history: "replace" });
+					}
 					setSelected(view);
+					writeViewPreferences(config.scope, resourceId, {
+						selector: display,
+						viewId: view.id
+					});
+					setError(null);
 					return;
 				}
+				if (urlReference !== null && urlReference !== "") setError("链接指定的视图不存在或不可用");
 			} catch (reason) {
 				setError(reason instanceof Error ? reason.message : String(reason));
 			}
-			writeViewPreferences(config.scope, resourceId, {
+			setSelected(null);
+			if (first && urlReference === null && preferences) writeViewPreferences(config.scope, resourceId, {
 				...preferences,
 				viewId: null
 			});
@@ -1728,29 +1804,52 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 		keys,
 		readQuery,
 		apply,
-		validateQuery
+		validateQuery,
+		search,
+		viewKey,
+		defaultView,
+		display
 	]);
 	const mutation = (0, __tanstack_react_query.useMutation)({
-		mutationFn: async ({ operation, input }) => {
-			if (operation === "delete") {
+		mutationFn: async (request) => {
+			if (request.operation === "reorder") {
+				if (!storage.reorder) throw new Error("存储服务不支持视图排序");
+				reorderSavedViews(views.data ?? [], request.ids);
+				await storage.reorder(resourceId, request.ids);
+				return null;
+			}
+			if (request.operation === "delete") {
 				await storage.remove(resourceId, selected.id);
 				return null;
 			}
-			const valid = viewInputSchema.parse(input);
-			return savedViewSchema.parse(operation === "create" ? await storage.create(resourceId, valid) : await storage.update(resourceId, selected.id, valid));
+			const valid = viewInputSchema.parse(request.input);
+			parseSavedViews([...(views.data ?? []).filter((view) => request.operation === "create" || view.id !== selected.id), {
+				...valid,
+				id: request.operation === "create" ? crypto.randomUUID() : selected.id
+			}]);
+			return savedViewSchema.parse(request.operation === "create" ? await storage.create(resourceId, valid) : await storage.update(resourceId, selected.id, valid));
 		},
-		onSuccess: async (view) => {
-			if (!view) apply({
-				filters: [],
-				joinOperator: "and",
-				search: "",
-				sort: []
-			});
-			setSelected(view);
-			writeViewPreferences(config.scope, resourceId, {
-				selector: display,
-				viewId: view?.id ?? null
-			});
+		onSuccess: async (view, request) => {
+			if (request.operation !== "reorder") {
+				if (!view) apply({
+					filters: [],
+					joinOperator: "and",
+					search: "",
+					sort: []
+				}, "push", "");
+				else {
+					const reference = view.slug ?? view.id;
+					const params = getUrlParams();
+					params.set(viewKey, reference);
+					lastViewParam.current = reference;
+					setSearchParams(params, { history: "replace" });
+				}
+				setSelected(view);
+				writeViewPreferences(config.scope, resourceId, {
+					selector: display,
+					viewId: view?.id ?? null
+				});
+			}
 			setDialog(null);
 			setError(null);
 			await client.invalidateQueries({ queryKey });
@@ -1764,7 +1863,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 				joinOperator: "and",
 				search: "",
 				sort: []
-			});
+			}, "push", view?.slug ?? view?.id ?? "");
 			setSelected(view);
 			writeViewPreferences(config.scope, resourceId, {
 				selector: display,
@@ -1777,6 +1876,11 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 	};
 	const open = (operation) => {
 		setName(operation === "create" ? "" : selected?.name ?? "");
+		let nextSlug = "";
+		if (operation === "rename") nextSlug = selected?.slug ?? "";
+		else if (operation === "duplicate") nextSlug = suggestSlug(selected?.name ?? "", views.data ?? []);
+		setSlug(nextSlug);
+		if (operation === "reorder") setOrderedViews(views.data ?? []);
 		setError(null);
 		setDialog(operation);
 	};
@@ -1891,6 +1995,11 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 							})
 						] }),
 						selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DropdownMenuSeparator, {}),
+						storage.reorder && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DropdownMenuItem, {
+							disabled: views.isError || (views.data?.length ?? 0) < 2,
+							onSelect: () => open("reorder"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownUp, { className: "size-4" }), "调整顺序"]
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DropdownMenuSub, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DropdownMenuSubTrigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelsTopLeft, { className: "size-4" }), "展示方式"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DropdownMenuSubContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DropdownMenuRadioGroup, {
 							value: display,
 							onValueChange: (value) => {
@@ -1921,6 +2030,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 					operation: "update",
 					input: {
 						name: selected.name,
+						slug: selected.slug,
 						query: current
 					}
 				}),
@@ -1940,6 +2050,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 					variant: "link",
 					size: "sm",
 					onClick: () => {
+						preferencesRestored.current = false;
 						views.refetch().catch((reason) => setError(reason instanceof Error ? reason.message : String(reason)));
 					},
 					children: "重试"
@@ -1968,17 +2079,30 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 				delete: "删除视图",
 				rename: "重命名视图",
 				create: "另存为新视图",
-				duplicate: "复制视图"
+				duplicate: "复制视图",
+				reorder: "调整视图顺序"
 			}[dialog] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 				onSubmit: (event) => {
 					event.preventDefault();
+					if (mutation.isPending) return;
+					if (dialog === "reorder") {
+						mutation.mutate({
+							operation: "reorder",
+							ids: orderedViews.map((view) => view.id)
+						});
+						return;
+					}
+					if (dialog === "delete") {
+						mutation.mutate({ operation: "delete" });
+						return;
+					}
 					let operation = "create";
-					if (dialog === "delete") operation = "delete";
-					else if (dialog === "rename") operation = "update";
+					if (dialog === "rename") operation = "update";
 					mutation.mutate({
 						operation,
 						input: {
 							name,
+							slug: slug.trim() || void 0,
 							query: dialog === "rename" || dialog === "duplicate" ? selected.query : current
 						}
 					});
@@ -1988,14 +2112,68 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 						"删除「",
 						selected?.name,
 						"」？数据和标签会保留。"
-					] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "grid gap-2",
-						children: ["视图名称", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Input, {
-							value: name,
-							onChange: (event) => setName(event.target.value),
-							maxLength: 40,
-							required: true,
-							autoFocus: true
+					] }) : dialog === "reorder" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid gap-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-sm text-muted-foreground",
+							children: "拖动手柄调整顺序，“全部”固定在最前。保存后生效。"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn_ui.Sortable, {
+							value: orderedViews,
+							onValueChange: setOrderedViews,
+							getItemValue: (view) => view.id,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn_ui.SortableContent, {
+								className: "grid max-h-80 gap-2 overflow-y-auto",
+								children: orderedViews.map((view) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn_ui.SortableItem, {
+									value: view.id,
+									disabled: mutation.isPending,
+									className: "flex items-center gap-2 rounded-md border bg-background p-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn_ui.SortableItemHandle, {
+										asChild: true,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
+											type: "button",
+											variant: "ghost",
+											size: "icon-sm",
+											"aria-label": `拖动排序：${view.name}`,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "size-4" })
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "min-w-0 truncate",
+										children: view.name
+									})]
+								}, view.id))
+							})
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "grid gap-2",
+							children: ["视图名称", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Input, {
+								value: name,
+								onChange: (event) => {
+									const { value } = event.target;
+									if (dialog !== "rename" && slug === suggestSlug(name, views.data ?? [])) setSlug(suggestSlug(value, views.data ?? []));
+									setName(value);
+								},
+								maxLength: 40,
+								required: true,
+								autoFocus: true
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "grid gap-2",
+							children: [
+								"链接标识（slug）",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Input, {
+									value: slug,
+									onChange: (event) => setSlug(event.target.value),
+									maxLength: 80,
+									required: dialog === "rename" && selected?.slug !== void 0,
+									placeholder: "例如 vip-customers"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-sm text-muted-foreground",
+									children: "用于分享链接，同一列表内唯一。修改后旧链接将失效。"
+								})
+							]
 						})]
 					}),
 					error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -7293,6 +7471,7 @@ function useDataTable(props) {
 		meta: {
 			...tableProps.meta,
 			queryKeys: {
+				view: queryKeys?.view ?? "view",
 				page: pageKey,
 				perPage: perPageKey,
 				sort: sortKey,
@@ -7657,6 +7836,7 @@ function AutoTable({ resourceId, views, schema, data, getRowId, expandedRow, def
 					table,
 					onApply: clearBatchSearch,
 					fieldsReady: typeof views === "object" ? views.fieldsReady : void 0,
+					defaultView: typeof views === "object" ? views.defaultView : void 0,
 					selector: typeof views === "object" ? views.selector : void 0,
 					tabs: typeof views === "object" ? views.tabs : void 0,
 					counts: typeof views === "object" ? views.counts : void 0,

package/dist/index.d.cts

@@ -750,6 +750,8 @@ declare module '@tanstack/react-table' {
   }
 }
 interface QueryKeys {
+  /** Saved view slug or ID. Defaults to "view". */
+  view?: string;
   page: string;
   perPage: string;
   sort: string;
@@ -999,6 +1001,8 @@ interface ViewStorage {
   create: (resourceId: string, input: ViewInput) => Promise<SavedView>;
   update: (resourceId: string, id: string, input: ViewInput) => Promise<SavedView>;
   remove: (resourceId: string, id: string) => Promise<void>;
+  /** Atomically persist all view IDs in order; reject duplicates, missing or unknown IDs. */
+  reorder?: (resourceId: string, ids: string[]) => Promise<void>;
 }
 interface TagScope {
   resourceId: string;
@@ -1106,6 +1110,7 @@ declare const viewQuerySchema: z.ZodObject<{
 }, z.core.$strip>;
 declare const viewInputSchema: z.ZodObject<{
   name: z.ZodString;
+  slug: z.ZodOptional<z.ZodString>;
   query: z.ZodObject<{
     filters: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
       id: z.ZodString;
@@ -1164,6 +1169,7 @@ declare const viewInputSchema: z.ZodObject<{
 }, z.core.$strip>;
 declare const savedViewSchema: z.ZodObject<{
   name: z.ZodString;
+  slug: z.ZodOptional<z.ZodString>;
   query: z.ZodObject<{
     filters: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
       id: z.ZodString;
@@ -1237,6 +1243,8 @@ declare function createLocalViewStorage(namespace: string): ViewStorage;
 //#endregion
 //#region src/components/auto-crud/saved-views.d.ts
 interface SavedViewsConfig {
+  /** Initial view slug or ID when the URL and local preferences do not select a view. */
+  defaultView?: string;
   /** Wait for asynchronous field metadata before restoring or selecting a view. */
   fieldsReady?: boolean;
   /** Initial display mode when no local preference exists. */

package/dist/index.d.ts

@@ -5,9 +5,9 @@ import * as react_jsx_runtime17 from "react/jsx-runtime";
 import { DropdownMenuTrigger, PopoverContentProps } from "@wordrhyme/shadcn";
 import { z } from "zod";
 import { ClassValue } from "clsx";
+import { MultiCombobox, MultiComboboxOption, MultiComboboxProps, MultiComboboxTriggerRenderProps, Select, SelectMode, SelectOption, SelectProps, SelectSearchableDynamicProps, SelectSearchableMultipleProps, SelectSearchableProps, SelectSearchableSingleProps, SelectSimpleProps, SelectTriggerRenderProps } from "@wordrhyme/shadcn-ui";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table as Table$1, TableOptions, TableState, VisibilityState } from "@tanstack/react-table";
-import { MultiCombobox, MultiComboboxOption, MultiComboboxProps, MultiComboboxTriggerRenderProps, Select, SelectMode, SelectOption, SelectProps, SelectSearchableDynamicProps, SelectSearchableMultipleProps, SelectSearchableProps, SelectSearchableSingleProps, SelectSimpleProps, SelectTriggerRenderProps } from "@wordrhyme/shadcn-ui";
 import { DropdownMenuItem as DropdownMenuItem$1 } from "@wordrhyme/ui";
 import { JsonSchemaFormScope } from "@wordrhyme/formily-shadcn";
 import { ISchema } from "@formily/json-schema";
@@ -750,6 +750,8 @@ declare module '@tanstack/react-table' {
   }
 }
 interface QueryKeys {
+  /** Saved view slug or ID. Defaults to "view". */
+  view?: string;
   page: string;
   perPage: string;
   sort: string;
@@ -999,6 +1001,8 @@ interface ViewStorage {
   create: (resourceId: string, input: ViewInput) => Promise<SavedView>;
   update: (resourceId: string, id: string, input: ViewInput) => Promise<SavedView>;
   remove: (resourceId: string, id: string) => Promise<void>;
+  /** Atomically persist all view IDs in order; reject duplicates, missing or unknown IDs. */
+  reorder?: (resourceId: string, ids: string[]) => Promise<void>;
 }
 interface TagScope {
   resourceId: string;
@@ -1106,6 +1110,7 @@ declare const viewQuerySchema: z.ZodObject<{
 }, z.core.$strip>;
 declare const viewInputSchema: z.ZodObject<{
   name: z.ZodString;
+  slug: z.ZodOptional<z.ZodString>;
   query: z.ZodObject<{
     filters: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
       id: z.ZodString;
@@ -1164,6 +1169,7 @@ declare const viewInputSchema: z.ZodObject<{
 }, z.core.$strip>;
 declare const savedViewSchema: z.ZodObject<{
   name: z.ZodString;
+  slug: z.ZodOptional<z.ZodString>;
   query: z.ZodObject<{
     filters: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
       id: z.ZodString;
@@ -1237,6 +1243,8 @@ declare function createLocalViewStorage(namespace: string): ViewStorage;
 //#endregion
 //#region src/components/auto-crud/saved-views.d.ts
 interface SavedViewsConfig {
+  /** Initial view slug or ID when the URL and local preferences do not select a view. */
+  defaultView?: string;
   /** Wait for asynchronous field metadata before restoring or selecting a view. */
   fieldsReady?: boolean;
   /** Initial display mode when no local preference exists. */