math_cms/resources/views/filament/pages/recommendation-list.blade.php

<div>
    <div class="space-y-6">
        @if($loading)
            <div class="flex items-center justify-center py-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
                <span class="ml-3 text-gray-600">正在加载推荐题目...</span>
            </div>
        @else
            <!-- 页面头部 -->
            <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold mb-2">{{ $this->getTitle() }}</h1>
                        @if(!empty($knowledgePoint))
                        <p class="text-indigo-100">
                            基于知识点 <span class="font-semibold">{{ $knowledgePoint['cn_name'] }}</span>
                            为你智能推荐练习题目
                        </p>
                        @endif
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-indigo-100">推荐题目总数</p>
                        <p class="text-3xl font-bold">{{ count($recommendedQuestions) }}</p>
                    </div>
                </div>
            </div>

            <!-- 筛选工具栏 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center space-x-4">
                        <div>
                            <label class="text-sm font-medium text-gray-700">难度筛选</label>
                            <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                <option value="all">全部难度</option>
                                <option value="easy">简单</option>
                                <option value="medium">中等</option>
                                <option value="hard">困难</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">题目类型</label>
                            <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                <option value="all">全部类型</option>
                                <option value="基础题">基础题</option>
                                <option value="变式题">变式题</option>
                                <option value="综合题">综合题</option>
                                <option value="提高题">提高题</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
                            <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            刷新推荐
                        </button>
                        <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                            <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                            </svg>
                            筛选
                        </button>
                    </div>
                </div>
            </div>

            <!-- 题目列表 -->
            @if(!empty($recommendedQuestions))
            <div class="space-y-4">
                @foreach($recommendedQuestions as $index => $question)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200">
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 font-semibold text-sm">
                                    {{ $index + 1 }}
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-{{ $this->getDifficultyColor($question['difficulty'] ?? 'medium') }}-100 text-{{ $this->getDifficultyColor($question['difficulty'] ?? 'medium') }}-800">
                                    {{ $this->getDifficultyLabel($question['difficulty'] ?? 'medium') }}
                                </span>
                                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
                                    {{ $question['question_type'] ?? '练习题' }}
                                </span>
                                <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded">
                                    {{ $question['score'] ?? 5 }}分
                                </span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                {{ $question['stem'] ?? $question['content'] ?? '题目内容' }}
                            </h3>
                            @if(isset($question['content']) && $question['content'] !== $question['stem'])
                            <p class="text-gray-600 text-sm">{{ $question['content'] }}</p>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                        <div class="flex items-center space-x-4 text-sm text-gray-500">
                            <span>
                                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                                {{ $knowledgePoint['cn_name'] ?? $kpCode }}
                            </span>
                            <span>
                                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                预计时间: {{ $question['difficulty'] === 'easy' ? '3' : ($question['difficulty'] === 'hard' ? '8' : '5') }}分钟
                            </span>
                        </div>

                        <div class="flex items-center space-x-2">
                            <button class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                                </svg>
                            </button>
                            <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors inline-flex items-center">
                                开始练习
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- 分页 -->
            <div class="flex items-center justify-between">
                <p class="text-sm text-gray-700">
                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">{{ min(10, count($recommendedQuestions)) }}</span> 共
                    <span class="font-medium">{{ count($recommendedQuestions) }}</span> 道题目
                </p>
                <div class="flex items-center space-x-2">
                    <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50" disabled>
                        上一页
                    </button>
                    <button class="px-3 py-1 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                        1
                    </button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50">
                        2
                    </button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50">
                        下一页
                    </button>
                </div>
            </div>
            @else
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M12 21a9 9 0 110-18 9 9 0 010 18z"></path>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">暂无推荐题目</h3>
                <p class="mt-1 text-sm text-gray-500">系统正在为你生成推荐题目，请稍后再试</p>
            </div>
            @endif
        @endif
    </div>
</div>