fix: 拓扑信息编辑模式控制

src/views/monitor/topology-build/hooks/useGraph.ts

@@ -51,6 +51,9 @@ export default function useGraph() {
     offseY: 10,
     itemTypes: ['canvas'],
     getContent(evt) {
+      console.log(evt);
+      if (!evt) return '无';
+      const edit = graphMode.value === 'edit';
       return `
       <div
         style="
@@ -61,17 +64,23 @@ export default function useGraph() {
       >
         <h3>画布</h3>
         <div id="show" style="cursor: pointer; margin-bottom: 2px">
-          1. 显示所有隐藏项
+          显示所有隐藏项
         </div>
-        <div id="create-edge" style="cursor: pointer; margin-bottom: 2px">
+        <div id="create-edge" style="cursor: pointer; margin-bottom: 2px; display: ${
-          2. 新增边
+          edit ? 'black' : 'none'
+        }">
+          新增边
         </div>
-        <div id="create-node" style="cursor: pointer; margin-bottom: 2px">
+        <div id="create-node" style="cursor: pointer; margin-bottom: 2px; display: ${
-          3. 新增节点
+          edit ? 'black' : 'none'
-        </div>
+        }">
-        <div id="create-combo" style="cursor: pointer; margin-bottom: 2px">
+          新增节点
-          4. 新增分组
         </div>
+        <div id="create-combo" style="cursor: pointer; margin-bottom: 2px; display: ${
+          edit ? 'black' : 'none'
+        }">
+        新增分组
+        </div> 
       </div>`;
     },
     handleMenuClick(target, item) {
@@ -164,6 +173,9 @@ export default function useGraph() {
     itemTypes: ['node'],
     getContent(evt) {
       console.log(evt);
+      if (!evt) return '无';
+      const item = evt.item?.getModel();
+      const edit = graphMode.value === 'edit';
       return `
     <div
       style="
@@ -173,16 +185,21 @@ export default function useGraph() {
         background: #e6f7ff;
       "
     >
-      <h3>节点</h3>
+      <h3>节点:${item?.label || '无标签'}</h3>
-      <div id="edit" style="cursor: pointer; margin-bottom: 2px">
-        1. 编辑
-      </div>
-      <div id="delete" style="cursor: pointer; margin-bottom: 2px">
-        2. 删除
-      </div>
       <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-        3. 隐藏
+        隐藏
       </div>
+      <div id="edit" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        编辑
+      </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        删除
+      </div>
+      
     </div>
     `;
     },
@@ -238,6 +255,9 @@ export default function useGraph() {
     itemTypes: ['edge'],
     getContent(evt) {
       console.log(evt);
+      if (!evt) return '无';
+      const item = evt.item?.getModel();
+      const edit = graphMode.value === 'edit';
       return `
     <div
       style="
@@ -247,16 +267,20 @@ export default function useGraph() {
         background: #e6f7ff;
       "
     >
-      <h3>边</h3>
+      <strong>边:${item?.label || '无标签'}</strong>
-      <div id="edit" style="cursor: pointer; margin-bottom: 2px">
-        1. 编辑
-      </div>
-      <div id="delete" style="cursor: pointer; margin-bottom: 2px">
-        2. 删除
-      </div>
       <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-        3. 隐藏
+        隐藏
       </div>
+      <div id="edit" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        编辑
+      </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px; display: ${
+        edit ? 'black' : 'none'
+      }">
+        删除
+      </div> 
     </div>
     `;
     },
@@ -288,7 +312,6 @@ export default function useGraph() {
       if (!item?.label) {
         return '无标签';
       }
-      console.log(item);
       return `
       <div
         style="