161 lines
4.3 KiB
Vue
161 lines
4.3 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"
|
|
disabled
|
|
>
|
|
<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="mage:stars-c-fill" />
|
|
生成教案
|
|
</Button>
|
|
<p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-col gap-4 rounded-md border p-4 overflow-hidden relative"
|
|
>
|
|
<!-- <div class="absolute inset-0 -z-10 overflow-hidden rounded-md opacity-30">
|
|
<div
|
|
class="bubble animate-bubble -top-24 -left-14 size-48"
|
|
style="--i: 0"
|
|
/>
|
|
<div
|
|
class="bubble animate-bubble -top-10 -right-8 size-28"
|
|
style="--i: 1"
|
|
/>
|
|
</div> -->
|
|
<!-- header -->
|
|
<div class="flex justify-between items-start gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<Icon
|
|
name="mage:stars-c-fill"
|
|
class="text-xl text-amber-500"
|
|
/>
|
|
<h1 class="text-lg font-medium">生成的教案标题</h1>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
<Icon name="tabler:reload" />
|
|
重新生成
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
<Icon name="tabler:download" />
|
|
下载
|
|
</Button>
|
|
<Button size="sm">
|
|
<Icon name="tabler:copy" />
|
|
存入教案库
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<!-- items -->
|
|
<div class="flex flex-col rounded-md border overflow-hidden">
|
|
<div class="flex justify-between items-center gap-2 p-2 px-4 bg-gradient-to-r from-primary/15 to-muted text-background">
|
|
<span class="text-sm text-foreground font-medium">教学目标</span>
|
|
<div class="flex items-center">
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:reload" />
|
|
重新生成
|
|
</Button>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:trash" />
|
|
删除
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 py-2 prose prose-sm bg-background">
|
|
<ol>
|
|
<li>教学目标 1</li>
|
|
<li>教学目标 2</li>
|
|
<li>教学目标 3</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bubble {
|
|
@apply absolute bg-gradient-to-tr from-primary to-secondary rounded-full shadow-lg;
|
|
--i: 0;
|
|
--animation-delay: calc(var(--i) * 0.5s);
|
|
}
|
|
|
|
.animate-bubble {
|
|
animation: bubble 20s infinite;
|
|
animation-delay: var(--animation-delay);
|
|
}
|
|
|
|
/* bubble jump slowly */
|
|
@keyframes bubble {
|
|
0% {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) scale(1.2);
|
|
}
|
|
100% {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
</style>
|