math_cms/resources/views/filament/resources/markdown-import-resource/pages/create-markdown-import.blade.php

<div class="ui-page">
    <div class="mx-auto flex max-w-5xl flex-col gap-6 px-4 py-8" x-data="{ step: 1 }">
        @include('filament.partials.page-header', [
            'kicker' => 'Markdown 导入',
            'title' => 'Step 1 · 上传与基础配置',
            'subtitle' => '上传 Markdown 文件或粘贴内容，系统将自动读取并创建导入记录。',
            'actions' => new \Illuminate\Support\HtmlString('<a class="btn btn-outline" href="' . route('filament.admin.resources.markdown-imports.index') . '">返回列表</a>'),
        ])

        <div class="ui-card">
            <div class="ui-card-body">
                <x-filament::form wire:submit="create">
                    {{ $this->form }}
                    <div class="mt-6 flex items-center justify-between">
                        <div class="text-xs text-slate-500">支持 md / txt / zip，单文件最大 10MB。</div>
                        <button type="submit" class="btn btn-primary">开始解析</button>
                    </div>
                </x-filament::form>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div class="ui-card">
                <div class="ui-card-header">
                    <div>
                        <div class="ui-section-title">Step 2 · 结构识别与预览</div>
                        <div class="ui-subtitle">创建记录后进入校对页面查看解析结果</div>
                    </div>
                </div>
                <div class="ui-card-body text-sm text-slate-500">
                    完成上传后，在导入列表中点击「进入校对」即可查看树状结构与题目预览。
                </div>
            </div>
            <div class="ui-card">
                <div class="ui-card-header">
                    <div>
                        <div class="ui-section-title">Step 3 · 审核入库</div>
                        <div class="ui-subtitle">批量确认题目后一键入库</div>
                    </div>
                </div>
                <div class="ui-card-body text-sm text-slate-500">
                    校对完成后使用批量操作「入库到筛选库」，系统会生成完成报告。
                </div>
            </div>
        </div>
    </div>
    @include('filament.partials.loading-overlay')
</div>