feat:z 优化
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,306 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-modal
|
|
||||||
:open="visible"
|
|
||||||
title="我创建的"
|
|
||||||
:width="700"
|
|
||||||
:footer="null"
|
|
||||||
@cancel="handleClose"
|
|
||||||
>
|
|
||||||
<div class="favorites-content">
|
|
||||||
<!-- 操作栏 -->
|
|
||||||
<div class="action-bar">
|
|
||||||
<a-button type="primary" @click="handleCreate">
|
|
||||||
<template #icon><PlusOutlined /></template>
|
|
||||||
新建风格
|
|
||||||
</a-button>
|
|
||||||
<a-button @click="loadList" :loading="loading">
|
|
||||||
<template #icon><ReloadOutlined /></template>
|
|
||||||
刷新
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
|
||||||
<div class="favorites-list" v-if="!loading && list.length > 0">
|
|
||||||
<div
|
|
||||||
v-for="item in list"
|
|
||||||
:key="item.id"
|
|
||||||
class="favorite-card"
|
|
||||||
>
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="card-name">{{ item.name }}</span>
|
|
||||||
<div class="card-actions">
|
|
||||||
<a-button type="link" size="small" @click="handleEdit(item)">编辑</a-button>
|
|
||||||
<a-popconfirm
|
|
||||||
title="确定删除此风格？"
|
|
||||||
@confirm="handleDelete(item.id)"
|
|
||||||
>
|
|
||||||
<a-button type="link" size="small" danger>删除</a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-content">{{ item.content }}</div>
|
|
||||||
<div class="card-footer">
|
|
||||||
<span class="card-category" v-if="item.category">{{ item.category }}</span>
|
|
||||||
<span class="card-use-count">使用 {{ item.useCount || 0 }} 次</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 空状态 -->
|
|
||||||
<div class="empty-state" v-if="!loading && list.length === 0">
|
|
||||||
<p>暂无收藏的风格</p>
|
|
||||||
<a-button type="primary" @click="handleCreate">立即创建</a-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 加载状态 -->
|
|
||||||
<div class="loading-state" v-if="loading">
|
|
||||||
<a-spin />
|
|
||||||
<span>加载中...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 编辑弹窗 -->
|
|
||||||
<a-modal
|
|
||||||
v-model:open="editVisible"
|
|
||||||
:title="editingItem ? '编辑风格' : '新建风格'"
|
|
||||||
:width="500"
|
|
||||||
@ok="handleSave"
|
|
||||||
:confirmLoading="saving"
|
|
||||||
>
|
|
||||||
<a-form layout="vertical">
|
|
||||||
<a-form-item label="风格名称" required>
|
|
||||||
<a-input v-model:value="editForm.name" placeholder="请输入风格名称" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="风格内容" required>
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="editForm.content"
|
|
||||||
:rows="6"
|
|
||||||
placeholder="请输入风格提示词内容"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="分类">
|
|
||||||
<a-input v-model:value="editForm.category" placeholder="可选，用于分类管理" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-modal>
|
|
||||||
</a-modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch } from 'vue'
|
|
||||||
import { message } from 'ant-design-vue'
|
|
||||||
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
|
||||||
import { UserPromptApi } from '@/api/userPrompt'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible', 'refresh'])
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
const list = ref([])
|
|
||||||
const editVisible = ref(false)
|
|
||||||
const editingItem = ref(null)
|
|
||||||
const saving = ref(false)
|
|
||||||
|
|
||||||
const editForm = ref({
|
|
||||||
name: '',
|
|
||||||
content: '',
|
|
||||||
category: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 加载列表
|
|
||||||
async function loadList() {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const res = await UserPromptApi.getUserPromptList()
|
|
||||||
if (res.code === 0) {
|
|
||||||
list.value = res.data || []
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载列表失败:', error)
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建新风格
|
|
||||||
function handleCreate() {
|
|
||||||
editingItem.value = null
|
|
||||||
editForm.value = {
|
|
||||||
name: '',
|
|
||||||
content: '',
|
|
||||||
category: ''
|
|
||||||
}
|
|
||||||
editVisible.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
// 编辑风格
|
|
||||||
function handleEdit(item) {
|
|
||||||
editingItem.value = item
|
|
||||||
editForm.value = {
|
|
||||||
name: item.name,
|
|
||||||
content: item.content,
|
|
||||||
category: item.category || ''
|
|
||||||
}
|
|
||||||
editVisible.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存风格
|
|
||||||
async function handleSave() {
|
|
||||||
if (!editForm.value.name.trim()) {
|
|
||||||
message.warning('请输入风格名称')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!editForm.value.content.trim()) {
|
|
||||||
message.warning('请输入风格内容')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
saving.value = true
|
|
||||||
try {
|
|
||||||
const data = {
|
|
||||||
name: editForm.value.name.trim(),
|
|
||||||
content: editForm.value.content.trim(),
|
|
||||||
category: editForm.value.category.trim() || null,
|
|
||||||
status: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
if (editingItem.value) {
|
|
||||||
// 更新
|
|
||||||
await UserPromptApi.updateUserPrompt({
|
|
||||||
id: editingItem.value.id,
|
|
||||||
...data
|
|
||||||
})
|
|
||||||
message.success('更新成功')
|
|
||||||
} else {
|
|
||||||
// 创建
|
|
||||||
await UserPromptApi.createUserPrompt(data)
|
|
||||||
message.success('创建成功')
|
|
||||||
}
|
|
||||||
|
|
||||||
editVisible.value = false
|
|
||||||
loadList()
|
|
||||||
emit('refresh')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存失败:', error)
|
|
||||||
message.error('保存失败')
|
|
||||||
} finally {
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除风格
|
|
||||||
async function handleDelete(id) {
|
|
||||||
try {
|
|
||||||
await UserPromptApi.deleteUserPrompt(id)
|
|
||||||
message.success('删除成功')
|
|
||||||
loadList()
|
|
||||||
emit('refresh')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('删除失败:', error)
|
|
||||||
message.error('删除失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
function handleClose() {
|
|
||||||
emit('update:visible', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听 visible 变化
|
|
||||||
watch(() => props.visible, (newVal) => {
|
|
||||||
if (newVal) {
|
|
||||||
loadList()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.favorites-content {
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-bar {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorites-list {
|
|
||||||
display: grid;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorite-card {
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--color-surface);
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-name {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 15px;
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.6;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--color-text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-category {
|
|
||||||
padding: 2px 8px;
|
|
||||||
background: rgba(24, 144, 255, 0.1);
|
|
||||||
color: #1890ff;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state,
|
|
||||||
.loading-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-modal
|
|
||||||
v-model:open="modalVisible"
|
|
||||||
title="批量分组"
|
|
||||||
centered
|
|
||||||
@ok="handleConfirm"
|
|
||||||
@cancel="handleCancel"
|
|
||||||
>
|
|
||||||
<a-form layout="vertical">
|
|
||||||
<a-form-item label="选择分组" required>
|
|
||||||
<a-select
|
|
||||||
v-model:value="selectedGroupId"
|
|
||||||
placeholder="请选择要添加到的分组"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
|
|
||||||
{{ group.name }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<div style="margin-top: 16px; padding: 12px; background: var(--color-bg-2); border-radius: var(--radius-card);">
|
|
||||||
<p style="margin: 0; font-size: 13px; color: var(--color-text-2);">
|
|
||||||
{{ groupingInfo }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a-form>
|
|
||||||
</a-modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch, computed } from 'vue'
|
|
||||||
import { message } from 'ant-design-vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
open: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
groupList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
// 可选的信息，组件会显示但不会强依赖
|
|
||||||
fileName: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
fileCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:open', 'confirm', 'cancel'])
|
|
||||||
|
|
||||||
// 数据
|
|
||||||
const selectedGroupId = ref(null)
|
|
||||||
const modalVisible = ref(false)
|
|
||||||
|
|
||||||
// 计算分组提示信息
|
|
||||||
const groupingInfo = computed(() => {
|
|
||||||
if (props.fileName) {
|
|
||||||
return `将为文件 "${props.fileName}" 添加到选中的分组中`
|
|
||||||
}
|
|
||||||
if (props.fileCount > 0) {
|
|
||||||
return `将为 ${props.fileCount} 个文件添加到选中的分组中`
|
|
||||||
}
|
|
||||||
return '将为选中文件添加到选中的分组中'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听 open 变化
|
|
||||||
watch(() => props.open, (newVal) => {
|
|
||||||
modalVisible.value = newVal
|
|
||||||
if (!newVal) {
|
|
||||||
selectedGroupId.value = null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 处理确认
|
|
||||||
const handleConfirm = () => {
|
|
||||||
if (!selectedGroupId.value) {
|
|
||||||
message.warning('请选择分组')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('confirm', selectedGroupId.value)
|
|
||||||
handleCancel()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理取消
|
|
||||||
const handleCancel = () => {
|
|
||||||
modalVisible.value = false
|
|
||||||
selectedGroupId.value = null
|
|
||||||
emit('update:open', false)
|
|
||||||
emit('cancel')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-modal
|
|
||||||
v-model:open="modalVisible"
|
|
||||||
title="素材混剪"
|
|
||||||
centered
|
|
||||||
:confirm-loading="loading"
|
|
||||||
ok-text="确定"
|
|
||||||
cancel-text="取消"
|
|
||||||
@ok="handleConfirm"
|
|
||||||
@cancel="handleCancel"
|
|
||||||
>
|
|
||||||
<div class="mix-modal__summary">
|
|
||||||
<p>视频分组：{{ getGroupName(videoGroupId) || '未选择' }}</p>
|
|
||||||
<p>视频数量：{{ videoGroupFiles.length }} 个</p>
|
|
||||||
<p style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
|
|
||||||
纯画面模式：仅拼接视频片段，无配音、无背景音乐
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<a-form layout="vertical">
|
|
||||||
<a-form-item label="选择视频分组" required>
|
|
||||||
<a-select
|
|
||||||
v-model:value="videoGroupId"
|
|
||||||
placeholder="请选择视频分组"
|
|
||||||
style="width: 100%"
|
|
||||||
@change="handleVideoGroupChange"
|
|
||||||
>
|
|
||||||
<a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
|
|
||||||
{{ group.name }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item label="视频标题" required>
|
|
||||||
<a-input v-model:value="mixForm.title" placeholder="请输入生成视频标题（仅用于记录）" />
|
|
||||||
<div style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
|
|
||||||
标题仅用于任务记录，不会在视频上显示
|
|
||||||
</div>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, watch, computed } from 'vue'
|
|
||||||
import { message } from 'ant-design-vue'
|
|
||||||
import { MaterialService } from '@/api/material'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
open: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
groupList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:open', 'confirm', 'cancel'])
|
|
||||||
|
|
||||||
// 数据
|
|
||||||
const modalVisible = ref(false)
|
|
||||||
const videoGroupId = ref(null)
|
|
||||||
const videoGroupFiles = ref([])
|
|
||||||
|
|
||||||
const mixForm = reactive({
|
|
||||||
title: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 获取分组名称
|
|
||||||
const getGroupName = (groupId) => {
|
|
||||||
if (!groupId) return ''
|
|
||||||
const group = props.groupList.find(g => g.id === groupId)
|
|
||||||
return group?.name || ''
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听 open 变化
|
|
||||||
watch(() => props.open, (newVal) => {
|
|
||||||
modalVisible.value = newVal
|
|
||||||
if (newVal) {
|
|
||||||
resetForm()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 处理视频分组变化
|
|
||||||
const handleVideoGroupChange = async (groupId) => {
|
|
||||||
console.log('[MaterialMixModal] handleVideoGroupChange called with groupId:', groupId)
|
|
||||||
|
|
||||||
if (!groupId) {
|
|
||||||
videoGroupFiles.value = []
|
|
||||||
console.log('[MaterialMixModal] groupId is empty, videoGroupFiles cleared')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('[MaterialMixModal] Loading video files for group:', groupId)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await MaterialService.getFilePage({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 100,
|
|
||||||
groupId: groupId,
|
|
||||||
fileCategory: 'video'
|
|
||||||
})
|
|
||||||
if (res.code === 0) {
|
|
||||||
videoGroupFiles.value = res.data.list || []
|
|
||||||
console.log('[MaterialMixModal] Loaded video files:', videoGroupFiles.value.length, 'files')
|
|
||||||
} else {
|
|
||||||
console.error('[MaterialMixModal] Failed to load video files:', res.msg)
|
|
||||||
message.error(res.msg || '加载分组文件失败')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[MaterialMixModal] Error loading video files:', error)
|
|
||||||
message.error('加载分组文件失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重置表单
|
|
||||||
const resetForm = () => {
|
|
||||||
mixForm.title = ''
|
|
||||||
videoGroupId.value = null
|
|
||||||
videoGroupFiles.value = []
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暴露给父组件的方法
|
|
||||||
defineExpose({
|
|
||||||
resetForm
|
|
||||||
})
|
|
||||||
|
|
||||||
// 处理确认
|
|
||||||
const handleConfirm = async () => {
|
|
||||||
const title = mixForm.title.trim()
|
|
||||||
|
|
||||||
if (!videoGroupId.value) {
|
|
||||||
message.warning('请选择视频分组')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!title) {
|
|
||||||
message.warning('请输入视频标题')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果当前没有视频文件，重新加载一次
|
|
||||||
if (videoGroupFiles.value.length === 0) {
|
|
||||||
message.loading('正在加载视频文件...', 0)
|
|
||||||
await handleVideoGroupChange(videoGroupId.value)
|
|
||||||
message.destroy()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (videoGroupFiles.value.length === 0) {
|
|
||||||
message.warning('所选分组下没有视频文件，请检查分组设置或更换分组')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提取视频URL
|
|
||||||
const videoUrls = videoGroupFiles.value
|
|
||||||
.map(file => file?.fileUrl || file?.imgUrl)
|
|
||||||
.filter(Boolean)
|
|
||||||
|
|
||||||
if (videoUrls.length === 0) {
|
|
||||||
message.warning('视频分组中没有有效的视频文件')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('confirm', {
|
|
||||||
title,
|
|
||||||
videoUrls
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理取消
|
|
||||||
const handleCancel = () => {
|
|
||||||
modalVisible.value = false
|
|
||||||
emit('update:open', false)
|
|
||||||
emit('cancel')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.mix-modal__summary {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 12px;
|
|
||||||
background: var(--color-bg-2);
|
|
||||||
border: 1px dashed var(--color-border);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--color-text-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mix-modal__summary p {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user