收敛素材预览弹窗样式

components/MaterialPreviewModal.tsx

@@ -275,13 +275,13 @@ export default function MaterialPreviewModal({
   const renderBadgeChip = (badge: { label: string }) => (
     <span
       key={badge.label}
-      className="px-3 py-1 text-[11px] font-semibold text-white rounded-full shadow-sm bg-slate-900/80"
+      className="px-2 py-0.5 text-[11px] font-medium rounded-md border border-slate-200 bg-slate-100 text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
     >
       {badge.label}
     </span>
   )
   const fileSizeLabel = formatFileSize(material?.zipFileSize)
-  const primaryDisplayTitle = material?.id || material?.productModel || title || '素材预览'
+  const primaryDisplayTitle = material?.productModel || title || material?.zipFileName || material?.id || '素材预览'
   
   const handleImageClick = (imgUrl: string) => {
     setFullImageUrl(imgUrl)
@@ -323,7 +323,7 @@ export default function MaterialPreviewModal({
             // 音频素材播放器
             <div
               className={cn(
-                'w-full min-w-[450px] rounded-xl overflow-hidden shadow-sm border',
+                'w-full min-w-[450px] rounded-lg overflow-hidden border',
                 theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-white border-slate-200'
               )}
             >
@@ -440,7 +440,7 @@ export default function MaterialPreviewModal({
             videoSource ? (
               <div
                 className={cn(
-                  'w-full rounded-2xl overflow-hidden shadow-sm border leading-[0]',
+                  'w-full rounded-lg overflow-hidden border leading-[0]',
                   borderColor,
                   bgColor
                 )}
@@ -457,7 +457,7 @@ export default function MaterialPreviewModal({
                     height: 'auto',
                     objectFit: 'contain',
                     display: 'block',
-                    borderRadius: '1rem',
+                    borderRadius: '0.5rem',
                   }}
                 >
                   <source src={videoSource} {...(videoSourceMimeType ? { type: videoSourceMimeType } : {})} />
@@ -465,21 +465,26 @@ export default function MaterialPreviewModal({
                 </video>
               </div>
             ) : (
-              <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">
+              <div className={cn(
+                'w-full h-[320px] flex flex-col items-center justify-center text-center px-8 rounded-lg border border-dashed',
+                bgColor,
+                borderColor,
+                textSecondary
+              )}>
+                <svg className="w-8 h-8 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" />
                 </svg>
-                <p className="text-lg font-semibold">{videoStatusMeta?.label || '预览生成中'}</p>
-                <p className="text-sm text-white/80 mt-2">
-                  {videoStatusMeta?.description || '视频压缩任务进行中，稍后可直接在此播放压缩预览。'}
+                <p className={cn('text-base font-semibold', textPrimary)}>{videoStatusMeta?.label || '预览生成中'}</p>
+                <p className="text-sm mt-2">
+                  {videoStatusMeta?.description || '系统正在生成压缩预览，稍后可在线播放。'}
                 </p>
-                <p className="text-xs text-white/60 mt-3">原始文件已保存，可随时下载使用。</p>
+                <p className="text-xs mt-3">原始文件已保存，可直接下载。</p>
               </div>
             )
           ) : galleryImages.length > 0 ? (
             isLongForm ? (
-              <div className={cn('w-full rounded-2xl overflow-hidden shadow-sm leading-[0]', theme === 'dark' ? 'bg-slate-900/70' : 'bg-white/95')}>
+              <div className={cn('w-full rounded-lg overflow-hidden leading-[0]', theme === 'dark' ? 'bg-slate-900' : 'bg-white')}>
                 {galleryImages.map((img, index) => (
                   <div
                     key={`${img}-${index}`}
@@ -499,7 +504,7 @@ export default function MaterialPreviewModal({
             ) : (
               <div
                 className={cn(
-                  'w-full rounded-2xl overflow-hidden shadow-sm border cursor-pointer',
+                  'w-full rounded-lg overflow-hidden border cursor-pointer',
                   borderColor,
                   bgColor
                 )}
@@ -515,7 +520,7 @@ export default function MaterialPreviewModal({
             )
           ) : (
             <div className={cn(
-              'w-full h-64 rounded-2xl flex items-center justify-center border border-dashed',
+              'w-full h-64 rounded-lg flex items-center justify-center border border-dashed',
               bgColor,
               borderColor,
               textSecondary
@@ -534,7 +539,7 @@ export default function MaterialPreviewModal({
             <div className="space-y-2">
               <div className="flex items-start justify-between gap-2">
                 <div>
-                  <h3 className={cn('text-2xl font-bold break-all', textPrimary)}>
+                  <h3 className={cn('text-lg font-semibold break-all', textPrimary)}>
                     {primaryDisplayTitle}
                   </h3>
                 </div>
@@ -615,8 +620,8 @@ export default function MaterialPreviewModal({
               </p>
             )}
             {isVideoMaterial && currentVideoStatus !== 'done' && (
-              <div className="p-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 text-xs text-amber-700 dark:text-amber-100">
-                {isPolling ? '正在检查转码状态...' : '压缩预览生成中，片刻后刷新即可在线播放，当前已可直接下载原始视频。'}
+              <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 text-xs text-amber-700 dark:text-amber-100">
+                {isPolling ? '正在检查转码状态...' : '预览生成中，当前可下载原始视频。'}
               </div>
             )}
 
@@ -646,7 +651,7 @@ export default function MaterialPreviewModal({
       {/* 全图查看模态框 */}
       {showFullImage && fullImageUrl && (
         <div
-          className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80"
           onClick={() => {
             setShowFullImage(false)
             setFullImageUrl(null)
@@ -657,7 +662,7 @@ export default function MaterialPreviewModal({
             <img
               src={fullImageUrl || ''}
               alt="Full preview"
-              className="max-w-full max-h-[95vh] object-contain rounded-xl"
+              className="max-w-full max-h-[95vh] object-contain rounded-lg"
               onClick={(e) => e.stopPropagation()}
             />
             <button
@@ -665,7 +670,7 @@ export default function MaterialPreviewModal({
                 setShowFullImage(false)
                 setFullImageUrl(null)
               }}
-              className="absolute top-6 right-6 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+              className="absolute top-6 right-6 p-2 rounded-md bg-white text-slate-700 hover:bg-slate-100 transition-colors"
               aria-label="关闭"
             >
               <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

docs/商业化地基排查问题清单_20260524.md

@@ -1069,10 +1069,9 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - `components/EditMaterialModal.tsx:240`：编辑弹窗必填标识同样使用紫蓝渐变胶囊。
 - `components/EditMaterialModal.tsx:265`：编辑输入框也有必填渐变背景。
 - `components/AudioVisualizer.tsx`：音频默认封面和播放频谱已先从 Apple Music 式深色渐变、光晕、毛玻璃改成中性封面和低调频谱。
-- `components/MaterialPreviewModal.tsx`：音频预览外壳已从深色舞台卡片改成普通中性卡片；时长和分类标签改成中性标签。
-- `components/MaterialPreviewModal.tsx:448`：视频预览状态使用大块深色渐变说明面板。
-- `components/MaterialPreviewModal.tsx:517`：详情标题使用较大的 `text-2xl` 加粗。
-- `components/MaterialPreviewModal.tsx:599`：转码状态说明句子较长。
+- `components/MaterialPreviewModal.tsx`：音频、视频、图片预览外壳已从大圆角/阴影/舞台式容器收为普通 `rounded-lg` 预览区；视频预览生成中状态改为普通空状态。
+- `components/MaterialPreviewModal.tsx`：右侧详情标题不再优先显示素材 ID，标题字号从侧栏里的大标题收为 `text-lg`；转码状态说明已缩短。
+- `components/MaterialPreviewModal.tsx`：全图查看层已去掉毛玻璃背景和圆形悬浮关闭按钮，改为普通遮罩和矩形图标按钮。
 
 建议动作：
 
@@ -1081,7 +1080,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - 去掉 emoji，提示文案缩短，错误和状态集中显示。上传弹窗已完成，剩余弹窗继续检查。
 - 必填用红色星号或中性小字，不用渐变胶囊。上传弹窗已完成，编辑弹窗仍需跟进。
 - 输入框必填态只改边框或辅助提示，不用渐变背景。上传弹窗已完成，编辑弹窗仍需跟进。
-- 预览弹窗减少舞台感，优先突出文件本身和右侧字段信息。音频预览已先收口，后续继续处理视频状态面板。
+- 预览弹窗减少舞台感，优先突出文件本身和右侧字段信息。音频、视频和图片预览已完成第一轮收口，后续继续检查具体素材尺寸和移动端效果。
 
 ### P2-10 模板编辑器更像低代码演示器，后续需要工具化（预览区已完成第一轮收口）