From 90fd05f08ef59a977ffc9f3adfee0d9b49782d07 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 19 Jun 2024 18:11:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E9=AB=98=E7=BA=A7?=
 =?UTF-8?q?=E7=BC=96=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/icons/index.ts            | 27 +++++++-
 ui/src/styles/app.scss                      |  4 +-
 ui/src/views/application-workflow/index.vue | 73 ++++++++++++++++++++-
 ui/src/workflow/common/NodeContainer.vue    | 23 ++++++-
 ui/src/workflow/common/app-node.ts          | 38 +++++++----
 ui/src/workflow/common/shortcut.ts          |  2 +-
 6 files changed, 146 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index a5fe5fc09..440d0e49c 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -955,7 +955,7 @@ export const iconMap: any = {
       ])
     }
   },
-  'app-magnify': {
+  'app-minify': {
     iconReader: () => {
       return h('i', [
         h(
@@ -976,6 +976,27 @@ export const iconMap: any = {
       ])
     }
   },
+  'app-magnify': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M384.341333 597.205333a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.208a21.333333 21.333333 0 0 1 0-30.165334l170.709333-170.666666H163.669333a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h220.672zM849.92 110.506667a21.333333 21.333333 0 0 1 30.165333 0l30.165334 30.165333a21.333333 21.333333 0 0 1 0 30.165333l-170.709334 170.666667h121.344a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-220.672a42.538667 42.538667 0 0 1-42.666666-42.666666v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v113.493333l167.04-166.997333z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
   'app-play-outlined': {
     iconReader: () => {
       return h('i', [
@@ -989,8 +1010,8 @@ export const iconMap: any = {
           },
           [
             h('path', {
-              d: 'M3.72924 12.114L10.8299 7.75969C11.0966 7.59484 11.2583 7.30819 11.2583 7.00001C11.2583 6.69184 11.0966 6.40571 10.8299 6.24033L3.72976 1.8865C3.58406 1.79736 3.41652 1.74977 3.24571 1.75C3.00419 1.75037 2.77234 1.84492 2.59944 2.01355C2.42829 2.18155 2.33221 2.40888 2.33326 2.64565V11.3554C2.33326 11.5229 2.38156 11.6867 2.47186 11.8295C2.60121 12.0319 2.80546 12.1748 3.03991 12.2269C3.27616 12.2805 3.52396 12.24 3.72924 12.114ZM3.49993 10.8861L9.83696 7.00002L3.49993 3.11411V10.8861Z',
-              fill: '#1F2329'
+              d: 'M2.63333 1.82346C2.81847 1.72056 3.04484 1.72611 3.22472 1.83795L10.8081 6.55299C10.9793 6.65945 11.0834 6.84677 11.0834 7.04838C11.0834 7.24999 10.9793 7.43731 10.8081 7.54376L3.22472 12.2588C3.04484 12.3707 2.81847 12.3762 2.63333 12.2733C2.44819 12.1704 2.33337 11.9752 2.33337 11.7634V2.33333C2.33337 2.12152 2.44819 1.92635 2.63333 1.82346ZM3.50004 3.38293V10.7138L9.39529 7.04838L3.50004 3.38293Z',
+              fill: 'currentColor'
             })
           ]
         )
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index e02bc8c37..d276bfcca 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -188,7 +188,9 @@ h5 {
 .mr-16 {
   margin-right: calc(var(--app-base-px) * 2);
 }
-
+.mr-24 {
+  margin-right: calc(var(--app-base-px) * 3);
+}
 .p-8 {
   padding: var(--app-base-px);
 }
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 7c3a1988e..45b534de6 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -9,7 +9,10 @@
         <el-button icon="Plus" @click="showPopover = !showPopover" v-click-outside="clickoutside">
           添加组件
         </el-button>
-        <el-button icon="CaretRight">调试</el-button>
+        <el-button @click="showDebug = true">
+          <AppIcon iconName="app-play-outlined" class="mr-4"></AppIcon>
+          调试</el-button
+        >
         <el-button type="primary" @click="publicHandle"> 保存 </el-button>
       </div>
     </div>
@@ -28,9 +31,37 @@
         </template>
       </div>
     </el-collapse-transition>
+    <!-- 主画布 -->
     <div class="workflow-main">
       <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" />
     </div>
+    <!-- 调试 -->
+    <el-collapse-transition>
+      <div class="workflow-debug-container" :class="enlarge ? 'enlarge' : ''" v-if="showDebug">
+        <div class="workflow-debug-header">
+          <div class="flex-between">
+            <h4 class="ml-24">
+              {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+            </h4>
+            <div class="mr-16">
+              <el-button link @click="enlarge = !enlarge">
+                <AppIcon
+                  :iconName="enlarge ? 'app-magnify' : 'app-minify'"
+                  class="color-secondary"
+                  style="font-size: 20px"
+                ></AppIcon>
+              </el-button>
+              <el-button link @click="showDebug = false">
+                <el-icon :size="20" class="color-secondary"><Close /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div class="scrollbar-height">
+          <AiChat :data="detail"></AiChat>
+        </div>
+      </div>
+    </el-collapse-transition>
   </div>
 </template>
 <script setup lang="ts">
@@ -56,6 +87,8 @@ const loading = ref(false)
 const detail = ref<any>(null)
 
 const showPopover = ref(false)
+const showDebug = ref(false)
+const enlarge = ref(false)
 
 function publicHandle() {
   workflowRef.value?.validate().then(() => {
@@ -64,6 +97,7 @@ function publicHandle() {
     }
     applicationApi.putPublishApplication(id as String, obj, loading).then(() => {
       MsgSuccess('发布成功')
+      getDetail()
     })
   })
 }
@@ -155,4 +189,41 @@ onBeforeUnmount(() => {
     }
   }
 }
+
+.workflow-debug-container {
+  z-index: 10000;
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid #ffffff;
+  background: linear-gradient(
+      188deg,
+      rgba(235, 241, 255, 0.2) 39.6%,
+      rgba(231, 249, 255, 0.2) 94.3%
+    ),
+    #eff0f1;
+  box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  overflow: hidden;
+  width: 420px;
+  height: 600px;
+  .workflow-debug-header {
+    background: var(--app-header-bg-color);
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  .scrollbar-height {
+    height: calc(100% - var(--app-header-height) - 24px);
+    padding-top: 24px;
+  }
+  &.enlarge {
+    width: 50% !important;
+    height: 100% !important;
+    bottom: 0 !important;
+    right: 0 !important;
+  }
+}
 </style>
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index 4c1ce15ba..aa4d04269 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -2,10 +2,26 @@
   <div class="workflow-node-container p-16">
     <div class="step-container p-16">
       <div v-resize="resizeStepContainer">
-        <div class="flex align-center mb-16">
-          <component :is="iconComponent(`${nodeModel.type}-icon`)" class="mr-8" :size="24" />
-          <h4>{{ nodeModel.properties.stepName }}</h4>
+        <div class="flex-between mb-16">
+          <div class="flex align-center">
+            <component :is="iconComponent(`${nodeModel.type}-icon`)" class="mr-8" :size="24" />
+            <h4>{{ nodeModel.properties.stepName }}</h4>
+          </div>
+          <div @click.stop>
+            <el-dropdown trigger="click">
+              <el-button text @click.stop>
+                <el-icon class="color-secondary"><MoreFilled /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu style="min-width: 80px">
+                  <el-dropdown-item class="p-8">复制</el-dropdown-item>
+                  <el-dropdown-item class="border-t p-8">删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
         </div>
+
         <div>
           <slot></slot>
           <template v-if="props.nodeModel.properties.fields?.length > 0">
@@ -61,6 +77,7 @@ const resizeStepContainer = (wh: any) => {
 const props = defineProps<{
   nodeModel: any
 }>()
+
 </script>
 <style lang="scss" scoped>
 .workflow-node-container {
diff --git a/ui/src/workflow/common/app-node.ts b/ui/src/workflow/common/app-node.ts
index 8a7c4bdad..fcfac040e 100644
--- a/ui/src/workflow/common/app-node.ts
+++ b/ui/src/workflow/common/app-node.ts
@@ -48,6 +48,18 @@ class AppNode extends HtmlResize.view {
     }
   }
 
+  // getAnchorShape(anchorData) {
+  //   const { x, y, type } = anchorData;
+  //   return h('rect', {
+  //     x: x - 5,
+  //     y: y - 5,
+  //     width: 10,
+  //     height: 10,
+  //     className: `custom-anchor ${
+  //       type === 'left' ? 'incomming-anchor' : 'outgoing-anchor'
+  //     }`,
+  //   });
+  // }
   setHtml(rootEl: HTMLElement) {
     if (!this.isMounted) {
       this.isMounted = true
@@ -115,23 +127,25 @@ class AppNodeModel extends HtmlResize.model {
   getDefaultAnchor() {
     const { id, x, y, width } = this
     const anchors: any = []
-    if (this.type !== 'start-node') {
+
+    if (this.type !== 'base-node') {
+      if (this.type !== 'start-node') {
+        anchors.push({
+          x: x - width / 2 + 10,
+          y: y,
+          id: `${id}_left`,
+          edgeAddable: false,
+          type: 'left'
+        })
+      }
       anchors.push({
-        x: x - width / 2 + 10,
+        x: x + width / 2 - 10,
         y: y,
-        id: `${id}_left`,
-        edgeAddable: false,
-        type: 'left'
+        id: `${id}_right`,
+        type: 'right'
       })
     }
 
-    anchors.push({
-      x: x + width / 2 - 10,
-      y: y,
-      id: `${id}_right`,
-      type: 'right'
-    })
-
     return anchors
   }
 }
diff --git a/ui/src/workflow/common/shortcut.ts b/ui/src/workflow/common/shortcut.ts
index 24477467f..ddbb7b6f9 100644
--- a/ui/src/workflow/common/shortcut.ts
+++ b/ui/src/workflow/common/shortcut.ts
@@ -84,7 +84,7 @@ export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
       }
-      ElMessageBox.confirm('确定删除改节点？', defaultOptions).then(() => {
+      ElMessageBox.confirm('确定删除该节点？', defaultOptions).then(() => {
         if (!keyboardOptions?.enabled) return true;
         if (graph.textEditElement) return true;
         const elements = graph.getSelectElements(true);