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

<script setup lang="ts">
/* 搜索框组件 */
import SearchInput from '@/components/SearchInput/index.vue'
/* 欢迎页 */
import Welcome from '@/components/Welcome/index.vue'
import ConversationList from '../Conversation/components/ConversationList.vue'
import router from '@/router'

//路由跳转-系统通知
const toInformDetails = () => {
  router.push('/im/conversation/informDetails')
}

//路由跳转-对应好友会话
const toChatMessage = (id, chatType) => {
  console.log('>>>>>>>id', id)
  router.push({
    path: '/im/conversation/message',
    query: {
      id,
      chatType
    }
  })
}
</script>
<template>
  <el-container style="height: 100%">
    <el-aside class="chat_conversation_box">
      <!-- 搜索组件 -->
      <SearchInput :searchType="'conversation'" />
      <div class="chat_conversation_list">
        <ConversationList @toInformDetails="toInformDetails" @toChatMessage="toChatMessage" />
      </div>
    </el-aside>
    <el-main class="chat_conversation_main_box">
      <router-view />
      <Welcome />
    </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>