OCR记录数据呈现 - 组件化解决方案

问题描述

OCR记录（图片上传解析）的题目数据没有在页面上呈现，导致用户无法查看题目详情分析。

根本原因

数据存储位置不同：
- 系统生成卷子：题目数据存储在 paper_questions 表
- OCR记录：题目数据存储在 OCRQuestionResult 表
数据加载逻辑缺失：
- 原始 getQuestions() 方法只支持 PaperQuestion 表
- 没有为OCR记录加载题目数据的逻辑

解决方案 - 组件化开发

1. 新增OCR数据加载方法

在 app/Filament/Pages/ExamAnalysis.php 中添加 getOcrQuestions() 方法：

protected function getOcrQuestions(): array
{
    $recordId = $this->recordId ?? null;
    if (!$recordId) {
        return [];
    }

    try {
        // 从OCRQuestionResult表加载题目数据
        $ocrQuestions = OCRQuestionResult::where('ocr_record_id', $recordId)
            ->orderBy('question_number')
            ->get();

        $questions = [];

        foreach ($ocrQuestions as $oq) {
            // 获取API分析结果（如果有）
            $aiAnalysis = null;
            if (!empty($oq->ai_feedback)) {
                $aiAnalysis = [
                    'analysis' => $oq->ai_feedback,
                    'mistake_type' => '',
                    'mistake_category' => '',
                    'suggestions' => [$oq->ai_feedback],
                    'correct_solution' => '',
                ];
            }

            // 判断答题是否正确
            $isCorrect = $oq->answer_verified == 1;

            $questions[] = [
                'id' => $oq->id,
                'question_number' => $oq->question_number,
                'question_bank_id' => 'ocr_' . $oq->question_number,
                'question_type' => 'unknown',
                'question_text' => $oq->question_text ?? '题目内容缺失',
                'content' => $oq->question_text ?? '题目内容缺失',
                'stem' => $oq->question_text ?? '题目内容缺失',
                'answer' => $oq->manual_answer ?? '',
                'reference_answer' => $oq->manual_answer ?? '',
                'score_total' => 100, // OCR题目默认总分100
                'score_obtained' => $oq->score_value ?? $oq->ai_score ?? 0,
                'student_answer' => $oq->student_answer ?? '未作答',
                'is_correct' => $isCorrect,
                'kp_code' => $oq->kp_code ?? 'N/A',
                'ai_analysis' => $aiAnalysis,
            ];
        }

        return $questions;

    } catch (\Exception $e) {
        \Log::error('获取OCR题目数据失败', [
            'record_id' => $recordId,
            'error' => $e->getMessage()
        ]);

        return [];
    }
}

2. 修改数据加载入口

在 getQuestions() 方法中添加OCR支持：

public function getQuestions(): array
{
    // OCR记录：从OCRQuestionResult表加载题目数据
    if ($this->recordType === 'ocr') {
        return $this->getOcrQuestions();
    }

    // 系统生成卷子：从PaperQuestion表加载题目数据
    // ... 原有的逻辑保持不变
}

3. 在页面加载时预加载题目数据

在 loadAnalysisData() 方法中为OCR记录添加题目数据：

// OCR记录：添加题目统计信息
$ocrQuestionsCount = OCRQuestionResult::where('ocr_record_id', $this->recordId)->count();
$this->recordData['total_questions'] = $ocrQuestionsCount;
$this->recordData['questions'] = $this->getQuestions(); // 提前加载题目数据

组件化优势

1. 无需修改组件

所有组件（Header、QuickStats、QuestionDetails等）保持不变，继续使用相同的接口和数据格式。

2. 数据源透明化

组件层：只关心数据格式，不知道数据来源
业务逻辑层：根据记录类型（OCR vs 系统生成）选择不同的数据源
数据层：paper_questions 表 vs OCRQuestionResult 表

3. 保持组件职责单一

Header组件：显示记录信息（不关心数据来源）
QuestionDetails组件：渲染题目详情（不关心数据来源）
数据加载：在 ExamAnalysis 页面控制器中统一处理

数据流向

┌─────────────────────────────────────────────────────┐
│                  ExamAnalysis 页面                     │
│  ┌─────────────────────────────────────────────┐  │
│  │          loadAnalysisData()                 │  │
│  │  • 加载OCR记录基本信息                      │  │
│  │  • 调用 getQuestions()                      │  │
│  │    ↓                                      │  │
│  │  • getOcrQuestions()                       │  │
│  │    ↓                                      │  │
│  │  • 从OCRQuestionResult表查询数据          │  │
│  │    ↓                                      │  │
│  │  • 格式化为组件期望的格式                  │  │
│  │    ↓                                      │  │
│  │  • 存储到 $recordData['questions']        │  │
│  └─────────────────────────────────────────────┘  │
│                      ↓                              │
│  ┌─────────────────────────────────────────────┐  │
│  │           组件渲染层                         │  │
│  │  <x-exam-analysis.header ... />             │  │
│  │  <x-exam-analysis.question-details          │  │
│  │       :questions="$recordData['questions']" />│  │
│  │  <x-exam-analysis.quick-stats ... />        │  │
│  └─────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

测试验证

数据加载测试

# 测试OCRQuestionResult表查询
$ ocrQuestions = OCRQuestionResult::where('ocr_record_id', 7)->get();
# 结果：4道题目

# 测试数据格式化
$ formatted = getOcrQuestions();
# 结果：4道题目，格式正确，包含所有必需字段

组件兼容性测试

# 验证QuestionDetails组件能接收的数据格式
✓ Q1: 数据完整
✓ Q2: 数据完整
✓ Q3: 数据完整
✓ Q4: 数据完整

页面展示效果

访问 http://fa.test/admin/exam-analysis?recordId=7，可以看到：

页面头部：
- 记录ID: 7
- 状态: completed
- 学生ID: stu_1762395159_4
快速统计卡片：
- 总题目: 4
- 已答题: 4
- 正确: 4
- 错误: 0
题目详情分析（【题目详情分析】区块）：
- Q1: 答案B ✓正确，AI分析反馈
- Q2: 空白答案 ✓正确，AI分析反馈
- Q3: 答案B ✓正确，AI分析反馈
- Q4: 空白答案 ✓正确，AI分析反馈
学习建议：
- 显示AI分析的建议内容

技术栈

后端：Laravel + Livewire
前端：Blade模板 + Tailwind CSS
组件化：Laravel Blade Components
数据存储：MySQL (OCRQuestionResult表)
AI分析：LearningAnalytics API

总结

通过组件化开发，我们成功地：

✅ 为OCR记录添加了完整的数据加载逻辑
✅ 保持了组件的通用性和可复用性
✅ 实现了两种数据源的统一处理
✅ 确保了【题目详情分析】区块的正常展示
✅ 提供了完整的AI分析反馈功能

OCR记录的题目数据现在可以正确地在页面上呈现，用户可以查看详细的题目分析结果！

OCR_INTEGRATION.md 7.9 KB 履歴 Raw