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