crud-page-react 0.1.4 → 0.2.0

package/README.md

@@ -66,6 +66,39 @@ function App() {
 }
 ```
 
+## 国际化支持
+
+组件库支持 Ant Design 的国际化配置，默认使用中文。
+
+```tsx
+import React from 'react';
+import { CrudPage, enUS, zhCN } from 'crud-page-react';
+
+// 使用英文
+function EnglishApp() {
+  return <CrudPage schema={schema} locale={enUS} />;
+}
+
+// 使用中文（默认）
+function ChineseApp() {
+  return <CrudPage schema={schema} locale={zhCN} />;
+}
+
+// 不指定 locale 时默认使用中文
+function DefaultApp() {
+  return <CrudPage schema={schema} />;
+}
+```
+
+### 支持的语言
+
+- `zhCN` - 简体中文（默认）
+- `enUS` - 英文
+- `jaJP` - 日文
+- `koKR` - 韩文
+
+更多语言包请参考 [Ant Design 国际化文档](https://ant.design/docs/react/i18n-cn)。
+
 ## 新特性：操作按钮分组 (v0.1.3)
 
 自定义操作现在会自动折叠到"其它操作"下拉菜单中，保持界面整洁：

package/dist/components/CrudPage.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import type { Locale } from 'antd/es/locale';
 import type { CrudPageSchema, ApiRequest } from '../types/schema';
 interface CrudPageProps {
     schema: CrudPageSchema;
     initialData?: Record<string, unknown>[];
     apiRequest?: ApiRequest;
+    /** Ant Design 语言配置，默认为中文 */
+    locale?: Locale;
 }
 declare const CrudPage: React.FC<CrudPageProps>;
 export default CrudPage;

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
+import { Locale } from 'antd/es/locale';
+export { Locale } from 'antd/es/locale';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Rule } from 'antd/es/form';
+export { default as zhCN } from 'antd/locale/zh_CN';
+export { default as enUS } from 'antd/locale/en_US';
+export { default as jaJP } from 'antd/locale/ja_JP';
+export { default as koKR } from 'antd/locale/ko_KR';
 
 /** API 请求函数类型 */
 interface ApiRequest {
@@ -208,6 +214,8 @@ interface CrudPageProps {
     schema: CrudPageSchema;
     initialData?: Record<string, unknown>[];
     apiRequest?: ApiRequest;
+    /** Ant Design 语言配置，默认为中文 */
+    locale?: Locale;
 }
 declare const CrudPage: React.FC<CrudPageProps>;
 

package/dist/index.esm.js

@@ -1,9 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { DatePicker, Form, Row, Col, Space, Button, Input, Switch, Radio, Select, InputNumber, Tooltip, Popconfirm, Dropdown, Table, message, Tag, Modal, Divider, Card, Checkbox, Typography } from 'antd';
-import { SearchOutlined, ReloadOutlined, EyeOutlined, EditOutlined, DeleteOutlined, MoreOutlined, CopyOutlined, FormOutlined, CodeOutlined, PlusOutlined } from '@ant-design/icons';
+import { DatePicker, Form, Row, Col, Space, Button, Input, Switch, Radio, Select, InputNumber, Tooltip, Popconfirm, Dropdown, Table, message, Tag, Modal, Divider, Card, Checkbox, Typography, ConfigProvider } from 'antd';
+import { SearchOutlined, ReloadOutlined, EyeOutlined, EditOutlined, DeleteOutlined, CopyOutlined, MoreOutlined, FormOutlined, CodeOutlined, PlusOutlined } from '@ant-design/icons';
+import zhCN from 'antd/locale/zh_CN';
+export { default as zhCN } from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+export { default as enUS } from 'antd/locale/en_US';
+export { default as jaJP } from 'antd/locale/ja_JP';
+export { default as koKR } from 'antd/locale/ko_KR';
 
 /* ─── 工具函数 ──────────────────────────────────────── */
 /**
@@ -270,7 +275,7 @@ function DynamicTable({ schema, data, loading, pagination, onView, onEdit, onDel
                             return (jsx(Popconfirm, { title: (_b = (_a = action.confirm) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '确定删除？', description: (_c = action.confirm) === null || _c === void 0 ? void 0 : _c.content, onConfirm: () => onDelete(record), okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88", okButtonProps: { danger: true }, children: jsx(Tooltip, { title: action.label, children: jsx(Button, { type: "link", size: "small", danger: true, icon: jsx(DeleteOutlined, {}) }) }) }, action.key));
                         }
                         return null;
-                    }), customActions.length > 0 && (jsx(Dropdown, { menu: { items: dropdownItems }, trigger: ['click'], placement: "bottomRight", children: jsx(Tooltip, { title: "\u5176\u5B83\u64CD\u4F5C", children: jsx(Button, { type: "link", size: "small", icon: jsx(MoreOutlined, {}) }) }) })), jsx(Tooltip, { title: "\u590D\u5236 JSON", children: jsx(Button, { type: "link", size: "small", icon: jsx(CopyOutlined, {}), onClick: () => copyJson(record) }) })] }));
+                    }), jsx(Tooltip, { title: "\u590D\u5236 JSON", children: jsx(Button, { type: "link", size: "small", icon: jsx(CopyOutlined, {}), onClick: () => copyJson(record) }) }), customActions.length > 0 && (jsx(Dropdown, { menu: { items: dropdownItems }, trigger: ['click'], placement: "bottomRight", children: jsx(Tooltip, { title: "\u5176\u5B83\u64CD\u4F5C", children: jsx(Button, { type: "link", size: "small", icon: jsx(MoreOutlined, {}) }) }) }))] }));
         },
     });
     return (jsx(Table, { rowKey: (_a = schema.rowKey) !== null && _a !== void 0 ? _a : 'id', columns: columns, dataSource: data, loading: loading, scroll: { x: 'max-content' }, pagination: {
@@ -862,7 +867,7 @@ function extractListResponse(json) {
     }
     return { list: [], total: 0 };
 }
-const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) => {
+const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest, locale = zhCN }) => {
     var _a;
     const rowKey = schema.rowKey || 'id';
     // 使用传入的apiRequest或默认的
@@ -1146,17 +1151,17 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     }, [
         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,
-                    pageSize,
-                    total,
-                    onChange: handlePageChange,
-                }, onView: (record) => handleAction({ key: 'view', label: '查看', type: 'view' }, record), onEdit: (record) => handleAction({ key: 'edit', label: '编辑', type: 'edit' }, record), onDelete: (record) => handleDelete(record), onCustomAction: (actionKey, record) => {
-                    var _a;
-                    const action = (_a = schema.actions) === null || _a === void 0 ? void 0 : _a.find(a => a.key === actionKey);
-                    if (action)
-                        handleAction(action, record);
-                } }), jsx(DynamicForm, { schema: schema, visible: modalState.open, mode: modalState.mode, initialValues: modalState.record, onSubmit: handleFormOk, onCancel: () => setModalState({ open: false, mode: 'create' }) })] }));
+    return (jsx(ConfigProvider, { locale: locale, children: 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,
+                        pageSize,
+                        total,
+                        onChange: handlePageChange,
+                    }, onView: (record) => handleAction({ key: 'view', label: '查看', type: 'view' }, record), onEdit: (record) => handleAction({ key: 'edit', label: '编辑', type: 'edit' }, record), onDelete: (record) => handleDelete(record), onCustomAction: (actionKey, record) => {
+                        var _a;
+                        const action = (_a = schema.actions) === null || _a === void 0 ? void 0 : _a.find(a => a.key === actionKey);
+                        if (action)
+                            handleAction(action, record);
+                    } }), jsx(DynamicForm, { schema: schema, visible: modalState.open, mode: modalState.mode, initialValues: modalState.record, onSubmit: handleFormOk, onCancel: () => setModalState({ open: false, mode: 'create' }) })] }) }));
 };
 
 export { BUILTIN_RULES, CrudPage, DynamicFilter, DynamicForm, DynamicTable, defaultWidgetForType, getAllRules, getEffectiveWidget, getFieldGroupPrefix, getNestedValue, getRuleByKey, keysToAntdRules, loadCustomRules, ruleConfigToAntdRule, saveCustomRules };