diff --git a/src/components/common/LoginBg/index.vue b/src/components/common/LoginBg/index.vue
index cd9e8e94..8bde57e8 100644
--- a/src/components/common/LoginBg/index.vue
+++ b/src/components/common/LoginBg/index.vue
@@ -24,6 +24,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const COLOR_WHITE = '#ffffff';
-const stopColor = computed(() => mixColor(COLOR_WHITE, props.themeColor, 0.7));
+const stopColor = computed(() => {
+  return mixColor(COLOR_WHITE, props.themeColor, 0.7);
+});
 </script>
 <style scoped></style>
diff --git a/src/components/custom/ThemeSwitch/index.vue b/src/components/custom/ThemeSwitch/index.vue
index 0b0c0731..153d96aa 100644
--- a/src/components/custom/ThemeSwitch/index.vue
+++ b/src/components/custom/ThemeSwitch/index.vue
@@ -1,12 +1,13 @@
 <template>
-  <div class="flex-center w-40px h-40px text-14px hover:text-primary cursor-pointer" @click="toggleDarkMode">
+  <hover-container class="w-40px h-full text-14px text-[#999] hover:text-primary" @click="toggleDarkMode">
     <icon-mdi-moon-waning-crescent v-if="dark" />
     <icon-mdi-white-balance-sunny v-else />
-  </div>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { watch } from 'vue';
+import { HoverContainer } from '../../common';
 import { useBoolean } from '@/hooks';
 
 interface Props {
diff --git a/src/layouts/BasicLayout/components/HorizontalLayout/index.vue b/src/layouts/BasicLayout/components/HorizontalLayout/index.vue
index 57d9013f..b9239911 100644
--- a/src/layouts/BasicLayout/components/HorizontalLayout/index.vue
+++ b/src/layouts/BasicLayout/components/HorizontalLayout/index.vue
@@ -16,7 +16,7 @@
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '../common';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const { headerInverted, headerPosition, scrollbarContentStyle, scrollbar } = useLayoutConfig();
diff --git a/src/layouts/BasicLayout/components/HorizontalMixLayout/index.vue b/src/layouts/BasicLayout/components/HorizontalMixLayout/index.vue
index c42f66e4..8a92954a 100644
--- a/src/layouts/BasicLayout/components/HorizontalMixLayout/index.vue
+++ b/src/layouts/BasicLayout/components/HorizontalMixLayout/index.vue
@@ -39,7 +39,7 @@
 import { NLayout, NLayoutContent, NLayoutSider, NLayoutHeader, NScrollbar } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalMenu, SpacePlaceholder } from '../common';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalMenu, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const app = useAppStore();
diff --git a/src/layouts/BasicLayout/components/VerticalLayout/index.vue b/src/layouts/BasicLayout/components/VerticalLayout/index.vue
index 918677b2..63694e05 100644
--- a/src/layouts/BasicLayout/components/VerticalLayout/index.vue
+++ b/src/layouts/BasicLayout/components/VerticalLayout/index.vue
@@ -45,7 +45,7 @@ import {
   SpacePlaceholder,
   GlobalLogo,
   GlobalMenu
-} from '../common';
+} from '@/layouts/common';
 
 const theme = useThemeStore();
 const app = useAppStore();
