564 lines
17 KiB
TypeScript
564 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useRef, useEffect, useMemo } from 'react'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Textarea } from '@/components/ui/textarea'
|
||
import { Spinner } from '@/components/ui/spinner'
|
||
import { FolderOpen, Trash2, CheckCircle2, XCircle, AlertTriangle } from 'lucide-react'
|
||
import Image from 'next/image'
|
||
import { uploadToCos } from '@/lib/cos-client'
|
||
import { apiFetch } from '@/lib/api'
|
||
|
||
interface BatchImportDialogProps {
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
onSuccess: () => void
|
||
}
|
||
|
||
type ItemStatus = 'pending' | 'uploading' | 'creating' | 'done' | 'error'
|
||
|
||
interface ParsedItem {
|
||
id: string // riddle_id 或文件夹名，仅用于 React key
|
||
folderName: string
|
||
// 本地文件引用
|
||
referenceFile?: File
|
||
riddleFile?: File
|
||
// 预览 URL（本地 blob URL）
|
||
referencePreview?: string
|
||
riddlePreview?: string
|
||
// 从 metadata.json 提取
|
||
anchorText: string
|
||
answer: string
|
||
punchline: string
|
||
hint1: string
|
||
hint2: string
|
||
hint3: string
|
||
// 解析警告/错误信息
|
||
parseError?: string
|
||
// 上传/创建过程状态
|
||
status: ItemStatus
|
||
statusMessage?: string
|
||
}
|
||
|
||
interface FileWithPath extends File {
|
||
webkitRelativePath: string
|
||
}
|
||
|
||
interface RiddleMetadata {
|
||
plan?: {
|
||
riddle_id?: string
|
||
anchor_text?: string
|
||
answer?: string
|
||
hints?: string[]
|
||
riddle?: {
|
||
homophone_explanation?: string
|
||
}
|
||
}
|
||
}
|
||
|
||
function truncate(s: string | undefined, max: number): string {
|
||
if (!s) return ''
|
||
return s.length > max ? s.slice(0, max) : s
|
||
}
|
||
|
||
async function parseFolders(files: FileList): Promise<ParsedItem[]> {
|
||
// 按第一层目录名分组
|
||
const groups = new Map<string, FileWithPath[]>()
|
||
for (let i = 0; i < files.length; i += 1) {
|
||
const f = files[i] as FileWithPath
|
||
const rel = f.webkitRelativePath
|
||
if (!rel) continue
|
||
const parts = rel.split('/')
|
||
if (parts.length < 2) continue
|
||
// 用倒数第二层作为关卡目录名：e.g. riddles/68f1.../metadata.json
|
||
// 但通常用户选的根目录就是 riddles，第一层就是关卡目录
|
||
// 我们取「包含 metadata.json 的那个目录」作为分组 key
|
||
const folderKey = parts.slice(0, -1).join('/')
|
||
if (!groups.has(folderKey)) groups.set(folderKey, [])
|
||
groups.get(folderKey)!.push(f)
|
||
}
|
||
|
||
const items: ParsedItem[] = []
|
||
|
||
for (const [folderKey, groupFiles] of Array.from(groups.entries())) {
|
||
const metadata = groupFiles.find((f) => f.name === 'metadata.json')
|
||
const reference = groupFiles.find((f) => f.name === 'reference.webp')
|
||
const riddle = groupFiles.find((f) => f.name === 'riddle.webp')
|
||
// 只有同时存在 metadata.json + reference.webp + riddle.webp 的目录才视为关卡
|
||
if (!metadata || !reference || !riddle) continue
|
||
|
||
const folderName = folderKey.split('/').pop() || folderKey
|
||
|
||
const item: ParsedItem = {
|
||
id: folderKey,
|
||
folderName,
|
||
referenceFile: reference,
|
||
riddleFile: riddle,
|
||
referencePreview: URL.createObjectURL(reference),
|
||
riddlePreview: URL.createObjectURL(riddle),
|
||
anchorText: '',
|
||
answer: '',
|
||
punchline: '',
|
||
hint1: '',
|
||
hint2: '',
|
||
hint3: '',
|
||
status: 'pending',
|
||
}
|
||
|
||
try {
|
||
const text = await metadata.text()
|
||
const json = JSON.parse(text) as RiddleMetadata
|
||
const plan = json.plan || {}
|
||
item.anchorText = truncate(plan.anchor_text, 500)
|
||
item.answer = (plan.answer || '').trim()
|
||
item.punchline = (plan.riddle?.homophone_explanation || '').trim()
|
||
const hints = Array.isArray(plan.hints) ? plan.hints : []
|
||
item.hint1 = (hints[0] || '').trim()
|
||
item.hint2 = (hints[1] || '').trim()
|
||
item.hint3 = (hints[2] || '').trim()
|
||
|
||
if (!item.answer) {
|
||
item.parseError = '未解析到 answer'
|
||
} else if (item.answer.length > 4) {
|
||
item.parseError = `答案超过 4 字（${item.answer.length}）`
|
||
}
|
||
} catch (e) {
|
||
item.parseError = `解析 metadata.json 失败: ${
|
||
e instanceof Error ? e.message : String(e)
|
||
}`
|
||
}
|
||
|
||
items.push(item)
|
||
}
|
||
|
||
// 稳定排序：按文件夹名
|
||
items.sort((a, b) => a.folderName.localeCompare(b.folderName))
|
||
return items
|
||
}
|
||
|
||
export function BatchImportDialog({
|
||
open,
|
||
onOpenChange,
|
||
onSuccess,
|
||
}: BatchImportDialogProps) {
|
||
const folderInputRef = useRef<HTMLInputElement>(null)
|
||
const [items, setItems] = useState<ParsedItem[]>([])
|
||
const [isParsing, setIsParsing] = useState(false)
|
||
const [isRunning, setIsRunning] = useState(false)
|
||
const [globalError, setGlobalError] = useState('')
|
||
|
||
// 关闭后清理预览 URL 并重置
|
||
useEffect(() => {
|
||
if (!open) {
|
||
items.forEach((it) => {
|
||
if (it.referencePreview) URL.revokeObjectURL(it.referencePreview)
|
||
if (it.riddlePreview) URL.revokeObjectURL(it.riddlePreview)
|
||
})
|
||
setItems([])
|
||
setGlobalError('')
|
||
setIsRunning(false)
|
||
setIsParsing(false)
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [open])
|
||
|
||
const stats = useMemo(() => {
|
||
const total = items.length
|
||
const done = items.filter((i) => i.status === 'done').length
|
||
const error = items.filter((i) => i.status === 'error').length
|
||
const invalid = items.filter((i) => i.parseError).length
|
||
return { total, done, error, invalid }
|
||
}, [items])
|
||
|
||
const canSubmit =
|
||
items.length > 0 &&
|
||
!isRunning &&
|
||
items.some((i) => i.status !== 'done' && !i.parseError)
|
||
|
||
const handleSelectFolder = () => {
|
||
folderInputRef.current?.click()
|
||
}
|
||
|
||
const handleFolderChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = e.target.files
|
||
if (!files || files.length === 0) return
|
||
setIsParsing(true)
|
||
setGlobalError('')
|
||
try {
|
||
const parsed = await parseFolders(files)
|
||
if (parsed.length === 0) {
|
||
setGlobalError(
|
||
'未在所选目录中找到任何有效关卡。请确保每个子目录同时包含 metadata.json、reference.webp、riddle.webp'
|
||
)
|
||
}
|
||
setItems(parsed)
|
||
} catch (err) {
|
||
setGlobalError(
|
||
err instanceof Error ? err.message : '解析失败'
|
||
)
|
||
} finally {
|
||
setIsParsing(false)
|
||
// 允许重新选择同一目录
|
||
if (folderInputRef.current) folderInputRef.current.value = ''
|
||
}
|
||
}
|
||
|
||
const updateItem = (id: string, patch: Partial<ParsedItem>) => {
|
||
setItems((prev) =>
|
||
prev.map((it) => {
|
||
if (it.id !== id) return it
|
||
const next = { ...it, ...patch }
|
||
// 每次编辑后重新评估答案的校验
|
||
if (patch.answer !== undefined) {
|
||
if (!next.answer) next.parseError = '未填写答案'
|
||
else if (next.answer.length > 4)
|
||
next.parseError = `答案超过 4 字（${next.answer.length}）`
|
||
else next.parseError = undefined
|
||
}
|
||
return next
|
||
})
|
||
)
|
||
}
|
||
|
||
const removeItem = (id: string) => {
|
||
setItems((prev) => {
|
||
const target = prev.find((i) => i.id === id)
|
||
if (target) {
|
||
if (target.referencePreview) URL.revokeObjectURL(target.referencePreview)
|
||
if (target.riddlePreview) URL.revokeObjectURL(target.riddlePreview)
|
||
}
|
||
return prev.filter((i) => i.id !== id)
|
||
})
|
||
}
|
||
|
||
const handleRun = async () => {
|
||
setIsRunning(true)
|
||
setGlobalError('')
|
||
|
||
// 使用函数式 setItems 取到最新列表
|
||
const snapshot = items
|
||
for (const it of snapshot) {
|
||
if (it.status === 'done') continue
|
||
if (it.parseError) continue
|
||
if (!it.referenceFile || !it.riddleFile) continue
|
||
|
||
try {
|
||
updateItem(it.id, { status: 'uploading', statusMessage: '上传图片…' })
|
||
|
||
const [image1Url, image2Url] = await Promise.all([
|
||
uploadToCos(it.referenceFile, it.referenceFile.name),
|
||
uploadToCos(it.riddleFile, it.riddleFile.name),
|
||
])
|
||
|
||
updateItem(it.id, { status: 'creating', statusMessage: '创建关卡…' })
|
||
|
||
const payload = {
|
||
image1Url,
|
||
image1Description: it.anchorText || '',
|
||
image2Url,
|
||
image2Description: '',
|
||
answer: it.answer,
|
||
punchline: it.punchline || '',
|
||
hint1: it.hint1 || '',
|
||
hint2: it.hint2 || '',
|
||
hint3: it.hint3 || '',
|
||
}
|
||
|
||
const res = await apiFetch('/api/levels', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
if (!res.ok) {
|
||
const err = await res.json().catch(() => ({}))
|
||
throw new Error(err.error || `HTTP ${res.status}`)
|
||
}
|
||
updateItem(it.id, { status: 'done', statusMessage: '已创建' })
|
||
} catch (e) {
|
||
updateItem(it.id, {
|
||
status: 'error',
|
||
statusMessage: e instanceof Error ? e.message : '失败',
|
||
})
|
||
}
|
||
}
|
||
|
||
setIsRunning(false)
|
||
// 触发列表刷新
|
||
onSuccess()
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
|
||
<DialogHeader>
|
||
<DialogTitle>批量导入关卡</DialogTitle>
|
||
<DialogDescription>
|
||
选择包含多个关卡子文件夹的目录。每个子文件夹须含 metadata.json、
|
||
reference.webp、riddle.webp。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{globalError && (
|
||
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
|
||
{globalError}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-3">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={handleSelectFolder}
|
||
disabled={isParsing || isRunning}
|
||
>
|
||
<FolderOpen className="h-4 w-4 mr-2" />
|
||
{items.length > 0 ? '重新选择目录' : '选择目录'}
|
||
</Button>
|
||
{isParsing && (
|
||
<span className="flex items-center gap-2 text-sm text-muted-foreground">
|
||
<Spinner size="sm" /> 解析中…
|
||
</span>
|
||
)}
|
||
{items.length > 0 && (
|
||
<span className="text-sm text-muted-foreground">
|
||
共 {stats.total} 个关卡 · 成功 {stats.done} · 失败 {stats.error}
|
||
{stats.invalid > 0 && ` · 待修正 ${stats.invalid}`}
|
||
</span>
|
||
)}
|
||
|
||
{/* 隐藏的文件夹选择 input：webkitdirectory 让浏览器选择目录 */}
|
||
<input
|
||
ref={folderInputRef}
|
||
type="file"
|
||
className="hidden"
|
||
multiple
|
||
onChange={handleFolderChange}
|
||
{...({
|
||
webkitdirectory: '',
|
||
directory: '',
|
||
} as Record<string, string>)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto -mx-6 px-6">
|
||
{items.length === 0 ? (
|
||
<div className="text-center py-16 text-muted-foreground text-sm">
|
||
{isParsing ? '解析中…' : '尚未选择目录'}
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{items.map((it, idx) => (
|
||
<ItemCard
|
||
key={it.id}
|
||
index={idx + 1}
|
||
item={it}
|
||
disabled={isRunning}
|
||
onChange={(patch) => updateItem(it.id, patch)}
|
||
onRemove={() => removeItem(it.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => onOpenChange(false)}
|
||
disabled={isRunning}
|
||
>
|
||
{stats.done > 0 ? '关闭' : '取消'}
|
||
</Button>
|
||
<Button type="button" onClick={handleRun} disabled={!canSubmit}>
|
||
{isRunning ? (
|
||
<>
|
||
<Spinner size="sm" className="mr-2" />
|
||
创建中…
|
||
</>
|
||
) : (
|
||
`确认创建 (${items.filter((i) => i.status !== 'done' && !i.parseError).length})`
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|
||
|
||
interface ItemCardProps {
|
||
index: number
|
||
item: ParsedItem
|
||
disabled: boolean
|
||
onChange: (patch: Partial<ParsedItem>) => void
|
||
onRemove: () => void
|
||
}
|
||
|
||
function ItemCard({ index, item, disabled, onChange, onRemove }: ItemCardProps) {
|
||
const statusNode = (() => {
|
||
switch (item.status) {
|
||
case 'uploading':
|
||
case 'creating':
|
||
return (
|
||
<span className="flex items-center gap-1 text-blue-600 text-xs">
|
||
<Spinner size="sm" /> {item.statusMessage}
|
||
</span>
|
||
)
|
||
case 'done':
|
||
return (
|
||
<span className="flex items-center gap-1 text-green-600 text-xs">
|
||
<CheckCircle2 className="h-4 w-4" /> 已创建
|
||
</span>
|
||
)
|
||
case 'error':
|
||
return (
|
||
<span className="flex items-center gap-1 text-red-600 text-xs">
|
||
<XCircle className="h-4 w-4" /> {item.statusMessage}
|
||
</span>
|
||
)
|
||
default:
|
||
if (item.parseError) {
|
||
return (
|
||
<span className="flex items-center gap-1 text-amber-600 text-xs">
|
||
<AlertTriangle className="h-4 w-4" /> {item.parseError}
|
||
</span>
|
||
)
|
||
}
|
||
return (
|
||
<span className="text-muted-foreground text-xs">待创建</span>
|
||
)
|
||
}
|
||
})()
|
||
|
||
return (
|
||
<div className="border rounded-lg p-4 space-y-3 bg-card">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-3 min-w-0">
|
||
<span className="text-sm font-medium text-muted-foreground">
|
||
#{index}
|
||
</span>
|
||
<span className="text-sm truncate" title={item.folderName}>
|
||
{item.folderName}
|
||
</span>
|
||
{statusNode}
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8 text-red-600 hover:bg-red-50"
|
||
onClick={onRemove}
|
||
disabled={disabled || item.status === 'done'}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-[auto,1fr] gap-4">
|
||
{/* 左侧：图片预览 */}
|
||
<div className="flex gap-2">
|
||
<div className="space-y-1">
|
||
<div className="relative w-32 h-32 rounded border bg-gray-50 overflow-hidden">
|
||
{item.referencePreview && (
|
||
<Image
|
||
src={item.referencePreview}
|
||
alt="图片1"
|
||
fill
|
||
className="object-contain"
|
||
sizes="128px"
|
||
unoptimized
|
||
/>
|
||
)}
|
||
</div>
|
||
<p className="text-[11px] text-center text-muted-foreground">图1 · reference</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="relative w-32 h-32 rounded border bg-gray-50 overflow-hidden">
|
||
{item.riddlePreview && (
|
||
<Image
|
||
src={item.riddlePreview}
|
||
alt="图片2"
|
||
fill
|
||
className="object-contain"
|
||
sizes="128px"
|
||
unoptimized
|
||
/>
|
||
)}
|
||
</div>
|
||
<p className="text-[11px] text-center text-muted-foreground">图2 · riddle</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右侧：可编辑字段 */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div className="col-span-2 space-y-1">
|
||
<Label className="text-xs">图片1 描述（anchor_text）</Label>
|
||
<Textarea
|
||
value={item.anchorText}
|
||
onChange={(e) => onChange({ anchorText: e.target.value })}
|
||
rows={2}
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">答案 *</Label>
|
||
<Input
|
||
value={item.answer}
|
||
onChange={(e) => onChange({ answer: e.target.value })}
|
||
maxLength={4}
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">谐音梗说明</Label>
|
||
<Input
|
||
value={item.punchline}
|
||
onChange={(e) => onChange({ punchline: e.target.value })}
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
|
||
<div className="col-span-2 grid grid-cols-3 gap-2">
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">提示 1</Label>
|
||
<Input
|
||
value={item.hint1}
|
||
onChange={(e) => onChange({ hint1: e.target.value })}
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">提示 2</Label>
|
||
<Input
|
||
value={item.hint2}
|
||
onChange={(e) => onChange({ hint2: e.target.value })}
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<Label className="text-xs">提示 3</Label>
|
||
<Input
|
||
value={item.hint3}
|
||
onChange={(e) => onChange({ hint3: e.target.value })}
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|