fix: update style and settings

src/styles/lib.scss

@@ -139,3 +139,7 @@
     transform: rotate(1turn);
   }
 }
+
+.topology-dialog {
+  background-color: #333840 !important;
+}

src/views/Settings.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
       <span class="label">{{ t("language") }}</span>
       <el-switch
         v-model="lang"
-        :change="setLang"
+        @change="setLang"
         active-text="En"
         inactive-text="Zh"
         style="height: 25px"

src/views/dashboard/Edit.vue

@@ -27,10 +27,10 @@ limitations under the License. -->
     </el-dialog>
     <el-dialog
       v-model="dashboardStore.showTopology"
-      :title="t('topology')"
       :destroy-on-close="true"
       fullscreen
       @closed="dashboardStore.setTopology(false)"
+      custom-class="topology-dialog"
     >
       <Graph />
     </el-dialog>
@@ -92,8 +92,4 @@ function handleClick(e: any) {
   height: 100%;
   overflow-y: auto;
 }
-// .el-overlay-dialog {
-//   background-color: #333840 !important;
-//   color: #ddd;
-// }
 </style>

src/views/dashboard/related/topology/Graph.vue

@@ -30,6 +30,7 @@ import { Node, Call } from "@/types/topology";
 import { useTopologyStore } from "@/store/modules/topology";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { EntityType } from "../../data";
+import router from "@/router";
 
 /*global Nullable */
 const { t } = useI18n();
@@ -39,7 +40,7 @@ const height = ref<number>(document.body.clientHeight - 90);
 const width = ref<number>(document.body.clientWidth - 40);
 const simulation = ref<any>("");
 const svg = ref<Nullable<any>>(null);
-const chart = ref<HTMLDivElement | null>(null);
+const chart = ref<Nullable<HTMLDivElement>>(null);
 const tip = ref<any>(null);
 const graph = ref<any>(null);
 const node = ref<any>(null);
@@ -154,10 +155,12 @@ function handleNodeClick(d: any) {
   topologyStore.setNode(d);
   topologyStore.setLink({});
 }
-function handleLinkClick(event: any, d: any) {
+function handleLinkClick(event: any, d: Call) {
   event.stopPropagation();
   topologyStore.setNode({});
   topologyStore.setLink(d);
+  // const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
+  // router.push(path);
 }
 function update() {
   // node element
@@ -255,8 +258,6 @@ watch(
 }
 
 .micro-topo-chart {
-  background: #333840;
-
   .topo-svg {
     display: block;
     width: 100%;

src/views/dashboard/related/topology/utils/linkElement.ts

@@ -38,8 +38,8 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
     .on("mouseout", function () {
       tip.hide(this);
     })
-    .on("click", (d: unknown) => {
+    .on("click", (event: unknown, d: unknown) => {
-      funcs.handleLinkClick(d);
+      funcs.handleLinkClick(event, d);
     });
   return linkEnter;
 };

src/views/dashboard/related/topology/utils/nodeElement.ts

@@ -39,6 +39,9 @@ export default (
       tip
         .html(() => {
           return `
+          <div class="mb-5"><span class="grey">${t("name")}: </span>${
+            d.name
+          }</div>
           <div class="mb-5"><span class="grey">${t("cpm")}: </span>${
             d.cpm
           }</div>