89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
'use client'
|
||
|
||
import Image from 'next/image'
|
||
|
||
interface ModelImagesUploadProps {
|
||
modelImageUrls: string[]
|
||
onModelImagesChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||
onRemoveModelImage: (index: number) => void
|
||
}
|
||
|
||
export default function ModelImagesUpload({
|
||
modelImageUrls,
|
||
onModelImagesChange,
|
||
onRemoveModelImage,
|
||
}: ModelImagesUploadProps) {
|
||
return (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
模特展示图片 * （可上传多张）
|
||
</label>
|
||
<div className="border-2 border-dashed rounded-apple p-4 border-gray-300 dark:border-gray-600">
|
||
{/* 已上传的图片预览 */}
|
||
{modelImageUrls.length > 0 && (
|
||
<div className="grid grid-cols-4 gap-4 mb-4">
|
||
{modelImageUrls.map((url, index) => (
|
||
<div key={index} className="relative group">
|
||
<div className="relative w-full h-32 rounded-apple overflow-hidden border-2 border-gray-200 dark:border-gray-600">
|
||
<Image
|
||
src={url}
|
||
alt={`模特图 ${index + 1}`}
|
||
fill
|
||
unoptimized
|
||
className="object-cover"
|
||
/>
|
||
{index === 0 && (
|
||
<div className="absolute top-1 left-1 bg-blue-500 text-white text-xs px-2 py-1 rounded">
|
||
预览图
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => onRemoveModelImage(index)}
|
||
className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 上传按钮 */}
|
||
<div className="flex items-center space-x-4">
|
||
<div className="w-32 h-32 rounded-apple bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
|
||
<svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
</div>
|
||
<div className="flex-1">
|
||
<input
|
||
type="file"
|
||
onChange={onModelImagesChange}
|
||
accept="image/*"
|
||
multiple
|
||
className="hidden"
|
||
id="modelImagesInput"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => document.getElementById('modelImagesInput')?.click()}
|
||
className="btn-secondary"
|
||
>
|
||
{modelImageUrls.length > 0 ? '继续添加图片' : '选择图片'}
|
||
</button>
|
||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||
可一次选择多张图片上传
|
||
</p>
|
||
<p className="text-xs text-blue-600 dark:text-blue-400 mt-1">
|
||
💡 第一张图会自动作为预览图，高度超过1500px会自动切割
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|