From 60711da121403ee15cb3a38584a79f5ca42ac477 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Mon, 17 Feb 2025 17:09:03 +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=8A=B6=E6=80=81=E4=B8=8B=E6=8B=89=E6=8A=98=E5=8F=A0=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dialoguePanel/DialoguePanel.vue           |   3 +
 .../components/codeMirror/nodeMirrorText.vue  | 169 ++++++++++++++++++
 src/views/createapp/components/workFlow.vue   |  22 ++-
 .../components/workFlowConfig/BranchNode.vue  |   6 +-
 .../components/workFlowConfig/CustomNode.vue  |   5 +-
 src/views/styles/workFlowArrange.scss         |  34 ++--
 6 files changed, 218 insertions(+), 21 deletions(-)
 create mode 100644 src/views/createapp/components/codeMirror/nodeMirrorText.vue

diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index a7df31a..8b0bafd 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -1118,6 +1118,9 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app
     .content {
       margin-left: 0px;
       min-height: 48px;
+      .message {
+        white-space: pre-line;
+      }
     }
   }
   .dialogue-panel__user-time {
diff --git a/src/views/createapp/components/codeMirror/nodeMirrorText.vue b/src/views/createapp/components/codeMirror/nodeMirrorText.vue
new file mode 100644
index 0000000..4d3327d
--- /dev/null
+++ b/src/views/createapp/components/codeMirror/nodeMirrorText.vue
@@ -0,0 +1,169 @@
+<template>
+  <!-- 这里为下拉面板结果详情 -->
+  <el-collapse v-model="nodeResult" class="o-hpc-collapse resultDropDown" :prefix-icon="IconChevronDown">
+    <!-- 这里直接展示输入和输出 -->
+    <el-collapse-item v-for="(item, index) in resultInfo.infoList" :key="index" :name="item.id">
+      <template #title>
+        <span class="icon" :class="`${resultInfo.status}Icon`"></span>
+        <span>{{ item.title }}</span>
+        <!-- 这里接口返回的需要限制最大位数 -->
+        <span class="time" :class="`${resultInfo.status}Bg`" v-if="resultInfo.time">{{ resultInfo.time }}</span>
+        <span class="flexRight">展开结果</span>
+        <el-icon class="el-collapse-item__arrow">
+          <IconChevronDown></IconChevronDown>
+        </el-icon>
+      </template>
+      <div v-for="(subItem, idx) in item.desc" :key="idx" class="o-collapse-content">
+        <div class="itemTitle">
+          <div class="subName">{{ subItem.name }}</div>
+          <div
+            class="copyIcon"
+            :class="themeStore.theme === 'light' ? 'lightCopy' : 'darkCopy'"
+            @click="handleCopy(subItem.code)"
+          ></div>
+        </div>
+        <MirrorText ref="textarea" :yamlCode="yaml.dump(subItem.code)" :disabled="true"></MirrorText>
+      </div>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { IconChevronDown } from '@computing/opendesign-icons';
+import MirrorText from '../codeMirror/mirrorTextArea.vue';
+import { useChangeThemeStore } from 'src/store/conversation';
+import yaml from 'js-yaml';
+import { writeText } from 'src/utils';
+import { errorMsg, successMsg } from 'src/components/Message';
+
+const themeStore = useChangeThemeStore();
+const nodeResult = ref();
+const resultInfo = ref({
+  time: '3.1s',
+  status: 'error', // 成功/失败/运行中三种状态
+  infoList: [
+    {
+      id: '1',
+      title: '运行成功',
+      desc: [
+        // 定义的假数据，后期由接口获取
+        {
+          name: '输入',
+          code: '{' + '"code1": "200",' + '"label1": "succeed",' + '"templateDocument": "Description"' + '}',
+        },
+        {
+          name: '输出',
+          code: '{' + '"code2": "200",' + '"label2": "succeed"' + '}',
+        },
+      ],
+    },
+  ],
+});
+
+// 复制
+const handleCopy = code => {
+  // 判断是否有值
+  if (!code) {
+    errorMsg('无可复制的信息');
+    return;
+  }
+  writeText(code);
+  successMsg('复制成功');
+};
+</script>
+<style lang="scss">
+.resultDropDown {
+  position: absolute;
+  width: 100%;
+  min-height: 32px;
+  line-height: 32px;
+  height: fit-content;
+  left: 0px;
+  background-color: var(--o-bg-color-base);
+  top: calc(100% + 12px);
+  box-shadow: var(--flow-nodeBox-shadow);
+  border-radius: 8px;
+  .el-collapse-item__header {
+    padding: 8px 16px;
+    height: 32px;
+    line-height: 32px;
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    .icon {
+      width: 16px;
+      height: 16px;
+      background-size: contain !important;
+    }
+    .successIcon {
+      background: url(@/assets/images/flow_success.png) center center no-repeat;
+    }
+
+    .errorIcon {
+      background: url(@/assets/images/flow_fail.png) center center no-repeat;
+    }
+
+    .runningIcon {
+      background: url(@/assets/images/loading.png) center center no-repeat;
+    }
+    .time {
+      height: 16px;
+      line-height: 16px;
+      padding: 0px 8px;
+      border-radius: 4px;
+    }
+    .successBg {
+      background-color: rgba(36, 171, 54, 0.2);
+      color: #24ab36;
+    }
+    .errorBg {
+      background-color: #fbdede;
+      color: #e32020;
+    }
+    .flexRight {
+      margin-left: auto;
+      margin-right: -4px;
+    }
+  }
+  .el-collapse-item__content {
+    .itemTitle {
+      display: flex;
+      width: 100%;
+      height: 32px;
+      background-color: var(--o-time-text);
+      padding: 8px 16px;
+      .subName {
+        flex: 1;
+        font-size: 16px;
+        line-height: 16px;
+      }
+      .copyIcon {
+        width: 16px;
+      }
+      .lightCopy {
+        background: url(@/assets/svgs/light_copy.svg) center center no-repeat;
+      }
+      .darkCopy {
+        background: url(@/assets/svgs/light_copy.svg) center center no-repeat;
+      }
+    }
+    .o-collapse-content {
+      padding-left: 0px;
+      margin-bottom: 8px;
+      .cm-editor {
+        max-height: 160px;
+        overflow-y: auto;
+        .cm-gutterElement {
+          span[title='Fold line'] {
+            display: none;
+          }
+        }
+      }
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 6f18543..bd4233a 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -389,7 +389,7 @@ const redrageFlow = (nodesList, edgesList) => {
       newNode.deletable = false;
     } else if (node.type === 'choice') {
       newNode.type = 'branch';
-      newNode.data.parameters['input_parameters'] = node.parameters;
+      newNode.data.parameters['input_parameters'] = { ...node.parameters };
     } else {
       newNode.type = 'custom';
     }
@@ -457,6 +457,26 @@ const saveFlow = () => {
     };
     return newEdge;
   });
+  console.log(
+    {
+      appId: appId,
+      flowId: flowObj.value.flowId,
+      topologyCheck: false,
+    },
+    '---------',
+    {
+      flow: {
+        ...flowObj.value,
+        nodes: updateNodes,
+        edges: updateEdges,
+      },
+      focusPoint: {
+        x: 800,
+        y: 800,
+      },
+    },
+  );
+  // return;
   // 更新最新的节点与边的数据
   api
     .createOrUpdateFlowTopology(
diff --git a/src/views/createapp/components/workFlowConfig/BranchNode.vue b/src/views/createapp/components/workFlowConfig/BranchNode.vue
index feb83a4..894c5c3 100644
--- a/src/views/createapp/components/workFlowConfig/BranchNode.vue
+++ b/src/views/createapp/components/workFlowConfig/BranchNode.vue
@@ -2,6 +2,7 @@
 import { Position, Handle } from '@vue-flow/core';
 import { ref, onMounted, watch } from 'vue';
 import { BranchSourceIdType } from '../types';
+import NodeMirrorText from '../codeMirror/nodeMirrorText.vue';
 const props = defineProps({
   id: {
     type: String,
@@ -22,7 +23,7 @@ const props = defineProps({
 });
 const emits = defineEmits(['delNode', 'editYamlDrawer']);
 
-const statusList = ref(['waiting', 'success', 'error', 'default']);
+const statusList = ref(['running', 'success', 'error']);
 
 const branchIdList = ref([]);
 
@@ -78,12 +79,13 @@ const editYaml = (nodeName, yamlCode) => {
           {{ item.description }}
 
           <Handle class="souceFirstHandle" :id="branchIdList[index]" type="source" :position="Position.Right"></Handle>
-
           <div class="delOverShadow rightBox" style="top: 0%"></div>
           <div class="outHandleRing outRingRight" style="top: 30%"></div>
         </div>
       </div>
     </div>
+    <!-- 调试时出现-暂时隐藏 -->
+    <NodeMirrorText style="display: none"></NodeMirrorText>
   </div>
 </template>
 
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index a72f674..a062088 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Position, Handle } from '@vue-flow/core';
 import { ref, onMounted, watch } from 'vue';
+import NodeMirrorText from '../codeMirror/nodeMirrorText.vue';
 const props = defineProps({
   id: {
     type: String,
@@ -25,7 +26,7 @@ const props = defineProps({
 });
 const emits = defineEmits(['delNode', 'editYamlDrawer']);
 
-const statusList = ref(['waiting', 'success', 'error', 'default']);
+const statusList = ref(['running', 'success', 'error']);
 
 const curStatus = ref('');
 
@@ -77,5 +78,7 @@ const editYaml = (nodeName, yamlCode) => {
     <Handle type="source" :position="Position.Right" :connectable="props.data?.isConnectSource"></Handle>
     <div class="delOverShadow rightBox"></div>
     <div class="outHandleRing outRingRight"></div>
+    <!-- 调试时出现-暂时隐藏 -->
+    <NodeMirrorText style="display: none"></NodeMirrorText>
   </div>
 </template>
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 45b9697..6915c15 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -275,6 +275,7 @@
       box-shadow: var(--flow-nodeBox-shadow);
       flex-direction: column;
       gap: 8px;
+      border-radius: 8px;
       .title {
         display: flex;
         height: 24px;
@@ -320,14 +321,14 @@
       justify-content: center;
       border: none;
       z-index: 2;
-    }
-    .vue-flow__handle-right::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border: 4px solid rgb(223, 229, 239);
-      border-radius: 50%;
-      background: rgb(141, 152, 170);
+      &::after {
+        content: '';
+        width: 12px;
+        height: 12px;
+        border: 4px solid rgb(223, 229, 239);
+        border-radius: 50%;
+        background: rgb(141, 152, 170);
+      }
     }
     .vue-flow__handle-left {
       top: 50%;
@@ -341,15 +342,14 @@
       justify-content: center;
       border: none;
       z-index: 2;
-    }
-
-    .vue-flow__handle-left::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border: 4px solid rgb(223, 229, 239);
-      border-radius: 50%;
-      background: rgb(141, 152, 170);
+      &::after {
+        content: '';
+        width: 12px;
+        height: 12px;
+        border: 4px solid rgb(223, 229, 239);
+        border-radius: 50%;
+        background: rgb(141, 152, 170);
+      }
     }
     .outHandleRing {
       position: absolute;
-- 
Gitee