vue-chat-kit 0.3.8 → 0.3.10

package/src/composables/useChatCore.js

@@ -0,0 +1,207 @@
+/**
+ * 聊天核心共享逻辑
+ */
+import { ref, computed, nextTick } from 'vue'
+import dayjs from 'dayjs'
+import { ChatWebSocket } from '../core/websocket.js'
+import { ChatApi } from '../core/api.js'
+
+export function useChatCore(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)
+
+  // UI 共享状态
+  const searchText = ref('')
+  const inputText = ref('')
+  const messagesContainer = ref(null)
+
+  // ========== 共享计算属性 ==========
+  
+  // ========== 共享工具函数 ==========
+  
+  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
+      }
+    })
+  }
+
+  // ========== WebSocket 共享逻辑 ==========
+  
+  // 解析 WebSocket 消息
+  const parseWsMessage = (data) => {
+    try {
+      try {
+        const jsonData = JSON.parse(data)
+        if (jsonData.to || jsonData.toGroupId || jsonData.msg) {
+          return {
+            to: jsonData.to,
+            toGroupId: jsonData.toGroupId,
+            from: jsonData.from,
+            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 initWebSocket = (messageHandler) => {
+    const wsUrl = `${config.api.websocketUrl}?userId=${myUsername}`
+    socket = new ChatWebSocket(myUsername, {
+      wsUrl,
+      maxReconnectAttempts: config.websocket.maxReconnectAttempts,
+      reconnectDelay: config.websocket.reconnectDelay
+    })
+    socket.on('message', messageHandler)
+    socket.connect()
+  }
+
+  // 关闭 WebSocket
+  const closeWebSocket = () => {
+    if (socket) {
+      socket.close()
+      socket = null
+    }
+  }
+
+  // 获取 socket 实例
+  const getSocket = () => socket
+
+  // ========== 用户信息相关 ==========
+  
+  const initUserAvatar = async () => {
+    try {
+      const res = await api.getUserAvatar(myUsername)
+      if (res.code === 200 && res.data) {
+        myAvatar.value = `${config.api.baseUrl}${res.data}`
+      }
+    } catch (error) {
+      console.warn('[VueChatKit] 加载头像失败', error)
+    }
+  }
+
+  const updateMyAvatar = (avatarUrl) => {
+    myAvatar.value = avatarUrl
+  }
+
+  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
+    }
+  }
+
+  // 初始化
+  initUserAvatar()
+
+  return {
+    // 配置
+    api,
+    config,
+    
+    // 状态
+    myUsername,
+    myAvatar,
+    userInfo,
+    loadingUserInfo,
+    searchText,
+    inputText,
+    messagesContainer,
+    
+    // 工具函数
+    formatTime,
+    formatLastTime,
+    isImageFile,
+    getFileIconType,
+    scrollToBottom,
+    
+    // WebSocket
+    parseWsMessage,
+    initWebSocket,
+    closeWebSocket,
+    getSocket,
+    
+    // 用户信息
+    initUserAvatar,
+    updateMyAvatar,
+    updateUserInfo
+  }
+}
+
+export default useChatCore

package/src/composables/useFriendChat.js

@@ -0,0 +1,423 @@
+/**
+ * 私聊逻辑
+ */
+import { ref, computed, watch } from 'vue'
+
+export function useFriendChat(core) {
+  const { api, myUsername, myAvatar, config, scrollToBottom, getSocket } = core
+
+  // ========== 状态 ==========
+  const friendList = ref([])
+  const chatList = ref([])
+  const chatMsgList = ref([])
+  const currentSelectName = ref('')
+  
+  // 添加好友相关
+  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 (core.searchText.value) {
+      const keyword = core.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 ? `${config.api.baseUrl}${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 (core.searchText.value) {
+      const keyword = core.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 ? `${config.api.baseUrl}${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
+      // 如果是对方发送的消息，从好友列表中查找头像
+      let avatar = ''
+      if (item.sendUsername !== myUsername) {
+        const friend = friendList.value.find(f => f.username === item.sendUsername)
+        avatar = friend?.avatar 
+          ? `${config.api.baseUrl}${friend.avatar}`
+          : `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.sendUsername}`
+      } else {
+        avatar = myAvatar.value
+      }
+      
+      return {
+        text: item.msgContent,
+        isSelf: item.sendUsername === myUsername,
+        time: item.createTime,
+        sendUsername: item.sendUsername,
+        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 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 = () => {
+    const socket = getSocket()
+    if (!core.inputText.value.trim() || !currentSelectName.value || !socket) return
+
+    const success = socket.send(currentSelectName.value, core.inputText.value.trim(), 'text')
+    if (success) {
+      const tempMsg = {
+        msgContent: core.inputText.value.trim(),
+        sendUsername: myUsername,
+        receiveUsername: currentSelectName.value,
+        createTime: new Date(),
+        isRead: 0,
+        type: 'text'
+      }
+      chatMsgList.value.push(tempMsg)
+      core.inputText.value = ''
+      scrollToBottom()
+      setTimeout(() => {
+        getChatHistory(currentSelectName.value)
+        getFriendList()
+      }, 300)
+    }
+  }
+
+  // 发送文件
+  const sendFile = async (file) => {
+    const socket = getSocket()
+    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) => {
+    const socket = getSocket()
+    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 消息
+  const handleFriendWsMessage = (msgInfo) => {
+    const message = {
+      content: msgInfo.content,
+      username: msgInfo.username || msgInfo.from || 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()
+  }
+
+  // 处理好友状态变更
+  const handleFriendStatusChange = (targetName, isOnline) => {
+    const targetFriend = friendList.value.find(item => item.username === targetName)
+    if (targetFriend) {
+      targetFriend.online = isOnline
+    }
+  }
+
+  // ========== 添加好友相关 ==========
+  
+  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 resetFriendChat = () => {
+    currentSelectName.value = ''
+    chatMsgList.value = []
+  }
+
+  // 监听添加好友搜索关键词变化
+  watch(addFriendSearchText, async (newKeyword) => {
+    await loadAvailableUsers(newKeyword)
+  })
+
+  return {
+    // 状态
+    friendList,
+    chatList,
+    chatMsgList,
+    currentSelectName,
+    filteredUsers,
+    filteredFriendList,
+    filteredAvailableUsers,
+    currentUser,
+    currentMessages,
+    addFriendDialogVisible,
+    addFriendSearchText,
+    availableUsers,
+    loadingAvailableUsers,
+    friendApplyList,
+    loadingFriendApply,
+    
+    // 方法
+    getFriendList,
+    getChatHistory,
+    markAsRead,
+    selectUser,
+    setFriendToChatStatus,
+    sendMessage,
+    sendFile,
+    sendFilesAndText,
+    handleFriendWsMessage,
+    handleFriendStatusChange,
+    openAddFriendDialog,
+    loadAvailableUsers,
+    addFriend,
+    loadFriendApplyList,
+    agreeFriend,
+    resetFriendChat
+  }
+}
+
+export default useFriendChat