@wordrhyme/auto-crud 1.17.0 → 1.18.0

package/README.md

@@ -1939,7 +1939,7 @@ container resizing and translated text widths, without changing other tables.
 
 ## 保存视图与动态标签
 
-在 `QueryClientProvider` 内配置一次服务，所有带稳定 `id` 的 `AutoCrudTable` 自动显示视图菜单：
+视图默认关闭。在 `QueryClientProvider` 内配置存储服务后，通过 `table={{ views: true }}` 为带稳定 `id` 的 `AutoCrudTable` 开启视图菜单：
 
 ```tsx
 import {
@@ -1959,6 +1959,7 @@ const viewStorage = createLocalViewStorage(`${organizationId}:${userId}`);
   >
     <AutoCrudTable
       id="crm.customers"
+      table={{ views: true }}
       schema={schema}
       resource={resource}
       fields={{
@@ -1969,7 +1970,7 @@ const viewStorage = createLocalViewStorage(`${organizationId}:${userId}`);
 </QueryClientProvider>;
 ```
 
-- 视图保存筛选条件、条件间的 AND/OR、搜索词和排序；不保存分页、选中行。支持新建、复制、重命名、删除、保存和放弃修改。`table={{ views: false }}` 可在某个表关闭。
+- 视图保存筛选条件、条件间的 AND/OR、搜索词和排序；不保存分页、选中行。支持新建、复制、重命名、删除、保存和放弃修改。省略 `views` 或传 `false` 时关闭，传 `true` 或配置对象时开启。独立 `AutoTable` 使用 `views={true}`，并提供稳定的 `resourceId`。全局 `viewStorage` 和本地展示偏好不会自动开启视图。之前依赖自动开启的列表需补充 `table={{ views: true }}`。
 - 视图支持下拉与 Tab 两种展示：下拉放在搜索框前，设置收在下拉菜单内；Tab 放在筛选栏上方，末尾仅提供设置图标，新建操作与下拉模式一致，放在设置菜单内。在设置菜单的“展示方式”中切换，当前视图及未保存修改会保留。有修改时显示状态点、“保存修改”和“还原”。无本地偏好时默认使用下拉；`table={{ views: { selector: 'tabs' } }}` 可设置初始展示。独立使用 `AutoTable` 时传 `views={{ selector: 'tabs' }}`。本地记忆优先于 `selector`，展示方式不写入已保存的查询。
 - `scope` 必须包含当前用户与租户；切换时重置组件状态。`createLocalViewStorage` 仅保存当前浏览器中的视图。换用后端时传入 `ViewStorage`，组件调用方式不变。
 - `TagService.list` 接收 `resourceId/field` 和可选的 `query/page/pageSize/signal`，统一返回 `{ options: TagOption[], hasMore: boolean }`，两个字段都必须提供。每个选项包含稳定 ID `value`、名称 `label` 和颜色 `color`。`resolve` 返回指定稳定 ID 对应的名称与颜色。用户新建标签只增加选项，不增加 schema 字段。
@@ -2063,6 +2064,31 @@ Storybook 的 **Auto CRUD / Saved views and tags / Tabs With Counts** 使用内
 
 Storybook 提供 **Line Tabs**（下方蓝色强调线）和 **Top Line Tabs**（上方强调线）示例，均带视图数量；可通过 Controls 切换样式和线条位置。已有本地展示偏好时，仍可在视图设置中切换到 Tab。
 
