zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(flow): align route edges with node handles

This commit is contained in:
caoqianming 2026-08-10 09:39:41 +08:00
parent 6459fb4056
commit ce064f50d8
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/flow/MaterialNode.vue
View File

@ -117,28 +117,31 @@ export default {
padding: 0;
}
.vue-flow__handle {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
width: 9px;
height: 9px;
border-radius: 50%;
background: transparent;
border: 0;
background: #fff;
border: 2px solid #409eff;
cursor: crosshair;
}
.vue-flow__handle::before {
content: "";
position: absolute;
inset: -24px;
border-radius: 50%;
/* 扩大编辑器中的命中区域，但不改变 Vue Flow 用来计算连线端点的 Handle 尺寸。 */
background: transparent;
}
.vue-flow__handle::after {
content: "";
width: 9px;
height: 9px;
border: 2px solid #409eff;
border-radius: 50%;
background: #fff;
transition: width 0.15s, height 0.15s, background 0.15s, box-shadow 0.15s;
position: absolute;
inset: -2px;
border-radius: inherit;
background: transparent;
transition: background 0.15s, box-shadow 0.15s;
}
.vue-flow__handle:hover::after {
width: 13px;
height: 13px;
inset: -2px;
background: #409eff;
box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.18);
}