math_cms/resources/views/filament/pages/question-management-simple.blade.php

<x-filament-panels::page>

<div class="space-y-6">
    @php
        $questionsData = $this->questions;
        $metaData = $this->meta;
        $statisticsData = $this->statistics;
    @endphp

    <!-- 后台生成状态栏 - 仅在生成中显示 -->
    @if($isGenerating && $currentTaskId)
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg animate-pulse">
            <div class="flex items-center">
                <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-3"></div>
                <div class="flex-1">
                    <p class="text-sm text-blue-800">
                        <strong>正在后台生成题目...</strong>
                    </p>
                    <p class="text-xs text-blue-600 mt-1">
                        任务 ID: {{ $currentTaskId }} | AI生成完成后将自动刷新页面
                    </p>
                </div>
                <button type="button" wire:click="$set('isGenerating', false)" class="text-blue-400 hover:text-blue-600">
                    <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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>
    @endif

    <div class="flex justify-end">
        <button
            type="button"
            wire:click="$dispatch('ai-generate')"
            class="filament-button filament-button-size-sm filament-button-color-success filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
        >
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            生成题目
        </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">题目总数</div>
            <div class="text-2xl font-bold text-primary-600">{{ $statisticsData['total'] ?? 0 }}</div>
        </div>
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">基础难度 (≤0.4)</div>
            <div class="text-2xl font-bold text-green-600">
                @php
                    $basicCount = 0;
                    foreach ($statisticsData['by_difficulty'] ?? [] as $key => $value) {
                        if ((float)$key <= 0.4) {
                            $basicCount += $value;
                        }
                    }
                    echo $basicCount;
                @endphp
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">中等难度 (0.4-0.7)</div>
            <div class="text-2xl font-bold text-yellow-600">
                @php
                    $mediumCount = 0;
                    foreach ($statisticsData['by_difficulty'] ?? [] as $key => $value) {
                        if ((float)$key > 0.4 && (float)$key <= 0.7) {
                            $mediumCount += $value;
                        }
                    }
                    echo $mediumCount;
                @endphp
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">拔高难度 (>0.7)</div>
            <div class="text-2xl font-bold text-red-600">
                @php
                    $advancedCount = 0;
                    foreach ($statisticsData['by_difficulty'] ?? [] as $key => $value) {
                        if ((float)$key > 0.7) {
                            $advancedCount += $value;
                        }
                    }
                    echo $advancedCount;
                @endphp
            </div>
        </div>
    </div>

    <div class="bg-white p-4 rounded-lg border">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">搜索题目</label>
                <input type="text" wire:model.live.debounce.300ms="search" placeholder="输入关键词" class="w-full border rounded p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">知识点筛选</label>
                <input type="text" wire:model.live="selectedKpCode" placeholder="KP1001" class="w-full border rounded p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">难度筛选</label>
                <input type="text" wire:model.live="selectedDifficulty" placeholder="0.3/0.6/0.85" class="w-full border rounded p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">每页显示</label>
                <input type="number" wire:model.live="perPage" min="10" max="100" step="5" class="w-full border rounded p-2">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg border overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">题目编号</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">知识点</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">题干</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">难度</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($questionsData as $question)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">{{ $question['question_code'] ?? 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $question['kp_code'] ?? 'N/A' }}</td>
                        <td class="px-6 py-4" style="word-wrap: break-word; white-space: normal; line-height: 1.8; max-width: 400px;">
                            <span class="text-sm">
                                @math($question['stem'] ?? 'N/A')
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @php
                                $difficulty = $question['difficulty'] ?? null;
                                $label = match (true) {
                                    !$difficulty => 'N/A',
                                    (float)$difficulty <= 0.4 => '基础',
                                    (float)$difficulty <= 0.7 => '中等',
                                    default => '拔高',
                                };
                            @endphp
                            {{ $label }}
                            @if(app()->environment('local'))
                                <span class="text-xs text-gray-400">({{ $difficulty }})</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <button wire:click="deleteQuestion('{{ $question['question_code'] }}')" class="text-red-600 hover:underline">删除</button>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-6 py-12 text-center">暂无数据</td></tr>
                @endforelse
            </tbody>
        </table>

        @if(!empty($metaData) && ($metaData['total'] ?? 0) > 0)
            <div class="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
                <div class="text-sm text-gray-700">共 {{ $metaData['total'] ?? 0 }} 条记录</div>
                <div class="flex items-center gap-2">
                    <button wire:click="previousPage" @disabled($currentPage <= 1) class="px-3 py-1 border rounded">上一页</button>
                    @foreach($this->getPages() as $page)
                        <button wire:click="gotoPage({{ $page }})" class="px-3 py-1 border rounded {{ $page === $currentPage ? 'bg-blue-50 text-blue-700' : '' }}">{{ $page }}</button>
                    @endforeach
                    <button wire:click="nextPage" @disabled($currentPage >= ($metaData['total_pages'] ?? 1)) class="px-3 py-1 border rounded">下一页</button>
                </div>
            </div>
        @endif
    </div>

    @if($showGenerateModal)
        <div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
            <div class="bg-white rounded-lg p-6 w-96 max-w-[28rem] shadow-xl">
                <h3 class="text-lg font-semibold mb-4">生成题目</h3>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">知识点 <span class="text-red-500">*</span></label>
                        <select wire:model.live="generateKpCode" class="w-full border rounded p-2">
                            <option value="">选择知识点</option>
                            @foreach($this->knowledgePointOptions as $code => $name)
                                <option value="{{ $code }}">{{ $code }} - {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    @if(!empty($this->skillsOptions))
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <label class="block text-sm font-medium">选择技能 <span class="text-red-500">*</span></label>
                                <button type="button" class="text-sm text-blue-600 hover:underline" wire:click="toggleAllSkills">
                                    {{ count($selectedSkills) === count($this->skillsOptions) ? '取消全选' : '全选' }}
                                </button>
                            </div>
                            <div class="max-h-48 overflow-y-auto border rounded p-3 space-y-1">
                                @foreach($this->skillsOptions as $skill)
                                    <label class="flex items-center space-x-2">
                                        <input type="checkbox" value="{{ $skill['code'] }}" wire:model="selectedSkills" class="rounded border-gray-300">
                                        <span class="text-sm">
                                            <span class="font-medium">{{ $skill['code'] }}</span>
                                            <span class="text-gray-600 ml-2">{{ $skill['name'] }}</span>
                                            <span class="text-xs text-gray-400 ml-2">(权重: {{ $skill['weight'] ?? 1 }})</span>
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <div class="text-sm text-gray-500 italic">
                            请先选择知识点以加载技能列表
                        </div>
                    @endif

                    <div>
                        <label class="block text-sm font-medium mb-2">题目数量</label>
                        <input type="number" wire:model="questionCount" min="1" max="500" class="w-full border rounded p-2">
                    </div>
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" wire:click="closeGenerateModal" class="px-4 py-2 border rounded" @disabled($isGenerating)>取消</button>
                    <button
                        type="button"
                        wire:click="executeGenerate"
                        wire:loading.attr="disabled"
                        wire:loading.class="bg-yellow-500 cursor-not-allowed opacity-90"
                        wire:loading.class.remove="bg-blue-600 hover:bg-blue-700"
                        wire:target="executeGenerate"
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium transition-all duration-200 flex items-center gap-2 text-white"
                    >
                        @if($isGenerating)
                            <svg class="animate-spin h-4 w-4 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>
                            <span class="text-white font-semibold">生成中...</span>
                        @else
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                            <span class="text-white font-semibold">开始生成</span>
                        @endif
                    </button>
                </div>
            </div>
        </div>
    @endif

    <script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('ai-generate', () => {
            @this.call('openGenerateModal');
        });

        Livewire.on('refresh-page', () => {
            // 页面刷新事件
            // 触发数学公式重新渲染
            document.dispatchEvent(new Event('math:render'));
        });

        // 监听页面刷新事件
        Livewire.on('refresh-page', () => {
            console.log('[QuestionGen] 收到刷新页面事件');
            // 1秒后刷新页面，确保状态更新完成
            setTimeout(() => {
                console.log('[QuestionGen] 执行页面刷新');
                window.location.reload();
            }, 1000);
        });

        // ✅ 捕获回调参数，直接检查状态 - 避免盲目轮询
        Livewire.on('start-async-task-monitoring', () => {
            console.log('[QuestionGen] 开始监控任务状态');
            const taskId = @this.currentTaskId;

            if (!taskId) {
                console.error('[QuestionGen] 未找到任务ID');
                return;
            }

            window.currentTaskId = taskId;
            let checkCount = 0;
            const maxChecks = 5; // 最多检查5次

            function checkCallbackStatus() {
                checkCount++;
                console.log(`[QuestionGen] 检查回调 #${checkCount}/${maxChecks}`);

                // 直接调用 API 检查回调数据 - GET 请求无需 CSRF
                fetch(`/api/questions/callback/${taskId}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log('[QuestionGen] 回调数据:', data);

                        // ✅ 如果有状态字段，说明回调已收到
                        if (data.status) {
                            if (data.status === 'completed') {
                                console.log('[QuestionGen] ✅ 任务完成');
                                @this.set('isGenerating', false);
                                @this.set('currentTaskId', null);

                                // 显示成功通知
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1000);
                            } else if (data.status === 'failed') {
                                console.log('[QuestionGen] ❌ 任务失败');
                                @this.set('isGenerating', false);
                                @this.set('currentTaskId', null);
                            }
                        } else if (checkCount < maxChecks) {
                            // 没收到回调，继续检查
                            setTimeout(checkCallbackStatus, 3000);
                        } else {
                            // 达到最大检查次数，停止
                            console.log('[QuestionGen] 检查超时，停止监控');
                            @this.set('isGenerating', false);
                            @this.set('currentTaskId', null);
                        }
                    })
                    .catch(error => {
                        console.error('[QuestionGen] 检查回调失败:', error);
                        if (checkCount < maxChecks) {
                            setTimeout(checkCallbackStatus, 3000);
                        }
                    });
            }

            // 立即检查一次
            checkCallbackStatus();

            // 15秒后强制停止
            setTimeout(() => {
                if (checkCount < maxChecks) {
                    console.log('[QuestionGen] 强制停止监控');
                    @this.set('isGenerating', false);
                    @this.set('currentTaskId', null);
                }
            }, 15000);
        });

        // 监听强制关闭状态栏事件
        Livewire.on('force-close-status-bar', () => {
            console.log('[QuestionGen] 强制关闭状态栏');
            @this.set('isGenerating', false);
            @this.set('currentTaskId', null);
        });
    });
    </script>
</div>

<x-math-render />

</x-filament-panels::page>