crud-page-react 0.0.4 → 0.0.6

package/README.md

@@ -9,7 +9,9 @@
 - 🔍 **智能筛选** - 自动生成筛选器，支持范围查询
 - 📊 **灵活表格** - 可配置列宽、排序、固定列等
 - 🎨 **Raw JSON 模式** - 支持原始 JSON 编辑和查看
-- 🔌 **自定义 API** - 支持自定义 API 请求函数
+- 🔌 **自定义 API** - 支持自定义 API 请求函数和动态 URL 参数
+- 🌐 **动态 URL 参数** - 支持任意字段作为 URL 参数 (`:id`, `:orderNo`, `:customerName` 等)
+- ⚡ **自定义操作** - 支持配置自定义按钮操作和 API 调用
 - 📱 **响应式设计** - 适配移动端和桌面端
 - 🎯 **TypeScript 支持** - 完整的类型定义
 
@@ -103,6 +105,53 @@ function App() {
 export default App;
 ```
 
+## 动态 URL 参数
+
+支持在 API 配置中使用任意字段作为 URL 参数：
+
+```tsx
+const schema = {
+  api: {
+    list: '/api/orders',
+    create: '/api/orders',
+    update: '/api/orders/:id',        // 使用 id 字段
+    delete: '/api/orders/:orderNo',   // 使用 orderNo 字段
+    detail: '/api/orders/:id',
+  },
+  actions: [
+    {
+      key: 'track',
+      label: '物流跟踪',
+      type: 'custom',
+      api: {
+        url: '/api/tracking/:orderNo',  // 使用 orderNo 字段
+        method: 'GET',
+        responseType: 'json'
+      }
+    },
+    {
+      key: 'notify',
+      label: '通知客户',
+      type: 'custom', 
+      api: {
+        url: '/api/notify/:customerName', // 使用 customerName 字段
+        method: 'POST',
+        data: {
+          message: '您的订单状态已更新'
+        }
+      }
+    }
+  ],
+  // ... 其他配置
+};
+```
+
+### 支持的占位符格式
+- `:id` → 记录中的 `id` 字段值
+- `:orderNo` → 记录中的 `orderNo` 字段值  
+- `:customerName` → 记录中的 `customerName` 字段值
+- 任意 `:fieldName` → 记录中的 `fieldName` 字段值
+
 ## 自定义 API 请求
 
 ```tsx

package/dist/index.d.ts

@@ -150,6 +150,7 @@ interface ActionSchema {
         content?: string;
     };
     api?: ActionApiConfig;
+    apiKey?: string;
 }
 interface PaginationConfig {
     pageSize?: number;
@@ -165,6 +166,7 @@ interface CrudPageSchema {
         update?: string;
         delete?: string;
         detail?: string;
+        [key: string]: string | ActionApiConfig | undefined;
     };
     fields: FieldSchema[];
     actions?: ActionSchema[];

package/dist/index.esm.js

@@ -817,6 +817,23 @@ function buildUrl(template, record) {
         return value !== undefined ? String(value) : match;
     });
 }
