136 lines
2.8 KiB
Vue
136 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import NavItem from '~/components/aigc/nav/NavItem.vue'
|
|
|
|
useSeoMeta({
|
|
title: '智能生成',
|
|
})
|
|
|
|
const navList = ref<
|
|
{
|
|
label: string
|
|
icon: string
|
|
to: string
|
|
admin?: boolean
|
|
}[]
|
|
>([
|
|
{
|
|
label: '微课视频生成',
|
|
icon: 'tabler:presentation-analytics',
|
|
to: '/generation/course',
|
|
},
|
|
{
|
|
label: '绿幕视频生成',
|
|
icon: 'i-tabler-video',
|
|
to: '/generation/green-screen',
|
|
},
|
|
{
|
|
label: '数字讲师管理',
|
|
icon: 'tabler:user-screen',
|
|
to: '/generation/avatar-models',
|
|
},
|
|
{
|
|
label: '片头片尾模板',
|
|
icon: 'tabler:keyframes',
|
|
to: '/generation/materials',
|
|
},
|
|
{
|
|
label: 'PPT 模板库',
|
|
icon: 'tabler:file-type-ppt',
|
|
to: '/generation/ppt-templates',
|
|
},
|
|
{
|
|
label: '管理中心',
|
|
icon: 'tabler:home-cog',
|
|
to: '/generation/admin',
|
|
admin: true,
|
|
},
|
|
])
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const loginState = useLoginState()
|
|
|
|
onMounted(() => {
|
|
if (route.fullPath === '/generation') {
|
|
router.replace('/generation/course')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative flex w-full">
|
|
<div
|
|
class="absolute z-10 flex h-[calc(100vh-4rem)] w-full -translate-x-full flex-col border-r border-neutral-200 bg-neutral-100 p-4 transition-all duration-300 ease-out md:sticky md:w-[300px] md:translate-x-0 dark:border-neutral-700 dark:bg-neutral-900"
|
|
>
|
|
<div class="flex flex-1 flex-col overflow-auto overflow-x-hidden">
|
|
<div class="flex flex-col gap-1">
|
|
<ClientOnly>
|
|
<NavItem
|
|
v-for="(item, i) in navList"
|
|
:key="i"
|
|
:icon="item.icon"
|
|
:label="item.label"
|
|
:to="item.to"
|
|
:admin="item.admin"
|
|
:hide="item.admin && loginState.user.auth_code !== 2"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<LoginNeededContent
|
|
content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
|
|
>
|
|
<Transition
|
|
name="subpage"
|
|
mode="out-in"
|
|
>
|
|
<div>
|
|
<Suspense>
|
|
<NuxtPage
|
|
:page-key="route.fullPath"
|
|
keepalive
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
</Transition>
|
|
</LoginNeededContent>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.subpage-enter-active,
|
|
.subpage-leave-active {
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.subpage-enter-from,
|
|
.subpage-leave-to {
|
|
@apply translate-x-4 opacity-0;
|
|
}
|
|
|
|
.loading-screen-leave-active {
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.loading-screen-leave-to {
|
|
@apply opacity-0;
|
|
}
|
|
|
|
.card-move,
|
|
.card-enter-active,
|
|
.card-leave-active {
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.card-enter-from,
|
|
.card-leave-to {
|
|
@apply opacity-0;
|
|
}
|
|
|
|
.card-leave-active {
|
|
@apply absolute;
|
|
}
|
|
</style>
|