2330 lines
70 KiB
Vue
2330 lines
70 KiB
Vue
<template>
|
||
<div class="page-container">
|
||
<div class="content-wrapper animate-fade-in">
|
||
<header class="page-header">
|
||
<div class="header-content">
|
||
<div class="header-left">
|
||
<button class="back-btn" @click="$router.back()">
|
||
<el-icon><ArrowLeft /></el-icon>
|
||
<span>{{ $t('workflow.backToProject') }}</span>
|
||
</button>
|
||
<div class="nav-divider"></div>
|
||
<h1 class="header-title">{{ $t('workflow.episodeProduction', { number: episodeNumber }) }}</h1>
|
||
</div>
|
||
<div class="header-center">
|
||
<div class="custom-steps">
|
||
<div class="step-item" :class="{ active: currentStep >= 0, current: currentStep === 0 }">
|
||
<div class="step-circle">1</div>
|
||
<span class="step-text">{{ $t('workflow.steps.content') }}</span>
|
||
</div>
|
||
<el-icon class="step-arrow"><ArrowRight /></el-icon>
|
||
<div class="step-item" :class="{ active: currentStep >= 1, current: currentStep === 1 }">
|
||
<div class="step-circle">2</div>
|
||
<span class="step-text">{{ $t('workflow.steps.generateImages') }}</span>
|
||
</div>
|
||
<el-icon class="step-arrow"><ArrowRight /></el-icon>
|
||
<div class="step-item" :class="{ active: currentStep >= 2, current: currentStep === 2 }">
|
||
<div class="step-circle">3</div>
|
||
<span class="step-text">{{ $t('workflow.steps.splitStoryboard') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<el-button :icon="Setting" circle @click="showModelConfigDialog" :title="$t('workflow.modelConfig')" />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 阶段 0: 章节内容 + 提取角色场景 -->
|
||
<el-card v-show="currentStep === 0" shadow="never" class="stage-card stage-card-fullscreen">
|
||
<div class="stage-body stage-body-fullscreen">
|
||
<!-- 未保存时显示输入框 -->
|
||
<div v-if="!hasScript" class="generation-form">
|
||
<el-input
|
||
v-model="scriptContent"
|
||
type="textarea"
|
||
:placeholder="$t('workflow.scriptPlaceholder')"
|
||
class="script-textarea script-textarea-fullscreen"
|
||
/>
|
||
|
||
<div class="action-buttons-inline">
|
||
<el-button
|
||
type="primary"
|
||
size="default"
|
||
@click="saveChapterScript"
|
||
:disabled="!scriptContent.trim() || generatingScript"
|
||
>
|
||
<el-icon><Check /></el-icon>
|
||
<span>{{ $t('workflow.saveChapter') }}</span>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已保存时显示内容 -->
|
||
<div v-if="hasScript" class="overview-section">
|
||
<div class="episode-info">
|
||
<h3>{{ $t('workflow.chapterContent', { number: episodeNumber }) }}</h3>
|
||
<el-tag type="success" size="large">{{ $t('workflow.saved') }}</el-tag>
|
||
</div>
|
||
<div class="overview-content">
|
||
<el-input
|
||
v-model="currentEpisode.script_content"
|
||
type="textarea"
|
||
:rows="15"
|
||
readonly
|
||
class="script-display"
|
||
/>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<!-- 显示已提取的角色和场景 -->
|
||
<div v-if="hasExtractedData" class="extracted-info">
|
||
<el-alert
|
||
type="success"
|
||
:closable="false"
|
||
style="margin-bottom: 16px;"
|
||
>
|
||
<template #title>
|
||
<div style="display: flex; align-items: center; gap: 16px;">
|
||
<span>✅ {{ $t('workflow.extractedData') }}</span>
|
||
<el-tag v-if="hasCharacters" type="success">{{ $t('workflow.characters') }}: {{ charactersCount }}</el-tag>
|
||
<el-tag v-if="currentEpisode?.scenes" type="success">{{ $t('workflow.scenes') }}: {{ currentEpisode.scenes.length }}</el-tag>
|
||
</div>
|
||
</template>
|
||
</el-alert>
|
||
|
||
<!-- 角色列表 -->
|
||
<div v-if="hasCharacters" style="margin-bottom: 16px;">
|
||
<h4 class="extracted-title">{{ $t('workflow.extractedCharacters') }}：</h4>
|
||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||
<el-tag
|
||
v-for="char in currentEpisode?.characters"
|
||
:key="char.id"
|
||
type="info"
|
||
>
|
||
{{ char.name }} <span v-if="char.role" class="secondary-text">({{ char.role }})</span>
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景列表 -->
|
||
<div v-if="currentEpisode?.scenes && currentEpisode.scenes.length > 0">
|
||
<h4 class="extracted-title">{{ $t('workflow.extractedScenes') }}：</h4>
|
||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||
<el-tag
|
||
v-for="scene in currentEpisode.scenes"
|
||
:key="scene.id"
|
||
type="warning"
|
||
>
|
||
{{ scene.location }} <span class="secondary-text">· {{ scene.time }}</span>
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<div class="action-buttons">
|
||
<el-button
|
||
type="primary"
|
||
size="large"
|
||
@click="handleExtractCharactersAndBackgrounds"
|
||
:loading="extractingCharactersAndBackgrounds"
|
||
:disabled="!hasScript"
|
||
>
|
||
<el-icon><MagicStick /></el-icon>
|
||
{{ hasExtractedData ? $t('workflow.reExtract') : $t('workflow.extractCharactersAndScenes') }}
|
||
</el-button>
|
||
<el-button
|
||
type="success"
|
||
size="large"
|
||
@click="nextStep"
|
||
:disabled="!hasExtractedData"
|
||
>
|
||
{{ $t('workflow.nextStepGenerateImages') }}
|
||
<el-icon><ArrowRight /></el-icon>
|
||
</el-button>
|
||
<div v-if="!hasExtractedData" style="margin-top: 8px;">
|
||
<el-alert type="warning" :closable="false" style="display: inline-block;">
|
||
<template #title>
|
||
<span style="font-size: 12px;">
|
||
{{ $t('workflow.extractWarning') }}
|
||
</span>
|
||
</template>
|
||
</el-alert>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 阶段 1: 生成图片 -->
|
||
<el-card v-show="currentStep === 1" class="workflow-card">
|
||
<div class="stage-body">
|
||
<!-- 角色图片生成 -->
|
||
<div class="image-gen-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<h3>
|
||
<el-icon><User /></el-icon>
|
||
{{ $t('workflow.characterImages') }}
|
||
</h3>
|
||
<el-alert
|
||
type="info"
|
||
:closable="false"
|
||
style="margin: 0;"
|
||
>
|
||
{{ $t('workflow.characterCount', { count: charactersCount }) }}
|
||
</el-alert>
|
||
</div>
|
||
<div class="section-actions">
|
||
<el-checkbox
|
||
v-model="selectAllCharacters"
|
||
@change="toggleSelectAllCharacters"
|
||
style="margin-right: 12px;"
|
||
>
|
||
{{ $t('workflow.selectAll') }}
|
||
</el-checkbox>
|
||
<el-button
|
||
type="primary"
|
||
@click="batchGenerateCharacterImages"
|
||
:loading="batchGeneratingCharacters"
|
||
:disabled="selectedCharacterIds.length === 0"
|
||
size="default"
|
||
>
|
||
{{ $t('workflow.batchGenerate') }} ({{ selectedCharacterIds.length }})
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="character-image-list">
|
||
<div v-for="char in currentEpisode?.characters" :key="char.id" class="character-item">
|
||
<el-card shadow="hover" class="fixed-card">
|
||
<div class="card-header">
|
||
<el-checkbox
|
||
v-model="selectedCharacterIds"
|
||
:value="char.id"
|
||
style="margin-right: 8px;"
|
||
/>
|
||
<div class="header-left">
|
||
<h4>{{ char.name }}</h4>
|
||
<el-tag size="small">{{ char.role }}</el-tag>
|
||
</div>
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
:icon="Delete"
|
||
circle
|
||
@click="deleteCharacter(char.id)"
|
||
:title="$t('workflow.deleteCharacter')"
|
||
/>
|
||
</div>
|
||
|
||
<div class="card-image-container">
|
||
<div v-if="char.image_url" class="char-image">
|
||
<el-image :src="char.image_url" fit="cover" />
|
||
</div>
|
||
<div v-else-if="char.image_generation_status === 'pending' || char.image_generation_status === 'processing' || generatingCharacterImages[char.id]" class="char-placeholder generating">
|
||
<el-icon :size="64" class="rotating"><Loading /></el-icon>
|
||
<span>{{ $t('common.generating') }}</span>
|
||
<el-tag type="warning" size="small" style="margin-top: 8px;">{{ char.image_generation_status === 'pending' ? $t('common.queuing') : $t('common.processing') }}</el-tag>
|
||
</div>
|
||
<div v-else-if="char.image_generation_status === 'failed'" class="char-placeholder failed">
|
||
<el-icon :size="64"><WarningFilled /></el-icon>
|
||
<span>{{ $t('common.generateFailed') }}</span>
|
||
<el-tag type="danger" size="small" style="margin-top: 8px;">{{ $t('common.clickToRegenerate') }}</el-tag>
|
||
</div>
|
||
<div v-else class="char-placeholder">
|
||
<el-icon :size="64"><User /></el-icon>
|
||
<span>{{ $t('common.notGenerated') }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-actions">
|
||
<el-tooltip :content="$t('tooltip.editPrompt')" placement="top">
|
||
<el-button
|
||
size="small"
|
||
@click="openPromptDialog(char, 'character')"
|
||
:icon="Edit"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip :content="$t('tooltip.aiGenerate')" placement="top">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="generateCharacterImage(char.id)"
|
||
:loading="generatingCharacterImages[char.id]"
|
||
:icon="MagicStick"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip :content="$t('tooltip.uploadImage')" placement="top">
|
||
<el-button
|
||
size="small"
|
||
@click="uploadCharacterImage(char.id)"
|
||
:icon="Upload"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip :content="$t('tooltip.selectFromLibrary')" placement="top">
|
||
<el-button
|
||
size="small"
|
||
@click="selectFromLibrary(char.id)"
|
||
:icon="Picture"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip :content="$t('workflow.addToLibrary')" placement="top">
|
||
<el-button
|
||
size="small"
|
||
@click="addToCharacterLibrary(char)"
|
||
:icon="FolderAdd"
|
||
:disabled="!char.image_url"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<!-- 场景图片生成 -->
|
||
<div class="image-gen-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<h3>
|
||
<el-icon><Place /></el-icon>
|
||
{{ $t('workflow.sceneImages') }}
|
||
</h3>
|
||
<el-alert
|
||
type="info"
|
||
:closable="false"
|
||
style="margin: 0;"
|
||
>
|
||
{{ $t('workflow.sceneCount', { count: drama?.scenes?.length || 0 }) }}
|
||
</el-alert>
|
||
</div>
|
||
<div class="section-actions">
|
||
<el-checkbox
|
||
v-model="selectAllScenes"
|
||
@change="toggleSelectAllScenes"
|
||
style="margin-right: 12px;"
|
||
>
|
||
{{ $t('workflow.selectAll') }}
|
||
</el-checkbox>
|
||
<el-button
|
||
type="primary"
|
||
@click="batchGenerateSceneImages"
|
||
:loading="batchGeneratingScenes"
|
||
:disabled="selectedSceneIds.length === 0"
|
||
size="default"
|
||
>
|
||
{{ $t('workflow.batchGenerateSelected') }} ({{ selectedSceneIds.length }})
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scene-image-list">
|
||
<div v-for="scene in currentEpisode?.scenes" :key="scene.id" class="scene-item">
|
||
<el-card shadow="hover" class="fixed-card">
|
||
<div class="card-header">
|
||
<el-checkbox
|
||
v-model="selectedSceneIds"
|
||
:value="scene.id"
|
||
style="margin-right: 8px;"
|
||
/>
|
||
<div class="header-left">
|
||
<h4>{{ scene.location }}</h4>
|
||
<el-tag size="small">{{ scene.time }}</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-image-container">
|
||
<div v-if="scene.image_url" class="scene-image">
|
||
<el-image :src="scene.image_url" fit="cover" />
|
||
</div>
|
||
<div v-else-if="scene.image_generation_status === 'pending' || scene.image_generation_status === 'processing' || generatingSceneImages[scene.id]" class="scene-placeholder generating">
|
||
<el-icon :size="64" class="rotating"><Loading /></el-icon>
|
||
<span>{{ $t('common.generating') }}</span>
|
||
<el-tag type="warning" size="small" style="margin-top: 8px;">{{ scene.image_generation_status === 'pending' ? $t('common.queuing') : $t('common.processing') }}</el-tag>
|
||
</div>
|
||
<div v-else-if="scene.image_generation_status === 'failed'" class="scene-placeholder failed" @click="generateSceneImage(scene.id)" style="cursor: pointer;">
|
||
<el-icon :size="64"><WarningFilled /></el-icon>
|
||
<span>{{ $t('common.generateFailed') }}</span>
|
||
<el-tag type="danger" size="small" style="margin-top: 8px;">{{ $t('common.clickToRegenerate') }}</el-tag>
|
||
</div>
|
||
<div v-else class="scene-placeholder">
|
||
<el-icon :size="64"><Place /></el-icon>
|
||
<span>{{ $t('common.notGenerated') }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-actions">
|
||
<el-tooltip :content="$t('tooltip.editPrompt')" placement="top">
|
||
<el-button
|
||
size="small"
|
||
@click="openPromptDialog(scene, 'scene')"
|
||
:icon="Edit"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip :content="$t('tooltip.aiGenerate')" placement="top">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="generateSceneImage(scene.id)"
|
||
:loading="generatingSceneImages[scene.id]"
|
||
:icon="MagicStick"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
<el-tooltip :content="$t('tooltip.uploadImage')" placement="top">
|
||
<el-button
|
||
size="small"
|
||
@click="uploadSceneImage(scene.id)"
|
||
:icon="Upload"
|
||
circle
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<div class="action-buttons">
|
||
<el-button size="large" @click="prevStep">
|
||
<el-icon><ArrowLeft /></el-icon>
|
||
{{ $t('workflow.prevStep') }}
|
||
</el-button>
|
||
<el-button
|
||
type="success"
|
||
size="large"
|
||
@click="nextStep"
|
||
:disabled="!allImagesGenerated"
|
||
>
|
||
{{ $t('workflow.nextStepSplitShots') }}
|
||
<el-icon><ArrowRight /></el-icon>
|
||
</el-button>
|
||
<div v-if="!allImagesGenerated" style="margin-top: 8px;">
|
||
<el-alert type="warning" :closable="false" style="display: inline-block;">
|
||
<template #title>
|
||
<span style="font-size: 12px;">
|
||
{{ $t('workflow.generateAllImagesFirst') }}
|
||
</span>
|
||
</template>
|
||
</el-alert>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 阶段 2: 拆分分镜 -->
|
||
<el-card v-show="currentStep === 2" shadow="never" class="stage-card">
|
||
<div class="stage-body">
|
||
<!-- 分镜列表 -->
|
||
<div v-if="currentEpisode?.storyboards && currentEpisode.storyboards.length > 0" class="shots-list">
|
||
<div class="shots-header">
|
||
<h3>{{ $t('workflow.shotList') }}</h3>
|
||
</div>
|
||
|
||
<el-table :data="currentEpisode.storyboards" border stripe style="margin-top: 16px;">
|
||
<el-table-column type="index" :label="$t('storyboard.table.number')" width="60" />
|
||
<el-table-column :label="$t('storyboard.table.title')" width="120" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
{{ row.title || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.shotType')" width="80">
|
||
<template #default="{ row }">
|
||
{{ row.shot_type || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.movement')" width="80">
|
||
<template #default="{ row }">
|
||
{{ row.movement || '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.location')" width="150">
|
||
<template #default="{ row }">
|
||
<el-popover
|
||
placement="right"
|
||
:width="300"
|
||
trigger="hover"
|
||
:content="row.action || '-'"
|
||
>
|
||
<template #reference>
|
||
<!-- 单行打点 -->
|
||
<span class="overflow-tooltip">{{ row.location || '-' }}</span>
|
||
</template>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.character')" width="100">
|
||
<template #default="{ row }">
|
||
<span v-if="row.characters && row.characters.length > 0">
|
||
{{ row.characters.map(c => c.name || c).join(', ') }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.action')">
|
||
<template #default="{ row }">
|
||
<el-popover
|
||
placement="right"
|
||
:width="300"
|
||
trigger="hover"
|
||
:content="row.action || '-'"
|
||
>
|
||
<template #reference>
|
||
<!-- 单行打点 -->
|
||
<span class="overflow-tooltip">{{ row.action || '-' }}</span>
|
||
</template>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.duration')" width="80">
|
||
<template #default="{ row }">
|
||
{{ row.duration || '-' }}秒
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('storyboard.table.operations')" width="100" fixed="right">
|
||
<template #default="{ row, $index }">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="editShot(row, $index)"
|
||
>
|
||
{{ $t('common.edit') }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="action-buttons" style="margin-top: 24px;">
|
||
<el-button size="large" @click="prevStep">
|
||
<el-icon><ArrowLeft /></el-icon>
|
||
{{ $t('workflow.prevStep') }}
|
||
</el-button>
|
||
<el-button
|
||
@click="regenerateShots"
|
||
:icon="MagicStick"
|
||
>
|
||
{{ $t('workflow.reSplitShots') }}
|
||
</el-button>
|
||
<el-button
|
||
type="success"
|
||
size="large"
|
||
@click="goToProfessionalUI"
|
||
>
|
||
{{ $t('workflow.enterProfessional') }}
|
||
<el-icon><ArrowRight /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 未拆分时显示 -->
|
||
<div v-else class="empty-shots">
|
||
<el-empty :description="$t('workflow.splitStoryboardFirst')">
|
||
<el-button
|
||
type="primary"
|
||
@click="generateShots"
|
||
:loading="generatingShots"
|
||
:icon="MagicStick"
|
||
>
|
||
{{ generatingShots ? $t('workflow.aiSplitting') : $t('workflow.aiAutoSplit') }}
|
||
</el-button>
|
||
|
||
<!-- 任务进度显示 -->
|
||
<div v-if="generatingShots" style="margin-top: 24px; max-width: 400px; margin-left: auto; margin-right: auto;">
|
||
<el-progress :percentage="taskProgress" :status="taskProgress === 100 ? 'success' : undefined">
|
||
<template #default="{ percentage }">
|
||
<span style="font-size: 12px;">{{ percentage }}%</span>
|
||
</template>
|
||
</el-progress>
|
||
<div class="task-message">
|
||
{{ taskMessage }}
|
||
</div>
|
||
</div>
|
||
</el-empty>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 阶段 3: 专业制作（占位，实际跳转到专业UI页面） -->
|
||
|
||
<!-- 镜头编辑对话框 -->
|
||
<el-dialog
|
||
v-model="shotEditDialogVisible"
|
||
:title="$t('workflow.editShot')"
|
||
width="800px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form v-if="editingShot" label-width="100px" size="default">
|
||
<el-form-item :label="$t('workflow.shotTitle')">
|
||
<el-input v-model="editingShot.title" :placeholder="$t('workflow.shotTitlePlaceholder')" />
|
||
</el-form-item>
|
||
|
||
<el-row :gutter="16">
|
||
<el-col :span="8">
|
||
<el-form-item :label="$t('workflow.shotType')">
|
||
<el-select v-model="editingShot.shot_type" :placeholder="$t('workflow.selectShotType')">
|
||
<el-option :label="$t('workflow.longShot')" value="远景" />
|
||
<el-option :label="$t('workflow.fullShot')" value="全景" />
|
||
<el-option :label="$t('workflow.mediumShot')" value="中景" />
|
||
<el-option :label="$t('workflow.closeUp')" value="近景" />
|
||
<el-option :label="$t('workflow.extremeCloseUp')" value="特写" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item :label="$t('workflow.cameraAngle')">
|
||
<el-select v-model="editingShot.angle" :placeholder="$t('workflow.selectAngle')">
|
||
<el-option :label="$t('workflow.eyeLevel')" value="平视" />
|
||
<el-option :label="$t('workflow.lowAngle')" value="仰视" />
|
||
<el-option :label="$t('workflow.highAngle')" value="俯视" />
|
||
<el-option :label="$t('workflow.sideView')" value="侧面" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item :label="$t('workflow.cameraMovement')">
|
||
<el-select v-model="editingShot.movement" :placeholder="$t('workflow.selectMovement')">
|
||
<el-option :label="$t('workflow.staticShot')" value="固定镜头" />
|
||
<el-option :label="$t('workflow.pushIn')" value="推镜" />
|
||
<el-option :label="$t('workflow.pullOut')" value="拉镜" />
|
||
<el-option :label="$t('workflow.followShot')" value="跟镜" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-form-item :label="$t('workflow.location')">
|
||
<el-input v-model="editingShot.location" :placeholder="$t('workflow.locationPlaceholder')" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item :label="$t('workflow.time')">
|
||
<el-input v-model="editingShot.time" :placeholder="$t('workflow.timeSetting')" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-form-item :label="$t('workflow.shotDescription')">
|
||
<el-input v-model="editingShot.description" type="textarea" :rows="2" :placeholder="$t('workflow.shotDescriptionPlaceholder')" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.actionDescription')">
|
||
<el-input v-model="editingShot.action" type="textarea" :rows="3" :placeholder="$t('workflow.detailedAction')" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.dialogue')">
|
||
<el-input v-model="editingShot.dialogue" type="textarea" :rows="2" :placeholder="$t('workflow.characterDialogue')" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.result')">
|
||
<el-input v-model="editingShot.result" type="textarea" :rows="2" :placeholder="$t('workflow.actionResult')" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.atmosphere')">
|
||
<el-input v-model="editingShot.atmosphere" type="textarea" :rows="2" :placeholder="$t('workflow.atmosphereDescription')" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.imagePrompt')">
|
||
<el-input v-model="editingShot.image_prompt" type="textarea" :rows="3" :placeholder="$t('workflow.imagePromptPlaceholder')" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.videoPrompt')">
|
||
<el-input v-model="editingShot.video_prompt" type="textarea" :rows="3" :placeholder="$t('workflow.videoPromptPlaceholder')" />
|
||
</el-form-item>
|
||
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-form-item :label="$t('workflow.bgmHint')">
|
||
<el-input v-model="editingShot.bgm_prompt" :placeholder="$t('workflow.bgmAtmosphere')" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item :label="$t('workflow.soundEffect')">
|
||
<el-input v-model="editingShot.sound_effect" :placeholder="$t('workflow.soundEffectDescription')" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-form-item :label="$t('workflow.durationSeconds')">
|
||
<el-input-number v-model="editingShot.duration" :min="1" :max="60" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="shotEditDialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
||
<el-button type="primary" @click="saveShotEdit" :loading="savingShot">{{ $t('common.save') }}</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 提示词编辑对话框 -->
|
||
<el-dialog
|
||
v-model="promptDialogVisible"
|
||
:title="$t('workflow.editPrompt')"
|
||
width="600px"
|
||
>
|
||
<el-form label-width="80px">
|
||
<el-form-item :label="$t('common.name')">
|
||
<el-input v-model="currentEditItem.name" disabled />
|
||
</el-form-item>
|
||
<el-form-item :label="$t('workflow.imagePrompt')">
|
||
<el-input
|
||
v-model="editPrompt"
|
||
type="textarea"
|
||
:rows="6"
|
||
:placeholder="$t('workflow.imagePromptPlaceholder')"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="promptDialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
||
<el-button type="primary" @click="savePrompt">{{ $t('common.saveAndGenerate') }}</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 角色库选择对话框 -->
|
||
<el-dialog
|
||
v-model="libraryDialogVisible"
|
||
:title="$t('workflow.selectFromLibrary')"
|
||
width="800px"
|
||
>
|
||
<div class="library-grid">
|
||
<div
|
||
v-for="item in libraryItems"
|
||
:key="item.id"
|
||
class="library-item"
|
||
@click="selectLibraryItem(item)"
|
||
>
|
||
<el-image :src="item.image_url" fit="cover" />
|
||
<div class="library-item-name">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="libraryItems.length === 0" class="empty-library">
|
||
<el-empty :description="$t('workflow.emptyLibrary')" />
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- AI模型配置对话框 -->
|
||
<el-dialog
|
||
v-model="modelConfigDialogVisible"
|
||
:title="$t('workflow.aiModelConfig')"
|
||
width="600px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form label-width="120px">
|
||
<el-form-item :label="$t('workflow.textGenModel')">
|
||
<el-select v-model="selectedTextModel" :placeholder="$t('workflow.selectTextModel')" style="width: 100%">
|
||
<el-option
|
||
v-for="model in textModels"
|
||
:key="model.modelName"
|
||
:label="model.modelName"
|
||
:value="model.modelName"
|
||
/>
|
||
</el-select>
|
||
<div class="model-tip">
|
||
{{ $t('workflow.textModelTip') }}
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="$t('workflow.imageGenModel')">
|
||
<el-select v-model="selectedImageModel" :placeholder="$t('workflow.selectImageModel')" style="width: 100%">
|
||
<el-option
|
||
v-for="model in imageModels"
|
||
:key="model.modelName"
|
||
:label="model.modelName"
|
||
:value="model.modelName"
|
||
/>
|
||
</el-select>
|
||
<div class="model-tip">
|
||
{{ $t('workflow.modelConfigTip') }}
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="modelConfigDialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
||
<el-button type="primary" @click="saveModelConfig">{{ $t('common.saveConfig') }}</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 图片上传对话框 -->
|
||
<el-dialog
|
||
v-model="uploadDialogVisible"
|
||
:title="$t('tooltip.uploadImage')"
|
||
width="500px"
|
||
>
|
||
<el-upload
|
||
class="upload-area"
|
||
drag
|
||
:action="uploadAction"
|
||
:headers="uploadHeaders"
|
||
:on-success="handleUploadSuccess"
|
||
:on-error="handleUploadError"
|
||
:show-file-list="false"
|
||
accept="image/jpeg,image/png,image/jpg"
|
||
>
|
||
<el-icon class="el-icon--upload"><Upload /></el-icon>
|
||
<div class="el-upload__text">
|
||
{{ $t('workflow.dragFilesHere') }}<em>{{ $t('workflow.clickToUpload') }}</em>
|
||
</div>
|
||
<template #tip>
|
||
<div class="el-upload__tip">
|
||
{{ $t('workflow.uploadFormatTip') }}
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import {
|
||
User,
|
||
Location,
|
||
Picture,
|
||
MagicStick,
|
||
ArrowRight,
|
||
ArrowLeft,
|
||
Place,
|
||
Film,
|
||
Edit,
|
||
More,
|
||
Upload,
|
||
Delete,
|
||
FolderAdd,
|
||
Setting,
|
||
Loading,
|
||
WarningFilled
|
||
} from '@element-plus/icons-vue'
|
||
import { dramaAPI } from '@/api/drama'
|
||
import { generationAPI } from '@/api/generation'
|
||
import { characterLibraryAPI } from '@/api/character-library'
|
||
import { aiAPI } from '@/api/ai'
|
||
import type { AIServiceConfig } from '@/types/ai'
|
||
import { imageAPI } from '@/api/image'
|
||
import type { Drama } from '@/types/drama'
|
||
import PageHeader from '@/components/common/PageHeader.vue'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const { t: $t } = useI18n()
|
||
const dramaId = route.params.id as string
|
||
const episodeNumber = parseInt(route.params.episodeNumber as string)
|
||
|
||
const drama = ref<Drama>()
|
||
|
||
// 生成 localStorage key
|
||
const getStepStorageKey = () => `episode_workflow_step_${dramaId}_${episodeNumber}`
|
||
|
||
// 从 localStorage 恢复步骤，如果没有则默认为 0
|
||
const savedStep = localStorage.getItem(getStepStorageKey())
|
||
const currentStep = ref(savedStep ? parseInt(savedStep) : 0)
|
||
const scriptContent = ref('')
|
||
const generatingScript = ref(false)
|
||
const generatingShots = ref(false)
|
||
const extractingCharactersAndBackgrounds = ref(false)
|
||
const batchGeneratingCharacters = ref(false)
|
||
const batchGeneratingScenes = ref(false)
|
||
const generatingCharacterImages = ref<Record<number, boolean>>({})
|
||
const generatingSceneImages = ref<Record<string, boolean>>({})
|
||
|
||
// 选择状态
|
||
const selectedCharacterIds = ref<number[]>([])
|
||
const selectedSceneIds = ref<number[]>([])
|
||
const selectAllCharacters = ref(false)
|
||
const selectAllScenes = ref(false)
|
||
|
||
// 对话框状态
|
||
const promptDialogVisible = ref(false)
|
||
const libraryDialogVisible = ref(false)
|
||
const uploadDialogVisible = ref(false)
|
||
const modelConfigDialogVisible = ref(false)
|
||
const currentEditItem = ref<any>({ name: '' })
|
||
const currentEditType = ref<'character' | 'scene'>('character')
|
||
const editPrompt = ref('')
|
||
const libraryItems = ref<any[]>([])
|
||
const currentUploadTarget = ref<any>(null)
|
||
const uploadAction = computed(() => '/api/v1/upload/image')
|
||
const uploadHeaders = computed(() => ({
|
||
Authorization: `Bearer ${localStorage.getItem('token')}`
|
||
}))
|
||
|
||
// AI模型配置
|
||
interface ModelOption {
|
||
modelName: string
|
||
configName: string
|
||
configId: number
|
||
priority: number
|
||
}
|
||
|
||
const textModels = ref<ModelOption[]>([])
|
||
const imageModels = ref<ModelOption[]>([])
|
||
const selectedTextModel = ref<string>('')
|
||
const selectedImageModel = ref<string>('')
|
||
|
||
const hasScript = computed(() => {
|
||
const currentEp = currentEpisode.value
|
||
return currentEp && currentEp.script_content && currentEp.script_content.length > 0
|
||
})
|
||
|
||
const currentEpisode = computed(() => {
|
||
if (!drama.value?.episodes) return null
|
||
return drama.value.episodes.find(
|
||
ep => ep.episode_number === episodeNumber
|
||
)
|
||
})
|
||
|
||
const hasCharacters = computed(() => {
|
||
return currentEpisode.value?.characters && currentEpisode.value.characters.length > 0
|
||
})
|
||
|
||
const charactersCount = computed(() => {
|
||
return currentEpisode.value?.characters?.length || 0
|
||
})
|
||
|
||
const hasExtractedData = computed(() => {
|
||
const hasScenes = currentEpisode.value?.scenes && currentEpisode.value.scenes.length > 0
|
||
// 只要有角色或场景，就认为已经提取过数据
|
||
return hasCharacters.value || hasScenes
|
||
})
|
||
|
||
const allImagesGenerated = computed(() => {
|
||
// 如果没有提取任何数据，允许跳过（可能是空章节或用户想直接进入拆解分镜）
|
||
if (!hasExtractedData.value) return true
|
||
|
||
const characters = currentEpisode.value?.characters || []
|
||
const scenes = currentEpisode.value?.scenes || []
|
||
|
||
// 如果角色和场景都为空，允许跳过
|
||
if (characters.length === 0 && scenes.length === 0) return true
|
||
|
||
// 检查所有有数据的项是否都已生成图片
|
||
const allCharsHaveImages = characters.length === 0 || characters.every(char => char.image_url)
|
||
const allScenesHaveImages = scenes.length === 0 || scenes.every(scene => scene.image_url)
|
||
|
||
return allCharsHaveImages && allScenesHaveImages
|
||
})
|
||
|
||
const goBack = () => {
|
||
// 使用 replace 避免在历史记录中留下当前页面
|
||
router.replace(`/dramas/${dramaId}`)
|
||
}
|
||
|
||
// 加载AI模型配置
|
||
const loadAIConfigs = async () => {
|
||
try {
|
||
const [textList, imageList] = await Promise.all([
|
||
aiAPI.list('text'),
|
||
aiAPI.list('image')
|
||
])
|
||
|
||
// 展开模型列表并去重（保留优先级最高的）
|
||
const allTextModels = textList.flatMap(config => {
|
||
const models = Array.isArray(config.model) ? config.model : [config.model]
|
||
return models.map(modelName => ({
|
||
modelName,
|
||
configName: config.name,
|
||
configId: config.id,
|
||
priority: config.priority || 0
|
||
}))
|
||
}).sort((a, b) => b.priority - a.priority)
|
||
|
||
// 按模型名称去重，保留优先级最高的（已排序，第一个就是优先级最高的）
|
||
const textModelMap = new Map<string, ModelOption>()
|
||
allTextModels.forEach(model => {
|
||
if (!textModelMap.has(model.modelName)) {
|
||
textModelMap.set(model.modelName, model)
|
||
}
|
||
})
|
||
textModels.value = Array.from(textModelMap.values())
|
||
|
||
const allImageModels = imageList.flatMap(config => {
|
||
const models = Array.isArray(config.model) ? config.model : [config.model]
|
||
return models.map(modelName => ({
|
||
modelName,
|
||
configName: config.name,
|
||
configId: config.id,
|
||
priority: config.priority || 0
|
||
}))
|
||
}).sort((a, b) => b.priority - a.priority)
|
||
|
||
// 按模型名称去重，保留优先级最高的
|
||
const imageModelMap = new Map<string, ModelOption>()
|
||
allImageModels.forEach(model => {
|
||
if (!imageModelMap.has(model.modelName)) {
|
||
imageModelMap.set(model.modelName, model)
|
||
}
|
||
})
|
||
imageModels.value = Array.from(imageModelMap.values())
|
||
|
||
// 设置默认选择（优先级最高的）
|
||
if (textModels.value.length > 0 && !selectedTextModel.value) {
|
||
selectedTextModel.value = textModels.value[0].modelName
|
||
}
|
||
if (imageModels.value.length > 0 && !selectedImageModel.value) {
|
||
selectedImageModel.value = imageModels.value[0].modelName
|
||
}
|
||
} catch (error: any) {
|
||
console.error('加载AI配置失败:', error)
|
||
}
|
||
}
|
||
|
||
// 显示模型配置对话框
|
||
const showModelConfigDialog = () => {
|
||
modelConfigDialogVisible.value = true
|
||
loadAIConfigs()
|
||
}
|
||
|
||
// 保存模型配置
|
||
const saveModelConfig = () => {
|
||
if (!selectedTextModel.value || !selectedImageModel.value) {
|
||
ElMessage.warning($t('workflow.pleaseSelectModels'))
|
||
return
|
||
}
|
||
|
||
// 保存模型名称到localStorage
|
||
localStorage.setItem(`ai_text_model_${dramaId}`, selectedTextModel.value)
|
||
localStorage.setItem(`ai_image_model_${dramaId}`, selectedImageModel.value)
|
||
|
||
ElMessage.success($t('workflow.modelConfigSaved'))
|
||
modelConfigDialogVisible.value = false
|
||
}
|
||
|
||
const nextStep = () => {
|
||
if (currentStep.value < 3) {
|
||
currentStep.value++
|
||
}
|
||
}
|
||
|
||
const prevStep = () => {
|
||
if (currentStep.value > 0) {
|
||
currentStep.value--
|
||
}
|
||
}
|
||
|
||
// 从localStorage加载已保存的模型配置
|
||
const loadSavedModelConfig = () => {
|
||
const savedTextModel = localStorage.getItem(`ai_text_model_${dramaId}`)
|
||
const savedImageModel = localStorage.getItem(`ai_image_model_${dramaId}`)
|
||
|
||
if (savedTextModel) {
|
||
selectedTextModel.value = savedTextModel
|
||
}
|
||
if (savedImageModel) {
|
||
selectedImageModel.value = savedImageModel
|
||
}
|
||
}
|
||
|
||
const loadDramaData = async () => {
|
||
try {
|
||
const data = await dramaAPI.get(dramaId)
|
||
drama.value = data
|
||
|
||
if (!hasScript.value) {
|
||
scriptContent.value = ''
|
||
// 如果没有剧本内容，重置到第一步
|
||
currentStep.value = 0
|
||
}
|
||
|
||
// 检查是否有生成中的角色或场景，自动启动轮询
|
||
await checkAndStartPolling()
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '加载项目数据失败')
|
||
}
|
||
}
|
||
|
||
// 检查并启动轮询
|
||
const checkAndStartPolling = async () => {
|
||
if (!currentEpisode.value) return
|
||
|
||
// 检查角色的生成状态
|
||
for (const char of currentEpisode.value.characters || []) {
|
||
if (char.image_generation_status === 'pending' || char.image_generation_status === 'processing') {
|
||
// 查找对应的image_generation记录
|
||
try {
|
||
const imageGenList = await imageAPI.listImages({
|
||
drama_id: dramaId,
|
||
status: char.image_generation_status as any
|
||
})
|
||
|
||
// 找到这个角色的image_generation记录
|
||
const charImageGen = imageGenList.items.find(img =>
|
||
img.character_id === char.id && (img.status === 'pending' || img.status === 'processing')
|
||
)
|
||
|
||
if (charImageGen) {
|
||
// 启动轮询
|
||
generatingCharacterImages.value[char.id] = true
|
||
pollImageStatus(charImageGen.id, async () => {
|
||
await loadDramaData()
|
||
ElMessage.success(`${char.name}的图片生成完成！`)
|
||
}).finally(() => {
|
||
generatingCharacterImages.value[char.id] = false
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('[轮询] 查询角色图片生成记录失败:', error)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 检查场景的生成状态
|
||
for (const scene of currentEpisode.value.scenes || []) {
|
||
if (scene.image_generation_status === 'pending' || scene.image_generation_status === 'processing') {
|
||
// 查找对应的image_generation记录
|
||
try {
|
||
const imageGenList = await imageAPI.listImages({
|
||
drama_id: dramaId,
|
||
status: scene.image_generation_status as any
|
||
})
|
||
|
||
// 找到这个场景的image_generation记录
|
||
const sceneImageGen = imageGenList.items.find(img =>
|
||
img.scene_id === scene.id && (img.status === 'pending' || img.status === 'processing')
|
||
)
|
||
|
||
if (sceneImageGen) {
|
||
// 启动轮询
|
||
generatingSceneImages.value[scene.id] = true
|
||
pollImageStatus(sceneImageGen.id, async () => {
|
||
await loadDramaData()
|
||
ElMessage.success(`${scene.location}的图片生成完成！`)
|
||
}).finally(() => {
|
||
generatingSceneImages.value[scene.id] = false
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('[轮询] 查询场景图片生成记录失败:', error)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const saveChapterScript = async () => {
|
||
try {
|
||
const existingEpisodes = drama.value?.episodes || []
|
||
|
||
// 查找当前章节
|
||
const episodeIndex = existingEpisodes.findIndex(
|
||
ep => ep.episode_number === episodeNumber
|
||
)
|
||
|
||
let updatedEpisodes
|
||
if (episodeIndex >= 0) {
|
||
// 更新已有章节
|
||
updatedEpisodes = [...existingEpisodes]
|
||
updatedEpisodes[episodeIndex] = {
|
||
...updatedEpisodes[episodeIndex],
|
||
script_content: scriptContent.value
|
||
}
|
||
} else {
|
||
// 创建新章节
|
||
const newEpisode = {
|
||
episode_number: episodeNumber,
|
||
title: `第${episodeNumber}集`,
|
||
script_content: scriptContent.value
|
||
}
|
||
updatedEpisodes = [...existingEpisodes, newEpisode]
|
||
}
|
||
|
||
await dramaAPI.saveEpisodes(dramaId, updatedEpisodes)
|
||
ElMessage.success('章节保存成功！')
|
||
await loadDramaData()
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '保存失败')
|
||
}
|
||
}
|
||
|
||
const editCurrentEpisodeScript = () => {
|
||
scriptContent.value = currentEpisode.value?.script_content || ''
|
||
}
|
||
|
||
const handleExtractCharactersAndBackgrounds = async () => {
|
||
// 如果已经提取过，显示确认对话框
|
||
if (hasExtractedData.value) {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
$t('workflow.reExtractConfirmMessage'),
|
||
$t('workflow.reExtractConfirmTitle'),
|
||
{
|
||
confirmButtonText: $t('common.confirm'),
|
||
cancelButtonText: $t('common.cancel'),
|
||
type: 'warning',
|
||
distinguishCancelAndClose: true
|
||
}
|
||
)
|
||
} catch {
|
||
ElMessage.info('已取消提取')
|
||
return
|
||
}
|
||
}
|
||
|
||
// 显示即将开始的提示
|
||
if (hasExtractedData.value) {
|
||
ElMessage.info($t('workflow.startReExtracting'))
|
||
}
|
||
|
||
await extractCharactersAndBackgrounds()
|
||
}
|
||
|
||
// 轮询检查图片生成状态
|
||
const pollImageStatus = async (imageGenId: number, onComplete: () => Promise<void>) => {
|
||
const maxAttempts = 100 // 最多轮询100次
|
||
const pollInterval = 6000 // 每6秒轮询一次
|
||
|
||
for (let i = 0; i < maxAttempts; i++) {
|
||
try {
|
||
await new Promise(resolve => setTimeout(resolve, pollInterval))
|
||
|
||
const imageGen = await imageAPI.getImage(imageGenId)
|
||
|
||
if (imageGen.status === 'completed') {
|
||
// 生成成功
|
||
await onComplete()
|
||
return
|
||
} else if (imageGen.status === 'failed') {
|
||
// 生成失败
|
||
ElMessage.error(`图片生成失败: ${imageGen.error_msg || '未知错误'}`)
|
||
return
|
||
}
|
||
// 如果是pending或processing，继续轮询
|
||
} catch (error: any) {
|
||
console.error('[轮询] 检查图片状态失败:', error)
|
||
// 继续轮询，不中断
|
||
}
|
||
}
|
||
|
||
// 超时
|
||
ElMessage.warning('图片生成超时，请稍后刷新页面查看结果')
|
||
}
|
||
|
||
const extractCharactersAndBackgrounds = async () => {
|
||
if (!currentEpisode.value?.id) {
|
||
ElMessage.error('章节信息不存在')
|
||
return
|
||
}
|
||
|
||
extractingCharactersAndBackgrounds.value = true
|
||
|
||
try {
|
||
const episodeId = currentEpisode.value.id
|
||
|
||
// 并行创建异步任务
|
||
const [characterTask, backgroundTask] = await Promise.all([
|
||
generationAPI.generateCharacters({
|
||
drama_id: dramaId.toString(),
|
||
outline: currentEpisode.value.script_content || '',
|
||
count: 0
|
||
}),
|
||
dramaAPI.extractBackgrounds(episodeId)
|
||
])
|
||
|
||
ElMessage.success('任务已创建，正在后台处理...')
|
||
|
||
// 并行轮询两个任务
|
||
await Promise.all([
|
||
pollExtractTask(characterTask.task_id, 'character'),
|
||
pollExtractTask(backgroundTask.task_id, 'background')
|
||
])
|
||
|
||
ElMessage.success('角色和场景提取成功！')
|
||
await loadDramaData()
|
||
} catch (error: any) {
|
||
console.error('角色和场景提取失败:', error)
|
||
|
||
const errorData = error.response?.data?.error
|
||
const errorMsg = errorData?.message || error.message || '提取失败'
|
||
|
||
if (errorMsg.includes('no config found') ||
|
||
errorMsg.includes('AI client') ||
|
||
errorMsg.includes('failed to get AI client')) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '未配置AI服务，请前往"设置 > AI服务配置"添加文本生成服务',
|
||
duration: 5000,
|
||
showClose: true
|
||
})
|
||
} else {
|
||
ElMessage.error(errorMsg)
|
||
}
|
||
} finally {
|
||
extractingCharactersAndBackgrounds.value = false
|
||
}
|
||
}
|
||
|
||
// 轮询提取任务状态
|
||
const pollExtractTask = async (taskId: string, type: 'character' | 'background') => {
|
||
const maxAttempts = 60 // 最多轮询60次（2分钟）
|
||
const interval = 2000 // 每2秒查询一次
|
||
|
||
for (let i = 0; i < maxAttempts; i++) {
|
||
await new Promise(resolve => setTimeout(resolve, interval))
|
||
|
||
try {
|
||
const task = await generationAPI.getTaskStatus(taskId)
|
||
|
||
if (task.status === 'completed') {
|
||
// 任务完成
|
||
if (type === 'character' && task.result) {
|
||
// 解析角色数据并保存
|
||
const result = typeof task.result === 'string' ? JSON.parse(task.result) : task.result
|
||
if (result.characters && result.characters.length > 0) {
|
||
await dramaAPI.saveCharacters(dramaId, result.characters, currentEpisode.value?.id)
|
||
}
|
||
}
|
||
return
|
||
} else if (task.status === 'failed') {
|
||
// 任务失败
|
||
throw new Error(task.error || `${type === 'character' ? '角色生成' : '场景提取'}失败`)
|
||
}
|
||
// 否则继续轮询
|
||
} catch (error: any) {
|
||
console.error(`轮询${type}任务状态失败:`, error)
|
||
throw error
|
||
}
|
||
}
|
||
|
||
throw new Error(`${type === 'character' ? '角色生成' : '场景提取'}超时`)
|
||
}
|
||
|
||
|
||
const generateCharacterImage = async (characterId: number) => {
|
||
generatingCharacterImages.value[characterId] = true
|
||
|
||
try {
|
||
// 获取用户选择的图片生成模型
|
||
const model = selectedImageModel.value || undefined
|
||
const response = await characterLibraryAPI.generateCharacterImage(characterId.toString(), model)
|
||
const imageGenId = response.image_generation?.id
|
||
|
||
if (imageGenId) {
|
||
ElMessage.info('角色图片生成中，请稍候...')
|
||
// 轮询检查生成状态
|
||
await pollImageStatus(imageGenId, async () => {
|
||
await loadDramaData()
|
||
ElMessage.success('角色图片生成完成！')
|
||
})
|
||
} else {
|
||
ElMessage.success('角色图片生成已启动')
|
||
await loadDramaData()
|
||
}
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '生成失败')
|
||
} finally {
|
||
generatingCharacterImages.value[characterId] = false
|
||
}
|
||
}
|
||
|
||
const toggleSelectAllCharacters = () => {
|
||
if (selectAllCharacters.value) {
|
||
selectedCharacterIds.value = currentEpisode.value?.characters?.map(char => char.id) || []
|
||
} else {
|
||
selectedCharacterIds.value = []
|
||
}
|
||
}
|
||
|
||
const toggleSelectAllScenes = () => {
|
||
if (selectAllScenes.value) {
|
||
selectedSceneIds.value = currentEpisode.value?.scenes?.map(scene => scene.id) || []
|
||
} else {
|
||
selectedSceneIds.value = []
|
||
}
|
||
}
|
||
|
||
const batchGenerateCharacterImages = async () => {
|
||
if (selectedCharacterIds.value.length === 0) {
|
||
ElMessage.warning('请先选择要生成的角色')
|
||
return
|
||
}
|
||
|
||
batchGeneratingCharacters.value = true
|
||
try {
|
||
// 获取用户选择的图片生成模型
|
||
const model = selectedImageModel.value || undefined
|
||
|
||
// 使用批量生成API
|
||
await characterLibraryAPI.batchGenerateCharacterImages(
|
||
selectedCharacterIds.value.map(id => id.toString()),
|
||
model
|
||
)
|
||
|
||
ElMessage.success($t('workflow.batchTaskSubmitted'))
|
||
await loadDramaData()
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || $t('workflow.batchGenerateFailed'))
|
||
} finally {
|
||
batchGeneratingCharacters.value = false
|
||
}
|
||
}
|
||
|
||
const generateSceneImage = async (sceneId: string) => {
|
||
generatingSceneImages.value[sceneId] = true
|
||
|
||
try {
|
||
// 获取用户选择的图片生成模型
|
||
const model = selectedImageModel.value || undefined
|
||
const response = await dramaAPI.generateSceneImage({
|
||
scene_id: parseInt(sceneId),
|
||
model
|
||
})
|
||
const imageGenId = response.image_generation?.id
|
||
|
||
if (imageGenId) {
|
||
ElMessage.info($t('workflow.sceneImageGenerating'))
|
||
// 轮询检查生成状态
|
||
await pollImageStatus(imageGenId, async () => {
|
||
await loadDramaData()
|
||
ElMessage.success($t('workflow.sceneImageComplete'))
|
||
})
|
||
} else {
|
||
ElMessage.success($t('workflow.sceneImageStarted'))
|
||
await loadDramaData()
|
||
}
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '生成失败')
|
||
} finally {
|
||
generatingSceneImages.value[sceneId] = false
|
||
}
|
||
}
|
||
|
||
const batchGenerateSceneImages = async () => {
|
||
if (selectedSceneIds.value.length === 0) {
|
||
ElMessage.warning('请先选择要生成的场景')
|
||
return
|
||
}
|
||
|
||
batchGeneratingScenes.value = true
|
||
try {
|
||
const promises = selectedSceneIds.value.map(sceneId =>
|
||
generateSceneImage(sceneId.toString())
|
||
)
|
||
const results = await Promise.allSettled(promises)
|
||
|
||
const successCount = results.filter(r => r.status === 'fulfilled').length
|
||
const failCount = results.filter(r => r.status === 'rejected').length
|
||
|
||
if (failCount === 0) {
|
||
ElMessage.success($t('workflow.batchCompleteSuccess', { count: successCount }))
|
||
} else {
|
||
ElMessage.warning($t('workflow.batchCompletePartial', { success: successCount, fail: failCount }))
|
||
}
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || $t('workflow.batchGenerateFailed'))
|
||
} finally {
|
||
batchGeneratingScenes.value = false
|
||
}
|
||
}
|
||
|
||
const taskProgress = ref(0)
|
||
const taskMessage = ref('')
|
||
let pollTimer: any = null
|
||
|
||
const generateShots = async () => {
|
||
if (!currentEpisode.value?.id) {
|
||
ElMessage.error('章节信息不存在')
|
||
return
|
||
}
|
||
|
||
generatingShots.value = true
|
||
taskProgress.value = 0
|
||
taskMessage.value = '初始化任务...'
|
||
|
||
try {
|
||
const episodeId = currentEpisode.value.id.toString()
|
||
// 创建异步任务
|
||
const response = await generationAPI.generateStoryboard(episodeId)
|
||
|
||
taskMessage.value = response.message || '任务已创建'
|
||
|
||
// 开始轮询任务状态
|
||
await pollTaskStatus(response.task_id)
|
||
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '拆分失败')
|
||
generatingShots.value = false
|
||
}
|
||
}
|
||
|
||
const pollTaskStatus = async (taskId: string) => {
|
||
const checkStatus = async () => {
|
||
try {
|
||
const task = await generationAPI.getTaskStatus(taskId)
|
||
|
||
taskProgress.value = task.progress
|
||
taskMessage.value = task.message || `处理中... ${task.progress}%`
|
||
|
||
if (task.status === 'completed') {
|
||
// 任务完成
|
||
if (pollTimer) {
|
||
clearInterval(pollTimer)
|
||
pollTimer = null
|
||
}
|
||
generatingShots.value = false
|
||
|
||
ElMessage.success($t('workflow.splitSuccess'))
|
||
|
||
// 跳转到专业编辑器页面
|
||
router.push({
|
||
name: 'ProfessionalEditor',
|
||
params: {
|
||
dramaId: dramaId,
|
||
episodeNumber: episodeNumber
|
||
}
|
||
})
|
||
} else if (task.status === 'failed') {
|
||
// 任务失败
|
||
if (pollTimer) {
|
||
clearInterval(pollTimer)
|
||
pollTimer = null
|
||
}
|
||
generatingShots.value = false
|
||
ElMessage.error(task.error || '分镜拆分失败')
|
||
}
|
||
// 否则继续轮询
|
||
} catch (error: any) {
|
||
if (pollTimer) {
|
||
clearInterval(pollTimer)
|
||
pollTimer = null
|
||
}
|
||
generatingShots.value = false
|
||
ElMessage.error('查询任务状态失败: ' + error.message)
|
||
}
|
||
}
|
||
|
||
// 立即检查一次
|
||
await checkStatus()
|
||
|
||
// 每2秒轮询一次
|
||
pollTimer = setInterval(checkStatus, 2000)
|
||
}
|
||
|
||
const regenerateShots = async () => {
|
||
await ElMessageBox.confirm($t('workflow.reSplitConfirm'), $t('common.tip'), {
|
||
type: 'warning'
|
||
})
|
||
|
||
await generateShots()
|
||
}
|
||
|
||
const shotEditDialogVisible = ref(false)
|
||
const editingShot = ref<any>(null)
|
||
const editingShotIndex = ref<number>(-1)
|
||
const savingShot = ref(false)
|
||
|
||
const editShot = (shot: any, index: number) => {
|
||
editingShot.value = { ...shot }
|
||
editingShotIndex.value = index
|
||
shotEditDialogVisible.value = true
|
||
}
|
||
|
||
const saveShotEdit = async () => {
|
||
if (!editingShot.value) return
|
||
|
||
try {
|
||
savingShot.value = true
|
||
|
||
// 调用API更新镜头
|
||
await dramaAPI.updateStoryboard(editingShot.value.id.toString(), editingShot.value)
|
||
|
||
// 更新本地数据
|
||
if (currentEpisode.value?.storyboards) {
|
||
currentEpisode.value.storyboards[editingShotIndex.value] = { ...editingShot.value }
|
||
}
|
||
|
||
ElMessage.success('镜头修改成功')
|
||
shotEditDialogVisible.value = false
|
||
} catch (error: any) {
|
||
ElMessage.error('保存失败: ' + (error.message || '未知错误'))
|
||
} finally {
|
||
savingShot.value = false
|
||
}
|
||
}
|
||
|
||
// 对话框相关方法
|
||
const openPromptDialog = (item: any, type: 'character' | 'scene') => {
|
||
currentEditItem.value = item
|
||
currentEditType.value = type
|
||
editPrompt.value = item.appearance || item.description || ''
|
||
promptDialogVisible.value = true
|
||
}
|
||
|
||
const savePrompt = async () => {
|
||
try {
|
||
if (currentEditType.value === 'character') {
|
||
await characterLibraryAPI.updateCharacter(currentEditItem.value.id, {
|
||
appearance: editPrompt.value
|
||
})
|
||
await generateCharacterImage(currentEditItem.value.id)
|
||
} else {
|
||
await dramaAPI.generateSceneImage({
|
||
scene_id: parseInt(currentEditItem.value.id),
|
||
prompt: editPrompt.value
|
||
})
|
||
}
|
||
promptDialogVisible.value = false
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '保存失败')
|
||
}
|
||
}
|
||
|
||
const uploadCharacterImage = (characterId: number) => {
|
||
currentUploadTarget.value = { id: characterId, type: 'character' }
|
||
uploadDialogVisible.value = true
|
||
}
|
||
|
||
const uploadSceneImage = (sceneId: string) => {
|
||
currentUploadTarget.value = { id: sceneId, type: 'scene' }
|
||
uploadDialogVisible.value = true
|
||
}
|
||
|
||
const selectFromLibrary = async (characterId: number) => {
|
||
try {
|
||
const result = await characterLibraryAPI.list({ page_size: 50 })
|
||
libraryItems.value = result.items || []
|
||
currentUploadTarget.value = characterId
|
||
libraryDialogVisible.value = true
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || $t('workflow.loadLibraryFailed'))
|
||
}
|
||
}
|
||
|
||
const addToCharacterLibrary = async (character: any) => {
|
||
if (!character.image_url) {
|
||
ElMessage.warning($t('workflow.generateImageFirst'))
|
||
return
|
||
}
|
||
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
$t('workflow.addToLibraryConfirm', { name: character.name }),
|
||
$t('workflow.addToLibrary'),
|
||
{
|
||
confirmButtonText: $t('common.confirm'),
|
||
cancelButtonText: $t('common.cancel'),
|
||
type: 'info'
|
||
}
|
||
)
|
||
|
||
await characterLibraryAPI.addCharacterToLibrary(character.id.toString())
|
||
ElMessage.success($t('workflow.addedToLibrary'))
|
||
} catch (error: any) {
|
||
if (error !== 'cancel') {
|
||
ElMessage.error(error.message || $t('workflow.addFailed'))
|
||
}
|
||
}
|
||
}
|
||
|
||
const selectLibraryItem = async (item: any) => {
|
||
try {
|
||
if (currentUploadTarget.value?.type === 'character') {
|
||
await characterLibraryAPI.applyFromLibrary(
|
||
currentUploadTarget.value.id.toString(),
|
||
item.id
|
||
)
|
||
ElMessage.success('应用角色形象成功！')
|
||
await loadDramaData()
|
||
libraryDialogVisible.value = false
|
||
}
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '应用失败')
|
||
}
|
||
}
|
||
|
||
const handleUploadSuccess = async (response: any) => {
|
||
try {
|
||
const imageUrl = response.url || response.data?.url
|
||
if (!imageUrl) {
|
||
ElMessage.error('上传失败：未获取到图片地址')
|
||
return
|
||
}
|
||
|
||
if (currentUploadTarget.value?.type === 'character') {
|
||
await characterLibraryAPI.uploadCharacterImage(
|
||
currentUploadTarget.value.id.toString(),
|
||
imageUrl
|
||
)
|
||
ElMessage.success('上传成功！')
|
||
} else if (currentUploadTarget.value?.type === 'scene') {
|
||
// TODO: 场景图片上传API
|
||
ElMessage.success('上传成功！')
|
||
}
|
||
|
||
await loadDramaData()
|
||
uploadDialogVisible.value = false
|
||
} catch (error: any) {
|
||
ElMessage.error(error.message || '上传失败')
|
||
}
|
||
}
|
||
|
||
const handleUploadError = () => {
|
||
ElMessage.error('上传失败，请重试')
|
||
}
|
||
|
||
const deleteCharacter = async (characterId: number) => {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'确定要删除该角色吗？删除后将无法恢复。',
|
||
'删除确认',
|
||
{
|
||
type: 'warning',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消'
|
||
}
|
||
)
|
||
|
||
await characterLibraryAPI.deleteCharacter(characterId)
|
||
ElMessage.success('角色已删除')
|
||
await loadDramaData()
|
||
} catch (error: any) {
|
||
if (error !== 'cancel') {
|
||
ElMessage.error(error.message || '删除失败')
|
||
}
|
||
}
|
||
}
|
||
|
||
const goToProfessionalUI = () => {
|
||
if (!currentEpisode.value?.id) {
|
||
ElMessage.error('章节信息不存在')
|
||
return
|
||
}
|
||
|
||
router.push({
|
||
name: 'ProfessionalEditor',
|
||
params: {
|
||
dramaId: dramaId,
|
||
episodeNumber: episodeNumber
|
||
}
|
||
})
|
||
}
|
||
|
||
const goToCompose = () => {
|
||
if (!currentEpisode.value?.id) {
|
||
ElMessage.error('章节信息不存在')
|
||
return
|
||
}
|
||
|
||
router.push({
|
||
name: 'SceneComposition',
|
||
params: {
|
||
id: dramaId,
|
||
episodeId: currentEpisode.value.id
|
||
}
|
||
})
|
||
}
|
||
|
||
// 监听步骤变化，保存到 localStorage
|
||
watch(currentStep, (newStep) => {
|
||
localStorage.setItem(getStepStorageKey(), newStep.toString())
|
||
})
|
||
|
||
onMounted(() => {
|
||
loadDramaData()
|
||
loadSavedModelConfig()
|
||
loadAIConfigs()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* ========================================
|
||
Page Layout / 页面布局 - 紧凑边距
|
||
======================================== */
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background: var(--bg-primary);
|
||
padding: var(--space-2) var(--space-3);
|
||
transition: background var(--transition-normal);
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.page-container {
|
||
padding: var(--space-3) var(--space-4);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.page-container {
|
||
padding: var(--space-4) var(--space-5);
|
||
}
|
||
}
|
||
|
||
.content-wrapper {
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Header styles matching PageHeader component */
|
||
.page-header {
|
||
margin-bottom: var(--space-3);
|
||
padding-bottom: var(--space-3);
|
||
border-bottom: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.back-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
padding: 0.5rem 0.875rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
white-space: nowrap;
|
||
|
||
&:hover {
|
||
background: var(--bg-card-hover);
|
||
color: var(--text-primary);
|
||
border-color: var(--border-secondary);
|
||
}
|
||
}
|
||
|
||
.nav-divider {
|
||
width: 1px;
|
||
height: 2rem;
|
||
background: var(--border-primary);
|
||
}
|
||
|
||
.header-title {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.header-center {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.header-right {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.workflow-card {
|
||
margin-bottom: var(--space-4);
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-card);
|
||
border: 1px solid var(--border-primary);
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.custom-steps {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.step-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
background: var(--bg-card-hover);
|
||
transition: all 0.3s;
|
||
|
||
&.active {
|
||
background: var(--accent-light);
|
||
|
||
.step-circle {
|
||
background: var(--accent);
|
||
color: var(--text-inverse);
|
||
}
|
||
}
|
||
|
||
&.current {
|
||
background: var(--accent);
|
||
color: var(--text-inverse);
|
||
|
||
.step-circle {
|
||
background: var(--bg-card);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.step-text {
|
||
color: var(--text-inverse);
|
||
}
|
||
}
|
||
|
||
.step-circle {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--border-secondary);
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.step-arrow {
|
||
color: var(--border-secondary);
|
||
}
|
||
}
|
||
|
||
.stage-card {
|
||
margin-bottom: 24px;
|
||
|
||
&.stage-card-fullscreen {
|
||
.stage-body-fullscreen {
|
||
min-height: calc(100vh - 200px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.stage-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
.header-info {
|
||
h2 {
|
||
margin: 0 0 4px 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.stage-body {
|
||
padding: 32px;
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.action-buttons-inline {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.script-textarea {
|
||
margin: 16px 0;
|
||
|
||
&.script-textarea-fullscreen {
|
||
:deep(textarea) {
|
||
min-height: 500px;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image-gen-section {
|
||
margin-bottom: 32px;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
padding: 16px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-primary);
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
|
||
.el-icon {
|
||
color: var(--accent);
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.el-alert {
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.section-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.empty-shots {
|
||
padding: 60px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.extracted-title {
|
||
margin-bottom: 8px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.secondary-text {
|
||
color: var(--text-muted);
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.task-message {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
text-align: center;
|
||
}
|
||
|
||
.model-tip {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.fixed-card {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-primary);
|
||
box-shadow: var(--shadow-card);
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
box-shadow: var(--shadow-card-hover);
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
flex: 1;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-header {
|
||
padding: 14px;
|
||
background: var(--bg-secondary);
|
||
border-bottom: 1px solid var(--border-primary);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.header-left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
h4 {
|
||
margin: 0 0 4px 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.el-tag {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-image-container {
|
||
flex: 1;
|
||
width: 100%;
|
||
min-height: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-secondary);
|
||
|
||
.char-image,
|
||
.scene-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
.el-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
.char-placeholder,
|
||
.scene-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-muted);
|
||
padding: 20px;
|
||
|
||
&.generating {
|
||
color: var(--warning);
|
||
background: var(--warning-light);
|
||
|
||
.rotating {
|
||
animation: rotating 2s linear infinite;
|
||
}
|
||
}
|
||
|
||
&.failed {
|
||
color: var(--error);
|
||
background: var(--error-light);
|
||
}
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
.el-icon {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
span {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-actions {
|
||
padding: 10px;
|
||
background: var(--bg-card);
|
||
border-top: 1px solid var(--border-primary);
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
|
||
.el-button {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.character-image-list,
|
||
.scene-image-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: 16px;
|
||
margin-top: 16px;
|
||
|
||
.character-item,
|
||
.scene-item {
|
||
min-height: 360px;
|
||
}
|
||
}
|
||
|
||
// 角色库选择对话框
|
||
.library-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
padding: 8px;
|
||
|
||
.library-item {
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.el-image {
|
||
width: 100%;
|
||
height: 150px;
|
||
}
|
||
|
||
.library-item-name {
|
||
padding: 8px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
background: var(--bg-secondary);
|
||
color: var(--text-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-library {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
// 上传区域
|
||
.upload-area {
|
||
:deep(.el-upload-dragger) {
|
||
width: 100%;
|
||
height: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
// 旋转动画
|
||
@keyframes rotating {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* ========================================
|
||
Dark Mode / 深色模式
|
||
======================================== */
|
||
:deep(.el-card) {
|
||
background: var(--bg-card);
|
||
border-color: var(--border-primary);
|
||
}
|
||
|
||
:deep(.el-card__header) {
|
||
background: var(--bg-secondary);
|
||
border-color: var(--border-primary);
|
||
}
|
||
|
||
:deep(.el-table) {
|
||
--el-table-bg-color: var(--bg-card);
|
||
--el-table-header-bg-color: var(--bg-secondary);
|
||
--el-table-tr-bg-color: var(--bg-card);
|
||
--el-table-row-hover-bg-color: var(--bg-card-hover);
|
||
--el-table-border-color: var(--border-primary);
|
||
--el-table-text-color: var(--text-primary);
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
:deep(.el-table th.el-table__cell),
|
||
:deep(.el-table td.el-table__cell) {
|
||
background: var(--bg-card);
|
||
border-color: var(--border-primary);
|
||
}
|
||
|
||
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
:deep(.el-table__header-wrapper th) {
|
||
background: var(--bg-secondary) !important;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
:deep(.el-dialog) {
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
:deep(.el-dialog__header) {
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
:deep(.el-form-item__label) {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background: var(--bg-secondary);
|
||
box-shadow: 0 0 0 1px var(--border-primary) inset;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
:deep(.el-textarea__inner) {
|
||
background: var(--bg-secondary);
|
||
color: var(--text-primary);
|
||
box-shadow: 0 0 0 1px var(--border-primary) inset;
|
||
}
|
||
|
||
:deep(.el-select-dropdown) {
|
||
background: var(--bg-elevated);
|
||
border-color: var(--border-primary);
|
||
}
|
||
|
||
:deep(.el-upload-dragger) {
|
||
background: var(--bg-secondary);
|
||
border-color: var(--border-primary);
|
||
}
|
||
</style>
|