59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
||
const tab = ref('text')
|
||
</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="chapter">
|
||
<div class="flex items-center gap-1">
|
||
<Icon name="tabler:text-plus" />
|
||
<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 === 'chapter'"
|
||
class="flex h-20 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>
|
||
<Textarea
|
||
placeholder="请输入文本来生成内容"
|
||
class="h-20 flex-1"
|
||
/>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<Button size="lg">
|
||
<Icon name="tabler:stars" />
|
||
生成教案
|
||
</Button>
|
||
<p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|