117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { z } from 'zod'
|
|
import { useForm } from 'vee-validate'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { nav } from './config'
|
|
|
|
definePageMeta({
|
|
requiresAuth: true,
|
|
hideSidebar: true,
|
|
})
|
|
|
|
useHead({
|
|
title: 'AI 出题 | 备课',
|
|
})
|
|
|
|
const { setBreadcrumbs } = useBreadcrumbs()
|
|
|
|
const tab = ref('text')
|
|
|
|
const quizFormSchema = z.object({
|
|
topicScope: z.string().describe('知识点范围'),
|
|
questionCount: z
|
|
.number()
|
|
.min(1, { message: '题目数量必须大于 0' })
|
|
.max(10, { message: '题目数量必须小于 10' })
|
|
.describe('题目数量'),
|
|
questionType: z.enum(['单选题', '判断题', '简答题']).describe('题型'),
|
|
difficulty: z.enum(['易', '中', '难']).describe('难度'),
|
|
studentLevel: z.enum(['小学', '中学', '大学']).describe('学生水平'),
|
|
questionDirection: z.enum(['应用实践']).describe('题目方向').optional(),
|
|
})
|
|
|
|
type QuizForm = z.infer<typeof quizFormSchema>
|
|
|
|
const quizForm = useForm({
|
|
validationSchema: toTypedSchema(quizFormSchema),
|
|
initialValues: {
|
|
topicScope: '',
|
|
questionCount: 1,
|
|
questionType: '单选题',
|
|
difficulty: '中',
|
|
studentLevel: '中学',
|
|
questionDirection: '应用实践',
|
|
},
|
|
})
|
|
|
|
const onQuizSubmit = (values: QuizForm) => {
|
|
console.log(values)
|
|
}
|
|
|
|
onMounted(() => {
|
|
setBreadcrumbs([
|
|
{
|
|
label: 'AI 备课',
|
|
path: '/course/prep',
|
|
},
|
|
{
|
|
label: 'AI 出题',
|
|
},
|
|
])
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AppContainer
|
|
:nav-secondary="nav"
|
|
content-class="flex items-start p-0 w-full h-full"
|
|
>
|
|
<div class="h-full border-r shadow-xl flex flex-col gap-4">
|
|
<div class="flex justify-start items-center pl-4 h-16 border-b gap-2">
|
|
<Icon
|
|
name="fluent-color:notebook-24"
|
|
class="text-2xl"
|
|
/>
|
|
<h1 class="text-base font-medium text-foreground">AI 出题</h1>
|
|
</div>
|
|
<div class="px-4 flex flex-col gap-4">
|
|
<Tabs v-model="tab">
|
|
<TabsList>
|
|
<TabsTrigger value="text">
|
|
<div class="flex items-center gap-1 px-12">
|
|
<Icon name="tabler:article" />
|
|
<span>文本生成</span>
|
|
</div>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="chapter">
|
|
<div class="flex items-center gap-1 px-12">
|
|
<Icon name="tabler:text-plus" />
|
|
<span>章节生成</span>
|
|
</div>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<AutoForm
|
|
class="space-y-2"
|
|
:schema="quizFormSchema"
|
|
:form="quizForm"
|
|
:field-config="{
|
|
topicScope: {
|
|
component: 'textarea',
|
|
inputProps: {
|
|
placeholder: '请输入出题的知识点范围',
|
|
},
|
|
},
|
|
}"
|
|
@submit="onQuizSubmit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="h-full flex-1 p-4 overflow-hidden overflow-y-auto max-h-[calc(100vh-162px)]"
|
|
></div>
|
|
</AppContainer>
|
|
</template>
|
|
|
|
<style scoped></style>
|