fix: 新需求 对接火山seedance
This commit is contained in:
old burden
parent
8959b775a4
commit
abb8d279c4
|
|
@ -0,0 +1,412 @@
|
||||||
|
<template>
|
||||||
|
<div class="rich-editor-root">
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="toolbar">
|
||||||
|
<button class="tool-btn" type="button" @click="execCommand('bold')"><b>B</b></button>
|
||||||
|
<button class="tool-btn" type="button" @click="execCommand('italic')"><i>I</i></button>
|
||||||
|
<button class="tool-btn" type="button" @click="openImagePicker">{{ $t('common.insertImage') || '插入图片' }}</button>
|
||||||
|
<button class="tool-btn" type="button" @click="clear">清空</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 隐藏的文件输入 -->
|
||||||
|
<input
|
||||||
|
ref="fileInputRef"
|
||||||
|
class="hidden-input"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
multiple
|
||||||
|
@change="handleSelectFiles"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 编辑器区域 -->
|
||||||
|
<div
|
||||||
|
ref="editorRef"
|
||||||
|
class="user-input rich-editor"
|
||||||
|
contenteditable="true"
|
||||||
|
:data-placeholder="placeholder || '请输入文本...'"
|
||||||
|
@input="handleInput"
|
||||||
|
@keyup="handleKeyup"
|
||||||
|
@click="handleEditorClick"
|
||||||
|
@keydown="handleKeydown"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- @ 图片选择面板 -->
|
||||||
|
<div v-if="mentionVisible" class="mention-panel">
|
||||||
|
<div
|
||||||
|
v-for="(item, idx) in mentionImageList"
|
||||||
|
:key="item.url"
|
||||||
|
class="mention-item"
|
||||||
|
@mousedown.prevent="insertMentionImage(item)"
|
||||||
|
>
|
||||||
|
<img :src="item.url" class="mention-thumb" />
|
||||||
|
<span class="mention-label">@图{{ idx + 1 }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="mentionImageList.length === 0" class="mention-empty">
|
||||||
|
{{ $t('common.noImageToMention') || '暂无可引用图片' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { nextTick, onMounted, ref, watch } from 'vue'
|
||||||
|
import { uploadFile } from '@/utils/file'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'RichTextEditor',
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请输入文本生成视频...'
|
||||||
|
},
|
||||||
|
uploadedImages: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'text-change', 'image-upload'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const editorRef = ref(null)
|
||||||
|
const fileInputRef = ref(null)
|
||||||
|
const savedSelectionRange = ref(null)
|
||||||
|
const mentionVisible = ref(false)
|
||||||
|
const mentionImageList = ref([])
|
||||||
|
const MAX_IMAGE_COUNT = 4
|
||||||
|
|
||||||
|
// 执行编辑器命令
|
||||||
|
const execCommand = (command) => {
|
||||||
|
if (!editorRef.value) return
|
||||||
|
editorRef.value.focus()
|
||||||
|
document.execCommand(command, false, null)
|
||||||
|
handleInput()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开图片选择器
|
||||||
|
const openImagePicker = () => {
|
||||||
|
if (fileInputRef.value) {
|
||||||
|
fileInputRef.value.click()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理文件选择 - 上传到服务器
|
||||||
|
const handleSelectFiles = async (event) => {
|
||||||
|
const files = event.target.files
|
||||||
|
if (!files.length) return
|
||||||
|
|
||||||
|
for (let file of files) {
|
||||||
|
if (file.type.startsWith('image/')) {
|
||||||
|
try {
|
||||||
|
// 显示上传中提示
|
||||||
|
const loading = window.$message ? window.$message.loading('上传中...') : null
|
||||||
|
|
||||||
|
// 上传到后端
|
||||||
|
const res = await uploadFile({
|
||||||
|
url: '/api/cos/upload', // 使用腾讯云COS上传接口
|
||||||
|
file: file,
|
||||||
|
name: 'file'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res && res.code === 200 && res.data) {
|
||||||
|
const imageUrl = typeof res.data === 'string' ? res.data : (res.data.url || res.data)
|
||||||
|
insertImage(imageUrl, file.name)
|
||||||
|
|
||||||
|
// 通知父组件有新图片上传成功（用于@功能）
|
||||||
|
emit('image-upload', { url: imageUrl, name: file.name })
|
||||||
|
} else {
|
||||||
|
console.error('上传失败:', res)
|
||||||
|
alert('图片上传失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传图片出错:', error)
|
||||||
|
alert('图片上传失败: ' + (error.message || '未知错误'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空input
|
||||||
|
event.target.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入图片
|
||||||
|
const insertImage = (url, name = 'image') => {
|
||||||
|
if (!editorRef.value) return
|
||||||
|
|
||||||
|
editorRef.value.focus()
|
||||||
|
const selection = window.getSelection()
|
||||||
|
if (!selection) return
|
||||||
|
|
||||||
|
const img = document.createElement('img')
|
||||||
|
img.src = url
|
||||||
|
img.alt = name
|
||||||
|
img.style.maxWidth = '100%'
|
||||||
|
img.style.height = 'auto'
|
||||||
|
img.style.margin = '4px 0'
|
||||||
|
img.setAttribute('data-image-name', name)
|
||||||
|
|
||||||
|
const range = selection.getRangeAt(0)
|
||||||
|
range.deleteContents()
|
||||||
|
range.insertNode(img)
|
||||||
|
|
||||||
|
// 添加空格
|
||||||
|
const space = document.createTextNode(' ')
|
||||||
|
range.setStartAfter(img)
|
||||||
|
range.setEndAfter(img)
|
||||||
|
range.insertNode(space)
|
||||||
|
|
||||||
|
handleInput()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理输入
|
||||||
|
const handleInput = () => {
|
||||||
|
if (!editorRef.value) return
|
||||||
|
const content = editorRef.value.innerHTML
|
||||||
|
emit('update:modelValue', content)
|
||||||
|
emit('text-change', content)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理按键
|
||||||
|
const handleKeyup = (e) => {
|
||||||
|
if (e.key === '@') {
|
||||||
|
showMentionPanel()
|
||||||
|
} else if (e.key === 'Escape' && mentionVisible.value) {
|
||||||
|
mentionVisible.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleKeydown = (e) => {
|
||||||
|
if (e.key === '@') {
|
||||||
|
// 保存当前选择位置
|
||||||
|
const selection = window.getSelection()
|
||||||
|
if (selection && selection.rangeCount > 0) {
|
||||||
|
savedSelectionRange.value = selection.getRangeAt(0).cloneRange()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示 @ 面板
|
||||||
|
const showMentionPanel = () => {
|
||||||
|
if (props.uploadedImages && props.uploadedImages.length > 0) {
|
||||||
|
mentionImageList.value = props.uploadedImages.slice(0, MAX_IMAGE_COUNT)
|
||||||
|
mentionVisible.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入 @ 图片
|
||||||
|
const insertMentionImage = (imageItem) => {
|
||||||
|
if (!editorRef.value || !savedSelectionRange.value) {
|
||||||
|
mentionVisible.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
editorRef.value.focus()
|
||||||
|
|
||||||
|
const selection = window.getSelection()
|
||||||
|
if (selection) {
|
||||||
|
selection.removeAllRanges()
|
||||||
|
selection.addRange(savedSelectionRange.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const img = document.createElement('img')
|
||||||
|
img.src = imageItem.url
|
||||||
|
img.alt = '@图片'
|
||||||
|
img.style.maxWidth = '60px'
|
||||||
|
img.style.height = 'auto'
|
||||||
|
img.style.verticalAlign = 'middle'
|
||||||
|
img.setAttribute('data-mention', 'true')
|
||||||
|
|
||||||
|
const range = savedSelectionRange.value
|
||||||
|
range.deleteContents()
|
||||||
|
range.insertNode(img)
|
||||||
|
|
||||||
|
// 添加空格
|
||||||
|
const space = document.createTextNode(' ')
|
||||||
|
range.setStartAfter(img)
|
||||||
|
range.setEndAfter(img)
|
||||||
|
range.insertNode(space)
|
||||||
|
|
||||||
|
mentionVisible.value = false
|
||||||
|
handleInput()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空编辑器
|
||||||
|
const clear = () => {
|
||||||
|
if (!editorRef.value) return
|
||||||
|
editorRef.value.innerHTML = ''
|
||||||
|
handleInput()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理编辑器点击
|
||||||
|
const handleEditorClick = () => {
|
||||||
|
if (mentionVisible.value) {
|
||||||
|
mentionVisible.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听 props 变化
|
||||||
|
watch(() => props.modelValue, (newValue) => {
|
||||||
|
if (editorRef.value && editorRef.value.innerHTML !== newValue) {
|
||||||
|
editorRef.value.innerHTML = newValue || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听上传的图片列表更新
|
||||||
|
watch(() => props.uploadedImages, (newImages) => {
|
||||||
|
mentionImageList.value = newImages || []
|
||||||
|
}, { immediate: true })
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (editorRef.value) {
|
||||||
|
editorRef.value.innerHTML = props.modelValue || ''
|
||||||
|
|
||||||
|
// 添加粘贴事件处理
|
||||||
|
editorRef.value.addEventListener('paste', (e) => {
|
||||||
|
const items = e.clipboardData.items
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
if (items[i].type.indexOf('image') !== -1) {
|
||||||
|
const blob = items[i].getAsFile()
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (event) => {
|
||||||
|
insertImage(event.target.result, 'pasted-image')
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(blob)
|
||||||
|
e.preventDefault()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
editorRef,
|
||||||
|
fileInputRef,
|
||||||
|
mentionVisible,
|
||||||
|
mentionImageList,
|
||||||
|
execCommand,
|
||||||
|
openImagePicker,
|
||||||
|
handleSelectFiles,
|
||||||
|
handleInput,
|
||||||
|
handleKeyup,
|
||||||
|
handleKeydown,
|
||||||
|
handleEditorClick,
|
||||||
|
insertMentionImage,
|
||||||
|
clear
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.rich-editor-root {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
background: #1a1b20;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
|
||||||
|
.tool-btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-editor {
|
||||||
|
min-height: 120px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #1a1b20;
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
&:empty:before {
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
color: #666;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 4px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mention-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
background: #1f2128;
|
||||||
|
border: 1px solid #3a3d47;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1000;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
.mention-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #2a2d38;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mention-thumb {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mention-label {
|
||||||
|
color: #a1a4b3;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mention-empty {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,436 @@
|
||||||
|
<template>
|
||||||
|
<div :class="prefixCls">
|
||||||
|
<div class="left">
|
||||||
|
<!-- 模式切换 -->
|
||||||
|
<div class="mode-tabs">
|
||||||
|
<button
|
||||||
|
:class="['mode-tab', { active: mode === 'text-to-video' }]"
|
||||||
|
@click="switchMode('text-to-video')">
|
||||||
|
文生视频
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="['mode-tab', { active: mode === 'image-to-video' }]"
|
||||||
|
@click="switchMode('image-to-video')">
|
||||||
|
图生视频
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上传区域 - 根据模式显示 -->
|
||||||
|
<div class="upload" v-if="mode === 'image-to-video'">
|
||||||
|
<div class="upload-title">
|
||||||
|
<div class="upload-title-left">
|
||||||
|
{{ $t('common.uploadFirstImage') || '上传参考图' }}
|
||||||
|
</div>
|
||||||
|
<div class="upload-title-tip">
|
||||||
|
{{ $t('common.uploadImageTip') || '支持PNG/JPG，最大10MB' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mf-image-upload
|
||||||
|
listType="picture-card"
|
||||||
|
uploadHeight="180px"
|
||||||
|
:show-file-list="false"
|
||||||
|
:content="$t('common.uploadFirstPlaceholder') || '点击上传参考图片'"
|
||||||
|
v-model="firstUrl" />
|
||||||
|
|
||||||
|
<!-- 可选：上传尾帧 -->
|
||||||
|
<div class="last-frame" v-if="showLastFrame">
|
||||||
|
<div class="upload-title-left">
|
||||||
|
{{ $t('common.uploadLastPlaceholder') || '上传尾帧（可选）' }}
|
||||||
|
</div>
|
||||||
|
<mf-image-upload
|
||||||
|
listType="picture-card"
|
||||||
|
uploadHeight="120px"
|
||||||
|
:show-file-list="false"
|
||||||
|
:content="$t('common.uploadLastPlaceholder') || '点击上传尾帧'"
|
||||||
|
v-model="lastUrl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模型选择 -->
|
||||||
|
<div class="model-select">
|
||||||
|
<div class="model-title">{{ $t('common.selectModel') || '选择模型' }}</div>
|
||||||
|
<a-select v-model="selectedModel" style="width: 100%;">
|
||||||
|
<a-option
|
||||||
|
v-for="option in modelOptions"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value">
|
||||||
|
{{ option.label }}
|
||||||
|
</a-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 富文本编辑器 - 加大输入框 -->
|
||||||
|
<div class="rich-editor-container">
|
||||||
|
<RichTextEditor
|
||||||
|
v-model="editorContent"
|
||||||
|
:placeholder="$t('common.textVideoPlaceholder') || '描述视频内容，例如：一个女孩在海边跳舞...'"
|
||||||
|
:uploaded-images="uploadedImages"
|
||||||
|
@text-change="handleTextChange"
|
||||||
|
@image-upload="handleImageUpload"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mf-button
|
||||||
|
class="submit"
|
||||||
|
type="primary"
|
||||||
|
size="large"
|
||||||
|
:loading="generateLoading"
|
||||||
|
@click="generateVideo">
|
||||||
|
{{
|
||||||
|
price
|
||||||
|
? `${$t('common.createVideo', { price: price })}`
|
||||||
|
: $t('common.generateVideo')
|
||||||
|
}}
|
||||||
|
</mf-button>
|
||||||
|
<div class="submit-tip">
|
||||||
|
{{ $t('common.generateTip') || '生成视频需要消耗余额' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧结果区 -->
|
||||||
|
<div class="right" :class="{ 'has-result': showResult }">
|
||||||
|
<div v-if="!showResult" class="empty-state">
|
||||||
|
<img src="/images/empty-video.png" alt="视频生成" />
|
||||||
|
<p>生成的视频将在这里显示</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="result-container">
|
||||||
|
<div class="result-video-wrapper">
|
||||||
|
<video
|
||||||
|
v-if="videoUrl"
|
||||||
|
:src="videoUrl"
|
||||||
|
controls
|
||||||
|
autoplay
|
||||||
|
class="result-video"
|
||||||
|
:poster="firstUrl?.url || ''">
|
||||||
|
您的浏览器不支持视频播放。
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result-actions">
|
||||||
|
<mf-button v-if="canCancel" @click="cancelTask" type="danger">
|
||||||
|
取消任务
|
||||||
|
</mf-button>
|
||||||
|
<mf-button @click="saveVideo" :disabled="!videoUrl">
|
||||||
|
<a-image src="/images/btn_save.png" /> 保存视频
|
||||||
|
</mf-button>
|
||||||
|
<mf-button @click="closeResult">
|
||||||
|
<a-image src="/images/btn_close.png" /> 关闭
|
||||||
|
</mf-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import RichTextEditor from '@/components/RichTextEditor.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'VideoGen',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
prefixCls: 'video-gen',
|
||||||
|
mode: 'text-to-video', // 'text-to-video' 或 'image-to-video'
|
||||||
|
firstUrl: '',
|
||||||
|
lastUrl: '',
|
||||||
|
editorContent: '',
|
||||||
|
interval: null,
|
||||||
|
videoUrl: null,
|
||||||
|
videoLoading: false,
|
||||||
|
generateLoading: false,
|
||||||
|
videoId: null,
|
||||||
|
showResult: false,
|
||||||
|
price: null,
|
||||||
|
id: null,
|
||||||
|
modelOptions: [
|
||||||
|
{ label: 'Seedance 2.0', value: 'ep-20260326165811-dlkth' },
|
||||||
|
{ label: 'Seedance 2.0 Fast', value: 'ep-20260326170056-dkj9m' }
|
||||||
|
],
|
||||||
|
selectedModel: 'ep-20260326165811-dlkth',
|
||||||
|
uploadedImages: [],
|
||||||
|
showLastFrame: false,
|
||||||
|
maxPollAttempts: 40
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
RichTextEditor
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['lang'])
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadPriceInfo()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadPriceInfo() {
|
||||||
|
this.$axios({
|
||||||
|
url: 'api/manager/selectInfo',
|
||||||
|
method: 'GET',
|
||||||
|
data: { aiType: '21' }
|
||||||
|
}).then((res) => {
|
||||||
|
this.price = res.data?.price
|
||||||
|
this.id = res.data?.id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTextChange(content) {
|
||||||
|
this.editorContent = content
|
||||||
|
},
|
||||||
|
|
||||||
|
handleImageUpload(imageInfo) {
|
||||||
|
if (imageInfo && imageInfo.url) {
|
||||||
|
this.uploadedImages.push({
|
||||||
|
url: imageInfo.url,
|
||||||
|
name: imageInfo.name || 'image'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
generateVideo() {
|
||||||
|
if (this.mode === 'image-to-video') {
|
||||||
|
const firstImageUrl = typeof this.firstUrl === 'object' ? this.firstUrl.url : this.firstUrl
|
||||||
|
if (!firstImageUrl) {
|
||||||
|
this.$message.error(this.$t('common.uploadFirstImageError') || '请上传参考图')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} else if (!this.editorContent.trim()) {
|
||||||
|
this.$message.error('请输入视频描述文本')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.generateLoading = true
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
text: this.editorContent || '一个优雅的女孩在阳光下跳舞',
|
||||||
|
functionType: '21',
|
||||||
|
model: this.selectedModel
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图生视频模式需要上传图片
|
||||||
|
if (this.mode === 'image-to-video') {
|
||||||
|
const firstImageUrl = typeof this.firstUrl === 'object' ? this.firstUrl.url : this.firstUrl
|
||||||
|
params.firstUrl = firstImageUrl
|
||||||
|
|
||||||
|
if (this.lastUrl) {
|
||||||
|
params.lastUrl = typeof this.lastUrl === 'object' ? this.lastUrl.url : this.lastUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$axios({
|
||||||
|
url: 'api/ai/imgToVideo',
|
||||||
|
method: 'POST',
|
||||||
|
data: params
|
||||||
|
}).then((res) => {
|
||||||
|
this.generateLoading = false
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.videoId = res.data.id
|
||||||
|
this.showResult = true
|
||||||
|
this.getVideo(res.data.id)
|
||||||
|
} else if (res.code == -1) {
|
||||||
|
this.$confirm({
|
||||||
|
title: this.$t('common.notice'),
|
||||||
|
content: this.$t('common.balenceLow'),
|
||||||
|
onOk: () => this.$router.push('/recharge')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.generateLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getVideo(videoId) {
|
||||||
|
let attempts = 0
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
attempts++
|
||||||
|
if (attempts > this.maxPollAttempts) {
|
||||||
|
this.$message.warning('视频生成超时')
|
||||||
|
this.destroyInterval()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$axios({
|
||||||
|
url: `api/ai/${videoId}`,
|
||||||
|
method: 'GET'
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 200 && res.data.status === 'succeeded') {
|
||||||
|
this.videoUrl = res.data.content?.video_url || res.data.video_url
|
||||||
|
this.destroyInterval()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 3000)
|
||||||
|
},
|
||||||
|
|
||||||
|
destroyInterval() {
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
this.interval = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
saveVideo() {
|
||||||
|
if (!this.videoUrl) return
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = this.videoUrl
|
||||||
|
link.download = `video_${Date.now()}.mp4`
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
},
|
||||||
|
|
||||||
|
closeResult() {
|
||||||
|
this.showResult = false
|
||||||
|
this.videoUrl = null
|
||||||
|
this.videoId = null
|
||||||
|
this.taskStatus = null
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消任务
|
||||||
|
async cancelTask() {
|
||||||
|
if (!this.videoId) return
|
||||||
|
|
||||||
|
this.$confirm({
|
||||||
|
title: '取消任务',
|
||||||
|
content: '确定要取消当前视频生成任务吗？取消后余额将退回。',
|
||||||
|
okText: '确定取消',
|
||||||
|
cancelText: '关闭',
|
||||||
|
onOk: async () => {
|
||||||
|
try {
|
||||||
|
const res = await this.$axios({
|
||||||
|
url: `api/ai/${this.videoId}/cancel`,
|
||||||
|
method: 'POST'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success('任务已取消，余额已退回')
|
||||||
|
this.destroyInterval()
|
||||||
|
this.showResult = false
|
||||||
|
this.videoUrl = null
|
||||||
|
this.videoId = null
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg || '取消失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.$message.error('取消请求失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算属性：是否可以取消
|
||||||
|
canCancel() {
|
||||||
|
return this.videoId && !this.videoUrl
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
this.destroyInterval()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.video-gen {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #0f1014;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 480px;
|
||||||
|
background: #1a1b20;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-select {
|
||||||
|
margin: 16px 0;
|
||||||
|
|
||||||
|
.model-title {
|
||||||
|
color: #ddd;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-editor-container {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 320px;
|
||||||
|
margin: 16px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
:deep(.rich-editor-root) {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.rich-editor) {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 280px !important;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.75;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.has-result {
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 120px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-video-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-video {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue