From 48aced8b6e48df444e8bbdea83649cdbdcccb2df Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Mon, 24 Jun 2024 22:03:46 +0800
Subject: [PATCH] wip: create course generate

---
 .../aigc/course-generate/CGTaskCard.vue       | 69 ++++++++++++++++---
 .../aigc/course-generate/CourseGenerate.vue   | 58 ++++++++++++----
 composables/useDownload.ts                    | 16 +++++
 composables/useFileGo.ts                      | 10 +--
 4 files changed, 126 insertions(+), 27 deletions(-)
 create mode 100644 composables/useDownload.ts

diff --git a/components/aigc/course-generate/CGTaskCard.vue b/components/aigc/course-generate/CGTaskCard.vue
index 8466dc5..5512bea 100644
--- a/components/aigc/course-generate/CGTaskCard.vue
+++ b/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="[
               [{
diff --git a/components/aigc/course-generate/CourseGenerate.vue b/components/aigc/course-generate/CourseGenerate.vue
index 7284cde..a09ae2a 100644
--- a/components/aigc/course-generate/CourseGenerate.vue
+++ b/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="i in [...new Array(9)]"/>
-
+        <CGTaskCard v-for="(course, index) in courseList" :key="index" :course="course"/>
       </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: '主线路',
-                value: 'main',
-              }, {
-                label: '备用线路',
-                value: 'standby1',
-              }]"
+                  label: '主线路',
+                  value: 'main',
+                }, {
+                  label: '备用线路',
+                  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">
diff --git a/composables/useDownload.ts b/composables/useDownload.ts
new file mode 100644
index 0000000..301ddc0
--- /dev/null
+++ b/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 }
+}
\ No newline at end of file
diff --git a/composables/useFileGo.ts b/composables/useFileGo.ts
index ec56618..19cbbea 100644
--- a/composables/useFileGo.ts
+++ b/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)
-        let url = res.split('?')[0]
+        await putOSS(file, res.data)
+        let url = res.data.split('?')[0]
         resolve(url)
       } catch (err) {
         reject(err)