@magicbe/antd-crud 0.0.42 → 0.0.44

package/README.md

@@ -0,0 +1,301 @@
+# @magicbe/antd-crud
+
+一个基于 Ant Design 的 CRUD 表格组件库，简化开发中的增删改查操作。
+
+## 特性
+
+- 快速构建完整的 CRUD 表格界面
+- 支持多种表单字段类型
+- 内置筛选、新增、编辑、删除功能
+- 可自定义操作按钮
+- 基于 Ant Design，样式统一
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @magicbe/antd-crud
+
+# 使用 yarn
+yarn add @magicbe/antd-crud
+
+# 使用 pnpm
+pnpm add @magicbe/antd-crud
+```
+
+## 依赖
+
+- antd: 5.22.5+
+- react: 18.2.0+
+- react-dom: 18.2.0+
+
+## 基本使用
+
+```tsx
+import React from 'react';
+import { CrudTable, type ContentProps, type ColumnType, type delHandle, type editHandle, type addHandle } from '@magicbe/antd-crud';
+
+interface User {
+    id: number;
+    name: string;
+    age: number;
+    address: string;
+}
+
+const columns: ColumnType<User>['columns'] = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        filter: 'Input',
+        field: {
+            type: 'Input',
+            rules: [{ required: true }],
+            ...({})
+        },
+        add: true,
+        edit: true,
+    },
+    {
+        title: '年龄',
+        dataIndex: 'age',
+        field: 'InputNumber',
+        add: true,
+        edit: true,
+    },
+    {
+        title: '地址',
+        dataIndex: 'address',
+        field: 'TextArea',
+        add: true,
+        edit: true,
+    },
+    {
+        title: "所属区域",
+        dataIndex: "region",
+        field: {
+            type: "Select",
+            option: {
+                options: [
+                    {
+                        label: "区域1",
+                        value: "1",
+                    },
+                    {
+                        label: "区域2",
+                        value: "2",
+                    },
+                ]
+            },
+            rules: [{ required: true }]
+        },
+        edit: true,
+    },
+];
+
+const App: React.FC = () => {
+    const getSources: ContentProps<User>['getSources'] = async (params: any = {}) => {
+        const {
+            current: page = 1,
+            pageSize: size = 10,
+        } = params;
+
+        // 模拟API请求
+        
+        return {
+            sources: [
+                { id: 1, name: '张三', age: 28, address: '北京市海淀区' },
+                { id: 2, name: '李四', age: 32, address: '上海市浦东新区' },
+            ],
+            total: 2,
+            page,
+            size,
+        };
+    };
+
+    const add: addHandle = async (value) => {
+        // 模拟新增操作
+        console.log('add:', value);
+        return Promise.resolve();
+    };
+
+    const edit: editHandle = async (value) => {
+        // 模拟编辑操作
+        console.log('edit:', value);
+        return Promise.resolve();
+    };
+
+    const del: delHandle = async (value) => {      
+        // 模拟删除操作
+        console.log('delete:', value);
+        return Promise.resolve();
+    };
+
+    return (
+        <CrudTable
+            columns={columns}
+            getSources={getSources}
+            add={add}
+            edit={edit}
+            del={del}
+            rowKey={"uuid"}
+        />
+    );
+};
+
+export default App;
+```
+
+## API 文档
+
+### CrudTable
+
+主要组件，集成了筛选、操作按钮和表格功能。
+
+#### 属性
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| columns | ColumnType[] | 表格列配置 |
+| getSources | (params?: GetSourceFunctionParams) => Promise<Source> | 获取数据的方法 |
+| add | addHandle \| addHandleMap | 新增操作方法 |
+| edit | editHandle \| editHandleMap | 编辑操作方法 |
+| del | delHandle \| Partial<HandleMap<delHandle>> | 删除操作方法 |
+| action | Action | 自定义操作按钮 |
+| rowSelection | RowSelectionType | 行选择类型 |
+| pagination | false | 是否显示分页（暂仅支持false） |
+| drawer | number \| DrawerProps | 抽屉配置 |
+| pageSizeOptions | PaginationProps['pageSizeOptions'] | 每页条数选项 |
+| actionColumn | ColumnType<any> | 操作列配置 |
+
+### ColumnType
+
+表格列配置，继承自 Ant Design 的 ColumnType，增加了以下属性：
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| field | ColumnFieldKeys \| ColumnField \| React.FC | 表单字段类型 |
+| filter | boolean \| ColumnFieldKeys \| ColumnField \| React.FC | 筛选字段类型 |
+| add | boolean \| ColumnFieldKeys \| ColumnField \| React.FC | 新增表单字段类型 |
+| edit | boolean \| ColumnFieldKeys \| ColumnField \| React.FC | 编辑表单字段类型 |
+
+### ColumnField 类型
+
+支持的表单字段类型：
+- Input
+- Input.Password
+- TextArea
+- InputNumber
+- Select
+- Cascader
+- TreeSelect
+- Checkbox
+- Checkbox.Group
+- DatePicker
+- DatePicker.YearPicker
+- DatePicker.MonthPicker
+- DatePicker.WeekPicker
+- DatePicker.TimePicker
+- DatePicker.RangePicker
+- DatePicker.QuarterPicker
+- TimePicker
+- TimePicker.RangePicker
+- Radio
+- Radio.Group
+- Switch
+
+### TableContextProvider 和 useTableContext
+
+提供表格上下文，可用于自定义组件中获取表格状态和方法。
+
+### Filter
+
+筛选组件，可单独使用。
+
+### Action
+
+操作按钮组件，提供了新增、编辑、删除等默认操作。
+
+### Table
+
+表格组件，继承自 Ant Design 的 Table。
+
+### CrudConfigProvider
+
+配置提供者，继承自 Ant Design 的 ConfigProvider。
+
+## 高级用法
+
+### 自定义操作按钮
+
+```tsx
+<CrudTable
+  columns={columns}
+  getSources={getSources}
+  action={{
+    master: {
+      add: true,
+      del: true,
+      // 自定义主操作按钮
+    },
+    record: {
+      edit: true,
+      del: true,
+      // 自定义行操作按钮
+    },
+  }}
+/>
+```
+
+### 使用 Context
+
+```tsx
+import { TableContextProvider, useTableContext } from '@magicbe/antd-crud';
+
+const CustomComponent: React.FC = () => {
+  const { table_ref } = useTableContext();
+  
+  const handleRefresh = () => {
+    table_ref.current?.loadRecords();
+  };
+  
+  return (
+    <button onClick={handleRefresh}>刷新数据</button>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <TableContextProvider {...props}>
+      <CustomComponent />
+    </TableContextProvider>
+  );
+};
+```
+
+### 配置主题
+
+```tsx
+import { CrudConfigProvider } from '@magicbe/antd-crud';
+
+const App: React.FC = () => {
+  return (
+    <CrudConfigProvider theme={{
+      token: {
+        colorPrimary: '#1890ff',
+      },
+    }}>
+      <CrudTable {...props} />
+    </CrudConfigProvider>
+  );
+};
+```
+
+## 注意事项
+
+1. 组件依赖 antd 5.22.5 及以上版本，请确保项目中 antd 版本符合要求。
+2. 目前 pagination 仅支持设置为 false，分页功能内置实现。
+3. 自定义组件时，请使用 TableContextProvider 包裹以确保能正确获取上下文。
+
+## License
+
+MIT

package/dist/components/Action.d.ts

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { ActionProps, ActionRef } from "../interface";
-declare const _default: React.ForwardRefExoticComponent<ActionProps & React.RefAttributes<ActionRef>>;
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;
 /**自定义渲染 */
 export declare const CustormRender: React.FC<PropsWithChildren>;

package/dist/components/Action.js

@@ -50,7 +50,7 @@ import EditForm from "./Edit";
 var _a = createEmotion({ key: "action" }), css = _a.css, cx = _a.cx;
 var wrapper_css = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: 25px;\n"], ["\n    margin-bottom: 25px;\n"])));
 /**操作 */
-var Action = function (_a, ref) {
+var Action = React.forwardRef(function (_a, ref) {
     var className = _a.className;
     var action = useTableContext().action;
     useImperativeHandle(ref, function () { return ({}); });
@@ -124,8 +124,11 @@ var Action = function (_a, ref) {
     }
     /**默认渲染 */
     return (_jsxs(Space, { className: cx(wrapper_css, className), children: [_jsx(AppendAction, {}), _jsx(EditAction, {}), _jsx(DeleteAction, {})] }));
-};
-export default React.forwardRef(Action);
+});
+export default (function () {
+    var action_ref = useTableContext().action_ref;
+    return _jsx(Action, { ref: action_ref });
+});
 /**自定义渲染 */
 export var CustormRender = function (_a) {
     var children = _a.children;
@@ -139,7 +142,7 @@ var append_action_default_children = (_jsxs(Button, { type: "primary", children:
 export var AppendAction = function (_a) {
     var _b = _a.children, children = _b === void 0 ? append_action_default_children : _b;
     var _c = Modal.useModal(), modalInstance = _c[0], modalContextHolder = _c[1];
-    var _d = useTableContext(), content_ref = _d.content_ref, table_ref = _d.table_ref, filter_ref = _d.filter_ref, form_ref = _d.form_ref, add = _d.add, drawer = _d.drawer;
+    var _d = useTableContext(), table_ref = _d.table_ref, filter_ref = _d.filter_ref, form_ref = _d.form_ref, add = _d.add, drawer = _d.drawer;
     /**添加表单抽屉 */
     var _e = useState(false), add_drawer_open = _e[0], setAdd_drawer_open = _e[1];
     var _f = useState(), init_data = _f[0], setInit_data = _f[1];
@@ -295,10 +298,6 @@ export var DeleteAction = function (_a) {
                     if (error_2 === false)
                         return [2 /*return*/];
                     console.error(error_2);
-                    modalInstance.error({
-                        title: "错误",
-                        content: String(error_2),
-                    });
                     return [3 /*break*/, 12];
                 case 11:
                     setLoading(false);

package/dist/components/Filter.d.ts

@@ -1,4 +1,2 @@
-import React from "react";
-import { FilterProps, FilterRef } from "../interface";
-declare const _default: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<FilterRef>>;
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/components/Filter.js

@@ -33,9 +33,9 @@ import { Button, Form, Space } from "antd";
 import createEmotion from "@emotion/css/create-instance";
 import { SearchOutlined, UndoOutlined } from "@ant-design/icons";
 import { get, isObject, isString } from "lodash";
-var _a = createEmotion({ key: "filter" }), css = _a.css, cx = _a.cx;
+var css = createEmotion({ key: "filter" }).css;
 var wrapper_css = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: 25px;\n"], ["\n    margin-bottom: 25px;\n"])));
-var Filter = function (_a, ref) {
+var Filter = React.forwardRef(function (_a, ref) {
     var form = Form.useForm()[0];
     var _b = useTableContext(), columns = _b.columns, table_ref = _b.table_ref;
     var filters = columns === null || columns === void 0 ? void 0 : columns.filter(function (_a) {
@@ -72,6 +72,9 @@ var Filter = function (_a, ref) {
     if (!(filters === null || filters === void 0 ? void 0 : filters.length))
         return _jsx(Fragment, {});
     return (_jsxs(Form, { layout: "inline", onFinish: onFinish, className: wrapper_css, form: form, initialValues: initialValues, children: [filters === null || filters === void 0 ? void 0 : filters.map(function (filter) { return _createElement(Field, __assign({}, filter, { key: String(filter.dataIndex) })); }), _jsxs(Space, { size: 14, children: [_jsxs(Button, { htmlType: "submit", type: "primary", children: [_jsx(SearchOutlined, {}), "\u67E5\u8BE2"] }), _jsxs(Button, { htmlType: "reset", children: [_jsx(UndoOutlined, {}), "\u91CD\u7F6E"] })] })] }));
-};
-export default React.forwardRef(Filter);
+});
+export default (function () {
+    var filter_ref = useTableContext().filter_ref;
+    return _jsx(Filter, { ref: filter_ref });
+});
 var templateObject_1;

package/dist/components/Table.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from "react";
-import { TableProps, TableRef, type AnyObject } from "../interface";
-declare const _default: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<TableRef>>;
+import { type AnyObject } from "../interface";
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;
 interface ActionProps {
     row: AnyObject;

package/dist/components/Table.js

@@ -69,7 +69,7 @@ import { useTableContext } from "./Context";
 import AddForm from "./Add";
 import EditForm from "./Edit";
 import { css } from "@emotion/css";
-var Table = function (_a, ref) {
+var Table = React.forwardRef(function (_a, ref) {
     var _b = useTableContext(), getSources = _b.getSources, selectionType = _b.rowSelection, action = _b.action, content_ref = _b.content_ref, filter_ref = _b.filter_ref, pageSizeOptions = _b.pageSizeOptions, _c = _b.actionColumn, actionColumn = _c === void 0 ? {} : _c, _pagination_ = _b.pagination, props = __rest(_b, ["getSources", "rowSelection", "action", "content_ref", "filter_ref", "pageSizeOptions", "actionColumn", "pagination"]);
     var _d = useState([]), sources = _d[0], setSources = _d[1];
     var _e = useState(), total = _e[0], setTotal = _e[1];
@@ -200,13 +200,16 @@ var Table = function (_a, ref) {
     }); });
     useEffect(loadRecords, []);
     return (_jsx(AntdTable, __assign({}, props, { rowSelection: rowSelection, columns: columns, loading: loading, onChange: loadRecords, dataSource: sources, pagination: pagination })));
-};
-export default React.forwardRef(Table);
+});
+export default (function () {
+    var table_ref = useTableContext().table_ref;
+    return _jsx(Table, { ref: table_ref });
+});
 var action_cls = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: 0;\n    padding-bottom: 0;\n"], ["\n    padding-top: 0;\n    padding-bottom: 0;\n"])));
 var append_action_default_children = (_jsxs(Button, { type: "link", size: "small", className: action_cls, children: [_jsx(PlusOutlined, {}), "\u65B0\u589E"] }));
 export var AppendAction = function (_a) {
     var _b = _a.children, children = _b === void 0 ? append_action_default_children : _b, row = _a.row;
-    var _c = useTableContext(), rowKey = _c.rowKey, content_ref = _c.content_ref, table_ref = _c.table_ref, filter_ref = _c.filter_ref, form_ref = _c.form_ref, add = _c.add, drawer = _c.drawer;
+    var _c = useTableContext(), rowKey = _c.rowKey, table_ref = _c.table_ref, filter_ref = _c.filter_ref, form_ref = _c.form_ref, add = _c.add, drawer = _c.drawer;
     var _d = Modal.useModal(), modalInstance = _d[0], modalContextHolder = _d[1];
     var _e = useState(false), add_drawer_open = _e[0], setAdd_drawer_open = _e[1];
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
@@ -497,10 +500,6 @@ export var DeleteAction = function (_a) {
                 case 10:
                     error_4 = _d.sent();
                     console.error(error_4);
-                    modalInstance.error({
-                        title: "错误",
-                        content: String(error_4),
-                    });
                     return [3 /*break*/, 12];
                 case 11:
                     setLoading(false);

package/dist/components/index.js

@@ -16,10 +16,11 @@ import Action from "./Action";
 import Table from "./Table";
 import { TableContextProvider, useTableContext } from "./Context";
 var Content = function () {
-    var _a = useTableContext(), filter_ref = _a.filter_ref, action_ref = _a.action_ref, table_ref = _a.table_ref, content_ref = _a.content_ref;
-    return (_jsxs("div", { ref: content_ref, children: [_jsx(Filter, { ref: filter_ref }), _jsx(Action, { ref: action_ref }), _jsx(Table, { ref: table_ref })] }));
+    var content_ref = useTableContext().content_ref;
+    return (_jsxs("div", { ref: content_ref, children: [_jsx(Filter, {}), _jsx(Action, {}), _jsx(Table, {})] }));
 };
 var ContentPrev = function (props, ref) {
-    return (_jsx(TableContextProvider, __assign({}, props, { ref: ref, children: _jsx(Content, {}) })));
+    var _a = props.children, children = _a === void 0 ? _jsx(Content, {}) : _a;
+    return (_jsx(TableContextProvider, __assign({}, props, { ref: ref, children: children })));
 };
 export default React.forwardRef(ContentPrev);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicbe/antd-crud",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "antd crud table",
   "author": "wang quan",
   "private": false,