From a5ec429cd09fbabd6c4159e97136c569e69fe525 Mon Sep 17 00:00:00 2001
From: zttProjectSpace <zhangtantan@h-partners.com>
Date: Wed, 23 Apr 2025 16:49:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E7=9A=84yaml=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/monaco/MonacoEditor.vue        |  1 +
 .../components/codeMirror/mirrorTextArea.vue  |  2 +-
 .../workFlowConfig/yamlEditDrawer.vue         | 21 +++++++++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/monaco/MonacoEditor.vue b/src/components/monaco/MonacoEditor.vue
index 4ad8e47..b87843a 100644
--- a/src/components/monaco/MonacoEditor.vue
+++ b/src/components/monaco/MonacoEditor.vue
@@ -116,6 +116,7 @@ onMounted(() => {
   left: unset !important;
   height: 1px !important;
   opacity: 0;
+  margin-top: 20px;
 }
 </style>
 <style scoped>
diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
index ca684c4..0a50444 100644
--- a/src/views/createapp/components/codeMirror/mirrorTextArea.vue
+++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
@@ -50,7 +50,7 @@ const updateFunc = () => {
   });
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .v-codemirror {
   height: 100%;
   width: 100%;
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index a640385..84999b1 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -29,10 +29,18 @@
                 </el-icon>
                 <span>{{ item.title }}</span>
               </template>
+              <div class="yamlMonacoEditor" v-if="item.type && index === 1">
+                <MonacoEditor
+                  :yamlContent="item.yamlCode"
+                  placeholder="Code goes here..."
+                  :handleQueryYamlValue="handleChange"
+                  :readOnly="false"
+                />
+              </div>
               <MirrorText
-                v-if="item.type"
+                v-else-if="item.type && index !== 1"
                 ref="textarea"
-                :class="{ outputYaml: index !== 1 }"
+                class="outputYaml"
                 v-model:updateVal="item.yamlCode"
                 :yamlCode="item.yamlCode"
                 :disabled="item.disabled"
@@ -92,6 +100,7 @@ import MirrorText from '../codeMirror/mirrorTextArea.vue';
 import { IconCaretRight } from '@computing/opendesign-icons';
 import yaml from 'js-yaml';
 import { ElMessage } from 'element-plus';
+import MonacoEditor from 'src/components/monaco/MonacoEditor.vue';
 const visible = ref(true);
 const yamlInputCode = ref();
 const yamlOutputCode = ref();
@@ -166,6 +175,11 @@ watch(
   },
   { deep: true, immediate: true },
 );
+
+const handleChange = (payload) => {
+  yamlExpress.value[1].yamlCode = payload;
+};
+
 const closeDrawer = () => {
   emits('closeDrawer');
 };
@@ -190,6 +204,9 @@ const updateNodeYaml = () => {
 </script>
 
 <style lang="scss">
+.yamlMonacoEditor{
+  height:500px;
+}
 .flowDrawer.el-drawer {
   padding: 0px;
   background-color: var(--o-bg-color-base);
-- 
Gitee