Merge remote-tracking branch 'origin/temptudou' into dev

backend/apps/generation/views.py

@@ -333,6 +333,13 @@ def video_generate_view(request):
                 continue
             seen_urls.add(original_url)
 
+            # 拦截 blob: URL（前端上传失败的兜底）
+            if url.startswith('blob:'):
+                return Response({
+                    'error': 'upload_failed',
+                    'message': f'素材「{label}」上传失败，请删除后重新添加',
+                }, status=status.HTTP_400_BAD_REQUEST)
+
             # 快照存原始 URL（前端重建 reEdit 需要 asset://group-{id} 格式）
             snap = {'url': original_url, 'type': ref_type, 'role': role, 'label': label}
             thumb_url = ref.get('thumb_url', '')

backend/utils/airdrama_client.py

@@ -21,6 +21,8 @@ ERROR_MESSAGES = {
     'InvalidImage': '图片格式或尺寸不符合要求，请检查后重试',
     'InvalidVideo': '视频格式或尺寸不符合要求，请检查后重试',
     'InvalidAudio': '音频格式不符合要求，请检查后重试',
+    'AudioDurationExceeded': '音频总时长超过15秒限制，请缩短音频后重试',
+    'AudioFormatNotSupported': '音频格式不支持，请使用 MP3 或 WAV 格式',
     # Rate limit
     'RateLimitExceeded': '请求过于频繁，请稍后重试',
     'ConcurrencyLimitExceeded': '当前生成任务过多，请稍后重试',
@@ -41,6 +43,8 @@ _MESSAGE_KEYWORDS = {
     'sensitive': '内容包含敏感信息，请修改后重试',
     'not found': '引用的素材不存在或已被删除，请检查素材库',
     'not valid': '请求参数无效，请检查输入内容',
+    'audio duration': '音频总时长超过15秒限制，请缩短音频后重试',
+    'audio': '音频不符合要求（支持MP3/WAV，单条2-15秒，总时长≤15秒）',
 }
 
 

backend/utils/assets_client.py

@@ -82,6 +82,7 @@ def _get_service():
         'GetAssetGroup': ApiInfo('POST', '/', {'Action': 'GetAssetGroup', 'Version': API_VERSION}, {}, {}),
         'UpdateAssetGroup': ApiInfo('POST', '/', {'Action': 'UpdateAssetGroup', 'Version': API_VERSION}, {}, {}),
         'UpdateAsset': ApiInfo('POST', '/', {'Action': 'UpdateAsset', 'Version': API_VERSION}, {}, {}),
+        'DeleteAsset': ApiInfo('POST', '/', {'Action': 'DeleteAsset', 'Version': API_VERSION}, {}, {}),
     }
 
     return Service(service_info, api_info)
@@ -218,3 +219,9 @@ def update_asset(asset_id: str, name: str = None):
     if name is not None:
         body['Name'] = name
     _do_request('UpdateAsset', body)
+
+
+def delete_asset(asset_id: str):
+    """Delete a single asset from the remote API."""
+    body = {'Id': asset_id, 'ProjectName': PROJECT_NAME}
+    _do_request('DeleteAsset', body)

web/nginx.conf

@@ -24,6 +24,11 @@ server {
         client_max_body_size 50m;
     }
 
