372 lines
13 KiB
TypeScript
372 lines
13 KiB
TypeScript
'use client'
|
||
|
||
import { useMemo, useRef, useState } from 'react'
|
||
import { CERTIFICATE_REPORT_MATERIAL_TYPE, detectFileKindFromName } from '@/lib/certificate-report'
|
||
|
||
interface CategoryItem {
|
||
id: string
|
||
name: string
|
||
}
|
||
|
||
interface CertificateReportUploaderProps {
|
||
onSuccess: () => void
|
||
onCancel: () => void
|
||
productCategories: CategoryItem[]
|
||
}
|
||
|
||
interface ReportFileItem {
|
||
file: File
|
||
previewUrl?: string
|
||
sortOrder: number
|
||
fileKind: 'pdf' | 'image'
|
||
}
|
||
|
||
export default function CertificateReportUploader({
|
||
onSuccess,
|
||
onCancel,
|
||
productCategories,
|
||
}: CertificateReportUploaderProps) {
|
||
const [productModel, setProductModel] = useState('')
|
||
const [reportTitle, setReportTitle] = useState('')
|
||
const [productCategoryName, setProductCategoryName] = useState('')
|
||
const [platformName, setPlatformName] = useState('')
|
||
const [files, setFiles] = useState<ReportFileItem[]>([])
|
||
const [uploading, setUploading] = useState(false)
|
||
const [uploadProgress, setUploadProgress] = useState(0)
|
||
const [processingStep, setProcessingStep] = useState('')
|
||
const [error, setError] = useState('')
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
const totalSizeText = useMemo(() => {
|
||
const totalBytes = files.reduce((sum, item) => sum + item.file.size, 0)
|
||
if (totalBytes <= 0) return '0 B'
|
||
const units = ['B', 'KB', 'MB', 'GB']
|
||
const unitIndex = Math.floor(Math.log(totalBytes) / Math.log(1024))
|
||
return `${(totalBytes / Math.pow(1024, unitIndex)).toFixed(2)} ${units[unitIndex]}`
|
||
}, [files])
|
||
|
||
const handleFileSelect = (selectedFiles: FileList | null) => {
|
||
if (!selectedFiles || selectedFiles.length === 0) {
|
||
return
|
||
}
|
||
|
||
const currentLength = files.length
|
||
const nextFiles: ReportFileItem[] = []
|
||
|
||
for (let index = 0; index < selectedFiles.length; index += 1) {
|
||
const file = selectedFiles[index]
|
||
const fileKind = detectFileKindFromName(file.name)
|
||
const isPdf = fileKind === 'pdf'
|
||
const isImage = file.type.startsWith('image/')
|
||
|
||
if (!isPdf && !isImage) {
|
||
continue
|
||
}
|
||
|
||
nextFiles.push({
|
||
file,
|
||
previewUrl: isImage ? URL.createObjectURL(file) : undefined,
|
||
sortOrder: currentLength + nextFiles.length,
|
||
fileKind,
|
||
})
|
||
}
|
||
|
||
if (nextFiles.length === 0) {
|
||
setError('请选择 PDF 或图片文件')
|
||
if (fileInputRef.current) {
|
||
fileInputRef.current.value = ''
|
||
}
|
||
return
|
||
}
|
||
|
||
setFiles((prev) => [...prev, ...nextFiles])
|
||
setError('')
|
||
|
||
if (fileInputRef.current) {
|
||
fileInputRef.current.value = ''
|
||
}
|
||
}
|
||
|
||
const removeFile = (index: number) => {
|
||
setFiles((prev) => {
|
||
const target = prev[index]
|
||
if (target?.previewUrl) {
|
||
URL.revokeObjectURL(target.previewUrl)
|
||
}
|
||
|
||
return prev
|
||
.filter((_, currentIndex) => currentIndex !== index)
|
||
.map((item, currentIndex) => ({
|
||
...item,
|
||
sortOrder: currentIndex,
|
||
}))
|
||
})
|
||
}
|
||
|
||
const handleSubmit = async () => {
|
||
if (!productModel.trim() && !reportTitle.trim()) {
|
||
setError('SPU 和 报告名称/检测对象 至少填写一个')
|
||
return
|
||
}
|
||
|
||
if (!productCategoryName.trim()) {
|
||
setError('请选择品类')
|
||
return
|
||
}
|
||
|
||
if (files.length === 0) {
|
||
setError('请至少上传一个 PDF 或图片文件')
|
||
return
|
||
}
|
||
|
||
setUploading(true)
|
||
setUploadProgress(0)
|
||
setProcessingStep('初始化上传...')
|
||
setError('')
|
||
|
||
try {
|
||
const initResponse = await fetch('/api/materials/upload/certificate-report/init', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
productModel: productModel.trim(),
|
||
reportTitle: reportTitle.trim(),
|
||
productCategoryName: productCategoryName.trim(),
|
||
platformName: platformName.trim(),
|
||
}),
|
||
})
|
||
|
||
if (!initResponse.ok) {
|
||
const errorData = await initResponse.json().catch(() => ({}))
|
||
throw new Error(errorData.error || '初始化失败')
|
||
}
|
||
|
||
const { materialId } = await initResponse.json()
|
||
const { chunkUpload } = await import('@/lib/chunk-upload')
|
||
const uploadedFiles: Array<{
|
||
uploadId: string
|
||
fileName: string
|
||
fileSize: number
|
||
sortOrder: number
|
||
fileKind: 'pdf' | 'image'
|
||
}> = []
|
||
|
||
setProcessingStep('上传文件中...')
|
||
|
||
for (let index = 0; index < files.length; index += 1) {
|
||
const current = files[index]
|
||
const result = await chunkUpload(
|
||
current.file,
|
||
{
|
||
materialType: CERTIFICATE_REPORT_MATERIAL_TYPE,
|
||
fileName: current.file.name,
|
||
},
|
||
{
|
||
skipComplete: true,
|
||
onProgress: (progress) => {
|
||
const fileProgress = (index + progress / 100) / files.length
|
||
const totalProgress = 10 + fileProgress * 70
|
||
setUploadProgress(Math.round(totalProgress))
|
||
},
|
||
},
|
||
)
|
||
|
||
uploadedFiles.push({
|
||
uploadId: result.uploadId,
|
||
fileName: current.file.name,
|
||
fileSize: current.file.size,
|
||
sortOrder: current.sortOrder,
|
||
fileKind: current.fileKind,
|
||
})
|
||
}
|
||
|
||
setUploadProgress(82)
|
||
setProcessingStep('生成分享内容...')
|
||
|
||
const completeResponse = await fetch('/api/materials/upload/certificate-report/complete', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
materialId,
|
||
files: uploadedFiles,
|
||
}),
|
||
})
|
||
|
||
if (!completeResponse.ok) {
|
||
const errorData = await completeResponse.json().catch(() => ({}))
|
||
throw new Error(errorData.error || '完成上传失败')
|
||
}
|
||
|
||
setUploadProgress(100)
|
||
setProcessingStep('完成')
|
||
|
||
files.forEach((item) => {
|
||
if (item.previewUrl) {
|
||
URL.revokeObjectURL(item.previewUrl)
|
||
}
|
||
})
|
||
|
||
setTimeout(() => {
|
||
onSuccess()
|
||
}, 300)
|
||
} catch (submitError) {
|
||
console.error('[Certificate Report Upload]', submitError)
|
||
setError(submitError instanceof Error ? submitError.message : '上传失败，请稍后再试')
|
||
setProcessingStep('')
|
||
setUploading(false)
|
||
return
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-200">
|
||
表格里只需要放分享链接。对方点击后，会在分享页里看到这组检测报告的 PDF 和图片内容。
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||
<div>
|
||
<label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">SPU</label>
|
||
<input
|
||
type="text"
|
||
value={productModel}
|
||
onChange={(event) => setProductModel(event.target.value)}
|
||
placeholder="没有 SPU 可以留空"
|
||
className="input-apple"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
报告名称 / 检测对象
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={reportTitle}
|
||
onChange={(event) => setReportTitle(event.target.value)}
|
||
placeholder="例如：E0级颗粒板检测报告"
|
||
className="input-apple"
|
||
/>
|
||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">SPU 和这个字段至少填写一个</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||
<div>
|
||
<label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">品类 *</label>
|
||
<select
|
||
value={productCategoryName}
|
||
onChange={(event) => setProductCategoryName(event.target.value)}
|
||
className="input-apple"
|
||
>
|
||
<option value="">请选择品类</option>
|
||
{productCategories.map((category) => (
|
||
<option key={category.id} value={category.name}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">平台分类</label>
|
||
<input
|
||
type="text"
|
||
value={platformName}
|
||
onChange={(event) => setPlatformName(event.target.value)}
|
||
placeholder="可选"
|
||
className="input-apple"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
报告文件 *
|
||
</label>
|
||
<div className="rounded-apple border-2 border-dashed border-gray-300 p-6 text-center dark:border-gray-600">
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
multiple
|
||
accept=".pdf,image/*"
|
||
onChange={(event) => handleFileSelect(event.target.files)}
|
||
className="hidden"
|
||
/>
|
||
<button type="button" onClick={() => fileInputRef.current?.click()} className="btn-secondary">
|
||
选择 PDF / 图片
|
||
</button>
|
||
<p className="mt-3 text-sm text-gray-500 dark:text-gray-400">
|
||
可以混合上传多份 PDF 和多张图片，分享时会按这里的顺序展示
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{files.length > 0 && (
|
||
<div className="rounded-apple border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
|
||
<div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
|
||
<div className="text-sm font-medium text-gray-700 dark:text-gray-200">文件列表</div>
|
||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||
{files.length} 个文件 · {totalSizeText}
|
||
</div>
|
||
</div>
|
||
<div className="divide-y divide-gray-100 dark:divide-gray-700">
|
||
{files.map((item, index) => (
|
||
<div key={`${item.file.name}-${index}`} className="flex items-center gap-4 px-4 py-3">
|
||
<div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-700">
|
||
{item.fileKind === 'image' && item.previewUrl ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img src={item.previewUrl} alt="" className="h-full w-full object-cover" />
|
||
) : (
|
||
<span className="text-xs font-semibold text-red-500">PDF</span>
|
||
)}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{item.file.name}</div>
|
||
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||
{item.fileKind === 'pdf' ? 'PDF 报告' : '图片附件'} · {(item.file.size / 1024 / 1024).toFixed(2)} MB
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeFile(index)}
|
||
className="rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 dark:hover:bg-red-900/20"
|
||
>
|
||
删除
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{uploading && (
|
||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
|
||
<div className="mb-2 flex items-center justify-between text-sm">
|
||
<span className="text-gray-700 dark:text-gray-200">{processingStep || '上传中...'}</span>
|
||
<span className="text-gray-500 dark:text-gray-400">{uploadProgress}%</span>
|
||
</div>
|
||
<div className="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
|
||
<div className="h-full bg-blue-600 transition-all" style={{ width: `${uploadProgress}%` }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center justify-end gap-3">
|
||
<button type="button" onClick={onCancel} className="btn-secondary" disabled={uploading}>
|
||
取消
|
||
</button>
|
||
<button type="button" onClick={handleSubmit} className="btn-primary" disabled={uploading}>
|
||
{uploading ? '上传中...' : '创建分享素材'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|