feat: 工作流程

ui/src/components/app-avatar/index.vue

@@ -17,6 +17,7 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  //是否用拼音字母颜色
   pinyinColor: {
     type: Boolean,
     default: false

ui/src/components/workflow/common/node-container/index.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="container">
-    <div class="step-container" :class="`step-color-${Math.ceil(Math.random() * 4)}`">
+  <div class="workflow-node-container p-16">
+    <div class="step-container p-16">
       <div v-resize="resizeStepContainer">
-        <div class="step-name">{{ nodeModel.properties.stepName }}</div>
-        <div style="padding: 10px"><slot></slot></div>
+        <div class="flex align-center mb-16">
+          <component :is="iconComponent(`${nodeModel.type}-icon`)" class="mr-8" :size="24" />
+          <h4>{{ nodeModel.properties.stepName }}</h4>
+        </div>
+        <div><slot></slot></div>
       </div>
       <div class="input-container" v-resize="resetInputContainer">
-        <el-divider> </el-divider>
         <div v-for="(item, index) in nodeModel.properties.input" :key="index" class="step-field">
           <span>{{ item.key }}</span>
         </div>
       </div>
       <div class="output-container" v-resize="resetOutputContainer">
-        <el-divider> </el-divider>
         <div
           v-for="(item, index) in nodeModel.properties.output"
           :key="index"
@@ -26,6 +27,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { iconComponent } from '../../menu-data'
 const height = ref<{
   stepContainerHeight: number
   inputContainerHeight: number
@@ -73,53 +75,20 @@ const props = defineProps<{
   nodeModel: any
 }>()
 </script>
-<style lang="scss">
-.el-divider--horizontal {
-  margin: 0;
-}
-.container {
-  box-sizing: border-box;
-  padding: 10px;
-}
-.step-container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
-}
-
-.step-container::before {
-  display: block;
-  width: 100%;
-  height: 8px;
-  background: #d79b00;
-  content: '';
-}
-
-.step-container.step-color-1::before {
-  background: #9673a6;
-}
-
-.step-container.step-color-2::before {
-  background: #dae8fc;
-}
-
-.step-container.step-color-3::before {
-  background: #82b366;
-}
-
-.step-container.step-color-4::before {
-  background: #f8cecc;
-}
-
-.step-name {
-  height: 28px;
-  font-size: 14px;
-  line-height: 28px;
-  text-align: center;
-  background: #f5f5f5;
+<style lang="scss" scoped>
+.workflow-node-container {
+  .step-container {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 9px;
+    box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
+    &:hover {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+    }
+  }
 }
 
 .step-field {

ui/src/components/workflow/icons/ai-chat-node-icon.vue

@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar class="avatar-gradient" shape="square">
+    <img src="@/assets/icon_robot.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>

ui/src/components/workflow/icons/search-dataset-node-icon.vue

@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square">
+    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>

ui/src/components/workflow/index.vue

@@ -6,14 +6,25 @@
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'
 import { ref, onMounted } from 'vue'
-import AiChatNode from './nodes/ai-chat-node/index.ts'
+import AiChatNode from './nodes/ai-chat-node/index'
 import AppEdge from './common/edge/index'
 import { AppMenu } from './common/menu/index'
 import '@logicflow/extension/lib/style/index.css'
 import '@logicflow/core/dist/style/index.css'
 
 defineOptions({ name: 'WorkFlow' })
-LogicFlow.use(AppMenu)
+
+type ShapeItem = {
+  type?: string
+  text?: string
+  icon?: string
+  label?: string
+  className?: string
+  disabled?: boolean
+  properties?: Record<string, any>
+  callback?: (lf: LogicFlow, container: HTMLElement) => void
+}
+// LogicFlow.use(AppMenu)
 
 const graphData = {
   nodes: [
@@ -151,6 +162,23 @@ const validate = () => {
 const getGraphData = () => {
   console.log(JSON.stringify(lf.value.getGraphData()))
 }
+
+const onmousedown = (shapeItem: ShapeItem) => {
+  if (shapeItem.type) {
+    lf.value.dnd.startDrag({
+      type: shapeItem.type,
+      properties: shapeItem.properties,
+      icon: shapeItem.icon,
+    })
+  }
+  if (shapeItem.callback) {
+    shapeItem.callback(lf.value)
+  }
+}
+
+defineExpose({
+  onmousedown
+})
 </script>
 <style lang="scss">
 .lf-dnd-text {

ui/src/components/workflow/menu-data.ts

@@ -0,0 +1,53 @@
+const icons: any = import.meta.glob('./icons/**.vue', { eager: true })
+function iconComponent(name) {
+  const url = `./icons/${name}.vue`
+  return icons[url]?.default || null
+}
+/**
+ * 说明
+ * type 与 nodes 文件对应
+ */
+const shapeList = [
+  {
+    type: 'ai-chat-node',
+    text: '与 AI 大模型进行对话',
+    label: 'AI 对话',
+    icon: 'ai-chat-node-icon',
+    properties: {
+      height: '',
+      stepName: 'AI 对话',
+      input: [
+        {
+          key: '输入'
+        }
+      ],
+      output: [
+        {
+          key: '输出'
+        }
+      ]
+    }
+  },
+  {
+    type: 'search-dataset-node',
+    text: '关联知识库，查找与问题相关的分段',
+    label: '知识检索',
+    icon: 'search-dataset-node-icon',
+    properties: {
+      height: '',
+      stepName: '知识检索',
+      input: [
+        {
+          key: '输入'
+        }
+      ],
+      output: [
+        {
+          key: '输出'
+        }
+      ]
+    }
+  }
+]
+
+export { shapeList, iconComponent }

ui/src/components/workflow/nodes/ai-chat-node/index.vue

@@ -1,40 +1,43 @@
 <template>
   <NodeContainer :nodeModel="nodeModel">
-    <el-form
-      @submit.prevent
-      :model="chat_data"
-      label-position="top"
-      require-asterisk-position="right"
-      class="mb-24"
-      label-width="auto"
-      ref="aiChatNodeFormRef"
-    >
-      <el-form-item
-        label="模型"
-        prop="model"
-        :rules="{
-          message: '模型不能为空',
-          trigger: 'blur',
-          required: true
-        }"
+    <h5 class="title-decoration-1 mb-8">节点设置</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="chat_data"
+        label-position="top"
+        require-asterisk-position="right"
+        class="mb-24"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
       >
-        <el-select v-model="chat_data.model" placeholder="请选择模型">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="提示词"
-        :rules="{
-          message: '提示词不能为空',
-          trigger: 'blur',
-          required: true
-        }"
-        prop="name"
-      >
-        <el-input v-model="chat_data.name" @focus="handleFocus" />
-      </el-form-item>
-    </el-form>
+        <el-form-item
+          label="模型"
+          prop="model"
+          :rules="{
+            message: '模型不能为空',
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <el-select v-model="chat_data.model" placeholder="请选择模型">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="提示词"
+          :rules="{
+            message: '提示词不能为空',
+            trigger: 'blur',
+            required: true
+          }"
+          prop="name"
+        >
+          <el-input v-model="chat_data.name" @focus="handleFocus" />
+        </el-form-item>
+      </el-form>
+    </el-card>
   </NodeContainer>
 </template>
 <script setup lang="ts">

ui/src/styles/app.scss

@@ -92,6 +92,11 @@ h4 {
   font-size: 16px;
 }
 
+h5 {
+  font-size: 14px;
+  font-weight: 500;
+}
+
 .bold {
   font-weight: 600;
 }
@@ -187,6 +192,9 @@ h4 {
 .p-24 {
   padding: calc(var(--app-base-px) * 3);
 }
+.p-8-12 {
+  padding: calc(var(--app-base-px)) calc(var(--app-base-px) + 4px);
+}
 .p-16-24 {
   padding: calc(var(--app-base-px) * 2) calc(var(--app-base-px) * 3);
 }

ui/src/views/application-workflow/index.vue

@@ -16,27 +16,39 @@
     <!-- 下拉框 -->
     <el-collapse-transition>
       <div v-show="showPopover" class="workflow-dropdown-menu border">
-        <p class="title">基础组件</p>
-        <div class="flex p-16">
-          <AppAvatar class="mr-8 mt-4" shape="square" :size="32">
-            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-          </AppAvatar>
-          <div class="pre-line">
-            <div>通用型</div>
-            <el-text type="info" size="small">可以通过上传文件或手动录入方式构建知识库</el-text>
+        <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" />
+            <div class="pre-line">
+              <div>{{ item.label }}</div>
+              <el-text type="info" size="small">{{ item.text }}</el-text>
+            </div>
           </div>
-        </div>
+        </template>
       </div>
     </el-collapse-transition>
     <div class="workflow-main">
-      <workflow />
+      <workflow ref="workflowRef" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
-
 import Workflow from '@/components/workflow/index.vue'
+import { shapeList, iconComponent } from '@/components/workflow/menu-data'
+type ShapeItem = {
+  type?: string
+  text?: string
+  icon?: string
+  label?: string
+  className?: string
+  disabled?: boolean
+  properties?: Record<string, any>
+  callback?: (lf: LogicFlow, container: HTMLElement) => void
+}
+
+const workflowRef = ref()
 
 const showPopover = ref(false)
 
@@ -44,6 +56,10 @@ function clickoutside() {
   showPopover.value = false
 }
 
+function onmousedown(item: ShapeItem) {
+  workflowRef.value?.onmousedown(item)
+}
+
 onMounted(() => {})
 
 onBeforeUnmount(() => {})
@@ -58,19 +74,28 @@ onBeforeUnmount(() => {})
     height: calc(100vh - var(--app-header-height) - 70px);
   }
   .workflow-dropdown-menu {
+    -moz-user-select: none; /* Firefox */
+    -webkit-user-select: none; /* WebKit内核 */
+    -ms-user-select: none; /* IE10及以后 */
+    -khtml-user-select: none; /* 早期浏览器 */
+    -o-user-select: none; /* Opera */
+    user-select: none; /* CSS3属性 */
     position: absolute;
     top: 110px;
     right: 24px;
     z-index: 99;
     width: 240px;
-    box-shadow: 0px 4px 8px 0px #1f23291a;
+    box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
     background: #ffffff;
     border-radius: 4px;
 
     .title {
-      font-size: 14px;
-      font-weight: 500;
-      padding: 8px 12px 0;
+      padding: 8px 12px 4px;
+    }
+    .workflow-dropdown-item {
+      &:hover {
+        background: var(--app-text-color-light-1);
+      }
     }
   }
 }

ui/src/views/chat/index.vue

@@ -5,9 +5,7 @@
 import { onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-const components: any = import.meta.glob('@/views/chat/**/index.vue', {
-  eager: true
-})
+const components: any = import.meta.glob('@/views/chat/**/index.vue')
 const route = useRoute()
 const {
   query: { mode }