feat: 工作编排

2025-12-26 01:33:05 +00:00 · 2024-06-05 18:49:15 +08:00 · 2024-06-05 18:49:15 +08:00 · b52192d528
parent 23a7b5e75e
commit b52192d528
15 changed files with 261 additions and 87 deletions
--- a/ui/src/assets/icon_condition.svg
+++ b/ui/src/assets/icon_condition.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2404 11.9757C14.2022 11.8917 14.1406 11.8206 14.0629 11.7709C13.9853 11.7213 13.8949 11.6951 13.8027 11.6957H12.6518V9.16918C12.6518 7.44347 11.069 6.00118 8.96725 5.65376V1.63242C8.96725 1.37615 8.86544 1.13037 8.68423 0.949156C8.50302 0.767942 8.25724 0.666138 8.00096 0.666138C7.74469 0.666138 7.49891 0.767942 7.3177 0.949156C7.13648 1.13037 7.03468 1.37615 7.03468 1.63242V5.65604C4.93411 6.00233 3.34896 7.44576 3.34896 9.17033V11.6945H2.19811C2.07221 11.6959 1.95172 11.746 1.86184 11.8341C1.77197 11.9223 1.71965 12.0418 1.71582 12.1677V12.1837C1.71582 12.2797 1.74782 12.3779 1.80953 12.4614L3.76496 15.1345C3.80786 15.1932 3.86352 15.2413 3.92775 15.2754C3.99197 15.3094 4.06308 15.3284 4.13572 15.3309C4.20836 15.3334 4.28062 15.3195 4.34705 15.29C4.41349 15.2605 4.47237 15.2163 4.51925 15.1608L6.80153 12.4899C6.86177 12.42 6.9005 12.3341 6.91307 12.2427C6.92564 12.1512 6.91151 12.0581 6.87239 11.9745C6.83423 11.8906 6.7726 11.8195 6.69493 11.7698C6.61726 11.7201 6.52688 11.694 6.43468 11.6945H5.28382V9.16918C5.28382 8.3829 6.39925 7.50747 8.00039 7.50747C9.60153 7.50747 10.7192 8.3829 10.7192 9.16918V11.6922H9.56611C9.47671 11.6918 9.38902 11.7166 9.31303 11.7637C9.23705 11.8108 9.17583 11.8783 9.13639 11.9585C9.10152 12.026 9.08349 12.1009 9.08382 12.1768C9.08444 12.2795 9.11721 12.3794 9.17754 12.4625L11.133 15.1368C11.1759 15.1955 11.2315 15.2436 11.2957 15.2777C11.36 15.3117 11.4311 15.3307 11.5037 15.3332C11.5764 15.3357 11.6486 15.3217 11.7151 15.2923C11.7815 15.2628 11.8404 15.2186 11.8872 15.1631L14.1684 12.4888C14.242 12.404 14.2833 12.2959 14.285 12.1837V12.1688C14.2839 12.1015 14.2683 12.0352 14.2392 11.9745L14.2404 11.9757Z" fill="white"/>
+</svg>
--- a/ui/src/components/workflow/common/NodeControl.vue
+++ b/ui/src/components/workflow/common/NodeControl.vue
@ -1,29 +1,28 @@
 <template>
  <div>
    <el-button-group>
-      <el-button size="small" @click="$_zoomIn">放大</el-button>
-      <el-button size="small" @click="$_zoomOut">缩小</el-button>
-      <el-button size="small" @click="$_reset">适应</el-button>
+      <el-button size="small" @click="zoomIn">放大</el-button>
+      <el-button size="small" @click="zoomOut">缩小</el-button>
+      <el-button size="small" @click="fitView">适应</el-button>
    </el-button-group>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, nextTick, computed, watch, reactive } from 'vue'
 const props = defineProps({
-  lf: Object || String
+  lf: Object || String || null
 })

