feat: 创建高级编排

2025-12-27 12:12:57 +00:00 · 2024-06-19 18:11:58 +08:00 · 2024-06-19 18:11:58 +08:00 · 90fd05f08e
parent f9ca88f420
commit 90fd05f08e
6 changed files with 146 additions and 21 deletions
--- 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'
            })
          ]
        )
--- 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);
 }
--- 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>
--- 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 {
--- 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
  }
 }
--- 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);