8.20打包上传

dist/assets/delete-fae820c5.css

@@ -0,0 +1 @@
+@import"https://cdn.jsdelivr.net/npm/@vue-flow/core@1.39.0/dist/style.css";@import"https://cdn.jsdelivr.net/npm/@vue-flow/core@1.39.0/dist/theme-default.css";@import"https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css";@import"https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css";@import"https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css";html,body,#app{margin:0;height:100%}#app{text-transform:uppercase;font-family:JetBrains Mono,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}.vue-flow__minimap{transform:scale(75%);transform-origin:bottom right}.dnd-flow{flex-direction:column;display:flex;height:100%}.dnd-flow aside{color:#fff;font-weight:700;border-right:1px solid #eee;padding:15px 10px;font-size:12px;background:#10b981bf;-webkit-box-shadow:0px 5px 10px 0px rgba(0,0,0,.3);box-shadow:0 5px 10px #0000004d}.dnd-flow aside .nodes>*{margin-bottom:10px;cursor:grab;font-weight:500;-webkit-box-shadow:5px 5px 10px 2px rgba(0,0,0,.25);box-shadow:5px 5px 10px 2px #00000040}.dnd-flow aside .description{margin-bottom:10px}.dnd-flow .vue-flow-wrapper{flex-grow:1;height:100%}@media screen and (min-width: 640px){.dnd-flow{flex-direction:row}.dnd-flow aside{min-width:25%}}@media screen and (max-width: 639px){.dnd-flow aside .nodes{display:flex;flex-direction:row;gap:5px}}.dropzone-background{position:relative;height:100%;width:100%}.dropzone-background .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}

dist/assets/demo-22818a63.css

@@ -0,0 +1 @@
+.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#00000080;z-index:1000}.dialog{background:#2d3748;padding:20px;border-radius:5px;text-align:center;color:#fff}.dialog .actions{margin-top:20px;display:flex;justify-content:center;gap:8px}.dialog .actions button{background:#4a5568;color:#fff;border:none;padding:8px 16px;border-radius:5px;cursor:pointer}.dialog .actions button:first-of-type:hover{background:#2563eb}.dialog .actions button:last-of-type:hover{background:#e53e3e}

dist/assets/index-a78395a3.css