-function $_zoomIn() {
+function zoomIn() {
  props.lf?.zoom(true)
 }
-function $_zoomOut() {
+function zoomOut() {
  props.lf?.zoom(false)
 }
-function $_reset() {
+function fitView() {
  props.lf?.resetZoom()
  props.lf?.resetTranslate()
-  props.lf?.fitView()
+  // props.lf?.fitView()
 }
 </script>
 <style scoped></style>
--- a/ui/src/components/workflow/common/app-node/index.ts
+++ b/ui/src/components/workflow/common/app-node/index.ts
@ -103,7 +103,7 @@ class AppNodeModel extends HtmlNodeModel {
    })
  }
  setAttributes() {
-    this.width = 340
+    this.width = this.properties?.width || 340

    const circleOnlyAsTarget = {
      message: '只允许从右边的锚点连出',
--- a/ui/src/components/workflow/icons/condition-node-icon.vue
+++ b/ui/src/components/workflow/icons/condition-node-icon.vue
@ -1,6 +1,6 @@
 <template>
-  <AppAvatar shape="square" style="background: #D136D1;">
-    <img src="@/assets/icon_start.svg" style="width: 75%" alt="" />
+  <AppAvatar shape="square" style="background: #14C0FF;">
+    <img src="@/assets/icon_condition.svg" style="width: 75%" alt="" />
  </AppAvatar>
 </template>
 <script setup lang="ts"></script>
--- a/ui/src/components/workflow/index.vue
+++ b/ui/src/components/workflow/index.vue
@ -1,10 +1,7 @@
 <template>
-  <!-- <button @click="validate">点击校验</button>
-  <button @click="getGraphData">点击获取流程数据</button> -->
-  <div className="workflow-app" id="container">
-    <!-- 辅助工具栏 -->
-    <Control class="control" v-if="lf" :lf="lf"></Control>
-  </div>
+  <div className="workflow-app" id="container"></div>
+  <!-- 辅助工具栏 -->
+  <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
 </template>
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'
@ -73,6 +70,20 @@ const graphData = {
        output: [{ key: '输出' }]
        // node_data: { model: 'shanghai', name: '222222' }
      }
+    },
+    {
+      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      type: 'condition-node',
+      x: 600,
+      y: 850,
+      properties: {
+        height: 200,
+        width: 600,
+        stepName: '判断器',
+        input: [{ key: '输入' }],
+        output: [{ key: '输出' }]
+        // node_data: { model: 'shanghai', name: '222222' }
+      }
    }
  ]
  // edges: [
@ -130,32 +141,32 @@ onMounted(() => {
          thickness: 1
        }
      },
-      keyboard: {
-        enabled: true,
-        shortcuts: [
-          {
-            keys: ['backspace'],
-            callback: () => {
-              const elements = lf.value.getSelectElements(true)
-              if (
-                (elements.edges && elements.edges.length > 0) ||
-                (elements.nodes && elements.nodes.length > 0)
-              ) {
-                const r = window.confirm('确定要删除吗？')
-                if (r) {
-                  lf.value.clearSelectElements()
-                  elements.edges.forEach((edge: any) => {
-                    lf.value.deleteEdge(edge.id)
-                  })
-                  elements.nodes.forEach((node: any) => {
-                    lf.value.deleteNode(node.id)
-                  })
-                }
-              }
-            }
-          }
-        ]
-      },
+      // keyboard: {
+      //   enabled: true,
+      //   shortcuts: [
+      //     {
+      //       keys: ['backspace'],
+      //       callback: () => {
+      //         const elements = lf.value.getSelectElements(true)
+      //         if (
+      //           (elements.edges && elements.edges.length > 0) ||
+      //           (elements.nodes && elements.nodes.length > 0)
+      //         ) {
+      //           const r = window.confirm('确定要删除吗？')
+      //           if (r) {
+      //             lf.value.clearSelectElements()
+      //             elements.edges.forEach((edge: any) => {
+      //               lf.value.deleteEdge(edge.id)
+      //             })
+      //             elements.nodes.forEach((node: any) => {
+      //               lf.value.deleteNode(node.id)
+      //             })
+      //           }
+      //         }
+      //       }
+      //     }
+      //   ]
+      // },
      isSilentMode: false,
      container: container
    })
@ -176,7 +187,7 @@ onMounted(() => {
 })
 const validate = () => {
  lf.value.graphModel.nodes.forEach((element: any) => {
-    element.validate()
+    element?.validate?.()
  })
 }
 const getGraphData = () => {
@ -197,7 +208,9 @@ const onmousedown = (shapeItem: ShapeItem) => {
 }

 defineExpose({
-  onmousedown
+  onmousedown,
+  validate,
+  getGraphData
 })
 </script>
 <style lang="scss">
@ -205,12 +218,12 @@ defineExpose({
  width: 100%;
  height: 100%;
  position: relative;
-  .control {
-    position: absolute;
-    bottom: 24px;
-    left: 24px;
-    z-index: 2;
-  }
+}
+.workflow-control {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  z-index: 2;
 }
 // .lf-dnd-text {
 //   width: 200px;
--- a/ui/src/components/workflow/menu-data.ts
+++ b/ui/src/components/workflow/menu-data.ts
@ -47,6 +47,26 @@ const shapeList = [
        }
      ]
    }
+  },
+  {
+    type: 'condition-node',
+    text: '根据不同条件执行不同的节点',
+    label: '判断器',
+    icon: 'condition-node-icon',
+    properties: {
+      width: 600,
+      stepName: '判断器',
+      input: [
+        {
+          key: '输入'
+        }
+      ],
+      output: [
+        {
+          key: '输出'
+        }
+      ]
+    }
  }
 ]

--- a/ui/src/components/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/components/workflow/nodes/ai-chat-node/index.vue
@ -1,7 +1,7 @@
 <template>
  <NodeContainer :nodeModel="nodeModel">
    <h5 class="title-decoration-1 mb-8">节点设置</h5>
-    <el-card shadow="never" class="card-never">
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
      <el-form
        @submit.prevent
        :model="chat_data"
--- a/ui/src/components/workflow/nodes/base-node/index.vue
+++ b/ui/src/components/workflow/nodes/base-node/index.vue
@ -23,6 +23,7 @@
          maxlength="64"
          placeholder="请输入应用名称"
          show-word-limit
+          @focus="handleFocus"
        />
      </el-form-item>
      <el-form-item label="应用描述">
@ -33,6 +34,7 @@
          type="textarea"
          maxlength="256"
          show-word-limit
+          @focus="handleFocus"
        />
      </el-form-item>
      <el-form-item label="开场白">
@ -48,6 +50,7 @@
  </NodeContainer>
 </template>
 <script setup lang="ts">
+import { set } from 'lodash'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
@ -69,12 +72,12 @@ const chat_data = computed({
    return props.nodeModel.properties.node_data
  },
  set: (value) => {
-    props.nodeModel.properties.node_data = value
+    set(props.nodeModel.properties, 'node_data', value)
  }
 })

 const handleFocus = () => {
-  props.nodeModel.isSelected = false
+  set(props.nodeModel, 'isSelected', false)
 }
 const baseNodeFormRef = ref<FormInstance>()

@ -83,7 +86,8 @@ const validate = () => {
 }

 onMounted(() => {
-  props.nodeModel.validate = validate
+  
+  set(props.nodeModel, 'validate', validate)
 })
 </script>
 <style lang="scss" scoped></style>
--- a/ui/src/components/workflow/nodes/condition-node/index.ts
+++ b/ui/src/components/workflow/nodes/condition-node/index.ts
@ -1,12 +1,12 @@
-import ChatNodeVue from './index.vue'
+import ConditioNodeVue from './index.vue'
 import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
