webchat-front/webchat-front-client/src/views/ChatCore.vue

<template>
    <div>
      <!-- 根据选中的对话类型显示不同组件 -->
      <component
        :is="selectedComponent"
        :openVideoRef="openVideoRef" 
        :selectChatUserRef="selectChatUserRef" 
        v-if="selectChatUser"
      ></component>
    </div>
  </template>
  
  <script setup>
  import { computed, defineProps, ref, inject, watch } from 'vue';
  import ChatUser from './ChatUser.vue';
  import ChatRobot from './ChatRobot.vue';
  import ChatOfficial from './ChatOfficial.vue';
  import ChatGroup from './ChatGroup.vue';
  import ChatFile from './ChatFile.vue'
  // 定义接收的 props
  const props = defineProps({
    selectChatUser: {
      type: Object,
      default: null
    },
    openVideo: {
      type: Boolean,
      default: false
    },
  });
  // 使用 ref 来存储 selectChatUser 的值
  const selectChatUserRef = ref({});
  const openVideoRef = ref(false);
  // 特殊处理公众号对话与其他类型账号对话组件，公众号切换公众号推文组件、其他账号切换消息发送/展示组件
  const selectedComponent = computed(() => {
    selectChatUserRef.value = props.selectChatUser;
    openVideoRef.value = props.openVideo;
    if (props.selectChatUser.roleCode === 0) {
      return ChatFile;
    } else if (props.selectChatUser.roleCode <= 3) {
      return ChatUser;
    } else if (props.selectChatUser.roleCode === 4) {
      return ChatGroup;
    } else if (props.selectChatUser.roleCode === 5) {
      return ChatRobot;
    } else if (props.selectChatUser.roleCode === 6) {
      return ChatOfficial;
    }
  });
  </script>