vue-chat-kit 0.3.8 → 0.3.9

package/src/composables/useGroupChat.js

@@ -0,0 +1,748 @@
+/**
+ * 群聊逻辑
+ */
+import { ref, computed } from 'vue'
+
+export function useGroupChat(core) {
+  const { api, myUsername, myAvatar, config, scrollToBottom, getSocket } = core
+
+  // ========== 状态 ==========
+  const activeTab = ref('friends')
+  const groupList = ref([])
+  const currentSelectGroup = ref(null)
+  const groupMsgList = ref([])
+  const groupMemberList = ref([])
+  const groupMembersMap = ref({})
+  const createGroupDialogVisible = ref(false)
+  const groupDetailVisible = ref(false)
+  const newGroupName = ref('')
+  const newGroupRemark = ref('')
+  const selectedMembersForCreate = ref([])
+  const inviteMemberDialogVisible = ref(false)
+  const selectedMembersForInvite = ref([])
+  // 新增状态
+  const groupInfoVisible = ref(false)
+  const editingGroupInfo = ref({
+    groupNickname: '',
+    remark: '',
+    notice: ''
+  })
+  const editingMemberNick = ref({
+    targetUsername: '',
+    memberNick: ''
+  })
+  const memberNickDialogVisible = ref(false)
+  const msgReadUserDialogVisible = ref(false)
+  const currentMsgReadList = ref({
+    readUserList: [],
+    unreadUserList: []
+  })
+  // 当前群聊详情信息
+  const currentGroupInfo = ref(null)
+  // 编辑状态
+  const editingFields = ref({
+    groupNickname: false,
+    remark: false,
+    notice: false
+  })
+  // 临时编辑值
+  const tempEditValues = ref({
+    groupNickname: '',
+    remark: '',
+    notice: ''
+  })
+
+  // ========== 计算属性 ==========
+
+  // 过滤后的群聊列表
+  const filteredGroupList = computed(() => {
+    let list = groupList.value
+    if (core.searchText.value) {
+      const keyword = core.searchText.value.toLowerCase()
+      list = list.filter(item => 
+        (item.groupName && item.groupName.toLowerCase().includes(keyword)) ||
+        (item.remark && item.remark.toLowerCase().includes(keyword))
+      )
+    }
+    return list.map(item => {
+      const members = groupMembersMap.value[item.groupId] || []
+      const memberAvatars = members.slice(0, 4).map(member => ({
+        username: member.username,
+        avatar: member.avatar 
+          ? `${config.api.baseUrl}${member.avatar}`
+          : `https://api.dicebear.com/7.x/avataaars/svg?seed=${member.username}`
+      }))
+      
+      // 获取最后一条消息，处理不同的字段名
+      let lastMsg = '暂无消息'
+      if (item.lastMsg) {
+        lastMsg = item.lastMsg
+      } else if (item.lastMessage) {
+        lastMsg = item.lastMessage
+      } else if (item.latestMessage) {
+        lastMsg = item.latestMessage
+      }
+      
+      // 获取未读数，处理不同的字段名
+      let unread = 0
+      if (item.unReadNum !== undefined && item.unReadNum !== null) {
+        unread = item.unReadNum
+      } else if (item.unreadCount !== undefined && item.unreadCount !== null) {
+        unread = item.unreadCount
+      } else if (item.unread !== undefined && item.unread !== null) {
+        unread = item.unread
+      }
+      
+      // 获取最后时间，处理不同的字段名
+      let lastTime = item.lastTime
+      if (!lastTime && item.latestTime) {
+        lastTime = item.latestTime
+      } else if (!lastTime && item.lastMsgTime) {
+        lastTime = item.lastMsgTime
+      }
+      
+      return {
+        id: item.groupId,
+        groupId: item.groupId,
+        name: item.groupName,
+        remark: item.remark,
+        owner: item.ownerUsername,
+        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.groupId}`,
+        memberAvatars: memberAvatars,
+        lastMsg: lastMsg,
+        lastTime: lastTime,
+        unread: unread,
+        memberCount: item.memberCount || 0,
+        // 保留原始字段用于编辑功能
+        notice: item.notice,
+        groupNickname: item.groupNickname
+      }
+    })
+  })
+
+  // 处理后的群聊消息
+  const currentGroupMessages = computed(() => {
+    return groupMsgList.value.map(item => {
+      const isFileMessage = item.type === 'file' || item.fileUrl || item.fileName
+      const fileName = item.fileName || item.msgContent
+      
+      // 查找发送消息的成员信息
+      const member = groupMemberList.value.find(m => m.username === item.sendUsername)
+      
+      // 优先显示群昵称，如果没有群昵称则显示用户名
+      const displayName = member?.memberNick || item.sendUsername
+      
+      const avatar = member?.avatar 
+        ? `${config.api.baseUrl}${member.avatar}`
+        : `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.sendUsername}`
+      
+      return {
+        text: item.msgContent,
+        isSelf: item.sendUsername === myUsername,
+        time: item.createTime,
+        sendUsername: item.sendUsername,
+        displayName: displayName, // 添加显示名称字段
+        avatar: avatar,
+        type: isFileMessage ? 'file' : 'text',
+        fileType: core.isImageFile(fileName) ? 'image' : core.getFileIconType(fileName),
+        fileUrl: item.fileUrl || '',
+        fileName: fileName,
+        fileSize: item.fileSize || 0
+      }
+    })
+  })
+
+  // ========== API 方法 ==========
+
+  // 获取群聊列表
+  const getGroupList = async () => {
+    try {
+      const res = await api.getMyGroups(myUsername)
+      groupList.value = res.data || []
+      
+      for (const group of groupList.value) {
+        try {
+          const membersRes = await api.getGroupMembers(group.groupId, myUsername)
+          groupMembersMap.value[group.groupId] = membersRes.data || []
+        } catch (err) {
+          console.error(`[VueChatKit] 获取群 ${group.groupId} 成员失败`, err)
+          groupMembersMap.value[group.groupId] = []
+        }
+      }
+    } catch (error) {
+      console.error('[VueChatKit] 获取群聊列表失败', error)
+    }
+  }
+
+  // 获取群聊历史消息
+  const getGroupHistory = async (groupId) => {
+    try {
+      const res = await api.getGroupHistory(groupId, myUsername)
+      groupMsgList.value = res.data || []
+      scrollToBottom()
+    } catch (error) {
+      console.error('[VueChatKit] 获取群聊历史失败', error)
+    }
+  }
+
+  // 获取群成员列表
+  const getGroupMembers = async (groupId) => {
+    try {
+      const res = await api.getGroupMembers(groupId, myUsername)
+      groupMemberList.value = res.data || []
+    } catch (error) {
+      console.error('[VueChatKit] 获取群成员失败', error)
+    }
+  }
+
+  // 选择群聊
+  const selectGroup = async (group) => {
+    // 1. 先标记该群全部消息为已读
+    await readAllGroupMsg(group.groupId)
+    
+    // 2. 刷新群列表，未读数清零
+    await getGroupList()
+    
+    // 3. 设置当前选中的群
+    currentSelectGroup.value = group
+    
+    // 4. 加载该群历史聊天消息
+    await getGroupHistory(group.groupId)
+    await getGroupMembers(group.groupId)
+    
+    scrollToBottom()
+  }
+
+  // 获取群未读消息数
+  const getGroupUnreadCount = async (groupId) => {
+    try {
+      const res = await api.getGroupUnreadCount(groupId, myUsername)
+      return res.data || 0
+    } catch (error) {
+      console.error('[VueChatKit] 获取群未读数失败', error)
+      return 0
+    }
+  }
+
+  // 获取单条消息的已读/未读成员
+  const getMsgReadUserList = async (groupId, groupMsgId) => {
+    try {
+      const res = await api.getMsgReadUserList(groupId, groupMsgId, myUsername)
+      currentMsgReadList.value = res.data || { readUserList: [], unreadUserList: [] }
+      msgReadUserDialogVisible.value = true
+    } catch (error) {
+      console.error('[VueChatKit] 获取消息已读成员失败', error)
+    }
+  }
+
+  // 获取群聊详情
+  const fetchGroupDetail = async (groupId) => {
+    try {
+      const res = await api.getGroupInfo(groupId, myUsername)
+      if (res.code === 200 && res.data) {
+        currentGroupInfo.value = res.data
+        // 初始化临时编辑值
+        tempEditValues.value = {
+          groupNickname: res.data.groupNickname || res.data.groupName || '',
+          remark: res.data.remark || '',
+          notice: res.data.notice || ''
+        }
+      }
+    } catch (error) {
+      console.error('[VueChatKit] 获取群详情失败', error)
+    }
+  }
+
+  // 修改单个群设置字段
+  const updateSingleGroupField = async (field) => {
+    if (!currentSelectGroup.value || !currentGroupInfo.value) return false
+    try {
+      const updateData = {
+        groupId: currentSelectGroup.value.groupId,
+        currentUser: myUsername,
+        groupNickname: field === 'groupNickname' ? tempEditValues.value.groupNickname : currentGroupInfo.value.groupNickname,
+        remark: field === 'remark' ? tempEditValues.value.remark : currentGroupInfo.value.remark,
+        notice: field === 'notice' ? tempEditValues.value.notice : currentGroupInfo.value.notice
+      }
+      
+      const res = await api._updateGroupInfo(
+        updateData.groupId,
+        updateData.currentUser,
+        updateData.groupNickname,
+        updateData.remark,
+        updateData.notice
+      )
+      
+      if (res.code === 200) {
+        // 刷新群详情
+        await fetchGroupDetail(currentSelectGroup.value.groupId)
+        // 刷新群列表
+        await getGroupList()
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 修改群信息失败', error)
+      return false
+    }
+  }
+
+  // 开始编辑字段
+  const startEditField = (field) => {
+    // 先确保有最新数据
+    if (!currentGroupInfo.value && currentSelectGroup.value) {
+      fetchGroupDetail(currentSelectGroup.value.groupId)
+    }
+    editingFields.value[field] = true
+  }
+
+  // 取消编辑字段
+  const cancelEditField = (field) => {
+    editingFields.value[field] = false
+    // 重置临时值
+    if (currentGroupInfo.value) {
+      tempEditValues.value[field] = currentGroupInfo.value[field] || ''
+    }
+  }
+
+  // 保存编辑字段
+  const saveEditField = async (field) => {
+    const success = await updateSingleGroupField(field)
+    if (success) {
+      editingFields.value[field] = false
+    }
+    return success
+  }
+
+  // 修改群基础信息（保留旧方法用于兼容性）
+  const updateGroupInfo = async () => {
+    if (!currentSelectGroup.value) return false
+    try {
+      const res = await api.updateGroupInfo(
+        currentSelectGroup.value.groupId,
+        myUsername,
+        editingGroupInfo.value.groupNickname,
+        editingGroupInfo.value.remark,
+        editingGroupInfo.value.notice
+      )
+      if (res.code === 200) {
+        groupInfoVisible.value = false
+        await getGroupList()
+        // 刷新群详情
+        if (currentSelectGroup.value) {
+          await fetchGroupDetail(currentSelectGroup.value.groupId)
+        }
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 修改群信息失败', error)
+      return false
+    }
+  }
+
+  // 修改群成员昵称
+  const updateMemberNick = async () => {
+    if (!currentSelectGroup.value) return false
+    try {
+      const res = await api.updateMemberNick(
+        currentSelectGroup.value.groupId,
+        myUsername,
+        editingMemberNick.value.targetUsername,
+        editingMemberNick.value.memberNick
+      )
+      if (res.code === 200) {
+        memberNickDialogVisible.value = false
+        await getGroupMembers(currentSelectGroup.value.groupId)
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 修改群成员昵称失败', error)
+      return false
+    }
+  }
+
+  // 解散群聊
+  const deleteGroup = async () => {
+    if (!currentSelectGroup.value) return false
+    try {
+      const res = await api.deleteGroup(currentSelectGroup.value.groupId, myUsername)
+      if (res.code === 200) {
+        currentSelectGroup.value = null
+        groupMsgList.value = []
+        groupDetailVisible.value = false
+        await getGroupList()
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 解散群聊失败', error)
+      return false
+    }
+  }
+
+  // 移除群成员
+  const removeGroupMember = async (targetUsername) => {
+    if (!currentSelectGroup.value) return false
+    try {
+      const res = await api.removeGroupMember(
+        currentSelectGroup.value.groupId,
+        myUsername,
+        targetUsername
+      )
+      if (res.code === 200) {
+        await getGroupMembers(currentSelectGroup.value.groupId)
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 移除成员失败', error)
+      return false
+    }
+  }
+
+  // 转让群主
+  const transferGroupOwner = async (newOwnerUsername) => {
+    if (!currentSelectGroup.value) return false
+    try {
+      const res = await api.transferGroupOwner(
+        currentSelectGroup.value.groupId,
+        myUsername,
+        newOwnerUsername
+      )
+      if (res.code === 200) {
+        await getGroupMembers(currentSelectGroup.value.groupId)
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 转让群主失败', error)
+      return false
+    }
+  }
+
+  // 标记单条消息为已读
+  const readSingleGroupMsg = async (groupMsgId) => {
+    if (!currentSelectGroup.value) return false
+    try {
+      const res = await api.readSingleGroupMsg(
+        currentSelectGroup.value.groupId,
+        myUsername,
+        groupMsgId
+      )
+      return res.code === 200
+    } catch (error) {
+      console.error('[VueChatKit] 标记消息已读失败', error)
+      return false
+    }
+  }
+
+  // 一键标记全部消息已读
+  const readAllGroupMsg = async (groupId) => {
+    const targetGroupId = groupId || currentSelectGroup.value?.groupId
+    if (!targetGroupId) return false
+    try {
+      const res = await api.readAllGroupMsg(targetGroupId, myUsername)
+      return res.code === 200
+    } catch (error) {
+      console.error('[VueChatKit] 标记全部已读失败', error)
+      return false
+    }
+  }
+
+  // 打开编辑群信息对话框
+  const openEditGroupInfo = () => {
+    if (!currentSelectGroup.value) return
+    editingGroupInfo.value = {
+      groupNickname: currentSelectGroup.value.name || '',
+      remark: currentSelectGroup.value.remark || '',
+      notice: currentSelectGroup.value.notice || ''
+    }
+    groupInfoVisible.value = true
+  }
+
+  // 打开编辑成员昵称对话框
+  const openEditMemberNick = (member) => {
+    editingMemberNick.value = {
+      targetUsername: member.username,
+      memberNick: member.memberNick || ''
+    }
+    memberNickDialogVisible.value = true
+  }
+
+  // 创建群聊
+  const createGroup = async () => {
+    if (!newGroupName.value.trim()) {
+      console.warn('[VueChatKit] 请输入群名称')
+      return false
+    }
+    try {
+      const res = await api.createGroup({
+        groupName: newGroupName.value.trim(),
+        remark: newGroupRemark.value.trim(),
+        ownerUsername: myUsername
+      })
+      if (res.code === 200 && res.data) {
+        if (selectedMembersForCreate.value.length > 0) {
+          const targetUserList = selectedMembersForCreate.value.map(m => m.id)
+          await api.inviteGroupMembers(
+            res.data.groupId || res.data,
+            myUsername,
+            targetUserList
+          )
+        }
+        newGroupName.value = ''
+        newGroupRemark.value = ''
+        selectedMembersForCreate.value = []
+        createGroupDialogVisible.value = false
+        await getGroupList()
+        return true
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 创建群聊失败', error)
+      return false
+    }
+  }
+
+  // 邀请成员到群聊
+  const inviteGroupMember = async () => {
+    if (!currentSelectGroup.value || selectedMembersForInvite.value.length === 0) {
+      return false
+    }
+    try {
+      const targetUserList = selectedMembersForInvite.value.map(m => m.id)
+      await api.inviteGroupMembers(
+        currentSelectGroup.value.groupId,
+        myUsername,
+        targetUserList
+      )
+      selectedMembersForInvite.value = []
+      inviteMemberDialogVisible.value = false
+      await getGroupMembers(currentSelectGroup.value.groupId)
+      return true
+    } catch (error) {
+      console.error('[VueChatKit] 邀请成员失败', error)
+      return false
+    }
+  }
+
+  // 退出群聊
+  const quitGroup = async () => {
+    if (!currentSelectGroup.value) return false
+    try {
+      await api.quitGroup(currentSelectGroup.value.groupId, myUsername)
+      currentSelectGroup.value = null
+      groupMsgList.value = []
+      groupDetailVisible.value = false
+      await getGroupList()
+      return true
+    } catch (error) {
+      console.error('[VueChatKit] 退出群聊失败', error)
+      return false
+    }
+  }
+
+  // 发送群聊文本消息
+  const sendGroupMessage = () => {
+    const socket = getSocket()
+    if (!core.inputText.value.trim() || !currentSelectGroup.value || !socket) return
+    const success = socket.send(currentSelectGroup.value.groupId, core.inputText.value.trim(), 'text', '', '', 0, true)
+    if (success) {
+      const tempMsg = {
+        msgContent: core.inputText.value.trim(),
+        sendUsername: myUsername,
+        toGroupId: currentSelectGroup.value.groupId,
+        createTime: new Date(),
+        isRead: 0,
+        type: 'text'
+      }
+      groupMsgList.value.push(tempMsg)
+      core.inputText.value = ''
+      scrollToBottom()
+      setTimeout(() => {
+        getGroupHistory(currentSelectGroup.value.groupId)
+        getGroupList()
+      }, 300)
+    }
+  }
+
+  // 发送群聊文件
+  const sendGroupFile = async (file) => {
+    const socket = getSocket()
+    if (!currentSelectGroup.value || !socket) return false
+    
+    try {
+      const uploadRes = await api.uploadFile(file)
+      
+      if (uploadRes.code === 200 && uploadRes.data) {
+        const { fileUrl, fileName } = uploadRes.data
+        
+        const success = socket.send(
+          currentSelectGroup.value.groupId, 
+          fileName, 
+          'file', 
+          fileUrl, 
+          fileName,
+          file.size,
+          true
+        )
+        
+        if (success) {
+          const tempMsg = {
+            msgContent: fileName,
+            sendUsername: myUsername,
+            toGroupId: currentSelectGroup.value.groupId,
+            createTime: new Date(),
+            isRead: 0,
+            type: 'file',
+            fileUrl: fileUrl,
+            fileName: fileName,
+            fileSize: file.size
+          }
+          groupMsgList.value.push(tempMsg)
+          scrollToBottom()
+          return true
+        }
+      }
+      return false
+    } catch (error) {
+      console.error('[VueChatKit] 发送群聊文件失败', error)
+      return false
+    }
+  }
+
+  // 批量发送群聊文件和文本
+  const sendGroupFilesAndText = async (files, text) => {
+    const socket = getSocket()
+    if (!currentSelectGroup.value || !socket) return
+    
+    if (text && text.trim()) {
+      const textSuccess = socket.send(currentSelectGroup.value.groupId, text.trim(), 'text', '', '', 0, true)
+      if (textSuccess) {
+        const tempMsg = {
+          msgContent: text.trim(),
+          sendUsername: myUsername,
+          toGroupId: currentSelectGroup.value.groupId,
+          createTime: new Date(),
+          isRead: 0,
+          type: 'text'
+        }
+        groupMsgList.value.push(tempMsg)
+      }
+    }
+    
+    for (const fileObj of files) {
+      const file = fileObj.file || fileObj
+      await sendGroupFile(file)
+    }
+    
+    setTimeout(() => {
+      getGroupHistory(currentSelectGroup.value.groupId)
+      getGroupList()
+    }, 300)
+  }
+
+  // 处理群聊 WebSocket 消息
+  const handleGroupWsMessage = (msgInfo) => {
+    if (currentSelectGroup.value && currentSelectGroup.value.groupId === msgInfo.toGroupId) {
+      try {
+        let tempMsg = {
+          msgContent: msgInfo.content,
+          sendUsername: msgInfo.from || '未知用户',
+          toGroupId: msgInfo.toGroupId,
+          createTime: new Date(),
+          isRead: 0,
+          type: msgInfo.type || 'text',
+          fileUrl: msgInfo.fileUrl || '',
+          fileName: msgInfo.fileName || '',
+          fileSize: msgInfo.fileSize || 0
+        }
+        groupMsgList.value.push(tempMsg)
+        scrollToBottom()
+      } catch (e) {
+        console.error('[VueChatKit] 添加临时群聊消息失败', e)
+      }
+      getGroupHistory(msgInfo.toGroupId)
+    }
+    getGroupList()
+  }
+
+  // 切换 Tab
+  const switchTab = (tab) => {
+    activeTab.value = tab
+    if (tab === 'groups') {
+      getGroupList()
+    }
+  }
+
+  // 重置群聊状态
+  const resetGroupChat = () => {
+    currentSelectGroup.value = null
+    groupMsgList.value = []
+  }
+
+  return {
+    // 状态
+    activeTab,
+    groupList,
+    currentSelectGroup,
+    groupMsgList,
+    groupMemberList,
+    groupMembersMap,
+    createGroupDialogVisible,
+    groupDetailVisible,
+    newGroupName,
+    newGroupRemark,
+    selectedMembersForCreate,
+    inviteMemberDialogVisible,
+    selectedMembersForInvite,
+    groupInfoVisible,
+    editingGroupInfo,
+    editingMemberNick,
+    memberNickDialogVisible,
+    msgReadUserDialogVisible,
+    currentMsgReadList,
+    currentGroupInfo,
+    editingFields,
+    tempEditValues,
+    
+    // 计算属性
+    filteredGroupList,
+    currentGroupMessages,
+    
+    // 方法
+    getGroupList,
+    getGroupHistory,
+    getGroupMembers,
+    selectGroup,
+    createGroup,
+    inviteGroupMember,
+    quitGroup,
+    sendGroupMessage,
+    sendGroupFile,
+    sendGroupFilesAndText,
+    handleGroupWsMessage,
+    switchTab,
+    resetGroupChat,
+    getGroupUnreadCount,
+    getMsgReadUserList,
+    updateGroupInfo,
+    updateMemberNick,
+    deleteGroup,
+    removeGroupMember,
+    transferGroupOwner,
+    readSingleGroupMsg,
+    readAllGroupMsg,
+    openEditGroupInfo,
+    openEditMemberNick,
+    fetchGroupDetail,
+    updateSingleGroupField,
+    startEditField,
+    cancelEditField,
+    saveEditField
+  }
+}
+
+export default useGroupChat