-class ChatNode extends AppNode {
+class ConditioNode extends AppNode {
  constructor(props: any) {
-    super(props, ChatNodeVue)
+    super(props, ConditioNodeVue)
  }
 }
 export default {
-  type: 'start-node',
+  type: 'condition-node',
  model: AppNodeModel,
-  view: ChatNode
+  view: ConditioNode
 }
--- a/ui/src/components/workflow/nodes/condition-node/index.vue
+++ b/ui/src/components/workflow/nodes/condition-node/index.vue
@ -1,46 +1,168 @@
 <template>
  <NodeContainer :nodeModel="nodeModel" class="start-node">
-    <h5 class="title-decoration-1 mb-8">全局变量</h5>
-    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">当前时 {time}</div>
-    <h5 class="title-decoration-1 mb-8">参数输出</h5>
-    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">用户问题 {question}</div>
+    <el-form
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      label-width="auto"
+      ref="ConditionNodeFormRef"
+    >
+      <template v-for="(item, index) in form_data.branch" :key="index">
+        <el-card shadow="never" class="card-never mb-8" style="--el-card-padding: 12px">
+          <p class="lighter mb-8">{{ judgeLabel(index) }}</p>
+          <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
+            <el-row :gutter="8">
+              <el-col :span="11">
+                <el-form-item
+                  :prop="'branch.' + index + '.conditions' + cIndex + '.field'"
+                  :rules="{
+                    required: true,
+                    message: '请选择变量',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select
+                    class="w-full"
+                    v-model="condition.field"
+                    placeholder="请选择变量"
+                    clearable
+                  >
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  :prop="'branch.' + index + '.conditions' + cIndex + '.compare'"
+                  :rules="{
+                    required: true,
+                    message: '请选择条件',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select v-model="condition.compare" placeholder="请选择条件" clearable>
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  :prop="'branch.' + index + '.conditions' + cIndex + '.value'"
+                  :rules="{
+                    required: true,
+                    message: '请输入值',
+                    trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="condition.value" placeholder="请输入值" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="1">
+                <el-button link type="info" class="mt-4" @click="deleteCondition(index, cIndex)">
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </el-col>
+            </el-row>
+          </template>
+          <el-button link type="primary" @click="addCondition(index)">
+            <el-icon class="mr-4"><Plus /></el-icon> 添加条件
+          </el-button>
+        </el-card>
+      </template>
+      <el-button link type="primary" @click="addBranch">
+        <el-icon class="mr-4"><Plus /></el-icon> 添加分支
+      </el-button>
+    </el-form>
  </NodeContainer>
 </template>
 <script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
+const props = defineProps<{ nodeModel: any }>()
+const form = {
+  branch: [
+    {
+      conditions: [
+        {
+          field: { node_id: 'xxx', fields: '' },
+          compare: '',
+          value: ''
+        }
+      ],
+      id: 'xxxx',
+      condition: 'and'
+    }
+  ]
+}

-const condition_data = computed({
+const form_data = computed({
  get: () => {
    if (props.nodeModel.properties.node_data) {
      return props.nodeModel.properties.node_data
    } else {
-      props.nodeModel.properties.node_data = {
-        name: '',
-        desc: '',
-        prologue:
-          '您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？'
-      }
+      set(props.nodeModel.properties, 'node_data', form)
    }
    return props.nodeModel.properties.node_data
  },
  set: (value) => {
-    props.nodeModel.properties.node_data = value
+    set(props.nodeModel.properties, 'node_data', value)
  }
 })
-const props = defineProps<{ nodeModel: any }>()
-const handleFocus = () => {
-  props.nodeModel.isSelected = false
-}
-const aiChatNodeFormRef = ref<FormInstance>()
+
+const ConditionNodeFormRef = ref<FormInstance>()

 const validate = () => {
-  aiChatNodeFormRef.value?.validate()
+  ConditionNodeFormRef.value?.validate()
+}
+
+const judgeLabel = (index: number) => {
+  if (index === 0) {
+    return 'IF'
+  } else if (index === form_data.value.branch.length - 1) {
+    return 'ELSE'
+  } else {
+    return 'ELSE IF ' + index
+  }
+}
+
+function addBranch() {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list.push({
+    conditions: [
+      {
+        field: { node_id: 'xxx', fields: '' },
+        compare: '',
+        value: ''
+      }
+    ],
+    id: 'xxxx',
+    condition: 'and'
+  })
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function addCondition(index: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].push({
+    field: { node_id: 'xxx', fields: '' },
+    compare: '',
+    value: ''
+  })
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function deleteCondition(index: number, cIndex: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].splice(cIndex, 1)
+  set(props.nodeModel.properties.node_data, 'branch', list)
 }

 onMounted(() => {
-  props.nodeModel.validate = validate
+  set(props.nodeModel, 'validate', validate)
 })
 </script>
 <style lang="scss" scoped></style>
--- a/ui/src/components/workflow/nodes/search-dataset-node/index.vue
+++ b/ui/src/components/workflow/nodes/search-dataset-node/index.vue
@ -108,8 +108,6 @@ const {

 const props = defineProps<{ nodeModel: any }>()

-console.log(props.nodeModel)
-
 const form = {
  dataset_id_list: [],
  dataset_setting: {
--- a/ui/src/components/workflow/nodes/start-node/index.vue
+++ b/ui/src/components/workflow/nodes/start-node/index.vue
@ -7,10 +7,15 @@
  </NodeContainer>
 </template>
 <script setup lang="ts">
+import { set } from 'lodash'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'

 const props = defineProps<{ nodeModel: any }>()
+
+// onMounted(() => {
+//   set(props.nodeModel, 'validate', validate)
+// })
 </script>
 <style lang="scss" scoped></style>
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@ -5,7 +5,7 @@
  --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
  --el-border-color: #dee0e3;
  --el-text-color-regular: #1f2329;
-  --el-color-info: #8f959e;
+  --el-color-info: #8f959e !important;
 }

 .el-button {
--- a/ui/src/styles/index.scss
+++ b/ui/src/styles/index.scss
@ -5,4 +5,4 @@
@import 'nprogress/nprogress.css';
@import 'highlight.js/styles/default.css';
@import 'md-editor-v3/lib/style.css';
-@import './md-editor.scss';
+@import './md-editor.scss';
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@ -6,6 +6,8 @@
        <h4>创建应用</h4>
      </div>
      <div>
+        <button @click="validate">点击校验</button>
+        <button @click="getGraphData">点击获取流程数据</button>
        <el-button icon="Plus" @click="showPopover = !showPopover" v-click-outside="clickoutside">
          添加组件
        </el-button>
@ -19,9 +21,9 @@
        <h5 class="title">基础组件</h5>
        <template v-for="(item, index) in shapeList" :key="index">
          <div class="workflow-dropdown-item cursor flex p-8-12" @mousedown="onmousedown(item)">
-            <component :is="iconComponent(item.icon)" class="mr-8 mt-4" />
+            <component :is="iconComponent(item.icon)" class="mr-8 mt-4" :size="32" />
            <div class="pre-line">
-              <div>{{ item.label }}</div>
+              <div class="lighter">{{ item.label }}</div>
              <el-text type="info" size="small">{{ item.text }}</el-text>
            </div>
          </div>
@ -50,6 +52,13 @@ function onmousedown(item: any) {
  workflowRef.value?.onmousedown(item)
 }

+function validate() {
+  workflowRef.value?.validate()
+}
+function getGraphData() {
+  workflowRef.value?.getGraphData()
+}
+
 onMounted(() => {})

 onBeforeUnmount(() => {})
@ -76,9 +85,10 @@ onBeforeUnmount(() => {})
    width: 240px;
    box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
    background: #ffffff;
+    padding-bottom: 8px;

    .title {
-      padding: 8px 12px 4px;
+      padding: 12px 12px 4px;
    }
    .workflow-dropdown-item {
      &:hover {