math_cms/resources/views/filament/pages/api-catalog.blade.php

<x-filament::page>
    <div class="space-y-6">
        <x-filament::section>
            <div class="text-base font-semibold text-slate-800">试卷 JSON 输出案例</div>
            <div class="mt-2 text-xs text-slate-500">输入卷子 ID，返回与智能出卷 API 中 `exam_content` 完全一致的 JSON，可预览或导出。</div>
            <div class="mt-4 space-y-3">
                <div class="flex flex-wrap items-center gap-3">
                    <input
                        id="paper-json-id"
                        type="text"
                        class="w-80 rounded-lg border border-slate-200 px-3 py-2 text-sm"
                        value="paper_1765788931_ce02f6a3"
                        placeholder="请输入 paper_id"
                    />
                    <button
                        type="button"
                        class="rounded-lg bg-primary-600 px-3 py-2 text-sm font-semibold text-white"
                        onclick="loadPaperJson()"
                    >
                        获取 JSON
                    </button>
                    <button
                        type="button"
                        class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-700"
                        onclick="downloadPaperJson()"
                    >
                        导出 JSON
                    </button>
                </div>
                <pre id="paper-json-output" class="max-h-96 overflow-auto rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-700">等待输入 paper_id ...</pre>
            </div>
        </x-filament::section>

        @foreach ($apiGroups as $group)
            <x-filament::section>
                <div class="text-base font-semibold text-slate-800">{{ $group['name'] }}</div>
                <div class="mt-2 text-xs text-slate-500">自动从 routes/api.php 生成。</div>
                <div class="mt-4 space-y-3">
                    @foreach ($group['items'] as $item)
                        <details class="rounded-lg border border-slate-200 bg-white p-4">
                            <summary class="flex cursor-pointer list-none flex-wrap items-center gap-3">
                                <span class="text-xs font-semibold uppercase text-slate-500">{{ $item['method'] }}</span>
                                <span class="font-mono text-sm text-slate-800">{{ $item['path'] }}</span>
                                @if (!empty($item['tag']))
                                    <span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-700">
                                        {{ $item['tag'] }}
                                    </span>
                                @endif
                                <span class="ml-auto text-xs text-slate-400">点击展开</span>
                            </summary>
                            <div class="mt-3 space-y-2 text-sm text-slate-600">
                                <div>
                                    <span class="font-semibold">参数：</span>{{ $item['params'] }}
                                </div>
                                <div>
                                    <span class="font-semibold">响应：</span>{{ $item['response'] }}
                                </div>
                                @if (!empty($item['details']['description']))
                                    <div>
                                        <span class="font-semibold">说明：</span>{{ $item['details']['description'] }}
                                    </div>
                                @endif
                                @if (!empty($item['details']['route_name']))
                                    <div>
                                        <span class="font-semibold">路由名：</span>{{ $item['details']['route_name'] }}
                                    </div>
                                @endif
                                @if (!empty($item['details']['action']))
                                    <div>
                                        <span class="font-semibold">Action：</span>{{ $item['details']['action'] }}
                                    </div>
                                @endif
                                @if (!empty($item['details']['examples']))
                                    <div>
                                        <span class="font-semibold">示例：</span>
                                        <pre class="mt-1 rounded bg-slate-50 p-2 text-xs text-slate-700">{{ implode("\n", $item['details']['examples']) }}</pre>
                                    </div>
                                @endif
                            </div>
                        </details>
                    @endforeach
                </div>
            </x-filament::section>
        @endforeach
    </div>

    <script>
        async function loadPaperJson() {
            const input = document.getElementById('paper-json-id');
            const output = document.getElementById('paper-json-output');
            const paperId = (input?.value || '').trim();
            if (!paperId) {
                output.textContent = '请输入 paper_id';
                return;
            }
            output.textContent = '加载中...';
            try {
                const response = await fetch(`/api/papers/${encodeURIComponent(paperId)}/json`);
                const data = await response.json();
                output.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                output.textContent = `请求失败: ${error}`;
            }
        }

        function downloadPaperJson() {
            const input = document.getElementById('paper-json-id');
            const paperId = (input?.value || '').trim();
            if (!paperId) {
                return;
            }
            window.location.href = `/api/papers/${encodeURIComponent(paperId)}/json?download=1`;
        }
    </script>
</x-filament::page>