diff --git a/src/layouts/BasicLayout/components/VerticalMixLayout/index.vue b/src/layouts/BasicLayout/components/VerticalMixLayout/index.vue
index 30288086..baf7f1c6 100644
--- a/src/layouts/BasicLayout/components/VerticalMixLayout/index.vue
+++ b/src/layouts/BasicLayout/components/VerticalMixLayout/index.vue
@@ -21,7 +21,7 @@
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { MixSider, GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '../common';
+import { MixSider, GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const { headerInverted, headerPosition, globalSiderClassAndStyle, scrollbarContentStyle, scrollbar } =
diff --git a/src/layouts/BasicLayout/components/index.ts b/src/layouts/BasicLayout/components/index.ts
index c82e87d8..34db5578 100644
--- a/src/layouts/BasicLayout/components/index.ts
+++ b/src/layouts/BasicLayout/components/index.ts
@@ -4,4 +4,3 @@ import HorizontalLayout from './HorizontalLayout/index.vue';
 import HorizontalMixLayout from './HorizontalMixLayout/index.vue';
 
 export { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout };
-export * from './common';
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 7d74ccac..58c6b432 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -7,7 +7,8 @@
 import type { Component } from 'vue';
 import { useThemeStore } from '@/store';
 import type { NavMode } from '@/interface';
-import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout, SettingDrawer } from './components';
+import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout } from './components';
+import { SettingDrawer } from '../common';
 
 type LayoutComponent = {
   [key in NavMode]: Component;
diff --git a/src/layouts/BlankLayout/index.vue b/src/layouts/BlankLayout/index.vue
index 2c74a103..193a194b 100644
--- a/src/layouts/BlankLayout/index.vue
+++ b/src/layouts/BlankLayout/index.vue
@@ -1,31 +1,14 @@
 <template>
-  <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
-    <div class="inline-block wh-full bg-[#f6f9f8] dark:bg-dark">
-      <router-view v-slot="{ Component, route: itemRoute }">
-        <transition :name="theme.pageAnimateType" mode="out-in" appear>
-          <keep-alive :include="cacheRoutes">
-            <component
-              :is="Component"
-              v-if="app.reloadFlag"
-              :key="itemRoute.fullPath"
-              :class="{ 'min-h-100vh': !routeProps.fullPage }"
-            />
-          </keep-alive>
-        </transition>
-      </router-view>
-    </div>
+  <n-scrollbar ref="scrollbar" class="h-full" :content-style="scrollbarContentStyle">
+    <global-content :show-padding="false" />
   </n-scrollbar>
 </template>
 
 <script lang="ts" setup>
 import { NScrollbar } from 'naive-ui';
-import { useThemeStore, useAppStore } from '@/store';
-import { cacheRoutes } from '@/router';
-import { useRouteProps } from '@/composables';
+import { useLayoutConfig } from '@/composables';
+import { GlobalContent } from '../common';
 
-const theme = useThemeStore();
-const app = useAppStore();
-
-const routeProps = useRouteProps();
+const { scrollbarContentStyle } = useLayoutConfig();
 </script>
 <style scoped></style>
diff --git a/src/layouts/BasicLayout/components/common/GlobalContent/index.vue b/src/layouts/common/GlobalContent/index.vue
similarity index 74%
rename from src/layouts/BasicLayout/components/common/GlobalContent/index.vue
rename to src/layouts/common/GlobalContent/index.vue
index 3948b55d..fffecc5c 100644
--- a/src/layouts/BasicLayout/components/common/GlobalContent/index.vue
+++ b/src/layouts/common/GlobalContent/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="flex-1 flex-col-stretch bg-[#f6f9f8] dark:bg-deep-dark p-16px transition-all duration-300 ease-in-out"
-    :class="{ 'overflow-hidden': routeProps.fullPage }"
+    class="flex-1 flex-col-stretch bg-[#f6f9f8] dark:bg-deep-dark transition-all duration-300 ease-in-out"
+    :class="{ 'overflow-hidden': routeProps.fullPage, 'p-16px': showPadding }"
   >
     <router-view v-slot="{ Component, route }">
       <transition :name="theme.pageAnimateType" mode="out-in" appear>
@@ -18,6 +18,15 @@ import { cacheRoutes } from '@/router';
 import { useAppStore, useThemeStore } from '@/store';
 import { useRouteProps } from '@/composables';
 
+interface Props {
+  /** 显示padding */
+  showPadding?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showPadding: true
+});
+
 const theme = useThemeStore();
 const app = useAppStore();
 const routeProps = useRouteProps();
