From 5bfa0a114bab39918f99c511cd45f8981bbd8239 Mon Sep 17 00:00:00 2001
From: lorne <1991wangliang@gmail.com>
Date: Wed, 13 Aug 2025 12:05:18 +0800
Subject: [PATCH] update from

---
 admin-ui/src/pages/form/index.tsx  | 306 +++++++++++++++--------------
 mobile-ui/src/pages/form/index.tsx | 294 +++++++++++++--------------
 2 files changed, 307 insertions(+), 293 deletions(-)

diff --git a/admin-ui/src/pages/form/index.tsx b/admin-ui/src/pages/form/index.tsx
index 6936ad58..10046232 100644
--- a/admin-ui/src/pages/form/index.tsx
+++ b/admin-ui/src/pages/form/index.tsx
@@ -143,13 +143,6 @@ const FooterButtons: React.FC<{ formInstance: FormInstance }> = ({formInstance})
                             name: ['user', 'name'],
                             label: '姓名',
                             placeholder: '请输入姓名',
-                            validateFunction: async (content) => {
-                                const value = content.value;
-                                if (value) {
-                                    return []
-                                }
-                                return ['姓名不能为空']
-                            }
                         },
                         type: 'input'
                     }, 0);
@@ -172,13 +165,6 @@ const FormPage = () => {
                 name: ['user', 'name'],
                 label: '姓名',
                 placeholder: '请输入姓名',
-                validateFunction: async (content) => {
-                    const value = content.value;
-                    if (value) {
-                        return []
-                    }
-                    return ['姓名不能为空']
-                }
             }
         },
         {
@@ -197,13 +183,6 @@ const FormPage = () => {
                 name: ['user', 'password'],
                 label: '银行卡密码',
                 placeholder: '请输入银行卡密码',
-                validateFunction: async (content) => {
-                    const value = content.value;
-                    if (value) {
-                        return []
-                    }
-                    return ['银行卡密码不能为空']
-                }
             }
         },
         {
@@ -406,196 +385,229 @@ const FormPage = () => {
                             />
                         )}
                     >
-                        <FormInput
+                        <Form.Item
                             required={true}
                             name={["user", "name"]}
                             label={"姓名"}
