From 93ba6c579ac6b02f5c31c1082bb51c3daeeafe41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Tue, 7 May 2024 22:12:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E7=BB=84=E4=BB=B6=E8=80=8C=E9=9D=9E=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cropper/src/CropperAvatar.vue  |  2 +-
 .../Im/SearchInput/src/SearchInput.vue        |  2 +-
 src/layout/components/ImChat/src/ImChat.vue   | 24 +++++++-------
 src/views/im/Conversation/index.vue           | 31 +++++++++----------
 .../im/Message/components/inputBox/index.scss |  2 +-
 src/views/im/Message/index.scss               |  2 +-
 src/views/im/NavBar/index.vue                 | 14 ++++-----
 src/views/im/index.vue                        | 12 ++++++-
 8 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 9464c2a8..dc91bd26 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/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;
     }
   }
diff --git a/src/components/Im/SearchInput/src/SearchInput.vue b/src/components/Im/SearchInput/src/SearchInput.vue
index 85b3cf62..a577b190 100644
--- a/src/components/Im/SearchInput/src/SearchInput.vue
+++ b/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;
 }
 
diff --git a/src/layout/components/ImChat/src/ImChat.vue b/src/layout/components/ImChat/src/ImChat.vue
index 46f586f0..1f087a14 100644
--- a/src/layout/components/ImChat/src/ImChat.vue
+++ b/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 IM from '@/views/im/index.vue'
-import { useRouter } from 'vue-router' // 导入 useRouter 方法
+import { ref, defineAsyncComponent } from 'vue'
 
-defineOptions({ name: 'ImChat' })
+// 异步加载可能的对话框内容组件
+const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue'))
 
 const dialogVisible = ref(false)
-const router = useRouter() // 创建 router 实例
+const currentComponent = ref(null)
 
-// 添加点击事件处理函数
-function handleClick() {
-  dialogVisible.value = !dialogVisible.value
-  router.push('/im/conversation') // 设置路由为 /im/conversation
+// 添加点击事件处理函数，显示对话框并加载 IM 组件
+function openDialog() {
+  dialogVisible.value = true
+  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>
diff --git a/src/views/im/Conversation/index.vue b/src/views/im/Conversation/index.vue
index a3a09536..c59a11ba 100644
--- a/src/views/im/Conversation/index.vue
+++ b/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({
-    path: '/im/conversation/message',
-    query: {
-      id,
-      chatType
-    }
-  })
+  currentComponent.value = MessageComponent // 加载消息组件
 }
 </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 />
-      <Welcome />
+      <component :is="currentComponent" />
     </el-main>
   </el-container>
 </template>
diff --git a/src/views/im/Message/components/inputBox/index.scss b/src/views/im/Message/components/inputBox/index.scss
index 4cb5c384..9373989e 100644
--- a/src/views/im/Message/components/inputBox/index.scss
+++ b/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;
diff --git a/src/views/im/Message/index.scss b/src/views/im/Message/index.scss
index 8bc33f6b..3a44ea39 100644
--- a/src/views/im/Message/index.scss
+++ b/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);
diff --git a/src/views/im/NavBar/index.vue b/src/views/im/NavBar/index.vue
index e450319f..e1447b40 100644
--- a/src/views/im/NavBar/index.vue
+++ b/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;
   }
diff --git a/src/views/im/index.vue b/src/views/im/index.vue
index 650e4261..5cf6c520 100644
--- a/src/views/im/index.vue
+++ b/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;