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

<div class="p-6 space-y-6">
    {{-- 页面标题 --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">学生仪表板</h1>
            <p class="mt-1 text-sm text-gray-500">
                全面展示学生的学习分析数据，包括掌握度、技能熟练度、提分预测和学习路径
            </p>
        </div>
        <div class="flex items-center space-x-4">
            <input
                type="text"
                wire:model.live="studentId"
                placeholder="输入学生ID"
                class="block w-40 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
            <button
                wire:click="loadDashboardData"
                wire:loading.attr="disabled"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
                <svg wire:loading class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                刷新数据
            </button>
        </div>
    </div>

    {{-- 错误提示 --}}
    @if ($errorMessage)
        <div class="rounded-md bg-red-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">加载错误</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>{{ $errorMessage }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- 加载状态 --}}
    @if ($isLoading)
        <div class="flex items-center justify-center py-12">
            <svg class="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="ml-3 text-gray-600">正在加载数据...</span>
        </div>
    @else
        {{-- 快速概览卡片 --}}
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {{-- 掌握度概览 --}}
            @if (isset($dashboardData['mastery']['overview']))
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 bg-indigo-500 rounded-md flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">平均掌握度</dt>
                                    <dd class="flex items-baseline">
                                        <div class="text-2xl font-semibold text-gray-900">
                                            {{ number_format($dashboardData['mastery']['overview']['average_mastery_level'] * 100, 1) }}%
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="text-sm">
                            <div class="flex justify-between text-xs text-gray-600">
                                <span>已掌握: {{ $dashboardData['mastery']['overview']['mastered_knowledge_points'] }}</span>
                                <span>薄弱点: {{ $dashboardData['mastery']['overview']['weak_knowledge_points'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- 技能熟练度概览 --}}
            @if (isset($dashboardData['skill']['summary']))
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">技能熟练度</dt>
                                    <dd class="flex items-baseline">
                                        <div class="text-2xl font-semibold text-gray-900">
                                            {{ number_format($dashboardData['skill']['summary']['average_proficiency_level'] * 100, 1) }}%
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="text-sm">
                            <div class="flex justify-between text-xs text-gray-600">
                                <span>技能总数: {{ $dashboardData['skill']['summary']['total_skills'] }}</span>
                                <span>练习题: {{ $dashboardData['skill']['summary']['total_questions_attempted'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- 提分潜力 --}}
            @if (isset($dashboardData['prediction']['quick']))
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">预期提分</dt>
                                    <dd class="flex items-baseline">
                                        <div class="text-2xl font-semibold text-gray-900">
                                            +{{ $dashboardData['prediction']['quick']['quick_prediction']['improvement_potential'] ?? 0 }}
                                        </div>
                                        <span class="ml-2 text-sm text-gray-600">分</span>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="text-sm">
                            <div class="flex justify-between text-xs text-gray-600">
                                <span>预计学习: {{ $dashboardData['prediction']['quick']['quick_prediction']['estimated_study_hours'] ?? 0 }}小时</span>
                                <span>置信度: {{ number_format(($dashboardData['prediction']['quick']['quick_prediction']['confidence_level'] ?? 0) * 100, 0) }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- 学习路径 --}}
            @if (isset($dashboardData['learning_path']['analytics']))
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">活跃路径</dt>
                                    <dd class="flex items-baseline">
                                        <div class="text-2xl font-semibold text-gray-900">
                                            {{ $dashboardData['learning_path']['analytics']['active_paths'] ?? 0 }}
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="text-sm">
                            <div class="flex justify-between text-xs text-gray-600">
                                <span>已完成: {{ $dashboardData['learning_path']['analytics']['completed_paths'] ?? 0 }}</span>
                                <span>效率: {{ number_format(($dashboardData['learning_path']['analytics']['average_efficiency_score'] ?? 0) * 100, 0) }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- 主要内容区域 --}}
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            {{-- 掌握度分析 --}}
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900">知识点掌握度</h3>
                    <button
                        wire:click="batchUpdateSkills"
                        class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
                    >
                        刷新数据
                    </button>
                </div>
                <div class="p-6">
                    @if (isset($dashboardData['mastery']['overview']['total_knowledge_points']))
                        <div class="space-y-4">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600">总知识点数</span>
                                <span class="font-medium text-gray-900">{{ $dashboardData['mastery']['overview']['total_knowledge_points'] }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ $dashboardData['mastery']['overview']['average_mastery_level'] * 100 }}%"></div>
                            </div>
                            <div class="grid grid-cols-3 gap-4 mt-4">
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-green-600">{{ $dashboardData['mastery']['overview']['mastered_knowledge_points'] }}</div>
                                    <div class="text-xs text-gray-500">已掌握 (≥85%)</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-blue-600">{{ $dashboardData['mastery']['overview']['good_knowledge_points'] }}</div>
                                    <div class="text-xs text-gray-500">良好 (70-85%)</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-red-600">{{ $dashboardData['mastery']['overview']['weak_knowledge_points'] }}</div>
                                    <div class="text-xs text-gray-500">薄弱 (<50%)</div>
                                </div>
                            </div>
                            @if (!empty($dashboardData['mastery']['overview']['weak_knowledge_points']))
                                <div class="mt-6">
                                    <h4 class="text-sm font-medium text-gray-900 mb-3">薄弱知识点</h4>
                                    <div class="space-y-2">
                                        @foreach (array_slice($dashboardData['mastery']['overview']['weak_knowledge_points'], 0, 5) as $weak)
                                            <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                                                <div class="flex items-center">
                                                    <div class="w-2 h-2 bg-red-500 rounded-full mr-3"></div>
                                                    <span class="text-sm font-medium text-gray-900">{{ $weak['kp_code'] }}</span>
                                                </div>
                                                <div class="flex items-center space-x-3">
                                                    <span class="text-sm text-gray-600">{{ number_format($weak['mastery_level'] * 100, 1) }}%</span>
                                                    <button
                                                        wire:click="recalculateMastery('{{ $weak['kp_code'] }}')"
                                                        class="text-xs text-indigo-600 hover:text-indigo-800"
                                                    >
                                                        重新计算
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            暂无掌握度数据
                        </div>
                    @endif
                </div>
            </div>

            {{-- 技能熟练度 --}}
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900">技能熟练度</h3>
                    <button
                        wire:click="batchUpdateSkills"
                        class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-green-700 bg-green-100 hover:bg-green-200"
                    >
                        批量更新
                    </button>
                </div>
                <div class="p-6">
                    @if (isset($dashboardData['skill']['proficiency']['data']))
                        <div class="space-y-4">
                            @foreach (array_slice($dashboardData['skill']['proficiency']['data'], 0, 5) as $skill)
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center flex-1">
                                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                                        <div class="flex-1">
                                            <div class="text-sm font-medium text-gray-900">{{ $skill['skill_name'] }}</div>
                                            <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                                                <div class="bg-green-500 h-1.5 rounded-full" style="width: {{ $skill['proficiency_level'] * 100 }}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ml-4 text-right">
                                        <div class="text-sm font-semibold text-gray-900">{{ number_format($skill['proficiency_level'] * 100, 1) }}%</div>
                                        <div class="text-xs text-gray-500">{{ $skill['total_questions_attempted'] }}题</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            暂无技能数据
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- 技能熟练度雷达图 --}}
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">技能熟练度雷达图</h3>
            </div>
            <div class="p-6">
                <livewire:skill-proficiency-radar :student-id="$studentId" />
            </div>
        </div>

        {{-- 提分预测和学习路径 --}}
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            {{-- 提分预测 --}}
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900">提分预测</h3>
                    <button
                        wire:click="generateQuickPrediction"
                        class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-yellow-700 bg-yellow-100 hover:bg-yellow-200"
                    >
                        快速预测
                    </button>
                </div>
                <div class="p-6">
                    @if (isset($dashboardData['prediction']['list']['predictions']))
                        <div class="space-y-4">
                            @foreach (array_slice($dashboardData['prediction']['list']['predictions'], 0, 3) as $prediction)
                                <div class="p-4 border border-gray-200 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-900">{{ $prediction['target_entity'] }}</div>
                                        <span class="text-xs text-gray-500">{{ date('m-d', strtotime($prediction['prediction_date'])) }}</span>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div class="text-sm text-gray-600">
                                            当前: {{ $prediction['current_score'] }}分 →
                                            <span class="font-semibold text-gray-900">{{ $prediction['predicted_score'] }}分</span>
                                        </div>
                                        <div class="text-sm font-semibold text-green-600">
                                            +{{ number_format($prediction['predicted_score'] - $prediction['current_score'], 1) }}分
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            暂无预测数据
                        </div>
                    @endif
                </div>
            </div>

            {{-- 学习路径 --}}
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">学习路径</h3>
                </div>
                <div class="p-6">
                    @if (isset($dashboardData['learning_path']['list']['paths']))
                        <div class="space-y-4">
                            @foreach (array_slice($dashboardData['learning_path']['list']['paths'], 0, 3) as $path)
                                <div class="p-4 border border-gray-200 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-900">{{ $path['target_kp_code'] }}</div>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                            {{ $path['status'] === 'active' ? 'bg-green-100 text-green-800' : '' }}
                                            {{ $path['status'] === 'completed' ? 'bg-blue-100 text-blue-800' : '' }}
                                            {{ $path['status'] === 'abandoned' ? 'bg-gray-100 text-gray-800' : '' }}">
                                            {{ $path['status'] }}
                                        </span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                                        <div class="bg-purple-600 h-2 rounded-full" style="width: {{ $path['completion_percentage'] }}%"></div>
                                    </div>
                                    <div class="flex items-center justify-between text-xs text-gray-600">
                                        <span>完成度: {{ number_format($path['completion_percentage'], 0) }}%</span>
                                        <span>预计: {{ $path['estimated_hours'] }}小时</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            暂无学习路径数据
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- 掌握度热力图 --}}
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">知识点掌握度热力图</h3>
            </div>
            <div class="p-6">
                <livewire:mastery-heatmap :student-id="$studentId" />
            </div>
        </div>

        {{-- 知识点依赖关系图 --}}
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">知识点依赖关系图</h3>
            </div>
            <div class="p-6">
                <livewire:knowledge-dependency-graph :student-id="$studentId" />
            </div>
        </div>

        {{-- 推荐学习路径 --}}
        @if (isset($dashboardData['learning_path']['recommendations']['recommendations']))
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">推荐学习路径</h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($dashboardData['learning_path']['recommendations']['recommendations'] as $recommendation)
                            <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 transition-colors">
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                        <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                        </svg>
                                    </div>
                                    <div class="flex-1">
                                        <div class="text-sm font-medium text-gray-900">{{ $recommendation['target_kp_name'] }}</div>
                                        <div class="text-xs text-gray-500">{{ $recommendation['target_kp_code'] }}</div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="flex items-center justify-between text-xs text-gray-600 mb-1">
                                        <span>当前掌握度</span>
                                        <span class="font-medium">{{ number_format($recommendation['current_mastery'] * 100, 1) }}%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-indigo-500 h-1.5 rounded-full" style="width: {{ $recommendation['current_mastery'] * 100 }}%"></div>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-600 mb-3">{{ $recommendation['reason'] }}</p>
                                <button class="w-full text-xs bg-indigo-600 text-white py-2 px-3 rounded-md hover:bg-indigo-700 transition-colors">
                                    生成学习路径
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    @endif

    {{-- 通知脚本 --}}
    <script>
        document.addEventListener('notify', (event) => {
            const message = event.detail.message;
            const type = event.detail.type || 'info';

            // 这里可以使用您喜欢的通知库，如toast、notyf等
            if (window.Alpine && window.Alpine.store) {
                Alpine.store('notifications').add(message, type);
            } else {
                alert(message);
            }
        });
    </script>
</div>