diff --git a/package.json b/package.json
index b2a8904fb8c47bd3cd34427d2ff30eb3b20d1915..9793cbbbdf13ae73172c353a58dc8928574acb96 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@typescript-eslint/eslint-plugin": "8.17.0",
     "@typescript-eslint/parser": "8.17.0",
     "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.38.5",
diff --git a/src/components/yamloutput/yamlContentOutput.jsx b/src/components/yamloutput/yamlContentOutput.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f4541c2ee7abedd8ab40dbf689450bfb6e641c1
--- /dev/null
+++ b/src/components/yamloutput/yamlContentOutput.jsx
@@ -0,0 +1,52 @@
+import { defineComponent, ref } from 'vue';
+import { IconCaretRight } from '@computing/opendesign-icons';
+import './yamlContentOutput.scss'
+
+export default defineComponent({
+    name: 'YamlContentOutput',
+    props:{
+        yamlOutPutContent:''
+    },
+    setup(props) {
+        const yamlContent = ref(props.yamlOutPutContent);
+        const handelOpsData = (data) => {
+            const yamlOutPut = Object.keys(data).map((item) => {
+                if (typeof data[item] === 'object' && item !== 'items') {
+                    return <el-collapse class="o-hpc-collapse">
+                        <el-collapse-item
+                            name="1"
+                            v-slots={{
+                                title: () => <div class="yamlTitle">
+                                    <el-icon>
+                                        <IconCaretRight />
+                                    </el-icon>
+                                    <div class="yamlBox">
+                                        <div class="yamlKey">{item}</div>
+                                        <div  class="yamlKeyType">{data[item].type}</div>
+                                    </div>
+                                </div>,
+                            }}>
+                            <div class="yamlDes">{data[item].description}</div>
+                            {Object.keys(data[item].items || {}).length ? handelOpsData(data[item].items) : null}
+
+                        </el-collapse-item>
+                    </el-collapse>
+                }
+
+                if (typeof data[item] === 'object' && item === 'items') {
+                    return handelOpsData(data[item])
+                }
+            });
+
+            return yamlOutPut;
+        };
+        return {
+            handelOpsData: handelOpsData,
+            yamlContent: yamlContent.value
+        };
+    },
+
+    render() {
+        return <div class="outputContainer">{this.handelOpsData(this.yamlContent)}</div>;
+    },
+});
diff --git a/src/components/yamloutput/yamlContentOutput.scss b/src/components/yamloutput/yamlContentOutput.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eb194e6477f2ad90e565652571835e0c19ba7db6
--- /dev/null
+++ b/src/components/yamloutput/yamlContentOutput.scss
@@ -0,0 +1,79 @@
+.outputContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+  .el-collapse-item__header {
+    width: fit-content !important;
+    display: flex;
+    flex-direction: row-reverse;
+    text-align: left;
+    padding: 0 !important;
+    height: 16px;
+  }
+  .el-collapse-item__header {
+    .el-icon {
+      display: none;
+    }
+
+    .yamlTitle .el-icon {
+      display: inline-block;
+      font-size: 16px;
+      top: 2px;
+    }
+  }
+
+  .el-collapse-item__header.is-active {
+    .yamlTitle {
+      .el-icon {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .yamlKey {
+    color: var(--o-text-color-primary);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .yamlTitle {
+    display: flex;
+    align-items: center;
+    
+  }
+
+  .yamlBox,.yamlTitle{
+    padding: 0 !important;
+    height: 16px;
+    display: flex;
+    align-items: center;
+  }
+
+  .yamlBox {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .yamlKey{
+    height: 16px;
+    line-height: 16px;
+  }
+
+  .yamlKeyType {
+    display: inline-block;
+    height: 16px;
+    line-height: 16px;
+    border-radius: 2px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--o-text-color-secondary);
+    background-color: var(--o-border-color-lighter);
+  }
+  .el-collapse-item__content{
+    margin-bottom: 0 !important;
+  }
+}
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index 71a13ac1e9470247a9125bb832ac0881eb20682d..77c5305e6236558b6788cf9db43824baeda42859 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -31,8 +31,7 @@
               </template>
               <div
                 class="yamlMonacoEditor"
-                :class="{ monacoEditorMask: index === 2 }"
-                v-if="item.type && index"
+                v-if="item.type && index === 1"
               >
                 <MonacoEditor
                   :yamlContent="item.yamlCode"
@@ -41,6 +40,9 @@
                   :readOnly="item.disabled"
                 />
               </div>
+              <div v-else-if="item.type && index === 2">
+                <YamlContentOutput :yamlOutPutContent="item.yamlCode"/>
+              </div>
               <MirrorText
                 v-else-if="item.type && !index"
                 ref="textarea"
@@ -105,6 +107,7 @@ import { IconCaretRight } from '@computing/opendesign-icons';
 import yaml from 'js-yaml';
 import { ElMessage } from 'element-plus';
 import MonacoEditor from 'src/components/monaco/MonacoEditor.vue';
+import YamlContentOutput  from 'src/components/yamloutput/yamlContentOutput.jsx';
 const visible = ref(true);
 const yamlInputCode = ref();
 const yamlOutputCode = ref();
@@ -162,9 +165,7 @@ watch(
     yamlExpress.value[1].yamlCode = yaml.dump(
       props.yamlContent.input_parameters,
     );
-    yamlExpress.value[2].yamlCode = yaml.dump(
-      props.yamlContent.output_parameters,
-    );
+    yamlExpress.value[2].yamlCode = props.yamlContent.output_parameters;
   },
   { deep: true, immediate: true },
 );
diff --git a/vite.config.ts b/vite.config.ts
index 1229411d4dcf007750fac8bb709e8e68f8245c62..bdb41511d75ff3f5fc87723c261f7724b9332962 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,6 +9,8 @@
 // See the Mulan PSL v2 for more details.
 import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
 import Qiankun from 'vite-plugin-qiankun'
 
 import { resolve } from "path";
@@ -35,6 +37,7 @@ export default ({ mode }): UserConfigExport => {
     },
     plugins: [
       vue(),
+      vueJsx(),
       Qiankun("copilot", {
         useDevMode: mode === 'development'
       })