From e41b5ef5ff8d2aff22428482a1140f08d3f74192 Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Wed, 1 Jan 2025 18:44:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0avatar=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=81=E8=81=8A=E5=A4=A9=E6=98=BE=E7=A4=BA=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=EF=BC=8C=E8=81=8A=E5=A4=A9=E6=9C=89=E6=B6=88=E6=81=AF=E6=8F=90?=
 =?UTF-8?q?=E5=89=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Chat.vue     | 297 ++++++++++++++++++++++++-----------------
 src/views/UserList.vue |  83 +++++++++++-
 2 files changed, 257 insertions(+), 123 deletions(-)

diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index 300a776..911da5b 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -1,14 +1,16 @@
 <template>
   <el-dialog
-            title="图片发送"
-            v-model="sendImgDialogVisible"
-            width="60%"
-            height="60%"
-            center
-      >
-      <!-- 图片输入 -->
-      <input type="file" @change="handleFileUpload" />
-      <el-button type="primary" size="default" @click="sendImageOrVideo" >发送</el-button>
+    title="图片发送"
+    v-model="sendImgDialogVisible"
+    width="60%"
+    height="60%"
+    center
+  >
+    <!-- 图片输入 -->
+    <input type="file" @change="handleFileUpload" />
+    <el-button type="primary" size="default" @click="sendImageOrVideo"
+      >发送</el-button
+    >
   </el-dialog>
 
   <el-container
@@ -25,9 +27,7 @@
         <el-menu :default-openeds="['1', '3']">
           <el-sub-menu index="1">
             <template #title>
-              <el-icon>
-                <message /> </el-icon
-              >联系人
+              <el-icon> <message /> </el-icon>联系人
             </template>
             <el-scrollbar height="300px">
               <el-menu-item-group v-for="user in filteredUsers" :key="user.id">
@@ -36,7 +36,9 @@
                   @click="handleGetMessage(user.id)"
                   style="height: 40px"
                 >
+                <el-avatar style="float: left" :src="user.avatar"></el-avatar>
                   {{ user.name }}
+                  
                   <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
                 </el-menu-item>
               </el-menu-item-group>
@@ -47,7 +49,7 @@
               <el-icon><icon-menu /></el-icon>
               群组
             </template>
-            <el-scrollbar height="200px">
+            <el-scrollbar height="250px">
               <el-menu-item-group v-for="item in groupList" :key="item.ID">
                 <!-- <template #title>Group 1</template> -->
                 <el-menu-item
@@ -116,9 +118,10 @@
               style="margin-left: 10px; margin-bottom: 8px"
             >
               <el-row class="row-bg" type="flex" align="middle">
-                <el-avatar size="default" fit="fit">{{
+                <!-- <el-avatar size="default" fit="fit">{{
                   cur_user_name
-                }}</el-avatar>
+                }}</el-avatar> -->
+                <el-avatar size="default" :src="cur_user_avatar"></el-avatar>
                 <span style="margin-left: 10px"
                   >{{ cur_user_name }} : {{ formatTime(item.CreatedAt) }}</span
                 >
@@ -143,9 +146,17 @@
               </el-row>
 
               <el-row>
-                <el-col :span="1000" :offset="1" class="msg" style="max-width: 50%;">
+                <el-col
+                  :span="1000"
+                  :offset="1"
+                  class="msg"
+                  style="max-width: 50%"
+                >
                   <!-- {{ item.Msg }} -->
-                  <div v-html="renderMarkdown(item.Msg)" style="max-width: 50%;"></div>
+                  <div
+                    v-html="renderMarkdown(item.Msg)"
+                    style="max-width: 50%"
+                  ></div>
                 </el-col>
               </el-row>
             </div>
@@ -159,56 +170,64 @@
                   {{ tokenData.username }} :
                   {{ formatTime(item.CreatedAt) }}</span
                 >
-                <el-avatar size="default" fit="fit">
-                  {{ tokenData.username }}
-                </el-avatar>
+                <el-avatar size="default" :src="tokenData.avatar"></el-avatar>
               </el-row>
 
               <el-row justify="end">
-                <el-col :span="1000" class="msg2" style="margin-right: 20px; max-width: 50%;">
+                <el-col
+                  :span="1000"
+                  class="msg2"
+                  style="margin-right: 20px; max-width: 50%"
+                >
                   <!-- {{ item.Msg }} -->
