From 60f113110bfc9abf7ab4ee7c2ba8629f4e0e7a4d Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Fri, 12 Apr 2024 17:48:08 +0800
Subject: [PATCH] feat: change the tab title to the site title of the website
 (#5696)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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 的标签页标题改为网站实际标题
```
---
 .../halo/app/actuator/GlobalInfoEndpoint.java |  3 +++
 ui/console-src/views/system/Login.vue         | 16 ++++++-------
 ui/src/components/base-app/BaseApp.vue        | 23 ++++++++-----------
 ui/src/types/actuator.ts                      |  1 +
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/application/src/main/java/run/halo/app/actuator/GlobalInfoEndpoint.java b/application/src/main/java/run/halo/app/actuator/GlobalInfoEndpoint.java
index b3a745c71..36ede07f1 100644
--- a/application/src/main/java/run/halo/app/actuator/GlobalInfoEndpoint.java
+++ b/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());
         }
     }
 
diff --git a/ui/console-src/views/system/Login.vue b/ui/console-src/views/system/Login.vue
index c0a07447e..22e37b568 100644
--- a/ui/console-src/views/system/Login.vue
+++ b/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
-const title = useTitle();
-watch(
-  () => type.value,
-  (value) => {
+useTitle(
+  computed(() => {
+    const siteTitle = globalInfo.value?.siteTitle || AppName;
     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>
diff --git a/ui/src/components/base-app/BaseApp.vue b/ui/src/components/base-app/BaseApp.vue
index 5e7277d2b..dddd4c827 100644
--- a/ui/src/components/base-app/BaseApp.vue
+++ b/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();
-
-watch(
-  () => route.name,
-  () => {
+useTitle(
+  computed(() => {
     const { title: routeTitle } = route.meta;
-    if (routeTitle) {
-      title.value = `${t(routeTitle)} - ${AppName}`;
-      return;
-    }
-    title.value = AppName;
-  }
+    const siteTitle = globalInfo.value?.siteTitle || AppName;
+    return [t(routeTitle || ""), siteTitle].filter(Boolean).join(" - ");
+  })
 );
 
 // Favicon
 const defaultFavicon = "/console/favicon.ico";
 const favicon = computed(() => {
-  return globalInfoStore.globalInfo?.favicon || defaultFavicon;
+  return globalInfo.value?.favicon || defaultFavicon;
 });
 
 useFavicon(favicon);
diff --git a/ui/src/types/actuator.ts b/ui/src/types/actuator.ts
index 07e821daf..0af81ce4d 100644
--- a/ui/src/types/actuator.ts
+++ b/ui/src/types/actuator.ts
@@ -14,6 +14,7 @@ export interface GlobalInfo {
   favicon?: string;
   postSlugGenerationStrategy: ModeType;
   mustVerifyEmailOnRegistration: boolean;
+  siteTitle: string;
 }
 
 export interface Info {