math_cms/resources/views/filament/pages/student-analysis.blade.php

<x-filament-panels::page>
    @push('styles')
        <style>
            .mastery-card {
                transition: all 0.3s ease;
                border-left: 4px solid transparent;
            }
            .mastery-card:hover {
                transform: translateX(4px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }
            .mastery-progress {
                height: 8px;
                border-radius: 4px;
                overflow: hidden;
                background: #e5e7eb;
            }
            .mastery-progress-bar {
                height: 100%;
                transition: width 0.5s ease;
            }
            .skill-badge {
                display: inline-block;
                padding: 4px 12px;
                margin: 4px;
                border-radius: 16px;
                font-size: 12px;
                font-weight: 500;
            }
            .weakness-tag {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #991b1b;
            }
            .strength-tag {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #065f46;
            }
            .chart-container {
                min-height: 300px;
            }
        </style>
    @endpush

    <div class="space-y-6">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">学生掌握度分析</h2>
                <p class="mt-1 text-sm text-gray-500">
                    基于学生答题数据，分析知识点掌握情况并提供个性化学习建议
                </p>
            </div>
            <div class="flex gap-3">
                @if($selectedStudentId)
                    button
                        color="success"
                        wire:click="generateStudyPlan"
                    >
                        <x-heroicon-m-academic-cap class="w-5 h-5 mr-2" />
                        生成学习计划
                    /button>
                    button
                        color="gray"
                        wire:click="exportAnalysis"
                    >
                        <x-heroicon-m-arrow-down-tray class="w-5 h-5 mr-2" />
                        导出报告
                    /button>
                @endif
            </div>
        </div>

        <!-- 学生选择器 -->
        <x-filament::card>
            <div class="flex items-center gap-4">
                <div class="flex-1">
                    <select
                        wire:model.live="selectedStudentId"
                        class="select select-bordered w-full"
                    >
                        <option value="">-- 选择学生 --</option>
                        @foreach($this->students() as $student)
                            <option value="{{ $student['student_id'] }}">
                                {{ $student['name'] ?? $student['student_id'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @if($selectedStudentId)
                    <div class="text-sm text-gray-600">
                        当前分析学生：<span class="font-semibold">{{ $selectedStudentId }}</span>
                    </div>
                @endif
            </div>
        </x-filament::card>

        @if($selectedStudentId)
            <!-- 概览统计 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <x-filament::card class="text-center">
                    <div class="text-3xl font-bold text-blue-600">
                        {{ count($masteryData) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">已学习知识点</div>
                </x-filament::card>

                <x-filament::card class="text-center">
                    <div class="text-3xl font-bold text-green-600">
                        {{ count(array_filter($masteryData, fn($m) => $m['mastery'] >= 0.8)) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">掌握良好(≥80%)</div>
                </x-filament::card>

                <x-filament::card class="text-center">
                    <div class="text-3xl font-bold text-red-600">
                        {{ count($weaknesses) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">薄弱知识点</div>
                </x-filament::card>

                <x-filament::card class="text-center">
                    @php
                        $avgMastery = count($masteryData) > 0
                            ? round(array_sum(array_column($masteryData, 'mastery')) / count($masteryData) * 100, 1)
                            : 0;
                    @endphp
                    <div class="text-3xl font-bold text-purple-600">{{ $avgMastery }}%</div>
                    <div class="text-sm text-gray-600 mt-1">平均掌握度</div>
                </x-filament::card>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 掌握度详情 -->
                <x-filament::card>
                    <x-slot name="header">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                <x-heroicon-o-chart-bar class="w-6 h-6 text-blue-600" />
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">知识点掌握度详情</h3>
                                <p class="text-sm text-gray-500">学生各知识点的掌握情况</p>
                            </div>
                        </div>
                    </x-slot>

                    @if(count($masteryData) > 0)
                        <div class="space-y-4 max-h-96 overflow-y-auto">
                            @foreach($masteryData as $item)
                                <div class="mastery-card p-4 {{ getMasteryBgColor($item['mastery']) }}" style="border-left-color: {{ getMasteryColor($item['mastery']) }}">
                                    <div class="flex items-start justify-between mb-2">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900">{{ $item['kp_name'] ?? $item['kp_code'] }}</div>
                                            <div class="text-xs text-gray-600 mt-1">{{ $item['kp_code'] }}</div>
                                        </div>
                                        <div class="text-right">
                                            <div class="text-lg font-bold" style="color: {{ getMasteryColor($item['mastery']) }}">
                                                {{ number_format($item['mastery'] * 100, 1) }}%
                                            </div>
                                            <div class="text-xs text-gray-600">{{ $item['mastery_level'] }}</div>
                                        </div>
                                    </div>

                                    <div class="mastery-progress">
                                        <div
                                            class="mastery-progress-bar"
                                            style="width: {{ $item['mastery'] * 100 }}%; background: {{ getMasteryColor($item['mastery']) }}"
                                        ></div>
                                    </div>

                                    @if($item['mastery'] < 0.7)
                                        <div class="mt-2 flex items-center gap-2">
                                            <span class="text-xs px-2 py-0.5 bg-red-200 text-red-700 rounded">
                                                需重点关注
                                            </span>
                                            <span class="text-xs text-gray-600">
                                                建议练习{{ ceil((0.8 - $item['mastery']) * 10) }}次
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-gray-500 py-8">
                            暂无掌握度数据
                        </div>
                    @endif
                </x-filament::card>

                <!-- 薄弱点分析 -->
                <x-filament::card>
                    <x-slot name="header">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                <x-heroicon-o-exclamation-triangle class="w-6 h-6 text-red-600" />
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">薄弱点分析</h3>
                                <p class="text-sm text-gray-500">需要加强练习的知识点</p>
                            </div>
                        </div>
                    </x-slot>

                    @if(count($weaknesses) > 0)
                        <div class="space-y-3">
                            @foreach($weaknesses as $weakness)
                                <div class="border border-red-200 rounded-lg p-3 bg-red-50">
                                    <div class="flex items-start justify-between">
                                        <div class="flex-1">
                                            <div class="font-medium text-gray-900">
                                                {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
                                            </div>
                                            <div class="text-xs text-gray-600 mt-1">{{ $weakness['kp_code'] }}</div>
                                        </div>
                                        <div class="text-right">
                                            <div class="text-sm font-bold text-red-600">
                                                {{ number_format($weakness['mastery'] * 100, 1) }}%
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-3 space-y-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs text-gray-600">掌握度：</span>
                                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                                <div
                                                    class="bg-red-500 h-2 rounded-full"
                                                    style="width: {{ $weakness['mastery'] * 100 }}%"
                                                ></div>
                                            </div>
                                        </div>

                                        <div class="text-xs text-gray-600">
                                            <strong>建议：</strong>
                                            @if($weakness['mastery'] < 0.3)
                                                重新学习基础知识，从基础题开始练习
                                            @elseif($weakness['mastery'] < 0.5)
                                                重点练习基础题型，复习相关概念
                                            @elseif($weakness['mastery'] < 0.7)
                                                加强练习，增加题型熟悉度
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-green-600 py-8">
                            <x-heroicon-o-check-circle class="w-12 h-12 mx-auto mb-2" />
                            <div>学生表现优秀，暂无敌弱知识点！</div>
                        </div>
                    @endif
                </x-filament::card>
            </div>

            <!-- 优势与建议 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 优势知识点 -->
                <x-filament::card>
                    <x-slot name="header">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                <x-heroicon-o-star class="w-6 h-6 text-green-600" />
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">优势知识点</h3>
                                <p class="text-sm text-gray-500">掌握良好的知识点</p>
                            </div>
                        </div>
                    </x-slot>

                    @php
                        $strengths = array_filter($masteryData, fn($m) => $m['mastery'] >= 0.8);
                        $strengths = array_slice($strengths, 0, 10);
                    @endphp

                    @if(count($strengths) > 0)
                        <div class="flex flex-wrap gap-2">
                            @foreach($strengths as $strength)
                                <span class="skill-badge strength-tag">
                                    {{ $strength['kp_name'] ?? $strength['kp_code'] }}
                                    ({{ number_format($strength['mastery'] * 100, 0) }}%)
                                </span>
                            @endforeach
                        </div>

                        <div class="mt-4 p-3 bg-green-50 rounded-lg">
                            <div class="text-sm text-green-800">
                                <strong>分析：</strong>学生在这些知识点上表现优秀，可以作为学习其他内容的支撑点。
                            </div>
                        </div>
                    @else
                        <div class="text-center text-gray-500 py-4">
                            暂无优势知识点
                        </div>
                    @endif
                </x-filament::card>

                <!-- 学习建议 -->
                <x-filament::card>
                    <x-slot name="header">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                <x-heroicon-o-light-bulb class="w-6 h-6 text-purple-600" />
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900">学习建议</h3>
                                <p class="text-sm text-gray-500">个性化学习路径</p>
                            </div>
                        </div>
                    </x-slot>

                    @if(count($weaknesses) > 0)
                        <div class="space-y-4">
                            <div class="p-3 bg-amber-50 rounded-lg">
                                <div class="text-sm font-medium text-amber-800 mb-2">📚 学习优先级</div>
                                <ol class="text-sm text-amber-700 space-y-1 list-decimal list-inside">
                                    @foreach(array_slice($weaknesses, 0, 5) as $idx => $weakness)
                                        <li>
                                            {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
                                            - 建议练习{{ ceil((0.8 - $weakness['mastery']) * 15) }}道题
                                        </li>
                                    @endforeach
                                </ol>
                            </div>

                            <div class="p-3 bg-blue-50 rounded-lg">
                                <div class="text-sm font-medium text-blue-800 mb-2">🎯 学习策略</div>
                                <ul class="text-sm text-blue-700 space-y-1 list-disc list-inside">
                                    <li>先巩固基础知识，再提升难度</li>
                                    <li>每天练习{{ min(10, ceil(50 / count($weaknesses))) }}道薄弱知识点题目</li>
                                    <li>定期复习已掌握的知识点</li>
                                    <li>结合优势知识点，尝试综合性题目</li>
                                </ul>
                            </div>
                        </div>
                    @else
                        <div class="text-center text-gray-500 py-4">
                            学生掌握情况良好，建议继续提升挑战难度
                        </div>
                    @endif
                </x-filament::card>
            </div>
        @else
            <!-- 未选择学生的提示 -->
            <x-filament::card class="text-center py-12">
                <x-heroicon-o-users class="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <div class="text-lg font-medium text-gray-900 mb-2">请选择学生</div>
                <div class="text-sm text-gray-500">
                    从上方下拉菜单中选择一个学生，查看详细的掌握度分析
                </div>
            </x-filament::card>
        @endif
    </div>
</x-filament-pages::page>