-                  <div v-html="renderMarkdown(item.Msg)" style="max-width: 50%;"></div>
+                  <div
+                    v-html="renderMarkdown(item.Msg)"
+                    style="max-width: 50%"
+                  ></div>
                 </el-col>
               </el-row>
             </div>
           </div>
         </el-scrollbar>
       </el-main>
+      <div></div>
       <div>
-      </div>
-      <div>  
-
-       <el-row class="row-bg" type="flex" justify="space-around" align="middle">
-       <el-button
-                type="primary"
-                size="default"
-                @click="SendImage"
-                class="send-image-button-bg"
-            >
-                文件发送
-            </el-button>
-        <el-col :span="20">
-          <el-input
-            type="textarea"
-            style="width: 100%"
-            rows="1"
-            autofocus
-            @keyup.enter="handleSendBtnClick"
-            placeholder="请输入消息按Enter发送"
-            v-model="currentMsg"
-          ></el-input>
-        </el-col>
-        <el-col :span="2">
+        <el-row
+          class="row-bg"
+          type="flex"
+          justify="space-around"
+          align="middle"
+        >
           <el-button
-            class="sendBtn"
-            @click="handleSendBtnClick"
             type="primary"
             size="default"
+            @click="SendImage"
+            class="send-image-button-bg"
           >
-            发送
+            文件发送
           </el-button>
-        </el-col>
-      </el-row>
+          <el-col :span="20">
+            <el-input
+              type="textarea"
+              style="width: 100%"
+              rows="1"
+              autofocus
+              @keyup.enter="handleSendBtnClick"
+              placeholder="请输入消息按Enter发送"
+              v-model="currentMsg"
+            ></el-input>
+          </el-col>
+          <el-col :span="2">
+            <el-button
+              class="sendBtn"
+              @click="handleSendBtnClick"
+              type="primary"
+              size="default"
+            >
+              发送
+            </el-button>
+          </el-col>
+        </el-row>
       </div>
     </el-container>
   </el-container>
@@ -217,12 +236,12 @@
 <script>
 import axios from "axios";
 import { inject } from "vue";
-import { ref } from 'vue';
+import { ref } from "vue";
 import { getFriendListService } from "@/api/chat.js";
 import { getMessageService } from "@/api/chat.js";
 import { sendMessageService } from "@/api/chat.js";
 import { UploadFileService } from "@/api/tool.js";
