From 2e56d71b0cb7b4bfb5ef8843ecbca42b30933552 Mon Sep 17 00:00:00 2001
From: yaoqin <497681109@qq.com>
Date: Wed, 30 Apr 2025 15:22:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E8=81=8A=E5=A4=A9=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=AF=B9=E6=8E=A5=E5=8F=8A=E5=8A=9F=E8=83=BD=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mining-pool/.env.development                  |    1 +
 mining-pool/package-lock.json                 |   59 +-
 mining-pool/package.json                      |    3 +-
 mining-pool/public/index.html                 |    2 +-
 mining-pool/src/App.vue                       |    2 +-
 mining-pool/src/api/customerService.js        |   24 +-
 mining-pool/src/components/ChatWidget.vue     |  981 ++++++++-----
 mining-pool/src/router/index.js               |    5 +-
 .../src/views/customerService/index.vue       | 1268 +++++++++++++----
 .../src/views/submitWorkOrder/index.vue       |    4 +-
 10 files changed, 1648 insertions(+), 701 deletions(-)

diff --git a/mining-pool/.env.development b/mining-pool/.env.development
index b1d6875..9f360fd 100644
--- a/mining-pool/.env.development
+++ b/mining-pool/.env.development
@@ -6,6 +6,7 @@ ENV = 'development'
 
 #开发环境
 VUE_APP_BASE_API = 'https://test.m2pool.com/api/'
+#  VUE_APP_BASE_API = 'http://10.168.2.150:8101/'
 VUE_APP_BASE_URL = 'https://test.m2pool.com/'
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/mining-pool/package-lock.json b/mining-pool/package-lock.json
index 9959c32..7dde179 100644
--- a/mining-pool/package-lock.json
+++ b/mining-pool/package-lock.json
@@ -290,13 +290,45 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
-      "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
+      "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.9"
+        "@babel/template": "^7.27.0",
+        "@babel/types": "^7.27.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.27.0",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+          "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.27.0"
+          }
+        },
+        "@babel/template": {
+          "version": "7.27.0",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+          "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.26.2",
+            "@babel/parser": "^7.27.0",
+            "@babel/types": "^7.27.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.27.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+          "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-string-parser": "^7.25.9",
+            "@babel/helper-validator-identifier": "^7.25.9"
+          }
+        }
       }
     },
     "@babel/highlight": {
@@ -1104,9 +1136,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
-      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
       "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
@@ -1718,6 +1750,11 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "@stomp/stompjs": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.1.1.tgz",
+      "integrity": "sha512-chcDs6YkAnKp1FqzwhGvh3i7v0+/ytzqWdKYw6XzINEKAzke/iD00dNgFPWSZEqktHOK+C1gSzXhLkLbARIaZw=="
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -3032,9 +3069,9 @@
       }
     },
     "axios": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
-      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
       "requires": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/mining-pool/package.json b/mining-pool/package.json
index f8ef2ae..de65d9c 100644
--- a/mining-pool/package.json
+++ b/mining-pool/package.json
@@ -10,8 +10,9 @@
   },
   "dependencies": {
     "@dreysolano/prerender-spa-plugin": "^1.0.3",
+    "@stomp/stompjs": "^7.1.1",
     "amfe-flexible": "^2.2.1",
-    "axios": "^1.5.0",
+    "axios": "^1.8.4",
     "core-js": "^3.8.3",
     "echarts": "^5.5.1",
     "element-ui": "^2.15.14",
diff --git a/mining-pool/public/index.html b/mining-pool/public/index.html
index 3d6ca6f..588f211 100644
--- a/mining-pool/public/index.html
+++ b/mining-pool/public/index.html
@@ -45,7 +45,7 @@
 
 
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4582735_irzdjxdsrq8.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4582735_7i8wfzc0art.css">
   <title>M2pool - Stable leading high-yield mining pool</title>
   <meta name="keywords" content="M2Pool, cryptocurrency mining pool,Entropyx(enx),entropyx, bitcoin mining, DGB mining, mining pool service, 加密货币矿池, 比特币挖矿, DGB挖矿">
   <meta name="description" content="M2Pool provides professional mining services, supporting multiple cryptocurrency mining, including nexa, grs, mona, dgb, rxd, enx">
diff --git a/mining-pool/src/App.vue b/mining-pool/src/App.vue
index 3519071..c9353a5 100644
--- a/mining-pool/src/App.vue
+++ b/mining-pool/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <router-view class="page" />
-    <ChatWidget />
+    <ChatWidget v-if="!$route.path.includes('/customerService')" />
   </div>
 </template>
 <script  >
diff --git a/mining-pool/src/api/customerService.js b/mining-pool/src/api/customerService.js
index 28fe1c5..9ff785d 100644
--- a/mining-pool/src/api/customerService.js
+++ b/mining-pool/src/api/customerService.js
@@ -48,13 +48,13 @@ export function getUpdateRoom(data) {
   }
 
 //图片上传接口
-export function getFileUpdate(data) {
-    return request({
-      url: `file/update`,
-      method: 'post',    
-      data
-    })
-  }
+// export function getFileUpdate(data) {
+//     return request({
+//       url: `file/update`,
+//       method: 'post',    
+//       data
+//     })
+//   }
 
   
 //图根据当前用户邮箱查询聊天室id
@@ -66,3 +66,13 @@ export function getUserid() {
     })
   }
 
+
+//上传图片
+export function getFileUpdate(data) {
+  return request({
+    url: `pool/ticket/uploadFile`,
+    method: 'post',    
+    data
+  })
+}
+
diff --git a/mining-pool/src/components/ChatWidget.vue b/mining-pool/src/components/ChatWidget.vue
index b0ca263..3f7d644 100644
--- a/mining-pool/src/components/ChatWidget.vue
+++ b/mining-pool/src/components/ChatWidget.vue
@@ -110,10 +110,13 @@
                   <div class="message-footer">
                     <span class="message-time">{{ formatTime(msg.time) }}</span>
                     <!-- 添加已读状态显示 -->
-                    <span v-if="msg.type === 'user'" class="message-read-status">
-                        {{ msg.isRead ? '已读' : '未读' }}
+                    <span
+                      v-if="msg.type === 'user'"
+                      class="message-read-status"
+                    >
+                      {{ msg.isRead ? "已读" : "未读" }}
                     </span>
-                    </div>
+                  </div>
                 </div>
               </template>
             </div>
@@ -175,8 +178,14 @@
   </div>
 </template>
 <script>
