wip: create course generate

components/aigc/course-generate/CGTaskCard.vue

@@ -1,20 +1,62 @@
 <script setup lang="ts">
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDownload } from '~/composables/useDownload'
 
+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+
+const stateDisplay = computed(() => {
+  if (props.course.progress === -1) return {
+    color: 'red',
+    text: '失败',
+  }
+  if (props.course.progress === 100) return {
+    color: 'green',
+    text: '完成',
+  }
+  return {
+    color: 'blue',
+    text: '进行中',
+  }
+})
 </script>
 
 <template>
   <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden">
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
+  >
     <div class="relative w-full aspect-video">
       <NuxtImg
-        :src="`http://localhost:3000/${Math.random() > 0.5 ? 'demo' : 'demo2'}.jpg`"
+        v-if="!!course.video_cover"
+        :src="course.video_cover"
         alt="image"
         class="w-full h-full object-cover pointer-events-none absolute inset-0"
       />
+      <div
+        v-else
+        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center"
+      >
+        <Icon class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video"/>
+      </div>
       <div class="absolute inset-2 flex justify-end items-start">
-        <UTooltip :prevent="false" :shortcuts="['Ctrl', 'C']" text="出现错误">
-          <UBadge class="shadow" color="green" size="sm" variant="soft">
-            已完成
+        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
+          <UBadge
+            :color="stateDisplay.color"
+            :variant="stateDisplay.color === 'red' ? 'solid' : 'subtle'"
+            class="shadow"
+            size="sm"
+          >
+            <Icon
+              v-if="stateDisplay.color === 'red'"
+              class="text-base mr-0.5"
+              name="i-tabler-alert-triangle"
+            />
+            {{ stateDisplay.text }}
           </UBadge>
         </UTooltip>
       </div>
@@ -24,14 +66,14 @@
         <h1 class="text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
             title="课程名字课程名字课程名字课程名字课程名字课程名字课程名字课程名字">
           <Icon class="-mt-0.5 -ml-0.5 text-base" name="i-tabler-book-2"/>
-          <span>课程名字</span>
+          <span class="pl-0.5">{{ course.title }}</span>
         </h1>
         <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
-          <span>2024-06-20 17:34:20</span>
+          <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
           <button
             class="hover:text-primary font-medium"
             tabindex="-1"
-            title="5cb35fbd-4f8a-4105-9b10-d828f3b0f553"
+            :title="course.task_id"
           >
             复制ID
           </button>
@@ -39,7 +81,16 @@
       </div>
       <div class="flex items-center gap-1">
         <UButtonGroup>
-          <UButton color="white" label="下载" leading-icon="i-tabler-download" size="xs"/>
+          <UButton
+            color="white"
+            label="下载"
+            leading-icon="i-tabler-download"
+            size="xs"
+            @click="() => {
+              const {download} = useDownload(course.video_url, `眩生花微课_${course.title}_${course.task_id}.mp4`)
+              download()
+            }"
+          />
           <UDropdown
             :items="[
               [{