math_cms/resources/views/filament/pages/question-generation.blade.php

<x-filament-panels::page>

<!-- 数学公式渲染组件 -->
<x-math-render />

<div class="space-y-6">
    <!-- 后台生成状态栏 - 仅在生成中显示 -->
    @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="bg-white p-6 rounded-lg border">
        <h2 class="text-lg font-semibold mb-4">生成配置</h2>

        <div class="space-y-4">
            <!-- 知识点选择 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 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>
                            <span class="text-xs text-gray-500 ml-2">({{ count($selectedSkills) }}/{{ count($this->skillsOptions) }} 已选)</span>
                        </label>
                        <button type="button"
                                class="text-sm text-blue-600 hover:underline {{ count($selectedSkills) === count($this->skillsOptions) && count($this->skillsOptions) > 0 ? 'font-semibold' : '' }}"
                                wire:click="toggleAllSkills">
                            {{ count($selectedSkills) === count($this->skillsOptions) && count($this->skillsOptions) > 0 ? '取消全选' : '全选' }}
                        </button>
                    </div>
                    <div class="max-h-64 overflow-y-auto border rounded p-3 grid grid-cols-2 gap-2">
                        @foreach($this->skillsOptions as $skill)
                            <label class="flex items-center space-x-2">
                                <input type="checkbox"
                                       value="{{ $skill['code'] }}"
                                       @checked(in_array($skill['code'], $selectedSkills, true))
                                       wire:model="selectedSkills"
                                       class="rounded border-gray-300 text-primary focus:ring-primary">
                                <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="bg-blue-50 border border-blue-200 rounded p-3">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 mt-0.5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                        </svg>
                        <div>
                            <p class="text-sm text-blue-800 font-medium">
                                该知识点暂未关联技能
                            </p>
                            <p class="text-xs text-blue-700 mt-1">
                                将基于知识点本身生成题目，无需额外技能限制
                            </p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- 题目数量 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">题目数量</label>
                <input type="number" wire:model="questionCount" min="1" max="500" class="w-full border rounded p-2">
            </div>

            <!-- 生成按钮 -->
            <div class="flex justify-end pt-4">
                <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>
</div>

<script>
document.addEventListener('livewire:init', () => {
    // ✅ 捕获回调参数，直接检查状态 - 避免盲目轮询
    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>

</x-filament-panels::page>