优化队列弹窗

components/QueueBox/QueueNotification2.tsx

@@ -100,66 +100,73 @@ export const showQueueNotification = (
   status: string,
   onCancel: () => void
 ) => {
-  notification.open({
+  const notificationKey = 'queueNotification';
-    message: null,
+  
-    description: (
+  // 创建或更新通知内容
-      <div data-alt="queue-notification" style={{ minWidth: '320px' }}>
+  const notificationContent = (
-        {/* AI导演工作室场景 */}
+    <div data-alt="queue-notification" style={{ minWidth: '320px' }}>
-        <div style={studioContainerStyle}>
+      {/* AI导演工作室场景 */}
-          <AIDirector />
+      <div style={studioContainerStyle}>
-          <Workstation />
+        <AIDirector />
-          <ProgressTimeline />
+        <Workstation />
-        </div>
+        <ProgressTimeline />
-
-        {/* 队列信息 */}
-        <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>
-          {status === 'process' ? `Your work is being produced. Please wait until it is completed before creating a new work.` : `Your work is waiting for production at the ${position} position`}
-        </div>
-
-        {/* 预计等待时间 */}
-        <div style={{
-          fontSize: '12px',
-          color: 'rgba(255, 255, 255, 0.65)',
-          marginBottom: '12px',
-        }}>
-          {status !== 'process' && `Estimated waiting time: about ${estimatedMinutes} minutes`}
-        </div>
-
-        {/* 取消按钮 */}
-        <button
-          onClick={() => {
-            onCancel?.();
-            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"
-        >
-          Cancel queue →
-        </button>
       </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>
+        {status === 'process' ? `Your work is being produced. Please wait until it is completed before creating a new work.` : `Your work is waiting for production at the ${position} position`}
+      </div>
+
+      {/* 预计等待时间 */}
+      <div style={{
+        fontSize: '12px',
+        color: 'rgba(255, 255, 255, 0.65)',
+        marginBottom: '12px',
+      }}>
+        {status !== 'process' && `Estimated waiting time: about ${estimatedMinutes} minutes`}
+      </div>
+
+      {/* 取消按钮 */}
+      <button
+        onClick={() => {
+          onCancel?.();
+          notification.destroy(notificationKey);
+        }}
+        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"
+      >
+        Cancel queue →
+      </button>
+    </div>
+  );
+
+  // 打开或更新通知
+  notification.open({
+    key: notificationKey,
+    message: null,
+    description: notificationContent,
     duration: 0,
     placement: 'topRight',
     style: {
@@ -167,23 +174,7 @@ export const showQueueNotification = (
       border: '1px solid rgba(246, 178, 102, 0.2)',
     },
     className: 'director-studio-notification',
-    closeIcon: (
+    closeIcon: null,
-      <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>
-    ),
   });
 };
 

components/pages/create-to-video2.tsx

@@ -106,9 +106,7 @@ export default function CreateToVideo2() {
         initial={{ opacity: 0, y: -10 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4 }}
-        className="flex items-center gap-2 rounded-full 
+        className="flex items-center"
-                  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' && (