@@ -0,0 +1 @@
+.ve_menu_logo[data-v-d3ab69e2]{width:100%;height:40px;background-color:#2267b1;overflow:hidden;padding:0 10px}.ve_menu_logo .ve_logo_img[data-v-d3ab69e2]{height:100%;text-align:center;display:inline-block;box-sizing:border-box;vertical-align:middle}.ve_menu_logo .ve_logo_title[data-v-d3ab69e2]{overflow:hidden;text-overflow:ellipsis;display:inline-block;margin:0;font-size:16px;vertical-align:middle;color:#fff}.boy[data-v-6f6a5acf]{font-size:24px;color:red}.color[data-v-9ca4274c]{font-size:24px;color:#00f}.moban button[data-v-448e7463]{margin:10px}.moban .el-image[data-v-448e7463]{width:40px}.moban span[data-v-448e7463]{display:block}.left_main_content[data-v-451614a2] .el-icon svg{display:block}.footerTitle[data-v-451614a2]{display:flex;justify-content:space-between;padding:5px 20px;font-size:20px;height:25px!important;z-index:99;background-color:#fff;border-radius:5px 5px 0 0}.footerTitle div[data-v-451614a2]{display:flex;justify-content:space-around;align-items:center;font-size:14px}.kongzhit[data-v-451614a2]{position:absolute;bottom:0;width:100%}.footerTitle p[data-v-451614a2]{margin:0}.footerTitle span[data-v-451614a2]{padding:5px 10px;cursor:default}.footerText .el-textarea__inner[data-v-451614a2]{width:100%;height:135px!important;border:0;font-size:12px;color:#333;padding:2px}

dist/assets/index-c380bba0.css

@@ -1 +0,0 @@
-.ve_menu_logo[data-v-d3ab69e2]{width:100%;height:40px;background-color:#2267b1;overflow:hidden;padding:0 10px}.ve_menu_logo .ve_logo_img[data-v-d3ab69e2]{height:100%;text-align:center;display:inline-block;box-sizing:border-box;vertical-align:middle}.ve_menu_logo .ve_logo_title[data-v-d3ab69e2]{overflow:hidden;text-overflow:ellipsis;display:inline-block;margin:0;font-size:16px;vertical-align:middle;color:#fff}.boy[data-v-6f6a5acf]{font-size:24px;color:red}.color[data-v-9ca4274c]{font-size:24px;color:#00f}.moban button[data-v-448e7463]{margin:10px}.moban .el-image[data-v-448e7463]{width:40px}.moban span[data-v-448e7463]{display:block}.left_main_content[data-v-1b4f8049] .el-icon svg{display:none}.footerTitle[data-v-1b4f8049]{display:flex;justify-content:space-between;padding:5px 20px;font-size:20px;height:25px!important;z-index:99;background-color:#fff;border-radius:5px 5px 0 0}.footerTitle div[data-v-1b4f8049]{display:flex;justify-content:space-around;align-items:center;font-size:14px}.kongzhit[data-v-1b4f8049]{position:absolute;bottom:0;width:100%}.footerTitle p[data-v-1b4f8049]{margin:0}.footerTitle span[data-v-1b4f8049]{padding:5px 10px;cursor:default}.footerText .el-textarea__inner[data-v-1b4f8049]{width:100%;height:135px!important;border:0;font-size:12px;color:#333;padding:2px}

dist/assets/index-d11f8a47.css

@@ -0,0 +1 @@
+.icons img[data-v-ff3b7228]{width:30px}.icons span[data-v-ff3b7228]{display:block;font-size:13px}.vue-flow__node.draggable{width:64px!important;height:64px!important;border:none;background-color:#0000}.vue-flow__node{stroke:none}.vue-flow__edge-path{fill:none;stroke-width:1;marker-end:url(#vue-flow__arrow)}.vue-flow__edge-text{display:none}.vue-flow__node-custom{background:purple;color:#fff;border:1px solid purple;border-radius:4px;box-shadow:0 0 0 1px purple;padding:8px}.vue-flow__edge{text-align:left}#contextMenu{display:none;position:absolute;background-color:#fff;border-radius:5px;padding:10px;text-align:center;color:#000;font-size:14px;font-weight:400;cursor:pointer}

dist/index.html

@@ -8,8 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  
     <title></title>
-    <script type="module" crossorigin src="./assets/index-a422b2db.js"></script>
-    <link rel="stylesheet" href="./assets/index-78ba6cb1.css">
+    <script type="module" crossorigin src="./assets/index-ab924b12.js"></script>
+    <link rel="stylesheet" href="./assets/index-9b8d7d4f.css">
   </head>
   <body>
     <div id="app"></div>

src/style/index.css

@@ -354,14 +354,14 @@ transform: scale(0.5, 1);
   font-size: 16px; /* 这里设置为20px，你可以根据需求调整大小 */
 }
 .custom-tree .el-tree-node__children .el-tree-node__content .treesvgi {
-  font-size: 14px !important; /* 第二级字体大小 */
+  font-size: 15px !important; /* 第二级字体大小 */
   font-weight: 400;
   color: #383838 ;
   font-family: 'Inter-Regular';
   
 }
 .custom-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label {
-  font-size: 12px; /* 第三级字体大小 */
+  font-size: 15px; /* 第三级字体大小 */
   color: #1A1A1A ;
   font-family: 'Inter-Regular';
 }

src/views/index.vue

@@ -1057,10 +1057,10 @@
               class="demo-tabs"
               @tab-click="handleClick"
             >
-              <el-tab-pane label="优化设计" name="one">
+              <el-tab-pane label="导航树" name="one">
               
-              <p class="treetiele">优化设计</p>
-              <el-tree
+              <!-- <p class="treetiele">优化设计</p> -->
+              <!-- <el-tree
              class="custom-tree"
             style="max-width: 300px"
             :data="treeData"
@@ -1072,19 +1072,15 @@
           >        
           <template #default="{ node, data }">   
                   <span  class="treesvgi">
-                        <!-- <i v-if="data.expanded" class="el-icon-folder"></i>
-                        <i v-else class="el-icon-collection-tag"></i> -->
                         <i v-if="!data.children" class=""></i>
-            <!-- 展开后的图标 -->
             <i v-else-if="node.expanded" class="el-icon-collection-tag"> </i>
-            <!-- 未展开的图标 -->
             <i v-else class="el-icon-folder"> </i>
                         <span  style="margin-left: 10px">{{ node.label}}</span>
                   </span>
   
                 </template>
-          </el-tree>
-           
+          </el-tree> -->
+          <el-tree :data="datatree"   class="custom-tree" :props="defaultProps" @node-click="handleNodeClick" />
               </el-tab-pane>
               <el-tab-pane label="组件" name="tow">
                 <!-- <div class="panetab">
@@ -1183,6 +1179,49 @@ let logs=ref("");
 let elodingfalse=ref(false);
 let footerShow=ref(false);
 let tabName=ref("one")
+const datatree = ref([
+  {
+    label: '优化设计',
+    children: [
+      {
+        label: '优化问题',
+        children: [
+          {
+            label: '优化目标',
+            children: [
+              {
+                label: '输出',
+              },
+            ],
+          },
+          {
+            label: '设计变量',
+            children: [
+              {
+                label: '输入1',
+              },
+              {
+                label: '输入2',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: '分析流程',
+        children: [
+          {
+            label: '优化器',
+          },
+          {
+            label: 'Python',
+          },
+        ],
+      },
+    ],
+  },
+
+])
 const treeData = ref([
   // { 
     // id:0,
@@ -1706,7 +1745,7 @@ const targetclick=()=>{
 <style lang="scss" scoped>
 //有子节点 且未展开
 .left_main_content :deep(.el-icon svg) {
-  display: none;
+  display: block;
 }
 .footerTitle {
   display: flex;

src/views/vueflow/d.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { useDialogState } from './delete.js'
+
+const { isVisible, message, resolve } = useDialogState()
+
+function confirm() {
+  resolve(true)
+  isVisible.value = false
+}
+
+function cancel() {
+  resolve(false)
+  isVisible.value = false
+}
+</script>
+
+<template>
+  <div v-if="isVisible" class="dialog-overlay">
+    <div class="dialog">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+        <path
+          fill="#e53e3e"
+          d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z"
+        />
+      </svg>
+
+      <p v-if="typeof message === 'string'">{{ message }}</p>
+      <component :is="message" v-else />
+
+      <div class="actions">
+        <button @click="confirm">Confirm</button>
+        <button @click="cancel">Cancel</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.dialog {
+  background: #2d3748;
+  padding: 20px;
+  border-radius: 5px;
+  text-align: center;
+  color: white;
+}
+
+.dialog .actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.dialog .actions button {
+  background: #4a5568;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.dialog .actions button:first-of-type:hover {
+  background: #2563eb;
+}
+
+.dialog .actions button:last-of-type:hover {
+  background: #e53e3e;
+}
+</style>

src/views/vueflow/delete.js

@@ -0,0 +1,32 @@
+import { ref } from 'vue'
+
+/**
+ * In a real world example you would want to avoid creating refs in a global scope like this
+ */
+const isVisible = ref(false)
+const message = ref('')
+let resolveCallback
+
+export function useDialogState() {
+  return {
+    isVisible,
+    message,
+    resolve: (value) => {
+      if (resolveCallback) {
+        resolveCallback(value)
+      }
+    },
+  }
+}
+
+export function useDialog() {
+  return {
+    confirm(msg) {
+      isVisible.value = true
+      message.value = msg
+      return new Promise((resolve) => {
+        resolveCallback = resolve
+      })
+    },
+  }
+}

src/views/vueflow/demo.vue

@@ -1,206 +1,85 @@
-<template>
-<div>
-  <VueFlow :nodes="nodes" :edges="edges">
-    <!-- <Panel position="top-left"> -->
-    <template #node-default="props">
-      <Handle type="source" :position="Position.Right" />
-      <div class="custom-node icons"  >
-    <img :src="props.data.image" alt="节点图片" />
-    <span>{{props.data.label }}</span>
-  </div>
-  
-  <!-- <Handle id="source-a" type="source" :position="Position.Right" style="top: 10px" />
-<Handle id="source-b" type="source" :position="Position.Right" style="bottom: 10px; top: auto;" /> -->
-  <!-- <Handle type="source" :position="Position.Left" />
-  <Handle type="target" :position="Position.Top" />
-  <Handle type="target" :position="Position.Bottom" /> -->
-    </template>
-  <Background  :gap="5" :size="0.5" :patternColor="'#C60707 '" />
-  <Controls />
-  <!-- </Panel> -->
-</VueFlow>
-</div>
-</template>
 <script setup>
-import { ref, onMounted } from 'vue'
-import { VueFlow,Handle, Position } from '@vue-flow/core'
+import { h, ref } from 'vue'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import { MiniMap } from '@vue-flow/minimap'
-import { ControlButton, Controls } from '@vue-flow/controls'
-import f11 from '@/assets/img/f11.png'
-import f32 from '@/assets/img/f32.png'
-import f33 from '@/assets/img/f33.png'
-import f12 from '@/assets/img/f12.png'
-import f21 from '@/assets/img/f21.png'
-import f22 from '@/assets/img/f22.png'
-const isSource = true;
-const connectionPosition = Position.Top;
- 
-const handleSource = {
-  type: 'source',
-  position: connectionPosition,
-  // 其他可选配置...
-};
- 
-const handleTarget = {
-  type: 'target',
-  position: Position.Bottom, // 目标句柄在底部
-  // 其他可选配置...
-};
+import { useDialog } from './delete'
+import Dialog from './d.vue'
+import "./main.css";//重置样式
+
+const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, applyEdgeChanges } = useVueFlow()
+
+const dialog = useDialog()
+
 const nodes = ref([
-  {
-data:{label: '开始', image: '/src/assets/img/f11.png'},
-id: "node_0",
-position: {x:245, y: 317},
-type: "default",
-handles: [
-            {
-              id: 'handle1',
-              type: 'default',
-              position: 'right',
-            },
-          ],
-},
-{
-data:{label: '优化器', image: '/src/assets/img/f32.png'},
-id: "node_1",
-position: {x: 435, y: 317},
-type: "default",
-handles: [
-            {
-              id: 'handle2',
-              type: 'default',
-              position: 'left',
-            },
-          ],
-},
-{
-data:{label: 'Rosenbank', image: '/src/assets/img/f33.png'},
-id: "node_2",
-position: {x: 630, y: 317},
-// type: "default",
-},
-{
-data:{label: '结束', image: '/src/assets/img/f12.png'},
-id: "node_3",
-position: {x: 804, y: 317},
-type: "default",
-},
-{
-data:{label: '输入1', image: '/src/assets/img/f21.png'},
-id: "node_4",
-position: {x: 521, y: 146},
-type: "default",
-draggable: true, 
-handle: [
-            {
-              id: 'handle_4',
-              position: 'Bottom',
-            },
-          ],
-},
-{
-data:{label: '输入2', image: '/src/assets/img/f21.png'},
-id: "node_5",
-position: {x:712, y: 146},
-type: "default",
-sourceHandle: 'Bottom'
-},
-{
-data:{label: '输出', image: '/src/assets/img/f22.png'},
-id: "node_6",
-position: {x: 641, y: 519},
-type: "default",
-sourceHandle: 'Top'
-},
-
-]);
-let connections=ref([
-        {
-          source: 'handle1', // 源句柄ID
-          target: 'handle2', // 目标句柄ID
-        },
-      ])
-const edges = ref([
-{
-  id: 'e1->2',
-  source: 'node_0',
-  target: 'node_1',
-  type: 'straight',
-},
-{
-  id: 'e2->3',
-  source: 'node_1',
-  target: 'node_2',
-  type: 'straight'
-},
-{
-  id: 'e3->4',
-  source: 'node_2',
-  target: 'node_3',
-  type: 'straight' 
-},
-{
-  id: 'e4->5',
-  source: 'node_2',
-  target: 'node_4',
-  type: 'straight' 
-},
-{
-  id: 'e5->6',
-  source: 'node_2',
-  target: 'node_5',
-  type: 'straight' 
-
-},
-{
-  id: 'e6->7',
-  source: 'node_2',
-  target: 'node_6',
-  type: 'straight' 
-},
-]);
-</script>
-<style>
-
-</style>
-<style lang="scss" scoped>
-//  @import '@vue-flow/minimap/dist/style.css';
-@import '@vue-flow/minimap/dist/style.css';
-@import './main.css';
-
-.vue-flow{
-width: 100%;
-  height: 100vh;
-  margin: 0 auto;
-  border: 1px solid;
-  overflow: auto;
-}
-.vue-flow__node-custom {
-  background: purple;
-  color: white;
-  border: 1px solid purple;
-  border-radius: 4px;
-  box-shadow: 0 0 0 1px purple;
-  padding: 8px;
-}
+  { id: '1', type: 'input', data: { label: 'Click me and' }, position: { x: 0, y: 0 } },
+  { id: '2', data: { label: `press 'Backspace' to delete me` }, position: { x: 0, y: 100 } },
+])
 
-.icons img{
-  width: 30px;    
+const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])
 
+function dialogMsg(id) {
+  console.log("id"+11111111)
+  return h(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '8px',
+      },
+    },
+    [`Are you sure?`, h('br'), h('span', `[ELEMENT_ID: ${id}]`)],
+  )
 }
-.icons span{
-  display: block;
-  font-size: 13px;
-}
-</style>
-<style>
-.vue-flow__node.draggable {
-  width: 64px !important;
-    height: 64px !important;
-}
-.vue-flow__node {
-          stroke: none; /* 移除节点边框 */
-        }
-</style>
 
+onConnect(addEdges)
+
+onNodesChange(async (changes) => {
+  console.log(changes)
+  const nextChanges = []
+
+  for (const change of changes) {
+    if (change.type === 'remove') {
+      const isConfirmed = await dialog.confirm(dialogMsg(change.id))
+
+      if (isConfirmed) {
+        nextChanges.push(change)
+      }
+    } else {
+      nextChanges.push(change)
+    }
+  }
+  console.log(nextChanges)
+  applyNodeChanges(nextChanges)
+})
+
+onEdgesChange(async (changes) => {
+  console.log(1112222)
+  const nextChanges = []
+
+  for (const change of changes) {
+    if (change.type === 'remove') {
+      const isConfirmed = await dialog.confirm(dialogMsg(change.id))
+
+      if (isConfirmed) {
+        nextChanges.push(change)
+      }
+    } else {
+      nextChanges.push(change)
+    }
+  }
+  console.log(nextChanges);
+
+  applyEdgeChanges(nextChanges)
+})
+
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges"    @node-click="onNodeClick"  @contextmenu="onContextMenu"  :apply-default="false" fit-view-on-init class="confirm-flow">
+    <Background />
+
+    <Dialog />
+  </VueFlow>
+</template>

src/views/vueflow/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="dnd-flow" >
-    <VueFlow :nodes="nodes" :edges="edges"  @drop="onDrop"   @node-drop="handleNodeDrop"   @dragover="onDragOver" @dragleave="onDragLeave"    @node-click="onNodeClick">
+    <VueFlow  :nodes="nodes" :edges="edges"  @drop="onDrop"  @contextmenu="onContextMenu"
+    @keydown.delete="onDeleteKey"   @node-drop="handleNodeDrop"   @dragover="onDragOver" @dragleave="onDragLeave"  @node-click="onNodeClick">
       <template #node-default="props">
       <modelb :node="props" />
     </template>
+    <!-- //<Handle type="target" :position="Position.Left" /> -->
+      <!-- </Panel> -->
       <!-- <DropzoneBackground
         :style="{
           backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
@@ -12,23 +15,26 @@
       >
       </DropzoneBackground> -->
     <!-- </Panel> -->
+
     </VueFlow>
 
     <!-- <Sidebar /> -->
   <!-- 优化器 -->
-  
+  <!-- <div id="contextMenu" @click="deleteItemConfirm">删除</div> -->
   </div>
 </template>
 
 
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow,Position } from '@vue-flow/core'
+import { VueFlow,  useVueFlow,Position } from '@vue-flow/core'
 import DropzoneBackground from './DropzoneBackground.vue'
 import useDragAndDrop from './useDnD'
 import f11 from '@/assets/img/f11.png'
  import "./main.css";//重置样式
  import modelb from './modelb.vue'
+ import { useDialogState } from './delete.js'
+ const { isVisible, message, resolve } = useDialogState()
 // import func from 'vue-temp/vue-editor-bridge'
 // import {initialNodes,initialEdges } from './node'
 // const nodes = ref(initialNodes)
@@ -39,10 +45,16 @@ const props = defineProps({
   //   required: true,
   // },
 })
+let noid=ref([]);
 // const edges = ref(initialEdges)
 const { onConnect, addEdges } = useVueFlow()
-let node=ref([]);
-const { onDragOver, onDrop, onDragLeave, isDragOver} = useDragAndDrop()
+let node=ref();
+let  contextMenu=ref( {
+        show: false,
+        position: { x: 0, y: 0 },
+        target: 'kong',
+      })
+const { onDragOver, onDrop, onDragLeave, isDragOver} = useDragAndDrop();
 function handleNodeDrop(e){
   console.log(11111)
   console.log(e);
@@ -50,13 +62,64 @@ function handleNodeDrop(e){
 const edges = ref([]);
 const nodes = ref([]);
 onConnect(addEdges)
+
 function onNodeClick(e){
-  console.log(e.node.data.label);
+  noid.value=e.node;
+  console.log(e);
+  console.log(111111)
   if(e.node.data.label=='优化器'){
     console.log(e.node);
     emit('optimizerfalse', true);
   }
 
 }
+function onContextMenu(event,node) {
+  console.log(node)
+  event.preventDefault();
+      if (noid.value.id) {
+    //     document.getElementById('contextMenu').style.top = noid.value.position.y+50 + 'px';
+    //  document.getElementById('contextMenu').style.left = noid.value.position.x +80+ 'px';
+    //  document.getElementById('contextMenu').style.display = 'block';
+     event.preventDefault();
+    
+        console.log(11111)
+      }
+  
+  
+    }
+    //点击左键右键内容消失
+    document.addEventListener('click', function(e) {
+  if (e.button === 0) { // 0 是左键
+    // document.getElementById('contextMenu').style.display = 'none';
+  }
+});
+    function   onDeleteKey(event,node) {
+      // 禁用Backspace删除节点
+      console.log(node)
+      event.preventDefault();
+   
+    }
+//删除
+const deleteItemConfirm=()=>{
+  resolve(true)
+  isVisible.value = false
+}
 </script>
+<style>
+.vue-flow__edge {
+  text-align: left; /* 设置edges的左对齐 */
+}
+#contextMenu{
+  display: none;
+  position: absolute;
+background-color: #fff;
+border-radius: 5px;
+padding: 10px;
+text-align: center;
+color: black;
+font-size: 14px;
+font-weight: 400;
+cursor: pointer;
+}
+</style>
 

src/views/vueflow/modelb.vue

@@ -1,5 +1,6 @@
 <script  setup>
 import { ref, onMounted, reactive, } from "vue";
+import { VueFlow,Handle, useVueFlow,Position } from '@vue-flow/core'
 // import {initialNodes,initialEdges } from './node'
 // const nodes = ref(initialNodes)
 // const edges = ref(initialEdges)
@@ -21,20 +22,53 @@ const props = defineProps({
     type: String,
   },
 })
-
+let  handles=([
+        {
+          id: 'bottom',
+          type: 'bottom',
+          position: 'bottom',
+        },
+        {
+          id: 'top',
+          type: 'top',
+          position: 'top',
+        },
+        {
+          id: 'left',
+          type: 'left',
+          position: 'left',
+        },
+        {
+          id: 'right',
+          type: 'right',
+          position: 'right',
+        },
+      ])
 onMounted(() => {
 });
 </script>
 <template>
+ 
   <div>
-    <!-- v-for="(node,index) in props.data" :key="index" -->
     <div class="custom-node icons" :id="`node-${node.id}`" >
     <img :src="props.node.data.image" alt="节点图片" />
     <span>{{props.node.data.label }}</span>
+    <!-- <Handle type="source" :position="props.node.sourcePosition"  />
+   <Handle :id="`node-${node.id}`" type="target" :position="props.node.targetPosition" /> 
+   <Handle :id="`node-${node.id}`" type="target" :position="props.node.targetPosition"  />
+   <Handle :id="`node-${node.id}`" type="target" :position="props.node.targetPosition" />  -->
   </div>
 
   </div>
-  
+ <Handle type="source" :position="Position.Right"  />
+  <Handle id="target-c" type="source" :position="Position.Top"  /> 
+   <Handle id="target-b" type="target"  :position="Position.Left" /> 
+  <Handle id="target-d" type="target" :position="Position.Bottom"  /> 
+  <!-- <Handle  id="source-a" type="source" :position="props.node.sourcePosition"  />
+  <Handle id="source-b" type="source" :position="props.node.targetPosition"  /> 
+   <Handle id="target-a" type="target"  :position="props.node.targetPosition" /> 
+
+  <Handle id="target-b" type="target" :position="props.node.targetPosition"  /> -->
 </template>
 <style scoped>
 
@@ -52,6 +86,7 @@ onMounted(() => {
   width: 64px !important;
     height: 64px !important;
     border: none;
+    background-color: rgba(0,0,0,0);
 }
 .vue-flow__node {
           stroke: none; /* 移除节点边框 */

src/views/vueflow/useDnD.js

@@ -1,4 +1,4 @@
-import { useVueFlow } from '@vue-flow/core'
+import { useVueFlow,Position,MarkerType  } from '@vue-flow/core'
 import { ref, watch } from 'vue'
 import f11 from '@/assets/img/f11.png'
 import f32 from '@/assets/img/f32.png'
@@ -116,7 +116,8 @@ export default function useDragAndDrop() {
     const image1=imagefun();
  
     let snodes=ref([]);
-    let sedges=[]
+    let sedges=[];
+
     if(nid=='4'){
       const nodes = ref([
         {
@@ -124,110 +125,135 @@ export default function useDragAndDrop() {
       id: "node_01",
       position: {x:245, y: 317},
       type: "default",
-      handle: {
-        type: 'custom',
-        position: 'Right',
-        // 其他自定义句柄属性
-      },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left, 
+      sourcePosition: Position.Top,
+      targetPosition: Position.Bottom, 
+
       },
       {
       data:{label: '优化器', image: f32},
       id: "node_02",
       position: {x: 435, y: 317},
       type: "default",
-      inputs: 1, outputs: 1,
-      handle: {
-        type: 'custom',
-        position: 'Left',
-        // 其他自定义句柄属性
-      },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left, 
+      class: 'light',
+   
       },
       {
       data:{label: 'Rosenbank', image: f33},
       id: "node_03",
       position: {x: 630, y: 317},
       // type: "default",
+      type: "default",
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left, 
+      // sourcePosition: Position.Top,
+      // targetPosition: Position.Bottom, 
+     
       },
       {
       data:{label: '结束', image: f12},
       id: "node_04",
       position: {x: 804, y: 317},
       type: "default",
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left, 
       },
       {
       data:{label: '输入1', image: f21},
       id: "node_05",
-      position: {x: 521, y: 146},
+      position: {x: 435, y: 146},
       type: "default",
       draggable: true, 
+      sourcePosition: Position.Top,
+      targetPosition: Position.Bottom, 
+   
       },
       {
       data:{label: '输入2', image: f21},
       id: "node_06",
-      position: {x:712, y: 146},
-      type: "default",
-      sourceHandle: 'Bottom'
+      position: {x:804, y: 146},
+      type: "default",//default
+      sourcePosition: Position.Top,
+      targetPosition: Position.Bottom, 
       },
       {
       data:{label: '输出', image: f22},
       id: "node_07",
-      position: {x: 641, y: 519},
+      position: {x: 630, y: 519},
       type: "default",
-      sourceHandle: 'Top'
+      sourceHandle: 'Top',
+      sourcePosition: Position.Bottom,
+      targetPosition: Position.Top, 
       },
       
       ]);
-      let connections=ref([
-              {
-                source: 'handle1', // 源句柄ID
-                target: 'handle2', // 目标句柄ID
-              },
-            ])
       const edges = ref([
       {
         id: 'e1->2',
         source: 'node_01',
         target: 'node_02',
         type: 'straight',
-        sourceHandleId: 'Right',
-        targetHandleId: 'Left',
-        sourceHandleId: 'handleIdOfNode1',
-        targetHandleId: 'handleIdOfNode2',
+        markerEnd: MarkerType.ArrowClosed,
+
       },
       {
         id: 'e2->3',
         source: 'node_02',
         target: 'node_03',
-        type: 'straight'
+        type: 'smoothstep',
+        markerEnd: MarkerType.ArrowClosed,
+        //type: 'output',
+        // style: {
+        //   stroke: '#FF0000',
+        //   markerEnd: MarkerType.ArrowClosed,
+        // },
       },
       {
         id: 'e3->4',
         source: 'node_03',
         target: 'node_04',
-        type: 'straight' 
+        type: 'straight' ,
+        markerEnd: MarkerType.ArrowClosed,
       },
       {
         id: 'e4->5',
-        source: 'node_03',
-        target: 'node_05',
-        type: 'straight' 
+        source: 'node_05',
+        target: 'node_03',
+        type: 'straight',
+        animated: true ,
+        // sourcePosition: Position.Bottom,
+        // targetPosition: Position.Top, 
+        sourceHandle: 'Top',
+        targetHandle:'Bottom',
       },
       {
         id: 'e5->6',
-        source: 'node_03',
-        target: 'node_06',
-        type: 'straight' 
+        source: 'node_06',
+        target: 'node_03',
+        type: 'straight',
+         animated: true,
+        // source: 'handle-bottom',
+        // target: 'handle-top',
+        sourceHandle: 'Top',
+        targetHandle:'Bottom',
+
       
       },
       {
         id: 'e6->7',
         source: 'node_03',
         target: 'node_07',
-        type: 'straight' 
+        type: 'straight',
+        animated: true,
+        sourceHandle: 'Top',
+        targetHandle:'Bottom',
       },
       ]);
-snodes=nodes
- sedges=edges
+snodes=nodes;
+ sedges=edges;
     }else{
       snodes.value=[];
       const newNode = {
@@ -254,7 +280,7 @@ snodes=nodes
 
       off()
     })
-console.log(snodes.value);
+    console.log(snodes.value);
     addNodes(snodes.value)
     addEdges(sedges.value)
   }