feat(tooltip)

src/G6/plugins.ts

@@ -0,0 +1,16 @@
+import G6 from "@antv/g6";
+import { Task } from "@/type.ts";
+
+export const tooltip = new G6.Tooltip({
+  offsetX: 10,
+  offsetY: 20,
+  getContent(e) {
+    const outDiv = document.createElement("div");
+    outDiv.style.width = "180px";
+    outDiv.innerHTML = `
+      <p>${(e?.item?.getModel().task as Task).name}</p>
+    `;
+    return outDiv;
+  },
+  itemTypes: ["node"],
+});

src/api/index.ts

@@ -5,8 +5,8 @@
  */
 
 // 手动修改 Mock 接口
-// export * from "./job.ts";
-export * from "./mock.ts";
+export * from "./job.ts";
+// export * from "./mock.ts";
 export * from "./qgis.ts";
 
 // TODO: interface definition of api

src/components/BreakdownChart.vue

@@ -6,6 +6,7 @@ import { IG6GraphEvent } from "@antv/g6-core/lib/types";
 import { useGraphStore } from "@/store/graph.ts";
 import { storeToRefs } from "pinia";
 import { Task } from "@/type.ts";
+import { tooltip } from "@/G6/plugins.ts";
 
 const props = defineProps<{
   graphId: string;
@@ -35,6 +36,7 @@ onMounted(() => {
         "drag-canvas",
       ],
     },
+    plugins: [tooltip],
     defaultNode: {
       type: "breakdownNode",
     },