+### 自动标签接入
+
+字段声明 `tags: true` 后，`AutoCrudTable` 自动展示标签、启用标签筛选，并生成行操作和批量操作的设置入口：
+
+```tsx
+const schema = z.object({
+  id: z.string(),
+  recordTags: z.array(z.string()).optional(),
+});
+
+<AutoCrudTable
+  id="crm.customers"
+  schema={schema}
+  resource={resource}
+  permissions={permissions}
+  fields={{ recordTags: { label: '标签', form: false, tags: true } }}
+/>;
+```
+
+应用级 `AutoCrudProvider` 提供 `tagService`，页面无需再维护 `TagAssignment`、弹窗状态或选中记录转换。资源 ID 复用表格 `id`，记录主键复用 `resource.idKey`（默认 `id`），保存后调用 `resource.handlers.refresh`。未填写的标签值按空数组处理。
+
+自动入口跟随 `permissions.can.update`，字段 `hidden: true` 或被 `permissions.deny` 禁止时不生成入口；服务未提供 `assign` 时只展示和筛选。已有行操作、批量操作和注册扩展仍会保留。自动操作的稳定 ID 为 `tags:<字段名>`，可通过现有操作注册机制调整。`locale.tagAssignment` 可覆盖入口与弹窗标题。
+
+`tags: true` 默认补充 `filter.variant: 'tags'`，显式筛选配置优先，`filter: false` 仍可禁用筛选且保留标签展示和设置入口。省略或设置 `tags: false` 不生成自动入口，已有 `filter.variant: 'tags'` 和手动弹窗接入方式保持兼容。标签仍由现有服务读写，无需新增页面接口或业务表。
+
 ### 自定义标签编辑入口
 
 `TagAssignment` 是受控弹窗，不包含按钮。打开后直接显示搜索和标签列表，已有标签默认选中，通过勾选／取消勾选编辑，无需选择添加或移除。已选标签的名称、颜色实时显示；清空和保存位于同一行，点击保存后才提交记录的标签关联。

package/dist/index.cjs

@@ -1794,6 +1794,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 		"aria-hidden": "true",
 		className: cn("pointer-events-none absolute inset-x-0 h-1 bg-primary", linePosition === "top" ? "top-0" : "bottom-0", tabs?.classNames?.indicator)
 	}) : null;
+	const triggerLabel = display === "tabs" ? "视图设置" : selected === null ? "切换视图" : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex min-w-0 flex-wrap items-center gap-2",
 		children: [
@@ -1837,19 +1838,22 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 						type: "button",
 						variant: display === "tabs" ? "ghost" : "outline",
-						size: display === "tabs" ? "icon-sm" : "sm",
-						className: "shrink-0",
-						"aria-label": display === "tabs" ? "视图设置" : void 0,
-						title: display === "tabs" ? "视图设置" : void 0,
+						size: display === "tabs" || selected === null ? "icon-sm" : "sm",
+						className: cn("relative shrink-0", display === "dropdown" && selected === null && counts && "w-auto px-2"),
+						"aria-label": triggerLabel,
+						title: triggerLabel,
 						disabled: !fieldsReady || views.isPending || mutation.isPending,
 						children: display === "tabs" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-							selected?.name ?? "全部",
+							selected ? selected.name : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Layers, {
+								"aria-hidden": "true",
+								className: "size-4"
+							}),
 							renderCount(selected ? `view:${views.data?.findIndex((view) => view.id === selected.id)}` : "all"),
 							dirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								"aria-label": "有未保存修改",
