From 568cb65cf32cc02e18bb11d5f32a6e2171ad341a 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, 13 Oct 2025 20:19:49 +0800
Subject: [PATCH] =?UTF-8?q?loading=E5=8A=A8=E7=94=BB=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layout.tsx                                |   1 +
 components/pages/work-flow/H5MediaViewer.tsx  |  34 +-
 components/pages/work-flow/RenderLoading.tsx  | 448 ++++++++++++++++++
 components/pages/work-flow/media-viewer.tsx   |  26 +-
 components/pages/work-flow/thumbnail-grid.tsx |  17 +-
 iconfont/iconfont.css                         |  23 +
 iconfont/iconfont.ttf                         | Bin 0 -> 2428 bytes
 iconfont/iconfont.woff                        | Bin 0 -> 1664 bytes
 iconfont/iconfont.woff2                       | Bin 0 -> 1248 bytes
 9 files changed, 518 insertions(+), 31 deletions(-)
 create mode 100644 components/pages/work-flow/RenderLoading.tsx
 create mode 100644 iconfont/iconfont.css
 create mode 100644 iconfont/iconfont.ttf
 create mode 100644 iconfont/iconfont.woff
 create mode 100644 iconfont/iconfont.woff2

diff --git a/app/layout.tsx b/app/layout.tsx
index 9631a78..71bf208 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 'use client'
 import './globals.css';
+import '@/iconfont/iconfont.css';
 import { createContext, useContext, useEffect, useState } from 'react';
 import { Providers } from '@/components/providers';
 import { ConfigProvider, theme } from 'antd';
diff --git a/components/pages/work-flow/H5MediaViewer.tsx b/components/pages/work-flow/H5MediaViewer.tsx
index ec2cc51..3ce95a7 100644
--- a/components/pages/work-flow/H5MediaViewer.tsx
+++ b/components/pages/work-flow/H5MediaViewer.tsx
@@ -14,6 +14,7 @@ import { Drawer } from 'antd';
 import { useSearchParams } from 'next/navigation';
 import error_image from '@/public/assets/error.webp';
 import { showDownloadOptionsModal } from './download-options-modal';
+import RenderLoading from './RenderLoading';
 
 interface H5MediaViewerProps {
     /** 任务对象，包含各阶段数据 */
@@ -150,9 +151,10 @@ export function H5MediaViewer({
             return [...roles, ...scenes].map(item => ({
                 url: item?.url as string | undefined,
                 status: item?.status as number | undefined,
+                type: item?.type as string | undefined,
             }));
         }
-        return [] as Array<{ url?: string; status?: number }>;
+        return [] as Array<{ url?: string; status?: number; type?: string }>;
     }, [stage, taskObject.roles?.data, taskObject.scenes?.data]);
 
     // 占位，避免未使用警告