-                            placeholder={"请输入姓名"}
-                            validateFunction={async (content) => {
-                                const value = content.value;
-                                if (value) {
-                                    return []
+                            rules={[
+                                {
+                                    required: true,
+                                    message: '姓名不能为空'
                                 }
-                                return ['姓名不能为空']
-                            }}
-                        />
+                            ]}
+                        >
+                            <FormInput
+                                placeholder={"请输入姓名"}
+                            />
+                        </Form.Item>
 
-                        <FormStepper
+                        <Form.Item
                             required={true}
                             name={["user", "age"]}
                             label={"年龄"}
-                            placeholder={"请输入年龄"}
-                        />
+                        >
+                            <FormStepper
+                                placeholder={"请输入年龄"}
+                            />
+                        </Form.Item>
+
 
-                        <FormPassword
+                        <Form.Item
                             required={true}
                             name={["user", "password"]}
                             label={"银行卡密码"}
-                            placeholder={"请输入银行卡密码"}
-                            validateFunction={async (content) => {
-                                const value = content.value;
-                                if (value) {
-                                    return []
-                                }
-                                return ['银行卡密码不能为空']
-                            }}
-                        />
+                        >
+                            <FormPassword/>
+                        </Form.Item>
 
-                        <FormCaptcha
+                        <Form.Item
                             required={true}
                             name={["user", "code"]}
                             label={"银行卡验证码"}
-                            placeholder={"请输入银行卡验证码"}
-                            onCaptchaRefresh={async () => {
-                                console.log('refresh captcha')
-                                return {
-                                    url: '/captcha.jpeg',
-                                    code: '123'
-                                }
-                            }}
-                        />
+                        >
+                            <FormCaptcha
+                                placeholder={"请输入银行卡验证码"}
+                                onCaptchaRefresh={async () => {
+                                    console.log('refresh captcha')
+                                    return {
+                                        url: '/captcha.jpeg',
+                                        code: '123'
+                                    }
+                                }}
+                            />
+                        </Form.Item>
 
-                        <FormCheckbox
+                        <Form.Item
                             required={true}
                             name={["user", "checkbox"]}
                             label={"复选框"}
-                            options={[
-                                {label: '选项1', value: '1'},
-                                {label: '选项2', value: '2'},
-                                {label: '选项3', value: '3'},
-                            ]}
-                        />
+                        >
+                            <FormCheckbox
+                                options={[
+                                    {label: '选项1', value: '1'},
+                                    {label: '选项2', value: '2'},
+                                    {label: '选项3', value: '3'},
+                                ]}
+                            />
+                        </Form.Item>
 
-                        <FormRadio
+                        <Form.Item
                             required={true}
                             name={["user", "radio"]}
                             label={"单选框"}
-                            options={[
-                                {label: '选项1', value: '1'},
-                                {label: '选项2', value: '2'},
-                                {label: '选项3', value: '3'},
-                            ]}
-                        />
+                        >
+                            <FormRadio
+                                options={[
+                                    {label: '选项1', value: '1'},
+                                    {label: '选项2', value: '2'},
+                                    {label: '选项3', value: '3'},
+                                ]}
+                            />
+                        </Form.Item>
 
-                        <FormRate
+                        <Form.Item
                             required={true}
                             name={["user", "rate"]}
                             label={"评分"}
-                        />
+                        >
+                            <FormRate/>
+                        </Form.Item>
 
-                        <FormSlider
+                        <Form.Item
                             required={true}
                             name={["user", "slider"]}
                             label={"滑块"}
-                            sliderPopover={true}
-                        />
+                        >
+                            <FormSlider
+                                sliderPopover={true}
+                            />
+                        </Form.Item>
 
-                        <FormSwitch
+                        <Form.Item
                             required={true}
                             name={["user", "switch"]}
                             label={"开关"}
-                        />
+                        >
+                            <FormSwitch/>
+                        </Form.Item>
 
-                        <FormTextArea
+                        <Form.Item
                             required={true}
                             name={["user", "textarea"]}
                             label={"文本域"}
-                        />
+                        >
+                            <FormTextArea/>
+                        </Form.Item>
 
-                        <FormDate
+                        <Form.Item
                             required={true}
                             name={["user", "date"]}
                             label={"日期"}
-                        />
+                        >
+                            <FormDate/>
+                        </Form.Item>
 
-                        <FormCascader
+                        <Form.Item
                             required={true}
                             name={["user", "cascader"]}
                             label={"级联选择"}
-                            options={[
-                                {
-                                    label: '选项1',
-                                    value: '1',
-                                    children: [
-                                        {
-                                            label: '选项1-1',
-                                            value: '1-1',
-                                            children: [
-                                                {
-                                                    label: '选项1-1-1',
-                                                    value: '1-1-1',
-                                                },
-                                                {
-                                                    label: '选项1-1-2',
-                                                    value: '1-1-2',
-                                                },
-                                            ]
-                                        },
-                                        {
-                                            label: '选项1-2',
-                                            value: '1-2',
-                                        },
-                                    ]
-                                },
-                                {
-                                    label: '选项2',
-                                    value: '2',
-                                    children: [
-                                        {
-                                            label: '选项2-1',
-                                            value: '2-1',
-                                        },
-                                        {
-                                            label: '选项2-2',
-                                            value: '2-2',
-                                        },
-                                    ]
-                                },
-                            ]}
-                        />
+                        >
+                            <FormCascader
+                                options={[
+                                    {
+                                        label: '选项1',
+                                        value: '1',
+                                        children: [
+                                            {
+                                                label: '选项1-1',
+                                                value: '1-1',
+                                                children: [
+                                                    {
+                                                        label: '选项1-1-1',
+                                                        value: '1-1-1',
+                                                    },
+                                                    {
+                                                        label: '选项1-1-2',
+                                                        value: '1-1-2',
+                                                    },
+                                                ]
+                                            },
+                                            {
+                                                label: '选项1-2',
+                                                value: '1-2',
+                                            },
+                                        ]
+                                    },
+                                    {
+                                        label: '选项2',
+                                        value: '2',
+                                        children: [
+                                            {
+                                                label: '选项2-1',
+                                                value: '2-1',
+                                            },
+                                            {
+                                                label: '选项2-2',
+                                                value: '2-2',
+                                            },
+                                        ]
+                                    },
+                                ]}
+                            />
+                        </Form.Item>
 
-                        <FormSelect
+                        <Form.Item
                             required={true}
                             name={["user", "select"]}
                             label={"选择器"}
-                            selectMultiple={true}
-                            options={[
-                                {
-                                    label: '选项1', value: '1',
-                                    children: [
-                                        {
-                                            label: '选项1-1',
-                                            value: '1-1',
-                                            children: [
-                                                {label: '选项1-1-1', value: '1-1-1'},
-                                                {label: '选项1-1-2', value: '1-1-2'},
-                                            ]
-                                        },
-                                        {label: '选项1-2', value: '1-2'},
-                                    ]
-                                },
-                                {label: '选项2', value: '2'},
-                                {label: '选项3', value: '3'},
-                            ]}
-                        />
+                        >
+                            <FormSelect
+
+                                selectMultiple={true}
+                                options={[
+                                    {
+                                        label: '选项1', value: '1',
+                                        children: [
+                                            {
+                                                label: '选项1-1',
+                                                value: '1-1',
+                                                children: [
+                                                    {label: '选项1-1-1', value: '1-1-1'},
+                                                    {label: '选项1-1-2', value: '1-1-2'},
+                                                ]
+                                            },
+                                            {label: '选项1-2', value: '1-2'},
+                                        ]
+                                    },
+                                    {label: '选项2', value: '2'},
+                                    {label: '选项3', value: '3'},
+                                ]}
+                            />
+                        </Form.Item>
 
-                        <FormUploader
+                        <Form.Item
                             required={true}
                             name={["user", "avatar"]}
                             label={"头像"}
-                        />
+                        >
+                            <FormUploader/>
+                        </Form.Item>
 
-                        <FormColor
+                        <Form.Item
                             required={true}
                             name={["user", "color"]}
                             label={"颜色"}
-                        />
+                        >
+                            <FormColor/>
+                        </Form.Item>
 
-                        <FormCode
+                        <Form.Item
                             required={true}
                             name={["user", "ideCode"]}
                             label={"代码"}
-                        />
+                        >
+                            <FormCode/>
+                        </Form.Item>
                     </Form>
                 </Col>
 
diff --git a/mobile-ui/src/pages/form/index.tsx b/mobile-ui/src/pages/form/index.tsx
index 0d202e81..6abe269e 100644
--- a/mobile-ui/src/pages/form/index.tsx
+++ b/mobile-ui/src/pages/form/index.tsx
@@ -21,7 +21,6 @@ import {
 import {FormField, FormInstance} from "@codingapi/ui-framework";
 
 
-
 const FooterButtons: React.FC<{ formInstance: FormInstance }> = ({formInstance}) => {
     const data = {
         user: {
@@ -140,13 +139,6 @@ const FooterButtons: React.FC<{ formInstance: FormInstance }> = ({formInstance})
                             name: ['user', 'name'],
                             label: '姓名',
                             placeholder: '请输入姓名',
-                            validateFunction: async (content) => {
-                                const value = content.value;
-                                if (value) {
-                                    return []
-                                }
-                                return ['姓名不能为空']
-                            }
                         },
                         type: 'input'
                     }, 0);
@@ -157,7 +149,7 @@ const FooterButtons: React.FC<{ formInstance: FormInstance }> = ({formInstance})
     )
 }
 
