refactor(deps): migrate to nuxt v4

app/pages/generation.vue

@@ -0,0 +1,135 @@
+<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="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>