75 lines
2.0 KiB
Vue
75 lines
2.0 KiB
Vue
<script lang="ts" setup>
|
|
import CourseGenerate from '~/components/aigc/course-generate/CourseGenerate.vue'
|
|
import CourseGenerateGreenScreen from '~/components/aigc/course-generate/CourseGenerateGreenScreen.vue'
|
|
|
|
useHead({
|
|
title: 'PPT 生成视频 | XSH AI',
|
|
})
|
|
|
|
const showSidebar = ref(false)
|
|
const toggleSidebar = () => {
|
|
showSidebar.value = !showSidebar.value
|
|
}
|
|
|
|
const routes = [
|
|
{
|
|
name: '微课视频生成',
|
|
component: CourseGenerate,
|
|
},
|
|
{
|
|
name: '绿幕视频生成',
|
|
component: CourseGenerateGreenScreen,
|
|
},
|
|
]
|
|
|
|
const currentComponentIndex = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex relative">
|
|
<div
|
|
:class="{'translate-x-0': showSidebar}"
|
|
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]
|
|
shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
|
|
>
|
|
<div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
|
|
<div class="flex flex-col gap-3 relative">
|
|
<div class="space-y-2 nav">
|
|
|
|
<div
|
|
v-for="(route, index) in routes"
|
|
:key="index"
|
|
:class="['nav-item', { active: currentComponentIndex === index }]"
|
|
@click="currentComponentIndex = index"
|
|
>
|
|
{{ route.name }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900">
|
|
<ClientOnly>
|
|
<Component :is="routes[currentComponentIndex].component"/>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.nav {
|
|
&-item {
|
|
@apply w-full px-4 py-3 bg-transparent rounded-md cursor-pointer select-none;
|
|
@apply transition duration-150 ease-out;
|
|
|
|
&:hover {
|
|
@apply bg-black/10;
|
|
}
|
|
|
|
&.active {
|
|
@apply bg-primary/20 text-primary shadow shadow-primary/20 font-medium;
|
|
}
|
|
}
|
|
}
|
|
</style> |