-const FormPage = ()=>{
+const FormPage = () => {
 
     const [activeKey, setActiveKey] = React.useState("left");
 
@@ -172,13 +164,6 @@ const FormPage = ()=>{
                 name: ['user', 'name'],
                 label: '姓名',
                 placeholder: '请输入姓名',
-                validateFunction: async (content) => {
-                    const value = content.value;
-                    if (value) {
-                        return []
-                    }
-                    return ['姓名不能为空']
-                }
             }
         },
         {
@@ -197,13 +182,6 @@ const FormPage = ()=>{
                 name: ['user', 'password'],
                 label: '银行卡密码',
                 placeholder: '请输入银行卡密码',
-                validateFunction: async (content) => {
-                    const value = content.value;
-                    if (value) {
-                        return []
-                    }
-                    return ['银行卡密码不能为空']
-                }
             }
         },
         {
@@ -366,7 +344,7 @@ const FormPage = ()=>{
             <Header>Form表单</Header>
             <Tabs
                 activeKey={activeKey}
-                onChange={(value)=>{
+                onChange={(value) => {
                     setActiveKey(value);
                 }}
             >
@@ -374,12 +352,12 @@ const FormPage = ()=>{
                 <Tabs.Tab title={"右侧表单"} key={"right"}/>
             </Tabs>
 
-            {activeKey ==='left' && (
+            {activeKey === 'left' && (
                 <>
                     <Form
                         layout={"horizontal"}
                         form={leftFormInstance}
-                        onFinish={async (values)=>{
+                        onFinish={async (values) => {
                             Toast.show(JSON.stringify(values));
                         }}
                         footer={(
@@ -393,12 +371,12 @@ const FormPage = ()=>{
                 </>
             )}
 
-            {activeKey ==='right' && (
+            {activeKey === 'right' && (
                 <>
                     <Form
                         form={rightFormInstance}
                         layout={"horizontal"}
-                        onFinish={async (values)=>{
+                        onFinish={async (values) => {
                             Toast.show(JSON.stringify(values));
                         }}
                         footer={(
@@ -407,172 +385,196 @@ const FormPage = ()=>{
                             />
                         )}
                     >
-                        <FormInput
+                        <Form.Item
                             required={true}
                             name={["user", "name"]}
                             label={"姓名"}
-                            placeholder={"请输入姓名"}
-                            validateFunction={async (content) => {
-                                const value = content.value;
-                                if (value) {
-                                    return []
-                                }
-                                return ['姓名不能为空']
-                            }}
-                        />
-
-                        <FormStepper
+                        >
+                            <FormInput
+                                placeholder={"请输入姓名"}
+                            />
+                        </Form.Item>
+
+
+                        <Form.Item
                             required={true}
                             name={["user", "age"]}
                             label={"年龄"}
-                            placeholder={"请输入年龄"}
-                        />
+                        >
+                            <FormStepper
+                                placeholder={"请输入年龄"}
+                            />
+                        </Form.Item>
 
-                        <FormPassword
+                        <Form.Item
                             required={true}
                             name={["user", "password"]}
                             label={"银行卡密码"}
-                            placeholder={"请输入银行卡密码"}
-                            validateFunction={async (content) => {
-                                const value = content.value;
-                                if (value) {
-                                    return []
-                                }
-                                return ['银行卡密码不能为空']
-                            }}
-                        />
-
-                        <FormCaptcha
+                        >
+                            <FormPassword
+                                placeholder={"请输入银行卡密码"}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
                             required={true}
                             name={["user", "code"]}
                             label={"银行卡验证码"}
-                            placeholder={"请输入银行卡验证码"}
-                            onCaptchaRefresh={async () => {
-                                console.log('refresh captcha')
-                                return {
-                                    url: '/captcha.jpeg',
-                                    code: '123'
-                                }
-                            }}
-                        />
-
-                        <FormCheckbox
+                        >
+                            <FormCaptcha
+                                placeholder={"请输入银行卡验证码"}
+                                onCaptchaRefresh={async () => {
+                                    console.log('refresh captcha')
+                                    return {
+                                        url: '/captcha.jpeg',
+                                        code: '123'
+                                    }
+                                }}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
                             required={true}
                             name={["user", "checkbox"]}
                             label={"复选框"}
-                            options={[
-                                {label: '选项1', value: '1'},
-                                {label: '选项2', value: '2'},
-                                {label: '选项3', value: '3'},
-                            ]}
-                        />
-
-                        <FormRadio
+                        >
+                            <FormCheckbox
+                                options={[
+                                    {label: '选项1', value: '1'},
+                                    {label: '选项2', value: '2'},
+                                    {label: '选项3', value: '3'},
+                                ]}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
                             required={true}
                             name={["user", "radio"]}
                             label={"单选框"}
-                            options={[
-                                {label: '选项1', value: '1'},
-                                {label: '选项2', value: '2'},
-                                {label: '选项3', value: '3'},
-                            ]}
-                        />
-
-                        <FormRate
+                        >
+                            <FormRadio
+                                options={[
+                                    {label: '选项1', value: '1'},
+                                    {label: '选项2', value: '2'},
+                                    {label: '选项3', value: '3'},
+                                ]}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
                             required={true}
                             name={["user", "rate"]}
                             label={"评分"}
-                        />
+                        >
+                            <FormRate/>
+                        </Form.Item>
 
-                        <FormSlider
+                        <Form.Item
                             required={true}
                             name={["user", "slider"]}
                             label={"滑块"}
-                            sliderPopover={true}
-                        />
+                        >
+                            <FormSlider
+                                sliderPopover={true}
+                            />
+                        </Form.Item>
 
-                        <FormSwitch
+                        <Form.Item
                             required={true}
                             name={["user", "switch"]}
                             label={"开关"}
-                        />
+                        >
+                            <FormSwitch/>
+                        </Form.Item>
 
-                        <FormTextArea
+                        <Form.Item
                             required={true}
                             name={["user", "textarea"]}
                             label={"文本域"}
-                        />
+                        >
+                            <FormTextArea/>
+                        </Form.Item>
 
-                        <FormDate
+                        <Form.Item
                             required={true}
                             name={["user", "date"]}
                             label={"日期"}
-                        />
+                        >
+                            <FormDate/>
+                        </Form.Item>
 
-                        <FormCascader
+
+                        <Form.Item
                             required={true}
                             name={["user", "cascader"]}
                             label={"级联选择"}
-                            options={[
-                                {
-                                    label: '选项1',
-                                    value: '1',
-                                    children: [
-                                        {
-                                            label: '选项1-1',
-                                            value: '1-1',
-                                            children: [
-                                                {
-                                                    label: '选项1-1-1',
-                                                    value: '1-1-1',
-                                                },
-                                                {
-                                                    label: '选项1-1-2',
-                                                    value: '1-1-2',
-                                                },
-                                            ]
-                                        },
-                                        {
-                                            label: '选项1-2',
-                                            value: '1-2',
-                                        },
-                                    ]
-                                },
-                                {
-                                    label: '选项2',
-                                    value: '2',
-                                    children: [
-                                        {
-                                            label: '选项2-1',
-                                            value: '2-1',
-                                        },
-                                        {
-                                            label: '选项2-2',
-                                            value: '2-2',
-                                        },
-                                    ]
-                                },
-                            ]}
-                        />
-
-                        <FormSelect
+                        >
+                            <FormCascader
+                                options={[
+                                    {
+                                        label: '选项1',
+                                        value: '1',
+                                        children: [
+                                            {
+                                                label: '选项1-1',
+                                                value: '1-1',
+                                                children: [
+                                                    {
+                                                        label: '选项1-1-1',
+                                                        value: '1-1-1',
+                                                    },
+                                                    {
+                                                        label: '选项1-1-2',
+                                                        value: '1-1-2',
+                                                    },
+                                                ]
+                                            },
+                                            {
+                                                label: '选项1-2',
+                                                value: '1-2',
+                                            },
+                                        ]
+                                    },
+                                    {
+                                        label: '选项2',
+                                        value: '2',
+                                        children: [
+                                            {
+                                                label: '选项2-1',
+                                                value: '2-1',
+                                            },
+                                            {
+                                                label: '选项2-2',
+                                                value: '2-2',
+                                            },
+                                        ]
+                                    },
+                                ]}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
                             required={true}
                             name={["user", "select"]}
                             label={"选择器"}
-                            selectMultiple={true}
-                            options={[
-                                {label: '选项1', value: '1'},
-                                {label: '选项2', value: '2'},
-                                {label: '选项3', value: '3'},
-                            ]}
-                        />
-
-                        <FormUploader
+                        >
+                            <FormSelect
+                                selectMultiple={true}
+                                options={[
+                                    {label: '选项1', value: '1'},
+                                    {label: '选项2', value: '2'},
+                                    {label: '选项3', value: '3'},
+                                ]}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
                             required={true}
                             name={["user", "avatar"]}
                             label={"头像"}
-                        />
-
+                        >
+                            <FormUploader/>
+                        </Form.Item>
                     </Form>
                 </>
             )}