166 lines
4.2 KiB
Vue
166 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
|
import ModalAuthentication from '~/components/ModalAuthentication.vue'
|
|
import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
|
|
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
|
|
|
const toast = useToast()
|
|
const modal = useModal()
|
|
const slide = useSlideover()
|
|
const loginState = useLoginState()
|
|
|
|
const deletePending = ref(false)
|
|
const page = ref(1)
|
|
|
|
const { data: courseList, refresh: refreshCourseList } = useAsyncData(
|
|
() =>
|
|
useFetchWrapped<
|
|
req.gen.CourseGenList & AuthedRequest,
|
|
BaseResponse<PagedData<resp.gen.CourseGenItem>>
|
|
>('App.Digital_Convert.GetList', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
page: page.value,
|
|
perpage: 15,
|
|
}),
|
|
{
|
|
watch: [page],
|
|
}
|
|
)
|
|
|
|
const onCreateCourseClick = () => {
|
|
slide.open(SlideCreateCourse, {
|
|
onSuccess: () => {
|
|
refreshCourseList()
|
|
},
|
|
})
|
|
}
|
|
|
|
const onCourseDelete = (task_id: string) => {
|
|
if (!task_id) return
|
|
deletePending.value = true
|
|
useFetchWrapped<
|
|
req.gen.CourseGenDelete & AuthedRequest,
|
|
BaseResponse<resp.gen.CourseGenDelete>
|
|
>('App.Digital_Convert.Delete', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
task_id,
|
|
})
|
|
.then((res) => {
|
|
if (res.ret === 200) {
|
|
toast.add({
|
|
title: '删除成功',
|
|
description: '已删除任务记录',
|
|
color: 'green',
|
|
icon: 'i-tabler-check',
|
|
})
|
|
} else {
|
|
toast.add({
|
|
title: '删除失败',
|
|
description: res.msg || '未知错误',
|
|
color: 'red',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
}
|
|
})
|
|
.finally(() => {
|
|
deletePending.value = false
|
|
refreshCourseList()
|
|
})
|
|
}
|
|
|
|
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(refreshCourseList, 1000 * 5)
|
|
onBeforeUnmount(() => clearInterval(i))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="p-4 pb-0">
|
|
<BubbleTitle
|
|
subtitle="VIDEOS"
|
|
title="我的微课视频"
|
|
>
|
|
<template #action>
|
|
<UButton
|
|
:trailing="false"
|
|
color="primary"
|
|
icon="i-tabler-plus"
|
|
label="新建微课"
|
|
size="md"
|
|
variant="solid"
|
|
@click="
|
|
() => {
|
|
if (!loginState.is_logged_in) {
|
|
modal.open(ModalAuthentication)
|
|
return
|
|
}
|
|
onCreateCourseClick()
|
|
}
|
|
"
|
|
/>
|
|
</template>
|
|
</BubbleTitle>
|
|
<GradientDivider />
|
|
</div>
|
|
<Transition name="loading-screen">
|
|
<div
|
|
v-if="courseList?.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
|
|
class="p-4"
|
|
>
|
|
<div
|
|
class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4"
|
|
>
|
|
<TransitionGroup
|
|
name="card"
|
|
@beforeLeave="beforeLeave"
|
|
@leave="leave"
|
|
>
|
|
<AigcGenerationCGTaskCard
|
|
v-for="(course, index) in courseList?.data.items"
|
|
:key="course.task_id || 'unknown' + index"
|
|
:course="course"
|
|
@delete="(task_id: string) => onCourseDelete(task_id)"
|
|
/>
|
|
</TransitionGroup>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<UPagination
|
|
v-model="page"
|
|
:max="9"
|
|
:page-count="16"
|
|
:total="courseList?.data.total || 0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|