crud-page-react 0.0.6 → 0.1.0

package/README.md

@@ -36,6 +36,8 @@ yarn add crud-page-react
 
 ## 快速开始
 
+### 基础用法
+
 ```tsx
 import React from 'react';
 import { CrudPage } from 'crud-page-react';
@@ -105,6 +107,63 @@ function App() {
 export default App;
 ```
 
+### 扩展 API 配置
+
+v0.0.7+ 版本支持更强大的 API 配置，包括自定义 HTTP 方法、请求头、请求体数据和模板变量：
+
+```tsx
+const advancedSchema: CrudPageSchema = {
+  id: 'orders',
+  title: '订单管理',
+  api: {
+    // 简单字符串配置（向后兼容）
+    list: '/api/orders',
+    
+    // 扩展对象配置
+    create: {
+      url: '/api/orders',
+      method: 'POST',
+      headers: {
+        'X-Request-Source': 'admin-panel'
+      },
+      data: {
+        source: 'web',
+        createdBy: '{{currentUser}}',
+        timestamp: '{{timestamp}}'
+      }
+    },
+    
+    update: {
+      url: '/api/orders/:id',
+      method: 'PUT',
+      data: {
+        updatedBy: '{{currentUser}}',
+        updateTime: '{{timestamp}}'
+      }
+    },
+    
+    delete: {
+      url: '/api/orders/:orderNo',
+      method: 'DELETE',
+      data: {
+        deletedBy: '{{currentUser}}',
+        deleteReason: '{{deleteReason}}',
+        timestamp: '{{timestamp}}'
+      }
+    }
+  },
+  // ... 其他配置
+};
+```
+
+### 支持的扩展配置
+
+- **HTTP 方法**：GET、POST、PUT、PATCH、DELETE
+- **自定义请求头**：添加认证、来源标识等
+- **请求体数据**：固定参数和动态参数
+- **模板变量**：`{{fieldName}}` 格式的动态值替换
+- **URL 占位符**：`:fieldName` 格式的动态 URL 构建
+
 ## 动态 URL 参数
 
 支持在 API 配置中使用任意字段作为 URL 参数：

package/dist/index.d.ts

@@ -161,12 +161,12 @@ interface CrudPageSchema {
     id: string;
     title: string;
     api: {
-        list: string;
-        create?: string;
-        update?: string;
-        delete?: string;
-        detail?: string;
-        [key: string]: string | ActionApiConfig | undefined;
+        list: ActionApiConfig;
+        create?: ActionApiConfig;
+        update?: ActionApiConfig;
+        delete?: ActionApiConfig;
+        detail?: ActionApiConfig;
+        [key: string]: ActionApiConfig | undefined;
     };
     fields: FieldSchema[];
     actions?: ActionSchema[];

package/dist/index.esm.js

@@ -810,13 +810,6 @@ function DynamicForm({ schema, mode, visible, initialValues, onSubmit, onCancel,
 }
 
 const { Title } = Typography;
-/** 动态替换 URL 模板中的占位符 */
-function buildUrl(template, record) {
-    return template.replace(/:(\w+)/g, (match, fieldName) => {
-        const value = record[fieldName];
-        return value !== undefined ? String(value) : match;
-    });
-}
 /** 处理模板数据，支持 {{fieldName}} 格式的变量替换 */
 function processTemplateData(data, record) {
     const result = {};
@@ -887,14 +880,34 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
             initializeData();
             return;
         }
+        const listApiConfig = schema.api.list;
         setLoading(true);
         try {
+            // 构建查询参数
             const query = new URLSearchParams({ page: String(p), pageSize: String(ps) });
             Object.entries(params).forEach(([k, v]) => {
                 if (v !== undefined && v !== null && v !== '')
                     query.set(k, String(v));
             });
-            const json = await request(`${schema.api.list}?${query}`);
+            // 构建请求选项
+            const options = {
+                method: listApiConfig.method || 'GET',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, listApiConfig.headers)
+            };
+            // 如果是 POST 请求，将查询参数放到请求体中
+            let url = listApiConfig.url;
+            if (listApiConfig.method === 'POST') {
+                const queryParams = {};
+                query.forEach((value, key) => {
+                    queryParams[key] = value;
+                });
+                const requestData = Object.assign(Object.assign({}, queryParams), listApiConfig.data);
+                options.body = JSON.stringify(requestData);
+            }
+            else {
+                url = `${url}?${query}`;
+            }
+            const json = await request(url, options);
             const { list, total: tot } = extractListResponse(json);
             setData(list);
             setTotal(tot);
@@ -936,8 +949,25 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
             messageApi.error('删除功能未配置');
             return;
         }
+        const deleteApiConfig = schema.api.delete;
         try {
-            await request(buildUrl(schema.api.delete, record), { method: 'DELETE' });
+            // 构建 URL，动态替换占位符
+            let url = deleteApiConfig.url;
+            url = url.replace(/:(\w+)/g, (match, fieldName) => {
+                const value = record[fieldName];
+                return value !== undefined ? String(value) : match;
+            });
+            // 构建请求选项
+            const options = {
+                method: deleteApiConfig.method || 'DELETE',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, deleteApiConfig.headers)
+            };
+            // 处理请求体数据
+            if (deleteApiConfig.data && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(deleteApiConfig.method || 'DELETE')) {
+                const processedData = processTemplateData(deleteApiConfig.data, record);
+                options.body = JSON.stringify(Object.assign(Object.assign({}, processedData), { recordId: record[rowKey], timestamp: new Date().toISOString() }));
+            }
+            await request(url, options);
             messageApi.success('删除成功');
             fetchList();
         }
