feat: 修改流水线上下文菜单

react-ui/src/components/KFIcon/index.tsx

@@ -1,7 +1,7 @@
 /*
  * @Author: 赵伟
  * @Date: 2024-04-17 12:53:06
- * @Description:
+ * @Description: 封装 iconfont 组件
  */
 import '@/iconfont/iconfont-menu.js';
 import '@/iconfont/iconfont.js';

react-ui/src/pages/Experiment/Info/index.jsx

@@ -25,10 +25,6 @@ function ExperimentText() {
 
   const getGraphData = (data) => {
     if (graph) {
-      // 修改历史数据有蓝色边框的问题
-      data.nodes.forEach((item) => {
-        item.style.stroke = '#fff';
-      });
       graph.data(data);
       graph.render();
     } else {
@@ -70,6 +66,18 @@ function ExperimentText() {
   useEffect(() => {
     initGraph();
     getFirstWorkflow(locationParams.workflowId);
+
+    const changeSize = () => {
+      if (!graph || graph.get('destroyed')) return;
+      if (!graphRef.current) return;
+      graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight);
+      graph.fitView();
+    };
+
+    window.addEventListener('resize', changeSize);
+    return () => {
+      window.removeEventListener('resize', changeSize);
+    };
   }, []);
 
   const initGraph = () => {
@@ -144,7 +152,7 @@ function ExperimentText() {
             if (value) {
               shape.attr('stroke', themes['primaryColor']);
             } else {
-              shape.attr('stroke', '#fff');
+              shape.attr('stroke', 'transparent');
             }
           }
         },
@@ -196,8 +204,14 @@ function ExperimentText() {
         },
         style: {
           fill: '#fff',
-          stroke: '#fff',
-          radius: 10,
+          stroke: 'transparent',
+          cursor: 'pointer',
+          radius: 8,
+          shadowColor: 'rgba(75, 84, 137, 0.4)',
+          shadowBlur: 6,
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
+          overflow: 'hidden',
           lineWidth: 0.5,
         },
       },
@@ -224,6 +238,23 @@ function ExperimentText() {
         },
       },
     });
+
+    // 修改历史数据样式问题
+    graph.node((node) => {
+      return {
+        style: {
+          stroke: 'transparent',
+          radius: 8,
+        },
+      };
+    });
+
+    // 绑定事件
+    bindEvents();
+  };
+
+  // 绑定事件
+  const bindEvents = () => {
     graph.on('node:click', (e) => {
       if (e.target.get('name') !== 'anchor-point' && e.item) {
         propsRef.current.showDrawer(e, locationParams.id, messageRef.current);
@@ -235,13 +266,8 @@ function ExperimentText() {
     graph.on('node:mouseleave', (e) => {
       graph.setItemState(e.item, 'hover', false);
     });
-    window.onresize = () => {
-      if (!graph || graph.get('destroyed')) return;
-      if (!graphRef.current) return;
-      graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight);
-      graph.fitView();
-    };
   };
+
   return (
     <div className={styles['pipeline-container']}>
       <div className={styles['pipeline-container__top']}>

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -122,10 +122,6 @@ const EditPipeline = () => {
   // 渲染数据
   const getGraphData = (data) => {
     if (graph) {
-      // 修改历史数据有蓝色边框的问题
-      data.nodes.forEach((item) => {
-        item.style.stroke = '#fff';
-      });
       graph.data(data);
       graph.render();
     } else {
@@ -371,7 +367,7 @@ const EditPipeline = () => {
                 point.show();
               });
             } else {
-              shape.attr('stroke', '#fff');
+              shape.attr('stroke', 'transparent');
               anchorPoints.forEach((point) => {
                 point.hide();
               });
@@ -467,9 +463,13 @@ const EditPipeline = () => {
         },
         style: {
           fill: '#fff',
-          stroke: '#fff',
+          stroke: 'transparent',
           cursor: 'pointer',
-          radius: 10,
+          radius: 8,
+          shadowColor: 'rgba(75, 84, 137, 0.4)',
+          shadowBlur: 6,
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
           overflow: 'hidden',
           lineWidth: 0.5,
         },
@@ -500,9 +500,21 @@ const EditPipeline = () => {
       },
     });
 
+    // 修改历史数据样式问题
+    graph.node((node) => {
+      return {
+        style: {
+          stroke: 'transparent',
+          radius: 8,
+        },
+      };
+    });
+
+    // 绑定事件
     bindEvents();
   };
 
+  // 绑定事件
   const bindEvents = () => {
     graph.on('node:click', (e) => {
       if (e.target.get('name') !== 'anchor-point' && e.item) {
@@ -599,25 +611,25 @@ const EditPipeline = () => {
   // 上下文菜单
   const initMenu = () => {
     const contextMenu = new G6.Menu({
+      className: 'pipeline-context-menu',
       getContent(evt) {
         const type = evt.item.getType();
-        const cloneDisplay = type === 'node' ? 'block' : 'none';
+        const cloneDisplay = type === 'node' ? 'flex' : 'none';
         return `
-            <ul style="position: absolute;
-            width: 100px;
-            padding-left:0;
-            display:flex;
-            flex-direction: column;
-            align-items:center;
-            left: 0px;
-            top: 0px;
-            background-color: #ffffff;
-            font-size: 14px;
-            color: #333333;
-            overflow-y: auto;">
-              <li style="padding: 10px 20px;cursor: pointer; display: ${cloneDisplay}" code="clone">复制</li>
-              <li style="padding: 10px 20px;cursor: pointer;" code="delete">删除</li>
-            </ul>`;
+            <div>
+              <div class="pipeline-context-menu__item" style="display: ${cloneDisplay}" code="clone">
+                <svg class="pipeline-context-menu__item__icon">
+                 <use xlink:href="#icon-fuzhi1" />
+                </svg>
+                <span>复制</span>
+              </div>
+              <div class="pipeline-context-menu__item" code="delete">
+                <svg class="pipeline-context-menu__item__icon">
+                  <use xlink:href="#icon-shanchu1" />
+                </svg>
+                <span>删除</span>
+               </div>
+            </div>`;
       },
       handleMenuClick: (target, item) => {
         switch (target.getAttribute('code')) {

react-ui/src/pages/Pipeline/editPipeline/index.less

@@ -28,3 +28,36 @@
     }
   }
 }
+
+:global {
+  .pipeline-context-menu {
+    width: 78px;
+    padding: 10px 0;
+    background: #ffffff;
+    border-radius: 6px;
+    box-shadow: 0px 0px 6px rgba(40, 84, 168, 0.21);
+
+    &__item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 34px;
+      padding-left: 12px;
+      color: @text-color-secondary;
+      font-size: 15px;
+      cursor: pointer;
+
+      &:hover {
+        color: @primary-color;
+        background-color: .addAlpha(#8895a8, 0.11) [];
+      }
+
+      &__icon {
+        width: 1em;
+        height: 1em;
+        margin-right: 9px;
+        fill: currentColor;
+      }
+    }
+  }
+}