修复会话消息相关问题。包括页面滚动条、未读提示等

src/layout/indexCommon.vue

@@ -49,10 +49,9 @@
 									{{ item.label }}
 								</div>
 								<span class="yuandian" v-if="
-                    websoctStore.messOne?.fromId &&
+                    hasNewMessage &&
                     item.path == '/index' &&
-                    $route.path != item.path &&
-                    clickId !== index
+                    $route.path != item.path
                   "></span>
 							</div>
 						</router-link><br />
@@ -131,7 +130,8 @@
 		nextTick,
 		onMounted,
 		provide,
-		ref
+		ref,
+		watchEffect
 	} from "vue";
 	import {
 		ElMessageBox,
@@ -191,6 +191,7 @@
 	const isAlive = ref(true);
 	const toFileData = ref();
 	const uid = useUserStore().uid;
+	let hasNewMessage = ref(false)
 	const iFrameData = ref([{
 			id: 1,
 			// src: `${window.location.origin}/fileEdit?clickRowId=113`,
@@ -260,6 +261,14 @@
 		// console.log('router',router)
 	});
 
+	watchEffect(async() => {
+		console.log("===============有新消息了：",websoctStore.messOne)
+		
+		if(websoctStore.noReadList!=null)hasNewMessage.value = true
+		else hasNewMessage.value = false
+		console.log("===============websoctStore.noReadList：",websoctStore.noReadList,'===========',hasNewMessage.value)
+	});
+
 	function handleCommand(command) {
 		switch (command) {
 			case "setLayout":
@@ -416,10 +425,21 @@
 			clickTab(items.path);
 		}
 		editableTabsValue.value = items.path;
+		if(items.path=='/index' && websoctStore.noReadList!=null){
+			hasNewMessage.value = true
+		}else{
+			hasNewMessage.value = false
+		}
 		// console.log("editableTabs", editableTabs.value);
 	};
 	const clickTab = (item) => {
-		console.log("item", toRaw(item));
+		const path = toRaw(item)
+		console.log("item", path);
+		if(path=='/index' && websoctStore.noReadList!=null){
+			hasNewMessage.value = true
+		}else{
+			hasNewMessage.value = false
+		}
 		setTimeout(() => {
 			console.log("toFileData.value", toFileData.value);
 			if (toFileData.value) {
@@ -443,8 +463,8 @@
 			}
 			let regExp = new RegExp(/^\//);
 			let regFile = new RegExp(/^tofile/);
-			if (!regExp.test(toRaw(item))) {
-				const data = JSON.parse(toRaw(item));
+			if (!regExp.test(path)) {
+				const data = JSON.parse(path);
 				console.log("data", data);
 				router.push({
 					// path: "/fileEdit" + data.docId,

src/store/modules/websocket.js

@@ -11,6 +11,7 @@ const useWebsoctStore = defineStore('websoct', {
     messOne:{},
     newMessage: false,
     falseMessag:false,//消息是否发送成功
+    noReadList: null
   }),
   actions: {
     connect() {
@@ -32,9 +33,13 @@ const useWebsoctStore = defineStore('websoct', {
       this.socket.addEventListener("message", (event) => {
         console.log('event发送消息', event)
         const message=event.data!='连接成功'?JSON.parse(JSON.stringify(event.data)):''
+        if(message=='') return;
         this.messOne=event.data!='连接成功'?JSON.parse(event.data):{}
-        this.messages.push(message)
-
+        if(this.noReadList==null) this.noReadList={}
+        let lst = this.noReadList[this.messOne.fromId]
+        if(lst==null) this.noReadList[this.messOne.fromId] = 1
+        else this.noReadList[this.messOne.fromId]=lst+1
+        //this.messages.push(message)
       })
 
       this.socket.addEventListener("close", () => {

src/views/biz/recent/index.vue

@@ -52,11 +52,11 @@
                 <div>
                   <img
                     class="table_icon"
-                    :src="setIcon(scope.row.fileType)"
+                    :src="setIcon(scope.row==null ? '':scope.row.fileType)"
                     alt=""
                     style=""
                   />
-                  {{ scope.row.fileName }}
+                  {{ scope.row==null ? '': scope.row.fileName }}
                 </div>
                 <!-- <span
                   style="
@@ -99,7 +99,7 @@
             <el-table-column label="大小">
               <template #default="scope">
                 <span>
-                  {{ formatFileSize(scope.row.fileSize) }}
+                  {{ formatFileSize(scope.row==null?'':scope.row.fileSize) }}
                 </span>
               </template>
             </el-table-column>

src/views/liveChat/index.vue

@@ -4,7 +4,7 @@ export default {
 };
 </script>
 <script setup>
-import { ref, reactive, toRaw, toRefs, nextTick, computed, watchEffect } from "vue";
+import { ref, reactive, toRaw, toRefs, nextTick, computed, watchEffect,onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import useUserStore from "@/store/modules/user";
 import word from "@/assets/images/word2.png";
@@ -35,12 +35,13 @@ import forwordTree from "@/components/forwordTree/index.vue"; //选择文件发
 //websocket连接====
 import useWebsoctStore from "@/store/modules/websocket";
 import { ElMessage } from "element-plus";
-const route = useRoute();
+const router = useRouter(); //注册路由
 const websoctStore = useWebsoctStore();
 //====
 const { proxy } = getCurrentInstance();
 const userIds = useUserStore();
-const height = ref(document.documentElement.clientHeight - 74 + "px;");
+// main元素的初始高度，在onMounted时需要重新计算
+let height = ref(document.documentElement.clientHeight - 16 + "px;");
 const messageText = ref(""); //发送的内容
 const headerName = ref("");
 const total = ref(0);
@@ -75,12 +76,17 @@ const getMsgList = async () => {
   // );
 
   searchData.value = personList.data;
+  if (clickPersonId.value ==0 && personList.data.length>0) {
+    clickPersonId.value = personList.data[0].fromId
+  }
   //圆点======
+  /*
   searchData.value.map((i) => {
     if (i.fromId == websoctStore.messOne?.fromId) {
       i.showCircel = true;
     }
   });
+  */
   //圆点======
   sendCont.data.toId =
     personList.data[0]?.toId == userIds.uid
@@ -99,6 +105,7 @@ const noMes = ref(false);
 const boottmScroll = () => {
   //发送消息后滚动到最底部显示最新消息
   const chatContainer = document.querySelector(".right-container");
+  if(chatContainer==null) return
   // 计算滚动的目标位置
   const targetScrollTop = chatContainer.scrollHeight;
   // 设置滚动位置
@@ -126,7 +133,16 @@ const msgRecordEvent = async (toIdValue) => {
       i.createTime = i.createTime.substring(11);
   });
   total.value = resMsgData.total;
-  boottmScroll();
+  boottmScroll();  
+  setTimeout(() => {
+    if(websoctStore.noReadList==null) return;
+    if(websoctStore.noReadList[sendCont.data.toId]!=null) delete websoctStore.noReadList[sendCont.data.toId]
+    let i=0
+    for(let k in websoctStore.noReadList){
+      i++
+    }
+    if(i==0) websoctStore.noReadList = null;
+  }, 1000); 
 };
 //点击左侧新建聊天
 const open = ref(false);
@@ -139,6 +155,7 @@ const clickNewPerson = async () => {
 };
 //点击左侧聊天列表
 const clickPersonIndex = ref("");
+const clickPersonId = ref(0);
 const clickPerson = (index, item) => {
   sendCont.data.toId = item.userId
     ? item.userId
@@ -152,6 +169,7 @@ const clickPerson = (index, item) => {
     : item.toName;
   noMes.value = false;
   clickPersonIndex.value = index;
+  clickPersonId.value = sendCont.data.toId;
   //点击某个人就不显示红点
   searchData.value.map((i) => {
     if (i.fromId == item.fromId) {
@@ -163,7 +181,7 @@ const clickPerson = (index, item) => {
   const targetScrollTop = chatContainer.scrollHeight;
   // 设置滚动位置
   chatContainer.scrollTop = targetScrollTop;
-  msgRecordEvent(sendCont.data.toId);
+  msgRecordEvent(sendCont.data.toId); 
 };
 //删除聊天
 const delClick = (msgId) => {
@@ -270,9 +288,24 @@ const handleNewMessage = async () => {
 };
 
 watchEffect(async() => {
-  if (websoctStore.messOne?.fromId) {
+  console.log("===============有新消息了：",websoctStore.messOne)
+  console.log(router.currentRoute.value.path)
+  if(router.currentRoute.value.path!='/index') return;
+  console.log("clickPersonId:",clickPersonId.value)  
+  if(websoctStore.noReadList!=null) {
+    if(clickPersonId.value!=websoctStore.messOne.fromId){
+      for(let i=0;i<searchData.value.length;i++){
+        if(searchData.value[i].fromId==websoctStore.messOne.fromId){
+          searchData.value[i].showCircel = true
+        }
+      }
+      return;
+    }
     msgRecordEvent(websoctStore.messOne.fromId);
-    // getYuan()
+    setTimeout(() => {
+      websoctStore.messOne={}
+    }, 1000);    
+    // getYuan()    
     getMsgList();
   }
 });
@@ -411,6 +444,7 @@ const formatText = (text) => {
   }
 // 滚动翻页========
 onMounted(() => {
+  height.value = document.documentElement.clientHeight - document.getElementsByClassName("tab_box")[0].offsetHeight-8-document.getElementsByClassName("nav")[0].offsetHeight -26 + "px";
   getMsgList();
   websoctStore.connect();
   setInterval(handleNewMessage, 1000); // 每秒钟检查是否有新消息
@@ -508,7 +542,7 @@ onMounted(() => {
         </div>
         <span
           class="yuandian"
-          v-if="item.showCircel && $route.path == '/index'"
+          v-if="item.showCircel && $route.path == '/index' && clickPersonId!==item.fromId"
         ></span>
       </div>
     </div>