add redux

xlorne · xlorne · commit c6a238761223 · 2026-03-25T09:18:44.000+08:00
diff --git a/apps/app-mobile/src/config/form-register.tsx b/apps/app-mobile/src/config/form-register.tsx
@@ -1,10 +1,10 @@
-import {useFormRegister} from "@coding-form/form-view";
+import {registerFormItems} from "@coding-form/form-view";
 import {FormString} from "@/components/string";
 import {Form} from "antd-mobile";
 
 export const registerForms = () => {
 
-    useFormRegister(Form,[
+    registerFormItems(Form,[
         {
             type: 'string',
             componentType:FormString
diff --git a/apps/app-mobile/src/pages/home.tsx b/apps/app-mobile/src/pages/home.tsx
@@ -31,7 +31,7 @@ const HomePage = () => {
                 form={form}
                 validators={[
                     {
-                        code:'name',
+                        fieldCode:'name',
                         validator:(value,instance)=>{
                             if(value){
                                 return true;
@@ -66,15 +66,27 @@ const HomePage = () => {
 
                 <Button
                     onClick={() => {
-                        form.hiddenFields(['name']);
+                        form.hiddenFields(true,['name']);
                     }}
-                >hidden</Button>
+                >enable hidden</Button>
 
                 <Button
                     onClick={() => {
-                        form.showFields(['name']);
+                        form.hiddenFields(false,['name']);
                     }}
-                >show</Button>
+                >disable hidden</Button>
+
+                <Button
+                    onClick={() => {
+                        form.requiredFields(true,['name']);
+                    }}
+                >enable required</Button>
+
+                <Button
+                    onClick={() => {
+                        form.requiredFields(false,['name']);
+                    }}
+                >disable required</Button>
             </Space>
         </div>
     );
diff --git a/apps/app-pc/src/config/form-register.tsx b/apps/app-pc/src/config/form-register.tsx
@@ -1,10 +1,10 @@
-import {useFormRegister} from "@coding-form/form-view";
+import {registerFormItems} from "@coding-form/form-view";
 import {FormString} from "@/components/string";
 import {Form} from "antd";
 
 export const registerForms = () => {
 
-    useFormRegister(Form,[
+    registerFormItems(Form,[
         {
             type: 'string',
             componentType:FormString
diff --git a/apps/app-pc/src/pages/home.tsx b/apps/app-pc/src/pages/home.tsx
@@ -30,7 +30,7 @@ const HomePage = () => {
                 form={form}
                 validators={[
                     {
-                        code:'name',
+                        fieldCode:'name',
                         validator:(value,instance)=>{
                             if(value){
                                 return true;
@@ -65,15 +65,27 @@ const HomePage = () => {
 
                 <Button
                     onClick={() => {
-                        form.hiddenFields(['name']);
+                        form.hiddenFields(true,['name']);
                     }}
-                >hidden</Button>
+                >enable hidden</Button>
 
                 <Button
                     onClick={() => {
-                        form.showFields(['name']);
+                        form.hiddenFields(false,['name']);
                     }}
-                >show</Button>
+                >disable hidden</Button>
+
+                <Button
+                    onClick={() => {
+                        form.requiredFields(true,['name']);
+                    }}
+                >enable required</Button>
+
+                <Button
+                    onClick={() => {
+                        form.requiredFields(false,['name']);
+                    }}
+                >disable required</Button>
             </Space>
         </div>
     );
diff --git a/packages/form-types/src/form/instance.ts b/packages/form-types/src/form/instance.ts
@@ -1,14 +1,24 @@
 export type NamePath = string | number | boolean | (string | number | boolean)[];
 
-
+/** 表单实例对象 **/
 export interface FormInstance {
+    /** 获取表单字段 **/
     getFieldValue: (name: NamePath) => any;
+    /** 获取表单值 **/
     getFieldsValue: () => any;
+    /** 重新赋值 **/
     resetFields: (nameList?: NamePath[]) => void;
+    /** 设置表单值 **/
     setFieldsValue: (values: any) => void;
+    /** 设置表单值 **/
     setFieldValue: (name: NamePath, value: any) => void;
+    /** 提交表单 **/
     submit: () => void;
+    /** 校验字段 **/
     validateFields(nameList?: NamePath[]): Promise<any>;
-    hiddenFields: (nameList?: NamePath[]) => void;
-    showFields: (nameList?: NamePath[]) => void;
+    /** 隐藏字段 **/
+    hiddenFields: (hidden:boolean,nameList?: NamePath[]) => void;
+    /** 必填字段 **/
+    requiredFields: (required:boolean,nameList?: NamePath[]) => void;
+
 }
diff --git a/packages/form-types/src/form/validate.ts b/packages/form-types/src/form/validate.ts
@@ -1,10 +1,18 @@
 import {FormInstance} from "@/form/instance";
 
 
+/**
+ * 字段校验器
+ */
 export interface FormFieldValidator {
 
-    code: string;
+    /** 表单名称 **/
+    formCode?: string;
 
-    validator:  ( value: any, instance: FormInstance) => string | true;
+    /** 字段名 **/
+    fieldCode: string;
+
+    /** 校验函数 **/
+    validator: (value: any, instance: FormInstance) => string | true;
 
 }
diff --git a/packages/form-types/src/form/view.ts b/packages/form-types/src/form/view.ts
@@ -56,14 +56,15 @@ export interface FormMeta {
     // 表单字段
     fields: FormField[];
     // 子表单
-    subForms: FormMeta[];
+    subForms?: FormMeta[];
 }
 
 
 /**
  * 表单视图属性
  */
 export interface FormViewProps {
+    /** 表单定义 **/
     meta: FormMeta;
     /** 表单操控对象 */
     form?: FormInstance;
diff --git a/packages/form-view/package.json b/packages/form-view/package.json
@@ -17,7 +17,9 @@
     "dev": "rslib build --watch"
   },
   "dependencies": {
-    "@coding-form/form-types": "workspace:*"
+    "@coding-form/form-types": "workspace:*",
+    "@reduxjs/toolkit": "^2.11.2",
+    "react-redux": "^9.2.0"
   },
   "peerDependencies": {
     "react": ">=18",
diff --git a/packages/form-view/src/context/form-context.tsx b/packages/form-view/src/context/form-context.tsx
@@ -1,15 +1,42 @@
 import React from "react";
 import {FormInstance} from "@/instance";
 import {FormValidate} from "@/validate";
+import {FormPresenter} from "@/presenters";
+import {FormState} from "@/types";
 
 
-export interface FormContextScope{
+export class FormContextScope {
 
-    instance:FormInstance;
+    private readonly instance: FormInstance;
+    private readonly validate: FormValidate;
+    private readonly presenter: FormPresenter;
 
-    validate:FormValidate;
+    constructor(instance: FormInstance,validate: FormValidate, presenter: FormPresenter) {
+        this.instance = instance;
+        this.presenter = presenter;
+        this.validate = validate;
+    }
 
+    public initialState(){
+        this.presenter.initialState();
+    }
+
+    public syncState(state: FormState){
+        this.presenter.syncState(state);
+    }
+
+    public getInstance(){
+        return this.instance;
+    }
+
+    public getPresenter(){
+        return this.presenter;
+    }
+
+    public getValidate(){
+        return this.validate;
+    }
 }
 
 
-export const FormContext = React.createContext<FormContextScope|undefined>(undefined);
+export const FormContext = React.createContext<FormContextScope | undefined>(undefined);
diff --git a/packages/form-view/src/factory/index.tsx b/packages/form-view/src/factory/index.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import {FormItemProps} from "@/types/item";
 
-export class FormFactory {
+export class FormItemFactory {
 
     private readonly cache: Map<string, React.ComponentType<FormItemProps>>;
 
     private constructor() {
         this.cache = new Map();
     }
 
-    private static readonly instance = new FormFactory();
+    private static readonly instance = new FormItemFactory();
 
     public static getInstance() {
         return this.instance;
diff --git a/packages/form-view/src/form/index.tsx b/packages/form-view/src/form/index.tsx
@@ -1,35 +1,30 @@
 import React from "react";
 import {FormViewProps} from "@coding-form/form-types";
 import {FormItemProps} from "@/types/item";
-import {FormFactory} from "@/factory";
+import {FormItemFactory} from "@/factory";
 import {FormRegistry} from "@/register";
-import {FormValidate} from "@/validate";
-import {FormInstance} from "@/instance";
-import { FormContext } from "@/context";
+import {FormContext} from "@/context";
+import {createFormContext} from "@/hooks";
+import {Provider} from "react-redux";
+import {formStore} from "@/store";
 
-export const FormView: React.FC<FormViewProps> = (props) => {
 
-    const Form = FormRegistry.getInstance().getFormComponent();
-    if (!Form) {
-        throw new Error('Form Component must register. ');
-    }
+interface FormViewContentProps extends FormViewProps {
+    Form: React.ComponentType<any>;
+}
 
-    const context = React.useMemo(() => {
-        const form = FormRegistry.getInstance().getFormInstance()?.();
-        if (!form) {
-            throw new Error('Form Instance must register.');
-        }
+export const FormViewContent: React.FC<FormViewContentProps> = (props) => {
 
-        const instance = props.form ? props.form as FormInstance : new FormInstance(form);
+    const {Form} = props;
 
-        return {
-            instance,
-            validate: new FormValidate(props.validators || [], instance),
-        }
-    }, [props.form]);
+    const context = createFormContext(props);
+    if (!context) {
+        throw new Error('Form Component must register. ');
+    }
 
+    const instance = context.getInstance();
 
-    const formInstance = context.instance.getProxyTarget();
+    const formInstance = instance.getProxyTarget();
 
     const fields = props.meta.fields || [];
 
@@ -47,7 +42,7 @@ export const FormView: React.FC<FormViewProps> = (props) => {
                         readOnly: review
                     };
 
-                    const FormItem = FormFactory.getInstance().getItem(field.type);
+                    const FormItem = FormItemFactory.getInstance().getItem(field.type);
                     if (FormItem) {
                         return (
                             <FormItem {...formItemProps}/>
@@ -57,4 +52,20 @@ export const FormView: React.FC<FormViewProps> = (props) => {
             </Form>
         </FormContext.Provider>
     )
+}
+
+
+export const FormView: React.FC<FormViewProps> = (props) => {
+
+    const Form = FormRegistry.getInstance().getFormComponent();
+    if (!Form) {
+        throw new Error('Form Component must register. ');
+    }
+
+    return (
+        <Provider store={formStore}>
+            <FormViewContent {...props} Form={Form}/>
+        </Provider>
+    )
+
 }
diff --git a/packages/form-view/src/hooks/create-form-instance.tsx b/packages/form-view/src/hooks/create-form-instance.tsx
@@ -3,12 +3,11 @@ import {FormInstance} from "@/instance";
 import {FormRegistry} from "@/register";
 
 export const createFormInstance = () => {
-    const form = FormRegistry.getInstance().getFormInstance()?.();
-    if (!form) {
-        throw new Error('Form Instance must register.');
-    }
-
     return React.useMemo(() => {
+        const form = FormRegistry.getInstance().getFormInstance()?.();
+        if (!form) {
+            throw new Error('Form Instance must register.');
+        }
         return new FormInstance(form);
     }, []);
 }
diff --git a/packages/form-view/src/hooks/index.ts b/packages/form-view/src/hooks/index.ts
@@ -1,3 +1,3 @@
 export * from "./use-form-context";
 export * from "./create-form-instance";
-export * from "./use-form-register";
+export * from "./register-form-items";
diff --git a/packages/form-view/src/hooks/register-form-items.tsx b/packages/form-view/src/hooks/register-form-items.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {FormRegistry} from "@/register";
-import {FormFactory} from "@/factory";
+import {FormItemFactory} from "@/factory";
 import {FormItemProps} from "@/types";
 
 interface FormItemType {
@@ -9,7 +9,8 @@ interface FormItemType {
 }
 
 
-export const useFormRegister = (Form: any, items: FormItemType[]) => {
+export const registerFormItems = (Form: any,
+                                  items: FormItemType[]) => {
 
     const ref = React.useRef<any>();
 
@@ -20,7 +21,7 @@ export const useFormRegister = (Form: any, items: FormItemType[]) => {
         });
 
         for (const item of items) {
-            FormFactory.getInstance().register(item.type, item.componentType);
+            FormItemFactory.getInstance().register(item.type, item.componentType);
         }
     }
 }
diff --git a/packages/form-view/src/hooks/use-form-context.tsx b/packages/form-view/src/hooks/use-form-context.tsx
diff --git a/packages/form-view/src/instance/index.ts b/packages/form-view/src/instance/index.ts
diff --git a/packages/form-view/src/presenters/form-presenter.ts b/packages/form-view/src/presenters/form-presenter.ts
diff --git a/packages/form-view/src/store/index.tsx b/packages/form-view/src/store/index.tsx
diff --git a/packages/form-view/src/types/index.ts b/packages/form-view/src/types/index.ts
diff --git a/packages/form-view/src/types/state.ts b/packages/form-view/src/types/state.ts
diff --git a/packages/form-view/src/validate/index.ts b/packages/form-view/src/validate/index.ts
