diff --git a/src/interface/theme.ts b/src/interface/theme.ts
index 1644685d..c5f07478 100644
--- a/src/interface/theme.ts
+++ b/src/interface/theme.ts
@@ -19,6 +19,8 @@ export interface ThemeSettings {
   multiTabStyle: MultiTabStyle;
   /** 面包屑样式 */
   crumbsStyle: CrumbsStyle;
+  /** 底部样式 */
+  footerStyle: FooterStyle;
   /** 页面样式 */
   pageStyle: PageStyle;
   /** 固定头部和多页签 */
@@ -105,6 +107,11 @@ interface CrumbsStyle {
   showIcon: boolean;
 }
 
+interface FooterStyle {
+  /** 底部高度 */
+  height: number;
+}
+
 export type AnimateType = keyof typeof EnumAnimate;
 
 interface AnimateTypeList {
diff --git a/src/layouts/BaseLayout/components/HorizontalLayout/index.vue b/src/layouts/BaseLayout/components/HorizontalLayout/index.vue
new file mode 100644
index 00000000..71868bcb
--- /dev/null
+++ b/src/layouts/BaseLayout/components/HorizontalLayout/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <div class="flex">
+      <h3>horizontal</h3>
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue b/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue
new file mode 100644
index 00000000..8c61314c
--- /dev/null
+++ b/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <div class="flex">
+      <h3>horizontal-mix</h3>
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/VerticalLayout/index.vue b/src/layouts/BaseLayout/components/VerticalLayout/index.vue
new file mode 100644
index 00000000..b2b402f8
--- /dev/null
+++ b/src/layouts/BaseLayout/components/VerticalLayout/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <n-layout :has-sider="true" class="h-full">
+    <n-layout-sider
+      class="global-sider z-12"
+      :inverted="inverted"
+      collapse-mode="width"
+      :collapsed="app.menu.collapsed"
+      :collapsed-width="theme.menuStyle.collapsedWidth"
+      :width="menuWidth"
+      :native-scrollbar="false"
+      @collapse="handleMenuCollapse(true)"
+      @expand="handleMenuCollapse(false)"
+    >
+      <global-logo :show-title="!app.menu.collapsed" class="header-height absolute-lt w-full z-2" />
+      <global-menu class="header-padding" />
+    </n-layout-sider>
+    <n-layout-content
+      :native-scrollbar="false"
+      :content-style="{ height: routeProps.fullPage ? '100%' : 'auto' }"
+      class="bg-[#f6f9f8] dark:bg-deep-dark"
+    >
+      <n-layout-header :inverted="headerInverted" :position="headerPosition" class="z-11">
+        <global-header
+          :show-logo="false"
+          :show-menu-collape="true"
+          :show-menu="false"
+          class="header-height relative z-2"
+        />
+        <global-tab v-if="theme.multiTabStyle.visible" class="tab-height" />
+      </n-layout-header>
+      <div v-if="theme.fixedHeaderAndTab" class="header-tab_height"></div>
+      <global-content />
+      <global-footer />
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NLayout, NLayoutSider, NLayoutContent, NLayoutHeader } from 'naive-ui';
+import { useThemeStore, useAppStore } from '@/store';
+import { useRouteProps } from '@/hooks';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalLogo, GlobalMenu } from '../common';
+
+const theme = useThemeStore();
+const app = useAppStore();
+const routeProps = useRouteProps();
+
+const { handleMenuCollapse } = useAppStore();
+
+const inverted = computed(() => {
+  return theme.navStyle.theme !== 'light';
+});
+
+const menuWidth = computed(() => {
+  const { collapsed } = app.menu;
+  const { collapsedWidth, width } = theme.menuStyle;
+  return collapsed ? collapsedWidth : width;
+});
+
+const headerInverted = computed(() => {
+  return theme.navStyle.theme !== 'dark' ? inverted.value : !inverted.value;
+});
+const headerPosition = computed(() => (theme.fixedHeaderAndTab ? 'absolute' : 'static'));
+const headerHeight = computed(() => {
+  const { height } = theme.headerStyle;
+  return `${height}px`;
+});
+
+const tabHeight = computed(() => {
+  const { height } = theme.multiTabStyle;
+  return `${height}px`;
+});
+
+const headerAndTabHeight = computed(() => {
+  const {
+    multiTabStyle: { visible, height: tH },
+    headerStyle: { height: hH }
+  } = theme;
+  const height = visible ? tH + hH : hH;
+  return `${height}px`;
+});
+</script>
+<style scoped>
+.global-sider {
+  transition: all 0.2s ease-in-out;
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+}
+.header-height {
+  height: v-bind(headerHeight);
+}
+.header-padding {
+  padding-top: v-bind(headerHeight);
+}
+.tab-height {
+  height: v-bind(tabHeight);
+}
+.header-tab_height {
+  height: v-bind(headerAndTabHeight);
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue b/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue
new file mode 100644
index 00000000..e07069d4
--- /dev/null
+++ b/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <div class="flex">
+      <h3>vertical-mix</h3>
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalContent/index.vue b/src/layouts/BaseLayout/components/common/GlobalContent/index.vue
new file mode 100644
index 00000000..e17becc5
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalContent/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="p-16px" :class="{ 'router-view_full-page_height': routeProps.fullPage }">
+    <router-view v-slot="{ Component, route }">
+      <transition :name="theme.pageAnimateType" mode="out-in" appear>
+        <keep-alive :include="cacheRoutes">
+          <component :is="Component" v-if="reload" :key="route.fullPath" :class="{ 'h-full': routeProps.fullPage }" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useThemeStore } from '@/store';
+import { useReloadInject } from '@/context';
+import { cacheRoutes } from '@/router';
+import { useRouteProps } from '@/hooks';
+
+const theme = useThemeStore();
+const { reload } = useReloadInject();
+const routeProps = useRouteProps();
+
+const routeViewFullPageHeight = computed(() => {
+  const {
+    multiTabStyle: { visible, height: tH },
+    headerStyle: { height: hH },
+    footerStyle: { height: fH }
+  } = theme;
+  const height = visible ? tH + hH + fH : hH + fH;
+  return `calc(100% - ${height}px)`;
+});
+</script>
+<style scoped>
+.router-view_full-page_height {
+  height: v-bind(routeViewFullPageHeight);
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalFooter/index.vue b/src/layouts/BaseLayout/components/common/GlobalFooter/index.vue
new file mode 100644
index 00000000..cf9a8f28
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalFooter/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <n-layout-footer>
+    <div class="footer-height flex-center">Copyright ©2021 Soybean Admin</div>
+  </n-layout-footer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NLayoutFooter } from 'naive-ui';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+
+const footerHeight = computed(() => `${theme.footerStyle.height}px`);
+</script>
+<style scoped>
+.footer-height {
+  height: v-bind(footerHeight);
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/FullScreen.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/FullScreen.vue
new file mode 100644
index 00000000..18b85410
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/FullScreen.vue
@@ -0,0 +1,14 @@
+<template>
+  <hover-container class="w-40px h-full" tooltip-content="全屏" @click="toggle">
+    <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
+    <icon-gridicons-fullscreen v-else class="text-16px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { useFullscreen } from '@vueuse/core';
+import { HoverContainer } from '@/components';
+
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/GithubSite.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/GithubSite.vue
new file mode 100644
index 00000000..e0992af9
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/GithubSite.vue
@@ -0,0 +1,12 @@
+<template>
+  <hover-container tooltip-content="github" class="w-40px h-full">
+    <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
+      <icon-mdi-github class="text-20px text-[#666]" />
+    </a>
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue
new file mode 100644
index 00000000..1c41fdf3
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -0,0 +1,91 @@
+<template>
+  <n-breadcrumb class="px-12px">
+    <template v-for="breadcrumb in breadcrumbList" :key="breadcrumb.key">
+      <n-breadcrumb-item>
+        <n-dropdown v-if="breadcrumb.hasChildren" :options="breadcrumb.children" @select="dropdownSelect">
+          <span>
+            <Icon
+              v-if="theme.crumbsStyle.showIcon && breadcrumb.iconName"
+              :icon="breadcrumb.iconName"
+              class="inline-block mr-4px text-16px"
+            />
+            <span>{{ breadcrumb.label }}</span>
+          </span>
+        </n-dropdown>
+        <template v-else>
+          <Icon
+            v-if="theme.crumbsStyle.showIcon && breadcrumb.iconName"
+            :icon="breadcrumb.iconName"
+            class="inline-block mr-4px text-16px"
+          />
+          <span>{{ breadcrumb.label }}</span>
+        </template>
+      </n-breadcrumb-item>
+    </template>
+  </n-breadcrumb>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { RouteLocationMatched } from 'vue-router';
+import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui';
+import type { DropdownOption } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { EnumRoutePath } from '@/enum';
+import { useThemeStore } from '@/store';
+import type { RoutePathKey } from '@/interface';
+
+type Breadcrumb = DropdownOption & {
+  key: string;
+  label: string;
+  disabled: boolean;
+  routeName: RoutePathKey;
+  hasChildren: boolean;
+  iconName?: string;
+  children?: Breadcrumb[];
+};
+
+const theme = useThemeStore();
+const route = useRoute();
+const router = useRouter();
+
+const breadcrumbList = computed<Breadcrumb[]>(() => generateBreadcrumb());
+
+function generateBreadcrumb() {
+  const { matched } = route;
+  return recursionBreadcrumb(matched);
+}
+
+/** 递归匹配路由获取面包屑数据 */
+function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) {
+  const list: Breadcrumb[] = [];
+  routeMatched.forEach(item => {
+    if (!item.meta?.isNotMenu) {
+      const routeName = item.name as RoutePathKey;
+      const breadcrumItem: Breadcrumb = {
+        key: routeName,
+        label: (item.meta?.title as string) || '',
+        disabled: item.path === EnumRoutePath.root,
+        routeName,
+        hasChildren: false
+      };
+      if (item.meta?.icon) {
+        breadcrumItem.iconName = item.meta.icon as string;
+      }
+      if (item.children && item.children.length) {
+        breadcrumItem.hasChildren = true;
+        breadcrumItem.children = recursionBreadcrumb(item.children as RouteLocationMatched[]);
+      }
+      list.push(breadcrumItem);
+    }
+  });
+  return list;
+}
+
+function dropdownSelect(optionKey: string) {
+  const key = optionKey as RoutePathKey;
+  router.push({ name: key });
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/HeaderMenu.vue
new file mode 100644
index 00000000..dd7385e3
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/HeaderMenu.vue
@@ -0,0 +1,27 @@
+<template>
+  <n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { MenuOption } from 'naive-ui';
+import { NMenu } from 'naive-ui';
+import { menus } from '@/router';
+import { GlobalMenuOption } from '@/interface';
+
+const router = useRouter();
+const route = useRoute();
+
+const activeKey = computed(() => getActiveKey());
+
+function getActiveKey() {
+  return route.name as string;
+}
+
+function handleUpdateMenu(key: string, item: MenuOption) {
+  const menuItem = item as GlobalMenuOption;
+  router.push(menuItem.routePath);
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/MenuCollapse.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/MenuCollapse.vue
new file mode 100644
index 00000000..9d982606
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/MenuCollapse.vue
@@ -0,0 +1,15 @@
+<template>
+  <hover-container class="w-40px h-full" @click="toggleMenu">
+    <icon-line-md-menu-unfold-left v-if="app.menu.collapsed" class="text-16px" />
+    <icon-line-md-menu-fold-left v-else class="text-16px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store';
+import { HoverContainer } from '@/components';
+
+const app = useAppStore();
+const { toggleMenu } = useAppStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/SettingDrawerButton.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/SettingDrawerButton.vue
new file mode 100644
index 00000000..cd5e7e88
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/SettingDrawerButton.vue
@@ -0,0 +1,13 @@
+<template>
+  <hover-container class="w-40px h-full" tooltip-content="项目配置" placement="bottom-end" @click="openSettingDrawer">
+    <icon-mdi-light-cog class="text-16px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store';
+import { HoverContainer } from '@/components';
+
+const { openSettingDrawer } = useAppStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/ThemeMode.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/ThemeMode.vue
new file mode 100644
index 00000000..ea6b1ff1
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/ThemeMode.vue
@@ -0,0 +1,15 @@
+<template>
+  <hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式" @click="toggleDarkMode">
+    <icon-mdi-moon-waning-crescent v-if="theme.darkMode" class="text-14px" />
+    <icon-mdi-white-balance-sunny v-else class="text-14px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { toggleDarkMode } = useThemeStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue
new file mode 100644
index 00000000..9ad56125
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue
@@ -0,0 +1,55 @@
+<template>
+  <n-dropdown :options="options" @select="handleDropdown">
+    <hover-container class="px-12px">
+      <img :src="avatar" class="w-32px h-32px" />
+      <span class="pl-8px text-16px font-medium">Soybean</span>
+    </hover-container>
+  </n-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { NDropdown, useDialog } from 'naive-ui';
+import { HoverContainer } from '@/components';
+import { useRouterChange } from '@/hooks';
+import { iconifyRender, resetAuthStorage } from '@/utils';
+import avatar from '@/assets/svg/avatar/avatar01.svg';
+
+type DropdownKey = 'user-center' | 'logout';
+
+const { toLogin } = useRouterChange();
+const dialog = useDialog();
+
+const options = [
+  {
+    label: '用户中心',
+    key: 'user-center',
+    icon: iconifyRender('carbon:user-avatar')
+  },
+  {
+    type: 'divider',
+    key: 'divider'
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: iconifyRender('carbon:logout')
+  }
+];
+
+function handleDropdown(optionKey: string) {
+  const key = optionKey as DropdownKey;
+  if (key === 'logout') {
+    dialog.info({
+      title: '提示',
+      content: '您确定要退出登录吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        resetAuthStorage();
+        toLogin('pwd-login', 'current');
+      }
+    });
+  }
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/index.ts b/src/layouts/BaseLayout/components/common/GlobalHeader/components/index.ts
new file mode 100644
index 00000000..bf5e1e42
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/index.ts
@@ -0,0 +1,19 @@
+import HeaderMenu from './HeaderMenu.vue';
+import GlobalBreadcrumb from './GlobalBreadcrumb.vue';
+import UserAvatar from './UserAvatar.vue';
+import MenuCollapse from './MenuCollapse.vue';
+import ThemeMode from './ThemeMode.vue';
+import FullScreen from './FullScreen.vue';
+import SettingDrawerButton from './SettingDrawerButton.vue';
+import GithubSite from './GithubSite.vue';
+
+export {
+  HeaderMenu,
+  GlobalBreadcrumb,
+  UserAvatar,
+  MenuCollapse,
+  ThemeMode,
+  FullScreen,
+  SettingDrawerButton,
+  GithubSite
+};
diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/index.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/index.vue
new file mode 100644
index 00000000..7c59e909
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalHeader/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="global-header flex-y-center w-full">
+    <global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.menuStyle.width + 'px' }" />
+    <div class="flex-1-hidden flex-y-center h-full">
+      <menu-collapse v-if="showMenuCollape" />
+      <global-breadcrumb v-if="theme.crumbsStyle.visible" />
+    </div>
+    <div
+      v-if="showMenu"
+      class="flex-1-hidden flex-y-center h-full"
+      :style="{ justifyContent: theme.menuStyle.horizontalPosition }"
+    >
+      <header-menu />
+    </div>
+    <div class="flex justify-end h-full">
+      <github-site />
+      <full-screen />
+      <theme-mode />
+      <user-avatar />
+      <setting-drawer-button v-if="showSettingButton" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useThemeStore } from '@/store';
+import {
+  HeaderMenu,
+  GlobalBreadcrumb,
+  UserAvatar,
+  MenuCollapse,
+  ThemeMode,
+  FullScreen,
+  GithubSite,
+  SettingDrawerButton
+} from './components';
+import GlobalLogo from '../GlobalLogo/index.vue';
+
+interface Props {
+  /** 显示logo */
+  showLogo: boolean;
+  /** 显示菜单折叠按钮 */
+  showMenuCollape: boolean;
+  /** 显示菜单 */
+  showMenu: boolean;
+}
+
+defineProps<Props>();
+
+const theme = useThemeStore();
+
+const showSettingButton = import.meta.env.DEV || import.meta.env.VITE_HTTP_ENV === 'STAGING';
+</script>
+<style scoped>
+.global-header {
+  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue b/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue
new file mode 100644
index 00000000..686054ea
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <a href="/" class="flex-center nowrap-hidden bg-light dark:bg-dark cursor-pointer">
+    <system-logo class="w-32px h-32px" :color="theme.themeColor" />
+    <h2 v-show="showTitle" class="text-primary pl-8px text-16px font-bold">{{ title }}</h2>
+  </a>
+</template>
+
+<script lang="ts" setup>
+import { SystemLogo } from '@/components';
+import { useThemeStore } from '@/store';
+import { useAppTitle } from '@/hooks';
+
+interface Props {
+  /** 显示名字 */
+  showTitle: boolean;
+}
+
+defineProps<Props>();
+
+const theme = useThemeStore();
+const title = useAppTitle();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalMenu/index.vue b/src/layouts/BaseLayout/components/common/GlobalMenu/index.vue
new file mode 100644
index 00000000..07893614
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalMenu/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <n-menu
+      :value="activeKey"
+      :collapsed="app.menu.collapsed"
+      :collapsed-width="theme.menuStyle.collapsedWidth"
+      :collapsed-icon-size="22"
+      :options="menus"
+      :expanded-keys="expandedKeys"
+      :indent="18"
+      @update:value="handleUpdateMenu"
+      @update:expanded-keys="handleUpdateExpandedKeys"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { NMenu } from 'naive-ui';
+import type { MenuOption } from 'naive-ui';
+import { useThemeStore, useAppStore } from '@/store';
+import { menus } from '@/router';
+import { GlobalMenuOption } from '@/interface';
+
+const theme = useThemeStore();
+const app = useAppStore();
+const router = useRouter();
+const route = useRoute();
+
+const activeKey = computed(() => route.name as string);
+const expandedKeys = ref<string[]>(getExpendedKeys());
+
+function getExpendedKeys() {
+  const keys: string[] = [];
+  route.matched.forEach(item => {
+    if (item.children && item.children.length) {
+      keys.push(item.name as string);
+    }
+  });
+  return keys;
+}
+
+function handleUpdateMenu(key: string, item: MenuOption) {
+  const menuItem = item as GlobalMenuOption;
+  router.push(menuItem.routePath);
+}
+
+function handleUpdateExpandedKeys(keys: string[]) {
+  expandedKeys.value = keys;
+}
+
+watch(
+  () => route.name,
+  () => {
+    expandedKeys.value = getExpendedKeys();
+  }
+);
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/components/MultiTab/index.vue b/src/layouts/BaseLayout/components/common/GlobalTab/components/MultiTab/index.vue
new file mode 100644
index 00000000..cc676f0d
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/components/MultiTab/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div v-if="theme.multiTabStyle.mode === 'chrome'" class="flex items-end h-full">
+    <chrome-tab
+      v-for="item in app.multiTab.routes"
+      :key="item.path"
+      :is-active="app.multiTab.activeRoute === item.fullPath"
+      :primary-color="theme.themeColor"
+      :closable="item.name !== ROUTE_HOME.name"
+      :dark-mode="theme.darkMode"
+      @click="handleClickTab(item.fullPath)"
+      @close="removeMultiTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
+    >
+      {{ item.meta?.title }}
+    </chrome-tab>
+  </div>
+  <div v-if="theme.multiTabStyle.mode === 'button'" class="flex-y-center h-full">
+    <button-tab
+      v-for="item in app.multiTab.routes"
+      :key="item.path"
+      class="mr-10px"
+      :is-active="app.multiTab.activeRoute === item.fullPath"
+      :primary-color="theme.themeColor"
+      :closable="item.name !== ROUTE_HOME.name"
+      :dark-mode="theme.darkMode"
+      @click="handleClickTab(item.fullPath)"
+      @close="removeMultiTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
+    >
+      {{ item.meta?.title }}
+    </button-tab>
+  </div>
+  <context-menu
+    :visible="dropdownVisible"
+    :current-path="dropdownConfig.currentPath"
+    :x="dropdownConfig.x"
+    :y="dropdownConfig.y"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive, nextTick } from 'vue';
+import { useThemeStore, useAppStore } from '@/store';
+import { ROUTE_HOME } from '@/router';
+import { ChromeTab, ButtonTab } from '@/components';
+import { useBoolean } from '@/hooks';
+import { ContextMenu } from '../common';
+
+const theme = useThemeStore();
+const app = useAppStore();
+const { removeMultiTab, handleClickTab } = useAppStore();
+const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
+
+const dropdownConfig = reactive({
+  x: 0,
+  y: 0,
+  currentPath: ''
+});
+function setDropdownConfig(x: number, y: number, currentPath: string) {
+  Object.assign(dropdownConfig, { x, y, currentPath });
+}
+
+function handleContextMenu(e: MouseEvent, fullPath: string) {
+  e.preventDefault();
+  const { clientX, clientY } = e;
+  hideDropdown();
+  setDropdownConfig(clientX, clientY, fullPath);
+  nextTick(() => {
+    showDropdown();
+  });
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/components/ReloadButton/index.vue b/src/layouts/BaseLayout/components/common/GlobalTab/components/ReloadButton/index.vue
new file mode 100644
index 00000000..2c3bad69
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/components/ReloadButton/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
+    <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+import { useReloadInject } from '@/context';
+import { useLoading } from '@/hooks';
+
+const { handleReload } = useReloadInject();
+const { loading, startLoading, endLoading } = useLoading();
+
+function handleRefresh() {
+  startLoading();
+  handleReload();
+  setTimeout(() => {
+    endLoading();
+  }, 1000);
+}
+</script>
+<style scoped>
+.reload-animation {
+  animation: rotate 1s;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/components/common/ContextMenu.vue b/src/layouts/BaseLayout/components/common/GlobalTab/components/common/ContextMenu.vue
new file mode 100644
index 00000000..4917358f
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/components/common/ContextMenu.vue
@@ -0,0 +1,153 @@
+<template>
+  <n-dropdown
+    :show="dropdownVisible"
+    :options="options"
+    placement="bottom-start"
+    :x="x"
+    :y="y"
+    @clickoutside="hide"
+    @select="handleDropdown"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import { NDropdown } from 'naive-ui';
+import type { DropdownOption } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { useReloadInject } from '@/context';
+import { useBoolean } from '@/hooks';
+import { ROUTE_HOME } from '@/router';
+import { iconifyRender } from '@/utils';
+
+interface Props {
+  /** 右键菜单可见性 */
+  visible?: boolean;
+  /** 当前是否是路由首页 */
+  isRouteHome?: boolean;
+  /** 当前路由路径 */
+  currentPath?: string;
+  /** 鼠标x坐标 */
+  x: number;
+  /** 鼠标y坐标 */
+  y: number;
+}
+
+type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
+type Option = DropdownOption & {
+  key: DropdownKey;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  isRouteHome: false,
+  currentPath: ''
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const app = useAppStore();
+const { removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore();
+const { handleReload } = useReloadInject();
+const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
+
+const options = computed<Option[]>(() => [
+  {
+    label: '重新加载',
+    key: 'reload-current',
+    disabled: props.currentPath !== app.multiTab.activeRoute,
+    icon: iconifyRender('ant-design:reload-outlined')
+  },
+  {
+    label: '关闭标签页',
+    key: 'close-current',
+    disabled: props.currentPath === ROUTE_HOME.path,
+    icon: iconifyRender('ant-design:close-outlined')
+  },
+  {
+    label: '关闭其他标签页',
+    key: 'close-other',
+    icon: iconifyRender('ant-design:column-width-outlined')
+  },
+  {
+    label: '关闭左边标签页',
+    key: 'close-left',
+    icon: iconifyRender('mdi:format-horizontal-align-left')
+  },
+  {
+    label: '关闭右边标签页',
+    key: 'close-right',
+    icon: iconifyRender('mdi:format-horizontal-align-right')
+  },
+  {
+    label: '关闭全部标签页',
+    key: 'close-all',
+    icon: iconifyRender('ant-design:minus-outlined')
+  }
+]);
+
+const actionMap = new Map<DropdownKey, () => void>([
+  [
+    'reload-current',
+    () => {
+      handleReload();
+    }
+  ],
+  [
+    'close-current',
+    () => {
+      removeMultiTab(props.currentPath);
+    }
+  ],
+  [
+    'close-other',
+    () => {
+      clearMultiTab([props.currentPath]);
+    }
+  ],
+  [
+    'close-left',
+    () => {
+      clearLeftMultiTab(props.currentPath);
+    }
+  ],
+  [
+    'close-right',
+    () => {
+      clearRightMultiTab(props.currentPath);
+    }
+  ],
+  [
+    'close-all',
+    () => {
+      clearMultiTab();
+    }
+  ]
+]);
+
+function handleDropdown(optionKey: string) {
+  const key = optionKey as DropdownKey;
+  const actionFunc = actionMap.get(key);
+  if (actionFunc) {
+    actionFunc();
+  }
+  hide();
+}
+
+watch(
+  () => props.visible,
+  newValue => {
+    if (newValue) {
+      show();
+    } else {
+      hide();
+    }
+  }
+);
+watch(dropdownVisible, newValue => {
+  emit('update:visible', newValue);
+});
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/components/common/index.ts b/src/layouts/BaseLayout/components/common/GlobalTab/components/common/index.ts
new file mode 100644
index 00000000..344a7087
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/components/common/index.ts
@@ -0,0 +1,3 @@
+import ContextMenu from './ContextMenu.vue';
+
+export { ContextMenu };
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/components/index.ts b/src/layouts/BaseLayout/components/common/GlobalTab/components/index.ts
new file mode 100644
index 00000000..386d9184
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/components/index.ts
@@ -0,0 +1,4 @@
+import MultiTab from './MultiTab/index.vue';
+import ReloadButton from './ReloadButton/index.vue';
+
+export { MultiTab, ReloadButton };
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/index.vue b/src/layouts/BaseLayout/components/common/GlobalTab/index.vue
new file mode 100644
index 00000000..c9ef4d0f
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="multi-tab flex-center w-full pl-16px bg-light dark:bg-dark">
+    <div class="flex-1-hidden h-full">
+      <better-scroll :options="{ scrollX: true, scrollY: false, click: true }">
+        <multi-tab />
+      </better-scroll>
+    </div>
+    <reload-button />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useAppStore } from '@/store';
+import { BetterScroll } from '@/components';
+import { MultiTab, ReloadButton } from './components';
+
+const route = useRoute();
+const { initMultiTab, addMultiTab, setActiveMultiTab } = useAppStore();
+
+function init() {
+  initMultiTab();
+}
+
+watch(
+  () => route.fullPath,
+  newValue => {
+    addMultiTab(route);
+    setActiveMultiTab(newValue);
+  }
+);
+
+// 初始化
+init();
+</script>
+<style scoped>
+.multi-tab {
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/DarkMode/index.vue
new file mode 100644
index 00000000..cf91a1f6
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/DarkMode/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <n-divider title-placement="center">深色主题</n-divider>
+  <div class="flex-center">
+    <n-switch :value="theme.darkMode" @update:value="handleDarkMode">
+      <template #checked>
+        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+      </template>
+      <template #unchecked>
+        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+      </template>
+    </n-switch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSwitch } from 'naive-ui';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
+</script>
+<style scoped>
+:deep(.n-switch__rail) {
+  background-color: #000e1c !important;
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/components/NavType.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/components/NavType.vue
new file mode 100644
index 00000000..9c37c336
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/components/NavType.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="nav-type border-2px rounded-6px cursor-pointer"
+    :class="[checked ? 'border-primary' : 'border-transparent']"
+  >
+    <n-tooltip :placement="activeConfig.placement" trigger="hover">
+      <template #trigger>
+        <div class="nav-type-main relative w-56px h-48px bg-[#fff] rounded-4px overflow-hidden">
+          <div class="absolute-lt bg-[#273352]" :class="`${activeConfig.menuClass}`"></div>
+          <div class="absolute-rb bg-[#f0f2f5]" :class="`${activeConfig.mainClass}`"></div>
+        </div>
+      </template>
+      <span>{{ EnumNavMode[mode] }}</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
+import { EnumNavMode } from '@/enum';
+import type { NavMode } from '@/interface';
+
+interface Props {
+  /** 导航模式 */
+  mode?: NavMode;
+  /** 选中状态 */
+  checked?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'vertical',
+  checked: false,
+  primaryColor: '#409EFF'
+});
+
+const config = new Map<NavMode, { placement: FollowerPlacement; menuClass: string; mainClass: string }>([
+  ['vertical', { placement: 'bottom-start', menuClass: 'w-1/3 h-full', mainClass: 'w-2/3 h-3/4' }],
+  ['vertical-mix', { placement: 'bottom', menuClass: 'w-1/4 h-full', mainClass: 'w-2/3 h-3/4' }],
+  ['horizontal', { placement: 'bottom', menuClass: 'w-full h-1/4', mainClass: 'w-full h-3/4' }],
+  ['horizontal-mix', { placement: 'bottom-end', menuClass: 'w-full h-1/4', mainClass: 'w-2/3 h-3/4' }]
+]);
+
+const activeConfig = computed(() => config.get(props.mode)!);
+</script>
+<style scoped>
+.border-primary {
+  border-color: v-bind(primaryColor);
+}
+.nav-type:hover {
+  border-color: v-bind(primaryColor);
+}
+.nav-type-main {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/components/index.ts b/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/components/index.ts
new file mode 100644
index 00000000..1ffab7cd
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/components/index.ts
@@ -0,0 +1,3 @@
+import NavType from './NavType.vue';
+
+export { NavType };
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/index.vue
new file mode 100644
index 00000000..0e26080a
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/NavMode/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <n-divider title-placement="center">导航栏模式</n-divider>
+  <n-space justify="space-between">
+    <nav-type
+      v-for="item in modeList"
+      :key="item.mode"
+      :mode="item.mode"
+      :checked="theme.navStyle.mode === item.mode"
+      :primary-color="theme.themeColor"
+      @click="setNavMode(item.mode)"
+    />
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSpace } from 'naive-ui';
+import { EnumNavMode } from '@/enum';
+import type { NavMode } from '@/interface';
+import { NavType } from './components';
+import { useThemeStore } from '@/store';
+
+interface ModeList {
+  mode: NavMode;
+  label: string;
+}
+
+const theme = useThemeStore();
+const { setNavMode } = useThemeStore();
+
+const modeList: ModeList[] = [
+  { mode: 'vertical', label: EnumNavMode.vertical },
+  { mode: 'vertical-mix', label: EnumNavMode['vertical-mix'] },
+  { mode: 'horizontal', label: EnumNavMode.horizontal },
+  { mode: 'horizontal-mix', label: EnumNavMode['horizontal-mix'] }
+];
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/PageFunc/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/PageFunc/index.vue
new file mode 100644
index 00000000..2860f27a
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/PageFunc/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <n-divider title-placement="center">界面功能</n-divider>
+  <n-space vertical size="large">
+    <setting-menu-item label="顶部菜单位置">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.menuStyle.horizontalPosition"
+        :options="theme.menuStyle.horizontalPositionList"
+        @update:value="handleHorizontalMenuPosition"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="菜单展开宽度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.menuStyle.width"
+        :disabled="disabledMenuWidth"
+        :step="10"
+        @update:value="handleMenuWidth"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="左侧混合菜单展开宽度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.menuStyle.mixWidth"
+        :disabled="disabledMixMenuWidth"
+        :step="5"
+        @update:value="handleMixMenuWidth"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="固定头部和多页签">
+      <n-switch :value="theme.fixedHeaderAndTab" :disabled="isHorizontalMix" @update:value="handleFixedHeaderAndTab" />
+    </setting-menu-item>
+    <setting-menu-item label="头部高度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.headerStyle.height"
+        :step="1"
+        @update:value="handleHeaderHeight"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="多页签高度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.multiTabStyle.height"
+        :step="1"
+        @update:value="handleMultiTabHeight"
+      />
+    </setting-menu-item>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NDivider, NSpace, NSwitch, NSelect, NInputNumber } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { SettingMenuItem } from '../common';
+
+const theme = useThemeStore();
+const {
+  handleHorizontalMenuPosition,
+  handleFixedHeaderAndTab,
+  handleHeaderHeight,
+  handleMultiTabHeight,
+  handleMenuWidth,
+  handleMixMenuWidth
+} = useThemeStore();
+
+const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
+const disabledMenuWidth = computed(() => {
+  const { mode } = theme.navStyle;
+  return mode !== 'vertical' && mode !== 'horizontal-mix';
+});
+
+const disabledMixMenuWidth = computed(() => theme.navStyle.mode !== 'vertical-mix');
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/PageView/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/PageView/index.vue
new file mode 100644
index 00000000..de1e892b
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/PageView/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <n-divider title-placement="center">界面显示</n-divider>
+  <n-space vertical size="large">
+    <setting-menu-item label="面包屑">
+      <n-switch :value="theme.crumbsStyle.visible" @update:value="handleCrumbsVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="面包屑图标">
+      <n-switch :value="theme.crumbsStyle.showIcon" @update:value="handleCrumbsIconVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="多页签">
+      <n-switch :value="theme.multiTabStyle.visible" @update:value="handleMultiTabVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="多页签风格">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.multiTabStyle.mode"
+        :options="theme.multiTabStyle.modeList"
+        @update:value="handleMultiTabMode"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="页面切换动画">
+      <n-switch :value="theme.pageStyle.animate" @update:value="handlePageAnimate" />
+    </setting-menu-item>
+    <setting-menu-item label="页面切换动画类型">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.pageStyle.animateType"
+        :options="theme.pageStyle.animateTypeList"
+        @update:value="handlePageAnimateType"
+      />
+    </setting-menu-item>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSpace, NSwitch, NSelect } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { SettingMenuItem } from '../common';
+
+const theme = useThemeStore();
+const {
+  handleCrumbsVisible,
+  handleCrumbsIconVisible,
+  handleMultiTabVisible,
+  handleMultiTabMode,
+  handlePageAnimate,
+  handlePageAnimateType
+} = useThemeStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/SystemTheme/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/SystemTheme/index.vue
new file mode 100644
index 00000000..627872b0
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/SystemTheme/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <n-divider title-placement="center">系统主题</n-divider>
+  <n-grid :cols="8">
+    <n-grid-item v-for="color in theme.themeColorList" :key="color">
+      <color-block :color="color" :checked="color === theme.themeColor" @click="setThemeColor(color)" />
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NGrid, NGridItem } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { ColorBlock } from '../common';
+
+const theme = useThemeStore();
+const { setThemeColor } = useThemeStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/ThemeConfig/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/ThemeConfig/index.vue
new file mode 100644
index 00000000..d317458f
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/ThemeConfig/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <n-divider title-placement="center">主题配置</n-divider>
+  <n-space vertical>
+    <div ref="copyRef" :data-clipboard-text="dataClipboardText">
+      <n-button type="primary" :block="true">拷贝当前配置</n-button>
+    </div>
+    <n-button type="warning" :block="true" @click="handleResetConfig">重置当前配置</n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { NDivider, NSpace, NButton, useDialog, useMessage } from 'naive-ui';
+import Clipboard from 'clipboard';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { setDefaultThemeStore } = useThemeStore();
+const dialog = useDialog();
+const message = useMessage();
+
+const copyRef = ref<HTMLElement | null>(null);
+const dataClipboardText = ref(getClipboardText());
+
+function getClipboardText() {
+  return JSON.stringify(theme.$state);
+}
+
+function handleResetConfig() {
+  setDefaultThemeStore();
+  message.success('已重置配置，请重新拷贝！');
+}
+
+function clipboardEventListener() {
+  const copy = new Clipboard(copyRef.value!);
+  copy.on('success', () => {
+    dialog.success({
+      title: '操作成功',
+      content: '复制成功,请替换 src/settings/theme.json的内容！',
+      positiveText: '确定'
+    });
+  });
+}
+
+watch(
+  () => theme.$state,
+  () => {
+    dataClipboardText.value = getClipboardText();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  clipboardEventListener();
+});
+
+// function handleSuccess() {
+//   window.$dialog?.success({
+//     title: '操作成功',
+//     content: '复制成功,请替换 src/settings/theme.json的内容！',
+//     positiveText: '确定'
+//   });
+// }
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/ColorBlock.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/ColorBlock.vue
new file mode 100644
index 00000000..42f5c6cd
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/ColorBlock.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex-center w-20px h-20px mx-6px mb-8px cursor-pointer rounded-2px" :style="{ backgroundColor: color }">
+    <icon-ic-outline-check
+      v-if="checked"
+      class="text-14px text-white"
+      :class="[isWhite ? 'text-gray-700' : 'text-white']"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+interface Props {
+  color: string;
+  checked?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checked: false
+});
+
+const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
+const isWhite = computed(() => whiteColors.includes(props.color));
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/SettingMenuItem.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/SettingMenuItem.vue
new file mode 100644
index 00000000..f29e6610
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/SettingMenuItem.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="flex-y-center justify-between">
+    <span>{{ label }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  /** 文本 */
+  label: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/index.ts b/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/index.ts
new file mode 100644
index 00000000..169aa21b
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/common/index.ts
@@ -0,0 +1,4 @@
+import ColorBlock from './ColorBlock.vue';
+import SettingMenuItem from './SettingMenuItem.vue';
+
+export { ColorBlock, SettingMenuItem };
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/components/index.ts b/src/layouts/BaseLayout/components/common/SettingDrawer/components/index.ts
new file mode 100644
index 00000000..2b7d6b3a
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/components/index.ts
@@ -0,0 +1,8 @@
+import DarkMode from './DarkMode/index.vue';
+import NavMode from './NavMode/index.vue';
+import SystemTheme from './SystemTheme/index.vue';
+import PageFunc from './PageFunc/index.vue';
+import PageView from './PageView/index.vue';
+import ThemeConfig from './ThemeConfig/index.vue';
+
+export { DarkMode, NavMode, SystemTheme, PageFunc, PageView, ThemeConfig };
diff --git a/src/layouts/BaseLayout/components/common/SettingDrawer/index.vue b/src/layouts/BaseLayout/components/common/SettingDrawer/index.vue
new file mode 100644
index 00000000..a9cf3d70
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/SettingDrawer/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <n-drawer v-model:show="app.settingDrawer.visible" :width="330">
+    <n-drawer-content title="主题配置" :native-scrollbar="false">
+      <dark-mode />
+      <nav-mode />
+      <system-theme />
+      <page-func />
+      <page-view />
+      <theme-config />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { NDrawer, NDrawerContent } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { DarkMode, NavMode, SystemTheme, PageFunc, PageView, ThemeConfig } from './components';
+
+const app = useAppStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/BaseLayout/components/common/index.ts b/src/layouts/BaseLayout/components/common/index.ts
new file mode 100644
index 00000000..fe613bd8
--- /dev/null
+++ b/src/layouts/BaseLayout/components/common/index.ts
@@ -0,0 +1,9 @@
+import GlobalHeader from './GlobalHeader/index.vue';
+import GlobalContent from './GlobalContent/index.vue';
+import GlobalFooter from './GlobalFooter/index.vue';
+import GlobalLogo from './GlobalLogo/index.vue';
+import GlobalMenu from './GlobalMenu/index.vue';
+import GlobalTab from './GlobalTab/index.vue';
+import SettingDrawer from './SettingDrawer/index.vue';
+
+export { GlobalHeader, GlobalContent, GlobalFooter, GlobalLogo, GlobalMenu, GlobalTab, SettingDrawer };
diff --git a/src/layouts/BaseLayout/components/index.ts b/src/layouts/BaseLayout/components/index.ts
new file mode 100644
index 00000000..c82e87d8
--- /dev/null
+++ b/src/layouts/BaseLayout/components/index.ts
@@ -0,0 +1,7 @@
+import VerticalLayout from './VerticalLayout/index.vue';
+import VerticalMixLayout from './VerticalMixLayout/index.vue';
+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/BaseLayout/index.vue b/src/layouts/BaseLayout/index.vue
new file mode 100644
index 00000000..56f19418
--- /dev/null
+++ b/src/layouts/BaseLayout/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <component :is="layoutComponent[theme.navStyle.mode]" />
+  <setting-drawer />
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { useThemeStore } from '@/store';
+import type { NavMode } from '@/interface';
+import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout, SettingDrawer } from './components';
+
+type LayoutComponent = {
+  [key in NavMode]: Component;
+};
+
+const theme = useThemeStore();
+
+const layoutComponent: LayoutComponent = {
+  vertical: VerticalLayout,
+  'vertical-mix': VerticalMixLayout,
+  horizontal: HorizontalLayout,
+  'horizontal-mix': HorizontalMixLayout
+};
+</script>
+<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue b/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue
index f00bd296..e93d95e5 100644
--- a/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue
@@ -6,6 +6,7 @@
     :collapsed="app.menu.collapsed"
     :collapsed-width="theme.menuStyle.collapsedWidth"
     :width="menuWidth"
