AIClass/src/components/aiCourse/dialog/DialogCard.vue

<template>
  <div class="dialog-card-container">
    <!-- 普通对话类型 -->
    <DigitalDialogue
      v-if="dialogue?.type === 'digital'"
      :role-name="dialogue?.roleName"
      :content="dialogue?.content"
      :script-roles="scriptRoles"
      :index="index"
    />

    <!-- 提问类型（只显示提问内容，不显示用户输入） -->
    <QuestDialogue
      v-else-if="dialogue?.type === 'quest'"
      :role-name="dialogue?.roleName"
      :content="dialogue?.content"
      :script-roles="scriptRoles"
      :index="index"
    />

    <!-- 用户输入类型（根据上一条问题类型显示不同输入方式） -->
    <UserDialogue
      v-else-if="dialogue?.type === 'user'"
      :question="previousQuest?.content"
      :question-type="getQuestionType(previousQuest)"
      :options="previousQuest?.options"
      @user-input-submit="$emit('user-input-submit', $event)"
      @single-choice-submit="$emit('single-choice-submit', $event)"
    />

    <!-- 视频显示 -->
    <VideoDisplay
      v-else-if="dialogue?.type === 'video'"
      :video-url="dialogue?.videoUrl"
      :is-playback-started="isPlaybackStarted"
      :is-muted="isMuted"
      :is-paused="isPaused"
      @ended="$emit('video-ended', $event)"
    />

    <!-- 诗词朗读评价 -->
    <PoemReadingDialogue
        v-if="dialogue?.type === 'poem_reading'"
        :content="dialogue?.content"
        :role-id="getRoleIdByRoleName(dialogue?.roleName, scriptRoles)"
        :is-muted="isMuted"
        :is-paused="isPaused"
        @evaluation-complete="$emit('poem-reading-complete', $event)"
    />

    <!-- 写诗评价 -->
    <WriteReadingDialogue
        v-if="dialogue?.type === 'write_reading'"
        :content="dialogue?.content"
        @submit="$emit('write-reading-submit', $event)"
    />

    <!-- 背诵诗词评价 -->
    <ReciteReadingDialogue
        v-if="dialogue?.type === 'recite_reading'"
        :content="dialogue?.content"
        :role-id="getRoleIdByRoleName(dialogue?.roleName, scriptRoles)"
        :is-muted="isMuted"
        :is-paused="isPaused"
        @evaluation-complete="$emit('poem-reading-complete', $event)"
    />

    <!-- 诗词显示 -->
    <PoemDisplay
        v-if="poemShow"
        :content="poemContent"
    />
  </div>
</template>

<script setup>
import DigitalDialogue from './dialogType/DigitalDialogue.vue';
import QuestDialogue from './dialogType/QuestDialogue.vue';
import UserDialogue from './dialogType/UserDialogue.vue';
import PoemDisplay from './dialogType/PoemDisplay.vue';
import VideoDisplay from './dialogType/VideoDisplay.vue';
import PoemReadingDialogue from './dialogType/PoemReadingDialogue.vue';
import WriteReadingDialogue from './dialogType/WriteReadingDialogue.vue';
import ReciteReadingDialogue from './dialogType/ReciteReadingDialogue.vue';

/**
 * DialogCard - 统一对话卡片容器
 * 根据对话类型渲染不同的子组件
 */

/**
 * Props 定义
 * @prop {Object} dialogue - 当前对话数据
 * @prop {Array} scriptRoles - 角色列表
 * @prop {Number} index - 对话索引
 * @prop {Object} previousQuest - 上一条提问对话
 * @prop {Boolean} poemShow - 是否显示诗词
 * @prop {String} poemContent - 诗词内容
 */
defineProps({
  dialogue: {
    type: Object,
    default: null
  },
  scriptRoles: {
    type: Array,
    default: () => []
  },
  index: {
    type: Number,
    default: 0
  },
  isPlaybackStarted: {
    type: Boolean,
    default: false
  },
  isMuted: {
    type: Boolean,
    default: false
  },
  isPaused: {
    type: Boolean,
    default: false
  },
  previousQuest: {
    type: Object,
    default: null
  },
  poemShow: {
    type: Boolean,
    default: false
  },
  poemContent: {
    type: String,
    default: ''
  }
});

/**
 * Emits 定义
 * @event user-input-submit - 用户文本输入提交
 * @event single-choice-submit - 单选问题提交
 * @event video-ended - 视频播放结束
 * @event poem-reading-complete - 诗词朗读评价完成
 */
defineEmits([
  'user-input-submit',
  'single-choice-submit',
  'write-reading-submit',
  'video-ended',
  'poem-reading-complete'
]);

/**
 * 获取问题类型
 * @param {Object} questDialogue - 提问对话数据
 * @returns {String} 问题类型：'singleChoice' | 'AI Q&A'
 */
const getQuestionType = (questDialogue) => {
  if (!questDialogue) return 'AI Q&A';
  if (questDialogue.questionType === 'singleChoice' && questDialogue.options?.length > 0) {
    return 'singleChoice';
  }
  return 'AI Q&A';
};

/**
  * 根据角色名称获取角色ID
  * @param {String} roleName - 角色名称
  * @param {Array} roles - 角色列表
  * @returns {String|Number} 角色ID，如果找不到则返回原值
  */
 const getRoleIdByRoleName = (roleName, roles) => {
   if (!roleName || !roles) return roleName;
   const role = roles.find(r => r.name === roleName);
   return role ? role.id : roleName;
 };
</script>

<style scoped lang="scss">
.dialog-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>