feat: add page title

src/layout/components/NavBar.vue

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
-    <el-breadcrumb separator="/" class="title">
+    <el-breadcrumb separator=">" class="title" v-if="pathNames.length">
-      <el-breadcrumb-item v-for="(p, index) in pathNames" :to="{ path: p.path }" :key="index" :replace="true">
+      <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="title" v-else>{{ pageTitle }}</div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
@@ -51,22 +51,22 @@ limitations under the License. -->
   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 { MetricCatalog } from "@/views/dashboard/data";
   import type { DashboardItem } from "@/types/dashboard";
 
   /*global Indexable */
-  const { t } = useI18n();
+  const { t, te } = useI18n();
   const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
-  const selectorStore = useSelectorStore();
   const route = useRoute();
-  const pathNames = ref<any[]>([]);
+  const pathNames = ref<{ path?: string; name: string }[]>([]);
   const timeRange = ref<number>(0);
+  const pageTitle = ref<string>("");
 
   resetDuration();
   getVersion();
+  getNavPaths();
 
   function handleReload() {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -82,9 +82,15 @@ limitations under the License. -->
     appStore.setDuration(timeFormat(val));
   }
 
-  function getPathNames() {
+  function getNavPaths() {
     pathNames.value = [];
+    pageTitle.value = "";
     const dashboard = dashboardStore.currentDashboard;
+    console.log(dashboard);
+    if (!dashboard) {
+      updateNavTitle();
+      return;
+    }
     const root =
       dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && dashboard.layer === d.layer)[0] || {};
     for (const item of appStore.allMenus) {
@@ -193,10 +199,21 @@ limitations under the License. -->
     }
   }
 
+  function updateNavTitle() {
+    const key = String(route.meta.i18nKey);
+    pageTitle.value = te(key) ? t(key) : String(route.meta.title);
+  }
+
   watch(
     () => dashboardStore.currentDashboard,
     () => {
-      getPathNames();
+      getNavPaths();
+    },
+  );
+  watch(
+    () => route.name,
+    () => {
+      getNavPaths();
     },
   );
 </script>

src/types/components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -19,11 +20,13 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     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']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/views/dashboard/Edit.vue

@@ -41,7 +41,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-  import { ref, defineComponent } from "vue";
+  import { ref, defineComponent, onUnmounted } from "vue";
   import { useI18n } from "vue-i18n";
   import { useRoute } from "vue-router";
   import GridLayout from "./panel/Layout.vue";
@@ -111,6 +111,10 @@ limitations under the License. -->
         }
       }
 
+      onUnmounted(() => {
+        dashboardStore.setCurrentDashboard(null);
+      });
+
       return {
         t,
         handleClick,