+    :native-scrollbar="false"
     @collapse="handleMenuCollapse(true)"
     @expand="handleMenuCollapse(false)"
   >
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 42c5dca9..b6ca9d17 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,5 +1,6 @@
+import BaseLayout from './BaseLayout/index.vue';
 import BasicLayout from './BasicLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
 import RouterViewLayout from './RouterViewLayout/index.vue';
 
-export { BasicLayout, BlankLayout, RouterViewLayout };
+export { BaseLayout, BasicLayout, BlankLayout, RouterViewLayout };
diff --git a/src/settings/theme.json b/src/settings/theme.json
index 302eb7fa..415a5dc3 100644
--- a/src/settings/theme.json
+++ b/src/settings/theme.json
@@ -76,6 +76,9 @@
 		"visible": true,
 		"showIcon": true
 	},
+	"footerStyle": {
+    "height": 48
+  },
 	"pageStyle": {
 		"animate": true,
 		"animateType": "fade-slide",
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index 51ba28ae..78d9f586 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -67,6 +67,9 @@ const defaultThemeSettings: ThemeSettings = {
     visible: true,
     showIcon: true
   },
+  footerStyle: {
+    height: 48
+  },
   pageStyle: {
     animate: true,
     animateType: 'fade-slide',
diff --git a/windi.config.ts b/windi.config.ts
index 463382fa..ddde3a9b 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -52,7 +52,8 @@ export default defineConfig({
         'error-pressed': 'var(--error-color-pressed)',
         'error-active': 'var(--error-color-active)',
         light: '#ffffff',
-        dark: '#18181c'
+        dark: '#18181c',
+        'deep-dark': '#101014'
       },
       transitionProperty: ['width', 'height', 'background', 'background-color']
     }