150 lines
6.4 KiB
TypeScript
150 lines
6.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { TaobaoDetailSummary } from '@/lib/taobao-detail-plus'
|
|
import { exportTaobaoImagesToExcel } from '@/lib/excel-export'
|
|
|
|
interface TaobaoImageGalleryModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
result: TaobaoDetailSummary
|
|
}
|
|
|
|
export default function TaobaoImageGalleryModal({
|
|
isOpen,
|
|
onClose,
|
|
result
|
|
}: TaobaoImageGalleryModalProps) {
|
|
const [isExporting, setIsExporting] = useState(false)
|
|
|
|
if (!isOpen) return null
|
|
|
|
const handleExport = async () => {
|
|
try {
|
|
setIsExporting(true)
|
|
const groups = [
|
|
{ name: '主图', urls: result.allItemImages },
|
|
{ name: 'SKU图', urls: result.skuImages },
|
|
{ name: '详情图', urls: result.descImages }
|
|
]
|
|
await exportTaobaoImagesToExcel(result.title, result.itemId, groups)
|
|
} catch (error) {
|
|
console.error('导出失败:', error)
|
|
alert('导出失败，请重试')
|
|
} finally {
|
|
setIsExporting(false)
|
|
}
|
|
}
|
|
|
|
const ImageSection = ({ title, images }: { title: string; images: string[] }) => {
|
|
if (!images || images.length === 0) return null
|
|
return (
|
|
<div className="mb-8">
|
|
<h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900 dark:text-gray-100">
|
|
<span className="h-4 w-1 rounded-full bg-blue-500"></span>
|
|
{title}
|
|
<span className="ml-2 text-sm font-normal text-gray-500">{images.length} 张</span>
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
|
{images.map((url, index) => (
|
|
<div
|
|
key={index}
|
|
className="group relative aspect-square overflow-hidden rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={url}
|
|
alt={`${title}-${index}`}
|
|
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover:bg-black/20">
|
|
<a
|
|
href={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full bg-white/90 p-2 opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:bg-gray-900/90"
|
|
>
|
|
<svg className="h-5 w-5 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal Content */}
|
|
<div className="relative flex h-full max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-2xl transition-all dark:border-gray-800 dark:bg-gray-900">
|
|
{/* Header */}
|
|
<div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-100 bg-white/80 px-6 py-4 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/80">
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="truncate text-xl font-bold text-gray-900 dark:text-gray-100">
|
|
{result.title}
|
|
</h2>
|
|
<p className="mt-1 text-xs text-gray-500">商品ID: {result.itemId} · 获取全量图片预览</p>
|
|
</div>
|
|
|
|
<div className="ml-4 flex items-center gap-3">
|
|
<button
|
|
onClick={handleExport}
|
|
disabled={isExporting}
|
|
className="flex items-center gap-2 rounded-full bg-blue-600 px-5 py-2 text-sm font-semibold text-white transition-all hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/30 disabled:opacity-50"
|
|
>
|
|
{isExporting ? (
|
|
<>
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
|
<span>正在导出...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
<span>导出为 Excel</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-full bg-gray-100 p-2 text-gray-500 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
|
|
>
|
|
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-800">
|
|
<ImageSection title="主图" images={result.allItemImages} />
|
|
<ImageSection title="SKU图" images={result.skuImages} />
|
|
<ImageSection title="详情图" images={result.descImages} />
|
|
|
|
{(!result.allItemImages?.length && !result.skuImages?.length && !result.descImages?.length) && (
|
|
<div className="flex h-64 flex-col items-center justify-center text-gray-400">
|
|
<svg className="mb-4 h-16 w-16 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<p>未发现可展示的图片</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|