feat: add path names

src/layout/components/NavBar.vue

@@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
-    <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div>
+    <el-breadcrumb separator="/" class="title">
+      <el-breadcrumb-item v-for="(p, index) in pathNames" :to="{ path: p.path }" :key="index" :replace="true">
+        {{ p.name }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div> -->
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
@@ -63,7 +68,7 @@ limitations under the License. -->
 
   resetDuration();
   getVersion();
-  setConfig(String(route.meta.title));
+  // getPathNames();
 
   function handleReload() {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -84,20 +89,34 @@ limitations under the License. -->
   }
 
   function getPathNames() {
-    const obj = dashboardStore.currentDashboard;
+    const dashboard = dashboardStore.currentDashboard;
-
+    pathNames.value = [];
-    if (!dashboardStore.entity) {
+    const root =
-      return;
+      dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && dashboard.layer === d.layer)[0] || {};
+    for (const item of appStore.allMenus) {
+      if (item.subItems && item.subItems.length) {
+        for (const subItem of item.subItems) {
+          if (subItem.layer === root.layer) {
+            root.path = subItem.path;
+          }
+        }
+      } else {
+        if (item.layer === root.layer) {
+          root.path = item.path;
+        }
+      }
     }
-    console.log(dashboardStore.dashboards);
-    const root = dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && obj.layer === d.layer);
     pathNames.value.push(root);
-    if (obj.entity === MetricCatalog.SERVICE) {
+    if (dashboard.entity !== MetricCatalog.ALL) {
-      const arr = dashboardStore.dashboards.filter(
+      const d = dashboardStore.dashboards.filter(
-        (d: DashboardItem) => obj.entity === d.entity && obj.layer === d.layer,
+        (d: DashboardItem) => dashboard.entity === d.entity && dashboard.layer === d.layer,
-      );
+      )[0];
-
+      const id = route.params.id;
-      pathNames.value.push(arr);
+      const path = `/dashboard/${dashboard.layer}/${dashboard.entity}/${id}/${dashboard.name}`;
+      pathNames.value.push({
+        ...d,
+        path,
+      });
     }
   }
 
@@ -122,24 +141,10 @@ limitations under the License. -->
     }
   }
 
-  watch(
-    () => route.meta.title,
-    () => {
-      pathNames.value = [];
-      setConfig("");
-      if (!route.meta.layer) {
-        setConfig(String(route.meta.title));
-      }
-    },
-  );
   watch(
     () => dashboardStore.currentDashboard,
     () => {
-      pathNames.value = [];
+      getPathNames();
-      setConfig("");
-      if (route.meta.layer) {
-        getPathNames();
-      }
     },
   );
 </script>

src/types/components.d.ts

@@ -6,8 +6,40 @@ import '@vue/runtime-core'
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Graph: typeof import('./../components/Graph.vue')['default']
     Icon: typeof import('./../components/Icon.vue')['default']
+    Loading: typeof import('element-plus/es')['ElLoadingDirective']
     Radio: typeof import('./../components/Radio.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/views/Layer.vue

@@ -24,11 +24,9 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Dashboard from "./dashboard/Edit.vue";
   import { useI18n } from "vue-i18n";
-  import { useAppStoreWithOut } from "@/store/modules/app";
 
   const route = useRoute();
   const { t } = useI18n();
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const layer = ref<string>("GENERAL");