feat: wip Course Generate

pages/aigc/course-generate/index.vue

@@ -0,0 +1,75 @@
+<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>

pages/aigc/ppt-course-gen.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-useHead({
-  title: 'PPT 生成视频 | XSH AI'
-})
-</script>
-
-<template>
-  PPT Course
-</template>
-
-<style scoped>
-
-</style>