feat: 更新教案页面，添加课程智能体选项，优化样式和功能
This commit is contained in:
parent
b2d5f5260c
commit
cab76c5abd
@ -21,7 +21,10 @@ const tab = ref('text')
|
||||
<span>章节生成</span>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="bot">
|
||||
<TabsTrigger
|
||||
value="bot"
|
||||
disabled
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
<Icon name="tabler:robot" />
|
||||
<span>课程智能体</span>
|
||||
@ -29,7 +32,7 @@ const tab = ref('text')
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<div class="flex items-start。 gap-4">
|
||||
<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"
|
||||
@ -46,13 +49,112 @@ const tab = ref('text')
|
||||
/>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<Button size="lg">
|
||||
<Icon name="tabler:stars" />
|
||||
<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></style>
|
||||
<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>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import type { SidebarNavGroup } from '~/components/app/Sidebar.vue'
|
||||
import type { SidebarNavGroup } from '~/components/app/sidebar/index.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const { breadcrumbs } = toRefs(useBreadcrumbs())
|
||||
|
||||
const sidebarNav: SidebarNavGroup[] = [
|
||||
{
|
||||
label: '备课制课',
|
||||
items: [
|
||||
{
|
||||
title: '课程管理',
|
||||
@ -18,11 +17,6 @@ const sidebarNav: SidebarNavGroup[] = [
|
||||
url: `/course/resources`,
|
||||
icon: 'tabler:users-group',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'AI 资源',
|
||||
items: [
|
||||
{
|
||||
title: 'AI 备课',
|
||||
url: `/course/prep`,
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/tailwindcss": "^6.13.2",
|
||||
"@pinia/nuxt": "^0.10.1",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/dplayer": "^1.25.5",
|
||||
"@vueuse/nuxt": "^13.0.0",
|
||||
"dayjs": "^1.11.13",
|
||||
|
||||
35
pnpm-lock.yaml
generated
35
pnpm-lock.yaml
generated
@ -114,6 +114,9 @@ importers:
|
||||
'@pinia/nuxt':
|
||||
specifier: ^0.10.1
|
||||
version: 0.10.1(magicast@0.3.5)(pinia@3.0.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)))
|
||||
'@tailwindcss/typography':
|
||||
specifier: ^0.5.16
|
||||
version: 0.5.16(tailwindcss@3.4.17)
|
||||
'@types/dplayer':
|
||||
specifier: ^1.25.5
|
||||
version: 1.25.5
|
||||
@ -1190,6 +1193,11 @@ packages:
|
||||
'@swc/helpers@0.5.15':
|
||||
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
|
||||
|
||||
'@tailwindcss/typography@0.5.16':
|
||||
resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
|
||||
peerDependencies:
|
||||
tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
|
||||
|
||||
'@tanstack/table-core@8.21.2':
|
||||
resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
|
||||
engines: {node: '>=12'}
|
||||
@ -3040,12 +3048,18 @@ packages:
|
||||
resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
|
||||
lodash.castarray@4.4.0:
|
||||
resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
|
||||
|
||||
lodash.defaults@4.2.0:
|
||||
resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
|
||||
|
||||
lodash.isarguments@3.1.0:
|
||||
resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
|
||||
|
||||
lodash.isplainobject@4.0.6:
|
||||
resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
|
||||
|
||||
lodash.memoize@4.1.2:
|
||||
resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
|
||||
|
||||
@ -3708,6 +3722,10 @@ packages:
|
||||
peerDependencies:
|
||||
postcss: ^8.4.31
|
||||
|
||||
postcss-selector-parser@6.0.10:
|
||||
resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
postcss-selector-parser@6.1.2:
|
||||
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
|
||||
engines: {node: '>=4'}
|
||||
@ -6051,6 +6069,14 @@ snapshots:
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
|
||||
'@tailwindcss/typography@0.5.16(tailwindcss@3.4.17)':
|
||||
dependencies:
|
||||
lodash.castarray: 4.4.0
|
||||
lodash.isplainobject: 4.0.6
|
||||
lodash.merge: 4.6.2
|
||||
postcss-selector-parser: 6.0.10
|
||||
tailwindcss: 3.4.17
|
||||
|
||||
'@tanstack/table-core@8.21.2': {}
|
||||
|
||||
'@tanstack/virtual-core@3.13.5': {}
|
||||
@ -8093,10 +8119,14 @@ snapshots:
|
||||
dependencies:
|
||||
p-locate: 6.0.0
|
||||
|
||||
lodash.castarray@4.4.0: {}
|
||||
|
||||
lodash.defaults@4.2.0: {}
|
||||
|
||||
lodash.isarguments@3.1.0: {}
|
||||
|
||||
lodash.isplainobject@4.0.6: {}
|
||||
|
||||
lodash.memoize@4.1.2: {}
|
||||
|
||||
lodash.merge@4.6.2: {}
|
||||
@ -8895,6 +8925,11 @@ snapshots:
|
||||
postcss: 8.5.3
|
||||
postcss-value-parser: 4.2.0
|
||||
|
||||
postcss-selector-parser@6.0.10:
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
util-deprecate: 1.0.2
|
||||
|
||||
postcss-selector-parser@6.1.2:
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable @stylistic/quote-props */
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ['class'],
|
||||
@ -69,5 +70,5 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user