feat: tweened generate progress

2024-06-30 12:57:50 +08:00
parent 06a2ea704e
commit 50cce8a0db
5 changed files with 3819 additions and 3706 deletions
--- a/components/aigc/course-generate/CGTaskCard.vue
+++ b/components/aigc/course-generate/CGTaskCard.vue
@@ -2,8 +2,10 @@
 import type { PropType } from 'vue'
 import dayjs from 'dayjs'
 import { useDownload } from '~/composables/useDownload'
+import gsap from 'gsap'

 const toast = useToast()
+const { metaSymbol } = useShortcuts()

 const props = defineProps({
  course: {
@@ -11,6 +13,36 @@ const props = defineProps({
    required: true,
  },
 })
+const emit = defineEmits([
+  'delete',
+])
+
+defineShortcuts({
+  'p': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        isPreviewModalOpen.value = true
+      }
+    },
+  },
+  'meta_s': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        startDownload(props.course.subtitle_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
+      }
+    },
+  },
+  'delete': {
+    handler: () => {
+      if (isDropdownOpen.value) {
+        emit('delete', props.course.task_id)
+      }
+    },
+  },
+})
+
+const isDropdownOpen = ref(false)
+const isPreviewModalOpen = ref(false)

 const stateDisplay = computed(() => {
  if (props.course.progress === -1) return {
@@ -23,12 +55,28 @@ const stateDisplay = computed(() => {
  }
  return {
    color: 'blue',
-    text: !!props.course.progress ? `${ props.course.progress }%` : '队列中',
+    text: !!props.course.progress ? `${ tweenedGenerateProgress.value.toFixed(0) }%` : '队列中',
  }
 })
 const isFailed = computed(() => props.course.progress === -1)
 const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)

+const generateProgress = computed(() => {
+  return props.course.progress || 0
+})
+const tweenedGenerateProgress = ref(0)
+watch(generateProgress, (newValue) => {
+  gsap.to(tweenedGenerateProgress, {
+    duration: 5,
+    value: newValue,
+  })
+}, {
+  immediate: true,
+})
+watch(tweenedGenerateProgress, val => {
+  console.log(val)
+})
+
 const downloadProgress = ref(0)

 const startDownload = async (
@@ -147,32 +195,39 @@ const copyTaskId = () => {
          <UButton
            color="white"
            :disabled="!isDownloadable"
+            :loading="downloadProgress > 0 && downloadProgress < 100"
            :label="downloadProgress > 0 && downloadProgress < 100 ? `${downloadProgress.toFixed(0)}%` : '下载'"
            leading-icon="i-tabler-download"
            size="xs"
            @click="startDownload(course.video_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.mp4`)"
          />
          <UDropdown
+            v-model:open="isDropdownOpen"
            :items="[
              [{
                label: '预览课程',
                icon: 'i-tabler-play',
-                shortcuts: ['空格'],
+                shortcuts: ['P'],
                disabled: !isDownloadable,
+                click: () => isPreviewModalOpen = true,
              }, {
                label: '查看字幕',
                icon: 'i-solar-subtitles-linear',
-                shortcuts: ['Alt', 'D'],
+                shortcuts: [metaSymbol, 'D'],
                disabled: !isDownloadable,
              }, {
                label: '下载字幕',
                icon: 'i-tabler-file-download',
-                shortcuts: ['Alt', 'S'],
+                shortcuts: [metaSymbol, 'S'],
                disabled: !isDownloadable,
+                click: () => {
+                  startDownload(course.subtitle_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
+                }
              }], [{
                label: '删除记录',
                icon: 'i-tabler-trash-x',
                shortcuts: ['Delete'],
+                click: () => emit('delete', course.task_id)
              }],
            ]"
            :popper="{ placement: 'bottom-end' }"
@@ -187,6 +242,36 @@ const copyTaskId = () => {
        </UButtonGroup>
      </div>
    </div>
+    <UModal
+      v-model="isPreviewModalOpen"
+    >
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
+              <p>微课视频预览</p>
+              <p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
+                {{ course.title }}
+              </p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isPreviewModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <video
+          class="w-full rounded shadow"
+          controls
+          autoplay
+          :src="course.video_url"
+        />
+      </UCard>
+    </UModal>
  </div>
 </template>

--- a/components/aigc/course-generate/CourseGenerate.vue
+++ b/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">
+    <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>
+      <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">
-        <CGTaskCard v-for="(course, index) in courseList" :key="index" :course="course"/>
+          <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>
-      <!--      <pre class="overflow-hidden">{{ JSON.stringify(courseList, null, 2) }}</pre>-->
      </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>
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@uniiem/object-trim": "^0.2.0",
    "@uniiem/uuid": "^0.2.1",
    "events": "^3.3.0",
+    "gsap": "^3.12.5",
    "highlight.js": "^11.9.0",
    "idb-keyval": "^6.2.1",
    "markdown-it": "^14.1.0",
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -80,6 +80,11 @@ namespace req {
      task_title: string
      speed: number
    }
+
+    interface CourseGenDelete {
+      to_user_id: number
+      task_id: string
+    }
  }

  interface AssistantTemplateList {
@@ -143,6 +148,10 @@ namespace resp {
      res_gen_server: 'main' | 'standby1'
      record_status: 0 | 1
    }
+
+    interface CourseGenDelete {
+      code: 0 | 1
+    }
  }
 }

--- a/yarn.lock
+++ b/yarn.lock