frontend: 删除我的作品页面中的收藏按钮和更多操作按钮

This commit is contained in:
AIGC Developer
2026-01-19 14:17:47 +08:00
parent 8404cb2b7a
commit 9b11571022

View File

@@ -196,18 +196,6 @@
<div class="checker" v-if="multiSelect">
<el-checkbox :model-value="selectedIds.has(item.id)" @change="() => toggleSelect(item.id)" />
</div>
<div class="actions" @click.stop>
<el-tooltip :content="t('works.favorite')" placement="top"><el-button circle size="small" text><el-icon><Star /></el-icon></el-button></el-tooltip>
<el-dropdown @command="(cmd)=>moreCommand(cmd,item)">
<el-button circle size="small" text><el-icon><MoreFilled /></el-icon></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="rename">{{ t('works.rename') }}</el-dropdown-item>
<el-dropdown-item command="delete">{{ t('common.delete') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 鼠标悬停时显示的按钮区域 -->
<div class="hover-buttons-container">
<!-- 做同款按钮 - 左下角 -->
@@ -236,7 +224,7 @@
<template #footer>
<el-space size="small">
<el-button text size="small" @click.stop="download(item)">{{ t('video.download') }}</el-button>
<el-button text size="small" type="danger" @click.stop="handleDeleteWork(item)">{{ t('common.delete') || '删除' }}</el-button>
<el-button text size="small" type="danger" @click.stop="handleDeleteWork(item)">{{ t('common.delete') }}</el-button>
</el-space>
</template>
</el-card>
@@ -457,7 +445,7 @@
import { ref, onMounted, onActivated, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star, User, Compass, Document, VideoPlay, Picture, Film, Search, MoreFilled, Loading, ArrowUp, VideoCamera, Refresh, Delete, CopyDocument, Download, Close, Setting, Lock, Warning } from '@element-plus/icons-vue'
import { Star, User, Compass, Document, VideoPlay, Picture, Film, Search, Loading, ArrowUp, VideoCamera, Refresh, Delete, CopyDocument, Download, Close, Setting, Lock, Warning } from '@element-plus/icons-vue'
import { getMyWorks, getWorkDetail, deleteWork, recordDownload, getWorkFileUrl } from '@/api/userWorks'
import { getCurrentUser } from '@/api/auth'
import { useUserStore } from '@/stores/user'
@@ -569,12 +557,12 @@ const transformWorkData = (work) => {
return {
id: work.id?.toString() || work.taskId || '',
taskId: work.taskId || work.id?.toString() || '',
title: work.title || work.prompt || '未命名作品',
title: work.title || work.prompt || t('common.untitledWork'),
cover: cover,
resultUrl: resultUrl || '',
type: work.workType === 'TEXT_TO_VIDEO' || work.workType === 'IMAGE_TO_VIDEO' || work.workType === 'STORYBOARD_VIDEO' ? 'video' : 'image',
category: work.workType === 'TEXT_TO_VIDEO' ? '文生视频' : work.workType === 'IMAGE_TO_VIDEO' ? '图生视频' : work.workType === 'STORYBOARD_VIDEO' ? '分镜视频' : work.workType === 'STORYBOARD_IMAGE' ? '分镜图' : '未知',
sizeText: work.fileSize || '未知大小',
category: work.workType === 'TEXT_TO_VIDEO' ? t('common.textToVideoCategory') : work.workType === 'IMAGE_TO_VIDEO' ? t('common.imageToVideoCategory') : work.workType === 'STORYBOARD_VIDEO' ? t('common.storyboardVideoCategory') : work.workType === 'STORYBOARD_IMAGE' ? t('common.storyboardImageCategory') : t('common.unknownCategory'),
sizeText: work.fileSize || t('common.unknownSize'),
createTime: work.createdAt ? new Date(work.createdAt).toLocaleString('zh-CN') : '',
date: work.createdAt ? new Date(work.createdAt).toLocaleDateString('zh-CN') : '',
description: work.description || work.prompt || '',
@@ -582,7 +570,7 @@ const transformWorkData = (work) => {
duration: work.duration || work.videoDuration || work.length || '',
aspectRatio: work.aspectRatio || work.ratio || work.aspect || '',
quality: work.quality || work.resolution || '',
username: work.username || work.user?.username || work.creator || work.author || work.owner || '未知用户',
username: work.username || work.user?.username || work.creator || work.author || work.owner || t('common.unknownUser'),
status: work.status || 'COMPLETED',
uploadedImages: work.uploadedImages || null, // 分镜图阶段用户上传的参考图
videoReferenceImages: work.videoReferenceImages || null, // 视频阶段用户上传的参考图(分镜视频做同款需要)
@@ -1313,61 +1301,32 @@ const download = async (item) => {
}
}
const moreCommand = async (cmd, item) => {
if (cmd === 'rename') {
ElMessage.info(t('works.renameDevMsg'))
} else if (cmd === 'delete') {
try {
await ElMessageBox.confirm(t('works.deleteWorkConfirm'), t('works.deleteConfirmTitle'), {
type: 'warning',
confirmButtonText: t('common.delete'),
cancelButtonText: t('common.cancel')
})
// 执行删除
const response = await deleteWork(item.id)
if (response.data.success) {
ElMessage.success(t('works.deleteSuccess'))
// 从列表中移除
items.value = items.value.filter(i => i.id !== item.id)
} else {
throw new Error(response.data.message || t('works.deleteFailed'))
}
} catch (error) {
if (error !== 'cancel') {
console.error('删除作品失败:', error)
ElMessage.error(error.message || t('works.deleteFailed'))
}
}
}
}
// 删除单个作品
const handleDeleteWork = async (item) => {
try {
await ElMessageBox.confirm(
t('works.deleteWorkConfirm') || `确定要删除作品"${item.title}"吗?`,
t('works.deleteConfirmTitle') || '删除确认',
t('works.deleteWorkConfirm'),
t('works.deleteConfirmTitle'),
{
type: 'warning',
confirmButtonText: t('common.delete') || '删除',
cancelButtonText: t('common.cancel') || '取消'
confirmButtonText: t('common.delete'),
cancelButtonText: t('common.cancel')
}
)
// 执行删除
const response = await deleteWork(item.id)
if (response.data.success) {
ElMessage.success(t('works.deleteSuccess') || '删除成功')
ElMessage.success(t('works.deleteSuccess'))
// 从列表中移除
items.value = items.value.filter(i => i.id !== item.id)
} else {
throw new Error(response.data.message || t('works.deleteFailed') || '删除失败')
throw new Error(response.data.message || t('works.deleteFailed'))
}
} catch (error) {
if (error !== 'cancel') {
console.error('删除作品失败:', error)
ElMessage.error(error.message || t('works.deleteFailed') || '删除失败')
ElMessage.error(error.message || t('works.deleteFailed'))
}
}
}
@@ -1685,7 +1644,7 @@ const loadUserInfo = async () => {
return
}
console.error('加载用户信息失败:', error)
ElMessage.error(t('profile.loadUserInfoFailed') + ': ' + (error.message || '未知错误'))
ElMessage.error(t('profile.loadUserInfoFailed') + ': ' + (error.message || t('common.unknownError')))
}
}
@@ -2262,8 +2221,6 @@ onActivated(() => {
background: rgba(0, 0, 0, 0.5);
}
.checker { position: absolute; left: 6px; top: 6px; }
.actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.thumb:hover .actions { opacity: 1; }
/* 鼠标悬停时显示的按钮容器 */
.hover-buttons-container {