feat: 绿幕视频创建和微课视频创建
This commit is contained in:
@@ -1,10 +1,204 @@
|
||||
<script lang="ts" setup>
|
||||
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
||||
import GBTaskCard from '~/components/aigc/generation/GBTaskCard.vue'
|
||||
import { useTourState } from '~/composables/useTourState'
|
||||
import SlideCreateCourseGreen from '~/components/SlideCreateCourseGreen.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const slide = useSlideover()
|
||||
const toast = useToast()
|
||||
const loginState = useLoginState()
|
||||
const tourState = useTourState()
|
||||
|
||||
const page = ref(1)
|
||||
const pageCount = ref(15)
|
||||
const searchInput = ref('')
|
||||
const debounceSearch = refDebounced(searchInput, 1000)
|
||||
|
||||
watch(debounceSearch, () => page.value = 1)
|
||||
|
||||
const {
|
||||
data: videoList,
|
||||
refresh: refreshVideoList,
|
||||
} = useAsyncData(
|
||||
() => useFetchWrapped<
|
||||
req.gen.GBVideoList & AuthedRequest,
|
||||
BaseResponse<PagedData<GBVideoItem>>
|
||||
>('App.Digital_VideoTask.GetList', {
|
||||
token: loginState.token!,
|
||||
user_id: loginState.user.id,
|
||||
to_user_id: loginState.user.id,
|
||||
page: page.value,
|
||||
perpage: pageCount.value,
|
||||
title: debounceSearch.value,
|
||||
}), {
|
||||
watch: [page, pageCount, debounceSearch],
|
||||
},
|
||||
)
|
||||
|
||||
const onCreateCourseGreenClick = () => {
|
||||
slide.open(SlideCreateCourseGreen, {
|
||||
onSuccess: () => {
|
||||
refreshVideoList()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const onCourseGreenDelete = (task: GBVideoItem) => {
|
||||
if (!task.task_id) return
|
||||
useFetchWrapped<
|
||||
req.gen.GBVideoDelete & AuthedRequest,
|
||||
BaseResponse<resp.gen.GBVideoDelete>
|
||||
>('App.Digital_VideoTask.Delete', {
|
||||
token: loginState.token!,
|
||||
user_id: loginState.user.id,
|
||||
task_id: task.task_id,
|
||||
}).then(res => {
|
||||
if (res.data.code === 1) {
|
||||
refreshVideoList()
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除任务记录',
|
||||
color: 'green',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const beforeLeave = (el: any) => {
|
||||
el.style.width = `${ el.offsetWidth }px`
|
||||
el.style.height = `${ el.offsetHeight }px`
|
||||
}
|
||||
|
||||
const leave = (el: any, done: Function) => {
|
||||
el.style.position = 'absolute'
|
||||
el.style.transition = 'none' // 取消过渡动画
|
||||
el.style.opacity = 0 // 立即隐藏元素
|
||||
done()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const i = setInterval(refreshVideoList, 1000 * 5)
|
||||
onBeforeUnmount(() => clearInterval(i))
|
||||
|
||||
const driver = useDriver({
|
||||
showProgress: true,
|
||||
animate: true,
|
||||
smoothScroll: true,
|
||||
disableActiveInteraction: true,
|
||||
popoverOffset: 12,
|
||||
progressText: '{{current}} / {{total}}',
|
||||
prevBtnText: '上一步',
|
||||
nextBtnText: '下一步',
|
||||
doneBtnText: '完成',
|
||||
steps: [
|
||||
{
|
||||
element: '#button-create',
|
||||
popover: {
|
||||
title: '新建视频',
|
||||
description: '点击这里开始新建绿幕视频',
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '#input-search',
|
||||
popover: {
|
||||
title: '搜索生成记录',
|
||||
description: '在这里输入视频标题，可以搜索符合条件的生成记录',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
tourState.autoDriveTour(route.fullPath, driver)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
绿幕视频生成
|
||||
<div class="h-full">
|
||||
<div class="p-4 pb-0">
|
||||
<BubbleTitle
|
||||
:subtitle="!debounceSearch ? 'GB VIDEOS' : 'SEARCH...'"
|
||||
:title="!debounceSearch ? '我的绿幕视频' : `标题搜索：${debounceSearch.toLocaleUpperCase()}`"
|
||||
>
|
||||
<template #action>
|
||||
<UButtonGroup size="md">
|
||||
<UInput
|
||||
id="input-search"
|
||||
v-model="searchInput"
|
||||
:autofocus="false"
|
||||
:ui="{ icon: { trailing: { pointer: '' } } }"
|
||||
autocomplete="off"
|
||||
placeholder="标题搜索"
|
||||
variant="outline"
|
||||
>
|
||||
<template #trailing>
|
||||
<UButton
|
||||
v-show="searchInput !== ''"
|
||||
:padded="false"
|
||||
color="gray"
|
||||
icon="i-tabler-x"
|
||||
variant="link"
|
||||
@click="searchInput = ''"
|
||||
/>
|
||||
</template>
|
||||
</UInput>
|
||||
</UButtonGroup>
|
||||
<UButton
|
||||
id="button-create"
|
||||
:trailing="false"
|
||||
color="primary"
|
||||
icon="i-tabler-plus"
|
||||
label="新建"
|
||||
size="md"
|
||||
variant="solid"
|
||||
@click="onCreateCourseGreenClick"
|
||||
/>
|
||||
</template>
|
||||
</BubbleTitle>
|
||||
<GradientDivider/>
|
||||
</div>
|
||||
|
||||
<Transition name="loading-screen">
|
||||
<div
|
||||
v-if="videoList?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
>
|
||||
<Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-photo-hexagon"/>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
没有记录
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="p-4">
|
||||
<div class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4">
|
||||
<TransitionGroup
|
||||
name="card"
|
||||
@beforeLeave="beforeLeave"
|
||||
@leave="leave"
|
||||
>
|
||||
<GBTaskCard
|
||||
v-for="(v, i) in videoList?.data.items"
|
||||
:key="v.task_id"
|
||||
:video="v"
|
||||
@delete="v => onCourseGreenDelete(v)"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<UPagination v-model="page" :max="9" :page-count="pageCount" :total="videoList?.data.total || 0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user