@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/runtime-ets/dom/stylesheet/covertWeb2Hm.ts

@@ -2,141 +2,86 @@
 
 import { CSSProperties } from 'react'
 
+import { TaroElement } from '../element/element'
 import { BORDER_STYLE_MAP, capitalizeFirstLetter, FlexManager, getNodeMarginOrPaddingData, getUnit } from './util'
 
-export const WEB_STYLE_MAP = {
-  padding: ['_paddingTop', '_paddingRight', '_paddingBottom', '_paddingLeft'],
-  paddingTop: ['_paddingTop'],
-  paddingRight: ['_paddingRight'],
-  paddingBottom: ['_paddingBottom'],
-  paddingLeft: ['_paddingLeft'],
-  margin: ['_marginTop', '_marginRight', '_marginBottom', '_marginLeft'],
-  marginTop: ['_marginTop'],
-  marginRight: ['_marginRight'],
-  marginBottom: ['_marginBottom'],
-  marginLeft: ['_marginLeft'],
-  top: ['_top'],
-  left: ['_left'],
-  flex: ['_flexGrow', '_flexShrink', '_flexBasis'],
-  flexGrow: ['_flexGrow'],
-  flexShrink: ['_flexShrink'],
-  flexBasis: ['_flexBasis'],
-  alignSelf: ['_alignSelf'],
-  flexDirection: ['_flexDirection'],
-  justifyContent: ['_justifyContent'],
-  alignItems: ['_alignItems'],
-  alignContent: ['_alignContent'],
-  flexWrap: ['_flexWrap'],
-  width: ['_width'],
-  height: ['_height'],
-  minWidth: ['_minWidth'],
-  minHeight: ['_minHeight'],
-  maxWidth: ['_maxWidth'],
-  maxHeight: ['_maxHeight'],
-  background: ['_backgroundColor', '_backgroundImage', '_backgroundRepeat', '_backgroundSize', '_backgroundPosition'],
-  backgroundColor: ['_backgroundColor'],
-  backgroundImage: ['_backgroundImage'],
-  backgroundRepeat: ['_backgroundRepeat'],
-  backgroundSize: ['_backgroundSize'],
-  backgroundPosition: ['_backgroundPosition'],
-  border: ['_borderTopWidth', '_borderRightWidth', '_borderBottomWidth', '_borderLeftWidth', '_borderTopStyle', '_borderRightStyle', '_borderBottomStyle', '_borderLeftStyle', '_borderTopColor', '_borderRightColor', '_borderBottomColor', '_borderLeftColor'],
-  borderTop: ['_borderTopWidth', '_borderTopStyle', '_borderTopColor'],
-  borderRight: ['_borderRightWidth', '_borderRightStyle', '_borderRightColor'],
-  borderBottom: ['_borderBottomWidth', '_borderBottomStyle', '_borderBottomColor'],
-  borderLeft: ['_borderLeftWidth', '_borderLeftStyle', '_borderLeftColor'],
-  borderWidth: ['_borderTopWidth', '_borderRightWidth', '_borderBottomWidth', '_borderLeftWidth'],
-  borderLeftWidth: ['_borderLeftWidth'],
-  borderRightWidth: ['_borderRightWidth'],
-  borderTopWidth: ['_borderTopWidth'],
-  borderBottomWidth: ['_borderBottomWidth'],
-  borderStyle: ['_borderTopStyle', '_borderRightStyle', '_borderBottomStyle', '_borderLeftStyle'],
-  borderLeftStyle: ['_borderLeftStyle'],
-  borderRightStyle: ['_borderRightStyle'],
-  borderTopStyle: ['_borderTopStyle'],
-  borderBottomStyle: ['_borderBottomStyle'],
-  borderColor: ['_borderTopColor', '_borderRightColor', '_borderBottomColor', '_borderLeftColor'],
-  borderLeftColor: ['_borderLeftColor'],
-  borderRightColor: ['_borderRightColor'],
-  borderTopColor: ['_borderTopColor'],
-  borderBottomColor: ['_borderBottomColor'],
-  borderRadius: ['_borderTopLeftRadius', '_borderTopRightRadius', '_borderBottomLeftRadius', '_borderBottomRightRadius'],
-  borderTopLeftRadius: ['_borderTopLeftRadius'],
-  borderTopRightRadius: ['_borderTopRightRadius'],
-  borderBottomLeftRadius: ['_borderBottomLeftRadius'],
-  borderBottomRightRadius: ['_borderBottomRightRadius'],
-  color: ['_color'],
-  fontSize: ['_fontSize'],
-  fontWeight: ['_fontWeight'],
-  fontStyle: ['_fontStyle'],
-  textAlign: ['_textAlign'],
-  lineHeight: ['_lineHeight'],
-  letterSpacing: ['_letterSpacing'],
-  textDecoration: ['_textDecoration'],
-  textOverflow: ['_textOverflow'],
-  WebkitLineClamp: ['_WebkitLineClamp'],
-  transform: ['_transform']
+// 背景解析正则
+const BACKGROUND_REGEX = {
+  IMAGE: /url\((['"])?(.*?)\1\)|((linear|radial)-gradient\([^)]*\))/g,
+  COLOR: /(#[0-9a-fA-F]{3,8}|rgb\(\d+,\s*\d+,\s*\d+\)|rgba?\(\d+,\s*\d+,\s*\d+,\s*(?:0?\.\d+|\d+%)\)|transparent)/,
+  REPEAT: /(repeat-x|repeat-y|repeat|space|round|no-repeat)/,
+  POSITION: /(top|left|center|right|bottom|\d+(\.\d+)?(px|%|vw|vh)?)+/g,
+  SIZE: /(cover|contain|\d+(\.\d+)?(px|%|vw|vh)?)+/g
 }
 
-// 将web端的style转换为hm端的style
-export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
-  const hmStyle: Record<string, any> = {}
+// Note: 将 web 端的 style 转换为 hm 端的 style
+export default function convertWebStyle2HmStyle(webStyle: CSSProperties, node?: TaroElement) {
+  const hmStyle: Record<string, any> = node?._st?.hmStyle || {}
   Object.keys(webStyle).forEach((key) => {
     const value = webStyle[key]
     switch (key) {
       case 'padding': {
         const { top, bottom, left, right } = getNodeMarginOrPaddingData(value)
-        hmStyle._paddingTop = top
-        hmStyle._paddingBottom = bottom
-        hmStyle._paddingLeft = left
-        hmStyle._paddingRight = right
+        hmStyle.paddingTop = top
+        hmStyle.paddingBottom = bottom
+        hmStyle.paddingLeft = left
+        hmStyle.paddingRight = right
         break
       }
       case 'paddingTop': {
-        hmStyle._paddingTop = getUnit(value)
+        hmStyle.paddingTop = getUnit(value)
         break
       }
       case 'paddingBottom': {
-        hmStyle._paddingBottom = getUnit(value)
+        hmStyle.paddingBottom = getUnit(value)
         break
       }
       case 'paddingLeft': {
-        hmStyle._paddingLeft = getUnit(value)
+        hmStyle.paddingLeft = getUnit(value)
         break
       }
       case 'paddingRight': {
-        hmStyle._paddingRight = getUnit(value)
+        hmStyle.paddingRight = getUnit(value)
         break
       }
       case 'margin': {
         const { top, bottom, left, right } = getNodeMarginOrPaddingData(value)
-        hmStyle._marginTop = top
-        hmStyle._marginBottom = bottom
-        hmStyle._marginLeft = left
-        hmStyle._marginRight = right
+        hmStyle.marginTop = top
+        hmStyle.marginBottom = bottom
+        hmStyle.marginLeft = left
+        hmStyle.marginRight = right
         break
       }
       case 'marginTop': {
-        hmStyle._marginTop = getUnit(value)
+        hmStyle.marginTop = getUnit(value)
         break
       }
       case 'marginBottom': {
-        hmStyle._marginBottom = getUnit(value)
+        hmStyle.marginBottom = getUnit(value)
         break
       }
       case 'marginLeft': {
-        hmStyle._marginLeft = getUnit(value)
+        hmStyle.marginLeft = getUnit(value)
         break
       }
       case 'marginRight': {
-        hmStyle._marginRight = getUnit(value)
+        hmStyle.marginRight = getUnit(value)
         break
       }
       case 'top': {
-        hmStyle._top = getUnit(value)
+        hmStyle.top = getUnit(value)
         break
       }
       case 'left': {
-        hmStyle._left = getUnit(value)
+        hmStyle.left = getUnit(value)
+        break
+      }
+      case 'right': {
+        hmStyle.right = getUnit(value)
+        break
+      }
+      case 'bottom': {
+        hmStyle.bottom = getUnit(value)
         break
       }
       case 'flex': {
@@ -153,77 +98,82 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
             res[index] = index < 2 ? Number(item) : item
           })
         }
-        hmStyle._flexGrow = getUnit(res[0])
-        hmStyle._flexShrink = Number(res[1])
-        hmStyle._flexBasis = Number(res[2])
+        hmStyle.flexGrow = getUnit(res[0])
+        hmStyle.flexShrink = Number(res[1])
+        hmStyle.flexBasis = Number(res[2])
         break
       }
       case 'flexGrow': {
-        hmStyle._flexGrow = getUnit(value)
+        hmStyle.flexGrow = getUnit(value)
         break
       }
       case 'flexShrink': {
-        hmStyle._flexShrink = Number(value)
+        hmStyle.flexShrink = Number(value)
         break
       }
       case 'flexBasis': {
-        hmStyle._flexBasis = Number(value)
+        hmStyle.flexBasis = Number(value)
         break
       }
       case 'alignSelf': {
-        hmStyle._alignSelf = FlexManager.itemAlign(value)
+        hmStyle.alignSelf = FlexManager.itemAlign(value)
         break
       }
       case 'flexDirection': {
-        hmStyle._flexDirection = FlexManager.direction(value)
+        hmStyle.flexDirection = FlexManager.direction(value)
         break
       }
       case 'justifyContent': {
-        hmStyle._justifyContent = FlexManager.flexAlign(value)
+        hmStyle.justifyContent = FlexManager.flexAlign(value)
         break
       }
       case 'alignItems': {
-        hmStyle._alignItems = FlexManager.itemAlign(value)
+        hmStyle.alignItems = FlexManager.itemAlign(value)
         break
       }
       case 'alignContent': {
-        hmStyle._alignContent = FlexManager.flexAlign(value)
+        hmStyle.alignContent = FlexManager.flexAlign(value)
         break
       }
       case 'flexWrap': {
-        hmStyle._flexWrap = FlexManager.flexWrap(value)
+        hmStyle.flexWrap = FlexManager.flexWrap(value)
         break
       }
       case 'width': {
-        hmStyle._width = getUnit(value)
+        hmStyle.width = getUnit(value)
         break
       }
       case 'height': {
-        hmStyle._height = getUnit(value)
+        hmStyle.height = getUnit(value)
         break
       }
       case 'minWidth': {
-        hmStyle._minWidth = getUnit(value)
+        hmStyle.minWidth = getUnit(value)
         break
       }
       case 'minHeight': {
-        hmStyle._minHeight = getUnit(value)
+        hmStyle.minHeight = getUnit(value)
         break
       }
       case 'maxWidth': {
-        hmStyle._maxWidth = getUnit(value)
+        hmStyle.maxWidth = getUnit(value)
         break
       }
       case 'maxHeight': {
-        hmStyle._maxHeight = getUnit(value)
+        hmStyle.maxHeight = getUnit(value)
         break
       }
       case 'background': {
-        // TODO： 暂未实现
+        const bg = setBackground(value)
+        if (bg['background-color']) { hmStyle.backgroundColor = bg['background-color'] }
+        bg['background-image'] && setBackgroundImage(hmStyle, bg['background-image'])
+        bg['background-repeat'] && setBackgroundRepeat(hmStyle, bg['background-repeat'])
+        bg['background-position'] && setBackgroundPosistion(hmStyle, bg['background-position'])
+        bg['background-size'] && setBackgroundSize(hmStyle, bg['background-size'])
         break
       }
       case 'backgroundColor': {
-        hmStyle._backgroundColor = value
+        hmStyle.backgroundColor = value
         break
       }
       case 'backgroundImage': {
@@ -244,146 +194,146 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
       }
       case 'border': {
         const [width, style, color] = value.split(' ')
-        hmStyle._borderTopWidth = getUnit(width)
-        hmStyle._borderRightWidth = getUnit(width)
-        hmStyle._borderBottomWidth = getUnit(width)
-        hmStyle._borderLeftWidth = getUnit(width)
-        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderTopColor = color
-        hmStyle._borderRightColor = color
-        hmStyle._borderBottomColor = color
-        hmStyle._borderLeftColor = color
+        hmStyle.borderTopWidth = getUnit(width)
+        hmStyle.borderRightWidth = getUnit(width)
+        hmStyle.borderBottomWidth = getUnit(width)
+        hmStyle.borderLeftWidth = getUnit(width)
+        hmStyle.borderTopStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderRightStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderBottomStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderLeftStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderTopColor = color
+        hmStyle.borderRightColor = color
+        hmStyle.borderBottomColor = color
+        hmStyle.borderLeftColor = color
         break
       }
       case 'borderTop': {
         const [width, style, color] = value.split(' ')
-        hmStyle._borderTopWidth = getUnit(width)
-        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderTopColor = color
+        hmStyle.borderTopWidth = getUnit(width)
+        hmStyle.borderTopStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderTopColor = color
         break
       }
       case 'borderRight': {
         const [width, style, color] = value.split(' ')
-        hmStyle._borderRightWidth = getUnit(width)
-        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderRightColor = color
+        hmStyle.borderRightWidth = getUnit(width)
+        hmStyle.borderRightStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderRightColor = color
         break
       }
       case 'borderBottom': {
         const [width, style, color] = value.split(' ')
-        hmStyle._borderBottomWidth = getUnit(width)
-        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderBottomColor = color
+        hmStyle.borderBottomWidth = getUnit(width)
+        hmStyle.borderBottomStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderBottomColor = color
         break
       }
       case 'borderLeft': {
         const [width, style, color] = value.split(' ')
-        hmStyle._borderLeftWidth = getUnit(width)
-        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(style)
-        hmStyle._borderLeftColor = color
+        hmStyle.borderLeftWidth = getUnit(width)
+        hmStyle.borderLeftStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle.borderLeftColor = color
         break
       }
       case 'borderWidth': {
-        hmStyle._borderTopWidth = getUnit(value)
-        hmStyle._borderRightWidth = getUnit(value)
-        hmStyle._borderBottomWidth = getUnit(value)
-        hmStyle._borderLeftWidth = getUnit(value)
+        hmStyle.borderTopWidth = getUnit(value)
+        hmStyle.borderRightWidth = getUnit(value)
+        hmStyle.borderBottomWidth = getUnit(value)
+        hmStyle.borderLeftWidth = getUnit(value)
         break
       }
       case 'borderLeftWidth': {
-        hmStyle._borderLeftWidth = getUnit(value)
+        hmStyle.borderLeftWidth = getUnit(value)
         break
       }
       case 'borderRightWidth': {
-        hmStyle._borderRightWidth = getUnit(value)
+        hmStyle.borderRightWidth = getUnit(value)
         break
       }
       case 'borderTopWidth': {
-        hmStyle._borderTopWidth = getUnit(value)
+        hmStyle.borderTopWidth = getUnit(value)
         break
       }
       case 'borderBottomWidth': {
-        hmStyle._borderBottomWidth = getUnit(value)
+        hmStyle.borderBottomWidth = getUnit(value)
         break
       }
       case 'borderStyle': {
-        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(value)
-        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(value)
-        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(value)
-        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderTopStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderRightStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderBottomStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderLeftStyle = BORDER_STYLE_MAP.get(value)
         break
       }
       case 'borderLeftStyle': {
-        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderLeftStyle = BORDER_STYLE_MAP.get(value)
         break
       }
       case 'borderRightStyle': {
-        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderRightStyle = BORDER_STYLE_MAP.get(value)
         break
       }
       case 'borderTopStyle': {
-        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderTopStyle = BORDER_STYLE_MAP.get(value)
         break
       }
       case 'borderBottomStyle': {
-        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle.borderBottomStyle = BORDER_STYLE_MAP.get(value)
         break
       }
       case 'borderColor': {
-        hmStyle._borderTopColor = value
-        hmStyle._borderRightColor = value
-        hmStyle._borderBottomColor = value
-        hmStyle._borderLeftColor = value
+        hmStyle.borderTopColor = value
+        hmStyle.borderRightColor = value
+        hmStyle.borderBottomColor = value
+        hmStyle.borderLeftColor = value
         break
       }
       case 'borderLeftColor': {
-        hmStyle._borderLeftColor = value
+        hmStyle.borderLeftColor = value
         break
       }
       case 'borderRightColor': {
-        hmStyle._borderRightColor = value
+        hmStyle.borderRightColor = value
         break
       }
       case 'borderTopColor': {
-        hmStyle._borderTopColor = value
+        hmStyle.borderTopColor = value
         break
       }
       case 'borderBottomColor': {
-        hmStyle._borderBottomColor = value
+        hmStyle.borderBottomColor = value
         break
       }
       case 'borderRadius': {
-        hmStyle._borderTopLeftRadius = getUnit(value)
-        hmStyle._borderTopRightRadius = getUnit(value)
-        hmStyle._borderBottomLeftRadius = getUnit(value)
-        hmStyle._borderBottomRightRadius = getUnit(value)
+        hmStyle.borderTopLeftRadius = getUnit(value)
+        hmStyle.borderTopRightRadius = getUnit(value)
+        hmStyle.borderBottomLeftRadius = getUnit(value)
+        hmStyle.borderBottomRightRadius = getUnit(value)
         break
       }
       case 'borderTopLeftRadius': {
-        hmStyle._borderTopLeftRadius = getUnit(value)
+        hmStyle.borderTopLeftRadius = getUnit(value)
         break
       }
       case 'borderTopRightRadius': {
-        hmStyle._borderTopRightRadius = getUnit(value)
+        hmStyle.borderTopRightRadius = getUnit(value)
         break
       }
       case 'borderBottomLeftRadius': {
-        hmStyle._borderBottomLeftRadius = getUnit(value)
+        hmStyle.borderBottomLeftRadius = getUnit(value)
         break
       }
       case 'borderBottomRightRadius': {
-        hmStyle._borderBottomRightRadius = getUnit(value)
+        hmStyle.borderBottomRightRadius = getUnit(value)
         break
       }
       case 'color': {
-        hmStyle._color = value
+        hmStyle.color = value
         break
       }
       case 'fontSize': {
-        hmStyle._fontSize = getUnit(value)
+        hmStyle.fontSize = getUnit(value)
         break
       }
       case 'fontWeight': {
@@ -393,45 +343,63 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
       case 'fontStyle': {
         switch (value) {
           case 'italic':
-            hmStyle._fontStyle = FontStyle.Italic
+            hmStyle.fontStyle = FontStyle.Italic
             break
           default:
-            hmStyle._fontStyle = FontStyle.Normal
+            hmStyle.fontStyle = FontStyle.Normal
         }
         break
       }
       case 'textAlign': {
         switch (value) {
           case 'left':
-            hmStyle._textAlign = TextAlign.Start
+            hmStyle.textAlign = TextAlign.Start
             break
           case 'center':
-            hmStyle._textAlign = TextAlign.Center
+            hmStyle.textAlign = TextAlign.Center
             break
           case 'right':
-            hmStyle._textAlign = TextAlign.End
+            hmStyle.textAlign = TextAlign.End
             break
           default:
-            hmStyle._textAlign = TextAlign.Start
+            hmStyle.textAlign = TextAlign.Start
+            break
+        }
+        break
+      }
+      case 'verticalAlign': {
+        switch (value) {
+          case 'supper':
+          case 'top':
+          case 'text-top':
+            hmStyle.verticalAlign = Alignment.Top
+            break
+          case 'middle':
+            hmStyle.verticalAlign = Alignment.Center
+            break
+          case 'sub':
+          case 'text-bottom':
+          case 'bottom':
+            hmStyle.verticalAlign = Alignment.Bottom
             break
         }
         break
       }
       case 'lineHeight': {
-        hmStyle._lineHeight = getUnit(value)
+        hmStyle.lineHeight = getUnit(value)
         break
       }
       case 'letterSpacing': {
-        hmStyle._letterSpacing = getUnit(value)
+        hmStyle.letterSpacing = getUnit(value)
         break
       }
       case 'textDecoration': {
         if (typeof value === 'string') {
           switch (value) {
-            case 'underline': hmStyle._textDecoration = TextDecorationType.Underline; break
-            case 'overline': hmStyle._textDecoration = TextDecorationType.Overline; break
-            case 'line-through': hmStyle._textDecoration = TextDecorationType.LineThrough; break
-            default: hmStyle._textDecoration = TextDecorationType.None; break
+            case 'underline': hmStyle.textDecoration = { type: TextDecorationType.Underline }; break
+            case 'overline': hmStyle.textDecoration = { type: TextDecorationType.Overline }; break
+            case 'line-through': hmStyle.textDecoration = { type: TextDecorationType.LineThrough }; break
+            default: hmStyle.textDecoration = { type: TextDecorationType.None }; break
           }
         }
         break
@@ -444,18 +412,51 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
             case 'ellipsis': overflow = TextOverflow.Ellipsis; break
             case 'marquee': overflow = TextOverflow.MARQUEE; break
           }
-          hmStyle._textOverflow = {
+          hmStyle.textOverflow = {
             overflow
           }
         }
         break
       }
       case 'WebkitLineClamp': {
-        hmStyle._WebkitLineClamp = Number(value)
-        break 
+        hmStyle.WebkitLineClamp = Number(value)
+        break
       }
       case 'transform': {
-        hmStyle._transform = parseTransform(value)
+        hmStyle.transform = parseTransform(value)
+        break
+      }
+      case 'transformOrigin': {
+        hmStyle.transformOrigin = parseTransformOrigin(value)
+        break
+      }
+      case 'position': {
+        hmStyle.position = value
+        break
+      }
+      case 'display': {
+        hmStyle.display = value
+        break
+      }
+      case 'zIndex': {
+        hmStyle.zIndex = Number(value)
+        break
+      }
+      case 'opacity': {
+        const val = Number(value)
+        hmStyle.opacity = Number.isNaN(val) ? 1 : val
+        break
+      }
+      case 'overflow': {
+        if (value === 'auto') {
+          hmStyle.overflow = 'scroll'
+        } else {
+          hmStyle.overflow = value
+        }
+        break
+      }
+      case 'animation': {
+        // TODO：不支持解析Style上的动画参数
         break
       }
       default: {
@@ -468,35 +469,102 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
 }
 
 function setBackgroundImage(hmStyle, value) {
-  if (typeof value === 'string' && value.indexOf('url(') !== -1 && value.indexOf(')') !== -1) {
-    // 如果包含 url()，则说明是 background-image 属性
-    const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
-    if (match) {
-      hmStyle._backgroundImage = [{
-        src: match[1]
-      }]
+  if (typeof value === 'string') {
+    if (value.indexOf('url(') !== -1 && value.indexOf(')') !== -1) {
+      // 如果包含 url()，则说明是 background-image 属性
+      const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
+      if (match) {
+        hmStyle.backgroundImage = {
+          src: match[1]
+        }
+      }
+    } else if (value.indexOf('linear-gradient(') !== -1) {
+      hmStyle.backgroundImage = parseGradient(value)
+    }
+  }
+}
+
+// 解析background属性
+function setBackground (backgroundValue: string) {
+  backgroundValue = preprocessCss(backgroundValue)
+  const result = {
+    'background-color': '',
+    'background-image': '',
+    'background-repeat': '',
+    'background-position': '',
+    'background-size': ''
+  }
+
+  if (!backgroundValue) return result
+
+  // 匹配background-image
+  const imageMatch = backgroundValue.match(BACKGROUND_REGEX.IMAGE)
+  if (imageMatch) {
+    result['background-image'] = imageMatch[0]
+    backgroundValue = backgroundValue.replace(imageMatch[0], '').trim()
+  }
+
+  // 匹配background-color
+  const colorMatch = backgroundValue.match(BACKGROUND_REGEX.COLOR)
+  if (colorMatch) {
+    result['background-color'] = colorMatch[0]
+    backgroundValue = backgroundValue.replace(colorMatch[0], '').trim()
+  }
+
+  // 匹配background-repeat
+  const repeatMatch = backgroundValue.match(BACKGROUND_REGEX.REPEAT)
+  if (repeatMatch) {
+    result['background-repeat'] = repeatMatch[0]
+    backgroundValue = backgroundValue.replace(repeatMatch[0], '').trim()
+  }
+
+  // 匹配background-position,background-size
+  // 先分割 / 分割出background-position\background-size
+  const positionSize = backgroundValue.split('/')
+  const [position, size] = positionSize
+  // 匹配background-position
+  if (position) {
+    const positionMatch = position.match(BACKGROUND_REGEX.POSITION)
+    if (positionMatch) {
+      result['background-position'] = positionMatch.join(' ')
+    }
+  }
+  if (size) {
+    // 匹配background-size
+    const sizeMatch = size.match(BACKGROUND_REGEX.SIZE)
+    if (sizeMatch) {
+      result['background-size'] = sizeMatch.join(' ')
     }
   }
+
+  return result
 }
 
 function setBackgroundRepeat(hmStyle, value) {
   if (typeof value === 'string') {
     switch (value) {
-      case 'repeat-x': hmStyle._backgroundRepeat = [ImageRepeat.X]; break
-      case 'repeat-y': hmStyle._backgroundRepeat = [ImageRepeat.Y]; break
-      case 'no-repeat': hmStyle._backgroundRepeat = [ImageRepeat.NoRepeat]; break
-      default: hmStyle._backgroundRepeat = [ImageRepeat.XY]; break
+      case 'repeat-x': hmStyle.backgroundRepeat = ImageRepeat.X; break
+      case 'repeat-y': hmStyle.backgroundRepeat = ImageRepeat.Y; break
+      case 'no-repeat': hmStyle.backgroundRepeat = ImageRepeat.NoRepeat; break
+      default: hmStyle.backgroundRepeat = ImageRepeat.XY; break
     }
   }
 }
 
 function setBackgroundSize(hmStyle, value) {
   if (typeof value === 'string') {
+    if (value === 'cover') {
+      hmStyle.backgroundSize = ImageSize.Cover
+      return
+    } else if (value === 'contain') {
+      hmStyle.backgroundSize = ImageSize.Contain
+      return
+    }
     const sizes = value.split(' ')
     if (sizes.length === 1) {
-      hmStyle._backgroundSize = [{ width: getUnit(sizes[0]) }]
+      hmStyle.backgroundSize = { width: getUnit(sizes[0]) }
     } else if (sizes.length === 2) {
-      hmStyle._backgroundSize = [{ width: getUnit(sizes[0]), height: getUnit(sizes[1]) }]
+      hmStyle.backgroundSize = { width: getUnit(sizes[0]), height: getUnit(sizes[1]) }
     }
   }
 }
@@ -505,31 +573,31 @@ function setBackgroundPosistion (hmStyle, value) {
   if (typeof value === 'string') {
     const positions = value.split(' ')
     const horizontal = positions[0].toLowerCase()
-    const vertical = positions[1].toLowerCase() || 'top'
+    const vertical = positions[1]?.toLowerCase() || 'top'
 
     if (horizontal === 'left' && vertical === 'top') {
-      hmStyle._backgroundPosition = [Alignment.TopStart]
+      hmStyle.backgroundPosition = Alignment.TopStart
     } else if (horizontal === 'center' && vertical === 'top') {
-      hmStyle._backgroundPosition = [Alignment.Top]
+      hmStyle.backgroundPosition = Alignment.Top
     } else if (horizontal === 'right' && vertical === 'top') {
-      hmStyle._backgroundPosition = [Alignment.TopEnd]
+      hmStyle.backgroundPosition = Alignment.TopEnd
     } else if (horizontal === 'left' && vertical === 'center') {
-      hmStyle._backgroundPosition = [Alignment.Start]
+      hmStyle.backgroundPosition = Alignment.Start
     } else if (horizontal === 'center' && vertical === 'center') {
-      hmStyle._backgroundPosition = [Alignment.Center]
+      hmStyle.backgroundPosition = Alignment.Center
     } else if (horizontal === 'right' && vertical === 'center') {
-      hmStyle._backgroundPosition = [Alignment.End]
+      hmStyle.backgroundPosition = Alignment.End
     } else if (horizontal === 'left' && vertical === 'bottom') {
-      hmStyle._backgroundPosition = [Alignment.BottomStart]
+      hmStyle.backgroundPosition = Alignment.BottomStart
     } else if (horizontal === 'center' && vertical === 'bottom') {
-      hmStyle._backgroundPosition = [Alignment.Bottom]
+      hmStyle.backgroundPosition = Alignment.Bottom
     } else if (horizontal === 'right' && vertical === 'bottom') {
-      hmStyle._backgroundPosition = [Alignment.BottomEnd]
+      hmStyle.backgroundPosition = Alignment.BottomEnd
     } else {
       if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(horizontal)) {
-        hmStyle._backgroundPosition = [{ x: getUnit(horizontal) }]
+        hmStyle.backgroundPosition = { x: getUnit(horizontal) }
         if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(vertical)) {
-          hmStyle._backgroundPosition = [{ x: getUnit(horizontal), y: getUnit(vertical) }]
+          hmStyle.backgroundPosition = { x: getUnit(horizontal), y: getUnit(vertical) }
         }
       }
     }
@@ -538,22 +606,23 @@ function setBackgroundPosistion (hmStyle, value) {
 
 function setFontWeight (hmStyle, value) {
   switch (value) {
-    case 'normal': hmStyle._fontWeight = FontWeight.Normal; break
-    case 'bold': hmStyle._fontWeight = FontWeight.Bold; break
-    case 'bolder': hmStyle._fontWeight = FontWeight.Bolder; break
-    case 'lighter': hmStyle._fontWeight = FontWeight.Lighter; break
-    default: hmStyle._fontWeight = Number(value); break
+    case 'normal': hmStyle.fontWeight = FontWeight.Normal; break
+    case 'bold': hmStyle.fontWeight = FontWeight.Bold; break
+    case 'bolder': hmStyle.fontWeight = FontWeight.Bolder; break
+    case 'lighter': hmStyle.fontWeight = FontWeight.Lighter; break
+    default: hmStyle.fontWeight = Number(value); break
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function parseTransform(transformString) {
   const transformRegex = /(\w+)\(([^)]+)\)/g
-  const transforms = []
+  const transform = {}
 
   let matchs
   while ((matchs = transformRegex.exec(transformString)) !== null) {
     const [, type, valueString] = matchs
-    const values = valueString.split(/\s*,\s*/).map(parseFloat)
+    const values = valueString.split(/\s*,\s*/)
 
     const transformObj = {
       type: capitalizeFirstLetter(type),
@@ -563,62 +632,174 @@ function parseTransform(transformString) {
     switch (type) {
       case 'translate':
       case 'translate3d':
-        transformObj.value.x = parseFloat(getUnit(values[0])) || 0
-        transformObj.value.y = parseFloat(getUnit(values[1])) || 0
-        transformObj.value.z = parseFloat(getUnit(values[2])) || 0
+        transformObj.value.x = (getUnit(values[0])) || 0
+        transformObj.value.y = (getUnit(values[1])) || 0
+        transformObj.value.z = (getUnit(values[2])) || 0
         break
       case 'translateX':
-        transformObj.value.x = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.x = (getUnit(values[0])) || 0
         break
       case 'translateY':
-        transformObj.value.y = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.y = (getUnit(values[0])) || 0
         break
       case 'translateZ':
-        transformObj.value.z = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.z = (getUnit(values[0])) || 0
         break
       case 'rotate':
-        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+      case 'rotateZ':
+        transformObj.value.angle = (getUnit(values[0])) || 0
         transformObj.value.x = 0
         transformObj.value.y = 0
         transformObj.value.z = 1
         break
       case 'rotate3d':
-        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.angle = getUnit(values[0]) || 0
         transformObj.value.x = values[1] || 0
         transformObj.value.y = values[2] || 0
         transformObj.value.z = values[3] || 0
         break
       case 'rotateX':
-        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.angle = getUnit(values[0]) || 0
         transformObj.value.x = 1
         transformObj.value.y = 0
         transformObj.value.z = 0
         break
       case 'rotateY':
-        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.angle = getUnit(values[0]) || 0
         transformObj.value.x = 0
         transformObj.value.y = 1
         transformObj.value.z = 0
         break
       case 'scale':
       case 'scale3d':
-        transformObj.value.x = values[0] || 1
-        transformObj.value.y = values[1] || values[0] || 1
-        transformObj.value.z = values[2] || 1
+        transformObj.value.x = parseFloat(values[0]) || 1
+        transformObj.value.y = parseFloat(values[1] || values[0]) || 1
+        transformObj.value.z = parseFloat(values[2]) || 1
         break
       case 'scaleX':
-        transformObj.value.x = values[0] || 1
+        transformObj.value.x = parseFloat(values[0]) || 1
         break
       case 'scaleY':
-        transformObj.value.y = values[0] || 1
+        transformObj.value.y = parseFloat(values[0]) || 1
         break
       default:
         // Handle unrecognized transform types or ignore them
         break
     }
 
-    transforms.push(transformObj)
+    transform[transformObj.type] = transformObj.value
+  }
+
+  return transform
+}
+
+// 方向转百分比
+function directionToPercent(direction: string) {
+  switch (direction) {
+    case 'top':
+    case 'left':
+      return '0%'
+    case 'center':
+      return '50%'
+    case 'bottom':
+    case 'right':
+      return '100%'
+    default:
+      return direction
   }
+}
 
-  return transforms
+// 解析transform-orgin
+function parseTransformOrigin (value: string) {
+  if (typeof value === 'string') {
+    const values = value.split(' ')
+    if (values.length === 1) {
+      return {
+        x: getUnit(directionToPercent(values[0])),
+        y: getUnit(directionToPercent(values[0]))
+      }
+    } else if (values.length === 2) {
+      return {
+        x: getUnit(directionToPercent(values[0])),
+        y: getUnit(directionToPercent(values[1]))
+      }
+    }
+  }
+  return {
+    x: 0,
+    y: 0
+  }
+}
+
+function directionToAngle(direction) {
+  const map = {
+    'to top': 270,
+    'to bottom': 90,
+    'to left': 180,
+    'to right': 0,
+    'to top left': 225,
+    'to left top': 225,
+    'to top right': 315,
+    'to right top': 315,
+    'to bottom left': 135,
+    'to left bottom': 135,
+    'to bottom right': 45,
+    'to right bottom': 45
+  }
+  return map[direction.toLowerCase()] || 0 // 默认为0度（to right）
+}
+
+function parseGradient(gradientString) {
+  const directionPattern = /linear-gradient\((to [a-z ]+|\d+deg),/
+  const directionMatch = gradientString.match(directionPattern)
+  let angle
+
+  if (directionMatch) {
+    const direction = directionMatch[1]
+    if (direction.includes('deg')) {
+      angle = parseInt(direction, 10)
+    } else {
+      angle = directionToAngle(direction)
+    }
+  } else {
+    angle = 0 // 默认方向为向右（0度）
+  }
+  const colorPattern = /(?:(#[0-9a-f]{3,8}|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*\d*\.?\d+\s*)?\)))\s*(\d*%|)/gi
+  const colors = []
+  let match
+  while ((match = colorPattern.exec(gradientString)) !== null) {
+    const color = match[1] ? match[1].trim() : null
+    const position = match[2] ? parseInt(match[2], 10) / 100 : null
+    colors.push([color, position])
+  }
+
+  if (colors.some(color => color[1] === null)) {
+    const step = 1 / (colors.length - 1)
+    colors.forEach((color, index) => (color[1] = index * step))
+  }
+
+  return {
+    angle: angle,
+    colors: colors
+  }
+}
+
+function rgbaToHex(rgba) {
+  const parts = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/)
+  if (!parts) return rgba // 如果匹配失败，返回原字符串
+
+  const r = parseInt(parts[1]).toString(16).padStart(2, '0')
+  const g = parseInt(parts[2]).toString(16).padStart(2, '0')
+  const b = parseInt(parts[3]).toString(16).padStart(2, '0')
+  if (parts[4]) {
+    const a = parts[4] ? Math.round(parseFloat(parts[4]) * 255).toString(16).padStart(2, '0') : 'ff'
+    return `#${a}${r}${g}${b}`
+  } else {
+    return `#${r}${g}${b}`
+  }
+}
+function preprocessCss(css) {
+  return css.replace(/rgba?\((\d+\s*,\s*\d+\s*,\s*\d+\s*,?\s*\d*\.?\d*)\)/g, (match) => {
+    return rgbaToHex(match)
+  })
 }