1863 lines
76 KiB
TypeScript
1863 lines
76 KiB
TypeScript
/**
|
||
* UploadModal 组件
|
||
*
|
||
* 素材上传模态框组件
|
||
* 支持多种素材类型（3DMAX、PSD、AI、CAD、C4D、视频、材质、模特等）
|
||
* 支持预览图、展示图、ZIP文件上传
|
||
* 支持断点续传、拖拽上传等功能
|
||
* 使用三层架构样式系统，支持深浅色主题
|
||
*
|
||
* @created 2025-01-XX
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
|
||
import Image from 'next/image'
|
||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||
import Modal from '@/components/ui/Modal'
|
||
import { parseAudioFile, isAudioFile, AUDIO_ACCEPT_TYPES, type AudioMetadataBrowser } from '@/lib/audio-parser-browser'
|
||
import { filterVisibleFieldValues, getVisibleTemplateFields, hasFieldValue } from '@/lib/field-conditions'
|
||
|
||
interface UploadModalProps {
|
||
onClose: () => void
|
||
onSuccess: () => void
|
||
}
|
||
|
||
type MaterialKind = 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'
|
||
|
||
type UploadTemplateOption = {
|
||
id: string
|
||
name: string
|
||
description: string | null
|
||
materialType?: string
|
||
materialKind?: MaterialKind
|
||
fields: any[]
|
||
isBuiltin?: boolean
|
||
}
|
||
|
||
const normalizeMaterialKind = (value?: string | null): MaterialKind => {
|
||
if (!value) return 'IMAGE'
|
||
const upper = value.toUpperCase()
|
||
if (upper === 'VIDEO' || upper === 'OTHER' || upper === 'IMAGE' || upper === 'AUDIO') {
|
||
return upper as MaterialKind
|
||
}
|
||
return 'IMAGE'
|
||
}
|
||
|
||
export default function UploadModal({ onClose, onSuccess }: UploadModalProps) {
|
||
const styles = useThemeStyles()
|
||
const modalControlClass =
|
||
'w-full px-4 py-2.5 text-sm rounded-lg outline-none transition-colors border bg-white dark:bg-slate-800 text-slate-900 dark:text-white border-slate-300 dark:border-slate-700 focus-visible:ring-2 focus-visible:ring-slate-200 dark:focus-visible:ring-slate-700 focus-visible:border-slate-900 dark:focus-visible:border-slate-500 placeholder:text-slate-400 dark:placeholder:text-slate-500'
|
||
const requiredControlClass = 'bg-slate-50 dark:bg-slate-800 border-slate-400 dark:border-slate-600'
|
||
const uploadZoneClass = 'border border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-4 transition-colors hover:border-slate-400 dark:hover:border-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer'
|
||
const uploadTileClass = 'flex-shrink-0 rounded-lg border border-dashed border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400'
|
||
const [previewImages, setPreviewImages] = useState<File[]>([]) // 多预览图（最多5张）
|
||
const [previewUrls, setPreviewUrls] = useState<string[]>([]) // 多预览图预览URLs
|
||
const [displayImage, setDisplayImage] = useState<File | null>(null) // PSD展示图片
|
||
const [displayImageUrl, setDisplayImageUrl] = useState<string>('') // PSD展示图片预览URL
|
||
const [zipFile, setZipFile] = useState<File | null>(null)
|
||
const [productModel, setProductModel] = useState('')
|
||
const [brandName, setBrandName] = useState('')
|
||
const [seriesName, setSeriesName] = useState('')
|
||
const [skuCode, setSkuCode] = useState('')
|
||
const [materialTexture, setMaterialTexture] = useState('')
|
||
|
||
// 一级分类
|
||
const [categoryName, setCategoryName] = useState('')
|
||
const [categories, setCategories] = useState<Array<{ id: string; name: string }>>([])
|
||
const [showNewCategoryInput, setShowNewCategoryInput] = useState(false)
|
||
const [newCategoryName, setNewCategoryName] = useState('')
|
||
|
||
// 二级分类
|
||
const [sceneName, setSceneName] = useState('')
|
||
const [scenes, setScenes] = useState<Array<{ id: string; name: string }>>([])
|
||
const [showNewSceneInput, setShowNewSceneInput] = useState(false)
|
||
const [newSceneName, setNewSceneName] = useState('')
|
||
|
||
// 平台分类（可选）
|
||
const [platformName, setPlatformName] = useState('')
|
||
const [platforms, setPlatforms] = useState<Array<{ id: string; name: string }>>([])
|
||
|
||
// 模板相关
|
||
const [templates, setTemplates] = useState<UploadTemplateOption[]>([])
|
||
const [selectedTemplateId, setSelectedTemplateId] = useState<string>('')
|
||
const [selectedTemplate, setSelectedTemplate] = useState<UploadTemplateOption | null>(null)
|
||
const [templateFieldValues, setTemplateFieldValues] = useState<Record<string, any>>({})
|
||
// 模板分类选项（用于勾选了 addToCategory 的字段）
|
||
const [templateCategoryOptions, setTemplateCategoryOptions] = useState<Record<string, string[]>>({})
|
||
|
||
// 素材类型（保留用于向后兼容，但优先使用模板）
|
||
const [materialType, setMaterialType] = useState('3DMAX')
|
||
|
||
// 渲染器（仅3DMAX使用）
|
||
const [renderer, setRenderer] = useState('CR')
|
||
const [renderTime, setRenderTime] = useState('')
|
||
const [imageResolution, setImageResolution] = useState('')
|
||
const [colorMode, setColorMode] = useState('')
|
||
|
||
const [uploading, setUploading] = useState(false)
|
||
const [uploadProgress, setUploadProgress] = useState(0)
|
||
const [uploadSpeed, setUploadSpeed] = useState(0)
|
||
const [uploadComplete, setUploadComplete] = useState(false) // 上传完成状态
|
||
const [pendingMaterialType, setPendingMaterialType] = useState<string | null>(null)
|
||
const [error, setError] = useState('')
|
||
const [isDragging, setIsDragging] = useState(false)
|
||
const [isDisplayImageDragging, setIsDisplayImageDragging] = useState(false) // PSD展示图片拖拽状态
|
||
const [isPreviewDragging, setIsPreviewDragging] = useState(false) // 预览图片拖拽状态
|
||
const [retryCount, setRetryCount] = useState(0)
|
||
const [draggingPreviewIndex, setDraggingPreviewIndex] = useState<number | null>(null)
|
||
const MAX_RETRY = 2
|
||
|
||
// 断点续传相关状态
|
||
const [showResumeDialog, setShowResumeDialog] = useState(false)
|
||
const [savedUploadData, setSavedUploadData] = useState<any>(null)
|
||
|
||
// 音频解析相关状态
|
||
const [audioMetadata, setAudioMetadata] = useState<AudioMetadataBrowser | null>(null)
|
||
const [isParsingAudio, setIsParsingAudio] = useState(false)
|
||
|
||
const previewInputRef = useRef<HTMLInputElement>(null)
|
||
const zipInputRef = useRef<HTMLInputElement>(null)
|
||
const dropZoneRef = useRef<HTMLDivElement>(null)
|
||
const displayImageDropZoneRef = useRef<HTMLDivElement>(null) // PSD展示图片拖拽区域
|
||
const displayImageInputRef = useRef<HTMLInputElement>(null) // PSD展示图片输入
|
||
const previewDropZoneRef = useRef<HTMLDivElement>(null) // 预览图片拖拽区域
|
||
const previewDragTargetRef = useRef<number | null>(null)
|
||
const reorderPreviewItems = useCallback(
|
||
(fromIndex: number, toIndex: number) => {
|
||
if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0) return
|
||
setPreviewImages((prev) => {
|
||
const items = [...prev]
|
||
if (fromIndex >= items.length || toIndex >= items.length) return prev
|
||
const [moved] = items.splice(fromIndex, 1)
|
||
items.splice(toIndex, 0, moved)
|
||
return items
|
||
})
|
||
setPreviewUrls((prev) => {
|
||
const urls = [...prev]
|
||
if (fromIndex >= urls.length || toIndex >= urls.length) return prev
|
||
const [moved] = urls.splice(fromIndex, 1)
|
||
urls.splice(toIndex, 0, moved)
|
||
return urls
|
||
})
|
||
},
|
||
[]
|
||
)
|
||
|
||
const handlePreviewCardDragStart = (index: number) => (event: React.DragEvent) => {
|
||
event.stopPropagation()
|
||
setDraggingPreviewIndex(index)
|
||
previewDragTargetRef.current = index
|
||
event.dataTransfer.effectAllowed = 'move'
|
||
event.dataTransfer.setData('text/plain', String(index))
|
||
}
|
||
|
||
const handlePreviewCardDragOver = (index: number) => (event: React.DragEvent) => {
|
||
event.preventDefault()
|
||
event.stopPropagation()
|
||
if (draggingPreviewIndex === null || draggingPreviewIndex === index) {
|
||
return
|
||
}
|
||
reorderPreviewItems(draggingPreviewIndex, index)
|
||
setDraggingPreviewIndex(index)
|
||
previewDragTargetRef.current = index
|
||
}
|
||
|
||
const handlePreviewCardDragEnd = () => {
|
||
setDraggingPreviewIndex(null)
|
||
previewDragTargetRef.current = null
|
||
}
|
||
|
||
const handlePreviewCardDrop = (event: React.DragEvent) => {
|
||
event.preventDefault()
|
||
event.stopPropagation()
|
||
setDraggingPreviewIndex(null)
|
||
previewDragTargetRef.current = null
|
||
}
|
||
const xhrRef = useRef<XMLHttpRequest | null>(null)
|
||
|
||
const VIDEO_ACCEPT_TYPES =
|
||
'video/mp4,video/quicktime,video/x-msvideo,video/x-matroska,video/webm,video/m4v,.mp4,.mov,.avi,.mkv,.webm,.m4v'
|
||
const VIDEO_FILE_EXTENSIONS = ['mp4', 'mov', 'avi', 'mkv', 'webm', 'm4v']
|
||
const isVideoFile = (file: File) => {
|
||
if (!file) return false
|
||
if (file.type && file.type.startsWith('video/')) {
|
||
return true
|
||
}
|
||
const ext = file.name.split('.').pop()?.toLowerCase() || ''
|
||
return VIDEO_FILE_EXTENSIONS.includes(ext)
|
||
}
|
||
|
||
// 保存上传状态到 localStorage（使用 useCallback 确保函数稳定）
|
||
const saveUploadState = useCallback(() => {
|
||
if (uploading || uploadComplete || (uploadProgress > 0 && uploadProgress < 100)) {
|
||
const uploadState = {
|
||
productModel,
|
||
brandName,
|
||
seriesName,
|
||
skuCode,
|
||
materialTexture,
|
||
categoryName,
|
||
sceneName,
|
||
platformName,
|
||
materialType,
|
||
renderer,
|
||
renderTime,
|
||
imageResolution,
|
||
colorMode,
|
||
previewImagesNames: previewImages.map(img => img.name),
|
||
displayImageName: displayImage?.name || '',
|
||
zipFileName: zipFile?.name || '',
|
||
uploadProgress,
|
||
timestamp: Date.now()
|
||
}
|
||
try {
|
||
localStorage.setItem('uploadState', JSON.stringify(uploadState))
|
||
} catch (e) {
|
||
console.error('Failed to save upload state to localStorage:', e)
|
||
}
|
||
}
|
||
}, [
|
||
uploading,
|
||
uploadProgress,
|
||
productModel,
|
||
brandName,
|
||
seriesName,
|
||
skuCode,
|
||
materialTexture,
|
||
categoryName,
|
||
sceneName,
|
||
platformName,
|
||
materialType,
|
||
renderer,
|
||
renderTime,
|
||
imageResolution,
|
||
colorMode,
|
||
previewImages,
|
||
displayImage,
|
||
zipFile,
|
||
uploadComplete,
|
||
])
|
||
|
||
// 清除保存的上传状态
|
||
const clearUploadState = useCallback(() => {
|
||
localStorage.removeItem('uploadState')
|
||
setSavedUploadData(null)
|
||
}, [])
|
||
|
||
// 恢复上传状态
|
||
const restoreUploadState = (data: any) => {
|
||
setProductModel(data.productModel || '')
|
||
setBrandName(data.brandName || '')
|
||
setSeriesName(data.seriesName || '')
|
||
setSkuCode(data.skuCode || '')
|
||
setMaterialTexture(data.materialTexture || '')
|
||
setCategoryName(data.categoryName || '')
|
||
setSceneName(data.sceneName || '')
|
||
setPlatformName(data.platformName || '')
|
||
setMaterialType(data.materialType || '3DMAX')
|
||
setRenderer(data.renderer || 'CR')
|
||
setRenderTime(data.renderTime || '')
|
||
setImageResolution(data.imageResolution || '')
|
||
setColorMode(data.colorMode || '')
|
||
setUploadProgress(data.uploadProgress || 0)
|
||
// 注意：文件对象无法直接恢复，需要用户重新选择
|
||
}
|
||
|
||
const resetForm = useCallback(() => {
|
||
// 释放所有预览图URL
|
||
previewUrls.forEach(url => URL.revokeObjectURL(url))
|
||
setPreviewImages([])
|
||
setPreviewUrls([])
|
||
setDisplayImage(null)
|
||
setDisplayImageUrl('')
|
||
setZipFile(null)
|
||
setProductModel('')
|
||
setBrandName('')
|
||
setSeriesName('')
|
||
setSkuCode('')
|
||
setMaterialTexture('')
|
||
setCategoryName('')
|
||
setSceneName('')
|
||
setPlatformName('')
|
||
setMaterialType('3DMAX')
|
||
setRenderer('CR')
|
||
setRenderTime('')
|
||
setImageResolution('')
|
||
setColorMode('')
|
||
setUploadProgress(0)
|
||
setUploadSpeed(0)
|
||
setError('')
|
||
setShowNewCategoryInput(false)
|
||
setShowNewSceneInput(false)
|
||
setNewCategoryName('')
|
||
setNewSceneName('')
|
||
}, [previewUrls])
|
||
|
||
// 检查是否有未完成的上传
|
||
useEffect(() => {
|
||
const savedState = localStorage.getItem('uploadState')
|
||
if (savedState) {
|
||
try {
|
||
const data = JSON.parse(savedState)
|
||
// 检查是否在24小时内（避免过期数据）
|
||
const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000
|
||
if (data.timestamp && data.timestamp > oneDayAgo) {
|
||
setSavedUploadData(data)
|
||
setShowResumeDialog(true)
|
||
} else {
|
||
// 超过24小时，清除过期数据
|
||
clearUploadState()
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to parse saved upload state:', e)
|
||
clearUploadState()
|
||
}
|
||
}
|
||
}, [clearUploadState])
|
||
|
||
// 在上传状态变化时保存
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
if (uploading || uploadComplete || (uploadProgress > 0 && uploadProgress < 100)) {
|
||
saveUploadState()
|
||
} else if (uploadProgress === 100 || uploadComplete) {
|
||
// 上传完成，清除保存的状态
|
||
clearUploadState()
|
||
}
|
||
}, 1000) // 延迟1秒保存，避免频繁写入localStorage
|
||
|
||
return () => clearTimeout(timer)
|
||
}, [uploading, uploadComplete, uploadProgress, saveUploadState, clearUploadState])
|
||
|
||
// 页面关闭前保存状态
|
||
useEffect(() => {
|
||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||
if (uploading) {
|
||
saveUploadState()
|
||
e.preventDefault()
|
||
e.returnValue = '上传正在进行中，确定要离开吗？'
|
||
}
|
||
}
|
||
|
||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||
return () => {
|
||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||
}
|
||
}, [uploading, saveUploadState])
|
||
|
||
// 加载分类、场景列表和模板列表
|
||
useEffect(() => {
|
||
fetchCategories()
|
||
fetchScenes()
|
||
fetchPlatforms()
|
||
fetchTemplates()
|
||
fetchTemplateCategoryOptions() // 获取模板分类选项
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [])
|
||
|
||
// 定期刷新模板分类选项（每30秒），确保后台添加的分类能同步到前台
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
fetchTemplateCategoryOptions()
|
||
}, 30000) // 30秒刷新一次
|
||
|
||
return () => clearInterval(interval)
|
||
}, [])
|
||
|
||
const fetchCategories = async () => {
|
||
try {
|
||
const response = await fetch('/api/categories')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setCategories(data || [])
|
||
console.log('[UploadModal] Categories loaded:', data?.length || 0)
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({ error: '未知错误' }))
|
||
console.error('[UploadModal] Failed to fetch categories:', response.status, errorData)
|
||
setError(`加载店铺列表失败: ${errorData.error || '未知错误'}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UploadModal] Error fetching categories:', error)
|
||
setError('加载店铺列表失败，请刷新页面重试')
|
||
}
|
||
}
|
||
|
||
const fetchScenes = async () => {
|
||
try {
|
||
const response = await fetch('/api/scenes')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setScenes(data || [])
|
||
console.log('[UploadModal] Scenes loaded:', data?.length || 0)
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({ error: '未知错误' }))
|
||
console.error('[UploadModal] Failed to fetch scenes:', response.status, errorData)
|
||
setError(`加载场景列表失败: ${errorData.error || '未知错误'}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UploadModal] Error fetching scenes:', error)
|
||
setError('加载场景列表失败，请刷新页面重试')
|
||
}
|
||
}
|
||
|
||
const fetchPlatforms = async () => {
|
||
try {
|
||
const response = await fetch('/api/platforms')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setPlatforms(data)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching platforms:', error)
|
||
}
|
||
}
|
||
|
||
// 获取启用的模板列表
|
||
const fetchTemplates = async () => {
|
||
try {
|
||
const response = await fetch('/api/upload-templates')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
const loadedTemplates = Array.isArray(data) ? data : []
|
||
setTemplates(loadedTemplates)
|
||
console.log('[UploadModal] Templates loaded:', loadedTemplates.length)
|
||
// 如果有模板且只有一个，自动选择
|
||
if (loadedTemplates.length === 1) {
|
||
const template = loadedTemplates[0]
|
||
setSelectedTemplateId(template.id)
|
||
setSelectedTemplate(template)
|
||
const initialValues: Record<string, any> = {}
|
||
template.fields.forEach((field: any) => {
|
||
if (field.type === 'checkbox') {
|
||
initialValues[field.key] = false
|
||
} else {
|
||
initialValues[field.key] = ''
|
||
}
|
||
})
|
||
setTemplateFieldValues(initialValues)
|
||
setMaterialType(template.materialType || '其他')
|
||
}
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({ error: '未知错误' }))
|
||
console.error('[UploadModal] Failed to fetch templates:', response.status, errorData)
|
||
setError(`加载模板列表失败: ${errorData.error || '未知错误'}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UploadModal] Error fetching templates:', error)
|
||
setError('加载模板列表失败，请刷新页面重试')
|
||
}
|
||
}
|
||
|
||
// 获取模板分类选项（用于勾选了 addToCategory 的字段）
|
||
const fetchTemplateCategoryOptions = async () => {
|
||
try {
|
||
// 使用 includeAll=true 获取所有分类字段，包括未启用筛选的字段
|
||
const response = await fetch('/api/template-categories?includeAll=true')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
const optionsMap: Record<string, string[]> = {}
|
||
data.forEach((cat: { fieldKey: string; options: string[] }) => {
|
||
optionsMap[cat.fieldKey] = cat.options
|
||
})
|
||
setTemplateCategoryOptions(optionsMap)
|
||
console.log('[UploadModal] Template category options loaded:', Object.keys(optionsMap).length, optionsMap)
|
||
} else {
|
||
console.error('[UploadModal] Failed to fetch template category options:', response.status)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UploadModal] Error fetching template category options:', error)
|
||
}
|
||
}
|
||
|
||
// 处理模板选择变化
|
||
const handleTemplateChange = (templateId: string) => {
|
||
setSelectedTemplateId(templateId)
|
||
const template = templates.find(t => t.id === templateId) || null
|
||
setSelectedTemplate(template)
|
||
// 清空之前的字段值
|
||
setTemplateFieldValues({})
|
||
if (template) {
|
||
const initialValues: Record<string, any> = {}
|
||
template.fields.forEach((field: any) => {
|
||
if (field.type === 'checkbox') {
|
||
initialValues[field.key] = false
|
||
} else {
|
||
initialValues[field.key] = ''
|
||
}
|
||
})
|
||
setTemplateFieldValues(initialValues)
|
||
setMaterialType(template.materialType || '其他')
|
||
} else {
|
||
setMaterialType('其他')
|
||
}
|
||
}
|
||
|
||
const buildTemplateFieldsPayload = useCallback(() => {
|
||
if (!selectedTemplate?.fields?.length) return {}
|
||
|
||
return filterVisibleFieldValues(selectedTemplate.fields, templateFieldValues)
|
||
}, [selectedTemplate, templateFieldValues])
|
||
|
||
const handlePreviewChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = Array.from(e.target.files || [])
|
||
if (files.length === 0) return
|
||
|
||
// 验证文件类型
|
||
const imageFiles = files.filter(file => file.type.startsWith('image/'))
|
||
if (imageFiles.length !== files.length) {
|
||
setError('请选择图片文件')
|
||
return
|
||
}
|
||
|
||
// 检查总数是否超过5张
|
||
const currentCount = previewImages.length
|
||
const newCount = currentCount + imageFiles.length
|
||
if (newCount > 5) {
|
||
setError(`最多只能上传5张预览图（当前：${currentCount}张，尝试添加：${imageFiles.length}张）`)
|
||
return
|
||
}
|
||
|
||
// 添加新图片
|
||
const newImages = [...previewImages, ...imageFiles]
|
||
setPreviewImages(newImages)
|
||
setPreviewUrls([...previewUrls, ...imageFiles.map(file => URL.createObjectURL(file))])
|
||
setError('')
|
||
|
||
// 清空input，允许重复选择同一文件
|
||
if (previewInputRef.current) {
|
||
previewInputRef.current.value = ''
|
||
}
|
||
}
|
||
|
||
const removePreviewImage = (index: number) => {
|
||
const newImages = previewImages.filter((_, i) => i !== index)
|
||
const newUrls = previewUrls.filter((_, i) => i !== index)
|
||
setPreviewImages(newImages)
|
||
// 释放URL对象
|
||
URL.revokeObjectURL(previewUrls[index])
|
||
setPreviewUrls(newUrls)
|
||
}
|
||
|
||
const handleDisplayImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (file) {
|
||
if (!file.type.startsWith('image/')) {
|
||
setError('请选择图片文件')
|
||
return
|
||
}
|
||
setDisplayImage(file)
|
||
setDisplayImageUrl(URL.createObjectURL(file))
|
||
setError('')
|
||
}
|
||
}
|
||
|
||
const handleZipChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (file) {
|
||
if (currentMaterialKind === 'VIDEO' && !isVideoFile(file)) {
|
||
setError('请上传视频文件（支持 MP4、MOV、AVI、MKV、WebM 等格式）')
|
||
e.target.value = ''
|
||
return
|
||
}
|
||
if (currentMaterialKind === 'AUDIO' && !isAudioFile(file)) {
|
||
setError('请上传音频文件（支持 MP3、WAV、FLAC、AAC 等格式）')
|
||
e.target.value = ''
|
||
return
|
||
}
|
||
setZipFile(file)
|
||
setError('')
|
||
|
||
// 如果是音频文件，自动解析元数据
|
||
if (currentMaterialKind === 'AUDIO' && isAudioFile(file)) {
|
||
setIsParsingAudio(true)
|
||
try {
|
||
const metadata = await parseAudioFile(file)
|
||
setAudioMetadata(metadata)
|
||
if (metadata) {
|
||
// 自动填充字段
|
||
setTemplateFieldValues(prev => {
|
||
const newValues = { ...prev }
|
||
// 自动填充时长
|
||
if (metadata.durationFormatted) {
|
||
newValues.audioDuration = metadata.durationFormatted
|
||
}
|
||
// 如果有内嵌标题且产品名称为空，自动填充
|
||
if (metadata.title && !prev.productModel) {
|
||
newValues.productModel = metadata.title
|
||
}
|
||
// 如果有内嵌艺术家且作者为空，自动填充
|
||
if (metadata.artist && !prev.authorName) {
|
||
newValues.authorName = metadata.artist
|
||
}
|
||
return newValues
|
||
})
|
||
// 如果有内嵌封面图且没有预览图，自动设置
|
||
if (metadata.coverImage && previewImages.length === 0) {
|
||
// 将 base64 转换为 File 对象
|
||
const response = await fetch(metadata.coverImage)
|
||
const blob = await response.blob()
|
||
const coverFile = new File([blob], 'cover.jpg', { type: blob.type })
|
||
setPreviewImages([coverFile])
|
||
setPreviewUrls([metadata.coverImage])
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('[UploadModal] Failed to parse audio file:', err)
|
||
} finally {
|
||
setIsParsingAudio(false)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 拖拽处理 - 修复闪屏问题
|
||
const handleDragEnter = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setIsDragging(true)
|
||
}
|
||
|
||
const handleDragLeave = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
|
||
// 只有当鼠标真正离开容器时才设置为false，避免经过子元素时闪屏
|
||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
|
||
const x = e.clientX
|
||
const y = e.clientY
|
||
|
||
if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
|
||
setIsDragging(false)
|
||
}
|
||
}
|
||
|
||
const handleDragOver = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
}
|
||
|
||
const handleDrop = async (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setIsDragging(false)
|
||
|
||
const files = Array.from(e.dataTransfer.files)
|
||
if (files.length === 0) return
|
||
|
||
const file = files[0]
|
||
if (!file) return
|
||
if (currentMaterialKind === 'VIDEO' && !isVideoFile(file)) {
|
||
setError('请拖拽正确的视频文件，支持 MP4、MOV、AVI、MKV、WebM 等格式')
|
||
return
|
||
}
|
||
if (currentMaterialKind === 'AUDIO' && !isAudioFile(file)) {
|
||
setError('请拖拽正确的音频文件，支持 MP3、WAV、FLAC、AAC 等格式')
|
||
return
|
||
}
|
||
setZipFile(file)
|
||
setError('')
|
||
|
||
// 如果是音频文件，自动解析元数据
|
||
if (currentMaterialKind === 'AUDIO' && isAudioFile(file)) {
|
||
setIsParsingAudio(true)
|
||
try {
|
||
const metadata = await parseAudioFile(file)
|
||
setAudioMetadata(metadata)
|
||
if (metadata) {
|
||
setTemplateFieldValues(prev => {
|
||
const newValues = { ...prev }
|
||
if (metadata.durationFormatted) {
|
||
newValues.audioDuration = metadata.durationFormatted
|
||
}
|
||
if (metadata.title && !prev.productModel) {
|
||
newValues.productModel = metadata.title
|
||
}
|
||
if (metadata.artist && !prev.authorName) {
|
||
newValues.authorName = metadata.artist
|
||
}
|
||
return newValues
|
||
})
|
||
if (metadata.coverImage && previewImages.length === 0) {
|
||
const response = await fetch(metadata.coverImage)
|
||
const blob = await response.blob()
|
||
const coverFile = new File([blob], 'cover.jpg', { type: blob.type })
|
||
setPreviewImages([coverFile])
|
||
setPreviewUrls([metadata.coverImage])
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('[UploadModal] Failed to parse audio file:', err)
|
||
} finally {
|
||
setIsParsingAudio(false)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 预览图片拖拽处理
|
||
const handlePreviewDragEnter = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setIsPreviewDragging(true)
|
||
}
|
||
|
||
const handlePreviewDragLeave = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
|
||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
|
||
const x = e.clientX
|
||
const y = e.clientY
|
||
|
||
if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
|
||
setIsPreviewDragging(false)
|
||
}
|
||
}
|
||
|
||
const handlePreviewDragOver = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
}
|
||
|
||
const handlePreviewDrop = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setIsPreviewDragging(false)
|
||
|
||
const files = Array.from(e.dataTransfer.files)
|
||
if (files.length === 0) return
|
||
|
||
const imageFiles = files.filter(f => f.type.startsWith('image/'))
|
||
if (imageFiles.length === 0) {
|
||
setError('请拖拽图片文件')
|
||
return
|
||
}
|
||
|
||
// 检查总数是否超过5张
|
||
const currentCount = previewImages.length
|
||
const newCount = currentCount + imageFiles.length
|
||
if (newCount > 5) {
|
||
setError(`最多只能上传5张预览图（当前：${currentCount}张，尝试添加：${imageFiles.length}张）`)
|
||
return
|
||
}
|
||
|
||
// 添加新图片
|
||
const newImages = [...previewImages, ...imageFiles]
|
||
setPreviewImages(newImages)
|
||
setPreviewUrls([...previewUrls, ...imageFiles.map(file => URL.createObjectURL(file))])
|
||
setError('')
|
||
}
|
||
|
||
// PSD展示图片拖拽处理
|
||
const handleDisplayImageDragEnter = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setIsDisplayImageDragging(true)
|
||
}
|
||
|
||
const handleDisplayImageDragLeave = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
|
||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
|
||
const x = e.clientX
|
||
const y = e.clientY
|
||
|
||
if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
|
||
setIsDisplayImageDragging(false)
|
||
}
|
||
}
|
||
|
||
const handleDisplayImageDragOver = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
}
|
||
|
||
const handleDisplayImageDrop = (e: React.DragEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
setIsDisplayImageDragging(false)
|
||
|
||
const files = Array.from(e.dataTransfer.files)
|
||
if (files.length === 0) return
|
||
|
||
const imageFiles = files.filter(f => f.type.startsWith('image/'))
|
||
if (imageFiles.length > 0) {
|
||
const imgFile = imageFiles[0]
|
||
setDisplayImage(imgFile)
|
||
setDisplayImageUrl(URL.createObjectURL(imgFile))
|
||
setError('')
|
||
} else {
|
||
setError('请拖拽图片文件')
|
||
}
|
||
}
|
||
|
||
const handleAddNewCategory = async () => {
|
||
if (!newCategoryName.trim()) {
|
||
setError('请输入分类名称')
|
||
return
|
||
}
|
||
|
||
try {
|
||
console.log('[UploadModal] Creating category:', newCategoryName.trim())
|
||
const response = await fetch('/api/categories', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ name: newCategoryName.trim() }),
|
||
})
|
||
|
||
if (response.ok) {
|
||
const newCategory = await response.json()
|
||
console.log('[UploadModal] Category created:', newCategory)
|
||
await fetchCategories()
|
||
setCategoryName(newCategory.name)
|
||
setNewCategoryName('')
|
||
setShowNewCategoryInput(false)
|
||
setError('')
|
||
} else {
|
||
const data = await response.json().catch(() => ({ error: '未知错误' }))
|
||
console.error('[UploadModal] Failed to create category:', response.status, data)
|
||
setError(data.error || '添加分类失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('[UploadModal] Error adding category:', error)
|
||
setError(`添加分类失败: ${error instanceof Error ? error.message : '未知错误'}`)
|
||
}
|
||
}
|
||
|
||
const handleAddNewScene = async () => {
|
||
if (!newSceneName.trim()) {
|
||
setError('请输入场景名称')
|
||
return
|
||
}
|
||
|
||
try {
|
||
console.log('[UploadModal] Creating scene:', newSceneName.trim())
|
||
const response = await fetch('/api/scenes', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ name: newSceneName.trim() }),
|
||
})
|
||
|
||
if (response.ok) {
|
||
const newScene = await response.json()
|
||
console.log('[UploadModal] Scene created:', newScene)
|
||
await fetchScenes()
|
||
setSceneName(newScene.name)
|
||
setNewSceneName('')
|
||
setShowNewSceneInput(false)
|
||
setError('')
|
||
} else {
|
||
const data = await response.json().catch(() => ({ error: '未知错误' }))
|
||
console.error('[UploadModal] Failed to create scene:', response.status, data)
|
||
setError(data.error || '添加场景失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('[UploadModal] Error adding scene:', error)
|
||
setError(`添加场景失败: ${error instanceof Error ? error.message : '未知错误'}`)
|
||
}
|
||
}
|
||
|
||
const formatBytes = (bytes: number) => {
|
||
if (bytes === 0) return '0 B'
|
||
const k = 1024
|
||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
|
||
}
|
||
|
||
const formatSpeed = (bytesPerSecond: number) => {
|
||
return formatBytes(bytesPerSecond) + '/s'
|
||
}
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setError('')
|
||
|
||
// 验证模板选择
|
||
if (!selectedTemplateId) {
|
||
setError('请选择素材模板')
|
||
return
|
||
}
|
||
|
||
const currentMaterialType = selectedTemplate?.materialType || materialType
|
||
const submittingMaterialKind = currentMaterialKind
|
||
const submittingIsVideo = submittingMaterialKind === 'VIDEO'
|
||
|
||
// 验证模板必填字段
|
||
if (visibleTemplateFields.length > 0) {
|
||
for (const field of visibleTemplateFields) {
|
||
if (field.required) {
|
||
const value = templateFieldValues[field.key]
|
||
if (!hasFieldValue(value, field.type)) {
|
||
setError(`请填写必填字段：${field.label}`)
|
||
return
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 从模板字段中提取productModel
|
||
const currentProductModel = templateFieldValues.productModel || ''
|
||
if (!currentProductModel) {
|
||
setError(currentMaterialType === '材质' ? '请填写材质名称' : '请填写SPU型号')
|
||
return
|
||
}
|
||
|
||
// 从模板字段中提取categoryName和sceneName
|
||
const currentCategoryName = templateFieldValues.categoryName || ''
|
||
const currentSceneName = templateFieldValues.sceneName || ''
|
||
const submittingIsAudio = submittingMaterialKind === 'AUDIO'
|
||
|
||
// 材质类型和音频类型不需要店铺和场景
|
||
const skipCategoryScene = currentMaterialType === '材质' || submittingIsAudio
|
||
if (!skipCategoryScene && (!currentCategoryName || !currentSceneName)) {
|
||
setError('请填写所有必填字段（店铺、场景）')
|
||
return
|
||
}
|
||
|
||
// 素材文件验证（模特类型和材质类型素材文件可选，音频类型必须有文件）
|
||
if (!submittingIsVideo && !submittingIsAudio && currentMaterialType !== '模特' && currentMaterialType !== '材质' && !zipFile) {
|
||
setError('请上传素材文件')
|
||
return
|
||
}
|
||
|
||
// 图片验证
|
||
if (currentMaterialType === 'PSD' && !displayImage) {
|
||
setError('PSD素材必须上传展示图片')
|
||
return
|
||
}
|
||
|
||
// 视频素材的封面图是可选的（如果没有上传，系统会自动从视频中截取）
|
||
// 音频素材的预览图也是可选的（使用占位符）
|
||
// 对于非视频、非音频、非PSD类型，必须有预览图
|
||
if (!submittingIsVideo && !submittingIsAudio && currentMaterialType !== 'PSD' && currentMaterialType !== '材质' && previewImages.length === 0) {
|
||
setError('请上传预览图')
|
||
return
|
||
}
|
||
|
||
// 视频类型验证
|
||
if (submittingIsVideo && !zipFile) {
|
||
setError('请上传视频文件')
|
||
return
|
||
}
|
||
|
||
// 音频类型验证
|
||
if (submittingIsAudio && !zipFile) {
|
||
setError('请上传音频文件')
|
||
return
|
||
}
|
||
|
||
// 重置重试计数和状态
|
||
setPendingMaterialType(currentMaterialType)
|
||
setRetryCount(0)
|
||
setUploading(true)
|
||
setUploadProgress(0)
|
||
setUploadSpeed(0)
|
||
setUploadComplete(false)
|
||
|
||
try {
|
||
const formData = new FormData()
|
||
// 添加预览图（多张，最多5张）
|
||
if (previewImages.length > 0) {
|
||
previewImages.forEach((img, index) => {
|
||
formData.append('previewImages', img)
|
||
})
|
||
// 第一张作为主预览图（向后兼容）
|
||
formData.append('previewImage', previewImages[0])
|
||
}
|
||
if (displayImage) {
|
||
formData.append('displayImage', displayImage)
|
||
}
|
||
// 素材文件对于模特类型是可选的
|
||
if (zipFile) {
|
||
formData.append('zipFile', zipFile)
|
||
}
|
||
|
||
formData.append('productModel', currentProductModel)
|
||
// 材质类型和音频类型使用默认值
|
||
formData.append('categoryName', skipCategoryScene ? '通用' : currentCategoryName)
|
||
formData.append('sceneName', skipCategoryScene ? '通用' : currentSceneName)
|
||
formData.append('platformName', templateFieldValues.platformName || '') // 平台分类可选
|
||
formData.append('materialType', currentMaterialType)
|
||
formData.append('renderer', templateFieldValues.renderer || 'CR')
|
||
formData.append('brandName', templateFieldValues.brandName || '')
|
||
formData.append('seriesName', templateFieldValues.seriesName || '')
|
||
formData.append('skuCode', templateFieldValues.skuCode || '')
|
||
formData.append('materialTexture', templateFieldValues.materialTexture || '')
|
||
formData.append('renderTime', templateFieldValues.renderTime || '')
|
||
formData.append('imageResolution', templateFieldValues.imageResolution || '')
|
||
formData.append('colorMode', templateFieldValues.colorMode || '')
|
||
formData.append('materialKind', submittingMaterialKind)
|
||
formData.append('templateId', selectedTemplateId)
|
||
formData.append('templateFields', JSON.stringify(buildTemplateFieldsPayload()))
|
||
// 提交作者名称（如果模板字段中有的话）
|
||
if (templateFieldValues.authorName) {
|
||
formData.append('authorName', templateFieldValues.authorName)
|
||
}
|
||
// 提交音频分类和使用场景（如果是音频素材）
|
||
if (submittingMaterialKind === 'AUDIO') {
|
||
if (templateFieldValues.audioCategory) {
|
||
formData.append('audioCategory', templateFieldValues.audioCategory)
|
||
}
|
||
if (templateFieldValues.audioScene) {
|
||
formData.append('audioScene', templateFieldValues.audioScene)
|
||
}
|
||
if (templateFieldValues.audioDuration) {
|
||
formData.append('audioDuration', templateFieldValues.audioDuration)
|
||
}
|
||
}
|
||
|
||
const xhr = new XMLHttpRequest()
|
||
xhrRef.current = xhr // 保存引用以便取消
|
||
|
||
// 禁用超时限制，适用于大文件上传
|
||
xhr.timeout = 0
|
||
|
||
let startTime = Date.now()
|
||
let startLoaded = 0
|
||
|
||
xhr.upload.addEventListener('progress', (e) => {
|
||
if (e.lengthComputable) {
|
||
const percentComplete = Math.round((e.loaded / e.total) * 100)
|
||
setUploadProgress(percentComplete)
|
||
|
||
// 计算上传速度
|
||
const currentTime = Date.now()
|
||
const timeElapsed = (currentTime - startTime) / 1000 // 秒
|
||
if (timeElapsed > 0) {
|
||
const speed = (e.loaded - startLoaded) / timeElapsed
|
||
setUploadSpeed(speed)
|
||
startTime = currentTime
|
||
startLoaded = e.loaded
|
||
}
|
||
}
|
||
})
|
||
|
||
xhr.addEventListener('load', () => {
|
||
if (xhr.status === 201) {
|
||
// 立即设置进度为100%并显示完成状态
|
||
setUploadProgress(100)
|
||
setUploadComplete(true)
|
||
setUploading(false)
|
||
setPendingMaterialType(null)
|
||
|
||
// 清除上传状态和重置表单
|
||
clearUploadState()
|
||
resetForm()
|
||
setRetryCount(0)
|
||
setPendingMaterialType(null)
|
||
|
||
// 短暂延迟确保UI更新完成，然后关闭弹窗
|
||
setTimeout(() => {
|
||
onSuccess()
|
||
onClose()
|
||
}, 300) // 300ms延迟，确保用户看到完成状态
|
||
} else {
|
||
try {
|
||
const data = JSON.parse(xhr.responseText)
|
||
let errorMsg = data.error || '上传失败'
|
||
|
||
// 如果有详细信息，添加到错误消息中
|
||
if (data.details) {
|
||
errorMsg += `\n详细信息: ${data.details}`
|
||
}
|
||
if (data.errorType) {
|
||
errorMsg += `\n错误类型: ${data.errorType}`
|
||
}
|
||
|
||
// 提供更详细的错误信息
|
||
if (xhr.status === 413) {
|
||
errorMsg = '文件过大，请联系管理员增加上传限制'
|
||
} else if (xhr.status === 408 || xhr.status === 504) {
|
||
errorMsg = '上传超时，请压缩文件、使用内网地址或分批上传后重试'
|
||
} else if (xhr.status >= 500) {
|
||
errorMsg = `服务器错误 (${xhr.status})：${errorMsg}`
|
||
}
|
||
|
||
setError(errorMsg)
|
||
} catch (parseError) {
|
||
console.error('[UploadModal] Failed to parse error response:', parseError)
|
||
setError(`上传失败，服务器返回异常（状态码：${xhr.status}），请稍后重试或联系管理员`)
|
||
}
|
||
setUploading(false)
|
||
setRetryCount(0)
|
||
}
|
||
})
|
||
|
||
xhr.addEventListener('error', (e) => {
|
||
console.error('Upload XHR error:', e)
|
||
console.error('XHR status:', xhr.status)
|
||
console.error('XHR readyState:', xhr.readyState)
|
||
console.error('Upload progress:', uploadProgress)
|
||
|
||
// 检测是否是连接重置错误
|
||
const isConnectionReset = xhr.status === 0
|
||
|
||
let errorMsg = '上传失败，请稍后重试'
|
||
|
||
// 如果上传进度已达到100%，可能实际已成功
|
||
if (uploadProgress === 100 && isConnectionReset) {
|
||
errorMsg = '上传结果暂未确认，请刷新素材列表检查是否已经保存'
|
||
// 3秒后自动关闭弹窗并刷新
|
||
setTimeout(() => {
|
||
onClose()
|
||
window.location.reload()
|
||
}, 5000)
|
||
} else if (isConnectionReset) {
|
||
errorMsg = '网络连接中断，上传结果暂未确认。请刷新列表检查；如未出现，请使用内网地址或压缩后重试'
|
||
}
|
||
|
||
setError(errorMsg)
|
||
setUploading(false)
|
||
setUploadComplete(false)
|
||
setPendingMaterialType(null)
|
||
})
|
||
|
||
xhr.addEventListener('abort', () => {
|
||
setError('上传已取消')
|
||
setUploading(false)
|
||
setUploadComplete(false)
|
||
setRetryCount(0)
|
||
setPendingMaterialType(null)
|
||
xhrRef.current = null
|
||
})
|
||
|
||
// 始终使用相对路径上传，避免跨域Cookie问题
|
||
// 用户应通过Header的提示切换到内网地址以获得更快速度
|
||
const uploadUrl = '/api/materials/upload'
|
||
|
||
console.log(`[Upload] 上传地址: ${uploadUrl}`)
|
||
|
||
xhr.open('POST', uploadUrl)
|
||
xhr.send(formData)
|
||
|
||
} catch (error) {
|
||
console.error('Upload error:', error)
|
||
setError('上传失败，请稍后再试')
|
||
setUploading(false)
|
||
setUploadComplete(false)
|
||
setPendingMaterialType(null)
|
||
}
|
||
}
|
||
|
||
const handleCancelUpload = () => {
|
||
if (xhrRef.current && uploading) {
|
||
xhrRef.current.abort()
|
||
} else {
|
||
onClose()
|
||
}
|
||
}
|
||
|
||
const resolvedMaterialType = selectedTemplate?.materialType || materialType
|
||
const currentMaterialKind = normalizeMaterialKind(
|
||
selectedTemplate?.materialKind || (resolvedMaterialType === '视频' ? 'VIDEO' : resolvedMaterialType === '音频' ? 'AUDIO' : 'IMAGE')
|
||
)
|
||
const visibleTemplateFields = useMemo(() => {
|
||
if (!selectedTemplate?.fields?.length) return []
|
||
return getVisibleTemplateFields(selectedTemplate.fields, templateFieldValues)
|
||
}, [selectedTemplate, templateFieldValues])
|
||
const visibleTemplateFieldKeys = useMemo(
|
||
() => new Set(visibleTemplateFields.map((field: any) => field.key)),
|
||
[visibleTemplateFields]
|
||
)
|
||
const isVideoTemplate = currentMaterialKind === 'VIDEO'
|
||
const isAudioTemplate = currentMaterialKind === 'AUDIO'
|
||
// 视频模板和音频模板的预览图是可选的
|
||
// 只有非视频、非音频、非PSD类型才需要必填预览图
|
||
const previewRequiredInUi = !isVideoTemplate && !isAudioTemplate && resolvedMaterialType !== 'PSD' && resolvedMaterialType !== '材质'
|
||
const isPostProcessing = uploading && uploadProgress === 100 && !uploadComplete
|
||
const postProcessingMessage =
|
||
pendingMaterialType === 'PSD'
|
||
? 'PSD 展示图较大，正在切割并生成长图预览，请稍等...'
|
||
: '文件已上传，系统正在保存素材并刷新列表，请勿关闭窗口...'
|
||
const submitButtonLabel = uploading
|
||
? isPostProcessing
|
||
? '处理中...'
|
||
: `上传中 ${uploadProgress}%`
|
||
: '上传'
|
||
|
||
return (
|
||
<>
|
||
<Modal
|
||
isOpen={showResumeDialog && !!savedUploadData}
|
||
onClose={() => {
|
||
clearUploadState()
|
||
setShowResumeDialog(false)
|
||
}}
|
||
size="small"
|
||
showCloseButton={false}
|
||
closeOnOverlayClick={false}
|
||
closeOnEscape={false}
|
||
>
|
||
{savedUploadData && (
|
||
<div className="space-y-4">
|
||
<h3 className="text-base font-semibold text-slate-900 dark:text-white">
|
||
检测到未完成的上传
|
||
</h3>
|
||
<div className="space-y-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4">
|
||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||
<strong>素材类型：</strong>{savedUploadData.materialType || '未知'}
|
||
</p>
|
||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||
<strong>SPU型号：</strong>{savedUploadData.productModel || '未填写'}
|
||
</p>
|
||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||
<strong>上传进度：</strong>{savedUploadData.uploadProgress || 0}%
|
||
</p>
|
||
<p className="text-xs text-yellow-600 dark:text-yellow-400">
|
||
文件需要重新选择，但表单内容已保存
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-3 justify-end">
|
||
<button
|
||
onClick={() => {
|
||
clearUploadState()
|
||
setShowResumeDialog(false)
|
||
}}
|
||
className="btn-secondary"
|
||
>
|
||
放弃恢复
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
restoreUploadState(savedUploadData)
|
||
setShowResumeDialog(false)
|
||
}}
|
||
className="btn-primary"
|
||
>
|
||
恢复上传
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
|
||
<Modal
|
||
isOpen={true}
|
||
onClose={handleCancelUpload}
|
||
size="large"
|
||
showCloseButton={false}
|
||
closeOnOverlayClick={false}
|
||
closeOnEscape={false}
|
||
>
|
||
<div
|
||
className={cn(
|
||
'max-h-[80vh] flex flex-col relative w-full max-w-2xl mx-auto rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900'
|
||
)}
|
||
style={{ overflow: 'hidden' }}
|
||
>
|
||
|
||
<div className="flex-shrink-0 px-6 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 z-10">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex-1">
|
||
<h2 className="text-lg font-bold text-slate-900 dark:text-white">上传素材</h2>
|
||
<div className="space-y-0 mt-1">
|
||
<p className="text-[10px] text-slate-500 dark:text-slate-400">
|
||
提示：可拖拽文件到对应区域上传
|
||
</p>
|
||
{uploading && (
|
||
<p className="text-[10px] text-slate-600 dark:text-slate-400">
|
||
上传进度已自动保存，关闭网页后可恢复
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 ml-4">
|
||
<button
|
||
type="button"
|
||
onClick={handleCancelUpload}
|
||
className="px-4 py-2 text-base font-medium rounded-lg border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
|
||
>
|
||
{uploading ? '取消上传' : '取消'}
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
form="upload-form"
|
||
className="px-4 py-2 text-base font-medium rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
disabled={uploading}
|
||
>
|
||
{submitButtonLabel}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
|
||
<div>
|
||
<form id="upload-form" onSubmit={handleSubmit} className="p-6 space-y-6" noValidate>
|
||
{/* 素材模板 - 第一栏，让用户先选择模板 */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||
素材模板 *
|
||
</label>
|
||
{templates.length > 0 ? (
|
||
<select
|
||
value={selectedTemplateId}
|
||
onChange={(e) => handleTemplateChange(e.target.value)}
|
||
className={cn(
|
||
'w-full px-4 py-2 rounded-lg border outline-none',
|
||
styles.inputStyles.base
|
||
)}
|
||
required
|
||
>
|
||
<option value="">请选择模板</option>
|
||
{/* 自定义模板（放上面） */}
|
||
{templates
|
||
.filter(t => !(t as any).isBuiltin)
|
||
.map((template) => (
|
||
<option key={template.id} value={template.id}>
|
||
{template.name} [自定义]
|
||
</option>
|
||
))}
|
||
{/* 预制模板（放下面） */}
|
||
{templates
|
||
.filter(t => (t as any).isBuiltin)
|
||
.map((template) => (
|
||
<option key={template.id} value={template.id}>
|
||
{template.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
) : (
|
||
<div className="text-sm text-slate-500 dark:text-slate-400">
|
||
暂无可用模板，请联系管理员
|
||
</div>
|
||
)}
|
||
{selectedTemplate?.description && (
|
||
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||
{selectedTemplate.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* 预览图片和素材文件卡片 - 移到上方，样式与预览面板一致 */}
|
||
<div className="space-y-5">
|
||
{resolvedMaterialType !== 'PSD' && (
|
||
<div className="relative">
|
||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||
{isVideoTemplate ? '视频封面（预览图）' : '预览图片'}{' '}
|
||
{previewRequiredInUi ? (
|
||
<span className="text-red-500">*</span>
|
||
) : (
|
||
<span className="text-[10px] text-slate-400">(可选)</span>
|
||
)}
|
||
</label>
|
||
<div
|
||
ref={previewDropZoneRef}
|
||
className={uploadZoneClass}
|
||
onDragEnter={handlePreviewDragEnter}
|
||
onDragLeave={handlePreviewDragLeave}
|
||
onDragOver={handlePreviewDragOver}
|
||
onDrop={handlePreviewDrop}
|
||
onClick={() => previewInputRef.current?.click()}
|
||
>
|
||
<input
|
||
ref={previewInputRef}
|
||
type="file"
|
||
onChange={handlePreviewChange}
|
||
accept="image/*"
|
||
multiple
|
||
className="hidden"
|
||
/>
|
||
{previewImages.length === 0 ? (
|
||
<div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
|
||
<div className={cn(uploadTileClass, 'w-14 h-14 sm:w-16 sm:h-16')}>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
</div>
|
||
<div className="text-left flex-1 min-w-[200px] space-y-1">
|
||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300">
|
||
上传{isVideoTemplate ? '视频封面（可选，最多5张）' : '预览图（最多5张）'}
|
||
</p>
|
||
<p className="text-[10px] text-slate-500 dark:text-slate-500">
|
||
{isVideoTemplate
|
||
? '支持 JPG、PNG、WebP；不上传时系统会尝试自动截取封面'
|
||
: '支持 JPG、PNG、WebP，可拖拽上传'}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
previewInputRef.current?.click()
|
||
}}
|
||
className="inline-flex items-center text-[11px] font-medium text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100"
|
||
>
|
||
上传预览图
|
||
<svg className="w-3.5 h-3.5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v12m0 0l3-3m-3 3l-3-3M5 20h14" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="space-y-3">
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2">
|
||
{previewImages.map((img, index) => (
|
||
<div
|
||
key={index}
|
||
draggable
|
||
onDragStart={handlePreviewCardDragStart(index)}
|
||
onDragOver={handlePreviewCardDragOver(index)}
|
||
onDrop={handlePreviewCardDrop}
|
||
onDragEnd={handlePreviewCardDragEnd}
|
||
className={cn(
|
||
'relative group cursor-grab active:cursor-grabbing',
|
||
draggingPreviewIndex === index &&
|
||
'ring-2 ring-slate-500 rounded-lg'
|
||
)}
|
||
>
|
||
<div className="relative w-full aspect-square rounded-lg overflow-hidden border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||
<Image
|
||
src={previewUrls[index]}
|
||
alt={`Preview ${index + 1}`}
|
||
fill
|
||
unoptimized
|
||
className="object-cover"
|
||
/>
|
||
{index === 0 && (
|
||
<div className="absolute top-1 left-1 rounded bg-slate-800 px-1.5 py-0.5 text-[10px] text-white dark:bg-slate-100 dark:text-slate-900">
|
||
封面
|
||
</div>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
removePreviewImage(index)
|
||
}}
|
||
className="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-xs"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{previewImages.length < 5 && (
|
||
<button
|
||
type="button"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
previewInputRef.current?.click()
|
||
}}
|
||
className="w-full aspect-square rounded-lg border border-dashed border-slate-300 dark:border-slate-600 flex flex-col items-center justify-center gap-2 text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-800 hover:border-slate-400 hover:text-slate-700 dark:hover:border-slate-500 dark:hover:text-slate-200 transition-colors"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
<span className="text-[10px] font-medium">
|
||
{isVideoTemplate ? '添加封面' : '继续添加'}
|
||
</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="text-left mt-3">
|
||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300">
|
||
已上传 {previewImages.length}/5 张，第一张自动设为{isVideoTemplate ? '视频封面' : '卡片封面'}
|
||
</p>
|
||
<p className="text-[10px] text-slate-500 dark:text-slate-500 mt-0.5">
|
||
支持 JPG、PNG、WebP，可拖拽调整顺序
|
||
</p>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* PSD展示图片（仅PSD类型显示） */}
|
||
{resolvedMaterialType === 'PSD' && (
|
||
<div className="relative">
|
||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||
PSD展示图片 <span className="text-red-500">*</span>
|
||
</label>
|
||
<div
|
||
ref={displayImageDropZoneRef}
|
||
className={cn(
|
||
uploadZoneClass,
|
||
isDisplayImageDragging ? 'border-slate-500 bg-slate-50 dark:bg-slate-800' : ''
|
||
)}
|
||
onDragEnter={handleDisplayImageDragEnter}
|
||
onDragLeave={handleDisplayImageDragLeave}
|
||
onDragOver={handleDisplayImageDragOver}
|
||
onDrop={handleDisplayImageDrop}
|
||
onClick={() => displayImageInputRef.current?.click()}
|
||
>
|
||
<div className="flex items-center justify-center space-x-4">
|
||
{displayImageUrl ? (
|
||
<div className="relative w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-600 flex-shrink-0">
|
||
<Image src={displayImageUrl} alt="PSD 展示图" fill unoptimized className="object-cover" />
|
||
</div>
|
||
) : (
|
||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center flex-shrink-0">
|
||
<svg className="w-8 h-8 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
|
||
</div>
|
||
)}
|
||
<div className="text-left flex-1 min-w-0">
|
||
<input
|
||
ref={displayImageInputRef}
|
||
type="file"
|
||
onChange={handleDisplayImageChange}
|
||
accept="image/*"
|
||
className="hidden"
|
||
/>
|
||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300">上传 PSD 展示图</p>
|
||
<p className="text-[10px] text-slate-500 dark:text-slate-500 mt-0.5">支持 JPG、PNG、WebP；超高图片会自动切割</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 素材文件 */}
|
||
<div className="relative">
|
||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||
{isVideoTemplate ? '视频文件' : isAudioTemplate ? '音频文件' : '素材文件'}{' '}
|
||
{(() => {
|
||
if (isVideoTemplate || isAudioTemplate) {
|
||
return <span className="text-red-500">*</span>
|
||
}
|
||
const currentMaterialType = selectedTemplate?.materialType || materialType
|
||
return currentMaterialType === '模特' || currentMaterialType === '材质' ? '(可选)' : <span className="text-red-500">*</span>
|
||
})()}
|
||
{isParsingAudio && <span className="ml-2 text-slate-500 text-[10px]">正在解析音频信息...</span>}
|
||
</label>
|
||
<div
|
||
ref={dropZoneRef}
|
||
className={uploadZoneClass}
|
||
onDragEnter={handleDragEnter}
|
||
onDragLeave={handleDragLeave}
|
||
onDragOver={handleDragOver}
|
||
onDrop={handleDrop}
|
||
onClick={() => zipInputRef.current?.click()}
|
||
>
|
||
{zipFile ? (
|
||
<div className="flex items-center justify-center space-x-3">
|
||
<svg className="w-8 h-8 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||
</svg>
|
||
<div className="text-left flex-1 min-w-0">
|
||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300">{zipFile.name}</p>
|
||
<p className="text-[10px] text-slate-500 dark:text-slate-500 mt-0.5">{formatBytes(zipFile.size)}</p>
|
||
<button
|
||
type="button"
|
||
onClick={() => setZipFile(null)}
|
||
className="text-[10px] text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 mt-1"
|
||
>
|
||
移除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-center justify-center space-x-3">
|
||
<svg className="w-8 h-8 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||
</svg>
|
||
<div className="text-left flex-1 min-w-0">
|
||
<input
|
||
ref={zipInputRef}
|
||
type="file"
|
||
onChange={handleZipChange}
|
||
accept={isVideoTemplate ? VIDEO_ACCEPT_TYPES : isAudioTemplate ? AUDIO_ACCEPT_TYPES : '.zip,.rar,.7z,.7zip,.tar,.gz,.bz2,.pak'}
|
||
className="hidden"
|
||
/>
|
||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||
上传{isVideoTemplate ? '视频文件' : isAudioTemplate ? '音频文件' : '素材压缩包'}
|
||
</p>
|
||
<p className="text-[10px] text-slate-500 dark:text-slate-500 mt-0.5">
|
||
{isVideoTemplate ? '支持 MP4、MOV、AVI、MKV、WebM 等常见视频格式' : isAudioTemplate ? '支持 MP3、WAV、FLAC、AAC、M4A 等常见音频格式' : '支持 ZIP、RAR、7Z 等压缩格式'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 上传进度 - 移到素材文件上传区域下方 */}
|
||
{(uploading || uploadComplete) && (
|
||
<div className="space-y-2 mt-4">
|
||
<div className="flex justify-between text-sm text-slate-600 dark:text-slate-400">
|
||
<span>{uploadComplete ? '上传完成' : '上传进度'}</span>
|
||
<span>{uploadProgress}%</span>
|
||
</div>
|
||
<div className="h-2.5 w-full overflow-hidden rounded-sm bg-slate-200 dark:bg-slate-700">
|
||
<div
|
||
className={`h-2.5 rounded-sm transition-[width] duration-300 ${
|
||
uploadComplete
|
||
? 'bg-green-500'
|
||
: 'bg-slate-600 dark:bg-slate-400'
|
||
}`}
|
||
style={{ width: `${uploadProgress}%` }}
|
||
></div>
|
||
</div>
|
||
{!uploadComplete && !isPostProcessing && (
|
||
<div className="text-sm text-slate-500 dark:text-slate-400 text-right">
|
||
速度: {formatSpeed(uploadSpeed)}
|
||
</div>
|
||
)}
|
||
{isPostProcessing && (
|
||
<div className="text-xs text-amber-600 dark:text-amber-300 text-center font-medium">
|
||
{postProcessingMessage}
|
||
</div>
|
||
)}
|
||
{uploadComplete && (
|
||
<div className="text-sm text-green-600 dark:text-green-400 text-center font-medium">
|
||
上传成功，正在关闭...
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Error Message - 移到素材文件上传区域下方 */}
|
||
{error && (
|
||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg mt-4">
|
||
{error}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 动态渲染模板字段 */}
|
||
{selectedTemplate && selectedTemplate.fields && selectedTemplate.fields.length > 0 && (
|
||
<div className="space-y-4">
|
||
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||
<h3 className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-4">
|
||
模板字段
|
||
</h3>
|
||
<div className="space-y-4">
|
||
{visibleTemplateFields.map((field: any) => {
|
||
const fieldValue = templateFieldValues[field.key] || ''
|
||
const isHalfWidth = field.layoutWidth === 'half'
|
||
const fieldInputId = `upload-template-field-${field.id || field.key}`
|
||
|
||
return (
|
||
<div
|
||
key={field.id}
|
||
className={isHalfWidth ? 'w-full sm:w-1/2 inline-block sm:pr-2' : 'w-full'}
|
||
>
|
||
<div className="space-y-2.5">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<label
|
||
htmlFor={field.type === 'radio' ? undefined : fieldInputId}
|
||
className="text-xs font-semibold text-slate-800 dark:text-slate-200 tracking-tight"
|
||
>
|
||
{field.label}
|
||
</label>
|
||
{field.required && (
|
||
<span className="inline-flex items-center px-2 py-0.5 rounded-md border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 text-[11px] font-medium text-slate-600 dark:text-slate-300">
|
||
必填
|
||
</span>
|
||
)}
|
||
</div>
|
||
{field.type === 'text' || field.type === 'uppercase' ? (
|
||
<input
|
||
id={fieldInputId}
|
||
type="text"
|
||
value={fieldValue}
|
||
onChange={(e) => {
|
||
const value = field.type === 'uppercase'
|
||
? e.target.value.toUpperCase()
|
||
: e.target.value
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: value,
|
||
})
|
||
}}
|
||
required={field.required}
|
||
placeholder={
|
||
field.key === 'imageResolution'
|
||
? '例如：5000 * 5000'
|
||
: `请输入${field.label || field.key}`
|
||
}
|
||
className={cn(
|
||
modalControlClass,
|
||
field.required ? requiredControlClass : null,
|
||
field.type === 'uppercase' && 'uppercase'
|
||
)}
|
||
/>
|
||
) : field.type === 'textarea' ? (
|
||
<textarea
|
||
id={fieldInputId}
|
||
value={fieldValue}
|
||
onChange={(e) => {
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: e.target.value,
|
||
})
|
||
}}
|
||
required={field.required}
|
||
placeholder={`请输入${field.label || field.key}`}
|
||
rows={2}
|
||
className={cn(
|
||
modalControlClass,
|
||
'resize-none',
|
||
field.required ? requiredControlClass : null
|
||
)}
|
||
/>
|
||
) : field.type === 'number' ? (
|
||
<input
|
||
id={fieldInputId}
|
||
type="number"
|
||
value={fieldValue}
|
||
onChange={(e) => {
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: e.target.value,
|
||
})
|
||
}}
|
||
required={field.required}
|
||
placeholder={`请输入${field.label || field.key}`}
|
||
className={cn(
|
||
modalControlClass,
|
||
field.required ? requiredControlClass : null
|
||
)}
|
||
/>
|
||
) : field.type === 'select' ? (
|
||
<select
|
||
id={fieldInputId}
|
||
value={fieldValue}
|
||
onChange={(e) => {
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: e.target.value,
|
||
})
|
||
}}
|
||
required={field.required}
|
||
className={cn(
|
||
modalControlClass,
|
||
field.required ? requiredControlClass : null
|
||
)}
|
||
>
|
||
<option value="">请选择</option>
|
||
{(() => {
|
||
// 如果字段勾选了 addToCategory，优先使用从模板分类API获取的选项
|
||
if (field.addToCategory && templateCategoryOptions[field.key]) {
|
||
return templateCategoryOptions[field.key].map((opt: string) => (
|
||
<option key={opt} value={opt}>
|
||
{opt}
|
||
</option>
|
||
))
|
||
}
|
||
// 否则使用模板中的 optionsStatic
|
||
if (field.optionsStatic) {
|
||
try {
|
||
const options = typeof field.optionsStatic === 'string'
|
||
? JSON.parse(field.optionsStatic)
|
||
: field.optionsStatic
|
||
return Array.isArray(options)
|
||
? options.map((opt: string) => (
|
||
<option key={opt} value={opt}>
|
||
{opt}
|
||
</option>
|
||
))
|
||
: null
|
||
} catch {
|
||
return null
|
||
}
|
||
}
|
||
return null
|
||
})()}
|
||
</select>
|
||
) : field.type === 'checkbox' ? (
|
||
<label className="flex items-center space-x-2">
|
||
<input
|
||
id={fieldInputId}
|
||
type="checkbox"
|
||
checked={fieldValue || false}
|
||
onChange={(e) => {
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: e.target.checked,
|
||
})
|
||
}}
|
||
className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
|
||
/>
|
||
<span className="text-sm text-slate-700 dark:text-slate-300">
|
||
{field.label}
|
||
</span>
|
||
</label>
|
||
) : field.type === 'radio' ? (
|
||
<div className="space-y-2">
|
||
{field.optionsStatic ? (
|
||
(() => {
|
||
try {
|
||
const options = typeof field.optionsStatic === 'string'
|
||
? JSON.parse(field.optionsStatic)
|
||
: field.optionsStatic
|
||
return Array.isArray(options)
|
||
? options.map((opt: string) => (
|
||
<label key={opt} className="flex items-center space-x-2">
|
||
<input
|
||
type="radio"
|
||
name={field.key}
|
||
value={opt}
|
||
checked={fieldValue === opt}
|
||
onChange={(e) => {
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: e.target.value,
|
||
})
|
||
}}
|
||
required={field.required}
|
||
className="w-4 h-4"
|
||
/>
|
||
<span className="text-sm text-slate-700 dark:text-slate-300">
|
||
{opt}
|
||
</span>
|
||
</label>
|
||
))
|
||
: null
|
||
} catch {
|
||
return null
|
||
}
|
||
})()
|
||
) : null}
|
||
</div>
|
||
) : field.type === 'date' ? (
|
||
<input
|
||
id={fieldInputId}
|
||
type="date"
|
||
value={fieldValue}
|
||
onChange={(e) => {
|
||
setTemplateFieldValues({
|
||
...templateFieldValues,
|
||
[field.key]: e.target.value,
|
||
})
|
||
}}
|
||
required={field.required}
|
||
className={cn(
|
||
modalControlClass,
|
||
field.required ? requiredControlClass : null
|
||
)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</>
|
||
)
|
||
}
|