From a33b1bff7ede08bb4872acbe90abc1fec984e400 Mon Sep 17 00:00:00 2001
From: Vinjor <vinjorm@gmail.com>
Date: Tue, 2 Sep 2025 15:53:57 +0800
Subject: [PATCH] 1

---
 .../com/ruoyi/busi/domain/BusiChatMain.java   |   4 +
 .../service/impl/BusiChatMainServiceImpl.java |   2 +
 .../src/main/resources/application-druid.yml  |  12 +-
 .../mapper/busi/BusiChatMainMapper.xml        |  12 +-
 dl_vue/.env.development                       |   2 +-
 dl_vue/.env.production                        |   4 +-
 dl_vue/src/views/busi/chatMain/chatForm.vue   | 497 ++++++++++++++----
 .../src/views/busi/chatMain/messageList.vue   | 137 +++--
 8 files changed, 514 insertions(+), 156 deletions(-)

diff --git a/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/domain/BusiChatMain.java b/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/domain/BusiChatMain.java
index 84fb13b..763fa3b 100644
--- a/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/domain/BusiChatMain.java
+++ b/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/domain/BusiChatMain.java
@@ -80,4 +80,8 @@ public class BusiChatMain extends DlBaseEntity
     /** 未读消息数量 */
     @TableField(exist = false)
     private Integer unreadCount;
+
+    /** 产品名称 */
+    @TableField(exist = false)
+    private String prodName;
 }
diff --git a/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/service/impl/BusiChatMainServiceImpl.java b/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/service/impl/BusiChatMainServiceImpl.java
index 68d3432..d697ba8 100644
--- a/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/service/impl/BusiChatMainServiceImpl.java
+++ b/dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/service/impl/BusiChatMainServiceImpl.java
@@ -118,6 +118,8 @@ public class BusiChatMainServiceImpl extends ServiceImpl<BusiChatMainMapper,Busi
         for (BusiChatMain session : sessions) {
             session.setUnreadCount(busiChatItemService.selectUnreadCount(session.getId(),DATA_FROM_CUSTOMER));
         }
+        //对会话未读消息数量进行倒叙排列
+        sessions.sort((o1, o2) -> o2.getUnreadCount() - o1.getUnreadCount());
         return sessions;
     }
 
diff --git a/dl_admin/ruoyi-admin/src/main/resources/application-druid.yml b/dl_admin/ruoyi-admin/src/main/resources/application-druid.yml
index d0d4dc8..c6a11ed 100644
--- a/dl_admin/ruoyi-admin/src/main/resources/application-druid.yml
+++ b/dl_admin/ruoyi-admin/src/main/resources/application-druid.yml
@@ -5,15 +5,15 @@ spring:
         driverClassName: com.mysql.cj.jdbc.Driver
         druid:
             # 主库数据源-点亮开发库
-#            master:
-#                url: jdbc:mysql://82.156.161.160:3306/dl_site_system?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
-#                username: site
-#                password: 123456
-             #主库数据源-客户测试服务器
             master:
-                url: jdbc:mysql://127.0.0.1:3306/dl_site_system?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+                url: jdbc:mysql://82.156.161.160:3306/dl_site_system?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                 username: site
                 password: 123456
+             #主库数据源-客户测试服务器
+#            master:
+#                url: jdbc:mysql://127.0.0.1:3306/dl_site_system?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+#                username: site
+#                password: 123456
             # 从库数据源
             slave:
                 # 从数据源开关/默认关闭
diff --git a/dl_admin/ruoyi-admin/src/main/resources/mapper/busi/BusiChatMainMapper.xml b/dl_admin/ruoyi-admin/src/main/resources/mapper/busi/BusiChatMainMapper.xml
index e6ae135..5d15daa 100644
--- a/dl_admin/ruoyi-admin/src/main/resources/mapper/busi/BusiChatMainMapper.xml
+++ b/dl_admin/ruoyi-admin/src/main/resources/mapper/busi/BusiChatMainMapper.xml
@@ -134,13 +134,15 @@
     </select>
     <select id="selectByServiceId" resultType="com.ruoyi.busi.domain.BusiChatMain">
         SELECT
-            *
+            dbcm.*,
+            dbpn.title AS prodName
         FROM
-            dl_busi_chat_main
+            dl_busi_chat_main dbcm
+                LEFT JOIN dl_busi_prod_new dbpn ON dbcm.prod_id = dbpn.id
         WHERE
