fix: 封装header

src/layout/components/Header/index.ts

@@ -0,0 +1,3 @@
+import Header from './index.vue'
+
+export { Header }

src/layout/components/Header/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="go-header">
+    <header class="go-header-box">
+      <div class="li">
+        <slot name="left"></slot>
+      </div>
+      <div class="ri">
+        <slot name="right">
+          <ThemeSelect />
+        </slot>
+      </div>
+    </header>
+    <n-divider class="go-header-divider" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ThemeSelect } from '@/components/ThemeSelect'
+</script>
+
+<style lang="scss" scoped>
+@include go(header) {
+  &-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 40px;
+    height: $--header-height;
+  }
+  &-divider {
+    margin: 0;
+    padding-top: 0;
+  }
+}
+</style>

src/layout/components/Main/index.vue

@@ -1,7 +1,7 @@
 <template>
   <router-view>
     <template #default="{ Component, route }">
-      <transition name="zoom-fade" mode="out-in" appear>
+      <transition name="list-complete" mode="out-in" appear>
         <keep-alive>
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>