crud-page-react 0.1.5 → 0.2.1

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 {
@@ -144,7 +150,12 @@ interface ActionSchema {
     danger?: boolean;
     color?: string;
     permission?: ActionPermission;
-    condition?: Record<string, unknown>;
+    /**
+     * 操作按钮显示条件
+     * 支持字段值匹配：{ status: ['active', 'pending'] }
+     * 支持嵌套字段：{ 'user.role': ['admin'] }
+     */
+    condition?: ActionCondition;
     confirm?: {
         title: string;
         content?: string;
@@ -203,11 +214,22 @@ declare function getNestedValue(obj: Record<string, unknown>, path: string): unk
  * 'name'                  → null
  */
 declare function getFieldGroupPrefix(key: string): string | null;
+/**
+ * 操作按钮显示条件配置
+ * 支持两种格式：
+ * 1. 字段值匹配：{ fieldName: [value1, value2] } - 当字段值在数组中时显示
+ * 2. 自定义表达式：{ expression: "record.status === 'active'" } - 使用表达式判断
+ */
+interface ActionCondition {
+    [fieldName: string]: (string | number | boolean)[];
+}
 
 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 { 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';
 
 /* ─── 工具函数 ──────────────────────────────────────── */
 /**
@@ -61,6 +66,35 @@ function getFieldGroupPrefix(key) {
     const idx = key.indexOf('.');
     return idx >= 0 ? key.slice(0, idx) : null;
 }
+/**
+ * 检查操作按钮是否应该显示
+ *
+ * @param condition - 条件配置
+ * @param record - 当前行数据
+ * @returns 是否应该显示该操作
+ *
+ * @example
+ * // 字段值匹配
+ * shouldShowAction({ status: ['active', 'pending'] }, { status: 'active' }) → true
+ * shouldShowAction({ status: ['active', 'pending'] }, { status: 'deleted' }) → false
+ *
+ * // 支持嵌套字段（点分路径）
+ * shouldShowAction({ 'user.role': ['admin'] }, { user: { role: 'admin' } }) → true
+ */
+function shouldShowAction(condition, record) {
+    if (!condition || Object.keys(condition).length === 0) {
+        return true; // 没有条件时默认显示
+    }
+    for (const [fieldPath, allowedValues] of Object.entries(condition)) {
+        // 支持点分路径获取嵌套值
+        const actualValue = getNestedValue(record, fieldPath);
+        // 检查值是否在允许的值列表中
+        if (!allowedValues.includes(actualValue)) {
+            return false;
+        }
+    }
+    return true;
+}
 
 const { RangePicker } = DatePicker;
 /** 解析 FilterConfig */
@@ -248,9 +282,21 @@ function DynamicTable({ schema, data, loading, pagination, onView, onEdit, onDel
         render: (_, record) => {
             var _a;
             const actions = (_a = schema.actions) !== null && _a !== void 0 ? _a : [];
-            // 分离基础操作和自定义操作
-            const basicActions = actions.filter(action => action.type === 'view' || action.type === 'edit' || action.type === 'delete');
-            const customActions = actions.filter(action => action.type === 'custom');
+            // 分离基础操作和自定义操作，并根据 condition 过滤
+            const basicActions = actions.filter(action => {
+                // 检查是否是基础操作类型
+                const isBasicAction = action.type === 'view' || action.type === 'edit' || action.type === 'delete';
+                if (!isBasicAction)
+                    return false;
+                // 检查 condition 条件
+                return shouldShowAction(action.condition, record);
+            });
+            const customActions = actions.filter(action => {
+                if (action.type !== 'custom')
+                    return false;
+                // 检查 condition 条件
+                return shouldShowAction(action.condition, record);
+            });
             // 构建下拉菜单项（仅包含自定义操作）
             const dropdownItems = customActions.map(action => ({
                 key: action.key,
@@ -862,7 +908,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 +1192,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 };