feat: change the tab title to the site title of the website (#5696)

#### What type of PR is this?

/kind feature
/area ui
/area core
/milestone 2.15.x

#### What this PR does / why we need it:

将 Console 与 UC 页面的标签页标题改为网站实际标题

#### How to test it?

查看 Console 页面与 UC 页面的标题页标题是否变为网站实际标题

#### Which issue(s) this PR fixes:

Fixes #5679 

#### Does this PR introduce a user-facing change?
```release-note
将 Console 与 UC 的标签页标题改为网站实际标题
```

application/src/main/java/run/halo/app/actuator/GlobalInfoEndpoint.java

@@ -85,6 +85,8 @@ public class GlobalInfoEndpoint {
         private List<SocialAuthProvider> socialAuthProviders;
 
         private Boolean mustVerifyEmailOnRegistration;
+
+        private String siteTitle;
     }
 
     @Data
@@ -139,6 +141,7 @@ public class GlobalInfoEndpoint {
         var basic = SystemSetting.get(configMap, Basic.GROUP, Basic.class);
         if (basic != null) {
             info.setFavicon(basic.getFavicon());
+            info.setSiteTitle(basic.getTitle());
         }
     }
 

ui/console-src/views/system/Login.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed } from "vue";
 import LoginForm from "@/components/login/LoginForm.vue";
 import { useRouteQuery } from "@vueuse/router";
 import SignupForm from "@/components/signup/SignupForm.vue";
@@ -32,16 +32,14 @@ function handleChangeType() {
 
 const isLoginType = computed(() => type.value !== SIGNUP_TYPE);
 
-// page title
+useTitle(
-const title = useTitle();
+  computed(() => {
-watch(
+    const siteTitle = globalInfo.value?.siteTitle || AppName;
-  () => type.value,
-  (value) => {
     const routeTitle = t(
-      `core.${value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
+      `core.${type.value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
     );
-    title.value = [routeTitle, AppName].join(" - ");
+    return [routeTitle, siteTitle].join(" - ");
-  }
+  })
 );
 </script>
 <template>

ui/src/components/base-app/BaseApp.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { RouterView, useRoute } from "vue-router";
-import { computed, watch, reactive, onMounted, inject } from "vue";
+import { computed, reactive, onMounted, inject } from "vue";
 import { useTitle } from "@vueuse/core";
 import { useFavicon } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
@@ -12,30 +12,25 @@ import type { FormKitConfig } from "@formkit/core";
 import { i18n } from "@/locales";
 import { AppName } from "@/constants/app";
 import { useGlobalInfoStore } from "@/stores/global-info";
+import { storeToRefs } from "pinia";
 
 const { t } = useI18n();
 
-const globalInfoStore = useGlobalInfoStore();
+const { globalInfo } = storeToRefs(useGlobalInfoStore());
 
 const route = useRoute();
-const title = useTitle();
+useTitle(
-
+  computed(() => {
-watch(
-  () => route.name,
-  () => {
     const { title: routeTitle } = route.meta;
-    if (routeTitle) {
+    const siteTitle = globalInfo.value?.siteTitle || AppName;
-      title.value = `${t(routeTitle)} - ${AppName}`;
+    return [t(routeTitle || ""), siteTitle].filter(Boolean).join(" - ");
-      return;
+  })
-    }
-    title.value = AppName;
-  }
 );
 
 // Favicon
 const defaultFavicon = "/console/favicon.ico";
 const favicon = computed(() => {
-  return globalInfoStore.globalInfo?.favicon || defaultFavicon;
+  return globalInfo.value?.favicon || defaultFavicon;
 });
 
 useFavicon(favicon);

ui/src/types/actuator.ts

@@ -14,6 +14,7 @@ export interface GlobalInfo {
   favicon?: string;
   postSlugGenerationStrategy: ModeType;
   mustVerifyEmailOnRegistration: boolean;
+  siteTitle: string;
 }
 
 export interface Info {