feat: 对接chathub用户列表

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

@@ -0,0 +1,8 @@
+import request from "@/config/axios/service";
+
+export function getList() {
+  return request({
+    url: "/chat-user",
+    method: "get"
+  });
+}

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

@@ -0,0 +1,26 @@
+import signalR from "@/utils/signalR";
+import useChatStore from "@/stores/chat";
+
+const receiveMsg = (connection) => {
+    const chatStore = useChatStore();
+    //上线用户
+    connection.on("liveUser", (user) => {
+        chatStore.addUser(user);
+    });
+    //下线用户
+    connection.on("offlineUser", (userId) => {
+        chatStore.delUser(userId);
+    });
+    //接受其他用户消息
+    connection.on("receiveMsg", (type, content) => {
+
+    });
+    //用户状态-正在输入中，无
+    connection.on("userStatus", (type) => {
+
+    });
+};
+export default () => {
+    signalR.start(`chat`, receiveMsg);
+}
+

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

@@ -4,6 +4,14 @@
 <RouterView />
     </div>
 </template>
+<script setup>
+import {onMounted} from "vue";
+import chatHub from "@/hubs/chatHub.js";
+onMounted(async () => {
+    chatHub();
+});
+
+</script>
 <style scoped>
 .chat-body
 {
@@ -14,4 +22,4 @@
     align-content: center;
     flex-wrap: wrap;
 }
-</style>
+</style>

Yi.Bbs.Vue3/src/main.js

@@ -14,7 +14,7 @@ import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import directive from "./directive"; // directive
 import VueLuckyCanvas from '@lucky-canvas/vue'
 
-// import "./permission";
+import "./permission";
 
 (async () => {
   const app = createApp(App);

Yi.Bbs.Vue3/src/stores/chat.js

@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+
+const chatStore = defineStore("chat", {
+  state: () => ({
+    userList: [],
+  }),
+//   getters: {
+//     userListData: (state) => state.userList,
+//   },
+  actions: {
+    // 设置在线总数
+    setUserList(value) {
+      this.userList = value;
+    },
+    addUser(user)
+    {
+
+      this.userList.push(user);
+    },
+    delUser(userId)
+    {
+
+      this.userList = this.userList.filter(obj => obj.userId != userId);
+    }
+  },
+});
+
+export default chatStore;

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

@@ -1,6 +1,19 @@
+<script setup>
+import { onMounted, ref,computed } from 'vue';
+import {storeToRefs} from 'pinia'
+import {getList as getChatUserList} from '@/apis/chatUserApi'
+import useChatStore from "@/stores/chat";
+const chatStore=useChatStore();
+const {userList} =storeToRefs(chatStore);
+
+onMounted(async()=>{
+  chatStore.setUserList((await getChatUserList()).data);
+})
+
+</script>
+
 <template>
   <div class="body">
-
     <div class="left">
       <div class="icon">
         <img src="@/assets/chat_images/icon.jpg">
@@ -38,8 +51,8 @@
           <div class="user-div-left">
             <img src="@/assets/chat_images/friendicon.jpg" />
             <div class="user-name-msg">
-              <p class="font-name">橙子</p>
-              <p class="font-msg">现在感觉怎么样</p>
+              <p class="font-name">官方学习交流群</p>
+              <p class="font-msg">冲冲冲</p>
             </div>
           </div>
           <div class=" user-div-right">
@@ -49,17 +62,16 @@
         </div>
 
 
-        <div v-for="i in 100" :key="i" class="user-div">
+        <div v-for="(item,i) in userList" :key="i" class="user-div">
           <div class="user-div-left">
             <img src="@/assets/chat_images/friendicon.jpg" />
             <div class="user-name-msg">
-              <p class="font-name">橙子</p>
+              <p class="font-name">{{item.userName}}</p>
               <p class="font-msg">现在感觉怎么样</p>
             </div>
           </div>
           <div class=" user-div-right">
             10:28
-
           </div>
         </div>
       </div>