diff --git a/crates/swc_plugin_compile_mode/src/transform_harmony.rs b/crates/swc_plugin_compile_mode/src/transform_harmony.rs
index 790d54ef5a6d..9d4795795c88 100644
--- a/crates/swc_plugin_compile_mode/src/transform_harmony.rs
+++ b/crates/swc_plugin_compile_mode/src/transform_harmony.rs
@@ -11,6 +11,7 @@ pub struct PreVisitor {}
 pub enum EtsDirection {
     Row,
     Column,
+    Flex,
 }
 
 impl PreVisitor {
@@ -145,10 +146,6 @@ impl TransformVisitor {
         }
     }
 
-    fn build_loop_children_ets_element(&mut self, el: &mut JSXElement) -> String {
-        "".to_owned()
-    }
-
     pub fn get_dynmaic_node_name(&mut self, name: String) -> String {
         let node_name = if self.deal_loop_now { name } else { format!("this.{}", name) };
         node_name.to_string()
@@ -311,7 +308,7 @@ impl TransformVisitor {
                         );
 
                         children_string.push_str(code.as_str());
-                        self.component_set.insert(TEXT_TAG.clone().to_string());
+                        self.component_set.insert(TEXT_TAG.to_string());
                         retain_child_counter += 1;
                     }
                 }
