perf(component): ⚡ 优化好友页面和聊天页面切换需要重新加载问题

修改一些组件的类型｜修改删除会话接口

.vscode/settings.json

@@ -3,4 +3,5 @@
         ".vscode/tailwindcss.json"
     ],
     "java.configuration.updateBuildConfiguration": "disabled",
+    "typescript.tsdk": "node_modules/typescript/lib",
 }

package.json

@@ -131,6 +131,7 @@
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vite": "6.2.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vitest": "^3.0.5",
     "vue-tsc": "^2.2.0"
   },

pnpm-lock.yaml

@@ -228,6 +228,9 @@ importers:
       vite:
         specifier: 6.2.0
         version: 6.2.0(@types/node@22.10.7)(jiti@2.4.2)(sass@1.83.0)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)
+      vite-plugin-vue-setup-extend:
+        specifier: ^0.4.0
+        version: 0.4.0(vite@6.2.0(@types/node@22.10.7)(jiti@2.4.2)(sass@1.83.0)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1))
       vitest:
         specifier: ^3.0.5
         version: 3.0.5(@types/node@22.10.7)(@vitest/ui@3.0.5)(happy-dom@15.11.7)(jiti@2.4.2)(sass@1.83.0)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)
@@ -3963,6 +3966,9 @@ packages:
     resolution: {integrity: sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -4766,6 +4772,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -5179,6 +5189,11 @@ packages:
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
+  vite-plugin-vue-setup-extend@0.4.0:
+    resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
   vite@6.2.0:
     resolution: {integrity: sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -9406,6 +9421,10 @@ snapshots:
 
   macos-release@3.3.0: {}
 
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -10325,6 +10344,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  sourcemap-codec@1.4.8: {}
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
@@ -10809,6 +10830,12 @@ snapshots:
       - tsx
       - yaml
 
+  vite-plugin-vue-setup-extend@0.4.0(vite@6.2.0(@types/node@22.10.7)(jiti@2.4.2)(sass@1.83.0)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)):
+    dependencies:
+      '@vue/compiler-sfc': 3.5.13
+      magic-string: 0.25.9
+      vite: 6.2.0(@types/node@22.10.7)(jiti@2.4.2)(sass@1.83.0)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)
+
   vite@6.2.0(@types/node@22.10.7)(jiti@2.4.2)(sass@1.83.0)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1):
     dependencies:
       esbuild: 0.25.0

src/components/common/VirtualList.vue