@@ -945,7 +975,7 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
             console.error('Delete failed:', error);
             messageApi.error('删除失败，请稍后重试');
         }
-    }, [request, schema.api.delete, fetchList, messageApi]);
+    }, [request, schema.api.delete, fetchList, messageApi, rowKey]);
     // ---------- 操作列点击 ----------
     const handleAction = useCallback(async (action, record) => {
         if (action.type === 'view') {
@@ -1043,11 +1073,21 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
                 messageApi.error('新增功能未配置');
                 return;
             }
+            const createApiConfig = schema.api.create;
             try {
-                await request(schema.api.create, {
-                    method: 'POST',
-                    body: JSON.stringify(values),
-                });
+                // 构建请求选项
+                const options = {
+                    method: createApiConfig.method || 'POST',
+                    headers: Object.assign({ 'Content-Type': 'application/json' }, createApiConfig.headers)
+                };
+                // 处理请求体数据
+                let requestData = Object.assign({}, values);
+                if (createApiConfig.data) {
+                    const processedData = processTemplateData(createApiConfig.data, values);
+                    requestData = Object.assign(Object.assign(Object.assign({}, requestData), processedData), { timestamp: new Date().toISOString() });
+                }
+                options.body = JSON.stringify(requestData);
+                await request(createApiConfig.url, options);
                 messageApi.success('新增成功');
                 setModalState({ open: false, mode: 'create' });
                 fetchList();
@@ -1062,11 +1102,27 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
                 messageApi.error('编辑功能未配置');
                 return;
             }
+            const updateApiConfig = schema.api.update;
             try {
-                await request(buildUrl(schema.api.update, values), {
-                    method: 'PUT',
-                    body: JSON.stringify(values),
+                // 构建 URL，动态替换占位符
+                let url = updateApiConfig.url;
+                url = url.replace(/:(\w+)/g, (match, fieldName) => {
+                    const value = values[fieldName];
+                    return value !== undefined ? String(value) : match;
                 });
+                // 构建请求选项
+                const options = {
+                    method: updateApiConfig.method || 'PUT',
+                    headers: Object.assign({ 'Content-Type': 'application/json' }, updateApiConfig.headers)
+                };
+                // 处理请求体数据
+                let requestData = Object.assign({}, values);
+                if (updateApiConfig.data) {
+                    const processedData = processTemplateData(updateApiConfig.data, values);
+                    requestData = Object.assign(Object.assign(Object.assign({}, requestData), processedData), { timestamp: new Date().toISOString() });
+                }
+                options.body = JSON.stringify(requestData);
+                await request(url, options);
                 messageApi.success('编辑成功');
                 setModalState({ open: false, mode: 'create' });
                 fetchList();