@tarojs/plugin-platform-harmony-cpp 4.1.0 → 4.1.1-alpha.1

package/dist/runtime/components/deprecated.ets

@@ -0,0 +1,43 @@
+import { BUTTON_THEME_COLOR } from './utils/constant/style'
+
+import type { TaroAny, TaroButtonElement, TaroElement, TaroObject } from '../runtime'
+
+export function getButtonColor (node: TaroButtonElement, color: ResourceColor) {
+  const _attrs: TaroAny = node._attrs
+  const isDisabled: boolean = _attrs.disabled || false
+  const isPlain: boolean = _attrs.plain || false
+  const type: string = _attrs.type || 'default'
+
+  if (isDisabled && isPlain) {
+    return Color.Black
+  }
+
+  if (isPlain) {
+    return BUTTON_THEME_COLOR.get(type).plainText
+  }
+
+  return color
+}
+
+export function getImageMode (mode: string): ImageFit {
+  switch (mode) {
+    case 'aspectFit': return ImageFit.Contain
+    case 'aspectFill': return ImageFit.Cover
+    case 'scaleToFill': return ImageFit.Fill
+    case 'widthFix': return ImageFit.Auto
+    case 'heightFix': return ImageFit.Auto
+    default: return ImageFit.Contain
+  }
+}
+
+@ComponentV2
+export struct TaroDeprecated {
+  @Builder customBuilder() {}
+  @BuilderParam createChildItem?: (node: TaroElement, callback?: (node: TaroElement) => void) => void = this.customBuilder
+  @BuilderParam createLazyChildren?: (node: TaroElement, layer?: number) => void = this.customBuilder
+
+  @Param node: TaroObject = {}
+
+  build() {
+  }
+}

package/dist/runtime/components/index.ets

@@ -0,0 +1,49 @@
+export {
+  TaroDeprecated as TaroView,
+  TaroDeprecated as TaroImage,
+  TaroDeprecated as TaroText,
+  TaroDeprecated as TaroIcon,
+  TaroDeprecated as TaroInput,
+  TaroDeprecated as TaroTextArea,
+  TaroDeprecated as TaroButton,
+  TaroDeprecated as TaroSwiper,
+  TaroDeprecated as TaroScrollView,
+  TaroDeprecated as TaroScrollList,
+  TaroDeprecated as TaroListView,
+  TaroDeprecated as TaroMovableArea,
+  TaroDeprecated as TaroMovableView,
+  TaroDeprecated as TaroPicker,
+  TaroDeprecated as TaroProgress,
+  TaroDeprecated as TaroWaterFlow,
+  TaroDeprecated as TaroWaterFlowView,
+  TaroDeprecated as TaroList,
+  TaroDeprecated as TaroStickySection,
+  TaroDeprecated as TaroRadioGroup,
+  TaroDeprecated as TaroRadio,
+  TaroDeprecated as TaroCheckboxGroup,
+  TaroDeprecated as TaroCheckbox,
+  TaroDeprecated as TaroLabel,
+  TaroDeprecated as TaroCanvas,
+  TaroDeprecated as TaroForm,
+  getButtonColor, getImageMode
+} from './deprecated'
+
+export { TaroXComponent } from './xComponent'
+export { default as TaroNavigationBar } from './navigationBar'
+
+export { default as TaroVideo } from './video'
+export { default as TaroSlider } from './slider'
+export { default as TaroSwitch } from './switch'
+export { default as TaroWebView } from './webView'
+export { default as TaroRichText } from './richText'
+export { default as TaroInnerHtml } from './innerHtml'
+export { default as TaroPageMeta, IComponentAttributeUpdateEvents } from './pageMeta'
+
+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/runtime/components/innerHtml.ets

@@ -0,0 +1,16 @@
+import htmlParser from './utils/htmlParser'
+
+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?.hmStyle?.display !== 'none' && this.node.innerHTML) {
+      this.createChildItem(htmlParser(this.node.innerHTML)!)
+    }
+  }
+}

package/dist/runtime/components/navigationBar.ets