-								className: "size-1.5 rounded-full bg-current"
+								className: cn("size-1.5 rounded-full bg-current", selected === null && "absolute right-1 top-1")
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4" })
+							selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4" })
 						] })
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DropdownMenuContent, {
@@ -2180,6 +2184,7 @@ const enUSTableControls = {
 	}
 };
 const zhCN = {
+	tagAssignment: (label) => `设置${label}`,
 	batchSearch: zhCNBatchSearch,
 	tableControls: {
 		sort: {
@@ -2295,6 +2300,7 @@ const zhCN = {
 	}
 };
 const enUS = {
+	tagAssignment: (label) => `Set ${label}`,
 	batchSearch: enUSBatchSearch,
 	tableControls: enUSTableControls,
 	pagination: enUSPagination,
@@ -7337,8 +7343,7 @@ const filterModeConfig = {
 function AutoTable({ resourceId, views, schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, queryKeys, initialColumnVisibility, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, batchSearch, filterState, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarLocale, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
 	const inheritedResourceId = (0, react.useContext)(CrudResourceContext);
 	const activeResourceId = resourceId ?? inheritedResourceId;
-	const services = useAutoCrudConfig();
-	const viewsEnabled = views ?? (!!activeResourceId && !!services?.viewStorage);
+	const viewsEnabled = views ?? false;
 	if (viewsEnabled && !activeResourceId) throw new Error("Saved views require a stable resourceId");
 	if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
 	const enableExpansion = !!expandedRow;
@@ -8045,7 +8050,7 @@ function mergeFieldPart(base, override) {
 	};
 }
 function mergeFieldConfig(base, override) {
-	return {
+	const config = {
 		...base,
 		...override,
 		enum: override?.enum ?? base?.enum,
@@ -8054,6 +8059,11 @@ function mergeFieldConfig(base, override) {
 		filter: mergeFieldPart(base?.filter, override?.filter),
 		form: mergeFieldPart(base?.form, override?.form)
 	};
+	if (config.tags && config.filter !== false) config.filter = {
+		variant: "tags",
+		...config.filter
+	};
+	return config;
 }
 function mergeFields(base, override) {
 	if (!base && !override) return void 0;
@@ -10126,7 +10136,7 @@ function resolveActions(actions, defaults, rowActionsLocale, context) {
 */
 function AutoCrudTable({ id, title, description, schema, resource, fields, table: tableConfig, form: formConfig, view: viewConfig, permissions, actions: actionItems, toolbar, toolbarActions, locale: localeProp, onCreate, onExport }) {
 	const services = useAutoCrudConfig();
-	const viewsEnabled = tableConfig?.views ?? (!!id && !!services?.viewStorage);
+	const viewsEnabled = tableConfig?.views ?? false;
 	if (viewsEnabled && !id) throw new Error("Saved views require a stable AutoCrudTable id");
 	const locale = react.useMemo(() => resolveLocale(localeProp), [localeProp]);
 	const getPagination = react.useCallback(() => id ? tablePagination.get(id) : void 0, [id]);
@@ -10171,6 +10181,51 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 	const excludedColumns = react.useMemo(() => hiddenColumns.filter((key) => !filterOnly.includes(key)), [hiddenColumns, filterOnly]);
 	const dynamicResolveOptions = useDynamicResolveOptions(resolvedFields, resource.tableData.data, hiddenColumns);
 	const resourceIdKey = resource.idKey ?? "id";
+	const tagFields = react.useMemo(() => Object.entries(resolvedFields).filter(([field, config]) => config.tags && !config.hidden && !denyFields?.includes(field)).map(([field, config]) => {
+		const label = config.label ?? humanize(field);
+		return {
+			field,
+			actionId: `tags:${field}`,
+			label: locale.tagAssignment?.(label) ?? `${locale.rowActions.edit} ${label}`
+		};
+	}), [
+		resolvedFields,
+		denyFields,
+		locale
+	]);
+	if (tagFields.length && (!id || !services?.tagService)) throw new Error("Tag fields require a CRUD id and AutoCrudProvider.tagService");
+	const [tagAssignment, setTagAssignment] = react.useState(null);
+	const canAssignTags = can.update && Boolean(services?.tagService?.assign);
+	const tagAssignmentVisible = canAssignTags && tagAssignment?.resourceId === id && tagFields.some(({ field }) => field === tagAssignment?.field);
+	react.useEffect(() => {
+		if (!tagAssignmentVisible) setTagAssignment(null);
+	}, [tagAssignmentVisible]);
+	const openTagAssignment = react.useCallback((field, dialogTitle, rows) => {
+		if (!id || !canAssignTags || !rows.length) return;
+		const entities = [];
+		for (const row of rows) {
+			const rowId = readRowId(row, resourceIdKey);
+			const tagIds = row[field] ?? [];
+			if (!rowId || !Array.isArray(tagIds) || !tagIds.every((tagId) => typeof tagId === "string")) {
+				sonner.toast.error("Tag assignment requires a record id and an array of tag ids");
+				return;
+			}
+			entities.push({
+				id: rowId,
+				tagIds: [...tagIds]
+			});
+		}
+		setTagAssignment({
+			resourceId: id,
+			field,
+			title: dialogTitle,
+			entities
+		});
+	}, [
+		id,
+		canAssignTags,
+		resourceIdKey
+	]);
 	const actionRegistryVersion = useCrudActionsVersion();
 	const unifiedActions = react.useMemo(() => {
 		if (isUnifiedActionsConfig(actionItems)) return actionItems;
@@ -10180,8 +10235,28 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 	const ownerRowConfig = unifiedActions.row;
 	const ownerBatchConfig = unifiedActions.batch ?? tableConfig?.batchActions;
 	const ownerToolbarActions = react.useMemo(() => resolveOwnerToolbarActions(ownerToolbarConfig), [ownerToolbarConfig]);
-	const ownerRowActions = react.useMemo(() => resolveOwnerRowActions(ownerRowConfig), [ownerRowConfig]);
-	const ownerBatchActions = react.useMemo(() => resolveOwnerBatchActions(ownerBatchConfig), [ownerBatchConfig]);
+	const ownerRowActions = react.useMemo(() => [...resolveOwnerRowActions(ownerRowConfig), ...canAssignTags ? tagFields.map(({ field, actionId, label }) => ({
+		type: "custom",
+		id: actionId,
+		label,
+		onClick: (row) => openTagAssignment(field, label, [row])
+	})) : []], [
+		ownerRowConfig,
+		canAssignTags,
+		tagFields,
+		openTagAssignment
+	]);
+	const ownerBatchActions = react.useMemo(() => [...resolveOwnerBatchActions(ownerBatchConfig), ...canAssignTags ? tagFields.map(({ field, actionId, label }) => ({
+		type: "custom",
+		id: actionId,
+		label,
+		onClick: (rows) => openTagAssignment(field, label, rows)
+	})) : []], [
+		ownerBatchConfig,
+		canAssignTags,
+		tagFields,
+		openTagAssignment
+	]);
 	const registryToolbarActions = react.useMemo(() => crudActions.resolve(id, "toolbar", ownerToolbarActions), [
 		id,
 		ownerToolbarActions,
@@ -10371,7 +10446,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 			}
 		}
 		for (const [field, config] of Object.entries(resolvedFields)) {
-			if (!config.filter || config.filter.variant !== "tags" || formattedOverrides[field]?.cell) continue;
+			if (!config.tags && (!config.filter || config.filter.variant !== "tags") || formattedOverrides[field]?.cell) continue;
 			formattedOverrides[field] = {
 				...formattedOverrides[field],
 				enableSorting: formattedOverrides[field]?.enableSorting ?? false,
@@ -10621,6 +10696,14 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 					...onExport ? { exportTableRef } : {}
 				}),
 				rowActionDialog,
+				tagAssignmentVisible && tagAssignment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagAssignment, {
+					...tagAssignment,
+					open: true,
+					onOpenChange: (open) => {
+						if (!open) setTagAssignment(null);
+					},
+					onSaved: resource.handlers.refresh
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudFormModal, {
 					open: resource.modal.createOpen || resource.modal.editOpen,
 					onOpenChange: (open) => !open && resource.handlers.closeModals(),

package/dist/index.d.cts

@@ -465,6 +465,8 @@ interface TableActionBarLocale {
   clearSelection: string;
 }
 interface AutoCrudLocale {
+  /** Label shared by automatic tag assignment actions and their dialog. */
+  tagAssignment?: (fieldLabel: string) => string;
   batchSearch?: BatchSearchLocale;
   /** Sorting and column visibility controls. Optional for existing custom locales. */
   tableControls?: TableControlsLocale;
@@ -1508,7 +1510,7 @@ interface TableSearchConfig {
 interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<DataTableProps<z.infer<T>>, 'expandedRow'> {
   /** Stable CRUD identity for saved views and tag services. */
   resourceId?: string;
-  /** Defaults to enabled when a global viewStorage is configured. */
+  /** Disabled by default. Pass true or a config to enable; requires viewStorage and a resourceId. */
   views?: boolean | SavedViewsConfig;
   schema: T;
   data: z.infer<T>[];
@@ -1725,6 +1727,8 @@ type FieldTableDisplay = 'auto' | 'text' | 'badge' | 'date' | 'datetime';
 interface Field {
   /** 字段标签（表格和表单共用） */
   label?: string;
+  /** Enable tag display, filtering and assignment actions using the table id and resource idKey. */
+  tags?: boolean;
   /** Format default table/detail text and CSV values; undefined keeps the default. */
   format?: (value: unknown, context: {
     row: Record<string, unknown>;
@@ -1925,7 +1929,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
   };
   /** 表格配置 */
   table?: {
-    /** Enable named query views using the global viewStorage. */
+    /** Disabled by default. Pass true or a config to enable; requires viewStorage and a stable id. */
     views?: AutoTableProps<TSchema>['views'];
     /** Optional controls; overrides the application registration for this CRUD id. */
     pagination?: TablePaginationOptions;

package/dist/index.d.ts

@@ -465,6 +465,8 @@ interface TableActionBarLocale {
   clearSelection: string;
 }
 interface AutoCrudLocale {
+  /** Label shared by automatic tag assignment actions and their dialog. */
+  tagAssignment?: (fieldLabel: string) => string;
   batchSearch?: BatchSearchLocale;
   /** Sorting and column visibility controls. Optional for existing custom locales. */
   tableControls?: TableControlsLocale;
@@ -1508,7 +1510,7 @@ interface TableSearchConfig {
 interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<DataTableProps<z.infer<T>>, 'expandedRow'> {
   /** Stable CRUD identity for saved views and tag services. */
   resourceId?: string;
-  /** Defaults to enabled when a global viewStorage is configured. */
+  /** Disabled by default. Pass true or a config to enable; requires viewStorage and a resourceId. */
   views?: boolean | SavedViewsConfig;
   schema: T;
   data: z.infer<T>[];
@@ -1725,6 +1727,8 @@ type FieldTableDisplay = 'auto' | 'text' | 'badge' | 'date' | 'datetime';
 interface Field {
   /** 字段标签（表格和表单共用） */
   label?: string;
+  /** Enable tag display, filtering and assignment actions using the table id and resource idKey. */
+  tags?: boolean;
   /** Format default table/detail text and CSV values; undefined keeps the default. */
   format?: (value: unknown, context: {
     row: Record<string, unknown>;
@@ -1925,7 +1929,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
   };
   /** 表格配置 */
   table?: {
-    /** Enable named query views using the global viewStorage. */
+    /** Disabled by default. Pass true or a config to enable; requires viewStorage and a stable id. */
     views?: AutoTableProps<TSchema>['views'];
     /** Optional controls; overrides the application registration for this CRUD id. */
     pagination?: TablePaginationOptions;

package/dist/index.js

@@ -4,7 +4,7 @@ import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { keepPreviousData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, Label, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Slider, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea, ToggleGroup, ToggleGroupItem, cn as cn$1 } from "@wordrhyme/shadcn";
-import { AppWindow, ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsRightIcon, ChevronsUpDown, CommandIcon, Copy, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, Info, List, ListFilter, ListFilterIcon, Loader2, PanelsTopLeft, Pencil, Plus, PlusCircle, RefreshCw, Search, Settings, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
+import { AppWindow, ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsRightIcon, ChevronsUpDown, CommandIcon, Copy, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, Info, Layers, List, ListFilter, ListFilterIcon, Loader2, PanelsTopLeft, Pencil, Plus, PlusCircle, RefreshCw, Search, Settings, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
 import { z } from "zod";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -1778,6 +1778,7 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 		"aria-hidden": "true",
 		className: cn("pointer-events-none absolute inset-x-0 h-1 bg-primary", linePosition === "top" ? "top-0" : "bottom-0", tabs?.classNames?.indicator)
 	}) : null;
+	const triggerLabel = display === "tabs" ? "视图设置" : selected === null ? "切换视图" : void 0;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(/* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 flex-wrap items-center gap-2",
 		children: [
@@ -1821,19 +1822,22 @@ function ViewMenu({ resourceId, table, fieldsReady = true, selector = "dropdown"
 					children: /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						variant: display === "tabs" ? "ghost" : "outline",
-						size: display === "tabs" ? "icon-sm" : "sm",
-						className: "shrink-0",
-						"aria-label": display === "tabs" ? "视图设置" : void 0,
-						title: display === "tabs" ? "视图设置" : void 0,
+						size: display === "tabs" || selected === null ? "icon-sm" : "sm",
+						className: cn("relative shrink-0", display === "dropdown" && selected === null && counts && "w-auto px-2"),
+						"aria-label": triggerLabel,
+						title: triggerLabel,
 						disabled: !fieldsReady || views.isPending || mutation.isPending,
 						children: display === "tabs" ? /* @__PURE__ */ jsx(Settings, { className: "size-4" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-							selected?.name ?? "全部",
+							selected ? selected.name : /* @__PURE__ */ jsx(Layers, {
+								"aria-hidden": "true",
+								className: "size-4"
+							}),
 							renderCount(selected ? `view:${views.data?.findIndex((view) => view.id === selected.id)}` : "all"),
 							dirty && /* @__PURE__ */ jsx("span", {
 								"aria-label": "有未保存修改",
-								className: "size-1.5 rounded-full bg-current"
+								className: cn("size-1.5 rounded-full bg-current", selected === null && "absolute right-1 top-1")
 							}),
-							/* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+							selected && /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
 						] })
 					})
 				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
@@ -2164,6 +2168,7 @@ const enUSTableControls = {
 	}
 };
 const zhCN = {
+	tagAssignment: (label) => `设置${label}`,
 	batchSearch: zhCNBatchSearch,
 	tableControls: {
 		sort: {
@@ -2279,6 +2284,7 @@ const zhCN = {
 	}
 };
 const enUS = {
+	tagAssignment: (label) => `Set ${label}`,
 	batchSearch: enUSBatchSearch,
 	tableControls: enUSTableControls,
 	pagination: enUSPagination,
@@ -7321,8 +7327,7 @@ const filterModeConfig = {
 function AutoTable({ resourceId, views, schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, queryKeys, initialColumnVisibility, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, batchSearch, filterState, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarLocale, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
 	const inheritedResourceId = useContext(CrudResourceContext);
 	const activeResourceId = resourceId ?? inheritedResourceId;
-	const services = useAutoCrudConfig();
-	const viewsEnabled = views ?? (!!activeResourceId && !!services?.viewStorage);
+	const viewsEnabled = views ?? false;
 	if (viewsEnabled && !activeResourceId) throw new Error("Saved views require a stable resourceId");
 	if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
 	const enableExpansion = !!expandedRow;
@@ -8029,7 +8034,7 @@ function mergeFieldPart(base, override) {
 	};
 }
 function mergeFieldConfig(base, override) {
-	return {
+	const config = {
 		...base,
 		...override,
 		enum: override?.enum ?? base?.enum,
@@ -8038,6 +8043,11 @@ function mergeFieldConfig(base, override) {
 		filter: mergeFieldPart(base?.filter, override?.filter),
 		form: mergeFieldPart(base?.form, override?.form)
 	};
+	if (config.tags && config.filter !== false) config.filter = {
+		variant: "tags",
+		...config.filter
+	};
+	return config;
 }
 function mergeFields(base, override) {
 	if (!base && !override) return void 0;
@@ -10110,7 +10120,7 @@ function resolveActions(actions, defaults, rowActionsLocale, context) {
 */
 function AutoCrudTable({ id, title, description, schema, resource, fields, table: tableConfig, form: formConfig, view: viewConfig, permissions, actions: actionItems, toolbar, toolbarActions, locale: localeProp, onCreate, onExport }) {
 	const services = useAutoCrudConfig();
-	const viewsEnabled = tableConfig?.views ?? (!!id && !!services?.viewStorage);
+	const viewsEnabled = tableConfig?.views ?? false;
 	if (viewsEnabled && !id) throw new Error("Saved views require a stable AutoCrudTable id");
 	const locale = React.useMemo(() => resolveLocale(localeProp), [localeProp]);
 	const getPagination = React.useCallback(() => id ? tablePagination.get(id) : void 0, [id]);
@@ -10155,6 +10165,51 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 	const excludedColumns = React.useMemo(() => hiddenColumns.filter((key) => !filterOnly.includes(key)), [hiddenColumns, filterOnly]);
 	const dynamicResolveOptions = useDynamicResolveOptions(resolvedFields, resource.tableData.data, hiddenColumns);
 	const resourceIdKey = resource.idKey ?? "id";
+	const tagFields = React.useMemo(() => Object.entries(resolvedFields).filter(([field, config]) => config.tags && !config.hidden && !denyFields?.includes(field)).map(([field, config]) => {
+		const label = config.label ?? humanize(field);
+		return {
+			field,
+			actionId: `tags:${field}`,
+			label: locale.tagAssignment?.(label) ?? `${locale.rowActions.edit} ${label}`
+		};
+	}), [
+		resolvedFields,
+		denyFields,
+		locale
+	]);
+	if (tagFields.length && (!id || !services?.tagService)) throw new Error("Tag fields require a CRUD id and AutoCrudProvider.tagService");
+	const [tagAssignment, setTagAssignment] = React.useState(null);
+	const canAssignTags = can.update && Boolean(services?.tagService?.assign);
+	const tagAssignmentVisible = canAssignTags && tagAssignment?.resourceId === id && tagFields.some(({ field }) => field === tagAssignment?.field);
+	React.useEffect(() => {
+		if (!tagAssignmentVisible) setTagAssignment(null);
+	}, [tagAssignmentVisible]);
+	const openTagAssignment = React.useCallback((field, dialogTitle, rows) => {
+		if (!id || !canAssignTags || !rows.length) return;
+		const entities = [];
+		for (const row of rows) {
+			const rowId = readRowId(row, resourceIdKey);
+			const tagIds = row[field] ?? [];
+			if (!rowId || !Array.isArray(tagIds) || !tagIds.every((tagId) => typeof tagId === "string")) {
+				toast.error("Tag assignment requires a record id and an array of tag ids");
+				return;
+			}
+			entities.push({
+				id: rowId,
+				tagIds: [...tagIds]
+			});
+		}
+		setTagAssignment({
+			resourceId: id,
+			field,
+			title: dialogTitle,
+			entities
+		});
+	}, [
+		id,
+		canAssignTags,
+		resourceIdKey
+	]);
 	const actionRegistryVersion = useCrudActionsVersion();
 	const unifiedActions = React.useMemo(() => {
 		if (isUnifiedActionsConfig(actionItems)) return actionItems;
@@ -10164,8 +10219,28 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 	const ownerRowConfig = unifiedActions.row;
 	const ownerBatchConfig = unifiedActions.batch ?? tableConfig?.batchActions;
 	const ownerToolbarActions = React.useMemo(() => resolveOwnerToolbarActions(ownerToolbarConfig), [ownerToolbarConfig]);
-	const ownerRowActions = React.useMemo(() => resolveOwnerRowActions(ownerRowConfig), [ownerRowConfig]);
-	const ownerBatchActions = React.useMemo(() => resolveOwnerBatchActions(ownerBatchConfig), [ownerBatchConfig]);
+	const ownerRowActions = React.useMemo(() => [...resolveOwnerRowActions(ownerRowConfig), ...canAssignTags ? tagFields.map(({ field, actionId, label }) => ({
+		type: "custom",
+		id: actionId,
+		label,
+		onClick: (row) => openTagAssignment(field, label, [row])
+	})) : []], [
+		ownerRowConfig,
+		canAssignTags,
+		tagFields,
+		openTagAssignment
+	]);
+	const ownerBatchActions = React.useMemo(() => [...resolveOwnerBatchActions(ownerBatchConfig), ...canAssignTags ? tagFields.map(({ field, actionId, label }) => ({
+		type: "custom",
+		id: actionId,
+		label,
+		onClick: (rows) => openTagAssignment(field, label, rows)
+	})) : []], [
+		ownerBatchConfig,
+		canAssignTags,
+		tagFields,
+		openTagAssignment
+	]);
 	const registryToolbarActions = React.useMemo(() => crudActions.resolve(id, "toolbar", ownerToolbarActions), [
 		id,
 		ownerToolbarActions,
@@ -10355,7 +10430,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 			}
 		}
 		for (const [field, config] of Object.entries(resolvedFields)) {
-			if (!config.filter || config.filter.variant !== "tags" || formattedOverrides[field]?.cell) continue;
+			if (!config.tags && (!config.filter || config.filter.variant !== "tags") || formattedOverrides[field]?.cell) continue;
 			formattedOverrides[field] = {
 				...formattedOverrides[field],
 				enableSorting: formattedOverrides[field]?.enableSorting ?? false,
@@ -10605,6 +10680,14 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 					...onExport ? { exportTableRef } : {}
 				}),
 				rowActionDialog,
+				tagAssignmentVisible && tagAssignment && /* @__PURE__ */ jsx(TagAssignment, {
+					...tagAssignment,
+					open: true,
+					onOpenChange: (open) => {
+						if (!open) setTagAssignment(null);
+					},
+					onSaved: resource.handlers.refresh
+				}),
 				/* @__PURE__ */ jsx(CrudFormModal, {
 					open: resource.modal.createOpen || resource.modal.editOpen,
 					onOpenChange: (open) => !open && resource.handlers.closeModals(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -71,9 +71,9 @@
     "nanoid": "^5.1.6",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "@wordrhyme/shadcn": "2.0.2",
+    "@wordrhyme/formily-shadcn": "2.1.3",
     "@wordrhyme/shadcn-ui": "2.1.3",
-    "@wordrhyme/formily-shadcn": "2.1.3"
+    "@wordrhyme/shadcn": "2.0.2"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
@@ -97,8 +97,8 @@
     "@internal/eslint-config": "0.3.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
-    "@internal/tsdown-config": "0.1.0",
-    "@internal/vitest-config": "0.1.0"
+    "@internal/vitest-config": "0.1.0",
+    "@internal/tsdown-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {