feat: wip Course Generate
This commit is contained in:
71
components/aigc/course-generate/CGTaskCard.vue
Normal file
71
components/aigc/course-generate/CGTaskCard.vue
Normal file
@@ -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>
|
||||
158
components/aigc/course-generate/CourseGenerate.vue
Normal file
158
components/aigc/course-generate/CourseGenerate.vue
Normal file
@@ -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>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
绿幕视频生成
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user