@@ -0,0 +1,65 @@
+import { eventCenter } from '@tarojs/runtime'
+
+import { isTagFirstChild } from './utils/helper'
+
+import type { IComponentAttributeUpdateEvents } from './pageMeta'
+import type { TaroAny, TaroNavigationBarElement } from '@tarojs/runtime'
+
+@Component
+export default struct TaroNavigationBar {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroNavigationBarElement, layer?: number) => void = this.customBuilder
+  @ObjectLink node: TaroNavigationBarElement
+
+  aboutToAppear(): void {
+    if (!isTagFirstChild(this.node, 'page-meta')) {
+      console.error('NavigationBar 只能是 PageMeta 内的第一个节点。')
+    }
+    if (this.node) {
+      this.node._instance = this
+    }
+
+    // FIXME 在 Harmony 提供 @Watch 文档后，根据 node 实际使用更细粒度的监听
+    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+    this.handleAttributes(this.node._attrs)
+  }
+
+  aboutToDisappear(): void {
+    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+  }
+
+  handleAttributeUpdate = (opt: IComponentAttributeUpdateEvents) => {
+    if (opt.id === this.node._nid.toString() && opt.tagName === 'NAVIGATION-BAR') {
+      const attrs: Record<string, TaroAny> = {}
+      attrs[opt.attribute] = opt.value
+      this.handleAttributes(attrs)
+    }
+  }
+
+  handleAttributes (attrs: Record<string, TaroAny>) {
+    const options: Record<string, TaroAny> = {}
+
+    if (attrs.title) {
+      options.title = attrs.title
+    }
+    if (attrs.loading) {
+      options.loading = attrs.loading
+    }
+    if (attrs.backgroundColor) {
+      options.backgroundColor = attrs.backgroundColor
+    }
+    if (attrs.frontColor) {
+      options.frontColor = attrs.frontColor
+    }
+    eventCenter?.trigger('__taroNavigationStyle', options)
+    // FIXME: 以下属性暂时不支持
+    // attrs.colorAnimationDuration
+    // attrs.colorAnimationTimingFunc
+  }
+
+  build() {
+    if (true) {
+      this.createLazyChildren(this.node, 0)
+    }
+  }
+}

package/dist/runtime/components/pageMeta.ets

@@ -0,0 +1,94 @@
+import { APP, eventCenter, getCurrentInstance } from '@tarojs/runtime'
+import { pageScrollTo } from '@tarojs/taro'
+
+import { isTagFirstChild } from './utils/helper'
+
+import type { TaroAny, TaroPageMetaElement } from '@tarojs/runtime'
+
+export interface IComponentAttributeUpdateEvents {
+  id: string
+  tagName: string
+  attribute: string
+  value: TaroAny
+}
+
+@Component
+export default struct TaroPageMeta {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroPageMetaElement, layer?: number) => void = this.customBuilder
+  @ObjectLink node: TaroPageMetaElement
+
+  page: TaroAny = {}
+
+  aboutToAppear(): void {
+    if (!isTagFirstChild(this.node, APP, 2)) {
+      // PageMeta 只能是页面内的第一个元素
+      console.error('PageMeta 只能是页面内的第一个元素。')
+    }
+
+    this.page = getCurrentInstance().page
+    if (this.node) {
+      this.node._instance = this
+    }
+
+    // FIXME 在 Harmony 提供 @Watch 文档后，根据 node 实际使用更细粒度的监听
+    eventCenter?.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+    this.handleAttributes(this.node._attrs)
+  }
+
+  aboutToDisappear(): void {
+    eventCenter?.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+  }
+
+  handleAttributeUpdate = (opt: IComponentAttributeUpdateEvents) => {
+    if (opt.id === this.node._nid.toString() && opt.tagName === 'PAGE-META') {
+      const attrs: Record<string, TaroAny> = {}
+      attrs[opt.attribute] = opt.value
+      this.handleAttributes(attrs)
+    }
+  }
+
+  handleAttributes (attrs: Record<string, TaroAny>) {
+    const options: Record<string, TaroAny> = {}
+    let triggerStyleEvent = false
+
+    // FIXME 更新类型支持度
+    if (attrs.backgroundColorTop || attrs.rootBackgroundColor || attrs.backgroundColor) {
+      options.backgroundColorContext = attrs.backgroundColorTop || attrs.rootBackgroundColor || attrs.backgroundColor
+      triggerStyleEvent = true
+    }
+    if (attrs.backgroundColorBottom || attrs.backgroundColor) {
+      options.backgroundColor = attrs.backgroundColorBottom || attrs.backgroundColor
+      triggerStyleEvent = true
+    }
+    if (attrs.backgroundTextStyle) {
+      options.backgroundTextStyle = attrs.backgroundTextStyle
+      triggerStyleEvent = true
+    }
+
+    if (this.page === getCurrentInstance().page) {
+      if (attrs.scrollTop || attrs.scrollDuration) {
+        pageScrollTo({
+          scrollTop: attrs.scrollTop || this.node._attrs.scrollTop,
+          duration: attrs.scrollDuration || this.node._attrs.scrollDuration,
+        } as TaroAny)
+      }
+    }
+    // pageStyle
+    // rootFontSize
+    // pageFontSize
+    // pageOrientation
+    if (triggerStyleEvent) {
+      eventCenter?.trigger('__taroPageStyle', options)
+    }
+    // onResize
+    // onScroll
+    // onScrollDone
+  }
+
+  build() {
+    if (true) {
+      this.createLazyChildren(this.node, 0)
+    }
+  }
+}

