fix(store): 🐛 上下线通知

src/components/common/AddFriendsModal.vue

@@ -57,11 +57,11 @@
 import { useGlobalStore } from '@/stores/global.ts'
 import { type } from '@tauri-apps/plugin-os'
 import { useUserInfo } from '@/hooks/useCached.ts'
-import { leftHook } from '@/layout/left/hook.ts'
 import apis from '@/services/apis.ts'
+import { useCommon } from '@/hooks/useCommon.ts'
 
 const globalStore = useGlobalStore()
-const { countGraphemes } = leftHook()
+const { countGraphemes } = useCommon()
 const userInfo = ref(useUserInfo(globalStore.addFriendModalInfo.uid).value)
 const requestMsg = ref()
 

src/services/webSocket.ts

@@ -134,18 +134,18 @@ class WS {
         computedToken.get()
         // 获取用户详情
         userStore.getUserDetailAction()
-        // 自己更新自己上线
-        groupStore.batchUpdateUserStatus([
-          {
-            activeStatus: OnlineEnum.ONLINE,
-            avatar: rest.avatar,
-            lastOptTime: Date.now(),
-            name: rest.name,
-            uid: rest.uid
-          }
-        ])
         // 获取用户详情
         await chatStore.getSessionList(true)
+        // 自己更新自己上线
+        // groupStore.batchUpdateUserStatus([
+        //   {
+        //     activeStatus: OnlineEnum.ONLINE,
+        //     avatar: rest.avatar,
+        //     lastOptTime: Date.now(),
+        //     name: rest.name,
+        //     uid: rest.uid
+        //   }
+        // ])
         // TODO 先不获取 emoji 列表，当我点击 emoji 按钮的时候再获取
         // await emojiStore.getEmojiList()
         Mitt.emit(WsResEnum.LOGIN_SUCCESS, params.data)
@@ -162,7 +162,8 @@ class WS {
         const data = params.data as OnStatusChangeType
         groupStore.countInfo.onlineNum = data.onlineNum
         // groupStore.countInfo.totalNum = data.totalNum
-        groupStore.batchUpdateUserStatus(data.changeList)
+        //groupStore.batchUpdateUserStatus(data.changeList)
+        groupStore.getGroupUserList(true)
         console.log('收到用户下线通知', data)
         break
       }

src/stores/group.ts

@@ -7,7 +7,6 @@ import { OnlineEnum, RoleEnum } from '@/enums'
 import { uniqueUserList } from '@/utils/unique'
 import { useCachedStore } from '@/stores/cached'
 import { useUserStore } from '@/stores/user'
-import { cloneDeep } from 'lodash-es'
 
 const sorAction = (pre: UserItem, next: UserItem) => {
   if (pre.activeStatus === OnlineEnum.ONLINE && next.activeStatus === OnlineEnum.ONLINE) {
@@ -90,9 +89,9 @@ export const useGroupStore = defineStore('group', () => {
       roomId: currentRoomId.value
     })
     if (!data) return
-    const tempNew = cloneDeep(uniqueUserList(refresh ? data.list : [...data.list, ...userList.value]))
-    tempNew.sort(sorAction)
-    userList.value = tempNew
+    const newUserList = uniqueUserList(refresh ? data.list : [...data.list, ...userList.value])
+    newUserList.sort(sorAction)
+    userList.value = newUserList
     userListOptions.cursor = data.cursor
     userListOptions.isLast = data.isLast
     userListOptions.loading = false
@@ -119,19 +118,15 @@ export const useGroupStore = defineStore('group', () => {
 
   // 更新用户在线状态
   const batchUpdateUserStatus = (items: UserItem[]) => {
-    const tempNew = cloneDeep(userList.value)
     for (let index = 0, len = items.length; index < len; index++) {
       const curUser = items[index]
-      const findIndex = tempNew.findIndex((item) => item.uid === curUser.uid)
-      findIndex > -1 && (tempNew[findIndex].activeStatus = curUser.activeStatus)
+      const findIndex = userList.value.findIndex((item) => item.uid === curUser.uid)
+      console.log(findIndex)
+      userList.value[findIndex] = {
+        ...userList.value[findIndex],
+        activeStatus: items[index].activeStatus
+      }
     }
-    tempNew.sort(sorAction)
-    // TODO: 这里的数据为什么前后不一致
-    userList.value = tempNew
-    console.log(userList.value)
-    setTimeout(() => {
-      console.log(userList.value)
-    }, 3000)
   }
 
   // 过滤掉小黑子

src/typings/components.d.ts

@@ -1,70 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    ActionBar: typeof import('./../components/windows/ActionBar.vue')['default']
-    AddFriendsModal: typeof import('./../components/common/AddFriendsModal.vue')['default']
-    ApplyList: typeof import('./../components/rightBox/ApplyList.vue')['default']
-    ChatBox: typeof import('./../components/rightBox/chatBox/index.vue')['default']
-    ChatFooter: typeof import('./../components/rightBox/chatBox/ChatFooter.vue')['default']
-    ChatHeader: typeof import('./../components/rightBox/chatBox/ChatHeader.vue')['default']
-    ChatMain: typeof import('./../components/rightBox/chatBox/ChatMain.vue')['default']
-    ChatSidebar: typeof import('./../components/rightBox/chatBox/ChatSidebar.vue')['default']
-    ContextMenu: typeof import('./../components/common/ContextMenu.vue')['default']
-    Details: typeof import('./../components/rightBox/Details.vue')['default']
-    Emoji: typeof import('./../components/rightBox/emoji/index.vue')['default']
-    Image: typeof import('./../components/rightBox/renderMessage/Image.vue')['default']
-    InfoPopover: typeof import('./../components/common/InfoPopover.vue')['default']
-    MsgInput: typeof import('./../components/rightBox/MsgInput.vue')['default']
-    NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
-    NAvatar: typeof import('naive-ui')['NAvatar']
-    NAvatarGroup: typeof import('naive-ui')['NAvatarGroup']
-    NBadge: typeof import('naive-ui')['NBadge']
-    NButton: typeof import('naive-ui')['NButton']
-    NButtonGroup: typeof import('naive-ui')['NButtonGroup']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NCollapse: typeof import('naive-ui')['NCollapse']
-    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
-    NDropdown: typeof import('naive-ui')['NDropdown']
-    NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NFlex: typeof import('naive-ui')['NFlex']
-    NIcon: typeof import('naive-ui')['NIcon']
-    NIconWrapper: typeof import('naive-ui')['NIconWrapper']
-    NImage: typeof import('naive-ui')['NImage']
-    NImageGroup: typeof import('naive-ui')['NImageGroup']
-    NInput: typeof import('naive-ui')['NInput']
-    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
-    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NModal: typeof import('naive-ui')['NModal']
-    NModalProvider: typeof import('naive-ui')['NModalProvider']
-    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
-    NPopover: typeof import('naive-ui')['NPopover']
-    NPopselect: typeof import('naive-ui')['NPopselect']
-    NQrCode: typeof import('naive-ui')['NQrCode']
-    NRadio: typeof import('naive-ui')['NRadio']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSelect: typeof import('naive-ui')['NSelect']
-    NSkeleton: typeof import('naive-ui')['NSkeleton']
-    NSpin: typeof import('naive-ui')['NSpin']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTab: typeof import('naive-ui')['NTab']
-    NTabPane: typeof import('naive-ui')['NTabPane']
-    NTabs: typeof import('naive-ui')['NTabs']
-    NTooltip: typeof import('naive-ui')['NTooltip']
-    NVirtualList: typeof import('naive-ui')['NVirtualList']
-    RenderMessage: typeof import('./../components/rightBox/renderMessage/index.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    Screenshot: typeof import('./../components/common/Screenshot.vue')['default']
-    Text: typeof import('./../components/rightBox/renderMessage/Text.vue')['default']
-  }
-}