From 39dc4ef11160b6ac4ed22a571ad5a0a85814c088 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 25 Apr 2024 11:23:53 +0800
Subject: [PATCH] refactor: implementation of browser tab title

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 ui/console-src/views/system/Login.vue  | 17 +++++------------
 ui/index.html                          |  2 +-
 ui/src/components/base-app/BaseApp.vue | 22 +++++++---------------
 ui/src/composables/use-title.ts        | 24 ++++++++++++++++++++++++
 4 files changed, 37 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/composables/use-title.ts

diff --git a/ui/console-src/views/system/Login.vue b/ui/console-src/views/system/Login.vue
index 22e37b5687..a116a702aa 100644
--- a/ui/console-src/views/system/Login.vue
+++ b/ui/console-src/views/system/Login.vue
@@ -5,14 +5,11 @@ import { useRouteQuery } from "@vueuse/router";
 import SignupForm from "@/components/signup/SignupForm.vue";
 import SocialAuthProviders from "@/components/login/SocialAuthProviders.vue";
 import { useGlobalInfoFetch } from "@console/composables/use-global-info";
-import { useTitle } from "@vueuse/core";
-import { useI18n } from "vue-i18n";
-import { AppName } from "@/constants/app";
 import MdiKeyboardBackspace from "~icons/mdi/keyboard-backspace";
 import LocaleChange from "@/components/common/LocaleChange.vue";
+import { useAppTitle } from "@/composables/use-title";
 
 const { globalInfo } = useGlobalInfoFetch();
-const { t } = useI18n();
 
 const SIGNUP_TYPE = "signup";
 
@@ -32,14 +29,10 @@ function handleChangeType() {
 
 const isLoginType = computed(() => type.value !== SIGNUP_TYPE);
 
-useTitle(
-  computed(() => {
-    const siteTitle = globalInfo.value?.siteTitle || AppName;
-    const routeTitle = t(
-      `core.${type.value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
-    );
-    return [routeTitle, siteTitle].join(" - ");
-  })
+useAppTitle(
+  computed(
+    () => `core.${type.value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
+  )
 );
 </script>
 <template>
diff --git a/ui/index.html b/ui/index.html
index 09e081a7bd..7877ca2a18 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -9,7 +9,7 @@
       name="viewport"
     />
     <meta content="noindex,nofollow" name="robots" />
-    <title>Halo</title>
+    <title></title>
     <link rel="icon" href="/favicon.ico" type="image/png" />
     <link rel="icon" href="/favicon.ico" type="image/svg+xml" />
     <meta name="msapplication-TileColor" content="#da532c" />
diff --git a/ui/src/components/base-app/BaseApp.vue b/ui/src/components/base-app/BaseApp.vue
index 251a03282a..28f7d7be0c 100644
--- a/ui/src/components/base-app/BaseApp.vue
+++ b/ui/src/components/base-app/BaseApp.vue
@@ -1,32 +1,21 @@
 <script lang="ts" setup>
-import { RouterView, useRoute } from "vue-router";
-import { computed, reactive, onMounted, inject } from "vue";
-import { useTitle } from "@vueuse/core";
+import { RouterView } from "vue-router";
+import { computed, inject, onMounted, reactive } from "vue";
 import { useFavicon } from "@vueuse/core";
-import { useI18n } from "vue-i18n";
 import {
   useOverlayScrollbars,
   type UseOverlayScrollbarsParams,
 } from "overlayscrollbars-vue";
 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";
+import { useAppTitle } from "@/composables/use-title";
 
-const { t } = useI18n();
+useAppTitle();
 
 const { globalInfo } = storeToRefs(useGlobalInfoStore());
 
-const route = useRoute();
-useTitle(
-  computed(() => {
-    const { title: routeTitle } = route.meta;
-    const siteTitle = globalInfo.value?.siteTitle || AppName;
-    return [t(routeTitle || ""), siteTitle].filter(Boolean).join(" - ");
-  })
-);
-
 // Favicon
 const defaultFavicon = "/console/favicon.ico";
 const favicon = computed(() => {
@@ -66,6 +55,7 @@ formkitConfig.locale = formkitLocales[i18n.global.locale.value] || "zh";
 function setViewportProperty(doc: HTMLElement) {
   let prevClientHeight: number;
   const customVar = "--vh";
+
   function handleResize() {
     const clientHeight = doc.clientHeight;
     if (clientHeight === prevClientHeight) return;
@@ -74,9 +64,11 @@ function setViewportProperty(doc: HTMLElement) {
       prevClientHeight = clientHeight;
     });
   }
+
   handleResize();
   return handleResize;
 }
+
 window.addEventListener(
   "resize",
   setViewportProperty(document.documentElement)
diff --git a/ui/src/composables/use-title.ts b/ui/src/composables/use-title.ts
new file mode 100644
index 0000000000..5e1f2c68ae
--- /dev/null
+++ b/ui/src/composables/use-title.ts
@@ -0,0 +1,24 @@
+import { storeToRefs } from "pinia";
+import { useGlobalInfoStore } from "@/stores/global-info";
+import { useRoute } from "vue-router";
+import { useTitle } from "@vueuse/core";
+import { computed, type Ref } from "vue";
+import { AppName } from "@/constants/app";
+import { useI18n } from "vue-i18n";
+
+export function useAppTitle(baseTitle?: Ref<string>) {
+  const { globalInfo } = storeToRefs(useGlobalInfoStore());
+
+  const { t } = useI18n();
+  const route = useRoute();
+
+  useTitle(
+    computed(() => {
+      const { title: routeTitle } = route.meta;
+      const siteTitle = globalInfo.value?.siteTitle || AppName;
+      return [t(baseTitle?.value || routeTitle || ""), siteTitle]
+        .filter(Boolean)
+        .join(" - ");
+    })
+  );
+}