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

<x-filament-panels::page>
    @push('styles')
        <style>
            .stat-card {
                transition: all 0.3s;
            }
            .stat-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }
            .progress-bar {
                height: 8px;
                border-radius: 4px;
                background: #e5e7eb;
                overflow: hidden;
            }
            .progress-fill {
                height: 100%;
                transition: width 0.5s;
            }
            .excellent { background: #10b981; }
            .good { background: #3b82f6; }
            .average { background: #f59e0b; }
            .poor { background: #ef4444; }
        </style>
    @endpush

    <div class="space-y-6">
        <!-- 头部信息 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{{ $record->paper_title }}</h1>
                    <p class="text-sm text-gray-500 mt-1">
                        学生ID：{{ $record->user_id }} |
                        提交时间：{{ $record->created_at->format('Y-m-d H:i:s') }}
                    </p>
                </div>
                <button
                    wire:click="reanalyze"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                    重新分析
                </button>
            </div>

            <!-- 处理状态 -->
            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full {{ $record->status === 'completed' ? 'bg-green-500' : 'bg-gray-400' }}"></div>
                    <span class="text-sm font-medium">OCR状态：{{ $record->status }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 rounded-full {{ $record->questions->count() > 0 ? 'bg-green-500' : 'bg-gray-400' }}"></div>
                    <span class="text-sm font-medium">题目数：{{ $record->questions->count() }}</span>
                </div>
            </div>
        </div>

        <!-- 整体成绩 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="stat-card bg-white p-6 rounded-lg shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">总得分</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ $analysisData['total_score'] ?? 0 }}</p>
                        <p class="text-sm text-gray-500 mt-1">满分 {{ $analysisData['max_score'] ?? 0 }}</p>
                    </div>
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                        <x-heroicon-o-trophy class="w-8 h-8 text-blue-600" />
                    </div>
                </div>
            </div>

            <div class="stat-card bg-white p-6 rounded-lg shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">正确率</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ $analysisData['accuracy_rate'] ?? 0 }}%</p>
                        <p class="text-sm text-gray-500 mt-1">{{ $analysisData['correct_count'] ?? 0 }}/{{ $analysisData['total_count'] ?? 0 }} 题</p>
                    </div>
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
                        <x-heroicon-o-check-circle class="w-8 h-8 text-green-600" />
                    </div>
                </div>
            </div>

            <div class="stat-card bg-white p-6 rounded-lg shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">平均分</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ $analysisData['average_score'] ?? 0 }}</p>
                        <p class="text-sm text-gray-500 mt-1">每题平均</p>
                    </div>
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
                        <x-heroicon-o-chart-bar class="w-8 h-8 text-yellow-600" />
                    </div>
                </div>
            </div>

            <div class="stat-card bg-white p-6 rounded-lg shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">题目总数</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ $analysisData['total_count'] ?? 0 }}</p>
                        <p class="text-sm text-gray-500 mt-1">已识别题目</p>
                    </div>
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
                        <x-heroicon-o-document-text class="w-8 h-8 text-purple-600" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 知识点分析 -->
        @if(count($knowledgeStats) > 0)
            <div class="bg-white p-6 rounded-lg shadow">
                <h2 class="text-xl font-bold text-gray-900 mb-4">知识点掌握情况</h2>
                <div class="space-y-4">
                    @foreach($knowledgeStats as $kp)
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700">{{ $kp['kp_code'] }}</span>
                                <span class="text-sm text-gray-600">{{ round($kp['correct_rate'] * 100, 1) }}% 正确率</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill {{ $kp['correct_rate'] >= 0.8 ? 'excellent' : ($kp['correct_rate'] >= 0.6 ? 'good' : ($kp['correct_rate'] >= 0.4 ? 'average' : 'poor')) }}"
                                     style="width: {{ $kp['correct_rate'] * 100 }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- 能力画像 -->
        @if(count($abilityProfile) > 0)
            <div class="bg-white p-6 rounded-lg shadow">
                <h2 class="text-xl font-bold text-gray-900 mb-4">能力画像</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    @foreach($abilityProfile as $ability => $score)
                        <div class="p-4 border border-gray-200 rounded-lg">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700">{{ $ability }}</span>
                                <span class="text-lg font-bold text-gray-900">{{ $score }}</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill {{ $score >= 85 ? 'excellent' : ($score >= 70 ? 'good' : ($score >= 60 ? 'average' : 'poor')) }}"
                                     style="width: {{ $score }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- 题目详情 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-bold text-gray-900 mb-4">题目详情分析</h2>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">题号</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">题型</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">学生答案</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">置信度</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">得分</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">AI反馈</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">错误分析</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($this->getQuestionDetails() as $question)
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4 text-sm font-medium text-gray-900">第{{ $question['question_number'] }}题</td>
                                <td class="py-3 px-4 text-sm text-gray-600">
                                    <span class="px-2 py-1 rounded-full text-xs
                                        @switch($question['question_type'])
                                            @case('choice') bg-blue-100 text-blue-800 @break
                                            @case('fill') bg-green-100 text-green-800 @break
                                            @case('solve') bg-purple-100 text-purple-800 @break
                                            @default bg-gray-100 text-gray-800
                                        @endswitch
                                    ">
                                        {{ $question['question_type'] === 'choice' ? '选择题' : ($question['question_type'] === 'fill' ? '填空题' : '解答题') }}
                                    </span>
                                </td>
                                <td class="py-3 px-4 text-sm text-gray-900">{{ $question['student_answer'] }}</td>
                                <td class="py-3 px-4 text-sm text-gray-600">{{ round($question['answer_confidence'] * 100, 1) }}%</td>
                                <td class="py-3 px-4 text-sm">
                                    <span class="px-2 py-1 rounded-full text-xs {{ $question['ai_score'] > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ $question['ai_score'] }}分
                                    </span>
                                </td>
                                <td class="py-3 px-4 text-sm text-gray-600">{{ Str::limit($question['ai_feedback'], 30) }}</td>
                                <td class="py-3 px-4 text-sm text-gray-600">{{ $question['error_analysis'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 错题重点推荐 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-bold text-gray-900 mb-4">学习建议</h2>
            <div class="space-y-3">
                @if(($analysisData['accuracy_rate'] ?? 0) >= 80)
                    <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div class="flex items-start gap-3">
                            <x-heroicon-o-check-circle class="w-6 h-6 text-green-600 mt-0.5" />
                            <div>
                                <p class="font-medium text-green-900">表现优秀！</p>
                                <p class="text-sm text-green-700 mt-1">您的整体表现很好，建议挑战更高难度的题目。</p>
                            </div>
                        </div>
                    </div>
                @elseif(($analysisData['accuracy_rate'] ?? 0) >= 60)
                    <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                        <div class="flex items-start gap-3">
                            <x-heroicon-o-exclamation-triangle class="w-6 h-6 text-yellow-600 mt-0.5" />
                            <div>
                                <p class="font-medium text-yellow-900">需要加强</p>
                                <p class="text-sm text-yellow-700 mt-1">部分知识点掌握不够牢固，建议重点复习。</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-start gap-3">
                            <x-heroicon-o-x-circle class="w-6 h-6 text-red-600 mt-0.5" />
                            <div>
                                <p class="font-medium text-red-900">需要努力</p>
                                <p class="text-sm text-red-700 mt-1">建议系统复习基础知识，从基础题目开始练习。</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-filament-panels::page>