initHeader

2024-08-22 11:27:06 +08:00
parent fe895bd37c
commit e0aaa7a30d
178 changed files with 5726 additions and 4999 deletions
--- a/frontend/src/layouts/CnHeader/index.vue
+++ b/frontend/src/layouts/CnHeader/index.vue
@@ -1,92 +0,0 @@
-<!--主界面的头部，包含了logo、导航、用户信息-->
-<template>
-  <el-menu
-    :default-active='activeIndex'
-    popper-effect='light'
-    mode='horizontal'
-    :router='false'
-    class='el-menu-njcn text-center'
-    :ellipsis='false'
-    background-color='var(--el-color-primary)'
-    text-color='#fff'
-    active-text-color='#ffd04b'
-    @select='handleSelect'
-    :style="{height:headerHeight+'px'}"
-  >
-    <img
-      class='float-left'
-      :style="{height:headerHeight+'px'}"
-      src='@/assets/images/logo.png'
-    />
-    <el-menu-item index='0'>
-      <el-icon><HomeFilled /></el-icon>
-      <span>运营管理</span>
-    </el-menu-item>
-    <el-sub-menu index='1' :popper-offset="0">
-      <template #title>
-        <el-icon><Monitor /></el-icon>
-        台账管理
-      </template>
-      <el-menu-item index='/home1'>脚本检测管理</el-menu-item>
-      <el-menu-item index='/home1'>被检设备管理</el-menu-item>
-      <el-menu-item index='/home1'>误差体系管理</el-menu-item>
-      <el-menu-item index='/home1'>检测源管理</el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index='2' :popper-offset="0">
-      <template #title>
-        <el-icon><UserFilled /></el-icon>
-        权限管理
-      </template>
-      <el-menu-item index='/home2'>用户管理</el-menu-item>
-      <el-menu-item index='/home2'>角色管理</el-menu-item>
-      <el-menu-item index='/home2'>菜单管理</el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index='3' :popper-offset="0">
-      <template #title>
-       <el-icon><Setting /></el-icon>
-        系统配置
-      </template>
-      <el-menu-item index='/home3'>系统配置</el-menu-item>
-      <el-menu-item index='/home3'>数据字典</el-menu-item>
-      <el-menu-item index='/home3'>报告模板</el-menu-item>
-      <el-menu-item index='/home3'>版本注册</el-menu-item>
-    </el-sub-menu>
-    <el-menu-item index='0'>
-      <el-icon><Document /></el-icon>
-      日志管理
-    </el-menu-item>
-    <el-menu-item index='0'>
-      <el-icon><DataLine /></el-icon>
-      统计分析
-    </el-menu-item>
-  </el-menu>
-</template>
-<script setup lang='ts'>
-defineOptions({
-  name: 'customHeader',
-})
-import { ref, onMounted } from 'vue'
-
-const activeIndex = ref('1')
-const handleSelect = (key: string, keyPath: string[]) => {
-  console.log(key)
-}
-
-defineProps(['headerHeight'])
-</script>
-<style scoped>
-
-/* 浮动菜单的颜色 */
-.el-menu-item:hover {
-  --el-menu-hover-bg-color: var(--el-color-primary-light-3);
-}
-
-.el-menu--horizontal > .el-menu-item:nth-child(1) {
-  margin-right: auto;
-}
-
-.el-menu--horizontal.el-menu {
-  border-bottom: solid 0 var(--el-menu-border-color);
-}
-
-</style>
--- a/frontend/src/layouts/LayoutClassic/index.scss
+++ b/frontend/src/layouts/LayoutClassic/index.scss
@@ -0,0 +1,60 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .header-lf {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      white-space: nowrap;
+      .logo {
+        flex-shrink: 0;
+        width: 210px;
+        margin-right: 16px;
+        .logo-img {
+          width: 28px;
+          object-fit: contain;
+          margin-right: 6px;
+        }
+        .logo-text {
+          font-size: 21.5px;
+          font-weight: bold;
+          color: var(--el-header-logo-text-color);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .classic-content {
+    display: flex;
+    height: calc(100% - 55px);
+    :deep(.el-aside) {
+      width: auto;
+      background-color: var(--el-menu-bg-color);
+      border-right: 1px solid var(--el-aside-border-color);
+      .aside-box {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        transition: width 0.3s ease;
+        .el-menu {
+          width: 100%;
+          overflow-x: hidden;
+          border-right: none;
+        }
+      }
+    }
+    .classic-main {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
--- a/frontend/src/layouts/LayoutClassic/index.vue
+++ b/frontend/src/layouts/LayoutClassic/index.vue
@@ -0,0 +1,62 @@
+<!-- 经典布局 -->
+<template>
+  <el-container class="layout">
+    <el-header>
+      <div class="header-lf mask-image">
+        <div class="logo flx-center">
+          <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+          <span class="logo-text">{{ title }}</span>
+        </div>
+        <ToolBarLeft />
+      </div>
+      <div class="header-ri">
+        <ToolBarRight />
+      </div>
+    </el-header>
+    <el-container class="classic-content">
+      <el-aside>
+        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+          <el-scrollbar>
+            <el-menu
+              :router="false"
+              :default-active="activeMenu"
+              :collapse="isCollapse"
+              :unique-opened="accordion"
+              :collapse-transition="false"
+            >
+              <SubMenu :menu-list="menuList" />
+            </el-menu>
+          </el-scrollbar>
+        </div>
+      </el-aside>
+      <el-container class="classic-main">
+        <Main />
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutClassic">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+import Main from "@/layouts/components/Main/index.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
+
+const route = useRoute();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/LayoutColumns/index.scss
+++ b/frontend/src/layouts/LayoutColumns/index.scss
@@ -0,0 +1,95 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  .aside-split {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 70px;
+    height: 100%;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    .logo {
+      box-sizing: border-box;
+      height: 55px;
+      .logo-img {
+        width: 32px;
+        object-fit: contain;
+      }
+    }
+    .el-scrollbar {
+      height: calc(100% - 55px);
+      .split-list {
+        flex: 1;
+        .split-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 70px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          .el-icon {
+            font-size: 20px;
+          }
+          .title {
+            margin-top: 6px;
+            font-size: 12px;
+          }
+          .el-icon,
+          .title {
+            color: var(--el-menu-text-color);
+          }
+        }
+        .split-active {
+          background-color: var(--el-color-primary) !important;
+          .el-icon,
+          .title {
+            color: #ffffff !important;
+          }
+        }
+      }
+    }
+  }
+  .not-aside {
+    width: 0 !important;
+    border-right: none !important;
+  }
+  .el-aside {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    transition: width 0.3s ease;
+    .el-scrollbar {
+      height: calc(100% - 55px);
+      .el-menu {
+        width: 100%;
+        overflow-x: hidden;
+        border-right: none;
+      }
+    }
+    .logo {
+      box-sizing: border-box;
+      height: 55px;
+      .logo-text {
+        font-size: 24px;
+        font-weight: bold;
+        color: var(--el-aside-logo-text-color);
+        white-space: nowrap;
+      }
+    }
+  }
+  .el-header {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-border-color-light);
+  }
+}
--- a/frontend/src/layouts/LayoutColumns/index.vue
+++ b/frontend/src/layouts/LayoutColumns/index.vue
@@ -0,0 +1,103 @@
+<!-- 分栏布局 -->
+<template>
+  <el-container class="layout">
+    <div class="aside-split">
+      <div class="logo flx-center">
+        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+      </div>
+      <el-scrollbar>
+        <div class="split-list">
+          <div
+            v-for="item in menuList"
+            :key="item.path"
+            class="split-item"
+            :class="{ 'split-active': splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path }"
+            @click="changeSubMenu(item)"
+          >
+            <el-icon>
+              <component :is="item.meta.icon"></component>
+            </el-icon>
+            <span class="title">{{ item.meta.title }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+    <el-aside :class="{ 'not-aside': !subMenuList.length }" :style="{ width: isCollapse ? '65px' : '210px' }">
+      <div class="logo flx-center">
+        <span v-show="subMenuList.length" class="logo-text">{{ isCollapse ? "G" : title }}</span>
+      </div>
+      <el-scrollbar>
+        <el-menu
+          :router="false"
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :unique-opened="accordion"
+          :collapse-transition="false"
+        >
+          <SubMenu :menu-list="subMenuList" />
+        </el-menu>
+      </el-scrollbar>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <ToolBarLeft />
+        <ToolBarRight />
+      </el-header>
+      <Main />
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutColumns">
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+import Main from "@/layouts/components/Main/index.vue";
+import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+
+const subMenuList = ref<Menu.MenuOptions[]>([]);
+const splitActive = ref("");
+watch(
+  () => [menuList, route],
+  () => {
+    // 当前菜单没有数据直接 return
+    if (!menuList.value.length) return;
+    splitActive.value = route.path;
+    const menuItem = menuList.value.filter((item: Menu.MenuOptions) => {
+      return route.path === item.path || `/${route.path.split("/")[1]}` === item.path;
+    });
+    if (menuItem[0].children?.length) return (subMenuList.value = menuItem[0].children);
+    subMenuList.value = [];
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
+// change SubMenu
+const changeSubMenu = (item: Menu.MenuOptions) => {
+  splitActive.value = item.path;
+  if (item.children?.length) return (subMenuList.value = item.children);
+  subMenuList.value = [];
+  router.push(item.path);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/LayoutTransverse/index.scss
+++ b/frontend/src/layouts/LayoutTransverse/index.scss
@@ -0,0 +1,60 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .logo {
+      width: 210px;
+      margin-right: 30px;
+      .logo-img {
+        width: 28px;
+        object-fit: contain;
+        margin-right: 6px;
+      }
+      .logo-text {
+        font-size: 21.5px;
+        font-weight: bold;
+        color: var(--el-header-logo-text-color);
+        white-space: nowrap;
+      }
+    }
+    .el-menu {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+      border-bottom: none;
+      .el-sub-menu__hide-arrow {
+        width: 65px;
+        height: 55px;
+      }
+      .el-menu-item.is-active {
+        color: #ffffff !important;
+      }
+      .is-active {
+        background-color: var(--el-color-primary) !important;
+        border-bottom-color: var(--el-color-primary) !important;
+        &::before {
+          width: 0;
+        }
+        .el-sub-menu__title {
+          color: #ffffff !important;
+          background-color: var(--el-color-primary) !important;
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+    }
+  }
+
+  @media screen and (width <= 730px) {
+    .logo {
+      display: none !important;
+    }
+  }
+}
--- a/frontend/src/layouts/LayoutTransverse/index.vue
+++ b/frontend/src/layouts/LayoutTransverse/index.vue
@@ -0,0 +1,61 @@
+<!-- 横向布局 -->
+<template>
+  <el-container class="layout">
+    <el-header>
+      <div class="logo flx-center">
+        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+        <span class="logo-text">{{ title }}</span>
+      </div>
+      <el-menu mode="horizontal" :router="false" :default-active="activeMenu">
+        <!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
+        <template v-for="subItem in menuList" :key="subItem.path">
+          <el-sub-menu v-if="subItem.children?.length" :key="subItem.path" :index="subItem.path + 'el-sub-menu'">
+            <template #title>
+              <el-icon>
+                <component :is="subItem.meta.icon"></component>
+              </el-icon>
+              <span>{{ subItem.meta.title }}</span>
+            </template>
+            <SubMenu :menu-list="subItem.children" />
+          </el-sub-menu>
+          <el-menu-item v-else :key="subItem.path + 'el-menu-item'" :index="subItem.path" @click="handleClickMenu(subItem)">
+            <el-icon>
+              <component :is="subItem.meta.icon"></component>
+            </el-icon>
+            <template #title>
+              <span>{{ subItem.meta.title }}</span>
+            </template>
+          </el-menu-item>
+        </template>
+      </el-menu>
+      <ToolBarRight />
+    </el-header>
+    <Main />
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutTransverse">
+import { computed } from "vue";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useRoute, useRouter } from "vue-router";
+import Main from "@/layouts/components/Main/index.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+
+const handleClickMenu = (subItem: Menu.MenuOptions) => {
+  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
+  router.push(subItem.path);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/LayoutVertical/index.scss
+++ b/frontend/src/layouts/LayoutVertical/index.scss
@@ -0,0 +1,48 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-aside) {
+    width: auto;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    .aside-box {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      transition: width 0.3s ease;
+      .el-scrollbar {
+        height: calc(100% - 55px);
+        .el-menu {
+          width: 100%;
+          overflow-x: hidden;
+          border-right: none;
+        }
+      }
+      .logo {
+        box-sizing: border-box;
+        height: 55px;
+        .logo-img {
+          width: 28px;
+          object-fit: contain;
+          margin-right: 6px;
+        }
+        .logo-text {
+          font-size: 21.5px;
+          font-weight: bold;
+          color: var(--el-aside-logo-text-color);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .el-header {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+  }
+}
--- a/frontend/src/layouts/LayoutVertical/index.vue
+++ b/frontend/src/layouts/LayoutVertical/index.vue
@@ -0,0 +1,56 @@
+<!-- 纵向布局 -->
+<template>
+  <el-container class="layout">
+    <el-aside>
+      <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+        <div class="logo flx-center">
+          <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+          <span v-show="!isCollapse" class="logo-text">{{ title }}</span>
+        </div>
+        <el-scrollbar>
+          <el-menu
+            :router="false"
+            :default-active="activeMenu"
+            :collapse="isCollapse"
+            :unique-opened="accordion"
+            :collapse-transition="false"
+          >
+            <SubMenu :menu-list="menuList" />
+          </el-menu>
+        </el-scrollbar>
+      </div>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <ToolBarLeft />
+        <ToolBarRight />
+      </el-header>
+      <Main />
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutVertical">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+import Main from "@/layouts/components/Main/index.vue";
+import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
+
+const route = useRoute();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/components/Footer/index.scss
+++ b/frontend/src/layouts/components/Footer/index.scss
@@ -0,0 +1,11 @@
+.footer {
+  height: 30px;
+  background-color: var(--el-bg-color);
+  border-top: 1px solid var(--el-border-color-light);
+  a {
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+    text-decoration: none;
+    letter-spacing: 0.5px;
+  }
+}
--- a/frontend/src/layouts/components/Footer/index.vue
+++ b/frontend/src/layouts/components/Footer/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="footer flx-center">
+    <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/components/Header/ToolBarLeft.vue
+++ b/frontend/src/layouts/components/Header/ToolBarLeft.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="tool-bar-lf">
+    <CollapseIcon id="collapseIcon" />
+    <Breadcrumb v-show="globalStore.breadcrumb" id="breadcrumb" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+import CollapseIcon from "./components/CollapseIcon.vue";
+import Breadcrumb from "./components/Breadcrumb.vue";
+const globalStore = useGlobalStore();
+</script>
+
+<style scoped lang="scss">
+.tool-bar-lf {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>
--- a/frontend/src/layouts/components/Header/ToolBarRight.vue
+++ b/frontend/src/layouts/components/Header/ToolBarRight.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="tool-bar-ri">
+<!--    <div class="header-icon">-->
+<!--      <AssemblySize id="assemblySize" />-->
+<!--      <Language id="language" />-->
+<!--      <SearchMenu id="searchMenu" />-->
+<!--      <ThemeSetting id="themeSetting" />-->
+<!--      <Message id="message" />-->
+<!--      <Fullscreen id="fullscreen" />-->
+<!--    </div>-->
+    <span class="username">{{ username }}</span>
+    <Avatar />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useUserStore } from "@/stores/modules/user";
+import AssemblySize from "./components/AssemblySize.vue";
+import Language from "./components/Language.vue";
+import SearchMenu from "./components/SearchMenu.vue";
+import ThemeSetting from "./components/ThemeSetting.vue";
+import Message from "./components/Message.vue";
+import Fullscreen from "./components/Fullscreen.vue";
+import Avatar from "./components/Avatar.vue";
+
+const userStore = useUserStore();
+const username = computed(() => userStore.userInfo.name);
+</script>
+
+<style scoped lang="scss">
+.tool-bar-ri {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 25px;
+  .header-icon {
+    display: flex;
+    align-items: center;
+    & > * {
+      margin-left: 21px;
+      color: var(--el-header-text-color);
+    }
+  }
+  .username {
+    margin: 0 20px;
+    font-size: 15px;
+    color: var(--el-header-text-color);
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/AssemblySize.vue
+++ b/frontend/src/layouts/components/Header/components/AssemblySize.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-dropdown trigger="click" @command="setAssemblySize">
+    <i :class="'iconfont icon-contentright'" class="toolBar-icon"></i>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item in assemblySizeList"
+          :key="item.value"
+          :command="item.value"
+          :disabled="assemblySize === item.value"
+        >
+          {{ item.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useGlobalStore } from "@/stores/modules/global";
+import { AssemblySizeType } from "@/stores/interface";
+
+const globalStore = useGlobalStore();
+const assemblySize = computed(() => globalStore.assemblySize);
+
+const assemblySizeList = [
+  { label: "默认", value: "default" },
+  { label: "大型", value: "large" },
+  { label: "小型", value: "small" }
+];
+
+const setAssemblySize = (item: AssemblySizeType) => {
+  if (assemblySize.value === item) return;
+  globalStore.setGlobalState("assemblySize", item);
+};
+</script>
--- a/frontend/src/layouts/components/Header/components/Avatar.vue
+++ b/frontend/src/layouts/components/Header/components/Avatar.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-dropdown trigger="click">
+    <div class="avatar">
+      <img src="@/assets/images/avatar.gif" alt="avatar" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="openDialog('infoRef')">
+          <el-icon><User /></el-icon>{{ $t("header.personalData") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="openDialog('passwordRef')">
+          <el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="logout">
+          <el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+  <!-- infoDialog -->
+  <InfoDialog ref="infoRef"></InfoDialog>
+  <!-- passwordDialog -->
+  <PasswordDialog ref="passwordRef"></PasswordDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { LOGIN_URL } from "@/config";
+import { useRouter } from "vue-router";
+import { logoutApi } from "@/api/modules/login";
+import { useUserStore } from "@/stores/modules/user";
+import { ElMessageBox, ElMessage } from "element-plus";
+import InfoDialog from "./InfoDialog.vue";
+import PasswordDialog from "./PasswordDialog.vue";
+
+const router = useRouter();
+const userStore = useUserStore();
+
+// 退出登录
+const logout = () => {
+  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(async () => {
+    // 1.执行退出登录接口
+    await logoutApi();
+
+    // 2.清除 Token
+    userStore.setToken("");
+
+    // 3.重定向到登陆页
+    router.replace(LOGIN_URL);
+    ElMessage.success("退出登录成功！");
+  });
+};
+
+// 打开修改密码和个人信息弹窗
+const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
+const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
+const openDialog = (ref: string) => {
+  if (ref == "infoRef") infoRef.value?.openDialog();
+  if (ref == "passwordRef") passwordRef.value?.openDialog();
+};
+</script>
+
+<style scoped lang="scss">
+.avatar {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 50%;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/Breadcrumb.vue
+++ b/frontend/src/layouts/components/Header/components/Breadcrumb.vue
@@ -0,0 +1,95 @@
+<template>
+  <div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
+    <el-breadcrumb :separator-icon="ArrowRight">
+      <transition-group name="breadcrumb">
+        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
+          <div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
+            <el-icon v-show="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
+              <component :is="item.meta.icon"></component>
+            </el-icon>
+            <span class="breadcrumb-title">{{ item.meta.title }}</span>
+          </div>
+        </el-breadcrumb-item>
+      </transition-group>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { HOME_URL } from "@/config";
+import { useRoute, useRouter } from "vue-router";
+import { ArrowRight } from "@element-plus/icons-vue";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+
+const breadcrumbList = computed(() => {
+  let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
+  // 🙅‍♀️不需要首页面包屑可删除以下判断
+  if (breadcrumbData[0].path !== HOME_URL) {
+    breadcrumbData = [{ path: HOME_URL, meta: { icon: "HomeFilled", title: "首页" } }, ...breadcrumbData];
+  }
+  return breadcrumbData;
+});
+
+// Click Breadcrumb
+const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
+  if (index !== breadcrumbList.value.length - 1) router.push(item.path);
+};
+</script>
+
+<style scoped lang="scss">
+.breadcrumb-box {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  .el-breadcrumb {
+    white-space: nowrap;
+    .el-breadcrumb__item {
+      position: relative;
+      display: inline-block;
+      float: none;
+      .el-breadcrumb__inner {
+        display: inline-flex;
+        &.is-link {
+          color: var(--el-header-text-color);
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+        .breadcrumb-icon {
+          margin-top: 2px;
+          margin-right: 6px;
+          font-size: 16px;
+        }
+        .breadcrumb-title {
+          margin-top: 3px;
+        }
+      }
+      &:last-child .el-breadcrumb__inner,
+      &:last-child .el-breadcrumb__inner:hover {
+        color: var(--el-header-text-color-regular);
+      }
+      :deep(.el-breadcrumb__separator) {
+        position: relative;
+        top: -1px;
+      }
+    }
+  }
+}
+.no-icon {
+  .el-breadcrumb {
+    .el-breadcrumb__item {
+      top: -2px;
+      :deep(.el-breadcrumb__separator) {
+        top: 2px;
+      }
+    }
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/CollapseIcon.vue
+++ b/frontend/src/layouts/components/Header/components/CollapseIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-icon class="collapse-icon" @click="changeCollapse">
+    <component :is="globalStore.isCollapse ? 'expand' : 'fold'"></component>
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+
+const globalStore = useGlobalStore();
+const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
+</script>
+
+<style scoped lang="scss">
+.collapse-icon {
+  margin-right: 20px;
+  font-size: 22px;
+  color: var(--el-header-text-color);
+  cursor: pointer;
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/Fullscreen.vue
+++ b/frontend/src/layouts/components/Header/components/Fullscreen.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="fullscreen">
+    <i :class="['iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon" @click="handleFullScreen"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import screenfull from "screenfull";
+
+const isFullscreen = ref(screenfull.isFullscreen);
+
+onMounted(() => {
+  screenfull.on("change", () => {
+    if (screenfull.isFullscreen) isFullscreen.value = true;
+    else isFullscreen.value = false;
+  });
+});
+
+const handleFullScreen = () => {
+  if (!screenfull.isEnabled) ElMessage.warning("当前您的浏览器不支持全屏 ❌");
+  screenfull.toggle();
+};
+</script>
--- a/frontend/src/layouts/components/Header/components/InfoDialog.vue
+++ b/frontend/src/layouts/components/Header/components/InfoDialog.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
+    <span>This is userInfo</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const dialogVisible = ref(false);
+const openDialog = () => {
+  dialogVisible.value = true;
+};
+
+defineExpose({ openDialog });
+</script>
--- a/frontend/src/layouts/components/Header/components/Language.vue
+++ b/frontend/src/layouts/components/Header/components/Language.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-dropdown trigger="click" @command="changeLanguage">
+    <i :class="'iconfont icon-zhongyingwen'" class="toolBar-icon"></i>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item in languageList"
+          :key="item.value"
+          :command="item.value"
+          :disabled="language === item.value"
+        >
+          {{ item.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+import { useGlobalStore } from "@/stores/modules/global";
+import { LanguageType } from "@/stores/interface";
+
+const i18n = useI18n();
+const globalStore = useGlobalStore();
+const language = computed(() => globalStore.language);
+
+const languageList = [
+  { label: "简体中文", value: "zh" },
+  { label: "English", value: "en" }
+];
+
+const changeLanguage = (lang: string) => {
+  i18n.locale.value = lang;
+  globalStore.setGlobalState("language", lang as LanguageType);
+};
+</script>
--- a/frontend/src/layouts/components/Header/components/Message.vue
+++ b/frontend/src/layouts/components/Header/components/Message.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="message">
+    <el-popover placement="bottom" :width="310" trigger="click">
+      <template #reference>
+        <el-badge :value="5" class="item">
+          <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
+        </el-badge>
+      </template>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="通知(5)" name="first">
+          <div class="message-list">
+            <div class="message-item">
+              <img src="@/assets/images/msg01.png" alt="" class="message-icon" />
+              <div class="message-content">
+                <span class="message-title">一键三连 Geeker-Admin 🧡</span>
+                <span class="message-date">一分钟前</span>
+              </div>
+            </div>
+            <div class="message-item">
+              <img src="@/assets/images/msg02.png" alt="" class="message-icon" />
+              <div class="message-content">
+                <span class="message-title">一键三连 Geeker-Admin 💙</span>
+                <span class="message-date">一小时前</span>
+              </div>
+            </div>
+            <div class="message-item">
+              <img src="@/assets/images/msg03.png" alt="" class="message-icon" />
+              <div class="message-content">
+                <span class="message-title">一键三连 Geeker-Admin 💚</span>
+                <span class="message-date">半天前</span>
+              </div>
+            </div>
+            <div class="message-item">
+              <img src="@/assets/images/msg04.png" alt="" class="message-icon" />
+              <div class="message-content">
+                <span class="message-title">一键三连 Geeker-Admin 💜</span>
+                <span class="message-date">一星期前</span>
+              </div>
+            </div>
+            <div class="message-item">
+              <img src="@/assets/images/msg05.png" alt="" class="message-icon" />
+              <div class="message-content">
+                <span class="message-title">一键三连 Geeker-Admin 💛</span>
+                <span class="message-date">一个月前</span>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="消息(0)" name="second">
+          <div class="message-empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无消息</div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="代办(0)" name="third">
+          <div class="message-empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无代办</div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const activeName = ref("first");
+</script>
+
+<style scoped lang="scss">
+.message-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 260px;
+  line-height: 45px;
+}
+.message-list {
+  display: flex;
+  flex-direction: column;
+  .message-item {
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--el-border-color-light);
+    &:last-child {
+      border: none;
+    }
+    .message-icon {
+      width: 40px;
+      height: 40px;
+      margin: 0 20px 0 5px;
+    }
+    .message-content {
+      display: flex;
+      flex-direction: column;
+      .message-title {
+        margin-bottom: 5px;
+      }
+      .message-date {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/PasswordDialog.vue
+++ b/frontend/src/layouts/components/Header/components/PasswordDialog.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
+    <span>This is Password</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const dialogVisible = ref(false);
+const openDialog = () => {
+  dialogVisible.value = true;
+};
+
+defineExpose({ openDialog });
+</script>
--- a/frontend/src/layouts/components/Header/components/SearchMenu.vue
+++ b/frontend/src/layouts/components/Header/components/SearchMenu.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="menu-search-dialog">
+    <i :class="'iconfont icon-sousuo'" class="toolBar-icon" @click="handleOpen"></i>
+    <el-dialog v-model="isShowSearch" destroy-on-close :modal="false" :show-close="false" fullscreen @click="closeSearch">
+      <el-autocomplete
+        ref="menuInputRef"
+        v-model="searchMenu"
+        value-key="path"
+        placeholder="菜单搜索 ：支持菜单名称、路径"
+        :fetch-suggestions="searchMenuList"
+        @select="handleClickMenu"
+        @click.stop
+      >
+        <template #prefix>
+          <el-icon>
+            <Search />
+          </el-icon>
+        </template>
+        <template #default="{ item }">
+          <el-icon>
+            <component :is="item.meta.icon"></component>
+          </el-icon>
+          <span> {{ item.meta.title }} </span>
+        </template>
+      </el-autocomplete>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+const router = useRouter();
+const authStore = useAuthStore();
+const menuList = computed(() => authStore.flatMenuListGet.filter(item => !item.meta.isHide));
+
+const searchMenuList = (queryString: string, cb: Function) => {
+  const results = queryString ? menuList.value.filter(filterNodeMethod(queryString)) : menuList.value;
+  cb(results);
+};
+
+// 打开搜索框
+const isShowSearch = ref(false);
+const menuInputRef = ref();
+const searchMenu = ref("");
+const handleOpen = () => {
+  isShowSearch.value = true;
+  nextTick(() => {
+    setTimeout(() => {
+      menuInputRef.value.focus();
+    });
+  });
+};
+
+// 搜索窗关闭
+const closeSearch = () => {
+  isShowSearch.value = false;
+};
+
+// 筛选菜单
+const filterNodeMethod = (queryString: string) => {
+  return (restaurant: Menu.MenuOptions) => {
+    return (
+      restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
+      restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
+    );
+  };
+};
+
+// 点击菜单跳转
+const handleClickMenu = (menuItem: Menu.MenuOptions | Record<string, any>) => {
+  searchMenu.value = "";
+  if (menuItem.meta.isLink) window.open(menuItem.meta.isLink, "_blank");
+  else router.push(menuItem.path);
+  closeSearch();
+};
+</script>
+
+<style scoped lang="scss">
+.menu-search-dialog {
+  :deep(.el-dialog) {
+    background-color: rgb(0 0 0 / 50%);
+    border-radius: 0 !important;
+    box-shadow: unset !important;
+    .el-dialog__header {
+      border-bottom: none !important;
+    }
+  }
+  :deep(.el-autocomplete) {
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    width: 550px;
+    transform: translateX(-50%);
+    .el-input__wrapper {
+      background-color: var(--el-bg-color);
+    }
+  }
+}
+.el-autocomplete__popper {
+  .el-icon {
+    position: relative;
+    top: 2px;
+    font-size: 16px;
+  }
+  span {
+    margin: 0 0 0 10px;
+    font-size: 14px;
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/ThemeSetting.vue
+++ b/frontend/src/layouts/components/Header/components/ThemeSetting.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="theme-setting">
+    <i :class="'iconfont icon-zhuti'" class="toolBar-icon" @click="openDrawer"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+import mittBus from "@/utils/mittBus";
+const openDrawer = () => {
+  mittBus.emit("openThemeDrawer");
+};
+</script>
--- a/frontend/src/layouts/components/Main/components/Maximize.vue
+++ b/frontend/src/layouts/components/Main/components/Maximize.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="maximize" @click="exitMaximize">
+    <i :class="'iconfont icon-tuichu'"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+
+const globalStore = useGlobalStore();
+const exitMaximize = () => {
+  globalStore.setGlobalState("maximize", false);
+};
+</script>
+
+<style scoped lang="scss">
+.maximize {
+  position: fixed;
+  top: -25px;
+  right: -25px;
+  z-index: 999;
+  width: 55px;
+  height: 55px;
+  cursor: pointer;
+  background-color: var(--el-color-info);
+  border-radius: 50%;
+  opacity: 0.9;
+  &:hover {
+    background-color: var(--el-color-info-dark-2);
+  }
+  .iconfont {
+    position: relative;
+    top: 46%;
+    left: 19%;
+    font-size: 14px;
+    color: #ffffff;
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Main/index.scss
+++ b/frontend/src/layouts/components/Main/index.scss
@@ -0,0 +1,10 @@
+.el-main {
+  box-sizing: border-box;
+  padding: 10px 12px;
+  overflow-x: hidden;
+  background-color: var(--el-bg-color-page);
+}
+.el-footer {
+  height: auto;
+  padding: 0;
+}
--- a/frontend/src/layouts/components/Main/index.vue
+++ b/frontend/src/layouts/components/Main/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <Maximize v-show="maximize" />
+  <Tabs v-show="tabs" />
+  <el-main>
+    <router-view v-slot="{ Component, route }">
+      <transition appear name="fade-transform" mode="out-in">
+        <keep-alive :include="keepAliveName">
+          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </el-main>
+  <el-footer v-show="footer">
+    <Footer />
+  </el-footer>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUnmount, provide, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useDebounceFn } from "@vueuse/core";
+import { useGlobalStore } from "@/stores/modules/global";
+import { useKeepAliveStore } from "@/stores/modules/keepAlive";
+import Maximize from "./components/Maximize.vue";
+import Tabs from "@/layouts/components/Tabs/index.vue";
+import Footer from "@/layouts/components/Footer/index.vue";
+
+const globalStore = useGlobalStore();
+const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
+
+const keepAliveStore = useKeepAliveStore();
+const { keepAliveName } = storeToRefs(keepAliveStore);
+
+// 注入刷新页面方法
+const isRouterShow = ref(true);
+const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
+provide("refresh", refreshCurrentPage);
+
+// 监听当前页面是否最大化，动态添加 class
+watch(
+  () => maximize.value,
+  () => {
+    const app = document.getElementById("app") as HTMLElement;
+    if (maximize.value) app.classList.add("main-maximize");
+    else app.classList.remove("main-maximize");
+  },
+  { immediate: true }
+);
+
+// 监听布局变化，在 body 上添加相对应的 layout class
+watch(
+  () => layout.value,
+  () => {
+    const body = document.body as HTMLElement;
+    body.setAttribute("class", layout.value);
+  },
+  { immediate: true }
+);
+
+// 监听窗口大小变化，折叠侧边栏
+const screenWidth = ref(0);
+const listeningWindow = useDebounceFn(() => {
+  screenWidth.value = document.body.clientWidth;
+  if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
+  if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
+}, 100);
+window.addEventListener("resize", listeningWindow, false);
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", listeningWindow);
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/components/Menu/SubMenu.vue
+++ b/frontend/src/layouts/components/Menu/SubMenu.vue
@@ -0,0 +1,85 @@
+<template>
+  <template v-for="subItem in menuList" :key="subItem.path">
+    <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
+      <template #title>
+        <el-icon>
+          <component :is="subItem.meta.icon"></component>
+        </el-icon>
+        <span class="sle">{{ subItem.meta.title }}</span>
+      </template>
+      <SubMenu :menu-list="subItem.children" />
+    </el-sub-menu>
+    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
+      <el-icon>
+        <component :is="subItem.meta.icon"></component>
+      </el-icon>
+      <template #title>
+        <span class="sle">{{ subItem.meta.title }}</span>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+defineProps<{ menuList: Menu.MenuOptions[] }>();
+
+const router = useRouter();
+const handleClickMenu = (subItem: Menu.MenuOptions) => {
+  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
+  router.push(subItem.path);
+};
+</script>
+
+<style lang="scss">
+.el-sub-menu .el-sub-menu__title:hover {
+  color: var(--el-menu-hover-text-color) !important;
+  background-color: transparent !important;
+}
+.el-menu--collapse {
+  .is-active {
+    .el-sub-menu__title {
+      color: #ffffff !important;
+      background-color: var(--el-color-primary) !important;
+    }
+  }
+}
+.el-menu-item {
+  &:hover {
+    color: var(--el-menu-hover-text-color);
+  }
+  &.is-active {
+    color: var(--el-menu-active-color) !important;
+    background-color: var(--el-menu-active-bg-color) !important;
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      content: "";
+      background-color: var(--el-color-primary);
+    }
+  }
+}
+.vertical,
+.classic,
+.transverse {
+  .el-menu-item {
+    &.is-active {
+      &::before {
+        left: 0;
+      }
+    }
+  }
+}
+.columns {
+  .el-menu-item {
+    &.is-active {
+      &::before {
+        right: 0;
+      }
+    }
+  }
+}
+</style>
--- a/frontend/src/layouts/components/Tabs/components/MoreButton.vue
+++ b/frontend/src/layouts/components/Tabs/components/MoreButton.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-dropdown trigger="click" :teleported="false">
+    <div class="more-button">
+      <i :class="'iconfont icon-xiala'"></i>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="refresh">
+          <el-icon><Refresh /></el-icon>{{ $t("tabs.refresh") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="maximize">
+          <el-icon><FullScreen /></el-icon>{{ $t("tabs.maximize") }}
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="closeCurrentTab">
+          <el-icon><Remove /></el-icon>{{ $t("tabs.closeCurrent") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'left')">
+          <el-icon><DArrowLeft /></el-icon>{{ $t("tabs.closeLeft") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'right')">
+          <el-icon><DArrowRight /></el-icon>{{ $t("tabs.closeRight") }}
+        </el-dropdown-item>
+        <el-dropdown-item divided @click="tabStore.closeMultipleTab(route.fullPath)">
+          <el-icon><CircleClose /></el-icon>{{ $t("tabs.closeOther") }}
+        </el-dropdown-item>
+        <el-dropdown-item @click="closeAllTab">
+          <el-icon><FolderDelete /></el-icon>{{ $t("tabs.closeAll") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { inject, nextTick } from "vue";
+import { HOME_URL } from "@/config";
+import { useTabsStore } from "@/stores/modules/tabs";
+import { useGlobalStore } from "@/stores/modules/global";
+import { useKeepAliveStore } from "@/stores/modules/keepAlive";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const globalStore = useGlobalStore();
+const keepAliveStore = useKeepAliveStore();
+
+// refresh current page
+const refreshCurrentPage: Function = inject("refresh") as Function;
+const refresh = () => {
+  setTimeout(() => {
+    keepAliveStore.removeKeepAliveName(route.name as string);
+    refreshCurrentPage(false);
+    nextTick(() => {
+      keepAliveStore.addKeepAliveName(route.name as string);
+      refreshCurrentPage(true);
+    });
+  }, 0);
+};
+
+// maximize current page
+const maximize = () => {
+  globalStore.setGlobalState("maximize", true);
+};
+
+// Close Current
+const closeCurrentTab = () => {
+  if (route.meta.isAffix) return;
+  tabStore.removeTabs(route.fullPath);
+};
+
+// Close All
+const closeAllTab = () => {
+  tabStore.closeMultipleTab();
+  router.push(HOME_URL);
+};
+</script>
+
+<style scoped lang="scss">
+@import "../index.scss";
+</style>
--- a/frontend/src/layouts/components/Tabs/index.scss
+++ b/frontend/src/layouts/components/Tabs/index.scss
@@ -0,0 +1,69 @@
+.tabs-box {
+  background-color: var(--el-bg-color);
+  .tabs-menu {
+    position: relative;
+    width: 100%;
+    .el-dropdown {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      .more-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 43px;
+        cursor: pointer;
+        border-left: 1px solid var(--el-border-color-light);
+        transition: all 0.3s;
+        &:hover {
+          background-color: var(--el-color-info-light-9);
+        }
+        .iconfont {
+          font-size: 12.5px;
+        }
+      }
+    }
+    :deep(.el-tabs) {
+      .el-tabs__header {
+        box-sizing: border-box;
+        height: 40px;
+        padding: 0 10px;
+        margin: 0;
+        .el-tabs__nav-wrap {
+          position: absolute;
+          width: calc(100% - 70px);
+          .el-tabs__nav {
+            display: flex;
+            border: none;
+            .el-tabs__item {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #afafaf;
+              border: none;
+              .tabs-icon {
+                margin: 1.5px 4px 0 0;
+                font-size: 15px;
+              }
+              .is-icon-close {
+                margin-top: 1px;
+              }
+              &.is-active {
+                color: var(--el-color-primary);
+                &::before {
+                  position: absolute;
+                  bottom: 0;
+                  width: 100%;
+                  height: 0;
+                  content: "";
+                  border-bottom: 2px solid var(--el-color-primary) !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/frontend/src/layouts/components/Tabs/index.vue
+++ b/frontend/src/layouts/components/Tabs/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="tabs-box">
+    <div class="tabs-menu">
+      <el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
+        <el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path" :closable="item.close">
+          <template #label>
+            <el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
+              <component :is="item.icon"></component>
+            </el-icon>
+            {{ item.title }}
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+      <MoreButton />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import { ref, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useGlobalStore } from "@/stores/modules/global";
+import { useTabsStore } from "@/stores/modules/tabs";
+import { useAuthStore } from "@/stores/modules/auth";
+import { TabsPaneContext, TabPaneName } from "element-plus";
+import MoreButton from "./components/MoreButton.vue";
+
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+
+const tabsMenuValue = ref(route.fullPath);
+const tabsMenuList = computed(() => tabStore.tabsMenuList);
+const tabsIcon = computed(() => globalStore.tabsIcon);
+
+onMounted(() => {
+  tabsDrop();
+  initTabs();
+});
+
+// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
+watch(
+  () => route.fullPath,
+  () => {
+    if (route.meta.isFull) return;
+    tabsMenuValue.value = route.fullPath;
+    const tabsParams = {
+      icon: route.meta.icon as string,
+      title: route.meta.title as string,
+      path: route.fullPath,
+      name: route.name as string,
+      close: !route.meta.isAffix,
+      isKeepAlive: route.meta.isKeepAlive as boolean
+    };
+    tabStore.addTabs(tabsParams);
+  },
+  { immediate: true }
+);
+
+// 初始化需要固定的 tabs
+const initTabs = () => {
+  authStore.flatMenuListGet.forEach(item => {
+    if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
+      const tabsParams = {
+        icon: item.meta.icon,
+        title: item.meta.title,
+        path: item.path,
+        name: item.name,
+        close: !item.meta.isAffix,
+        isKeepAlive: item.meta.isKeepAlive
+      };
+      tabStore.addTabs(tabsParams);
+    }
+  });
+};
+
+// tabs 拖拽排序
+const tabsDrop = () => {
+  Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
+    draggable: ".el-tabs__item",
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      const tabsList = [...tabStore.tabsMenuList];
+      const currRow = tabsList.splice(oldIndex as number, 1)[0];
+      tabsList.splice(newIndex as number, 0, currRow);
+      tabStore.setTabs(tabsList);
+    }
+  });
+};
+
+// Tab Click
+const tabClick = (tabItem: TabsPaneContext) => {
+  const fullPath = tabItem.props.name as string;
+  router.push(fullPath);
+};
+
+// Remove Tab
+const tabRemove = (fullPath: TabPaneName) => {
+  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/components/ThemeDrawer/index.scss
+++ b/frontend/src/layouts/components/ThemeDrawer/index.scss
@@ -0,0 +1,137 @@
+.divider {
+  margin-top: 15px;
+  .el-icon {
+    position: relative;
+    top: 2px;
+    right: 5px;
+    font-size: 15px;
+  }
+}
+.theme-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 5px;
+  margin: 14px 0;
+  span {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    .el-icon {
+      margin-left: 3px;
+      font-size: 15px;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+    }
+  }
+}
+.layout-box {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 15px 7px 0;
+  .layout-item {
+    position: relative;
+    box-sizing: border-box;
+    width: 100px;
+    height: 70px;
+    padding: 6px;
+    cursor: pointer;
+    border-radius: 5px;
+    box-shadow: 0 0 5px 1px var(--el-border-color-dark);
+    transition: all 0.2s;
+    .layout-dark {
+      background-color: var(--el-color-primary);
+      border-radius: 3px;
+    }
+    .layout-light {
+      background-color: var(--el-color-primary-light-5);
+      border-radius: 3px;
+    }
+    .layout-content {
+      background-color: var(--el-color-primary-light-8);
+      border: 1px dashed var(--el-color-primary);
+      border-radius: 3px;
+    }
+    .el-icon {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      color: var(--el-color-primary);
+      transition: all 0.2s;
+    }
+    &:hover {
+      box-shadow: 0 0 5px 1px var(--el-text-color-secondary);
+    }
+  }
+  .is-active {
+    box-shadow: 0 0 0 2px var(--el-color-primary) !important;
+  }
+  .layout-vertical {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-dark {
+      width: 20%;
+    }
+    .layout-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 72%;
+      .layout-light {
+        height: 20%;
+      }
+      .layout-content {
+        height: 67%;
+      }
+    }
+  }
+  .layout-classic {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-dark {
+      height: 22%;
+    }
+    .layout-container {
+      display: flex;
+      justify-content: space-between;
+      height: 70%;
+      .layout-light {
+        width: 20%;
+      }
+      .layout-content {
+        width: 70%;
+      }
+    }
+  }
+  .layout-transverse {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    .layout-dark {
+      height: 20%;
+    }
+    .layout-content {
+      height: 67%;
+    }
+  }
+  .layout-columns {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    .layout-dark {
+      width: 14%;
+    }
+    .layout-light {
+      width: 17%;
+    }
+    .layout-content {
+      width: 55%;
+    }
+  }
+}
--- a/frontend/src/layouts/components/ThemeDrawer/index.vue
+++ b/frontend/src/layouts/components/ThemeDrawer/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
+    <!-- 布局样式 -->
+    <el-divider class="divider" content-position="center">
+      <el-icon><Notification /></el-icon>
+      布局样式
+    </el-divider>
+    <div class="layout-box">
+      <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
+        <div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
+          <div class="layout-dark"></div>
+          <div class="layout-container">
+            <div class="layout-light"></div>
+            <div class="layout-content"></div>
+          </div>
+          <el-icon v-if="layout == 'vertical'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
+        <div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
+          <div class="layout-dark"></div>
+          <div class="layout-container">
+            <div class="layout-light"></div>
+            <div class="layout-content"></div>
+          </div>
+          <el-icon v-if="layout == 'classic'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
+        <div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')">
+          <div class="layout-dark"></div>
+          <div class="layout-content"></div>
+          <el-icon v-if="layout == 'transverse'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
+        <div :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]" @click="setLayout('columns')">
+          <div class="layout-dark"></div>
+          <div class="layout-light"></div>
+          <div class="layout-content"></div>
+          <el-icon v-if="layout == 'columns'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
+    </div>
+    <div class="theme-item">
+      <span>
+        侧边栏反转色
+        <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
+          <el-icon><QuestionFilled /></el-icon>
+        </el-tooltip>
+      </span>
+      <el-switch v-model="asideInverted" @change="setAsideTheme" />
+    </div>
+    <div class="theme-item mb50">
+      <span>
+        头部反转色
+        <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
+          <el-icon><QuestionFilled /></el-icon>
+        </el-tooltip>
+      </span>
+      <el-switch v-model="headerInverted" @change="setHeaderTheme" />
+    </div>
+
+    <!-- 全局主题 -->
+    <el-divider class="divider" content-position="center">
+      <el-icon><ColdDrink /></el-icon>
+      全局主题
+    </el-divider>
+    <div class="theme-item">
+      <span>主题颜色</span>
+      <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
+    </div>
+    <div class="theme-item">
+      <span>暗黑模式</span>
+      <SwitchDark />
+    </div>
+    <div class="theme-item">
+      <span>灰色模式</span>
+      <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
+    </div>
+    <div class="theme-item mb40">
+      <span>色弱模式</span>
+      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
+    </div>
+
+    <!-- 界面设置 -->
+    <el-divider class="divider" content-position="center">
+      <el-icon><Setting /></el-icon>
+      界面设置
+    </el-divider>
+    <div class="theme-item">
+      <span>菜单折叠</span>
+      <el-switch v-model="isCollapse" />
+    </div>
+    <div class="theme-item">
+      <span>菜单手风琴</span>
+      <el-switch v-model="accordion" />
+    </div>
+    <div class="theme-item">
+      <span>面包屑</span>
+      <el-switch v-model="breadcrumb" />
+    </div>
+    <div class="theme-item">
+      <span>面包屑图标</span>
+      <el-switch v-model="breadcrumbIcon" />
+    </div>
+    <div class="theme-item">
+      <span>标签栏</span>
+      <el-switch v-model="tabs" />
+    </div>
+    <div class="theme-item">
+      <span>标签栏图标</span>
+      <el-switch v-model="tabsIcon" />
+    </div>
+    <div class="theme-item">
+      <span>页脚</span>
+      <el-switch v-model="footer" />
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useTheme } from "@/hooks/useTheme";
+import { useGlobalStore } from "@/stores/modules/global";
+import { LayoutType } from "@/stores/interface";
+import { DEFAULT_PRIMARY } from "@/config";
+import mittBus from "@/utils/mittBus";
+import SwitchDark from "@/components/SwitchDark/index.vue";
+
+const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();
+
+const globalStore = useGlobalStore();
+const {
+  layout,
+  primary,
+  isGrey,
+  isWeak,
+  asideInverted,
+  headerInverted,
+  isCollapse,
+  accordion,
+  breadcrumb,
+  breadcrumbIcon,
+  tabs,
+  tabsIcon,
+  footer
+} = storeToRefs(globalStore);
+
+// 预定义主题颜色
+const colorList = [
+  DEFAULT_PRIMARY,
+  "#daa96e",
+  "#0c819f",
+  "#409eff",
+  "#27ae60",
+  "#ff5c93",
+  "#e74c3c",
+  "#fd726d",
+  "#f39c12",
+  "#9b59b6"
+];
+
+// 设置布局方式
+const setLayout = (val: LayoutType) => {
+  globalStore.setGlobalState("layout", val);
+  setAsideTheme();
+};
+
+// 打开主题设置
+const drawerVisible = ref(false);
+mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/frontend/src/layouts/index.vue
+++ b/frontend/src/layouts/index.vue
@@ -1,34 +1,32 @@
+<!-- 💥 这里是一次性加载 LayoutComponents -->
 <template>
-  <div class='common-layout'>
-    <el-container>
-      <el-header  :style="{'--el-header-height':headerHeight+'px',backgroundColor:'var(--el-color-primary)'}">
-       <cn-header :headerHeight='headerHeight' />
-      </el-header>
-      <el-main :style='{height:containerHeight}'>
-        <router-view />
-      </el-main>
-    </el-container>
-  </div>
+  <component :is="LayoutComponents[layout]" />
+  <ThemeDrawer />
 </template>
-<script setup lang='ts'>
-defineOptions({
-  name: 'home',
-})
-import { ref, computed } from 'vue'
-import CnHeader from '@/layouts/CnHeader/index.vue'
-let headerHeight = ref(70)
-
-let containerHeight = computed(() => {
-  const viewportHeight = window.innerHeight // 获取视口高度
-  const heightInPx = viewportHeight - headerHeight.value
-  return `${heightInPx}px`
-})

+<script setup lang="ts" name="layout">
+import { computed, type Component } from "vue";
+import { LayoutType } from "@/stores/interface";
+import { useGlobalStore } from "@/stores/modules/global";
+import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+import LayoutVertical from "./LayoutVertical/index.vue";
+import LayoutClassic from "./LayoutClassic/index.vue";
+import LayoutTransverse from "./LayoutTransverse/index.vue";
+import LayoutColumns from "./LayoutColumns/index.vue";

+const LayoutComponents: Record<LayoutType, Component> = {
+  vertical: LayoutVertical,
+  classic: LayoutClassic,
+  transverse: LayoutTransverse,
+  columns: LayoutColumns
+};

+const globalStore = useGlobalStore();
+const layout = computed(() => globalStore.layout);
 </script>
-<style scoped lang='scss'>
- .el-main{
-   padding: 10px;
- }
+
+<style scoped lang="scss">
+.layout {
+  min-width: 600px;
+}
 </style>
--- a/frontend/src/layouts/indexAsync.vue
+++ b/frontend/src/layouts/indexAsync.vue
@@ -0,0 +1,36 @@
+<!-- 💥 这里是异步加载 LayoutComponents -->
+<template>
+  <suspense>
+    <template #default>
+      <component :is="LayoutComponents[layout]" />
+    </template>
+    <template #fallback>
+      <Loading />
+    </template>
+  </suspense>
+  <ThemeDrawer />
+</template>
+
+<script setup lang="ts" name="layoutAsync">
+import { computed, defineAsyncComponent, type Component } from "vue";
+import { LayoutType } from "@/stores/interface";
+import { useGlobalStore } from "@/stores/modules/global";
+import Loading from "@/components/Loading/index.vue";
+import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+
+const LayoutComponents: Record<LayoutType, Component> = {
+  vertical: defineAsyncComponent(() => import("./LayoutVertical/index.vue")),
+  classic: defineAsyncComponent(() => import("./LayoutClassic/index.vue")),
+  transverse: defineAsyncComponent(() => import("./LayoutTransverse/index.vue")),
+  columns: defineAsyncComponent(() => import("./LayoutColumns/index.vue"))
+};
+
+const globalStore = useGlobalStore();
+const layout = computed(() => globalStore.layout);
+</script>
+
+<style scoped lang="scss">
+.layout {
+  min-width: 600px;
+}
+</style>