From 0d884d5a2710f08ad4e1b93c80958c484108a398 Mon Sep 17 00:00:00 2001
From: zttProjectSpace <zhangtantan@h-partners.com>
Date: Wed, 23 Apr 2025 19:03:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E8=BE=93=E5=87=BA=E5=86=85=E5=AE=B9=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/monaco/MonacoEditor.vue        |  8 +----
 .../workFlowConfig/yamlEditDrawer.vue         | 34 ++++++++++++++++---
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/monaco/MonacoEditor.vue b/src/components/monaco/MonacoEditor.vue
index b87843a5..47982b47 100644
--- a/src/components/monaco/MonacoEditor.vue
+++ b/src/components/monaco/MonacoEditor.vue
@@ -63,12 +63,7 @@ onMounted(() => {
       enableSchemaRequest: true,
       isKubernetes: true,
     });
-    monaco.editor.getModels().forEach((model) => model.dispose());
-    const prettierc = monaco.editor.createModel(
-      props.yamlContent,
-      'yaml',
-      undefined,
-    );
+     
     editor.value = monaco.editor.create(editorContainer.value, {
       value: props.yamlContent || '',
       language: 'yaml',
@@ -81,7 +76,6 @@ onMounted(() => {
       tabSize: 2, // 设置Tab大小为2
       insertSpaces: true, // 使用空格进行缩进
       automaticLayout: true,
-      model: prettierc,
       lineNumbersMinChars: 2, // 设置行号的最小字符数，间接影响宽度
       lineDecorationsWidth: 10,
       quickSuggestions: {
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index 84999b1f..71a13ac1 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -29,16 +29,20 @@
                 </el-icon>
                 <span>{{ item.title }}</span>
               </template>
-              <div class="yamlMonacoEditor" v-if="item.type && index === 1">
+              <div
+                class="yamlMonacoEditor"
+                :class="{ monacoEditorMask: index === 2 }"
+                v-if="item.type && index"
+              >
                 <MonacoEditor
                   :yamlContent="item.yamlCode"
                   placeholder="Code goes here..."
                   :handleQueryYamlValue="handleChange"
-                  :readOnly="false"
+                  :readOnly="item.disabled"
                 />
               </div>
               <MirrorText
-                v-else-if="item.type && index !== 1"
+                v-else-if="item.type && !index"
                 ref="textarea"
                 class="outputYaml"
                 v-model:updateVal="item.yamlCode"
@@ -204,8 +208,28 @@ const updateNodeYaml = () => {
 </script>
 
 <style lang="scss">
-.yamlMonacoEditor{
-  height:500px;
+.yamlMonacoEditor {
+  height: 400px;
+}
+
+.monacoEditorMask{
+  .view-lines{
+    position: relative;
+  }
+  .view-lines{
+    pointer-events: none;
+
+  }
+  .view-lines::after{
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #c3cedf;
+    opacity: 0.3;
+    pointer-events: none;
+  }
 }
 .flowDrawer.el-drawer {
   padding: 0px;
-- 
Gitee