crud-page-react 0.0.1

package/dist/types/schema.d.ts

@@ -0,0 +1,191 @@
+/** API 请求函数类型 */
+export interface ApiRequest {
+    <T = unknown>(url: string, options?: RequestInit): Promise<T>;
+}
+/**
+ * 数据类型：描述字段存储的值类型。
+ *
+ * 嵌套对象不再作为独立类型，而是通过 key 的点分路径（dot-path）表达，
+ * 例如 `emergencyContact.name`、`emergencyContact.phone`。
+ * 框架会自动将 Form 数据写入/读出对应的嵌套路径。
+ */
+export type DataType = 'string' | 'number' | 'boolean' | 'datetime' | 'date' | 'array' | 'objectArray';
+/** UI 组件类型：描述字段渲染使用的组件 */
+export type WidgetType = 'input' | 'textarea' | 'inputNumber' | 'select' | 'multiselect' | 'radio' | 'checkbox' | 'switch' | 'datePicker' | 'rangePicker' | 'timePicker' | 'editableTable' | 'jsonInput';
+/** 兼容旧版 —— 不再推荐直接使用 */
+export type FieldType = DataType;
+export interface SelectOption {
+    label: string;
+    value: string | number | boolean;
+    color?: string;
+}
+/**
+ * 筛选项配置 —— 仅放筛选独有配置。
+ * options / placeholder / dateFormat 统一在 FieldSchema.config 里配置。
+ */
+export interface FilterConfig {
+    /** 覆盖字段级 widget，指定筛选组件类型 */
+    widget?: WidgetType;
+    /** inputNumber 时可开启数字范围（min/max 两个输入框） */
+    range?: boolean;
+    defaultValue?: unknown;
+}
+/** 表格列配置 */
+export interface TableColumnConfig {
+    width?: number;
+    fixed?: 'left' | 'right';
+    sortable?: boolean;
+    ellipsis?: boolean;
+}
+/**
+ * 表单字段配置 —— 仅放表单独有配置。
+ * options / placeholder / dateFormat / rows 统一在 FieldSchema.config 里配置。
+ */
+export interface FormFieldConfig {
+    /** 覆盖字段级 widget，指定表单组件类型 */
+    widget?: WidgetType;
+    required?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/**
+ * 字段级共用组件配置。
+ * filter 和 form 均可读取，无需在两处重复填写。
+ */
+export interface FieldConfig {
+    /** 下拉/多选/单选等组件的选项列表 */
+    options?: SelectOption[];
+    /** 输入框、选择框等的占位提示文字 */
+    placeholder?: string;
+    /** 日期/时间组件的显示格式，如 'YYYY-MM-DD' */
+    dateFormat?: string;
+    /** textarea / jsonInput 的行数 */
+    rows?: number;
+}
+/**
+ * 对象数组（objectArray）中每个 item 的字段定义。
+ * 故意保持简单：不支持嵌套 objectArray，不支持 dot-path key。
+ */
+export interface ArrayItemField {
+    /** item 对象的属性名，不使用点分路径 */
+    key: string;
+    label: string;
+    /** 不允许嵌套数组 */
+    type: Exclude<DataType, 'array' | 'objectArray'>;
+    /** 不允许嵌套 editableTable */
+    widget?: Exclude<WidgetType, 'editableTable'>;
+    config?: Pick<FieldConfig, 'options' | 'placeholder' | 'dateFormat'>;
+    required?: boolean;
+    /** 列宽（px） */
+    width?: number;
+}
+/**
+ * 字段定义。
+ *
+ * ### 点分路径（dot-path）规则
+ * `key` 支持点分路径表达嵌套结构，例如：
+ * - `emergencyContact.name`
+ * - `emergencyContact.phone`
+ *
+ * Form 层会自动将值写入 / 读取对应的嵌套对象属性；
+ * 具有相同前缀的字段在表单中会被归为同一视觉分组，并显示分组标题。
+ */
+export interface FieldSchema {
+    key: string;
+    label: string;
+    /** 数据类型（值的类型） */
+    type: DataType;
+    /**
+     * 默认 UI 组件类型；可被 filter / form 级别的 widget 覆盖。
+     * 不填时由 defaultWidgetForType 推导。
+     */
+    widget?: WidgetType;
+    filter?: boolean | FilterConfig;
+    table?: boolean | TableColumnConfig;
+    form?: boolean | FormFieldConfig;
+    /**
+     * 字段级共用组件配置（options、placeholder、dateFormat 等）。
+     * filter 和 form 均从这里读取，不再重复配置。
+     */
+    config?: FieldConfig;
+    render?: string;
+    /**
+     * 对象数组子字段定义，仅 type='objectArray' 时生效。
+     * 配置后 widget 默认推导为 'editableTable'。
+     */
+    itemFields?: ArrayItemField[];
+    /**
+     * 校验规则 key 数组，引用 validationRules.ts 中内置或自定义规则的 key。
+     * 例如 `rules: ['phone_cn', 'max_len_50']`
+     * 注意：required 规则通过 form.required 单独控制，无需在此重复。
+     */
+    rules?: string[];
+}
+export type ActionType = 'edit' | 'delete' | 'view' | 'custom';
+export interface ActionPermission {
+    role?: string[];
+    condition?: string;
+}
+export interface ActionSchema {
+    key: string;
+    label: string;
+    type: ActionType;
+    icon?: string;
+    danger?: boolean;
+    permission?: ActionPermission;
+    confirm?: {
+        title: string;
+        content?: string;
+    };
+}
+export interface PaginationConfig {
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showTotal?: boolean;
+}
+export interface CrudPageSchema {
+    id: string;
+    title: string;
+    api: {
+        list: string;
+        create?: string;
+        update?: string;
+        delete?: string;
+        detail?: string;
+    };
+    fields: FieldSchema[];
+    actions?: ActionSchema[];
+    pagination?: PaginationConfig;
+    rowKey?: string;
+    createButtonLabel?: string;
+}
+/**
+ * 根据数据类型推导默认 UI 组件
+ *
+ * string      → input
+ * number      → inputNumber
+ * boolean     → switch
+ * date        → datePicker
+ * datetime    → datePicker
+ * array       → multiselect
+ * objectArray → editableTable
+ */
+export declare function defaultWidgetForType(type: DataType): WidgetType;
+/** 获取实际生效的组件类型（context.widget > field.widget > type 推导） */
+export declare function getEffectiveWidget(field: FieldSchema, config?: FilterConfig | FormFieldConfig): WidgetType;
+/**
+ * 从嵌套对象按点分路径取值
+ *
+ * getNestedValue({ a: { b: 1 } }, 'a.b') → 1
+ * getNestedValue({ x: [1, 2] }, 'x')      → [1, 2]
+ */
+export declare function getNestedValue(obj: Record<string, unknown>, path: string): unknown;
+/**
+ * 从点分路径 key 中提取分组前缀（第一个 segment）。
+ * 无前缀的顶层字段返回 null。
+ *
+ * 'emergencyContact.name' → 'emergencyContact'
+ * 'name'                  → null
+ */
+export declare function getFieldGroupPrefix(key: string): string | null;

package/dist/types/validationRules.d.ts

@@ -0,0 +1,32 @@
+import type { Rule } from 'antd/es/form';
+/** 校验规则配置（内置 + 自定义均使用此结构） */
+export interface ValidationRuleConfig {
+    key: string;
+    label: string;
+    description?: string;
+    message: string;
+    /** 正则字符串（将转为 RegExp） */
+    pattern?: string;
+    /** 最小值（number）或最小长度（string） */
+    min?: number;
+    /** 最大值（number）或最大长度（string） */
+    max?: number;
+    /** antd 内置类型校验 */
+    type?: 'string' | 'number' | 'email' | 'url' | 'integer';
+    /** 是否不允许纯空白字符 */
+    whitespace?: boolean;
+    /** 是否内置（内置规则不可删除） */
+    builtin?: boolean;
+}
+/** 内置规则集 */
+export declare const BUILTIN_RULES: ValidationRuleConfig[];
+export declare function loadCustomRules(): ValidationRuleConfig[];
+export declare function saveCustomRules(rules: ValidationRuleConfig[]): void;
+/** 获取所有规则（内置 + 自定义） */
+export declare function getAllRules(): ValidationRuleConfig[];
+/** 根据 key 查找规则 */
+export declare function getRuleByKey(key: string): ValidationRuleConfig | undefined;
+/** 将规则配置转为 Ant Design Form Rule */
+export declare function ruleConfigToAntdRule(config: ValidationRuleConfig): Rule;
+/** 将一组规则 key 转为 Ant Design Form Rules 数组 */
+export declare function keysToAntdRules(keys: string[]): Rule[];

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "crud-page-react",
+  "version": "0.0.1",
+  "description": "一个基于 React + Ant Design 的动态 CRUD 组件库，支持通过 JSON Schema 配置生成完整的增删改查界面",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npx rollup -c",
+    "dev": "npx rollup -c -w",
+    "prepare": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "crud",
+    "dynamic",
+    "form",
+    "table",
+    "antd",
+    "typescript",
+    "json-schema"
+  ],
+  "author": "ffhopever5@gmail.com",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ffhope/crud-page-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ffhope/crud-page-react/issues"
+  },
+  "homepage": "https://github.com/ffhope/crud-page-react#readme",
+  "peerDependencies": {
+    "antd": ">=5.0.0",
+    "dayjs": ">=1.11.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "rollup": "^4.9.2",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.6"
+  }
+}