feat: update

src/layout/components/NavBar.vue

@@ -15,11 +15,14 @@ limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
     <div class="title flex-h">
-      <el-breadcrumb separator=">">
+      <el-breadcrumb separator=">" v-if="pathNames.length">
-        <el-breadcrumb-item v-for="(item, index) in appStore.pathNames" :key="index" :to="{ path: '/' }">
+        <el-breadcrumb-item v-for="(names, index) in pathNames" :key="index">
-          {{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}
+          <a v-for="(item, i) in names" :href="item.path" :key="i">
+            {{ route.name === "ViewWidget" ? "" : item.name }}
+          </a>
         </el-breadcrumb-item>
       </el-breadcrumb>
+      <span v-else>{{ pageName && t(pageName) }}</span>
     </div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
@@ -51,20 +54,25 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import timeFormat from "@/utils/timeFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useSelectorStore } from "@/store/modules/selectors";
   import { ElMessage } from "element-plus";
-  import { deduplication } from "@/utils/arrayAlgorithm";
+  import { MetricCatalog } from "@/views/dashboard/data";
+  import type { DashboardItem } from "@/types/dashboard";
 
   /*global Indexable */
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
+  const selectorStore = useSelectorStore();
   const route = useRoute();
   const pageName = ref<string>("");
+  const pathNames = ref<any[]>([]);
   const timeRange = ref<number>(0);
 
   resetDuration();
   getVersion();
   setConfig(String(route.meta.title));
-  getPathNames();
 
   function handleReload() {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -85,17 +93,23 @@ limitations under the License. -->
   }
 
   function getPathNames() {
-    const p = route.params;
+    const obj = dashboardStore.currentDashboard;
-    console.log(route.meta);
-  }
 
-  watch(
+    if (!dashboardStore.entity) {
-    () => route.meta.title,
+      return;
-    (title: unknown) => {
+    }
-      setConfig(String(title));
+    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) {
+      const arr = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => obj.entity === d.entity && obj.layer === d.layer,
       );
 
+      pathNames.value.push(arr);
+    }
+  }
+
   async function getVersion() {
     const res = await appStore.fetchVersion();
     if (res.errors) {
@@ -116,6 +130,27 @@ limitations under the License. -->
       appStore.updateUTC(d.utc);
     }
   }
+
+  watch(
+    () => route.meta.title,
+    () => {
+      pathNames.value = [];
+      setConfig("");
+      if (!route.meta.layer) {
+        setConfig(String(route.meta.title));
+      }
+    },
+  );
+  watch(
+    () => dashboardStore.currentDashboard,
+    () => {
+      pathNames.value = [];
+      setConfig("");
+      if (route.meta.layer) {
+        getPathNames();
+      }
+    },
+  );
 </script>
 <style lang="scss" scoped>
   .nav-bar {

src/store/modules/app.ts

@@ -31,7 +31,6 @@ interface AppState {
   eventStack: (() => unknown)[];
   timer: Nullable<TimeoutHandle>;
   autoRefresh: boolean;
-  pageTitle: string;
   version: string;
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
@@ -51,7 +50,6 @@ export const appStore = defineStore({
     eventStack: [],
     timer: null,
     autoRefresh: false,
-    pageTitle: "",
     version: "",
     isMobile: false,
     reloadTimer: null,
@@ -143,9 +141,6 @@ export const appStore = defineStore({
     setAutoRefresh(auto: boolean) {
       this.autoRefresh = auto;
     },
-    setPageTitle(title: string) {
-      this.pageTitle = title;
-    },
     runEventStack() {
       if (this.timer) {
         clearTimeout(this.timer);

src/views/Alarm.vue

@@ -19,12 +19,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Header from "./alarm/Header.vue";
   import Content from "./alarm/Content.vue";
-
-  const appStore = useAppStoreWithOut();
-  appStore.setPageTitle("Alerting");
 </script>
 <style lang="scss" scoped>
   .alarm {

src/views/Event.vue

@@ -19,13 +19,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Header from "./event/Header.vue";
   import Content from "./event/Content.vue";
-
-  const appStore = useAppStoreWithOut();
-
-  appStore.setPageTitle("Events");
 </script>
 <style lang="scss" scoped>
   .event {

src/views/Layer.vue

@@ -44,7 +44,6 @@ limitations under the License. -->
         d.layer === dashboardStore.layerId && [EntityType[0].value, EntityType[1].value].includes(d.entity) && d.isRoot,
     );
     if (!item) {
-      appStore.setPageTitle(dashboardStore.layer);
       dashboardStore.setCurrentDashboard(null);
       dashboardStore.setEntity(EntityType[1].value);
       return;

src/views/Settings.vue

@@ -66,7 +66,6 @@ limitations under the License. -->
   const utcHour = ref<number>(appStore.utcHour);
   const utcMin = ref<number>(appStore.utcMin);
 
-  appStore.setPageTitle("Setting");
   const handleReload = () => {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
     const dates: Date[] = [

src/views/dashboard/Edit.vue

@@ -47,7 +47,6 @@ limitations under the License. -->
   import GridLayout from "./panel/Layout.vue";
   import Tool from "./panel/Tool.vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Configuration from "./configuration";
   import type { LayoutConfig } from "@/types/dashboard";
   import WidgetLink from "./components/WidgetLink.vue";
@@ -57,7 +56,6 @@ limitations under the License. -->
     components: { ...Configuration, GridLayout, Tool, WidgetLink },
     setup() {
       const dashboardStore = useDashboardStore();
-      const appStore = useAppStoreWithOut();
       const { t } = useI18n();
       const p = useRoute().params;
       const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
@@ -77,7 +75,6 @@ limitations under the License. -->
         const layout: any = c.configuration || {};
 
         dashboardStore.setLayout(setWidgetsID(layout.children || []));
-        appStore.setPageTitle(layout.name);
         if (p.entity) {
           dashboardStore.setCurrentDashboard({
             layer: p.layerId,

src/views/dashboard/List.vue

@@ -135,7 +135,6 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { ElMessageBox, ElMessage } from "element-plus";
   import { ElTable } from "element-plus";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import router from "@/router";
   import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
@@ -145,7 +144,6 @@ limitations under the License. -->
 
   /*global Nullable*/
   const { t } = useI18n();
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const pageSize = 20;
   const dashboards = ref<DashboardItem[]>([]);
@@ -157,7 +155,6 @@ limitations under the License. -->
   const multipleSelection = ref<DashboardItem[]>([]);
   const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
 
-  appStore.setPageTitle("Dashboard List");
   const handleSelectionChange = (val: DashboardItem[]) => {
     multipleSelection.value = val;
   };
@@ -481,7 +478,7 @@ limitations under the License. -->
   .table {
     padding: 20px 10px;
     background-color: #fff;
-    box-shadow: 0px 1px 4px 0px #00000029;
+    box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 5px;
     width: 100%;
     height: 100%;

src/views/dashboard/New.vue

@@ -53,12 +53,9 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { EntityType } from "./data";
   import { ElMessage } from "element-plus";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
 
-  const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
-  appStore.setPageTitle("Dashboard New");
   const { t } = useI18n();
   const selectorStore = useSelectorStore();
   const states = reactive({