feat: 流程设计

src/components/business/EasyProcess/common/data.ts

@@ -3,19 +3,18 @@ import { EasyProcess } from './data.type'
 export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
   start: {
     title: '开始',
-    color: '#FFFFFF',
     bgColor: '#1e83e9',
     canAdd: false,
     canRemoved: false,
     hasDrawer: false,
-    icon: { name: 'start', color: '#1e83e9' },
+    icon: { name: '&#xe646;' },
     defaultNode: { nodeName: '开始', nodeType: 'start', nodeData: {} }
   },
   router: {
     title: '条件分支',
     canAdd: true,
     hasDrawer: false,
-    icon: { name: 'router', color: '#3CB371' },
+    icon: { name: '&#xe804;' },
     defaultNode: {
       nodeName: '路由',
       nodeType: 'router',
@@ -28,42 +27,38 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
   },
   condition: {
     title: '条件',
-    color: '#FFFFFF',
     bgColor: '#3CB371',
     canAdd: false,
     canRemoved: true,
     hasDrawer: true,
-    icon: { name: 'condition', color: '#3CB371' },
+    icon: { name: '&#xe84c;' },
     defaultNode: { nodeName: '条件', nodeType: 'condition', isLastCondition: false, nodeData: {} }
   },
-  fault:{
+  fault: {
     title: '故障触发',
-    color: '#FFFFFF',
-    bgColor: '#FF4500',
+    bgColor: '#D74545',
     canAdd: true,
     canRemoved: true,
     hasDrawer: true,
-    icon: { name: 'fault', color: '#FF4500' },
+    icon: { name: '&#xe7cb;' },
     defaultNode: { nodeName: '故障触发', nodeType: 'fault', nodeData: {} }
   },
-  voice:{
+  voice: {
     title: '语音交互',
-    color: '#FFFFFF',
-    bgColor: '#FF69B4',
+    bgColor: '#6b3f80ff',
     canAdd: true,
     canRemoved: true,
     hasDrawer: true,
-    icon: { name: 'voice', color: '#FF69B4' },
+    icon: { name: '&#xe6e4;' },
     defaultNode: { nodeName: '语音交互', nodeType: 'voice', nodeData: {} }
   },
-  operate:{
+  operate: {
     title: '基本操作',
-    color: '#FFFFFF',
-    bgColor: '#8A2BE2',
+    bgColor: '#476B9F',
     canAdd: true,
     canRemoved: true,
     hasDrawer: true,
-    icon: { name: 'operate', color: '#8A2BE2' },
+    icon: { name: '&#xe60d;' },
     defaultNode: { nodeName: '基本操作', nodeType: 'operate', nodeData: {} }
   }
 }
@@ -74,12 +69,11 @@ export const getNodeConfig = (type: EasyProcess.NodeType) => {
   return (
     nodeConfigData[type] || {
       title: '未知节点',
-      color: '#FFFFFF',
       bgColor: '#3CB371',
       canAdd: false,
       canRemoved: true,
       hasDrawer: false,
-      icon: { name: 'condition', color: '#3CB371' },
+      icon: { name: 'condition' },
       defaultNode: { nodeName: '未知节点', nodeType: 'other', nodeData: {} }
     }
   )

src/components/business/EasyProcess/common/data.type.d.ts

@@ -16,7 +16,7 @@ export declare namespace EasyProcess {
     hasDrawer: boolean // 节点是否可以进行配置
     icon: {
       name: string // 图标名
-      color: string // 图标颜色
+      color?: string // 图标颜色
     }
     defaultNode: NodeConfig // 默认节点结构，用于添加节点时
   }

src/components/business/EasyProcess/node/base/AddNode.vue

@@ -1,20 +1,8 @@
 <template>
   <div class="ep-node-add">
-    <div
-      ref="nodeAddBtn"
-      class="ep-node-add-btn"
-      v-on:mouseenter="showAddSelect(true)"
-      v-on:mouseleave="showAddSelect(false)"
-    >
-      <svg-icon icon-class="plus" class="ep-node-add-btn-icon" color="#FFFFFF" />
-      <div
-        ref="nodeAddSelect"
-        :class="[
-          'ep-node-add-select-box',
-          nodeAddSelectPostion == 1 ? 'ep-node-add-left' : 'ep-node-add-right'
-        ]"
-        v-if="isShowAddSelect"
-      >
+    <div ref="nodeAddBtn" class="ep-node-add-btn" v-on:mouseenter="showAddSelect(true)" v-on:mouseleave="showAddSelect(false)">
+      <Icon class="ep-node-add-btn-icon" :icon="'&#xe83e;'" color="#FFFFFF" />
+      <div ref="nodeAddSelect" :class="['ep-node-add-select-box', nodeAddSelectPostion == 1 ? 'ep-node-add-left' : 'ep-node-add-right']" v-if="isShowAddSelect">
         <div
           :class="{ 'ep-node-add-select-item': true, 'ep-node-add-selected': item.selected }"
           v-for="(item, index) in nodeSelect"
@@ -23,14 +11,8 @@
           v-on:mouseenter="addNodeSelected(item, true)"
           v-on:mouseleave="addNodeSelected(item, false)"
         >
-          <svg-icon
-            :icon-class="item.icon.name"
-            class="ep-node-add-select-item-icon"
-            :color="item.selected ? '#FFFFFF' : item.icon.color"
-          />
-          <div class="ep-node-add-select-item-title">
-            {{ item.title }}
-          </div>
+          <Icon class="ep-node-add-select-item-icon" :icon="item.icon.name" :color="item.iconColor" />
+          <div class="ep-node-add-select-item-title"> {{ item.title }} </div>
         </div>
       </div>
     </div>
@@ -65,6 +47,7 @@
         title: item.title,
         type: key,
         icon: item.icon,
+        iconColor: item.bgColor || '#000',
         isSelected: false
       })
     }