diff --git a/src/layouts/BasicLayout/components/common/GlobalFooter/index.vue b/src/layouts/common/GlobalFooter/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalFooter/index.vue
rename to src/layouts/common/GlobalFooter/index.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/FullScreen.vue b/src/layouts/common/GlobalHeader/components/FullScreen.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/FullScreen.vue
rename to src/layouts/common/GlobalHeader/components/FullScreen.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/GithubSite.vue b/src/layouts/common/GlobalHeader/components/GithubSite.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/GithubSite.vue
rename to src/layouts/common/GlobalHeader/components/GithubSite.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue
rename to src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/HeaderMenu.vue
rename to src/layouts/common/GlobalHeader/components/HeaderMenu.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/MenuCollapse.vue b/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/MenuCollapse.vue
rename to src/layouts/common/GlobalHeader/components/MenuCollapse.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/SettingDrawerButton.vue b/src/layouts/common/GlobalHeader/components/SettingDrawerButton.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/SettingDrawerButton.vue
rename to src/layouts/common/GlobalHeader/components/SettingDrawerButton.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/ThemeMode.vue b/src/layouts/common/GlobalHeader/components/ThemeMode.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/ThemeMode.vue
rename to src/layouts/common/GlobalHeader/components/ThemeMode.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/UserAvatar.vue
rename to src/layouts/common/GlobalHeader/components/UserAvatar.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/components/index.ts b/src/layouts/common/GlobalHeader/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/components/index.ts
rename to src/layouts/common/GlobalHeader/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalHeader/index.vue
rename to src/layouts/common/GlobalHeader/index.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalLogo/index.vue b/src/layouts/common/GlobalLogo/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalLogo/index.vue
rename to src/layouts/common/GlobalLogo/index.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalMenu/index.vue b/src/layouts/common/GlobalMenu/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalMenu/index.vue
rename to src/layouts/common/GlobalMenu/index.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalTab/components/MultiTab/components/ContextMenu.vue b/src/layouts/common/GlobalTab/components/MultiTab/components/ContextMenu.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalTab/components/MultiTab/components/ContextMenu.vue
rename to src/layouts/common/GlobalTab/components/MultiTab/components/ContextMenu.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalTab/components/MultiTab/components/index.ts b/src/layouts/common/GlobalTab/components/MultiTab/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalTab/components/MultiTab/components/index.ts
rename to src/layouts/common/GlobalTab/components/MultiTab/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/GlobalTab/components/MultiTab/index.vue b/src/layouts/common/GlobalTab/components/MultiTab/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalTab/components/MultiTab/index.vue
rename to src/layouts/common/GlobalTab/components/MultiTab/index.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalTab/components/ReloadButton/index.vue b/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalTab/components/ReloadButton/index.vue
rename to src/layouts/common/GlobalTab/components/ReloadButton/index.vue
diff --git a/src/layouts/BasicLayout/components/common/GlobalTab/components/index.ts b/src/layouts/common/GlobalTab/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalTab/components/index.ts
rename to src/layouts/common/GlobalTab/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/GlobalTab/index.vue
rename to src/layouts/common/GlobalTab/index.vue
diff --git a/src/layouts/BasicLayout/components/common/HeaderPlaceholder/index.vue b/src/layouts/common/HeaderPlaceholder/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/HeaderPlaceholder/index.vue
rename to src/layouts/common/HeaderPlaceholder/index.vue
diff --git a/src/layouts/BasicLayout/components/common/MixSider/components/MixMenu.vue b/src/layouts/common/MixSider/components/MixMenu.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/MixSider/components/MixMenu.vue
rename to src/layouts/common/MixSider/components/MixMenu.vue
diff --git a/src/layouts/BasicLayout/components/common/MixSider/components/MixMenuCollapse.vue b/src/layouts/common/MixSider/components/MixMenuCollapse.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/MixSider/components/MixMenuCollapse.vue
rename to src/layouts/common/MixSider/components/MixMenuCollapse.vue
diff --git a/src/layouts/BasicLayout/components/common/MixSider/components/MixMenuDrawer.vue b/src/layouts/common/MixSider/components/MixMenuDrawer.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/MixSider/components/MixMenuDrawer.vue
rename to src/layouts/common/MixSider/components/MixMenuDrawer.vue
diff --git a/src/layouts/BasicLayout/components/common/MixSider/components/index.ts b/src/layouts/common/MixSider/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/MixSider/components/index.ts
rename to src/layouts/common/MixSider/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/MixSider/index.vue b/src/layouts/common/MixSider/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/MixSider/index.vue
rename to src/layouts/common/MixSider/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/DarkMode/index.vue
rename to src/layouts/common/SettingDrawer/components/DarkMode/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/DrawerButton/index.vue b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/DrawerButton/index.vue
rename to src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/NavMode/components/NavType.vue b/src/layouts/common/SettingDrawer/components/NavMode/components/NavType.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/NavMode/components/NavType.vue
rename to src/layouts/common/SettingDrawer/components/NavMode/components/NavType.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/NavMode/components/index.ts b/src/layouts/common/SettingDrawer/components/NavMode/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/NavMode/components/index.ts
rename to src/layouts/common/SettingDrawer/components/NavMode/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/NavMode/index.vue b/src/layouts/common/SettingDrawer/components/NavMode/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/NavMode/index.vue
rename to src/layouts/common/SettingDrawer/components/NavMode/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/PageFunc/index.vue b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/PageFunc/index.vue
rename to src/layouts/common/SettingDrawer/components/PageFunc/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/PageView/index.vue b/src/layouts/common/SettingDrawer/components/PageView/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/PageView/index.vue
rename to src/layouts/common/SettingDrawer/components/PageView/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/SystemTheme/index.vue b/src/layouts/common/SettingDrawer/components/SystemTheme/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/SystemTheme/index.vue
rename to src/layouts/common/SettingDrawer/components/SystemTheme/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/ThemeConfig/index.vue b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/ThemeConfig/index.vue
rename to src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/common/ColorBlock.vue b/src/layouts/common/SettingDrawer/components/common/ColorBlock.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/common/ColorBlock.vue
rename to src/layouts/common/SettingDrawer/components/common/ColorBlock.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/common/SettingMenuItem.vue b/src/layouts/common/SettingDrawer/components/common/SettingMenuItem.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/common/SettingMenuItem.vue
rename to src/layouts/common/SettingDrawer/components/common/SettingMenuItem.vue
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/common/index.ts b/src/layouts/common/SettingDrawer/components/common/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/common/index.ts
rename to src/layouts/common/SettingDrawer/components/common/index.ts
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/components/index.ts b/src/layouts/common/SettingDrawer/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/components/index.ts
rename to src/layouts/common/SettingDrawer/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/SettingDrawer/index.vue b/src/layouts/common/SettingDrawer/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SettingDrawer/index.vue
rename to src/layouts/common/SettingDrawer/index.vue
diff --git a/src/layouts/BasicLayout/components/common/SpacePlaceholder/index.vue b/src/layouts/common/SpacePlaceholder/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/SpacePlaceholder/index.vue
rename to src/layouts/common/SpacePlaceholder/index.vue
diff --git a/src/layouts/BasicLayout/components/common/VerticalMixSider/components/MixMenu.vue b/src/layouts/common/VerticalMixSider/components/MixMenu.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/VerticalMixSider/components/MixMenu.vue
rename to src/layouts/common/VerticalMixSider/components/MixMenu.vue
diff --git a/src/layouts/BasicLayout/components/common/VerticalMixSider/components/MixMenuCollapse.vue b/src/layouts/common/VerticalMixSider/components/MixMenuCollapse.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/VerticalMixSider/components/MixMenuCollapse.vue
rename to src/layouts/common/VerticalMixSider/components/MixMenuCollapse.vue
diff --git a/src/layouts/BasicLayout/components/common/VerticalMixSider/components/MixMenuDrawer.vue b/src/layouts/common/VerticalMixSider/components/MixMenuDrawer.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/VerticalMixSider/components/MixMenuDrawer.vue
rename to src/layouts/common/VerticalMixSider/components/MixMenuDrawer.vue
diff --git a/src/layouts/BasicLayout/components/common/VerticalMixSider/components/index.ts b/src/layouts/common/VerticalMixSider/components/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/VerticalMixSider/components/index.ts
rename to src/layouts/common/VerticalMixSider/components/index.ts
diff --git a/src/layouts/BasicLayout/components/common/VerticalMixSider/index.vue b/src/layouts/common/VerticalMixSider/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/common/VerticalMixSider/index.vue
rename to src/layouts/common/VerticalMixSider/index.vue
diff --git a/src/layouts/BasicLayout/components/common/index.ts b/src/layouts/common/index.ts
similarity index 100%
rename from src/layouts/BasicLayout/components/common/index.ts
rename to src/layouts/common/index.ts
diff --git a/src/settings/index.ts b/src/settings/index.ts
index 7b1f54ec..a56b260d 100644
--- a/src/settings/index.ts
+++ b/src/settings/index.ts
@@ -1 +1,2 @@
 export * from './theme';
