From 6a4ed80b5f8a075161363ac514de30506316c8cd Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Fri, 17 Jan 2025 16:28:50 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0yaml=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/codeMirror/mirrorTextArea.vue  | 40 ++++++++++
 src/views/createapp/components/workFlow.vue   | 13 +++-
 .../components/workFlowConfig/CustomNode.vue  |  9 ++-
 .../workFlowConfig/yamlEditDialog.vue         | 73 +++++++++++++++++++
 4 files changed, 132 insertions(+), 3 deletions(-)
 create mode 100644 src/views/createapp/components/codeMirror/mirrorTextArea.vue
 create mode 100644 src/views/createapp/components/workFlowConfig/yamlEditDialog.vue

diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
new file mode 100644
index 0000000..36d5b0b
--- /dev/null
+++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
@@ -0,0 +1,40 @@
+<template>
+  <codemirror
+    v-model="code"
+    ref="mycodemirror"
+    :autofocus="true"
+    :extensions="extensions"
+    :indent-with-tab="true"
+    @change="handleChange"
+    :tab-size="2"
+  />
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Codemirror } from 'vue-codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+
+const emits = defineEmits(['update:updateVal']);
+const code = ref('');
+const extensions = [yaml()];
+const handleChange = (e: string) => {
+  code.value = e;
+  emits('update:updateVal', code.value);
+};
+</script>
+<style lang="scss">
+.v-codemirror {
+  height: 100%;
+  width: 100%;
+  .cm-editor {
+    height: 100%;
+    border: 1px solid var(--o-time-text);
+    .cm-gutters {
+      background-color: var(--o-bash-bg);
+    }
+  }
+  .cm-focused {
+    outline: none;
+  }
+}
+</style>
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 896d3bb..47c580a 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -12,6 +12,7 @@ import CustomSaENode from './workFlowConfig/CustomSaENode.vue';
 import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
 import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons';
+import EditYamlDia from './workFlowConfig/yamlEditDialog.vue';
 
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
@@ -23,6 +24,7 @@ const workFlowItem = ref();
 const isAddWorkFlow = ref(false);
 const editData = ref();
 const dialogType = ref('');
+const isEditYaml = ref(false);
 function hanleAsideVisible(): void {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
@@ -120,6 +122,14 @@ const delNode = id => {
     node ? removeNodes(node) : '';
   }
 };
+// 编辑yaml
+const editYamlDrawer = id => {
+  isEditYaml.value = true;
+};
+// 关闭抽屉
+const closeDrawer = () => {
+  isEditYaml.value = false;
+};
 </script>
 <template>
   <div class="workFlowContainer" @drop="onDrop">
