修改组件样式，边保持水平；修改连接点样式；

src/views/model/vueflow/defaultnode.vue

@@ -17,10 +17,10 @@ onMounted(() => {
       <img :src="props.node.data.image"/>
       <span>{{props.node.data.idCodeser }}</span>
     </div>
-  <Handle id="target-a" type="source" :position="Position.Right"  />
-  <Handle id="target-c" type="source" :position="Position.Top"  /> 
-  <Handle id="target-b" type="source" :position="Position.Left" /> 
-  <Handle id="target-d" type="source" :position="Position.Bottom"  /> 
+  <Handle id="target-a" type="source" :position="Position.Right" class="custom-handle"/>
+  <Handle id="target-c" type="source" :position="Position.Top"  class="custom-handle"/> 
+  <Handle id="target-b" type="source" :position="Position.Left" class="custom-handle"/> 
+  <Handle id="target-d" type="source" :position="Position.Bottom"  class="custom-handle"/> 
   </div>
 <!-- </div> -->
 </template>
@@ -38,6 +38,25 @@ onMounted(() => {
 
 </style>
 <style>
+.custom-handle {
+  background: #c11f1f; /* 更浅的颜色 */
+  width: 6px;      /* 更小的尺寸 */
+  height: 6px;     /* 更小的尺寸 */
+  border-radius: 50%;
+  border: 1px solid #fff;
+  transition: all 0.2s ease;
+}
+
+.vue-flow__node-default .vue-flow__handle, .vue-flow__node-input .vue-flow__handle, .vue-flow__node-output .vue-flow__handle {
+  background: #ddd;
+}
+
+.vue-flow__node-default .vue-flow__handle:hover,
+.vue-flow__node-input .vue-flow__handle:hover,
+.vue-flow__node-output .vue-flow__handle:hover {
+  background: #161616; /* 悬停时稍深 */
+}
+
 .vue-flow__node-default, .vue-flow__node-input, .vue-flow__node-output{
   width: 50px;
   height: 50px;

src/views/model/vueflow/index.vue

@@ -106,6 +106,9 @@ import asideData from "./aside/asideData.vue"
 
 import node from "@/assets/img/node.png"
 
+// 获取路由实例
+const router = useRouter()
+
 const {
   onInit,
   onNodeDragStop,
@@ -126,7 +129,7 @@ const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
 const dark = ref(false)
 let vueFlowRef = ref()
 let iconcolor = ref("#000")
-const GRID_SIZE = 5;
+const GRID_SIZE = 2;
 const edges = ref([])
 const nodes = ref([])
 let mergedObj = ref("")
@@ -159,8 +162,17 @@ const props = defineProps({
 
 // 处理节点拖动时的网格吸附
 onNodeDrag(({ node }) => {
-  node.position.x = Math.round(node.position.x / GRID_SIZE) * GRID_SIZE;
-  node.position.y = Math.round(node.position.y / GRID_SIZE) * GRID_SIZE;
+  if (!node) {
+    console.error('onNodeDrag 未收到节点数据');
+    return;
+  }
+  console.log('拖动节点:', node.id, node.type, node.position);
+  const step = node.type === 'point-only' ? 1 : GRID_SIZE;
+  const newPosition = {
+    x: Math.round(node.position.x / step) * step,
+    y: Math.round(node.position.y / step) * step,
+  };
+  updateNode(node.id, { position: newPosition });
 });
 
 // 旧数据存储
@@ -255,31 +267,33 @@ const toggleDarkMode = () => {
   }
 }
 
-const saveproject = () => {
-  let obj = {
-    nodes: toObject().nodes,
-    edges: toObject().edges
-  }
-  mergedObj.value = JSON.stringify(obj)
-
-  const params = {
-    transCode: "ES0002",
-    pid: pid.value,
-    flow: mergedObj.value,
-    name: projectStore.projectInfo.name || "",
-    remark: projectStore.projectInfo.remark || "",
-    keywords: projectStore.projectInfo.keywords || ""
-  }
-  request(params)
-    .then((res) => {
-      projectStore.setProjectInfo({
-        ...projectStore.projectInfo,
-        flow: mergedObj.value || ""
-      })
-    })
-    .catch((error) => {
-      console.error("保存失败:", error)
+const saveproject = async () => {
+  try {
+    let obj = {
+      nodes: toObject().nodes,
+      edges: toObject().edges
+    }
+    mergedObj.value = JSON.stringify(obj)
+
+    const params = {
+      transCode: "ES0002",
+      pid: pid.value,
+      flow: mergedObj.value,
+      name: projectStore.projectInfo.name || "",
+      remark: projectStore.projectInfo.remark || "",
+      keywords: projectStore.projectInfo.keywords || ""
+    }
+    
+    await request(params)
+    projectStore.setProjectInfo({
+      ...projectStore.projectInfo,
+      flow: mergedObj.value || ""
     })
+    console.log('保存成功')
+  } catch (error) {
+    console.error("保存失败:", error)
+    ElMessage.error("保存失败，请稍后重试")
+  }
 }
 
 const removeNode = () => {
@@ -746,6 +760,26 @@ const closePanel = () => {
   }, 100) // 延迟 100ms 销毁组件，避免 Splitpanes 销毁错误
 }
 
+// 路由切换前保存
+router.beforeEach(async (to, from, next) => {
+  if (to.path !== from.path) {
+    try {
+      await saveproject() // 直接调用 saveproject
+      next()
+    } catch (error) {
+      console.error("路由切换保存失败:", error)
+      next() // 即使保存失败也允许切换路由
+    }
+  } else {
+    next()
+  }
+})
+
+// 组件卸载前保存
+onBeforeUnmount(async () => {
+  await saveproject() // 直接调用 saveproject
+})
+
 defineExpose({
   resetTransform,
   toggleDarkMode,

src/views/model/vueflow/pointonlynode.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 .icons img{
     width: 6px;
     height: 6px;
-    top: -7px;
+    top: -9px;
     position: relative;
 }
 .icons span{

src/views/model/vueflow/useDnD.js

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