From 720c163a6be8fdd8fb65455e425f8d576fa06c06 Mon Sep 17 00:00:00 2001
From: WuYongJie <wuyongjie@example.com>
Date: Mon, 25 May 2026 16:45:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=A8=A1=E6=9D=BF=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E5=89=8D=E7=AB=AF=E4=BA=A4=E4=BA=92=E5=B9=B6=E6=94=B6?=
 =?UTF-8?q?=E6=95=9B=E9=A2=84=E8=A7=88=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/EditMaterialModal.tsx              | 146 +++---
 components/MaterialPreviewModal.tsx           |  77 +--
 components/UploadModal.tsx                    | 137 +++--
 .../__tests__/EditMaterialModal.test.tsx      | 490 ++++++++++++++++++
 components/__tests__/UploadModal.test.tsx     | 247 +++++++++
 5 files changed, 958 insertions(+), 139 deletions(-)
 create mode 100644 components/__tests__/UploadModal.test.tsx

diff --git a/components/EditMaterialModal.tsx b/components/EditMaterialModal.tsx
index f180b30..e3ecd58 100644
--- a/components/EditMaterialModal.tsx
+++ b/components/EditMaterialModal.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import Image from 'next/image'
 import Modal from '@/components/ui/Modal'
 import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
+import { filterVisibleFieldValues, getVisibleTemplateFields, hasFieldValue } from '@/lib/field-conditions'
 
 interface EditMaterialModalProps {
   material: {
@@ -24,6 +25,7 @@ interface EditMaterialModalProps {
     colorMode?: string | null
     templateId?: string | null
     platformName?: string | null
+    templateFields?: Record<string, any>
     // 音频相关字段
     audioDuration?: string | null
     audioCategory?: string | null
@@ -46,6 +48,11 @@ type UploadTemplateOption = {
 export default function EditMaterialModal({ material, onClose, onSuccess, isOpen = true }: EditMaterialModalProps) {
   const styles = useThemeStyles()
   const theme = useTheme()
+  const controlClass =
+    '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-400 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-300 dark:border-slate-600'
+  const requiredBadgeClass =
+    '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-[10px] font-medium text-slate-600 dark:text-slate-300'
   const [previewImage, setPreviewImage] = useState<File | null>(null)
   const [previewUrl, setPreviewUrl] = useState<string>(material.previewUrl)
   const [templateFieldValues, setTemplateFieldValues] = useState<Record<string, any>>({})
@@ -57,10 +64,15 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
   const [success, setSuccess] = useState('')
 
   const previewInputRef = useRef<HTMLInputElement>(null)
+  const visibleTemplateFields = useMemo(() => {
+    if (!selectedTemplate?.fields?.length) return []
+    return getVisibleTemplateFields(selectedTemplate.fields, templateFieldValues)
+  }, [selectedTemplate, templateFieldValues])
 
   // 初始化字段值
   useEffect(() => {
     const initialValues: Record<string, any> = {
+      ...(material.templateFields || {}),
       productModel: material.productModel,
       brandName: material.brandName || '',
       seriesName: material.seriesName || '',
@@ -103,39 +115,48 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
           setTemplateCategoryOptions(map)
         }
 
-        // 如果有templateId，加载模板
+        const setTemplateFromData = (templateData: any) => {
+          setSelectedTemplate({
+            id: templateData.id,
+            name: templateData.name,
+            description: templateData.description,
+            materialType: templateData.materialType,
+            fields: templateData.fields || [],
+            isBuiltin: templateData.isBuiltin,
+          })
+        }
+
+        const loadPublicTemplates = async () => {
+          const templatesResponse = await fetch('/api/upload-templates')
+          if (!templatesResponse.ok) {
+            return []
+          }
+          const templatesData = await templatesResponse.json()
+          return Array.isArray(templatesData) ? templatesData : []
+        }
+
+        // 如果有templateId，优先从普通用户可访问的模板列表加载
         if (material.templateId) {
-          const templateResponse = await fetch(`/api/admin/upload-templates/${material.templateId}`)
-          if (templateResponse.ok) {
-            const templateData = await templateResponse.json()
-            setSelectedTemplate({
-              id: templateData.id,
-              name: templateData.name,
-              description: templateData.description,
-              materialType: templateData.materialType,
-              fields: templateData.fields || [],
-              isBuiltin: templateData.isBuiltin,
-            })
+          const templates = await loadPublicTemplates()
+          const matchingTemplate = templates.find((t: any) => t.id === material.templateId)
+
+          if (matchingTemplate) {
+            setTemplateFromData(matchingTemplate)
+          } else {
+            const templateResponse = await fetch(`/api/admin/upload-templates/${material.templateId}`)
+            if (templateResponse.ok) {
+              const templateData = await templateResponse.json()
+              setTemplateFromData(templateData)
+            }
           }
         } else {
           // 如果没有templateId，尝试根据materialType查找匹配的模板
-          const templatesResponse = await fetch('/api/upload-templates')
-          if (templatesResponse.ok) {
-            const templatesData = await templatesResponse.json()
-            const templates = Array.isArray(templatesData) ? templatesData : []
-            const matchingTemplate = templates.find(
-              (t: any) => t.materialType === material.materialType && t.status === 'active'
-            )
-            if (matchingTemplate) {
-              setSelectedTemplate({
-                id: matchingTemplate.id,
-                name: matchingTemplate.name,
-                description: matchingTemplate.description,
-                materialType: matchingTemplate.materialType,
-                fields: matchingTemplate.fields || [],
-                isBuiltin: matchingTemplate.isBuiltin,
-              })
-            }
+          const templates = await loadPublicTemplates()
+          const matchingTemplate = templates.find(
+            (t: any) => t.materialType === material.materialType && t.status === 'active'
+          )
+          if (matchingTemplate) {
+            setTemplateFromData(matchingTemplate)
           }
         }
       } catch (error) {
@@ -166,10 +187,10 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
     setSuccess('')
 
     // 验证必填字段
-    const requiredFields = selectedTemplate?.fields.filter((f: any) => f.required) || []
+    const requiredFields = visibleTemplateFields.filter((f: any) => f.required)
     for (const field of requiredFields) {
       const value = templateFieldValues[field.key]
-      if (!value || (typeof value === 'string' && value.trim() === '')) {
+      if (!hasFieldValue(value, field.type)) {
         setError(`请填写必填字段：${field.label}`)
         return
       }
@@ -180,13 +201,21 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
     try {
       const formData = new FormData()
       formData.append('id', material.id)
+      if (selectedTemplate?.id) {
+        formData.append('templateId', selectedTemplate.id)
+      }
       
       // 添加所有模板字段值
-      Object.entries(templateFieldValues).forEach(([key, value]) => {
+      const visibleTemplateFieldValues = selectedTemplate?.fields?.length
+        ? filterVisibleFieldValues(selectedTemplate.fields, templateFieldValues)
+        : templateFieldValues
+
+      Object.entries(visibleTemplateFieldValues).forEach(([key, value]) => {
         if (value !== null && value !== undefined) {
           formData.append(key, String(value))
         }
       })
+      formData.append('templateFields', JSON.stringify(visibleTemplateFieldValues))
       
       if (previewImage) {
         formData.append('previewImage', previewImage)
@@ -219,6 +248,7 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
   const renderTemplateField = (field: any) => {
     const fieldValue = templateFieldValues[field.key] || ''
     const isHalfWidth = field.layoutWidth === 'half'
+    const fieldInputId = `edit-template-field-${field.id || field.key}`
 
     return (
       <div
@@ -227,17 +257,21 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
       >
         <div className="space-y-2.5">
           <div className="flex items-center justify-between gap-3">
-            <label className="text-xs font-semibold text-slate-800 dark:text-slate-200 tracking-tight">
+            <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-full text-[10px] font-semibold uppercase tracking-[0.18em] text-white bg-gradient-to-r from-purple-500 to-indigo-600 shadow-[0_8px_16px_rgba(79,70,229,0.35)]">
+              <span className={requiredBadgeClass}>
                 必填
               </span>
             )}
           </div>
           {field.type === 'text' || field.type === 'uppercase' ? (
             <input
+              id={fieldInputId}
               type="text"
               value={fieldValue}
               onChange={(e) => {
@@ -256,15 +290,14 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
                   : `请输入${field.label || field.key}`
               }
               className={cn(
-                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60',
-                field.required
-                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                  : 'bg-white/90 dark:bg-slate-800/80',
+                controlClass,
+                field.required ? requiredControlClass : null,
                 field.type === 'uppercase' && 'uppercase'
               )}
             />
           ) : field.type === 'textarea' ? (
             <textarea
+              id={fieldInputId}
               value={fieldValue}
               onChange={(e) => {
                 setTemplateFieldValues({
@@ -276,14 +309,14 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
               placeholder={`请输入${field.label || field.key}`}
               rows={2}
               className={cn(
-                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60 resize-none',
-                field.required
-                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                  : 'bg-white/90 dark:bg-slate-800/80'
+                controlClass,
+                field.required ? requiredControlClass : null,
+                'resize-none'
               )}
             />
           ) : field.type === 'number' ? (
             <input
+              id={fieldInputId}
               type="number"
               value={fieldValue}
               onChange={(e) => {
@@ -295,14 +328,13 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
               required={field.required}
               placeholder={`请输入${field.label || field.key}`}
               className={cn(
-                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60',
-                field.required
-                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                  : 'bg-white/90 dark:bg-slate-800/80'
+                controlClass,
+                field.required ? requiredControlClass : null
               )}
             />
           ) : field.type === 'select' ? (
             <select
+              id={fieldInputId}
               value={fieldValue}
               onChange={(e) => {
                 setTemplateFieldValues({
@@ -312,10 +344,8 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
               }}
               required={field.required}
               className={cn(
-                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60',
-                field.required
-                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                  : 'bg-white/90 dark:bg-slate-800/80'
+                controlClass,
+                field.required ? requiredControlClass : null
               )}
             >
               <option value="">请选择</option>
@@ -351,6 +381,7 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
           ) : field.type === 'checkbox' ? (
             <label className="flex items-center space-x-2">
               <input
+                id={fieldInputId}
                 type="checkbox"
                 checked={fieldValue || false}
                 onChange={(e) => {
@@ -361,7 +392,7 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
                 }}
                 className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
               />
-              <span className="text-sm text-slate-700 dark:text-slate-300">
+                <span className="text-sm text-slate-700 dark:text-slate-300">
                 {field.label}
               </span>
             </label>
@@ -404,6 +435,7 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
             </div>
           ) : field.type === 'date' ? (
             <input
+              id={fieldInputId}
               type="date"
               value={fieldValue}
               onChange={(e) => {
@@ -414,10 +446,8 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
               }}
               required={field.required}
               className={cn(
-                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60',
-                field.required
-                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                  : 'bg-white/90 dark:bg-slate-800/80'
+                controlClass,
+                field.required ? requiredControlClass : null
               )}
             />
           ) : null}
@@ -435,7 +465,7 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
       title="编辑素材"
       bodyClassName="max-h-[70vh] overflow-y-auto"
     >
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-6" noValidate>
         {error && (
           <div className={cn(
             'px-4 py-3 rounded-xl border',
@@ -510,7 +540,7 @@ export default function EditMaterialModal({ material, onClose, onSuccess, isOpen
                 模板字段
               </h3>
               <div className="space-y-4">
-                {selectedTemplate.fields.map((field: any) => renderTemplateField(field))}
+                {visibleTemplateFields.map((field: any) => renderTemplateField(field))}
               </div>
             </div>
           </div>
diff --git a/components/MaterialPreviewModal.tsx b/components/MaterialPreviewModal.tsx
index 5c4a5e5..5370513 100644
--- a/components/MaterialPreviewModal.tsx
+++ b/components/MaterialPreviewModal.tsx
@@ -51,7 +51,7 @@ interface PreviewMaterialInfo {
   createdAt?: string
   zipFileName?: string
   zipFileSize?: string | number
-  rankingBadges?: Array<{ label: string; gradient: string }>
+  rankingBadges?: Array<{ label: string }>
   isPremium?: boolean
   isFavorited?: boolean
   user?: {
@@ -272,13 +272,10 @@ export default function MaterialPreviewModal({
   const rankingBadges = material?.rankingBadges ?? []
   const downloadBadges = rankingBadges.filter((badge) => badge.label.includes('下载'))
   const likeBadges = rankingBadges.filter((badge) => badge.label.includes('点赞'))
-  const renderBadgeChip = (badge: { label: string; gradient: string }) => (
+  const renderBadgeChip = (badge: { label: string }) => (
     <span
       key={badge.label}
-      className={cn(
-        'px-3 py-1 text-[11px] font-semibold text-white rounded-full shadow-sm bg-gradient-to-r',
-        badge.gradient
-      )}
+      className="px-3 py-1 text-[11px] font-semibold text-white rounded-full shadow-sm bg-slate-900/80"
     >
       {badge.label}
     </span>
@@ -323,14 +320,14 @@ export default function MaterialPreviewModal({
         >
           <div className={cn('w-auto', isAudioMaterial ? 'min-w-[450px]' : 'max-w-[600px]')}>
           {isAudioMaterial ? (
-            // 音频素材播放器 - 带圆形频谱可视化
+            // 音频素材播放器
             <div
               className={cn(
-                'w-full min-w-[450px] rounded-[32px] overflow-hidden shadow-2xl',
-                'bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900'
+                'w-full min-w-[450px] rounded-xl overflow-hidden shadow-sm border',
+                theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-white border-slate-200'
               )}
             >
-              {/* 顶部 - 圆形频谱可视化区域 */}
+              {/* 顶部 - 音频预览区域 */}
               <div className="relative flex items-center justify-center py-8">
                 <AudioVisualizer
                   audioElement={audioElement}
@@ -343,13 +340,20 @@ export default function MaterialPreviewModal({
               
               {/* 音频信息区域 */}
               <div className="px-8 py-4 text-center">
-                <h4 className="text-xl font-bold text-white mb-2 truncate">
+                <h4 className={cn('text-xl font-semibold mb-2 truncate', theme === 'dark' ? 'text-white' : 'text-slate-900')}>
                   {material?.productModel || '音频素材'}
                 </h4>
                 
                 {/* 时长显示 */}
                 {material?.audioDuration && (
-                  <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm mb-4">
+                  <div
+                    className={cn(
+                      'inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm mb-4 border',
+                      theme === 'dark'
+                        ? 'bg-slate-800 text-slate-200 border-slate-700'
+                        : 'bg-slate-50 text-slate-600 border-slate-200'
+                    )}
+                  >
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
@@ -361,12 +365,26 @@ export default function MaterialPreviewModal({
                 {(material?.audioCategory || material?.audioScene) && (
                   <div className="flex flex-wrap gap-2 justify-center mb-4">
                     {material?.audioCategory && (
-                      <span className="px-3 py-1 text-xs font-medium bg-blue-500/20 text-blue-300 rounded-full border border-blue-500/30">
+                      <span
+                        className={cn(
+                          'px-3 py-1 text-xs font-medium rounded-md border',
+                          theme === 'dark'
+                            ? 'bg-slate-800 text-slate-200 border-slate-700'
+                            : 'bg-slate-50 text-slate-600 border-slate-200'
+                        )}
+                      >
                         {material.audioCategory}
                       </span>
                     )}
                     {material?.audioScene && (
-                      <span className="px-3 py-1 text-xs font-medium bg-emerald-500/20 text-emerald-300 rounded-full border border-emerald-500/30">
+                      <span
+                        className={cn(
+                          'px-3 py-1 text-xs font-medium rounded-md border',
+                          theme === 'dark'
+                            ? 'bg-slate-800 text-slate-200 border-slate-700'
+                            : 'bg-slate-50 text-slate-600 border-slate-200'
+                        )}
+                      >
                         {material.audioScene}
                       </span>
                     )}
@@ -376,7 +394,12 @@ export default function MaterialPreviewModal({
               
               {/* 音频播放器区域 */}
               <div className="px-6 pb-8">
-                <div className="bg-white/5 rounded-2xl p-4 backdrop-blur-sm border border-white/10">
+                <div
+                  className={cn(
+                    'rounded-lg p-4 border',
+                    theme === 'dark' ? 'bg-slate-950 border-slate-700' : 'bg-slate-50 border-slate-200'
+                  )}
+                >
                   {material?.audioUrl || material?.id ? (
                     <audio
                       ref={(el) => {
@@ -390,9 +413,6 @@ export default function MaterialPreviewModal({
                       controlsList="nodownload"
                       crossOrigin="anonymous"
                       className="w-full h-12 rounded-lg"
-                      style={{
-                        filter: 'invert(1) hue-rotate(180deg) brightness(0.9)',
-                      }}
                       onPlay={() => setIsAudioPlaying(true)}
                       onPause={() => setIsAudioPlaying(false)}
                       onEnded={() => setIsAudioPlaying(false)}
@@ -402,7 +422,7 @@ export default function MaterialPreviewModal({
                       您的浏览器不支持音频播放。
                     </audio>
                   ) : (
-                    <div className="flex items-center justify-center h-12 text-white/50 text-sm">
+                    <div className={cn('flex items-center justify-center h-12 text-sm', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>
                       暂无可播放的音频
                     </div>
                   )}
@@ -410,7 +430,7 @@ export default function MaterialPreviewModal({
                 
                 {/* 文件信息 */}
                 {fileSizeLabel && (
-                  <div className="mt-4 text-center text-white/50 text-xs">
+                  <div className={cn('mt-4 text-center text-xs', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>
                     文件大小: {fileSizeLabel}
                   </div>
                 )}
@@ -420,7 +440,7 @@ export default function MaterialPreviewModal({
             videoSource ? (
               <div
                 className={cn(
-                  'w-full rounded-[32px] overflow-hidden shadow-inner border leading-[0]',
+                  'w-full rounded-2xl overflow-hidden shadow-sm border leading-[0]',
                   borderColor,
                   bgColor
                 )}
@@ -437,7 +457,7 @@ export default function MaterialPreviewModal({
                     height: 'auto',
                     objectFit: 'contain',
                     display: 'block',
-                    borderRadius: '32px',
+                    borderRadius: '1rem',
                   }}
                 >
                   <source src={videoSource} {...(videoSourceMimeType ? { type: videoSourceMimeType } : {})} />
@@ -445,7 +465,7 @@ export default function MaterialPreviewModal({
                 </video>
               </div>
             ) : (
-              <div className="w-full h-[360px] flex flex-col items-center justify-center text-center px-8 bg-gradient-to-b from-slate-900 to-slate-800 text-white rounded-[32px]">
+              <div className="w-full h-[360px] flex flex-col items-center justify-center text-center px-8 bg-slate-900 text-white rounded-2xl">
                 <svg className="w-10 h-10 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.6} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.868v4.264a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.6} d="M4.5 6.75v10.5a1.5 1.5 0 001.5 1.5h12a1.5 1.5 0 001.5-1.5V6.75A1.5 1.5 0 0018 5.25H6a1.5 1.5 0 00-1.5 1.5z" />
@@ -459,7 +479,7 @@ export default function MaterialPreviewModal({
             )
           ) : galleryImages.length > 0 ? (
             isLongForm ? (
-              <div className={cn('w-full rounded-[32px] overflow-hidden shadow-inner leading-[0]', theme === 'dark' ? 'bg-slate-900/70' : 'bg-white/95')}>
+              <div className={cn('w-full rounded-2xl overflow-hidden shadow-sm leading-[0]', theme === 'dark' ? 'bg-slate-900/70' : 'bg-white/95')}>
                 {galleryImages.map((img, index) => (
                   <div
                     key={`${img}-${index}`}
@@ -479,7 +499,7 @@ export default function MaterialPreviewModal({
             ) : (
               <div
                 className={cn(
-                  'w-full rounded-[32px] overflow-hidden shadow-inner border cursor-pointer',
+                  'w-full rounded-2xl overflow-hidden shadow-sm border cursor-pointer',
                   borderColor,
                   bgColor
                 )}
@@ -495,7 +515,7 @@ export default function MaterialPreviewModal({
             )
           ) : (
             <div className={cn(
-              'w-full h-64 rounded-[32px] flex items-center justify-center border border-dashed',
+              'w-full h-64 rounded-2xl flex items-center justify-center border border-dashed',
               bgColor,
               borderColor,
               textSecondary
@@ -626,7 +646,7 @@ export default function MaterialPreviewModal({
       {/* 全图查看模态框 */}
       {showFullImage && fullImageUrl && (
         <div
-          className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80 backdrop-blur-md"
+          className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80 backdrop-blur-sm"
           onClick={() => {
             setShowFullImage(false)
             setFullImageUrl(null)
@@ -637,7 +657,7 @@ export default function MaterialPreviewModal({
             <img
               src={fullImageUrl || ''}
               alt="Full preview"
-              className="max-w-full max-h-[95vh] object-contain rounded-lg"
+              className="max-w-full max-h-[95vh] object-contain rounded-xl"
               onClick={(e) => e.stopPropagation()}
             />
             <button
@@ -658,4 +678,3 @@ export default function MaterialPreviewModal({
     </Modal>
   )
 }
-
diff --git a/components/UploadModal.tsx b/components/UploadModal.tsx
index 6bbcba1..9ce3fbe 100644
--- a/components/UploadModal.tsx
+++ b/components/UploadModal.tsx
@@ -13,11 +13,12 @@
 
 'use client'
 
-import { useState, useRef, useEffect, useCallback } from 'react'
+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
@@ -47,6 +48,9 @@ const normalizeMaterialKind = (value?: string | null): MaterialKind => {
 
 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 [previewImages, setPreviewImages] = useState<File[]>([]) // 多预览图（最多5张）
   const [previewUrls, setPreviewUrls] = useState<string[]>([]) // 多预览图预览URLs
   const [displayImage, setDisplayImage] = useState<File | null>(null) // PSD展示图片
@@ -414,11 +418,24 @@ const isVideoFile = (file: File) => {
       const response = await fetch('/api/upload-templates')
       if (response.ok) {
         const data = await response.json()
-        setTemplates(data || [])
-        console.log('[UploadModal] Templates loaded:', data?.length || 0)
+        const loadedTemplates = Array.isArray(data) ? data : []
+        setTemplates(loadedTemplates)
+        console.log('[UploadModal] Templates loaded:', loadedTemplates.length)
         // 如果有模板且只有一个，自动选择
-        if (data && data.length === 1) {
-          handleTemplateChange(data[0].id)
+        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: '未知错误' }))
@@ -475,6 +492,12 @@ const isVideoFile = (file: File) => {
     }
   }
 
+  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
@@ -865,11 +888,11 @@ const isVideoFile = (file: File) => {
     const submittingIsVideo = submittingMaterialKind === 'VIDEO'
 
     // 验证模板必填字段
-    if (selectedTemplate && selectedTemplate.fields) {
-      for (const field of selectedTemplate.fields) {
+    if (visibleTemplateFields.length > 0) {
+      for (const field of visibleTemplateFields) {
         if (field.required) {
           const value = templateFieldValues[field.key]
-          if (!value || (typeof value === 'string' && value.trim() === '')) {
+          if (!hasFieldValue(value, field.type)) {
             setError(`请填写必填字段：${field.label}`)
             return
           }
@@ -911,7 +934,7 @@ const isVideoFile = (file: File) => {
     // 视频素材的封面图是可选的（如果没有上传，系统会自动从视频中截取）
     // 音频素材的预览图也是可选的（使用占位符）
     // 对于非视频、非音频、非PSD类型，必须有预览图
-    if (!submittingIsVideo && !submittingIsAudio && currentMaterialType !== 'PSD' && previewImages.length === 0) {
+    if (!submittingIsVideo && !submittingIsAudio && currentMaterialType !== 'PSD' && currentMaterialType !== '材质' && previewImages.length === 0) {
       setError('请上传预览图')
       return
     }
@@ -970,6 +993,7 @@ const isVideoFile = (file: File) => {
       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)
@@ -1077,7 +1101,7 @@ const isVideoFile = (file: File) => {
         
         // 如果上传进度已达到100%，可能实际已成功
         if (uploadProgress === 100 && isConnectionReset) {
-          errorMsg = '⚠️ 上传可能已完成！\n\n由于网络原因，无法确认最终状态。\n\n请执行以下操作：\n1. 刷新页面查看文件是否已上传\n2. 如果文件已存在，说明上传成功\n3. 如果未看到文件，请重新上传\n\n提示：使用内网地址上传更稳定'
+          errorMsg = '上传可能已完成。\n\n由于网络原因，无法确认最终状态。\n\n请执行以下操作：\n1. 刷新页面查看文件是否已上传\n2. 如果文件已存在，说明上传成功\n3. 如果未看到文件，请重新上传\n\n提示：使用内网地址上传更稳定'
           // 3秒后自动关闭弹窗并刷新
           setTimeout(() => {
             onClose()
@@ -1132,11 +1156,19 @@ const isVideoFile = (file: File) => {
   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'
+  const previewRequiredInUi = !isVideoTemplate && !isAudioTemplate && resolvedMaterialType !== 'PSD' && resolvedMaterialType !== '材质'
   const isPostProcessing = uploading && uploadProgress === 100 && !uploadComplete
   const postProcessingMessage =
     pendingMaterialType === 'PSD'
@@ -1177,7 +1209,7 @@ const isVideoFile = (file: File) => {
                 <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">
@@ -1214,23 +1246,23 @@ const isVideoFile = (file: File) => {
       >
         <div 
           className={cn(
-            'rounded-apple max-h-[80vh] shadow-apple-lg flex flex-col relative w-full max-w-2xl mx-auto',
+            'rounded-xl max-h-[80vh] shadow-lg flex flex-col relative w-full max-w-2xl mx-auto',
             styles.cardStyles.base
           )}
           style={{ overflow: 'hidden' }}
         >
 
-          <div className="absolute top-0 left-0 right-0 px-6 py-2.5 border-b border-white/20 dark:border-slate-700/30 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl z-10 rounded-t-apple">
+          <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-blue-600 dark:text-blue-400">
-                      💾 上传进度已自动保存，关闭网页后可恢复
+                      上传进度已自动保存，关闭网页后可恢复
                     </p>
                   )}
                 </div>
@@ -1239,14 +1271,14 @@ const isVideoFile = (file: File) => {
                 <button
                   type="button"
                   onClick={handleCancelUpload}
-                  className="px-4 py-2 text-base font-medium rounded-apple border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+                  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-apple bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  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}
@@ -1256,8 +1288,8 @@ const isVideoFile = (file: File) => {
           </div>
 
         <div className="flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
-          <div className="pt-[72px] sm:pt-[80px]">
-            <form id="upload-form" onSubmit={handleSubmit} className="p-6 space-y-6">
+          <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">
@@ -1268,7 +1300,7 @@ const isVideoFile = (file: File) => {
                 value={selectedTemplateId}
                 onChange={(e) => handleTemplateChange(e.target.value)}
                 className={cn(
-                  'w-full px-4 py-2 rounded-apple border outline-none',
+                  'w-full px-4 py-2 rounded-lg border outline-none',
                   styles.inputStyles.base
                 )}
                 required
@@ -1317,7 +1349,7 @@ const isVideoFile = (file: File) => {
               </label>
               <div 
                 ref={previewDropZoneRef}
-                className="border-2 border-dashed border-slate-300/60 dark:border-slate-600/60 rounded-2xl p-4 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-slate-400/80 dark:hover:border-slate-500/80 hover:bg-slate-50/50 dark:hover:bg-slate-700/30 hover:shadow-md cursor-pointer"
+                className="border border-dashed border-slate-300/60 dark:border-slate-600/60 rounded-2xl p-4 transition-colors hover:border-slate-400/80 dark:hover:border-slate-500/80 hover:bg-slate-50/50 dark:hover:bg-slate-700/30 cursor-pointer"
                 onDragEnter={handlePreviewDragEnter}
                 onDragLeave={handlePreviewDragLeave}
                 onDragOver={handlePreviewDragOver}
@@ -1378,7 +1410,7 @@ const isVideoFile = (file: File) => {
                             className={cn(
                               'relative group cursor-grab active:cursor-grabbing',
                               draggingPreviewIndex === index &&
-                                'ring-2 ring-indigo-500 rounded-xl'
+                                'ring-2 ring-slate-500 rounded-xl'
                             )}
                           >
                             <div className="relative w-full aspect-square rounded-xl overflow-hidden border-2 border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800">
@@ -1449,7 +1481,7 @@ const isVideoFile = (file: File) => {
                 <div
                   ref={displayImageDropZoneRef}
                   className={cn(
-                    'border-2 border-dashed rounded-2xl p-4 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-slate-400/80 dark:hover:border-slate-500/80 hover:bg-slate-50/50 dark:hover:bg-slate-700/30 hover:shadow-md cursor-pointer',
+                    'border border-dashed rounded-2xl p-4 transition-colors hover:border-slate-400/80 dark:hover:border-slate-500/80 hover:bg-slate-50/50 dark:hover:bg-slate-700/30 cursor-pointer',
                     isDisplayImageDragging ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-900/20' : 'border-slate-300/60 dark:border-slate-600/60'
                   )}
                   onDragEnter={handleDisplayImageDragEnter}
@@ -1464,7 +1496,7 @@ const isVideoFile = (file: File) => {
                         <Image src={displayImageUrl} alt="PSD 展示图" fill unoptimized className="object-cover" />
                       </div>
                     ) : (
-                      <div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-gradient-to-br from-slate-100 to-slate-50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center flex-shrink-0 shadow-inner">
+                      <div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center flex-shrink-0 shadow-inner">
                         <svg className="w-10 h-10 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>
@@ -1480,7 +1512,7 @@ const isVideoFile = (file: File) => {
                       />
                       <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>
-                      <p className="text-[10px] text-blue-600 dark:text-blue-400 mt-1">💡 第一张图会自动作为预览图，超高图片会自动切割</p>
+                      <p className="text-[10px] text-blue-600 dark:text-blue-400 mt-1">第一张图会自动作为预览图，超高图片会自动切割</p>
                     </div>
                   </div>
                 </div>
@@ -1496,13 +1528,13 @@ const isVideoFile = (file: File) => {
                     return <span className="text-red-500">*</span>
                   }
                   const currentMaterialType = selectedTemplate?.materialType || materialType
-                  return currentMaterialType === '模特' ? '(可选)' : <span className="text-red-500">*</span>
+                  return currentMaterialType === '模特' || currentMaterialType === '材质' ? '(可选)' : <span className="text-red-500">*</span>
                 })()}
                 {isParsingAudio && <span className="ml-2 text-blue-500 text-[10px]">正在解析音频信息...</span>}
               </label>
               <div 
                 ref={dropZoneRef}
-                className="border-2 border-dashed border-slate-300/60 dark:border-slate-600/60 rounded-2xl p-4 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-slate-400/80 dark:hover:border-slate-500/80 hover:bg-slate-50/50 dark:hover:bg-slate-700/30 hover:shadow-md cursor-pointer"
+                className="border border-dashed border-slate-300/60 dark:border-slate-600/60 rounded-2xl p-4 transition-colors hover:border-slate-400/80 dark:hover:border-slate-500/80 hover:bg-slate-50/50 dark:hover:bg-slate-700/30 cursor-pointer"
                 onDragEnter={handleDragEnter}
                 onDragLeave={handleDragLeave}
                 onDragOver={handleDragOver}
@@ -1588,7 +1620,7 @@ const isVideoFile = (file: File) => {
 
             {/* 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-apple mt-4">
+              <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>
             )}
@@ -1602,9 +1634,10 @@ const isVideoFile = (file: File) => {
                   模板字段
                 </h3>
                 <div className="space-y-4">
-                  {selectedTemplate.fields.map((field: any) => {
+                  {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
@@ -1613,17 +1646,21 @@ const isVideoFile = (file: File) => {
                       >
                         <div className="space-y-2.5">
                           <div className="flex items-center justify-between gap-3">
-                            <label className="text-xs font-semibold text-slate-800 dark:text-slate-200 tracking-tight">
+                            <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-full text-[10px] font-semibold uppercase tracking-[0.18em] text-white bg-gradient-to-r from-purple-500 to-indigo-600 shadow-[0_8px_16px_rgba(79,70,229,0.35)]">
+                              <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) => {
@@ -1642,15 +1679,14 @@ const isVideoFile = (file: File) => {
                                   : `请输入${field.label || field.key}`
                               }
                               className={cn(
-                                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 text-slate-900 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60 placeholder:text-slate-400 dark:placeholder:text-slate-500',
-                                field.required
-                                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                                  : 'bg-white/90 dark:bg-slate-800/80',
+                                modalControlClass,
+                                field.required ? requiredControlClass : null,
                                 field.type === 'uppercase' && 'uppercase'
                               )}
                             />
                           ) : field.type === 'textarea' ? (
                             <textarea
+                              id={fieldInputId}
                               value={fieldValue}
                               onChange={(e) => {
                                 setTemplateFieldValues({
@@ -1662,14 +1698,14 @@ const isVideoFile = (file: File) => {
                               placeholder={`请输入${field.label || field.key}`}
                               rows={2}
                               className={cn(
-                                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 text-slate-900 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60 resize-none placeholder:text-slate-400 dark:placeholder:text-slate-500',
-                                field.required
-                                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                                  : 'bg-white/90 dark:bg-slate-800/80'
+                                modalControlClass,
+                                'resize-none',
+                                field.required ? requiredControlClass : null
                               )}
                             />
                           ) : field.type === 'number' ? (
                             <input
+                              id={fieldInputId}
                               type="number"
                               value={fieldValue}
                               onChange={(e) => {
@@ -1681,14 +1717,13 @@ const isVideoFile = (file: File) => {
                               required={field.required}
                               placeholder={`请输入${field.label || field.key}`}
                               className={cn(
-                                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 text-slate-900 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60 placeholder:text-slate-400 dark:placeholder:text-slate-500',
-                                field.required
-                                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                                  : 'bg-white/90 dark:bg-slate-800/80'
+                                modalControlClass,
+                                field.required ? requiredControlClass : null
                               )}
                             />
                           ) : field.type === 'select' ? (
                             <select
+                              id={fieldInputId}
                               value={fieldValue}
                               onChange={(e) => {
                                 setTemplateFieldValues({
@@ -1698,10 +1733,8 @@ const isVideoFile = (file: File) => {
                               }}
                               required={field.required}
                               className={cn(
-                                'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 text-slate-900 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60',
-                                field.required
-                                  ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                                  : 'bg-white/90 dark:bg-slate-800/80'
+                                modalControlClass,
+                                field.required ? requiredControlClass : null
                               )}
                             >
                             <option value="">请选择</option>
@@ -1737,6 +1770,7 @@ const isVideoFile = (file: File) => {
                         ) : field.type === 'checkbox' ? (
                           <label className="flex items-center space-x-2">
                             <input
+                              id={fieldInputId}
                               type="checkbox"
                               checked={fieldValue || false}
                               onChange={(e) => {
@@ -1790,6 +1824,7 @@ const isVideoFile = (file: File) => {
                           </div>
                         ) : field.type === 'date' ? (
                           <input
+                            id={fieldInputId}
                             type="date"
                             value={fieldValue}
                             onChange={(e) => {
@@ -1800,10 +1835,8 @@ const isVideoFile = (file: File) => {
                             }}
                             required={field.required}
                             className={cn(
-                              'w-full px-4 py-2.5 text-sm rounded-2xl outline-none transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border bg-white/90 dark:bg-slate-800/80 text-slate-900 dark:text-white border-slate-200/70 dark:border-slate-700/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.75)] dark:shadow-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:border-blue-400/60',
-                              field.required
-                                ? 'bg-gradient-to-br from-white via-blue-50/90 to-blue-100/60 dark:from-slate-800/80 dark:via-blue-900/30 dark:to-blue-900/20 border-blue-200/80 dark:border-blue-500/50 shadow-[0_18px_35px_-25px_rgba(37,99,235,1)]'
-                                : 'bg-white/90 dark:bg-slate-800/80'
+                              modalControlClass,
+                              field.required ? requiredControlClass : null
                             )}
                           />
                         ) : null}
diff --git a/components/__tests__/EditMaterialModal.test.tsx b/components/__tests__/EditMaterialModal.test.tsx
index d894171..63711f6 100644
--- a/components/__tests__/EditMaterialModal.test.tsx
+++ b/components/__tests__/EditMaterialModal.test.tsx
@@ -71,6 +71,26 @@ describe('EditMaterialModal 组件', () => {
           json: () => Promise.resolve([]),
         })
       }
+      if (url.includes('/api/admin/upload-templates/template-1')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({
+            id: 'template-1',
+            name: '测试模板',
+            description: '测试模板描述',
+            materialType: '3DMAX',
+            fields: [
+              {
+                id: 'field-1',
+                key: 'customField',
+                label: '自定义字段',
+                type: 'text',
+                required: false,
+              },
+            ],
+          }),
+        })
+      }
       if (url.includes('/api/materials/update')) {
         return Promise.resolve({
           ok: true,
@@ -312,6 +332,476 @@ describe('EditMaterialModal 组件', () => {
         expect(updateCalls.length).toBeGreaterThan(0)
       })
     })
+
+    it('有 templateId 时应优先从普通模板列表加载并提交模板字段', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/template-categories')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/upload-templates')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([
+              {
+                id: 'template-1',
+                name: '测试模板',
+                description: '测试模板描述',
+                materialType: '3DMAX',
+                status: 'active',
+                fields: [
+                  {
+                    id: 'field-1',
+                    key: 'customField',
+                    label: '自定义字段',
+                    type: 'text',
+                    required: false,
+                  },
+                ],
+              },
+            ]),
+          })
+        }
+        if (url.includes('/api/admin/upload-templates/template-1')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+              id: 'template-1',
+              name: '测试模板',
+              description: '测试模板描述',
+              materialType: '3DMAX',
+              fields: [
+                {
+                  id: 'field-1',
+                  key: 'customField',
+                  label: '自定义字段',
+                  type: 'text',
+                  required: false,
+                },
+              ],
+            }),
+          })
+        }
+        if (url.includes('/api/materials/update')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ success: true }),
+          })
+        }
+        return Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Not found' }),
+        })
+      })
+
+      render(
+        <EditMaterialModal
+          material={{
+            ...baseMaterial,
+            templateId: 'template-1',
+            templateFields: {
+              customField: '已有自定义值',
+            },
+          }}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('自定义字段')).toBeInTheDocument()
+      })
+      expect(mockFetch).toHaveBeenCalledWith('/api/upload-templates')
+      expect(mockFetch).not.toHaveBeenCalledWith('/api/admin/upload-templates/template-1')
+
+      fireEvent.click(screen.getByText('保存修改'))
+
+      await waitFor(() => {
+        const updateCall = mockFetch.mock.calls.find(
+          (call: any[]) => call[0].includes('/api/materials/update')
+        )
+        expect(updateCall).toBeTruthy()
+
+        const formData = updateCall?.[1]?.body as FormData
+        expect(formData.get('templateId')).toBe('template-1')
+        expect(formData.get('templateFields')).toContain('customField')
+        expect(formData.get('templateFields')).toContain('已有自定义值')
+      })
+    })
+
+    it('普通模板列表找不到模板时才回退请求管理员模板详情', async () => {
+      render(
+        <EditMaterialModal
+          material={{
+            ...baseMaterial,
+            templateId: 'template-1',
+            templateFields: {
+              customField: '已有自定义值',
+            },
+          }}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('/api/upload-templates')
+        expect(mockFetch).toHaveBeenCalledWith('/api/admin/upload-templates/template-1')
+      })
+      expect(screen.getByLabelText('自定义字段')).toBeInTheDocument()
+    })
+
+    it('普通模板列表和管理员模板详情都不可用时应降级到基础字段编辑', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/template-categories')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/upload-templates')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/admin/upload-templates/template-1')) {
+          return Promise.resolve({
+            ok: false,
+            status: 403,
+            json: () => Promise.resolve({ error: '无权限' }),
+          })
+        }
+        if (url.includes('/api/materials/update')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ success: true }),
+          })
+        }
+        return Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Not found' }),
+        })
+      })
+
+      render(
+        <EditMaterialModal
+          material={{
+            ...baseMaterial,
+            templateId: 'template-1',
+            templateFields: {
+              customField: '已有自定义值',
+            },
+          }}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      expect(await screen.findByText('未找到对应的上传模板，请使用基础字段编辑')).toBeInTheDocument()
+      expect(mockFetch).toHaveBeenCalledWith('/api/upload-templates')
+      expect(mockFetch).toHaveBeenCalledWith('/api/admin/upload-templates/template-1')
+      expect(screen.queryByLabelText('自定义字段')).not.toBeInTheDocument()
+    })
+
+    it('保存接口返回无权限时应把后端错误提示展示给用户', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/template-categories')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/upload-templates')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/materials/update')) {
+          return Promise.resolve({
+            ok: false,
+            status: 403,
+            json: () => Promise.resolve({ error: '您没有权限编辑此素材' }),
+          })
+        }
+        return Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Not found' }),
+        })
+      })
+
+      render(
+        <EditMaterialModal
+          material={baseMaterial}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith('/api/upload-templates')
+      })
+
+      fireEvent.click(screen.getByText('保存修改'))
+
+      expect(await screen.findByText('您没有权限编辑此素材')).toBeInTheDocument()
+      expect(mockOnSuccess).not.toHaveBeenCalled()
+    })
+
+    it('必填 checkbox 未勾选也应视为已填写并提交 false', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/template-categories')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/upload-templates')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([
+              {
+                id: 'template-1',
+                name: '勾选模板',
+                description: null,
+                materialType: '3DMAX',
+                status: 'active',
+                fields: [
+                  {
+                    id: 'field-product',
+                    key: 'productModel',
+                    label: '产品型号',
+                    type: 'text',
+                    required: true,
+                  },
+                  {
+                    id: 'field-checkbox',
+                    key: 'allowUse',
+                    label: '允许使用',
+                    type: 'checkbox',
+                    required: true,
+                  },
+                ],
+              },
+            ]),
+          })
+        }
+        if (url.includes('/api/materials/update')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ success: true }),
+          })
+        }
+        return Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Not found' }),
+        })
+      })
+
+      render(
+        <EditMaterialModal
+          material={{
+            ...baseMaterial,
+            templateId: 'template-1',
+            templateFields: {
+              allowUse: false,
+            },
+          }}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      expect(await screen.findByLabelText('允许使用')).not.toBeChecked()
+
+      fireEvent.click(screen.getByText('保存修改'))
+
+      await waitFor(() => {
+        const updateCall = mockFetch.mock.calls.find(
+          (call: any[]) => call[0].includes('/api/materials/update')
+        )
+        expect(updateCall).toBeTruthy()
+
+        const formData = updateCall?.[1]?.body as FormData
+        const payload = JSON.parse(String(formData.get('templateFields')))
+        expect(payload.allowUse).toBe(false)
+      })
+      expect(screen.queryByText('请填写必填字段：允许使用')).not.toBeInTheDocument()
+    })
+
+    it('条件不满足时应隐藏字段且不提交隐藏字段值', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/template-categories')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/admin/upload-templates/template-1')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+              id: 'template-1',
+              name: '条件模板',
+              description: '测试条件显示',
+              materialType: '3DMAX',
+              fields: [
+                {
+                  id: 'field-product',
+                  key: 'productModel',
+                  label: '产品型号',
+                  type: 'text',
+                  required: true,
+                },
+                {
+                  id: 'field-conditional',
+                  key: 'conditionalCode',
+                  label: '条件编码',
+                  type: 'text',
+                  required: true,
+                  conditions: JSON.stringify({
+                    logic: 'AND',
+                    conditions: [{ fieldKey: 'productModel', operator: 'equals', value: '需要编码' }],
+                  }),
+                },
+              ],
+            }),
+          })
+        }
+        if (url.includes('/api/materials/update')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ success: true }),
+          })
+        }
+        return Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Not found' }),
+        })
+      })
+
+      render(
+        <EditMaterialModal
+          material={{
+            ...baseMaterial,
+            productModel: '普通产品',
+            templateId: 'template-1',
+            templateFields: {
+              conditionalCode: '隐藏旧值',
+            },
+          }}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('产品型号')).toBeInTheDocument()
+      })
+      expect(screen.queryByLabelText('条件编码')).not.toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('保存修改'))
+
+      await waitFor(() => {
+        const updateCall = mockFetch.mock.calls.find(
+          (call: any[]) => call[0].includes('/api/materials/update')
+        )
+        expect(updateCall).toBeTruthy()
+
+        const formData = updateCall?.[1]?.body as FormData
+        const payload = JSON.parse(String(formData.get('templateFields')))
+        expect(payload.productModel).toBe('普通产品')
+        expect(payload.conditionalCode).toBeUndefined()
+      })
+    })
+
+    it('依赖字段变化后应显示条件字段并参与必填校验', async () => {
+      mockFetch.mockImplementation((url: string) => {
+        if (url.includes('/api/template-categories')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve([]),
+          })
+        }
+        if (url.includes('/api/admin/upload-templates/template-1')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+              id: 'template-1',
+              name: '条件模板',
+              description: '测试条件显示',
+              materialType: '3DMAX',
+              fields: [
+                {
+                  id: 'field-product',
+                  key: 'productModel',
+                  label: '产品型号',
+                  type: 'text',
+                  required: true,
+                },
+                {
+                  id: 'field-conditional',
+                  key: 'conditionalCode',
+                  label: '条件编码',
+                  type: 'text',
+                  required: true,
+                  conditions: JSON.stringify({
+                    logic: 'AND',
+                    conditions: [{ fieldKey: 'productModel', operator: 'equals', value: '需要编码' }],
+                  }),
+                },
+              ],
+            }),
+          })
+        }
+        if (url.includes('/api/materials/update')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ success: true }),
+          })
+        }
+        return Promise.resolve({
+          ok: false,
+          json: () => Promise.resolve({ error: 'Not found' }),
+        })
+      })
+
+      render(
+        <EditMaterialModal
+          material={{
+            ...baseMaterial,
+            productModel: '普通产品',
+            templateId: 'template-1',
+          }}
+          onClose={mockOnClose}
+          onSuccess={mockOnSuccess}
+          isOpen={true}
+        />
+      )
+
+      const productInput = await screen.findByLabelText('产品型号')
+      fireEvent.change(productInput, { target: { value: '需要编码' } })
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('条件编码')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('保存修改'))
+
+      expect(await screen.findByText('请填写必填字段：条件编码')).toBeInTheDocument()
+      expect(
+        mockFetch.mock.calls.some((call: any[]) => call[0].includes('/api/materials/update'))
+      ).toBe(false)
+    })
   })
 
   describe('边界情况测试', () => {
diff --git a/components/__tests__/UploadModal.test.tsx b/components/__tests__/UploadModal.test.tsx
new file mode 100644
index 0000000..e77f340
--- /dev/null
+++ b/components/__tests__/UploadModal.test.tsx
@@ -0,0 +1,247 @@
+/**
+ * UploadModal 条件字段测试
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: any) => {
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    return <img {...props} />
+  },
+}))
+
+jest.mock('@/lib/audio-parser-browser', () => ({
+  parseAudioFile: jest.fn(),
+  isAudioFile: jest.fn(() => false),
+  AUDIO_ACCEPT_TYPES: 'audio/*',
+}))
+
+import UploadModal from '../UploadModal'
+
+const mockFetch = jest.fn()
+global.fetch = mockFetch
+
+global.URL.createObjectURL = jest.fn(() => 'blob:test-url')
+global.URL.revokeObjectURL = jest.fn()
+
+const materialTemplate = {
+  id: 'template-1',
+  name: '条件材质模板',
+  description: null,
+  materialType: '材质',
+  materialKind: 'IMAGE',
+  status: 'active',
+  isBuiltin: false,
+  fields: [
+    {
+      id: 'field-product',
+      key: 'productModel',
+      label: '材质名称',
+      type: 'text',
+      required: true,
+    },
+    {
+      id: 'field-conditional',
+      key: 'conditionalCode',
+      label: '条件编码',
+      type: 'text',
+      required: true,
+      conditions: JSON.stringify({
+        logic: 'AND',
+        conditions: [{ fieldKey: 'productModel', operator: 'equals', value: '需要编码' }],
+      }),
+    },
+  ],
+}
+
+const checkboxTemplate = {
+  ...materialTemplate,
+  fields: [
+    {
+      id: 'field-product',
+      key: 'productModel',
+      label: '材质名称',
+      type: 'text',
+      required: true,
+    },
+    {
+      id: 'field-checkbox',
+      key: 'allowUse',
+      label: '允许使用',
+      type: 'checkbox',
+      required: true,
+    },
+  ],
+}
+
+class MockXMLHttpRequest {
+  static instances: MockXMLHttpRequest[] = []
+
+  upload = {
+    addEventListener: jest.fn(),
+  }
+
+  timeout = 0
+  status = 201
+  responseText = '{"success":true}'
+  method = ''
+  url = ''
+  body: FormData | null = null
+  private listeners: Record<string, Array<() => void>> = {}
+
+  constructor() {
+    MockXMLHttpRequest.instances.push(this)
+  }
+
+  open(method: string, url: string) {
+    this.method = method
+    this.url = url
+  }
+
+  send(body: FormData) {
+    this.body = body
+    this.listeners.load?.forEach((listener) => listener())
+  }
+
+  abort() {
+    this.listeners.abort?.forEach((listener) => listener())
+  }
+
+  addEventListener(event: string, listener: () => void) {
+    this.listeners[event] = this.listeners[event] || []
+    this.listeners[event].push(listener)
+  }
+}
+
+describe('UploadModal 条件字段', () => {
+  const onClose = jest.fn()
+  const onSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    MockXMLHttpRequest.instances = []
+    ;(global as any).XMLHttpRequest = MockXMLHttpRequest
+    window.localStorage.clear()
+
+    mockFetch.mockImplementation((url: string) => {
+      if (url.includes('/api/upload-templates')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([materialTemplate]),
+        })
+      }
+      if (
+        url.includes('/api/template-categories') ||
+        url.includes('/api/categories') ||
+        url.includes('/api/scenes') ||
+        url.includes('/api/platforms')
+      ) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([]),
+        })
+      }
+      return Promise.resolve({
+        ok: false,
+        json: () => Promise.resolve({ error: 'Not found' }),
+      })
+    })
+  })
+
+  it('条件不满足时应隐藏字段且不提交隐藏字段', async () => {
+    render(<UploadModal onClose={onClose} onSuccess={onSuccess} />)
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('材质名称')).toBeInTheDocument()
+    })
+    expect(screen.queryByLabelText('条件编码')).not.toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('材质名称'), {
+      target: { value: '普通材质' },
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('上传'))
+    })
+
+    await waitFor(() => {
+      expect(MockXMLHttpRequest.instances.length).toBe(1)
+    })
+
+    const sentBody = MockXMLHttpRequest.instances[0].body
+    expect(sentBody?.get('templateId')).toBe('template-1')
+
+    const templateFields = JSON.parse(String(sentBody?.get('templateFields')))
+    expect(templateFields.productModel).toBe('普通材质')
+    expect(templateFields.conditionalCode).toBeUndefined()
+  })
+
+  it('依赖字段变化后应显示条件字段并参与必填校验', async () => {
+    render(<UploadModal onClose={onClose} onSuccess={onSuccess} />)
+
+    const productInput = await screen.findByLabelText('材质名称')
+    fireEvent.change(productInput, { target: { value: '需要编码' } })
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('条件编码')).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('上传'))
+    })
+
+    expect(await screen.findByText('请填写必填字段：条件编码')).toBeInTheDocument()
+    expect(MockXMLHttpRequest.instances.length).toBe(0)
+  })
+
+  it('必填 checkbox 未勾选也应视为已填写并允许提交 false', async () => {
+    mockFetch.mockImplementation((url: string) => {
+      if (url.includes('/api/upload-templates')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([checkboxTemplate]),
+        })
+      }
+      if (
+        url.includes('/api/template-categories') ||
+        url.includes('/api/categories') ||
+        url.includes('/api/scenes') ||
+        url.includes('/api/platforms')
+      ) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([]),
+        })
+      }
+      return Promise.resolve({
+        ok: false,
+        json: () => Promise.resolve({ error: 'Not found' }),
+      })
+    })
+
+    render(<UploadModal onClose={onClose} onSuccess={onSuccess} />)
+
+    const productInput = await screen.findByLabelText('材质名称')
+    fireEvent.change(productInput, { target: { value: '普通材质' } })
+
+    expect(screen.getByLabelText('允许使用')).not.toBeChecked()
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('上传'))
+    })
+
+    await waitFor(() => {
+      expect(MockXMLHttpRequest.instances.length).toBe(1)
+    })
+    expect(screen.queryByText('请填写必填字段：允许使用')).not.toBeInTheDocument()
+
+    const sentBody = MockXMLHttpRequest.instances[0].body
+    const templateFields = JSON.parse(String(sentBody?.get('templateFields')))
+    expect(templateFields.allowUse).toBe(false)
+  })
+})