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

feat: 添加噜噜支付SDK和前端懒加载指令

Browse Source
This commit is contained in:
AIGC Developer
2026-01-06 14:33:01 +08:00
parent a99cfa28e5
commit a66bd806b2
32 changed files with 1236 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
demo/frontend/src/views/MyWorks.vue
View File

@@ -170,10 +170,10 @@
@loadedmetadata="onVideoLoaded"
@error="onVideoError"
></video>
<!-- 如果有封面图，使用图片 -->
<!-- 如果有封面图，使用图片（懒加载） -->
<img
v-else-if="item.cover"
:src="item.cover"
v-lazy:loading="item.cover"
:alt="item.title"
@error="onImageError"
/>
@@ -208,21 +208,28 @@
</template>
</el-dropdown>
</div>
<!-- 鼠标悬停时显示的做同款按钮 -->
<div class="hover-create-btn" @click.stop="createSimilar(item)">
<el-button type="primary" size="small" round>
<el-icon><VideoPlay /></el-icon>
{{ t('profile.createSimilar') }}
</el-button>
<!-- 鼠标悬停时显示的按钮区域 -->
<div class="hover-buttons-container">
<!-- 做同款按钮 - 左下角 -->
<div class="hover-create-btn left" @click.stop="createSimilar(item)">
<el-button type="primary" size="small" round>
<el-icon><VideoPlay /></el-icon>
{{ t('profile.createSimilar') }}
</el-button>
</div>
<!-- 生视频按钮 - 右下角（仅分镜图显示） -->
<div v-if="item.category === '分镜图' || item.workType === 'STORYBOARD_IMAGE'" class="hover-create-btn right" @click.stop="goToGenerateVideo(item)">
<el-button type="success" size="small" round>
<el-icon><Film /></el-icon>
{{ t('video.storyboard.generateVideo') }}
</el-button>
</div>
</div>
</div>
<div class="meta">
<div class="title" :title="item.title">{{ item.title }}</div>
<div class="sub">
{{ item.date || t('profile.unknown') }} · {{ item.id }}
<span v-if="item.quality && item.type !== 'image'" class="quality-badge" :class="`quality-${(item.quality || '').toLowerCase()}`">
{{ formatQuality(item.quality) }}
</span>
<span v-if="item.sizeText && item.sizeText !== '未知大小'"> · {{ item.sizeText }}</span>
</div>
</div>
@@ -358,13 +365,6 @@
<span class="value">{{ selectedItem.aspectRatio || '16:9' }}</span>
</div>
</div>
<!-- 底部操作按钮 -->
<div class="action-section">
<button class="create-similar-btn full-width" @click="createSimilar(selectedItem)">
{{ t('works.createSimilar') }}
</button>
</div>
</div>
</div>
</el-dialog>
@@ -566,8 +566,10 @@ const transformWorkData = (work) => {
quality: work.quality || work.resolution || '',
username: work.username || work.user?.username || work.creator || work.author || work.owner || '未知用户',
status: work.status || 'COMPLETED',
uploadedImages: work.uploadedImages || null, // 用户上传的参考图，用于做同款
uploadedImages: work.uploadedImages || null, // 分镜图阶段用户上传的参考图
videoReferenceImages: work.videoReferenceImages || null, // 视频阶段用户上传的参考图（分镜视频做同款需要）
imagePrompt: work.imagePrompt || null, // 分镜图优化后的提示词
videoPrompt: work.videoPrompt || null, // 视频优化后的提示词
workType: work.workType || '', // 原始作品类型
// overlayText 已移除，前端详情不再显示浮动文本
}
@@ -1113,12 +1115,6 @@ const createSimilar = (item) => {
query.referenceImage = item.cover
}
// 用户上传的参考图（分镜图/分镜视频做同款需要）
// uploadedImages 现在存储的是 COS URL，可以直接通过 URL 传递
if (item.uploadedImages) {
query.uploadedImages = item.uploadedImages
}
console.log('[做同款] 跳转参数:', query, 'category:', item.category, 'workType:', item.workType)
if (item.category === '文生视频') {
@@ -1131,14 +1127,22 @@ const createSimilar = (item) => {
if (item.imagePrompt) {
query.imagePrompt = item.imagePrompt
}
// 传递分镜图阶段的参考图
if (item.uploadedImages) {
query.uploadedImages = item.uploadedImages
}
router.push({ path: '/storyboard-video/create', query })
} else if (item.category === '分镜视频') {
// 分镜视频做同款：进入 Step 2（生成视频），携带已生成的分镜图
// 分镜视频做同款：进入 Step 2（生成视频），携带已生成的分镜图和视频参考图
query.step = 'video'
// cover 是分镜图（thumbnailUrl），传递给 Step 2 作为分镜图参考
// cover 是分镜图（thumbnailUrl），传递给 Step 2 作为分镜图
if (item.cover && item.cover !== '/images/backgrounds/welcome.jpg') {
query.storyboardImage = item.cover
}
// 传递视频阶段的参考图（videoReferenceImages），不是分镜图阶段的参考图
if (item.videoReferenceImages) {
query.videoReferenceImages = item.videoReferenceImages
}
router.push({ path: '/storyboard-video/create', query })
} else {
// 默认跳转到文生视频
@@ -1148,6 +1152,38 @@ const createSimilar = (item) => {
ElMessage.success(t('works.createSimilarInfo', { title: item.title }))
}
// 生视频 - 使用分镜图直接生成视频
const goToGenerateVideo = (item) => {
if (!item) return
// 跳转到图生视频创作页面，传递分镜图作为参考图
const query = {
aspectRatio: item.aspectRatio || '',
duration: item.duration || '',
hdMode: item.quality === 'HD' ? 'true' : 'false'
}
// 使用分镜图作为参考图
if (item.cover && item.cover !== '/images/backgrounds/welcome.jpg') {
query.referenceImage = item.cover
} else if (item.resultUrl) {
query.referenceImage = item.resultUrl
}
// 传递视频提示词：优先使用 videoPrompt，其次 imagePrompt，最后 prompt
if (item.videoPrompt) {
query.prompt = item.videoPrompt
} else if (item.imagePrompt) {
query.prompt = item.imagePrompt
} else if (item.prompt) {
query.prompt = item.prompt
}
console.log('[生视频] 跳转到图生视频页面，参数:', query)
router.push({ path: '/image-to-video/create', query })
ElMessage.success(t('works.readyToGenerateVideo'))
}
const download = async (item) => {
try {
// 检查是否有结果URL
@@ -1648,6 +1684,31 @@ onActivated(() => {
</script>
<style scoped>
/* 图片懒加载样式 */
.lazy-loading {
background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
background-size: 200% 100%;
animation: lazy-shimmer 1.5s infinite;
}
.lazy-loaded {
animation: lazy-fade-in 0.3s ease-in;
}
.lazy-error {
background: #1a1a1a;
}
@keyframes lazy-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes lazy-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.works-page {
height: 100vh;
background: #0a0a0a;
@@ -2174,17 +2235,39 @@ onActivated(() => {
.actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.thumb:hover .actions { opacity: 1; }
/* 鼠标悬停时显示的做同款按钮 */
.hover-create-btn {
/* 鼠标悬停时显示的按钮容器 */
.hover-buttons-container {
position: absolute;
right: 6px;
left: 0;
right: 0;
bottom: 6px;
display: flex;
justify-content: space-between;
padding: 0 6px;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 10;
}
.thumb:hover .hover-buttons-container {
opacity: 1;
transform: translateY(0);
}
/* 鼠标悬停时显示的做同款按钮 */
.hover-create-btn {
transition: all 0.3s ease;
}
.hover-create-btn.left {
/* 左下角 */
}
.hover-create-btn.right {
/* 右下角 */
}
.thumb:hover .hover-create-btn {
opacity: 1;
transform: translateY(0);
@@ -2201,6 +2284,16 @@ onActivated(() => {
background: rgba(64, 158, 255, 1);
transform: scale(1.05);
}
/* 生视频按钮样式 */
.hover-create-btn.right .el-button {
background: rgba(103, 194, 58, 0.9);
box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}
.hover-create-btn.right .el-button:hover {
background: rgba(103, 194, 58, 1);
}
.work-card.selected .thumb::after {
content: '';
position: absolute;