增加搜索框，操作栏，

src/components/topbar/v2.vue

@@ -2,10 +2,6 @@
   <div class="top-bar flex-row">
     <div style="flex: 1" class="flex-row">
       <div class="navs flex-end">
-        <div class="search">
-          <el-input size="small" v-model="searchText" style="width: 200px;margin-right: 12px;"></el-input>
-          <el-button size="small" type="primary">搜索</el-button>
-        </div>
       </div>
       <div class="title font">全链路监控平台</div>
       <div class="navs flex right">
@@ -21,11 +17,10 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, reactive } from 'vue'
 import { useStore } from 'vuex'
 import { full } from '@/utils/index'
 
-const searchText = ref('')
 const store = useStore()
 // 是否为全屏
 const isFull = ref(false)
@@ -93,4 +88,5 @@ watch(
       }
     }
   }
-}</style>
+}
+</style>

src/views/home/AllLink.vue

@@ -1,13 +1,30 @@
 <template>
   <div class="chart-wrapper">
+    <div class="search">
+      <div class="flex">
+        <el-input size="small" v-model="form.start" style="width: 120px;margin-right: 6px;" placeholder="首节点"></el-input>
+        <el-input size="small" v-model="form.end" style="width: 120px;margin-right: 6px;" placeholder="末节点"></el-input>
+        <button class="el-button el-button--primary el-button--small" @click="search">搜索</button>
+      </div>
+      <button class="el-button el-button--primary el-button--small" @click="search">返回上一级</button>
+      <!-- <button type="primary" size="small" class="btn" v-if="level === 1" @click="draw">返回上一级</button> -->
+    </div>
     <div class="chart" id="g6ChartWrapper"></div>
-    <button type="primary" size="small" class="btn" v-if="level === 2" @click="draw">返回上一级</button>
   </div>
 </template>
 <script setup>
 import G6 from '@antv/g6';
 import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, reactive } from 'vue';
+
+const form = reactive({
+  start: '',
+  end: '',
+})
+
+function search() {
+
+}
 
 let graph = null
 
@@ -42,8 +59,8 @@ function draw() {
   graph.render();
 
   // 节点上的点击事件
-  // graph.on('node:click', nodeClick);
-  graph.on('node:click', nodeClick2);
+  graph.on('node:click', nodeClick);
+  // graph.on('node:click', nodeClick2);
 }
 
 
@@ -67,10 +84,15 @@ function draw2() {
     height: 100%;
   }
 
-  .btn {
+  .search {
     position: absolute;
     right: 0;
-    top: 0;
+    top: calc(6px - 4.5vh);
+    padding: 0 2vw;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 </style>

src/views/home/g6.js

@@ -1,9 +1,5 @@
 import G6 from '@antv/g6'
 
-const toolbar = new G6.ToolBar({
-  position: { x: 10, y: 10 }
-})
-
 // 浮动上之后显示提示框
 const tooltip = new G6.Tooltip({
   offsetX: 10,
@@ -25,6 +21,10 @@ const tooltip = new G6.Tooltip({
 })
 
 export function getG6Options({ container = 'container' }) {
+  const dom = document.getElementById(container)
+  const toolbar = new G6.ToolBar({
+    position: { x: 0, y: dom.clientHeight - 60 }
+  })
   return {
     container,
     // width,
@@ -32,8 +32,7 @@ export function getG6Options({ container = 'container' }) {
     modes: {
       default: ['drag-canvas', 'drag-node', 'activate-relations']
     },
-    // plugins: [tooltip, toolbar],
-    plugins: [tooltip],
+    plugins: [tooltip, toolbar],
     // fitView: true,
     fitCenter: true,
     layout: {