From 90964aab741b3a879b2215a1e25bb5e6b09a63aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Mon, 20 Oct 2025 15:25:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=88=9B=E5=BB=BA=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=9A=E5=9B=BE=E7=89=87=E5=90=8D=E7=A7=B0=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PhotoPreview/PhotoPreviewSection.tsx      | 128 +++++++++++-------
 1 file changed, 81 insertions(+), 47 deletions(-)

diff --git a/components/pages/create-video/PhotoPreview/PhotoPreviewSection.tsx b/components/pages/create-video/PhotoPreview/PhotoPreviewSection.tsx
index 515f04d..83923d7 100644
--- a/components/pages/create-video/PhotoPreview/PhotoPreviewSection.tsx
+++ b/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,58 +95,90 @@ 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) => (
-                    <div
-                        key={photo.id || `photo-${index}`}
-                        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"
-                        onMouseEnter={() => setHoveredIndex(index)}
-                        onMouseLeave={() => setHoveredIndex(null)}
-                    >
-                        {/* Photo Image */}
-                        <div className="w-full h-full relative">
-                            <NextImage
-                                src={photo.url}
-                                alt={`${getTypeLabel(photo.type)} ${index + 1}`}
-                                fill
-                                className="object-cover"
-                                unoptimized
-                            />
-                        </div>
-
-                        {/* Hover Overlay with Preview and Replace Icons */}
+                {photos.map((photo, index) => {
+                    const photoName = photo.name || `${getTypeLabel(photo.type)} ${index + 1}`;
+                    
+                    return (
                         <div
-                            data-alt="hover-overlay"
-                            className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-1 z-[5]"
+                            key={photo.id || `photo-${index}`}
+                            data-alt="photo-item-wrapper"
+                            className="flex-shrink-0 flex flex-col gap-1"
                         >
-                            {/* Preview Button */}
-                            <button
-                                data-alt="preview-button"
-                                className="w-5 h-5 rounded-full bg-cyan-400/90 hover:bg-cyan-400 flex items-center justify-center transition-all duration-200 shadow-lg"
-                                onClick={(e) => handlePreviewClick(e, photo.url)}
+                            {/* Photo Image Container */}
+                            <div
+                                data-alt="photo-item"
+                                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)}
                             >
-                                <EyeOutlined className="text-xs text-black" />
-                            </button>
+                                {/* Photo Image */}
+                                <div className="w-full h-full relative">
+                                    <NextImage
+                                        src={photo.url}
+                                        alt={photoName}
+                                        fill
+                                        className="object-cover"
+                                        unoptimized
+                                    />
+                                </div>
 
-                            {/* Replace Button */}
-                            <button
-                                data-alt="replace-button"
-                                className="w-5 h-5 rounded-full bg-cyan-400/90 hover:bg-cyan-400 flex items-center justify-center transition-all duration-200 shadow-lg"
-                                onClick={(e) => handleReplaceClick(e, index)}
-                            >
-                                <SwapOutlined className="text-xs text-black" />
-                            </button>
-                        </div>
+                                {/* Hover Overlay with Preview and Replace Icons */}
+                                <div
+                                    data-alt="hover-overlay"
+                                    className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-1 z-[5]"
+                                >
+                                    {/* Preview Button */}
+                                    <button
+                                        data-alt="preview-button"
+                                        className="w-5 h-5 rounded-full bg-cyan-400/90 hover:bg-cyan-400 flex items-center justify-center transition-all duration-200 shadow-lg"
+                                        onClick={(e) => handlePreviewClick(e, photo.url)}
+                                    >
+                                        <EyeOutlined className="text-xs text-black" />
+                                    </button>
 
-                        {/* Type Icon - Bottom Left Corner */}
-                        <div
-                            data-alt="type-icon"
-                            className="absolute bottom-1 left-1 w-4 h-4 bg-black/60 backdrop-blur-sm text-cyan-400 rounded-sm flex items-center justify-center z-[6]"
-                        >
-                            {getTypeIcon(photo.type)}
+                                    {/* Replace Button */}
+                                    <button
+                                        data-alt="replace-button"
+                                        className="w-5 h-5 rounded-full bg-cyan-400/90 hover:bg-cyan-400 flex items-center justify-center transition-all duration-200 shadow-lg"
+                                        onClick={(e) => handleReplaceClick(e, index)}
+                                    >
+                                        <SwapOutlined className="text-xs text-black" />
+                                    </button>
+                                </div>
+
+                                {/* Type Icon - Bottom Left Corner */}
+                                <div
+                                    data-alt="type-icon"
+                                    className="absolute bottom-1 left-1 w-4 h-4 bg-black/60 backdrop-blur-sm text-cyan-400 rounded-sm flex items-center justify-center z-[6]"
+                                >
+                                    {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>
-                ))}
+                    );
+                })}
             </div>
 
             {/* Preview Modal - Using absolute positioning to avoid layout space */}