+/** 处理模板数据，支持 {{fieldName}} 格式的变量替换 */
+function processTemplateData(data, record) {
+    const result = {};
+    for (const [key, value] of Object.entries(data)) {
+        if (typeof value === 'string' && value.includes('{{') && value.includes('}}')) {
+            // 替换模板变量 {{fieldName}}
+            result[key] = value.replace(/\{\{(\w+)\}\}/g, (match, fieldName) => {
+                const fieldValue = record[fieldName];
+                return fieldValue !== undefined ? String(fieldValue) : match;
+            });
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
 /** 通用请求封装 */
 async function apiRequest(url, options) {
     const res = await fetch(url, Object.assign({ headers: { 'Content-Type': 'application/json' } }, options));
@@ -846,8 +863,8 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     const rowKey = schema.rowKey || 'id';
     // 使用传入的apiRequest或默认的
     const request = customApiRequest || apiRequest;
-    // 本地兜底数据（API 失败时使用）
-    const localDataRef = useRef(initialData);
+    // 初始数据引用
+    const initialDataRef = useRef(initialData);
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(false);
     const [total, setTotal] = useState(0);
@@ -856,33 +873,20 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     const [pageSize, setPageSize] = useState(((_a = schema.pagination) === null || _a === void 0 ? void 0 : _a.pageSize) || 10);
     const [modalState, setModalState] = useState({ open: false, mode: 'create' });
     const [messageApi, contextHolder] = message.useMessage();
-    // ---------- 本地过滤（API 失败时兜底） ----------
-    const localFilter = useCallback((params, p, ps) => {
-        const filtered = localDataRef.current.filter(row => {
-            return Object.entries(params).every(([key, val]) => {
-                if (val === undefined || val === null || val === '')
-                    return true;
-                if (key.endsWith('_min'))
-                    return Number(row[key.slice(0, -4)]) >= Number(val);
-                if (key.endsWith('_max'))
-                    return Number(row[key.slice(0, -4)]) <= Number(val);
-                if (key.endsWith('_start') || key.endsWith('_end'))
-                    return true;
-                const rowVal = row[key];
-                if (Array.isArray(rowVal)) {
-                    return Array.isArray(val) ? val.some(v => rowVal.includes(v)) : rowVal.includes(val);
-                }
-                if (typeof val === 'string')
-                    return String(rowVal).toLowerCase().includes(val.toLowerCase());
-                return rowVal === val;
-            });
-        });
-        const start = (p - 1) * ps;
-        setData(filtered.slice(start, start + ps));
-        setTotal(filtered.length);
+    // ---------- 初始化数据 ----------
+    const initializeData = useCallback(() => {
+        if (initialDataRef.current.length > 0) {
+            setData(initialDataRef.current);
+            setTotal(initialDataRef.current.length);
+        }
     }, []);
     // ---------- 获取列表 ----------
     const fetchList = useCallback(async (params = filterParams, p = page, ps = pageSize) => {
+        if (!schema.api.list) {
+            // 没有配置 API，使用初始数据
+            initializeData();
+            return;
+        }
         setLoading(true);
         try {
             const query = new URLSearchParams({ page: String(p), pageSize: String(ps) });
@@ -895,14 +899,22 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
             setData(list);
             setTotal(tot);
         }
-        catch (_a) {
-            // API 不可用 → 本地演示模式
-            localFilter(params, p, ps);
+        catch (error) {
+            console.error('Failed to fetch list:', error);
+            messageApi.error('获取数据失败，请检查网络连接或联系管理员');
+            // 如果有初始数据，显示初始数据
+            if (initialDataRef.current.length > 0) {
+                initializeData();
+            }
+            else {
+                setData([]);
+                setTotal(0);
+            }
         }
         finally {
             setLoading(false);
         }
-    }, [request, schema.api.list, filterParams, page, pageSize, localFilter]);
+    }, [request, schema.api.list, filterParams, page, pageSize, initializeData, messageApi]);
     // 初始加载 & 参数变化时重新请求
     useEffect(() => {
         fetchList(filterParams, page, pageSize);
@@ -920,22 +932,20 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     }, []);
     // ---------- 删除 ----------
     const handleDelete = useCallback(async (record) => {
-        const id = record[rowKey];
-        if (schema.api.delete) {
-            try {
-                await request(buildUrl(schema.api.delete, record), { method: 'DELETE' });
-                messageApi.success('删除成功');
-                fetchList();
-                return;
-            }
-            catch (_a) {
-                // 降级本地
-            }
+        if (!schema.api.delete) {
+            messageApi.error('删除功能未配置');
+            return;
+        }
+        try {
+            await request(buildUrl(schema.api.delete, record), { method: 'DELETE' });
+            messageApi.success('删除成功');
+            fetchList();
+        }
+        catch (error) {
+            console.error('Delete failed:', error);
+            messageApi.error('删除失败，请稍后重试');
         }
-        localDataRef.current = localDataRef.current.filter(r => r[rowKey] !== id);
-        localFilter(filterParams, page, pageSize);
-        messageApi.success('删除成功（演示模式）');
-    }, [request, schema.api.delete, rowKey, fetchList, localFilter, filterParams, page, pageSize, messageApi]);
+    }, [request, schema.api.delete, fetchList, messageApi]);
     // ---------- 操作列点击 ----------
     const handleAction = useCallback(async (action, record) => {
         if (action.type === 'view') {
@@ -947,31 +957,55 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
         else if (action.type === 'delete') {
             handleDelete(record);
         }
-        else if (action.type === 'custom' && action.api) {
+        else if (action.type === 'custom') {
             // 处理自定义 action 的 API 调用
+            let apiConfig;
+            // 优先使用 apiKey 引用统一配置，向后兼容 api 直接配置
+            if (action.apiKey) {
+                const apiDef = schema.api[action.apiKey];
+                if (typeof apiDef === 'string') {
+                    // 简单字符串 URL 配置
+                    apiConfig = {
+                        url: apiDef,
+                        method: 'GET',
+                        responseType: 'json'
+                    };
+                }
+                else if (apiDef && typeof apiDef === 'object') {
+                    // 完整的 API 配置对象
+                    apiConfig = apiDef;
+                }
+            }
+            else if (action.api) {
+                // 向后兼容：使用 action.api 配置
+                apiConfig = action.api;
+            }
+            if (!apiConfig) {
+                messageApi.error(`${action.label}未配置 API`);
+                return;
+            }
             try {
                 // 构建 URL，动态替换占位符
-                let url = action.api.url;
-                // 替换所有 :fieldName 格式的占位符
+                let url = apiConfig.url;
                 url = url.replace(/:(\w+)/g, (match, fieldName) => {
                     const value = record[fieldName];
                     return value !== undefined ? String(value) : match;
                 });
                 // 构建请求选项
                 const options = {
-                    method: action.api.method,
-                    headers: Object.assign({ 'Content-Type': 'application/json' }, action.api.headers)
+                    method: apiConfig.method || 'GET',
+                    headers: Object.assign({ 'Content-Type': 'application/json' }, apiConfig.headers)
                 };
-                // 添加请求体数据
-                if (action.api.data && ['POST', 'PUT', 'PATCH'].includes(action.api.method)) {
-                    options.body = JSON.stringify(Object.assign(Object.assign({}, action.api.data), { 
-                        // 可以添加动态数据
-                        recordId: record[rowKey], timestamp: new Date().toISOString() }));
+                // 处理请求体数据
+                if (apiConfig.data && ['POST', 'PUT', 'PATCH'].includes(apiConfig.method || 'GET')) {
+                    // 支持模板变量替换
+                    const processedData = processTemplateData(apiConfig.data, record);
+                    options.body = JSON.stringify(Object.assign(Object.assign({}, processedData), { recordId: record[rowKey], timestamp: new Date().toISOString() }));
                 }
                 // 调用 API
                 const response = await request(url, options);
                 // 处理特殊响应类型
-                if (action.api.responseType === 'blob') {
+                if (apiConfig.responseType === 'blob') {
                     // 处理文件下载
                     const blob = new Blob([response]);
                     const downloadUrl = URL.createObjectURL(blob);
@@ -1005,52 +1039,45 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     const handleFormOk = useCallback(async (values) => {
         const isCreate = modalState.mode === 'create';
         if (isCreate) {
-            if (schema.api.create) {
-                try {
-                    await request(schema.api.create, {
-                        method: 'POST',
-                        body: JSON.stringify(values),
-                    });
-                    messageApi.success('新增成功');
-                    setModalState({ open: false, mode: 'create' });
-                    fetchList();
-                    return;
-                }
-                catch (_a) {
-                    // 降级本地
-                }
+            if (!schema.api.create) {
+                messageApi.error('新增功能未配置');
+                return;
+            }
+            try {
+                await request(schema.api.create, {
+                    method: 'POST',
+                    body: JSON.stringify(values),
+                });
+                messageApi.success('新增成功');
+                setModalState({ open: false, mode: 'create' });
+                fetchList();
+            }
+            catch (error) {
+                console.error('Create failed:', error);
+                messageApi.error('新增失败，请稍后重试');
             }
-            const newRecord = Object.assign({ [rowKey]: `local-${Date.now()}` }, values);
-            localDataRef.current = [newRecord, ...localDataRef.current];
-            localFilter(filterParams, 1, pageSize);
-            setPage(1);
-            messageApi.success('新增成功（演示模式）');
         }
         else {
-            const id = values[rowKey];
-            if (schema.api.update) {
-                try {
-                    await request(buildUrl(schema.api.update, values), {
-                        method: 'PUT',
-                        body: JSON.stringify(values),
-                    });
-                    messageApi.success('编辑成功');
-                    setModalState({ open: false, mode: 'create' });
-                    fetchList();
-                    return;
-                }
-                catch (_b) {
-                    // 降级本地
-                }
+            if (!schema.api.update) {
+                messageApi.error('编辑功能未配置');
+                return;
+            }
+            try {
+                await request(buildUrl(schema.api.update, values), {
+                    method: 'PUT',
+                    body: JSON.stringify(values),
+                });
+                messageApi.success('编辑成功');
+                setModalState({ open: false, mode: 'create' });
+                fetchList();
+            }
+            catch (error) {
+                console.error('Update failed:', error);
+                messageApi.error('编辑失败，请稍后重试');
             }
-            localDataRef.current = localDataRef.current.map(r => r[rowKey] === id ? Object.assign(Object.assign({}, r), values) : r);
-            localFilter(filterParams, page, pageSize);
-            messageApi.success('编辑成功（演示模式）');
         }
-        setModalState({ open: false, mode: 'create' });
     }, [
-        request, modalState.mode, schema.api, rowKey,
-        fetchList, localFilter, filterParams, page, pageSize, messageApi,
+        request, modalState.mode, schema.api, fetchList, messageApi,
     ]);
     return (jsxs("div", { style: { padding: 24, background: '#f5f6fa', minHeight: '100vh' }, children: [contextHolder, jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }, children: [jsx(Title, { level: 4, style: { margin: 0 }, children: schema.title }), schema.api.create && (jsx(Button, { type: "primary", icon: jsx(PlusOutlined, {}), onClick: () => setModalState({ open: true, mode: 'create', record: undefined }), children: schema.createButtonLabel || '新增' }))] }), jsx(DynamicFilter, { schema: schema, onSearch: handleSearch, onReset: () => handleSearch({}) }), jsx(DynamicTable, { schema: schema, data: data, loading: loading, pagination: {
                     current: page,