+export * from './website';
diff --git a/src/settings/website.json b/src/settings/website.json
index 4c7210d5..801f012f 100644
--- a/src/settings/website.json
+++ b/src/settings/website.json
@@ -23,5 +23,9 @@
 				"children": []
 			}
 		]
+	},
+	{
+		"title": "个人",
+		"children": []
 	}
 ]
diff --git a/src/settings/website.ts b/src/settings/website.ts
index 4f4a13cf..ff9af5fa 100644
--- a/src/settings/website.ts
+++ b/src/settings/website.ts
@@ -2,6 +2,4 @@ import type { WebsiteCategory } from '@/interface';
 
 import websiteJson from './website.json';
 
-const website: WebsiteCategory[] = websiteJson;
-
-export default website;
+export const website: WebsiteCategory[] = websiteJson;
diff --git a/src/views/system/login/index.vue b/src/views/system/login/index.vue
index 4fa03e49..1ef640d8 100644
--- a/src/views/system/login/index.vue
+++ b/src/views/system/login/index.vue
@@ -58,7 +58,11 @@ const modules: LoginModule[] = [
   { key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
 ];
 
-const bgColor = computed(() => mixColor('#ffffff', theme.themeColor, 0.3));
+const bgColor = computed(() => {
+  const COLOR_WHITE = '#ffffff';
+  const ratio = theme.darkMode ? 0.6 : 0.3;
+  return mixColor(COLOR_WHITE, theme.themeColor, ratio);
+});
 </script>
 <style scoped>
 .login-bg {
diff --git a/src/views/website/components/WebsiteHeader.vue b/src/views/website/components/WebsiteHeader.vue
new file mode 100644
index 00000000..82f301cf
--- /dev/null
+++ b/src/views/website/components/WebsiteHeader.vue
@@ -0,0 +1,19 @@
+<template>
+  <header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
+    <div class="flex-y-center h-full">
+      <system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
+      <n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
+    </div>
+    <theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
+  </header>
+</template>
+
+<script setup lang="ts">
+import { NGradientText } from 'naive-ui';
+import { SystemLogo, ThemeSwitch } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
+</script>
+<style scoped></style>
diff --git a/src/views/website/components/index.ts b/src/views/website/components/index.ts
new file mode 100644
index 00000000..7fabde1a
--- /dev/null
+++ b/src/views/website/components/index.ts
@@ -0,0 +1,3 @@
+import WebsiteHeader from './WebsiteHeader.vue';
+
+export { WebsiteHeader };
diff --git a/src/views/website/index.vue b/src/views/website/index.vue
index 9490e5b7..c65ac632 100644
--- a/src/views/website/index.vue
+++ b/src/views/website/index.vue
@@ -1,22 +1,12 @@
 <template>
   <div>
-    <header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
-      <div class="flex-y-center">
-        <system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
-        <n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
-      </div>
-      <theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
-    </header>
+    <website-header />
     <n-space :vertical="true"></n-space>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NSpace, NGradientText } from 'naive-ui';
-import { SystemLogo, ThemeSwitch } from '@/components';
-import { useThemeStore } from '@/store';
-
-const theme = useThemeStore();
-const { handleDarkMode } = useThemeStore();
+import { NSpace } from 'naive-ui';
+import { WebsiteHeader } from './components';
 </script>
 <style scoped></style>