聊天功能基本完成

src/api/chat.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request.js'
+
+export const getFriendListService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/im/get_friend_list', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+}
+
+export const getMessageService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/im/get_message', params, {
+        headers: {
+            'token': data.token // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+};
+
+export const sendMessageService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/im/send_message', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+};

src/router/index.js

@@ -9,6 +9,7 @@ import ImVue from "@/views/Im.vue";
 import CIDListVue from "@/views/CIDList.vue";
 import CIDLog from "@/views/CIDLog.vue";
 import DeviceRealVP from "@/views/DeviceRealVP.vue";
+import Chat from "@/views/Chat.vue"
 
 const routes = [
     {
@@ -56,6 +57,11 @@ const routes = [
         name: 'CIDLog',
         component: CIDLog
     },
+    {
+        path:"/chat",
+        name:"chat",
+        component:Chat
+    },
     {
         path: '/',
         redirect: '/login'

src/views/CIDList.vue

@@ -7,6 +7,7 @@ import { addCIDService } from "@/api/cid.js";
 import { deleteCIDService } from "@/api/cid.js";
 import { updateCIDService } from "@/api/cid.js";
 import router from "@/router/index.js";
+import {ElMessage} from "element-plus";
 
 export default {
   data() {
@@ -80,9 +81,11 @@ export default {
       try {
         var d_re = await runCIDService(run_data);
         if (d_re.code == 0) {
-          alert("操作成功");
+          //alert("操作成功");
+          ElMessage.success("操作成功");
         } else {
-          alert("操作失败");
+          //alert("操作失败");
+          ElMessage.error("操作失败");
         }
       } catch (e) {
         console.log(e);
@@ -103,11 +106,13 @@ export default {
       try {
         var d_re = await deleteCIDService(delete_data);
         if (d_re.code == 0) {
-          alert("删除成功");
+          //alert("删除成功");
+          ElMessage.success("删除成功");
           //刷新页面
           this.getDeviceList();
         } else {
-          alert("操作失败");
+          //alert("操作失败");
+          ElMessage.error("操作失败");
         }
       } catch (e) {
         console.log(e);
@@ -128,9 +133,11 @@ export default {
       try {
         result = await addCIDService(this.addForm);
         if (result.code == 0) {
-          alert("添加成功");
+          //alert("添加成功");
+          ElMessage.success("添加成功");
         } else {
-          alert("添加失败");
+          //alert("添加失败");
+          ElMessage.error("添加失败");
         }
       } catch (e) {
         console.log(e);
@@ -142,10 +149,12 @@ export default {
       try {
         result = await updateCIDService(this.updateForm);
         if (result.code == 0) {
-          alert("修改成功");
+          //alert("修改成功");
+          ElMessage.success("修改成功");
           this.getDeviceList()
         } else {
-          alert("修改失败");
+          //alert("修改失败");
+          ElMessage.error("修改失败");
         }
       } catch (e) {
         console.log(e);
@@ -346,11 +355,13 @@ export default {
             <el-table-column
               prop="Script"
               label="脚本消息"
+              show-overflow-tooltip
               width="250"
             ></el-table-column>
             <el-table-column
               prop="Token"
               label="回调Token"
+              show-overflow-tooltip
               width="100"
             ></el-table-column>
             <el-table-column label="操作" width="350">

src/views/CIDLog.vue

@@ -245,11 +245,13 @@ export default {
               prop="Script"
               label="执行脚本"
               width="180"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               prop="Log"
               label="运行日志"
               width="180"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               prop="Error"

src/views/Chat.vue

@@ -0,0 +1,482 @@
+<template>
+    <el-container class="layout-container-demo" style="height: 700px;width: 1000px;">
+        <el-aside width="200px">
+          <el-input  
+            placeholder="请输入用户姓名"  
+            v-model="searchName"  
+            @input="filterUsers"  
+          ></el-input>  
+            <el-scrollbar>
+                <el-menu :default-openeds="['1', '3']">
+                    <el-sub-menu index="1">
+                        <template #title>
+                            <el-icon>
+                                <message />
+                            </el-icon>联系人
+                        </template>
+                        <el-scrollbar height="300px">
+                            <el-menu-item-group v-for="user in filteredUsers" :key="user.id">
+                            <el-menu-item :index="String(user.id)" @click="handleGetMessage(user.id)" style="height: 40px;">
+                                {{ user.name }}
+                            </el-menu-item>
+                        </el-menu-item-group>
+                        </el-scrollbar>
+                    </el-sub-menu>
+                    <el-sub-menu index="2">
+                        <template #title>
+                            <el-icon><icon-menu /></el-icon>
+                            群组
+                        </template>
+                        <el-scrollbar height="200px">
+                            <el-menu-item-group v-for="item in groupList" :key="item.id">
+                                <!-- <template #title>Group 1</template> -->
+                                <el-menu-item :index="String(item.group_name)" @click="handleSelectGroup">{{ item.group_name
+                                }}</el-menu-item>
+                                <!-- <el-menu-item index="2-2">Option 2</el-menu-item> -->
+                            </el-menu-item-group>
+                        </el-scrollbar>
+                        
+                    </el-sub-menu>
+                </el-menu>
+            </el-scrollbar>
+        </el-aside>
+
+        <el-container width="800px">
+            <el-header style="text-align: right; font-size: 12px">
+                <div class="toolbar">
+                    <el-button
+                        type="primary"
+                        size="mini"
+                        @click.prevent="handleMenuSelect('/videoList')"
+                        >返回</el-button
+                        >
+                    <el-text class="mx-1" type="primary" >目前:{{ cur_user_name }}</el-text>
+
+                    <div>
+                        <span style=" margin-right: 10px;margin-left: 10px;">{{ username }}</span>
+                        <el-avatar size="default" fit="fit"> {{ username }} </el-avatar>
+                    </div>
+                </div>
+            </el-header>
+
+            <el-main style="margin-top: 1px;">
+                <el-scrollbar class="chat-room" id="chat-room" ref="chatRoom" height="600px" style="margin-top: 1px" always>
+                    <div v-for="item in MsgList" :key="item.ID"
+                        style="margin-top: 10px;margin-bottom: 20px;">
+                        <!-- 左边 -->
+                        <div v-if="uid == item.ToUserID && item.FromUserID == cur_user_id" style="margin-left: 10px;margin-bottom: 8px;">
+                            <el-row class="row-bg" type="flex" align="middle">
+                                <el-avatar size="default" fit="fit">{{ cur_user_name }}</el-avatar>
+                                <span style="margin-left: 10px">{{ formatTime(item.CreatedAt) }}</span>
+                            </el-row>
+
+                            <el-row>
+                                <el-col :span="1000" :offset="1" class="msg" >
+                                    {{ item.Msg }}
+                                </el-col>
+                            </el-row>
+                        </div>
+                        <!-- 右边 -->
+                        <div v-if="uid == item.FromUserID && item.ToUserID == cur_user_id" style="margin-right: 10px;margin-bottom: 8px;">
+                            <el-row class="row-bg" type="flex" justify="end" align="middle">
+                                <span style="margin-right: 10px">{{ formatTime(item.CreatedAt)}}</span>
+                                <el-avatar size="default" fit="fit"> {{ tokenData.username }} </el-avatar>
+                            </el-row>
+
+                            <el-row justify="end">
+                                <el-col :span="1000" class="msg2" style="margin-right: 20px;">
+                                    {{ item.Msg }}
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </div>
+                </el-scrollbar>
+            </el-main>
+            <el-row class="row-bg" type="flex" justify="space-around" align="middle">
+                <el-col :span="20">
+                    <el-input type="text" style="width: 100%" 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>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+import axios from "axios";
+import { inject } from "vue";
+import { getFriendListService } from "@/api/chat.js";
+import { getMessageService} from "@/api/chat.js";
+import {sendMessageService} from "@/api/chat.js";
+import { ElAvatar, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElScrollbar, ElRow, ElCol, ElButton } from 'element-plus'
+import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
+import router from "@/router/index.js";
+import {ElMessage} from "element-plus";
+
+export default {
+  data() {
+    return {
+      ip: "",
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      username: localStorage.getItem("username"),
+      userList: [],
+      filteredUsers: [], // 过滤后的用户列表 
+      to_user_id:0,
+      cur_user_id:0,
+      searchName: '', // 搜索框内容
+
+      cur_user_name: "",
+      eventSource: null,  // 事件源
+      uid: localStorage.getItem("userId"),
+      currentMsg:"",
+      MsgList: [],
+      groupList: [],
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async handleSelectUser(){
+        let result = {};
+      try {
+        result = await getFriendListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+      this.userList=data.friends;
+      this.groupList=data.groups;
+    },
+    filterUsers() {  
+      this.filteredUsers = this.userList.filter(user => {  
+        return user.name.toLowerCase().includes(this.searchName.toLowerCase());  
+      });  
+    },
+    async handleGetMessage(id){
+        let result = {};
+        this.to_user_id=id;
+        this.cur_user_id=id;
+        console.log("uid:",this.uid,"\tcur_user_id:",this.cur_user_id)
+        for(let i=0; i<this.userList.length; i++){
+            if(this.userList[i].id === id){
+                this.cur_user_name=this.userList[i].name;
+                break;
+            }
+        }
+      try {
+        let req={
+            token: localStorage.getItem("token"),
+            ip: localStorage.getItem("ip"),
+            userId: localStorage.getItem("userId"),
+            username: localStorage.getItem("username"),
+            from_user_id:id,
+            to_user_id:localStorage.getItem("userId"),
+            index:2,
+            type:1,
+        }
+        result = await getMessageService(req);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+      if(data === undefined){
+        ElMessage({
+            message: "消息获取失败！",
+            type: "error",
+          })
+        return;
+      }
+      //data sort by created time
+      for (let i = 0; i < data.length; i++) {
+        for (let j = i + 1; j < data.length; j++) {
+          if (data[i].CreatedAt > data[j].CreatedAt) {
+            let temp = data[i];
+            data[i] = data[j];
+            data[j] = temp;
+          }
+        }
+      }
+      this.MsgList=data;
+      this.scrollToBottom();
+    },
+    formatTime(time){
+        let date = new Date(time);
+          // 提取年、月、日、时、分、秒  
+            const year = date.getFullYear();  
+            const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1  
+            const day = ('0' + date.getDate()).slice(-2);  
+            const hour = ('0' + date.getHours()).slice(-2);  
+            const minute = ('0' + date.getMinutes()).slice(-2);  
+            const second = ('0' + date.getSeconds()).slice(-2);  
+            
+            // 重新组合并返回格式化的日期时间字符串  
+            return `${year}-${month}-${day} ${hour}:${minute}:${second}`; 
+    },
+
+    connectWebSocket() {
+      // 连接WebSocket
+      let _this = this;
+      if (typeof WebSocket == "undefined") {
+        console.log("浏览器不支持WebSocket");
+      } else {
+        console.log("浏览器支持WebSocket");
+        let socketUrl =
+          "wss://gep.ljsea.xyz/im/ws_v2?to_user_id=" +
+          this.to_user_id +
+          "&token=" +
+          this.tokenData.token;
+
+        // console.log("socketUrl:", socketUrl);
+        if (this.socket != null) {
+          this.socket.close();
+          this.socket = null;
+        }
+        // 开启一个websocket服务
+        this.socket = new WebSocket(socketUrl);
+        //打开事件
+        this.socket.onopen = function () {
+          this.loading=false
+          //alert("连接成功");
+          ElMessage({
+            message: "连接成功",
+            type: "success",
+          })
+        };
+        this.socket.onerror = (error) => {
+          console.error("WebSocket Error:", error);
+        };
+        //关闭事件
+        this.socket.onclose = function () {
+          //alert("连接已关闭!");
+          ElMessage({
+            message: "连接已关闭",
+            type: "error",
+          })
+          router.push("/user");
+        };
+        //  浏览器端收消息，获得从服务端发送过来的文本消息
+        this.socket.onmessage = async function (msg) {
+          //console.log("收到数据====" + msg.data);
+          let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
+          // console.log("收到数据====" + data);
+          // 如果服务器端发送过来的json数据
+          console.log("data.type:", data.type);
+          if (data.type == "msg") {  // 如果是消息类型，解密消息内容
+           // console.log("收到数据====" + JSON.stringify(msg.data));
+            console.log("msg_:", data.data);
+            _this.MsgList.push(JSON.parse(data.data));
+            //console.log("msglist:", _this.MsgList);
+            // 构建消息内容
+          }else if (data.type == "check") {
+            //alert("对方已下线");
+            console.log(data.type)
+          }
+        };
+      }
+    },
+    async connectSSE(){
+        if (!!window.EventSource) { 
+            this.eventSource = new EventSource("https://gep.ljsea.xyz/im/sse_msg?token="+this.tokenData.token);
+            let this_=this
+            this.eventSource.onopen = function(event) {  
+                console.log("连接已建立！");
+            };
+            this.eventSource.onmessage = function(event) {
+                console.log(event.data);
+                let msg = JSON.parse(event.data);
+                if(msg.type !=="check"){
+                    alert(msg);
+                    this_.MsgList.push(msg);
+                }
+             };
+            this.eventSource.onerror = (error) => {  
+              //重新连接
+              this.connectSSE();
+            if (this.eventSource.readyState === EventSource.CLOSED) {  
+                //console.log('Connection was closed by the server.');  
+                ElMessage({
+                    message: "连接已关闭！:"+error,
+                    type: "error",
+                })
+
+                
+                // Optionally, try to reconnect  
+            } else {  
+                //console.error('EventSource failed:', error);  
+                ElMessage({
+                    message: "连接失败！服务器无法实时推送消息！",
+                    type: "error",
+                })
+                // Handle error  
+            }  
+        };
+        }else{
+            ElMessage({
+                message: "您的浏览器不支持SSE！",
+                type: "error",
+            })
+        }
+    },
+    scrollToBottom() {
+        this.$nextTick(() => {  
+      const scrollbar = this.$refs.chatRoom.$el.querySelector('.el-scrollbar__wrap');  
+      if (scrollbar) {  
+        scrollbar.scrollTop = scrollbar.scrollHeight;  
+      }  
+    });  
+        },
+    async handleSendBtnClick(){
+      if(this.currentMsg =="" || this.currentMsg === null){
+        ElMessage.error("消息不能为空！");
+        return
+      }
+        let result = {};
+      try {
+        let req={
+            token: localStorage.getItem("token"),
+            ip: localStorage.getItem("ip"),
+            userId: localStorage.getItem("userId"),
+            username: localStorage.getItem("username"),
+            from_user_id:localStorage.getItem("userId"),
+            to_user_id:this.to_user_id,
+            msg:this.currentMsg,
+            type:1,
+        }
+        result = await sendMessageService(req);
+        if(result.code !==0){
+            ElMessage({
+                message: "消息发送失败！",
+                type: "error",
+              })
+        }
+        let msg={
+            ID:result.Data,
+            FromUserID:localStorage.getItem("userId"),
+            ToUserID:this.to_user_id,
+            Msg:this.currentMsg,
+            CreatedAt:new Date(),
+        }
+        this.MsgList.push(msg);
+        this.scrollToBottom();
+      } catch (e) {
+        console.log(e);
+      }
+      this.currentMsg="";
+    },
+    async getIpClient() {
+      try {
+        const response = await axios.get("https://ipinfo.io/json");
+        this.ip = response.data.ip;
+        localStorage.setItem("ip", this.ip);
+        //console.log(response);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    toVideoList() {
+      router.push("/videoList");
+    },
+    // 修改条纹颜色
+    tableRowClassName({ row, rowIndex }) {
+      if (row.human === 1) {
+        return {
+          background: "#488aff",
+        };
+      } else {
+        return "";
+      }
+    },
+  },
+
+  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
+  // 例如这个函数就会在组件挂载完成后被调用
+  async mounted() {
+    let now = new Date();
+    if (localStorage.getItem("token") === null) {
+      router.push("/login");
+    }
+    // console.log("mounted");
+    await this.getIpClient();
+    await this.handleSelectUser();
+    this.filteredUsers=this.userList;
+    //await this.connectSSE();
+    this.connectWebSocket();
+    this.handleGetMessage(this.userList[0].id);
+  },
+  onUnmounted() {
+    if (this.eventSource) {
+      this.eventSource.close();
+    }
+  },
+};
+</script>
+
+<style scoped>
+.layout-container-demo .el-header {
+    position: relative;
+    /* background-color: var(--el-color-primary-light-7); */
+    color: var(--el-text-color-primary);
+}
+
+.layout-container-demo .el-aside {
+    color: var(--el-text-color-primary);
+    /* background: var(--el-color-primary-light-8); */
+}
+
+.layout-container-demo .el-menu {
+    border-right: none;
+}
+
+.layout-container-demo .el-main {
+    padding: 0;
+}
+
+.layout-container-demo .toolbar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    right: 5px;
+}
+
+.msg {
+    background-color: #73d1f3;
+    /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 18px;
+    line-height: 16px;
+    /* width: auto; */
+    /* max-width: 330px; */
+    margin-top: 20px;
+    color: white;
+}
+
+.msg2 {
+    background-color: #12B7F5;
+    /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 18px;
+    line-height: 16px;
+    /* width: auto; */
+    /* max-width: 330px; */
+    margin-top: 20px;
+    color: white;
+}
+</style>

src/views/DeviceList.vue

@@ -7,6 +7,7 @@ import { addDeviceService } from "@/api/device.js";
 import { deleteDeviceService } from "@/api/device.js";
 import { updateDeviceService } from "@/api/device.js";
 import router from "@/router/index.js";
+import { ElMessage } from 'element-plus';  
 
 export default {
   data() {
@@ -93,9 +94,11 @@ export default {
       try {
         var d_re = await restartDeviceService(restart_data);
         if (d_re.code == 0) {
-          alert("重启成功");
+          //alert("重启成功");
+          ElMessage.success('重启成功');
         } else {
           alert("操作失败");
+          ElMessage.fail('操作失败');
         }
       } catch (e) {
         console.log(e);
@@ -116,11 +119,13 @@ export default {
       try {
         var d_re = await deleteDeviceService(delete_data);
         if (d_re.code == 0) {
-          alert("删除成功");
+          //alert("删除成功");
+          ElMessage.success('删除成功');
           //刷新页面
           this.getDeviceList();
         } else {
-          alert("操作失败");
+          //alert("操作失败");
+          ElMessage.fail("操作失败");
         }
       } catch (e) {
         console.log(e);
@@ -144,9 +149,10 @@ export default {
       try {
         result = await addDeviceService(this.addForm);
         if (result.code == 0) {
-          alert("添加成功");
+          ElMessage.success("添加成功");
         } else {
-          alert("添加失败");
+          //alert("添加失败");
+          ElMessage.error("添加失败")
         }
       } catch (e) {
         console.log(e);
@@ -158,7 +164,8 @@ export default {
       try {
         result = await updateDeviceService(this.updateForm);
         if (result.code == 0) {
-          alert("修改成功");
+          //alert("修改成功");
+          ElMessage.success("修改成功");
           this.getDeviceList()
         } else {
           alert("修改失败");
@@ -178,7 +185,8 @@ export default {
       try {
         var d_re = await restartDeviceService(restart_data);
         if (d_re.code == 0) {
-          alert("重启成功");
+          //alert("重启成功");
+          ElMessage.success("重启成功");
         } else {
           alert("操作失败");
         }

src/views/Im.vue

@@ -55,6 +55,7 @@ import router from "@/router/index.js";
 import * as crypto from "crypto";
 import CryptoJS from "crypto-js";
 import { ElLoading } from "element-plus";
+import { ElMessage } from 'element-plus';  
 import Cookies from "js-cookie";
 export default {
   data() {
@@ -142,7 +143,11 @@ export default {
         if (this.cnt > 10) {
           //暂停定时器
           this.stopInterval();
-          alert("连接失败，请重试！");
+          //alert("连接失败，请重试！");
+          ElMessage({
+            message: "连接失败，请重试！",
+            type: "error",
+          })
           router.push("/user");
         }
         return;
@@ -287,14 +292,22 @@ export default {
         //打开事件
         this.socket.onopen = function () {
           this.loading=false
-          alert("连接成功");
+          //alert("连接成功");
+          ElMessage({
+            message: "连接成功",
+            type: "success",
+          })
         };
         this.socket.onerror = (error) => {
           console.error("WebSocket Error:", error);
         };
         //关闭事件
         this.socket.onclose = function () {
-          alert("连接已关闭!");
+          //alert("连接已关闭!");
+          ElMessage({
+            message: "连接已关闭",
+            type: "error",
+          })
           router.push("/user");
         };
         //  浏览器端收消息，获得从服务端发送过来的文本消息
@@ -314,7 +327,11 @@ export default {
             // 构建消息内容
             _this.createContent(_this.to_user_name, null, data.data);
           }else if (data.type == "offline"){
-            alert("对方已下线");
+            //alert("对方已下线");
+            ElMessage({
+              message: "对方已下线",
+              type: "error",
+            })
             _this.socket.close();
             router.push("/user");
           }

src/views/Login.vue

@@ -104,6 +104,7 @@ import {
 } from "@/api/user.js";
 import router from "@/router/index.js";
 import VueQr from "vue-qr"; // 确保你已经注册了这个组件
+import {ElMessage} from "element-plus";
 import QRCode from "qrcode";
 
 const isLogin = ref(true);
@@ -212,14 +213,16 @@ const login = async () => {
 const onRegister = async () => {
   //校验密码是否一致
   if (registerData.value.password !== registerData.value.repassword) {
-    alert("两次密码不一致");
+    //alert("两次密码不一致");
+    ElMessage.error("两次密码不一致");
     return;
   }
   //校验邮箱是否合法
   let email = registerData.value.email;
   let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
   if (!reg.test(email)) {
-    alert("邮箱格式不正确");
+    //alert("邮箱格式不正确");
+    ElMessage.error("邮箱格式不正确");
     return;
   }
 
@@ -301,7 +304,8 @@ const getQRStatus = async () => {
       router.push("/videoList");
     }
   } else {
-    alert(result.message);
+    //alert(result.message);
+    ElMessage.error(result.message);
   }
 };
 
@@ -327,9 +331,11 @@ const init = async () => {
 const register = async () => {
   let result = registerService(registerData.value);
   if (result.code === 0) {
-    alert(result.message);
+    //alert(result.message);
+    ElMessage.success(result.message);
   } else {
-    alert(result.message);
+    //alert(result.message);
+    ElMessage.error(result.message);
   }
 };
 </script>

src/views/UserList.vue

@@ -27,6 +27,9 @@ export default {
     async getUserList() {
       let result = {};
       try {
+        if(this.search_id === "" || this.search_id === null){
+          this.search_id = -1;
+        }
         this.tokenData.id = this.search_id;
         this.tokenData.keyword = this.keyword;
         Cookies.set("search_id", this.search_id);
@@ -38,6 +41,10 @@ export default {
       let data = result.data;
       this.tableData = data;
     },
+    requestFriend(index) {
+      var id = this.tableData[index].ID;
+      var name = this.tableData[index].Name;
+    },
     onSubmit() {
       getUserList({ token: token });
     },
@@ -195,6 +202,13 @@ export default {
                   @click.prevent="startChat(scope.$index)"
                   >聊天</el-button
                 >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="requestFriend(scope.$index)"
+                  >请求加好友</el-button
+                >
+
                 <!-- <el-button type="danger" size="mini">删除</el-button> -->
               </template>
             </el-table-column>

src/views/VideoList.vue

@@ -233,6 +233,9 @@ export default {
     <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
+    <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/chat')"
+      >聊天</el-button
+    >
     <el-button
       type="primary"
       size="mini"