首页大型更新，修正通信ui

ruoyi-ui/src/layout/components/ChatComponent/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <el-drawer
+    :visible.sync="drawerVisible"
+    size="50%"
+    title="聊天"
+    :before-close="handleClose"
+  >
+    <div class="chat-container">
+      <!-- 联系人列表 -->
+      <div class="contact-list">
+        <el-scrollbar>
+          <div
+            v-for="contact in contacts"
+            :key="contact.contactId"
+            class="contact-item"
+            @click="selectContact(contact)"
+          >
+            <el-avatar :src="contact.user.avatar"/>
+            <span>{{ contact.user.nickName }}</span>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <!-- 聊天内容区域 -->
+      <div class="chat-box">
+        <el-scrollbar style="height:80%" id="message_content_end">
+          <div class="messages" ref="messageBox" >
+            <div v-for="message in chatHistory" :key="message.id" class="message">
+              <span>{{ contactUser.nickName }}: </span>
+              <span>{{ message.content }}</span>
+            </div>
+          </div>
+        </el-scrollbar>
+
+        <!-- 消息输入框 -->
+        <div style="bottom:0;height:20%">
+          <el-input
+            v-model="newMessage"
+            placeholder="输入消息..."
+            suffix-icon="el-icon-chat-dot-round"
+            @keyup.enter="sendMessage"
+          />
+          <el-button @click="sendMessage" icon="el-icon-paperclip">发送</el-button>
+        </div>
+
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import {getContact, listContact} from "../../../api/system/contact";
+import {parseTime} from "../../../utils/ruoyi";
+import {addMessage} from "../../../api/system/message";
+
+export default {
+  name: 'ChatComponent',
+  props:{
+    drawerVisible:Boolean,
+
+  },
+  data() {
+    return {
+
+      contacts: [], // 联系人列表
+      selectedContact: null, // 当前选中的联系人
+      chatHistory: [], // 当前聊天记录
+      newMessage: '', // 输入框中的消息
+      socket: null, // WebSocket实例
+      contactQueryParams: {
+        pageSize: 10,
+        pageNum: 1
+      },
+      contactUser:{}
+    };
+  },
+  methods: {
+    // 打开聊天窗口
+    openChat() {
+      console.log("窗口打开")
+      this.drawerVisible = true;
+    },
+
+    // 关闭聊天窗口
+    handleClose() {
+      this.drawerVisible = false;
+    },
+
+
+    // 选择联系人
+    selectContact(contact) {
+      this.selectedContact = contact;
+      this.chatHistory = []; // 清空当前聊天记录
+      console.log(contact);
+      this.loadMessage(contact.id);
+    },
+
+    getContactList() {
+      this.contactListLoading = true;
+      this.contactQueryParams.userId = this.userId;
+      listContact(this.contactQueryParams).then(response => {
+        if (response.code === 200) {
+          this.contacts = response.rows;
+          this.contactListTotal = response.total;
+          const contactUserId = this.$route.query.userId;
+          if (contactUserId) {
+            this.contactUserId = contactUserId;
+            let contact = response.rows.find(row => row.contactUserId === contactUserId);
+            this.loadMessage(contact.id);
+          }
+        }
+        this.contactListLoading = false;
+      })
+    },
+    contactLoadMore() {
+      // this.contactQueryParams.pageSize = 5;
+      // this.contactQueryParams.pageNum++;
+      this.getContactList();
+    },
+    loadMessage(concatId) {
+      this.msgListLoading = true;
+      getContact(concatId).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.currentContact = response.data;
+          this.contactUser = response.data.user;
+          this.chatHistory = response.data.messages;
+        }
+        this.msgListLoading = false;
+        this.fleshScroll();
+      })
+    },
+    insertEmoji(emoji) {
+      this.inputVal += emoji.data;
+    },
+    sendMessage() {
+      const message = {
+        contactId: this.currentContact.id,
+        userId: this.userId,
+        content: this.inputVal,
+        roomId: this.currentContact.roomId
+      }
+      this.msgList.push({
+        ...message,
+        id: this.msgList.length + 1,
+        createTime: parseTime(new Date())
+      })
+      this.fleshLastMsg();
+      addMessage(message)
+      const msg = {
+        sendUserId: this.userId,
+        sendUserName: this.$store.state.user.name,
+        userId: this.currentContact.contactUserId === this.userId ? this.currentContact.user.userId : this.currentContact.contactUserId,
+        type: "chat",
+        detail: this.inputVal
+      }
+      this.$webSocket.sendWebsocket(JSON.stringify(msg));
+      this.inputVal = '';
+      this.fleshScroll();
+    },
+    subscribeMessage(res) {
+      if (res) {
+        const {sendUserId, sendUserName, userId, type, detail} = res.detail.data;
+
+        const message = {
+          id: 1,
+          contactId: this.currentContact.id,
+          userId: sendUserId,
+          content: detail,
+          roomId: this.currentContact.roomId,
+          createTime: parseTime(new Date()),
+          user: this.contactUser
+        }
+        this.msgList.push(message);
+        this.fleshLastMsg();
+        this.fleshScroll();
+
+
+      }
+    },
+    fleshLastMsg() {
+      const index = this.contactList.findIndex(e => e.id === this.currentContact.id);
+      this.contactList[index].endMsg = this.msgList[this.msgList.length - 1].content;
+    },
+    fleshScroll() {
+      this.$nextTick(() => {
+        document.getElementById("message_content_end").scrollIntoView();
+      })
+    }
+  },
+  created() {
+    this.userId = this.$store.state.user.id;
+    this.subscribeMessage();
+    this.getContactList();
+  },
+
+  mounted() {
+    window.addEventListener("onmessageWS", this.subscribeMessage);
+
+  }
+  ,
+}
+;
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+
+  height: 100%;
+}
+
+.contact-list {
+  width:40%;
+  background: #f4f4f4;
+  padding: 10px;
+  border-right: 1px solid #ddd;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.contact-item:hover {
+  background: #e0e0e0;
+}
+
+.chat-box {
+  display: flex;
+  width: 55%;
+  height: 100%;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.messages {
+
+  overflow-y: auto;
+  margin-bottom: 10px;
+}
+
+.message {
+  margin-bottom: 10px;
+}
+
+.el-input {
+  margin-top: 10px;
+}
+</style>

ruoyi-ui/src/layout/components/Navbar.vue

@@ -14,8 +14,8 @@
 
         <div style="position: absolute;top: 0;right: 300px;font-weight: 200">
           <!--          <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
-          <i class="el-icon-s-comment" @click="chat = true" style=""></i>
-
+          <el-button class="el-icon-s-comment" @click="chat=true" style="">打开聊天</el-button>
+          <chat-component :drawerVisible="chat" ref="chatComponent"/>
         </div>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
         <el-tooltip content="用户" effect="dark" placement="bottom">
@@ -41,162 +41,6 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-
-
-    <el-drawer
-      size="50%"
-      :visible.sync="chat"
-      :with-header="false">
-      <!--        好友列表-->
-      <el-aside width="" style="background-color: white;display: flex;height: 90%">
-        <el-main :class="currentContact.id ? 'main' : 'main_empty'" v-loading="msgListLoading">
-          <div v-if="currentContact.id">
-            <el-row style="position: absolute;background: white;width: 50%;z-index: 999;height: 10%;top: 0;left: 10px">
-              <el-col :span="24" style="color: #666;position: relative;top: 25px">
-                <span style="font-weight: 500; font-size: 16px">{{ currentContact.user.nickName }}</span>
-                <el-divider direction="vertical"/>
-              </el-col>
-            </el-row>
-            <el-row style="height: 60%">
-              <el-col :span="24" class="msg_content" id="message_content">
-                <el-row v-for="(item, index) in msgList" :key="item.id" :style="index > 0 && 'margin-top: 30px'">
-                  <div v-if="item.userId !== userId" style="">
-                    <el-col :span="24" style="font-size: 16px;">
-                      <div>{{ item.user.nickName }}:</div>
-                      <div style="display: flex">
-                        <div style="background-color: #f6f6f6;border-radius: 5px;padding: 0 12px 0 12px;">
-                          {{ item.content }}
-                        </div>
-                      </div>
-                      <div style="font-size: 11px; color: gray; margin-left: 5px">{{ item.createTime }}</div>
-                    </el-col>
-                  </div>
-                  <div v-else>
-                    <el-col :span="24" style="font-size: 16px;">
-                      <div class="chat_bubble">
-                        <span>{{ item.content }}</span>
-                      </div>
-                      <i class="el-icon-circle-check"
-                         style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
-                      <span
-                        style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{ item.createTime }}</span>
-                    </el-col>
-                  </div>
-                </el-row>
-                <el-row id="message_content_end" style="height: 15px">
-                  <el-col></el-col>
-                </el-row>
-              </el-col>
-            </el-row>
-            <el-row
-              style="position: absolute;background: white;width: 50%;z-index: 999;height: 20%;bottom: 15px;left: 10px">
-              <el-col :span="24">
-                <el-row>
-                  <el-col :span="24">
-                    <el-popover
-                      placement="top-start"
-                      trigger="click">
-                      <div>
-                        <VEmojiPicker :showSearch="false" @select="insertEmoji"/>
-                      </div>
-                      <img slot="reference" src="@/assets/images/emoji.png" title="表情" class="input_top_menu_img"/>
-                    </el-popover>
-                  </el-col>
-                </el-row>
-
-                <el-input type="textarea" :rows="3" v-model="inputVal"
-                          style="font-size: 17px; color: black;position: relative;height: 20%"
-                          @keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
-                <el-button style="position: relative;left: 80%;top:10px" @click="send">发送</el-button>
-              </el-col>
-
-            </el-row>
-          </div>
-          <div v-else>
-            <el-row>
-              <el-col :span="24">
-                <img src="@/assets/images/message.png"/>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="24">
-                <span style="color: gray">与您进行过沟通的联系人都会在左侧列表中显示</span>
-              </el-col>
-            </el-row>
-          </div>
-        </el-main>
-
-        <el-container>
-          <el-header>
-            <el-row>
-              <el-col :span="24">
-                <el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人"
-                          v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
-              </el-col>
-            </el-row>
-            <el-row style="margin-top: 15px">
-              <el-button size="mini">全部</el-button>
-              <el-button size="mini">个人</el-button>
-              <el-button size="mini">群聊</el-button>
-            </el-row>
-          </el-header>
-          <div v-loading="contactListLoading" style="margin-top: 10px">
-            <el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750"
-                     :infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
-              <el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId"
-                      :style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
-                <el-col :span="6">
-                  <el-image
-                    :src="(item.user.avatar === '' || item.user.avatar == null) ? require('@/assets/images/profile.jpg') : item.user.avatar"
-                    fit="fill" style="width: 70%;border-radius: 50%;"/>
-                </el-col>
-                <el-col :span="18">
-                  <el-row>
-                    <el-col :span="15"><span style="font-weight: 500; font-size: 16px">{{ item.user.nickName }}</span>
-                    </el-col>
-                    <el-col :span="5">
-                      <el-divider direction="vertical"/>
-                    </el-col>
-                  </el-row>
-                  <el-row>
-                    <el-col :span="5" style="font-size: 13px; text-overflow: ellipsis; white-space: nowrap">
-                      <span><i class="el-icon-circle-check"></i>  {{ item.endMsg }}</span>
-                    </el-col>
-                    <el-col :span="5" style="float: right">
-                      <el-dropdown class="hover_down_menu">
-                        <span class="el-dropdown-link">
-                          <i class="el-icon-arrow-down el-icon-more"></i>
-                        </span>
-                        <el-dropdown-menu slot="dropdown">
-                          <el-dropdown-item>置顶</el-dropdown-item>
-                          <el-dropdown-item>删除</el-dropdown-item>
-                        </el-dropdown-menu>
-                      </el-dropdown>
-                    </el-col>
-                  </el-row>
-                </el-col>
-              </el-row>
-            </el-main>
-            <el-main v-else class="msgListMain_empty">
-              <el-row>
-                <el-col :span="24">
-                  <img src="@/assets/images/contact.png" style="width: 80%; height: 80%"/>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="24">
-                  <span style="color: gray">暂无联系人</span>
-                </el-col>
-              </el-row>
-            </el-main>
-          </div>
-
-
-        </el-container>
-
-
-      </el-aside>
-    </el-drawer>
   </div>
 </template>
 
@@ -214,9 +58,12 @@ import {getUserProfile} from "@/api/system/user";
 import {getContact, listContact} from "../../api/system/contact";
 import {addMessage} from "../../api/system/message";
 import {parseTime} from "../../utils/ruoyi";
+import ChatComponent from "./ChatComponent/index.vue";
+import chatComponent from "./ChatComponent/index.vue";
 
 export default {
   components: {
+    ChatComponent,
     Breadcrumb,
     TopNav,
     Hamburger,
@@ -227,6 +74,9 @@ export default {
     RuoYiDoc
   },
   computed: {
+    chatComponent() {
+      return chatComponent
+    },
     ...mapGetters([
       'sidebar',
       'avatar',
@@ -274,7 +124,7 @@ export default {
         pageNum: 1
       },
       currentContact: {},
-      contactUser:{}
+      contactUser: {}
     };
   },
   mounted() {
@@ -388,7 +238,7 @@ export default {
           content: detail,
           roomId: this.currentContact.roomId,
           createTime: parseTime(new Date()),
-          user:this.contactUser
+          user: this.contactUser
         }
         this.msgList.push(message);
         this.fleshLastMsg();