feat: course generation

pages/aigc/generation.vue

@@ -1,9 +1,31 @@
 <script setup lang="tsx">
-import NavItem from '~/components/ppt/NavItem.vue'
+import NavItem from '~/components/aigc/NavItem.vue'
 
 useSeoMeta({
   title: '智能生成',
 })
+
+const navList = [
+  {
+    label: '微课视频生成',
+    icon: 'tabler:presentation-analytics',
+    to: '/aigc/generation/course',
+  },
+  {
+    label: '绿幕视频生成',
+    icon: 'i-tabler-video',
+    to: '/aigc/generation/green-screen',
+  },
+]
+
+const route = useRoute()
+const router = useRouter()
+
+onMounted(() => {
+  if (route.fullPath === '/aigc/generation') {
+    router.push('/aigc/generation/course')
+  }
+})
 </script>
 
 <template>
@@ -15,14 +37,11 @@ useSeoMeta({
         <div class="flex flex-col gap-1">
           <ClientOnly>
             <NavItem
-                icon="tabler:presentation-analytics"
-                label="微课视频生成"
-                to="/aigc/generation/video-generate"
-            />
-            <NavItem
-                icon="tabler:user-screen"
-                label="数字讲师"
-                to="/aigc/generation/digital-teachers"
+              v-for="(item, i) in navList"
+              :key="i"
+              :icon="item.icon"
+              :label="item.label"
+              :to="item.to"
             />
           </ClientOnly>
         </div>
@@ -30,10 +49,14 @@ useSeoMeta({
     </div>
 
     <LoginNeededContent
-        content-class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900"
+      content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
     >
       <Transition name="subpage" mode="out-in">
-        <NuxtPage :page-key="route => route.fullPath"/>
+        <div>
+          <Suspense>
+            <NuxtPage :page-key="route.fullPath" keepalive/>
+          </Suspense>
+        </div>
       </Transition>
     </LoginNeededContent>
 
@@ -43,11 +66,11 @@ useSeoMeta({
 <style>
 .subpage-enter-active,
 .subpage-leave-active {
-  transition: opacity 0.3s;
+  @apply transition-all duration-300;
 }
 
 .subpage-enter-from,
 .subpage-leave-to {
-  opacity: 0;
+  @apply opacity-0 translate-x-4;
 }
 </style>