连线优化 背景网格 网格固定

src/components/layout/TopoButtonBar.vue

@@ -129,7 +129,7 @@ import splitIcon from "@/assets/icons/split.png" // 切分
 const { t } = useI18n()
 const projectStore = useProjectStore()
 const emit = defineEmits(["button-click"])
-const modeSwitch = ref(false) // 开关状态，默认关闭（连接模式）
+const modeSwitch = ref(true) // 开关状态，默认关闭（连接模式）
 const fakeTabs = [
   {
     name: "layer",

src/views/model/vueflow/defaultnode.vue

@@ -97,8 +97,8 @@ onMounted(() => {
 <style>
 .custom-handle {
   background: #c11f1f; /* 更浅的颜色 */
-  width: 6px;      /* 更小的尺寸 */
-  height: 6px;     /* 更小的尺寸 */
+  width: 5px;      /* 更小的尺寸 */
+  height: 5px;     /* 更小的尺寸 */
   border-radius: 50%;
   border: 1px solid #fff;
   transition: all 0.2s ease;
@@ -114,11 +114,25 @@ onMounted(() => {
   background: #161616; /* 悬停时稍深 */
 }
 
-.vue-flow__node-default, .vue-flow__node-input, .vue-flow__node-output{
+.vue-flow__node-default,
+.vue-flow__node-input,
+.vue-flow__node-output {
   width: 50px;
   height: 50px;
+  border: 1px solid #fff; /* 默认白色边框 */
+  outline: none; /* 移除 outline */
+  background-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box; /* 确保边框不影响尺寸 */
   pointer-events: auto;
-  border: none;
+}
+
+.vue-flow__node-default.selected,
+.vue-flow__node-input.selected,
+.vue-flow__node-output.selected {
+  border: 1px solid #2267B1; /* 选中时深蓝色边框 */
+  box-shadow: none !important; /* 移除阴影 */
+  outline: none;
+  background-color: rgba(0, 0, 0, 0);
 }
 
 .vue-flow__node-default:not(.selected) {
@@ -129,9 +143,14 @@ onMounted(() => {
     background-color: rgba(0,0,0,0);
 }
 
-.vue-flow__node-default.selected, .vue-flow__node-default.selected:hover, .vue-flow__node-input.selected, .vue-flow__node-input.selected:hover, .vue-flow__node-output.selected, .vue-flow__node-output.selected:hover{
-  box-shadow:none !important;
+.vue-flow__node-default.selected:hover,
+.vue-flow__node-input.selected:hover,
+.vue-flow__node-output.selected:hover {
+  border: 1px solid #2267B1; /* 保持选中边框 */
+  box-shadow: none !important;
+  outline: none;
 }
+
 .vue-flow__node {
           stroke: none; /* 移除节点边框 */
         }

src/views/model/vueflow/useDnD.js

@@ -149,7 +149,7 @@ export default function useDragAndDrop() {
    * @param {DragEvent} event
    */
 async function onDrop(event) {
-  const GRID_SIZE = 20; // 网格大小，调整为需要的对齐单位（如 10 或 50）
+  const GRID_SIZE = 10; // 网格大小，调整为需要的对齐单位（如 10 或 50）
   const position = screenToFlowCoordinate({
     x: event.clientX,
     y: event.clientY