网格显示隐藏、固定到网格、选择连接模式开关

src/components/layout/TopoButtonBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header-button-bar" style="position: relative">
     <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
-      <!-- 特殊按钮 tab 退出 保存 -->
+      <!-- 特殊按钮 tab -->
       <el-tab-pane v-for="btn in fakeTabs" :key="btn.name" :name="btn.name">
         <template #label>
           <span @click.stop>
@@ -416,7 +416,7 @@ const handleTabClick = (tab) => {
 
 const handleModeSwitch = (value) => {
   console.log(value ? "切换到选择模式" : "切换到连接模式")
-  // 在这里添加切换模式的逻辑
+  emit("mode-switch", value)
 }
 
 </script>

src/views/model/index.vue

@@ -87,8 +87,11 @@
                 </div>
               </div>
               <TopoButtonBar 
-              @run-button-click="btnfunc" 
-              @open-simulationData-dialog="handleOpenSimulationDataDialog"/>
+              @run-button-click="btnfunc"
+              @open-simulationData-dialog="handleOpenSimulationDataDialog"
+              @button-click="handleTopoButtonClick"
+              @mode-switch="handleTopoModeSwitch"
+              />
             </div>
             <!-- <div class="main-header">
               <div class="topologyStyle">Topology</div> -->
@@ -180,7 +183,13 @@
               </el-tabs> -->
             <!-- </div> -->
             <div class="flow-content">
-              <vueflow ref="vueflowref" :jobId="jobId" />
+              <vueflow 
+                ref="vueflowref" 
+                :jobId="jobId"
+                :showGrid="buttonStates.showGrid"
+                :fixedGrid="buttonStates.fixedGrid"
+                :isSelectMode="modeSwitch"
+              />
             </div>
           </pane>
           <pane min-size="0" size="25" max-size="50">
@@ -340,6 +349,11 @@ const jobId = ref()
 
 const SLdatadialogref = ref(null)
 const RunDialogRef = ref(null)
+const modeSwitch = ref(false) // 连接模式开关
+const buttonStates = ref({ // 拓扑按钮状态
+  showGrid: false,
+  fixedGrid: false
+})
 
 const headerbuttons = ref([
   { type: "button", img: "newproject.png", name: "temp" },
@@ -535,6 +549,19 @@ const handleTimelineItemClick = (index) => {
   vueflowref.value?.asideDataref?.getresultData(jobId.value)
 }
 
+// 处理 topoButtonBar 触发的 button-click 事件
+const handleTopoButtonClick = ({ action, isActive }) => {
+  buttonStates.value[action] = isActive !== undefined ? isActive : buttonStates.value[action]
+  console.log(`Button clicked: ${action}, isActive: ${buttonStates.value[action]}`)
+}
+
+// 处理 topoButtonBar 触发的 mode-switch 事件
+const handleTopoModeSwitch = (value) => {
+  modeSwitch.value = value
+  console.log(value ? "切换到选择模式" : "切换到连接模式")
+}
+
+
 //websockct的连接
 function initWebSocket() {
   //初始化weosocket

src/views/model/vueflow/index.vue

@@ -10,6 +10,8 @@
         :default-viewport="{ zoom: 1.5 }"
         :min-zoom="0.2"
         :max-zoom="2.5"
+        :nodes-draggable="isSelectMode"
+        :nodes-connectable="isSelectMode ? false : true"
         @drop="customOnDrop"
         @node-contextmenu="onNodeContextMenu"
         @dragover="onDragOver"
@@ -32,7 +34,11 @@
           />
         </template>
 
-        <Background pattern-color="#aaa" :gap="16" />
+        <Background
+          :variant="showGrid ? 'dots' : 'none'"
+          pattern-color="#aaa" 
+          :gap="16" 
+        />
 
         <!-- <Controls position="top-left">
           <ControlButton title="重置" @click="resetTransform">
@@ -133,7 +139,7 @@ const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
 const dark = ref(false)
 let vueFlowRef = ref()
 let iconcolor = ref("#000")
-const GRID_SIZE = 2;
+const GRID_SIZE = 20;
 const edges = ref([])
 const nodes = ref([])
 let mergedObj = ref("")
@@ -157,10 +163,10 @@ const showPanel = ref(false)
 const asideDataref = ref()
 
 const props = defineProps({
-  jobId: {
-    type: String,
-    default: ""
-  }
+  jobId: {type: String, default: ""},
+  showGrid: { type: Boolean, default: false },
+  fixedGrid: { type: Boolean, default: false },
+  isSelectMode: { type: Boolean, default: true }
 })
 
 const debouncedSave = debounce(() => {
@@ -183,10 +189,7 @@ onMounted(() => {
 
 // 处理节点拖动时的网格吸附
 onNodeDrag(({ node }) => {
-  if (!node) {
-    console.error('onNodeDrag 未收到节点数据');
-    return;
-  }
+  if (!node  || !props.fixedGrid) return;
   const step = node.type === 'point-only' ? 1 : GRID_SIZE;
   const newPosition = {
     x: Math.round(node.position.x / step) * step,

src/views/model/vueflow/useDnD.js

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