vue-chat-kit 0.1.1

package/src/composables/useChat.js

@@ -0,0 +1,588 @@
+/**
+ * 聊天核心状态管理
+ */
+import { ref, computed, nextTick } from 'vue'
+import dayjs from 'dayjs'
+import { ChatWebSocket } from '../core/websocket.js'
+import { ChatApi } from '../core/api.js'
+
+export function useChat(config) {
+  // ========== 配置 ==========
+  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(() => {
+    if (!addFriendSearchText.value) return availableUsers.value
+    return availableUsers.value.filter(item =>
+      item.username?.toLowerCase().includes(addFriendSearchText.value.toLowerCase())
+    )
+  })
+
+  // 当前选中的用户
+  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) {
+      if (currentSelectName.value) {
+        try {
+          let tempMsg = {
+            msgContent: msgInfo.content,
+            sendUsername: msgInfo.username || currentSelectName.value,
+            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()
+    }
+  }
+
+  // 初始化 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 = ''
+    await loadAvailableUsers()
+  }
+
+  const loadAvailableUsers = async () => {
+    loadingAvailableUsers.value = true
+    try {
+      const 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()
+
+  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,
+    addFriend,
+    loadFriendApplyList,
+    agreeFriend,
+    updateMyAvatar,
+    getUserInfo,
+    updateUserInfo
+  }
+}
+
+export default useChat

package/src/config/index.js

@@ -0,0 +1,111 @@
+/**
+ * 默认配置
+ */
+const defaultConfig = {
+  // API 配置
+  api: {
+    baseUrl: '',
+    websocketUrl: '',
+    endpoints: {
+      getFriends: '/chart/friends',
+      getHistory: '/chart/history',
+      setRead: '/chart/read',
+      uploadFile: '/chart/upload/file',
+      addFriend: '/chart/friend/add',
+      getApplyList: '/chart/friend/applyList',
+      agreeFriend: '/chart/friend/agree',
+      setChatStatus: '/chart/friend/chat/status',
+      getAvailableUsers: '/chart/user/canAddFriend',
+      getUserInfo: '/user/info',
+      updateUserInfo: '/user/info',
+      getUserAvatar: '/user/getAvatar',
+      uploadAvatar: '/user/uploadAvatar'
+    },
+    adapter: null
+  },
+  
+  // 用户信息
+  user: {
+    username: '',
+    avatar: '',
+    nickname: '',
+    email: '',
+    phone: '',
+    bio: ''
+  },
+  
+  // 模块开关
+  modules: {
+    friends: true,
+    apply: true,
+    settings: true,
+    fileUpload: true,
+    avatarCrop: true
+  },
+  
+  // 主题配置
+  theme: {
+    primaryColor: '#07c160',
+    selfMessageBg: '#95ec69',
+    otherMessageBg: '#ffffff'
+  },
+  
+  // 自定义请求头
+  headers: {},
+  
+  // WebSocket 配置
+  websocket: {
+    maxReconnectAttempts: 5,
+    reconnectDelay: 3000
+  },
+  
+  // 文件配置
+  file: {
+    maxSize: 50 * 1024 * 1024, // 50MB
+    allowedTypes: ['*']
+  }
+}
+
+/**
+ * 创建配置
+ * @param {Object} userConfig - 用户配置
+ * @returns {Object} 合并后的配置
+ */
+export function createChatConfig(userConfig = {}) {
+  const config = deepMerge(defaultConfig, userConfig)
+  
+  // 验证必需配置
+  if (!config.api.baseUrl) {
+    console.warn('[VueChatKit] 请配置 api.baseUrl')
+  }
+  if (!config.api.websocketUrl) {
+    console.warn('[VueChatKit] 请配置 api.websocketUrl')
+  }
+  if (!config.user.username) {
+    console.warn('[VueChatKit] 请配置 user.username')
+  }
+  
+  return config
+}
+
+/**
+ * 深度合并对象
+ */
+function deepMerge(target, source) {
+  const result = { ...target }
+  
+  for (const key in source) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      result[key] = deepMerge(target[key] || {}, source[key])
+    } else {
+      result[key] = source[key]
+    }
+  }
+  
+  return result
+}
+
+export default {
+  createChatConfig,
+  defaultConfig
+}