✨ feat: 修改temp页面结构和路由，修复聊天框

ruoyi-ui/src/layout/components/ChatComponent/index.vue

@@ -57,11 +57,10 @@ export default {
   name: 'ChatComponent',
   props:{
     drawerVisible:Boolean,
-
   },
+  
   data() {
     return {
-
       contacts: [], // 联系人列表
       selectedContact: null, // 当前选中的联系人
       chatHistory: [], // 当前聊天记录
@@ -82,7 +81,10 @@ export default {
 
     // 关闭聊天窗口
     handleClose() {
-      this.drawerVisible = false;
+      console.log("关闭聊天窗口");
+      // props是只读的，不能直接修改，需要通过$emit通知父组件关闭
+      // this.drawerVisible = false;
+      this.$emit('close'); // 通知父组件关闭聊天窗口
     },
 
 

ruoyi-ui/src/layout/components/Navbar.vue

@@ -14,8 +14,8 @@
 
         <div style="position: absolute;top: 0;right: 300px;font-weight: 200">
           <!--          <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
-          <el-button class="el-icon-s-comment" @click="chat=true" style="">打开聊天</el-button>
-          <chat-component :drawerVisible="chat" ref="chatComponent"/>
+          <el-button class="el-icon-s-comment" @click="chat=true" style="" >打开聊天</el-button>
+          <chat-component :drawerVisible="chat" ref="chatComponent" @close="hiddenChat"/>
         </div>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
         <el-tooltip content="用户" effect="dark" placement="bottom">
@@ -142,6 +142,11 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
 
+    hiddenChat() {
+      this.chat = false;
+      console.log(this.chat, '关闭chat');
+    },
+
     getUser() {
       getUserProfile().then(response => {
         this.user = response.data.user;