math_cms/resources/views/examples/exam-analysis-components-example.blade.php

<!--
组件化设计示例
展示如何在不同的页面中使用这些组件
-->

<!-- 示例1: OCR记录页面 (紧凑模式) -->
<div>
    <div class="space-y-4">
        @if($loading)
            <x-exam-analysis.loading message="正在分析试卷数据..." />
        @else
            <x-exam-analysis.header :recordData="$recordData" title="📊 OCR试卷分析" />
            <x-exam-analysis.quick-stats :recordData="$recordData" />
            <x-exam-analysis.learning-analysis :analysisData="$analysisData" />
            <x-exam-analysis.question-details :questions="$recordData['questions'] ?? []" />
            @if(isset($analysisData['recommendations']))
                <x-exam-analysis.recommendations :recommendations="$analysisData['recommendations']" />
            @endif
        @endif
    </div>
</div>

<!-- 示例2: 系统生成卷子页面 (标准模式) -->
<div>
    <div class="space-y-6">
        @if($loading)
            <x-exam-analysis.loading message="正在加载试卷数据..." />
        @else
            <x-exam-analysis.header :recordData="$recordData" title="📊 试卷分析报告" />

            <!-- 试卷基本信息 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="p-6 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">📝 试卷信息</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">试卷名称</label>
                            <p class="text-lg font-medium text-gray-900">{{ $recordData['paper_name'] ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">试卷编号</label>
                            <p class="text-lg font-mono text-gray-900">{{ $recordData['paper_id'] ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-500 mb-1">题目数量</label>
                            <p class="text-lg font-medium text-gray-900">{{ $recordData['total_questions'] ?? 0 }} 题</p>
                        </div>
                    </div>
                </div>
            </div>

            <x-exam-analysis.learning-analysis :analysisData="$analysisData" />
            <x-exam-analysis.question-details :questions="$recordData['questions'] ?? []" />

            @if(isset($analysisData['recommendations']))
                <x-exam-analysis.recommendations :recommendations="$analysisData['recommendations']" />
            @endif
        @endif
    </div>
</div>

<!-- 示例3: 自定义页面布局 -->
<div>
    <div class="space-y-6">
        <!-- 只显示题目详情 -->
        <x-exam-analysis.question-details :questions="$questions" />

        <!-- 只显示学习分析 -->
        <x-exam-analysis.learning-analysis :analysisData="$analysisData" />

        <!-- 只显示学习建议 -->
        @if(isset($recommendations))
            <x-exam-analysis.recommendations :recommendations="$recommendations" />
        @endif
    </div>
</div>