优化样式

components/ChatInputBox/ChatInputBox.tsx

@@ -591,7 +591,7 @@ const RenderTemplateStoryMode = ({
  * 视频工具面板组件
  * 提供脚本输入和视频克隆两种模式，支持展开/收起功能
  */
-export function ChatInputBox() {
+export function ChatInputBox({ noData }: { noData: boolean }) {
   // 控制面板展开/收起状态
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -670,28 +670,36 @@ export function ChatInputBox() {
   };
 
   return (
-    <div className="video-tool-component relative max-w-[1080px] w-full left-[50%] translate-x-[-50%]">
+    <div className="video-tool-component relative max-w-[1080px] w-full left-[50%] translate-x-[-50%]" style={noData ? {
+      top: '50%'
+    } : {}}>
       {/* 视频故事板工具面板 - 毛玻璃效果背景 */}
       <div className="video-storyboard-tools rounded-[20px] bg-white/[0.08] backdrop-blur-[20px] border border-white/[0.12] shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
         {/* 展开/收起控制区域 */}
-        {isExpanded ? (
+        {
-          // 展开状态：显示收起按钮和提示
+          !noData && (
-          <div
+            <>
-            className="absolute top-0 bottom-0 left-0 right-0 z-[1] flex flex-col items-center justify-center rounded-[20px] bg-[#191B1E] bg-opacity-[0.3] backdrop-blur-[1.5px] cursor-pointer"
+              {isExpanded ? (
-            onClick={() => setIsExpanded(false)}
+                // 展开状态：显示收起按钮和提示
-          >
+                <div
-            <ChevronUp className="w-4 h-4 text-white/80" />
+                  className="absolute top-0 bottom-0 left-0 right-0 z-[1] flex flex-col items-center justify-center rounded-[20px] bg-[#191B1E] bg-opacity-[0.3] backdrop-blur-[1.5px] cursor-pointer"
-            <span className="text-sm text-white/80 mt-1">Click to action</span>
+                  onClick={() => setIsExpanded(false)}
-          </div>
+                >
-        ) : (
+                  <ChevronUp className="w-4 h-4 text-white/80" />
-          // 收起状态：显示展开按钮
+                  <span className="text-sm text-white/80 mt-1">Click to action</span>
-          <div
+                </div>
-            className="absolute top-[-8px] left-[50%] z-[2] flex items-center justify-center w-[46px] h-4 rounded-[15px] bg-[#fff3] translate-x-[-50%] cursor-pointer hover:bg-[#ffffff1a]"
+              ) : (
-            onClick={() => setIsExpanded(true)}
+                // 收起状态：显示展开按钮
-          >
+                <div
-            <ChevronDown className="w-4 h-4" />
+                  className="absolute top-[-8px] left-[50%] z-[2] flex items-center justify-center w-[46px] h-4 rounded-[15px] bg-[#fff3] translate-x-[-50%] cursor-pointer hover:bg-[#ffffff1a]"
-          </div>
+                  onClick={() => setIsExpanded(true)}
-        )}
+                >
+                  <ChevronDown className="w-4 h-4" />
+                </div>
+              )}
+            </>
+          )
+        }
 
         {/* 主要内容区域 - 简化层级，垂直居中 */}
         <div
@@ -744,6 +752,9 @@ export function ChatInputBox() {
                   onChange={(e) => setScript(e.target.value)}
                   placeholder="Describe the content you want to action..."
                   className="w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
+                  style={noData ? {
+                    minHeight: '128px'
+                  } : {}}
                   rows={1}
                   onInput={(e) => {
                     const target = e.target as HTMLTextAreaElement;

components/QueueBox/QueueNotification.tsx

@@ -0,0 +1,183 @@
+import { notification } from 'antd';
+
+const darkGlassStyle = {
+  background: 'rgba(30, 32, 40, 0.95)',
+  backdropFilter: 'blur(10px)',
+  WebkitBackdropFilter: 'blur(10px)',
+  border: '1px solid rgba(255, 255, 255, 0.08)',
+  borderRadius: '8px',
+  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
+  padding: '12px 16px',
+};
+
+/** 胶片容器样式 */
+const filmStripContainerStyle = {
+  position: 'relative' as const,
+  width: '100%',
+  height: '80px',
+  marginBottom: '16px',
+  overflow: 'hidden',
+};
+
+/** 胶片样式 */
+const filmStripStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  animation: 'filmScroll 20s linear infinite',
+};
+
+/** 文字样式 */
+const textStyle = {
+  fontSize: '13px',
+  color: 'rgba(255, 255, 255, 0.9)',
+  marginBottom: '12px',
+};
+
+/** 胶片帧组件 */
+const FilmFrame = () => (
+  <div style={{ margin: '0 4px' }}>
+    <svg width="60" height="80" viewBox="0 0 60 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* 胶片外框 */}
+      <rect x="0" y="0" width="60" height="80" fill="#1A1B1E" stroke="#F6B266" strokeWidth="1"/>
+      {/* 齿孔 */}
+      <circle cx="10" cy="5" r="3" fill="none" stroke="#F6B266" strokeWidth="1"/>
+      <circle cx="50" cy="5" r="3" fill="none" stroke="#F6B266" strokeWidth="1"/>
+      <circle cx="10" cy="75" r="3" fill="none" stroke="#F6B266" strokeWidth="1"/>
+      <circle cx="50" cy="75" r="3" fill="none" stroke="#F6B266" strokeWidth="1"/>
+      {/* 胶片画面区域 */}
+      <rect x="5" y="15" width="50" height="50" fill="#2A2B2E" stroke="#F6B266" strokeWidth="1"/>
+    </svg>
+  </div>
+);
+
+/** 放映机音效组件 */
+const ProjectorSound = () => (
+  <audio
+    src="/assets/audio/projector.mp3"
+    autoPlay
+    loop
+    style={{ display: 'none' }}
+  />
+);
+
+/**
+ * 显示队列等待通知
+ * @param position - 当前队列位置
+ * @param estimatedMinutes - 预计等待分钟数
+ */
+export const showQueueNotification = (position: number, estimatedMinutes: number) => {
+  notification.open({
+    message: null,
+    description: (
+      <div data-alt="queue-notification" style={{ minWidth: '320px' }}>
+        {/* 胶片动画区域 */}
+        <div style={filmStripContainerStyle}>
+          <div style={filmStripStyle}>
+            {[...Array(6)].map((_, i) => (
+              <FilmFrame key={i} />
+            ))}
+          </div>
+          <div style={filmStripStyle} className="film-strip-2">
+            {[...Array(6)].map((_, i) => (
+              <FilmFrame key={i} />
+            ))}
+          </div>
+        </div>
+
+        {/* 队列信息 */}
+        <div style={textStyle}>
+          <span style={{ marginRight: '8px' }}>🎬</span>
+          您的作品正在第 {position} 位等待制作
+        </div>
+
+        {/* 预计等待时间 */}
+        <div style={{ ...textStyle, color: 'rgba(255, 255, 255, 0.65)' }}>
+          预计等待时间：约 {estimatedMinutes} 分钟
+        </div>
+
+        {/* 取消按钮 */}
+        <button
+          onClick={() => notification.destroy()}
+          style={{
+            color: 'rgb(250 173 20 / 90%)',
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            padding: 0,
+            fontSize: '12px',
+            fontWeight: 500,
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+            textDecorationColor: 'rgb(250 173 20 / 60%)',
+            transition: 'all 0.2s ease',
+          }}
+          data-alt="cancel-queue-button"
+        >
+          取消制作 →
+        </button>
+
+        {/* 放映机音效 */}
+        <ProjectorSound />
+      </div>
+    ),
+    duration: 0,
+    placement: 'topRight',
+    style: {
+      ...darkGlassStyle,
+      border: '1px solid rgba(246, 178, 102, 0.2)',
+    },
+    className: 'movie-queue-notification',
+    closeIcon: (
+      <button 
+        className="hover:text-white"
+        style={{
+          background: 'transparent',
+          border: 'none',
+          padding: '2px',
+          cursor: 'pointer',
+          color: 'rgba(255, 255, 255, 0.45)',
+          transition: 'color 0.2s ease',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+    ),
+  });
+};
+
+// 添加必要的CSS动画
+const styles = `
+  @keyframes filmScroll {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-360px); }
+  }
+
+  .film-strip-2 {
+    position: absolute;
+    top: 0;
+    left: 360px;
+  }
+
+  .movie-queue-notification {
+    animation: slideIn 0.3s ease-out;
+  }
+
+  @keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+  }
+`;
+
+// 将样式注入到页面
+if (typeof document !== 'undefined') {
+  const styleSheet = document.createElement('style');
+  styleSheet.textContent = styles;
+  document.head.appendChild(styleSheet);
+}
+
+// 配置通知
+notification.config({
+  maxCount: 3,
+});

components/QueueBox/QueueNotification2.tsx

@@ -0,0 +1,238 @@
+import { notification } from 'antd';
+
+const darkGlassStyle = {
+  background: 'rgba(30, 32, 40, 0.95)',
+  backdropFilter: 'blur(10px)',
+  WebkitBackdropFilter: 'blur(10px)',
+  border: '1px solid rgba(255, 255, 255, 0.08)',
+  borderRadius: '8px',
+  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
+  padding: '12px 16px',
+};
+
+/** AI导演工作室容器样式 */
+const studioContainerStyle = {
+  position: 'relative' as const,
+  width: '100%',
+  height: '120px',
+  marginBottom: '16px',
+  background: 'rgba(26, 27, 30, 0.6)',
+  borderRadius: '8px',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+/** AI导演组件 */
+const AIDirector = () => (
+  <div className="ai-director">
+    <svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* AI导演的圆形头部 */}
+      <circle cx="50" cy="40" r="25" fill="#F6B266"/>
+      {/* 眼睛 */}
+      <circle cx="40" cy="35" r="5" fill="#2A2B2E"/>
+      <circle cx="60" cy="35" r="5" fill="#2A2B2E"/>
+      {/* 笑容 */}
+      <path d="M40 45 Q50 55 60 45" stroke="#2A2B2E" strokeWidth="3" strokeLinecap="round"/>
+      {/* 导演帽 */}
+      <path d="M25 30 H75 V25 H25" fill="#2A2B2E"/>
+      {/* 身体 */}
+      <rect x="35" y="65" width="30" height="25" fill="#F6B266"/>
+      {/* 手臂 - 动画中会移动 */}
+      <rect className="director-arm" x="25" y="70" width="15" height="5" fill="#F6B266"/>
+      <rect className="director-arm" x="60" y="70" width="15" height="5" fill="#F6B266"/>
+    </svg>
+  </div>
+);
+
+/** 工作进度条组件 */
+const ProgressTimeline = () => (
+  <div className="progress-timeline" style={{
+    position: 'absolute',
+    bottom: '10px',
+    left: '20px',
+    right: '20px',
+    height: '4px',
+    background: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: '2px',
+  }}>
+    <div className="progress-indicator" style={{
+      width: '30%',
+      height: '100%',
+      background: '#F6B266',
+      borderRadius: '2px',
+      animation: 'progress 2s ease-in-out infinite',
+    }}/>
+  </div>
+);
+
+/** 工作台元素组件 */
+const Workstation = () => (
+  <div className="workstation" style={{
+    position: 'absolute',
+    bottom: '20px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-around',
+  }}>
+    {/* 小型场景图标，会在动画中浮动 */}
+    {[...Array(3)].map((_, i) => (
+      <div key={i} className={`scene-icon scene-${i}`} style={{
+        width: '20px',
+        height: '20px',
+        background: 'rgba(246, 178, 102, 0.3)',
+        borderRadius: '4px',
+        animation: `float ${1 + i * 0.5}s ease-in-out infinite alternate`,
+      }}/>
+    ))}
+  </div>
+);
+
+/**
+ * 显示队列等待通知
+ * @param position - 当前队列位置
+ * @param estimatedMinutes - 预计等待分钟数
+ */
+export const showQueueNotification = (position: number, estimatedMinutes: number) => {
+  notification.open({
+    message: null,
+    description: (
+      <div data-alt="queue-notification" style={{ minWidth: '320px' }}>
+        {/* AI导演工作室场景 */}
+        <div style={studioContainerStyle}>
+          <AIDirector />
+          <Workstation />
+          <ProgressTimeline />
+        </div>
+
+        {/* 队列信息 */}
+        <div style={{
+          fontSize: '13px',
+          color: 'rgba(255, 255, 255, 0.9)',
+          marginBottom: '12px',
+          display: 'flex',
+          alignItems: 'center',
+          background: 'rgba(246, 178, 102, 0.1)',
+          padding: '8px 12px',
+          borderRadius: '6px',
+        }}>
+          <span style={{ marginRight: '8px' }}>🎬</span>
+          您的作品正在第 {position} 位等待制作
+        </div>
+
+        {/* 预计等待时间 */}
+        <div style={{
+          fontSize: '12px',
+          color: 'rgba(255, 255, 255, 0.65)',
+          marginBottom: '12px',
+        }}>
+          预计等待时间：约 {estimatedMinutes} 分钟
+        </div>
+
+        {/* 取消按钮 */}
+        <button
+          onClick={() => notification.destroy()}
+          style={{
+            color: 'rgb(250 173 20 / 90%)',
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            padding: 0,
+            fontSize: '12px',
+            fontWeight: 500,
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+            textDecorationColor: 'rgb(250 173 20 / 60%)',
+            transition: 'all 0.2s ease',
+          }}
+          data-alt="cancel-queue-button"
+        >
+          取消制作 →
+        </button>
+      </div>
+    ),
+    duration: 0,
+    placement: 'topRight',
+    style: {
+      ...darkGlassStyle,
+      border: '1px solid rgba(246, 178, 102, 0.2)',
+    },
+    className: 'director-studio-notification',
+    closeIcon: (
+      <button 
+        className="hover:text-white"
+        style={{
+          background: 'transparent',
+          border: 'none',
+          padding: '2px',
+          cursor: 'pointer',
+          color: 'rgba(255, 255, 255, 0.45)',
+          transition: 'color 0.2s ease',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+    ),
+  });
+};
+
+// 添加必要的CSS动画
+const styles = `
+  .ai-director {
+    animation: bounce 2s ease-in-out infinite;
+  }
+
+  .director-arm {
+    transform-origin: center;
+    animation: wave 1s ease-in-out infinite alternate;
+  }
+
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+  }
+
+  @keyframes wave {
+    0% { transform: rotate(-5deg); }
+    100% { transform: rotate(5deg); }
+  }
+
+  @keyframes float {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-10px); }
+  }
+
+  @keyframes progress {
+    0% { width: 0%; }
+    50% { width: 60%; }
+    100% { width: 30%; }
+  }
+
+  .director-studio-notification {
+    animation: slideIn 0.3s ease-out;
+  }
+
+  @keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+  }
+
+  .scene-0 { animation-delay: 0s; }
+  .scene-1 { animation-delay: 0.2s; }
+  .scene-2 { animation-delay: 0.4s; }
+`;
+
+// 将样式注入到页面
+if (typeof document !== 'undefined') {
+  const styleSheet = document.createElement('style');
+  styleSheet.textContent = styles;
+  document.head.appendChild(styleSheet);
+}
+
+// 配置通知
+notification.config({
+  maxCount: 3,
+});

components/QueueBox/queue-notification.tsx

@@ -0,0 +1,209 @@
+import { notification } from 'antd';
+import { useRouter } from 'next/router';
+
+type NotificationType = 'success' | 'info' | 'warning' | 'error';
+
+const darkGlassStyle = {
+  background: 'rgba(30, 32, 40, 0.95)',
+  backdropFilter: 'blur(10px)',
+  WebkitBackdropFilter: 'blur(10px)',
+  border: '1px solid rgba(255, 255, 255, 0.08)',
+  borderRadius: '8px',
+  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
+  padding: '12px 16px',
+};
+
+const messageStyle = {
+  fontSize: '13px',
+  fontWeight: 500,
+  color: '#ffffff',
+  marginBottom: '6px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+};
+
+const iconStyle = {
+  color: '#F6B266', // 警告图标颜色
+  background: 'rgba(246, 178, 102, 0.15)',
+  padding: '4px',
+  borderRadius: '6px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const descriptionStyle = {
+  fontSize: '12px',
+  color: 'rgba(255, 255, 255, 0.65)',
+  marginBottom: '12px',
+  lineHeight: '1.5',
+};
+
+const btnStyle = {
+  color: 'rgb(250 173 20 / 90%)',
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  padding: 0,
+  fontSize: '12px',
+  fontWeight: 500,
+  textDecoration: 'underline',
+  textUnderlineOffset: '2px',
+  textDecorationColor: 'rgb(250 173 20 / 60%)',
+  transition: 'all 0.2s ease',
+};
+
+/** 场记板动画样式 */
+const clapperboardStyle = {
+  position: 'relative' as const,
+  width: '40px',
+  height: '40px',
+  marginRight: '12px',
+  animation: 'clap 2s infinite',
+};
+
+/** 场记板文字样式 */
+const sceneTextStyle = {
+  fontSize: '14px',
+  fontFamily: 'monospace',
+  color: '#F6B266',
+  marginBottom: '8px',
+  letterSpacing: '0.5px',
+};
+
+/** 队列信息样式 */
+const queueInfoStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '13px',
+  color: 'rgba(255, 255, 255, 0.9)',
+  marginBottom: '12px',
+  background: 'rgba(246, 178, 102, 0.1)',
+  padding: '8px 12px',
+  borderRadius: '6px',
+};
+
+/**
+ * 场记板SVG组件
+ */
+const Clapperboard = () => (
+  <div style={clapperboardStyle}>
+    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 4H20V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V4Z" 
+        stroke="#F6B266" strokeWidth="1.5"/>
+      <path d="M4 8H20" stroke="#F6B266" strokeWidth="1.5"/>
+      <path d="M9 4L11 8M15 4L17 8" stroke="#F6B266" strokeWidth="1.5"/>
+      <path className="clap-top" d="M4 4L20 4L17 8L4 8L4 4Z" 
+        fill="rgba(246, 178, 102, 0.2)" stroke="#F6B266" strokeWidth="1.5"/>
+    </svg>
+  </div>
+);
+
+/**
+ * 显示队列等待通知
+ * @param position - 当前队列位置
+ * @param estimatedMinutes - 预计等待分钟数
+ */
+export const showQueueNotification = (position: number, estimatedMinutes: number) => {
+  // 生成场景号和镜次号
+  const sceneNumber = Math.floor(Math.random() * 5) + 1;
+  const takeNumber = Math.floor(Math.random() * 3) + 1;
+
+  notification.open({
+    message: null,
+    description: (
+      <div data-alt="queue-notification" style={{ minWidth: '320px' }}>
+        {/* 场记板和场景信息 */}
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
+          <Clapperboard />
+          <div>
+            <div style={sceneTextStyle}>
+              Scene {sceneNumber} - Take {takeNumber}
+            </div>
+            <div style={{ fontSize: '12px', color: 'rgba(255, 255, 255, 0.6)' }}>
+              AI Director's Cut
+            </div>
+          </div>
+        </div>
+
+        {/* 队列信息 */}
+        <div style={queueInfoStyle}>
+          <span style={{ marginRight: '8px' }}>🎬</span>
+          您的作品正在第 {position} 位等待制作
+        </div>
+
+        {/* 预计等待时间 */}
+        <div style={descriptionStyle}>
+          预计等待时间：约 {estimatedMinutes} 分钟
+        </div>
+
+        {/* 取消按钮 */}
+        <button
+          onClick={() => notification.destroy()}
+          style={{
+            ...btnStyle,
+            marginTop: '8px',
+          }}
+          data-alt="cancel-queue-button"
+        >
+          取消制作 →
+        </button>
+      </div>
+    ),
+    duration: 0, // 保持通知直到用户关闭
+    placement: 'topRight',
+    style: {
+      ...darkGlassStyle,
+      border: '1px solid rgba(246, 178, 102, 0.2)',
+    },
+    className: 'movie-queue-notification',
+    closeIcon: (
+      <button 
+        className="hover:text-white"
+        style={{
+          background: 'transparent',
+          border: 'none',
+          padding: '2px',
+          cursor: 'pointer',
+          color: 'rgba(255, 255, 255, 0.45)',
+          transition: 'color 0.2s ease',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+    ),
+  });
+};
+
+// 添加必要的CSS动画
+const styles = `
+  @keyframes clap {
+    0%, 100% { transform: rotate(0deg); }
+    5% { transform: rotate(-15deg); }
+    10% { transform: rotate(0deg); }
+  }
+
+  .movie-queue-notification {
+    animation: slideIn 0.3s ease-out;
+  }
+
+  @keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+  }
+`;
+
+// 将样式注入到页面
+if (typeof document !== 'undefined') {
+  const styleSheet = document.createElement('style');
+  styleSheet.textContent = styles;
+  document.head.appendChild(styleSheet);
+}
+
+// 保持现有的notification配置
+notification.config({
+  maxCount: 3,
+});

components/layout/dashboard-layout.tsx

@@ -13,7 +13,6 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
 
   return (
     <div className=" min-h-screen bg-background">
-      <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />
       <TopBar collapsed={sidebarCollapsed} onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)} />
       {children}
     </div>

components/layout/top-bar.tsx

@@ -11,12 +11,14 @@ import {
   Sparkles,
   LogOut,
   PanelsLeftBottom,
-} from "lucide-react";
+  Bell,
-import { motion } from "framer-motion";
+} from 'lucide-react';
-import ReactDOM from "react-dom";
+import { motion } from 'framer-motion';
-import { usePathname, useRouter } from "next/navigation";
+import ReactDOM from 'react-dom';
-import React, { useRef, useEffect, useLayoutEffect, useState } from "react";
+import { useRouter } from 'next/navigation';
-import { logoutUser } from "@/lib/auth";
+import React, { useRef, useEffect, useLayoutEffect, useState } from 'react';
+import { logoutUser } from '@/lib/auth';
+import { showQueueNotification } from '@/components/QueueBox/QueueNotification2';
 
 interface User {
   id: string;
@@ -109,18 +111,8 @@ export function TopBar({
     >
       <div className="h-full flex items-center justify-between pr-6 pl-6">
         <div className="flex items-center space-x-4">
-          {isLogin && (
-            <Button
-              className="button-NxtqWZ"
-              variant="ghost"
-              size="sm"
-              onClick={onToggleSidebar}
-            >
-              <PanelsLeftBottom className="h-4 w-4" />
-            </Button>
-          )}
           <div
-            className={`flex items-center cursor-pointer space-x-4 link-logo roll event-on`}
+            className={`flex items-center cursor-pointer space-x-1 link-logo roll event-on`}
             onClick={() => router.push("/")}
             onMouseEnter={handleMouseEnter}
             onAnimationEnd={handleAnimationEnd}
@@ -169,7 +161,7 @@ export function TopBar({
           </Button>
 
           {/* Notifications */}
-          {/* <Button variant="ghost" size="sm" onClick={() => setOpenModal(true)}>
+          {/* <Button variant="ghost" size="sm" onClick={() => showQueueNotification(3, 10)}>
             <Bell className="h-4 w-4" />
           </Button> */}
 

components/pages/create-to-video2.tsx

@@ -8,6 +8,8 @@ import './style/create-to-video2.css';
 import { createScriptEpisodeNew, getScriptEpisodeListNew, CreateScriptEpisodeRequest } from "@/api/script_episode";
 import { EmptyStateAnimation } from '@/components/common/EmptyStateAnimation2';
 import { ChatInputBox } from '@/components/ChatInputBox/ChatInputBox';
+import cover_image1 from '@/public/assets/cover_image1.jpg';
+import { motion } from 'framer-motion';
 
 
 // ideaText已迁移到ChatInputBox组件中
@@ -98,6 +100,139 @@ export default function CreateToVideo2() {
     setIsClient(true);
   }, []);
 
+  const StatusBadge = (status: string) => {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="flex items-center gap-2 rounded-full 
+                  bg-white/10 border border-white/20 
+                  px-3 py-1 backdrop-blur-md shadow-[0_0_8px_rgba(255,255,255,0.3)]"
+      >
+        {/* 进行中 脉冲小圆点 */}
+        {status === 'pending' && (
+          <>
+            <motion.span
+              className="w-2 h-2 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(255,220,100,0.9)]"
+              animate={{ scale: [1, 1.4, 1] }}
+              transition={{ repeat: Infinity, duration: 1.5 }}
+            />
+            {/* 状态文字 */}
+            <span className="text-xs tracking-widest text-yellow-300 font-medium drop-shadow-[0_0_6px_rgba(255,220,100,0.6)]">
+              PROCESSING
+            </span>
+          </>
+        )}
+        {/* 已完成 */}
+        {status === 'completed' && (
+          <>
+            <motion.span
+              className="w-2 h-2 rounded-full bg-green-400 shadow-[0_0_8px_rgba(0,255,120,0.9)]"
+            />
+            <span className="text-xs tracking-widest text-green-300 font-medium drop-shadow-[0_0_6px_rgba(0,255,120,0.6)]">
+              COMPLETED
+            </span>
+          </>
+        )}
+        {/* 失败 */}
+        {status === 'failed' && (
+          <>
+            <motion.span
+              className="w-2 h-2 rounded-full bg-red-500 shadow-[0_0_8px_rgba(255,0,80,0.9)]"
+            />
+            <span className="text-xs tracking-widest text-red-400 font-medium drop-shadow-[0_0_6px_rgba(255,0,80,0.6)]">
+              FAILED
+            </span>
+          </>
+        )}
+      </motion.div>
+    )
+  }
+
+  // 创建一个视频引用Map
+  const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());
+
+  const handleMouseEnter = (projectId: string) => {
+    const videoElement = videoRefs.current.get(projectId);
+    if (videoElement) {
+      videoElement.play().catch(() => {
+        console.log('Video autoplay prevented');
+      });
+    }
+  };
+
+  const handleMouseLeave = (projectId: string) => {
+    const videoElement = videoRefs.current.get(projectId);
+    if (videoElement) {
+      videoElement.pause();
+      videoElement.currentTime = 0;
+    }
+  };
+
+  const setVideoRef = (projectId: string, element: HTMLVideoElement | null) => {
+    if (element) {
+      videoRefs.current.set(projectId, element);
+    } else {
+      videoRefs.current.delete(projectId);
+    }
+  };
+
+  const renderProjectCard = (project: any) => {
+
+    return (
+      <div
+        key={project.project_id}
+        className="group relative aspect-video bg-black/20 rounded-lg overflow-hidden cursor-pointer"
+        onClick={() => router.push(`/create/work-flow?episodeId=${project.project_id}`)}
+        onMouseEnter={() => handleMouseEnter(project.project_id)}
+        onMouseLeave={() => handleMouseLeave(project.project_id)}
+        data-alt="project-card"
+      >
+        {/* 视频/图片区域 */}
+        {project.final_video_url ? (
+          <video
+            ref={(el) => setVideoRef(project.project_id, el)}
+            src={project.final_video_url}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+            muted
+            loop
+            playsInline
+            preload="none"
+            poster={`${project.final_video_url}?vframe/jpg/offset/1`}
+          />
+        ) : (
+          <div 
+            className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500"
+            style={{
+              backgroundImage: `url(${cover_image1.src})`,
+            }} 
+          />
+        )}
+        
+        {/* 渐变遮罩 */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+
+        {/* 状态标签 - 左上角 */}
+        <div className="absolute top-3 left-3">
+          {StatusBadge(project.status === 'COMPLETED' ? 'completed' : project.status === 'FAILED' ? 'failed' : 'pending')}
+        </div>
+
+        {/* 底部信息 */}
+        <div className="absolute bottom-0 left-0 right-0 p-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-medium text-white group-hover:text-purple-400 transition-colors duration-300 line-clamp-1">
+              {project.name || "未命名项目"}
+            </h2>
+            <button className="p-1.5 hover:bg-white/10 rounded-full transition-colors opacity-0 group-hover:opacity-100">
+              <MoreHorizontal className="w-4 h-4 text-white/80" />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   // 渲染剧集卡片
   const renderEpisodeCard = (episode: any) => {
     return (
@@ -190,12 +325,12 @@ export default function CreateToVideo2() {
 
   return (
     <>
-      <div className="container mx-auto h-[calc(100vh-6rem)] flex flex-col absolute top-[4rem] left-0 right-0 px-[1rem]">
+      <div className="flex flex-col absolute top-[5rem] left-0 right-0 bottom-[1rem] px-6">
         {/* 优化后的主要内容区域 */}
         <div className="flex-1 min-h-0">
           <div
             ref={scrollContainerRef}
-            className="h-full overflow-y-auto custom-scrollbar"
+            className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar"
             style={{
               scrollbarWidth: 'thin',
               scrollbarColor: 'rgba(255,255,255,0.1) transparent'
@@ -203,39 +338,51 @@ export default function CreateToVideo2() {
           >
             {isLoading && episodeList.length === 0 ? (
               /* 优化的加载状态 */
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 pb-6">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pb-6">
-                {[...Array(10)].map((_, index) => (
+                {[...Array(6)].map((_, index) => (
                   <div
                     key={index}
-                    className="bg-white/[0.05] backdrop-blur-[20px] border border-white/[0.08] rounded-2xl overflow-hidden animate-pulse"
+                    className="group relative aspect-video bg-black/20 rounded-lg overflow-hidden animate-pulse"
                   >
-                    <div className="h-[200px] bg-gradient-to-br from-white/[0.08] to-white/[0.04]">
+                    {/* 背景占位 */}
-                      <div className="h-full bg-white/[0.06] animate-pulse"></div>
+                    <div className="w-full h-full bg-gradient-to-br from-white/[0.04] to-white/[0.02]" />
-                    </div>
+                    
-                    <div className="p-5">
+                    {/* 渐变遮罩 */}
-                      <div className="h-4 bg-white/[0.08] rounded-lg mb-3 animate-pulse"></div>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
-                      <div className="h-3 bg-white/[0.06] rounded-lg mb-4 w-3/4 animate-pulse"></div>
+
-                      <div className="flex justify-between">
+                    {/* 状态标签占位 */}
-                        <div className="h-3 bg-white/[0.06] rounded-lg w-20 animate-pulse"></div>
+                    <div className="absolute top-3 left-3">
-                        <div className="h-3 bg-white/[0.06] rounded-lg w-16 animate-pulse"></div>
+                      <div className="flex items-center gap-2 rounded-full bg-white/10 px-3 py-1">
+                        <div className="w-2 h-2 rounded-full bg-white/20"></div>
+                        <div className="w-16 h-3 bg-white/20 rounded-full"></div>
                       </div>
                     </div>
+
+                    {/* 项目ID占位 */}
+                    <div className="absolute top-3 right-3">
+                      <div className="w-20 h-3 bg-white/10 rounded-full"></div>
+                    </div>
+
+                    {/* 底部信息占位 */}
+                    <div className="absolute bottom-0 left-0 right-0 p-4">
+                      <div className="w-2/3 h-5 bg-white/10 rounded-lg"></div>
+                    </div>
                   </div>
                 ))}
               </div>
             ) : episodeList.length > 0 ? (
               /* 优化的剧集网格 */
               <div className="pb-8">
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                  {episodeList.map(renderEpisodeCard)}
+                  {episodeList.map(renderProjectCard)}
                 </div>
 
                 {/* 加载更多指示器 */}
                 {isLoadingMore && (
                   <div className="flex justify-center py-12">
-                    <div className="flex items-center gap-3 px-6 py-3 bg-white/[0.05] backdrop-blur-[20px] border border-white/[0.08] rounded-xl">
+                    <div className="flex items-center gap-3 px-6 py-3 bg-black/30 backdrop-blur-xl border border-white/10 rounded-full">
-                      <Loader2 className="w-5 h-5 animate-spin text-blue-400" />
+                      <Loader2 className="w-5 h-5 animate-spin text-purple-400" />
-                      <span className="text-white/70 font-medium">Loading more episodes...</span>
+                      <span className="text-white/90 font-medium">正在加载更多项目...</span>
                     </div>
                   </div>
                 )}
@@ -244,10 +391,10 @@ export default function CreateToVideo2() {
                 {!hasMore && episodeList.length > 0 && (
                   <div className="flex justify-center py-12">
                     <div className="text-center">
-                      <div className="w-12 h-12 bg-white/[0.05] backdrop-blur-[20px] border border-white/[0.08] rounded-xl flex items-center justify-center mx-auto mb-3">
+                      <div className="w-12 h-12 bg-black/30 backdrop-blur-xl border border-white/10 rounded-full flex items-center justify-center mx-auto mb-3">
-                        <Check className="w-6 h-6 text-green-400" />
+                        <Check className="w-6 h-6 text-purple-400" />
                       </div>
-                      <p className="text-white/50 text-sm">All episodes loaded</p>
+                      <p className="text-white/70 text-sm">已加载全部项目</p>
                     </div>
                   </div>
                 )}
@@ -260,13 +407,9 @@ export default function CreateToVideo2() {
       </div>
 
       {/* 视频工具组件 - 使用独立组件 */}
-      <ChatInputBox />
+      {!isLoading && 
-
+        <ChatInputBox noData={episodeList.length === 0} />
-      {episodeList.length === 0 && !isLoading && (
+      }
-        <div className='h-full flex flex-col items-center fixed top-[4rem] left-0 right-0 bottom-0'>
-          <EmptyStateAnimation className='' />
-        </div>
-      )}
     </>
   );
 }