+    # SPA client-side routes — must return index.html, not match Vite's dist/assets/ dir
+    location ~ ^/(assets|login|profile|admin|team)(/|$) {
+        try_files /index.html =404;
+    }
+
     # SPA fallback
     location / {
         try_files $uri $uri/ /index.html;

web/src/components/GenerationCard.tsx

@@ -479,6 +479,13 @@ export function GenerationCard({ task, onOpenDetail }: Props) {
       </div>
 
       {/* Bottom action buttons */}
+      {isGenerating && (
+        <div className={styles.actions}>
+          <button className={styles.actionBtn} onClick={() => reEdit(task.id)}>
+            <EditIcon /> <span>重新编辑</span>
+          </button>
+        </div>
+      )}
       {!isGenerating && (
         <div className={styles.actions}>
           <button className={styles.actionBtn} onClick={() => reEdit(task.id)}>

web/src/components/InputBar.tsx

@@ -8,7 +8,7 @@ import { AssetLibraryModal } from './AssetLibraryModal';
 import { showToast } from './Toast';
 import styles from './InputBar.module.css';
 
-export function InputBar() {
+export function InputBar({ scrollBottomBtn }: { scrollBottomBtn?: React.ReactNode }) {
   const mode = useInputBarStore((s) => s.mode);
   const addReferences = useInputBarStore((s) => s.addReferences);
   const setFirstFrame = useInputBarStore((s) => s.setFirstFrame);
@@ -43,6 +43,16 @@ export function InputBar() {
 
     const valid: File[] = [];
     for (const f of files) {
+      // Format validation
+      if (f.type.startsWith('video/') && f.type !== 'video/mp4' && f.type !== 'video/quicktime') {
+        showToast('仅支持 MP4 和 MOV 格式的视频');
+        continue;
+      }
+      if (f.type.startsWith('audio/') && f.type !== 'audio/mpeg' && f.type !== 'audio/wav') {
+        showToast('仅支持 MP3 和 WAV 格式的音频');
+        continue;
+      }
+      // Size validation
       let limit: number;
       let limitLabel: string;
       if (f.type.startsWith('video/')) {
@@ -134,6 +144,7 @@ export function InputBar() {
           >
             种子值
           </button>
+          {scrollBottomBtn}
         </div>
 
         <div

web/src/components/Toast.module.css

@@ -3,8 +3,14 @@
   top: 20px;
   left: 50%;
   transform: translateX(-50%) translateY(-20px);
-  background: var(--color-bg-dropdown);
+  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid var(--color-border-input-bar);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 1px 0 rgba(255, 255, 255, 0.12) inset;
   color: #fff;
   padding: 10px 24px;
   border-radius: 10px;
@@ -13,6 +19,23 @@
   pointer-events: none;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 999;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #e8952e;
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  flex-shrink: 0;
 }
 
 .show {

web/src/components/Toast.tsx

@@ -24,6 +24,7 @@ export function Toast() {
 
   return (
     <div className={`${styles.toast} ${visible ? styles.show : ''}`}>
+      <span className={styles.icon}>!</span>
       {message}
     </div>
   );

web/src/components/UniversalUpload.module.css

@@ -281,3 +281,28 @@
   background: #1a1a24;
   color: var(--color-text-secondary);
 }
+
+/* Upload status overlay */
+.uploadOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--radius-thumbnail);
+  z-index: 2;
+}
+
+.uploadError {
+  background: rgba(239, 68, 68, 0.25);
+  cursor: pointer;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}

web/src/components/UniversalUpload.tsx

@@ -5,6 +5,19 @@ import { ImageLightbox } from './ImageLightbox';
 import { tosThumb } from '../lib/api';
 import styles from './UniversalUpload.module.css';
 
+const Spinner = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" className={styles.spinner}>
+    <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+  </svg>
+);
+
+const ErrorIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+    <circle cx="12" cy="12" r="10" fill="rgba(239,68,68,0.85)" />
+    <text x="12" y="16" textAnchor="middle" fill="#fff" fontSize="14" fontWeight="bold">!</text>
+  </svg>
+);
+
 const MAX_IMAGE_SIZE = 30 * 1024 * 1024;  // 30MB per API doc
 const MAX_VIDEO_SIZE = 50 * 1024 * 1024;  // 50MB per API doc
 const MAX_AUDIO_SIZE = 15 * 1024 * 1024;  // 15MB per API doc
@@ -25,6 +38,7 @@ export function UniversalUpload() {
   const references = useInputBarStore((s) => s.references);
   const addReferences = useInputBarStore((s) => s.addReferences);
   const removeReference = useInputBarStore((s) => s.removeReference);
+  const retryUpload = useInputBarStore((s) => s.retryUpload);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [expanded, setExpanded] = useState(false);
   const [badgeHover, setBadgeHover] = useState(false);
@@ -40,6 +54,16 @@ export function UniversalUpload() {
 
     const valid: File[] = [];
     for (const f of files) {
+      // Format validation
+      if (f.type.startsWith('video/') && f.type !== 'video/mp4' && f.type !== 'video/quicktime') {
+        showToast('仅支持 MP4 和 MOV 格式的视频');
+        continue;
+      }
+      if (f.type.startsWith('audio/') && f.type !== 'audio/mpeg' && f.type !== 'audio/wav') {
+        showToast('仅支持 MP3 和 WAV 格式的音频');
+        continue;
+      }
+      // Size validation
       let limit: number;
       let limitLabel: string;
       if (f.type.startsWith('video/')) {
@@ -83,7 +107,7 @@ export function UniversalUpload() {
       <input
         ref={fileInputRef}
         type="file"
-        accept="image/*,video/*,audio/*"
+        accept="image/*,video/mp4,video/quicktime,audio/mpeg,audio/wav"
         multiple
         className={styles.hiddenInput}
         onChange={handleFileChange}
@@ -127,6 +151,21 @@ export function UniversalUpload() {
                   ) : (
                     <img src={tosThumb(ref.previewUrl, 200)} alt={ref.label} className={styles.thumbMedia} style={{ cursor: 'zoom-in' }} onClick={(e) => { e.stopPropagation(); setLightboxSrc(ref.previewUrl); }} />
                   )}
+                  {/* Upload status overlay */}
+                  {ref.uploading && (
+                    <div className={styles.uploadOverlay}>
+                      <Spinner />
+                    </div>
+                  )}
+                  {ref.uploadError && (
+                    <div
+                      className={`${styles.uploadOverlay} ${styles.uploadError}`}
+                      onClick={(e) => { e.stopPropagation(); retryUpload(ref.id); }}
+                      title="点击重试"
+                    >
+                      <ErrorIcon />
+                    </div>
+                  )}
                   <div
                     className={styles.thumbClose}
                     onClick={(e) => { e.stopPropagation(); removeReference(ref.id); }}

web/src/components/VideoGenerationPage.module.css

@@ -52,3 +52,4 @@
   color: var(--color-text-disabled);
   font-size: 12px;
 }
+

web/src/components/VideoGenerationPage.tsx

@@ -27,6 +27,7 @@ export function VideoGenerationPage() {
   const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
   const [showAnnouncement, setShowAnnouncement] = useState(false);
   const [autoAnnouncementDone, setAutoAnnouncementDone] = useState(false);
+  const [showScrollBottom, setShowScrollBottom] = useState(false);
   const detailTask = useMemo(() => detailTaskId ? tasks.find((t) => t.id === detailTaskId) || null : null, [detailTaskId, tasks]);
   const setDetailTask = useCallback((t: GenerationTask | null) => setDetailTaskId(t?.id || null), []);
 
@@ -41,9 +42,10 @@ export function VideoGenerationPage() {
     if (initialLoadRef.current) {
       initialLoadRef.current = false;
       // Use requestAnimationFrame to ensure DOM has rendered
+      const restoreTop = savedScrollTop;
       requestAnimationFrame(() => {
-        if (savedScrollTop !== null && scrollRef.current) {
+        if (restoreTop !== null && scrollRef.current) {
-          scrollRef.current.scrollTop = savedScrollTop;
+          scrollRef.current.scrollTop = restoreTop;
         } else if (scrollRef.current) {
           scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
         }
@@ -55,13 +57,19 @@ export function VideoGenerationPage() {
       scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
     }
     prevCountRef.current = tasks.length;
-  }, [tasks.length, savedScrollTop]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tasks.length]);
 
   // Save scroll position + auto-load older tasks when scrolled near top
   const handleScroll = useCallback(() => {
     if (!scrollRef.current) return;
     saveScrollPosition(scrollRef.current.scrollTop);
 
+    // Show "scroll to bottom" button when not near bottom
+    const el = scrollRef.current;
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    setShowScrollBottom(distanceFromBottom > 300);
+
     // Trigger loadMore when scrolled within 100px of the top
     if (scrollRef.current.scrollTop < 100) {
       const el = scrollRef.current;
@@ -166,7 +174,26 @@ export function VideoGenerationPage() {
             </div>
           )}
         </div>
-        <InputBar />
+        <InputBar scrollBottomBtn={showScrollBottom ? (
+          <button
+            onClick={() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })}
+            style={{
+              marginLeft: 'auto',
+              background: 'rgba(255, 255, 255, 0.06)',
+              backdropFilter: 'blur(24px) saturate(180%)',
+              WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+              border: '1px solid rgba(255, 255, 255, 0.10)',
+              boxShadow: '0 0 0 1px rgba(255,255,255,0.05) inset, 0 4px 16px rgba(0,0,0,0.3)',
+              borderRadius: 6, padding: '4px 12px', fontSize: 12,
+              color: 'var(--color-text-secondary)', cursor: 'pointer',
+              transition: 'all 0.15s', whiteSpace: 'nowrap',
+            }}
+            onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.10)'; (e.currentTarget as HTMLElement).style.color = 'var(--color-text-primary)'; }}
+            onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.06)'; (e.currentTarget as HTMLElement).style.color = 'var(--color-text-secondary)'; }}
+          >
+            回到底部 ↓
+          </button>
+        ) : null} />
       </main>
       <VideoDetailModal
         task={detailTask}

web/src/index.css

@@ -35,7 +35,7 @@
   --radius-thumbnail: 8px;
   --radius-dropdown: 12px;
 
-  --input-bar-max-width: 900px;
+  --input-bar-max-width: 950px;
   --send-btn-size: 36px;
   --thumbnail-size: 80px;
   --toolbar-height: 44px;

web/src/lib/api.ts

@@ -129,7 +129,7 @@ export const mediaApi = {
     formData.append('file', file);
     return api.post<{
       url: string;
-      type: 'image' | 'video';
+      type: 'image' | 'video' | 'audio';
       filename: string;
       size: number;
     }>('/media/upload', formData, {

web/src/pages/AssetsPage.tsx

@@ -88,6 +88,9 @@ function VideoThumbnail({
 export function AssetsPage() {
   const tasks = useGenerationStore((s) => s.tasks);
   const loadTasks = useGenerationStore((s) => s.loadTasks);
+  const loadMore = useGenerationStore((s) => s.loadMore);
+  const hasMore = useGenerationStore((s) => s.hasMore);
+  const isLoadingMore = useGenerationStore((s) => s.isLoadingMore);
   const reEdit = useGenerationStore((s) => s.reEdit);
   const regenerate = useGenerationStore((s) => s.regenerate);
   const removeTask = useGenerationStore((s) => s.removeTask);
@@ -102,8 +105,9 @@ export function AssetsPage() {
 
   const [subTab, setSubTab] = useState<'all' | 'favorites'>('all');
 
+  // Reverse: newest first for asset page (store keeps oldest-first for generation page)
   const completedTasks = useMemo(
-    () => tasks.filter((t) => t.status === 'completed'),
+    () => tasks.filter((t) => t.status === 'completed').slice().reverse(),
     [tasks],
   );
 
@@ -160,20 +164,41 @@ export function AssetsPage() {
               <p>{subTab === 'favorites' ? '暂无收藏的视频' : '暂无已完成的视频'}</p>
             </div>
           ) : (
-            dateGroups.map((group) => (
+            <>
-              <section key={group.label} className={styles.dateGroup}>
+              {dateGroups.map((group) => (
-                <h3 className={styles.dateLabel}>{group.label}</h3>
+                <section key={group.label} className={styles.dateGroup}>
-                <div className={styles.grid}>
+                  <h3 className={styles.dateLabel}>{group.label}</h3>
-                  {group.tasks.map((task) => (
+                  <div className={styles.grid}>
-                    <VideoThumbnail
+                    {group.tasks.map((task) => (
-                      key={task.id}
+                      <VideoThumbnail
-                      task={task}
+                        key={task.id}
-                      onClick={() => setDetailTask(task)}
+                        task={task}
-                    />
+                        onClick={() => setDetailTask(task)}
-                  ))}
+                      />
+                    ))}
+                  </div>
+                </section>
+              ))}
+              {hasMore && (
+                <div style={{ textAlign: 'center', padding: '24px 0' }}>
+                  <button
+                    onClick={loadMore}
+                    disabled={isLoadingMore}
+                    style={{
+                      background: 'rgba(255,255,255,0.06)',
+                      border: '1px solid rgba(255,255,255,0.1)',
+                      borderRadius: 8,
+                      padding: '8px 32px',
+                      color: 'var(--color-text-secondary)',
+                      cursor: isLoadingMore ? 'not-allowed' : 'pointer',
+                      fontSize: 13,
+                    }}
+                  >
+                    {isLoadingMore ? '加载中...' : '加载更多'}
+                  </button>
                 </div>
-              </section>
+              )}
-            ))
+            </>
           )}
         </div>
       </main>

web/src/store/generation.ts

@@ -409,13 +409,14 @@ export const useGenerationStore = create<GenerationState>((set, get) => ({
     });
 
     try {
-      // Upload files to TOS (or reuse existing TOS URLs)
+      // Use pre-uploaded TOS URLs (immediate upload), fallback to upload here if needed
       const uploadedRefs: { url: string; type: string; role: string; label: string; thumb_url?: string }[] = [];
 
       for (const item of filesToUpload) {
-        if (item.tosUrl) {
+        if (item.tosUrl && !item.tosUrl.startsWith('blob:')) {
           uploadedRefs.push({ url: item.tosUrl, type: item.type, role: item.role, label: item.label });
         } else if (item.file) {
+          // Fallback: file wasn't pre-uploaded (shouldn't normally happen with immediate upload)
           const { data: uploadResult } = await mediaApi.upload(item.file);
           uploadedRefs.push({ url: uploadResult.url, type: item.type, role: item.role, label: item.label });
         }

web/src/store/inputBar.ts

@@ -1,9 +1,64 @@
 import { create } from 'zustand';
 import type { CreationMode, ModelOption, AspectRatio, Duration, GenerationType, UploadedFile } from '../types';
 import { showToast } from '../components/Toast';
+import { mediaApi } from '../lib/api';
 
 let fileCounter = 0;
 
+/** Read image dimensions via HTML5 Image element. */
+function getImageDimensions(file: File): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    const cleanup = () => URL.revokeObjectURL(url);
+    const timeout = setTimeout(() => { cleanup(); reject(new Error('timeout')); }, 10000);
+    img.onload = () => {
+      clearTimeout(timeout);
+      resolve({ width: img.naturalWidth, height: img.naturalHeight });
+      cleanup();
+    };
+    img.onerror = () => {
+      clearTimeout(timeout);
+      reject(new Error('无法读取图片'));
+      cleanup();
+    };
+    img.src = url;
+  });
+}
+
+/** Read duration (and dimensions for video) of an audio or video file. */
+interface MediaInfo {
+  duration: number;
+  width?: number;
+  height?: number;
+}
+
+function getMediaInfo(file: File): Promise<MediaInfo> {
+  return new Promise((resolve, reject) => {
+    const isAudio = file.type.startsWith('audio/');
+    const el = isAudio ? new Audio() : document.createElement('video');
+    const url = URL.createObjectURL(file);
+    const cleanup = () => URL.revokeObjectURL(url);
+    const timeout = setTimeout(() => { cleanup(); reject(new Error('timeout')); }, 10000);
+    el.addEventListener('loadedmetadata', () => {
+      clearTimeout(timeout);
+      if (isAudio) {
+        resolve({ duration: el.duration });
+      } else {
+        const vid = el as HTMLVideoElement;
+        resolve({ duration: vid.duration, width: vid.videoWidth, height: vid.videoHeight });
+      }
+      cleanup();
+    });
+    el.addEventListener('error', () => {
+      clearTimeout(timeout);
+      reject(new Error('无法读取媒体文件'));
+      cleanup();
+    });
+    el.src = url;
+  });
+}
+
 // API limits per Seedance 2.0 official doc
 const MAX_IMAGES = 9;
 const MAX_VIDEOS = 3;
@@ -46,6 +101,7 @@ interface InputBarState {
   addReferences: (files: File[]) => void;
   removeReference: (id: string) => void;
   clearReferences: () => void;
+  retryUpload: (refId: string) => void;
 
   // Keyframe
   firstFrame: UploadedFile | null;
@@ -118,7 +174,10 @@ export const useInputBarStore = create<InputBarState>((set, get) => ({
     const counts = { image: 0, video: 0, audio: 0 };
     for (const ref of state.references) counts[ref.type]++;
 
-    const newRefs: UploadedFile[] = [];
+    // Separate images (sync) from audio/video (need async duration check)
+    const imageFiles: File[] = [];
+    const mediaFiles: File[] = []; // audio + video
+
     for (const file of files) {
       const type: 'image' | 'video' | 'audio' = file.type.startsWith('video/')
         ? 'video'
@@ -132,24 +191,23 @@ export const useInputBarStore = create<InputBarState>((set, get) => ({
         showToast(label);
         continue;
       }
-
-      fileCounter++;
-      const labelPrefix = type === 'video' ? '视频' : type === 'audio' ? '音频' : '图片';
-      // 编号接着已有的同类型素材（包括 @ 引用的 assetMentions）
-      const existingSameType = state.references.filter(r => r.type === type).length
-        + newRefs.filter(r => r.type === type).length
-        + (state.assetMentions || []).filter((m: Record<string, string>) => m.type === type).length;
-      newRefs.push({
-        id: `ref_${fileCounter}`,
-        file,
-        type,
-        previewUrl: type === 'audio' ? '' : URL.createObjectURL(file),
-        label: `${labelPrefix}${existingSameType + 1}`,
-      });
       counts[type]++;
+
+      if (type === 'image') {
+        imageFiles.push(file);
+      } else {
+        mediaFiles.push(file);
+      }
     }
-    if (newRefs.length > 0) {
+
-      set({ references: [...state.references, ...newRefs] });
+    // ── Async: validate image dimensions, then add + upload ──
+    if (imageFiles.length > 0) {
+      _validateAndAddImages(imageFiles);
+    }
+
+    // ── Async: validate audio/video duration, then add + upload ──
+    if (mediaFiles.length > 0) {
+      _validateAndAddMedia(mediaFiles);
     }
   },
   removeReference: (id) => {
@@ -163,6 +221,16 @@ export const useInputBarStore = create<InputBarState>((set, get) => ({
     state.references.forEach((r) => URL.revokeObjectURL(r.previewUrl));
     set({ references: [] });
   },
+  retryUpload: (refId) => {
+    const ref = get().references.find((r) => r.id === refId);
+    if (!ref?.file) return;
+    set({
+      references: get().references.map((r) =>
+        r.id === refId ? { ...r, uploading: true, uploadError: false } : r
+      ),
+    });
+    _uploadRef(refId, ref.file);
+  },
 
   firstFrame: null,
   lastFrame: null,
@@ -216,6 +284,8 @@ export const useInputBarStore = create<InputBarState>((set, get) => ({
       const hasImageOrVideo = state.references.some((r) => r.type === 'image' || r.type === 'video');
       if (!hasImageOrVideo && !hasText) return false;
     }
+    // Block submit if any reference is still uploading or failed
+    if (state.references.some((r) => r.uploading || r.uploadError)) return false;
     return true;
   },
 
@@ -290,3 +360,181 @@ export const useInputBarStore = create<InputBarState>((set, get) => ({
     });
   },
 }));
+
+// ── Module-level helpers (use useInputBarStore late-binding) ──
+
+/** Upload a single reference file to TOS and update the store. */
+function _uploadRef(refId: string, file: File) {
+  mediaApi.upload(file).then(({ data }) => {
+    useInputBarStore.setState((s) => ({
+      references: s.references.map((r) =>
+        r.id === refId ? { ...r, tosUrl: data.url, uploading: false, uploadError: false } : r
+      ),
+    }));
+  }).catch(() => {
+    useInputBarStore.setState((s) => ({
+      references: s.references.map((r) =>
+        r.id === refId ? { ...r, uploading: false, uploadError: true } : r
+      ),
+    }));
+  });
+}
+
+/** Validate image dimensions per Seedance API spec, then add to store + start upload. */
+async function _validateAndAddImages(files: File[]) {
+  for (const file of files) {
+    // Read dimensions
+    let dims: { width: number; height: number };
+    try {
+      dims = await getImageDimensions(file);
+    } catch {
+      showToast('无法读取图片信息');
+      continue;
+    }
+
+    const { width, height } = dims;
+    // API spec: width/height in open interval (300, 6000)
+    if (width >= 6000 || height >= 6000) {
+      showToast(`图片尺寸过大（${width}×${height}），宽高需小于 6000 像素`);
+      continue;
+    }
+    if (width <= 300 || height <= 300) {
+      showToast(`图片尺寸过小（${width}×${height}），宽高需大于 300 像素`);
+      continue;
+    }
+    // API spec: aspect ratio (width/height) in open interval (0.4, 2.5)
+    const ratio = width / height;
+    if (ratio <= 0.4 || ratio >= 2.5) {
+      showToast(`图片比例不支持（${width}×${height}），宽高比需在 0.4 到 2.5 之间`);
+      continue;
+    }
+
+    // Re-check count
+    const state = useInputBarStore.getState();
+    const currentCount = state.references.filter((r) => r.type === 'image').length;
+    if (currentCount >= MAX_IMAGES) {
+      showToast(`最多上传${MAX_IMAGES}张图片`);
+      continue;
+    }
+
+    // Passed — add to store + upload
+    fileCounter++;
+    const existingSameType = state.references.filter(r => r.type === 'image').length
+      + (state.assetMentions || []).filter((m: Record<string, string>) => m.type === 'image').length;
+    const refId = `ref_${fileCounter}`;
+    const newRef: UploadedFile = {
+      id: refId,
+      file,
+      type: 'image',
+      previewUrl: URL.createObjectURL(file),
+      label: `图片${existingSameType + 1}`,
+      uploading: true,
+    };
+
+    useInputBarStore.setState((s) => ({
+      references: [...s.references, newRef],
+    }));
+
+    _uploadRef(refId, file);
+  }
+}
+
+const MAX_MEDIA_DURATION = 15; // seconds per item and total
+
+/** Validate audio/video duration (+ video dimensions), then add to store + start upload. */
+async function _validateAndAddMedia(files: File[]) {
+  for (const file of files) {
+    const type: 'video' | 'audio' = file.type.startsWith('video/') ? 'video' : 'audio';
+    const typeLabel = type === 'video' ? '视频' : '音频';
+
+    // Read duration (+ dimensions for video)
+    let info: MediaInfo;
+    try {
+      info = await getMediaInfo(file);
+    } catch {
+      showToast(`无法读取${typeLabel}文件信息`);
+      continue;
+    }
+
+    const dur = info.duration;
+
+    // Single item duration check
+    // API specifies [2, 15]s — lower bound strict, upper bound +0.4s for codec imprecision
+    if (dur < 2) {
+      showToast(`${typeLabel}时长不能少于2秒`);
+      continue;
+    }
+    if (dur > MAX_MEDIA_DURATION + 0.4) {
+      showToast(`单条${typeLabel}时长不能超过${MAX_MEDIA_DURATION}秒`);
+      continue;
+    }
+
+    // Video dimension checks — API spec: [300, 6000]px, ratio [0.4, 2.5], pixels [409600, 927408]
+    if (type === 'video' && info.width && info.height) {
+      const { width, height } = info;
+      if (width > 6000 || height > 6000) {
+        showToast(`视频尺寸过大（${width}×${height}），宽高不能超过 6000 像素`);
+        continue;
+      }
+      if (width < 300 || height < 300) {
+        showToast(`视频尺寸过小（${width}×${height}），宽高不能小于 300 像素`);
+        continue;
+      }
+      const ratio = width / height;
+      if (ratio < 0.4 || ratio > 2.5) {
+        showToast(`视频比例不支持（${width}×${height}），宽高比需在 0.4 到 2.5 之间`);
+        continue;
+      }
+      const pixels = width * height;
+      if (pixels < 409600) {
+        showToast(`视频像素过低（${width}×${height}=${pixels.toLocaleString()}），最低需 409,600 像素`);
+        continue;
+      }
+      if (pixels > 927408) {
+        showToast(`视频像素过高（${width}×${height}=${pixels.toLocaleString()}），最高 927,408 像素`);
+        continue;
+      }
+    }
+
+    // Total duration check (same type)
+    const state = useInputBarStore.getState();
+    const existingDuration = state.references
+      .filter((r) => r.type === type && r.duration)
+      .reduce((sum, r) => sum + (r.duration || 0), 0);
+    if (existingDuration + dur > MAX_MEDIA_DURATION + 0.4) {
+      showToast(`${typeLabel}总时长不能超过${MAX_MEDIA_DURATION}秒`);
+      continue;
+    }
+
+    // Re-check count (may have changed since initial check)
+    const currentCount = state.references.filter((r) => r.type === type).length;
+    const max = type === 'video' ? MAX_VIDEOS : MAX_AUDIO;
+    if (currentCount >= max) {
+      showToast(`最多上传${max}个${typeLabel}`);
+      continue;
+    }
+
+    // Passed all checks — add to store
+    fileCounter++;
+    const labelPrefix = type === 'video' ? '视频' : '音频';
+    const existingSameType = state.references.filter(r => r.type === type).length
+      + (state.assetMentions || []).filter((m: Record<string, string>) => m.type === type).length;
+    const refId = `ref_${fileCounter}`;
+    const newRef: UploadedFile = {
+      id: refId,
+      file,
+      type,
+      previewUrl: type === 'audio' ? '' : URL.createObjectURL(file),
+      label: `${labelPrefix}${existingSameType + 1}`,
+      uploading: true,
+      duration: Math.round(dur * 10) / 10,
+    };
+
+    useInputBarStore.setState((s) => ({
+      references: [...s.references, newRef],
+    }));
+
+    // Start upload
+    _uploadRef(refId, file);
+  }
+}

web/src/types/index.ts

@@ -12,6 +12,9 @@ export interface UploadedFile {
   previewUrl: string;
   label: string;
   tosUrl?: string; // TOS URL after upload
+  uploading?: boolean;
+  uploadError?: boolean;
+  duration?: number; // media duration in seconds (audio/video only)
 }
 
 export interface DropdownOption<T = string> {