489 lines
16 KiB
TypeScript
489 lines
16 KiB
TypeScript
/**
|
||
* 上传表单字段组件
|
||
* 包含 SPU、店铺、场景、平台、品类、渲染器等表单字段
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { useState, useEffect, useRef } from 'react'
|
||
import { requiresCategoryAndScene, requiresProductCategoryName, requiresRenderer, shouldAutoFillGeneral } from '@/lib/material-validation'
|
||
import {
|
||
fieldControlClass,
|
||
fieldErrorClass,
|
||
fieldHintClass,
|
||
fieldLabelClass,
|
||
inkButtonClass,
|
||
outlineButtonClass,
|
||
} from '@/components/upload/upload-field-styles'
|
||
import { parseSPU, type SPUParseResult } from '@/lib/spu-parser'
|
||
import { isVideoMaterialType } from '@/lib/video-material-types'
|
||
import {
|
||
getSpuProductModelValidationError,
|
||
isPlausibleSpuProductModel,
|
||
normalizeSpuProductModel,
|
||
} from '@/lib/product-model'
|
||
|
||
/**
|
||
* 分类数据项
|
||
*/
|
||
interface CategoryItem {
|
||
id: string
|
||
name: string
|
||
}
|
||
|
||
/**
|
||
* 表单字段 Props
|
||
*/
|
||
export interface UploadFormProps {
|
||
/** 素材类型 */
|
||
materialType: string
|
||
/** SPU型号 */
|
||
productModel: string
|
||
/** 店铺名称 */
|
||
categoryName: string
|
||
/** 场景名称 */
|
||
sceneName: string
|
||
/** 平台名称 */
|
||
platformName: string
|
||
/** 品类名称 */
|
||
productCategoryName: string
|
||
/** 渲染器 */
|
||
renderer: string
|
||
/** SKU（视频类素材和任务-详情使用） */
|
||
sku?: string
|
||
/** 店铺列表 */
|
||
categories: CategoryItem[]
|
||
/** 场景列表 */
|
||
scenes: CategoryItem[]
|
||
/** 平台列表 */
|
||
platforms: CategoryItem[]
|
||
/** 品类列表 */
|
||
productCategories: CategoryItem[]
|
||
/** 是否批量模式（批量模式下隐藏部分字段） */
|
||
isBatchMode?: boolean
|
||
/** SPU变更回调 */
|
||
onProductModelChange: (value: string) => void
|
||
/** 店铺变更回调 */
|
||
onCategoryChange: (value: string) => void
|
||
/** 场景变更回调 */
|
||
onSceneChange: (value: string) => void
|
||
/** 平台变更回调 */
|
||
onPlatformChange: (value: string) => void
|
||
/** 品类变更回调 */
|
||
onProductCategoryChange: (value: string) => void
|
||
/** 渲染器变更回调 */
|
||
onRendererChange: (value: string) => void
|
||
/** SKU变更回调 */
|
||
onSkuChange?: (value: string) => void
|
||
/** 添加店铺回调 */
|
||
onAddCategory: (name: string) => Promise<void>
|
||
/** 添加场景回调 */
|
||
onAddScene: (name: string) => Promise<void>
|
||
}
|
||
|
||
/**
|
||
* 上传表单字段组件
|
||
*/
|
||
export default function UploadForm({
|
||
materialType,
|
||
productModel,
|
||
categoryName,
|
||
sceneName,
|
||
platformName,
|
||
productCategoryName,
|
||
renderer,
|
||
sku = '',
|
||
categories,
|
||
scenes,
|
||
platforms,
|
||
productCategories,
|
||
isBatchMode = false,
|
||
onProductModelChange,
|
||
onCategoryChange,
|
||
onSceneChange,
|
||
onPlatformChange,
|
||
onProductCategoryChange,
|
||
onRendererChange,
|
||
onSkuChange,
|
||
onAddCategory,
|
||
onAddScene,
|
||
}: UploadFormProps) {
|
||
// 新建店铺/场景输入状态
|
||
const [showNewCategoryInput, setShowNewCategoryInput] = useState(false)
|
||
const [newCategoryName, setNewCategoryName] = useState('')
|
||
const [showNewSceneInput, setShowNewSceneInput] = useState(false)
|
||
const [newSceneName, setNewSceneName] = useState('')
|
||
|
||
// SPU 自动识别状态
|
||
const [spuParseResult, setSpuParseResult] = useState<SPUParseResult | null>(null)
|
||
const [shopAutoFilled, setShopAutoFilled] = useState(false)
|
||
const [categoryAutoFilled, setCategoryAutoFilled] = useState(false)
|
||
const lastParsedSPU = useRef<string>('')
|
||
|
||
const isAutoGeneralType = shouldAutoFillGeneral(materialType)
|
||
|
||
// SPU 变化时自动解析并填充店铺和品类
|
||
useEffect(() => {
|
||
// 避免重复解析相同的 SPU
|
||
if (productModel === lastParsedSPU.current) {
|
||
return
|
||
}
|
||
lastParsedSPU.current = productModel
|
||
|
||
// 材质类型不需要解析
|
||
if (materialType === '材质' || !productModel) {
|
||
setSpuParseResult(null)
|
||
setShopAutoFilled(false)
|
||
setCategoryAutoFilled(false)
|
||
return
|
||
}
|
||
|
||
const result = parseSPU(productModel)
|
||
setSpuParseResult(result)
|
||
|
||
// 自动填充店铺（如果识别成功且店铺列表中存在该店铺）
|
||
if (result.shopMatched && result.shopName) {
|
||
const shopExists = categories.some(c => c.name === result.shopName)
|
||
if (shopExists && categoryName !== result.shopName) {
|
||
onCategoryChange(result.shopName)
|
||
setShopAutoFilled(true)
|
||
} else if (!shopExists) {
|
||
// 店铺不在列表中，清除自动填充标记
|
||
setShopAutoFilled(false)
|
||
}
|
||
} else {
|
||
setShopAutoFilled(false)
|
||
}
|
||
|
||
// 自动填充品类（如果识别成功且品类列表中存在该品类）
|
||
if (result.categoryMatched && result.categoryName) {
|
||
const categoryExists = productCategories.some(c => c.name === result.categoryName)
|
||
if (categoryExists && productCategoryName !== result.categoryName) {
|
||
onProductCategoryChange(result.categoryName)
|
||
setCategoryAutoFilled(true)
|
||
} else if (!categoryExists) {
|
||
// 品类不在列表中，清除自动填充标记
|
||
setCategoryAutoFilled(false)
|
||
}
|
||
} else {
|
||
setCategoryAutoFilled(false)
|
||
}
|
||
}, [productModel, materialType, categories, productCategories, categoryName, productCategoryName, onCategoryChange, onProductCategoryChange])
|
||
|
||
// 处理添加新店铺
|
||
const handleAddNewCategory = async () => {
|
||
if (!newCategoryName.trim()) return
|
||
await onAddCategory(newCategoryName.trim())
|
||
setNewCategoryName('')
|
||
setShowNewCategoryInput(false)
|
||
}
|
||
|
||
// 处理添加新场景
|
||
const handleAddNewScene = async () => {
|
||
if (!newSceneName.trim()) return
|
||
await onAddScene(newSceneName.trim())
|
||
setNewSceneName('')
|
||
setShowNewSceneInput(false)
|
||
}
|
||
|
||
// 批量模式下不显示这些字段
|
||
if (isBatchMode) {
|
||
return null
|
||
}
|
||
|
||
// 品牌VI灵感类型：只显示SPU和品类
|
||
const isBrandVI = materialType === '品牌VI灵感'
|
||
|
||
return (
|
||
<>
|
||
{/* SPU 或材质名称 */}
|
||
<div>
|
||
<label htmlFor="productModel" className={fieldLabelClass}>
|
||
{materialType === '材质' ? '材质名称 *' : 'SPU型号 *'}
|
||
</label>
|
||
<input
|
||
id="productModel"
|
||
type="text"
|
||
value={productModel}
|
||
onChange={(e) => {
|
||
// 材质类型支持中文，其他类型只允许英文、数字和常见符号
|
||
if (materialType === '材质') {
|
||
onProductModelChange(e.target.value)
|
||
} else {
|
||
const value = normalizeSpuProductModel(e.target.value)
|
||
onProductModelChange(value)
|
||
}
|
||
}}
|
||
maxLength={100}
|
||
aria-invalid={isVideoMaterialType(materialType) && productModel.length > 0 && !isPlausibleSpuProductModel(productModel)}
|
||
aria-describedby={isVideoMaterialType(materialType) ? 'product-model-hint' : undefined}
|
||
className={fieldControlClass}
|
||
placeholder="例如：DF-A3DZ0008"
|
||
/>
|
||
{isVideoMaterialType(materialType) && (
|
||
<p
|
||
id="product-model-hint"
|
||
className={`mt-2 ${
|
||
productModel && !isPlausibleSpuProductModel(productModel)
|
||
? fieldErrorClass
|
||
: fieldHintClass
|
||
}`}
|
||
role={productModel && !isPlausibleSpuProductModel(productModel) ? 'alert' : undefined}
|
||
>
|
||
{productModel
|
||
? getSpuProductModelValidationError(productModel) || '格式正确；英文字母已自动转成大写。'
|
||
: '请填写真实 SPU；英文字母会自动转成大写，纯数字或文件尾号不能作为 SPU。'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* SKU字段（视频类素材使用） */}
|
||
{isVideoMaterialType(materialType) && (
|
||
<div>
|
||
<label htmlFor="sku" className={fieldLabelClass}>
|
||
SKU <span className={`ml-1 font-normal ${fieldHintClass}`}>(可选，多个用逗号分隔)</span>
|
||
</label>
|
||
<input
|
||
id="sku"
|
||
type="text"
|
||
value={sku}
|
||
onChange={(e) => onSkuChange?.(e.target.value)}
|
||
className={fieldControlClass}
|
||
placeholder="例如：SKU001,SKU002,SKU003"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 品类分类（标准模型必填，其他类型可选） */}
|
||
{productCategories.length > 0 && (
|
||
<div>
|
||
<label htmlFor="productCategoryName" className={fieldLabelClass}>
|
||
品类{requiresProductCategoryName(materialType) ? ' *' : '（可选）'}
|
||
{categoryAutoFilled && (
|
||
<span className={`ml-2 font-normal ${fieldHintClass}`}>
|
||
已自动识别
|
||
</span>
|
||
)}
|
||
</label>
|
||
<select
|
||
id="productCategoryName"
|
||
value={productCategoryName}
|
||
onChange={(e) => {
|
||
onProductCategoryChange(e.target.value)
|
||
setCategoryAutoFilled(false)
|
||
}}
|
||
className={fieldControlClass}
|
||
>
|
||
<option value="">{requiresProductCategoryName(materialType) ? '请选择品类' : '不选择品类'}</option>
|
||
{productCategories.map((category) => (
|
||
<option key={category.id} value={category.name}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
)}
|
||
|
||
{/* 使用店铺（品牌VI灵感不显示，其他类型按需显示） */}
|
||
{!isBrandVI && requiresCategoryAndScene(materialType) && (
|
||
<div>
|
||
<label htmlFor="categoryName" className={fieldLabelClass}>
|
||
使用店铺 *
|
||
{shopAutoFilled && (
|
||
<span className={`ml-2 font-normal ${fieldHintClass}`}>
|
||
已自动识别
|
||
</span>
|
||
)}
|
||
</label>
|
||
{showNewCategoryInput ? (
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={newCategoryName}
|
||
onChange={(e) => setNewCategoryName(e.target.value)}
|
||
className={`flex-1 ${fieldControlClass}`}
|
||
placeholder="输入新店铺名称"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleAddNewCategory}
|
||
className={inkButtonClass}
|
||
>
|
||
添加
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowNewCategoryInput(false)
|
||
setNewCategoryName('')
|
||
}}
|
||
className={outlineButtonClass}
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex gap-2">
|
||
<select
|
||
id="categoryName"
|
||
value={categoryName}
|
||
onChange={(e) => {
|
||
onCategoryChange(e.target.value)
|
||
setShopAutoFilled(false)
|
||
}}
|
||
disabled={isAutoGeneralType}
|
||
className={`flex-1 ${fieldControlClass} ${isAutoGeneralType ? 'cursor-not-allowed opacity-70' : ''}`}
|
||
>
|
||
{isAutoGeneralType ? (
|
||
<option value="通用">通用</option>
|
||
) : (
|
||
<>
|
||
<option value="">选择使用店铺</option>
|
||
{categories.map((category) => (
|
||
<option key={category.id} value={category.name}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</>
|
||
)}
|
||
</select>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowNewCategoryInput(true)}
|
||
className={`${outlineButtonClass} whitespace-nowrap`}
|
||
disabled={isAutoGeneralType}
|
||
>
|
||
新建店铺
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 场景类别（品牌VI灵感、材质类型和标准模型不需要） */}
|
||
{!isBrandVI && requiresCategoryAndScene(materialType) && (
|
||
<div>
|
||
<label htmlFor="sceneName" className={fieldLabelClass}>
|
||
场景类别 *
|
||
</label>
|
||
{showNewSceneInput ? (
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={newSceneName}
|
||
onChange={(e) => setNewSceneName(e.target.value)}
|
||
className={`flex-1 ${fieldControlClass}`}
|
||
placeholder="输入新场景类别"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleAddNewScene}
|
||
className={inkButtonClass}
|
||
>
|
||
添加
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowNewSceneInput(false)
|
||
setNewSceneName('')
|
||
}}
|
||
className={outlineButtonClass}
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex gap-2">
|
||
<select
|
||
id="sceneName"
|
||
value={sceneName}
|
||
onChange={(e) => onSceneChange(e.target.value)}
|
||
disabled={isAutoGeneralType}
|
||
className={`flex-1 ${fieldControlClass} ${isAutoGeneralType ? 'cursor-not-allowed opacity-70' : ''}`}
|
||
>
|
||
{isAutoGeneralType ? (
|
||
<option value="通用">通用</option>
|
||
) : (
|
||
<>
|
||
<option value="">选择场景类别</option>
|
||
{scenes.map((scene) => (
|
||
<option key={scene.id} value={scene.name}>
|
||
{scene.name}
|
||
</option>
|
||
))}
|
||
</>
|
||
)}
|
||
</select>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowNewSceneInput(true)}
|
||
className={`${outlineButtonClass} whitespace-nowrap`}
|
||
disabled={isAutoGeneralType}
|
||
>
|
||
新建场景
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 平台分类（可选，品牌VI灵感不显示，其他类型按需显示） */}
|
||
{!isBrandVI && platforms.length > 0 && !requiresProductCategoryName(materialType) && (
|
||
<div>
|
||
<label htmlFor="platformName" className={fieldLabelClass}>
|
||
平台分类（可选）
|
||
</label>
|
||
<select
|
||
id="platformName"
|
||
value={platformName}
|
||
onChange={(e) => onPlatformChange(e.target.value)}
|
||
className={fieldControlClass}
|
||
>
|
||
<option value="">不选择平台</option>
|
||
{platforms.map((platform) => (
|
||
<option key={platform.id} value={platform.name}>
|
||
{platform.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
)}
|
||
|
||
{/* 渲染器（仅3D场景显示） */}
|
||
{requiresRenderer(materialType) && (
|
||
<div>
|
||
<label htmlFor="renderer" className={fieldLabelClass}>
|
||
渲染器 *
|
||
</label>
|
||
<select
|
||
id="renderer"
|
||
value={renderer}
|
||
onChange={(e) => onRendererChange(e.target.value)}
|
||
className={fieldControlClass}
|
||
>
|
||
<option value="CR">CR</option>
|
||
<option value="VR">VR</option>
|
||
<option value="其它">其它</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
|
||
{/* 标准模型说明 */}
|
||
{requiresProductCategoryName(materialType) && (
|
||
<div className="rounded-[8px] border border-[#e7e8ea] bg-[#fafafa] p-4">
|
||
<p className="mb-2 text-[13px] font-medium text-[#1a1c1d]">
|
||
标准模型怎么传
|
||
</p>
|
||
<ul className={`list-inside list-disc space-y-1 ${fieldHintClass}`}>
|
||
<li>以产品型号（SPU）为基准创建模型合集</li>
|
||
<li>上传时只需填写 SPU 型号和预览图</li>
|
||
<li>创建后在详情页添加各个 SKU 的模型文件</li>
|
||
<li>每个 SKU 需要单独的预览图和压缩包</li>
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</>
|
||
)
|
||
}
|