feat: wip Course Generate

components/aigc/course-generate/CGTaskCard.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div
+    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`"
+        alt="image"
+        class="w-full h-full object-cover pointer-events-none absolute inset-0"
+      />
+      <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">
+            已完成
+          </UBadge>
+        </UTooltip>
+      </div>
+    </div>
+    <div class="px-2 pt-1 pb-2 flex justify-between">
+      <div class="flex-1 overflow-hidden pt-1">
+        <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>
+        </h1>
+        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+          <span>2024-06-20 17:34:20</span>
+          <button
+            class="hover:text-primary font-medium"
+            tabindex="-1"
+            title="5cb35fbd-4f8a-4105-9b10-d828f3b0f553"
+          >
+            复制ID
+          </button>
+        </p>
+      </div>
+      <div class="flex items-center gap-1">
+        <UButtonGroup>
+          <UButton color="white" label="下载" leading-icon="i-tabler-download" size="xs"/>
+          <UDropdown
+            :items="[
+              [{
+                label: '预览课程',
+                icon: 'i-tabler-play',
+                shortcuts: ['空格'],
+              }, {
+                label: '下载字幕',
+                icon: 'i-tabler-file-download',
+                shortcuts: ['Alt', 'S'],
+              }], [{
+                label: '删除记录',
+                icon: 'i-tabler-trash-x',
+                shortcuts: ['Delete'],
+              }],
+            ]"
+            :popper="{ placement: 'bottom-start' }"
+          >
+            <UButton color="white" size="xs" trailing-icon="i-tabler-dots"/>
+          </UDropdown>
+        </UButtonGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

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>

components/aigc/course-generate/CourseGenerateGreenScreen.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    绿幕视频生成
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/uni/FileDnD/index.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+const emit = defineEmits(['change'])
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '点击或拖拽文件到此处',
+  },
+  placeholderDragover: {
+    type: String,
+    default: '松开选择文件',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  accept: {
+    type: String,
+    default: '',
+  },
+})
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const dragover = ref(false)
+
+const selectedFiles = ref<File[]>([])
+
+const onIncomeFiles = (files?: FileList | null) => {
+  if (files && files.length > 0) {
+    let wantedFiles = Array.from(files).filter(file => {
+      if (props.accept) {
+        const accept = props.accept.split(',').map(type => type.trim())
+        return accept.includes(file.type)
+      }
+      return true
+    })
+    if (wantedFiles.length === 0) {
+      console.error('no acceptable file')
+      return
+    }
+    selectedFiles.value = props.multiple ? wantedFiles : [wantedFiles[0]]
+    emit('change', files)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner': dragover,
+    }"
+    class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800
+           bg-inherit cursor-pointer select-none transition duration-200
+           hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
+    @click="inputRef?.click()"
+    @dragover.prevent="dragover = true"
+    @dragleave.prevent="dragover = false"
+    @drop.prevent="$event => {
+      dragover = false
+      if (!$event.dataTransfer?.files) return
+      onIncomeFiles($event.dataTransfer?.files)
+    }"
+  >
+    <input
+      ref="inputRef"
+      :accept="accept"
+      :multiple="multiple"
+      class="hidden"
+      type="file"
+      @change="onIncomeFiles(inputRef?.files)"
+    />
+    <div
+      :class="{
+        'pb-6': selectedFiles.length > 0
+      }"
+      class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
+    >
+      <Icon
+        :name="dragover ? 'i-tabler-drag-drop' : 'i-tabler-upload'"
+        class="text-4xl text-neutral-400 dark:text-neutral-500"
+      />
+      <p class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+        {{ dragover ? '松开选择文件' : '点击或拖拽文件到此处' }}
+      </p>
+    </div>
+    <div
+      v-if="selectedFiles.length > 0"
+      class="absolute inset-x-0 bottom-0 pl-2 pr-0.5 py-0.5 flex justify-between items-center bg-neutral-100 dark:bg-neutral-900 border-t dark:border-neutral-800"
+    >
+      <div class="flex-1 pr-4 overflow-hidden flex items-center gap-1">
+        <Icon :name="selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'"
+              class="text-neutral-500 dark:text-neutral-400"/>
+        <p
+          :title="selectedFiles.slice(0, 3).map(file => file.name).join(', ')"
+          class="text-2xs font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {{ selectedFiles.slice(0, 3).map(file => file.name).join(', ') }}
+        </p>
+      </div>
+      <div>
+        <UButton
+          color="red"
+          size="xs"
+          square
+          variant="ghost"
+          @click.stop="() => {
+            selectedFiles = []
+            inputRef!.value = ''
+          }"
+        >
+          <Icon name="i-tabler-x"/>
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

layouts/default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ModalAuthentication from '~/components/ModalAuthentication.vue';
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
 
 const colorMode = useColorMode()
 const dayjs = useDayjs()
@@ -28,7 +28,7 @@ const links = [
   }, {
     label: 'PPT',
     icon: 'i-tabler-file-type-ppt',
-    to: '/aigc/ppt-course-gen',
+    to: '/aigc/course-generate',
   },
 ]
 

nuxt.config.ts

@@ -21,6 +21,7 @@ export default defineNuxtConfig({
         'Barlow Condensed': '100..900'
       }
     }],
+    '@nuxt/image',
   ],
   ui: {
     icons: ['tabler', 'solar', 'line-md', 'svg-spinners'],

package.json

@@ -14,6 +14,7 @@
     "@iconify-json/solar": "^1.1.9",
     "@iconify-json/svg-spinners": "^1.1.2",
     "@iconify-json/tabler": "^1.1.105",
+    "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "^2.14.1",
     "@uniiem/object-trim": "^0.2.0",
     "@uniiem/uuid": "^0.2.1",

pages/aigc/course-generate/index.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import CourseGenerate from '~/components/aigc/course-generate/CourseGenerate.vue'
+import CourseGenerateGreenScreen from '~/components/aigc/course-generate/CourseGenerateGreenScreen.vue'
+
+useHead({
+  title: 'PPT 生成视频 | XSH AI',
+})
+
+const showSidebar = ref(false)
+const toggleSidebar = () => {
+  showSidebar.value = !showSidebar.value
+}
+
+const routes = [
+  {
+    name: '微课视频生成',
+    component: CourseGenerate,
+  },
+  {
+    name: '绿幕视频生成',
+    component: CourseGenerateGreenScreen,
+  },
+]
+
+const currentComponentIndex = ref(0)
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div
+      :class="{'translate-x-0': showSidebar}"
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px]
+               shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
+    >
+      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+        <div class="flex flex-col gap-3 relative">
+          <div class="space-y-2 nav">
+
+            <div
+              v-for="(route, index) in routes"
+              :key="index"
+              :class="['nav-item', { active: currentComponentIndex === index }]"
+              @click="currentComponentIndex = index"
+            >
+              {{ route.name }}
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900">
+      <ClientOnly>
+        <Component :is="routes[currentComponentIndex].component"/>
+      </ClientOnly>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nav {
+  &-item {
+    @apply w-full px-4 py-3 bg-transparent rounded-md cursor-pointer select-none;
+    @apply transition duration-150 ease-out;
+
+    &:hover {
+      @apply bg-black/10;
+    }
+
+    &.active {
+      @apply bg-primary/20 text-primary shadow shadow-primary/20 font-medium;
+    }
+  }
+}
+</style>

pages/aigc/ppt-course-gen.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-useHead({
-  title: 'PPT 生成视频 | XSH AI'
-})
-</script>
-
-<template>
-  PPT Course
-</template>
-
-<style scoped>
-
-</style>

tailwind.config.ts

@@ -1,4 +1,4 @@
-import type {Config} from 'tailwindcss'
+import type { Config } from 'tailwindcss'
 import typography from '@tailwindcss/typography'
 
 export default <Partial<Config>>{
@@ -7,6 +7,9 @@ export default <Partial<Config>>{
       sans: ['Rubik', 'Noto Sans SC', 'sans-serif'],
     },
     extend: {
+      fontSize: {
+        '2xs': '0.625rem',
+      },
       aspectRatio: {
         auto: 'auto',
         square: '1 / 1',
@@ -16,13 +19,13 @@ export default <Partial<Config>>{
         card: '0 2px 4px 0 rgba(0, 0, 0, .05)',
         sidebar: 'inset -2px 0 2px 0 rgba(0, 0, 0, .05)',
         sidebar_dark: 'inset -2px 0 2px 0 rgba(255, 255, 255, .05)',
-      }
+      },
     },
   },
   plugins: [typography],
   safelist: [
     {
       pattern: /^bg-/,
-    }
-  ]
+    },
+  ],
 }

typings/types.d.ts

@@ -59,6 +59,29 @@ namespace req {
     }
   }
 
+  namespace gen {
+    interface CourseGenList {
+      page?: number
+      perpage?: number
+      to_user_id: number
+    }
+
+    /**
+     * @description 创建生成任务
+     * @param digital_human_id 数字人物 ID (string || number 存疑)
+     */
+    interface CourseGenCreate {
+      digital_human_id: string
+      ppt_url: string
+      opening_url: string
+      ending_url: string
+      custom_video: string
+      gen_server: 'main' | 'standby1'
+      task_title: string
+      speed: number
+    }
+  }
+
   interface AssistantTemplateList {
     page: number
     perpage: number
@@ -90,6 +113,37 @@ namespace resp {
       person_id: number
     }
   }
+
+  namespace gen {
+    interface CourseGenItem {
+      message: string
+      device_id: string
+      user_id: number
+      task_id: string
+      create_time: number
+      complete_time: number
+      duration: number
+      video_duration: number
+      token: string
+      progress: number
+      digital_human_id: number
+      video_url: string
+      subtitle_url: string
+      video_cover: string
+      custom_video: string
+      title: string
+      ppt_url: string
+      opening_url: string
+      ending_url: string
+      speed: number
+    }
+
+    interface CourseGenCreate {
+      task_id: string
+      res_gen_server: 'main' | 'standby1'
+      record_status: 0 | 1
+    }
+  }
 }
 
 // Specific modals