feat: 上线聊天室功能模块

Yi.Bbs.Vue3/src/apis/chatMessageApi.js

@@ -15,4 +15,10 @@ export function sendGroupMessage(data) {
       data
     });
   }
+  export function getAccountList() {
+    return request({
+      url: "/chat-message/account",
+      method: "get"
+    });
+  }
   

Yi.Bbs.Vue3/src/hubs/chatHub.js

@@ -20,7 +20,10 @@ const receiveMsg = (connection) => {
 
     });
 };
-export default () => {
+export  function start(){
     signalR.start(`chat`, receiveMsg);
 }
+export function close(){
+    signalR.SR.stop();
+}
 

Yi.Bbs.Vue3/src/layout/ChatLayout.vue

@@ -5,12 +5,14 @@
     </div>
 </template>
 <script setup>
-import {onMounted} from "vue";
-import chatHub from "@/hubs/chatHub.js";
-onMounted(async () => {
-    chatHub();
+import {onMounted, onUnmounted} from "vue";
+import {start,close} from "@/hubs/chatHub.js";
+onMounted( () => {
+    start();
 });
-
+onUnmounted(()=>{
+    close(); 
+})
 </script>
 <style scoped>
 .chat-body

Yi.Bbs.Vue3/src/views/chathub/Index.vue

@@ -1,11 +1,15 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { storeToRefs } from 'pinia'
+import useAuths from '@/hooks/useAuths.js';
 import { getList as getChatUserList } from '@/apis/chatUserApi'
-import { sendPersonalMessage,sendGroupMessage } from '@/apis/chatMessageApi'
+import { sendPersonalMessage, sendGroupMessage, getAccountList as getChatAccountMessageList } from '@/apis/chatMessageApi'
 import useChatStore from "@/stores/chat";
 import useUserStore from "@/stores/user";
+const { isLogin } = useAuths();
+import { useRouter } from 'vue-router'
 
+const router = useRouter();
 //聊天存储
 const chatStore = useChatStore();
 const { userList } = storeToRefs(chatStore);
@@ -13,7 +17,7 @@ const { userList } = storeToRefs(chatStore);
 //用户信息
 const userStore = useUserStore();
 //发送消息是否为空
-const msgIsNullShow=ref(false)
+const msgIsNullShow = ref(false)
 //当前选择用户
 const currentSelectUser = ref(null);
 //当前输入框的值
@@ -31,23 +35,37 @@ const currentMsgContext = computed(() => {
       //两个条件
       //接收用户者id为对面id（我发给他）
       //或者，发送用户id为对面（他发给我）
-      return (x.receiveId == currentSelectUser.value.userId && x.sendUserId == userStore.id)||
-      (x.sendUserId == currentSelectUser.value.userId && x.receiveId == userStore.id);
+      return (x.receiveId == currentSelectUser.value.userId && x.sendUserId == userStore.id) ||
+        (x.sendUserId == currentSelectUser.value.userId && x.receiveId == userStore.id);
     });
   }
 });
 
+
 //当前聊天框显示的名称
 const currentHeaderName = computed(() => {
   return currentSelectUser.value == null ? "官方学习交流群" : currentSelectUser.value.userName;
 });
 const currentUserItem = computed(() => {
-  return userList.value.filter(x=>x.userId!=useUserStore().id)
+  return userList.value.filter(x => x.userId != useUserStore().id)
 });
 
 
 //初始化
 onMounted(async () => {
+  console.log(isLogin.value, "isLogin");
+  if (!isLogin.value) {
+    ElMessage({
+      message: '该功能，请登录后使用！即将自动跳转',
+      type: 'warning',
+    })
+    setTimeout(function () {
+      onclickClose();
+    }, 3000);
+
+
+  }
+  chatStore.setMsgList((await getChatAccountMessageList()).data);
   chatStore.setUserList((await getChatUserList()).data);
 })
 