-            user_id = #{serviceId}
-          AND `status` = 1
-          AND del_flag = '0'
+            dbcm.user_id =#{serviceId}
+          AND dbcm.`status` = 1
+          AND dbcm.del_flag = '0'
     </select>
     <select id="selectActiveSession" resultType="com.ruoyi.busi.domain.BusiChatMain">
         SELECT
diff --git a/dl_vue/.env.development b/dl_vue/.env.development
index 63c54c0..e81affd 100644
--- a/dl_vue/.env.development
+++ b/dl_vue/.env.development
@@ -14,4 +14,4 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 VUE_APP_WEBSOCKET = 'ws://localhost:8099/ws/asset/'
 
 # 产品、文章预览
-VUE_APP_PREVIEW = 'http://www.lighting-it.cn/admin-preview/'
+VUE_APP_PREVIEW = 'http://192.168.1.13:3001/admin-preview/'
diff --git a/dl_vue/.env.production b/dl_vue/.env.production
index 097cffc..fa7d2ed 100644
--- a/dl_vue/.env.production
+++ b/dl_vue/.env.production
@@ -5,10 +5,10 @@ VUE_APP_TITLE = 成事达管理平台
 ENV = 'production'
 
 # 成事达管理平台/生产环境
-VUE_APP_BASE_API = 'http://114.132.197.85:8099'
+VUE_APP_BASE_API = 'http://1.92.99.15:8099'
 
 # websocket
-VUE_APP_WEBSOCKET = 'ws://114.132.197.85:8099/ws/asset/'
+VUE_APP_WEBSOCKET = 'ws://1.92.99.15:8099/ws/asset/'
 
 # 产品、文章预览
 VUE_APP_PREVIEW = 'http://www.lighting-it.cn/admin-preview/'
diff --git a/dl_vue/src/views/busi/chatMain/chatForm.vue b/dl_vue/src/views/busi/chatMain/chatForm.vue
index 22306e4..2fe2d5e 100644
--- a/dl_vue/src/views/busi/chatMain/chatForm.vue
+++ b/dl_vue/src/views/busi/chatMain/chatForm.vue
@@ -1,39 +1,57 @@
 <template>
   <!-- 选择产品对话框 -->
-  <el-dialog @close="close" :title="title" :visible.sync="open" width="800px" append-to-body>
-    <div class="dl-chat-box"   >
-      <template v-for="(item,index) in messages">
-        <div v-if="item.dataFrom=='customer'" class="dl-customer-dom">
-          <div class="dl-customer-photo">
-            <img src="@/assets/images/customer.jpg" >
-          </div>
-          <div class="dl-customer-right">
-            <div class="dl-customer-time">{{item.createTime}}</div>
-            <div class="dl-customer-content">{{ item.content }}</div>
+  <el-dialog @close="close" :title="title" :visible.sync="open" width="800px" append-to-body class="customer-service-dialog">
+    <!-- 自定义标题栏 -->
+    <div slot="header" class="dialog-header">
+      <div class="service-info">
+        <h3 class="service-name">{{ title }}</h3>
+      </div>
+      <button class="close-btn" @click="close" aria-label="关闭对话框">×</button>
+    </div>
+    <div class="dl-prod-box" @click="goProdDetail">咨询产品：<span>{{session.prodName}}</span></div>
+    <!-- 聊天内容区域 -->
+    <div class="chat-container">
+      <!-- 消息列表（内部滚动） -->
+      <div class="message-list-wrapper">
+        <div class="message-list" ref="messageList">
+          <!-- 消息项 -->
+          <div
+            v-for="(msg, index) in messages"
+            :key="index"
+            :class="['message-item', msg.dataFrom=='platform' ? 'self-message' :'other-message']"
+          >
+            <div class="message-content">
+              <div class="message-text">{{ msg.content }}</div>
+              <div class="message-time">{{ formatTime(msg.createTime) }}</div>
+            </div>
           </div>
         </div>
-        <div v-if="item.dataFrom=='platform'" class="dl-platform-dom">
+      </div>
 
