xsh-assistant-next/pages/aigc/generation/course.vue

<script lang="ts" setup>
import CGTaskCard from '~/components/aigc/course-generate/CGTaskCard.vue'
import { useFetchWrapped } from '~/composables/useFetchWrapped'
import ModalAuthentication from '~/components/ModalAuthentication.vue'
import SlideCreateCourse from '~/components/SlideCreateCourse.vue'

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: 16,
  }), {
    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 class="font-sans h-full">
    <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 h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
        <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"
          >
            <CGTaskCard
              v-for="(course, index) in courseList?.data.items"
              :key="course.task_id || 'unknown' + index"
              :course="course"
              @delete="task_id => onCourseDelete(task_id)"
            />
          </TransitionGroup>
        </div>
        <div class="flex justify-end mt-4">
          <UPagination v-model="page" :page-count="16" :total="courseList?.data.total || 0"/>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.loading-screen-leave-active {
  @apply transition-all duration-300;
}

.loading-screen-leave-to {
  @apply opacity-0;
}

.card-move,
.card-enter-active,
.card-leave-active {
  @apply transition-all duration-300;
}

.card-enter-from,
.card-leave-to {
  @apply opacity-0;
}

.card-leave-active {
  @apply absolute;
}
</style>