blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update project files

Browse Source
This commit is contained in:
AIGC Developer
2025-11-13 17:01:39 +08:00
parent 83bf064bb2
commit 2961d2b0d0
344 changed files with 11549 additions and 15941 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
demo/frontend/src/views/StoryboardVideoCreate.vue
View File

@@ -8,16 +8,15 @@
</button>
</div>
<div class="header-right">
<div class="credits-info">
<div class="credits-circle">25</div>
<span>| 首购优惠</span>
</div>
<div class="notification-icon">
🔔
<div class="notification-badge">5</div>
<div class="points-display">
<div class="points-icon">
<el-icon><Star /></el-icon>
</div>
<span class="points-number">{{ userStore.availablePoints }}</span>
</div>
<LanguageSwitcher />
<div class="user-avatar">
👤
<img src="/images/backgrounds/avatar-default.svg" alt="用户头像" />
</div>
</div>
</header>
@@ -126,7 +125,7 @@
<div class="setting-item">
<label>高清模式 (1080P)</label>
<div class="hd-setting">
<input type="checkbox" v-model="hdMode" class="hd-switch">
<el-switch v-model="hdMode" />
<span class="cost-text">开启消耗20积分</span>
</div>
</div>
@@ -269,6 +268,7 @@ import { createStoryboardTask, getStoryboardTask, getUserStoryboardTasks } from
import { imageToVideoApi } from '@/api/imageToVideo'
import { optimizePrompt } from '@/api/promptOptimizer'
import { getProcessingWorks } from '@/api/userWorks'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
const router = useRouter()
const userStore = useUserStore()
@@ -316,7 +316,7 @@ const videoRefs = ref({}) // 视频元素引用
// 导航函数
const goBack = () => {
router.back()
router.push('/')
}
// 跳转到登录页面
@@ -615,7 +615,15 @@ const startGenerate = async () => {
ElMessage.success('分镜图任务创建成功！')
taskId.value = response.data.data.taskId
console.log('Task created:', response.data.data)
// 更新用户积分信息（任务创建后积分已被扣除）
try {
await userStore.fetchCurrentUser()
console.log('用户积分已更新')
} catch (error) {
console.error('更新用户积分失败:', error)
}
// 开始轮询任务状态，获取生成的图片
// inProgress 将在轮询完成时设置为 false
pollTaskStatus(response.data.data.taskId)
@@ -954,7 +962,15 @@ const startVideoGenerate = async () => {
videoProgress.value = 0
ElMessage.success('视频任务创建成功，开始处理...')
console.log('视频任务创建成功，任务ID:', newVideoTaskId)
// 更新用户积分信息（任务创建后积分已被扣除）
try {
await userStore.fetchCurrentUser()
console.log('用户积分已更新')
} catch (error) {
console.error('更新用户积分失败:', error)
}
// 保持在当前页面，开始轮询视频任务状态
pollVideoTaskStatus(newVideoTaskId)
} else {
@@ -1026,6 +1042,15 @@ const pollVideoTaskStatus = async (taskId) => {
inProgress.value = false
videoProgress.value = 100
ElMessage.success('视频生成完成！')
// 更新用户积分信息
try {
await userStore.fetchCurrentUser()
console.log('用户积分已更新')
} catch (error) {
console.error('更新用户积分失败:', error)
}
return
} else if (task.status === 'FAILED' || task.status === 'CANCELLED') {
if (videoPollIntervalId.value) {
@@ -1238,37 +1263,86 @@ const restoreProcessingTask = async () => {
// 取最新的一个任务
const work = storyboardWorks[0]
// 恢复任务状态
currentTask.value = {
taskId: work.taskId,
prompt: work.prompt,
aspectRatio: work.aspectRatio,
duration: work.duration,
resultUrl: work.resultUrl,
createdAt: work.createdAt
console.log('恢复分镜视频任务:', work)
// 获取任务详情以获取完整信息（包括 progress 和 resultUrl）
try {
const taskResponse = await getStoryboardTask(work.taskId)
if (taskResponse.data && taskResponse.data.success && taskResponse.data.data) {
const taskDetail = taskResponse.data.data
console.log('任务详情:', taskDetail)
// 恢复任务状态
currentTask.value = {
taskId: taskDetail.taskId,
prompt: taskDetail.prompt,
aspectRatio: taskDetail.aspectRatio,
duration: taskDetail.duration,
resultUrl: taskDetail.resultUrl,
createdAt: taskDetail.createdAt,
progress: taskDetail.progress || 0
}
taskId.value = taskDetail.taskId
// 恢复输入参数
if (taskDetail.prompt) {
inputText.value = taskDetail.prompt
}
if (taskDetail.aspectRatio) {
aspectRatio.value = taskDetail.aspectRatio
}
if (taskDetail.duration) {
duration.value = taskDetail.duration || '10'
}
// 判断任务进度，决定恢复到哪个步骤
const taskProgress = taskDetail.progress || 0
const taskResultUrl = taskDetail.resultUrl || ''
// 如果有 resultUrl 且是图片（Base64），说明分镜图已生成
if (taskResultUrl && taskResultUrl.startsWith('data:image')) {
console.log('分镜图已生成，恢复到视频生成步骤')
generatedImageUrl.value = taskResultUrl
currentStep.value = 'video' // 切换到视频生成步骤
// 如果进度 >= 100，说明视频也已完成
if (taskProgress >= 100) {
inProgress.value = false
taskStatus.value = 'COMPLETED'
ElMessage.success('任务已完成！')
} else {
// 分镜图已完成，但视频还在生成中
inProgress.value = true
taskStatus.value = taskDetail.status || 'PROCESSING'
ElMessage.info('检测到未完成的视频生成任务，继续处理中...')
// 开始轮询任务状态
pollTaskStatus(taskDetail.taskId)
}
} else {
// 分镜图还在生成中
console.log('分镜图生成中，恢复到分镜图生成步骤')
currentStep.value = 'generate' // 保持在分镜图生成步骤
inProgress.value = true
taskStatus.value = taskDetail.status || 'PROCESSING'
ElMessage.info('检测到未完成的分镜图生成任务，继续处理中...')
// 开始轮询任务状态
pollTaskStatus(taskDetail.taskId)
}
} else {
console.error('获取任务详情失败')
}
} catch (error) {
console.error('获取任务详情失败:', error)
// 如果获取详情失败，使用 work 的基本信息
taskId.value = work.taskId
inputText.value = work.prompt || ''
inProgress.value = true
taskStatus.value = work.status || 'PROCESSING'
ElMessage.info('检测到未完成的任务，继续处理中...')
pollTaskStatus(work.taskId)
}
taskId.value = work.taskId
// 恢复输入参数
if (work.prompt) {
inputText.value = work.prompt
}
if (work.aspectRatio) {
aspectRatio.value = work.aspectRatio
}
if (work.duration) {
duration.value = work.duration || '10'
}
inProgress.value = true
taskStatus.value = work.status || 'PROCESSING'
console.log('恢复正在进行中的任务:', work.taskId, '状态:', work.status)
ElMessage.info('检测到未完成的任务，继续处理中...')
// 开始轮询任务状态
pollStoryboardTask(work.taskId)
}
}
} catch (error) {
@@ -1345,69 +1419,50 @@ onBeforeUnmount(() => {
gap: 24px;
}
.credits-info {
.points-display {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 14px;
font-weight: 500;
gap: 8px;
padding: 6px 12px;
background: rgba(64, 158, 255, 0.1);
border-radius: 20px;
border: 1px solid rgba(64, 158, 255, 0.3);
}
.credits-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.notification-icon {
position: relative;
font-size: 24px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background 0.2s ease;
}
.notification-icon:hover {
background: #1a1a1a;
}
.notification-badge {
position: absolute;
top: 2px;
right: 2px;
background: #ef4444;
color: #fff;
border-radius: 50%;
.points-icon {
width: 20px;
height: 20px;
background: #409EFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.points-number {
color: #409EFF;
font-size: 14px;
font-weight: 600;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #374151, #1f2937);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
transition: transform 0.2s ease;
overflow: hidden;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar:hover {
@@ -1827,13 +1882,6 @@ onBeforeUnmount(() => {
gap: 12px;
}
.hd-switch {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #3b82f6;
}
.cost-text {
font-size: 13px;
color: #9ca3af;