fix: 升级依赖，修复邀请群成员禁用及列表获取问题，被踢出群不能邀请群成员

Author: Evansy

package.json

@@ -21,46 +21,46 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@alova/scene-vue": "^1.1.7",
+    "@alova/scene-vue": "^1.2.0",
     "@element-plus/icons-vue": "^2.1.0",
     "@imengyu/vue3-context-menu": "^1.3.3",
-    "alova": "^2.10.0",
-    "dayjs": "^1.11.9",
-    "element-plus": "^2.3.9",
+    "alova": "^2.13.1",
+    "dayjs": "^1.11.10",
+    "element-plus": "^2.3.14",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
     "qrcode.vue": "^3.4.1",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
+    "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@iconify-json/ep": "^1.1.12",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/lodash": "^4.14.197",
-    "@types/node": "^18.17.5",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@rushstack/eslint-patch": "^1.5.1",
+    "@types/lodash": "^4.14.199",
+    "@types/node": "^18.18.4",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/tsconfig": "^0.1.3",
-    "@vueuse/core": "^10.3.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.47.0",
+    "@vueuse/core": "^10.5.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.51.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^13.3.0",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
-    "postcss-scss": "^4.0.6",
+    "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.65.1",
-    "stylelint": "^15.10.2",
+    "sass": "^1.69.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-recess-order": "^4.3.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^33.0.0",
@@ -70,11 +70,11 @@
     "unplugin-auto-import": "^0.15.3",
     "unplugin-icons": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "4.4.9",
+    "vite": "4.4.11",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-imagemin": "^0.6.1",
-    "vue-tsc": "^1.8.8",
-    "xgplayer": "^2.32.3"
+    "vue-tsc": "^1.8.19",
+    "xgplayer": "^2.32.5"
   },
   "resolutions": {
     "bin-wrapper": "npm:bin-wrapper-china"

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 <script setup lang="ts" name="CreateGroupModal">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useContactStore } from '@/stores/contacts'
 import Avatar from '@/components/Avatar/index.vue'
 import { useGlobalStore } from '@/stores/global'
@@ -20,37 +20,39 @@ const data = ref<
     disabled: boolean
   }[]
 >([])
+
 // const data = computed(() =>
 //   contactStore.contactsList.map((item) => ({
 //     label: item.uid,
 //     key: item.uid,
 //     initial: item.uid,
 //   })),
 // )
+const contactsList = computed(() => contactStore.contactsList)
+const selectedUid = computed(() => globalStore.createGroupModalInfo.selectedUid)
 watch(
-  () => contactStore.contactsList,
+  contactsList,
   (val) => {
     data.value = val.map((item) => ({
       label: item.uid,
       key: item.uid,
       initial: item.uid,
       disabled: false,
     }))
-    console.log(data.value)
   },
-  { immediate: true },
+  { immediate: true, deep: true },
 )
 watch(
-  () => globalStore.createGroupModalInfo.selectedUid,
+  selectedUid,
   (val) => {
     val.forEach((item) => {
       const dataItem = data.value.find((i) => i.key === item)
       if (dataItem) {
         dataItem.disabled = true
       }
     })
-    console.log('selectedUid', val, data.value)
   },
+  { immediate: true },
 )
 // const defaultChecked = computed(() => globalStore.createGroupModalInfo.selectedUid)
 const selected = ref([])

src/components/CreateGroupModal/SelectUser.vue

