feat: wip Course Generate

components/aigc/course-generate/CourseGenerate.vue

@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import CGTaskCard from '~/components/aigc/course-generate/CGTaskCard.vue'
+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'
+
+const loginState = useLoginState()
+
+const isCreateCourseModalOpen = ref(false)
+
+const {
+  data: courseList,
+  pending: courseListPending,
+  refresh: refreshCourseList,
+} = useAsyncData(
+  () => useFetchWrapped<
+    req.gen.CourseGenList & AuthedRequest,
+    BaseResponse<PagedData<resp.gen.CourseGenItem>>
+  >('App.Digital_Convert.GetList', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    to_user_id: loginState.user.id,
+    page: 1,
+    perpage: 10,
+  }),
+)
+
+const onCreateCourseClick = () => {
+  isCreateCourseModalOpen.value = true
+}
+
+const createCourseSchema = object({
+  task_title: string().trim().min(4, '标题必须大于4个字符').max(20, '标题不能超过20个字符').required('请输入微课标题'),
+  gen_server: string().required(),
+  speed: number().default(1.0).min(0.5).max(1.5).required(),
+})
+
+type CreateCourseSchema = InferType<typeof createCourseSchema>
+
+const createCourseState = reactive({
+  task_title: undefined,
+  gen_server: 'main',
+  speed: 1.0,
+})
+
+const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>) => {
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <div class="font-sans">
+    <div class="p-4 border-b dark:border-neutral-700">
+      <UButton
+        :trailing="false"
+        color="primary"
+        icon="i-tabler-plus"
+        label="新建微课"
+        size="md"
+        variant="solid"
+        @click="onCreateCourseClick"
+      />
+    </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)]"/>
+
+      </div>
+    </div>
+
+    <UModal
+      v-model="isCreateCourseModalOpen"
+      prevent-close
+    >
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              新建微课视频
+            </h3>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isCreateCourseModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <UForm
+          :schema="createCourseSchema"
+          :state="createCourseState"
+          class="space-y-4"
+          @submit="onCreateCourseSubmit"
+        >
+          <div class="flex justify-between gap-2 *:flex-1">
+            <UFormGroup label="微课标题" name="task_title">
+              <UInput v-model="createCourseState.task_title"/>
+            </UFormGroup>
+
+            <UFormGroup label="生成线路" name="gen_server">
+              <USelectMenu
+                v-model="createCourseState.gen_server"
+                :options="[{
+                label: '主线路',
+                value: 'main',
+              }, {
+                label: '备用线路',
+                value: 'standby1',
+              }]"
+                option-attribute="label"
+                value-attribute="value"
+              />
+            </UFormGroup>
+          </div>
+
+          <UFormGroup :label="`视频倍速：${createCourseState.speed}`" name="speed">
+            <URange
+              v-model="createCourseState.speed"
+              :max="1.5"
+              :min="0.5"
+              :step="0.1"
+              class="pt-4"
+              size="sm"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="PPT 文件">
+            <FileDnD accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
+          </UFormGroup>
+
+          <div class="flex justify-end space-x-4 pt-4">
+            <UButton
+              color="gray"
+              label="取消"
+              variant="ghost"
+              @click="isCreateCourseModalOpen = false"
+            />
+            <UButton
+              color="primary"
+              label="提交"
+              type="submit"
+              variant="solid"
+            />
+          </div>
+        </UForm>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+
+</style>