yudao-ui-admin-vue3/src/views/im/Conversation/index.vue

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { SearchInput } from '@/components/Im/SearchInput'
import ConversationList from '../Conversation/components/ConversationList.vue'
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 = () => {
  currentComponent.value = InformDetailsComponent // 加载系统通知组件
}

const toChatMessage = (id, chatType) => {
  console.log('>>>>>>>id', id)
  currentComponent.value = MessageComponent // 加载消息组件
}
</script>

<template>
  <el-container style="height: 100%">
    <el-aside class="chat_conversation_box">
      <!-- 搜索组件 -->
      <SearchInput :searchType="'conversation'" />
      <div class="chat_conversation_list">
        <ConversationList @to-inform-details="toInformDetails" @to-chat-message="toChatMessage" />
      </div>
    </el-aside>
    <el-main class="chat_conversation_main_box">
      <component :is="currentComponent" />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.chat_conversation_box {
  position: relative;
  background: #cfdbf171;
  overflow: hidden;
  min-width: 324px;

  .chat_conversation_list {
    height: calc(100% - 60px);
  }
}

.chat_conversation_main_box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}
</style>