perf(projects): move changing document title by locale to global event of composables & add appLoading unmount

src/App.vue

@@ -13,26 +13,14 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
-import { useRoute } from 'vue-router';
 import { dateZhCN, zhCN } from 'naive-ui';
-import { useI18n } from 'vue-i18n';
 import { subscribeStore, useThemeStore } from '@/store';
 import { useGlobalEvents } from '@/composables';
 
 const theme = useThemeStore();
-const { locale, t } = useI18n();
-const route = useRoute();
 
 subscribeStore();
 useGlobalEvents();
-
-watch(
-  () => locale.value,
-  () => {
-    document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
-  }
-);
 </script>
 
 <style scoped></style>

src/composables/events.ts

@@ -1,14 +1,34 @@
+import { effectScope, onScopeDispose, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { useEventListener } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import { useTabStore, useThemeStore } from '@/store';
 
 /** 全局事件 */
 export function useGlobalEvents() {
   const theme = useThemeStore();
   const tab = useTabStore();
+  const route = useRoute();
+  const { locale, t } = useI18n();
+  const scope = effectScope();
 
   /** 页面离开时缓存多页签数据 */
   useEventListener(window, 'beforeunload', () => {
     theme.cacheThemeSettings();
     tab.cacheTabRoutes();
   });
+
+  scope.run(() => {
+    // 国际化切换时更新浏览器标签文本
+    watch(
+      () => locale.value,
+      () => {
+        document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
+      }
+    );
+  });
+
+  onScopeDispose(() => {
+    scope.stop();
+  });
 }

src/main.ts

@@ -29,6 +29,8 @@ async function setupApp() {
 
   setupI18n(app);
 
+  appLoading.unmount();
+
   // mount app
   app.mount('#app');
 }