-import {GetFileInfoByMd5Service } from "@/api/tool.js";
+import { GetFileInfoByMd5Service } from "@/api/tool.js";
 
 import {
   ElAvatar,
@@ -241,8 +260,8 @@ import {
 import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
 import router from "@/router/index.js";
 import { ElMessage } from "element-plus";
-import MarkdownIt from 'markdown-it';
-import CryptoJS from 'crypto-js';
+import MarkdownIt from "markdown-it";
+import CryptoJS from "crypto-js";
 
 export default {
   data() {
@@ -250,13 +269,17 @@ export default {
       ip: "",
       tableData: [],
       sendImgDialogVisible: false,
-      file : null,
+      file: null,
       file_md5: "",
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
         userId: localStorage.getItem("userId"),
         username: localStorage.getItem("username"),
+        avatar:
+          localStorage.getItem("avatar") === ""
+            ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
+            : localStorage.getItem("avatar"),
       },
       username: localStorage.getItem("username"),
       userList: [],
@@ -270,6 +293,7 @@ export default {
       md: new MarkdownIt(), //md解析器
 
       cur_user_name: "",
+      cur_user_avatar: "",
       eventSource: null, // 事件源
       uid: localStorage.getItem("userId"),
       currentMsg: "",
@@ -292,8 +316,13 @@ export default {
       let data = result.data;
       this.userList = data.friends;
       for (let i = 0; i < data.friends.length; i++) {
+        this.userList[i].avatar = data.friends[i].avatar ===""?"https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg" : data.friends[i].avatar;
         this.hasUnreadMsg[data.friends[i].id] = false;
       }
+      console.log("avatar: " + this.userList[0].avatar);
+      for (let i = 0; i < data.groups.length; i++) {
+        this.hasUnreadMsg["g_" + data.groups[i].ID] = false;
+      }
       this.groupList = data.groups;
     },
     filterUsers() {
@@ -360,6 +389,10 @@ export default {
       for (let i = 0; i < this.userList.length; i++) {
         if (this.userList[i].id === id) {
           this.cur_user_name = this.userList[i].name;
+          this.cur_user_avatar =
+            this.userList[i].avatar === ""
+              ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
+              : this.userList[i].avatar;
           break;
         }
       }
@@ -422,8 +455,8 @@ export default {
       // 重新组合并返回格式化的日期时间字符串
       return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
     },
-    renderMarkdown(markdown) {  
-      // 使用 MarkdownIt 解析 Markdown 字符串并返回 HTML  
+    renderMarkdown(markdown) {
+      // 使用 MarkdownIt 解析 Markdown 字符串并返回 HTML
       return this.md.render(markdown);
     },
     SendImage() {
@@ -481,21 +514,40 @@ export default {
             // 如果是消息类型，解密消息内容
             // console.log("收到数据====" + JSON.stringify(msg.data));
             console.log("msg_:", data.data);
+            console.log("hasUnreadMsg:", _this.hasUnreadMsg);
             let msg_data = JSON.parse(data.data);
             _this.MsgList.push(msg_data);
-            if (
-              _this.cur_user_id != msg_data.FromUserID &&
-              _this.cur_group_id != msg_data.GroupID
-            ) {
-              if (msg_data.GroupID === 0) {
+            if (msg_data.GroupID === 0) {
+              //如果msg_data.GroupID === 0,则为用户消息
+              if (msg_data.FromUserID !== _this.cur_user_id) {
+                //如果不是是当前用户发送的消息，则设置为未读
                 _this.hasUnreadMsg[msg_data.FromUserID] = true;
-              } else {
-                _this.hasUnreadMsg["g_" + msg_data.GroupID] = true;
+                //将当前用户移动到第一位
+                for (let i = 0; i < _this.userList.length; i++) {
+                  if (_this.userList[i].id === msg_data.FromUserID) {
+                    let temp = _this.userList[i];
+                    _this.userList.splice(i, 1); //删除当前用户
+                    _this.userList.unshift(temp); //将当前用户移动到第一位
+                    break;
+                  }
+                }
               }
             } else {
-              _this.scrollToBottom();
+              if (msg_data.GroupID !== _this.cur_group_id) {
+                //如果不是是当前用户发送的消息，则设置为未读
+                _this.hasUnreadMsg["g_" + msg_data.GroupID] = true;
+                //将当前用户移动到第一位
+                for (let i = 0; i < _this.groupList.length; i++) {
+                  if (_this.groupList[i].ID === msg_data.GroupID) {
+                    let temp = _this.groupList[i];
+                    _this.groupList.splice(i, 1); //删除当前用户
+                    _this.groupList.unshift(temp); //将当前用户移动到第一位
+                    break;
+                  }
+                }
+              }
             }
-
+            _this.scrollToBottom();
             //console.log("msglist:", _this.MsgList);
             // 构建消息内容
           } else if (data.type == "check") {
@@ -624,15 +676,15 @@ export default {
           };
           reader.readAsArrayBuffer(this.file);
         } catch (error) {
-          console.error('计算MD5值出错:', error);
+          console.error("计算MD5值出错:", error);
         }
       }
     },
-    
+
     handleMenuSelect(val) {
       router.push(val);
       //关闭websocket
-      if (this.socket!= null) {
+      if (this.socket != null) {
         this.socket.close();
       }
     },
@@ -641,68 +693,69 @@ export default {
       console.log("file has been selected:", this.file);
     },
     readFileAndCalculateMD5() {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
-                const md5Hash = CryptoJS.MD5(wordArray);
-                const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
-                //console.log("onload: " + md5Str);
-                this.file_md5 = md5Str;
-                resolve(md5Str);
-            };
-            reader.onerror = (error) => {
-                reject(error);
-            };
-            reader.readAsArrayBuffer(this.file);
-        });
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
+          const md5Hash = CryptoJS.MD5(wordArray);
+          const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
+          //console.log("onload: " + md5Str);
+          this.file_md5 = md5Str;
+          resolve(md5Str);
+        };
+        reader.onerror = (error) => {
+          reject(error);
+        };
+        reader.readAsArrayBuffer(this.file);
+      });
     },
-    async sendImageOrVideo(){
+    async sendImageOrVideo() {
       if (this.file == null) {
-        alert('请先选择要上传的文件');
+        alert("请先选择要上传的文件");
         return;
       }
       //查看文件是否是图片或视频
- 
+
       try {
-        let result={};
+        let result = {};
         this.file_md5 = await this.readFileAndCalculateMD5(this.file);
         //console.log("md5:",this.file_md5);
-        let md5_result = await GetFileInfoByMd5Service({"md5":this.file_md5,token:this.tokenData.token,"type":1});
-        if(md5_result.code === 0){
+        let md5_result = await GetFileInfoByMd5Service({
+          md5: this.file_md5,
+          token: this.tokenData.token,
+          type: 1,
+        });
+        if (md5_result.code === 0) {
           result = md5_result;
-        }else{
-           let formData = new FormData();
-            formData.append('file', this.file);
-            //console.log("add file: " + this.file);
-            formData.append('upload_type', "1");
-            formData.append('md5', this.file_md5);
-            formData.append('auth_type', "public");
-            //console.log("formData:",formData);
+        } else {
+          let formData = new FormData();
+          formData.append("file", this.file);
+          //console.log("add file: " + this.file);
+          formData.append("upload_type", "1");
+          formData.append("md5", this.file_md5);
+          formData.append("auth_type", "public");
+          //console.log("formData:",formData);
 
-          
-            result = await UploadFileService(formData,this.tokenData.token);
-            if (result.code!== 0) {
-              ElMessage.error('上传文件失败，请稍后再试');
-              return;
-            }
+          result = await UploadFileService(formData, this.tokenData.token);
+          if (result.code !== 0) {
+            ElMessage.error("上传文件失败，请稍后再试");
+            return;
+          }
         }
         let resp_data = result.data;
 
         //console.log("resp:",resp_data);
-        let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
-        let msg_ ="";
+        let url = "https://gep.ljsea.top/tool/file/" + resp_data.FileStoreName;
+        let msg_ = "";
         //markdown 图片格式
-        let fileType = this.file.name.split('.')[1];
-          if (!['jpg', 'jpeg', 'png', 'gif', 'mp4'].includes(fileType)) {
-            //alert('请选择正确的图片或视频格式');
-             msg_ = `文件：[${resp_data.FileName}](${url})`;
-          }else{
-            msg_ = `![${resp_data.FileName}](${url})`;
-           
-          }
-        
- 
+        let fileType = this.file.name.split(".")[1];
+        if (!["jpg", "jpeg", "png", "gif", "mp4"].includes(fileType)) {
+          //alert('请选择正确的图片或视频格式');
+          msg_ = `文件：[${resp_data.FileName}](${url})`;
+        } else {
+          msg_ = `![${resp_data.FileName}](${url})`;
+        }
+
         let req = {
           token: localStorage.getItem("token"),
           ip: localStorage.getItem("ip"),
@@ -729,12 +782,12 @@ export default {
           Msg: msg_,
           CreatedAt: new Date(),
         };
-        console.log("msg:",msg);
+        console.log("msg:", msg);
         this.MsgList.push(msg);
         this.scrollToBottom();
         this.sendImgDialogVisible = false;
       } catch (error) {
-        ElMessage.error('上传文件时出现网络错误，请稍后再试');
+        ElMessage.error("上传文件时出现网络错误，请稍后再试");
         console.error(error);
       }
     },
@@ -842,8 +895,8 @@ export default {
 }
 
 .send-image-button-bg {
-    background-image: url(../assets/img.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
+  background-image: url(../assets/img.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 </style>
diff --git a/src/views/UserList.vue b/src/views/UserList.vue
index 5a2985d..134c2bb 100644
--- a/src/views/UserList.vue
+++ b/src/views/UserList.vue
@@ -10,11 +10,13 @@ import {GetUserInfoService} from "@/api/user.js";
 import { GetRedisInfoService } from "@/api/tool.js";
 import {DelFGService} from "@/api/user.js";
 import router from "@/router/index.js";
+import { UploadFileService } from "@/api/tool.js";
+import {GetFileInfoByMd5Service } from "@/api/tool.js";
 import Cookies from "js-cookie";
 import { getFriendListService } from "@/api/chat.js";
 import {sendMessageService} from "@/api/chat.js";
 import { ElMessage } from 'element-plus';
-
+import CryptoJS from 'crypto-js';
 import Menu from "@/views/Menu.vue";
 
 export default {
@@ -30,6 +32,8 @@ export default {
       FriendsGRequestList:[],
       FriendsTableIsDisplay:false,
       RedisIsDisplay:false,
+      avatar_file: null,
+      file_md5: "",
       RedisList:[],
       FriendsGList:[],
       GroupList:[],
@@ -201,6 +205,76 @@ export default {
         console.log(e);
       }
     },
+    handleAvatarFileUpload(e) {
+      this.avatar_file = e.target.files[0];
+      //判断文件类型是否为图片
+      if (!this.avatar_file.type.startsWith("image/")) {
+        ElMessage.error("请选择图片文件");
+        this.avatar_file = null;
+        return;
+      }
+      //this.UserUpdateForm.avatar = URL.createObjectURL(this.avatar_file);
+      this.uploadAvatarFile();
+    },
+    readFileAndCalculateMD5() {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
+                const md5Hash = CryptoJS.MD5(wordArray);
+                const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
+                //console.log("onload: " + md5Str);
+                this.file_md5 = md5Str;
+                resolve(md5Str);
+            };
+            reader.onerror = (error) => {
+                reject(error);
+            };
+            reader.readAsArrayBuffer(this.avatar_file);
+        });
+    },
+    async uploadAvatarFile(){
+      if (this.avatar_file == null) {
+        alert('请先选择要上传的文件');
+        return;
+      }
+ 
+      try {
+        let result={};
+        this.file_md5 = await this.readFileAndCalculateMD5(this.avatar_file);
+        //console.log("md5:",this.file_md5);
+        let md5_result = await GetFileInfoByMd5Service({"md5":this.file_md5,token:this.tokenData.token,"type":1});
+        if(md5_result.code === 0){
+          result = md5_result;
+        }else{
+           let formData = new FormData();
+            formData.append('file', this.avatar_file);
+            //console.log("add file: " + this.file);
+            formData.append('upload_type', "1");
+            formData.append('md5', this.file_md5);
+            formData.append('auth_type', "public");
+            //console.log("formData:",formData);
+
+          
+            result = await UploadFileService(formData,this.tokenData.token);
+            if (result.code!== 0) {
+              ElMessage.error('上传文件失败，请稍后再试');
+              return;
+            }
+        }
+        let resp_data = result.data;
+
+        //console.log("resp:",resp_data);
+        let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
+
+        this.UserUpdateForm.avatar = url;
+        //更新用户信息
+        await this.updateUserInfo();
+      } catch (error) {
+        ElMessage.error('上传文件时出现网络错误，请稍后再试');
+        console.error(error);
+      }
+    },
     async updateUserInfo(){
       let result ={}
       try{
@@ -296,6 +370,7 @@ export default {
           this.UserUpdateForm.run = result.data.Run;
           this.UserUpdateForm.upload = result.data.Upload;
           this.UserUpdateForm.age = result.data.Age;
+          this.UserUpdateForm.avatar = result.data.Avatar === "" ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg":result.data.Avatar;
           this.UserUpdateForm.role = result.data.Role;
           this.UserUpdateForm.gender = result.data.Gender;
           this.UserUpdateForm.create_time = result.data.CreatedAt;
@@ -309,6 +384,7 @@ export default {
             localStorage.setItem("video_func",result.data.VideoFunc);
             localStorage.setItem("device_func",result.data.DeviceFunc);
             localStorage.setItem("cid_func",result.data.CIDFunc);
+            localStorage.setItem("avatar",result.data.Avatar);
             //console.log("my role:",this.role);
           }
         }
@@ -442,6 +518,11 @@ export default {
                       autocomplete="on"
                     ></el-input>
                   </el-form-item>
+                  <el-form-item label="头像" prop="name">
+                    <el-avatar :size="80" :src="UserUpdateForm.avatar"></el-avatar>
+                    <!-- 选择图片 -->
+                    <input type="file" @change="handleAvatarFileUpload">更换头像</input>
+                  </el-form-item>
                   <el-form-item label="用户名" prop="name">
                     <el-input
                       v-model="UserUpdateForm.name"