@@ -103,16 +121,14 @@ const onclickUserItem = (userInfo, isAllItem) => {
 
 //点击发送按钮
 const onclickSendMsg = () => {
-  console.log(currentInputValue.value ,"currentInputValue.value");
-if(currentInputValue.value=="")
-{
-  msgIsNullShow.value=true;
-  setTimeout(() => {
+  if (currentInputValue.value == "") {
+    msgIsNullShow.value = true;
+    setTimeout(() => {
       // 这里写上你想要3秒后执行的代码
-      msgIsNullShow.value=false;
+      msgIsNullShow.value = false;
     }, 3000);
-  return;
-}
+    return;
+  }
 
   if (selectIsAll()) {
     onclickSendGroupMsg("all", currentInputValue.value);
@@ -132,10 +148,18 @@ const onclickSendPersonalMsg = (receiveId, msg) => {
     content: msg,
     receiveId: receiveId
   });
-  sendPersonalMessage({userId:receiveId,content:msg});
+  sendPersonalMessage({ userId: receiveId, content: msg });
   //调用接口发送消息
 }
 
+const onclickClose = () => {
+  router.push({ path: "/index" })
+    .then(() => {
+      // 重新刷新页面
+      location.reload()
+    })
+}
+
 //点击发送群组消息按钮
 const onclickSendGroupMsg = (groupName, msg) => {
   //组还需区分是否给全部成员组
@@ -147,17 +171,40 @@ const onclickSendGroupMsg = (groupName, msg) => {
     //   content: msg
     // });
     //调用接口发送消息
-    sendGroupMessage({content:msg});
+    sendGroupMessage({ content: msg });
   }
   else {
     alert("暂未实现");
   }
 }
+
+
+//获取当前最后一条信息
+const getLastMessage = ((receiveId, isAll) => {
+  if (isAll) {
+    return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content;
+  } else {
+    const messageContext = chatStore.personalMsgContext.filter(x => {
+      //两个条件
+      //接收用户者id为对面id（我发给他）
+      //或者，发送用户id为对面（他发给我）
+      return (x.receiveId == receiveId && x.sendUserId == userStore.id) ||
+        (x.sendUserId == receiveId && x.receiveId == userStore.id);
+    });
+    return messageContext[messageContext.length - 1]?.content;
+  }
+
+})
 </script>
 
 <template>
-
+    <div style="position: absolute; top: 0;left: 0;">
+      <p>当前版本：1.0.0</p>
+      <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
+      <p>tip:点击聊天窗口右上角“X”可退出</p>
+    </div>
   <div class="body">
+
     <div class="left">
       <div class="icon">
         <img src="@/assets/chat_images/icon.jpg">
@@ -197,7 +244,7 @@ const onclickSendGroupMsg = (groupName, msg) => {
             <img src="@/assets/chat_images/yilogo.png" />
             <div class="user-name-msg">
               <p class="font-name">官方学习交流群</p>
-              <p class="font-msg">冲冲冲</p>
+              <p class="font-msg">{{ getLastMessage(null, true) }}</p>
             </div>
           </div>
           <div class=" user-div-right">
@@ -213,7 +260,7 @@ const onclickSendGroupMsg = (groupName, msg) => {
             <img src="@/assets/chat_images/friendicon.jpg" />
             <div class="user-name-msg">
               <p class="font-name">{{ item.userName }}</p>
-              <p class="font-msg">现在感觉怎么样</p>
+              <p class="font-msg">{{ getLastMessage(item.userId, false) }}</p>
             </div>
           </div>
           <div class=" user-div-right">
@@ -232,7 +279,7 @@ const onclickSendGroupMsg = (groupName, msg) => {
               <li><img src="@/assets/chat_images/fixed.png" /></li>
               <li><img src="@/assets/chat_images/min.png" /></li>
               <li><img src="@/assets/chat_images/max.png" /></li>
-              <li><img src="@/assets/chat_images/close.png" /></li>
+              <li style="cursor: pointer;" @click="onclickClose"><img src="@/assets/chat_images/close.png" /></li>
             </ul>
           </div>
           <div class="more"><img src="@/assets/chat_images/other2.png" /></div>
@@ -244,6 +291,7 @@ const onclickSendGroupMsg = (groupName, msg) => {
       <div class="content">
         <div v-for="(item, i) in currentMsgContext" :key="i">
           <div class="content-myself content-common" v-if="item.sendUserId == userStore.id">
+            <!-- Todo... 结合用户体系<div>{{item}}</div> -->
             <div class="content-myself-msg content-msg-common ">{{ item.content }}</div>
             <img src="@/assets/chat_images/icon.jpg" />
           </div>
@@ -276,7 +324,8 @@ const onclickSendGroupMsg = (groupName, msg) => {
         <!-- <div class="bottom-input" contenteditable="true"  @input="updateInputValue">
 
         </div> -->
-        <textarea class="bottom-input" v-model="currentInputValue" @input="updateInputValue" @keyup.enter="onclickSendMsg()">
+        <textarea class="bottom-input" v-model="currentInputValue" @input="updateInputValue"
+          @keyup.enter="onclickSendMsg()">
 
 </textarea>
         <div class="bottom-send">
@@ -489,6 +538,7 @@ const onclickSendGroupMsg = (groupName, msg) => {
     /* 只启用垂直方向滚动条 */
     height: 555px;
     padding: 20px 40px;
+
   }
 
   .bottom {
@@ -689,33 +739,35 @@ const onclickSendGroupMsg = (groupName, msg) => {
   border-right: 10px solid #FFFFFF;
 
 }
-.msg-null{
+
+.msg-null {
   width: 140px;
-    height: 41px;
-    background-color: #FFFFFF;
-    position: relative;
-    left: 132px;
-    bottom: 60px;
-    border-radius: 5px;
-    // border: 2px solid #E5E5E5;
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    font-size: 14px;
+  height: 41px;
+  background-color: #FFFFFF;
+  position: relative;
+  left: 132px;
+  bottom: 60px;
+  border-radius: 5px;
+  // border: 2px solid #E5E5E5;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  font-size: 14px;
 }
+
 .msg-null:after {
   /* 箭头靠下边 */
   content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    top: 40px;
-    left: 80px;
-    border-top: 10px solid #FFFFFF;
-    border-bottom: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-left: 10px solid transparent;
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 40px;
+  left: 80px;
+  border-top: 10px solid #FFFFFF;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-left: 10px solid transparent;
 
 }
 </style>

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -2,9 +2,13 @@
   <div class="home-box">
     <el-row :gutter="20" class="top-div">
       <el-col :span="17">
+      <div class="chat-hub">  
+        <p @click="onClickToChatHub" >点击前往-最新上线<span>《聊天室》 </span>，探索更多可能，结交更多朋友，闭上眼睛，聆听名刀破碎的声音</p>
+        </div>
         <div class="scrollbar">
           <ScrollbarInfo />
         </div>
+     
         <el-row class="left-div">
           <el-col :span="8" v-for="i in plateList" :key="i.id" class="plate" :style="{
             'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
@@ -291,7 +295,9 @@ const accessLogOptins = computed(() => {
     ]
   }
 });
-
+const onClickToChatHub=()=>{
+  router.push("/chat");
+};
 
 const handleToSign = () => {
   router.push("/activity/sign");
@@ -451,4 +457,30 @@ const onClickAccessLog = async () => {
     height: 500px;
   }
 }
+//走马灯，聊天室链接
+.chat-hub
+{
+  background-color: #E6A23C;
+  color: #ffffff;
+  margin-bottom: 10px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+  span{
+   color: red;
+  }
+  p {
+    cursor: pointer;
+  display: inline-block;
+  padding-left: 100%;
+  animation: marquee 20s linear infinite;
+}
+}
+ 
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
 </style>