修改BUG

api/handlers/character_library.go

@@ -4,6 +4,7 @@ import (
 	"strconv"
 
 	services2 "github.com/drama-generator/backend/application/services"
+	"github.com/drama-generator/backend/infrastructure/storage"
 	"github.com/drama-generator/backend/pkg/config"
 	"github.com/drama-generator/backend/pkg/logger"
 	"github.com/drama-generator/backend/pkg/response"
@@ -17,10 +18,10 @@ type CharacterLibraryHandler struct {
 	log            *logger.Logger
 }
 
-func NewCharacterLibraryHandler(db *gorm.DB, cfg *config.Config, log *logger.Logger, transferService *services2.ResourceTransferService) *CharacterLibraryHandler {
+func NewCharacterLibraryHandler(db *gorm.DB, cfg *config.Config, log *logger.Logger, transferService *services2.ResourceTransferService, localStorage *storage.LocalStorage) *CharacterLibraryHandler {
 	return &CharacterLibraryHandler{
 		libraryService: services2.NewCharacterLibraryService(db, log),
-		imageService:   services2.NewImageGenerationService(db, transferService, log),
+		imageService:   services2.NewImageGenerationService(db, transferService, localStorage, log),
 		log:            log,
 	}
 }

api/handlers/image_generation.go

@@ -4,6 +4,7 @@ import (
 	"strconv"
 
 	"github.com/drama-generator/backend/application/services"
+	"github.com/drama-generator/backend/infrastructure/storage"
 	"github.com/drama-generator/backend/pkg/config"
 	"github.com/drama-generator/backend/pkg/logger"
 	"github.com/drama-generator/backend/pkg/response"
@@ -16,9 +17,9 @@ type ImageGenerationHandler struct {
 	log          *logger.Logger
 }
 
-func NewImageGenerationHandler(db *gorm.DB, cfg *config.Config, log *logger.Logger, transferService *services.ResourceTransferService) *ImageGenerationHandler {
+func NewImageGenerationHandler(db *gorm.DB, cfg *config.Config, log *logger.Logger, transferService *services.ResourceTransferService, localStorage *storage.LocalStorage) *ImageGenerationHandler {
 	return &ImageGenerationHandler{
-		imageService: services.NewImageGenerationService(db, transferService, log),
+		imageService: services.NewImageGenerationService(db, transferService, localStorage, log),
 		log:          log,
 	}
 }

api/routes/routes.go

@@ -30,18 +30,18 @@ func SetupRouter(cfg *config.Config, db *gorm.DB, log *logger.Logger, localStora
 	})
 
 	aiService := services2.NewAIService(db, log)
+	localStoragePtr := localStorage.(*storage2.LocalStorage)
+	transferService := services2.NewResourceTransferService(db, log)
 	dramaHandler := handlers2.NewDramaHandler(db, cfg, log, nil)
 	aiConfigHandler := handlers2.NewAIConfigHandler(db, cfg, log)
 	scriptGenHandler := handlers2.NewScriptGenerationHandler(db, cfg, log)
-	imageGenService := services2.NewImageGenerationService(db, nil, log)
+	imageGenService := services2.NewImageGenerationService(db, transferService, localStoragePtr, log)
-	imageGenHandler := handlers2.NewImageGenerationHandler(db, cfg, log, nil)
+	imageGenHandler := handlers2.NewImageGenerationHandler(db, cfg, log, transferService, localStoragePtr)
-	localStoragePtr := localStorage.(*storage2.LocalStorage)
-	transferService := services2.NewResourceTransferService(db, log)
 	videoGenHandler := handlers2.NewVideoGenerationHandler(db, transferService, localStoragePtr, aiService, log)
 	videoMergeHandler := handlers2.NewVideoMergeHandler(db, nil, cfg.Storage.LocalPath, cfg.Storage.BaseURL, log)
 	assetHandler := handlers2.NewAssetHandler(db, cfg, log)
 	characterLibraryService := services2.NewCharacterLibraryService(db, log)
-	characterLibraryHandler := handlers2.NewCharacterLibraryHandler(db, cfg, log, nil)
+	characterLibraryHandler := handlers2.NewCharacterLibraryHandler(db, cfg, log, transferService, localStoragePtr)
 	uploadHandler, err := handlers2.NewUploadHandler(cfg, log, characterLibraryService)
 	if err != nil {
 		log.Fatalw("Failed to create upload handler", "error", err)

application/services/image_generation_service.go

@@ -7,6 +7,7 @@ import (
 	"time"
 
 	models "github.com/drama-generator/backend/domain/models"
+	"github.com/drama-generator/backend/infrastructure/storage"
 	"github.com/drama-generator/backend/pkg/ai"
 	"github.com/drama-generator/backend/pkg/image"
 	"github.com/drama-generator/backend/pkg/logger"
@@ -18,14 +19,16 @@ type ImageGenerationService struct {
 	db              *gorm.DB
 	aiService       *AIService
 	transferService *ResourceTransferService
+	localStorage    *storage.LocalStorage
 	log             *logger.Logger
 }
 
-func NewImageGenerationService(db *gorm.DB, transferService *ResourceTransferService, log *logger.Logger) *ImageGenerationService {
+func NewImageGenerationService(db *gorm.DB, transferService *ResourceTransferService, localStorage *storage.LocalStorage, log *logger.Logger) *ImageGenerationService {
 	return &ImageGenerationService{
 		db:              db,
 		aiService:       NewAIService(db, log),
 		transferService: transferService,
+		localStorage:    localStorage,
 		log:             log,
 	}
 }
@@ -241,6 +244,23 @@ func (s *ImageGenerationService) pollTaskStatus(imageGenID uint, client image.Im
 
 func (s *ImageGenerationService) completeImageGeneration(imageGenID uint, result *image.ImageResult) {
 	now := time.Now()
+
+	// 下载图片到本地存储（仅用于缓存，不更新数据库）
+	if s.localStorage != nil && result.ImageURL != "" {
+		_, err := s.localStorage.DownloadFromURL(result.ImageURL, "images")
+		if err != nil {
+			s.log.Warnw("Failed to download image to local storage",
+				"error", err,
+				"id", imageGenID,
+				"original_url", result.ImageURL)
+		} else {
+			s.log.Infow("Image downloaded to local storage for caching",
+				"id", imageGenID,
+				"original_url", result.ImageURL)
+		}
+	}
+
+	// 数据库中保持使用原始URL
 	updates := map[string]interface{}{
 		"status":       models.ImageStatusCompleted,
 		"image_url":    result.ImageURL,

application/services/video_generation_service.go

@@ -316,6 +316,37 @@ func (s *VideoGenerationService) pollTaskStatus(videoGenID uint, taskID string,
 }
 
 func (s *VideoGenerationService) completeVideoGeneration(videoGenID uint, videoURL string, duration *int, width *int, height *int, firstFrameURL *string) {
+	// 下载视频到本地存储（仅用于缓存，不更新数据库）
+	if s.localStorage != nil && videoURL != "" {
+		_, err := s.localStorage.DownloadFromURL(videoURL, "videos")
+		if err != nil {
+			s.log.Warnw("Failed to download video to local storage",
+				"error", err,
+				"id", videoGenID,
+				"original_url", videoURL)
+		} else {
+			s.log.Infow("Video downloaded to local storage for caching",
+				"id", videoGenID,
+				"original_url", videoURL)
+		}
+	}
+
+	// 下载首帧图片到本地存储（仅用于缓存，不更新数据库）
+	if firstFrameURL != nil && *firstFrameURL != "" && s.localStorage != nil {
+		_, err := s.localStorage.DownloadFromURL(*firstFrameURL, "video_frames")
+		if err != nil {
+			s.log.Warnw("Failed to download first frame to local storage",
+				"error", err,
+				"id", videoGenID,
+				"original_url", *firstFrameURL)
+		} else {
+			s.log.Infow("First frame downloaded to local storage for caching",
+				"id", videoGenID,
+				"original_url", *firstFrameURL)
+		}
+	}
+
+	// 数据库中保持使用原始URL
 	updates := map[string]interface{}{
 		"status":    models.VideoStatusCompleted,
 		"video_url": videoURL,

infrastructure/storage/local_storage.go

@@ -3,8 +3,10 @@ package storage
 import (
 	"fmt"
 	"io"
+	"net/http"
 	"os"
 	"path/filepath"
+	"strings"
 	"time"
 )
 
@@ -55,3 +57,81 @@ func (s *LocalStorage) Delete(url string) error {
 func (s *LocalStorage) GetURL(path string) string {
 	return fmt.Sprintf("%s/%s", s.baseURL, path)
 }
+
+// DownloadFromURL 从远程URL下载文件到本地存储
+func (s *LocalStorage) DownloadFromURL(url, category string) (string, error) {
+	// 发送HTTP请求下载文件
+	resp, err := http.Get(url)
+	if err != nil {
+		return "", fmt.Errorf("failed to download file: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return "", fmt.Errorf("failed to download file: HTTP %d", resp.StatusCode)
+	}
+
+	// 从URL或Content-Type推断文件扩展名
+	ext := getFileExtension(url, resp.Header.Get("Content-Type"))
+
+	// 创建目录
+	dir := filepath.Join(s.basePath, category)
+	if err := os.MkdirAll(dir, 0755); err != nil {
+		return "", fmt.Errorf("failed to create category directory: %w", err)
+	}
+
+	// 生成唯一文件名
+	timestamp := time.Now().Format("20060102_150405_000")
+	filename := fmt.Sprintf("%s%s", timestamp, ext)
+	filePath := filepath.Join(dir, filename)
+
+	// 保存文件
+	dst, err := os.Create(filePath)
+	if err != nil {
+		return "", fmt.Errorf("failed to create file: %w", err)
+	}
+	defer dst.Close()
+
+	if _, err := io.Copy(dst, resp.Body); err != nil {
+		return "", fmt.Errorf("failed to save file: %w", err)
+	}
+
+	// 返回本地URL
+	localURL := fmt.Sprintf("%s/%s/%s", s.baseURL, category, filename)
+	return localURL, nil
+}
+
+// getFileExtension 从URL或Content-Type推断文件扩展名
+func getFileExtension(url, contentType string) string {
+	// 首先尝试从URL获取扩展名
+	if idx := strings.LastIndex(url, "."); idx != -1 {
+		ext := url[idx:]
+		// 只取扩展名部分，忽略查询参数
+		if qIdx := strings.Index(ext, "?"); qIdx != -1 {
+			ext = ext[:qIdx]
+		}
+		if len(ext) <= 5 { // 合理的扩展名长度
+			return ext
+		}
+	}
+
+	// 根据Content-Type推断扩展名
+	switch {
+	case strings.Contains(contentType, "image/jpeg"):
+		return ".jpg"
+	case strings.Contains(contentType, "image/png"):
+		return ".png"
+	case strings.Contains(contentType, "image/gif"):
+		return ".gif"
+	case strings.Contains(contentType, "image/webp"):
+		return ".webp"
+	case strings.Contains(contentType, "video/mp4"):
+		return ".mp4"
+	case strings.Contains(contentType, "video/webm"):
+		return ".webm"
+	case strings.Contains(contentType, "video/quicktime"):
+		return ".mov"
+	default:
+		return ".bin"
+	}
+}

pkg/video/volces_ark_client.go

@@ -230,10 +230,12 @@ func (c *VolcesArkClient) GenerateVideo(imageURL, prompt string, opts ...VideoOp
 }
 
 func (c *VolcesArkClient) GetTaskStatus(taskID string) (*VideoResult, error) {
-	// 替换占位符{taskId}或直接拼接
+	// 替换占位符{taskId}、{task_id}或直接拼接
 	queryPath := c.QueryEndpoint
-	if contains := bytes.Contains([]byte(queryPath), []byte("{taskId}")); contains {
+	if strings.Contains(queryPath, "{taskId}") {
-		queryPath = string(bytes.ReplaceAll([]byte(queryPath), []byte("{taskId}"), []byte(taskID)))
+		queryPath = strings.ReplaceAll(queryPath, "{taskId}", taskID)
+	} else if strings.Contains(queryPath, "{task_id}") {
+		queryPath = strings.ReplaceAll(queryPath, "{task_id}", taskID)
 	} else {
 		queryPath = queryPath + "/" + taskID
 	}

web/src/stores/episode.ts

@@ -0,0 +1,233 @@
+import { ref, computed, reactive } from 'vue'
+import { defineStore } from 'pinia'
+import { dramaAPI } from '@/api/drama'
+import type { Episode, Character, Scene } from '@/types/drama'
+
+interface EpisodeCache {
+  data: Episode
+  loading: boolean
+  error: string | null
+  lastFetch: number
+}
+
+interface EpisodeOperations {
+  refresh: () => Promise<void>
+  set: (params: SetOperationParams) => Promise<void>
+  del: (params: DeleteOperationParams) => Promise<void>
+  saveScript: (content: string) => Promise<void>
+  extractData: () => Promise<void>
+  generateImages: (options?: GenerateImageOptions) => Promise<void>
+  generateStoryboards: () => Promise<void>
+}
+
+interface SetOperationParams {
+  type: 'character' | 'scene' | 'storyboard'
+  data: any
+}
+
+interface DeleteOperationParams {
+  type: 'character' | 'scene' | 'storyboard'
+  id: string | number
+}
+
+interface GenerateImageOptions {
+  characterIds?: number[]
+  sceneIds?: string[]
+}
+
+export interface CachedEpisode {
+  value: Episode
+  loading: boolean
+  error: string | null
+  refresh: () => Promise<void>
+  set: (params: SetOperationParams) => Promise<void>
+  del: (params: DeleteOperationParams) => Promise<void>
+  saveScript: (content: string) => Promise<void>
+  extractData: () => Promise<void>
+  generateImages: (options?: GenerateImageOptions) => Promise<void>
+  generateStoryboards: () => Promise<void>
+}
+
+export const useEpisodeStore = defineStore('episode', () => {
+  const caches = reactive<Map<string, EpisodeCache>>(new Map())
+
+  const getCacheByEpisodeId = (episodeId: string): CachedEpisode => {
+    if (!caches.has(episodeId)) {
+      caches.set(episodeId, {
+        data: {} as Episode,
+        loading: false,
+        error: null,
+        lastFetch: 0
+      })
+      fetchEpisode(episodeId)
+    }
+
+    const cache = caches.get(episodeId)!
+
+    const operations: EpisodeOperations = {
+      async refresh() {
+        await fetchEpisode(episodeId, true)
+      },
+
+      async set(params: SetOperationParams) {
+        const { type, data } = params
+        
+        switch (type) {
+          case 'character':
+            await dramaAPI.saveCharacters(cache.data.drama_id, [data], episodeId)
+            await fetchEpisode(episodeId, true)
+            break
+          case 'scene':
+            await dramaAPI.updateScene(data.id, data)
+            await fetchEpisode(episodeId, true)
+            break
+          case 'storyboard':
+            await dramaAPI.updateStoryboard(data.id, data)
+            await fetchEpisode(episodeId, true)
+            break
+        }
+      },
+
+      async del(params: DeleteOperationParams) {
+        const { type, id } = params
+        
+        switch (type) {
+          case 'character':
+            const characters = cache.data.characters?.filter(c => c.id !== id) || []
+            await dramaAPI.saveCharacters(cache.data.drama_id, characters, episodeId)
+            await fetchEpisode(episodeId, true)
+            break
+          case 'scene':
+            break
+          case 'storyboard':
+            break
+        }
+      },
+
+      async saveScript(content: string) {
+        const parts = episodeId.split('-')
+        const dramaId = parts[0]
+        const episodeNumber = parseInt(parts.length > 1 ? parts[1] : cache.data.episode_number?.toString() || '1')
+        
+        await dramaAPI.saveEpisodes(dramaId, [{
+          episode_number: episodeNumber,
+          script_content: content
+        }])
+        
+        await fetchEpisode(episodeId, true)
+      },
+
+      async extractData() {
+        await dramaAPI.extractBackgrounds(episodeId)
+        await fetchEpisode(episodeId, true)
+      },
+
+      async generateImages(options?: GenerateImageOptions) {
+        const promises: Promise<any>[] = []
+        
+        if (options?.characterIds && options.characterIds.length > 0) {
+          options.characterIds.forEach(id => {
+            const character = cache.data.characters?.find(c => c.id === id)
+            if (character) {
+              promises.push(
+                dramaAPI.generateSceneImage({
+                  scene_id: character.id.toString(),
+                  prompt: character.appearance || character.description || character.name,
+                  model: undefined
+                })
+              )
+            }
+          })
+        }
+
+        if (options?.sceneIds && options.sceneIds.length > 0) {
+          options.sceneIds.forEach(sceneId => {
+            promises.push(
+              dramaAPI.generateSceneImage({
+                scene_id: sceneId,
+                model: undefined
+              })
+            )
+          })
+        }
+        
+        if (promises.length > 0) {
+          await Promise.allSettled(promises)
+        }
+
+        await fetchEpisode(episodeId, true)
+      },
+      
+      async generateStoryboards() {
+        await dramaAPI.generateStoryboard(episodeId)
+        await fetchEpisode(episodeId, true)
+      }
+    }
+
+    return {
+      get value() {
+        return cache.data
+      },
+      get loading() {
+        return cache.loading
+      },
+      get error() {
+        return cache.error
+      },
+      ...operations
+    }
+  }
+
+  const fetchEpisode = async (episodeId: string, force = false) => {
+    const cache = caches.get(episodeId)
+    if (!cache) return
+
+    const now = Date.now()
+    if (!force && cache.lastFetch && (now - cache.lastFetch) < 3000) {
+      return
+    }
+
+    cache.loading = true
+    cache.error = null
+
+    try {
+      const parts = episodeId.split('-')
+      const dramaId = parts[0]
+      const episodeNumber = parts.length > 1 ? parseInt(parts[1]) : null
+      
+      const drama = await dramaAPI.get(dramaId)
+      
+      let episode: Episode | undefined
+      if (episodeNumber !== null) {
+        episode = drama.episodes?.find(e => e.episode_number === episodeNumber)
+      } else {
+        episode = drama.episodes?.find(e => e.id === episodeId)
+      }
+      
+      if (episode) {
+        cache.data = episode
+        cache.lastFetch = now
+      } else {
+        cache.error = '未找到章节数据'
+      }
+    } catch (error: any) {
+      cache.error = error.message || '加载章节数据失败'
+      console.error('Failed to fetch episode:', error)
+    } finally {
+      cache.loading = false
+    }
+  }
+
+  const clearCache = (episodeId?: string) => {
+    if (episodeId) {
+      caches.delete(episodeId)
+    } else {
+      caches.clear()
+    }
+  }
+
+  return {
+    getCacheByEpisodeId,
+    clearCache
+  }
+})

web/src/types/video.ts

@@ -38,7 +38,7 @@ export interface GenerateVideoRequest {
   scene_id?: string  // 已废弃，保留用于兼容
   drama_id: string
   image_gen_id?: number
-  image_url: string
+  image_url?: string
   prompt: string
   provider?: string
   model?: string
@@ -49,8 +49,10 @@ export interface GenerateVideoRequest {
   motion_level?: number
   camera_motion?: string
   seed?: number
+  reference_mode?: string   // 参考图模式：single, first_last, multiple, none
   first_frame_url?: string  // 首帧图片URL
   last_frame_url?: string   // 尾帧图片URL
+  reference_image_urls?: string[]  // 多图参考模式
 }
 
 export interface VideoGenerationListParams {

web/src/views/drama/DramaManagement.vue

@@ -126,14 +126,11 @@
               {{ formatDate(row.created_at) }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="280" fixed="right">
+          <el-table-column label="操作" width="220" fixed="right">
             <template #default="{ row }">
               <el-button size="small" type="primary" @click="enterEpisodeWorkflow(row)">
                 进入制作
               </el-button>
-              <el-button size="small" @click="editEpisode(row)">
-                编辑
-              </el-button>
               <el-button size="small" type="danger" @click="deleteEpisode(row)">
                 删除
               </el-button>
@@ -223,7 +220,7 @@
             <el-option label="次要角色" value="minor" />
           </el-select>
         </el-form-item>
-        <el-form-item label="外貌特征">
+        <el-form-item label="外貌特征"> 
           <el-input v-model="newCharacter.appearance" type="textarea" :rows="3" placeholder="描述角色的外貌特征" />
         </el-form-item>
         <el-form-item label="性格特点">
@@ -378,27 +375,40 @@ const enterEpisodeWorkflow = (episode: any) => {
   })
 }
 
-const editEpisode = (episode: any) => {
-  ElMessage.info('编辑功能开发中')
-}
-
 const deleteEpisode = async (episode: any) => {
-  await ElMessageBox.confirm(
-    `确定要删除第${episode.episode_number}章吗？`,
-    '删除确认',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }
-  )
-
   try {
-    // TODO: 调用删除API
+    await ElMessageBox.confirm(
-    ElMessage.success('删除成功')
+      `确定要删除第${episode.episode_number}章吗？此操作将同时删除该章节的所有相关数据（角色、场景、分镜等）。`,
+      '删除确认',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+
+    // 过滤掉要删除的章节
+    const existingEpisodes = drama.value?.episodes || []
+    const updatedEpisodes = existingEpisodes
+      .filter(ep => ep.episode_number !== episode.episode_number)
+      .map(ep => ({
+        episode_number: ep.episode_number,
+        title: ep.title,
+        script_content: ep.script_content,
+        description: ep.description,
+        duration: ep.duration,
+        status: ep.status
+      }))
+
+    // 保存更新后的章节列表
+    await dramaAPI.saveEpisodes(drama.value!.id, updatedEpisodes)
+    
+    ElMessage.success(`第${episode.episode_number}章删除成功`)
     await loadDramaData()
   } catch (error: any) {
-    ElMessage.error(error.message || '删除失败')
+    if (error !== 'cancel') {
+      ElMessage.error(error.message || '删除失败')
+    }
   }
 }
 

web/src/views/drama/ProfessionalEditor-storyboard-item.scss

@@ -1,87 +0,0 @@
-// 镜头列表项样式 - 白色主题
-.storyboard-item {
-    padding: 8px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 0.2s;
-    border: 1px solid #e0e0e0;
-    margin-bottom: 8px;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    background: #fff;
-
-    &:hover {
-        background: #f5f5f5;
-        border-color: #d0d0d0;
-    }
-
-    &.active {
-        background: #409eff;
-        border-color: #409eff;
-
-        .shot-number,
-        .shot-title {
-            color: #fff !important;
-        }
-
-        .shot-duration {
-            background: rgba(255, 255, 255, 0.2);
-            color: #fff;
-        }
-    }
-
-    .shot-thumbnail {
-        width: 80px;
-        height: 50px;
-        border-radius: 4px;
-        overflow: hidden;
-        background: #f0f0f0;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-    }
-
-    .shot-content {
-        flex: 1;
-        min-width: 0;
-
-        .shot-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 4px;
-
-            .shot-number {
-                font-size: 11px;
-                color: #666;
-                font-weight: 500;
-            }
-
-            .shot-duration {
-                font-size: 11px;
-                color: #666;
-                background: #f0f0f0;
-                padding: 2px 6px;
-                border-radius: 3px;
-            }
-        }
-
-        .shot-title {
-            font-size: 13px;
-            color: #333;
-            font-weight: 500;
-            line-height: 1.3;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-}

web/src/views/drama/ProfessionalEditor-styles.scss

@@ -1,444 +0,0 @@
-// 视频合成列表样式
-.merges-list {
-  padding: 16px;
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
-  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
-
-  .merge-items {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .merge-item {
-    position: relative;
-    background: #fff;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border: 1px solid transparent;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(64, 158, 255, 0.3);
-      border-color: rgba(64, 158, 255, 0.2);
-    }
-
-    .status-indicator {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 4px;
-      transition: all 0.3s;
-    }
-
-    &.merge-status-completed .status-indicator {
-      background: linear-gradient(to bottom, #67c23a, #85ce61);
-    }
-
-    &.merge-status-processing .status-indicator {
-      background: linear-gradient(to bottom, #e6a23c, #f0c78a);
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    &.merge-status-failed .status-indicator {
-      background: linear-gradient(to bottom, #f56c6c, #f89898);
-    }
-
-    &.merge-status-pending .status-indicator {
-      background: linear-gradient(to bottom, #909399, #b1b3b8);
-    }
-
-    .merge-content {
-      padding: 20px 24px;
-      padding-left: 28px;
-    }
-
-    .merge-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-      padding-bottom: 14px;
-      border-bottom: 1px solid #f0f2f5;
-
-      .title-section {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        flex: 1;
-
-        .title-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 38px;
-          height: 38px;
-          border-radius: 10px;
-          background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
-          color: #606266;
-          transition: all 0.3s;
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
-        }
-
-        .merge-title {
-          margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #303133;
-          line-height: 1.4;
-        }
-      }
-
-      :deep(.el-tag) {
-        font-weight: 500;
-        padding: 4px 12px;
-        font-size: 12px;
-      }
-    }
-
-    &.merge-status-completed .title-icon {
-      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
-      color: #fff;
-      box-shadow: 0 2px 8px rgba(103, 194, 58, 0.25);
-    }
-
-    &.merge-status-processing .title-icon {
-      background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
-      color: #fff;
-      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.25);
-    }
-
-    &.merge-status-failed .title-icon {
-      background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
-      color: #fff;
-      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.25);
-    }
-
-    .merge-details {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      gap: 12px;
-      margin-bottom: 16px;
-
-      .detail-item {
-        display: flex;
-        gap: 10px;
-        padding: 12px 14px;
-        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
-        border-radius: 8px;
-        border: 1px solid transparent;
-        transition: all 0.3s;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-
-        &:hover {
-          background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
-          transform: translateY(-1px);
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-          border-color: rgba(64, 158, 255, 0.15);
-        }
-
-        .detail-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 28px;
-          height: 28px;
-          border-radius: 6px;
-          background: #fff;
-          color: #409eff;
-          flex-shrink: 0;
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-        }
-
-        .detail-content {
-          flex: 1;
-          min-width: 0;
-
-          .detail-label {
-            font-size: 11px;
-            color: #909399;
-            margin-bottom: 3px;
-            font-weight: 500;
-          }
-
-          .detail-value {
-            font-size: 13px;
-            color: #303133;
-            font-weight: 600;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
-
-    .merge-error {
-      margin-bottom: 12px;
-      
-      :deep(.el-alert) {
-        border-radius: 8px;
-        border: none;
-        box-shadow: 0 1px 4px rgba(245, 108, 108, 0.12);
-        padding: 8px 12px;
-        font-size: 12px;
-      }
-    }
-
-    .merge-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 12px;
-
-      :deep(.el-button) {
-        flex: 1;
-        max-width: 160px;
-        font-weight: 500;
-        padding: 8px 15px;
-        font-size: 13px;
-      }
-    }
-  }
-}
-
-// 旋转动画
-@keyframes rotating {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.rotating {
-  animation: rotating 2s linear infinite;
-}
-
-// 脉冲动画
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
-
-// 白色主题样式
-.shot-editor-new {
-  padding: 16px;
-  height: 100%;
-  overflow-y: auto;
-  background: #fff;
-
-  .section-label {
-    font-size: 12px;
-    color: #666;
-    margin-bottom: 8px;
-  }
-
-  // 场景预览
-  .scene-section {
-    margin-bottom: 20px;
-  }
-
-  .scene-preview {
-    width: 100%;
-    height: 80px;
-    border-radius: 6px;
-    overflow: hidden;
-    position: relative;
-    background: #f5f5f5;
-    border: 1px solid #e0e0e0;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .scene-info {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 6px 8px;
-      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
-      font-size: 11px;
-      color: #fff;
-
-      .scene-id {
-        font-size: 10px;
-        color: #e0e0e0;
-        margin-top: 2px;
-      }
-    }
-  }
-
-  .scene-preview-empty {
-    width: 100%;
-    height: 80px;
-    border-radius: 6px;
-    border: 1px dashed #d0d0d0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    background: #fafafa;
-
-    .el-icon {
-      font-size: 32px !important;
-      color: #c0c0c0;
-    }
-
-    div {
-      font-size: 11px;
-      color: #999;
-    }
-  }
-
-  // 角色列表
-  .cast-section {
-    margin-bottom: 20px;
-  }
-
-  .cast-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 8px;
-
-    .cast-item {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-      cursor: pointer;
-      transition: all 0.2s;
-
-      &:hover {
-        .cast-avatar {
-          border-color: #409eff;
-        }
-
-        .cast-remove {
-          opacity: 1;
-          visibility: visible;
-        }
-      }
-
-      &.active {
-        .cast-avatar {
-          border-color: #409eff;
-          background: #409eff;
-        }
-      }
-
-      .cast-avatar {
-        width: 36px;
-        height: 36px;
-        border-radius: 50%;
-        border: 2px solid #e0e0e0;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #f5f5f5;
-        font-size: 14px;
-        font-weight: 500;
-        color: #666;
-        transition: all 0.2s;
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-
-      .cast-name {
-        font-size: 10px;
-        color: #666;
-        max-width: 36px;
-        text-align: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .cast-remove {
-        position: absolute;
-        top: -3px;
-        right: -3px;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #f56c6c;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: all 0.2s;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        z-index: 10;
-        opacity: 0;
-        visibility: hidden;
-        font-size: 12px;
-
-        &:hover {
-          background: #f23030;
-          transform: scale(1.1);
-        }
-      }
-    }
-
-    .cast-empty {
-      width: 100%;
-      text-align: center;
-      padding: 15px;
-      color: #999;
-      font-size: 11px;
-    }
-  }
-
-  // 视效设置
-  .settings-section {
-    margin-bottom: 16px;
-
-    .settings-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 10px;
-
-      .setting-item {
-        label {
-          display: block;
-          font-size: 11px;
-          color: #666;
-          margin-bottom: 6px;
-        }
-      }
-    }
-
-    .audio-controls {
-      margin-top: 8px;
-    }
-  }
-
-  // 叙事内容
-  .narrative-section {
-    margin-bottom: 14px;
-  }
-
-  .dialogue-section {
-    margin-bottom: 14px;
-  }
-}

web/src/views/drama/ProfessionalEditor.vue

@@ -623,7 +623,7 @@
                     type="primary" 
                     :icon="VideoCamera" 
                     :loading="generatingVideo"
-                    :disabled="!selectedVideoModel || selectedImagesForVideo.length === 0"
+                    :disabled="!selectedVideoModel || (selectedReferenceMode !== 'none' && selectedImagesForVideo.length === 0)"
                     @click="generateVideo"
                   >
                     {{ generatingVideo ? '生成中...' : '生成视频' }}
@@ -1854,16 +1854,25 @@ const generateVideo = async () => {
     return
   }
   
-  if (!currentStoryboard.value || selectedImagesForVideo.value.length === 0) {
+  if (!currentStoryboard.value) {
+    ElMessage.warning('请先选择分镜')
+    return
+  }
+  
+  // 检查参考图模式
+  if (selectedReferenceMode.value !== 'none' && selectedImagesForVideo.value.length === 0) {
     ElMessage.warning('请选择参考图片')
     return
   }
   
-  // 获取第一张选中的图片
+  // 获取第一张选中的图片（仅在需要图片的模式下）
-  const selectedImage = videoReferenceImages.value.find(img => img.id === selectedImagesForVideo.value[0])
+  let selectedImage = null
-  if (!selectedImage || !selectedImage.image_url) {
+  if (selectedReferenceMode.value !== 'none' && selectedImagesForVideo.value.length > 0) {
-    ElMessage.error('请选择有效的参考图片')
+    selectedImage = videoReferenceImages.value.find(img => img.id === selectedImagesForVideo.value[0])
-    return
+    if (!selectedImage || !selectedImage.image_url) {
+      ElMessage.error('请选择有效的参考图片')
+      return
+    }
   }
   
   generatingVideo.value = true
@@ -2397,8 +2406,538 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-@use './ProfessionalEditor-styles.scss';
+// 镜头列表项样式 - 白色主题
-@use './ProfessionalEditor-storyboard-item.scss';
+.storyboard-item {
+    padding: 8px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s;
+    border: 1px solid #e0e0e0;
+    margin-bottom: 8px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    background: #fff;
+
+    &:hover {
+        background: #f5f5f5;
+        border-color: #d0d0d0;
+    }
+
+    &.active {
+        background: #409eff;
+        border-color: #409eff;
+
+        .shot-number,
+        .shot-title {
+            color: #fff !important;
+        }
+
+        .shot-duration {
+            background: rgba(255, 255, 255, 0.2);
+            color: #fff;
+        }
+    }
+
+    .shot-thumbnail {
+        width: 80px;
+        height: 50px;
+        border-radius: 4px;
+        overflow: hidden;
+        background: #f0f0f0;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .shot-content {
+        flex: 1;
+        min-width: 0;
+
+        .shot-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+
+            .shot-number {
+                font-size: 11px;
+                color: #666;
+                font-weight: 500;
+            }
+
+            .shot-duration {
+                font-size: 11px;
+                color: #666;
+                background: #f0f0f0;
+                padding: 2px 6px;
+                border-radius: 3px;
+            }
+        }
+
+        .shot-title {
+            font-size: 13px;
+            color: #333;
+            font-weight: 500;
+            line-height: 1.3;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
+// 视频合成列表样式
+.merges-list {
+  padding: 16px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
+
+  .merge-items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .merge-item {
+    position: relative;
+    background: #fff;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid transparent;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(64, 158, 255, 0.3);
+      border-color: rgba(64, 158, 255, 0.2);
+    }
+
+    .status-indicator {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      transition: all 0.3s;
+    }
+
+    &.merge-status-completed .status-indicator {
+      background: linear-gradient(to bottom, #67c23a, #85ce61);
+    }
+
+    &.merge-status-processing .status-indicator {
+      background: linear-gradient(to bottom, #e6a23c, #f0c78a);
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    &.merge-status-failed .status-indicator {
+      background: linear-gradient(to bottom, #f56c6c, #f89898);
+    }
+
+    &.merge-status-pending .status-indicator {
+      background: linear-gradient(to bottom, #909399, #b1b3b8);
+    }
+
+    .merge-content {
+      padding: 20px 24px;
+      padding-left: 28px;
+    }
+
+    .merge-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      padding-bottom: 14px;
+      border-bottom: 1px solid #f0f2f5;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex: 1;
+
+        .title-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 38px;
+          height: 38px;
+          border-radius: 10px;
+          background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
+          color: #606266;
+          transition: all 0.3s;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+        }
+
+        .merge-title {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          line-height: 1.4;
+        }
+      }
+
+      :deep(.el-tag) {
+        font-weight: 500;
+        padding: 4px 12px;
+        font-size: 12px;
+      }
+    }
+
+    &.merge-status-completed .title-icon {
+      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(103, 194, 58, 0.25);
+    }
+
+    &.merge-status-processing .title-icon {
+      background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.25);
+    }
+
+    &.merge-status-failed .title-icon {
+      background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
+      color: #fff;
+      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.25);
+    }
+
+    .merge-details {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 12px;
+      margin-bottom: 16px;
+
+      .detail-item {
+        display: flex;
+        gap: 10px;
+        padding: 12px 14px;
+        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
+        border-radius: 8px;
+        border: 1px solid transparent;
+        transition: all 0.3s;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+
+        &:hover {
+          background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+          border-color: rgba(64, 158, 255, 0.15);
+        }
+
+        .detail-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          border-radius: 6px;
+          background: #fff;
+          color: #409eff;
+          flex-shrink: 0;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+        }
+
+        .detail-content {
+          flex: 1;
+          min-width: 0;
+
+          .detail-label {
+            font-size: 11px;
+            color: #909399;
+            margin-bottom: 3px;
+            font-weight: 500;
+          }
+
+          .detail-value {
+            font-size: 13px;
+            color: #303133;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+
+    .merge-error {
+      margin-bottom: 12px;
+      
+      :deep(.el-alert) {
+        border-radius: 8px;
+        border: none;
+        box-shadow: 0 1px 4px rgba(245, 108, 108, 0.12);
+        padding: 8px 12px;
+        font-size: 12px;
+      }
+    }
+
+    .merge-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+
+      :deep(.el-button) {
+        flex: 1;
+        max-width: 160px;
+        font-weight: 500;
+        padding: 8px 15px;
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+// 旋转动画
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotating {
+  animation: rotating 2s linear infinite;
+}
+
+// 脉冲动画
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+// 白色主题样式
+.shot-editor-new {
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+  background: #fff;
+
+  .section-label {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 8px;
+  }
+
+  // 场景预览
+  .scene-section {
+    margin-bottom: 20px;
+  }
+
+  .scene-preview {
+    width: 100%;
+    height: 80px;
+    border-radius: 6px;
+    overflow: hidden;
+    position: relative;
+    background: #f5f5f5;
+    border: 1px solid #e0e0e0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .scene-info {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 6px 8px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+      font-size: 11px;
+      color: #fff;
+
+      .scene-id {
+        font-size: 10px;
+        color: #e0e0e0;
+        margin-top: 2px;
+      }
+    }
+  }
+
+  .scene-preview-empty {
+    width: 100%;
+    height: 80px;
+    border-radius: 6px;
+    border: 1px dashed #d0d0d0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background: #fafafa;
+
+    .el-icon {
+      font-size: 32px !important;
+      color: #c0c0c0;
+    }
+
+    div {
+      font-size: 11px;
+      color: #999;
+    }
+  }
+
+  // 角色列表
+  .cast-section {
+    margin-bottom: 20px;
+  }
+
+  .cast-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 8px;
+
+    .cast-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        .cast-avatar {
+          border-color: #409eff;
+        }
+
+        .cast-remove {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+
+      &.active {
+        .cast-avatar {
+          border-color: #409eff;
+          background: #409eff;
+        }
+      }
+
+      .cast-avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        border: 2px solid #e0e0e0;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f5f5f5;
+        font-size: 14px;
+        font-weight: 500;
+        color: #666;
+        transition: all 0.2s;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .cast-name {
+        font-size: 10px;
+        color: #666;
+        max-width: 36px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .cast-remove {
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #f56c6c;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        opacity: 0;
+        visibility: hidden;
+        font-size: 12px;
+
+        &:hover {
+          background: #f23030;
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .cast-empty {
+      width: 100%;
+      text-align: center;
+      padding: 15px;
+      color: #999;
+      font-size: 11px;
+    }
+  }
+
+  // 视效设置
+  .settings-section {
+    margin-bottom: 16px;
+
+    .settings-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 10px;
+
+      .setting-item {
+        label {
+          display: block;
+          font-size: 11px;
+          color: #666;
+          margin-bottom: 6px;
+        }
+      }
+    }
+
+    .audio-controls {
+      margin-top: 8px;
+    }
+  }
+
+  // 叙事内容
+  .narrative-section {
+    margin-bottom: 14px;
+  }
+
+  .dialogue-section {
+    margin-bottom: 14px;
+  }
+}
 
 // 场景选择对话框样式
 .scene-selector-grid {

web/src/views/generation/components/GenerateVideoDialog.vue

@@ -181,9 +181,6 @@ const rules: FormRules = {
   drama_id: [
     { required: true, message: '请选择剧本', trigger: 'change' }
   ],
-  image_url: [
-    { required: true, message: '请选择图片或输入图片 URL', trigger: 'blur' }
-  ],
   prompt: [
     { required: true, message: '请输入视频提示词', trigger: 'blur' },
     { min: 5, message: '提示词至少5个字符', trigger: 'blur' }
@@ -264,23 +261,46 @@ const truncateText = (text: string, length: number) => {
 }
 
 const handleGenerate = async () => {
-  if (!formRef.value) return
+  console.log('handleGenerate called')
+  
+  if (!formRef.value) {
+    console.error('formRef is null')
+    ElMessage.error('表单初始化失败，请刷新页面重试')
+    return
+  }
 
-  await formRef.value.validate(async (valid) => {
+  try {
-    if (!valid) return
+    const valid = await formRef.value.validate()
+    console.log('Form validation result:', valid)
+    
+    if (!valid) {
+      console.log('Form validation failed')
+      return
+    }
 
     generating.value = true
+    console.log('Starting video generation...', form)
+    
     try {
       if (form.image_gen_id) {
+        console.log('Generating from image:', form.image_gen_id)
         await videoAPI.generateFromImage(form.image_gen_id)
       } else {
         const params: GenerateVideoRequest = {
           drama_id: form.drama_id,
-          image_url: form.image_url,
           prompt: form.prompt,
           provider: form.provider
         }
 
+        // 判断参考图模式
+        if (form.image_url && form.image_url.trim()) {
+          params.image_url = form.image_url
+          params.reference_mode = 'single'
+        } else {
+          // 纯文本生成，无参考图
+          params.reference_mode = 'none'
+        }
+
         if (form.duration) params.duration = form.duration
         if (form.aspect_ratio) params.aspect_ratio = form.aspect_ratio
         if (form.motion_level !== undefined) params.motion_level = form.motion_level
@@ -288,6 +308,7 @@ const handleGenerate = async () => {
         if (form.style) params.style = form.style
         if (form.seed && form.seed > 0) params.seed = form.seed
 
+        console.log('Generating video with params:', params)
         await videoAPI.generateVideo(params)
       }
       
@@ -295,11 +316,15 @@ const handleGenerate = async () => {
       emit('success')
       handleClose()
     } catch (error: any) {
-      ElMessage.error(error.message || '生成失败')
+      console.error('Video generation failed:', error)
+      ElMessage.error(error.response?.data?.message || error.message || '生成失败')
     } finally {
       generating.value = false
     }
-  })
+  } catch (error: any) {
+    console.error('Form validation error:', error)
+    ElMessage.warning('请检查表单填写是否完整')
+  }
 }
 
 const handleClose = () => {