@@ -436,9 +433,11 @@ impl TransformVisitor {
                     let jsx_attr_name = name.to_string();
                     if jsx_attr_name == DIRECTION_ATTR {
                         if let Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))) = &jsx_attr.value {
-                            if value == "row" {
-                                direction = EtsDirection::Row;
-                            }
+                            direction = match value.as_str() {
+                                "row" => EtsDirection::Row,
+                                "flex" => EtsDirection::Flex,
+                                _ => EtsDirection::Column,
+                            };
                         }
                     } else if jsx_attr_name == STYLE_ATTR {
                         if
@@ -608,7 +607,6 @@ impl VisitMut for TransformVisitor {
             );
             let tmpl_contents =
                 HARMONY_IMPORTER.to_owned() +
-                utils::get_harmony_component_style(self).as_str() +
                 format!(
                     r#"@Component
 export default struct TARO_TEMPLATES_{name} {{
@@ -624,7 +622,8 @@ export default struct TARO_TEMPLATES_{name} {{
 "#,
                     name = tmpl_name,
                     content = tmpl_main_contents
-                ).as_str();
+                ).as_str() +
+                utils::get_harmony_component_style(self).as_str();
 
             self.templates.insert(tmpl_name, format!("`{}`", tmpl_contents));
 
diff --git a/crates/swc_plugin_compile_mode/src/utils/constants.rs b/crates/swc_plugin_compile_mode/src/utils/constants.rs
index 6478b61374d9..5ad0ca6b7526 100644
--- a/crates/swc_plugin_compile_mode/src/utils/constants.rs
+++ b/crates/swc_plugin_compile_mode/src/utils/constants.rs
@@ -61,57 +61,11 @@ import type {
   TaroTextStyleType
 } from '@tarojs/runtime'
 import { isString } from '@tarojs/shared'
+
 ";
 
 pub const HARMONY_TEXT_HELPER_FUNCITON: &str = r#"
-@Builder
-function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
-  if (item.tagName === 'IMAGE') {
-    ImageSpan(item.getAttribute('src'))
-      .objectFit(getImageMode(item.getAttribute('mode')))
-      .verticalAlign(align)
-      .width(item._st.hmStyle.width)
-      .height(item._st.hmStyle.height)
-      .margin({
-        top: item._st.hmStyle.marginTop,
-        left: item._st.hmStyle.marginLeft,
-        right: item._st.hmStyle.marginRight,
-        bottom: item._st.hmStyle.marginBottom,
-      })
-      .padding({
-        top: item._st.hmStyle.paddingTop,
-        left: item._st.hmStyle.paddingLeft,
-        right: item._st.hmStyle.paddingRight,
-        bottom: item._st.hmStyle.paddingBottom,
-      })
-      .textBackgroundStyle({
-        color: item._st.hmStyle.backgroundColor,
-        radius: {
-          topLeft: item._st.hmStyle.borderTopLeftRadius,
-          topRight: item._st.hmStyle.borderTopRightRadius,
-          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
-          bottomRight: item._st.hmStyle.borderBottomRightRadius,
-        }
-      })
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
-  } else if (item.nodeType === NodeType.TEXT_NODE) {
-    Span(item.textContent)
-  } else if (item.tagName === 'TEXT') {
-    Span(item.textContent)
-      .attributeModifier((new SpanStyleModify()).setNode(item as TaroTextElement))
-      .letterSpacing(item._st.hmStyle.letterSpacing)
-      .textBackgroundStyle({
-        color: item._st.hmStyle.backgroundColor,
-        radius: {
-          topLeft: item._st.hmStyle.borderTopLeftRadius,
-          topRight: item._st.hmStyle.borderTopRightRadius,
-          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
-          bottomRight: item._st.hmStyle.borderBottomRightRadius,
-        }
-      })
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
-  }
-}
+
 
 class SpanStyleModify implements AttributeModifier<SpanAttribute> {
   node: TaroTextElement | null = null
@@ -153,6 +107,12 @@ function getSpanVerticalAlign (verticalAlign?: Alignment) {
   return ImageSpanAlignment.BASELINE
 }
 
+function getButtonFontSize (node: TaroButtonElement): string | number {
+  const isMini = node._attrs.size === 'mini'
+
+  return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
+}
+
 function getTextInViewWidth (node: TaroElement | null): TaroAny {
   if (node) {
     const hmStyle = node.hmStyle || {}
@@ -166,46 +126,87 @@ function getTextInViewWidth (node: TaroElement | null): TaroAny {
 
 "#;
 
-pub const HARMONY_TEXT_STYLE_BIND: &str = r#"@Extend(Text)
-function textNormalFontStyle (style: HarmonyStyle) {
-  .id(style.id)
-  .key(style.id)
-  .opacity(style.opacity)
-  .fontColor(style.color)
-  .fontSize(style.fontSize)
-  .fontWeight(style.fontWeight)
-  .fontStyle(style.fontStyle)
-  .fontFamily(style.fontFamily)
-  .lineHeight(style.lineHeight)
-  .decoration({
-    type: style.textDecoration?.type,
-    color: style.color
-  })
-}
-
-@Extend(Text)
-function textSpecialFontStyle(attr: TaroTextStyleType) {
-  .textAlign(attr.textAlign)
-  .textOverflow(attr.textOverflow)
-  .maxLines(attr.WebkitLineClamp)
-  .letterSpacing(attr.letterSpacing)
-}
-
-function getButtonFontSize (node: TaroButtonElement) {
-  const isMini = node._attrs.size === 'mini'
-
-  return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
+pub const HARMONY_TEXT_BUILDER: &str = r#"@Builder
+function createText (node: TaroTextElement) {
+  if (node.nodeType === NodeType.TEXT_NODE) {
+    if (node.parentNode) {
+      if ((node.parentNode as TaroElement).tagName === 'BUTTON') {
+        Text(node.textContent)
+          .attributeModifier(textModify.setNode(node?.parentElement as TaroElement, {
+            fontSize: getButtonFontSize(node.parentNode as TaroButtonElement),
+            color: getButtonColor(node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((node.parentNode as TaroButtonElement)._attrs.type || '').text)
+          }))
+      } else {
+        Text(node.textContent)
+          .attributeModifier(textModify.setNode(node?.parentElement as TaroElement))
+          .width(getTextInViewWidth(node.parentElement))
+      }
+    }
+  } else {
+    Text(node.textContent) {
+      // text 下还有标签
+      if (node.childNodes.length > 1 || ((node.childNodes[0] && node.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {
+        ForEach(node.childNodes, (item: TaroElement) => {
+          createTextChildNode(item, getSpanVerticalAlign(node.hmStyle?.verticalAlign))
+        }, (item: TaroElement) => item._nid)
+      }
+    }
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
+    .attributeModifier(textModify.setNode(node).withNormalStyle())
+    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      node._nodeInfo.areaInfo = res[1]
+    }))
+  }
 }
-"#;
 
-pub const HARMONY_IMAGE_STYLE_BIND: &str = r#"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
+@Builder
+function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
+  if (item.tagName === 'IMAGE') {
+    ImageSpan(item.getAttribute('src'))
+      .objectFit(getImageMode(item.getAttribute('mode')))
+      .verticalAlign(align)
+      .width(item._st.hmStyle.width)
+      .height(item._st.hmStyle.height)
+      .margin({
+        top: item._st.hmStyle.marginTop,
+        left: item._st.hmStyle.marginLeft,
+        right: item._st.hmStyle.marginRight,
+        bottom: item._st.hmStyle.marginBottom,
+      })
+      .padding({
+        top: item._st.hmStyle.paddingTop,
+        left: item._st.hmStyle.paddingLeft,
+        right: item._st.hmStyle.paddingRight,
+        bottom: item._st.hmStyle.paddingBottom,
+      })
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
+  } else if (item.nodeType === NodeType.TEXT_NODE) {
+    Span(item.textContent)
+  } else if (item.tagName === 'TEXT') {
+    Span(item.textContent)
+      .attributeModifier((new SpanStyleModify()).setNode(item as TaroTextElement))
+      .letterSpacing(item._st.hmStyle.letterSpacing)
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
   }
 }
 "#;
+
diff --git a/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs b/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs
index d976b600371c..fd4565e7dcc0 100644
--- a/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs
+++ b/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs
@@ -1,4 +1,4 @@
-use crate::{ transform_harmony::EtsDirection, utils };
+use crate::{ transform_harmony::EtsDirection, utils::{ self, harmony::components } };
 
 pub fn get_component_attr_str(node_name: &str, tag_name: &str) -> String {
     if tag_name == "text" {
@@ -29,18 +29,33 @@ pub fn get_component_style_str(node_name: &str, tag_name: &str) -> String {
 }
 
 pub fn get_view_component_str(node_name: &str, child_content: &str, direction: EtsDirection) -> String {
-    let container = match direction {
-        EtsDirection::Row => "Row",
-        EtsDirection::Column => "Column",
+    let component_name;
+    let mut component_param = "".to_string();
+    let component_children = match child_content {
+        "" => "".to_string(),
+        _ => format!("\n{}", child_content),
     };
+
+    match direction {
+        EtsDirection::Row => {
+            component_name = "Row";
+        }
+        EtsDirection::Column => {
+            component_name = "Column";
+        }
+        EtsDirection::Flex => {
+            component_name = "Flex";
+            component_param = format!("FlexManager.flexOptions({})", node_name);
+        }
+    }
+    let style = get_component_style_str(node_name, component_name.to_lowercase().as_str());
+
     format!(
-        "{container}() {{{children}}}\n{style}",
-        container = container,
-        children = match child_content {
-            "" => "".to_string(),
-            _ => format!("\n{}", child_content),
-        },
-        style = get_component_style_str(node_name, container.to_lowercase().as_str())
+        "{name}({param}) {{{children}}}\n{style}",
+        name = component_name,
+        param = component_param,
+        children = component_children,
+        style = style
     )
 }
 
@@ -53,39 +68,7 @@ pub fn get_image_component_str(node_name: &str) -> String {
 }
 
 pub fn get_text_component_str(node_name: &str) -> String {
-    format!(
-        "if ({node_id}.nodeType === NodeType.TEXT_NODE) {{
-  if ({node_id}.parentNode) {{
-    if (({node_id}.parentNode as TaroElement).tagName === 'BUTTON') {{
-      Text({node_id}.textContent)
-        .attributeModifier(textModify.setNode({node_id}?.parentElement as TaroElement, {{
-          fontSize: getButtonFontSize({node_id}.parentNode as TaroButtonElement),
-          color: getButtonColor({node_id}.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get(({node_id}.parentNode as TaroButtonElement)._attrs.type || '').text)
-        }}))
-    }} else {{
-      Text({node_id}.textContent)
-        .attributeModifier(textModify.setNode({node_id}?.parentElement as TaroElement))
-        .width(getTextInViewWidth({node_id}.parentElement))
-    }}
-  }}
-}} else {{
-  Text({node_id}.textContent) {{
-    // text 下还有标签
-    if ({node_id}.childNodes.length > 1 || (({node_id}.childNodes[0] && {node_id}.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {{
-      ForEach({node_id}.childNodes, (item: TaroElement) => {{
-        createTextChildNode(item, getSpanVerticalAlign(({node_id} as TaroElement).hmStyle?.verticalAlign))
-      }}, (item: TaroElement) => item._nid)
-    }}
-  }}
-  .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', {node_id}  as TaroElement), {node_id}  as TaroElement, ['click']))
-  .attributeModifier(textModify.setNode({node_id} as TaroElement).withNormalStyle())
-  .onVisibleAreaChange(getNodeThresholds(({node_id} as TaroElement)) || [0.0, 1.0], getComponentEventCallback(({node_id} as TaroElement), VISIBLE_CHANGE_EVENT_NAME))
-  .onAreaChange(getComponentEventCallback(({node_id} as TaroElement), AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {{
-    ({node_id} as TaroElement)._nodeInfo.areaInfo = res[1]
-  }}))
-}}",
-        node_id = node_name
-    )
+    format!("createText({node_id} as TaroTextElement)", node_id = node_name)
 }
 
 pub fn create_component_event(event_name: &str, node_name: &str) -> String {
diff --git a/crates/swc_plugin_compile_mode/src/utils/mod.rs b/crates/swc_plugin_compile_mode/src/utils/mod.rs
index bb79c7d0eaf1..18910f6046cf 100644
--- a/crates/swc_plugin_compile_mode/src/utils/mod.rs
+++ b/crates/swc_plugin_compile_mode/src/utils/mod.rs
@@ -209,7 +209,8 @@ pub fn get_harmony_component_style(visitor: &mut TransformVisitor) -> String {
     };
 
     // build_component(IMAGE_TAG, HARMONY_IMAGE_STYLE_BIND);
-    build_component(TEXT_TAG, HARMONY_TEXT_STYLE_BIND);
+    // build_component(TEXT_TAG, HARMONY_TEXT_STYLE_BIND);
+    build_component(TEXT_TAG, HARMONY_TEXT_BUILDER);
     build_component(TEXT_TAG, HARMONY_TEXT_HELPER_FUNCITON);
 
     harmony_component_style
@@ -360,7 +361,7 @@ pub fn create_normal_text_template(visitor: &mut TransformVisitor, disable_this:
 
     let code = add_spaces_to_lines(get_text_component_str(&node_name).as_str());
 
-    visitor.component_set.insert(TEXT_TAG.clone().to_string());
+    visitor.component_set.insert(TEXT_TAG.to_string());
     code
 }