From a2b9e5d98bda3f1f5b7fc143698d6238bba84120 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 11 Sep 2024 16:59:28 +0800
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20rn=20=E7=8E=AF=E5=A2=83=E4=B8=8B?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E6=AD=A3=E5=B8=B8=E8=B7=91=E8=B5=B7=E6=9D=A5?=
 =?UTF-8?q?=E7=9A=84=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/nutui-taro-demo/package.json      |   3 +-
 packages/nutui-taro-demo/yarn.lock         |  36 ++-
 src/config.json                            |   4 +-
 src/packages/form/demo.taro.tsx            |  22 +-
 src/packages/form/demos/taro/demo1.tsx     |  15 +-
 src/packages/form/form.harmony.css         | 295 ++++++++++++++++++++-
 src/packages/form/form.taro.tsx            |   5 +-
 src/packages/formitem/formitem.harmony.css |  50 +++-
 src/packages/formitem/formitem.scss        |   8 +-
 src/packages/formitem/formitem.taro.tsx    |   9 +-
 10 files changed, 389 insertions(+), 58 deletions(-)

diff --git a/packages/nutui-taro-demo/package.json b/packages/nutui-taro-demo/package.json
index 83b2d6eafd..65d4dad3f3 100644
--- a/packages/nutui-taro-demo/package.json
+++ b/packages/nutui-taro-demo/package.json
@@ -75,6 +75,7 @@
     "@tarojs/shared": "4.0.2",
     "@tarojs/taro": "4.0.2",
     "@tarojs/taro-h5": "4.0.2",
+    "async-validator": "^4.2.5",
     "babel-plugin-import": "^1.13.8",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
@@ -111,6 +112,6 @@
   },
   "resolutions": {
     "react-native-webview": "13.6.3",
-    "sass":"1.77.6"
+    "sass": "1.77.6"
   }
 }
diff --git a/packages/nutui-taro-demo/yarn.lock b/packages/nutui-taro-demo/yarn.lock
index 0483c04769..3e01c0b094 100644
--- a/packages/nutui-taro-demo/yarn.lock
+++ b/packages/nutui-taro-demo/yarn.lock
@@ -4656,6 +4656,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
+async-validator@^4.2.5:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
+
 async@^3.2.2, async@^3.2.4:
   version "3.2.5"
   resolved "https://registry.npmjs.org/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
@@ -13249,7 +13254,16 @@ string-hash@^1.1.1:
   resolved "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13340,7 +13354,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13354,6 +13368,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14531,7 +14552,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14549,6 +14570,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
diff --git a/src/config.json b/src/config.json
index 0f1959164d..aee11cfc94 100644
--- a/src/config.json
+++ b/src/config.json
@@ -492,7 +492,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Form",
           "type": "component",
           "cName": "表单",
@@ -503,7 +503,7 @@
           "author": "hanyuxinting"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "FormItem",
           "type": "component",
           "cName": "表单项",
diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
index f1a8072cb0..416ec48e73 100644
--- a/src/packages/form/demo.taro.tsx
+++ b/src/packages/form/demo.taro.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { ScrollView, View } from '@tarojs/components'
+import { ScrollView, View, Text } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
-import Demo2 from './demos/taro/demo2'
-import Demo3 from './demos/taro/demo3'
-import Demo4 from './demos/taro/demo4'
-import Demo5 from './demos/taro/demo5'
-import Demo6 from './demos/taro/demo6'
-import Demo7 from './demos/taro/demo7'
+// import Demo2 from './demos/taro/demo2'
+// import Demo3 from './demos/taro/demo3'
+// import Demo4 from './demos/taro/demo4'
+// import Demo5 from './demos/taro/demo5'
+// import Demo6 from './demos/taro/demo6'
+// import Demo7 from './demos/taro/demo7'
 
 const FormDemo = () => {
   const [translated] = useTranslate({
@@ -37,9 +37,11 @@ const FormDemo = () => {
     <>
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <View className="h2">{translated.basic}</View>
+        <View className="h2">
+          <Text>{translated.basic}</Text>
+        </View>
         <Demo1 />
-        <View className="h2">{translated.title2}</View>
+        {/* <View className="h2">{translated.title2}</View>
         <Demo2 />
         <View className="h2">{translated.relatedDisplay}</View>
         <Demo3 />
@@ -50,7 +52,7 @@ const FormDemo = () => {
         <View className="h2">{translated.validateTrigger}</View>
         <Demo6 />
         <View className="h2">{translated.title5}</View>
-        <Demo7 />
+        <Demo7 /> */}
       </ScrollView>
     </>
   )
diff --git a/src/packages/form/demos/taro/demo1.tsx b/src/packages/form/demos/taro/demo1.tsx
index ee519ad491..595b1cf7be 100644
--- a/src/packages/form/demos/taro/demo1.tsx
+++ b/src/packages/form/demos/taro/demo1.tsx
@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  Button,
-  Form,
-  Input,
-  InputNumber,
-  TextArea,
-} from '@nutui/nutui-react-taro'
+import { Button, Form, Input, TextArea } from '@nutui/nutui-react-taro'
 import { FormItemRuleWithoutValidator } from '@/packages/formitem/types'
 
 const Demo1 = () => {
@@ -55,13 +49,6 @@ const Demo1 = () => {
         >
           <TextArea placeholder="请输入字段D" maxLength={100} />
         </Form.Item>
-        <Form.Item
-          label="数量"
-          name="num"
-          getValueFromEvent={(...args) => args[0]}
-        >
-          <InputNumber />
-        </Form.Item>
       </Form>
     </>
   )
diff --git a/src/packages/form/form.harmony.css b/src/packages/form/form.harmony.css
index 85633e1176..3d13c1e3bd 100644
--- a/src/packages/form/form.harmony.css
+++ b/src/packages/form/form.harmony.css
@@ -1,17 +1,300 @@
-.form-layout-right .nut-form-item-label {
-  text-align: end;
+.nut-cell-group {
+  display: block;
+}
+
+.nut-cell-group-title {
+  display: inherit;
+  padding: 0 10px;
+  color: #1a1a1a;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.nut-cell-group-description {
+  display: inherit;
+  padding: 0 10px;
+  color: #505259;
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.nut-cell-group-wrap {
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.nut-cell-group {
+  display: block;
+}
+
+.nut-cell-group-title {
+  display: inherit;
+  padding: 0 10px;
+  color: #1a1a1a;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.nut-cell-group-description {
+  display: inherit;
+  padding: 0 10px;
+  color: #505259;
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.nut-cell-group-wrap {
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.nut-cell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  line-height: 20px;
+  padding: 13px 16px;
+  background-color: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0px 1px 7px 0px rgb(237, 238, 241);
+  font-size: 14px;
+  color: #1a1a1a;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+
+.nut-cell-group-item {
+  border-radius: 0;
+  box-shadow: 0 0 transparent;
+  margin: 0;
+}
+
+.nut-cell-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.nut-cell-title {
+  line-height: 20px;
+}
+
+.nut-cell-description {
+  line-height: 20px;
+}
+
+.nut-cell-extra {
+  line-height: 20px;
+}
+
+.nut-cell-description {
+  font-size: 12px;
+  color: #505259;
+}
+
+.nut-cell-extra {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1;
+  flex-shrink: 0;
+  min-width: 0;
+  word-break: break-all;
+  font-size: 14px;
+  color: #505259;
+}
+
+.nut-cell-clickable:active {
+  opacity: 0.7;
+}
+
+.nut-cell-clickable {
+  cursor: pointer;
+}
+
+.nut-cell-clickable::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: #1a1a1a;
+  border: inherit;
+  border-color: #1a1a1a;
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: " ";
+}
+
+.nut-cell-divider {
+  display: flex;
+  min-height: 1px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.nut-cell-divider-inner {
+  display: flex;
+  height: 1px;
+  width: 100%;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.nut-cell-divider-rtl {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.nut-form-item {
+  display: flex;
+}
+
+.nut-form-item.error.line::before {
+  border-bottom: 1px solid #ff0f23;
+  transform: scaleX(1);
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.nut-form-item-label {
+  font-size: 14px;
+  font-weight: normal;
+  width: 90px;
+  margin-right: 10px;
+  flex: 0 0 auto;
+  display: inline-block;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.nut-form-item-label .required::before {
+  content: "*";
+  color: #ff0f23;
+  margin-right: 4px;
+}
+
+.nut-form-item-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.nut-form-item-body-slots {
+  text-align: left;
+}
+
+.nut-form-item-body-slots .nut-input {
+  padding: 0;
+  border: 0;
+}
+
+.nut-form-item-body-slots .nut-input-text {
   font-size: 14px;
+  text-align: left;
+  color: #1a1a1a;
+  width: 100%;
+  outline: 0 none;
+  border: 0;
+  text-decoration: none;
+  background: transparent;
+}
+
+.nut-form-item-body-slots .nut-range-container {
+  min-height: 24px;
+}
+
+.nut-form-item-body-slots .nut-textarea {
+  padding: 0;
+}
+
+.nut-form-item-body-slots .nut-textarea .nut-textarea-textarea {
+  font: inherit;
+  text-align: left;
+}
+
+.nut-form-item-body-tips {
+  text-align: left;
+  font-size: 10px;
+  color: #ff0f23;
+}
+
+[dir=rtl] .nut-form-item-label {
+  text-align: right;
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+.nut-rtl .nut-form-item-label {
+  text-align: right;
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+[dir=rtl] .nut-form-item-label .required::before {
+  margin-right: 0;
+  margin-left: 4px;
+}
+
+.nut-rtl .nut-form-item-label .required::before {
+  margin-right: 0;
+  margin-left: 4px;
+}
+
+[dir=rtl] .nut-form-item-body-slots,
+.nut-rtl .nut-form-item-body-slots {
+  text-align: right;
+}
+
+[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowRight,
+[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowLeft,
+.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight,
+.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft {
+  transform: rotateY(180deg);
+}
+
+[dir=rtl] .nut-form-item-body-slots .nut-input-text,
+.nut-rtl .nut-form-item-body-slots .nut-input-text {
+  text-align: right;
+}
+
+[dir=rtl] .nut-form-item-body-slots .nut-textarea-textarea,
+.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea {
+  text-align: right;
+}
+
+[dir=rtl] .nut-form-item-tips,
+.nut-rtl .nut-form-item-tips {
+  text-align: right;
+}
+
+.form-layout-right .nut-form-item-label {
+  text-align: right;
   padding-right: 24px;
   white-space: nowrap;
 }
 
 .form-layout-left .nut-form-item-label {
   position: relative;
-  text-align: start;
-  font-size: 14px;
+  text-align: left;
   padding-left: 12px;
   white-space: nowrap;
 }
+
 .form-layout-left .nut-form-item-label .required {
   display: block;
   line-height: 1.5;
@@ -28,7 +311,6 @@
 .form-layout-top .nut-form-item-label {
   padding-bottom: 4px;
   display: block;
-  font-size: 14px;
   padding-right: 24px;
 }
 
@@ -39,15 +321,18 @@
 
 [dir=rtl] .form-layout-right .nut-form-item-label,
 .nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
   padding-right: 0;
   padding-left: 24px;
 }
 
 [dir=rtl] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
   padding-left: 0;
   padding-right: 12px;
 }
+
 [dir=rtl] .form-layout-left .nut-form-item-label .required,
 .nut-rtl .form-layout-left .nut-form-item-label .required {
   left: auto;
diff --git a/src/packages/form/form.taro.tsx b/src/packages/form/form.taro.tsx
index 06c2dcedc6..b3b3e6edd5 100644
--- a/src/packages/form/form.taro.tsx
+++ b/src/packages/form/form.taro.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import { Form as TForm } from '@tarojs/components'
 import classNames from 'classnames'
 import { Context } from './context'
 import { SECRET, useForm } from './useform.taro'
@@ -77,7 +78,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
     }
 
     return (
-      <form
+      <TForm
         className={classNames(
           classPrefix,
           PositionInfo[labelPosition],
@@ -101,7 +102,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
             <Cell className={`${classPrefix}-footer`}>{footer}</Cell>
           ) : null}
         </Cell.Group>
-      </form>
+      </TForm>
     )
   }
 )
diff --git a/src/packages/formitem/formitem.harmony.css b/src/packages/formitem/formitem.harmony.css
index f9272f7c62..bfa4b100b3 100644
--- a/src/packages/formitem/formitem.harmony.css
+++ b/src/packages/formitem/formitem.harmony.css
@@ -2,7 +2,7 @@
   display: flex;
 }
 .nut-form-item.error.line::before {
-  border-bottom: 1px solid #FF0F23;
+  border-bottom: 1px solid #ff0f23;
   transform: scaleX(1);
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 }
@@ -11,23 +11,23 @@
   font-weight: normal;
   width: 90px;
   margin-right: 10px;
-  flex: none !important;
-  display: inline-block !important;
+  flex: 0 0 auto;
+  display: inline-block;
   word-wrap: break-word;
-  text-align: start;
+  text-align: left;
 }
 .nut-form-item-label .required::before {
   content: "*";
-  color: #FF0F23;
+  color: #ff0f23;
   margin-right: 4px;
 }
 .nut-form-item-body {
   flex: 1;
-  display: flex !important;
+  display: flex;
   flex-direction: column;
 }
 .nut-form-item-body-slots {
-  text-align: start;
+  text-align: left;
 }
 .nut-form-item-body-slots .nut-input {
   padding: 0;
@@ -35,8 +35,8 @@
 }
 .nut-form-item-body-slots .nut-input-text {
   font-size: 14px;
-  text-align: start;
-  color: #1A1A1A;
+  text-align: left;
+  color: #1a1a1a;
   width: 100%;
   outline: 0 none;
   border: 0;
@@ -47,24 +47,26 @@
   min-height: 24px;
 }
 .nut-form-item-body-slots .nut-textarea {
-  padding: 0 !important;
+  padding: 0;
 }
 .nut-form-item-body-slots .nut-textarea .nut-textarea-textarea {
   font: inherit;
-  text-align: start;
+  text-align: left;
 }
 .nut-form-item-body-tips {
-  text-align: start;
+  text-align: left;
   font-size: 10px;
-  color: #FF0F23;
+  color: #ff0f23;
 }
 
 [dir=rtl] .nut-form-item-label {
+  text-align: right;
   margin-right: 0;
   margin-left: 10px;
 }
 
 .nut-rtl .nut-form-item-label {
+  text-align: right;
   margin-right: 0;
   margin-left: 10px;
 }
@@ -75,4 +77,26 @@
 .nut-rtl .nut-form-item-label .required::before {
   margin-right: 0;
   margin-left: 4px;
+}
+[dir=rtl] .nut-form-item-body-slots,
+.nut-rtl .nut-form-item-body-slots {
+  text-align: right;
+}
+[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowRight,
+[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowLeft,
+.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight,
+.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft {
+  transform: rotateY(180deg);
+}
+[dir=rtl] .nut-form-item-body-slots .nut-input-text,
+.nut-rtl .nut-form-item-body-slots .nut-input-text {
+  text-align: right;
+}
+[dir=rtl] .nut-form-item-body-slots .nut-textarea-textarea,
+.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea {
+  text-align: right;
+}
+[dir=rtl] .nut-form-item-tips,
+.nut-rtl .nut-form-item-tips {
+  text-align: right;
 }
\ No newline at end of file
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 77678cc0c7..71d5ab668d 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -16,8 +16,8 @@
     font-weight: normal;
     width: $form-item-label-width;
     margin-right: $form-item-label-margin-right;
-    flex: none !important;
-    display: inline-block !important;
+    flex: 0 0 auto;
+    display: inline-block;
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
 
@@ -32,7 +32,7 @@
 
   &-body {
     flex: 1;
-    display: flex !important;
+    display: flex;
     flex-direction: column;
 
     &-slots {
@@ -59,7 +59,7 @@
       }
 
       .nut-textarea {
-        padding: 0 !important;
+        padding: 0;
 
         .nut-textarea-textarea {
           font: inherit;
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 9a0739f7f9..8de07aa648 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { BaseFormField } from './types'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell/index.taro'
@@ -58,7 +58,8 @@ export class FormItem extends React.Component<
 
   static contextType: any = Context
 
-  declare context: React.ContextType<typeof Context>
+  // @ts-ignore
+  // declare context: React.ContextType<typeof Context>
 
   private cancelRegister: any
 
@@ -208,12 +209,12 @@ export class FormItem extends React.Component<
 
     const { starPosition } = this.context
     const renderStar = (required || requiredInRules) && (
-      <i className="required" />
+      <View className="required" />
     )
     const renderLabel = (
       <>
         {starPosition === 'left' ? renderStar : null}
-        {label}
+        <Text>{label}</Text>
         {starPosition === 'right' ? renderStar : null}
       </>
     )

From 20162b938597a76631902a52eada84ab8edc1baf Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 11 Sep 2024 17:38:00 +0800
Subject: [PATCH 02/11] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/formitem/formitem.taro.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 8de07aa648..e1d70ef89b 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -56,10 +56,9 @@ export class FormItem extends React.Component<
 > {
   static defaultProps = defaultProps
 
-  static contextType: any = Context
+  static contextType = Context
 
-  // @ts-ignore
-  // declare context: React.ContextType<typeof Context>
+  context!: React.ContextType<typeof Context>
 
   private cancelRegister: any
 

From 9b16b55d701601b0e4a382c2053f0f3f9d8d3bdd Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 13 Sep 2024 14:40:33 +0800
Subject: [PATCH 03/11] =?UTF-8?q?feat(form):=20=E5=A4=9A=E7=AB=AF=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/rn/copy-file.js                    |   1 +
 src/packages/form/demo.taro.tsx            |  40 ++++++---
 src/packages/form/demos/taro/demo1.tsx     |   8 +-
 src/packages/form/demos/taro/demo2.tsx     |   9 +-
 src/packages/form/demos/taro/demo4.tsx     |   4 +-
 src/packages/form/form.harmony.css         |  71 ++++-----------
 src/packages/form/form.scss                |  68 --------------
 src/packages/form/form.taro.tsx            |   4 +-
 src/packages/form/form.tsx                 |   4 +-
 src/packages/formitem/formitem.harmony.css |  83 +++++++++++++++--
 src/packages/formitem/formitem.scss        | 100 ++++++++++++++++-----
 src/packages/formitem/formitem.taro.tsx    |  42 ++++++---
 src/packages/formitem/formitem.tsx         |  41 ++++++---
 13 files changed, 276 insertions(+), 199 deletions(-)

diff --git a/scripts/rn/copy-file.js b/scripts/rn/copy-file.js
index 8f56891cb0..6f6db34c88 100644
--- a/scripts/rn/copy-file.js
+++ b/scripts/rn/copy-file.js
@@ -32,6 +32,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'formitem',
 ]
 
 // copy文件并增加css引入
diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
index 416ec48e73..4598f4baae 100644
--- a/src/packages/form/demo.taro.tsx
+++ b/src/packages/form/demo.taro.tsx
@@ -4,12 +4,13 @@ import { ScrollView, View, Text } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
-// import Demo2 from './demos/taro/demo2'
-// import Demo3 from './demos/taro/demo3'
-// import Demo4 from './demos/taro/demo4'
-// import Demo5 from './demos/taro/demo5'
-// import Demo6 from './demos/taro/demo6'
-// import Demo7 from './demos/taro/demo7'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const FormDemo = () => {
   const [translated] = useTranslate({
@@ -41,18 +42,31 @@ const FormDemo = () => {
           <Text>{translated.basic}</Text>
         </View>
         <Demo1 />
-        {/* <View className="h2">{translated.title2}</View>
+        <View className="h2">{translated.title2}</View>
         <Demo2 />
-        <View className="h2">{translated.relatedDisplay}</View>
-        <Demo3 />
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">{translated.relatedDisplay}</View>
+            <Demo3 />
+          </>
+        ) : null}
         <View className="h2">{translated.title3}</View>
         <Demo4 />
-        <View className="h2">{translated.title4}</View>
-        <Demo5 />
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">{translated.title4}</View>
+            <Demo5 />
+          </>
+        ) : null}
+
         <View className="h2">{translated.validateTrigger}</View>
         <Demo6 />
-        <View className="h2">{translated.title5}</View>
-        <Demo7 /> */}
+        {!harmonyAndRn() ? (
+          <>
+            <View className="h2">{translated.title5}</View>
+            <Demo7 />
+          </>
+        ) : null}
       </ScrollView>
     </>
   )
diff --git a/src/packages/form/demos/taro/demo1.tsx b/src/packages/form/demos/taro/demo1.tsx
index 595b1cf7be..b7df6fa11b 100644
--- a/src/packages/form/demos/taro/demo1.tsx
+++ b/src/packages/form/demos/taro/demo1.tsx
@@ -21,7 +21,7 @@ const Demo1 = () => {
           label="字段A"
           name="username"
           rules={[
-            { max: 5, message: '字段A不能超过5个字' },
+            { max: 7, message: '字段A不能超过5个字' },
             { required: true, message: '请输入字段A' },
             {
               validator: (
@@ -47,7 +47,11 @@ const Demo1 = () => {
             { required: true, message: '请输入字段D' },
           ]}
         >
-          <TextArea placeholder="请输入字段D" maxLength={100} />
+          <TextArea
+            placeholder="请输入字段D"
+            maxLength={100}
+            style={{ paddingTop: 0, paddingBottom: 0 }}
+          />
         </Form.Item>
       </Form>
     </>
diff --git a/src/packages/form/demos/taro/demo2.tsx b/src/packages/form/demos/taro/demo2.tsx
index ab81d3c104..47c7717b27 100644
--- a/src/packages/form/demos/taro/demo2.tsx
+++ b/src/packages/form/demos/taro/demo2.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
 import {
   Form,
   Button,
   Input,
   type FormItemRuleWithoutValidator,
 } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
   const submitFailed = (error: any) => {
@@ -38,9 +40,10 @@ const Demo2 = () => {
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
-          <div
+          <View
             style={{
               display: 'flex',
+              flexDirection: 'row',
               justifyContent: 'center',
               width: '100%',
             }}
@@ -48,10 +51,10 @@ const Demo2 = () => {
             <Button nativeType="submit" type="primary">
               提交
             </Button>
-            <Button nativeType="reset" style={{ marginLeft: '20px' }}>
+            <Button nativeType="reset" style={{ marginLeft: pxTransform(20) }}>
               重置
             </Button>
-          </div>
+          </View>
         }
       >
         <Form.Item
diff --git a/src/packages/form/demos/taro/demo4.tsx b/src/packages/form/demos/taro/demo4.tsx
index 57a9860995..f4e4c55f84 100644
--- a/src/packages/form/demos/taro/demo4.tsx
+++ b/src/packages/form/demos/taro/demo4.tsx
@@ -7,6 +7,7 @@ import {
   type FormItemRuleWithoutValidator,
 } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   const submitFailed = (error: any) => {
@@ -41,13 +42,14 @@ const Demo4 = () => {
             style={{
               display: 'flex',
               justifyContent: 'center',
+              flexDirection: 'row',
               width: '100%',
             }}
           >
             <Button nativeType="submit" type="primary">
               提交
             </Button>
-            <Button nativeType="reset" style={{ marginLeft: '20px' }}>
+            <Button nativeType="reset" style={{ marginLeft: pxTransform(20) }}>
               重置
             </Button>
           </View>
diff --git a/src/packages/form/form.harmony.css b/src/packages/form/form.harmony.css
index 3d13c1e3bd..86e0ca0e18 100644
--- a/src/packages/form/form.harmony.css
+++ b/src/packages/form/form.harmony.css
@@ -1,7 +1,6 @@
 .nut-cell-group {
   display: block;
 }
-
 .nut-cell-group-title {
   display: inherit;
   padding: 0 10px;
@@ -11,7 +10,6 @@
   margin-top: 30px;
   margin-bottom: 10px;
 }
-
 .nut-cell-group-description {
   display: inherit;
   padding: 0 10px;
@@ -21,7 +19,6 @@
   margin-top: 10px;
   margin-bottom: 10px;
 }
-
 .nut-cell-group-wrap {
   border-radius: 6px;
   overflow: hidden;
@@ -32,7 +29,6 @@
 .nut-cell-group {
   display: block;
 }
-
 .nut-cell-group-title {
   display: inherit;
   padding: 0 10px;
@@ -42,7 +38,6 @@
   margin-top: 30px;
   margin-bottom: 10px;
 }
-
 .nut-cell-group-description {
   display: inherit;
   padding: 0 10px;
@@ -52,7 +47,6 @@
   margin-top: 10px;
   margin-bottom: 10px;
 }
-
 .nut-cell-group-wrap {
   border-radius: 6px;
   overflow: hidden;
@@ -75,37 +69,30 @@
   margin-bottom: 10px;
   box-sizing: border-box;
 }
-
 .nut-cell-group-item {
   border-radius: 0;
   box-shadow: 0 0 transparent;
   margin: 0;
 }
-
 .nut-cell-left {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex: 1;
 }
-
 .nut-cell-title {
   line-height: 20px;
 }
-
 .nut-cell-description {
   line-height: 20px;
 }
-
 .nut-cell-extra {
   line-height: 20px;
 }
-
 .nut-cell-description {
   font-size: 12px;
   color: #505259;
 }
-
 .nut-cell-extra {
   display: flex;
   flex-direction: row;
@@ -118,15 +105,12 @@
   font-size: 14px;
   color: #505259;
 }
-
 .nut-cell-clickable:active {
   opacity: 0.7;
 }
-
 .nut-cell-clickable {
   cursor: pointer;
 }
-
 .nut-cell-clickable::before {
   position: absolute;
   top: 50%;
@@ -141,21 +125,18 @@
   opacity: 0;
   content: " ";
 }
-
 .nut-cell-divider {
   display: flex;
   min-height: 1px;
   padding-left: 16px;
   padding-right: 16px;
 }
-
 .nut-cell-divider-inner {
   display: flex;
   height: 1px;
   width: 100%;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
 }
-
 .nut-cell-divider-rtl {
   padding-left: 16px;
   padding-right: 16px;
@@ -164,45 +145,37 @@
 .nut-form-item {
   display: flex;
 }
-
-.nut-form-item.error.line::before {
-  border-bottom: 1px solid #ff0f23;
-  transform: scaleX(1);
-  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-
 .nut-form-item-label {
+  display: flex;
+  flex-direction: row;
   font-size: 14px;
   font-weight: normal;
   width: 90px;
   margin-right: 10px;
   flex: 0 0 auto;
-  display: inline-block;
   word-wrap: break-word;
   text-align: left;
 }
-
-.nut-form-item-label .required::before {
-  content: "*";
+.nut-form-item-label-required {
   color: #ff0f23;
   margin-right: 4px;
 }
-
+.nut-form-item .nut-form-item-labeltxt {
+  font-size: 12px;
+  height: 10px;
+}
 .nut-form-item-body {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-
 .nut-form-item-body-slots {
   text-align: left;
 }
-
 .nut-form-item-body-slots .nut-input {
   padding: 0;
   border: 0;
 }
-
 .nut-form-item-body-slots .nut-input-text {
   font-size: 14px;
   text-align: left;
@@ -213,20 +186,16 @@
   text-decoration: none;
   background: transparent;
 }
-
 .nut-form-item-body-slots .nut-range-container {
   min-height: 24px;
 }
-
 .nut-form-item-body-slots .nut-textarea {
   padding: 0;
 }
-
 .nut-form-item-body-slots .nut-textarea .nut-textarea-textarea {
   font: inherit;
   text-align: left;
 }
-
 .nut-form-item-body-tips {
   text-align: left;
   font-size: 10px;
@@ -244,77 +213,70 @@
   margin-right: 0;
   margin-left: 10px;
 }
-
 [dir=rtl] .nut-form-item-label .required::before {
   margin-right: 0;
   margin-left: 4px;
 }
-
 .nut-rtl .nut-form-item-label .required::before {
   margin-right: 0;
   margin-left: 4px;
 }
-
 [dir=rtl] .nut-form-item-body-slots,
 .nut-rtl .nut-form-item-body-slots {
   text-align: right;
 }
-
 [dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowRight,
 [dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowLeft,
 .nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight,
 .nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft {
   transform: rotateY(180deg);
 }
-
 [dir=rtl] .nut-form-item-body-slots .nut-input-text,
 .nut-rtl .nut-form-item-body-slots .nut-input-text {
   text-align: right;
 }
-
 [dir=rtl] .nut-form-item-body-slots .nut-textarea-textarea,
 .nut-rtl .nut-form-item-body-slots .nut-textarea-textarea {
   text-align: right;
 }
-
 [dir=rtl] .nut-form-item-tips,
 .nut-rtl .nut-form-item-tips {
   text-align: right;
 }
 
-.form-layout-right .nut-form-item-label {
-  text-align: right;
+/* position */
+.nut-form-item-label-right {
+  justify-content: flex-end;
   padding-right: 24px;
   white-space: nowrap;
 }
 
-.form-layout-left .nut-form-item-label {
+.nut-form-item-label-left {
   position: relative;
-  text-align: left;
   padding-left: 12px;
   white-space: nowrap;
 }
 
-.form-layout-left .nut-form-item-label .required {
+.nut-form-item-label-left-required {
   display: block;
   line-height: 1.5;
   position: absolute;
   left: 0.1em;
 }
 
-.form-layout-top .nut-form-item {
+.nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;
   white-space: nowrap;
 }
 
-.form-layout-top .nut-form-item-label {
-  padding-bottom: 4px;
+.nut-form-item-label-top {
   display: block;
+  padding-bottom: 4px;
   padding-right: 24px;
 }
 
-.form-layout-top .nut-form-item-body {
+.nut-form-item-body-top {
   margin-left: 0;
   width: 100%;
 }
@@ -332,7 +294,6 @@
   padding-left: 0;
   padding-right: 12px;
 }
-
 [dir=rtl] .form-layout-left .nut-form-item-label .required,
 .nut-rtl .form-layout-left .nut-form-item-label .required {
   left: auto;
diff --git a/src/packages/form/form.scss b/src/packages/form/form.scss
index b4374f71e4..5cabfe1cd1 100644
--- a/src/packages/form/form.scss
+++ b/src/packages/form/form.scss
@@ -1,71 +1,3 @@
 @import '../cellgroup/cellgroup.scss';
 @import '../cell/cell.scss';
 @import '../formitem/formitem.scss';
-
-.form-layout-right .nut-form-item-label {
-  text-align: right;
-  padding-right: 24px;
-  white-space: nowrap;
-}
-
-.form-layout-left .nut-form-item-label {
-  position: relative;
-  text-align: left;
-  padding-left: 12px;
-  white-space: nowrap;
-
-  .required {
-    display: block;
-    line-height: 1.5;
-    position: absolute;
-    left: 0.1em;
-  }
-}
-
-.form-layout-top .nut-form-item {
-  flex-direction: column;
-  align-items: flex-start;
-  white-space: nowrap;
-}
-
-.form-layout-top .nut-form-item-label {
-  padding-bottom: 4px;
-  display: block;
-  padding-right: 24px;
-}
-
-.form-layout-top .nut-form-item-body {
-  margin-left: 0;
-  width: 100%;
-}
-
-[dir='rtl'] .form-layout-right .nut-form-item-label,
-.nut-rtl .form-layout-right .nut-form-item-label {
-  text-align: left;
-  padding-right: 0;
-  padding-left: 24px;
-}
-
-[dir='rtl'] .form-layout-left .nut-form-item-label,
-.nut-rtl .form-layout-left .nut-form-item-label {
-  text-align: right;
-  padding-left: 0;
-  padding-right: 12px;
-
-  .required {
-    left: auto;
-    right: 0.1em;
-  }
-}
-
-[dir='rtl'] .form-layout-top .nut-form-item-label,
-.nut-rtl .form-layout-top .nut-form-item-label {
-  padding-right: 0;
-  padding-left: 24px;
-}
-
-[dir='rtl'] .form-layout-top .nut-form-item-body,
-.nut-rtl .form-layout-top .nut-form-item-body {
-  margin-left: 0;
-  margin-right: 0;
-}
diff --git a/src/packages/form/form.taro.tsx b/src/packages/form/form.taro.tsx
index b3b3e6edd5..2eb0a5a975 100644
--- a/src/packages/form/form.taro.tsx
+++ b/src/packages/form/form.taro.tsx
@@ -97,7 +97,9 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={formInstance}>{children}</Context.Provider>
+          <Context.Provider value={{ formInstance, labelPosition }}>
+            {children}
+          </Context.Provider>
           {footer ? (
             <Cell className={`${classPrefix}-footer`}>{footer}</Cell>
           ) : null}
diff --git a/src/packages/form/form.tsx b/src/packages/form/form.tsx
index caf6331332..950f744e3c 100644
--- a/src/packages/form/form.tsx
+++ b/src/packages/form/form.tsx
@@ -96,7 +96,9 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={formInstance}>{children}</Context.Provider>
+          <Context.Provider value={{ formInstance, labelPosition }}>
+            {children}
+          </Context.Provider>
           {footer ? (
             <Cell className={`${classPrefix}-footer`}>{footer}</Cell>
           ) : null}
diff --git a/src/packages/formitem/formitem.harmony.css b/src/packages/formitem/formitem.harmony.css
index bfa4b100b3..66cb243b9b 100644
--- a/src/packages/formitem/formitem.harmony.css
+++ b/src/packages/formitem/formitem.harmony.css
@@ -1,26 +1,25 @@
 .nut-form-item {
   display: flex;
 }
-.nut-form-item.error.line::before {
-  border-bottom: 1px solid #ff0f23;
-  transform: scaleX(1);
-  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
 .nut-form-item-label {
+  display: flex;
+  flex-direction: row;
   font-size: 14px;
   font-weight: normal;
   width: 90px;
   margin-right: 10px;
   flex: 0 0 auto;
-  display: inline-block;
   word-wrap: break-word;
   text-align: left;
 }
-.nut-form-item-label .required::before {
-  content: "*";
+.nut-form-item-label-required {
   color: #ff0f23;
   margin-right: 4px;
 }
+.nut-form-item .nut-form-item-labeltxt {
+  font-size: 12px;
+  height: 10px;
+}
 .nut-form-item-body {
   flex: 1;
   display: flex;
@@ -99,4 +98,72 @@
 [dir=rtl] .nut-form-item-tips,
 .nut-rtl .nut-form-item-tips {
   text-align: right;
+}
+
+/* position */
+.nut-form-item-label-right {
+  justify-content: flex-end;
+  padding-right: 24px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left {
+  position: relative;
+  padding-left: 12px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left-required {
+  display: block;
+  line-height: 1.5;
+  position: absolute;
+  left: 0.1em;
+}
+
+.nut-form-item-top {
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-top {
+  display: block;
+  padding-bottom: 4px;
+  padding-right: 24px;
+}
+
+.nut-form-item-body-top {
+  margin-left: 0;
+  width: 100%;
+}
+
+[dir=rtl] .form-layout-right .nut-form-item-label,
+.nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir=rtl] .form-layout-left .nut-form-item-label,
+.nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
+  padding-left: 0;
+  padding-right: 12px;
+}
+[dir=rtl] .form-layout-left .nut-form-item-label .required,
+.nut-rtl .form-layout-left .nut-form-item-label .required {
+  left: auto;
+  right: 0.1em;
+}
+
+[dir=rtl] .form-layout-top .nut-form-item-label,
+.nut-rtl .form-layout-top .nut-form-item-label {
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir=rtl] .form-layout-top .nut-form-item-body,
+.nut-rtl .form-layout-top .nut-form-item-body {
+  margin-left: 0;
+  margin-right: 0;
 }
\ No newline at end of file
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 71d5ab668d..0ab8a55d6c 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -1,35 +1,26 @@
 .nut-form-item {
   display: flex;
 
-  &.error {
-    &.line {
-      &::before {
-        border-bottom: 1px solid $form-item-error-line-color;
-        transform: scaleX(1);
-        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-      }
-    }
-  }
-
   &-label {
+    display: flex;
+    flex-direction: row;
     font-size: $form-item-label-font-size;
     font-weight: normal;
     width: $form-item-label-width;
     margin-right: $form-item-label-margin-right;
     flex: 0 0 auto;
-    display: inline-block;
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
-
-    .required {
-      &::before {
-        content: '*';
-        color: $form-item-required-color;
-        margin-right: $form-item-required-margin-right;
-      }
-    }
   }
 
+  &-label-required {
+    color: $form-item-required-color;
+    margin-right: $form-item-required-margin-right;
+  }
+  .nut-form-item-labeltxt {
+    font-size: 12px;
+    height: 10px;
+  }
   &-body {
     flex: 1;
     display: flex;
@@ -60,7 +51,6 @@
 
       .nut-textarea {
         padding: 0;
-
         .nut-textarea-textarea {
           font: inherit;
           text-align: $form-item-body-input-text-align;
@@ -75,6 +65,7 @@
     }
   }
 }
+
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {
@@ -108,3 +99,72 @@
     text-align: right;
   }
 }
+
+/* position */
+
+.nut-form-item-label-right {
+  justify-content: flex-end;
+  padding-right: 24px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left {
+  position: relative;
+  padding-left: 12px;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-left-required {
+  display: block;
+  line-height: 1.5;
+  position: absolute;
+  left: 0.1em;
+}
+
+.nut-form-item-top {
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: nowrap;
+}
+
+.nut-form-item-label-top {
+  display: block;
+  padding-bottom: 4px;
+  padding-right: 24px;
+}
+
+.nut-form-item-body-top {
+  margin-left: 0;
+  width: 100%;
+}
+
+[dir='rtl'] .form-layout-right .nut-form-item-label,
+.nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir='rtl'] .form-layout-left .nut-form-item-label,
+.nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
+  padding-left: 0;
+  padding-right: 12px;
+
+  .required {
+    left: auto;
+    right: 0.1em;
+  }
+}
+
+[dir='rtl'] .form-layout-top .nut-form-item-label,
+.nut-rtl .form-layout-top .nut-form-item-label {
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+[dir='rtl'] .form-layout-top .nut-form-item-body,
+.nut-rtl .form-layout-top .nut-form-item-body {
+  margin-left: 0;
+  margin-right: 0;
+}
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index e1d70ef89b..689bfb0501 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -58,6 +58,7 @@ export class FormItem extends React.Component<
 
   static contextType = Context
 
+  // @ts-ignore
   context!: React.ContextType<typeof Context>
 
   private cancelRegister: any
@@ -76,7 +77,8 @@ export class FormItem extends React.Component<
 
   componentDidMount() {
     // Form设置initialValues时的处理
-    const { store = {}, setInitialValues } = this.context.getInternal(SECRET)
+    const { store = {}, setInitialValues } =
+      this.context.formInstance.getInternal(SECRET)
     if (
       this.props.initialValue &&
       this.props.name &&
@@ -88,7 +90,8 @@ export class FormItem extends React.Component<
       )
     }
     // 注册组件实例到FormStore
-    const { registerField, registerUpdate } = this.context.getInternal(SECRET)
+    const { registerField, registerUpdate } =
+      this.context.formInstance.getInternal(SECRET)
     this.cancelRegister = registerField(this)
     // 这里需要增加事件监听，因为此实现属于依赖触发
     this.eventOff = registerUpdate(this, this.props.shouldUpdate)
@@ -105,8 +108,8 @@ export class FormItem extends React.Component<
 
   // children添加value属性和onChange事件
   getControlled = (children: React.ReactElement) => {
-    const { setFieldsValue, getFieldValue } = this.context
-    const { dispatch } = this.context.getInternal(SECRET)
+    const { setFieldsValue, getFieldValue } = this.context.formInstance
+    const { dispatch } = this.context.formInstance.getInternal(SECRET)
     const { name = '' } = this.props
 
     if (children?.props?.defaultValue) {
@@ -116,6 +119,7 @@ export class FormItem extends React.Component<
     const fieldValue = getFieldValue(name)
     const controlled = {
       ...children.props,
+      className: classNames('a', children.props.className),
       [this.props.valuePropName || 'value']:
         fieldValue !== undefined ? fieldValue : this.props.initialValue,
       [this.props.trigger || 'onChange']: (...args: any) => {
@@ -181,13 +185,20 @@ export class FormItem extends React.Component<
 
   onStoreChange = (type?: string) => {
     if (type === 'reset') {
-      this.context.errors[this.props.name as string] = []
+      this.context.formInstance.errors[this.props.name as string] = []
       this.refresh()
     } else {
       this.forceUpdate()
     }
   }
 
+  getClassNameWithDirection(className: string) {
+    if (className && this.context.labelPosition) {
+      return `${className} ${className}-${this.context.labelPosition}`
+    }
+    return className
+  }
+
   renderLayout = (childNode: React.ReactNode) => {
     const {
       label,
@@ -204,22 +215,22 @@ export class FormItem extends React.Component<
     }
     const requiredInRules = rules?.some((rule: any) => rule.required)
 
-    const item = name ? this.context.errors[name] : []
+    const item = name ? this.context.formInstance.errors[name] : []
 
-    const { starPosition } = this.context
+    const { starPosition } = this.context.formInstance
     const renderStar = (required || requiredInRules) && (
-      <View className="required" />
+      <Text className="nut-form-item-label-required">*</Text>
     )
     const renderLabel = (
       <>
         {starPosition === 'left' ? renderStar : null}
-        <Text>{label}</Text>
+        <Text className="nut-form-item-labeltxt">{label}</Text>
         {starPosition === 'right' ? renderStar : null}
       </>
     )
     return (
       <Cell
-        className={`nut-form-item ${className}`}
+        className={`${this.getClassNameWithDirection('nut-form-item')} ${className}`}
         style={style}
         align={align}
         onClick={(e) =>
@@ -227,11 +238,15 @@ export class FormItem extends React.Component<
         }
       >
         {label ? (
-          <View className="nut-cell-title nut-form-item-label">
+          <View
+            className={`nut-cell-title ${this.getClassNameWithDirection('nut-form-item-label')}`}
+          >
             {renderLabel}
           </View>
         ) : null}
-        <View className="nut-cell-value nut-form-item-body">
+        <View
+          className={`nut-cell-value ${this.getClassNameWithDirection('nut-form-item-body')}`}
+        >
           <View className="nut-form-item-body-slots">{childNode}</View>
           <View
             className="nut-form-item-body-tips"
@@ -250,6 +265,7 @@ export class FormItem extends React.Component<
   render() {
     const { children } = this.props
     const child = Array.isArray(children) ? children[0] : children
+    console.log('testtest', child)
     let returnChildNode
     if (!this.props.shouldUpdate) {
       returnChildNode = React.cloneElement(
@@ -257,7 +273,7 @@ export class FormItem extends React.Component<
         this.getControlled(child as React.ReactElement)
       )
     } else {
-      returnChildNode = child(this.context)
+      returnChildNode = child(this.context.formInstance)
     }
     return (
       <React.Fragment key={this.state.resetCount}>
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
index 8ccd66f007..1c3ca7b579 100644
--- a/src/packages/formitem/formitem.tsx
+++ b/src/packages/formitem/formitem.tsx
@@ -57,7 +57,7 @@ export class FormItem extends React.Component<
 
   static contextType: any = Context
 
-  declare context: React.ContextType<typeof Context>
+  context!: React.ContextType<typeof Context>
 
   private cancelRegister: any
 
@@ -75,7 +75,8 @@ export class FormItem extends React.Component<
 
   componentDidMount() {
     // Form设置initialValues时的处理
-    const { store = {}, setInitialValues } = this.context.getInternal(SECRET)
+    const { store = {}, setInitialValues } =
+      this.context.formInstance.getInternal(SECRET)
     if (
       this.props.initialValue &&
       this.props.name &&
@@ -87,7 +88,8 @@ export class FormItem extends React.Component<
       )
     }
     // 注册组件实例到FormStore
-    const { registerField, registerUpdate } = this.context.getInternal(SECRET)
+    const { registerField, registerUpdate } =
+      this.context.formInstance.getInternal(SECRET)
     this.cancelRegister = registerField(this)
     // 这里需要增加事件监听，因为此实现属于依赖触发
     this.eventOff = registerUpdate(this, this.props.shouldUpdate)
@@ -104,8 +106,8 @@ export class FormItem extends React.Component<
 
   // children添加value属性和onChange事件
   getControlled = (children: React.ReactElement) => {
-    const { setFieldsValue, getFieldValue } = this.context
-    const { dispatch } = this.context.getInternal(SECRET)
+    const { setFieldsValue, getFieldValue } = this.context.formInstance
+    const { dispatch } = this.context.formInstance.getInternal(SECRET)
     const { name = '' } = this.props
 
     if (children?.props?.defaultValue) {
@@ -179,13 +181,20 @@ export class FormItem extends React.Component<
 
   onStoreChange = (type?: string) => {
     if (type === 'reset') {
-      this.context.errors[this.props.name as string] = []
+      this.context.formInstance.errors[this.props.name as string] = []
       this.refresh()
     } else {
       this.forceUpdate()
     }
   }
 
+  getClassNameWithDirection(className: string) {
+    if (className && this.context.labelPosition) {
+      return `${className} ${className}-${this.context.labelPosition}`
+    }
+    return className
+  }
+
   renderLayout = (childNode: React.ReactNode) => {
     const {
       label,
@@ -202,22 +211,22 @@ export class FormItem extends React.Component<
     }
     const requiredInRules = rules?.some((rule: any) => rule.required)
 
-    const item = name ? this.context.errors[name] : []
+    const item = name ? this.context.formInstance.errors[name] : []
 
-    const { starPosition } = this.context
+    const { starPosition } = this.context.formInstance
     const renderStar = (required || requiredInRules) && (
-      <i className="required" />
+      <div className="nut-form-item-label-required">*</div>
     )
     const renderLabel = (
       <>
         {starPosition === 'left' ? renderStar : null}
-        {label}
+        <span className="nut-form-item-labeltxt">{label}</span>
         {starPosition === 'right' ? renderStar : null}
       </>
     )
     return (
       <Cell
-        className={`nut-form-item ${className}`}
+        className={`${this.getClassNameWithDirection('nut-form-item')} ${className}`}
         style={style}
         align={align}
         onClick={(e) =>
@@ -225,11 +234,15 @@ export class FormItem extends React.Component<
         }
       >
         {label ? (
-          <div className="nut-cell-title nut-form-item-label">
+          <div
+            className={`nut-cell-title ${this.getClassNameWithDirection('nut-form-item-label')}`}
+          >
             {renderLabel}
           </div>
         ) : null}
-        <div className="nut-cell-value nut-form-item-body">
+        <div
+          className={`nut-cell-value ${this.getClassNameWithDirection('nut-form-item-body')}`}
+        >
           <div className="nut-form-item-body-slots">{childNode}</div>
           {item && item.length > 0 && (
             <div
@@ -254,7 +267,7 @@ export class FormItem extends React.Component<
         this.getControlled(child as React.ReactElement)
       )
     } else {
-      returnChildNode = child(this.context)
+      returnChildNode = child(this.context.formInstance)
     }
     return (
       <React.Fragment key={this.state.resetCount}>

From 737de11df13e5bf31d5491414e285fbde99126b4 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Mon, 4 Nov 2024 15:58:28 +0800
Subject: [PATCH 04/11] chore: merge v3.0

---
 packages/nutui-harmony/build-profile.json5    | 10 +---------
 packages/nutui-harmony/entry/oh-package.json5 |  5 ++++-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/nutui-harmony/build-profile.json5 b/packages/nutui-harmony/build-profile.json5
index 896ca4763a..258faaeeed 100644
--- a/packages/nutui-harmony/build-profile.json5
+++ b/packages/nutui-harmony/build-profile.json5
@@ -4,15 +4,7 @@
       {
         "name": "default",
         "type": "HarmonyOS",
-        "material": {
-          "certpath": "/Users/tongen/.ohos/config/default_nutui-harmony_PK697Wu5mnc6ZwkFy1SeSNQa86VdzjbAFwDwqKdj-o0=.cer",
-          "storePassword": "0000001B1D7AA645FFDC09EF80DB9127EE1487532F04045B7C357F80025FC2F69AAB86F59959BFF647D2ED",
-          "keyAlias": "debugKey",
-          "keyPassword": "0000001B3046DD1422DFC16BA1BA8DF23A9D04C17FE2AA1CE5E27F1B3BBD036890625D4F51086AC2A4B3D2",
-          "profile": "/Users/tongen/.ohos/config/default_nutui-harmony_PK697Wu5mnc6ZwkFy1SeSNQa86VdzjbAFwDwqKdj-o0=.p7b",
-          "signAlg": "SHA256withECDSA",
-          "storeFile": "/Users/tongen/.ohos/config/default_nutui-harmony_PK697Wu5mnc6ZwkFy1SeSNQa86VdzjbAFwDwqKdj-o0=.p12"
-        }
+        "material": {}
       }
     ],
     "products": [
diff --git a/packages/nutui-harmony/entry/oh-package.json5 b/packages/nutui-harmony/entry/oh-package.json5
index 18769f0fd3..87538b627e 100644
--- a/packages/nutui-harmony/entry/oh-package.json5
+++ b/packages/nutui-harmony/entry/oh-package.json5
@@ -5,6 +5,9 @@
   "main": "",
   "author": "",
   "license": "",
-  "dependencies": {},
+  "dependencies": {
+    "@jd-oh/taro_library": "2.0.70",
+    "@jd-oh/taro_cpp_library": "0.0.88-beta.0"
+  },
   "devDependencies": {}
 }

From 145ea65cfda78170a0ecacf2331af3fffb580b4d Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 5 Nov 2024 14:41:53 +0800
Subject: [PATCH 05/11] feat: add the `disabled` attribute, `setFieldsValue`
 should not trigger validation

---
 src/packages/form/form.taro.tsx         |   5 +-
 src/packages/form/form.tsx              |   5 +-
 src/packages/form/useform.taro.ts       |  34 ++++----
 src/packages/form/useform.ts            | 107 +++++++++++++-----------
 src/packages/formitem/formitem.scss     |   5 ++
 src/packages/formitem/formitem.taro.tsx |  22 +++--
 src/packages/formitem/formitem.tsx      |  17 ++--
 src/utils/merge.ts                      |  29 +++++++
 8 files changed, 146 insertions(+), 78 deletions(-)
 create mode 100644 src/utils/merge.ts

diff --git a/src/packages/form/form.taro.tsx b/src/packages/form/form.taro.tsx
index 2eb0a5a975..fcfc7af76b 100644
--- a/src/packages/form/form.taro.tsx
+++ b/src/packages/form/form.taro.tsx
@@ -12,6 +12,7 @@ export interface FormProps extends BasicComponent {
   initialValues: any
   name: string
   form: any
+  disabled: boolean
   divider: boolean
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
@@ -23,6 +24,7 @@ const defaultProps = {
   ...ComponentDefaults,
   labelPosition: 'right',
   starPosition: 'left',
+  disabled: false,
   divider: false,
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
@@ -44,6 +46,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       children,
       initialValues,
       divider,
+      disabled,
       onFinish,
       onFinishFailed,
       labelPosition,
@@ -97,7 +100,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={{ formInstance, labelPosition }}>
+          <Context.Provider value={{ formInstance, labelPosition, disabled }}>
             {children}
           </Context.Provider>
           {footer ? (
diff --git a/src/packages/form/form.tsx b/src/packages/form/form.tsx
index 950f744e3c..22f4079b4f 100644
--- a/src/packages/form/form.tsx
+++ b/src/packages/form/form.tsx
@@ -11,6 +11,7 @@ export interface FormProps extends BasicComponent {
   initialValues: any
   name: string
   form: any
+  disabled: boolean
   divider: boolean
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
@@ -22,6 +23,7 @@ const defaultProps = {
   ...ComponentDefaults,
   labelPosition: 'right',
   starPosition: 'left',
+  disabled: false,
   divider: false,
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
@@ -43,6 +45,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       children,
       initialValues,
       divider,
+      disabled,
       onFinish,
       onFinishFailed,
       labelPosition,
@@ -96,7 +99,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={{ formInstance, labelPosition }}>
+          <Context.Provider value={{ formInstance, labelPosition, disabled }}>
             {children}
           </Context.Provider>
           {footer ? (
diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts
index be4ca8b3de..d29cd672ec 100644
--- a/src/packages/form/useform.taro.ts
+++ b/src/packages/form/useform.taro.ts
@@ -1,11 +1,12 @@
 import { useRef } from 'react'
 import Schema from 'async-validator'
+import { merge } from '@/utils/merge'
 import {
-  Store,
   Callbacks,
-  FormInstance,
   FormFieldEntity,
+  FormInstance,
   NamePath,
+  Store,
 } from './types'
 
 export const SECRET = 'NUT_FORM_INTERNAL'
@@ -74,16 +75,22 @@ class FormStore {
     return fieldsValue
   }
 
+  updateStore(nextStore: Store) {
+    this.store = nextStore
+  }
+
   /**
    * 设置 form 的初始值，之后在 reset 的时候使用
    * @param values
    * @param init
    */
 
-  setInitialValues = (values: Store, init: boolean) => {
+  setInitialValues = (initialValues: Store, init: boolean) => {
+    this.initialValues = initialValues || {}
     if (init) {
-      this.initialValues = values
-      this.store = values
+      const nextStore = merge(initialValues, this.store)
+      this.updateStore(nextStore)
+      console.log(this.store === this.initialValues)
     }
   }
 
@@ -91,11 +98,9 @@ class FormStore {
    * 存储组件数据
    * @param newStore { [name]: newValue }
    */
-  setFieldsValue = (newStore: any, needValidate = true) => {
-    this.store = {
-      ...this.store,
-      ...newStore,
-    }
+  setFieldsValue = (newStore: any) => {
+    const nextStore = merge(this.store, newStore)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       const { name } = entity.props
       Object.keys(newStore).forEach((key) => {
@@ -113,7 +118,6 @@ class FormStore {
         item.entity.onStoreChange('update')
       }
     })
-    needValidate && this.validateFields()
   }
 
   setCallback = (callback: Callbacks) => {
@@ -142,7 +146,7 @@ class FormStore {
     // validator.messages()
     try {
       await validator.validate({ [name]: this.store?.[name] })
-    } catch ({ errors }: any) {
+    } catch ({ errors }) {
       if (errors) {
         errs.push(...(errors as any[]))
         this.errors[name] = errors
@@ -186,7 +190,9 @@ class FormStore {
 
   resetFields = () => {
     this.errors.length = 0
-    this.store = this.initialValues
+    const nextStore = merge({}, this.initialValues)
+    console.log('xxx', nextStore, this.initialValues)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       entity.onStoreChange('reset')
     })
@@ -244,6 +250,6 @@ export const useForm = (form?: FormInstance): [FormInstance] => {
       const formStore = new FormStore()
       formRef.current = formStore.getForm() as FormInstance
     }
+    return [formRef.current as FormInstance]
   }
-  return [formRef.current]
 }
diff --git a/src/packages/form/useform.ts b/src/packages/form/useform.ts
index 2b2b413a3b..884c6bb89a 100644
--- a/src/packages/form/useform.ts
+++ b/src/packages/form/useform.ts
@@ -1,11 +1,12 @@
 import { useRef } from 'react'
 import Schema from 'async-validator'
+import { merge } from '@/utils/merge'
 import {
-  Store,
   Callbacks,
-  FormInstance,
   FormFieldEntity,
+  FormInstance,
   NamePath,
+  Store,
 } from './types'
 
 export const SECRET = 'NUT_FORM_INTERNAL'
@@ -74,16 +75,21 @@ class FormStore {
     return fieldsValue
   }
 
+  updateStore(nextStore: Store) {
+    this.store = nextStore
+  }
+
   /**
    * 设置 form 的初始值，之后在 reset 的时候使用
    * @param values
    * @param init
    */
 
-  setInitialValues = (values: Store, init: boolean) => {
+  setInitialValues = (initialValues: Store, init: boolean) => {
+    this.initialValues = initialValues || {}
     if (init) {
-      this.initialValues = values
-      this.store = values
+      const nextStore = merge(initialValues, this.store)
+      this.updateStore(nextStore)
     }
   }
 
@@ -91,11 +97,9 @@ class FormStore {
    * 存储组件数据
    * @param newStore { [name]: newValue }
    */
-  setFieldsValue = (newStore: any, needValidate = true) => {
-    this.store = {
-      ...this.store,
-      ...newStore,
-    }
+  setFieldsValue = (newStore: any) => {
+    const nextStore = merge(this.store, newStore)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       const { name } = entity.props
       Object.keys(newStore).forEach((key) => {
@@ -113,7 +117,6 @@ class FormStore {
         item.entity.onStoreChange('update')
       }
     })
-    needValidate && this.validateFields()
   }
 
   setCallback = (callback: Callbacks) => {
@@ -123,48 +126,55 @@ class FormStore {
     }
   }
 
+  validateEntities = async (entity: FormFieldEntity, errs: any[]) => {
+    const { name, rules = [] } = entity.props
+    const descriptor: any = {}
+    if (rules.length) {
+      // 多条校验规则
+      if (rules.length > 1) {
+        descriptor[name] = []
+        rules.forEach((v: any) => {
+          descriptor[name].push(v)
+        })
+      } else {
+        descriptor[name] = rules[0]
+      }
+    }
+    const validator = new Schema(descriptor)
+    // 此处合并无值message 没有意义？
+    // validator.messages()
+    try {
+      await validator.validate({ [name]: this.store?.[name] })
+    } catch ({ errors }) {
+      if (errors) {
+        errs.push(...(errors as any[]))
+        this.errors[name] = errors
+      }
+    } finally {
+      if (!errs || errs.length === 0) {
+        this.errors[name] = []
+      }
+    }
+
+    entity.onStoreChange('validate')
+  }
+
   validateFields = async (nameList?: NamePath[]) => {
-    let filterEntitys = []
-    const errs = []
+    let filterEntities = []
     this.errors.length = 0
     if (!nameList || nameList.length === 0) {
-      filterEntitys = this.fieldEntities
+      filterEntities = this.fieldEntities
     } else {
-      filterEntitys = this.fieldEntities.filter(({ props: { name } }) =>
+      filterEntities = this.fieldEntities.filter(({ props: { name } }) =>
         nameList.includes(name)
       )
     }
-    for (const entity of filterEntitys) {
-      const { name, rules = [] } = entity.props
-      const descriptor: any = {}
-      if (rules.length) {
-        // 多条校验规则
-        if (rules.length > 1) {
-          descriptor[name] = []
-          rules.forEach((v: any) => {
-            descriptor[name].push(v)
-          })
-        } else {
-          descriptor[name] = rules[0]
-        }
-      }
-      const validator = new Schema(descriptor)
-      // 此处合并无值message 没有意义？
-      // validator.messages()
-      try {
-        await validator.validate({ [name]: this.store?.[name] })
-      } catch ({ errors }: any) {
-        if (errors) {
-          errs.push(...(errors as any[]))
-          this.errors[name] = errors
-        }
-      } finally {
-        if (!errs || errs.length === 0) {
-          this.errors[name] = []
-        }
-      }
-      entity.onStoreChange('validate')
-    }
+    const errs: any[] = []
+    await Promise.all(
+      filterEntities.map(async (entity) => {
+        await this.validateEntities(entity, errs)
+      })
+    )
     return errs
   }
 
@@ -179,7 +189,8 @@ class FormStore {
 
   resetFields = () => {
     this.errors.length = 0
-    this.store = this.initialValues
+    const nextStore = merge({}, this.initialValues)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       entity.onStoreChange('reset')
     })
@@ -237,6 +248,6 @@ export const useForm = (form?: FormInstance): [FormInstance] => {
       const formStore = new FormStore()
       formRef.current = formStore.getForm() as FormInstance
     }
+    return [formRef.current as FormInstance]
   }
-  return [formRef.current]
 }
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 0ab8a55d6c..dcd497071b 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -1,6 +1,11 @@
 .nut-form-item {
   display: flex;
 
+  &-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
   &-label {
     display: flex;
     flex-direction: row;
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 6a088b6e31..65be5e11b9 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import { View, Text } from '@tarojs/components'
+import { Text, View } from '@tarojs/components'
 import { BaseFormField } from './types'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell/index.taro'
@@ -56,9 +56,8 @@ export class FormItem extends React.Component<
 > {
   static defaultProps = defaultProps
 
-  static contextType = Context
+  static contextType: any = Context
 
-  // @ts-ignore
   context!: React.ContextType<typeof Context>
 
   private cancelRegister: any
@@ -134,7 +133,7 @@ export class FormItem extends React.Component<
         if (this.props.getValueFromEvent) {
           next = this.props.getValueFromEvent(...args)
         }
-        setFieldsValue({ [name]: next }, false)
+        setFieldsValue({ [name]: next })
       },
     }
     const { validateTrigger } = this.props
@@ -207,8 +206,8 @@ export class FormItem extends React.Component<
       rules,
       className,
       style,
-      align,
       errorMessageAlign,
+      align,
     } = {
       ...defaultProps,
       ...this.props,
@@ -265,7 +264,6 @@ export class FormItem extends React.Component<
   render() {
     const { children } = this.props
     const child = Array.isArray(children) ? children[0] : children
-    console.log('testtest', child)
     let returnChildNode
     if (!this.props.shouldUpdate) {
       returnChildNode = React.cloneElement(
@@ -275,11 +273,17 @@ export class FormItem extends React.Component<
     } else {
       returnChildNode = child(this.context.formInstance)
     }
+
     return (
       <React.Fragment key={this.state.resetCount}>
-        {this.props.noStyle
-          ? returnChildNode
-          : this.renderLayout(returnChildNode)}
+        <View
+          className={this.context.disabled ? 'nut-form-item-disabled' : ''}
+          catchMove={this.context.disabled}
+        >
+          {this.props.noStyle
+            ? returnChildNode
+            : this.renderLayout(returnChildNode)}
+        </View>
       </React.Fragment>
     )
   }
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
index 1c3ca7b579..52de1666e3 100644
--- a/src/packages/formitem/formitem.tsx
+++ b/src/packages/formitem/formitem.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { CSSProperties, ReactNode } from 'react'
 import { BaseFormField } from './types'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell'
@@ -113,9 +113,11 @@ export class FormItem extends React.Component<
     if (children?.props?.defaultValue) {
       console.warn('通过 initialValue 设置初始值')
     }
+
     const fieldValue = getFieldValue(name)
     const controlled = {
       ...children.props,
+      className: children.props.className,
       [this.props.valuePropName || 'value']:
         fieldValue !== undefined ? fieldValue : this.props.initialValue,
       [this.props.trigger || 'onChange']: (...args: any) => {
@@ -130,7 +132,7 @@ export class FormItem extends React.Component<
         if (this.props.getValueFromEvent) {
           next = this.props.getValueFromEvent(...args)
         }
-        setFieldsValue({ [name]: next }, false)
+        setFieldsValue({ [name]: next })
       },
     }
     const { validateTrigger } = this.props
@@ -269,11 +271,16 @@ export class FormItem extends React.Component<
     } else {
       returnChildNode = child(this.context.formInstance)
     }
+    const itemStyle: CSSProperties = this.context.disabled
+      ? { opacity: 0.4, pointerEvents: 'none' }
+      : {}
     return (
       <React.Fragment key={this.state.resetCount}>
-        {this.props.noStyle
-          ? returnChildNode
-          : this.renderLayout(returnChildNode)}
+        <div className={this.context.disabled ? 'nut-form-item-disabled' : ''}>
+          {this.props.noStyle
+            ? returnChildNode
+            : this.renderLayout(returnChildNode)}
+        </div>
       </React.Fragment>
     )
   }
diff --git a/src/utils/merge.ts b/src/utils/merge.ts
new file mode 100644
index 0000000000..0313dad81c
--- /dev/null
+++ b/src/utils/merge.ts
@@ -0,0 +1,29 @@
+export function merge(...objects) {
+  const result = Array.isArray(objects[0]) ? [] : {}
+
+  function mergeHelper(obj, path = []) {
+    for (const [key, value] of Object.entries(obj)) {
+      const newPath = [...path, key]
+
+      if (Array.isArray(value)) {
+        // Arrays are always overridden
+        result[key] = [...value]
+      } else if (typeof value === 'object' && value !== null) {
+        // Check for circular references
+        // eslint-disable-next-line no-continue
+        if (path.some((p) => p === value)) continue
+
+        // Recursively merge objects
+        if (!result[key]) result[key] = {}
+        mergeHelper(value, newPath)
+      } else {
+        // Set primitive values
+        result[key] = value
+      }
+    }
+  }
+
+  objects.filter((obj) => !!obj).forEach((obj) => mergeHelper(obj))
+
+  return result
+}

From 8a74e1d4ba94c9e010ae6d586928a950a59ff9ab Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 5 Nov 2024 15:10:45 +0800
Subject: [PATCH 06/11] feat: add setFieldValue

---
 src/packages/form/doc.en-US.md    |  3 ++-
 src/packages/form/doc.md          |  3 ++-
 src/packages/form/doc.taro.md     |  3 ++-
 src/packages/form/doc.zh-TW.md    |  3 ++-
 src/packages/form/types.ts        |  4 +++-
 src/packages/form/useform.taro.ts | 12 +++++++++---
 src/packages/form/useform.ts      | 10 +++++++++-
 7 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
index 53c3d2cedd..d17ffde59e 100644
--- a/src/packages/form/doc.en-US.md
+++ b/src/packages/form/doc.en-US.md
@@ -125,7 +125,8 @@ Form.useForm() creates a Form instance, which is used to manage all data states.
 | --- | --- | --- |
 | getFieldValue | Get the value of the corresponding field name | `(name: NamePath) => any` |
 | getFieldsValue | Get values by a set of field names. Return according to the corresponding structure. Default return mounted field value, but you can use getFieldsValue(true) to get all values | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | set field values | `(values) => void` |
+| setFieldsValue | Set the value of the form (the value will be passed directly to the form store. If you do not want the object passed in to be modified, please copy it and pass it in) | `(values) => void` |
+| setFieldValue | Set the value of the corresponding field name | `<T>(name: NamePath, value: T) => void` |
 | resetFields | Reset form prompt state | `() => void` |
 | submit | method to submit a form for validation | `Promise` |
 
diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
index ad2b2aadd3..d73436173d 100644
--- a/src/packages/form/doc.md
+++ b/src/packages/form/doc.md
@@ -124,7 +124,8 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 | --- | --- | --- |
 | getFieldValue | 获取对应字段名的值 | `(name: NamePath) => any` |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | 设置表单的值 | `(values) => void` |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` |
+| setFieldValue | 设置对应字段名的值 | `<T>(name: NamePath, value: T) => void` |
 | resetFields | 重置表单提示状态 | `() => void` |
 | submit | 提交表单进行校验的方法 | `Promise` |
 
diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
index c4cec28d2e..d92f4b4ab1 100644
--- a/src/packages/form/doc.taro.md
+++ b/src/packages/form/doc.taro.md
@@ -124,7 +124,8 @@ Form.useForm()创建 Form 实例，用于管理所有数据状态。
 | --- | --- | --- |
 | getFieldValue | 获取对应字段名的值 | `(name: NamePath) => any` |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | 设置表单的值 | `(values) => void` |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` |
+| setFieldValue | 设置对应字段名的值 | `<T>(name: NamePath, value: T) => void` |
 | resetFields | 重置表单提示状态 | `() => void` |
 | submit | 提交表单进行校验的方法 | `Promise` |
 
diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
index 741f7a0620..7a1f691913 100644
--- a/src/packages/form/doc.zh-TW.md
+++ b/src/packages/form/doc.zh-TW.md
@@ -124,7 +124,8 @@ Form.useForm()創建 Form 實例，用於管理所有數據狀態。
 | --- | --- | --- |
 | getFieldValue | 獲取對應字段名的值 | `(name: NamePath) => any` |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
-| setFieldsValue | 設置錶單的值 | `(values) => void` |
+| setFieldsValue | 設定表單的值（該值將直接傳入 form store 中。如果你不希望傳入物件被修改，請複製後傳入） | `(values) => void` |
+| setFieldValue | 設定對應欄位名的值 | `<T>(name: NamePath, value: T) => void` |
 | resetFields | 重置錶單提示狀態 | `() => void` |
 | submit | 提交錶單進行校驗的方法 | `Promise` |
 
diff --git a/src/packages/form/types.ts b/src/packages/form/types.ts
index 5b474c0dbb..e0350f8809 100644
--- a/src/packages/form/types.ts
+++ b/src/packages/form/types.ts
@@ -1,5 +1,6 @@
 export interface FormItemRuleWithoutValidator {
   [key: string]: any
+
   regex?: RegExp
   required?: boolean
   message?: string
@@ -20,8 +21,9 @@ export interface Store {
 
 export interface FormInstance<Values = any> {
   getFieldValue: (name: NamePath) => StoreValue
+  setFieldValue: <T = any>(name: NamePath, value: T) => void
   getFieldsValue: (nameList: NamePath[] | true) => { [key: NamePath]: any }
-  setFieldsValue: (value: any) => void
+  setFieldsValue: (value: Store) => void
   resetFields: (fields?: NamePath[]) => void
   submit: () => void
   getInternal: (secret: string) => any
diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts
index d29cd672ec..927a297e65 100644
--- a/src/packages/form/useform.taro.ts
+++ b/src/packages/form/useform.taro.ts
@@ -90,7 +90,6 @@ class FormStore {
     if (init) {
       const nextStore = merge(initialValues, this.store)
       this.updateStore(nextStore)
-      console.log(this.store === this.initialValues)
     }
   }
 
@@ -120,6 +119,13 @@ class FormStore {
     })
   }
 
+  setFieldValue = <T>(name: NamePath, value: T) => {
+    const store = {
+      [name]: value,
+    }
+    this.setFieldsValue(store)
+  }
+
   setCallback = (callback: Callbacks) => {
     this.callbacks = {
       ...this.callbacks,
@@ -191,7 +197,6 @@ class FormStore {
   resetFields = () => {
     this.errors.length = 0
     const nextStore = merge({}, this.initialValues)
-    console.log('xxx', nextStore, this.initialValues)
     this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       entity.onStoreChange('reset')
@@ -232,6 +237,7 @@ class FormStore {
       getFieldValue: this.getFieldValue,
       getFieldsValue: this.getFieldsValue,
       setFieldsValue: this.setFieldsValue,
+      setFieldValue: this.setFieldValue,
       resetFields: this.resetFields,
       validateFields: this.validateFields,
       submit: this.submit,
@@ -250,6 +256,6 @@ export const useForm = (form?: FormInstance): [FormInstance] => {
       const formStore = new FormStore()
       formRef.current = formStore.getForm() as FormInstance
     }
-    return [formRef.current as FormInstance]
   }
+  return [formRef.current as FormInstance]
 }
diff --git a/src/packages/form/useform.ts b/src/packages/form/useform.ts
index 884c6bb89a..927a297e65 100644
--- a/src/packages/form/useform.ts
+++ b/src/packages/form/useform.ts
@@ -119,6 +119,13 @@ class FormStore {
     })
   }
 
+  setFieldValue = <T>(name: NamePath, value: T) => {
+    const store = {
+      [name]: value,
+    }
+    this.setFieldsValue(store)
+  }
+
   setCallback = (callback: Callbacks) => {
     this.callbacks = {
       ...this.callbacks,
@@ -230,6 +237,7 @@ class FormStore {
       getFieldValue: this.getFieldValue,
       getFieldsValue: this.getFieldsValue,
       setFieldsValue: this.setFieldsValue,
+      setFieldValue: this.setFieldValue,
       resetFields: this.resetFields,
       validateFields: this.validateFields,
       submit: this.submit,
@@ -248,6 +256,6 @@ export const useForm = (form?: FormInstance): [FormInstance] => {
       const formStore = new FormStore()
       formRef.current = formStore.getForm() as FormInstance
     }
-    return [formRef.current as FormInstance]
   }
+  return [formRef.current as FormInstance]
 }

From 64a03d7500b7fa1b7396fc62b64f23f2244e3b92 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 5 Nov 2024 15:46:42 +0800
Subject: [PATCH 07/11] feat: add setFieldValue

---
 src/packages/form/doc.en-US.md          |  1 +
 src/packages/form/doc.md                |  1 +
 src/packages/form/doc.taro.md           |  1 +
 src/packages/form/doc.zh-TW.md          |  1 +
 src/packages/form/form.taro.tsx         |  7 +++-
 src/packages/form/form.tsx              |  7 +++-
 src/packages/formitem/formitem.taro.tsx | 39 ++++++++++-----------
 src/packages/formitem/formitem.tsx      | 45 +++++++++++--------------
 src/utils/to-array.ts                   |  7 ++++
 9 files changed, 61 insertions(+), 48 deletions(-)
 create mode 100644 src/utils/to-array.ts

diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
index d17ffde59e..02ac1eb0d3 100644
--- a/src/packages/form/doc.en-US.md
+++ b/src/packages/form/doc.en-US.md
@@ -80,6 +80,7 @@ import { Form } from '@nutui/nutui-react'
 | name | form name | `any` | `-` |
 | labelPosition | The position of the form item label | `top` \| `left` \| `right` | `right` |
 | starPosition | The red star position of the required form item label | `left` \| `right` | `left` |
+| validateTrigger | uniformly set the timing for fields to trigger validation | `string` \| `string[]` | `onChange` |
 | onFinish | Triggered after verification is successful | `(values: any) => void` | `-` |
 | onFinishFailed | Triggered when any form item fails validation | `(values: any, errorFields: any) => void` | `-` |
 
diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
index d73436173d..96231aede1 100644
--- a/src/packages/form/doc.md
+++ b/src/packages/form/doc.md
@@ -78,6 +78,7 @@ import { Form } from '@nutui/nutui-react'
 | name | 表单名称 | `any` | `-` |
 | labelPosition | 表单项 label 的位置 | `top` \| `left` \| `right` | `right` |
 | starPosition | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
+| validateTrigger | 统一设置字段触发验证的时机 | `string` \| `string[]` | `onChange` |
 | onFinish | 校验成功后触发 | `(values: any) => void` | `-` |
 | onFinishFailed | 任一表单项被校验失败后触发 | `(values: any, errorFields: any) => void` | `-` |
 
diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
index d92f4b4ab1..6612146ccc 100644
--- a/src/packages/form/doc.taro.md
+++ b/src/packages/form/doc.taro.md
@@ -78,6 +78,7 @@ import { Form } from '@nutui/nutui-react-taro'
 | name | 表单名称 | `any` | `-` |
 | labelPosition | 表单项 label 的位置 | \`\`'top' | 'left'\` | \`'right'\`\` |
 | starPosition | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
+| validateTrigger | 统一设置字段触发验证的时机 | `string` \| `string[]` | `onChange` |
 | onFinish | 校验成功后触发 | `(values: any) => void` | `-` |
 | onFinishFailed | 任一表单项被校验失败后触发 | `(values: any, errorFields: any) => void` | `-` |
 
diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
index 7a1f691913..330b645132 100644
--- a/src/packages/form/doc.zh-TW.md
+++ b/src/packages/form/doc.zh-TW.md
@@ -79,6 +79,7 @@ import { Form } from '@nutui/nutui-react'
 | label | 标签名 | `ReactNode` | `-` |
 | labelPosition | 錶單項 label 的位置 | `top` \| `left` \| `right` | `right` |
 | starPosition | 必填錶單項 label 的紅色星標位置 | `left` \| `right` | `left` |
+| validateTrigger | 統一設定字段觸發驗證的時機 | `string` \| `string[]` | `onChange` |
 | onFinish | 校驗成功後觸發 | `(values: any) => void` | `-` |
 | onFinishFailed | 任一錶單項被校驗失敗後觸發 | `(values: any, errorFields: any) => void` | `-` |
 
diff --git a/src/packages/form/form.taro.tsx b/src/packages/form/form.taro.tsx
index fcfc7af76b..eb71e19d76 100644
--- a/src/packages/form/form.taro.tsx
+++ b/src/packages/form/form.taro.tsx
@@ -14,6 +14,7 @@ export interface FormProps extends BasicComponent {
   form: any
   disabled: boolean
   divider: boolean
+  validateTrigger: string | string[] | false
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
   onFinish: (values: any) => void
@@ -26,6 +27,7 @@ const defaultProps = {
   starPosition: 'left',
   disabled: false,
   divider: false,
+  validateTrigger: 'onChange',
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
 } as FormProps
@@ -49,6 +51,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       disabled,
       onFinish,
       onFinishFailed,
+      validateTrigger,
       labelPosition,
       starPosition,
       form,
@@ -100,7 +103,9 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={{ formInstance, labelPosition, disabled }}>
+          <Context.Provider
+            value={{ formInstance, labelPosition, disabled, validateTrigger }}
+          >
             {children}
           </Context.Provider>
           {footer ? (
diff --git a/src/packages/form/form.tsx b/src/packages/form/form.tsx
index 22f4079b4f..5c4a9b83d5 100644
--- a/src/packages/form/form.tsx
+++ b/src/packages/form/form.tsx
@@ -13,6 +13,7 @@ export interface FormProps extends BasicComponent {
   form: any
   disabled: boolean
   divider: boolean
+  validateTrigger: string | string[] | false
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
   onFinish: (values: any) => void
@@ -25,6 +26,7 @@ const defaultProps = {
   starPosition: 'left',
   disabled: false,
   divider: false,
+  validateTrigger: 'onChange',
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
 } as FormProps
@@ -48,6 +50,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       disabled,
       onFinish,
       onFinishFailed,
+      validateTrigger,
       labelPosition,
       starPosition,
       form,
@@ -99,7 +102,9 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={{ formInstance, labelPosition, disabled }}>
+          <Context.Provider
+            value={{ formInstance, labelPosition, disabled, validateTrigger }}
+          >
             {children}
           </Context.Provider>
           {footer ? (
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 65be5e11b9..63e0e9a375 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -5,6 +5,7 @@ import { Context } from '../form/context'
 import Cell from '@/packages/cell/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { isForwardRefComponent } from '@/utils/is-forward-ref-component'
+import { toArray } from '@/utils/to-array'
 import { SECRET } from '@/packages/form/useform.taro'
 
 type TextAlign =
@@ -35,7 +36,7 @@ export interface FormItemProps
   shouldUpdate: boolean
   noStyle: boolean
   children: ReactNode | ((obj: any) => React.ReactNode)
-  align?: 'flex-start' | 'center' | 'flex-end'
+  align: 'flex-start' | 'center' | 'flex-end'
 }
 
 const defaultProps = {
@@ -45,7 +46,6 @@ const defaultProps = {
   label: '',
   rules: [{ required: false, message: '' }],
   errorMessageAlign: 'left',
-  validateTrigger: 'onChange',
   shouldUpdate: false,
   noStyle: false,
 } as FormItemProps
@@ -137,26 +137,23 @@ export class FormItem extends React.Component<
       },
     }
     const { validateTrigger } = this.props
-    let validateTriggers: string[] = [this.props.trigger || 'onChange']
-    if (validateTrigger) {
-      validateTriggers =
-        typeof validateTrigger === 'string'
-          ? [validateTrigger]
-          : [...validateTrigger]
-      validateTriggers.forEach((trigger) => {
-        const originTrigger = controlled[trigger]
-        controlled[trigger] = (...args: any) => {
-          if (originTrigger) {
-            originTrigger(...args)
-          }
-          if (this.props.rules && this.props.rules.length) {
-            dispatch({
-              name: this.props.name,
-            })
-          }
+    const mergedValidateTrigger =
+      validateTrigger || this.context.validateTrigger
+
+    const validateTriggers: string[] = toArray(mergedValidateTrigger)
+    validateTriggers.forEach((trigger) => {
+      const originTrigger = controlled[trigger]
+      controlled[trigger] = (...args: any) => {
+        if (originTrigger) {
+          originTrigger(...args)
         }
-      })
-    }
+        if (this.props.rules && this.props.rules.length) {
+          dispatch({
+            name: this.props.name,
+          })
+        }
+      }
+    })
 
     if (isForwardRefComponent(children)) {
       controlled.ref = (componentInstance: any) => {
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
index 52de1666e3..c0457f7076 100644
--- a/src/packages/formitem/formitem.tsx
+++ b/src/packages/formitem/formitem.tsx
@@ -1,9 +1,10 @@
-import React, { CSSProperties, ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 import { BaseFormField } from './types'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { isForwardRefComponent } from '@/utils/is-forward-ref-component'
+import { toArray } from '@/utils/to-array'
 import { SECRET } from '@/packages/form/useform'
 
 type TextAlign =
@@ -34,7 +35,7 @@ export interface FormItemProps
   shouldUpdate: boolean
   noStyle: boolean
   children: ReactNode | ((obj: any) => React.ReactNode)
-  align?: 'flex-start' | 'center' | 'flex-end'
+  align: 'flex-start' | 'center' | 'flex-end'
 }
 
 const defaultProps = {
@@ -44,7 +45,6 @@ const defaultProps = {
   label: '',
   rules: [{ required: false, message: '' }],
   errorMessageAlign: 'left',
-  validateTrigger: 'onChange',
   shouldUpdate: false,
   noStyle: false,
 } as FormItemProps
@@ -136,26 +136,23 @@ export class FormItem extends React.Component<
       },
     }
     const { validateTrigger } = this.props
-    let validateTriggers: string[] = [this.props.trigger || 'onChange']
-    if (validateTrigger) {
-      validateTriggers =
-        typeof validateTrigger === 'string'
-          ? [validateTrigger]
-          : [...validateTrigger]
-      validateTriggers.forEach((trigger) => {
-        const originTrigger = controlled[trigger]
-        controlled[trigger] = (...args: any) => {
-          if (originTrigger) {
-            originTrigger(...args)
-          }
-          if (this.props.rules && this.props.rules.length) {
-            dispatch({
-              name: this.props.name,
-            })
-          }
+    const mergedValidateTrigger =
+      validateTrigger || this.context.validateTrigger
+
+    const validateTriggers: string[] = toArray(mergedValidateTrigger)
+    validateTriggers.forEach((trigger) => {
+      const originTrigger = controlled[trigger]
+      controlled[trigger] = (...args: any) => {
+        if (originTrigger) {
+          originTrigger(...args)
         }
-      })
-    }
+        if (this.props.rules && this.props.rules.length) {
+          dispatch({
+            name: this.props.name,
+          })
+        }
+      }
+    })
 
     if (isForwardRefComponent(children)) {
       controlled.ref = (componentInstance: any) => {
@@ -271,9 +268,7 @@ export class FormItem extends React.Component<
     } else {
       returnChildNode = child(this.context.formInstance)
     }
-    const itemStyle: CSSProperties = this.context.disabled
-      ? { opacity: 0.4, pointerEvents: 'none' }
-      : {}
+
     return (
       <React.Fragment key={this.state.resetCount}>
         <div className={this.context.disabled ? 'nut-form-item-disabled' : ''}>
diff --git a/src/utils/to-array.ts b/src/utils/to-array.ts
new file mode 100644
index 0000000000..0e483b7625
--- /dev/null
+++ b/src/utils/to-array.ts
@@ -0,0 +1,7 @@
+export function toArray<T>(value?: T | T[] | null): T[] {
+  if (value === undefined || value === null) {
+    return []
+  }
+
+  return Array.isArray(value) ? value : [value]
+}

From 1c115773b5f1284ab0d60cf80514c596a48d3a19 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 5 Nov 2024 16:16:29 +0800
Subject: [PATCH 08/11] fix: the issue where input becomes unresponsive due to
 loss of focus

---
 src/packages/input/input.taro.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/packages/input/input.taro.tsx b/src/packages/input/input.taro.tsx
index 1f70556385..3de94e802c 100644
--- a/src/packages/input/input.taro.tsx
+++ b/src/packages/input/input.taro.tsx
@@ -241,7 +241,6 @@ export const Input = forwardRef(
           onBlur={handleBlur}
           onFocus={handleFocus}
           onInput={(e: any) => {
-            console.log('eeeeee', e.detail.value)
             handleInput((e.currentTarget || e.detail).value)
           }}
         />

From a2c1d076818702add0ec5c25b7459af5c8a2022c Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 5 Nov 2024 17:40:28 +0800
Subject: [PATCH 09/11] fix: coderabbit

---
 src/packages/form/demos/taro/demo1.tsx  | 2 +-
 src/packages/form/useform.taro.ts       | 6 ++++++
 src/packages/form/useform.ts            | 6 ++++++
 src/packages/formitem/formitem.taro.tsx | 7 ++++++-
 src/packages/formitem/formitem.tsx      | 7 ++++++-
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/packages/form/demos/taro/demo1.tsx b/src/packages/form/demos/taro/demo1.tsx
index 8a87445e9b..f430f0f2af 100644
--- a/src/packages/form/demos/taro/demo1.tsx
+++ b/src/packages/form/demos/taro/demo1.tsx
@@ -21,7 +21,7 @@ const Demo1 = () => {
           label="字段A"
           name="username"
           rules={[
-            { max: 7, message: '字段A不能超过5个字' },
+            { max: 5, message: '字段A不能超过5个字' },
             { required: true, message: '请输入字段A' },
             {
               validator: (
diff --git a/src/packages/form/useform.taro.ts b/src/packages/form/useform.taro.ts
index 927a297e65..4336d9277f 100644
--- a/src/packages/form/useform.taro.ts
+++ b/src/packages/form/useform.taro.ts
@@ -135,6 +135,12 @@ class FormStore {
 
   validateEntities = async (entity: FormFieldEntity, errs: any[]) => {
     const { name, rules = [] } = entity.props
+
+    if (!name) {
+      console.warn('Form field missing name property')
+      return
+    }
+
     const descriptor: any = {}
     if (rules.length) {
       // 多条校验规则
diff --git a/src/packages/form/useform.ts b/src/packages/form/useform.ts
index 927a297e65..4336d9277f 100644
--- a/src/packages/form/useform.ts
+++ b/src/packages/form/useform.ts
@@ -135,6 +135,12 @@ class FormStore {
 
   validateEntities = async (entity: FormFieldEntity, errs: any[]) => {
     const { name, rules = [] } = entity.props
+
+    if (!name) {
+      console.warn('Form field missing name property')
+      return
+    }
+
     const descriptor: any = {}
     if (rules.length) {
       // 多条校验规则
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 63e0e9a375..12f29e9f30 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -112,7 +112,12 @@ export class FormItem extends React.Component<
     const { name = '' } = this.props
 
     if (children?.props?.defaultValue) {
-      console.warn('通过 initialValue 设置初始值')
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          '[NutUI] FormItem:',
+          '请通过 initialValue 设置初始值，而不是 defaultValue'
+        )
+      }
     }
 
     const fieldValue = getFieldValue(name)
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
index c0457f7076..f67bd269e6 100644
--- a/src/packages/formitem/formitem.tsx
+++ b/src/packages/formitem/formitem.tsx
@@ -111,7 +111,12 @@ export class FormItem extends React.Component<
     const { name = '' } = this.props
 
     if (children?.props?.defaultValue) {
-      console.warn('通过 initialValue 设置初始值')
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          '[NutUI] FormItem:',
+          '请通过 initialValue 设置初始值，而不是 defaultValue'
+        )
+      }
     }
 
     const fieldValue = getFieldValue(name)

From 384a90aeb2d08a37eb02ca3d84430abb2d9d9bf0 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Thu, 21 Nov 2024 13:55:28 +0800
Subject: [PATCH 10/11] fix: position of symbol

---
 src/packages/formitem/formitem.scss     | 3 +++
 src/packages/formitem/formitem.taro.tsx | 6 ++++--
 src/packages/formitem/formitem.tsx      | 6 ++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index dcd497071b..7b3c9d4cb6 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -21,6 +21,9 @@
   &-label-required {
     color: $form-item-required-color;
     margin-right: $form-item-required-margin-right;
+    display: block;
+    position: absolute;
+    left: -10px;
   }
   .nut-form-item-labeltxt {
     font-size: 12px;
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
index 12f29e9f30..a50e1e759f 100644
--- a/src/packages/formitem/formitem.taro.tsx
+++ b/src/packages/formitem/formitem.taro.tsx
@@ -224,8 +224,10 @@ export class FormItem extends React.Component<
     )
     const renderLabel = (
       <>
-        {starPosition === 'left' ? renderStar : null}
-        <Text className="nut-form-item-labeltxt">{label}</Text>
+        <Text className="nut-form-item-labeltxt">
+          {starPosition === 'left' ? renderStar : null}
+          {label}
+        </Text>
         {starPosition === 'right' ? renderStar : null}
       </>
     )
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
index f67bd269e6..d643484488 100644
--- a/src/packages/formitem/formitem.tsx
+++ b/src/packages/formitem/formitem.tsx
@@ -223,8 +223,10 @@ export class FormItem extends React.Component<
     )
     const renderLabel = (
       <>
-        {starPosition === 'left' ? renderStar : null}
-        <span className="nut-form-item-labeltxt">{label}</span>
+        <span className="nut-form-item-labeltxt">
+          {starPosition === 'left' ? renderStar : null}
+          {label}
+        </span>
         {starPosition === 'right' ? renderStar : null}
       </>
     )

From 94c4f733fa7a0d1427955d4919fa2194228867bc Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 3 Dec 2024 15:44:29 +0800
Subject: [PATCH 11/11] =?UTF-8?q?fix:=20=E6=98=9F=E5=8F=B7=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/nutui-taro-demo/src/pages/index/index.tsx | 4 ++--
 src/packages/formitem/formitem.scss                | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nutui-taro-demo/src/pages/index/index.tsx b/packages/nutui-taro-demo/src/pages/index/index.tsx
index fbe4b26b40..2159aaa673 100644
--- a/packages/nutui-taro-demo/src/pages/index/index.tsx
+++ b/packages/nutui-taro-demo/src/pages/index/index.tsx
@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import { View, Image, Swiper, SwiperItem, Text, ScrollView, Button, Input, Video } from '@tarojs/components'
+import { View, Image, Swiper, SwiperItem, Text, ScrollView, Button, Input, Video, Form } from '@tarojs/components'
 import pkg from '@/packages/../config.json'
 import packageJson from '@/packages/../../package.json'
 import './index.scss'
@@ -10,7 +10,7 @@ const navs = pkg.nav
 
 
 // hack taro load button xml
-console.log(Button, Input, Video,Image, Swiper, SwiperItem,  )
+console.log(Button, Input, Video,Image, Swiper, SwiperItem, Form )
 
 // try {
 //     console.log('xxx', Schema)
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 7b3c9d4cb6..f5b95911f3 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -16,6 +16,7 @@
     flex: 0 0 auto;
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
+    line-height: unset;
   }
 
   &-label-required {
@@ -26,6 +27,7 @@
     left: -10px;
   }
   .nut-form-item-labeltxt {
+    position: relative;
     font-size: 12px;
     height: 10px;
   }