113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<script setup lang="tsx">
|
|
import NavItem from '~/components/aigc/NavItem.vue'
|
|
|
|
useSeoMeta({
|
|
title: '智能生成',
|
|
})
|
|
|
|
const navList: {
|
|
label: string
|
|
icon: string
|
|
to: string
|
|
admin?: boolean
|
|
}[] = [
|
|
{
|
|
label: '微课视频生成',
|
|
icon: 'tabler:presentation-analytics',
|
|
to: '/aigc/generation/course',
|
|
},
|
|
{
|
|
label: '绿幕视频生成',
|
|
icon: 'i-tabler-video',
|
|
to: '/aigc/generation/green-screen',
|
|
},
|
|
{
|
|
label: '数字人管理',
|
|
icon: 'i-tabler-video',
|
|
to: '/aigc/generation/green-screen',
|
|
admin: true,
|
|
},
|
|
]
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const loginState = useLoginState()
|
|
|
|
onMounted(() => {
|
|
if (route.fullPath === '/aigc/generation') {
|
|
router.push('/aigc/generation/course')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex relative">
|
|
|
|
<div class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px]
|
|
border-r border-neutral-200 dark:border-neutral-700 transition-all duration-300 ease-out">
|
|
<div class="flex flex-col flex-1 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 opacity-0 translate-x-4;
|
|
}
|
|
|
|
.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> |