统一创建入口：图片名称展示

components/pages/create-video/PhotoPreview/PhotoPreviewSection.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useState } from 'react';
-import { Image } from 'antd';
+import { Image, Tooltip } from 'antd';
 import NextImage from 'next/image';
 import { EyeOutlined, SwapOutlined, UserOutlined, CameraOutlined, BulbOutlined } from '@ant-design/icons';
+import { useDeviceType } from '@/hooks/useDeviceType';
 import type { PhotoPreviewSectionProps, PhotoType } from './types';
 import './styles.css';
 
@@ -24,6 +25,7 @@ export default function PhotoPreviewSection({
     const [previewVisible, setPreviewVisible] = useState(false);
     const [previewImage, setPreviewImage] = useState('');
     const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+    const { isMobileDevice } = useDeviceType();
 
     /**
      * Get icon for photo type
@@ -93,11 +95,19 @@ export default function PhotoPreviewSection({
                 data-alt="photo-list-container"
                 className="flex gap-2 overflow-x-auto overflow-y-hidden photo-list-scrollbar pb-1"
             >
-                {photos.map((photo, index) => (
+                {photos.map((photo, index) => {
+                    const photoName = photo.name || `${getTypeLabel(photo.type)} ${index + 1}`;
+                    
+                    return (
                         <div
                             key={photo.id || `photo-${index}`}
+                            data-alt="photo-item-wrapper"
+                            className="flex-shrink-0 flex flex-col gap-1"
+                        >
+                            {/* Photo Image Container */}
+                            <div
                                 data-alt="photo-item"
-                        className="relative flex-shrink-0 w-16 h-16 rounded-[16px] overflow-hidden border border-white/10 hover:border-cyan-400/60 transition-all duration-200 group bg-black/20"
+                                className="relative w-16 h-16 rounded-[16px] overflow-hidden border border-white/10 hover:border-cyan-400/60 transition-all duration-200 group bg-black/20"
                                 onMouseEnter={() => setHoveredIndex(index)}
                                 onMouseLeave={() => setHoveredIndex(null)}
                             >
@@ -105,7 +115,7 @@ export default function PhotoPreviewSection({
                                 <div className="w-full h-full relative">
                                     <NextImage
                                         src={photo.url}
-                                alt={`${getTypeLabel(photo.type)} ${index + 1}`}
+                                        alt={photoName}
                                         fill
                                         className="object-cover"
                                         unoptimized
@@ -144,7 +154,31 @@ export default function PhotoPreviewSection({
                                     {getTypeIcon(photo.type)}
                                 </div>
                             </div>
-                ))}
+
+                            {/* Photo Name - Below Image */}
+                            {isMobileDevice ? (
+                                // H5: Direct display with line-clamp
+                                <div
+                                    data-alt="photo-name-mobile"
+                                    className="w-16 text-white/70 text-[10px] leading-tight line-clamp-2 text-center px-0.5"
+                                    style={{ wordBreak: 'break-word' }}
+                                >
+                                    {photoName}
+                                </div>
+                            ) : (
+                                // PC: Tooltip on hover
+                                <Tooltip title={photoName} placement="bottom">
+                                    <div
+                                        data-alt="photo-name-desktop"
+                                        className="w-16 text-white/70 text-xs text-center truncate px-0.5 cursor-default"
+                                    >
+                                        {photoName}
+                                    </div>
+                                </Tooltip>
+                            )}
+                        </div>
+                    );
+                })}
             </div>
 
             {/* Preview Modal - Using absolute positioning to avoid layout space */}