@wordrhyme/auto-crud 1.0.5 → 1.0.7

package/README.md

@@ -265,10 +265,12 @@ interface AutoCrudTableProps<TSchema> {
     overrides?: Record<string, any>;            // 表单覆盖配置
     columns?: number;                           // 表单列数
   };
-  slots?: {
-    toolbarStart?: React.ReactNode;             // 工具栏左侧插槽
-    toolbarEnd?: React.ReactNode;               // 工具栏右侧插槽
-  };
+  /**
+   * 工具栏右侧操作配置
+   * - 只传 custom 项：内置保持默认，custom 追加到首/尾
+   * - 包含任意内置 type：数组完全接管，未列出的内置项自动隐藏
+   */
+  toolbarActions?: ToolbarActionItem[];
   /**
    * 行操作配置
    * - 只传 custom 项：内置保持默认，custom 追加到首/尾
@@ -518,6 +520,140 @@ table={{
 
 ---
 
+## 🔧 工具栏操作配置
+
+`toolbarActions` 数组控制页面顶部右侧工具栏的按钮，设计思路完全对齐行操作 `actions`。
+
+内置操作类型：`create`（新建）、`import`（导入）、`export`（导出）。
+
+### 只添加自定义按钮（内置保持默认）
+
+只传 `type: "custom"` 项时，所有内置按钮（导入、导出、新建）保持原样，custom 项按 `position` 插入首部或尾部。
+
+```tsx
+<AutoCrudTable
+  toolbarActions={[
+    { type: "custom", component: <Button variant="outline">分类管理</Button>, position: "start" },
+    { type: "custom", component: <Button variant="outline">批量标签</Button> }, // 默认 position: "end"
+  ]}
+/>
+// 渲染顺序: 分类管理 · [导入] · [导出] · [新建] · 批量标签
+```
+
+### 调整内置按钮顺序
+
+数组中只要包含任意内置 `type`，就会**完全接管工具栏** —— 未列出的内置按钮**直接隐藏**，渲染顺序**严格按数组**。
+
+```tsx
+<AutoCrudTable
+  toolbarActions={[
+    { type: "create" },                    // 新建移到最前
+    { type: "export", label: "导出 CSV" }, // 覆盖文案
+    // import 未列出 → 隐藏
+  ]}
+/>
+// 渲染顺序: 新建 · 导出 CSV（导入按钮消失）
+```
+
+### 覆盖内置按钮行为
+
+```tsx
+<AutoCrudTable
+  toolbarActions={[
+    { type: "import" },
+    { type: "export" },
+    { 
+      type: "create", 
+      label: "发布商品", 
+      onClick: () => router.push('/products/new'),  // 跳转详情页而非弹窗
+    },
+  ]}
+/>
+```
+
+### 完全替换内置按钮组件
+
+```tsx
+<AutoCrudTable
+  toolbarActions={[
+    { type: "export" },
+    { 
+      type: "create", 
+      component: (                             // 整个按钮替换
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button><Plus className="mr-2 h-4 w-4" />新建</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => create('simple')}>简易商品</DropdownMenuItem>
+            <DropdownMenuItem onClick={() => create('sku')}>多规格商品</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ]}
+/>
+```
+
+### 混合 custom 和内置
+
+```tsx
+<AutoCrudTable
+  toolbarActions={[
+    { type: "custom", component: <CategoryFilter onChange={setCategory} /> },
+    { type: "export" },
+    { type: "create", label: "发布", onClick: () => router.push('/products/new') },
+  ]}
+/>
+// 渲染顺序: 分类筛选 · 导出 · 发布（导入隐藏）
+```
+
+### 与 `permissions` 的交互
+
+`toolbarActions` 与 `permissions` 的交互规则如下：
+
+- `permissions.can.create = false` → 即使配置了 `{ type: "create" }`，新建按钮仍不渲染
+- `permissions.can.export = false` → 即使配置了 `{ type: "export" }`，导出按钮仍不渲染
+- 内置项即使使用 `component` 完全替换渲染，也仍然受对应权限控制
+- `type: "custom"` 不受 permissions 影响，由业务方自行控制
+
+```tsx
+<AutoCrudTable
+  permissions={{
+    can: { create: isAdmin, export: true, delete: isAdmin },
+  }}
+  toolbarActions={[
+    { type: "export" },                    // ✅ 始终渲染
+    { type: "create", label: "发布商品" }, // 🔒 仅 isAdmin 时渲染
+    { 
+      type: "custom",                     // ✅ 不受 permissions 影响
+      component: isEditor ? <Button>审核</Button> : null,  // 业务方自行守卫
+    },
+  ]}
+/>
+```
+
+### `ToolbarActionItem` 类型
+
+```typescript
+type ToolbarActionItem = ToolbarBuiltinActionItem | ToolbarCustomActionItem;
+
+type ToolbarBuiltinActionItem = {
+  type: "create" | "import" | "export";
+  onClick?: () => void;          // 覆盖默认行为
+  label?: string;                // 覆盖默认文案
+  component?: React.ReactNode;   // 完全替换按钮渲染
+};
+
+type ToolbarCustomActionItem = {
+  type: "custom";
+  component: React.ReactNode;    // 自定义渲染内容
+  position?: "start" | "end";    // 仅在无内置项时生效，默认 "end"
+};
+```
+
+---
+
 ## 🎬 行操作配置
 
 `actions` 数组控制每行下拉菜单的操作项，支持覆盖内置操作、添加自定义操作、完全自定义顺序。

package/dist/index.cjs

@@ -5980,7 +5980,7 @@ function resolveActions(items, defaults, rowActionsLocale) {
 *
 * 高级 CRUD 表格组件，封装了完整的增删改查流程
 */