-import { Client } from "@stomp/stompjs";
-import { getUserid, getHistory, getHistory7, getReadMessage } from "../api/customerService";
+import { Client, Stomp } from "@stomp/stompjs";
+import {
+  getUserid,
+  getHistory,
+  getHistory7,
+  getReadMessage,
+  getFileUpdate,
+} from "../api/customerService";
 export default {
   name: "ChatWidget",
   data() {
@@ -207,9 +216,21 @@ export default {
       isLoadingHistory: false, // 是否正在加载历史消息
       hasMoreHistory: true, // 是否还有更多历史消息
       roomId: "",
+      isWebSocketConnected: false, // 跟踪 WebSocket 连接状态
+
+      cachedMessages: {}, // 缓存各聊天室的消息
+      isMinimized: false, // 区分最小化和关闭状态
     };
   },
+  
+  async created() {
+    // 页面加载时立即获取用户信息
+    await this.initChatSystem();
+  },
   mounted() {
+    // 添加页面卸载事件监听
+    window.addEventListener("beforeunload", this.handleBeforeUnload);
+
     document.addEventListener("click", this.handleClickOutside);
     // 添加聊天窗口滚动监听
     this.$nextTick(() => {
@@ -217,11 +238,222 @@ export default {
         this.$refs.chatBody.addEventListener("scroll", this.handleChatScroll);
       }
     });
-    
+
     // 添加页面可见性变化监听
     document.addEventListener("visibilitychange", this.handleVisibilityChange);
   },
   methods: {
+    // 初始化聊天系统
+    async initChatSystem() {
+      try {
+        // 获取用户ID和未读消息数
+        const userData = await this.fetchUserid();
+        if (userData) {
+          this.roomId = userData.id;
+          this.receivingEmail = userData.userEmail;
+          this.unreadMessages = userData.clientReadNum || 0;
+
+          // 初始化 WebSocket 连接
+          if (!this.isWebSocketConnected) {
+            this.initWebSocket();
+          }
+        }
+      } catch (error) {
+        console.error("初始化聊天系统失败:", error);
+      }
+    },
+
+    // 初始化 WebSocket 连接
+    initWebSocket() {
+      this.determineUserType();
+      this.connectWebSocket();
+    },
+
+    // 确定用户类型和邮箱
+    determineUserType() {
+      try {
+        const token = localStorage.getItem("token");
+
+        if (!token) {
+          // 游客身份
+          this.userType = 0;
+          this.userEmail = `guest_${Date.now()}_${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
+          console.log("游客用户:", this.userEmail);
+          return;
+        }
+
+        try {
+          const userInfo = JSON.parse(
+            localStorage.getItem("jurisdiction") || "{}"
+          );
+          const email = JSON.parse(localStorage.getItem("userEmail") || "{}");
+
+          if (userInfo.roleKey === "customer_service") {
+            // 客服用户
+            this.userType = 2;
+          } else {
+            // 登录用户
+            this.userType = 1;
+          }
+          this.userEmail = email;
+        } catch (parseError) {
+          console.error("解析用户信息失败:", parseError);
+          // 解析失败时默认为游客
+          this.userType = 0;
+          this.userEmail = `guest_${Date.now()}_${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
+        }
+      } catch (error) {
+        console.error("获取用户信息失败:", error);
+        // 出错时默认为游客
+        this.userType = 0;
+        this.userEmail = `guest_${Date.now()}_${Math.random()
+          .toString(36)
+          .substr(2, 9)}`;
+      }
+    },
+
+    // 添加订阅消息的方法
+  subscribeToPersonalMessages() {
+    if (!this.stompClient || !this.isWebSocketConnected) return;
+
+    try {
+      // 订阅个人消息频道
+      this.stompClient.subscribe(
+        `/user/queue/${this.userEmail}`,
+        this.onMessageReceived,
+        {
+          id: `chat_${this.userEmail}`,
+        }
+      );
+
+      console.log("成功订阅消息频道:", `/user/queue/${this.userEmail}`);
+    } catch (error) {
+      console.error("订阅消息失败:", error);
+      this.$message.error("消息订阅失败，可能无法接收新消息");
+    }
+  },
+
+
+    // 连接 WebSocket
+    connectWebSocket() {
+    if (this.isWebSocketConnected) return;
+
+    this.connectionStatus = "connecting";
+    try {
+      const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
+      this.stompClient = Stomp.client(wsUrl);
+
+      const headers = {
+        email: this.userEmail,
+        type: this.userType,
+      };
+
+      this.stompClient.connect(
+        headers,
+        (frame) => {
+          console.log("WebSocket Connected:", frame);
+          this.isWebSocketConnected = true;
+          this.connectionStatus = "connected";
+          
+          // 连接成功后立即订阅消息
+          this.subscribeToPersonalMessages();
+        },
+        (error) => {
+          console.error("WebSocket Error:", error);
+          this.isWebSocketConnected = false;
+          this.connectionStatus = "error";
+          // 添加重连逻辑
+          setTimeout(() => this.connectWebSocket(), 5000);
+        }
+      );
+
+      // 配置心跳
+      this.stompClient.heartbeat.outgoing = 20000;
+      this.stompClient.heartbeat.incoming = 20000;
+    } catch (error) {
+      console.error("初始化 WebSocket 失败:", error);
+      this.connectionStatus = "error";
+    }
+  },
+
+    // 新增：页面卸载时的处理
+    handleBeforeUnload() {
+      this.disconnectWebSocket();
+    },
+
+    // 发送消息
+    sendMessage() {
+      if (!this.inputMessage.trim() || this.connectionStatus !== "connected")
+        return;
+
+      const messageText = this.inputMessage.trim();
+
+      // 添加用户消息到界面
+      this.messages.push({
+        type: "user",
+        text: messageText,
+        time: new Date(), 
+        email: this.receivingEmail,
+        receiveUserType: 2, //接收消息用户类型
+        roomId: this.roomId, 
+        isRead: false, // 新发送的消息默认未读
+      });
+      const message = {
+        content: messageText,
+        type: 1, // 1 表示文字消息
+        email: this.receivingEmail,
+        receiveUserType: 2,
+        roomId: this.roomId,
+      };
+      // 发送消息
+      this.stompClient.send("/point/send/message", {}, JSON.stringify(message));
+      // 通过 WebSocket 发送消息
+      //   if (this.stompClient && this.stompClient.connected) {
+      //     this.stompClient.send({
+      //       destination: "/point/send/message",
+      //       body: JSON.stringify({
+      //         content: messageText,
+      //         type: 1,
+      //         email: this.receivingEmail,
+      //         receiveUserType:2,//当前用户类型
+      //         roomId: this.roomId,
+      //       }),
+      //     });
+      //   } else {
+      //     this.handleAutoResponse(messageText);
+      //   }
+
+      this.inputMessage = "";
+
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    },
+
+    // 断开 WebSocket 连接
+    disconnectWebSocket() {
+    if (this.stompClient) {
+      try {
+        // 取消所有订阅
+        if (this.stompClient.subscriptions) {
+          Object.keys(this.stompClient.subscriptions).forEach(id => {
+            this.stompClient.unsubscribe(id);
+          });
+        }
+        
+        // 断开连接
+        this.stompClient.deactivate();
+        this.isWebSocketConnected = false;
+        this.connectionStatus = "disconnected";
+      } catch (error) {
+        console.error("断开 WebSocket 连接失败:", error);
+      }
+    }
+  },
     // 处理页面可见性变化
     handleVisibilityChange() {
       // 当页面变为可见且聊天窗口已打开时，标记消息为已读
@@ -229,95 +461,99 @@ export default {
         this.markMessagesAsRead();
       }
     },
-    
+
     // 标记消息为已读
     async markMessagesAsRead() {
       try {
         const data = {
-            roomId: this.roomId
+          roomId: this.roomId,
+          userType: this.userType,
         };
-        
+
         const response = await getReadMessage(data);
-        
+
         if (response && response.code === 200) {
-          console.log('消息已标记为已读');
+          console.log("消息已标记为已读");
           // 清除未读消息计数
           this.unreadMessages = 0;
-           // 更新所有用户消息的已读状态
-      this.messages.forEach(msg => {
-        if (msg.type === 'user') {
-          msg.isRead = true;
-        }
-      });
+          // 更新所有用户消息的已读状态
+          this.messages.forEach((msg) => {
+            if (msg.type === "user") {
+              msg.isRead = true;
+            }
+          });
         } else {
-          console.warn('标记消息已读失败', response);
+          console.warn("标记消息已读失败", response);
         }
       } catch (error) {
-        console.error('标记消息已读出错:', error);
+        console.error("标记消息已读出错:", error);
       }
     },
-    
+
     // 加载历史消息
     async loadHistoryMessages() {
-      if (this.isLoadingHistory || !this.hasMoreHistory || !this.roomId) return;
-      
-      this.isLoadingHistory = true;
-      
-      try {
-        // 显示加载中提示
-        const loadingMsg = {
-          type: "system",
-          text: "正在加载历史消息...",
-          isLoading: true,
-          time: new Date(),
-        };
-        this.messages.unshift(loadingMsg);
-        
-        // 获取7天内的最新聊天记录，传入 roomId
-        const response = await getHistory7({ roomId: this.roomId });
-        
-        // 移除加载中提示
-        this.messages = this.messages.filter((msg) => !msg.isLoading);
-        
-        if (response && response.code === 200 && response.data && response.data.length > 0) {
-          // 处理并添加历史消息
-          const historyMessages = this.formatHistoryMessages(response.data);
-          
-          // 将历史消息添加到消息列表的前面
-          this.messages = [...historyMessages, ...this.messages];
-          
-          // 设置是否还有更多历史消息
-          this.hasMoreHistory = historyMessages.length > 0;
-        } else {
-          // 添加提示信息
-          this.messages.unshift({
-            type: "system",
-            text: "暂无最近的聊天记录",
-            isSystemHint: true,
-            time: new Date(),
-          });
-          this.hasMoreHistory = false;
-        }
-      } catch (error) {
-        console.error("加载历史消息失败:", error);
-        // 添加错误提示
-        this.messages.unshift({
-          type: "system",
-          text: "加载历史消息失败，请重试",
-          isError: true,
-          time: new Date(),
-        });
-      } finally {
-        this.isLoadingHistory = false;
-      }
-    },
+  if (this.isLoadingHistory || !this.roomId) return;
+
+  this.isLoadingHistory = true;
+  try {
+    const response = await getHistory7({ roomId: this.roomId, userType: this.userType });
+    console.log("历史消息数据:", response);
     
+    if (response?.code === 200 && Array.isArray(response.data)) {
+      // 处理历史消息
+      const historyMessages = response.data.map(msg => ({
+        type: msg.isSelf === 1 ? "user" : "system", // 根据 isSelf 判断消息类型
+        text: msg.content,
+        isImage: msg.type === 2,
+        imageUrl: msg.type === 2 ? msg.content : null,
+        time: new Date(msg.createTime), // 使用 createTime 字段
+        id: msg.id,
+        roomId: msg.roomId,
+        sender: msg.sendEmail,
+        isHistory: true,
+        isRead: true // 历史消息默认已读
+      }));
+
+      // 按时间顺序排序
+      this.messages = historyMessages.sort((a, b) => 
+        new Date(a.time) - new Date(b.time)
+      );
+
+      // 滚动到底部
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    } else {
+      // 没有历史消息时显示提示
+      this.messages = [{
+        type: "system",
+        text: "暂无历史消息",
+        isSystemHint: true,
+        time: new Date()
+      }];
+    }
+  } catch (error) {
+    console.error("加载历史消息失败:", error);
+    this.$message.error("加载历史消息失败");
+    // 显示错误提示
+    this.messages = [{
+      type: "system",
+      text: "加载历史消息失败，请重试",
+      isSystemHint: true,
+      time: new Date(),
+      isError: true
+    }];
+  } finally {
+    this.isLoadingHistory = false;
+  }
+},
+
     // 加载更多历史消息（超过7天的）
     async loadMoreHistory() {
       if (this.isLoadingHistory || !this.roomId) return;
-      
+
       this.isLoadingHistory = true;
-      
+
       try {
         // 显示加载中提示
         const loadingMsg = {
@@ -327,23 +563,28 @@ export default {
           time: new Date(),
         };
         this.messages.unshift(loadingMsg);
-        
-        // 获取更早的聊天记录，传入 roomId
+
+        // 获取更早的聊天记录
         const response = await getHistory({ roomId: this.roomId });
-        
+
         // 移除加载中提示
         this.messages = this.messages.filter((msg) => !msg.isLoading);
-        
-        if (response && response.code === 200 && response.data && response.data.length > 0) {
+
+        if (
+          response &&
+          response.code === 200 &&
+          response.data &&
+          response.data.length > 0
+        ) {
           // 处理并添加历史消息
           const historyMessages = this.formatHistoryMessages(response.data);
-          
+
           // 将历史消息添加到消息列表的前面
           this.messages = [...historyMessages, ...this.messages];
-          
+
           // 如果没有数据返回，表示没有更多历史记录
           this.hasMoreHistory = historyMessages.length > 0;
-          
+
           if (historyMessages.length === 0) {
             this.messages.unshift({
               type: "system",
@@ -379,304 +620,208 @@ export default {
   if (!messagesData || !Array.isArray(messagesData)) return [];
 
   return messagesData
-    .map((msg) => {
-      const isSelf =
-        msg.sendUserType === this.userType &&
-        msg.sendUserEmail === this.userEmail;
-
-      return {
-        type: isSelf ? "user" : "system",
-        text: msg.content || "",
-        isImage: msg.type === 1 || msg.type === "image",
-        imageUrl:
-          msg.type === 1 || msg.type === "image" ? msg.content : null,
-        time: msg.timestamp ? new Date(msg.timestamp) : new Date(),
-        id: msg.id,
-        roomId: msg.roomId,
-        sendUserType: msg.sendUserType,
-        isHistory: true, // 标记为历史消息
-        isRead: msg.isRead || true, // 历史消息默认已读
-      };
-    })
-    .sort((a, b) => a.time - b.time); // 按时间排序
+    .map((msg) => ({
+      type: msg.isSelf === 1 ? "user" : "system", // 根据 isSelf 判断消息类型
+      text: msg.content || "",
+      isImage: msg.type === 2,
+      imageUrl: msg.type === 2 ? msg.content : null,
+      time: new Date(msg.createTime),
+      id: msg.id,
+      roomId: msg.roomId,
+      sender: msg.sendEmail,
+      isHistory: true,
+      isRead: true
+    }))
+    .sort((a, b) => new Date(a.time) - new Date(b.time));
 },
 
-
-    // 修改 fetchUserid 方法，使其返回 Promise
+    // 修改 fetchUserid 方法，添加 token 检查
     async fetchUserid() {
       try {
+        // 先检查是否有 token
+        const token = localStorage.getItem("token");
+        if (!token) {
+          console.log("用户未登录，不发起 getUserid 请求");
+          // 对于未登录用户，可以生成一个临时 ID
+          this.roomId = `guest_${Date.now()}`;
+          this.receivingEmail = "customer_service@example.com"; // 或默认客服邮箱
+          return null;
+        }
+
         const res = await getUserid();
         if (res && res.code == 200) {
-          console.log('获取用户ID成功:', res);
+          console.log("获取用户ID成功:", res);
           this.receivingEmail = res.data.userEmail;
           this.roomId = res.data.id;
           return res.data;
         } else {
-          console.warn('获取用户ID未返回有效数据');
+          console.warn("获取用户ID未返回有效数据");
           return null;
         }
       } catch (error) {
-        console.error('获取用户ID失败:', error);
+        console.error("获取用户ID失败:", error);
         throw error;
       }
     },
 
-    // 初始化 WebSocket 连接
-    initWebSocket() {
-      this.determineUserType();
-      this.connectWebSocket();
-    },
-
-    // 确定用户类型和邮箱
-    determineUserType() {
-      try {
-        const token = JSON.parse(localStorage.getItem("token") || "{}");
-        const userInfo = JSON.parse(
-          localStorage.getItem("jurisdiction") || "{}"
-        );
-        const email = JSON.parse(localStorage.getItem("userEmail") || "{}");
-        if (token) {
-          if (userInfo.roleKey === "customer_service") {
-            // 客服用户
-            this.userType = 2;
-          } else {
-            // 登录用户
-            this.userType = 1;
-          }
-          this.userEmail = email;
-        } else {
-          //游客
-          this.userType = 0;
-          this.userEmail = `guest_${Date.now()}_${Math.random()
-            .toString(36)
-            .substr(2, 9)}`;
-        }
-      } catch (error) {
-        console.error("获取用户信息失败:", error);
-        // 出错时默认为游客
-        this.userType = 0;
-        this.userEmail = `guest_${Date.now()}_${Math.random()
-          .toString(36)
-          .substr(2, 9)}`;
-      }
-    },
-
-    // 连接 WebSocket
-    connectWebSocket() {
-      this.connectionStatus = "connecting";
-
-      try {
-        const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
-
-        // 创建 STOMP 客户端
-        this.stompClient = new Client({
-          brokerURL: wsUrl,
-          connectHeaders: {
-            email: this.userEmail,
-            type: this.userType,
-          },
-          debug: function (str) {
-            console.log("STOMP: " + str);
-          },
-          reconnectDelay: 5000,
-          heartbeatIncoming: 4000,
-          heartbeatOutgoing: 4000,
-        });
-
-        // 连接成功回调
-        this.stompClient.onConnect = (frame) => {
-          console.log("连接成功: " + frame);
-          this.connectionStatus = "connected";
-
-          // 订阅个人消息频道
-          this.stompClient.subscribe(
-            `${process.env.VUE_APP_BASE_API}user/queue/${this.userEmail}`,
-            this.onMessageReceived
-          );
-
-          // 根据用户类型显示不同的欢迎消息
-          let welcomeMessage = "";
-          switch (this.userType) {
-            case 0:
-              welcomeMessage = "您当前以游客身份访问，请问有什么可以帮您？";
-              break;
-            case 1:
-              welcomeMessage = "欢迎回来，请问有什么可以帮您？";
-              break;
-            case 2:
-              welcomeMessage = "您已以客服身份登录系统";
-              break;
-          }
-          this.addSystemMessage(welcomeMessage);
-        };
-
-        // 连接错误回调
-        this.stompClient.onStompError = (frame) => {
-          console.error("连接错误: " + frame.headers.message);
-          this.connectionStatus = "error";
-          this.addSystemMessage("连接客服系统失败，请稍后重试。");
-        };
-
-        // 启动连接
-        this.stompClient.activate();
-      } catch (error) {
-        console.error("初始化 WebSocket 失败:", error);
-        this.connectionStatus = "error";
-      }
-    },
-
-    // 断开 WebSocket 连接
-    disconnectWebSocket() {
-      if (this.stompClient && this.stompClient.connected) {
-        this.stompClient.deactivate();
-        this.connectionStatus = "disconnected";
-      }
-    },
-
     // 添加新方法：更新消息已读状态
-updateMessageReadStatus(messageIds) {
-  if (!Array.isArray(messageIds) || messageIds.length === 0) {
-    // 如果没有具体的消息ID，就更新所有用户消息为已读
-    this.messages.forEach(msg => {
-      if (msg.type === 'user') {
-        msg.isRead = true;
+    updateMessageReadStatus(messageIds) {
+      if (!Array.isArray(messageIds) || messageIds.length === 0) {
+        // 如果没有具体的消息ID，就更新所有用户消息为已读
+        this.messages.forEach((msg) => {
+          if (msg.type === "user") {
+            msg.isRead = true;
+          }
+        });
+      } else {
+        // 更新指定ID的消息为已读
+        this.messages.forEach((msg) => {
+          if (msg.id && messageIds.includes(msg.id)) {
+            msg.isRead = true;
+          }
+        });
       }
-    });
-  } else {
-    // 更新指定ID的消息为已读
-    this.messages.forEach(msg => {
-      if (msg.id && messageIds.includes(msg.id)) {
-        msg.isRead = true;
-      }
-    });
-  }
-},
+    },
 
     // 接收消息处理
     onMessageReceived(message) {
-  console.log("收到消息:", message.body);
   try {
     const data = JSON.parse(message.body);
+    console.log("收到新消息:", data);
     
-    // 处理已读回执消息
-    if (data.type === 'read_receipt') {
-      // 更新对应消息的已读状态
-      this.updateMessageReadStatus(data.messageIds || []);
-      return;
-    }
-    
-    // 添加客服消息
-    this.messages.push({
-      type: "system",
+    // 构造消息对象
+    const messageObj = {
+      type: data.sendUserType === this.userType ? "user" : "system", // 用户类型判断
       text: data.content,
-      isImage: data.type === "image",
-      imageUrl: data.type === "image" ? data.content : null,
-      time: new Date(),
-      roomId: data.roomId || this.roomId,
-    });
-    
-    // 如果聊天窗口已打开，标记为已读
-    if (this.isChatOpen && this.roomId) {
-      this.markMessagesAsRead();
+      isImage: data.type === 2,
+      imageUrl: data.type === 2 ? data.content : null,
+      time: new Date(data.sendTime),
+      id: data.id,
+      roomId: data.roomId,
+      sender: data.sendEmail,
+      isRead: false
+    };
+
+    // 直接添加到消息列表
+    this.messages.push(messageObj);
+
+    // 如果聊天窗口未打开，增加未读消息数
+    if (!this.isChatOpen) {
+      // 使用服务器返回的未读数，如果没有则增加1
+      if (data.clientReadNum !== undefined) {
+        this.unreadMessages = data.clientReadNum;
+      } else {
+        this.unreadMessages++;
+      }
+      // 显示消息通知
+      this.showNotification(messageObj);
     } else {
-      // 如果聊天窗口没有打开，显示未读消息数
-      this.unreadMessages++;
+      // 如果聊天窗口已打开，立即标记为已读
+      this.markMessagesAsRead();
     }
-    
+
+    // 滚动到底部
     this.$nextTick(() => {
       this.scrollToBottom();
     });
+
   } catch (error) {
-    console.error("解析消息失败:", error);
+    console.error("处理消息失败:", error);
   }
 },
 
-    // 切换聊天窗口
-    async toggleChat() {
-      this.isChatOpen = !this.isChatOpen;
-      
-      if (this.isChatOpen) {
-        this.unreadMessages = 0;
-        
-        try {
-          // 先获取用户ID，等待完成
-          await this.fetchUserid();
-          
-          // 如果未连接，则连接 WebSocket
-          if (this.connectionStatus === "disconnected") {
-            this.initWebSocket();
+    // 显示消息通知
+    showNotification(message) {
+      if (!("Notification" in window)) {
+        return;
+      }
+
+      // 检查通知权限
+      if (Notification.permission === "granted") {
+        this.createNotification(message);
+      } else if (Notification.permission !== "denied") {
+        // 请求权限
+        Notification.requestPermission().then((permission) => {
+          if (permission === "granted") {
+            this.createNotification(message);
           }
-          
-          // 获取到 roomId 后才查询历史消息
-          if (this.roomId && this.messages.length === 0) {
-            this.loadHistoryMessages();
-          }
-          
-          // 新增：标记消息为已读
-          if (this.roomId) {
-            this.markMessagesAsRead();
-          }
-          
-          this.$nextTick(() => {
-            this.scrollToBottom();
-          });
-        } catch (error) {
-          console.error('初始化聊天失败:', error);
-        }
+        });
+      }
+    },
+    // 创建通知
+    createNotification(message) {
+      const notification = new Notification("新消息", {
+        body: message.isImage ? "[图片消息]" : message.text,
+        icon: "/path/to/notification-icon.png", // 添加适当的图标
+      });
+
+      notification.onclick = () => {
+        // 点击通知时打开聊天窗口
+        window.focus();
+        this.openChat(message.roomId);
+      };
+    },
+
+    // 打开聊天窗口
+    async openChat(roomId) {
+      this.isChatOpen = true;
+      this.isMinimized = false;
+
+      if (roomId) {
+        this.currentContactId = roomId;
+        this.messages = this.cachedMessages[roomId] || [];
+        this.markMessagesAsRead(roomId);
+
+        // 等待 DOM 更新后滚动到底部
+        await this.$nextTick();
+        this.scrollToBottom();
       }
     },
 
+    // 切换聊天窗口
+    async toggleChat() {
+  this.isChatOpen = !this.isChatOpen;
+
+  if (this.isChatOpen) {
+    // 打开聊天窗口时
+    try {
+      // 确定用户类型
+      this.determineUserType();
+
+      // 如果未连接，则初始化 WebSocket
+      if (this.connectionStatus === "disconnected") {
+        await this.initWebSocket();
+      }
+
+      // 如果消息列表为空，加载历史消息
+      if (this.messages.length === 0) {
+        await this.loadHistoryMessages();
+      }
+
+      // 标记消息为已读
+      await this.markMessagesAsRead();
+
+      // 滚动到底部
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    } catch (error) {
+      console.error("初始化聊天失败:", error);
+    }
+  }
+},
+
     minimizeChat() {
       this.isChatOpen = false;
+      this.isMinimized = true;
     },
 
     closeChat() {
       this.isChatOpen = false;
-      this.messages = [];
-      this.disconnectWebSocket();
+      this.isMinimized = true;
+      //   this.disconnectWebSocket(); // 关闭 WebSocket 连接
     },
 
-    // 发送消息
-    sendMessage() {
-  if (!this.inputMessage.trim() || this.connectionStatus !== "connected")
-    return;
-
-  const messageText = this.inputMessage.trim();
-
-  // 添加用户消息到界面
-  this.messages.push({
-    type: "user",
-    text: messageText,
-    time: new Date(),
-    email: this.receivingEmail,
-    sendUserType: this.userType,
-    roomId: this.roomId,
-    isRead: false, // 新发送的消息默认未读
-  });
-
-  // 通过 WebSocket 发送消息
-  if (this.stompClient && this.stompClient.connected) {
-    this.stompClient.publish({
-      destination: "/send/message",
-      body: JSON.stringify({
-        content: messageText,
-        type: 0,
-        email: this.receivingEmail,
-        sendUserType: this.userType,
-        roomId: this.roomId,
-      }),
-    });
-  } else {
-    this.handleAutoResponse(messageText);
-  }
-
-  this.inputMessage = "";
-
-  this.$nextTick(() => {
-    this.scrollToBottom();
-  });
-},
-
     // 添加系统消息
     addSystemMessage(text) {
       this.messages.push({
@@ -723,7 +868,7 @@ updateMessageReadStatus(messageIds) {
         });
       }, 1000);
     },
-    
+
     // 滚动到消息列表顶部检测，用于加载更多历史消息
     handleChatScroll() {
       if (!this.$refs.chatBody) return;
@@ -737,15 +882,55 @@ updateMessageReadStatus(messageIds) {
 
     scrollToBottom() {
       if (this.$refs.chatBody) {
-        this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
+        const scrollOptions = {
+          top: this.$refs.chatBody.scrollHeight,
+          behavior: "smooth",
+        };
+
+        try {
+          this.$refs.chatBody.scrollTo(scrollOptions);
+        } catch (error) {
+          // 如果平滑滚动不支持，则直接设置
+          this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
+        }
       }
     },
 
     formatTime(date) {
-      return date.toLocaleTimeString([], {
+      if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+        return ""; // 处理无效日期
+      }
+
+      const now = new Date();
+      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      // 消息日期（只保留日期部分，不含时间）
+      const messageDate = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate()
+      );
+
+      // 格式化时间部分 (HH:MM)
+      const timeString = date.toLocaleTimeString([], {
         hour: "2-digit",
         minute: "2-digit",
       });
+
+      // 判断消息是今天、昨天还是更早的日期
+      if (messageDate.getTime() === today.getTime()) {
+        return `今天 ${timeString}`;
+      } else if (messageDate.getTime() === yesterday.getTime()) {
+        return `昨天 ${timeString}`;
+      } else {
+        // 超过两天的消息显示完整日期
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+          2,
+          "0"
+        )}-${String(date.getDate()).padStart(2, "0")} ${timeString}`;
+      }
     },
 
     handleClickOutside(event) {
@@ -764,7 +949,7 @@ updateMessageReadStatus(messageIds) {
     },
 
     // 处理图片上传
-    handleImageUpload(event) {
+    async handleImageUpload(event) {
       if (this.connectionStatus !== "connected") return;
 
       const file = event.target.files[0];
@@ -789,44 +974,86 @@ updateMessageReadStatus(messageIds) {
         return;
       }
 
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const imageUrl = e.target.result;
-
-        // 添加用户图片消息到界面
-        this.messages.push({
-          type: "user", // 修改为 "user" 以符合消息类型格式
-          text: "",
-          isImage: true,
-          imageUrl: imageUrl,
-          time: new Date(),
-          email: this.receivingEmail, // 接收者邮箱
-          sendUserType: this.userType, // 发送者类型
-          roomId: this.roomId, // 聊天室ID
-          isRead: false, // 新发送的图片消息默认未读
+      try {
+        // 显示上传中状态
+        this.$message({
+          message: "正在上传图片...",
+          type: "info",
         });
 
-        // 通过 WebSocket 发送图片消息
-        if (this.stompClient && this.stompClient.connected) {
-          this.stompClient.publish({
-            destination: "/send/message",
-            body: JSON.stringify({
-              content: imageUrl,
-              type: "image",
-              email: this.receivingEmail,
-              sendUserType: this.userType,
-              roomId: this.roomId
-            }),
+        // 准备FormData
+        const formData = new FormData();
+        formData.append("file", file);
+
+        // 上传文件到后端
+        const response = await getFileUpdate(formData);
+        console.log("文件上传返回:", response);
+
+        // 检查上传结果
+        if (response && response.code === 200 && response.data) {
+          // 从后端响应中获取图片信息
+          const imageData = response.data;
+          // 使用后端返回的URL
+          const imageUrl = this.formatImageUrl(imageData.url);
+
+          console.log("图片URL:", imageUrl); // 调试用：打印URL
+
+          // 添加用户图片消息到界面（本地显示）
+          this.messages.push({
+            type: "user",
+            text: "", // 保留空字符串
+            isImage: true,
+            imageUrl: imageUrl, // 确保URL正确
+            time: new Date(),
+            email: this.receivingEmail,
+            sendUserType: this.userType,
+            roomId: this.roomId,
+            isRead: false,
           });
+          // 通过WebSocket发送图片消息
+          if (this.stompClient && this.stompClient.connected) {
+            const message = {
+              content: imageUrl, // URL作为消息内容
+              type: 2, // 使用数字类型2表示图片消息
+              email: this.receivingEmail,
+              receiveUserType: 2,
+              roomId: this.roomId,
+            };
+
+            // 使用WebSocket发送消息
+            this.stompClient.send(
+              "/point/send/message",
+              {},
+              JSON.stringify(message)
+            );
+          }
+
+          this.$nextTick(() => {
+            this.scrollToBottom();
+          });
+        } else {
+          this.$message.error("图片上传失败: " + (response?.msg || "未知错误"));
         }
+      } catch (error) {
+        console.error("图片上传异常:", error);
+        this.$message.error("图片上传失败，请重试");
+      } finally {
+        // 清空input，允许重复选择同一文件
+        this.$refs.imageUpload.value = "";
+      }
+    },
 
-        this.$nextTick(() => {
-          this.scrollToBottom();
-        });
-      };
+    // 确保 URL 是完整的方法
+    formatImageUrl(url) {
+      if (!url) return "";
 
-      reader.readAsDataURL(file);
-      this.$refs.imageUpload.value = "";
+      // 如果已经是完整的 URL，直接返回
+      if (url.startsWith("http://") || url.startsWith("https://")) {
+        return url;
+      }
+
+      // 否则添加基础路径
+      return process.env.VUE_APP_BASE_URL + url;
     },
 
     // 预览图片
@@ -844,13 +1071,19 @@ updateMessageReadStatus(messageIds) {
 
   beforeDestroy() {
     this.disconnectWebSocket();
-    document.removeEventListener("click", this.handleClickOutside);
+
     // 移除滚动监听
     if (this.$refs.chatBody) {
       this.$refs.chatBody.removeEventListener("scroll", this.handleChatScroll);
     }
     // 移除页面可见性变化监听
-    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+    document.removeEventListener(
+      "visibilitychange",
+      this.handleVisibilityChange
+    );
+
+    // 断开 WebSocket 连接
+    this.disconnectWebSocket();
   },
 };
 </script>
@@ -1257,7 +1490,7 @@ updateMessageReadStatus(messageIds) {
   background-color: #f0f0f0;
   width: fit-content;
   margin: 0 auto 10px;
-  
+
   &:hover {
     background-color: #e0e0e0;
     color: #333;
@@ -1272,15 +1505,13 @@ updateMessageReadStatus(messageIds) {
 .chat-message-hint {
   margin: 5px 0;
   justify-content: center;
-  
+
   span {
     color: #999;
     font-size: 12px;
   }
 }
 
-
-
 .message-footer {
   display: flex;
   justify-content: space-between;
diff --git a/mining-pool/src/router/index.js b/mining-pool/src/router/index.js
index 87c6442..0197610 100644
--- a/mining-pool/src/router/index.js
+++ b/mining-pool/src/router/index.js
@@ -124,7 +124,7 @@ const childrenRoutes = [
         component: () => import('../views/customerService/index.vue'),
         meta: {title: '在线客服', 
           description:i18n.t(`seo.apiFile`),
-          allAuthority:[`all`],
+          allAuthority:[`customer_service`],//客服权限
           // keywords: 'M2Pool 矿池,API 文档,认证 token,接口调用,API file,authentication token,Interface call'
           keywords:{
             en: 'API file,authentication token,Interface call',
@@ -689,7 +689,10 @@ router.beforeEach((to, from, next) => {
         message:i18n.t(`mining.jurisdiction`),
         type: 'error'
       });
+
+      next({ path: `/${lang}` }) // 添加这行，重定向到首页
     }
+ 
   }else{
 
     
diff --git a/mining-pool/src/views/customerService/index.vue b/mining-pool/src/views/customerService/index.vue
index c9736e0..2558b64 100644
--- a/mining-pool/src/views/customerService/index.vue
+++ b/mining-pool/src/views/customerService/index.vue
@@ -24,12 +24,13 @@
             @click="selectContact(contact.roomId)"
           >
             <div class="cs-avatar">
-              <el-avatar :size="40" :src="getDefaultAvatar(contact.name)">
-                {{ contact.name ? contact.name.charAt(0) : "?" }}
-              </el-avatar>
+              <i class="iconfont icon-icon28" style="font-size: 2vw"></i>
               <span v-if="contact.unread" class="unread-badge">{{
                 contact.unread
               }}</span>
+
+              <!-- 添加游客标识 -->
+              <span v-if="contact.isGuest" class="guest-badge">游客</span>
             </div>
             <div class="cs-contact-info">
               <div class="cs-contact-name">
@@ -45,6 +46,15 @@
                 {{ contact.lastMessage }}
               </div>
             </div>
+            <!-- 添加重要标记图标 -->
+            <div
+              class="important-star"
+              :class="{ 'is-important': contact.important }"
+              @click.stop="toggleImportant(contact.roomId, !contact.important)"
+              title="标记为重要聊天"
+            >
+              <i class="el-icon-star-on"></i>
+            </div>
           </div>
         </div>
       </div>
@@ -84,12 +94,12 @@
           </div>
           <div class="cs-header-actions">
             <i class="el-icon-time" title="历史记录" @click="loadHistory"></i>
-            <i
+            <!-- <i
               class="el-icon-refresh"
               title="刷新"
               @click="refreshMessages"
-            ></i>
-            <i class="el-icon-more" title="更多选项"></i>
+            ></i> -->
+            <!-- <i class="el-icon-more" title="更多选项"></i> -->
           </div>
         </div>
 
@@ -100,6 +110,21 @@
             <p>您尚未选择联系人</p>
           </div>
           <template v-else>
+            <!-- 加载更多历史消息按钮 -->
+            <div
+              v-if="currentMessages.length > 0"
+              class="history-indicator"
+              @click="loadMoreHistory"
+              style="
+                cursor: pointer;
+                text-align: center;
+                color: #409eff;
+                margin-bottom: 10px;
+              "
+            >
+              <i class="el-icon-arrow-up"></i>
+              <span>加载更多历史消息</span>
+            </div>
             <div v-if="messagesLoading" class="cs-loading">
               <i class="el-icon-loading"></i>
               <p>加载消息中...</p>
@@ -119,11 +144,20 @@
                   {{ formatTime(message.time) }}
                 </div>
                 <div class="cs-message-content">
-                    <div class="cs-avatar">
-                    <el-avatar :size="36" :src="message.isSelf ? getDefaultAvatar('我') : getDefaultAvatar(message.sender)">
-                        {{ message.sender ? message.sender.charAt(0) : '?' }}
-                    </el-avatar>
-                    </div>
+                  <div class="cs-avatar">
+                    <i class="iconfont icon-icon28" style="font-size: 2vw"></i>
+
+                    <!-- <el-avatar
+                      :size="36"
+                      :src="
+                        message.isSelf
+                          ? getDefaultAvatar('我')
+                          : getDefaultAvatar(message.sender)
+                      "
+                    >
+                      {{ message.sender ? message.sender.charAt(0) : "?" }}
+                    </el-avatar> -->
+                  </div>
                   <div class="cs-bubble">
                     <div class="cs-sender">{{ message.sender }}</div>
                     <div v-if="!message.isImage" class="cs-text">
@@ -157,19 +191,19 @@
               style="display: none"
               @change="handleImageUpload"
             />
-            <i class="el-icon-folder-opened" title="发送文件"></i>
-            <i class="el-icon-s-opportunity" title="发送表情"></i>
-            <i class="el-icon-scissors" title="截图"></i>
+            <!-- <i class="el-icon-folder-opened" title="发送文件"></i> -->
+            <!-- <i class="el-icon-s-opportunity" title="发送表情"></i> -->
+            <!-- <i class="el-icon-scissors" title="截图"></i> -->
           </div>
-
+          <!-- @keydown.enter.prevent="sendMessage" -->
           <div class="cs-input-area">
             <el-input
               type="textarea"
               v-model="inputMessage"
               :rows="3"
               :disabled="!currentContact"
-              placeholder="请输入消息，按Enter键发送，按Ctrl+Enter键换行"
-              @keydown.enter.exact.prevent="sendMessage"
+              placeholder="请输入消息，按Enter键发送，按Ctrl+Enter键换行"          
+              @keydown.enter.native="handleKeyDown"
             ></el-input>
           </div>
 
@@ -179,6 +213,7 @@
               type="primary"
               :disabled="!currentContact || !inputMessage.trim() || sending"
               @click="sendMessage"
+                
             >
               <i v-if="sending" class="el-icon-loading"></i>
               <span v-else>发送</span>
@@ -208,6 +243,8 @@ import {
   getUpdateRoom,
   getFileUpdate,
 } from "../../api/customerService";
+// 正确导入 Client
+import { Client, Stomp } from "@stomp/stompjs";
 
 export default {
   name: "CustomerServiceChat",
@@ -223,345 +260,815 @@ export default {
       messagesLoading: false,
       sending: false,
       loadingRooms: true,
+      stompClient: null,
+      wsConnected: false,
+      userEmail: "497681109@qq.com", // 当前客服邮箱
+      userType: 1, // 0或者1  游客或者登录用户
+
+      loadingHistory: false, // 是否正在加载历史消息
+      userViewHistory: false, // 用户是否在浏览历史
+      userScrolled: false, // 新增：用户是否手动滚动过
+      history7Params: {
+        //7天历史消息参数
+        id: "", //最后一条消息id      
+        roomId: "", //聊天室id
+        userType: 2, //用户类型
+      },
+      historyAllParams: {
+        //7天以前的历史消息
+        id: "", //最后一条消息id     
+        roomId: "", //聊天室id
+        userType: 2, //用户类型
+      },
+      receiveUserType: "", //接收者类型
+      manualCreatedRooms: [], //手动创建的聊天室
     };
   },
   computed: {
     filteredContacts() {
+      //搜索联系人
       if (!this.searchText) {
         return this.contacts;
       }
-
       return this.contacts.filter((contact) =>
         contact.name.toLowerCase().includes(this.searchText.toLowerCase())
       );
     },
     currentContact() {
+      //选中联系人对象
       return this.contacts.find(
         (contact) => contact.roomId === this.currentContactId
       );
     },
     currentMessages() {
+      //当前聊天室消息
       return this.messages[this.currentContactId] || [];
     },
   },
-  methods: {
+
+  async created() {
+    // 初始化 WebSocket 连接
+    this.initWebSocket();
+
     // 获取聊天室列表
-    async fetchRoomList() {
-  try {
-    this.loadingRooms = true;
-    const response = await getRoomList();
+    await this.fetchRoomList();
 
-    console.log(response,"获取聊天室列表");
-    if (response && response.code === 200 ) {
-      this.contacts = response.rows.map(room => ({
-        roomId: room.id,
-        name: room.userEmail || '未命名聊天室',
-        avatar: this.getDefaultAvatar(room.roomName || '未命名聊天室'), // 使用默认头像
-        lastMessage: room.lastMessage || '暂无消息',
-        lastTime: room.lastTime || new Date(),
-        unread: room.unreadCount || 0,
-        important: room.important || false
-      }));
-    } else {
-      this.$message.error('获取聊天室列表失败');
+    // 默认选择第一个联系人
+    if (this.contacts.length > 0) {
+      this.selectContact(this.contacts[0].roomId);
     }
-  } catch (error) {
-    console.error('获取聊天室列表异常:', error);
-    this.$message.error('获取聊天室列表异常');
-  } finally {
-    this.loadingRooms = false;
-  }
-},
+    // 在组件创建时加载手动创建的聊天室
+    this.loadManualCreatedRooms();
+  },
+  async mounted() {
+    // 获取聊天室列表
+    await this.fetchRoomList();
 
-    // 选择联系人
-    async selectContact(roomId) {
-      if (this.currentContactId === roomId) return;
+    // 默认选择第一个联系人
+    if (this.contacts.length > 0) {
+      this.selectContact(this.contacts[0].roomId);
+    }
+    this.confirmUserType(); //确认用户类型
+    // 定时刷新聊天室列表，例如每30秒刷新一次
+    // this.roomListInterval = setInterval(() => {
+    //   this.fetchRoomList();
 
-      this.currentContactId = roomId;
+    //   // 如果有选中联系人，刷新消息
+    //   if (this.currentContactId) {
+    //     this.loadMessages(this.currentContactId);
+    //   }
+    // }, 30000);
 
-      // 如果没有该联系人的消息，则加载
-      if (!this.messages[roomId]) {
-        await this.loadMessages(roomId);
+    // 确保初始加载后滚动到底部
+    this.$nextTick(() => {
+      this.scrollToBottom();
+    });
+    // 添加滚动事件监听
+    this.$nextTick(() => {
+      if (this.$refs.messageContainer) {
+        this.$refs.messageContainer.addEventListener(
+          "scroll",
+          this.handleScroll
+        );
       }
+    });
+  },
+  methods: {
+    handleKeyDown(e) {
+      console.log("e:hhhhshshsshshshhh好的好的和", e);
+       // 如果按住了 Ctrl 键，则不发送消息（换行）
+      if (e.ctrlKey) {
+        return;
+      }
+      // 阻止默认行为
+      e.preventDefault();
+      // 发送消息
+      this.sendMessage();
+    },
+    confirmUserType() {
+      try {
+        const token = localStorage.getItem("token");
+
+        if (!token) {
+          // 游客身份
+          this.userType = 0;
+   
+       
+          this.userEmail = `guest_${Date.now()}_${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
+          return;
+        }
 
-      // 标记消息为已读
-      if (this.currentContact && this.currentContact.unread > 0) {
         try {
-          await getReadMessage({ roomId });
-          // 更新未读数
+          const userInfo = JSON.parse(
+            localStorage.getItem("jurisdiction") || "{}"
+          );
+          const email = JSON.parse(localStorage.getItem("userEmail") || "{}");
+
+          if (userInfo.roleKey === "customer_service") {
+            // 客服用户
+            this.userType = 2;
+            
+        
+          } else {
+            // 登录用户
+            this.userType = 1;
+          
+          
+          }
+          this.userEmail = email;
+        } catch (parseError) {
+          console.error("解析用户信息失败:", parseError);
+          // 解析失败时默认为游客
+          this.userType = 0;
+          this.userEmail = `guest_${Date.now()}_${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
+        }
+      } catch (error) {
+        console.error("获取用户信息失败:", error);
+        // 出错时默认为游客
+        this.userType = 0;
+        this.userEmail = `guest_${Date.now()}_${Math.random()
+          .toString(36)
+          .substr(2, 9)}`;
+      }
+    },
+
+    // 初始化 WebSocket 连接
+    initWebSocket() {
+      const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
+
+      this.stompClient = Stomp.client(wsUrl);
+
+      // 配置连接参数
+      const headers = {
+        email: this.userEmail,
+        type: 2,
+      };
+      // 连接并传入参数
+      this.stompClient.connect(
+        headers, // 连接参数
+        (frame) => {
+          // 连接成功回调
+          console.log("WebSocket Connected:", frame);
+          this.wsConnected = true;
+          this.subscribeToPersonalMessages();
+        },
+        (error) => {
+          // 连接错误回调
+          console.error("WebSocket Error:", error);
+          this.wsConnected = false;
+          this.$message.error("连接失败，正在重试...");
+        }
+      );
+
+      // 可选：配置心跳
+      this.stompClient.heartbeat.outgoing = 20000; // 20秒
+      this.stompClient.heartbeat.incoming = 20000;
+
+      // 可选：开启调试日志
+      this.stompClient.debug = function (str) {
+        console.log("STOMP: " + str);
+      };
+    },
+
+    // 获取当前的 UTC 时间
+    getUTCTime() {
+      const now = new Date();
+      return new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+    },
+    // 发送消息
+    async sendMessage() {
+      if (!this.inputMessage.trim() || !this.currentContact || this.sending)
+        return;
+
+      const messageContent = this.inputMessage.trim();
+      this.inputMessage = "";
+      this.sending = true;
+
+      try {
+        // 判断接收者类型
+
+        if (this.currentContact.sendUserType !== undefined) {
+          // 如果存在 sendUserType,使用它作为接收者类型
+          this.receiveUserType = this.currentContact.sendUserType;
+        } else {
+          // 默认为登录用户类型 1
+          this.receiveUserType = 1;
+        }
+
+        const message = {
+          content: messageContent,
+          type: 1, // 1 表示文字消息
+          email: this.currentContact.name,
+          receiveUserType: this.receiveUserType,
+          roomId: this.currentContactId,
+        };
+
+        // 发送消息
+        this.stompClient.send(
+          "/point/send/message",
+          {},
+          JSON.stringify(message)
+        );
+
+       // 添加到本地消息列表
+        this.addMessageToChat({
+          sender: "我",
+          content: messageContent,
+          time: new Date(),
+          isSelf: true,
+          isImage: false,
+          roomId: this.currentContactId,
+          type: 1
+        });
+
+        // 重置当前聊天室的未读消息数
+        const contact = this.contacts.find(
+          (c) => c.roomId === this.currentContactId
+        );
+        if (contact) {
+          contact.unread = 0;
+        }
+      } catch (error) {
+        console.error("发送消息失败:", error);
+        this.$message.error("发送消息失败，请重试");
+      } finally {
+        this.sending = false;
+      }
+    },
+
+    // 订阅个人消息队列
+    subscribeToPersonalMessages() {
+      if (!this.stompClient || !this.wsConnected) return;
+      this.stompClient.subscribe(
+        `/user/queue/${this.userEmail}`,
+        this.handleIncomingMessage
+      );
+    },
+
+    // 处理接收到的消息
+    handleIncomingMessage(message) {
+    const msg = JSON.parse(message.body);
+    
+    const messageData = {
+      id: msg.id,
+      sender: msg.sendEmail,
+      avatar: msg.sendUserType === 2 ? "iconfont icon-icon28" : "iconfont icon-user",
+      content: msg.content,
+      time: new Date(msg.sendTime),
+      isSelf: msg.sendUserType === this.userType && msg.sendEmail === this.userEmail,
+      isImage: msg.type === 2,
+      type: msg.type,
+      roomId: msg.roomId,
+      sendUserType: msg.sendUserType,
+      isCreate: msg.isCreate,
+      clientReadNum: msg.clientReadNum
+    };
+
+    // 新聊天室处理
+    if (messageData.isCreate) {
+      this.handleNewChatRoom(messageData);
+    }
+
+    this.updateChatRoomList(messageData);
+
+    // 当前聊天室消息
+    if (messageData.roomId === this.currentContactId) {
+      this.addMessageToChat(messageData);
+      this.markMessagesAsRead(messageData.roomId);
+    } else {
+      this.incrementUnreadCount(messageData.roomId, messageData.clientReadNum);
+    }
+  },
+
+    // 处理新聊天室创建
+    handleNewChatRoom(messageData) {
+      // 检查是否已存在该聊天室
+      const existingContact = this.contacts.find(
+        (c) => c.roomId === messageData.roomId
+      );
+      console.log("messageData:hhhhshshsshshshhh好的好的和", messageData);  
+
+    
+
+      // && messageData.isCreate && messageData.sender
+      if (!existingContact) {//只需要判断是否在联系人列表中存在 如果不在就创建新的聊天室对象 
+        // 创建新的聊天室对象
+        const newContact = {
+          roomId: messageData.roomId,
+          name: messageData.sender,
+          lastMessage: messageData.isImage ? "[图片]" : messageData.content,
+          lastTime: messageData.time,
+          unread: 1,
+          important: false,
+          isGuest: messageData.sendUserType === 0,
+          sendUserType: messageData.sendUserType,
+          isManualCreated: true, // 新增：标记为手动创建
+          clientReadNum: messageData.clientReadNum, //未读条数
+        };
+
+        // 添加到聊天列表
+        this.contacts.push(newContact);
+
+        // 初始化该聊天室的消息数组
+        this.$set(this.messages, messageData.roomId, []);
+
+        // 将当前消息添加到聊天记录中
+        this.messages[messageData.roomId].push({
+          id: messageData.id,
+          sender: messageData.sender,
+          avatar:
+            messageData.sendUserType === 2
+              ? "iconfont icon-icon28"
+              : "iconfont icon-user",
+          content: messageData.content,
+          time: messageData.time,
+          isSelf: false,
+          isImage: messageData.type === 2,
+          type: messageData.type,
+          roomId: messageData.roomId,
+        });
+
+        // 保存到手动创建的聊天室列表
+        this.manualCreatedRooms.push(newContact);
+        this.saveManualCreatedRooms();
+
+        this.sortContacts();
+      }
+    },
+
+    saveManualCreatedRooms() {
+      localStorage.setItem(
+        "manualCreatedRooms",
+        JSON.stringify(this.manualCreatedRooms)
+      );
+    },
+
+    // 从 localStorage 加载手动创建的聊天室
+    async loadManualCreatedRooms() {
+      try {
+        const savedRooms = localStorage.getItem("manualCreatedRooms");
+        if (savedRooms) {
+          this.manualCreatedRooms = JSON.parse(savedRooms);
+
+          // 将手动创建的聊天室添加到当前联系人列表
+          for (const room of this.manualCreatedRooms) {
+            const exists = this.contacts.find((c) => c.roomId === room.roomId);
+            if (!exists) {
+              this.contacts.push({
+                ...room,
+                lastTime: new Date(room.lastTime),
+              });
+
+              // 初始化消息数组
+              if (!this.messages[room.roomId]) {
+                this.$set(this.messages, room.roomId, []);
+                // 如果需要,可以在这里加载该聊天室的历史消息
+                await this.loadMessages(room.roomId);
+              }
+            }
+          }
+          this.sortContacts();
+        }
+      } catch (error) {
+        console.error("加载手动创建的聊天室失败:", error);
+      }
+    },
+    // 更新聊天室列表
+    updateChatRoomList(messageData) {
+      // 寻找现有联系人
+      const contactIndex = this.contacts.findIndex(
+        (c) => c.roomId === messageData.roomId
+      );
+
+      if (contactIndex !== -1) {
+        // 更新现有联系人的最后消息和时间
+        const contact = this.contacts[contactIndex];
+        contact.lastMessage = messageData.isImage
+          ? "[图片]"
+          : messageData.content;
+        contact.lastTime = messageData.time;
+
+        // 重新排序联系人列表，将最新消息的联系人移到前面
+        this.sortContacts();
+      }
+    },
+    // 修改标记为已读方法，添加参数支持
+    async markMessagesAsRead(roomId = this.currentContactId) {
+      if (!roomId) return;
+
+      try {
+        const data = {
+          roomId: roomId,
+          userType:2,
+        };
+
+        const response = await getReadMessage(data);
+
+        if (response && response.code === 200) {
+          console.log("消息已标记为已读");
+
+          // 更新联系人列表中的未读计数
           const contact = this.contacts.find((c) => c.roomId === roomId);
           if (contact) {
             contact.unread = 0;
           }
-        } catch (error) {
-          console.error("标记消息已读失败:", error);
+        } else {
+          console.warn("标记消息已读失败", response);
         }
+      } catch (error) {
+        console.error("标记消息已读出错:", error);
       }
-
-      this.$nextTick(() => {
-        this.scrollToBottom();
-      });
     },
 
-    // 加载聊天消息
-    async loadMessages(roomId) {
-  if (!roomId) return;
-  
-  try {
-    this.messagesLoading = true;
-    
-    // 获取最近7天的消息
-    const response = await getHistory7();
-    
-    if (response && response.code === 200 && response.data) {
-      // 过滤出当前聊天室的消息
-      const roomMessages = response.data
-        .filter(msg => msg.roomId === roomId)
-        .map(msg => ({
-          sender: msg.senderName || '未知发送者',
-          avatar: msg.isSelf ? this.getDefaultAvatar('我') : this.getDefaultAvatar(msg.senderName || '未知发送者'), // 使用默认头像
-          content: msg.content,
-          time: new Date(msg.createTime),
-          isSelf: msg.isSelf,
-          isImage: msg.type === 'image'
-        }));
-      
-      // 更新消息列表
-      this.$set(this.messages, roomId, roomMessages);
-    } else {
-      this.$message.warning('获取聊天记录失败');
-      this.$set(this.messages, roomId, []);
-    }
-  } catch (error) {
-    console.error('加载消息异常:', error);
-    this.$message.error('加载消息异常');
-    this.$set(this.messages, roomId, []);
-  } finally {
-    this.messagesLoading = false;
-  }
-},
+    // 解析 UTC 时间字符串
+    parseUTCTime(timeStr) {
+      if (!timeStr) return new Date(); // 如果没有时间，返回当前时间
+      try {
+        return new Date(timeStr); // 直接解析 UTC 时间
+      } catch (error) {
+        console.error("解析时间错误:", error);
+        return new Date();
+      }
+    },
 
-    // 加载历史消息(7天前)
-    async loadHistory() {
+    // 获取聊天室列表
+    async fetchRoomList() {
+      try {
+        this.loadingRooms = true;
+        const response = await getRoomList();
+        if (response?.code === 200) {
+          // 创建全新的联系人数组
+          const newContacts = response.rows.map((room) => {
+            // 查找旧联系人中是否存在相同roomId
+            const existingContact = this.contacts.find(
+              (c) => c.roomId === room.id
+            );
+
+            const isImportant =
+              room.flag === 1
+                ? true
+                : room.flag === 0
+                ? false
+                : room.important === 1
+                ? true
+                : existingContact
+                ? existingContact.important
+                : false;
+
+            return {
+              roomId: room.id,
+              name: room.userEmail || "未命名聊天室",
+              avatar: this.getDefaultAvatar(room.roomName || "未命名聊天室"),
+              lastMessage: room.lastMessage || "暂无消息",
+              lastTime: room.lastUserSendTime
+                ? new Date(room.lastUserSendTime)
+                : new Date(),
+              unread: existingContact?.unread ?? room.unreadCount ?? 0,
+              important: isImportant,
+              isManualCreated: existingContact?.isManualCreated || false, // 保持手动创建标记
+            };
+          });
+
+          // 合并手动创建的聊天室
+          this.manualCreatedRooms.forEach((room) => {
+            const exists = newContacts.find((c) => c.roomId === room.roomId);
+            if (!exists) {
+              newContacts.push({
+                ...room,
+                lastTime: new Date(room.lastTime),
+              });
+            }
+          });
+
+          // 更新联系人列表
+          this.contacts = newContacts;
+          this.sortContacts();
+        }
+      } catch (error) {
+        console.error("获取聊天室列表异常:", error);
+        this.$message.error("获取聊天室列表异常");
+      } finally {
+        this.loadingRooms = false;
+      }
+    },
+
+    // 加载更多历史消息
+    async loadMoreHistory() {
       if (!this.currentContactId) return;
+   
+      // 获取当前已加载的消息列表
+      const currentMsgs = this.messages[this.currentContactId] || [];
+
+      // 取最后一条消息的id
+      const lastMsg =
+        currentMsgs.length > 0 ? currentMsgs[currentMsgs.length - 1] : null;
+      this.history7Params.id = lastMsg ? lastMsg.id : "";
+      // this.history7Params.pageNum += 1; // 递增页码
+      this.history7Params.roomId = this.currentContactId;
+  
 
       try {
         this.messagesLoading = true;
-
-        const response = await getHistory();
-
+        const response = await getHistory7(this.history7Params);
         if (response && response.code === 200 && response.data) {
-          // 过滤出当前聊天室的历史消息
-          const historyMessages = response.data
+          let moreMessages = response.data
             .filter((msg) => msg.roomId === this.currentContactId)
             .map((msg) => ({
-              sender: msg.senderName || "未知发送者",
-              avatar: msg.avatar,
+              id: msg.id,
+              sender: msg.isSelf === 1 ? "我" : msg.sendEmail || "未知发送者",
+              avatar: "iconfont icon-icon28",
               content: msg.content,
               time: new Date(msg.createTime),
-              isSelf: msg.isSelf,
-              isImage: msg.type === "image",
+              isSelf: msg.isSelf === 1,
+              isImage: msg.type === 2,
+              isRead: msg.isRead === 1,
+              type: msg.type,
+              roomId: msg.roomId,
             }));
 
-          // 合并消息
-          const currentMessages = this.messages[this.currentContactId] || [];
+          moreMessages = moreMessages.sort((a, b) => a.time - b.time);
 
-          // 将历史消息放在前面
+          // 追加到当前消息列表前面
+          const oldMessages = this.messages[this.currentContactId] || [];
           this.$set(this.messages, this.currentContactId, [
-            ...historyMessages,
-            ...currentMessages,
+            ...moreMessages,
+            ...oldMessages,
           ]);
-
-          this.$message.success("已加载历史消息");
         } else {
           this.$message.warning("没有更多历史消息");
         }
       } catch (error) {
-        console.error("加载历史消息异常:", error);
-        this.$message.error("加载历史消息异常");
+        this.$message.error("加载更多历史消息失败");
       } finally {
         this.messagesLoading = false;
       }
     },
 
-    // 刷新当前聊天消息
-    async refreshMessages() {
-      if (!this.currentContactId) return;
-      await this.loadMessages(this.currentContactId);
-    },
-
-    // 发送消息
-    async sendMessage() {
-  if (!this.inputMessage.trim() || !this.currentContact || this.sending) return;
-  
-  const messageContent = this.inputMessage.trim();
-  this.inputMessage = '';
-  this.sending = true;
+    // 选择联系人
+    async selectContact(roomId) {
+  if (this.currentContactId === roomId) return;
   
   try {
-    // 这里应该有一个发送消息的API，假设是通过websocket或API发送
-    // 因为示例代码中没有提供发送消息的API，这里模拟发送
+    this.messagesLoading = true; // 显示加载状态
+    this.currentContactId = roomId;
+    this.userViewHistory = false;
     
-    // 先显示本地消息
-    if (!this.messages[this.currentContactId]) {
-      this.$set(this.messages, this.currentContactId, []);
-    }
-    
-    this.messages[this.currentContactId].push({
-      sender: '我',
-      avatar: this.getDefaultAvatar('我'), // 使用默认头像
-      content: messageContent,
-      time: new Date(),
-      isSelf: true,
-      isImage: false
-    });
-    
-    // 更新最后一条消息
-    const currentContact = this.contacts.find(c => c.roomId === this.currentContactId);
-    if (currentContact) {
-      currentContact.lastMessage = messageContent;
-      currentContact.lastTime = new Date();
-    }
+    // 重置分页参数
+    this.history7Params = {
+      id: "", // 首次加载为空
+      // pageNum: 1, // 首次页码为1
+      roomId: roomId,
+      userType:2,
+    };
+
+    // 加载历史消息
+    await this.loadMessages(roomId);
     
+    // 标记消息为已读
+    await this.markMessagesAsRead(roomId);
+
+  } catch (error) {
+    console.error("选择联系人失败:", error);
+    this.$message.error("加载聊天记录失败");
+  } finally {
+    this.messagesLoading = false;
     // 滚动到底部
     this.$nextTick(() => {
       this.scrollToBottom();
     });
+  }
+},
+    //判断是否在聊天框底部
+    isAtBottom() {
+      const container = this.$refs.messageContainer;
+      if (!container) return true;
+      // 允许2px误差
+      return (
+        container.scrollHeight - container.scrollTop - container.clientHeight <
+        2
+      );
+    },
+
+    // 加载聊天消息
+    async loadMessages(roomId) {
+  if (!roomId) return;
+
+  try {
+    const response = await getHistory7(this.history7Params);
     
-    // 模拟发送延迟
-    await this.simulateMessageSending();
+    if (response?.code === 200 && response.data) {
+      // 处理消息数据
+      let roomMessages = response.data
+        .filter(msg => msg.roomId == roomId)
+        .map(msg => ({
+          id: msg.id,
+          sender: msg.isSelf === 1 ? "我" : msg.sendEmail || "未知发送者",
+          avatar: msg.sendUserType == 2 ? "iconfont icon-icon28" : "iconfont icon-user",
+          content: msg.content,
+          time: new Date(msg.createTime),
+          isSelf: msg.isSelf === 1,
+          isImage: msg.type === 2,
+          isRead: msg.isRead === 1,
+          type: msg.type,
+          roomId: msg.roomId,
+          sendUserType: msg.sendUserType
+        }));
+
+      // 按时间排序
+      roomMessages = roomMessages.sort((a, b) => a.time - b.time);
+
+      // 更新消息列表
+      this.$set(this.messages, roomId, roomMessages);
+
+      // 更新联系人的未读状态
+      const contact = this.contacts.find(c => c.roomId === roomId);
+      if (contact) {
+        contact.unread = 0;
+      }
+
+    } else {
+      // 如果没有消息数据，初始化为空数组
+      this.$set(this.messages, roomId, []);
+      if (response?.code !== 200) {
+        this.$message.warning("获取聊天记录失败");
+      }
+    }
   } catch (error) {
-    console.error('发送消息失败:', error);
-    this.$message.error('发送消息失败，请重试');
-  } finally {
-    this.sending = false;
+    console.error("加载消息异常:", error);
+    this.$message.error("加载消息异常");
+    this.$set(this.messages, roomId, []);
   }
 },
 
-    // 模拟消息发送请求
-    simulateMessageSending() {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      // 模拟服务器响应
-      this.messages[this.currentContactId].push({
-        sender: this.currentContact.name,
-        avatar: this.getDefaultAvatar(this.currentContact.name), // 使用默认头像
-        content: '已收到您的消息，我们会尽快回复。',
-        time: new Date(),
-        isSelf: false,
-        isImage: false
-      });
-      
-      // 更新最后一条消息
-      const currentContact = this.contacts.find(c => c.roomId === this.currentContactId);
-      if (currentContact) {
-        currentContact.lastMessage = '已收到您的消息，我们会尽快回复。';
-      }
-      
+ // 添加消息到聊天记录
+ addMessageToChat(messageData) {
+    const roomId = messageData.roomId || this.currentContactId;
+    
+    // 如果该聊天室的消息数组不存在，则初始化
+    if (!this.messages[roomId]) {
+      this.$set(this.messages, roomId, []);
+    }
+
+    // 构造消息对象
+    const message = {
+      id: messageData.id,
+      sender: messageData.sender,
+      avatar: messageData.avatar || (messageData.isSelf ? "iconfont icon-icon28" : "iconfont icon-user"),
+      content: messageData.content,
+      time: messageData.time || new Date(),
+      isSelf: messageData.isSelf,
+      isImage: messageData.isImage || false,
+      type: messageData.type || 1,
+      roomId: roomId,
+      isRead: messageData.isRead || false
+    };
+
+    // 添加消息到数组
+    this.messages[roomId].push(message);
+
+    // 更新最后一条消息
+    this.updateContactLastMessage({
+      roomId: roomId,
+      content: message.content,
+      isImage: message.isImage
+    });
+
+    // 如果是当前聊天室且用户在底部，滚动到底部
+    if (roomId === this.currentContactId && !this.userViewHistory) {
       this.$nextTick(() => {
         this.scrollToBottom();
       });
-      
-      resolve();
-    }, 1000);
-  });
-},
-
-    // 打开图片上传控件
-    openImageUpload() {
-      if (!this.currentContact) return;
-      this.$refs.imageInput.click();
-    },
+    }
+  },
 
     // 处理图片上传
     async handleImageUpload(event) {
-  const file = event.target.files[0];
-  if (!file) return;
-  
-  // 检查文件类型
-  if (!file.type.startsWith('image/')) {
-    this.$message.warning('只能上传图片文件!');
-    return;
-  }
-  
-  // 检查文件大小 (5MB限制)
-  const maxSize = 5 * 1024 * 1024;
-  if (file.size > maxSize) {
-    this.$message.warning('图片大小不能超过5MB!');
-    return;
-  }
-  
-  this.sending = true;
-  
-  try {
-    // 创建FormData对象
-    const formData = new FormData();
-    formData.append('file', file);
-    
-    // 调用文件上传API
-    const response = await getFileUpdate(formData);
-    
-    if (response && response.code === 200 && response.data) {
-      const imageUrl = response.data.url; // 假设API返回图片URL
-      
-      // 添加图片消息
-      if (!this.messages[this.currentContactId]) {
-        this.$set(this.messages, this.currentContactId, []);
+      if (!this.currentContact || !this.wsConnected) return;
+
+      const file = event.target.files[0];
+      if (!file) return;
+
+      // 检查是否为图片
+      if (!file.type.startsWith("image/")) {
+        this.$message.warning("只能上传图片文件!");
+        return;
       }
-      
-      this.messages[this.currentContactId].push({
-        sender: '我',
-        avatar: this.getDefaultAvatar('我'), // 使用默认头像
-        content: imageUrl,
-        time: new Date(),
-        isSelf: true,
-        isImage: true
-      });
-      
-      // 更新最后一条消息
-      const currentContact = this.contacts.find(c => c.roomId === this.currentContactId);
-      if (currentContact) {
-        currentContact.lastMessage = '[图片]';
-        currentContact.lastTime = new Date();
+
+      // 检查文件大小 (限制为5MB)
+      const maxSize = 5 * 1024 * 1024;
+      if (file.size > maxSize) {
+        this.$message.warning("图片大小不能超过5MB!");
+        return;
       }
-      
-      // 滚动到底部
-      this.$nextTick(() => {
-        this.scrollToBottom();
-      });
-      
-      // 模拟接收回复
-      setTimeout(() => {
-        this.messages[this.currentContactId].push({
-          sender: this.currentContact.name,
-          avatar: this.getDefaultAvatar(this.currentContact.name), // 使用默认头像
-          content: '已收到您的图片，我们会尽快查看。',
-          time: new Date(),
-          isSelf: false,
-          isImage: false
-        });
-        
-        // 更新最后一条消息
-        if (currentContact) {
-          currentContact.lastMessage = '已收到您的图片，我们会尽快查看。';
+
+      this.sending = true;
+
+      try {
+        // 准备FormData
+        const formData = new FormData();
+        formData.append("file", file);
+
+        this.$message.info("正在上传图片...");
+
+        // 调用API上传图片到后端
+        const response = await getFileUpdate(formData);
+        console.log("图片上传响应:", response);
+
+        if (response && response.code === 200 && response.data) {
+          // 获取后端返回的图片信息
+          const imageData = response.data;
+          const imageUrl = imageData.url;
+
+          console.log("后端返回的图片URL:", imageUrl);
+
+          // 构建WebSocket消息对象
+          const message = {
+            content: imageUrl, // 使用后端返回的URL作为内容
+            type: 2, // 类型2表示图片消息
+            email: this.currentContact.name,
+            receiveUserType: this.userType,
+            roomId: this.currentContactId,
+          };
+
+          // 发送WebSocket消息
+          this.stompClient.send(
+            "/point/send/message",
+            {},
+            JSON.stringify(message)
+          );
+
+          // 添加到本地消息列表以在UI中显示
+          this.addMessageToChat({
+            sender: "我",
+            avatar: "iconfont icon-icon28",
+            content: imageUrl,
+            time: new Date(),
+            isSelf: true,
+            isImage: true, // 标记为图片消息
+          });
+
+          this.$message.success("图片已发送");
+        } else {
+          this.$message.error("图片上传失败: " + (response?.msg || "未知错误"));
         }
-        
-        this.$nextTick(() => {
-          this.scrollToBottom();
-        });
-      }, 1000);
-    } else {
-      this.$message.error('图片上传失败');
-    }
-  } catch (error) {
-    console.error('上传图片异常:', error);
-    this.$message.error('上传图片异常');
-  } finally {
-    this.sending = false;
-    // 重置文件输入
-    this.$refs.imageInput.value = '';
-  }
-},
+      } catch (error) {
+        console.error("上传图片异常:", error);
+        this.$message.error("上传图片失败，请重试");
+      } finally {
+        this.sending = false;
+        // 清空文件选择器，以便于用户可以再次选择同一个文件
+        this.$refs.imageInput.value = "";
+      }
+    },
+
+    // 更新联系人最后一条消息
+    updateContactLastMessage(message) {
+      const contact = this.contacts.find((c) => c.roomId === message.roomId);
+      if (contact) {
+        contact.lastMessage = message.isImage ? "[图片]" : message.content;
+        contact.lastTime = new Date(); // 使用当前时间或消息时间
+
+        // 重新排序联系人列表
+        this.sortContacts();
+      }
+    },
+
+    // 增加未读消息计数
+    incrementUnreadCount(roomId, readNum = 1) {
+      const contact = this.contacts.find((c) => c.roomId === roomId);
+      if (contact) {
+        // 如果有指定未读数，直接设置，否则增加1
+        if (readNum > 1) {
+          contact.unread = readNum;
+        } else {
+          contact.unread = (contact.unread || 0) + 1;
+        }
+      }
+    },
 
     // 预览图片
     previewImage(imageUrl) {
@@ -574,7 +1081,11 @@ export default {
       if (!roomId) return;
 
       try {
-        const response = await getUpdateRoom({ roomId, important });
+        // 发送请求，使用 id 和 flag 参数
+        const response = await getUpdateRoom({
+          id: roomId,
+          flag: important ? 1 : 0, // 1代表重要，0代表不重要
+        });
 
         if (response && response.code === 200) {
           // 更新本地数据
@@ -583,9 +1094,12 @@ export default {
             contact.important = important;
           }
 
+          // 重新排序联系人列表，使重要的排在前面
+          this.sortContacts();
+
           this.$message.success(important ? "已标记为重要" : "已取消重要标记");
         } else {
-          this.$message.error("标记操作失败");
+          this.$message.error(response?.msg || "标记操作失败");
         }
       } catch (error) {
         console.error("标记聊天状态异常:", error);
@@ -593,12 +1107,34 @@ export default {
       }
     },
 
+    // 根据重要性对联系人列表排序
+    sortContacts() {
+      this.contacts.sort((a, b) => {
+        // 首先按重要性排序（重要的在前）
+        if (a.important && !b.important) return -1;
+        if (!a.important && b.important) return 1;
+
+        // 确保日期转换正确
+        const aTime =
+          a.lastTime instanceof Date ? a.lastTime : new Date(a.lastTime || 0);
+        const bTime =
+          b.lastTime instanceof Date ? b.lastTime : new Date(b.lastTime || 0);
+
+        // 其次按最后消息时间排序（最新的在前）
+        return bTime.getTime() - aTime.getTime();
+      });
+    },
+
     // 滚动到底部
     scrollToBottom() {
-      if (this.$refs.messageContainer) {
-        this.$refs.messageContainer.scrollTop =
-          this.$refs.messageContainer.scrollHeight;
-      }
+      const container = this.$refs.messageContainer;
+      if (!container) return;
+
+      // 使用平滑滚动
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: "smooth",
+      });
     },
 
     // 判断是否显示时间
@@ -699,36 +1235,101 @@ export default {
 
       // 获取名称首字母
       const initial = name.charAt(0).toUpperCase();
-
+      return initial;
       // 生成占位头像URL
-      return `https://via.placeholder.com/40/${color.substring(
-        1
-      )}/FFFFFF?text=${initial}`;
+    },
+    // 处理滚动事件
+    handleScroll() {
+      // 如果滚动到底部，重置标记
+      if (this.isAtBottom()) {
+        this.userViewHistory = false;
+      } else {
+        // 用户滚动到其他位置，标记为正在查看历史
+        this.userViewHistory = true;
+      }
+    },
+
+    // 加载历史消息(7天前)
+    async loadHistory() {
+      this.loadingHistory = true;
+      this.userViewHistory = true; // 用户主动查看历史
+      console.log("哇哈哈哈哈哈哈", this.currentContactId);
+      if (!this.currentContactId) return;
+
+      try {
+        this.messagesLoading = true;
+
+        const response = await getHistory({ roomId: this.currentContactId });
+
+        if (response && response.code === 200 && response.data) {
+          let historyMessages = response.data
+            .filter((msg) => msg.roomId === this.currentContactId)
+            .map((msg) => ({
+              id: msg.id,
+              sender: msg.sendEmail,
+              avatar: "iconfont icon-icon28",
+              content: msg.content,
+              time: new Date(msg.createTime),
+              isSelf: msg.isSelf === 1,
+              isImage: msg.type === 2,
+              isRead: msg.isRead === 1,
+              type: msg.type,
+              roomId: msg.roomId,
+            }));
+
+          historyMessages = historyMessages.sort((a, b) => a.time - b.time);
+          const currentMessages = this.messages[this.currentContactId] || [];
+
+          this.$set(this.messages, this.currentContactId, [
+            ...historyMessages,
+            ...currentMessages,
+          ]);
+
+          this.$message.success("已加载历史消息");
+        } else {
+          this.$message.warning("没有更多历史消息");
+        }
+      } catch (error) {
+        console.error("加载历史消息异常:", error);
+        this.$message.error("加载历史消息异常");
+      } finally {
+        this.messagesLoading = false;
+        this.loadingHistory = false;
+      }
+    },
+
+    // 刷新当前聊天消息
+    async refreshMessages() {
+      if (!this.currentContactId) return;
+      await this.loadMessages(this.currentContactId);
+    },
+
+    // 打开图片上传控件
+    openImageUpload() {
+      if (!this.currentContact) return;
+      this.$refs.imageInput.click();
     },
   },
-  async mounted() {
-    // 获取聊天室列表
-    await this.fetchRoomList();
 
-    // 默认选择第一个联系人
-    if (this.contacts.length > 0) {
-      this.selectContact(this.contacts[0].roomId);
+  beforeDestroy() {
+    if (this.stompClient) {
+      if (this.stompClient.connected) {
+        this.stompClient.disconnect(() => {
+          console.log("WebSocket 已断开连接");
+        });
+      }
     }
 
-    // 定时刷新聊天室列表，例如每30秒刷新一次
-    this.roomListInterval = setInterval(() => {
-      this.fetchRoomList();
+    // if (this.roomListInterval) {
+    //   clearInterval(this.roomListInterval);
+    // }
 
-      // 如果有选中联系人，刷新消息
-      if (this.currentContactId) {
-        this.loadMessages(this.currentContactId);
-      }
-    }, 30000);
-  },
-  beforeDestroy() {
-    // 清除定时器
-    if (this.roomListInterval) {
-      clearInterval(this.roomListInterval);
+    // 移除滚动事件监听
+    if (this.$refs.messageContainer) {
+      this.$refs.messageContainer.removeEventListener(
+        "scroll",
+        this.handleScroll
+      );
     }
   },
 };
@@ -1043,4 +1644,67 @@ export default {
     max-height: 150px;
   }
 }
+
+/* 添加重要标记样式 */
+.important-star {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  margin-left: 5px;
+  color: #c0c4cc; /* 默认灰色 */
+  transition: color 0.3s;
+}
+
+.important-star:hover {
+  color: #ac85e0; /* 鼠标悬停时的颜色 */
+}
+
+.important-star.is-important {
+  color: #ac85e0; /* 重要标记时的紫色 */
+}
+
+.important-star i {
+  font-size: 16px;
+}
+
+/* 调整联系人项目布局 */
+.cs-contact-item {
+  display: flex;
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s;
+  align-items: center; /* 确保垂直居中 */
+}
+
+/* 重要标签的样式调整 */
+.important-tag {
+  color: #ac85e0; /* 紫色标签 */
+  font-size: 12px;
+  margin-right: 4px;
+  font-weight: bold;
+}
+
+/* 游客标记样式 */
+.guest-badge {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  background-color: #67c23a;
+  color: white;
+  font-size: 10px;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  border-radius: 8px;
+}
+
+/* 游客聊天室项的背景稍微区分 */
+.cs-contact-item.is-guest {
+  background-color: #f9f9f9;
+}
 </style>
\ No newline at end of file
diff --git a/mining-pool/src/views/submitWorkOrder/index.vue b/mining-pool/src/views/submitWorkOrder/index.vue
index 52c0c14..dfe2d42 100644
--- a/mining-pool/src/views/submitWorkOrder/index.vue
+++ b/mining-pool/src/views/submitWorkOrder/index.vue
@@ -24,8 +24,8 @@
                 show-word-limit
                 v-model="ruleForm.desc">
                 </el-input>
-        </el-form-item>
-     
+            </el-form-item>
+            
        
         <el-form-item style="width: 100%;">
           <div style="width: 100%;font-weight: 600;color: rgba(0,0,0,0.7);">{{ $t(`work.enclosure`) }}</div>