-          <div class="dl-platform-right">
-            <div class="dl-platform-time">{{item.createTime}}</div>
-            <div class="dl-platform-content">{{ item.content }}</div>
-          </div>
-          <div class="dl-platform-photo">
-            <img src="@/assets/images/customer.jpg" >
-          </div>
-        </div>
-      </template>
+      <!-- 输入区域 -->
+      <div class="input-area">
+        <textarea
+          v-model="text"
+          class="message-input"
+          placeholder="按Enter发送"
+          @keydown.enter="sendToServer"
+          :disabled="isInputDisabled || readOnly"
+        ></textarea>
+        <el-button type="primary"
+                   icon="el-icon-s-promotion"
+                   @click="sendToServer"
+                   :disabled="!text.trim() || isInputDisabled || readOnly"
+        >
+        </el-button>
 
+        <el-button type="primary"
+                   :disabled="readOnly"
+                   @click="closeCurrentSession"
+        >结束会话
+        </el-button>
+      </div>
     </div>
-    <div slot="footer" class="dialog-footer">
-      <el-input type="textarea"
-                class="inputT"
-                placeholder="按 Enter 发送" v-model="text"
-                @keyup.enter.native="sendToServer"
-      ></el-input>
-      <el-button type="primary" icon="el-icon-s-promotion" @click="sendToServer"></el-button>
-      <el-button type="warning"  @click="closeCurrentSession">结束会话</el-button>
-    </div>
+
   </el-dialog>
 </template>
 
