feat: set page titles

src/layout/components/NavBar.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h" :class="{ dark: theme === 'dark' }">
-    <div class="title">{{ t(pageName) }}</div>
+    <div class="title">{{ appStore.pageTitle || t(pageName) }}</div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker

src/store/modules/app.ts

@@ -29,6 +29,7 @@ interface AppState {
   eventStack: (() => unknown)[];
   timer: Nullable<any>;
   autoRefresh: boolean;
+  pageTitle: string;
 }
 
 export const appStore = defineStore({
@@ -41,6 +42,7 @@ export const appStore = defineStore({
     eventStack: [],
     timer: null,
     autoRefresh: false,
+    pageTitle: "",
   }),
   getters: {
     duration(): Duration {
@@ -122,6 +124,9 @@ 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/Log.vue

@@ -16,6 +16,10 @@ limitations under the License. -->
   <div class="about">{{ props.msg }}</div>
 </template>
 <script lang="ts" setup>
+import { useAppStoreWithOut } from "@/store/modules/app";
+
+const appStore = useAppStoreWithOut();
+appStore.setPageTitle("Log");
 /*global defineProps */
 const props = defineProps({
   msg: String,

src/views/Settings.vue

@@ -90,6 +90,7 @@ const utcArr = appStore.utc.split(":");
 const utcHour = ref<number>(isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]));
 const utcMin = ref<number>(isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]));
 
+appStore.setPageTitle("Setting");
 const handleReload = () => {
   const gap =
     appStore.duration.end.getTime() - appStore.duration.start.getTime();

src/views/dashboard/Edit.vue

@@ -34,8 +34,10 @@ import GridLayout from "./panel/Layout.vue";
 import Tool from "./panel/Tool.vue";
 import ConfigEdit from "./configuration/ConfigEdit.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 const dashboardStore = useDashboardStore();
+const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 // fetch layout data from serve side
 // const layout: any[] = [
@@ -56,7 +58,7 @@ const { t } = useI18n();
 //   { x: 8, y: 27, w: 4, h: 15, i: "16" },
 // ];
 // dashboardStore.setLayout(layout);
-
+appStore.setPageTitle("Dashboard Name");
 function handleClick(e: any) {
   e.stopPropagation();
   if (e.target.className === "ds-main") {

src/views/dashboard/List.vue

@@ -61,6 +61,10 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
+import { useAppStoreWithOut } from "@/store/modules/app";
+
+const appStore = useAppStoreWithOut();
+appStore.setPageTitle("Dashboard List");
 //  # - os-linux
 //  # - k8s
 //  # - general(agent-installed)
@@ -107,9 +111,11 @@ const handleDelete = (index: number, row: any) => {
 .header {
   flex-direction: row-reverse;
 }
+
 .dashboard-list {
   padding: 20px;
 }
+
 .input-with-search {
   width: 300px;
   margin-left: 20px;

src/views/dashboard/New.vue

@@ -59,7 +59,10 @@ import router from "@/router";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType } from "./data";
 import { ElMessage } from "element-plus";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
+const appStore = useAppStoreWithOut();
+appStore.setPageTitle("Dashboard New");
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const states = reactive({

src/views/service/Panel.vue

@@ -50,7 +50,10 @@ import Endpoints from "./Endpoints.vue";
 import Topology from "./Topology.vue";
 import Traces from "./Traces.vue";
 import Profiles from "./Profiles.vue";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
+const appStore = useAppStoreWithOut();
+appStore.setPageTitle("General Service");
 const route = useRoute();
 const { t } = useI18n();
 const tabs = ["metrics", "topologies", "endpoints", "traces", "profiles"];
@@ -69,30 +72,36 @@ function handleClick(tab: string) {
 .service-detail {
   text-align: left;
 }
+
 .tabs {
   padding: 15px 15px 0 15px;
   border-bottom: 1px solid var(--el-border-color-light);
 }
+
 .tab {
   display: inline-block;
   margin-right: 30px;
   font-size: 13px;
   font-weight: 400;
   height: 30px;
+
   &:hover {
     color: var(--el-color-primary);
   }
+
   &.active {
     color: var(--el-color-primary);
     border-bottom: 1px solid var(--el-color-primary);
   }
 }
+
 .title {
   padding: 5px 0 5px 15px;
   font-size: 14px;
   font-weight: 400;
   border-bottom: 1px solid #dfe4e8;
   background-color: #c4c8e133;
+
   span {
     display: inline-block;
     margin-right: 10px;