AI-interview-web/src/views/InterviewReport.vue

<template>
  <div class="report-container">
    <!-- 加载中的骨架屏 -->
    <div v-if="isLoading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 无数据时的空状态 -->
    <div v-else-if="!reportData" class="empty-container">
      <el-empty description="无法加载面试报告，请返回重试。" />
    </div>

    <!-- 报告主内容 -->
    <div v-else>
      <!-- 报告头部 -->
      <el-page-header @back="goBack" class="report-header">
        <template #content>
          <div class="header-content">
            <span class="title">{{ reportData.sessionDetails.candidateName }} 的面试复盘报告</span>
            <el-tag size="large">{{ new Date(reportData.sessionDetails.createdTime).toLocaleString() }}</el-tag>
          </div>
        </template>
      </el-page-header>

      <!-- AI最终评估报告 -->
      <el-card class="box-card report-summary" shadow="never">
        <template #header>
          <div class="card-header">
            <el-icon><DataAnalysis /></el-icon>
            <span>AI 最终评估报告</span>
          </div>
        </template>
        <div v-if="finalReport" class="summary-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-statistic title="综合得分" :value="finalReport.overallScore" />
            </el-col>
            <el-col :span="16">
              <el-statistic title="录用建议">
                <template #formatter>
                  <el-tag :type="getRecommendationType(finalReport.hiringRecommendation)" size="large" effect="dark">{{ finalReport.hiringRecommendation }}</el-tag>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
          <el-divider />
          <h4>综合评语</h4>
          <p class="feedback-paragraph">{{ finalReport.overallFeedback }}</p>
          <h4>技术能力评估</h4>
          <ul class="assessment-list">
            <li v-for="(value, key) in finalReport.technicalAssessment" :key="key"><strong>{{ key }}:</strong> {{ value }}</li>
          </ul>
          <h4>改进建议</h4>
          <ol class="suggestions-list">
            <li v-for="suggestion in finalReport.suggestions" :key="suggestion">{{ suggestion }}</li>
          </ol>
        </div>
        <div v-else><el-empty description="AI最终报告正在生成中或生成失败。" /></div>
      </el-card>

      <!-- 问答详情 -->
      <el-card class="box-card question-details" shadow="never">
        <template #header>
          <div class="card-header">
            <el-icon><ChatDotRound /></el-icon>
            <span>问答详情与逐题评估</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item v-for="(item, index) in reportData.questionDetails" :key="item.questionId" :timestamp="`第 ${index + 1} 题`" placement="top">
            <el-card class="question-card" shadow="hover">
              <h4>{{ item.questionContent }}</h4>
              <p class="user-answer"><strong>您的回答:</strong> {{ item.userAnswer }}</p>
              <el-divider />
              <div class="feedback-section">
                <p><strong>AI 评语:</strong> {{ item.aiFeedback }}</p>
                <p><strong>AI 建议:</strong> {{ item.suggestions }}</p>
                <div class="score-section">
                  <strong>本题得分:</strong> <el-rate v-model="item.score" :max="5" disabled show-score text-color="#ff9900" score-template="{value} 分" />
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup>
// 导入Vue核心功能、路由、API客户端和图标
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getInterviewReportDetail } from '../api/interview';
import { DataAnalysis, ChatDotRound } from '@element-plus/icons-vue';

// --- Props & Router ---
const props = defineProps({ sessionId: { type: String, required: true } });
const router = useRouter();

// --- 响应式状态定义 ---
const reportData = ref(null);     // 存储完整的报告数据
const isLoading = ref(false);     // 加载状态

// --- 计算属性 ---

// 安全地解析最终报告的JSON字符串
const finalReport = computed(() => {
  if (reportData.value && reportData.value.sessionDetails.finalReport) {
    try {
      return JSON.parse(reportData.value.sessionDetails.finalReport);
    } catch (e) {
      console.error('解析最终报告JSON失败:', e);
      return null;
    }
  }
  return null;
});

// --- API交互方法 ---

// 获取面试报告详情
const fetchReport = async () => {
  isLoading.value = true;
  try {
    const responseData = await getInterviewReportDetail(props.sessionId);
    reportData.value = responseData.data;
  } catch (error) {
    console.error('获取面试报告失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// --- 事件处理 ---

// 返回上一页
const goBack = () => router.push('/history');

// 根据录用建议返回不同的标签类型
const getRecommendationType = (rec) => {
    if (rec === '强烈推荐' || rec === '推荐') return 'success';
    if (rec === '待考虑') return 'warning';
    if (rec === '不推荐') return 'danger';
    return 'info';
};

// --- 生命周期钩子 ---

onMounted(() => {
  fetchReport();
});
</script>

<style scoped>
.report-container { padding: 10px; }
.report-header { margin-bottom: 20px; background-color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); }
.header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.header-content .title { font-size: 1.2em; font-weight: 600; }

.box-card { margin-bottom: 20px; border: none; }
.card-header { font-size: 1.1em; font-weight: bold; display: flex; align-items: center; }
.card-header .el-icon { margin-right: 10px; }

.summary-content { padding: 10px; }
.report-summary h4 { margin: 25px 0 10px 0; font-size: 1.05em; }
.report-summary p, .report-summary li { color: #606266; line-height: 1.8; }
.feedback-paragraph { text-indent: 2em; }
.assessment-list, .suggestions-list { padding-left: 20px; }

.question-card { margin-top: 10px; }
.user-answer { color: #303133; font-style: italic; }
.feedback-section { background-color: #f9fafb; padding: 15px; border-radius: 4px; margin-top: 15px; }
.score-section { display: flex; align-items: center; margin-top: 10px; }
.el-rate { margin-left: 10px; }
</style>