@tarojs/plugin-platform-harmony-ets 4.0.0-beta.12 → 4.0.0-beta.121

package/dist/components-harmony-ets/checkbox.ets

@@ -1,11 +1,10 @@
 import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
-import { createLazyChildren } from './render'
+import commonStyleModify, { rowModify, columnModify } from './style'
 import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroAny, TaroEvent, TaroCheckboxElement, TaroCheckboxGroupElement } from '@tarojs/runtime'
+import type { TaroAny, TaroCheckboxElement, TaroCheckboxGroupElement, TaroEvent } from '@tarojs/runtime'
 
 interface CheckboxOptions {
   name?: string
@@ -13,17 +12,20 @@ interface CheckboxOptions {
 }
 interface CheckboxAttrs {
   selectedColor?: ResourceColor
+  disabled?: boolean
 }
 
 @Extend(Checkbox)
 function checkboxAttr(attr: CheckboxAttrs) {
   .selectedColor(attr.selectedColor)
+  .enabled(!attr.disabled)
 }
 
 function getAttributes (node: TaroCheckboxElement): CheckboxAttrs {
   const _attrs = node._attrs
   const checkboxAttrs: CheckboxAttrs = {}
   checkboxAttrs.selectedColor = _attrs.color || '#1aad19'
+  checkboxAttrs.disabled = !!_attrs.disabled
   return checkboxAttrs
 }
 
@@ -36,57 +38,59 @@ function getOptions (node: TaroCheckboxElement): CheckboxOptions {
 
 @Component
 export struct TaroCheckbox {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroCheckboxElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
 
   build () {
-    if (this.node) {
-      Stack() {
-        Row() {
-          Checkbox(getOptions(this.node))
-            .attributeModifier(commonStyleModify.setNode(this.node))
-            .checkboxAttr(getAttributes(this.node))
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-            .select(this.node.checked)
-            .onChange((value: boolean) => {
-              if (this.node) {
-                if (!!this.node?._attrs.disabled) {
-                  this.node.updateComponent()
-                } else {
-                  this.node.updateCheckedValue(value)
-
-                  if (value) {
-                    const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
-                    eventHandler(event, 'change', this.node)
-                  }
+    Stack() {
+      Row() {
+        Checkbox(getOptions(this.node))
+          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+          .checkboxAttr(getAttributes(this.node))
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+          .select(this.node.checked)
+          .onChange((value: boolean) => {
+            if (this.node) {
+              if (!!this.node?._attrs.disabled) {
+                this.node.updateComponent()
+              } else {
+                this.node.updateCheckedValue(value)
+
+                if (value) {
+                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
+                  eventHandler(event, 'change', this.node)
                 }
               }
-            })
-            .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-            .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-              if (this.node) {
-                this.node._nodeInfo.areaInfo = res[1]
-              }
-            }))
-            .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-          Text(this.node.textContent)
-            .textAlign(TextAlign.Center)
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-        }
-        .onClick(() => {
-          if (this.node) {
-            if (!this.node?._attrs.disabled) {
-              this.node.checked = !this.node.checked
             }
-          }
-        })
+          })
+          .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+          .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+            if (this.node) {
+              this.node._nodeInfo.areaInfo = res[1]
+            }
+          }))
+          .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+        Text(this.node.textContent)
+          .textAlign(TextAlign.Center)
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
       }
+      .onClick(() => {
+        if (this.node) {
+          if (!this.node?._attrs.disabled) {
+            this.node.checked = !this.node.checked
+          }
+        }
+      })
     }
   }
 }
@@ -95,7 +99,10 @@ interface ChangeEventDetail { value: string[] }
 
 @Component
 export struct TaroCheckboxGroup {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
@@ -103,6 +110,7 @@ export struct TaroCheckboxGroup {
 
   aboutToAppear () {
     if (this.node) {
+      this.node._instance = this
       // 阻止事件冒泡传递上去
       this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
         e.stopPropagation()
@@ -112,7 +120,7 @@ export struct TaroCheckboxGroup {
   }
 
   @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
     .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
       if (this.node) {
         this.node._nodeInfo.areaInfo = res[1]
@@ -121,26 +129,27 @@ export struct TaroCheckboxGroup {
   }
 
   build() {
-    if (this.node) {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    if (FlexManager.useFlexLayout(this.node)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        this.createLazyChildren(this.node, 0)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+    } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node, 0)
+      }
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+    } else {
+      Column() {
+        this.createLazyChildren(this.node, 0)
       }
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
     }
   }
 }

package/dist/components-harmony-ets/form.ets

@@ -1,7 +1,7 @@
 import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
-import { createLazyChildren } from './render'
+import commonStyleModify, { rowModify, columnModify } from './style'
+
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
@@ -10,34 +10,52 @@ import type { TaroAny, TaroFormElement } from '@tarojs/runtime'
 
 @Component
 export default struct TaroForm {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroFormElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroFormElement
+
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+    if (FlexManager.useFlexLayout(this.node)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        this.createLazyChildren(this.node, 0)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
-        createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     } else {
       Column() {
-        createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }

package/dist/components-harmony-ets/icon.ets

@@ -1,7 +1,7 @@
 import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, convertNumber2PX } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroIconElement, TaroAny } from '@tarojs/runtime'
 
@@ -50,20 +50,28 @@ function getIconData (node: TaroIconElement): Resource | null {
 
 @Component
 export default struct TaroIcon {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroIconElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroIconElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
   build() {
     Image(getIconData(this.node))
       .objectFit(ImageFit.Contain)
       .fillColor(this.node._attrs.color || ICON_COLOR_MAP[this.node._attrs.type] || Color.Black)
-      .attributeModifier(commonStyleModify.setNode(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .size({
-        width: convertNumber2VP(Number(this.node._attrs.size) || 23),
-        height: convertNumber2VP(Number(this.node._attrs.size) || 23),
+        width: Number(this.node._attrs.size) || 23,
+        height: Number(this.node._attrs.size) || 23
       })
-      .width(getNormalAttributes(this.node).width || convertNumber2PX(23))
-      .height(getNormalAttributes(this.node).height || convertNumber2PX(23))
-      .onComplete(e => eventHandler(e, 'complete', this.node))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onComplete(e => { eventHandler(e, 'complete', this.node) })
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]

package/dist/components-harmony-ets/image.ets

@@ -1,11 +1,11 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroImageElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
+import type { TaroImageElement, TaroAny } from '@tarojs/runtime'
 
-function getImageMode (mode: string): ImageFit {
+export function getImageMode (mode: string): ImageFit {
   switch (mode) {
     case 'aspectFit': return ImageFit.Contain
     case 'aspectFill': return ImageFit.Cover
@@ -18,17 +18,33 @@ function getImageMode (mode: string): ImageFit {
 
 @Component
 export default struct TaroImage {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroImageElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroImageElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     Image(this.node.getAttribute('src'))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .objectFit(getImageMode(this.node.getAttribute('mode')))
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .onComplete(e => eventHandler(e, 'complete', this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onComplete(e => { eventHandler(e, 'complete', this.node) })
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      // TODO: 临时改为申明式，后续等鸿蒙修复modify设置失败的bug后删除该申明
+      .borderRadius({
+        topLeft: this.node._st.hmStyle.borderTopLeftRadius,
+        topRight: this.node._st.hmStyle.borderTopRightRadius,
+        bottomLeft: this.node._st.hmStyle.borderBottomLeftRadius,
+        bottomRight: this.node._st.hmStyle.borderBottomRightRadius
+      })
   }
 }

package/dist/components-harmony-ets/index.ets

@@ -0,0 +1,39 @@
+export { default as TaroImage, getImageMode } from './image'
+export { default as TaroText } from './text'
+export { default as TaroView } from './view'
+export { default as TaroIcon } from './icon'
+export { default as TaroForm } from './form'
+export { default as TaroLabel } from './label'
+export { default as TaroInput } from './input'
+export { default as TaroVideo } from './video'
+export { default as TaroCanvas } from './canvas'
+export { default as TaroButton, getButtonColor } from './button'
+export { default as TaroPicker } from './picker'
+export { default as TaroSlider } from './slider'
+export { default as TaroSwitch } from './switch'
+export { default as TaroSwiper } from './swiper'
+export { default as TaroWebView } from './webView'
+export { default as TaroTextArea } from './textArea'
+export { default as TaroRichText } from './richText'
+export { default as TaroProgress } from './progress'
+export { default as TaroInnerHtml } from './innerHtml'
+export { default as TaroScrollView } from './scrollView'
+export { default as TaroMovableArea } from './movableArea'
+export { default as TaroMovableView } from './movableView'
+export { TaroRadio, TaroRadioGroup } from './radio'
+export { TaroCheckboxGroup, TaroCheckbox } from './checkbox'
+export { default as TaroPageMeta, IComponentAttributeUpdateEvents } from './pageMeta'
+export { default as TaroNavigationBar } from './navigationBar'
+
+export { default as TaroListView } from './listView'
+export { default as TaroStickySection } from './stickySection'
+export { default as TaroScrollList } from './scrollList'
+
+export { default as commonStyleModify, rowModify, columnModify, textModify, setNormalTextAttributeIntoInstance } from './style'
+export { TOUCH_EVENT_MAP } from './utils/constant/event'
+export { BUTTON_THEME_COLOR } from './utils/constant/style'
+export { DynamicCenter } from './utils/DynamicCenter'
+export { FlexManager } from './utils/flexManager'
+export { isTagFirstChild } from './utils/helper'
+export { getStyleAttr } from './utils/styles'
+export { shouldBindEvent, getNodeThresholds, getNormalAttributes, getFontAttributes } from './utils/helper'

package/dist/components-harmony-ets/innerHtml.ets

@@ -1,15 +1,16 @@
 import htmlParser from './utils/htmlParser'
-import { createChildItem } from './render'
 
-import type { TaroInnerHtmlElement } from '@tarojs/runtime'
+import type { TaroElement, TaroInnerHtmlElement } from '@tarojs/runtime'
 
 @Component
 export default struct TaroInnerHtml {
+  @Builder customBuilder() {}
+  @BuilderParam createChildItem: (node: TaroElement, callback?: (node: TaroElement) => void) => void = this.customBuilder
   @ObjectLink node: TaroInnerHtmlElement
-  
+
   build() {
-    if (this.node.innerHTML) {
-      createChildItem(htmlParser(this.node.innerHTML))
+    if (this.node?.hmStyle?.display !== 'none' && this.node.innerHTML) {
+      this.createChildItem(htmlParser(this.node.innerHTML))
     }
   }
 }

package/dist/components-harmony-ets/input.ets

@@ -1,13 +1,15 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { getNormalAttributes, parseStyles, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { parseStyles, shouldBindEvent, getNodeThresholds, getStyleAttr } from './utils/helper'
 import { INPUT_TYPE_MAP, INPUT_CONFIRM_MAP } from './utils/constant/style'
 
-import type { TaroStyleType, TaroAny, TaroInputElement, TaroEvent } from '@tarojs/runtime'
+import type { TaroAny, TaroEvent, TaroInputElement, TaroStyleType } from '@tarojs/runtime'
 
 interface InputAttrs {
   textAlign?: TextAlign
+  autoFocus?: boolean
+  disabled?: boolean
 }
 
 @Extend(TextInput)
@@ -22,12 +24,15 @@ function styles (style: TaroStyleType) {
 @Extend(TextInput)
 function attrs(attr: InputAttrs) {
   .textAlign(attr.textAlign)
+  .defaultFocus(attr.autoFocus)
+  .enabled(!attr.disabled)
 }
 
-
 function getAttributes(node: TaroInputElement): InputAttrs {
   return {
     textAlign: node.hmStyle.textAlign,
+    autoFocus: node._attrs.autoFocus || node._attrs.focus || false,
+    disabled: node._attrs.disabled || false,
   }
 }
 
@@ -44,11 +49,26 @@ function getPlaceholderColor (node: TaroInputElement): string {
   return placeholderTextColor || parseStyles(placeholderStyle)?.color
 }
 
+function getPlaceholderFont(node: TaroInputElement): Font {
+  const placeholderStyle: string = node._attrs.placeholderStyle || ''
+  const styles = parseStyles(placeholderStyle);
+  if (styles) {
+    return {
+      size: styles.fontSize,
+    }
+  }
+
+  return {}
+}
+
 @Component
 export default struct TaroInput {
   @State value: string = ''
 
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroInputElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroInputElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node) {
@@ -63,43 +83,49 @@ export default struct TaroInput {
   }
 
   build () {
-    if (this.node) {
-      TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
-      .key(this.node._nid)
-      .type(getInputType(this.node))
-      .maxLength(Number(this.node._attrs?.maxlength) || null)
-      .placeholderColor(getPlaceholderColor(this.node))
-      .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .styles(getNormalAttributes(this.node))
-      .attrs(getAttributes(this.node))
-      .onChange((value: string) => {
+    TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
+    .key(this.node._nid.toString())
+    .type(getInputType(this.node))
+    .maxLength(Number(this.node._attrs?.maxlength) || null)
+    .placeholderColor(getPlaceholderColor(this.node))
+    .placeholderFont(getPlaceholderFont(this.node))
+    .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
+    .padding(0) // Note: 移出 Input 默认 padding 设置
+    .backgroundColor(getStyleAttr(this.node, "backgroundColor"))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .styles(this.node?.hmStyle)
+    .attrs(getAttributes(this.node))
+    .onChange((value: string) => {
+      const event: TaroEvent = createTaroEvent('change', { detail: { value } }, this.node)
+      eventHandler(event, 'change', this.node)
+
+      if (this.value !== value) {
         const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
-        
         this.value = value
         this.node?.updateFormWidgetValue(value)
         eventHandler(event, 'input', this.node)
-      })
-      .onSubmit(() => {
-        const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
-        eventHandler(event, 'confirm', this.node)
-      })
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onBlur(() => {
-        const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
-        eventHandler(event, 'blur', this.node)
-      })
-      .onFocus(() => {
-        const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
-  
-        eventHandler(event, 'focus', this.node)
-      })
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        if (this.node) {
-          this.node._nodeInfo.areaInfo = res[1]
-        }
-      }))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-    }
+      }
+    })
+    .onSubmit(() => {
+      const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
+      eventHandler(event, 'confirm', this.node)
+    })
+    .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+    .onBlur(() => {
+      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
+      eventHandler(event, 'blur', this.node)
+    })
+    .onFocus(() => {
+      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+
+      eventHandler(event, 'focus', this.node)
+    })
+    .enableKeyboardOnFocus(typeof (this.node._attrs as TaroAny)?.enableKeyboardOnFocus === 'undefined' ? true : (this.node._attrs as TaroAny).enableKeyboardOnFocus)
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      if (this.node) {
+        this.node._nodeInfo.areaInfo = res[1]
+      }
+    }))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }