perf(component): ⚡ 优化组件加载、浏览器指纹生成 (#192)

package.json

@@ -62,6 +62,7 @@
     "@tauri-apps/api": "2.2.0",
     "@tauri-apps/plugin-autostart": "2.2.0",
     "@tauri-apps/plugin-clipboard-manager": "2.2.0",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-fs": "~2.2.0",
     "@tauri-apps/plugin-http": "2.2.0",
     "@tauri-apps/plugin-notification": "^2.2.0",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hula"
-version = "2.6.0"
+version = "2.6.1"
 description = "hula"
 authors = ["nongyehong"]
 license = ""

src-tauri/tauri.conf.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://schema.tauri.app/config/2",
   "productName": "HuLa",
   "version": "2.6.1",
   "identifier": "com.hula.pc",

src/components/common/InfoPopover.vue

@@ -29,7 +29,7 @@
         </div>
 
         <p
-          class="text-(18px [--text-color])"
+          class="text-(18px [--chat-text-color])"
           style="
             font-weight: bold !important;
             font-family:

src/components/common/LoadingSpinner.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex-center h-full">
+    <n-spin size="large" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/layout/index.vue

@@ -1,17 +1,36 @@
 <template>
   <div id="layout" class="flex size-full min-w-310px bg-[--right-bg-color]">
-    <Left />
-    <Center />
-    <Right v-if="!shrinkStatus" />
+    <Suspense>
+      <template #default>
+        <div class="flex size-full">
+          <!-- 使用keep-alive包裹异步组件 -->
+          <keep-alive>
+            <AsyncLeft />
+          </keep-alive>
+          <keep-alive>
+            <AsyncCenter />
+          </keep-alive>
+          <keep-alive>
+            <AsyncRight v-if="!shrinkStatus" />
+          </keep-alive>
+        </div>
+      </template>
+      <template #fallback>
+        <div class="flex items-center justify-center size-full">
+          <LoadingSpinner />
+        </div>
+      </template>
+    </Suspense>
   </div>
 
-  <AddFriendsModal />
+  <!-- 模态框也可以缓存 -->
+  <keep-alive>
+    <AsyncAddFriendsModal />
+  </keep-alive>
 </template>
 
 <script setup lang="ts">
-import Center from './center/index.vue'
-import Left from './left/index.vue'
-import Right from './right/index.vue'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
 import { useMitt } from '@/hooks/useMitt.ts'
 import { ChangeTypeEnum, MittEnum, OnlineEnum, RoomTypeEnum } from '@/enums'
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
@@ -29,6 +48,34 @@ import { isPermissionGranted, requestPermission, sendNotification } from '@tauri
 import { useUserInfo } from '@/hooks/useCached.ts'
 import { emitTo } from '@tauri-apps/api/event'
 import { useThrottleFn } from '@vueuse/core'
+import apis from '@/services/apis.ts'
+import { confirm } from '@tauri-apps/plugin-dialog'
+
+// 异步加载组件时增加缓存配置
+const AsyncLeft = defineAsyncComponent({
+  loader: async () => await import('./left/index.vue'),
+  delay: 600,
+  timeout: 3000
+})
+
+// 其他异步组件也类似配置
+const AsyncCenter = defineAsyncComponent({
+  loader: async () => await import('./center/index.vue'),
+  delay: 600,
+  timeout: 3000
+})
+
+const AsyncRight = defineAsyncComponent({
+  loader: async () => await import('./right/index.vue'),
+  delay: 600,
+  timeout: 3000
+})
+
+const AsyncAddFriendsModal = defineAsyncComponent({
+  loader: async () => await import('@/components/common/AddFriendsModal.vue'),
+  delay: 600,
+  timeout: 3000
+})
 
 const globalStore = useGlobalStore()
 const contactStore = useContactStore()
@@ -81,6 +128,7 @@ useMitt.on(WsResponseMessageType.TOKEN_EXPIRED, async (wsTokenExpire: WsTokenExp
     await confirm('新设备已在' + (wsTokenExpire.ip ? wsTokenExpire.ip : '未知IP') + '登录')
     // token已在后端清空，只需要返回登录页
     await logout()
+    await apis.logout()
     userStore.isSign = false
     userStore.userInfo = {}
     localStorage.removeItem('user')

src/layout/left/config.tsx

@@ -102,7 +102,7 @@ const moreList = ref<OPT.L.MoreList[]>([
         isSign: false
       })
       // 后端发布下线通知同时清除token
-      await apis.logout().catch(() => {})
+      await apis.logout()
       await logout()
       // 如果没有设置自动登录，则清除用户信息
       userStore.userInfo = {}

src/layout/left/model.tsx

@@ -25,6 +25,7 @@ import { relaunch } from '@tauri-apps/plugin-process'
 import { useUserStore } from '@/stores/user.ts'
 import { useSettingStore } from '@/stores/setting.ts'
 import { AvatarUtils } from '@/utils/avatarUtils.ts'
+import { confirm } from '@tauri-apps/plugin-dialog'
 
 const formRef = ref<FormInst | null>()
 const formValue = ref({
@@ -192,7 +193,7 @@ export const CheckUpdate = defineComponent(() => {
   }
 
   const handleUpdate = async () => {
-    if (!(await window.confirm('确定更新吗'))) {
+    if (!(await confirm('确定更新吗'))) {
       return
     }
     text.value = '正在下载...'