修改首页聊天

src/api/chat/msg.js

@@ -45,7 +45,7 @@ export function msgFriend(msgId) {
 // 删除聊天消息管理;
 export function delMsg(msgId) {
   return request({
-    url: '/chat/msg',
+    url: '/chat/msg/'+msgId,
     method: 'delete'
   })
 }

src/assets/styles/my-common.scss

@@ -21,7 +21,8 @@
     }
     //左侧板块
     .left-main {
-      width: 312px;
+      // width: 312px;
+      width: 20.1%;
       margin-right: 8px;
       .left-top {
         display: flex;
@@ -103,7 +104,6 @@
     align-items: center;
     border-bottom: 1px solid #c1cce3;
     position: relative;
-  
     & > div:last-child {
       vertical-align: middle;
       margin-right: 10px;
@@ -119,6 +119,7 @@
       .person-cont {
         color: #505870;
         font-size: 14px;
+
       }
     }
     .del-chat{
@@ -148,6 +149,7 @@
     display: flex;
     align-items: flex-start;
     margin-bottom: 10px;
+
   }
   
   .message-left {
@@ -155,5 +157,7 @@
   }
   
   .message-right {
+    // width: 80%;
+    margin-left: 100px;
     justify-content: flex-end;
   }

src/components/AddPerson/index.vue

@@ -30,8 +30,8 @@
     <!-- <el-transfer :titles="['显示', '隐藏']"></el-transfer> -->
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="isOpen = false">取消</el-button>
-        <el-button type="primary" @click="confirm">
+        <el-button @click="isOpen = false" class="cancel-button">取消</el-button>
+        <el-button type="primary" @click="confirm" class="sure-button">
           确认
         </el-button>
       </span>
@@ -42,6 +42,7 @@
 <script setup>
 import { reactive,ref,toRaw,toRefs,watch} from "vue";
 import {  ElMessage} from 'element-plus'
+import useUserStore from "@/store/modules/user";
 import { defineEmits } from "vue";
 const opent = ref(true);
 const props = defineProps({
@@ -94,6 +95,8 @@ const confirm=()=>{
   const {disabled,label}=toRefs(clickData.value)
   if(disabled.value){
     return ElMessage({ message: '当前选中的非人员,请重新选择', type: 'error' })
+  }else if(clickData.value.id==useUserStore().uid){
+    return ElMessage({ message: '当前选择为自己,请重新选择', type: 'error' })
   }
     emit("changeMsg",  clickData.value);
     isOpen.value  = false
@@ -131,4 +134,10 @@ onMounted(() => {
     width: 94%;
     margin: 8px;
 }
+.cancel-button{
+  border: 1px solid #C1CCE3;
+}
+.sure-button{
+  background-color: #2E6BC8;
+}
 </style>

src/components/FileUpload/index.vue

@@ -1,52 +1,86 @@
 <template>
-  <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="fileUpload"
-    >
-      <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
-    </el-upload>
-    <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
-      请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
+  <el-dialog
+    v-model="isOpen"
+    append-to-body
+    width="342"
+  >
+    <div class="upload-file">
+      <el-upload
+        multiple
+        :action="uploadFileUrl"
+        :before-upload="handleBeforeUpload"
+        :file-list="fileList"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        :on-success="handleUploadSuccess"
+        :show-file-list="false"
+        :headers="headers"
+        class="upload-file-uploader"
+        ref="fileUpload"
+      >
+        <!-- 上传按钮 -->
+        <el-button type="primary">选取文件</el-button>
+      </el-upload>
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </template>
+        <template v-if="fileType">
+          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+        </template>
+        的文件
+      </div>
+      <!-- 文件列表 -->
+      <transition-group
+        class="upload-file-list el-upload-list el-upload-list--text"
+        name="el-fade-in-linear"
+        tag="ul"
+      >
+        <li
+          :key="file.uid"
+          class="el-upload-list__item ele-upload-list__item-content"
+          v-for="(file, index) in fileList"
+        >
+          <el-link
+            :href="`${baseUrl}${file.url}`"
+            :underline="false"
+            target="_blank"
+          >
+            <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+          </el-link>
+          <div class="ele-upload-list__item-content-action">
+            <el-link
+              :underline="false"
+              @click="handleDelete(index)"
+              type="danger"
+              >删除</el-link
+            >
+          </div>
+        </li>
+      </transition-group>
     </div>
-    <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
-        </div>
-      </li>
-    </transition-group>
-  </div>
+    <slot name='footer'>
+      
+    </slot>
+  </el-dialog>
 </template>
 
 <script setup>
 import { getToken } from "@/utils/auth";
 
 const props = defineProps({
+  openFile: {
+    type: Boolean,
+    default: false,
+  },
   modelValue: [String, Object, Array],
   // 数量限制
   limit: {
     type: Number,
-    default: 5,
+    default: 1,
   },
   // 大小限制(MB)
   fileSize: {
@@ -56,13 +90,13 @@ const props = defineProps({
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+    default: () => ["doc", "xls", "ppt", "txt", "pdf",'xlsx','png', 'jpg', 'jpeg'],
   },
   // 是否显示提示
   isShowTip: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
 });
 
 const { proxy } = getCurrentInstance();
@@ -76,35 +110,46 @@ const fileList = ref([]);
 const showTip = computed(
   () => props.isShowTip && (props.fileType || props.fileSize)
 );
-
-watch(() => props.modelValue, val => {
-  if (val) {
-    let temp = 1;
-    // 首先将值转为数组
-    const list = Array.isArray(val) ? val : props.modelValue.split(',');
-    // 然后将数组转为对象数组
-    fileList.value = list.map(item => {
-      if (typeof item === "string") {
-        item = { name: item, url: item };
-      }
-      item.uid = item.uid || new Date().getTime() + temp++;
-      return item;
-    });
-  } else {
-    fileList.value = [];
-    return [];
+const isOpen = ref(props.open);
+watch(() => props.openFile,
+  (newValue) => {
+    isOpen.value = newValue;
   }
-},{ deep: true, immediate: true });
+);
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      let temp = 1;
+      // 首先将值转为数组
+      const list = Array.isArray(val) ? val : props.modelValue.split(",");
+      // 然后将数组转为对象数组
+      fileList.value = list.map((item) => {
+        if (typeof item === "string") {
+          item = { name: item, url: item };
+        }
+        item.uid = item.uid || new Date().getTime() + temp++;
+        return item;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
 
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
   // 校检文件类型
   if (props.fileType.length) {
-    const fileName = file.name.split('.');
+    const fileName = file.name.split(".");
     const fileExt = fileName[fileName.length - 1];
     const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
     if (!isTypeOk) {
-      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
+      proxy.$modal.msgError(
+        `文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`
+      );
       return false;
     }
   }
@@ -112,7 +157,7 @@ function handleBeforeUpload(file) {
   if (props.fileSize) {
     const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
-      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      proxy.$modal.msgError(`选取文件大小不能超过 ${props.fileSize} MB!`);
       return false;
     }
   }
@@ -154,7 +199,9 @@ function handleDelete(index) {
 // 上传结束处理
 function uploadedSuccessfully() {
   if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    fileList.value = fileList.value
+      .filter((f) => f.url !== undefined)
+      .concat(uploadList.value);
     uploadList.value = [];
     number.value = 0;
     emit("update:modelValue", listToString(fileList.value));
@@ -180,7 +227,7 @@ function listToString(list, separator) {
       strs += list[i].url + separator;
     }
   }
-  return strs != '' ? strs.substr(0, strs.length - 1) : '';
+  return strs != "" ? strs.substr(0, strs.length - 1) : "";
 }
 </script>
 

src/permission.js

@@ -15,7 +15,6 @@ const whiteList = ['/login', '/register'];
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
-  console.log(to)
   if (getToken()) {
     to.meta.title && useSettingsStore().setTitle(to.meta.title)
     /* has token*/

src/store/modules/websocket.js

@@ -1,5 +1,8 @@
 // websoct.js
 import useUserStore from '@/store/modules/user'
+import {
+  msgSend,
+} from "@/api/chat/msg";
 const useWebsoctStore = defineStore('websoct', {
   state: () => ({
     messages: [],
@@ -10,15 +13,17 @@ const useWebsoctStore = defineStore('websoct', {
     connect() {
       const useUser=useUserStore()
       if (window.WebSocket) {
-      this.socket =  new WebSocket(`${window.location.origin.replace("http", "ws")}/websocket/message/${useUserStore().uid}`);
+      this.socket = new WebSocket(`${window.location.origin.replace("http", "ws")}/websocket/message/${useUserStore().uid}`);
       }
       this.socket.addEventListener("open", () => {
         console.log("WebSocket连接已打开")
       })
 
       this.socket.addEventListener("message", (event) => {
+        console.log('message', event)
         const message = JSON.parse(JSON.stringify(event.data))
         this.messages.push(message)
+
       })
 
       this.socket.addEventListener("close", () => {
@@ -29,11 +34,20 @@ const useWebsoctStore = defineStore('websoct', {
         console.error("WebSocket连接错误:", error)
       })
     },
-    send(message) {
-      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-        console.log('message', message)
-        this.socket.send(JSON.stringify(message))
-      }
+    sendMessage(message) {
+      var that=this
+      return new Promise((resolve, reject) => {
+				msgSend(message).then(res => {
+           this.newMessage = true // 标记有新的消息
+					resolve(res)
+				}).catch(error => {
+					reject(error)
+				})
+			})
+    //   if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+    //     console.log('message', message)
+    //     this.socket.send(JSON.stringify(message))
+    //   }
     },
     handleMessage(event) {
         console.log('event', event)

src/views/liveChat/index.vue

@@ -17,7 +17,7 @@ import {
   userInfo,
   msgSend,
   msgRecord,
-  delMsg
+  delMsg,
 } from "@/api/chat/msg";
 import Addperson from "@/components/AddPerson/index.vue"; //添加人员的弹框
 //websocket连接====
@@ -26,17 +26,11 @@ import { ElMessage } from "element-plus";
 const websoctStore = useWebsoctStore();
 //====
 const { proxy } = getCurrentInstance();
-const userIds= useUserStore()
+const userIds = useUserStore();
 const height = ref(document.documentElement.clientHeight - 74 + "px;");
 const messageText = ref(""); //发送的内容
 const headerName = ref("");
-const chatRecords = reactive(
-  { data: [] }
-  // { sender: "friend", content: "Hello" },
-  // { sender: "me", content: "Hi" },
-  // { sender: "me", content: "How are you?" },
-  // { sender: "friend", content: "I am fine, thanks!" },
-);
+const chatRecords = reactive({ data: [] });
 const sendCont = reactive({
   //发送聊天内容数据组装
   data: {
@@ -51,11 +45,10 @@ const searchData = ref([]);
 const SearchChat = () => {
   if (searchText.value) {
     searchData.value = personList.data.filter((i) => {
-      console.log('i.nickName', i)
       return i.toName == searchText.value;
     });
   } else {
-    searchData.value =personList.data;
+    searchData.value = personList.data;
   }
 }; //搜索的点击事件
 //聊天列表数据模拟
@@ -64,30 +57,28 @@ const personList = reactive({ data: [] });
 //获取好友列表
 const getMsgList = async () => {
   const resFriend = await msgFriend();
-  personList.data = resFriend.rows.filter(
-    (item) => item.toId !== useUserStore().uid
-  );
-  searchData.value=personList.data
-  sendCont.data.toId = personList.data[0]?.toId;
-  headerName.value = personList.data[0]?.toName;
-  if (personList.data[0]?.toId) {
+  personList.data = resFriend.rows;
+  // .filter(
+  //   (item) => item.toId !== useUserStore().uid
+  // );
+  searchData.value = personList.data;
+  sendCont.data.toId =
+    personList.data[0]?.toId == userIds.uid
+      ? personList.data[0].fromId
+      : personList.data[0].toId;
+  headerName.value =
+    personList.data[0]?.toId == userIds.uid
+      ? personList.data[0].fromName
+      : personList.data[0].toName;
+  if (sendCont.data.toId) {
     //调用聊天记录
-    msgRecordEvent(personList.data[0]?.toId);
+    msgRecordEvent(sendCont.data.toId);
   }
 };
-// const rightMySend=reactive({data:[]})
-// const leftFriendSend=reactive({data:[]})
 //获取用户的聊天记录
 const msgRecordEvent = async (toIdValue) => {
   const resMsgData = await msgRecord(toIdValue);
-  chatRecords.data=resMsgData.rows
-  // rightMySend.data=resMsgData.rows.filter(
-  //   (item) => item.toId !== useUserStore().uid
-  // );
-  // leftFriendSend.data=resMsgData.rows.filter(
-  //   (item) => item.toId === useUserStore().uid
-  // );
-  console.log("resMsgData", resMsgData);
+  chatRecords.data = resMsgData.rows.reverse();
 };
 //点击左侧新建聊天
 const open = ref(false);
@@ -101,63 +92,93 @@ const clickNewPerson = async () => {
 //点击左侧聊天列表
 const clickPersonIndex = ref("");
 const clickPerson = (index, item) => {
-  sendCont.data.toId = item.userId ? item.userId : item.toId;
-  headerName.value = item.nickName ? item.nickName : item.fromName;
+  sendCont.data.toId = item.userId
+    ? item.userId
+    : item.toId == userIds.uid
+    ? item.fromId
+    : item.toId;
+  headerName.value = item.nickName
+    ? item.nickName
+    : item.toId == userIds.uid
+    ? item.fromName
+    : item.toName;
   clickPersonIndex.value = index;
   msgRecordEvent(sendCont.data.toId);
-  console.log("first", clickPersonIndex.value);
 };
 //删除聊天
-const delClick=(msgId)=>{
-  proxy.$modal.confirm('删除后，将清空该聊天的消息记录').then(function() {
-    return delMsg(msgId);
-  }).then(() => {
-    getMsgList();
-    proxy.$modal.msgSuccess("删除成功");
-  })
-}
-//发送聊天点击事件
-// const messageChat = () => {
-//   const message = { text: messageText.value };
-//   websoctStore.send(message);
-//   messageText.value = "";
-// };
+const delClick = (msgId) => {
+  console.log("msgId", msgId);
+  proxy.$modal
+    .confirm("删除后，将清空该聊天的消息记录")
+    .then(function () {
+      return delMsg(msgId);
+    })
+    .then(() => {
+      getMsgList();
+      proxy.$modal.msgSuccess("删除成功");
+    });
+};
 //树选中的人传过来的选中人的信息，push进入列表中
 const changeMsg = async (val) => {
   const resInfo = await userInfo(val.id);
-  // if (personList.data.length > 0) {
-  //   personList.data.map((vPerson) => {
-  //     if (vPerson.userId != resInfo.userId) {
-  //       personList.data.push(resInfo);
-  //     } else {
-  //       return ElMessage({ message: "该聊天已存在", type: "error" });
-  //     }
-  //   });
-  // } else {
-  //   personList.data.push(resInfo);
-  // }
   if (searchData.value.length > 0) {
-    searchData.value.map((vPerson) => {
-      if (vPerson.userId != resInfo.userId) {
-        searchData.value.push(resInfo);
-      } else {
-        return ElMessage({ message: "该聊天已存在", type: "error" });
-      }
-    });
+    const filerData = searchData.value.filter(
+      (vPerson) =>
+        (vPerson.toId && vPerson.toId == resInfo.userId) ||
+        (vPerson.userId && vPerson.userId == resInfo.userId)
+    );
+    if (filerData.length > 0) {
+      return ElMessage({ message: "该聊天已存在", type: "error" });
+    } else {
+      searchData.value.unshift(resInfo);
+    }
   } else {
-    searchData.value.push(resInfo);
+    //为空数组的时候无需判断
+    searchData.value.unshift(resInfo);
   }
+  console.log("first", searchData.value);
   sendCont.data.toId = resInfo.userId;
+  msgRecordEvent(sendCont.data.toId);
   headerName.value = resInfo.nickName;
 };
-//登录账号发送聊天
-const msgSendClick = async () => {
-  sendCont.data.content = messageText.value;
-  sendCont.data.msgType = "2";
-  const mysendmsg = await msgSend(sendCont.data);
+//发送聊天
+const msgSendClick = () => {
+  const message = { content: messageText.value, msgType: "2",fileList: [],toId: sendCont.data.toId, };
+  // commonSendMsg(messageText.value, "2");
+  websoctStore.sendMessage(message);
   messageText.value = "";
-  console.log("mysendmsg", mysendmsg, sendCont.data);
 };
+//发送文件
+const openFile = ref(false);
+const sendFileClick = () => {
+  openFile.value = true;
+};
+//文件和信息共用的调用
+const commonSendMsg = async (cont, type) => {
+  sendCont.data.content = cont;
+  sendCont.data.msgType = type;
+  const mysendmsg = await msgSend(sendCont.data);
+};
+// const confirmFile = () => {
+//   // commonSendMsg(messageText.value,"1")
+// };
+// // const handleFileUpdate = (value) => {
+// //   // 在这里处理子组件传递过来的文件
+// //   console.log(value, "valuevaluevalue"); // 打印子组件传递的数据
+// // };
+// 监听新消息通知
+const handleNewMessage = () => {
+  if (websoctStore.newMessage) {
+    msgRecordEvent(sendCont.data.toId);
+    ElMessage.success("You have a new message");
+    websoctStore.newMessage = false; // 重置新消息标记
+  }
+};
+onMounted(() => {
+  getMsgList();
+  websoctStore.connect();
+  setInterval(handleNewMessage, 1000); // 每秒钟检查是否有新消息
+});
 onMounted(() => {
   try {
     getMsgList();
@@ -183,6 +204,7 @@ onMounted(() => {
         <el-icon size="24" color="#505870" @click="clickNewPerson"
           ><Plus
         /></el-icon>
+        <!-- 新建聊天弹框 -->
         <Addperson
           :open="open"
           @close="open = false"
@@ -190,6 +212,7 @@ onMounted(() => {
           @changeMsg="changeMsg"
         ></Addperson>
       </div>
+      <!-- 列表 -->
       <div
         :class="
           clickPersonIndex == index
@@ -200,15 +223,24 @@ onMounted(() => {
         :key="index"
         @click="clickPerson(index, item)"
       >
-
         <img :src="cebian" class="cebian" v-if="clickPersonIndex == index" />
-        <button class="del-chat" v-if="clickPersonIndex == index" @click="delClick(item.msgId)">删除聊天</button>
+        <button
+          class="del-chat"
+          v-if="clickPersonIndex == index"
+          @click="delClick(item.msgId)"
+        >
+          删除聊天
+        </button>
         <div>
           <img :src="item.avatar ? item.avatar : chat" class="head-sculpture" />
         </div>
-        <div>
+        <div class="spill">
           <span class="person-name">{{
-            item.nickName ? item.nickName : item.toName
+            item.nickName
+              ? item.nickName
+              : item.toId == userIds.uid
+              ? item.fromName
+              : item.toName
           }}</span
           ><span class="person-cont spill">
             {{ item.cont ? item.cont : item.content }}</span
@@ -232,35 +264,35 @@ onMounted(() => {
               class="message-container"
               v-for="(record, index) in chatRecords.data"
               :class="{
-                'message-left': useUserStore().uid== record.toId,
-                'message-right':  useUserStore().uid !== record.toId,
+                'message-left': useUserStore().uid == record.toId,
+                'message-right': useUserStore().uid !== record.toId,
               }"
               :key="index"
             >
-            <span v-if=" useUserStore().uid!== record.toId">{{ record.content }}</span>
+              <span v-if="useUserStore().uid !== record.toId">{{
+                record.content
+              }}</span>
               <img :src="chat" class="head-sculpture" />
-              <span v-if=" useUserStore().uid == record.toId">{{ record.content }}</span>
+              <span v-if="useUserStore().uid == record.toId">{{
+                record.content
+              }}</span>
             </div>
-            <!-- <div class="chat-message">
-              <div class="chat-item"  :class="{'chat-item-out':item.sender=='out'}" v-for="(item,index) in chatRecords"  :key="index">
-              <div class="chat-item-content">
-                <div :class="{'triangle':item.sender == 'me','triangle_tow': item.sender !== 'me'}"></div>
-                <div :class="{'fill':item.sender == 'me','fill_tow': item.sender !== 'me'}"></div>
-                {{ item.content }}
-              </div>
-
-              </div>
-            </div> -->
           </el-main>
           <!-- 底部 -->
           <el-footer height="72px" class="right-footer">
-            <img :src="sendFile" class="send-info-file" />
+            <!-- 发送文件 -->
+            <img
+              :src="sendFile"
+              class="send-info-file"
+              @click="sendFileClick"
+            />
             <el-input
               v-model="messageText"
               class="w-50 m-2"
               size="small"
               placeholder="请输入聊天内容"
             />
+            <!-- 发送按钮 -->
             <img :src="send" class="send-info" @click="msgSendClick" />
           </el-footer>
         </el-container>
@@ -271,38 +303,4 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 @import "@/assets/styles/my-common.scss";
-// .chat-item-out{
-//   justify-content: flex-end;
-//   .chat-item-content{
-//     margin-right: 10px;
-//   }
-// }
-// .chat-message{
-
-// }
-// .chat-item-content{
-//   position: relative;
-//   padding:10px 6px;
-//   margin-top: 10px;
-//   margin-left: 10px;
-//   border-radius: 5px;
-//   word-break: break-all;
-//   background: skyblue;
-//   color: white;
-// }
-// .chat-item{
-//   display: flex;
-// }
-// .triangle,.triangle_tow{
-//   position: absolute;
-//   top: 15px;
-//   border-width: 10px;
-//   border-style: solid;
-// }
-// .fill_tow{
-//   position: relative;
-//   top: 15px;
-//   border-width: 10px;
-//   border-style:solid ;
-// }
 </style>

vite.config.js

@@ -40,13 +40,14 @@ export default defineConfig(({
 				// https://cn.vitejs.dev/config/#server-proxy
 				'/dev-api': {
 					target: 'http://8.142.173.95:19527/',
+					// target:'http://192.168.1.18:8080/',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/dev-api/, '')
 				},
 				//websocket代理
-				'/websocket': {
-					// target: 'ws://192.168.1.28:8080/websocket',
+				'/websocket': {				
 					target:'ws://8.142.173.95:19527/websocket',
+					// target:'ws://192.168.1.18:8080/websocket',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/websocket/, '')
 				}