@@ -266,18 +268,19 @@ export function H5MediaViewer({
                                 <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="video-status" style={{
                                     height: videoWrapperHeight,
                                 }}>
-                                    {status === 0 && (
-                                        <span className="text-blue-500 text-base">Generating...</span>
+                                    {(status === 0 || status === 2) && (
+                                        <RenderLoading
+                                            recordSize="120px"
+                                            loadingText={status === 0 ? 'Generating video...' : 'Generate failed'}
+                                            isFailed={status === 2}
+                                        />
                                     )}
-                                    {status === 2 && (
+                                    {/* {status === 2 && (
                                       <div className="flex flex-col items-center justify-center gap-1">
                                         <img src={error_image.src} alt="error" className="w-12 h-12" />
                                         <span className="text-[#fa485f] text-base">Generate failed</span>
                                       </div>
-                                    )}
-                                    {status !== 0 && status !== 2 && (
-                                        <span className="text-white/70 text-base">Pending</span>
-                                    )}
+                                    )} */}
                                 </div>
                             )}
                         </div>
@@ -315,15 +318,19 @@ export function H5MediaViewer({
                                 <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="image-status" style={{
                                     height: imageWrapperHeight,
                                 }}>
-                                    {status === 0 && (
-                                        <span className="text-blue-500 text-base">Generating...</span>
+                                    {(status === 0 || status === 2) && (
+                                        <RenderLoading
+                                            recordSize="120px"
+                                            loadingText={status === 0 ? (item.type === 'role' ? 'Generating role...' : 'Generating scene...') : 'Generate failed'}
+                                            isFailed={status === 2}
+                                        />
                                     )}
-                                    {status === 2 && (
+                                    {/* {status === 2 && (
                                         <div className="flex flex-col items-center justify-center gap-1">
                                             <img src={error_image.src} alt="error" className="w-12 h-12" />
                                             <span className="text-[#fa485f] text-base">Generate failed</span>
                                         </div>
-                                    )}
+                                    )} */}
                                 </div>
                             )}
                         </div>
@@ -544,8 +551,9 @@ export function H5MediaViewer({
               </div>
             )}
             <style jsx global>{`
-              [data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; }
+              [data-alt='carousel-wrapper'] .slick-slide { width: 100%;display: flex !important;justify-content: center; }
               .slick-slider { height: 100% !important; }
+              .slick-current > div { width: 100% !important; }
               .ant-carousel { height: 100% !important; }
               .slick-list { width: 100%;height: 100% !important;max-height: 100%; }
               .slick-track { display: flex !important; align-items: center;height: 100% !important; }
diff --git a/components/pages/work-flow/RenderLoading.tsx b/components/pages/work-flow/RenderLoading.tsx
new file mode 100644
index 0000000..7af96c9
--- /dev/null
+++ b/components/pages/work-flow/RenderLoading.tsx
@@ -0,0 +1,448 @@
+import React from 'react';
+
+/** Props for RenderLoading component */
+interface RenderLoadingProps {
+    /** Size of the vinyl record */
+    recordSize?: string;
+    /** Apple silver light color for metallic effect */
+    appleSilverLight?: string;
+    /** Apple silver main color */
+    appleSilverMain?: string;
+    /** Apple silver dark color for shadows */
+    appleSilverDark?: string;
+    /** Core gradient start color (cyan) */
+    coreGradientStart?: string;
+    /** Core gradient middle color (purple) */
+    coreGradientMid?: string;
+    /** Core gradient end color (magenta) */
+    coreGradientEnd?: string;
+    /** Core glow color effect */
+    coreGlowColor?: string;
+    /** Scanner light color */
+    scannerColor?: string;
+    /** Record background color */
+    recordBg?: string;
+    /** Overall background color */
+    backgroundColor?: string;
+    /** Loading text */
+    loadingText?: string;
+    /** Failed state trigger */
+    isFailed?: boolean;
+}
+
+/**
+ * Vinyl record loading animation component with pulsing core and tonearm
+ * @param props - Component configuration props
+ * @returns React component with animated vinyl record loader
+ */
+const RenderLoading: React.FC<RenderLoadingProps> = ({
+    recordSize = '250px',
+    appleSilverLight = '#E5E5EA',
+    appleSilverMain = '#D1D1D6',
+    appleSilverDark = '#8A8A8E',
+    coreGradientStart = '#00E4E4',
+    coreGradientMid = '#8A2BE2',
+    coreGradientEnd = '#FF00FF',
+    coreGlowColor = 'rgba(138, 43, 226, 0.9)',
+    scannerColor = 'rgba(0, 228, 228, 0.35)',
+    recordBg = '#1A1A1A',
+    backgroundColor = '#000',
+    loadingText = 'Generating...',
+    isFailed = false,
+}) => {
+    /** Dead metal color for failed state */
+    const deadMetalColor = '#3A3A3A';
+    const styles = `
+        @keyframes rotateRecord {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        @keyframes rotateScanner {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        @keyframes placeTonearm {
+            from { transform: rotate(-30deg); }
+            to { transform: rotate(0deg); }
+        }
+        
+        @keyframes bobTonearm {
+            0%, 100% {
+                transform: rotate(0deg) translateY(0);
+            }
+            25% {
+                transform: rotate(0.5deg) translateY(2px);
+            }
+            75% {
+                transform: rotate(-0.5deg) translateY(-2px);
+            }
+        }
+
+        @keyframes retractTonearm {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(-30deg); }
+        }
+
+        @keyframes breakTonearm {
+            0% {
+                transform: rotate(0deg);
+                animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.7); /* 加速下坠 */
+            }
+            60% {
+                transform: rotate(-55deg); /* 过冲到最大角度 */
+                animation-timing-function: cubic-bezier(0.1, 0.3, 0.4, 1.5); /* 回弹 */
+            }
+            100% {
+                transform: rotate(-90deg); /* 稳定在最终角度 */
+            }
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(1);
+                box-shadow: 0 0 15px 6px ${coreGlowColor},
+                            inset 0 0 4px 1px rgba(255,255,255,0.4);
+                opacity: 0.9;
+            }
+            50% {
+                transform: scale(1.4);
+                box-shadow: 0 0 35px 15px ${coreGlowColor},
+                            inset 0 0 8px 3px rgba(255,255,255,0.7);
+                opacity: 1;
+            }
+        }
+    `;
+
+    return (
+        <>
+            <style>{styles}</style>
+            <div
+                data-alt="vinyl-loading-container"
+                style={{
+                    margin: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '20px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor,
+                    fontFamily: 'sans-serif',
+                    overflow: 'hidden',
+                }}
+            >
+                <div
+                    data-alt="loading-wrapper"
+                    style={{
+                        position: 'relative',
+                        width: recordSize,
+                        height: recordSize,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    {/* Vinyl Record Container */}
+                    <div
+                        data-alt="vinyl-record"
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            position: 'relative',
+                            animation: isFailed ? 'none' : 'rotateRecord 4s linear infinite',
+                            transformStyle: 'preserve-3d',
+                        }}
+                    >
+                        {/* Record Half - Top */}
+                        <div
+                            data-alt="record-half-top"
+                            style={{
+                                position: 'absolute',
+                                width: '100%',
+                                height: '100%',
+                                backgroundColor: recordBg,
+                                borderRadius: '50%',
+                                boxShadow: `0 15px 35px rgba(0, 0, 0, 0.7), 
+                                            inset 0 0 20px rgba(0,0,0,1),
+                                            inset 0 0 2px 1px rgba(255, 255, 255, 0.1)`,
+                                overflow: 'hidden',
+                                clipPath: isFailed 
+                                    ? 'polygon(0 0, 100% 0, 100% 50%, 85% 51%, 70% 49%, 55% 52%, 40% 50%, 25% 51.5%, 10% 49.5%, 0 50%)'
+                                    : 'polygon(0 0, 100% 0, 100% 50%, 0 50%)',
+                                transition: 'transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), clip-path 0.3s ease',
+                                transform: isFailed ? 'translateY(-10px) rotate(-4deg)' : 'none',
+                            }}
+                        >
+                            {/* Record grooves effect */}
+                            <div
+                                data-alt="record-grooves-top"
+                                style={{
+                                    content: '""',
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    borderRadius: '50%',
+                                    backgroundImage: `repeating-radial-gradient(
+                                        circle at center,
+                                        rgba(255, 255, 255, 0.1) 0,
+                                        rgba(255, 255, 255, 0.15) 1px,
+                                        transparent 1px,
+                                        transparent 7px
+                                    )`,
+                                    mixBlendMode: 'overlay',
+                                    zIndex: 1,
+                                }}
+                            />
+
+                            {/* Scanner light */}
+                            <div
+                                data-alt="scanner-light-top"
+                                style={{
+                                    position: 'absolute',
+                                    width: '100%',
+                                    height: '100%',
+                                    borderRadius: '50%',
+                                    background: `conic-gradient(
+                                        from 90deg,
+                                        transparent 0%,
+                                        ${scannerColor} 10%,
+                                        transparent 25%
+                                    )`,
+                                    animation: isFailed ? 'none' : 'rotateScanner 3s linear infinite',
+                                    zIndex: 2,
+                                }}
+                            />
+
+                            {/* Center label */}
+                            <div
+                                data-alt="center-label-top"
+                                style={{
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    margin: 'auto',
+                                    width: '38%',
+                                    height: '38%',
+                                    background: '#111',
+                                    borderRadius: '50%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    boxShadow: 'inset 0 0 20px rgba(0, 0, 0, 1)',
+                                    zIndex: 3,
+                                }}
+                            >
+                                {/* Pulsing core */}
+                                <div
+                                    data-alt="pulsing-core-top"
+                                    style={{
+                                        width: '12%',
+                                        height: '12%',
+                                        background: isFailed 
+                                            ? appleSilverDark 
+                                            : `radial-gradient(circle at center, ${coreGradientStart} 0%, ${coreGradientMid} 50%, ${coreGradientEnd} 100%)`,
+                                        borderRadius: '50%',
+                                        animation: isFailed ? 'none' : 'pulse 1.5s ease-in-out infinite',
+                                        boxShadow: isFailed ? 'none' : undefined,
+                                        transition: 'background 0.3s, box-shadow 0.3s',
+                                    }}
+                                />
+                            </div>
+                        </div>
+
+                        {/* Record Half - Bottom */}
+                        <div
+                            data-alt="record-half-bottom"
+                            style={{
+                                position: 'absolute',
+                                width: '100%',
+                                height: '100%',
+                                backgroundColor: recordBg,
+                                borderRadius: '50%',
+                                boxShadow: `0 15px 35px rgba(0, 0, 0, 0.7), 
+                                            inset 0 0 20px rgba(0,0,0,1),
+                                            inset 0 0 2px 1px rgba(255, 255, 255, 0.1)`,
+                                overflow: 'hidden',
+                                clipPath: isFailed
+                                    ? 'polygon(0 50%, 10% 49.5%, 25% 51.5%, 40% 50%, 55% 52%, 70% 49%, 85% 51%, 100% 50%, 100% 100%, 0 100%)'
+                                    : 'polygon(0 50%, 100% 50%, 100% 100%, 0 100%)',
+                                transition: 'transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), clip-path 0.3s ease',
+                                transform: isFailed ? 'translateY(10px) rotate(4deg)' : 'none',
+                            }}
+                        >
+                            {/* Record grooves effect */}
+                            <div
+                                data-alt="record-grooves-bottom"
+                                style={{
+                                    content: '""',
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    borderRadius: '50%',
+                                    backgroundImage: `repeating-radial-gradient(
+                                        circle at center,
+                                        rgba(255, 255, 255, 0.1) 0,
+                                        rgba(255, 255, 255, 0.15) 1px,
+                                        transparent 1px,
+                                        transparent 7px
+                                    )`,
+                                    mixBlendMode: 'overlay',
+                                    zIndex: 1,
+                                }}
+                            />
+
+                            {/* Scanner light */}
+                            <div
+                                data-alt="scanner-light-bottom"
+                                style={{
+                                    position: 'absolute',
+                                    width: '100%',
+                                    height: '100%',
+                                    borderRadius: '50%',
+                                    background: `conic-gradient(
+                                        from 90deg,
+                                        transparent 0%,
+                                        ${scannerColor} 10%,
+                                        transparent 25%
+                                    )`,
+                                    animation: isFailed ? 'none' : 'rotateScanner 3s linear infinite',
+                                    zIndex: 2,
+                                }}
+                            />
+
+                            {/* Center label */}
+                            <div
+                                data-alt="center-label-bottom"
+                                style={{
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    margin: 'auto',
+                                    width: '38%',
+                                    height: '38%',
+                                    background: '#111',
+                                    borderRadius: '50%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    boxShadow: 'inset 0 0 20px rgba(0, 0, 0, 1)',
+                                    zIndex: 3,
+                                }}
+                            >
+                                {/* Pulsing core */}
+                                <div
+                                    data-alt="pulsing-core-bottom"
+                                    style={{
+                                        width: '12%',
+                                        height: '12%',
+                                        background: isFailed 
+                                            ? appleSilverDark 
+                                            : `radial-gradient(circle at center, ${coreGradientStart} 0%, ${coreGradientMid} 50%, ${coreGradientEnd} 100%)`,
+                                        borderRadius: '50%',
+                                        animation: isFailed ? 'none' : 'pulse 1.5s ease-in-out infinite',
+                                        boxShadow: isFailed ? 'none' : undefined,
+                                        transition: 'background 0.3s, box-shadow 0.3s',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Tonearm */}
+                    <div
+                        data-alt="tonearm"
+                        style={{
+                            position: 'absolute',
+                            width: `calc(${recordSize} * 0.5)`,
+                            height: `calc(${recordSize} * 0.1)`,
+                            right: `calc(${recordSize} * -0.25)`,
+                            top: '35%',
+                            transformOrigin: `calc(100% - ${recordSize} * 0.06) center`,
+                            zIndex: 10,
+                            animation: isFailed 
+                                ? 'breakTonearm 1.2s forwards' 
+                                : 'placeTonearm 1.5s ease-in-out forwards, bobTonearm 1s ease-in-out 1.5s infinite',
+                        }}
+                    >
+                        {/* Arm */}
+                        <div
+                            data-alt="tonearm-arm"
+                            style={{
+                                width: '88%',
+                                height: '30%',
+                                background: isFailed 
+                                    ? deadMetalColor 
+                                    : `linear-gradient(90deg, 
+                                        ${appleSilverDark} 0%, 
+                                        ${appleSilverLight} 50%, 
+                                        ${appleSilverDark} 100%)`,
+                                position: 'absolute',
+                                left: 0,
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                borderRadius: '10px',
+                                transition: 'background 0.3s ease',
+                            }}
+                        />
+
+                        {/* Head */}
+                        <div
+                            data-alt="tonearm-head"
+                            style={{
+                                width: '20%',
+                                height: '60%',
+                                background: isFailed ? deadMetalColor : appleSilverMain,
+                                position: 'absolute',
+                                left: 0,
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                borderRadius: '4px',
+                                boxShadow: 'inset 0 0 4px rgba(0,0,0,0.4)',
+                                transition: 'background 0.3s ease',
+                            }}
+                        />
+
+                        {/* Pivot */}
+                        <div
+                            data-alt="tonearm-pivot"
+                            style={{
+                                width: `calc(${recordSize} * 0.12)`,
+                                height: `calc(${recordSize} * 0.12)`,
+                                background: isFailed 
+                                    ? deadMetalColor 
+                                    : `radial-gradient(circle at 65% 35%, ${appleSilverLight}, ${appleSilverMain} 60%, ${appleSilverDark} 100%)`,
+                                borderRadius: '50%',
+                                position: 'absolute',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                boxShadow: isFailed 
+                                    ? '2px 2px 5px rgba(0,0,0,0.4), inset 1px 1px 1px #222'
+                                    : `2px 2px 5px rgba(0,0,0,0.4), inset 1px 1px 1px ${appleSilverLight}`,
+                                transition: 'background 0.3s ease, box-shadow 0.3s ease',
+                            }}
+                        />
+                    </div>
+                </div>
+                {/* 加载/失败文案 */}
+                <div data-alt="loading-text" className={`text-center ${isFailed ? 'text-[#d2c6c6]' : 'text-white'}`}>
+                    {loadingText}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default RenderLoading;
+
diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index d6ef89a..2c99514 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -18,8 +18,7 @@ import { VideoEditOverlay } from './video-edit/VideoEditOverlay';
 import { EditPoint as EditPointType } from './video-edit/types';
 import { isVideoModificationEnabled } from '@/lib/server-config';
 import { useSearchParams } from 'next/navigation';
-import error_image from '@/public/assets/error.webp';
-import { AspectRatioValue } from '@/components/ChatInputBox/AspectRatioSelector';
+import RenderLoading from './RenderLoading';
 
 interface MediaViewerProps {
   taskObject: TaskObject;
@@ -573,14 +572,16 @@ export const MediaViewer = React.memo(function MediaViewer({
         {taskObject.videos.data[currentSketchIndex].video_status !== 1 && (
           <div className="absolute inset-0 overflow-hidden z-20">
             {/* 生成中 */}
-            {taskObject.videos.data[currentSketchIndex].video_status === 0 && (
-              renderLoading()
+            {(taskObject.videos.data[currentSketchIndex].video_status === 0 || taskObject.videos.data[currentSketchIndex].video_status === 2) && (
+              <RenderLoading
+                loadingText={taskObject.videos.data[currentSketchIndex].video_status === 0 ? 'Generating video...' : 'Violation of security policy. Please modify your prompt and regenerate.'}
+                isFailed={taskObject.videos.data[currentSketchIndex].video_status === 2}
+              />
             )}
             {/* 生成失败 */}
-            {taskObject.videos.data[currentSketchIndex].video_status === 2 && (
+            {/* {taskObject.videos.data[currentSketchIndex].video_status === 2 && (
               <div className="absolute inset-0 bg-[#fcb0ba1a] flex flex-col items-center justify-center">
                 <img src={error_image.src} alt="error" className="w-12 h-12" />
-                {/* 文案 */}
                 <div className="text-white text-center">
                   <div className="text-sm font-medium" role="status" aria-live="polite" aria-busy="true">
                     Failed
@@ -588,7 +589,7 @@ export const MediaViewer = React.memo(function MediaViewer({
                   <div className="text-xs text-white/60 mt-1">Violation of security policy. Please modify your prompt and regenerate.</div>
                 </div>
               </div>
-            )}
+            )} */}
           </div>
         )}
 
@@ -778,14 +779,17 @@ export const MediaViewer = React.memo(function MediaViewer({
         }}
       >
         {/* 状态 */}
-        {currentSketch.status === 0 && (
-          renderLoading()
+        {(currentSketch.status === 0 || currentSketch.status === 2) && (
+          <RenderLoading
+            loadingText={currentSketch.status === 0 ? (currentSketch.type === 'role' ? 'Generating role...' : 'Generating scene...') : 'Generate failed'}
+            isFailed={currentSketch.status === 2}
+          />
         )}
-        {currentSketch.status === 2 && (
+        {/* {currentSketch.status === 2 && (
           <div className="absolute inset-0 bg-[#fcb0ba1a] flex items-center justify-center">
             <img src={error_image.src} alt="error" className="w-12 h-12" />
           </div>
-        )}
+        )} */}
         {/* 只在生成过程中或没有分镜图片时使用ProgressiveReveal */}
         {currentSketch.status === 1 && (
           <AnimatePresence mode="wait">
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index 4972520..12200c4 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -5,7 +5,6 @@ import { CircleAlert, Film } from 'lucide-react';
 import { TaskObject } from '@/api/DTO/movieEdit';
 import { getFirstFrame } from '@/utils/tools';
 import { AspectRatioValue } from '@/components/ChatInputBox/AspectRatioSelector';
-import error_image from '@/public/assets/error.webp';
 
 interface ThumbnailGridProps {
   isDisabledFocus: boolean;
@@ -52,7 +51,7 @@ export function ThumbnailGrid({
   const [scrollLeft, setScrollLeft] = useState(0);
   const [isFocused, setIsFocused] = useState(false);
 
-  // 监听当前选中索引变化，自动滚动到对应位置
+  // 监听当前选中索引变化，自动滚动到对应位置（居中显示）
   useEffect(() => {
     if (thumbnailsRef.current) {
       const container = thumbnailsRef.current;
@@ -60,9 +59,13 @@ export function ThumbnailGrid({
       
       if (currentSketchIndex >= 0 && currentSketchIndex < thumbnails.length) {
         const thumbnail = thumbnails[currentSketchIndex] as HTMLElement;
-        const containerLeft = container.getBoundingClientRect().left;
-        const thumbnailLeft = thumbnail.getBoundingClientRect().left;
-        const scrollPosition = container.scrollLeft + (thumbnailLeft - containerLeft);
+        const containerRect = container.getBoundingClientRect();
+        const thumbnailRect = thumbnail.getBoundingClientRect();
+        
+        // 计算滚动位置：将缩略图居中显示
+        const containerCenter = containerRect.width / 2;
+        const thumbnailCenter = thumbnailRect.width / 2;
+        const scrollPosition = container.scrollLeft + (thumbnailRect.left - containerRect.left) - containerCenter + thumbnailCenter;
 
         container.scrollTo({
           left: scrollPosition,
@@ -266,7 +269,7 @@ export function ThumbnailGrid({
             )}
             {taskObject.videos.data[index].video_status === 2 && (
               <div className="absolute inset-0 bg-red-500/10 flex items-center justify-center z-20">
-                <img src={error_image.src} alt="error" className="w-6 h-6" />
+                <i className="iconfont icon-shipindiushibaojing text-[#773f8ecc] !text-lg" />
               </div>
             )}
 
@@ -340,7 +343,7 @@ export function ThumbnailGrid({
             )}
             {sketch.status === 2 && (
               <div className="absolute inset-0 bg-red-500/10 flex items-center justify-center z-20">
-                <img src={error_image.src} alt="error" className="w-6 h-6" />
+                <i className="iconfont icon-tudiushi text-[#773f8ecc] !text-lg" />
               </div>
             )}
             {/* 只在生成过程中或没有分镜图片时使用ProgressiveReveal */}
diff --git a/iconfont/iconfont.css b/iconfont/iconfont.css
new file mode 100644
index 0000000..1473cf6
--- /dev/null
+++ b/iconfont/iconfont.css
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5039410 */
+  src: url('./iconfont.woff2?t=1760340285776') format('woff2'),
+       url('./iconfont.woff?t=1760340285776') format('woff'),
+       url('./iconfont.ttf?t=1760340285776') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shipindiushibaojing:before {
+  content: "\e618";
+}
+
+.icon-tudiushi:before {
+  content: "\e717";
+}
+
diff --git a/iconfont/iconfont.ttf b/iconfont/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..624634ef02f04bf6829e8fcf9a52cd689dde85f9
GIT binary patch
literal 2428
zcmd^ATW?!M5T4yVciYGIiG5CP#K$(V6O!7Ab8Q<E)O#f)P+OuFAzIgQY!_c5$Egx{
z2^XOTTEP=PpnZa>T-pby0Eq`AUU-0q3JFk4A8173714r{FnfHgmcTz?SF`iY?Ck8!
zoZUS@0KfyQz+mX$(P#G9Z}z?jKqgUp?5U&a%+!v<>nNW``BbiwT`1o8W)tOmNUs;l
zEAtb#8=U~`9MZmGK0CK#?;mq$`xDZ55f$=H_8Q{PkRB~o8p~b;xb`<3yyaRhO9XNe
z*RG<hRI<wp#DXtzz8z(|nyusmm!>`hkiG_>g@xK;<NNnD2|yji`9pxQv(>FtcuqhO
z07st9!;Lu_)Jlhv$4~mFeg{v}_Gjb7=iIQ#w{8i*bQBe!?sD#l!6%?OGS_Mj-g;<W
zgCUp(y6?b~$3QP<8&&A!K{$=Ce;AW;sgOng%@_&J@mYcz0+^8#ryu}%8$`@?jbg^|
zR+E!oAwzH_1(BilKibpt`{&?`JMHV1Qx9N2!YZ2mvl^6d*dm0u4`v83*i@6}UHjvx
z<tqn~WA>;Q92*Ha0m^sT!YZ^lTJj8<IbfX#NB{TcbqdhumI14B2TwF7UfFf4Nv*Ty
z+ySig)_wLTlVKcY;Uwgs053oTF2ZH_7{D4JX~v@AxE%AVlAlRoIYL4aYDPpe!pxDl
z6qiXjWSP6kj5s#K(sV2>#bl{Bo*an?10*>jBWlvvj7UriyDZ5%!GU+3BooO*n&80u
zG?^je6WB*GJw%*H#A7<T?;TCbJp|R$bc#uBUZzks<k6_8%T`-g!18${L6HPP2_Z5Q
zn5cS;u%ZMy9}y`krA^DwP1X0UN~lN#N~wTGgx-)1Q#WY%iIq3Ps;JW9+VZ){wUxD<
zYs+gpuQ6Frd=`5TZ7DjYRAPEZY=^3PERXK<cvQQy$0wtINu+waJ=odRyKiXouWNQP
zzB^86_-ZI+1^n&tkR+>OfR10`K4c}}H3NpKhC(4(&^mM~L{vpp1AfzxMAfTc2ISNG
zmRDsf5+x$$BUp+@aH4*RG0l7Bf-H+h@q*J%>K;*+>1IIl_;i0j_o;>w?TGp?ISh<p
zo_a@5f7sHyy1YWH-S#Qn!yjBV<5RIjA`$t>r!gjJ@gY1Pczd>PvD^3>DG-Fi@GPE$
z8XlX>c#6cNkU5btLsBd;I-ZPX%y2M~42~w^(U=qtPE3;s!69Qti0%)EOe-2oj0H!>
zNld4q9-5h^qbbVxTJB?lyLp^&AxwhZ{iJWQzrS1cdJV7lJiQwk=(bgH!xYt*_2J-&
zOS0Kv$weg?@cVhuHANOhM%s*xt;oOt{UJJ??(9rY?`g8Art2Xc8xA3zYJEHV`X~EN
zaMy<S@?d216+<OCNl~PYU#^Fkaq6z-^=j|nS5dKmKEFQ@2pT~{jm~rrMrb)QxEXuk
zobR!Duj%>}ZloRJL-VQ`aMO9axYUN!d;$3@+vZ{lGIY6^p+4qf0r6ul7V(dmaj}H@
z$6c(!0PJ_M2R$zEmr_u1p9H+>Vgdnp*Toccxb9+x`mbCpApXw9BABr5VhQydF4ka{
z_+0FP1j+5K=d+FcoPB!5F6C;~`C7Hn;z#m@rE<335?g#WUtcWMs`hYdsHHlXujcD5
zH;ZQrnMPyYp0C#`_5t*lFPCffLcMk-pKGLwjmE;RbeiwO^{HH~0(+qjdC20kl!rO6
z;WVt^SaObN73T4vR&j2-d<3lvumojXS^wAUcI#QRuEQeQac?#ZLkfSh+pP|wRn@WF
z9?c@0#oaO(M*}0Wk?QEFg6M!7UmhbVBewAa^0_nUCx_N4C_1YaU>BsZxAJM(r<^=1
q{72ku?xAy~2MljLVMKto#bRlpRGlj=Avm3_oheldN@J-h1N;sD)<kLm

literal 0
HcmV?d00001

diff --git a/iconfont/iconfont.woff b/iconfont/iconfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..24a5a77975cd8f725e44ac7bf4a3cd94bef4788b
GIT binary patch
literal 1664
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
Vy0?8WGG<R}uLA8s$~>s%e*?r>v~U0b

literal 0
HcmV?d00001

diff --git a/iconfont/iconfont.woff2 b/iconfont/iconfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c68a25ea1892d6a72780552e721fd84e3a8d78a9
GIT binary patch
literal 1248
zcmV<61Rwi%Pew8T0RR9100iIw3jhEB0112m00ff&0RR9100000000000000000000
z0000SR0d!Gg9ZwQM1?*9HUcCA3=0SV1Rw>3X9q|dEC|RRk|ZVCDQ9vxKwY_yR}c^X
zu6^E@WM&ZyOb%rgq5=|TtB75Nt0OX^$0K=Ce?GnU3i;|y!Wdoh^TU_iFE(+Nw|ehH
zPte-6qX*y1Pwt#<E(Ve9&3Y7m0bgCJ|DUQ6*mMA>rE+2i_M#7#-YgahP{m9<K%PZB
zgY972j>?To1X?YW!+gC@RTFSNmX2lM&ytXXyfu#Hb0n}G+m#+pXg1Z_l||eD73m`D
z3gCMD`S>j%Y)Pt2_Stf@m;rmwe4kV7?*Ah|ej_9aI69$1#@sV=#@>Gab{1)VE(@(~
zdP}OU6(Q|4_5VMyd}*xD`Hz=~n&{h+G1HpdDTNage5Yh+aR1j)qZ^2s0K{fw^jEg3
zSEvasrK4rO(6OaurF59tfY5Xj`BS8UeLsz3S{Ymqmm9YdtQ-gZqlh-bStkgz>gz}S
zw6!NNbO+%%pgWCXL$MTTq0=hvKnrm`8AC?V_?l7_gJ~0ld^AeTQ7BVMB&u6KK^QhZ
zUNw!+>m9L5ylcowylZlu!6ubig~_=&idr(<Y`Y#~?w%xK*Aac?1n550ZV<J0ukIAJ
z{`mGn=J={(^pUosvCKr<I6c`u6(h+U1?ip+yJr$fTp9;u+uV8m=-8?C%vvIPe9buH
z(=)-yeSL}1V~~69csYIH$d2NmqZgUW$9K2yI(8{;PqIDgVy89;3y%jLXWsM!TCLF9
zY%4a*a=S_9MDP4Y*H_}~^vFbO%TWTSluziT>iG?ABiyU;*WL4OEZ7a}UhMw#8S{V?
z9=z`ChEiS-Ebk*J2Tho$4&ClFWVm}jRK&Nq)s53WJzniFH*cg?)MqQ|ud`M=(M%e?
z!R}OJqgDGk(qZL8`fMj<6-lSDa^bpneNtCC+E&t+Z=PCN-SKz&=>>*#@=pl#xUc>H
zYD!VtQ}NSs+pe8oqo=Gg)X;&EIw3oEI6chx^tE0i7r3?r_6ln4hV6P4<AjH0%&nMB
zuT(dyw(R^t^Ln|js`EUm?Z9nTY)@T%nV;w<<Z~0{yzehwK3{EaTWl@O%ZFxmlS~w$
zUQ^`8J$f4Y@ZEyP!n=nBaUSyR-}bXjd|zruo5TM018Dqb|6=pG_@4bScmBD4<IiT@
zwp16VueMkLUuEKtVzlv|Ll>m^UH1onCBtqdvMdwi(k6HEo>KNq>vv?=n!6e#-0OXN
zW1qU2(5#OkX)*?~W|Q&4m<^RSi=ozR9kiOGczv5bDhp9sFkK%&=(Yw)r{|D$JH-p*
z0V;z&pw{glT5S#S-P%kK+EYU$Mhv9tA)l$ptTo}7Y6Id-BB?cHT9Bsmn1b;pX4O(D
zl99HHIeHD3fU8)@RwxoI@y|n|s6e$sF(Mkr7^<+E5o?;$c9j^qR04%G2nj<N5Ty&m
zqbX!;h{ombYk+V}L?lg#w|F%=%ZNG@FGidKFV)Mcu4mF;*N&3_!&n~2(kLWQ$<m96
zCa-|h_F+Z{4U1veBCE;}ODI;Wk2$_kdU1_j!5*?ljubhHzO#9}%F7IIN=8tmV&rAc
KwyL^p0{{Tj-c+{$

literal 0
HcmV?d00001