TencentBlueKing · zyxazhang · Apr 7, 2022
diff --git a/frontend/pc/src/i18n/lang/en.js b/frontend/pc/src/i18n/lang/en.js
@@ -2465,6 +2465,7 @@ export const m = {
     '暂未开放': 'Unopen',
     '请输入模板内容': 'Please enter the template content',
     '确认要删除？': 'Are you sure you want to delete?',
+    '复制': 'Copy',
     '导入': 'Import',
     '导出': 'Export',
     '文件': 'File',

diff --git a/frontend/pc/src/i18n/lang/zh.js b/frontend/pc/src/i18n/lang/zh.js
@@ -2547,6 +2547,7 @@ export const m = {
     '暂未开放': '暂未开放',
     '请输入模板内容': '请输入模板内容',
     '确认要删除？': '确认要删除？',
+    '复制': '复制',
     '导入': '导入',
     '导出': '导出',
     '文件': '文件',

diff --git a/frontend/pc/src/scss/bk-new-change.scss b/frontend/pc/src/scss/bk-new-change.scss
@@ -78,12 +78,12 @@
         padding: 0 20px;
         display: inline-block;
         border: 1px solid #C4C6CC;
-        border-radius: 11px;
+        // border-radius: 11px;
         color: #979BA5;
         font-size: 12px;
         padding: 0 8px;
         line-height: 22px;
-        background-color: #fff;
+        background-color: #fbf9e2;
         white-space: nowrap;
         cursor: pointer;
         &:hover {

diff --git a/frontend/pc/src/scss/icon/fonts/commonicon.eot b/frontend/pc/src/scss/icon/fonts/commonicon.eot
diff --git a/frontend/pc/src/scss/icon/fonts/commonicon.svg b/frontend/pc/src/scss/icon/fonts/commonicon.svg
diff --git a/frontend/pc/src/scss/icon/fonts/commonicon.ttf b/frontend/pc/src/scss/icon/fonts/commonicon.ttf
diff --git a/frontend/pc/src/scss/icon/fonts/commonicon.woff b/frontend/pc/src/scss/icon/fonts/commonicon.woff
diff --git a/frontend/pc/src/scss/icon/iconfont.css b/frontend/pc/src/scss/icon/iconfont.css
@@ -8,6 +8,7 @@ url("scss/icon/fonts/commonicon.eot?#iefix") format("embedded-opentype");
     font-style: normal;
 }
 
+
 .bk-itsm-icon {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'commonicon' !important;
@@ -851,3 +852,9 @@ url("scss/icon/fonts/commonicon.eot?#iefix") format("embedded-opentype");
 .icon-pinglun:before {
 	content: "\e220";
 }
+.icon-kaishi:before {
+	content: "\e221";
+}
+.icon-jieshu:before {
+	content: "\e222";
+}
diff --git a/frontend/pc/src/views/commonComponent/preview/NodeTemplate.vue b/frontend/pc/src/views/commonComponent/preview/NodeTemplate.vue
@@ -28,10 +28,10 @@
         @mousemove="moveFn"
         @mouseup="onNodeClick(node, $event)">
         <div v-if="node.type === 'START'" class="startpoint">
-            {{ $t('m.treeinfo["开始"]') }}
+            <span :title="$t(`m.treeinfo['开始']`)" class="bk-itsm-icon icon-kaishi"></span>
         </div>
-        <div v-if="node.type === 'END'" class="endpoint">
-            {{ $t('m.treeinfo["结束"]') }}
+        <div v-if="node.type === 'END'" class="endpoint" style="padding: 8px">
+            <span :title="$t(`m.treeinfo['结束']`)" class="bk-itsm-icon icon-jieshu"></span>
         </div>
         <template v-for="(item, index) in typeList" v-if="node.type === item.type">
             <div class="common-node" :class="{ 'common-auto': item.type === 'TASK' }" :key="index">
@@ -54,9 +54,9 @@
                         'bk-word-error': (node.nodeInfo.statusInfo === 'TERMINATED' || node.nodeInfo.statusInfo === 'FAILED'),
                         'bk-word-preview': node.nodeInfo.statusInfo === 'WAIT',
                         'bk-word-normal': normalColor
-                    }">
+                    }" :title="node.name">
                     {{node.name || $t(`m.treeinfo["新增节点"]`)}}</span>
-                <template v-if="previewInfo.canClick && node.nodeInfo.statusInfo !== 'WAIT'">
+                <template v-if="previewInfo.canClick && (node.nodeInfo.statusInfo !== 'WAIT' && node.nodeInfo.statusInfo !== 'FINISHED')">
                     <div class="bk-icon-status"
                         :class="{ 'bk-icon-success': node.nodeInfo.statusInfo === 'FINISHED', 'bk-icon-error': (node.nodeInfo.statusInfo === 'TERMINATED' || node.nodeInfo.statusInfo === 'FAILED') }">
                         <i class="bk-icon icon-check-1"
@@ -74,11 +74,11 @@
         </template>
         <!-- 网关节点 -->
         <div v-if="node.type === 'ROUTER-P'" class="common-branch">
-            <i class="bk-itsm-icon icon-flow-convergence"></i>
+            <i class="bk-itsm-icon icon-flow-convergence" style="color: #738abe"></i>
         </div>
         <!-- 汇聚节点 -->
         <div v-if="node.type === 'COVERAGE'" class="common-branch">
-            <i class="bk-itsm-icon icon-flow-branch"></i>
+            <i class="bk-itsm-icon icon-flow-branch" style="color: #738abe"></i>
         </div>
     </div>
 </template>
@@ -213,33 +213,29 @@
             /* 文字 */
             .bk-more-word {
                 color: #3c96ff;
-                border: 1px solid #3A84FF !important;;
-                border-radius: 0 20px 20px 0;
+                border-radius: 0 3px 3px 0;
             }
 
             .bk-word-success {
                 color: #2DCB56;
-                border: 1px solid #2DCB56 !important;
-                border-radius: 0 20px 20px 0;
+                border-radius: 0 3px 3px 0;
             }
 
             .bk-word-error {
                 color: #FF5656;
-                border: 1px solid #FF5656 !important;
-                border-radius: 0 20px 20px 0;
+                border-radius: 0 3px 3px 0;
             }
 
             .bk-word-preview {
                 color: #c4c6cc;
-                border-color: #c4c6cc !important;
-                border-radius: 0 20px 20px 0;
+                border-radius: 0 3px 3px 0;
             }
         }
 
         .bk-icon-status {
             position: absolute;
-            top: 10px;
-            right: 6px;
+            top: -10px;
+            right: -10px;
             width: 20px;
             height: 20px;
             border-radius: 50%;
@@ -249,7 +245,7 @@
 
             .bk-icon {
                 position: absolute;
-                top: 2px;
+                top: 1px;
                 right: 1px;
                 font-size: 18px;
             }

diff --git a/frontend/pc/src/views/commonComponent/preview/nodeTemplate.scss b/frontend/pc/src/views/commonComponent/preview/nodeTemplate.scss
@@ -10,20 +10,40 @@
 
 .startpoint,
 .endpoint {
-    width: 40px;
-    height: 40px;
+    width: 58px;
+    height: 58px;
     line-height: 37px;
     border-radius: 50%;
-    border: 2px solid #C9CACB;
     text-align: center;
     color: #63656E;
-    background-color: #F0F1F5;
+    background-color: #fff;
     font-size: 12px;
     box-shadow: 0px 2px 4px 0px rgba(196, 198, 204, 0.5);
+    .icon-kaishi {
+        display: block;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        font-size: 40px;
+        line-height: 60px;
+        margin: 0 auto;
+        color: #738abe;
+    }
+    .icon-jieshu {
+        display: block;
+        width: 42px;
+        height: 42px;
+        border: 2px solid #738abe;
+        border-radius: 50%;
+        font-size: 28px;
+        line-height: 40px;
+        margin: 0 auto;
+        color: #738abe;
+    }
 }
 
 .common-branch {
-    border: 1px solid #C4C6CC;
+    color: #738abe;
     border-radius: 50%;
     width: 40px;
     height: 40px;
@@ -50,24 +70,26 @@
 }
 
 .common-node {
-    width: 150px;
-    height: 40px;
-    line-height: 38px;
+    width: 160px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    // line-height: 54px;
     text-align: center;
     background-color: #fff;
-    padding-left: 40px;
+    padding-left: 32px;
     color: #63656E;
     font-size: 14px;
     position: relative;
-    border-radius: 25px;
+    border-radius: 4px;
     box-shadow: 0px 2px 4px 0px rgba(196, 198, 204, 0.5);
     border: 1px solid #DCDEE5;
     cursor: pointer;
     position: relative;
 
     &:hover {
         border: 1px solid #3A84FF;
-        border-radius: 20px;
+        // border-radius: 20px;
         color: #3A84FF;
 
         .bk-node-delete {
@@ -84,12 +106,12 @@
         top: 0;
         left: 0;
         font-size: 16px;
-        width: 40px;
-        height: 38px;
-        line-height: 38px;
+        width: 32px;
+        height: 54px;
+        // line-height: 38px;
         color: #fff;
         background-color: #3A84FF;
-        border-radius: 25px 0 0 25px;
+        border-radius: 3px 0 0 3px;
         box-shadow: 0px 2px 4px 0px rgba(196, 198, 204, 0.5);
 
         .bk-itsm-icon {
@@ -147,11 +169,16 @@
 .bk-more-word {
     display: inline-block;
     box-sizing: border-box;
-    width: 110px;
+    width: 126px;
+    text-align: left;
     padding: 0 10px 0 4px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    // white-space: nowrap;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 }
 
 .bk-node-delete {

diff --git a/frontend/pc/src/views/service/editService/ServiceProcessStep.vue b/frontend/pc/src/views/service/editService/ServiceProcessStep.vue
@@ -32,7 +32,7 @@
                 @handleNodeClick="handleNodeClick">
             </second-flow>
             <div v-else>
-                <div class="node-type">{{ nodeType }}
+                <div class="node-type">{{ nodeType }}(#{{ configur.id }})
                     <i class="bk-itsm-icon icon-itsm-icon-three-one close-node-conf" @click="closeConfigur"></i>
                 </div>
                 <basic-node

diff --git a/frontend/pc/src/views/service/editService/flowCanvas/NodeTemplate.vue b/frontend/pc/src/views/service/editService/flowCanvas/NodeTemplate.vue
@@ -27,32 +27,27 @@
         @mousedown="moveDoneFn(node)"
         @mousemove="moveFn"
         @mouseup="onNodeClick(node, $event)"
-        @contextmenu.prevent="rightClickNode(node, $event)"
         @mouseout="hoverNode(node)"
         v-bk-clickoutside="closeNode"
-        v-bk-tooltips="{
-            placement: 'auto',
-            content: node.name,
-            theme: 'light'
-        }">
+        :title="node.name">
         <div v-if="node.type === 'START'" class="startpoint" data-test-id="startNode">
-            {{ $t(`m.treeinfo['开始']`) }}
+            <span :title="$t(`m.treeinfo['开始']`)" class="bk-itsm-icon icon-kaishi"></span>
         </div>
-        <div v-if="node.type === 'END'" class="endpoint" data-test-id="endNode">
-            {{ $t('m.treeinfo["结束"]') }}
+        <div v-if="node.type === 'END'" class="endpoint" data-test-id="endNode" style="padding: 8px">
+            <span :title="$t(`m.treeinfo['结束']`)" class="bk-itsm-icon icon-jieshu"></span>
         </div>
         <!-- 手动节点 -->
         <template v-for="(item, index) in typeList">
             <template v-if="node.type === item.type">
-                <div class="common-node" :key="index" :data-test-id="`nodeTemplate-common-node-${index}-${item.type}`" @click="clickNode(node, $event)">
+                <div class="common-node" :key="index" :data-test-id="`nodeTemplate-common-node-${index}-${item.type}`" @click="clickNode(node, $event)" @dblclick="rightClickNode(node, $event)">
                     <span class="common-auto-icon"
                         :class="{ 'bk-is-draft': (node.nodeInfo && node.nodeInfo.is_draft) }"
                         @click.stop="openconfigu">
                         <i class="bk-itsm-icon" :class="item.iconStyle" v-if="item.type !== 'TASK'"></i>
                         <span v-else style="font-size: 11px; font-weight: bold;">API</span>
                     </span>
                     <span class="bk-more-word" :title="(node.name || $t(`m.treeinfo['新增节点']`))">{{node.name || $t(`m.treeinfo['新增节点']`)}}</span>
-                    <i class="bk-itsm-icon icon-edit-bold"></i>
+                    <!-- <i class="bk-itsm-icon icon-edit-bold"></i> -->
                     <span class="bk-node-delete"
                         v-if="!(node.nodeInfo && node.nodeInfo.is_builtin)"
                         @click.stop="clickDelete(node)"
@@ -69,12 +64,12 @@
         </template>
         <!-- 网关节点 -->
         <div v-if="node.type === 'ROUTER-P'" class="common-branch">
-            <i class="bk-itsm-icon icon-flow-convergence"></i>
+            <i class="bk-itsm-icon icon-flow-convergence" style="color: #738abe"></i>
             <span class="bk-node-delete" @click.stop="clickDelete(node)">×</span>
         </div>
         <!-- 汇聚节点 -->
         <div v-if="node.type === 'COVERAGE'" class="common-branch">
-            <i class="bk-itsm-icon icon-flow-branch"></i>
+            <i class="bk-itsm-icon icon-flow-branch" style="color: #738abe"></i>
             <span class="bk-node-delete" @click.stop="clickDelete(node)">×</span>
         </div>
         <!-- 更多操作 -->
@@ -104,12 +99,13 @@
                 </ul>
             </div>
             <div class="bk-engine-word">
-                <span class="bk-canvas-span bk-engine-configur"
+                <span v-bk-tooltips.bottom="$t(`m['编辑']`)" class="bk-itsm-icon icon-edit-new"
                     :class="{ 'bk-engine-builtin': (node.type === 'ROUTER-P' || node.type === 'COVERAGE') }"
-                    @click.stop="openconfigu">{{ $t('m.treeinfo["配置"]') }}</span>
-                <span class="bk-canvas-span bk-engine-delete"
+                    @click.stop="openconfigu"></span>
+                <span v-bk-tooltips.bottom="$t(`m['复制']`)" class="bk-itsm-icon icon-itsm-icon-copy" @click="addNormal(node, copyNodeInfo)"></span>
+                <span v-bk-tooltips.bottom="$t(`m['删除']`)" class="bk-itsm-icon icon-itsm-icon-delet-fill"
                     :class="{ 'bk-engine-builtin': (node.nodeInfo && node.nodeInfo.is_builtin) }"
-                    @click.stop="clickDelete(node)">{{ $t('m.treeinfo["删除"]') }}</span>
+                    @click.stop="clickDelete(node)"></span>
             </div>
         </div>
     </div>
@@ -159,9 +155,10 @@
                     { type: 'SIGN', name: this.$t(`m.treeinfo['会签节点']`), iconStyle: 'icon-sign-node' },
                     { type: 'APPROVAL', name: this.$t(`m.treeinfo['审批节点']`), iconStyle: 'icon-approval-node' },
                     { type: 'COVERAGE', name: this.$t(`m.treeinfo["汇聚网关"]`), iconStyle: 'icon-flow-branch' },
-                    { type: 'ROUTER-P', name: this.$t(`m.treeinfo["并行网关"]`), iconStyle: 'icon-flow-convergence' },
-                    { type: 'COPY', name: this.$t(`m.treeinfo["复制节点"]`), iconStyle: 'icon-copy-new' }
+                    { type: 'ROUTER-P', name: this.$t(`m.treeinfo["并行网关"]`), iconStyle: 'icon-flow-convergence' }
+                    // { type: 'COPY', name: this.$t(`m.treeinfo["复制节点"]`), iconStyle: 'icon-copy-new' }
                 ],
+                copyNodeInfo: { type: 'COPY', name: this.$t(`m.treeinfo["复制节点"]`), iconStyle: 'icon-copy-new' },
                 currentNode: {}
             }
         },
@@ -203,16 +200,22 @@
                 this.moveFlag = false
             },
             clickNode (node, event) {
-                this.openconfigu()
-            },
-            // 右键事件
-            rightClickNode (node, event) {
+                // this.openconfigu()
                 if (!node) {
                     return
                 }
                 this.$emit('closeShow')
                 node.showMore = true
             },
+            // 右键事件
+            rightClickNode (node, event) {
+                this.openconfigu()
+                // if (!node) {
+                //     return
+                // }
+                // this.$emit('closeShow')
+                // node.showMore = true
+            },
             // 配置详情
             openconfigu () {
                 const node = deepClone(this.node)