@@ -44,6 +62,9 @@ export default {
   name: 'chatForm',
   data() {
     return {
+      //只读
+      readOnly:false,
+      isInputDisabled: false,
       picPrex:process.env.VUE_APP_BASE_API,
       // 弹出层标题
       title: "聊天记录",
@@ -53,7 +74,9 @@ export default {
       messages: [],
       //发送的消息
       text:'',
-      session: null,
+      session: {
+        prodName:""
+      },
     }
   },
   methods: {
@@ -86,9 +109,9 @@ export default {
     scrollBottom(){
       // 确保在对话框打开后滚动到底部
       this.$nextTick(() => {
-        const chatBox = this.$el.querySelector('.dl-chat-box');
-        if (chatBox) {
-          chatBox.scrollTop = chatBox.scrollHeight;
+        const messageList = this.$refs.messageList;
+        if (messageList) {
+          messageList.scrollTop = messageList.scrollHeight;
         }
       });
     },
@@ -131,105 +154,369 @@ export default {
     },
     //来新消息
     addNewMsg(msg){
-      this.messages.push(msg)
-      this.scrollBottom()
+      console.log(msg,"msg")
+      // this.messages.push(msg)
+      setTimeout(()=>{
+        this.scrollBottom()
+      },0.5)
     },
     close(){
       this.open = false;
       //回调父组件方法
       this.$emit("closeForm")
-    }
+    },
+    /**
+     * 格式化时间显示
+     * @param {string|number} time - 时间戳或时间字符串
+     * @returns {string} 格式化后的时间字符串 HH:mm
+     */
+    formatTime(time) {
+      if (!time) return '';
 
+      try {
+        const date = new Date(time);
+        if (isNaN(date.getTime())) return ''; // 检查日期是否有效
+
+        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+      } catch (error) {
+        console.error('时间格式化错误:', error);
+        return '';
+      }
+    },
+    goProdDetail(){
+      this.$router.push({path:'/product/prodForm',query:{id:this.session.prodId}})
+    }
   }
 }
 </script>
 
 <style scoped>
-.dl-chat-box{
-  width: 100%;
-  background: #F1F3F7;
-  max-height:500px;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  justify-content: start;
-  overflow-y: scroll;
-  padding: 10px 20px;
+/deep/.el-dialog__body{
+  padding: 10px 20px !important;
 }
-.dl-customer-dom{
-  padding: 15px 0;
-  width: 100%;
-  display: flex;
+.customer-service-dialog {
+  --primary-color: #409eff;
+  --primary-light: #e8f3ff;
+  --primary-dark: #337ecc;
+  --bg-color: #f7f9fc;
+  --text-color: #303133;
+  --text-light: #909399;
+  --border-radius: 12px;
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
 }
 
-.dl-customer-photo{
-  width: 60px;
+/* 标题栏样式 */
+.dialog-header {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-}
-.dl-customer-photo img{
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-.dl-customer-right{
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  justify-content: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  background-color: #fff;
 }
 
-.dl-customer-time{
-  font-size: 10px;
-  color: #878B90;
-}
-.dl-customer-content{
-  margin-top: 10px;
-  width: auto;
-  background-color: white;
-  color: black;
-  border-radius: 5px;
-  padding: 12px;
+.service-info {
+  line-height: 1.6;
 }
 
-.dl-platform-dom{
-  padding: 15px 0;
-  width: 100%;
-  display: flex;
+.service-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin: 0;
 }
 
-.dl-platform-photo{
+.service-status {
+  font-size: 12px;
+  color: var(--text-light);
   display: flex;
-  justify-content: center;
   align-items: center;
-  width: 60px;
-}
-.dl-platform-photo img{
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-.dl-platform-right{
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: end;
-  justify-content: center;
+  gap: 6px;
 }
 
-.dl-platform-time{
-  font-size: 10px;
-  color: #878B90;
+.online-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #52c41a;
+  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.15);
 }
-.dl-platform-content{
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: var(--text-light);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.close-btn:hover {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+.dl-prod-box{
+  padding-bottom: 10px;
+}
+.dl-prod-box span{
+  color: rgb(64, 158, 255);
+  cursor: pointer;
+}
+/* 聊天容器 */
+.chat-container {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 550px;
+  background-color: var(--bg-color);
+}
+
+/* 消息列表容器 */
+.message-list-wrapper {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+/* 消息列表（内部滚动） */
+.message-list {
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  scroll-behavior: smooth;
+  background-color: var(--bg-color);
+  background-image:
+    radial-gradient(var(--primary-color) 0.5px, transparent 0.5px),
+    radial-gradient(var(--primary-color) 0.5px, var(--bg-color) 0.5px);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+  background-attachment: local;
+}
+
+/* 自定义滚动条 */
+.message-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.message-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.message-list::-webkit-scrollbar-thumb {
+  background-color: rgba(150, 150, 150, 0.3);
+  border-radius: 3px;
+}
+
+.message-list::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(150, 150, 150, 0.5);
+}
+
+/* 系统消息 */
+.system-message {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-light);
+  background-color: rgba(255, 255, 255, 0.85);
+  padding: 6px 14px;
+  border-radius: 14px;
+  margin: 0 auto 20px;
+  display: inline-block;
+  box-shadow: var(--shadow);
+}
+
+/* 消息项 */
+.message-item {
+  margin-bottom: 18px;
+  max-width: 70%;
+  display: inline-block;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.self-message {
+  float: right;
+  clear: both;
+}
+
+.other-message {
+  float: left;
+  clear: both;
+}
+
+.message-content {
+  position: relative;
+  display: inline-block;
+}
+
+.message-text {
+  padding: 12px 16px;
+  border-radius: var(--border-radius);
+  line-height: 1.6;
+  word-wrap: break-word;
+  max-width: 100%;
+  box-shadow: var(--shadow);
+}
+
+/* 消息气泡样式 */
+.self-message .message-text {
+  background-color: var(--primary-color);
+  color: #fff;
+  border-top-right-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.self-message .message-text:hover {
+  background-color: var(--primary-dark);
+}
+
+.other-message .message-text {
+  background-color: #fff;
+  color: var(--text-color);
+  border-top-left-radius: 4px;
+  transition: box-shadow 0.2s;
+}
+
+.other-message .message-text:hover {
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* 消息时间 */
+.message-time {
+  font-size: 11px;
+  color: var(--text-light);
+  margin-top: 5px;
   text-align: right;
-  margin-top: 10px;
-  width: auto;
-  background-color: white;
-  color: black;
-  border-radius: 5px;
-  padding: 12px;
+  white-space: nowrap;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.message-item:hover .message-time {
+  opacity: 1;
+}
+
+.other-message .message-time {
+  text-align: left;
+  padding-left: 4px;
+}
+
+/* 正在输入指示器 */
+.typing-indicator {
+  margin-bottom: 18px;
+  max-width: 70%;
+  float: left;
+  clear: both;
+}
+
+.typing-dots {
+  background-color: #fff;
+  padding: 12px 16px;
+  border-radius: var(--border-radius);
+  border-top-left-radius: 4px;
+  box-shadow: var(--shadow);
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.typing-dots span {
+  width: 8px;
+  height: 8px;
+  background-color: var(--text-light);
+  border-radius: 50%;
+  animation: typing 1.4s infinite ease-in-out both;
+}
+
+.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+
+/* 输入区域 */
+.input-area {
+  display: flex;
+  gap: 12px;
+  padding: 15px 20px;
+  border-top: 1px solid #f0f0f0;
+  background-color: #fff;
+}
+
+.message-input {
+  flex: 1;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  padding: 12px 15px;
+  min-height: 42px;
+  max-height: 120px;
+  resize: vertical;
+  outline: none;
+  transition: all 0.2s;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.message-input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.message-input:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+/* 发送按钮 */
+.send-button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius);
+  width: 44px;
+  height: 44px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.send-button:hover {
+  background-color: var(--primary-dark);
+  transform: translateY(-1px);
+}
+
+.send-button:active {
+  transform: translateY(1px);
+}
+
+.send-button:disabled {
+  background-color: #b3d8ff;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes typing {
+  0% { transform: scale(0); }
+  40% { transform: scale(1); }
+  80% { transform: scale(0); }
+  100% { transform: scale(0); }
 }
 </style>
diff --git a/dl_vue/src/views/busi/chatMain/messageList.vue b/dl_vue/src/views/busi/chatMain/messageList.vue
index c19ba8c..ad26f11 100644
--- a/dl_vue/src/views/busi/chatMain/messageList.vue
+++ b/dl_vue/src/views/busi/chatMain/messageList.vue
@@ -1,33 +1,37 @@
 <template>
   <div class="session-list">
-    <div class="search-box">
-      <el-input placeholder="搜索会话..." v-model="searchKeyword" clearable size="small"></el-input>
+    <div class="toggle-button" @click="toggleCollapse" :title="isCollapsed?'点击展开':'点击收起'">
+      <i :class="isCollapsed ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
     </div>
-    <div class="session-item"
-         v-for="session in filteredSessions"
-         :key="session.id"
-         :class="{ 'active': currentSessionId === session.id, 'unread': session.unreadCount > 0 }"
-         @click="switchSession(session)"
-    >
-      <div class="avatar">
-        <img :src="session.userAvatar || '/img/user.png'" alt="用户头像">
+    <div v-show="!isCollapsed" class="session-content">
+      <div class="search-box">
+        <el-input placeholder="搜索会话..." v-model="searchKeyword" clearable size="small"></el-input>
       </div>
-      <div class="session-info">
-        <div class="session-header">
-          <span class="user-name">{{ session.userName || '匿名用户' }}</span>
-          <span class="time">{{ formatTime(session.lastTime) }}</span>
-        </div>
-        <div class="last-message">
-          <span>{{ session.lastMessage || '暂无消息' }}</span>
-          <span class="unread-count" v-if="session.unreadCount > 0">{{ session.unreadCount }}</span>
+      <div v-show="filteredSessions.length>0" class="session-item"
+           v-for="session in filteredSessions"
+           :key="session.id"
+           :class="{ 'active': currentSessionId === session.id, 'unread': session.unreadCount > 0 }"
+           @click="switchSession(session)"
+      >
+        <div class="session-info">
+          <div class="session-header">
+            <span class="user-name">来自{{ session.oceania || '未知洲' }}-{{session.national||'未知国家'}}的会话</span>
+            <span class="time">{{ formatTime(session.lastTime) }}</span>
+          </div>
+          <div class="last-message">
+            <span>{{ session.lastMessage || '暂无消息' }}</span>
+            <span class="unread-count" v-if="session.unreadCount > 0">{{ session.unreadCount }}</span>
+          </div>
         </div>
       </div>
+      <div v-show="filteredSessions.length==0" style="text-align: center;color: rgb(90, 94, 102);padding-top: 5px;font-size: 14px">暂无会话</div>
     </div>
   </div>
 </template>
 
 <script>
 import { getByServiceId, closeSession } from '@/api/busi/chatMain'
+
 export default {
   name: 'messageList',
   data() {
@@ -49,11 +53,18 @@ export default {
       // 输入的消息
       inputMessage: '',
       // WebSocket连接
-      websocket: null
+      websocket: null,
+      // 是否收起
+      isCollapsed: false
     }
   },
   created() {
     this.loadSessions()
+    // 从本地存储获取收起状态
+    const collapsed = localStorage.getItem('messageListCollapsed')
+    if (collapsed) {
+      this.isCollapsed = JSON.parse(collapsed)
+    }
   },
   watch: {
     searchKeyword(val) {
@@ -62,10 +73,18 @@ export default {
           (session.lastMessage && session.lastMessage.includes(val))
       })
     },
+    // 监听收起状态变化，保存到本地存储
+    isCollapsed(val) {
+      localStorage.setItem('messageListCollapsed', JSON.stringify(val))
+    }
   },
   methods: {
+    // 切换收起/展开状态
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed
+    },
     //结束当前会话
-    closeCurrentSession(){
+    closeCurrentSession() {
       closeSession(this.currentSessionId).then(() => {
         this.$message.success('会话已结束')
         // 通知用户会话已结束
@@ -75,7 +94,7 @@ export default {
           content: '客服已结束会话',
           sessionId: this.currentSessionId
         }
-        this.$store.dispatch('websocket_send',JSON.stringify(wsMsg));
+        this.$store.dispatch('websocket_send', JSON.stringify(wsMsg))
         // 切换会话列表
         this.currentSessionId = null
         this.currentSession = {}
@@ -83,13 +102,13 @@ export default {
         // 重新加载会话列表
         this.loadSessions()
         // 关闭会话
-        this.$emit("closeForm")
+        this.$emit('closeForm')
       })
     },
     //关闭聊天窗口了
-    closeForm(){
-      this.currentSessionId=null
-      this.currentSession= {}
+    closeForm() {
+      this.currentSessionId = null
+      this.currentSession = {}
     },
     // 加载会话列表
     loadSessions() {
@@ -102,10 +121,10 @@ export default {
     switchSession(session) {
       this.currentSessionId = session.id
       this.currentSession = session
-      this.$emit("switchSession",session)
+      this.$emit('switchSession', session)
     },
     //更新会话未读状态
-    updateSessionRead(sessionId){
+    updateSessionRead(sessionId) {
       const session = this.sessions.find(s => s.id === sessionId)
       if (session) {
         session.unreadCount = 0
@@ -127,11 +146,11 @@ export default {
             let newMsg = {
               id: new Date().getTime(), // 临时ID，实际应该从消息中获取
               mainId: message.sessionId,
-              dataFrom: "customer", // 用户发送
+              dataFrom: 'customer', // 用户发送
               senderId: message.fromUserId,
               receiverId: this.serviceId,
               content: message.content,
-              createTime:  new Date().toLocaleString('zh-CN', {
+              createTime: new Date().toLocaleString('zh-CN', {
                 year: 'numeric',
                 month: '2-digit',
                 day: '2-digit',
@@ -143,7 +162,7 @@ export default {
               isRead: 1 // 已读
             }
             //调用父组件方法传递过去
-            this.$emit("addNewMag",newMsg)
+            this.$emit('addNewMag', newMsg)
           } else {
             // 不是当前查看的会话，更新未读数量
             const session = this.sessions.find(s => s.id === message.sessionId)
@@ -151,10 +170,14 @@ export default {
               session.unreadCount = (session.unreadCount || 0) + 1
               session.lastMessage = message.content
               session.lastTime = new Date()
+              let str = message.content
+              if(str.length>15){
+                str = str.substring(0,15)+'...'
+              }
               // 提示有新消息
               this.$notify.info({
                 title: '新消息',
-                message: `来自 ${session.userName || '匿名用户'} 的消息`,
+                message: str,
                 duration: 3000
               })
             } else {
@@ -192,25 +215,65 @@ export default {
 
 <style scoped>
 .session-list {
-  width: 300px;
-  height: 200px;
+  max-width: 350px;
+  max-height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden;
   position: absolute;
   right: 5px;
   top: 84px;
-  background-color:  white;
+  padding: 5px 0 5px 5px;
+  background-color: white;
   border: 1px solid #c0c0c0;
   border-radius: 4px;
   display: flex;
-  flex-direction: column;
+  transition: background-color 1s;
 }
 
+.session-content {
+  width: 300px;
+  flex: 1;
+  display: flex;
+  padding-right: 8px;
+  flex-direction: column;
+  animation: slideIn 0.3s ease-out forwards;
+}
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 当元素隐藏时添加过渡效果 */
+.session-content[v-if] {
+  transition: all 0.3s ease;
+}
+.toggle-button {
+  width: 10px;
+  max-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-right: 5px;
+}
+
+.toggle-button:hover {
+  color:rgb(64, 158, 255) ;
+}
 .search-box {
   padding: 10px;
   border-bottom: 1px solid #e6e6e6;
 }
 
 .session-item {
-  padding: 10px 15px;
+  padding: 10px 8px;
   border-bottom: 1px solid #f5f5f5;
   cursor: pointer;
   display: flex;
@@ -238,7 +301,7 @@ export default {
 }
 
 .session-info {
-  margin-left: 10px;
+  margin-left: 5px;
   flex: 1;
   overflow: hidden;
 }