优化了本地存储和一些组件细分，完成了复制图片、适配可以直接发送的功能

2025-07-03 15:36:34 +08:00
parent adf9f73431
commit bcee1e7cc6
34 changed files with 5954 additions and 790 deletions
--- a/src/utils/db.js
+++ b/src/utils/db.js
@@ -0,0 +1,143 @@
+// IndexedDB 数据库工具类
+class ChatDB {
+    constructor() {
+        this.dbName = "ChatApp"
+        this.version = 1
+        this.db = null
+    }
+
+    async init() {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(this.dbName, this.version)
+
+            request.onerror = () => reject(request.error)
+            request.onsuccess = () => {
+                this.db = request.result
+                resolve(this.db)
+            }
+
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result
+
+                // 创建聊天记录表
+                if (!db.objectStoreNames.contains("messages")) {
+                    const messageStore = db.createObjectStore("messages", { keyPath: "id", autoIncrement: true })
+                    messageStore.createIndex("chatKey", "chatKey", { unique: false })
+                    messageStore.createIndex("timestamp", "timestamp", { unique: false })
+                }
+
+                // 创建用户表
+                if (!db.objectStoreNames.contains("users")) {
+                    const userStore = db.createObjectStore("users", { keyPath: "id" })
+                }
+
+                // 创建好友表
+                if (!db.objectStoreNames.contains("friends")) {
+                    const friendStore = db.createObjectStore("friends", { keyPath: "id" })
+                    friendStore.createIndex("userId", "userId", { unique: false })
+                }
+            }
+        })
+    }
+
+    // 保存消息
+    async saveMessage(message, currentUserId, friendId) {
+        const transaction = this.db.transaction(["messages"], "readwrite")
+        const store = transaction.objectStore("messages")
+
+        const messageData = {
+            ...message,
+            chatKey: `${currentUserId}_${friendId}`,
+            timestamp: Date.now(),
+        }
+
+        return store.add(messageData)
+    }
+
+    // 获取聊天记录
+    async getChatHistory(currentUserId, friendId) {
+        const transaction = this.db.transaction(["messages"], "readonly")
+        const store = transaction.objectStore("messages")
+        const index = store.index("chatKey")
+
+        const chatKey = `${currentUserId}_${friendId}`
+        const request = index.getAll(chatKey)
+
+        return new Promise((resolve, reject) => {
+            request.onsuccess = () => resolve(request.result || [])
+            request.onerror = () => reject(request.error)
+        })
+    }
+
+    // 保存好友信息
+    async saveFriend(friend, currentUserId) {
+        const transaction = this.db.transaction(["friends"], "readwrite")
+        const store = transaction.objectStore("friends")
+
+        const friendData = {
+            ...friend,
+            userId: currentUserId,
+            updatedAt: Date.now(),
+        }
+
+        return store.put(friendData)
+    }
+
+    // 获取好友列表
+    async getFriends(currentUserId) {
+        const transaction = this.db.transaction(["friends"], "readonly")
+        const store = transaction.objectStore("friends")
+        const index = store.index("userId")
+
+        const request = index.getAll(currentUserId)
+
+        return new Promise((resolve, reject) => {
+            request.onsuccess = () => resolve(request.result || [])
+            request.onerror = () => reject(request.error)
+        })
+    }
+
+    // 更新好友最后消息
+    async updateFriendLastMessage(friendId, currentUserId, lastMessage, unreadCount = 0) {
+        const transaction = this.db.transaction(["friends"], "readwrite")
+        const store = transaction.objectStore("friends")
+
+        const request = store.get(friendId)
+
+        return new Promise((resolve, reject) => {
+            request.onsuccess = () => {
+                const friend = request.result
+                if (friend) {
+                    friend.lastMessage = lastMessage
+                    friend.unreadCount = unreadCount
+                    friend.updatedAt = Date.now()
+                    store.put(friend)
+                }
+                resolve()
+            }
+            request.onerror = () => reject(request.error)
+        })
+    }
+
+    // 清空未读消息
+    async clearUnreadCount(friendId) {
+        const transaction = this.db.transaction(["friends"], "readwrite")
+        const store = transaction.objectStore("friends")
+
+        const request = store.get(friendId)
+
+        return new Promise((resolve, reject) => {
+            request.onsuccess = () => {
+                const friend = request.result
+                if (friend) {
+                    friend.unreadCount = 0
+                    store.put(friend)
+                }
+                resolve()
+            }
+            request.onerror = () => reject(request.error)
+        })
+    }
+}
+
+export const chatDB = new ChatDB()
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -9,44 +9,87 @@ const service = axios.create({

 // 请求拦截器
 service.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem("token")
-    if (token) {
-      config.headers["Authorization"] = `Bearer ${token}`
-    }
-    return config
-  },
-  (error) => {
-    console.error("Request error:", error)
-    return Promise.reject(error)
-  },
+    (config) => {
+      const token = localStorage.getItem("token")
+      if (token) {
+        config.headers["Authorization"] = `Bearer ${token}`
+      }
+      return config
+    },
+    (error) => {
+      console.error("Request error:", error)
+      return Promise.reject(error)
+    },
 )

 // 响应拦截器
 service.interceptors.response.use(
-  (response) => {
-    const { code, result, message: msg } = response.data
-    if (code === 0) {
-      return result
-    } else {
-      if (code === 401) {
+    (response) => {
+      const { code, result, message: msg } = response.data
+      if (code === 0) {
+        return result
+      } else {
+        if (code === 401) {
+          message.error(msg)
+          localStorage.removeItem("token")
+          localStorage.removeItem("chatUser")
+          window.location.href = "/login"
+          return Promise.reject(new Error(msg))
+        }
        message.error(msg)
-        localStorage.removeItem("token")
-        localStorage.removeItem("chatUser")
-        window.location.href = "/login"
        return Promise.reject(new Error(msg))
      }
-      message.error(msg)
-      return Promise.reject(new Error(msg))
-    }
-  },
-  (error) => {
-    console.error("Response error:", error)
-    message.error("网络请求失败")
-    return Promise.reject(error)
-  },
+    },
+    (error) => {
+      console.error("Response error:", error)
+
+      // 详细的错误处理
+      if (error.code === "ECONNABORTED") {
+        console.log("请求超时，请检查网络连接")
+      } else if (error.response?.status === 0 || error.message.includes("CORS")) {
+        console.log("CORS错误检测到，尝试备用方案...")
+        handleCORSError(error.config)
+      } else if (error.response?.status >= 400 && error.response?.status < 500) {
+        console.log("客户端错误:", error.response.status, error.response.data)
+      } else if (error.response?.status >= 500) {
+        console.log("服务器错误:", error.response.status)
+      } else {
+        console.log("网络错误:", error.message)
+      }
+
+      message.error("网络请求失败")
+      return Promise.reject(error)
+    },
 )

+// CORS错误的备用处理方案
+const handleCORSError = (config) => {
+  console.log("执行CORS错误备用方案...")
+
+    // /* "http://g-ws.nailaoyun.cn" + */
+  const apiUrl = config.url.replace("/api", "")
+
+  return fetch(apiUrl, {
+    method: config.method.toUpperCase(),
+    headers: {
+      "Content-Type": "application/json",
+      ...config.headers,
+    },
+    mode: "cors",
+    body: config.data ? JSON.stringify(config.data) : undefined,
+  })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`)
+        }
+        return response.json()
+      })
+      .catch((error) => {
+        console.error("备用方案也失败:", error)
+        throw error
+      })
+}
+
 // 封装请求方法
 export const get = (url, params = {}) => {
  return service.get(url, { params })
@@ -75,12 +118,34 @@ export const sendMessage = (data) => {
    video: 3,
  }

-  return post("send-to-user", {
+  // 直接使用固定的后端接口地址
+  const apiUrl = "/api/send-to-user"
+
+  const requestData = {
    sender_user_id: data.senderId,
    receiver_user_id: data.receiverId,
    message_type: messageTypeMap[data.type] || 0,
    message_content: data.content,
-  })
+  }
+
+  console.log("发送消息到API:", apiUrl, requestData)
+
+  return axios
+      .post(apiUrl, requestData, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        timeout: 15000,
+        withCredentials: false,
+      })
+      .then((response) => {
+        console.log("消息发送成功:", response.data)
+        return response.data
+      })
+      .catch((error) => {
+        console.error("消息发送失败:", error)
+        throw error
+      })
 }

 export default service