-function AutoCrudTable({ title, description, schema, resource, fields, table: tableConfig, form: formConfig, slots, permissions, actions: actionItems, locale: localeProp }) {
+function AutoCrudTable({ title, description, schema, resource, fields, table: tableConfig, form: formConfig, permissions, actions: actionItems, toolbarActions, locale: localeProp, onCreate }) {
 	const locale = resolveLocale(localeProp);
 	const can = {
 		create: permissions?.can?.create ?? true,
@@ -6061,34 +6061,64 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 					children: description
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between gap-4",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex items-center gap-2",
-					children: slots?.toolbarStart
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [
-						slots?.toolbarEnd,
-						canImport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center justify-end gap-4",
+				children: (() => {
+					const renderBuiltinButton = (type, overrides) => {
+						if (type === "import" && canImport) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => setImportOpen(true),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "mr-2 h-4 w-4" }), locale.toolbar.import]
-						}),
-						canExport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+							onClick: overrides?.onClick ?? (() => setImportOpen(true)),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Download, { className: "mr-2 h-4 w-4" }), overrides?.label ?? locale.toolbar.import]
+						}, "import");
+						if (type === "export" && canExport) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
 							variant: "outline",
 							size: "sm",
-							onClick: handleExportClick,
+							onClick: overrides?.onClick ?? handleExportClick,
 							disabled: exporting || selectedCount === 0 && !resource.handlers.export,
-							children: [exporting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }), selectedCount > 0 ? locale.toolbar.exportSelected(selectedCount) : locale.toolbar.export]
-						}),
-						can.create && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
-							onClick: resource.handlers.openCreate,
-							children: locale.toolbar.create
+							children: [exporting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }), overrides?.label ?? (selectedCount > 0 ? locale.toolbar.exportSelected(selectedCount) : locale.toolbar.export)]
+						}, "export");
+						if (type === "create" && can.create) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+							onClick: overrides?.onClick ?? onCreate ?? resource.handlers.openCreate,
+							children: overrides?.label ?? locale.toolbar.create
+						}, "create");
+						return null;
+					};
+					if (!toolbarActions || toolbarActions.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [
+							renderBuiltinButton("import"),
+							renderBuiltinButton("export"),
+							renderBuiltinButton("create")
+						]
+					});
+					if (!toolbarActions.some((i) => i.type !== "custom")) {
+						const startNodes = toolbarActions.filter((i) => i.type === "custom" && i.position === "start").map((a, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: a.component }, `start-${i}`));
+						const endNodes = toolbarActions.filter((i) => i.type === "custom" && i.position !== "start").map((a, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: a.component }, `end-${i}`));
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [
+								startNodes,
+								renderBuiltinButton("import"),
+								renderBuiltinButton("export"),
+								renderBuiltinButton("create"),
+								endNodes
+							]
+						});
+					}
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center gap-2",
+						children: toolbarActions.map((action, index) => {
+							if (action.type === "custom") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: action.component }, `custom-${index}`);
+							if (!(action.type === "import" ? canImport : action.type === "export" ? canExport : can.create)) return null;
+							if (action.component) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: action.component }, action.type);
+							return renderBuiltinButton(action.type, {
+								onClick: action.onClick,
+								label: action.label
+							});
 						})
