feat: tweened generate progress

components/aigc/course-generate/CourseGenerate.vue

@@ -4,12 +4,15 @@ import FileDnD from '~/components/uni/FileDnD/index.vue'
 import { useFetchWrapped } from '~/composables/useFetchWrapped'
 import { type InferType, number, object, string } from 'yup'
 import type { FormSubmitEvent } from '#ui/types'
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
 
-const loginState = useLoginState()
 const toast = useToast()
+const modal = useModal()
+const loginState = useLoginState()
 
 const isCreateCourseModalOpen = ref(false)
 const creationPending = ref(false)
+const deletePending = ref(false)
 
 const {
   data: courseList,
@@ -30,7 +33,6 @@ const {
   },
 )
 
-
 const onCreateCourseClick = () => {
   isCreateCourseModalOpen.value = true
 }
@@ -107,6 +109,39 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
   })
 }
 
+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()
+  })
+}
+
 onMounted(() => {
   const i = setInterval(refreshCourseList, 1000 * 5)
   onBeforeUnmount(() => clearInterval(i))
@@ -114,7 +149,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="font-sans">
+  <div class="font-sans h-full">
     <div class="p-4 border-b dark:border-neutral-700">
       <UButton
         :trailing="false"
@@ -123,15 +158,46 @@ onMounted(() => {
         label="新建微课"
         size="md"
         variant="solid"
-        @click="onCreateCourseClick"
+        @click="() => {
+          if (!loginState.is_logged_in) {
+            modal.open(ModalAuthentication)
+            return
+          }
+          onCreateCourseClick()
+        }"
       />
     </div>
-    <div class="p-4">
-      <div class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
-        <CGTaskCard v-for="(course, index) in courseList" :key="index" :course="course"/>
+    <Transition name="loading-screen">
+      <div v-if="!loginState.is_logged_in" class="w-full h-full">
+        <div class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
+          <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
+          <UButton class="mt-2 font-bold" color="black" variant="solid" size="xs"
+                   @click="modal.open(ModalAuthentication)">
+            登录
+          </UButton>
+        </div>
       </div>
-      <!--      <pre class="overflow-hidden">{{ JSON.stringify(courseList, null, 2) }}</pre>-->
-    </div>
+      <div v-else-if="courseList?.length === 0"
+           class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
+        <Icon name="i-tabler-photo-hexagon" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
+        <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 gap-4">
+          <TransitionGroup name="card">
+            <CGTaskCard
+              v-for="(course, index) in courseList"
+              :key="course.task_id || 'unknown' + index"
+              :course="course"
+              @delete="task_id => onCourseDelete(task_id)"
+            />
+          </TransitionGroup>
+        </div>
+      </div>
+    </Transition>
 
     <UModal
       v-model="isCreateCourseModalOpen"
@@ -220,5 +286,23 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.loading-screen-leave-active {
+  @apply transition duration-300;
+}
 
+.loading-screen-leave-to {
+  @apply opacity-0;
+}
+
+.card-enter-active, .card-leave-active {
+  transition: opacity 0.5s;
+}
+
+.card-enter, .card-leave-to {
+  opacity: 0;
+}
+
+.card-enter-to, .card-leave {
+  opacity: 1;
+}
 </style>