XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 生成视频快速预览、AIGC 导航新增 DS

Browse Source
This commit is contained in:
Timothy Yin
2025-02-10 15:35:39 +08:00
parent b792d4d33a
commit 11a8a47401
4 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/aigc/generation/GBTaskCard.vue
View File

@@ -15,6 +15,7 @@ const emit = defineEmits({
const dayjs = useDayjs()
const toast = useToast()
const isPreviewModalOpen = ref(false)
const isFullContentOpen = ref(false)
const downloadingState = reactive({
subtitle: 0,
@@ -82,7 +83,7 @@ const onClick = () => {
<div
class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
>
<div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden">
<div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group">
<div v-if="!video.video_cover" class="w-full h-full bg-primary flex flex-col justify-center items-center gap-2">
<UIcon class="animate-spin text-4xl text-white" name="tabler:loader"/>
<div class="flex flex-col items-center gap-0.5">
@@ -91,6 +92,11 @@ const onClick = () => {
</div>
</div>
<NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
<div class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300">
<div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
<Icon name="i-tabler-play" class="text-white text-3xl" />
</div>
</div>
</div>
<div class="flex-1 flex flex-col justify-between gap-2">
<div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
@@ -186,6 +192,23 @@ const onClick = () => {
</template>
</UCard>
</UModal>
<UModal v-model="isPreviewModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
<p>绿幕视频预览</p>
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
{{ video.title }}
</p>
</div>
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
</div>
</template>
<video class="w-full rounded shadow" controls autoplay :src="video.video_url" />
</UCard>
</UModal>
</div>
</template>