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

Initial commit: AIGC项目完整代码

Browse Source
This commit is contained in:
AIGC Developer
2025-10-21 16:50:33 +08:00
commit 47c8e02ab0
137 changed files with 30676 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

794
demo/frontend/src/views/MyWorks.vue Normal file
View File

@@ -0,0 +1,794 @@
<template>
<div class="works-page">
<div class="toolbar">
<el-radio-group v-model="activeTab" size="small" class="seg-control">
<el-radio-button label="all">全部</el-radio-button>
<el-radio-button label="video">视频</el-radio-button>
<el-radio-button label="image">图片</el-radio-button>
</el-radio-group>
</div>
<div class="filters-bar">
<el-space wrap size="small" class="filters">
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
<el-select v-model="category" placeholder="任务类型" size="small" style="width: 120px" @change="onFilterChange">
<el-option label="全部" value="all" />
<el-option label="文生视频" value="text2video" />
<el-option label="图生视频" value="image2video" />
<el-option label="分镜视频" value="storyboard" />
<el-option label="参考图" value="reference" />
</el-select>
<el-select v-model="resolution" placeholder="清晰度" clearable size="small" style="width: 120px">
<el-option label="标清" value="sd" />
<el-option label="高清" value="hd" />
<el-option label="超清" value="uhd" />
</el-select>
<el-select v-model="sortBy" size="small" style="width: 120px">
<el-option label="比例" value="ratio" />
<el-option label="时间" value="date" />
<el-option label="热门" value="hot" />
</el-select>
<el-select v-model="order" size="small" style="width: 100px">
<el-option label="升序" value="asc" />
<el-option label="降序" value="desc" />
</el-select>
</el-space>
<div class="right">
<el-input v-model="keyword" placeholder="名字/提示词/ID" size="small" clearable style="width: 220px" @keyup.enter.native="reload" />
</div>
</div>
<div class="select-row">
<el-checkbox v-model="multiSelect" size="small">选择多个</el-checkbox>
<template v-if="multiSelect && selectedIds.size">
<el-tag type="success" size="small">已选 {{ selectedIds.size }} 个项目</el-tag>
<el-button size="small" type="primary" @click="bulkDownload" plain>下载</el-button>
<el-button size="small" type="danger" @click="bulkDelete" plain>删除</el-button>
</template>
</div>
<el-row :gutter="16" class="works-grid">
<el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
<el-card class="work-card" :class="{ selected: selectedIds.has(item.id) }" shadow="hover">
<div class="thumb" @click="multiSelect ? toggleSelect(item.id) : openDetail(item)">
<img :src="item.cover" :alt="item.title" />
<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="收藏" 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="download_with_watermark">带水印下载</el-dropdown-item>
<el-dropdown-item command="download_without_watermark">
不带水印下载
<el-tag type="primary" size="small" style="margin-left: 8px;">会员</el-tag>
</el-dropdown-item>
<el-dropdown-item command="rename" divided>重命名</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="meta">
<div class="title" :title="item.title">{{ item.title }}</div>
<div class="sub">{{ item.id }} · {{ item.sizeText }}</div>
</div>
<template #footer>
<el-space size="small">
<el-button text size="small" @click.stop="download(item)">下载</el-button>
<el-button text size="small" @click.stop="share(item)">分享</el-button>
</el-space>
</template>
</el-card>
</el-col>
</el-row>
<!-- 作品详情模态框 -->
<el-dialog
v-model="detailDialogVisible"
:title="selectedItem?.title"
width="60%"
:before-close="handleClose"
class="detail-dialog"
:modal="true"
:close-on-click-modal="true"
:close-on-press-escape="true"
>
<div class="detail-content" v-if="selectedItem">
<div class="detail-left">
<div class="video-container">
<video
v-if="selectedItem.type === 'video'"
class="detail-video"
:src="selectedItem.cover"
:poster="selectedItem.cover"
controls
>
您的浏览器不支持视频播放
</video>
<img
v-else
class="detail-image"
:src="selectedItem.cover"
:alt="selectedItem.title"
/>
<!-- 视频文字叠加 -->
<div class="video-overlay" v-if="selectedItem.type === 'video' && selectedItem.overlayText">
<div class="overlay-text">{{ selectedItem.overlayText }}</div>
</div>
</div>
</div>
<div class="detail-right">
<!-- 用户信息头部 -->
<div class="detail-header">
<div class="user-info">
<div class="avatar">
<el-icon><User /></el-icon>
</div>
<div class="username">mingzi_FBx7foZYDS7inL</div>
</div>
</div>
<!-- 标签页 -->
<div class="tabs">
<div class="tab" :class="{ active: activeDetailTab === 'detail' }" @click="activeDetailTab = 'detail'">作品详情</div>
<div class="tab" :class="{ active: activeDetailTab === 'category' }" @click="activeDetailTab = 'category'">{{ selectedItem.category }}</div>
</div>
<!-- 描述区域 -->
<div class="description-section" v-if="activeDetailTab === 'detail'">
<h3 class="section-title">描述</h3>
<p class="description-text">{{ getDescription(selectedItem) }}</p>
</div>
<!-- 参考图特殊内容 -->
<div class="reference-content" v-if="activeDetailTab === 'category' && selectedItem.category === '参考图'">
<div class="input-details-section">
<h3 class="section-title">输入详情</h3>
<div class="input-images">
<div class="input-image-item">
<img :src="selectedItem.cover" :alt="selectedItem.title" class="input-thumbnail" />
</div>
<div class="input-image-item">
<img :src="selectedItem.cover" :alt="selectedItem.title" class="input-thumbnail" />
</div>
</div>
</div>
<div class="description-section">
<h3 class="section-title">描述</h3>
<p class="description-text">图1在图2中奔跑视频</p>
</div>
</div>
<!-- 其他分类的内容 -->
<div class="description-section" v-if="activeDetailTab === 'category' && selectedItem.category !== '参考图'">
<h3 class="section-title">描述</h3>
<p class="description-text">{{ getDescription(selectedItem) }}</p>
</div>
<!-- 元数据区域 -->
<div class="metadata-section">
<div class="metadata-item">
<span class="label">创建时间</span>
<span class="value">{{ selectedItem.createTime }}</span>
</div>
<div class="metadata-item">
<span class="label">作品 ID</span>
<span class="value">{{ selectedItem.id }}</span>
</div>
<div class="metadata-item">
<span class="label">日期</span>
<span class="value">{{ selectedItem.date }}</span>
</div>
<div class="metadata-item" v-if="selectedItem.type === 'video'">
<span class="label">时长</span>
<span class="value">5s</span>
</div>
<div class="metadata-item" v-if="selectedItem.type === 'video'">
<span class="label">清晰度</span>
<span class="value">1080p</span>
</div>
<div class="metadata-item">
<span class="label">分类</span>
<span class="value">{{ selectedItem.category }}</span>
</div>
<div class="metadata-item" v-if="selectedItem.type === 'video'">
<span class="label">宽高比</span>
<span class="value">16:9</span>
</div>
</div>
<!-- 操作按钮 -->
<div class="action-section">
<button class="create-similar-btn" @click="createSimilar">
做同款
</button>
</div>
</div>
</div>
</el-dialog>
<div class="finished" v-if="!hasMore && filteredItems.length>0">已加载全部内容</div>
<el-empty v-if="!loading && filteredItems.length===0" description="没有找到相关内容" />
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star, MoreFilled, User } from '@element-plus/icons-vue'
const router = useRouter()
const activeTab = ref('all')
const dateRange = ref([])
const category = ref('all')
const resolution = ref('')
const sortBy = ref('date')
const order = ref('desc')
const keyword = ref('')
const multiSelect = ref(false)
const selectedIds = ref(new Set())
// 模态框相关状态
const detailDialogVisible = ref(false)
const selectedItem = ref(null)
const activeDetailTab = ref('detail')
const page = ref(1)
const pageSize = ref(4)
const loading = ref(false)
const hasMore = ref(true)
const items = ref([])
const mockData = (count, startId = 1) => Array.from({ length: count }).map((_, i) => {
const id = startId + i
// 定义不同的分类和类型
const categories = [
{ type: 'image', category: '参考图', title: '图片作品' },
{ type: 'image', category: '参考图', title: '图片作品' },
{ type: 'video', category: '文生视频', title: '视频作品' },
{ type: 'video', category: '图生视频', title: '视频作品' }
]
const itemConfig = categories[i] || categories[0]
// 生成不同的日期
const dates = ['2025/01/15', '2025/01/14', '2025/01/13', '2025/01/12']
const createTimes = ['2025/01/15 14:30', '2025/01/14 16:45', '2025/01/13 09:20', '2025/01/12 11:15']
return {
id: `2995${id.toString().padStart(9,'0')}`,
title: `${itemConfig.title} #${id}`,
type: itemConfig.type,
category: itemConfig.category,
sizeText: itemConfig.type === 'video' ? '9 MB' : '6 MB',
cover: itemConfig.type === 'video'
? '/images/backgrounds/welcome.jpg'
: '/images/backgrounds/login.png',
createTime: createTimes[i] || createTimes[0],
date: dates[i] || dates[0]
}
})
const loadList = async () => {
loading.value = true
// TODO: 替换为真实接口
await new Promise(r => setTimeout(r, 400))
const data = mockData(pageSize.value, (page.value - 1) * pageSize.value + 1)
if (page.value === 1) items.value = []
items.value = items.value.concat(data)
hasMore.value = false
loading.value = false
}
// 筛选后的作品列表
const filteredItems = computed(() => {
let filtered = [...items.value]
// 按类型筛选（全部/视频/图片）
if (activeTab.value === 'video') {
filtered = filtered.filter(item => item.type === 'video')
} else if (activeTab.value === 'image') {
filtered = filtered.filter(item => item.type === 'image')
}
// 按分类筛选
if (category.value !== 'all') {
const categoryMap = {
'text2video': '文生视频',
'image2video': '图生视频',
'storyboard': '分镜视频',
'reference': '参考图'
}
const targetCategory = categoryMap[category.value]
if (targetCategory) {
filtered = filtered.filter(item => item.category === targetCategory)
}
}
// 按关键词筛选
if (keyword.value) {
const keywordLower = keyword.value.toLowerCase()
filtered = filtered.filter(item =>
item.title.toLowerCase().includes(keywordLower) ||
item.id.includes(keywordLower)
)
}
return filtered
})
const reload = () => {
page.value = 1
hasMore.value = true
loadList()
}
// 筛选变化时的处理
const onFilterChange = () => {
// 筛选是响应式的，不需要额外处理
console.log('筛选条件变化:', { category: category.value, activeTab: activeTab.value })
}
const loadMore = () => {
if (loading.value || !hasMore.value) return
page.value += 1
loadList()
}
const openDetail = (item) => {
selectedItem.value = item
detailDialogVisible.value = true
}
// 获取作品描述
const getDescription = (item) => {
if (item.type === 'video') {
return '影片捕捉了暴风雪中的午夜时分,坐落在积雪覆盖的悬崖顶上的孤立灯塔。相机逐渐放大灯塔的灯光,穿透飞舞的雪花,投射出幽幽的光芒。在白茫茫的环境中,灯塔的黑色轮廓显得格外醒目,呼啸的风声和远处海浪的撞击声增强了孤独的氛围。这一场景展示了灯塔的孤独力量。'
} else {
return '这是一张精美的参考图片，展现了独特的艺术风格和创意构思。图片构图优美，色彩搭配和谐，具有很高的艺术价值和参考意义。'
}
}
// 关闭模态框
const handleClose = () => {
detailDialogVisible.value = false
selectedItem.value = null
activeDetailTab.value = 'detail'
}
// 创建同款
const createSimilar = () => {
ElMessage.info('跳转到创作页面')
}
const download = (item) => {
ElMessage.success(`开始下载：${item.title}`)
}
const share = (item) => {
ElMessageBox.alert('分享链接功能即将上线', '提示')
}
const moreCommand = async (cmd, item) => {
if (cmd === 'download_with_watermark') {
ElMessage.success('开始下载带水印版本')
} else if (cmd === 'download_without_watermark') {
ElMessage.success('开始下载不带水印版本（会员专享）')
} else if (cmd === 'rename') {
ElMessage.info('重命名功能开发中')
} else if (cmd === 'delete') {
try {
await ElMessageBox.confirm('确定删除该作品吗？', '删除确认', {
type: 'warning',
confirmButtonText: '删除',
cancelButtonText: '取消'
})
ElMessage.success('已删除')
} catch (_) {}
}
}
const toggleSelect = (id) => {
const next = new Set(selectedIds.value)
if (next.has(id)) next.delete(id)
else next.add(id)
selectedIds.value = next
}
const bulkDownload = () => {
ElMessage.success(`开始下载 ${selectedIds.value.size} 个文件`)
}
const bulkDelete = async () => {
try {
await ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.size} 个项目吗？`, '删除确认', {
type: 'warning',
confirmButtonText: '删除',
cancelButtonText: '取消'
})
ElMessage.success('已删除选中项目')
selectedIds.value = new Set()
} catch (_) {}
}
onMounted(() => {
loadList()
})
</script>
<style scoped>
.works-page {
padding: 16px 20px;
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0 4px;
}
.seg-control { margin-left: 2px; }
:deep(.seg-control .el-radio-button__inner) {
height: 36px;
line-height: 36px;
padding: 0 18px;
font-size: 14px;
background-color: #0a0a0a; /* 与页面背景相同 */
color: #cbd5e1;
border-color: #2a2a2a;
}
:deep(.seg-control .el-radio-button:first-child .el-radio-button__inner) { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
:deep(.seg-control .el-radio-button:last-child .el-radio-button__inner) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
:deep(.seg-control .el-radio-button.is-active .el-radio-button__inner) {
background-color: #23262b; /* 比背景略亮，保持可区分 */
color: #ffffff;
border-color: #3a3a3a;
}
.filters { margin-left: 10px; }
.filters-bar {
display:flex;
align-items:center;
justify-content: space-between;
padding: 4px 0 2px;
/* 覆盖 Element Plus 变量，确保与页面背景一致 */
--el-input-bg-color: #0a0a0a;
--el-fill-color-blank: #0a0a0a;
--el-border-color: #2a2a2a;
--el-text-color-regular: #cbd5e1;
}
:deep(.filters .el-select .el-input__wrapper),
:deep(.filters .el-date-editor.el-input__wrapper),
:deep(.filters .el-input__wrapper) {
background-color: #0a0a0a; /* 与页面背景相同 */
border-color: #2a2a2a;
box-shadow: none;
}
:deep(.filters .el-input__wrapper.is-focus) { border-color: #3a3a3a; box-shadow: none; }
:deep(.filters .el-input__inner) { color: #cbd5e1; }
:deep(.filters .el-input__suffix) { color: #cbd5e1; }
.select-row { padding: 4px 0 8px; }
.works-grid { margin-top: 12px; }
.work-card { margin-bottom: 14px; }
.thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 6px; cursor: pointer; }
.thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.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; }
.work-card.selected .thumb::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid #409eff;
border-radius: 6px;
box-shadow: 0 0 0 2px rgba(64,158,255,0.15) inset;
}
.meta { margin-top: 10px; }
.title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: #909399; font-size: 12px; margin-top: 4px; }
.finished { text-align: center; color: #909399; margin: 14px 0 4px; font-size: 12px; }
/* 让卡片与页面背景一致 */
:deep(.work-card.el-card) {
background-color: #0a0a0a;
border-color: #1f2937;
color: #e5e7eb;
}
:deep(.work-card .el-card__body) {
background-color: #0a0a0a;
}
:deep(.work-card .el-card__footer) {
background-color: #0a0a0a;
border-top: 1px solid #1f2937;
}
/* 模态框样式 */
:deep(.detail-dialog .el-dialog) {
background: #0a0a0a !important;
border-radius: 12px;
border: 1px solid #333;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}
:deep(.detail-dialog .el-dialog__header) {
background: #0a0a0a !important;
border-bottom: 1px solid #333;
padding: 16px 20px;
}
:deep(.detail-dialog .el-dialog__title) {
color: #fff !important;
font-size: 18px;
font-weight: 600;
}
:deep(.detail-dialog .el-dialog__headerbtn) {
color: #fff !important;
}
:deep(.detail-dialog .el-dialog__body) {
background: #0a0a0a !important;
padding: 0 !important;
}
:deep(.detail-dialog .el-overlay) {
background-color: rgba(0, 0, 0, 0.8) !important;
}
/* 强制覆盖Element Plus默认样式 */
:deep(.el-dialog) {
background: #0a0a0a !important;
}
:deep(.el-dialog__wrapper) {
background-color: rgba(0, 0, 0, 0.8) !important;
}
.detail-content {
display: flex;
height: 50vh;
background: #0a0a0a;
}
.detail-left {
flex: 2;
display: flex;
align-items: center;
justify-content: center;
background: #000;
position: relative;
}
.video-container {
position: relative;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.detail-video, .detail-image {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.video-overlay {
position: absolute;
bottom: 80px;
left: 20px;
z-index: 10;
}
.overlay-text {
font-family: 'Brush Script MT', cursive;
font-size: 24px;
color: #8b5cf6;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
font-weight: bold;
}
.detail-right {
flex: 1;
background: #0a0a0a;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
}
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
}
.avatar {
width: 40px;
height: 40px;
background: #409eff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
}
.username {
font-size: 16px;
font-weight: 500;
color: #fff;
}
.tabs {
display: flex;
gap: 0;
}
.tab {
padding: 8px 16px;
background: transparent;
color: #9ca3af;
cursor: pointer;
border-radius: 6px;
transition: all 0.3s;
font-size: 14px;
}
.tab.active {
background: #409eff;
color: #fff;
}
.tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.description-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #fff;
margin: 0;
}
.description-text {
font-size: 14px;
line-height: 1.6;
color: #d1d5db;
margin: 0;
}
/* 参考图特殊内容样式 */
.reference-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.input-details-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.input-images {
display: flex;
gap: 12px;
}
.input-image-item {
flex: 1;
}
.input-thumbnail {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #333;
}
.metadata-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.metadata-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.label {
font-size: 14px;
color: #9ca3af;
}
.value {
font-size: 14px;
color: #fff;
font-weight: 500;
}
.action-section {
margin-top: auto;
padding-top: 20px;
}
.create-similar-btn {
width: 100%;
background: #409eff;
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.create-similar-btn:hover {
background: #337ecc;
transform: translateY(-2px);
}
.create-similar-btn:active {
transform: translateY(0);
}
/* 更强制性的样式覆盖 */
:deep(.detail-dialog) {
background: #0a0a0a !important;
}
:deep(.detail-dialog .el-dialog__wrapper) {
background-color: rgba(0, 0, 0, 0.8) !important;
}
:deep(.detail-dialog .el-overlay-dialog) {
background: #0a0a0a !important;
border: none !important;
box-shadow: none !important;
}
/* 全局模态框样式覆盖 */
:deep(.el-dialog__wrapper) {
background-color: rgba(0, 0, 0, 0.8) !important;
}
:deep(.el-overlay) {
background-color: rgba(0, 0, 0, 0.8) !important;
}
</style>