@@ -185,7 +195,7 @@ const delNode = id => {
         <MiniMap />
         <!-- 自定义节点 -->
         <template #node-custom="customNodeProps">
-          <CustomNode v-bind="customNodeProps" @delNode="delNode"></CustomNode>
+          <CustomNode v-bind="customNodeProps" @delNode="delNode" @editYamlDrawer="editYamlDrawer"></CustomNode>
         </template>
 
         <template #node-custom-start="customNodeStartProps">
@@ -230,6 +240,7 @@ const delNode = id => {
       @handleClose="handleClose"
     ></WorkFlowDialog>
   </div>
+  <EditYamlDia v-if="isEditYaml"></EditYamlDia>
 </template>
 <style lang="scss" scoped>
 .stancesItem {
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index 2c46dd6..f4dc8d2 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -23,7 +23,7 @@ const props = defineProps({
     required: false,
   },
 });
-const emits = defineEmits(['delNode']);
+const emits = defineEmits(['delNode', 'editYamlDrawer']);
 
 const statusList = ref(['waiting', 'success', 'error', 'default']);
 
@@ -45,6 +45,11 @@ watch(
 const delNode = id => {
   emits('delNode', id);
 };
+
+// 编辑yaml
+const editYaml = id => {
+  emits('editYamlDrawer', id);
+};
 </script>
 
 <template>
@@ -58,7 +63,7 @@ const delNode = id => {
         <div class="moreTip">
           <el-popover placement="right" trigger="hover" popper-class="nodeDealPopper">
             <template #reference>···</template>
-            <el-button text class="dealItem" disabled>编辑</el-button>
+            <el-button text class="dealItem" @click="editYaml(props.id)">编辑</el-button>
             <el-button text class="dealItem" @click="delNode(props.id)">删除</el-button>
           </el-popover>
         </div>
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDialog.vue b/src/views/createapp/components/workFlowConfig/yamlEditDialog.vue
new file mode 100644
index 0000000..b862b0f
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDialog.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="configYaml">
+    <el-drawer
+      v-model="visible"
+      :direction="direction"
+      :show-close="false"
+      :wrapperClosable="false"
+      :modal="true"
+      class="flowDrawer"
+    >
+      <template #header>
+        <div class="drawerHeader">步骤配置-LLM</div>
+      </template>
+      <template #default>
+        <div class="drawerBody">
+          <MirrorText ref="textarea" v-model:updateVal="yamlCode"></MirrorText>
+        </div>
+      </template>
+      <template #footer>
+        <div class="drawerFooter">
+          <el-button @click="closeDrawer">关闭</el-button>
+          <el-button type="primary" @click="closeDrawer">完成</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MirrorText from '../codeMirror/mirrorTextArea.vue';
+const visible = ref(true);
+const yamlCode = ref();
+const emits = defineEmits(['closeDrawer']);
+const closeDrawer = () => {
+  emits('closeDrawer');
+};
+</script>
+
+<style lang="scss">
+.flowDrawer {
+  padding: 0px;
+  background-color: var(--o-bg-color-base);
+  .el-drawer__header {
+    padding: 24px 24px 16px;
+    margin-bottom: 0px;
+    .drawerHeader {
+      width: 100%;
+      height: 24px;
+      line-height: 24px;
+      color: var(--o-text-color-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .el-drawer__body {
+    padding: 0px 24px 16px;
+    .drawerBody {
+      height: 100%;
+      textarea {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .el-drawer__footer {
+    box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.1);
+    padding: 0px 24px;
+    height: 48px;
+    line-height: 47px;
+  }
+}
+</style>
-- 
Gitee


From d9d512ed16a658c62f1a758af1e0e67028e3cda0 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Fri, 17 Jan 2025 16:29:11 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0yaml=E7=9B=B8=E5=BA=94?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index db0abf1..8328ad3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@computing/opendesign-icons": "file:lib\\opendesign-icons-1.0.3.tgz",
     "@computing/opendesign2": "file:lib\\opendesign2-2.0.11.tgz",
@@ -30,6 +31,7 @@
     "echarts": "^5.5.1",
     "element-plus": "2.8.0",
     "highlight.js": "11.10.0",
+    "js-yaml": "^4.1.0",
     "marked": "4.3",
     "pinia": "2.1.6",
     "sass": "1.62.0",
-- 
Gitee


From 67abfd0ed90dd47707fb75c6c28db323127422ec Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Fri, 17 Jan 2025 17:23:51 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/createapp/components/workFlow.vue                   | 4 ++--
 .../workFlowConfig/{yamlEditDialog.vue => yamlEditDrawer.vue} | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)
 rename src/views/createapp/components/workFlowConfig/{yamlEditDialog.vue => yamlEditDrawer.vue} (98%)

diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 47c580a..f0c6cd8 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -12,7 +12,7 @@ import CustomSaENode from './workFlowConfig/CustomSaENode.vue';
 import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
 import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons';
-import EditYamlDia from './workFlowConfig/yamlEditDialog.vue';
+import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
 
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
@@ -240,7 +240,7 @@ const closeDrawer = () => {
       @handleClose="handleClose"
     ></WorkFlowDialog>
   </div>
-  <EditYamlDia v-if="isEditYaml"></EditYamlDia>
+  <EditYamlDrawer v-if="isEditYaml"></EditYamlDrawer>
 </template>
 <style lang="scss" scoped>
 .stancesItem {
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDialog.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
similarity index 98%
rename from src/views/createapp/components/workFlowConfig/yamlEditDialog.vue
rename to src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index b862b0f..aff53af 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDialog.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -2,7 +2,6 @@
   <div class="configYaml">
     <el-drawer
       v-model="visible"
-      :direction="direction"
       :show-close="false"
       :wrapperClosable="false"
       :modal="true"
-- 
Gitee


From ea6ec7372b12fe2c1ec6b66568c4761a4ea4cab2 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Fri, 17 Jan 2025 17:29:35 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=A4=96=E9=83=A8=E6=8A=BD=E5=B1=89=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/createapp/components/workFlow.vue                     | 2 +-
 .../createapp/components/workFlowConfig/yamlEditDrawer.vue      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index f0c6cd8..5310555 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -240,7 +240,7 @@ const closeDrawer = () => {
       @handleClose="handleClose"
     ></WorkFlowDialog>
   </div>
-  <EditYamlDrawer v-if="isEditYaml"></EditYamlDrawer>
+  <EditYamlDrawer v-if="isEditYaml"  @closeDrawer="closeDrawer"></EditYamlDrawer>
 </template>
 <style lang="scss" scoped>
 .stancesItem {
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index aff53af..e2f71a4 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -6,6 +6,7 @@
       :wrapperClosable="false"
       :modal="true"
       class="flowDrawer"
+      :before-close="closeDrawer"
     >
       <template #header>
         <div class="drawerHeader">步骤配置-LLM</div>
-- 
Gitee