diff --git a/src/components/Application/Application.vue b/src/components/Application/Application.vue
index 3f97fc59..53f89c65 100644
--- a/src/components/Application/Application.vue
+++ b/src/components/Application/Application.vue
@@ -27,8 +27,6 @@ import {
   NLoadingBarProvider
 } from 'naive-ui'
 
-// @ts-ignore
 import { MessageContent } from '@/components/MessageContent'
-// @ts-ignore
 import { DialogContent } from '@/components/DialogContent'
 </script>
diff --git a/src/layout/components/Header/index.ts b/src/layout/components/Header/index.ts
new file mode 100644
index 00000000..783e7c6e
--- /dev/null
+++ b/src/layout/components/Header/index.ts
@@ -0,0 +1,3 @@
+import Header from './index.vue'
+
+export { Header }
\ No newline at end of file
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
new file mode 100644
index 00000000..e9714dcb
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue
index c2b57373..34d082de 100644
--- a/src/layout/components/Main/index.vue
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 524048a1..9c399345 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,13 +5,14 @@ import { createRouterGuards } from './router-guards'
 import { PageEnum } from '@/enums/pageEnum'
 import modules from '@/router/modules'
 import { HttpErrorPage, LoginRoute } from '@/router/base'
+import { Layout } from '@/router/constant'
 
 const RootRoute: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Root',
-    redirect: PageEnum.BASE_HOME_NAME,
-    component: () => import('@/app.vue'),
+    redirect: PageEnum.BASE_HOME,
+    component: Layout,
     meta: {
       title: 'Root',
     },
diff --git a/src/router/router-guards.ts b/src/router/router-guards.ts
index 8455147f..928bc023 100644
--- a/src/router/router-guards.ts
+++ b/src/router/router-guards.ts
@@ -1,13 +1,12 @@
 import { Router } from 'vue-router';
 import { PageEnum } from '@/enums/pageEnum'
 
+
 export function createRouterGuards(router: Router) {
   // 前置
   router.beforeEach(async (to, from, next) => {
     const Loading = window['$loading'] || null;
     Loading && Loading.start();
-
-    console.log(to)
     const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);
     if (isErrorPage === -1) {
       next({ name: PageEnum.ERROR_PAGE_NAME_404 })
@@ -17,7 +16,6 @@ export function createRouterGuards(router: Router) {
 
   router.afterEach((to, _, failure) => {
     const Loading = window['$loading'] || null;
-    Loading && Loading.start();
     document.title = (to?.meta?.title as string) || document.title;
     Loading && Loading.finish();
   })
diff --git a/src/utils/canvas.ts b/src/utils/canvas.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5ce1553e..3d11b6d1 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -14,14 +14,12 @@
         </transition-group>
       </aside>
     </div>
-    <header class="go-login-box-header">
-      <div></div>
-      <div class="header-ri">
+    <Header>
+      <template #left></template>
+      <template #right>
         <ThemeSelect />
-      </div>
-    </header>
-    <n-divider class="go-login-box-divider" />
-
+      </template>
+    </Header>
     <div class="go-login">
       <div class="go-login-carousel">
         <n-carousel autoplay :interval="Number(carouselInterval)">
@@ -127,6 +125,7 @@ import shuffle from 'lodash/shuffle'
 import { carouselInterval } from '@/settings/designSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { ThemeSelect } from '@/components/ThemeSelect'
+import { Header } from '@/layout/components/Header'
 
 interface FormState {
   username: string