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="出现错误">
+        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
-          <UBadge class="shadow" color="green" size="sm" variant="soft">
+          <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="[
               [{

components/aigc/course-generate/CourseGenerate.vue

@@ -6,6 +6,7 @@ import { type InferType, number, object, string } from 'yup'
 import type { FormSubmitEvent } from '#ui/types'
 
 const loginState = useLoginState()
+const toast = useToast()
 
 const isCreateCourseModalOpen = ref(false)
 
@@ -23,7 +24,9 @@ const {
     to_user_id: loginState.user.id,
     page: 1,
     perpage: 10,
-  }),
+  }), {
+    transform: res => res?.data.items || [],
+  },
 )
 
 const onCreateCourseClick = () => {
@@ -44,8 +47,36 @@ const createCourseState = reactive({
   speed: 1.0,
 })
 
+const selected_file = ref<File[] | null>(null)
+
 const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>) => {
   console.log(event.data)
+  if (!selected_file.value) {
+    toast.add({
+      title: '未选择文件',
+      description: '请先选择 PPTX 文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+  // upload PPTX file
+  useFileGo(selected_file.value[0]).then(url => {
+    useFetchWrapped<req.gen.CourseGenCreate & AuthedRequest, resp.gen.CourseGenCreate>('App.Digital_Convert.Create', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      task_title: event.data.task_title,
+      gen_server: event.data.gen_server as 'main' | 'standby1',
+      speed: event.data.speed,
+      ppt_url: url,
+      digital_human_id: '40696',
+      custom_video: '[]',
+      opening_url: '',
+      ending_url: '',
+    }).then(res => {
+      console.log(res)
+    })
+  })
 }
 </script>
 
@@ -63,12 +94,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
       />
     </div>
     <div class="p-4">
-      <pre>{{ JSON.stringify(courseList, null, 2) }}</pre>
       <div class="relative grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-4">
-
+        <CGTaskCard v-for="(course, index) in courseList" :key="index" :course="course"/>
-        <CGTaskCard v-for="i in [...new Array(9)]"/>
-
       </div>
+      <pre class="overflow-hidden">{{ JSON.stringify(courseList, null, 2) }}</pre>
     </div>
 
     <UModal
@@ -99,19 +128,19 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
         >
           <div class="flex justify-between gap-2 *:flex-1">
             <UFormGroup label="微课标题" name="task_title">
-              <UInput v-model="createCourseState.task_title"/>
+              <UInput v-model="createCourseState.task_title" placeholder="请输入微课标题"/>
             </UFormGroup>
 
             <UFormGroup label="生成线路" name="gen_server">
               <USelectMenu
                 v-model="createCourseState.gen_server"
                 :options="[{
-                label: '主线路',
+                  label: '主线路',
-                value: 'main',
+                  value: 'main',
-              }, {
+                }, {
-                label: '备用线路',
+                  label: '备用线路',
-                value: 'standby1',
+                  value: 'standby1',
-              }]"
+                }]"
                 option-attribute="label"
                 value-attribute="value"
               />
@@ -130,7 +159,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
           </UFormGroup>
 
           <UFormGroup label="PPT 文件">
-            <FileDnD accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
+            <FileDnD
+              accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
+              @change="file => selected_file = file"
+            />
           </UFormGroup>
 
           <div class="flex justify-end space-x-4 pt-4">

composables/useDownload.ts

@@ -0,0 +1,16 @@
+export const useDownload = (url: string, filename: string) => {
+  const download = () => {
+    fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const url = window.URL.createObjectURL(new Blob([blob]))
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', filename)
+      document.body.appendChild(link)
+      link.click()
+      link.parentNode?.removeChild(link)
+    })
+  }
+  return { download }
+}

composables/useFileGo.ts

@@ -1,4 +1,4 @@
-import {useFetchWrapped} from '~/composables/useFetchWrapped';
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
 
 const putOSS = (file: File, signed_url: string) => new Promise<void>((resolve, reject) => {
   let xhr = new XMLHttpRequest()
@@ -16,17 +16,17 @@ const putOSS = (file: File, signed_url: string) => new Promise<void>((resolve, r
 })
 
 export const useFileGo = (file: File) => new Promise<string>((resolve, reject) => {
-  useFetchWrapped<req.file.Upload & AuthedRequest, string>('App.Tools_Upload.GoOss', {
+  useFetchWrapped<req.file.Upload & AuthedRequest, BaseResponse<string>>('App.Tools_Upload.UploadOssMaterial', {
     token: useLoginState().token!,
     user_id: useLoginState().user.id,
     file_name: file.name,
     file_type: file.type,
     file_size: file.size,
   }).then(async res => {
-    if (res !== '') {
+    if (res.data !== '') {
       try {
-        await putOSS(file, res)
+        await putOSS(file, res.data)
-        let url = res.split('?')[0]
+        let url = res.data.split('?')[0]
         resolve(url)
       } catch (err) {
         reject(err)