let5see/huobao-drama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改BUG

Browse Source
This commit is contained in:
Connor
2026-01-13 20:45:48 +08:00
parent 948d786f6e
commit 4d38357ff6
14 changed files with 998 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
api/handlers/character_library.go
View File

@@ -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,
}
}

5
api/handlers/image_generation.go
View File

@@ -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,
}
}

10
api/routes/routes.go
View File

@@ -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)
imageGenHandler := handlers2.NewImageGenerationHandler(db, cfg, log, nil)
localStoragePtr := localStorage.(*storage2.LocalStorage)
transferService := services2.NewResourceTransferService(db, log)
imageGenService := services2.NewImageGenerationService(db, transferService, localStoragePtr, log)
imageGenHandler := handlers2.NewImageGenerationHandler(db, cfg, log, transferService, localStoragePtr)
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)

22
application/services/image_generation_service.go
View File

@@ -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,

31
application/services/video_generation_service.go
View File

@@ -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,

80
infrastructure/storage/local_storage.go
View File

@@ -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"
}
}

8
pkg/video/volces_ark_client.go
View File

@@ -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 {
queryPath = string(bytes.ReplaceAll([]byte(queryPath), []byte("{taskId}"), []byte(taskID)))
if strings.Contains(queryPath, "{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
}

233
web/src/stores/episode.ts Normal file
View File

@@ -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
}
})

4
web/src/types/video.ts
View File

@@ -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 {

54
web/src/views/drama/DramaManagement.vue
View File

@@ -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
ElMessage.success('删除成功')
await ElMessageBox.confirm(
`确定要删除第${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 || '删除失败')
}
}
}

87
web/src/views/drama/ProfessionalEditor-storyboard-item.scss
View File

@@ -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;
}
}
}

444
web/src/views/drama/ProfessionalEditor-styles.scss
View File

@@ -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;
}
}

557
web/src/views/drama/ProfessionalEditor.vue
View File

@@ -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])
if (!selectedImage || !selectedImage.image_url) {
ElMessage.error('请选择有效的参考图片')
return
// 获取第一张选中的图片（仅在需要图片的模式下）
let selectedImage = null
if (selectedReferenceMode.value !== 'none' && selectedImagesForVideo.value.length > 0) {
selectedImage = videoReferenceImages.value.find(img => img.id === selectedImagesForVideo.value[0])
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 {

43
web/src/views/generation/components/GenerateVideoDialog.vue
View File

@@ -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) => {
if (!valid) return
try {
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 = () => {