319 lines
8.5 KiB
Vue
319 lines
8.5 KiB
Vue
<script lang="ts" setup>
|
|
import type { AcceptableValue } from 'reka-ui'
|
|
import { toast } from 'vue-sonner'
|
|
import {
|
|
generateLessonPlan,
|
|
getLessonPlanTemplate,
|
|
regenerateLessonPlanSection,
|
|
type LessonPlanTemplate,
|
|
type AIGeneratedContentResponse,
|
|
type GenerateLessonPlanParams,
|
|
} from '~/api/aifn'
|
|
import { uploadFile } from '~/api/file'
|
|
import type { AIGeneratedContent } from '~/components/ai'
|
|
import type { FetchError } from '~/types'
|
|
|
|
const tab = ref('text')
|
|
const loading = ref(false)
|
|
|
|
// const input = ref('')
|
|
const selectedModuleNames = ref([])
|
|
const selectedFiles = ref<File[]>([])
|
|
const onFileChange = (files: FileList) => {
|
|
selectedFiles.value = Array.from(files)
|
|
}
|
|
|
|
const form = reactive({
|
|
query: '',
|
|
urls: [] as string[],
|
|
moduleName: '',
|
|
})
|
|
const contentRequirements = ref<'custom' | 'template'>('custom')
|
|
|
|
const data = ref<AIGeneratedContent | null>(null)
|
|
|
|
const sections = [
|
|
'学情分析',
|
|
'教学目标',
|
|
'课程重点',
|
|
'课程难点',
|
|
'教学准备',
|
|
'教学过程',
|
|
'作业与评价',
|
|
'教学反思',
|
|
'思政案例',
|
|
'思政元素',
|
|
'教学价值与分析',
|
|
]
|
|
|
|
const { data: templates } = useAsyncData(() => getLessonPlanTemplate())
|
|
|
|
const selectedTemplate = ref<LessonPlanTemplate | null>(null)
|
|
|
|
const onGenerateClick = async () => {
|
|
if (form.query) {
|
|
let payload: GenerateLessonPlanParams = {
|
|
query: form.query,
|
|
}
|
|
loading.value = true
|
|
|
|
if (tab.value === 'text') {
|
|
if (selectedFiles.value.length > 0) {
|
|
for (const file of selectedFiles.value) {
|
|
form.urls.push(await uploadFile(file, 'temp'))
|
|
}
|
|
console.log('uploaded urls', form.urls)
|
|
|
|
payload = {
|
|
...payload,
|
|
urls: form.urls,
|
|
}
|
|
}
|
|
|
|
if (contentRequirements.value === 'custom') {
|
|
if (!form.moduleName) {
|
|
toast.error('请选择要生成的内容模块')
|
|
return
|
|
}
|
|
payload = {
|
|
...payload,
|
|
moduleName: form.moduleName,
|
|
}
|
|
} else if (contentRequirements.value === 'template') {
|
|
if (!selectedTemplate.value) {
|
|
toast.error('请选择模版')
|
|
return
|
|
}
|
|
payload = {
|
|
...payload,
|
|
useTemplate: true,
|
|
templateId: `${selectedTemplate.value.id}`,
|
|
}
|
|
}
|
|
}
|
|
|
|
toast.promise(generateLessonPlan(payload), {
|
|
loading: '生成中...',
|
|
success: (res: AIGeneratedContentResponse) => {
|
|
if (res.code !== 200) {
|
|
data.value = null
|
|
toast.error(res.msg || '生成失败')
|
|
return
|
|
}
|
|
data.value = res.data
|
|
return '生成成功'
|
|
},
|
|
error: (err: FetchError) => {
|
|
data.value = null
|
|
return err.message
|
|
},
|
|
finally: () => {
|
|
loading.value = false
|
|
},
|
|
})
|
|
} else {
|
|
data.value = null
|
|
}
|
|
}
|
|
|
|
const onSectionRegenerateClick = (
|
|
itemIndex: number,
|
|
conversationId: string,
|
|
) => {
|
|
if (data.value) {
|
|
const item = data.value.sections[itemIndex]
|
|
if (item) {
|
|
loading.value = true
|
|
toast.promise(
|
|
regenerateLessonPlanSection({
|
|
query: `重新生成${item.title}`,
|
|
conversationId,
|
|
}),
|
|
{
|
|
loading: `重新生成${item.title}中...`,
|
|
success: (res: AIGeneratedContentResponse) => {
|
|
if (res.code !== 200) {
|
|
toast.error(res.msg || '生成失败')
|
|
return
|
|
}
|
|
data.value?.sections.splice(itemIndex, 1, res.data.sections[0])
|
|
return `重新生成${item.title}成功`
|
|
},
|
|
error: (err: FetchError) => {
|
|
return err.message
|
|
},
|
|
finally: () => {
|
|
loading.value = false
|
|
},
|
|
},
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-4">
|
|
<Tabs
|
|
v-model="tab"
|
|
class="w-[400px]"
|
|
>
|
|
<TabsList>
|
|
<TabsTrigger value="text">
|
|
<div class="flex items-center gap-1">
|
|
<Icon name="tabler:article" />
|
|
<span>文本生成</span>
|
|
</div>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="bot">
|
|
<div class="flex items-center gap-1">
|
|
<Icon name="tabler:robot" />
|
|
<span>课程智能体</span>
|
|
</div>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
v-if="tab === 'bot'"
|
|
class="flex h-full flex-col justify-center items-center gap-1 px-8 rounded-md border"
|
|
>
|
|
<Icon
|
|
name="tabler:text-plus"
|
|
class="text-3xl"
|
|
/>
|
|
<span class="text-xs font-medium">选择智能体</span>
|
|
</div>
|
|
<UniFileSelector
|
|
v-if="tab === 'text'"
|
|
class="h-full"
|
|
placeholder="上传资料"
|
|
multiple
|
|
@change="onFileChange"
|
|
/>
|
|
<Textarea
|
|
v-model="form.query"
|
|
placeholder="请输入文本来生成内容"
|
|
class="h-24 flex-1"
|
|
/>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<Button
|
|
size="lg"
|
|
:disabled="loading"
|
|
@click="onGenerateClick"
|
|
>
|
|
<Icon
|
|
v-if="loading"
|
|
name="svg-spinners:180-ring-with-bg"
|
|
/>
|
|
<Icon
|
|
v-else
|
|
name="mage:stars-c-fill"
|
|
/>
|
|
生成教案
|
|
</Button>
|
|
<p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4 items-start pb-2">
|
|
<!-- <p class="text-sm text-muted-foreground font-medium">内容要求</p> -->
|
|
<div class="flex flex-col gap-4 pt-1">
|
|
<RadioGroup
|
|
v-model="contentRequirements"
|
|
default-value="custom"
|
|
class="flex flex-row gap-4"
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem
|
|
id="custom"
|
|
value="custom"
|
|
/>
|
|
<Label for="custom">自定义教案内容</Label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem
|
|
id="template"
|
|
value="template"
|
|
/>
|
|
<Label for="template">模版库选择</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
<ToggleGroup
|
|
v-if="contentRequirements === 'custom'"
|
|
v-model="selectedModuleNames"
|
|
type="multiple"
|
|
variant="outline"
|
|
size="sm"
|
|
class="flex flex-wrap justify-start items-center gap-2 *:!px-2 *:!h-7"
|
|
@update:model-value="
|
|
(value) => {
|
|
form.moduleName = Array.from(value as AcceptableValue[]).join(',')
|
|
}
|
|
"
|
|
>
|
|
<ToggleGroupItem
|
|
v-for="section in sections"
|
|
:key="section"
|
|
class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
|
|
:value="section"
|
|
>
|
|
{{ section }}
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<div
|
|
v-else
|
|
class="flex gap-4 overflow-hidden overflow-x-auto snap-x snap-mandatory"
|
|
>
|
|
<!-- {{ templates?.data }} -->
|
|
<Card
|
|
v-for="template in templates?.data || []"
|
|
:key="template.id"
|
|
class="flex-shrink-0 p-0 overflow-hidden relative snap-start snap-always snap-x"
|
|
:class="{
|
|
'border-primary': selectedTemplate?.id === template.id,
|
|
}"
|
|
@click="
|
|
() => {
|
|
selectedTemplate = template
|
|
}
|
|
"
|
|
>
|
|
<CardHeader class="px-4 pt-3 pb-1">
|
|
<h1 class="text-sm font-medium flex items-center gap-1">
|
|
<Icon
|
|
name="fluent-color:document-text-24"
|
|
class="text-lg text-muted-foreground !stroke-[5px]"
|
|
/>
|
|
{{ template.name }}
|
|
</h1>
|
|
</CardHeader>
|
|
<CardContent class="p-0">
|
|
<div
|
|
v-if="selectedTemplate?.id === template.id"
|
|
class="absolute inset-0"
|
|
>
|
|
<Icon
|
|
name="tabler:check"
|
|
class="absolute top-2 right-2 text-primary"
|
|
/>
|
|
</div>
|
|
<NuxtImg
|
|
:src="template.imgUrl"
|
|
class="h-72"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiGeneratedContent
|
|
:data
|
|
@regenerate="onSectionRegenerateClick"
|
|
@regenerate-all="onGenerateClick"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|