vue-chat-kit 0.3.7 → 0.3.9

package/src/composables/useChat.js

@@ -1,613 +1,157 @@
-/**
- * 聊天核心状态管理
- */
-import { ref, computed, nextTick, watch } from 'vue'
-import dayjs from 'dayjs'
-import { ChatWebSocket } from '../core/websocket.js'
-import { ChatApi } from '../core/api.js'
-
-export function useChat(config, emit) {
-  // ========== 配置 ==========
-  const api = new ChatApi(config)
-  let socket = null
-
-  // ========== 状态 ==========
-  const myUsername = config.user.username
-  const myAvatar = ref(config.user.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${myUsername}`)
-  
-  // 用户信息
-  const userInfo = ref({
-    username: myUsername,
-    nickname: config.user.nickname || '',
-    email: config.user.email || '',
-    phone: config.user.phone || '',
-    bio: config.user.bio || ''
-  })
-  const loadingUserInfo = ref(false)
-
-  // 好友和聊天列表
-  const friendList = ref([])
-  const chatList = ref([])
-  const chatMsgList = ref([])
-  const currentSelectName = ref('')
-  
-  // UI 状态
-  const searchText = ref('')
-  const inputText = ref('')
-  const messagesContainer = ref(null)
-  
-  // 添加好友相关
-  const addFriendDialogVisible = ref(false)
-  const addFriendSearchText = ref('')
-  const availableUsers = ref([])
-  const loadingAvailableUsers = ref(false)
-  
-  // 好友申请
-  const friendApplyList = ref([])
-  const loadingFriendApply = ref(false)
-
-  // ========== 计算属性 ==========
-  
-  // 过滤后的聊天列表
-  const filteredUsers = computed(() => {
-    let list = chatList.value
-    if (searchText.value) {
-      const keyword = searchText.value.toLowerCase()
-      list = list.filter(item => 
-        item.username?.toLowerCase().includes(keyword)
-      )
-    }
-    return list.map(item => ({
-      id: item.username,
-      name: item.username,
-      avatar: item.avatar || myAvatar.value,
-      online: item.online,
-      lastMsg: item.lastMsg || '暂无消息',
-      lastTime: item.lastTime,
-      unread: item.unReadNum || 0
-    }))
-  })
-
-  // 过滤后的好友列表
-  const filteredFriendList = computed(() => {
-    let list = friendList.value
-    if (searchText.value) {
-      const keyword = searchText.value.toLowerCase()
-      list = list.filter(item => 
-        item.username?.toLowerCase().includes(keyword)
-      )
-    }
-    return list.map(item => ({
-      id: item.username,
-      name: item.username,
-      avatar: item.avatar || myAvatar.value,
-      online: item.online,
-      isChatting: item.isChatting
-    }))
-  })
-
-  // 过滤后的可添加用户
-  const filteredAvailableUsers = computed(() => {
-    return availableUsers.value
-  })
-
-  // 当前选中的用户
-  const currentUser = computed(() => {
-    return filteredUsers.value.find(item => item.id === currentSelectName.value) || null
-  })
-
-  // 处理后的消息列表
-  const currentMessages = computed(() => {
-    return chatMsgList.value.map(item => {
-      const isFileMessage = item.type === 'file' || item.fileUrl || item.fileName
-      const fileName = item.fileName || item.msgContent
-      
-      return {
-        text: item.msgContent,
-        isSelf: item.sendUsername === myUsername,
-        time: item.createTime,
-        sendUsername: item.sendUsername,
-        type: isFileMessage ? 'file' : 'text',
-        fileType: isImageFile(fileName) ? 'image' : getFileIconType(fileName),
-        fileUrl: item.fileUrl || '',
-        fileName: fileName,
-        fileSize: item.fileSize || 0
-      }
-    })
-  })
-
-  // ========== 工具函数 ==========
-  
-  const formatTime = (time) => dayjs(time).format('HH:mm')
-
-  const formatLastTime = (time) => {
-    if (!time) return ''
-    const now = dayjs()
-    const msgTime = dayjs(time)
-    if (now.isSame(msgTime, 'day')) return msgTime.format('HH:mm')
-    if (now.diff(msgTime, 'day') === 1) return '昨天'
-    if (now.diff(msgTime, 'day') < 7) {
-      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-      return weekDays[msgTime.day()]
-    }
-    return msgTime.format('MM/DD')
-  }
-
-  const isImageFile = (fileName) => {
-    if (!fileName) return false
-    const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
-    const ext = fileName.split('.').pop().toLowerCase()
-    return imageExts.includes(ext)
-  }
-
-  const getFileIconType = (fileName) => {
-    if (!fileName) return 'default'
-    const ext = fileName.split('.').pop().toLowerCase()
-    if (['xls', 'xlsx'].includes(ext)) return 'excel'
-    if (['pdf'].includes(ext)) return 'pdf'
-    if (['doc', 'docx'].includes(ext)) return 'docx'
-    return 'default'
-  }
-
-  const scrollToBottom = () => {
-    nextTick(() => {
-      if (messagesContainer.value) {
-        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-      }
-    })
-  }
-
-  // ========== API 方法 ==========
-  
-  // 获取好友列表
-  const getFriendList = async () => {
-    try {
-      const res = await api.getFriends(myUsername)
-      const allFriends = res.data || []
-      friendList.value = allFriends
-      chatList.value = allFriends.filter(item => item.isChatting === 1)
-      
-      // 获取未读数
-      for (const friend of chatList.value) {
-        try {
-          const historyRes = await api.getHistory(myUsername, friend.username)
-          const messages = historyRes.data || []
-          friend.unReadNum = messages.filter(msg => 
-            msg.isRead === 0 && msg.sendUsername === friend.username
-          ).length
-        } catch {
-          friend.unReadNum = 0
-        }
-      }
-    } catch (error) {
-      console.error('[VueChatKit] 获取好友列表失败', error)
-    }
-  }
-
-  // 获取聊天历史
-  const getChatHistory = async (targetName) => {
-    try {
-      const res = await api.getHistory(myUsername, targetName)
-      chatMsgList.value = res.data || []
-      scrollToBottom()
-    } catch (error) {
-      console.error('[VueChatKit] 获取聊天历史失败', error)
-    }
-  }
-
-  // 标记已读
-  const markAsRead = async (friendUser) => {
-    try {
-      await api.setRead(myUsername, friendUser)
-      getFriendList()
-    } catch (error) {
-      console.error('[VueChatKit] 标记已读失败', error)
-    }
-  }
-
-  // 选择聊天用户
-  const selectUser = async (user) => {
-    currentSelectName.value = user.id
-    await getChatHistory(user.id)
-    await markAsRead(user.id)
-    scrollToBottom()
-  }
-
-  // 设置好友聊天状态
-  const setFriendToChatStatus = async (friendUser, status = 1) => {
-    try {
-      await api.setChatStatus(myUsername, friendUser, status)
-      await getFriendList()
-      return true
-    } catch (error) {
-      console.error('[VueChatKit] 设置聊天状态失败', error)
-      return false
-    }
-  }
-
-  // 发送文本消息
-  const sendMessage = () => {
-    if (!inputText.value.trim() || !currentSelectName.value || !socket) return
-
-    const success = socket.send(currentSelectName.value, inputText.value.trim(), 'text')
-    if (success) {
-      const tempMsg = {
-        msgContent: inputText.value.trim(),
-        sendUsername: myUsername,
-        receiveUsername: currentSelectName.value,
-        createTime: new Date(),
-        isRead: 0,
-        type: 'text'
-      }
-      chatMsgList.value.push(tempMsg)
-      inputText.value = ''
-      scrollToBottom()
-      setTimeout(() => {
-        getChatHistory(currentSelectName.value)
-        getFriendList()
-      }, 300)
-    }
-  }
-
-  // 发送文件
-  const sendFile = async (file) => {
-    if (!currentSelectName.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(
-          currentSelectName.value, 
-          fileName, 
-          'file', 
-          fileUrl, 
-          fileName,
-          file.size
-        )
-        
-        if (success) {
-          const tempMsg = {
-            msgContent: fileName,
-            sendUsername: myUsername,
-            receiveUsername: currentSelectName.value,
-            createTime: new Date(),
-            isRead: 0,
-            type: 'file',
-            fileUrl: fileUrl,
-            fileName: fileName,
-            fileSize: file.size
-          }
-          chatMsgList.value.push(tempMsg)
-          scrollToBottom()
-          return true
-        }
-      }
-      return false
-    } catch (error) {
-      console.error('[VueChatKit] 发送文件失败', error)
-      return false
-    }
-  }
-
-  // 批量发送文件和文本
-  const sendFilesAndText = async (files, text) => {
-    if (!currentSelectName.value || !socket) return
-    
-    if (text && text.trim()) {
-      const textSuccess = socket.send(currentSelectName.value, text.trim(), 'text')
-      if (textSuccess) {
-        const tempMsg = {
-          msgContent: text.trim(),
-          sendUsername: myUsername,
-          receiveUsername: currentSelectName.value,
-          createTime: new Date(),
-          isRead: 0,
-          type: 'text'
-        }
-        chatMsgList.value.push(tempMsg)
-      }
-    }
-    
-    for (const fileObj of files) {
-      const file = fileObj.file || fileObj
-      await sendFile(file)
-    }
-    
-    setTimeout(() => {
-      getChatHistory(currentSelectName.value)
-      getFriendList()
-    }, 300)
-  }
-
-  // ========== WebSocket 相关 ==========
-  
-  // 解析 WebSocket 消息
-  const parseWsMessage = (data) => {
-    try {
-      try {
-        const jsonData = JSON.parse(data)
-        if (jsonData.to || jsonData.msg) {
-          return {
-            to: jsonData.to,
-            content: jsonData.msg,
-            type: jsonData.type || 'text',
-            fileUrl: jsonData.fileUrl || '',
-            fileName: jsonData.fileName || '',
-            fileSize: jsonData.fileSize || 0
-          }
-        }
-      } catch {
-        // 旧格式
-      }
-      
-      const match = data.match(/^\[(.+?)\]：(.+)$/)
-      if (match) {
-        return {
-          username: match[1],
-          content: match[2],
-          type: 'text'
-        }
-      }
-    } catch (e) {
-      console.error('[VueChatKit] 解析消息失败', e)
-    }
-    return null
-  }
-
-  // 处理 WebSocket 消息
-  const handleWsMessage = (data) => {
-    if (data.includes('【状态变更】')) {
-      const reg = /【状态变更】(.+?) 已(上线|下线)/
-      const res = data.match(reg)
-      if (res) {
-        const targetName = res[1]
-        const isOnline = res[2] === '上线'
-        const targetFriend = friendList.value.find(item => item.username === targetName)
-        if (targetFriend) {
-          targetFriend.online = isOnline
-        }
-      }
-      return
-    }
-
-    const msgInfo = parseWsMessage(data)
-    if (msgInfo) {
-      const message = {
-        content: msgInfo.content,
-        username: msgInfo.username || currentSelectName.value,
-        type: msgInfo.type || 'text',
-        fileUrl: msgInfo.fileUrl || '',
-        fileName: msgInfo.fileName || '',
-        fileSize: msgInfo.fileSize || 0,
-        timestamp: new Date()
-      }
-      
-      if (currentSelectName.value) {
-        try {
-          let tempMsg = {
-            msgContent: msgInfo.content,
-            sendUsername: message.username,
-            receiveUsername: myUsername,
-            createTime: new Date(),
-            isRead: 0,
-            type: msgInfo.type || 'text',
-            fileUrl: msgInfo.fileUrl || '',
-            fileName: msgInfo.fileName || '',
-            fileSize: msgInfo.fileSize || 0
-          }
-          chatMsgList.value.push(tempMsg)
-          scrollToBottom()
-        } catch (e) {
-          console.error('[VueChatKit] 添加临时消息失败', e)
-        }
-        getChatHistory(currentSelectName.value)
-      }
-      getFriendList()
-      
-      // emit 消息事件
-      if (emit && typeof emit === 'function') {
-        emit(message)
-      }
-    }
-  }
-
-  // 初始化 WebSocket
-  const initWebSocket = () => {
-    const wsUrl = `${config.api.websocketUrl}?userId=${myUsername}`
-    socket = new ChatWebSocket(myUsername, {
-      wsUrl,
-      maxReconnectAttempts: config.websocket.maxReconnectAttempts,
-      reconnectDelay: config.websocket.reconnectDelay
-    })
-    socket.on('message', handleWsMessage)
-    socket.connect()
-  }
-
-  // 关闭 WebSocket
-  const closeWebSocket = () => {
-    if (socket) {
-      socket.close()
-      socket = null
-    }
-  }
-
-  // ========== 添加好友相关 ==========
-  
-  const openAddFriendDialog = async () => {
-    addFriendDialogVisible.value = true
-    addFriendSearchText.value = ''
-    availableUsers.value = [] // 清空列表，打开时不搜索
-  }
-
-  const loadAvailableUsers = async (keyword = '') => {
-    loadingAvailableUsers.value = true
-    try {
-      let res
-      if (keyword) {
-        // 使用模糊查询接口搜索用户
-        res = await api.searchUser(keyword)
-      } else {
-        // 使用获取可添加好友接口
-        res = await api.getAvailableUsers(myUsername)
-      }
-      availableUsers.value = res?.data || []
-    } catch (error) {
-      console.error('[VueChatKit] 获取可用用户失败', error)
-    } finally {
-      loadingAvailableUsers.value = false
-    }
-  }
-
-  const addFriend = async (user) => {
-    try {
-      await api.addFriend(myUsername, user.username)
-      await getFriendList()
-      addFriendDialogVisible.value = false
-    } catch (error) {
-      console.error('[VueChatKit] 添加好友失败', error)
-    }
-  }
-
-  const loadFriendApplyList = async () => {
-    loadingFriendApply.value = true
-    try {
-      const res = await api.getApplyList(myUsername)
-      friendApplyList.value = res.data || []
-    } catch (error) {
-      console.error('[VueChatKit] 获取好友申请列表失败', error)
-    } finally {
-      loadingFriendApply.value = false
-    }
-  }
-
-  const agreeFriend = async (applyUser) => {
-    try {
-      await api.agreeFriend(applyUser, myUsername)
-      await loadFriendApplyList()
-      await getFriendList()
-    } catch (error) {
-      console.error('[VueChatKit] 同意好友申请失败', error)
-    }
-  }
-
-  // ========== 用户信息相关 ==========
-  
-  const initUserAvatar = async () => {
-    try {
-      const res = await api.getUserAvatar(myUsername)
-      if (res.code === 200 && res.data) {
-        myAvatar.value = res.data
-      }
-    } catch (error) {
-      console.warn('[VueChatKit] 加载头像失败', error)
-    }
-  }
-
-  const updateMyAvatar = (avatarUrl) => {
-    myAvatar.value = avatarUrl
-  }
-
-  const getUserInfo = async () => {
-    loadingUserInfo.value = true
-    try {
-      const res = await api.getUserInfo(myUsername)
-      if (res.code === 200 && res.data) {
-        userInfo.value = {
-          ...userInfo.value,
-          ...res.data
-        }
-      }
-    } catch (error) {
-      console.error('[VueChatKit] 获取用户信息失败', error)
-    } finally {
-      loadingUserInfo.value = false
-    }
-  }
-
-  const updateUserInfo = async (data) => {
-    try {
-      const res = await api.updateUserInfo(myUsername, data)
-      if (res.code === 200) {
-        userInfo.value = {
-          ...userInfo.value,
-          ...data
-        }
-        return true
-      }
-      return false
-    } catch (error) {
-      console.error('[VueChatKit] 更新用户信息失败', error)
-      return false
-    }
-  }
-
-  // 重置状态
-  const reset = () => {
-    currentSelectName.value = ''
-    chatMsgList.value = []
-    inputText.value = ''
-    searchText.value = ''
-  }
-
-  // 初始化头像
-  initUserAvatar()
-
-  // 监听添加好友搜索关键词变化，实时调用模糊查询
-  watch(addFriendSearchText, async (newKeyword) => {
-    await loadAvailableUsers(newKeyword)
-  })
-
-  return {
-    // 状态
-    myUsername,
-    myAvatar,
-    userInfo,
-    loadingUserInfo,
-    friendList,
-    chatList,
-    filteredFriendList,
-    chatMsgList,
-    currentSelectName,
-    searchText,
-    inputText,
-    messagesContainer,
-    filteredUsers,
-    filteredAvailableUsers,
-    currentUser,
-    currentMessages,
-    addFriendDialogVisible,
-    addFriendSearchText,
-    availableUsers,
-    loadingAvailableUsers,
-    friendApplyList,
-    loadingFriendApply,
-    
-    // 方法
-    formatTime,
-    formatLastTime,
-    scrollToBottom,
-    getFriendList,
-    getChatHistory,
-    setFriendToChatStatus,
-    selectUser,
-    sendMessage,
-    sendFile,
-    sendFilesAndText,
-    initWebSocket,
-    closeWebSocket,
-    reset,
-    openAddFriendDialog,
-    loadAvailableUsers,
-    addFriend,
-    loadFriendApplyList,
-    agreeFriend,
-    updateMyAvatar,
-    getUserInfo,
-    updateUserInfo
-  }
-}
-
-export default useChat
+/**
+ * 聊天主入口 - 整合私聊和群聊
+ */
+import { computed } from 'vue'
+import useChatCore from './useChatCore'
+import useFriendChat from './useFriendChat'
+import useGroupChat from './useGroupChat'
+
+export function useChat(config, emit) {
+  // ========== 初始化核心模块 ==========
+  const core = useChatCore(config, emit)
+  const friendChat = useFriendChat(core)
+  const groupChat = useGroupChat(core)
+
+  // ========== 共享计算属性 ==========
+
+  // 当前选择的聊天目标
+  const currentChatTarget = computed(() => {
+    if (groupChat.currentSelectGroup.value) {
+      return { type: 'group', data: groupChat.currentSelectGroup.value }
+    }
+    if (friendChat.currentSelectName.value && friendChat.currentUser.value) {
+      return { type: 'friend', data: friendChat.currentUser.value }
+    }
+    return null
+  })
+
+  // 当前显示的消息列表
+  const currentAllMessages = computed(() => {
+    if (groupChat.currentSelectGroup.value) {
+      return groupChat.currentGroupMessages.value
+    }
+    return friendChat.currentMessages.value
+  })
+
+  // ========== WebSocket 消息处理 ==========
+  
+  const handleWsMessage = (data) => {
+    if (data.includes('【状态变更】')) {
+      const reg = /【状态变更】(.+?) 已(上线|下线)/
+      const res = data.match(reg)
+      if (res) {
+        const targetName = res[1]
+        const isOnline = res[2] === '上线'
+        friendChat.handleFriendStatusChange(targetName, isOnline)
+      }
+      return
+    }
+
+    const msgInfo = core.parseWsMessage(data)
+    if (msgInfo) {
+      if (msgInfo.toGroupId) {
+        groupChat.handleGroupWsMessage(msgInfo)
+      } else {
+        friendChat.handleFriendWsMessage(msgInfo)
+      }
+      
+      if (emit && typeof emit === 'function') {
+        emit({
+          ...msgInfo,
+          isGroup: !!msgInfo.toGroupId
+        })
+      }
+    }
+  }
+
+  // 初始化 WebSocket
+  const initWebSocket = () => {
+    core.initWebSocket(handleWsMessage)
+  }
+
+  // ========== 选择聊天对象 ==========
+
+  const selectUser = async (user) => {
+    groupChat.resetGroupChat()
+    await friendChat.selectUser(user)
+  }
+
+  const selectGroup = async (group) => {
+    friendChat.resetFriendChat()
+    await groupChat.selectGroup(group)
+  }
+
+  // ========== 切换 Tab ==========
+
+  const switchTab = (tab) => {
+    groupChat.switchTab(tab)
+    if (tab === 'apply') {
+      friendChat.loadFriendApplyList()
+    }
+  }
+
+  // ========== 发送消息 ==========
+
+  const sendMessage = () => {
+    if (groupChat.currentSelectGroup.value) {
+      groupChat.sendGroupMessage()
+    } else if (friendChat.currentSelectName.value) {
+      friendChat.sendMessage()
+    }
+  }
+
+  const sendFile = async (file) => {
+    if (groupChat.currentSelectGroup.value) {
+      return await groupChat.sendGroupFile(file)
+    } else if (friendChat.currentSelectName.value) {
+      return await friendChat.sendFile(file)
+    }
+    return false
+  }
+
+  const sendFilesAndText = async (files, text) => {
+    if (groupChat.currentSelectGroup.value) {
+      await groupChat.sendGroupFilesAndText(files, text)
+    } else if (friendChat.currentSelectName.value) {
+      await friendChat.sendFilesAndText(files, text)
+    }
+  }
+
+  // ========== 重置状态 ==========
+
+  const reset = () => {
+    friendChat.resetFriendChat()
+    groupChat.resetGroupChat()
+    core.inputText.value = ''
+    core.searchText.value = ''
+  }
+
+  // ========== 整合返回 ==========
+
+  return {
+    // ========== 核心模块 ==========
+    ...core,
+    initWebSocket,
+    
+    // ========== 私聊模块 ==========
+    ...friendChat,
+    selectUser,
+    
+    // ========== 群聊模块 ==========
+    ...groupChat,
+    selectGroup,
+    
+    // ========== 共享计算属性 ==========
+    currentChatTarget,
+    currentAllMessages,
+    
+    // ========== 整合方法 ==========
+    switchTab,
+    sendMessage,
+    sendFile,
+    sendFilesAndText,
+    reset
+  }
+}
+
+export default useChat