@@ -155,6 +138,7 @@
         top: 50%;
         z-index: 10;
         display: flex;
+        gap: 8px;
         height: 80px;
         padding: 16px;
         background-color: #fff;
@@ -179,16 +163,10 @@
           justify-content: center;
           width: 80px;
           height: 100%;
-          margin: 0 10px;
           color: #5a5e66;
           cursor: pointer;
           border: 1px solid #ccc;
-          border-radius: 100px;
-
-          .ep-node-add-select-item-icon {
-            width: 35px;
-            height: 35px;
-          }
+          border-radius: 8px;
 
           .ep-node-add-select-item-title {
             font-size: 14px;

src/components/business/EasyProcess/node/base/BaseNode.vue

@@ -2,40 +2,19 @@
   <div :class="{ 'ep-node': true, 'ep-node-arrows': !isStart }">
     <div :class="{ 'ep-node-content': true, 'ep-node-error': isError }">
       <!-- header -->
-      <div
-        class="ep-node-header"
-        :style="{ color: config.color, 'background-color': config.bgColor }"
-      >
-        <svg-icon :icon-class="config.icon.name" class="ep-node-icon" color="#FFFFFF" />
-        <Icon v-if="isCondition" icon-class="condition" class="ep-node-icon" color="#FFFFFF" />
+      <div class="ep-node-header" :style="{ color: config.color, 'background-color': config.bgColor }">
+        <Icon class="ep-node-icon" :icon="config.icon.name" :color="config.icon.name || '#FFFFFF'" />
         <div class="ep-node-header-title">{{ config.title }}</div>
-        <svg-icon
-          icon-class="close"
-          class="ep-node-close"
-          color="#FFFFFF"
-          v-if="canRemoved"
-          @click="removeNode"
-        />
+        <Icon class="cursor-pointer text-white ep-node-close" :icon="'&#xe83a;'" v-if="canRemoved" @click.stop="removeNode" />
       </div>
       <!-- body -->
       <div class="ep-node-body" @click="showNodeDrawer">
-        <component
-          ref="node"
-          :is="nodeComponents[props.node.nodeType]"
-          :tempNodeId="tempNodeId"
-          :node="props.node"
-        />
+        <component ref="node" :is="nodeComponents[props.node.nodeType]" :tempNodeId="tempNodeId" :node="props.node" />
       </div>
       <!-- 校验错误提示 -->
       <div class="ep-node-error-msg" v-if="isError">
         <div class="ep-node-error-msg-box">
-          <svg-icon
-            icon-class="tips"
-            class="ep-node-error-icon"
-            color="red"
-            @mouseenter="showErrorTips(true)"
-            @mouseleave="showErrorTips(false)"
-          />
+          <svg-icon icon-class="tips" class="ep-node-error-icon" color="red" @mouseenter="showErrorTips(true)" @mouseleave="showErrorTips(false)" />
           <div class="ep-node-error-tips" v-if="errorTips && errorMsg">{{ errorMsg }}</div>
         </div>
       </div>
@@ -43,29 +22,15 @@
     <AddNode :node="props.node" />
 
     <!-- 节点配置Drawer -->
-    <BaseDrawer
-      ref="nodeDrawer"
-      @updateConfig="updateConfig"
-      @cancelUpdateConfig="cancelUpdateConfig"
-    />
+    <BaseDrawer ref="nodeDrawer" @updateConfig="updateConfig" @cancelUpdateConfig="cancelUpdateConfig" />
   </div>
 </template>
 
 <script setup name="BaseNode">
   import BaseDrawer from './BaseDrawer.vue'
   import AddNode from './AddNode.vue'
-  import {
-    ref,
-    shallowRef,
-    onMounted,
-    getCurrentInstance,
-    defineAsyncComponent,
-    watch,
-    computed,
-    onUnmounted,
-    inject
-  } from 'vue'
-  import { nodeConfigData, getNodeConfig } from '../../common/data.ts'
+  import { ref, shallowRef, onMounted, getCurrentInstance, defineAsyncComponent, watch, computed, onUnmounted, inject } from 'vue'
+  import { nodeConfigData } from '../../common/data.ts'
   import { getUUID } from '../../common/common.util.ts'
   import { KEY_VALIDATOR } from '../../config/keys'
 

src/components/icon/icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i class="iconfont-sys" v-if="iconType === 'unicode'" v-html="icon"></i>
+  <i class="iconfont-sys" v-if="iconType === 'unicode'" v-html="icon" :style="{ ...(color ? { color: color } : {}) }"></i>
   <i :class="`iconfont-sys ${icon}`" v-else-if="iconType === 'className'"></i>
   <Icon v-else-if="typeof icon === 'string'" :icon="icon" :width="width" :height="height" :color="color"></Icon>
   <component v-else-if="typeof icon === 'object'" :is="icon" :width="width" :height="height" :color="color"></component>

src/views/train/plan/index.vue

@@ -19,7 +19,7 @@
       <Icon :icon="'svg:gitee'" />
       <Icon :icon="'iconsys-tianjia1'" />
       <Icon :icon="'&#xe66e;'" />
-      <Icon :icon="'&#xe83a;'" />
+      <Icon :icon="'&#xe83a;'" :color="'red'" />
     </div>
 
     <el-dialog title="选择图标" width="40%" v-model="visible" align-center>