# 试卷分析组件库

组件化设计，用于试卷分析页面的各个区块。

## 组件列表

### 1. Header 头部组件
显示页面标题和基本状态信息。
```blade
<x-exam-analysis.header :recordData="$recordData" title="📊 试卷分析报告" />
```

### 2. Loading 加载状态组件
显示加载动画和提示信息。
```blade
<x-exam-analysis.loading message="正在分析试卷数据..." />
```

### 3. QuickStats 快速统计组件
显示关键指标的迷你卡片。
```blade
<x-exam-analysis.quick-stats :recordData="$recordData" />
```

### 4. LearningAnalysis 学习分析组件
显示整体掌握度、进度条和知识点掌握情况。
```blade
<x-exam-analysis.learning-analysis :analysisData="$analysisData" />
```

### 5. QuestionDetails 题目详情组件
显示每道题的详细信息和AI分析结果。
```blade
<x-exam-analysis.question-details :questions="$recordData['questions'] ?? []" />
```

### 6. Recommendations 学习建议组件
显示学习建议列表。
```blade
<x-exam-analysis.recommendations :recommendations="$analysisData['recommendations']" />
```

## 布局模板

### 紧凑布局 (exam-analysis-compact.blade.php)
适用于OCR记录的快速查看，页面高度紧凑。

### 标准布局 (exam-analysis-standard.blade.php)
适用于系统生成卷子的详细分析，包含完整的统计概览。

## 使用示例

```blade
<x-filament-panels::page>
    <div class="space-y-6">
        @if($loading)
            <x-exam-analysis.loading />
        @else
            <x-exam-analysis.header :recordData="$recordData" />
            <x-exam-analysis.quick-stats :recordData="$recordData" />
            <x-exam-analysis.learning-analysis :analysisData="$analysisData" />
            <x-exam-analysis.question-details :questions="$questions" />
            <x-exam-analysis.recommendations :recommendations="$recommendations" />
        @endif
    </div>
</x-filament-panels::page>
```

## 组件调用语法

### 类名语法（推荐）
使用Laravel类组件：
- `<x-exam-analysis.header />` → `App\View\Components\ExamAnalysis\Header`
- `<x-exam-analysis.quick-stats />` → `App\View\Components\ExamAnalysis\QuickStats`

### dot notation 语法
直接引用视图组件：
- `x-exam-analysis.header` → `resources/views/components/exam-analysis/header.blade.php`
- `x-exam-analysis.quick-stats` → `resources/views/components/exam-analysis/quick-stats.blade.php`

## 优势

1. **可复用性** - 每个组件可以在不同页面中重复使用
2. **可维护性** - 组件独立维护，修改不影响其他部分
3. **可读性** - 模板文件更简洁，逻辑清晰
4. **可测试性** - 每个组件可以独立测试
5. **一致性** - 确保所有页面的样式和交互保持一致