@wordrhyme/auto-crud 1.3.6 → 1.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -15
- package/dist/index.cjs +319 -65
- package/dist/index.d.cts +45 -19
- package/dist/index.d.ts +45 -19
- package/dist/index.js +319 -65
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -268,7 +268,7 @@ interface AutoCrudTableProps<TSchema> {
|
|
|
268
268
|
batchFields?: (string | BatchUpdateField)[]; // 批量更新字段
|
|
269
269
|
/** @deprecated 新代码请使用 actions.batch */
|
|
270
270
|
batchActions?: BatchActionConfig<z.output<TSchema>>;
|
|
271
|
-
defaultSort?: any[]; //
|
|
271
|
+
defaultSort?: any[]; // 手动 resource 的 UI 默认排序;useAutoCrudResource 请配置 options.defaultSort
|
|
272
272
|
};
|
|
273
273
|
form?: {
|
|
274
274
|
overrides?: Record<string, any>; // 表单覆盖配置
|
|
@@ -280,11 +280,13 @@ interface AutoCrudTableProps<TSchema> {
|
|
|
280
280
|
* 旧写法 actions={[...]} 仍表示行操作;
|
|
281
281
|
* 新写法 actions={{ toolbar, row, batch }} 可集中配置三类操作。
|
|
282
282
|
*/
|
|
283
|
-
actions?:
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
283
|
+
actions?:
|
|
284
|
+
| RowActionConfig<z.output<TSchema>>
|
|
285
|
+
| {
|
|
286
|
+
toolbar?: ToolbarActionConfig;
|
|
287
|
+
row?: RowActionConfig<z.output<TSchema>>;
|
|
288
|
+
batch?: BatchActionConfig<z.output<TSchema>>;
|
|
289
|
+
};
|
|
288
290
|
/** @deprecated 新代码请使用 actions.toolbar */
|
|
289
291
|
toolbar?: ToolbarActionConfig;
|
|
290
292
|
/** @deprecated 新代码请使用 actions.toolbar */
|
|
@@ -302,6 +304,11 @@ interface AutoCrudTableProps<TSchema> {
|
|
|
302
304
|
interface UseAutoCrudResourceConfig<TData> {
|
|
303
305
|
dataSource: DataSource<TData>; // 数据源
|
|
304
306
|
schema: z.ZodType<TData>; // Zod Schema
|
|
307
|
+
options?: {
|
|
308
|
+
defaultSort?: Array<{ id: string; desc: boolean }> | false;
|
|
309
|
+
// undefined: schema 有 createdAt 时默认 createdAt desc
|
|
310
|
+
// false: 不应用默认排序
|
|
311
|
+
};
|
|
305
312
|
}
|
|
306
313
|
```
|
|
307
314
|
|
|
@@ -539,11 +546,11 @@ table={{
|
|
|
539
546
|
|
|
540
547
|
`toolbar` 数组控制页面顶部右侧工具栏的按钮,设计思路完全对齐行操作 `actions`。旧 prop `toolbarActions` 仍兼容读取,但新代码请使用 `toolbar`。
|
|
541
548
|
|
|
542
|
-
内置操作类型:`create`(新建)、`import`(导入)、`export`(导出)。
|
|
549
|
+
内置操作类型:`refresh`(刷新)、`create`(新建)、`import`(导入)、`export`(导出)。
|
|
543
550
|
|
|
544
551
|
### 只添加自定义按钮(内置保持默认)
|
|
545
552
|
|
|
546
|
-
只传 `type: "custom"`
|
|
553
|
+
只传 `type: "custom"` 项时,所有内置按钮(刷新、导入、导出、新建)保持原样,custom 项按 `position` 插入首部或尾部。
|
|
547
554
|
|
|
548
555
|
```tsx
|
|
549
556
|
<AutoCrudTable
|
|
@@ -556,7 +563,7 @@ table={{
|
|
|
556
563
|
{ type: 'custom', component: <Button variant="outline">批量标签</Button> }, // 默认 position: "end"
|
|
557
564
|
]}
|
|
558
565
|
/>
|
|
559
|
-
// 渲染顺序: 分类管理 · [导入] · [导出] · [新建] · 批量标签
|
|
566
|
+
// 渲染顺序: 分类管理 · [刷新] · [导入] · [导出] · [新建] · 批量标签
|
|
560
567
|
```
|
|
561
568
|
|
|
562
569
|
### 调整内置按钮顺序
|
|
@@ -662,7 +669,7 @@ table={{
|
|
|
662
669
|
|
|
663
670
|
```tsx
|
|
664
671
|
<AutoCrudTable
|
|
665
|
-
// defaults
|
|
672
|
+
// defaults 即内置按钮的信息,在此数组里你可以随意 map、过滤或插值
|
|
666
673
|
toolbar={(defaults) =>
|
|
667
674
|
defaults.map((btn) =>
|
|
668
675
|
btn.type === 'create'
|
|
@@ -690,7 +697,7 @@ type ToolbarActionConfig =
|
|
|
690
697
|
| ((defaults: ToolbarBuiltinActionItem[]) => ToolbarActionItem[]);
|
|
691
698
|
|
|
692
699
|
type ToolbarBuiltinActionItem = ActionMeta & {
|
|
693
|
-
type: 'create' | 'import' | 'export';
|
|
700
|
+
type: 'refresh' | 'create' | 'import' | 'export';
|
|
694
701
|
onClick?: () => void; // 覆盖默认行为
|
|
695
702
|
label?: string; // 覆盖默认文案
|
|
696
703
|
component?: React.ReactNode | ((context: AutoCrudToolbarContext) => React.ReactNode);
|
|
@@ -708,10 +715,34 @@ interface AutoCrudToolbarContext {
|
|
|
708
715
|
rowIds: string[];
|
|
709
716
|
selectedRowIds: string[];
|
|
710
717
|
selectedCount: number;
|
|
718
|
+
refresh?: () => Promise<unknown>;
|
|
719
|
+
openImport?: () => void;
|
|
720
|
+
exportData?: () => Promise<void>;
|
|
711
721
|
openCreate?: () => void;
|
|
722
|
+
isRefreshing: boolean;
|
|
723
|
+
isExporting: boolean;
|
|
712
724
|
}
|
|
713
725
|
```
|
|
714
726
|
|
|
727
|
+
`AutoCrudToolbarContext` 是工具栏自定义组件的正式 command contract。自定义按钮需要复用 AutoCrud 内置能力时,直接调用 context 中的命令,不要绕过内部状态重新实现。
|
|
728
|
+
|
|
729
|
+
例如业务侧希望把默认“新建”按钮替换成“手动创建”,可以替换 `type: "create"` 的组件并调用 `openCreate`:
|
|
730
|
+
|
|
731
|
+
```tsx
|
|
732
|
+
<AutoCrudTable
|
|
733
|
+
toolbar={[
|
|
734
|
+
{
|
|
735
|
+
type: 'create',
|
|
736
|
+
component: ({ openCreate }) => (
|
|
737
|
+
<Button onClick={() => openCreate?.()}>手动创建</Button>
|
|
738
|
+
),
|
|
739
|
+
},
|
|
740
|
+
]}
|
|
741
|
+
/>
|
|
742
|
+
```
|
|
743
|
+
|
|
744
|
+
这里“手动创建”只是业务按钮文案,不是新的 AutoCrud 流程;它仍然打开 AutoCrud 原生的新建弹窗。`openCreate`、`openImport`、`exportData` 会按对应权限和能力可选暴露,扩展方应使用 `?.()` 或自行控制 disabled 状态。
|
|
745
|
+
|
|
715
746
|
### 工具栏扩展 Resolver
|
|
716
747
|
|
|
717
748
|
宿主应用可以通过 `setToolbarResolver` 为指定 CRUD 注入额外工具栏动作。resolver 是普通纯函数,不是 React Hook;不要在 resolver 内调用 `useRouter`、`useMemo` 等 React Hooks。
|
|
@@ -776,7 +807,12 @@ crudActions.register({
|
|
|
776
807
|
actions={{
|
|
777
808
|
row: [
|
|
778
809
|
{ type: 'custom', label: '分配', onClick: (row) => assign(row.id) },
|
|
779
|
-
{
|
|
810
|
+
{
|
|
811
|
+
type: 'custom',
|
|
812
|
+
label: '预览',
|
|
813
|
+
onClick: (row) => preview(row),
|
|
814
|
+
position: 'start',
|
|
815
|
+
},
|
|
780
816
|
],
|
|
781
817
|
}}
|
|
782
818
|
/>
|
|
@@ -849,7 +885,9 @@ type RowCustomActionItem<T> = ActionMeta & {
|
|
|
849
885
|
type: 'custom';
|
|
850
886
|
label?: string;
|
|
851
887
|
onClick?: (row: T) => void;
|
|
852
|
-
component?:
|
|
888
|
+
component?:
|
|
889
|
+
| React.ReactNode
|
|
890
|
+
| ((context: AutoCrudRowActionContext<T>) => React.ReactNode);
|
|
853
891
|
position?: 'start' | 'end'; // 仅无内置项时生效,默认 end
|
|
854
892
|
separator?: boolean;
|
|
855
893
|
variant?: 'default' | 'destructive';
|
|
@@ -992,7 +1030,7 @@ import {
|
|
|
992
1030
|
createSelectColumn, // 创建选择列
|
|
993
1031
|
createActionsColumn, // 创建操作列
|
|
994
1032
|
createFormSchema, // Zod Schema → Formily Schema
|
|
995
|
-
createEditFormSchema, // 创建编辑表单 Schema
|
|
1033
|
+
createEditFormSchema, // 创建编辑表单 Schema(排除平台托管字段)
|
|
996
1034
|
} from '@wordrhyme/auto-crud';
|
|
997
1035
|
```
|
|
998
1036
|
|
|
@@ -1254,7 +1292,15 @@ function CustomCrudPage() {
|
|
|
1254
1292
|
});
|
|
1255
1293
|
|
|
1256
1294
|
const formSchema = createFormSchema(taskSchema, {
|
|
1257
|
-
exclude: [
|
|
1295
|
+
exclude: [
|
|
1296
|
+
"id",
|
|
1297
|
+
"createdAt",
|
|
1298
|
+
"updatedAt",
|
|
1299
|
+
"createdBy",
|
|
1300
|
+
"createdByType",
|
|
1301
|
+
"updatedBy",
|
|
1302
|
+
"updatedByType",
|
|
1303
|
+
],
|
|
1258
1304
|
});
|
|
1259
1305
|
|
|
1260
1306
|
return (
|