diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx
index 2f434cb0..1fc2f62b 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx
+++ b/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 `
-
`;
+
+
+
+
`;
},
handleMenuClick: (target, item) => {
switch (target.getAttribute('code')) {
diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.less b/react-ui/src/pages/Pipeline/editPipeline/index.less
index 1189e4f8..7a2cf09f 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/index.less
+++ b/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;
+ }
+ }
+ }
+}