修改：使用动态组件而非路由跳转

src/components/Cropper/src/CropperAvatar.vue

@@ -97,7 +97,7 @@ $prefix-cls: #{$namespace}--cropper-avatar;
     opacity: 0;
     transition: opacity 0.4s;
 
-    ::v-deep(svg) {
+    :deep(svg) {
       margin: auto;
     }
   }

src/components/Im/SearchInput/src/SearchInput.vue

@@ -29,7 +29,7 @@ const querySearch = () => {
 </template>
 
 <style scoped lang="scss">
-::v-deep .el-input__wrapper {
+:deep(.el-input__wrapper) {
   box-shadow: none;
 }
 

src/layout/components/ImChat/src/ImChat.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
 import { Dialog } from '@/components/Dialog'
-import { ref } from 'vue'
+import { ref, defineAsyncComponent } from 'vue'
-import IM from '@/views/im/index.vue'
-import { useRouter } from 'vue-router' // 导入 useRouter 方法
 
-defineOptions({ name: 'ImChat' })
+// 异步加载可能的对话框内容组件
+const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue'))
 
 const dialogVisible = ref(false)
-const router = useRouter() // 创建 router 实例
+const currentComponent = ref(null)
 
-// 添加点击事件处理函数
+// 添加点击事件处理函数，显示对话框并加载 IM 组件
-function handleClick() {
+function openDialog() {
-  dialogVisible.value = !dialogVisible.value
+  dialogVisible.value = true
-  router.push('/im/conversation') // 设置路由为 /im/conversation
+  currentComponent.value = IMComponent // 加载 IM 组件
 }
 </script>
 
 <template>
-  <div class="custom-hover" v-bind="$attrs">
+  <div class="custom-hover" v-bind="$attrs" @click="openDialog">
     <ElBadge>
-      <Icon :size="18" class="cursor-pointer" icon="ep:chat-round" @click="handleClick" />
+      <Icon :size="18" class="cursor-pointer" icon="ep:chat-round" />
     </ElBadge>
   </div>
   <Dialog v-model="dialogVisible" width="90%" top="10vh">
-    <IM />
+    <component :is="currentComponent" />
+    <!-- 使用动态组件 -->
   </Dialog>
 </template>

src/views/im/Conversation/index.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-/* 搜索框组件 */
+import { ref, defineAsyncComponent } from 'vue'
 import { SearchInput } from '@/components/Im/SearchInput'
-/* 欢迎页 */
-import { Welcome } from '@/components/Im/Welcome'
 import ConversationList from '../Conversation/components/ConversationList.vue'
-import router from '@/router'
+import { Welcome } from '@/components/Im/Welcome'
 
-//路由跳转-系统通知
+// 异步加载可能的对话框内容组件
+const InformDetailsComponent = defineAsyncComponent(
+  () => import('@/views/im/InformDetails/index.vue')
+)
+const MessageComponent = defineAsyncComponent(() => import('@/views/im/Message/index.vue'))
+
+const currentComponent = ref(Welcome) // 默认加载欢迎页组件
+
+// 更改为使用动态组件切换而非路由跳转
 const toInformDetails = () => {
-  router.push('/im/conversation/informDetails')
+  currentComponent.value = InformDetailsComponent // 加载系统通知组件
 }
 
-//路由跳转-对应好友会话
 const toChatMessage = (id, chatType) => {
   console.log('>>>>>>>id', id)
-  router.push({
+  currentComponent.value = MessageComponent // 加载消息组件
-    path: '/im/conversation/message',
-    query: {
-      id,
-      chatType
-    }
-  })
 }
 </script>
+
 <template>
   <el-container style="height: 100%">
     <el-aside class="chat_conversation_box">
@@ -33,8 +33,7 @@ const toChatMessage = (id, chatType) => {
       </div>
     </el-aside>
     <el-main class="chat_conversation_main_box">
-      <router-view />
+      <component :is="currentComponent" />
-      <Welcome />
     </el-main>
   </el-container>
 </template>

src/views/im/Message/components/inputBox/index.scss

@@ -55,7 +55,7 @@
 }
 
 /* loading svg大小调整 */
-::v-deep .circular {
+:deep(.circular) {
     margin-top: 8px;
     width: 25px;
     height: 25px;

src/views/im/Message/index.scss

@@ -111,7 +111,7 @@
     border-radius: 0 0 3px 0;
 }
 
-::v-deep .el-drawer {
+:deep(.el-drawer) {
     margin-top: 60px;
     width: 150px;
     height: calc(100% - 60px);

src/views/im/NavBar/index.vue

@@ -250,36 +250,36 @@ watch(
 }
 
 .components {
-  ::v-deep .edit_userinfo_diglog {
+  :deep(.edit_userinfo_diglog) {
     border-radius: 4px;
     overflow: hidden;
   }
 
-  ::v-deep .setting_func_diglog > .el-dialog__body {
+  .setting_func_diglog :deep(.el-dialog__body) {
     padding: 28px 24px 24px 24px;
   }
 
-  ::v-deep .setting_func_diglog > .el-dialog__header {
+  .setting_func_diglog :deep(.el-dialog__header) {
     background: #f2f2f2;
     margin: 0;
   }
 
-  ::v-deep .edit_userinfo_diglog > .el-dialog__header {
+  .edit_userinfo_diglog :deep(.el-dialog__header) {
     padding: 0;
     margin-right: 0;
   }
 
-  ::v-deep .edit_userinfo_diglog > .el-dialog__body {
+  .edit_userinfo_diglog :deep(.el-dialog__body) {
     padding: 0;
     border-radius: 4px;
   }
 
-  ::v-deep .login_diglog > .el-dialog__header {
+  .login_diglog :deep(.el-dialog__header) {
     background: #f2f2f2;
     margin: 0;
   }
 
-  ::v-deep .personal_setting_card > .el-dialog__header {
+  .personal_setting_card :deep(.el-dialog__header) {
     background: #f2f2f2;
     margin: 0;
   }

src/views/im/index.vue

@@ -1,8 +1,17 @@
 <script lang="ts" setup>
+import { ref, defineAsyncComponent } from 'vue'
 import NavBar from './NavBar/index.vue'
 
+// 定义异步加载的组件
+const ConversationComponent = defineAsyncComponent(
+  () => import('@/views/im/Conversation/index.vue')
+)
+
+const currentComponent = ref(ConversationComponent) // 默认加载对话组件
+
 defineOptions({ name: 'IM' })
 </script>
+
 <template>
   <div class="app-container">
     <el-container class="chat_container">
@@ -10,11 +19,12 @@ defineOptions({ name: 'IM' })
         <NavBar />
       </el-aside>
       <el-main class="chat_main_box">
-        <router-view />
+        <component :is="currentComponent" />
       </el-main>
     </el-container>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .app-container {
   position: fixed;