feat: set path names

src/layout/components/NavBar.vue

@@ -15,11 +15,10 @@ limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
     <div class="title flex-h">
-      <div class="mr-10">
-        {{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}
-      </div>
       <el-breadcrumb separator=">">
-        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+        <el-breadcrumb-item v-for="(item, index) in appStore.pathNames" :key="index" :to="{ path: '/' }">
+          {{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}
+        </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div class="app-config">
@@ -53,6 +52,7 @@ limitations under the License. -->
   import timeFormat from "@/utils/timeFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { ElMessage } from "element-plus";
+  import { deduplication } from "@/utils/arrayAlgorithm";
 
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
@@ -62,9 +62,8 @@ limitations under the License. -->
 
   resetDuration();
   getVersion();
-  const setConfig = (value: string) => {
+  setConfig(String(route.meta.title));
-    pageName.value = value || "";
+  getPathNames();
-  };
 
   function handleReload() {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -79,19 +78,38 @@ limitations under the License. -->
     }
     appStore.setDuration(timeFormat(val));
   }
-  setConfig(String(route.meta.title));
+
+  function setConfig(value: string) {
+    pageName.value = value || "";
+  }
+
+  function getPathNames() {
+    const p = route.params;
+    if (appStore.pathNames.length && p.layerId === appStore.pathNames[0].layerId) {
+      const arr = [...appStore.pathNames, p];
+
+      const list = deduplication(arr, ["layerId", "entity", "name"]);
+      appStore.setPathNames(list);
+    } else {
+      appStore.setPathNames([p]);
+    }
+    // console.log(route.params);
+  }
+
   watch(
     () => route.meta.title,
     (title: unknown) => {
       setConfig(String(title));
     },
   );
+
   async function getVersion() {
     const res = await appStore.fetchVersion();
     if (res.errors) {
       ElMessage.error(res.errors);
     }
   }
+
   function resetDuration() {
     const { duration }: any = route.params;
     if (duration) {
@@ -108,7 +126,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .nav-bar {
-    padding: 5px 10px;
+    padding: 5px;
     text-align: left;
     justify-content: space-between;
     background-color: #fafbfc;

src/store/modules/app.ts

@@ -35,6 +35,7 @@ interface AppState {
   version: string;
   isMobile: boolean;
   reloadTimer: Nullable<any>;
+  pathNames: { name: string; layer: string; entity: string }[];
 }
 
 export const appStore = defineStore({
@@ -55,6 +56,7 @@ export const appStore = defineStore({
     version: "",
     isMobile: false,
     reloadTimer: null,
+    pathNames: [],
   }),
   getters: {
     duration(): Duration {
@@ -146,6 +148,9 @@ export const appStore = defineStore({
     setPageTitle(title: string) {
       this.pageTitle = title;
     },
+    setPathNames(names: { name: string; layer: string; entity: string }[]) {
+      this.pathNames = names;
+    },
     runEventStack() {
       if (this.timer) {
         clearTimeout(this.timer);

src/styles/reset.scss

@@ -212,3 +212,7 @@ div.vis-tooltip {
 div:has(> a.menu-title) {
   display: none;
 }
+
+.el-breadcrumb {
+  line-height: 28px;
+}

src/utils/arrayAlgorithm.ts

@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function deduplication(arr: any, labels: string[]) {
+  const map = new Map();
+  for (const i of arr) {
+    const key = labels
+      .map((d: string) => {
+        return i[d];
+      })
+      .join("");
+    if (!map.has(i[key])) {
+      map.set(i[key], i);
+    }
+  }
+  return [...map.values()];
+}