math_cms/resources/views/livewire/upload-exam-paper.blade.php

<div>
    <div class="space-y-6">
        <!-- 标题 -->
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-2">上传卷子照片</h2>
            <p class="text-sm text-gray-600">请选择老师和学生，然后上传卷子照片进行OCR识别</p>
        </div>

        <!-- 上传表单 -->
        <div class="bg-white shadow rounded-lg p-6">
            <form wire:submit="upload">
                <div class="space-y-6">
                    <!-- 老师选择 -->
                    <div>
                        <label for="selectedTeacherId" class="block text-sm font-medium text-gray-700 mb-2">
                            选择老师 <span class="text-red-500">*</span>
                        </label>
                        <select
                            wire:model.live="selectedTeacherId"
                            id="selectedTeacherId"
                            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                            required
                        >
                            <option value="">-- 请选择老师 --</option>
                            @foreach ($teachers as $teacher)
                                <option value="{{ $teacher['id'] }}">{{ $teacher['name'] }}</option>
                            @endforeach
                        </select>
                        @error('selectedTeacherId')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- 学生选择 -->
                    <div>
                        <label for="selectedStudentId" class="block text-sm font-medium text-gray-700 mb-2">
                            选择学生 <span class="text-red-500">*</span>
                        </label>
                        <select
                            wire:model.live="selectedStudentId"
                            id="selectedStudentId"
                            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                            required
                            @disabled(!$selectedTeacherId)
                        >
                            <option value="">-- 请选择学生 --</option>
                            @foreach ($students as $student)
                                <option value="{{ $student['id'] }}">{{ $student['name'] }}</option>
                            @endforeach
                        </select>
                        @error('selectedStudentId')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        @if ($selectedTeacherId && count($students) === 0)
                            <p class="mt-1 text-sm text-yellow-600">该老师下暂无学生</p>
                        @endif
                    </div>

                    <!-- 图片上传 -->
                    <div>
                        <label for="image" class="block text-sm font-medium text-gray-700 mb-2">
                            卷子照片 <span class="text-red-500">*</span>
                        </label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-gray-400 transition-colors">
                            <div class="space-y-1 text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="flex text-sm text-gray-600">
                                    <label for="image" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                        <span>点击上传</span>
                                        <input
                                            id="image"
                                            wire:model="image"
                                            type="file"
                                            class="sr-only"
                                            accept="image/*"
                                            required
                                        />
                                    </label>
                                    <p class="pl-1">或拖拽文件到此处</p>
                                </div>
                                <p class="text-xs text-gray-500">
                                    支持 JPG、PNG、WEBP 格式，文件大小不超过10MB
                                </p>
                            </div>
                        </div>
                        @error('image')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror

                        <!-- 图片预览 -->
                        @if ($image)
                            <div class="mt-4">
                                <p class="text-sm font-medium text-gray-700 mb-2">预览：</p>
                                <div class="border rounded-lg overflow-hidden">
                                    <img src="{{ $image->temporaryUrl() }}" alt="预览" class="max-w-full h-auto">
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- 上传进度 -->
                    @if ($isUploading)
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-700">上传中...</span>
                                <span class="text-gray-700">{{ $uploadProgress }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: {{ $uploadProgress }}%"></div>
                            </div>
                        </div>
                    @endif

                    <!-- 消息提示 -->
                    @if ($uploadError)
                        <div class="rounded-md bg-red-50 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-red-800">上传失败</h3>
                                    <p class="mt-1 text-sm text-red-700">{{ $uploadError }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($uploadSuccess)
                        <div class="rounded-md bg-green-50 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-green-800">上传成功</h3>
                                    <p class="mt-1 text-sm text-green-700">{{ $uploadMessage }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- 提交按钮 -->
                    <div class="flex justify-end">
                        <button
                            type="submit"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
                            wire:loading.attr="disabled"
                            @disabled($isUploading)
                        >
                            <svg wire:loading class="animate-spin -ml-1 mr-3 h-5 w-5 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 wire:loading.remove>上传并开始OCR识别</span>
                            <span wire:loading>上传中...</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 使用说明 -->
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">使用说明</h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <ul class="list-disc pl-5 space-y-1">
                            <li>请确保卷子照片清晰，光线充足</li>
                            <li>照片中的文字应该能够清楚辨认</li>
                            <li>支持标准答题卡和手写试卷</li>
                            <li>上传后系统将自动进行OCR识别和题目分割</li>
                            <li>识别完成后，您可以查看详细的识别结果</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>