math_cms/resources/views/livewire/question-preview-tool.blade.php

<div class="max-w-7xl mx-auto py-8 px-4">
    <!-- 标题 -->
    <div class="text-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">题目预览验证工具</h1>
        <p class="text-gray-500 mt-2">验证题目在网页和PDF中的显示效果</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 左侧：输入表单 -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">输入题目内容</h2>

            <!-- 题干 -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    题干 <span class="text-red-500">*</span>
                </label>
                <textarea
                    wire:model="stem"
                    rows="5"
                    class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="粘贴题干内容，支持 LaTeX 公式（如 $$\sqrt{2}$$ 或 $x^2$）"
                ></textarea>
            </div>

            <!-- 选项 -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    选项（选填，不填则为填空/解答题）
                </label>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-xs text-gray-500">A</label>
                        <input
                            type="text"
                            wire:model="optionA"
                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500"
                            placeholder="选项 A"
                        >
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">B</label>
                        <input
                            type="text"
                            wire:model="optionB"
                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500"
                            placeholder="选项 B"
                        >
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">C</label>
                        <input
                            type="text"
                            wire:model="optionC"
                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500"
                            placeholder="选项 C"
                        >
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">D</label>
                        <input
                            type="text"
                            wire:model="optionD"
                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500"
                            placeholder="选项 D"
                        >
                    </div>
                </div>
            </div>

            <!-- 答案 -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">答案</label>
                <input
                    type="text"
                    wire:model="answer"
                    class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500"
                    placeholder="正确答案"
                >
            </div>

            <!-- 解析 -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">解析/解题思路</label>
                <textarea
                    wire:model="solution"
                    rows="4"
                    class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500"
                    placeholder="解题思路或解析内容"
                ></textarea>
            </div>

            <!-- 操作按钮 -->
            <div class="flex flex-wrap gap-3">
                <button
                    wire:click="previewWeb"
                    class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center gap-2"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    网页预览
                </button>

                <button
                    wire:click="previewPdf"
                    wire:loading.attr="disabled"
                    wire:loading.class="opacity-50 cursor-wait"
                    wire:target="previewPdf"
                    class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center gap-2"
                >
                    <svg wire:loading.remove wire:target="previewPdf" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                    <svg wire:loading wire:target="previewPdf" class="w-4 h-4 animate-spin" 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 wire:loading.remove wire:target="previewPdf">PDF 预览</span>
                    <span wire:loading wire:target="previewPdf">生成中...</span>
                </button>

                <button
                    wire:click="previewBoth"
                    wire:loading.attr="disabled"
                    class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition flex items-center gap-2"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
                    </svg>
                    同时预览
                </button>

                <button
                    wire:click="clearForm"
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"
                >
                    清空
                </button>
            </div>
        </div>

        <!-- 右侧：预览区域 -->
        <div class="space-y-6">
            <!-- 网页预览 -->
            @if($showWebPreview)
            <div class="bg-white rounded-lg shadow">
                <div class="px-4 py-3 border-b border-gray-200 flex items-center gap-2">
                    <span class="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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </span>
                    <h3 class="font-semibold text-gray-700">网页效果预览</h3>
                </div>
                <div id="web-preview-area" class="p-4 math-preview">
                    <!-- 题干 -->
                    @if($stem)
                    <div class="question-stem" data-math="{{ $stem }}">
                        {{ $stem }}
                    </div>
                    @endif

                    <!-- 选项 -->
                    @if($optionA || $optionB || $optionC || $optionD)
                    <div class="question-options">
                        @if($optionA)
                        <div class="question-option">
                            <span class="font-medium">A.</span>
                            <span data-math="{{ $optionA }}">{{ $optionA }}</span>
                        </div>
                        @endif
                        @if($optionB)
                        <div class="question-option">
                            <span class="font-medium">B.</span>
                            <span data-math="{{ $optionB }}">{{ $optionB }}</span>
                        </div>
                        @endif
                        @if($optionC)
                        <div class="question-option">
                            <span class="font-medium">C.</span>
                            <span data-math="{{ $optionC }}">{{ $optionC }}</span>
                        </div>
                        @endif
                        @if($optionD)
                        <div class="question-option">
                            <span class="font-medium">D.</span>
                            <span data-math="{{ $optionD }}">{{ $optionD }}</span>
                        </div>
                        @endif
                    </div>
                    @endif

                    <!-- 答案 -->
                    @if($answer)
                    <div class="question-answer">
                        <span class="font-medium text-green-700">答案：</span>
                        <span data-math="{{ $answer }}">{{ $answer }}</span>
                    </div>
                    @endif

                    <!-- 解析 -->
                    @if($solution)
                    <div class="question-solution">
                        <div class="font-medium text-gray-700 mb-2">解题思路：</div>
                        <div data-math="{{ $solution }}">{{ $solution }}</div>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- PDF 预览 -->
            @if($showPdfPreview || $pdfError)
            <div class="bg-white rounded-lg shadow">
                <div class="px-4 py-3 border-b border-gray-200 flex items-center gap-2">
                    <span class="text-green-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                    </span>
                    <h3 class="font-semibold text-gray-700">PDF 效果预览</h3>
                    @if($pdfUrl)
                    <a href="{{ $pdfUrl }}" target="_blank" class="ml-auto text-sm text-blue-600 hover:underline">
                        新窗口打开
                    </a>
                    @endif
                </div>
                <div class="p-4">
                    @if($pdfError)
                    <div class="text-red-600 bg-red-50 p-4 rounded">
                        <p class="font-medium">生成失败</p>
                        <p class="text-sm mt-1">{{ $pdfError }}</p>
                    </div>
                    @elseif($pdfUrl)
                    <iframe
                        src="{{ $pdfUrl }}"
                        class="w-full h-[600px] border border-gray-200 rounded"
                    ></iframe>
                    @endif
                </div>
            </div>
            @endif

            <!-- 使用提示 -->
            @if(!$showWebPreview && !$showPdfPreview && !$pdfError)
            <div class="bg-gray-50 rounded-lg p-6 text-center text-gray-500">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <p>在左侧输入题目内容</p>
                <p class="text-sm mt-1">点击预览按钮查看渲染效果</p>

                <div class="mt-4 text-left text-xs text-gray-400 bg-white p-3 rounded border">
                    <p class="font-medium mb-2">支持的 LaTeX 格式：</p>
                    <ul class="space-y-1">
                        <li><code class="bg-gray-100 px-1">$...$</code> 行内公式</li>
                        <li><code class="bg-gray-100 px-1">$$...$$</code> 块级公式</li>
                        <li><code class="bg-gray-100 px-1">\(...\)</code> 行内公式（会自动转换）</li>
                        <li><code class="bg-gray-100 px-1">\[...\]</code> 块级公式（会自动转换）</li>
                    </ul>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>