【功能优化】替换 iconfont 图标

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -40,20 +40,26 @@
             <div class="handler-item-text">包容分支</div>
           </div>
           <div class="handler-item" @click="addNode(NodeType.DELAY_TIMER_NODE)">
-            <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
-            <div class="handler-item-icon copy">
-              <span class="iconfont icon-size icon-copy"></span>
+            <div class="handler-item-icon delay">
+              <span class="iconfont icon-size icon-delay"></span>
             </div>
             <div class="handler-item-text">延迟器</div>
           </div>
           <div class="handler-item" @click="addNode(NodeType.ROUTER_BRANCH_NODE)">
-            <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
-            <div class="handler-item-icon copy">
-              <span class="iconfont icon-size icon-copy"></span>
+            <div class="handler-item-icon router">
+              <span class="iconfont icon-size icon-router"></span>
             </div>
             <div class="handler-item-text">路由分支</div>
           </div>
-        </div>
+          <!--  TODO 触发器
+            <div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
+              <div class="handler-item-icon trigger">
+                <span class="iconfont icon-size icon-trigger"></span>
+              </div>
+              <div class="handler-item-text">触发器</div>
+            </div>
+           -->
+          </div> 
         <template #reference>
           <div class="add-icon"><Icon icon="ep:plus" /></div>
         </template>
@@ -263,6 +269,16 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
+  if (type === NodeType.TRIGGER_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: NodeType.TRIGGER_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>
 

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -28,6 +28,11 @@ export enum NodeType {
    */
   DELAY_TIMER_NODE = 14,
 
+  /**
+   * 触发器节点
+   */
+  TRIGGER_NODE = 15,
+
   /**
    * 条件节点
    */
@@ -498,6 +503,7 @@ NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
 NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人')
 NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器')
 NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点')
+NODE_DEFAULT_TEXT.set(NodeType.TRIGGER_NODE, '请设置触发器')
 
 export const NODE_DEFAULT_NAME = new Map<number, string>()
 NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
@@ -506,6 +512,7 @@ NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人')
 NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器')
 NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支')
+NODE_DEFAULT_NAME.set(NodeType.TRIGGER_NODE, '触发器')
 
 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
 export const CANDIDATE_STRATEGY: DictDataVO[] = [

src/components/SimpleProcessDesignerV2/src/nodes/DelayTimerNode.vue

@@ -10,7 +10,7 @@
       >
         <div class="node-title-container">
           <!-- TODO @芋艿 需要更换图标 -->
-          <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
+          <div class="node-title-icon delay-node"><span class="iconfont icon-delay"></span></div>
           <input
             v-if="!readonly && showInput"
             type="text"

src/components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue

@@ -9,9 +9,8 @@
         ]"
       >
         <div class="node-title-container">
-          <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
-          <div class="node-title-icon copy-task">
-            <span class="iconfont icon-copy"></span>
+          <div class="node-title-icon router-node">
+            <span class="iconfont icon-router"></span>
           </div>
           <input
             v-if="!readonly && showInput"

src/components/SimpleProcessDesignerV2/theme/iconfont.ttf

@@ -113,18 +113,21 @@
 
 // 节点连线气泡卡片样式
 .handler-item-wrapper {
+  width: 320px;
   display: flex;
+  flex-wrap: wrap;
   cursor: pointer;
 
   .handler-item {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 12px;
   }
 
   .handler-item-icon {
-    width: 60px;
-    height: 60px;
+    width: 50px;
+    height: 50px;
     background: #fff;
     border: 1px solid #e2e2e2;
     border-radius: 50%;
@@ -138,13 +141,14 @@
 
     .icon-size {
       font-size: 25px;
-      line-height: 60px;
+      line-height: 50px;
     }
   }
 
   .approve {
     color: #ff943e;
   }
+
   .copy {
     color: #3296fa;
   }
@@ -161,6 +165,18 @@
     color: #345da2;
   }
 
+  .delay {
+    color: #e47470;
+  }
+
+  .trigger {
+    color: #3373d2;
+  }
+
+  .router {
+    color: #ca3a31
+  }
+
   .handler-item-text {
     margin-top: 4px;
     width: 80px;
@@ -266,6 +282,18 @@
           &.start-user {
             color: #676565;
           }
+
+          &.delay-node {
+            color: #e47470;
+          }
+
+          &.trigger-node {
+            color: #3373d2;
+          }
+          
+          &.router-node {
+            color: #ca3a31
+          }
         }
 
         .node-title {
@@ -711,45 +739,56 @@
 
 // iconfont 样式
 @font-face {
-  font-family: 'iconfont'; /* Project id 4495938 */
-  src:
-    url('iconfont.woff2?t=1724339470412') format('woff2'),
-    url('iconfont.woff?t=1724339470412') format('woff'),
-    url('iconfont.ttf?t=1724339470412') format('truetype');
+  font-family: "iconfont"; /* Project id 4495938 */
+  src: url('iconfont.woff2?t=1737639517142') format('woff2'),
+       url('iconfont.woff?t=1737639517142') format('woff'),
+       url('iconfont.ttf?t=1737639517142') format('truetype');
 }
 
 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-trigger:before {
+  content: "\e6d3";
+}
+
+.icon-router:before {
+  content: "\e6b2";
+}
+
+.icon-delay:before {
+  content: "\e600";
+}
+
 .icon-start-user:before {
-  content: '\e679';
+  content: "\e679";
 }
 
 .icon-inclusive:before {
-  content: '\e602';
+  content: "\e602";
 }
 
 .icon-copy:before {
-  content: '\e7eb';
+  content: "\e7eb";
 }
 
 .icon-handle:before {
-  content: '\e61c';
+  content: "\e61c";
 }
 
 .icon-exclusive:before {
-  content: '\e717';
+  content: "\e717";
 }
 
 .icon-approve:before {
-  content: '\e715';
+  content: "\e715";
 }
 
 .icon-parallel:before {
-  content: '\e688';
+  content: "\e688";
 }