@@ -68,8 +68,9 @@ const onChecked = (checked: number[]) => {
           @click="onSend"
           :loading="loading || inviteLoading"
           :disabled="selectUser.length === 0"
-          >{{ isInvite ? '邀请' : '创建' }}</el-button
         >
+          {{ isInvite ? '邀请' : '创建' }}
+        </el-button>
       </span>
     </template>
   </ElDialog>

src/components/CreateGroupModal/index.vue

@@ -1,16 +1,16 @@
 import type { Directive } from 'vue'
+import { watchEffect } from 'vue'
 
 import { useUserStore } from '@/stores/user'
-const isSign = () => {
-  const userStore = useUserStore()
-  return userStore.isSign
-}
 
 const vLoginShow: Directive = {
   mounted(el) {
-    if (!isSign()) {
-      el?.remove()
-    }
+    const userStore = useUserStore()
+    watchEffect(() => {
+      if (!userStore.isSign) {
+        el?.remove()
+      }
+    })
   },
 }
 

src/directives/v-login-show.ts

@@ -11,6 +11,7 @@ import { useCachedStore } from '@/stores/cached'
 import { useUserStore } from '@/stores/user'
 import { useGlobalStore } from '@/stores/global'
 import { useGroupStore } from '@/stores/group'
+import { useContactStore } from '@/stores/contacts'
 import shakeTitle from '@/utils/shakeTitle'
 import notify from '@/utils/notification'
 import { MsgEnum } from '@/enums'
@@ -25,6 +26,7 @@ export const useChatStore = defineStore('chat', () => {
   const userStore = useUserStore()
   const globalStore = useGlobalStore()
   const groupStore = useGroupStore()
+  const contactStore = useContactStore()
   const sessionList = reactive<SessionItem[]>([]) // 会话列表
   const sessionOptions = reactive({ isLast: false, isLoading: false, cursor: '' })
 
@@ -225,6 +227,8 @@ export const useChatStore = defineStore('chat', () => {
       currentRoomType.value === RoomTypeEnum.Group && groupStore.getGroupUserList(true)
       // 初始化所有用户基本信息
       userStore.isSign && cachedStore.initAllUserBaseInfo()
+      // 联系人列表
+      contactStore.getContactList(true)
     }
   }
 

src/stores/chat.ts

@@ -26,11 +26,11 @@ export const useUserStore = defineStore('user', () => {
       .then((data) => {
         userInfo.value = { ...userInfo.value, ...data }
       })
-		.catch(()=> {
-			// 删除缓存
-			localStorage.removeItem("TOKEN")
-			localStorage.removeItem("USER_INFO")
-		})
+      .catch(() => {
+        // 删除缓存
+        localStorage.removeItem('TOKEN')
+        localStorage.removeItem('USER_INFO')
+      })
   }
 
   return { userInfo, isSign, getUserDetailAction }

src/stores/user.ts

@@ -93,7 +93,6 @@ a:active {
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 1;
-  line-clamp: 1;
 }
 
 .ellipsis-2 {
@@ -102,7 +101,6 @@ a:active {
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
-  line-clamp: 2;
 }
 
 .icon-spin {

src/styles/base.css

@@ -5,6 +5,7 @@ import { Plus } from '@element-plus/icons-vue'
 import { useGroupStore } from '@/stores/group'
 import { useGlobalStore } from '@/stores/global'
 import { useCachedStore } from '@/stores/cached'
+import { RoleEnum } from '@/enums'
 import UserItem from './UserItem/index.vue'
 
 const groupListLastElRef = ref<HTMLDivElement>()
@@ -42,7 +43,6 @@ const onAddGroupMember = () => {
   globalStore.createGroupModalInfo.show = true
   globalStore.createGroupModalInfo.isInvite = true
   // 禁用已经邀请的人
-  console.log('cachedStore.currentAtUsersList', cachedStore.currentAtUsersList)
   globalStore.createGroupModalInfo.selectedUid = cachedStore.currentAtUsersList.map(
     (item) => item.uid,
   )
@@ -64,6 +64,7 @@ const onAddGroupMember = () => {
           type="primary"
           :icon="Plus"
           circle
+          :disabled="statistic.role === RoleEnum.REMOVED"
           size="small"
           @click="onAddGroupMember"
         />

src/views/Home/Chat/components/UserList/index.vue

@@ -24,7 +24,7 @@
   border-bottom-width: 0;
 }
 
-:deep(.is-active) {
+:deep(.el-collapse-item.is-active) {
   display: flex;
 
   // flex: 1;
@@ -33,7 +33,7 @@
   overflow: hidden;
 }
 
-:deep(.is-active .el-collapse-item__content) {
+:deep(.el-collapse-item.is-active .el-collapse-item__content) {
   height: 100%;
   padding-bottom: 0;
 }