-					]
-				})]
+					});
+				})()
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTable, {
 				data: resource.tableData.data,

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { z } from "zod";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
@@ -314,7 +314,7 @@ declare function AutoTableActionBar<TData>({
   enableExport,
   enableDelete,
   extraActions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime5.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -470,7 +470,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   enableExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime5.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -661,6 +661,29 @@ type CustomActionItem<T> = {
  * - **包含任意内置 type**：数组完全接管，未列出的隐藏，顺序即渲染顺序
  */
 type ActionItem<T> = BuiltinActionItem<T> | CustomActionItem<T>;
+/**
+ * 顶部工具栏内置操作项
+ */
+type ToolbarBuiltinActionItem = {
+  type: "create" | "import" | "export";
+  /** 替代默认的行为 */
+  onClick?: () => void;
+  /** 替代默认的标签文本 */
+  label?: string;
+  /** 替代整个按钮的渲染 */
+  component?: React$1.ReactNode;
+};
+/**
+ * 顶部工具栏自定义操作项
+ */
+type ToolbarCustomActionItem = {
+  type: "custom";
+  /** 渲染自定义内容 */
+  component: React$1.ReactNode;
+  /** 仅在无内置项时生效：插入到首部还是尾部（默认 end） */
+  position?: "start" | "end";
+};
+type ToolbarActionItem = ToolbarBuiltinActionItem | ToolbarCustomActionItem;
 /**
  * AutoCrudTable Props 接口
  */
@@ -708,15 +731,13 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
     /** 弹窗自定义容器类名（支持控制大小、最大高度等） */
     className?: string;
   };
-  /** 扩展点 */
-  slots?: {
-    /** 工具栏左侧插槽 */
-    toolbarStart?: React$1.ReactNode;
-    /** 工具栏右侧插槽 */
-    toolbarEnd?: React$1.ReactNode;
-  };
   /** 行操作配置，见 {@link ActionItem} */
   actions?: ActionItem<z.output<TSchema>>[];
+  /**
+   * 顶层工具栏操作配置
+   * 用法类同 `actions` 行操作。一旦配置了包含内置 `type` 的数组，它将完全接管右侧工具栏！
+   */
+  toolbarActions?: ToolbarActionItem[];
   /**
    * 权限配置
    * 控制按钮显示和字段访问
@@ -750,6 +771,11 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
    * ```
    */
   locale?: LocaleProp;
+  /**
+   * 自定义新建按钮点击事件
+   * 如果提供，将覆盖默认的打开新建弹窗行为
+   */
+  onCreate?: () => void;
 }
 /**
  * AutoCrudTable 组件
@@ -764,11 +790,12 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   fields,
   table: tableConfig,
   form: formConfig,
-  slots,
   permissions,
   actions: actionItems,
-  locale: localeProp
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime5.JSX.Element;
+  toolbarActions,
+  locale: localeProp,
+  onCreate
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -800,7 +827,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime5.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime4.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1098,7 +1125,7 @@ declare function AutoTableSimpleFilters<TData>({
   shallow,
   filters: externalFilters,
   onFiltersChange
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime5.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime4.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1140,7 +1167,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime5.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1162,7 +1189,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime5.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1182,7 +1209,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime5.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1195,7 +1222,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime5.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1206,7 +1233,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime5.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1218,7 +1245,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime5.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1232,7 +1259,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime5.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1244,7 +1271,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime5.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1255,7 +1282,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime5.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1266,7 +1293,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime5.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {
@@ -1601,4 +1628,4 @@ declare function exportAllToCSV<T extends Record<string, unknown>>(data: T[], op
  */
 declare function downloadCSVTemplate(headers: string[], filename?: string): void;
 //#endregion
-export { type ActionItem, type ActionsColumnConfig, type AutoCrudLocale, AutoCrudTable, type AutoCrudTableProps, AutoForm, type AutoQueryParams, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, SchemaAdapter, type SimpleFieldConfig, type SimpleFieldsConfig, type ToastAdapter, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, cn, coerceRowValues, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, noopToastAdapter, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, resolveLocale, setSearchParams, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
+export { type ActionItem, type ActionsColumnConfig, type AutoCrudLocale, AutoCrudTable, type AutoCrudTableProps, AutoForm, type AutoQueryParams, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, SchemaAdapter, type SimpleFieldConfig, type SimpleFieldsConfig, type ToastAdapter, type ToolbarActionItem, type ToolbarBuiltinActionItem, type ToolbarCustomActionItem, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, cn, coerceRowValues, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, noopToastAdapter, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, resolveLocale, setSearchParams, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
 import { DropdownMenuTrigger, PopoverContent } from "@pixpilot/shadcn";
 import { ClassValue } from "clsx";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { z } from "zod";
 import { ISchema } from "@formily/json-schema";
 
@@ -314,7 +314,7 @@ declare function AutoTableActionBar<TData>({
   enableExport,
   enableDelete,
   extraActions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime10.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -470,7 +470,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   enableExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime10.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -661,6 +661,29 @@ type CustomActionItem<T> = {
  * - **包含任意内置 type**：数组完全接管，未列出的隐藏，顺序即渲染顺序
  */
 type ActionItem<T> = BuiltinActionItem<T> | CustomActionItem<T>;
+/**
+ * 顶部工具栏内置操作项
+ */
+type ToolbarBuiltinActionItem = {
+  type: "create" | "import" | "export";
+  /** 替代默认的行为 */
+  onClick?: () => void;
+  /** 替代默认的标签文本 */
+  label?: string;
+  /** 替代整个按钮的渲染 */
+  component?: React$1.ReactNode;
+};
+/**
+ * 顶部工具栏自定义操作项
+ */
+type ToolbarCustomActionItem = {
+  type: "custom";
+  /** 渲染自定义内容 */
+  component: React$1.ReactNode;
+  /** 仅在无内置项时生效：插入到首部还是尾部（默认 end） */
+  position?: "start" | "end";
+};
+type ToolbarActionItem = ToolbarBuiltinActionItem | ToolbarCustomActionItem;
 /**
  * AutoCrudTable Props 接口
  */
@@ -708,15 +731,13 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
     /** 弹窗自定义容器类名（支持控制大小、最大高度等） */
     className?: string;
   };
-  /** 扩展点 */
-  slots?: {
-    /** 工具栏左侧插槽 */
-    toolbarStart?: React$1.ReactNode;
-    /** 工具栏右侧插槽 */
-    toolbarEnd?: React$1.ReactNode;
-  };
   /** 行操作配置，见 {@link ActionItem} */
   actions?: ActionItem<z.output<TSchema>>[];
+  /**
+   * 顶层工具栏操作配置
+   * 用法类同 `actions` 行操作。一旦配置了包含内置 `type` 的数组，它将完全接管右侧工具栏！
+   */
+  toolbarActions?: ToolbarActionItem[];
   /**
    * 权限配置
    * 控制按钮显示和字段访问
@@ -750,6 +771,11 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
    * ```
    */
   locale?: LocaleProp;
+  /**
+   * 自定义新建按钮点击事件
+   * 如果提供，将覆盖默认的打开新建弹窗行为
+   */
+  onCreate?: () => void;
 }
 /**
  * AutoCrudTable 组件
@@ -764,11 +790,12 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   fields,
   table: tableConfig,
   form: formConfig,
-  slots,
   permissions,
   actions: actionItems,
-  locale: localeProp
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime10.JSX.Element;
+  toolbarActions,
+  locale: localeProp,
+  onCreate
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -800,7 +827,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime10.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime6.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1098,7 +1125,7 @@ declare function AutoTableSimpleFilters<TData>({
   shallow,
   filters: externalFilters,
   onFiltersChange
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime10.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime6.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1140,7 +1167,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime10.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1162,7 +1189,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime10.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1182,7 +1209,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime10.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1195,7 +1222,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime10.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1206,7 +1233,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime10.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1218,7 +1245,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime10.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1232,7 +1259,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime10.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1244,7 +1271,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime10.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1255,7 +1282,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime10.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1266,7 +1293,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime10.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {
@@ -1601,4 +1628,4 @@ declare function exportAllToCSV<T extends Record<string, unknown>>(data: T[], op
  */
 declare function downloadCSVTemplate(headers: string[], filename?: string): void;
 //#endregion
-export { type ActionItem, type ActionsColumnConfig, type AutoCrudLocale, AutoCrudTable, type AutoCrudTableProps, AutoForm, type AutoQueryParams, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, SchemaAdapter, type SimpleFieldConfig, type SimpleFieldsConfig, type ToastAdapter, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, cn, coerceRowValues, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, noopToastAdapter, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, resolveLocale, setSearchParams, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
+export { type ActionItem, type ActionsColumnConfig, type AutoCrudLocale, AutoCrudTable, type AutoCrudTableProps, AutoForm, type AutoQueryParams, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, SchemaAdapter, type SimpleFieldConfig, type SimpleFieldsConfig, type ToastAdapter, type ToolbarActionItem, type ToolbarBuiltinActionItem, type ToolbarCustomActionItem, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, cn, coerceRowValues, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, noopToastAdapter, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, resolveLocale, setSearchParams, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };

package/dist/index.js

@@ -5938,7 +5938,7 @@ function resolveActions(items, defaults, rowActionsLocale) {
 *
 * 高级 CRUD 表格组件，封装了完整的增删改查流程
 */
-function AutoCrudTable({ title, description, schema, resource, fields, table: tableConfig, form: formConfig, slots, permissions, actions: actionItems, locale: localeProp }) {
+function AutoCrudTable({ title, description, schema, resource, fields, table: tableConfig, form: formConfig, permissions, actions: actionItems, toolbarActions, locale: localeProp, onCreate }) {
 	const locale = resolveLocale(localeProp);
 	const can = {
 		create: permissions?.can?.create ?? true,
@@ -6019,34 +6019,64 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 					children: description
 				})]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-4",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-2",
-					children: slots?.toolbarStart
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [
-						slots?.toolbarEnd,
-						canImport && /* @__PURE__ */ jsxs(Button, {
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-end gap-4",
+				children: (() => {
+					const renderBuiltinButton = (type, overrides) => {
+						if (type === "import" && canImport) return /* @__PURE__ */ jsxs(Button, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => setImportOpen(true),
-							children: [/* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }), locale.toolbar.import]
-						}),
-						canExport && /* @__PURE__ */ jsxs(Button, {
+							onClick: overrides?.onClick ?? (() => setImportOpen(true)),
+							children: [/* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }), overrides?.label ?? locale.toolbar.import]
+						}, "import");
+						if (type === "export" && canExport) return /* @__PURE__ */ jsxs(Button, {
 							variant: "outline",
 							size: "sm",
-							onClick: handleExportClick,
+							onClick: overrides?.onClick ?? handleExportClick,
 							disabled: exporting || selectedCount === 0 && !resource.handlers.export,
-							children: [exporting ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }), selectedCount > 0 ? locale.toolbar.exportSelected(selectedCount) : locale.toolbar.export]
-						}),
-						can.create && /* @__PURE__ */ jsx(Button, {
-							onClick: resource.handlers.openCreate,
-							children: locale.toolbar.create
+							children: [exporting ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }), overrides?.label ?? (selectedCount > 0 ? locale.toolbar.exportSelected(selectedCount) : locale.toolbar.export)]
+						}, "export");
+						if (type === "create" && can.create) return /* @__PURE__ */ jsx(Button, {
+							onClick: overrides?.onClick ?? onCreate ?? resource.handlers.openCreate,
+							children: overrides?.label ?? locale.toolbar.create
+						}, "create");
+						return null;
+					};
+					if (!toolbarActions || toolbarActions.length === 0) return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							renderBuiltinButton("import"),
+							renderBuiltinButton("export"),
+							renderBuiltinButton("create")
+						]
+					});
+					if (!toolbarActions.some((i) => i.type !== "custom")) {
+						const startNodes = toolbarActions.filter((i) => i.type === "custom" && i.position === "start").map((a, i) => /* @__PURE__ */ jsx(React.Fragment, { children: a.component }, `start-${i}`));
+						const endNodes = toolbarActions.filter((i) => i.type === "custom" && i.position !== "start").map((a, i) => /* @__PURE__ */ jsx(React.Fragment, { children: a.component }, `end-${i}`));
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [
+								startNodes,
+								renderBuiltinButton("import"),
+								renderBuiltinButton("export"),
+								renderBuiltinButton("create"),
+								endNodes
+							]
+						});
+					}
+					return /* @__PURE__ */ jsx("div", {
+						className: "flex items-center gap-2",
+						children: toolbarActions.map((action, index) => {
+							if (action.type === "custom") return /* @__PURE__ */ jsx(React.Fragment, { children: action.component }, `custom-${index}`);
+							if (!(action.type === "import" ? canImport : action.type === "export" ? canExport : can.create)) return null;
+							if (action.component) return /* @__PURE__ */ jsx(React.Fragment, { children: action.component }, action.type);
+							return renderBuiltinButton(action.type, {
+								onClick: action.onClick,
+								label: action.label
+							});
 						})
-					]
-				})]
+					});
+				})()
 			}),
 			/* @__PURE__ */ jsx(AutoTable, {
 				data: resource.tableData.data,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -81,11 +81,11 @@
     "react-dom": "19.2.4",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
-    "@internal/eslint-config": "0.3.0",
     "@internal/prettier-config": "0.0.1",
+    "@internal/eslint-config": "0.3.0",
     "@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": {