419 lines
10 KiB
Vue
419 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<!-- 左侧配置面板 -->
|
|||
|
|
<div class="config-panel">
|
|||
|
|
<div class="config-tabs">
|
|||
|
|
<a-tabs v-model:activeKey="activeCategory" :tabBarStyle="{ margin: 0 }">
|
|||
|
|
<a-tab-pane v-for="cat in categoryList" :key="cat" :tab="cat" />
|
|||
|
|
</a-tabs>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 预设提示词 -->
|
|||
|
|
<div class="preset-prompts">
|
|||
|
|
<div class="preset-label">快捷提示词</div>
|
|||
|
|
<div class="preset-list">
|
|||
|
|
<a-button
|
|||
|
|
v-for="(prompt, index) in currentPrompts"
|
|||
|
|
:key="index"
|
|||
|
|
class="preset-btn"
|
|||
|
|
size="small"
|
|||
|
|
@click="applyPrompt(prompt)"
|
|||
|
|
>
|
|||
|
|
{{ prompt.length > 20 ? prompt.substring(0, 20) + '...' : prompt }}
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-container">
|
|||
|
|
<BasicForm @register="registerForm" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="action-container">
|
|||
|
|
<a-button type="primary" size="large" block @click="handleGenerate" :loading="generating" :disabled="generating">
|
|||
|
|
<Icon icon="ant-design:video-camera-outlined" />
|
|||
|
|
{{ generating ? '生成中...' : '开始生成' }}
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧预览面板 -->
|
|||
|
|
<div class="preview-panel">
|
|||
|
|
<div class="panel-title">生成结果</div>
|
|||
|
|
<div class="preview-content">
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<div v-if="!videoUrl && !generating" class="empty-state">
|
|||
|
|
<Icon icon="ant-design:video-camera-outlined" size="64" color="#ccc" />
|
|||
|
|
<p>在左侧输入视频描述，点击开始生成</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 生成中 -->
|
|||
|
|
<div v-if="generating" class="loading-state">
|
|||
|
|
<a-spin size="large" />
|
|||
|
|
<div class="loading-text">
|
|||
|
|
<p>正在生成视频，请耐心等待...</p>
|
|||
|
|
<p class="elapsed-time">已等待 {{ elapsedTimeText }}</p>
|
|||
|
|
<p class="status-text">{{ statusText }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 生成完成 -->
|
|||
|
|
<div v-if="videoUrl && !generating" class="result-video-wrapper">
|
|||
|
|
<video :src="videoUrl" controls class="result-video" />
|
|||
|
|
<div class="video-actions">
|
|||
|
|
<a-button type="primary" @click="handleDownload">
|
|||
|
|
<Icon icon="ant-design:download-outlined" />
|
|||
|
|
下载视频
|
|||
|
|
</a-button>
|
|||
|
|
<a-button @click="handleReset">
|
|||
|
|
<Icon icon="ant-design:redo-outlined" />
|
|||
|
|
重新生成
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 生成失败 -->
|
|||
|
|
<div v-if="errorMessage && !generating" class="error-state">
|
|||
|
|
<Icon icon="ant-design:close-circle-outlined" size="64" color="#ff4d4f" />
|
|||
|
|
<p class="error-text">{{ errorMessage }}</p>
|
|||
|
|
<a-button type="primary" @click="handleReset">重试</a-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref, computed, onUnmounted } from 'vue';
|
|||
|
|
import { BasicForm, useForm } from '@/components/Form';
|
|||
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|||
|
|
import { Icon } from '@/components/Icon';
|
|||
|
|
import { submitVideoTask, queryVideoTask, getPresetPrompts } from './AiVideo.api';
|
|||
|
|
import { videoFormSchema, categoryList, fallbackPrompts } from './AiVideo.data';
|
|||
|
|
|
|||
|
|
const { createMessage } = useMessage();
|
|||
|
|
|
|||
|
|
const activeCategory = ref('通用演示');
|
|||
|
|
const generating = ref(false);
|
|||
|
|
const videoUrl = ref('');
|
|||
|
|
const errorMessage = ref('');
|
|||
|
|
const elapsedSeconds = ref(0);
|
|||
|
|
const statusText = ref('任务已提交，排队中...');
|
|||
|
|
|
|||
|
|
let pollTimer: ReturnType<typeof setInterval> | null = null;
|
|||
|
|
let elapsedTimer: ReturnType<typeof setInterval> | null = null;
|
|||
|
|
|
|||
|
|
// 预设提示词（优先从后端加载）
|
|||
|
|
const promptsMap = ref<Record<string, string[]>>({ ...fallbackPrompts });
|
|||
|
|
|
|||
|
|
// 加载后端预设提示词
|
|||
|
|
getPresetPrompts()
|
|||
|
|
.then((data) => {
|
|||
|
|
if (data && Object.keys(data).length > 0) {
|
|||
|
|
promptsMap.value = data;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
// 使用备用提示词
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const currentPrompts = computed(() => {
|
|||
|
|
return promptsMap.value[activeCategory.value] || [];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const elapsedTimeText = computed(() => {
|
|||
|
|
const minutes = Math.floor(elapsedSeconds.value / 60);
|
|||
|
|
const seconds = elapsedSeconds.value % 60;
|
|||
|
|
if (minutes > 0) {
|
|||
|
|
return `${minutes}分${seconds}秒`;
|
|||
|
|
}
|
|||
|
|
return `${seconds}秒`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [registerForm, { validate, setFieldsValue }] = useForm({
|
|||
|
|
schemas: videoFormSchema,
|
|||
|
|
labelWidth: 100,
|
|||
|
|
actionColOptions: { span: 24 },
|
|||
|
|
showActionButtonGroup: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function applyPrompt(prompt: string) {
|
|||
|
|
setFieldsValue({ prompt });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleGenerate() {
|
|||
|
|
try {
|
|||
|
|
const values = await validate();
|
|||
|
|
if (!values.prompt || !values.prompt.trim()) {
|
|||
|
|
createMessage.warning('请输入视频描述');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置状态
|
|||
|
|
generating.value = true;
|
|||
|
|
videoUrl.value = '';
|
|||
|
|
errorMessage.value = '';
|
|||
|
|
elapsedSeconds.value = 0;
|
|||
|
|
statusText.value = '任务已提交，排队中...';
|
|||
|
|
|
|||
|
|
// 启动计时器
|
|||
|
|
elapsedTimer = setInterval(() => {
|
|||
|
|
elapsedSeconds.value++;
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
// 提交任务
|
|||
|
|
const submitResult = await submitVideoTask({
|
|||
|
|
prompt: values.prompt.trim(),
|
|||
|
|
category: activeCategory.value,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!submitResult || !submitResult.taskId) {
|
|||
|
|
throw new Error(submitResult?.message || '提交任务失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
statusText.value = '视频生成中...';
|
|||
|
|
|
|||
|
|
// 开始轮询
|
|||
|
|
pollTimer = setInterval(async () => {
|
|||
|
|
try {
|
|||
|
|
const queryResult = await queryVideoTask(submitResult.taskId);
|
|||
|
|
if (queryResult.status === 'SUCCESS') {
|
|||
|
|
clearTimers();
|
|||
|
|
generating.value = false;
|
|||
|
|
videoUrl.value = queryResult.videoUrl;
|
|||
|
|
createMessage.success('视频生成成功！');
|
|||
|
|
} else if (queryResult.status === 'FAIL') {
|
|||
|
|
clearTimers();
|
|||
|
|
generating.value = false;
|
|||
|
|
errorMessage.value = queryResult.message || '视频生成失败';
|
|||
|
|
}
|
|||
|
|
// PROCESSING状态继续轮询
|
|||
|
|
} catch (e: any) {
|
|||
|
|
clearTimers();
|
|||
|
|
generating.value = false;
|
|||
|
|
errorMessage.value = '查询任务状态失败: ' + (e.message || '未知错误');
|
|||
|
|
}
|
|||
|
|
}, 5000);
|
|||
|
|
} catch (error: any) {
|
|||
|
|
clearTimers();
|
|||
|
|
generating.value = false;
|
|||
|
|
if (error?.errorFields) {
|
|||
|
|
// 表单验证失败，不显示额外错误
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
errorMessage.value = error.message || '提交任务失败';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clearTimers() {
|
|||
|
|
if (pollTimer) {
|
|||
|
|
clearInterval(pollTimer);
|
|||
|
|
pollTimer = null;
|
|||
|
|
}
|
|||
|
|
if (elapsedTimer) {
|
|||
|
|
clearInterval(elapsedTimer);
|
|||
|
|
elapsedTimer = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleReset() {
|
|||
|
|
videoUrl.value = '';
|
|||
|
|
errorMessage.value = '';
|
|||
|
|
elapsedSeconds.value = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleDownload() {
|
|||
|
|
if (!videoUrl.value) return;
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = videoUrl.value;
|
|||
|
|
a.download = `ai-video-${Date.now()}.mp4`;
|
|||
|
|
a.target = '_blank';
|
|||
|
|
a.click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
clearTimers();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.content-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-panel {
|
|||
|
|
width: 550px;
|
|||
|
|
min-width: 350px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 20px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.config-tabs {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
:deep(.ant-tabs-nav::before) {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-tabs-tab) {
|
|||
|
|
padding: 8px 0;
|
|||
|
|
margin: 0 24px 0 0;
|
|||
|
|
font-size: 15px;
|
|||
|
|
|
|||
|
|
&.ant-tabs-tab-active .ant-tabs-tab-btn {
|
|||
|
|
color: #1890ff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-tabs-ink-bar) {
|
|||
|
|
background: #1890ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preset-prompts {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
.preset-label {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #8c8c8c;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preset-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.preset-btn {
|
|||
|
|
color: #595959;
|
|||
|
|
border-color: #d9d9d9;
|
|||
|
|
font-size: 12px;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
color: #1890ff;
|
|||
|
|
border-color: #1890ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-container {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-container {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
border-top: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-panel {
|
|||
|
|
flex: 1;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 20px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.preview-content {
|
|||
|
|
flex: 1;
|
|||
|
|
background: #f7f8fc;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panel-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1f2329;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-left: 8px;
|
|||
|
|
border-left: 4px solid #1890ff;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #8f959e;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
|
|||
|
|
.loading-text {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #595959;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin: 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.elapsed-time {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #8c8c8c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result-video-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 16px;
|
|||
|
|
|
|||
|
|
.result-video {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
max-height: calc(100% - 60px);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #000;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-actions {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-state {
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.error-text {
|
|||
|
|
margin: 16px 0;
|
|||
|
|
color: #ff4d4f;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|