package/dist/runtime/components/richText.ets

@@ -0,0 +1,24 @@
+import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { generateText } from './utils'
+import { getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroRichTextElement } from '@tarojs/runtime'
+
+@Component
+export default struct TaroRichText {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroRichTextElement, layer?: number) => void = this.customBuilder
+  @ObjectLink node: TaroRichTextElement
+
+  build () {
+    RichText(generateText(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .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))
+  }
+}
+

package/dist/runtime/components/slider.ets

@@ -0,0 +1,119 @@
+import { AREA_CHANGE_EVENT_NAME, createTaroEvent, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroEvent, TaroSliderElement } from '@tarojs/runtime'
+
+@Extend(Slider)
+function themeStyles(isDisabled: boolean) {
+  .opacity(isDisabled ? 0.4 : 1)
+}
+
+@ComponentV2
+export default struct TaroSlider {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroSliderElement) => void = this.customBuilder
+  @Param @Require node: TaroSliderElement
+
+  @Local attrMin: number = 0
+  @Local attrMax: number = 100
+  @Local attrStep: number = 1
+  @Local attrDisabled: boolean = false
+  @Local attrShowValue: boolean = false
+  @Local attrBlockColor?: ResourceColor = '#ffffff'
+  @Local attrActiveColor?: ResourceColor = '#1aad19'
+  @Local attrSelectedColor?: ResourceColor = '#1aad19'
+  @Local attrBackgroundColor?: ResourceColor = '#e9e9e9'
+  @Local attrColor?: ResourceColor = '#e9e9e9'
+  @Local attrBlockSize?: Length
+  @Local value: number = 0
+
+  @Computed get computedSelectedColor () {
+    return this.attrActiveColor || this.attrSelectedColor || '#1aad19'
+  }
+
+  @Computed get computedTrackColor () {
+    return this.attrBackgroundColor || this.attrColor || '#e9e9e9'
+  }
+
+  aboutToAppear () {
+    if (this.node) {
+      this.node._instance = this
+      this.attrMin = this.node._attrs?.min ?? this.attrMin
+      this.attrMax = this.node._attrs?.max ?? this.attrMax
+      this.attrStep = this.node._attrs?.step ?? this.attrStep
+      this.attrDisabled = this.node._attrs?.disabled ?? this.attrDisabled
+      this.attrShowValue = this.node._attrs?.showValue ?? this.attrShowValue
+      this.attrBlockColor = this.node._attrs?.blockColor ?? this.attrBlockColor
+      this.attrActiveColor = this.node._attrs?.activeColor ?? this.attrActiveColor
+      this.attrSelectedColor = this.node._attrs?.selectedColor ?? this.attrSelectedColor
+      this.attrBackgroundColor = this.node._attrs?.backgroundColor ?? this.attrBackgroundColor
+      this.attrColor = this.node._attrs?.color ?? this.attrColor
+      this.attrBlockSize = this.node._attrs?.blockSize ?? this.attrBlockSize
+      this.value = this.node.value ?? this.value
+
+      if (!this.node._isInit) {
+        this.node._isInit = true
+        this.node._reset = this.node.value || 0
+      }
+    }
+  }
+
+  @Builder createSlider (node: TaroSliderElement) {
+    Slider({
+      min: Number(this.attrMin || 0),
+      max: Number(this.attrMax || 100),
+      value: this.value,
+      step: Number(this.attrStep || 1),
+      style: SliderStyle.OutSet,
+      direction: Axis.Horizontal
+    })
+      .attributeModifier(commonStyleModify.setNode(node))
+      .selectedColor(this.computedSelectedColor)
+      .trackColor(this.computedTrackColor)
+      .trackThickness(this.attrBlockSize)
+      .blockColor(this.attrBlockColor || '#ffffff')
+      .enabled(!this.attrDisabled)
+      .width(!!this.attrShowValue ? '90%' : '100%')
+      .themeStyles(!!this.attrDisabled)
+      .onChange((value: number, mode: SliderChangeMode) => {
+        if (!!this.attrDisabled) {
+          if (mode === SliderChangeMode.End) {
+            this.node?.updateComponent()
+          }
+        } else {
+          this.value = value
+          this.node?.updateFormWidgetValue(value)
+
+          if (mode === SliderChangeMode.End) {
+            const event: TaroEvent = createTaroEvent('change', { detail: { value: this.value } }, node)
+            eventHandler(event, 'change', node)
+          } else if (mode === SliderChangeMode.Moving) {
+            const event: TaroEvent = createTaroEvent('changing', { detail: { value: this.value } }, node)
+            eventHandler(event, 'changing', 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))
+  }
+
+  build() {
+    if (!!this.attrShowValue) {
+      Row() {
+        this.createSlider(this.node)
+        Text(Number(this.value).toFixed(0))
+          .width('10%')
+          .textAlign(TextAlign.Center)
+          .opacity(!!this.attrDisabled ? 0.4 : 1)
+      }
+    } else {
+      this.createSlider(this.node)
+    }
+  }
+}

package/dist/runtime/components/style.ets

@@ -0,0 +1,286 @@
+import { isUndefined } from '@tarojs/shared'
+import { ObjectAssign } from '@tarojs/runtime'
+
+import { computeBackgroundPosition, convertVp2Px } from './utils'
+import { getNormalAttributes } from './utils/helper'
+import { isMaxWidthView } from './utils/styles'
+
+import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType, TaroTextElement }  from '@tarojs/runtime'
+
+class CommonStyleModify<T extends CommonAttribute = CommonAttribute> implements AttributeModifier<T> {
+  initStyle?: TaroStyleType
+  node: TaroElement | null = null
+  style: TaroStyleType | null = null
+  overwriteStyle: TaroStyleType = {}
+
+  setNode (node: TaroElement, initStyle?: TaroStyleType) {
+    this.node = node
+    this.style = getNormalAttributes(this.node)
+    this.initStyle = initStyle
+    this.overwriteStyle = {}
+    // 覆盖初始化样式
+    if (initStyle) {
+      Object.keys(initStyle).forEach(key => {
+        if (this.style && !this.style[key]) {
+          this.style[key] = initStyle[key]
+        }
+      })
+    }
+    return this
+  }
+
+  setAnimationStyle (overwriteStyle: Record<string, TaroAny>) {
+    this.overwriteStyle = overwriteStyle
+    if (this.style && this.overwriteStyle && Object.keys(this.overwriteStyle).length) {
+      // 防止污染原始样式
+      this.style = ObjectAssign({}, this.style)
+      Object.keys(this.overwriteStyle).forEach(key => {
+        this.style![key] = this.overwriteStyle[key]
+      })
+    }
+    return this
+  }
+
+  applyNormalAttribute(instance: T): void {
+    if (this.node && this.style) {
+      setNormalAttributeIntoInstance(instance, this.style, this.node)
+      setTransformAttributeIntoInstance(instance, this.style || {})
+    }
+  }
+}
+
+class TextStyleModify extends CommonStyleModify<TextAttribute> {
+  withNormal: boolean = false
+
+  setNode (node: TaroTextElement, initStyle?: HarmonyStyle) {
+    this.withNormal = false
+    super.setNode(node, initStyle)
+    return this
+  }
+
+  withNormalStyle () {
+    this.withNormal = true
+    return this
+  }
+
+  applyNormalAttribute(instance: TextAttribute): void {
+    if (this.node && this.style) {
+      if (this.withNormal) {
+        setNormalAttributeIntoInstance(instance, this.style, this.node)
+        setTransformAttributeIntoInstance(instance, this.style || {})
+      }
+      setNormalTextAttributeIntoInstance(instance, this.style, this.node)
+    }
+  }
+}
+
+export function setTransformAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType) {
+  // Animation 需要提前和 @State 变量绑定才能产生动画效果，因此不能做 if else 判断
+  instance.translate({
+    x: style.transform?.Translate?.x,
+    y: style.transform?.Translate?.y,
+    z: style.transform?.Translate?.z,
+  })
+  instance.scale({
+    x: style.transform?.Scale?.x,
+    y: style.transform?.Scale?.y,
+    z: style.transform?.Scale?.z,
+    centerX: style.transformOrigin?.x,
+    centerY: style.transformOrigin?.y,
+  })
+  instance.rotate({
+    x: style.transform?.Rotate?.x,
+    y: style.transform?.Rotate?.y,
+    z: style.transform?.Rotate?.z,
+    centerX: style.transformOrigin?.x,
+    centerY: style.transformOrigin?.y,
+    angle: style.transform?.Rotate?.angle || 0,
+  })
+}
+
+export function setNormalTextAttributeIntoInstance(instance: TextAttribute | SpanAttribute, style: HarmonyStyle, node?: TaroTextElement | null) {
+  if (!isUndefined(style.color)) {
+    instance.fontColor(style.color)
+  }
+  if (!isUndefined(style.fontSize)) {
+    instance.fontSize(style.fontSize)
+  }
+  if (!isUndefined(style.fontWeight)) {
+    instance.fontWeight(style.fontWeight)
+  }
+  if (!isUndefined(style.fontStyle)) {
+    instance.fontStyle(style.fontStyle)
+  }
+  if (!isUndefined(style.fontFamily)) {
+    instance.fontFamily(style.fontFamily)
+  }
+  if (!isUndefined(style.textDecoration)) {
+    instance.decoration({
+      type: style.textDecoration!.type,
+      color: style.color
+    })
+  }
+}
+
+export function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType, node?: TaroElement | null) {
+  instance.renderFit(RenderFit.RESIZE_FILL)
+  if (!isUndefined(style.id)) {
+    instance.id(style.id)
+    instance.key(style.id)
+  }
+  if (!isUndefined(style.display) || !isUndefined(style.visibility)) {
+    instance.visibility(style.display === 'none' 
+      ? Visibility.None : 
+      !isUndefined(style.visibility) 
+        ? (style.visibility === 'hidden' ? Visibility.Hidden :  Visibility.Visible)
+        : Visibility.Visible
+    )
+  }
+  if (!isUndefined(style.flexGrow)) {
+    instance.flexGrow(style.flexGrow)
+  }
+  if (!isUndefined(style.flexShrink)) {
+    instance.flexShrink(style.flexShrink)
+  }
+  if (!isUndefined(style.flexBasis)) {
+    instance.flexBasis(style.flexBasis)
+  }
+  if (!isUndefined(style.alignSelf)) {
+    instance.alignSelf(style.alignSelf)
+  }
+  if (!isUndefined(style.paddingTop) || !isUndefined(style.paddingRight) || !isUndefined(style.paddingBottom) || !isUndefined(style.paddingLeft)) {
+    instance.padding({
+      top: style.paddingTop,
+      right: style.paddingRight,
+      bottom: style.paddingBottom,
+      left: style.paddingLeft
+    })
+  }
+  if (!isUndefined(style.marginTop) || !isUndefined(style.marginRight) || !isUndefined(style.marginBottom) || !isUndefined(style.marginLeft)) {
+    instance.margin({
+      top: style.marginTop,
+      right: style.marginRight,
+      bottom: style.marginBottom,
+      left: style.marginLeft
+    })
+  }
+  if (node) {
+    instance.width(isMaxWidthView(node as TaroElement) && isUndefined(style.width) ? '100%' : style.width)
+  } else {
+    if (!isUndefined(style.width)) {
+      instance.width(style.width)
+    }
+  }
+  if (!isUndefined(style.height)) {
+    instance.height(style.height)
+  }
+  if (!isUndefined(style.minWidth) || !isUndefined(style.maxWidth) || !isUndefined(style.minHeight) || !isUndefined(style.maxHeight)) {
+    instance.constraintSize({
+      minWidth: style.minWidth,
+      maxWidth: style.maxWidth,
+      minHeight: style.minHeight,
+      maxHeight: style.maxHeight
+    })
+  }
+  if (!isUndefined(style.backgroundColor)) {
+    instance.backgroundColor(style.backgroundColor)
+  }
+  if (!isUndefined(style.backgroundImage)) {
+    if (style.backgroundImage.center) {
+      // radialGradient
+      instance.radialGradient(style.backgroundImage)
+    } else if (style.backgroundImage.colors) {
+      // linearGradient
+      instance.linearGradient(style.backgroundImage)
+    } else {
+      instance.backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+    }
+  }
+  if (!isUndefined(style.backgroundSize)) {
+    instance.backgroundImageSize(style.backgroundSize)
+  }
+  if (!isUndefined(style.backgroundPosition)) {
+    if (typeof style.backgroundPosition !== 'number') {
+      let pos = computeBackgroundPosition(style)
+      instance.backgroundImagePosition({
+        x: pos.offsetX,
+        y: pos.offsetY,
+      })
+    } else {
+      instance.backgroundImagePosition(style.backgroundPosition)
+    }
+  }
+  if (!isUndefined(style.borderTopStyle) || !isUndefined(style.borderRightStyle) || !isUndefined(style.borderBottomStyle) || !isUndefined(style.borderLeftStyle)) {
+    instance.borderStyle({
+      top: style.borderTopStyle,
+      right: style.borderRightStyle,
+      bottom: style.borderBottomStyle,
+      left: style.borderLeftStyle
+    })
+  }
+  if (!isUndefined(style.borderTopWidth) || !isUndefined(style.borderRightWidth) || !isUndefined(style.borderBottomWidth) || !isUndefined(style.borderLeftWidth)) {
+    instance.borderWidth({
+      top: style.borderTopWidth,
+      right: style.borderRightWidth,
+      bottom: style.borderBottomWidth,
+      left: style.borderLeftWidth
+    })
+  }
+  if (!isUndefined(style.borderTopColor) || !isUndefined(style.borderRightColor) || !isUndefined(style.borderBottomColor) || !isUndefined(style.borderLeftColor)) {
+    instance.borderColor({
+      top: style.borderTopColor,
+      right: style.borderRightColor,
+      bottom: style.borderBottomColor,
+      left: style.borderLeftColor
+    })
+  }
+  if (!isUndefined(style.borderTopLeftRadius) || !isUndefined(style.borderTopRightRadius) || !isUndefined(style.borderBottomLeftRadius) || !isUndefined(style.borderBottomRightRadius)) {
+    instance.borderRadius({
+      topLeft: style.borderTopLeftRadius,
+      topRight: style.borderTopRightRadius,
+      bottomLeft: style.borderBottomLeftRadius,
+      bottomRight: style.borderBottomRightRadius
+    })
+  }
+  if (!isUndefined(style.opacity)) {
+    instance.opacity(style.opacity)
+  }
+  if (!isUndefined(style.overflow)) {
+    instance.clip(style.overflow === 'hidden')
+  }
+  if (style.position === 'absolute' || style.position === 'fixed') {
+    instance.position({
+      x: style.left || 0,
+      y: style.top || 0,
+    })
+    // 绝对定位和固定定位在web上都会脱离文档流，因此需要设置zIndex让它相比正常流的元素更上层
+    instance.zIndex(1)
+  }
+  if (style.position === 'relative') {
+    instance.offset({
+      x: style.left || 0,
+      y: style.top || 0,
+    })
+    // 绝对定位和固定定位在web上都会脱离文档流，因此需要设置zIndex让它相比正常流的元素更上层
+    instance.zIndex(1)
+  }
+  if (!isUndefined(style.zIndex)) {
+    // 为了适应position不设置z-index也能高于同层级组件，估且让设置了z-index的会更高一级
+    instance.zIndex(style.zIndex! + 1)
+  }
+  if (!isUndefined(style.boxShadow)) {
+    instance.shadow({
+      radius: convertVp2Px(style.boxShadow!.radius),
+      color: style.boxShadow!.color,
+      offsetX: convertVp2Px(style.boxShadow!.offsetX),
+      offsetY: convertVp2Px(style.boxShadow!.offsetY),
+      fill: style.boxShadow!.fill,
+    })
+  }
+}
+
+export const rowModify = new CommonStyleModify()
+export const columnModify = new CommonStyleModify()
+export const textModify = new TextStyleModify()
+
+export default new CommonStyleModify()