@@ -352,6 +352,7 @@ defineExpose<VirtualListExpose>({
   background-color: rgba(144, 144, 144, 0.3);
   border-radius: 3px;
   transition: background-color 0.3s;
+  min-height: 75px;
 }
 
 .virtual-list-container::-webkit-scrollbar-thumb:hover {

src/layout/center/index.vue

@@ -72,7 +72,11 @@
 
     <!-- 列表 -->
     <div id="centerList" class="h-full" :class="{ 'shadow-inner': page.shadow }">
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <keep-alive :include="['message', 'friendsList']">
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
     </div>
 
     <!-- 创建群聊穿梭框 -->

src/layout/index.vue

@@ -139,10 +139,13 @@ useMitt.on(WsResponseMessageType.OFFLINE, async () => {
 })
 useMitt.on(WsResponseMessageType.ONLINE, async (onStatusChangeType: OnStatusChangeType) => {
   console.log('收到用户上线通知')
-  groupStore.countInfo.onlineNum = onStatusChangeType.onlineNum
-  // groupStore.countInfo.totalNum = onStatusChangeType.totalNum
-  await groupStore.batchUpdateUserStatus(onStatusChangeType.changeList)
-  await groupStore.refreshGroupMembers()
+  if (onStatusChangeType && onStatusChangeType.onlineNum) {
+    groupStore.countInfo.onlineNum = onStatusChangeType.onlineNum
+  }
+  if (onStatusChangeType && onStatusChangeType.changeList) {
+    await groupStore.batchUpdateUserStatus(onStatusChangeType.changeList)
+    await groupStore.refreshGroupMembers()
+  }
 })
 useMitt.on(WsResponseMessageType.TOKEN_EXPIRED, async (wsTokenExpire: WsTokenExpire) => {
   if (

src/services/urls.ts

@@ -40,7 +40,7 @@ export default {
   sessionDetail: `${prefix + URLEnum.CHAT}/contact/detail`, // 会话详情
   sessionDetailWithFriends: `${prefix + URLEnum.CHAT}/contact/detail/friend`, // 会话详情(联系人列表发消息用)
   setSessionTop: `${prefix + URLEnum.CHAT}/setTop`, // 设置会话置顶
-  deleteSession: `${prefix + URLEnum.CHAT}/hide`, // 删除会话
+  deleteSession: `${prefix + URLEnum.CHAT}/delete`, // 删除会话
 
   // -------------- 群聊相关 ---------------
   createGroup: `${prefix + URLEnum.ROOM}/group`, // 新增群组

src/stores/chat.ts

@@ -28,6 +28,11 @@ let isFirstInit = false
 // 撤回消息的过期时间
 const RECALL_EXPIRATION_TIME = 2 * 60 * 1000 // 2分钟，单位毫秒
 
+// 定义消息数量阈值
+const MESSAGE_THRESHOLD = 120
+// 定义保留的最新消息数量
+const KEEP_MESSAGE_COUNT = 60
+
 // 创建src/workers/timer.worker.ts
 const timerWorker = new Worker(new URL('../workers/timer.worker.ts', import.meta.url))
 
@@ -322,9 +327,18 @@ export const useChatStore = defineStore(
     // 推送消息
     const pushMsg = async (msg: MessageType) => {
       const current = messageMap.get(msg.message.roomId)
-      // TODO 超过五分钟发送信息的时候没有显示时间差的时间戳 (nyh -> 2024-05-21 00:17:15)
       current?.set(msg.message.id, msg)
 
+      // 检查消息数量是否超过阈值
+      if (current && current.size > MESSAGE_THRESHOLD) {
+        // 获取所有消息ID并按时间排序
+        const messageIds = Array.from(current.keys())
+        const messagesToDelete = messageIds.slice(0, messageIds.length - KEEP_MESSAGE_COUNT)
+
+        // 删除旧消息
+        messagesToDelete.forEach((id) => current.delete(id))
+      }
+
       // 获取用户信息缓存
       const uid = msg.fromUser.uid
       const cacheUser = cachedStore.userCachedList[uid]

src/views/homeWindow/FriendsList.vue

@@ -95,7 +95,7 @@
     </n-tab-pane>
   </n-tabs>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="friendsList">
 import { useMitt } from '@/hooks/useMitt.ts'
 import { MittEnum, OnlineEnum, RoomTypeEnum } from '@/enums'
 import { useContactStore } from '@/stores/contacts.ts'

src/views/homeWindow/message/index.vue

@@ -88,7 +88,7 @@
     </n-result>
   </n-scrollbar>
 </template>
-<script lang="ts" setup>
+<script lang="ts" setup name="message">
 import { useMessage } from '@/hooks/useMessage.ts'
 import { MittEnum, MsgEnum, RoomTypeEnum } from '@/enums'
 import { IsAllUserEnum, SessionItem } from '@/services/types.ts'
@@ -113,7 +113,7 @@ const globalStore = useGlobalStore()
 const groupStore = useGroupStore()
 const { userUid, openMsgSession } = useCommon()
 const userStore = useUserStore()
-const msgScrollbar = useTemplateRef('msg-scrollbar')
+const msgScrollbar = useTemplateRef<HTMLElement>('msg-scrollbar')
 const { handleMsgClick, handleMsgDelete, menuList, specialMenuList, handleMsgDblclick } = useMessage()
 const currentSession = computed(() => globalStore.currentSession)
 // TODO 艾特我提醒

src/views/imageViewerWindow/index.vue

@@ -131,7 +131,7 @@ const dragStart = reactive({ x: 0, y: 0 })
 const imagePosition = reactive({ x: 0, y: 0 })
 const imageRef = ref<HTMLImageElement>()
 // 添加响应式变量来跟踪是否有滚动条
-const contentScrollbar = useTemplateRef('contentRef')
+const contentScrollbar = useTemplateRef<HTMLElement>('contentRef')
 const isScrollbar = ref(false)
 //提示相关的响应式变量
 const showTip = ref(false)

vite.config.ts

@@ -8,6 +8,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import UnoCSS from '@unocss/vite'
 import terser from '@rollup/plugin-terser'
 import { codecovVitePlugin } from '@codecov/vite-plugin'
+import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 
 // https://vitejs.dev/config/
 /**! 不需要优化前端打包(如开启gzip) */
@@ -38,6 +39,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {
        * vue3.5.0已支持解构并具有响应式
        * */
       vue(),
+      VueSetupExtend(),
       vueJsx(), // 开启jsx功能
       UnoCSS(), // 开启UnoCSS
       AutoImport({