math_cms/resources/views/filament/pages/ocr-paper-analysis.blade.php

<x-filament-panels::page>
    <div class="space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-900">试卷答题分析</h1>
            @if($this->ocrRecord && $this->paper)
                <div class="flex gap-3">
                    <button
                        wire:click="rematchQuestions"
                        wire:loading.attr="disabled"
                        class="btn btn-outline btn-info gap-2"
                    >
                        <x-filament::icon icon="heroicon-o-arrow-path" class="w-4 h-4" />
                        重新匹配
                    </button>

                    <button
                        wire:click="submitForAiAnalysis"
                        wire:loading.attr="disabled"
                        class="btn btn-primary gap-2"
                    >
                        <x-filament::icon icon="heroicon-o-cpu-chip" class="w-4 h-4" />
                        AI 分析
                    </button>
                </div>
            @endif
        </div>

        @if($this->ocrRecord && $this->paper)
            <!-- 试卷信息 -->
            <x-filament::section>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <p class="text-sm text-gray-500">试卷名称</p>
                        <p class="font-semibold">{{ $this->paperInfo()['paper_name'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">学生信息</p>
                        <p class="font-semibold">
                            {{ $this->studentInfo()['name'] ?? '未知' }}
                            ({{ $this->studentInfo()['grade'] ?? '' }}{{ $this->studentInfo()['class'] ?? '' }})
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">试卷概况</p>
                        <p class="font-semibold">
                            {{ $this->paperInfo()['total_questions'] }}题
                            / {{ $this->paperInfo()['total_score'] }}分
                        </p>
                    </div>
                </div>
            </x-filament::section>

            <!-- 匹配状态 -->
            <x-filament::section>
                <h3 class="text-lg font-semibold mb-4">题目匹配情况</h3>
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-center text-blue-800">
                        <x-filament::icon icon="heroicon-o-puzzle-piece" class="mr-2" />
                        <span class="font-medium">OCR识别与系统试卷匹配</span>
                    </div>
                    <div class="mt-2 text-sm text-blue-700">
                        <p>系统试卷共 <span class="font-bold">{{ $this->paper->total_questions ?? count($matchedQuestions) }}</span> 道题</p>
                        <p>当前匹配 <span class="font-bold">{{ count($matchedQuestions) }}</span> 道题</p>
                        @php
                            $matchedCount = collect($matchedQuestions)->whereNotNull('ocr_id')->count();
                            $unmatchedCount = collect($matchedQuestions)->whereNull('ocr_id')->count();
                        @endphp
                        <p class="mt-1">
                            <span class="text-green-700">{{ $matchedCount }} 道已识别</span> |
                            <span class="text-orange-700">{{ $unmatchedCount }} 道未识别</span>
                        </p>
                    </div>
                </div>
            </x-filament::section>

            <!-- 试卷图片与标注 -->
            <x-filament::section>
                <h3 class="text-lg font-semibold mb-4">试卷原图与识别区域</h3>
                <div class="relative w-full overflow-x-auto">
                    <div class="relative inline-block min-w-full">
                        @if($this->ocrRecord->image_path)
                            <img 
                                src="{{ Storage::url($this->ocrRecord->image_path) }}" 
                                alt="Exam Paper" 
                                class="max-w-full h-auto border rounded-lg"
                                style="min-width: 800px;"
                            >
                            
                            @foreach($matchedQuestions as $question)
                                @if(isset($question['bbox']) && is_array($question['bbox']))
                                    @php
                                        $yMin = $question['bbox']['y_min'] ?? 0;
                                        $yMax = $question['bbox']['y_max'] ?? 0;
                                        $height = $yMax - $yMin;
                                        // Assuming width is full width for now, or we can use a fixed percentage if we don't have x-coordinates
                                        // Since we only have Y-range, we'll draw a full-width box
                                    @endphp
                                    <div 
                                        class="absolute left-0 right-0 border-2 border-red-500 bg-transparent hover:bg-red-50 hover:bg-opacity-10 transition-all cursor-pointer group"
                                        style="top: {{ $yMin }}px; height: {{ $height }}px;"
                                        title="题目 {{ $question['question_number'] }}"
                                    >
                                        <span class="absolute top-0 left-0 bg-red-500 text-white text-xs px-1 rounded-br opacity-75 group-hover:opacity-100">
                                            Q{{ $question['question_number'] }}
                                        </span>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <div class="text-center py-8 bg-gray-50 rounded-lg">
                                <p class="text-gray-500">图片未找到</p>
                            </div>
                        @endif
                    </div>
                </div>
            </x-filament::section>

            <!-- 题目列表 -->
            @if(count($matchedQuestions) > 0)
                <x-filament::section>
                    <h3 class="text-lg font-semibold mb-4">答题详情</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        题号
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        知识点
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        学生答案
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        正确答案
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        得分
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        OCR状态
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        评分状态
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($matchedQuestions as $index => $question)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                            {{ $index + 1 }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ $question['knowledge_point'] }}
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-500">
                                            <span class="{{ $question['student_answer'] ? 'text-gray-900' : 'text-gray-400 italic' }}">
                                                {{ $question['student_answer'] ?: '未作答' }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-900 font-medium">
                                            {{ $question['correct_answer'] }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            @if($question['score'] !== null)
                                                <span class="{{ $question['is_correct'] ? 'text-green-600' : 'text-red-600' }} font-semibold">
                                                    {{ $question['score'] }}分
                                                </span>
                                                <span class="text-gray-500">/ {{ $question['full_score'] }}分</span>
                                            @else
                                                <span class="text-gray-400">未评分</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if($question['ocr_id'])
                                                <x-filament::badge color="success">
                                                    <x-filament::icon icon="heroicon-o-camera" class="mr-1" />
                                                    已识别
                                                </x-filament::badge>
                                                @if(isset($question['ocr_confidence']))
                                                    <span class="ml-1 text-xs text-gray-500">
                                                        {{ round($question['ocr_confidence'] * 100, 1) }}%
                                                    </span>
                                                @endif
                                            @else
                                                <x-filament::badge color="warning">
                                                    <x-filament::icon icon="heroicon-o-eye-slash" class="mr-1" />
                                                    未识别
                                                </x-filament::badge>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if($question['is_correct'] !== null)
                                                @if($question['is_correct'])
                                                    <x-filament::badge color="success">
                                                        <x-filament::icon icon="heroicon-o-check" class="mr-1" />
                                                        正确
                                                    </x-filament::badge>
                                                @else
                                                    <x-filament::badge color="danger">
                                                        <x-filament::icon icon="heroicon-o-x-mark" class="mr-1" />
                                                        错误
                                                    </x-filament::badge>
                                                @endif
                                            @else
                                                <x-filament::badge color="gray">待分析</x-filament::badge>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-filament::section>
            @endif

            <!-- 分析结果统计 -->
            @if($this->hasAnalysis())
                <x-filament::section>
                    <h3 class="text-lg font-semibold mb-4">分析结果统计</h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-sm text-blue-600 font-medium">题目总数</p>
                            <p class="text-2xl font-bold text-blue-900">{{ $this->getAnalysisStats()['total'] }}</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-sm text-green-600 font-medium">正确题数</p>
                            <p class="text-2xl font-bold text-green-900">{{ $this->getAnalysisStats()['correct'] }}</p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-4">
                            <p class="text-sm text-purple-600 font-medium">正确率</p>
                            <p class="text-2xl font-bold text-purple-900">{{ $this->getAnalysisStats()['accuracy'] }}%</p>
                        </div>
                        <div class="bg-yellow-50 rounded-lg p-4">
                            <p class="text-sm text-yellow-600 font-medium">得分率</p>
                            <p class="text-2xl font-bold text-yellow-900">{{ $this->getAnalysisStats()['score_rate'] }}%</p>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <p class="text-sm text-gray-600">
                            总分：<span class="font-semibold">{{ $this->getAnalysisStats()['score'] }}</span> /
                            <span class="font-semibold">{{ $this->getAnalysisStats()['full_score'] }}</span> 分
                        </p>
                        <x-filament::button
                            wire:click="$dispatch('openModal', {
                                component: 'app.filament.modals.analysis-report-modal',
                                arguments: {
                                    recordId: '{{ $this->recordId }}',
                                    stats: @json($this->getAnalysisStats()),
                                    questions: @json($matchedQuestions)
                                }
                            })"
                        >
                            生成详细报告
                        </x-filament::button>
                    </div>
                </x-filament::section>
            @endif

        @else
            <x-filament::section>
                <div class="text-center py-8">
                    <x-filament::icon icon="heroicon-o-exclamation-triangle" class="mx-auto h-12 w-12 text-gray-400" />
                    <h3 class="mt-2 text-sm font-medium text-gray-900">无法加载试卷信息</h3>
                    <p class="mt-1 text-sm text-gray-500">
                        请确保OCR记录存在且已关联到系统生成的试卷
                    </p>
                </div>
            </x-filament::section>
        @endif
    </div>
</x-filament-panels::page>