vue-chat-kit 0.1.2 → 0.2.1

package/src/composables/useChat.js

@@ -6,7 +6,7 @@ import dayjs from 'dayjs'
 import { ChatWebSocket } from '../core/websocket.js'
 import { ChatApi } from '../core/api.js'
 
-export function useChat(config) {
+export function useChat(config, emit) {
   // ========== 配置 ==========
   const api = new ChatApi(config)
   let socket = null
@@ -378,11 +378,21 @@ export function useChat(config) {
 
     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: msgInfo.username || currentSelectName.value,
+            sendUsername: message.username,
             receiveUsername: myUsername,
             createTime: new Date(),
             isRead: 0,
@@ -399,6 +409,11 @@ export function useChat(config) {
         getChatHistory(currentSelectName.value)
       }
       getFriendList()
+      
+      // emit 消息事件
+      if (emit && typeof emit === 'function') {
+        emit(message)
+      }
     }
   }
 

package/src/config/index.js

@@ -53,6 +53,12 @@ const defaultConfig = {
   // 自定义请求头
   headers: {},
   
+  // 请求拦截器 (可选)
+  requestInterceptors: [],
+  
+  // 响应拦截器 (可选)
+  responseInterceptors: [],
+  
   // WebSocket 配置
   websocket: {
     maxReconnectAttempts: 5,

package/src/core/api.js

@@ -14,7 +14,9 @@ export class ChatApi {
     } else {
       this.http = new HttpClient({
         baseUrl: config.api.baseUrl,
-        headers: config.headers
+        headers: config.headers,
+        requestInterceptors: config.requestInterceptors,
+        responseInterceptors: config.responseInterceptors
       })
     }
   }

package/src/core/request.js

@@ -22,7 +22,14 @@ export class HttpClient {
     this.requestInterceptors = []
     this.responseInterceptors = []
     
-    // 默认添加 Content-Type
+    // 先添加用户传入的请求拦截器（如果有）
+    if (config.requestInterceptors && Array.isArray(config.requestInterceptors)) {
+      config.requestInterceptors.forEach(interceptor => {
+        this.requestInterceptors.push(interceptor)
+      })
+    }
+    
+    // 默认添加 Content-Type（放在用户拦截器之后，让用户可以覆盖）
     this.addRequestInterceptor((config) => {
       if (!(config.body instanceof FormData)) {
         config.headers = {
@@ -32,6 +39,13 @@ export class HttpClient {
       }
       return config
     })
+    
+    // 添加用户传入的响应拦截器（如果有）
+    if (config.responseInterceptors && Array.isArray(config.responseInterceptors)) {
+      config.responseInterceptors.forEach(interceptor => {
+        this.responseInterceptors.push(interceptor)
+      })
+    }
   }
 
   /**

package/src/index.js

@@ -1,5 +1,12 @@
-// 导出组件
+// 导入样式
+import './style.css'
+
+// 导出组件 - 新的独立面板组件（推荐使用）
+export { default as ChatPanel } from './components/ChatPanel.vue'
+
+// 保留旧版弹窗组件，向后兼容
 export { default as ChatWindow } from './components/ChatWindow.vue'
+
 export { default as AvatarCrop } from './components/AvatarCrop.vue'
 
 // 导出 composables
@@ -19,6 +26,7 @@ export { HttpClient } from './core/request.js'
 // 安装函数，用于 Vue 插件安装
 export const VueChatKit = {
   install(app) {
+    app.component('ChatPanel', ChatPanel)
     app.component('ChatWindow', ChatWindow)
     app.component('AvatarCrop', AvatarCrop)
   }

package/src/style.css

@@ -0,0 +1,23 @@
+/* Vue Chat Kit - 基础样式 */
+
+/* 这个文件是为了兼容，主要样式都在组件内部 */
+
+/* 一些全局的辅助类和重置 */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 简单的滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}