初始化

2026-04-13 17:32:58 +08:00
commit c6ee0d5243
1342 changed files with 96426 additions and 0 deletions
--- a/frontend/src/layouts/LayoutClassic/index.scss
+++ b/frontend/src/layouts/LayoutClassic/index.scss
@@ -0,0 +1,67 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  :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;
+    min-width: 0;
+    min-height: 0;
+    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;
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
--- 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">
+@use './index.scss';
+</style>
--- a/frontend/src/layouts/LayoutColumns/index.scss
+++ b/frontend/src/layouts/LayoutColumns/index.scss
@@ -0,0 +1,97 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  .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,105 @@
+<!-- 分栏布局 -->
+<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 { computed, ref, 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">
+@use './index.scss';
+</style>
--- a/frontend/src/layouts/LayoutTransverse/index.scss
+++ b/frontend/src/layouts/LayoutTransverse/index.scss
@@ -0,0 +1,90 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    border-bottom: 1px solid var(--el-header-border-color);
+    // background-color: var(--el-header-bg-color);
+    background-color: var(--el-color-primary); //默认蓝色风格背景
+    .logo {
+      padding:0 10px 0 15px;
+      margin-right: 30px;
+      .logo-img {
+        width: 28px;
+        object-fit: contain;
+        margin-right: 5px;
+      }
+      .logo-text {
+        font-size: 21.5px;
+        font-weight: bold;
+        // color: var(--el-header-logo-text-color);
+        color: #fff; // logo文字颜色
+        white-space: nowrap;
+      }
+    }
+    //导航栏样式
+    .el-menu {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+      border-bottom: none;
+      background-color: var(--el-color-primary); //导航蓝色背景
+      .el-menu-item {
+        color: #fff;
+      }
+      .el-menu-item:hover {
+        color: #fff; //一级导航划过颜色
+        //background-color: #5274a5 !important; //一级导航划过背景色
+        background-color:var(--el-color-primary-light-3) !important; 
+
+      }
+      .el-sub-menu__hide-arrow {
+        width: 65px;
+        height: 55px;
+      }
+      .el-menu-item.is-active {
+        color: #fff !important; //一级导航文字选中颜色
+        //background-color: #5274a5 !important; //一级导航选中背景色
+        background-color: var(--el-color-primary-light-3) !important; 
+
+        border-bottom: 0 !important;
+      }
+      .el-sub-menu__title {
+        color: #fff;
+      }
+      .is-opened:hover {
+        color: #fff;
+      }
+      .is-active {
+        background-color: var(--el-color-primary) !important;
+        // border-bottom-color: var(--el-color-primary) !important;
+        border-bottom: 0 !important;
+        &::before {
+          width: 0;
+        }
+        .el-sub-menu__title {
+          color: #fff !important; //二级导航文字选中颜色
+          // background-color: var(--el-color-primary) !important;
+          // background-color: #5274a5 !important;//二级导航选中背景色
+      
+          //background-color: #7588e5 !important; 
+          background-color: var(--el-color-primary-light-3) !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,81 @@
+<!-- 横向布局 -->
+<template>
+    <el-container class="layout">
+        <el-header>
+            <div class="logo flx-center">
+                <!-- <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" /> -->
+                <img class="logo-img" src="@/assets/images/cn_tool_logo.png" alt="logo" />
+                <span class="logo-text">{{ title }}</span>
+            </div>
+            <el-menu v-if="showMenuFlag" trigger="click" 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 showMenuFlag = computed(() => authStore.showMenuFlagGet)
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
+
+const handleClickMenu = async (subItem: Menu.MenuOptions) => {
+    if (subItem.meta?.isLink) {
+        window.open(subItem.meta.isLink, '_blank')
+        return
+    }
+    await router.push(subItem.path)
+}
+</script>
+
+<style scoped lang="scss">
+@use './index.scss';
+.logo {
+    margin-right: 0 !important;
+}
+.logo-text {
+    letter-spacing: 2px;
+}
+</style>
--- a/frontend/src/layouts/LayoutVertical/index.scss
+++ b/frontend/src/layouts/LayoutVertical/index.scss
@@ -0,0 +1,57 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  justify-content: space-between;
+  > .el-container {
+    min-width: 0;
+    min-height: 0;
+  }
+  :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;
+    border-bottom: 1px solid var(--el-header-border-color);
+     // background-color: var(--el-header-bg-color);
+     background-color: var(--el-color-primary);//默认蓝色风格背景
+  }
+}
--- 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">
+@use './index.scss';
+</style>
--- a/frontend/src/layouts/components/Footer/index.scss
+++ b/frontend/src/layouts/components/Footer/index.scss
@@ -0,0 +1,13 @@
+.footer {
+  height: 40px;
+  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,31 @@
+<template>
+    <div class="footer flx-align-center pl10">
+        <p style="margin: 0">
+            <a href="http://www.shining-electric.com/" target="_blank">2024 Shining Electric Automation Co., Ltd.</a>
+        </p>
+    </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped lang="scss">
+@use './index.scss';
+
+.footer {
+    position: relative;
+    background-color: var(--el-color-primary);
+
+    p {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        text-align: right;
+        line-height: 40px;
+
+        a {
+            color: #fff;
+            margin-right: 25px;
+        }
+    }
+}
+</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,37 @@
+<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>-->
+    <Avatar />
+  </div>
+</template>
+<script setup lang="ts">
+import Avatar from "./components/Avatar.vue";
+</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,104 @@
+<template>
+    <el-dropdown trigger="click">
+        <div class="userInfo">
+            <div class="icon">
+                <Avatar />
+            </div>
+            <div class="username">
+                {{ username }}
+            </div>
+        </div>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item @click="openDialog('themeRef')">
+                    <el-icon><Sunny /></el-icon>
+                    {{ t('header.changeTheme') }}
+                </el-dropdown-item>
+                <el-dropdown-item @click="openDialog('passwordRef')">
+                    <el-icon><Edit /></el-icon>
+                    {{ t('header.changePassword') }}
+                </el-dropdown-item>
+                <el-dropdown-item @click="openDialog('versionRegisterRef')">
+                    <el-icon><SetUp /></el-icon>
+                    {{ t('header.versionRegister') }}
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+    <div class="avatar">
+        <img src="@/assets/icons/out_login.svg" alt="avatar" @click="logout" />
+    </div>
+    <PasswordDialog ref="passwordRef"></PasswordDialog>
+    <VersionDialog ref="versionRegisterRef"></VersionDialog>
+    <ThemeDialog ref="themeRef"></ThemeDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { LOGIN_URL } from '@/config'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import PasswordDialog from './PasswordDialog.vue'
+import ThemeDialog from './ThemeDialog.vue'
+import VersionDialog from '@/views/system/versionRegister/index.vue'
+import { Avatar, Sunny } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+const userStore = useUserStore()
+const username = computed(() => userStore.userInfo.name)
+const router = useRouter()
+const { t } = useI18n()
+
+const logout = () => {
+    ElMessageBox.confirm('确认退出登录？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(async () => {
+        ElMessage.success('退出登录成功')
+        await userStore.logout()
+        await router.push(LOGIN_URL)
+    })
+}
+
+const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null)
+const versionRegisterRef = ref<InstanceType<typeof VersionDialog> | null>(null)
+const themeRef = ref<InstanceType<typeof ThemeDialog> | null>(null)
+
+const openDialog = (refName: string) => {
+    if (refName == 'passwordRef') passwordRef.value?.openDialog()
+    if (refName == 'versionRegisterRef') versionRegisterRef.value?.openDialog()
+    if (refName == 'themeRef') themeRef.value?.openDialog()
+}
+</script>
+
+<style scoped lang="scss">
+.userInfo {
+    min-width: 80px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+    .icon {
+        width: 18px;
+        height: 18px;
+        color: #fff !important;
+    }
+    .username {
+        color: #fff;
+        font-size: 16px;
+        margin-left: 10px;
+    }
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    cursor: pointer;
+}
+</style>
--- a/frontend/src/layouts/components/Header/components/Breadcrumb.vue
+++ b/frontend/src/layouts/components/Header/components/Breadcrumb.vue
@@ -0,0 +1,108 @@
+<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 homeBreadcrumb = {
+  path: HOME_URL,
+  meta: {
+    icon: 'HomeFilled',
+    title: '首页'
+  }
+} as Menu.MenuOptions
+
+const breadcrumbList = computed(() => {
+  const matchedPath = route.matched[route.matched.length - 1]?.path ?? route.path
+  let breadcrumbData = authStore.breadcrumbListGet[matchedPath] ?? []
+
+  if (!breadcrumbData.length) {
+    return [homeBreadcrumb]
+  }
+
+  if (breadcrumbData[0]?.path !== HOME_URL) {
+    breadcrumbData = [homeBreadcrumb, ...breadcrumbData]
+  }
+
+  return breadcrumbData
+})
+
+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/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,150 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
+        <div>
+            <el-form :model="formContent" ref="dialogFormRef" :rules="rules">
+                <el-form-item label="原密码" prop="oldPassword" :label-width="100">
+                    <el-input
+                        type="oldPassword"
+                        v-model="formContent.oldPassword"
+                        show-password
+                        placeholder="请输入原密码"
+                        autocomplete="off"
+                        maxlength="32"
+                        show-word-limit
+                    />
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :label-width="100">
+                    <el-input
+                        type="newPassword"
+                        v-model="formContent.newPassword"
+                        show-password
+                        placeholder="请输入新密码"
+                        autocomplete="off"
+                        maxlength="32"
+                        show-word-limit
+                    />
+                </el-form-item>
+                <el-form-item label="确认密码" prop="surePassword" :label-width="100">
+                    <el-input
+                        type="surePassword"
+                        v-model="formContent.surePassword"
+                        show-password
+                        placeholder="请再次输入确认密码"
+                        autocomplete="off"
+                        maxlength="32"
+                        show-word-limit
+                    />
+                </el-form-item>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="close()">取消</el-button>
+                <el-button type="primary" @click="save()">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, type Ref } from 'vue'
+import { ElMessage, type FormItemRule } from 'element-plus'
+import { updatePassWord } from '@/api/user/user'
+import { type User } from '@/api/user/interface/user'
+import { useUserStore } from '@/stores/modules/user'
+import { LOGIN_URL } from '@/config'
+import { useRouter } from 'vue-router'
+
+const userStore = useUserStore()
+const router = useRouter()
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const formContent = ref<User.ResPassWordUser>({
+        id: '', //用户ID，作为唯一标识
+        oldPassword: '', //密码
+        newPassword: '', //
+        surePassword: ''
+    })
+    return { dialogVisible, formContent }
+}
+
+const { dialogVisible, formContent } = useMetaInfo()
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+        id: '', //用户ID，作为唯一标识
+        oldPassword: '', //密码
+        newPassword: '', //
+        surePassword: ''
+    }
+}
+
+// 定义规则
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+    oldPassword: [{ required: true, message: '原密码必填！', trigger: 'blur' }],
+    newPassword: [
+        { required: true, message: '新密码必填！', trigger: 'blur' },
+        {
+            pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/,
+            message: '密码长度为8-16，需包含特殊字符',
+            trigger: 'blur'
+        }
+    ],
+    surePassword: [
+        { required: true, message: '确认密码必填！', trigger: 'blur' },
+        {
+            validator: (rule: FormItemRule, value: string, callback: Function) => {
+                if (value !== formContent.value.newPassword) {
+                    callback(new Error('两次输入的密码不一致！'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur'
+        }
+    ]
+})
+
+// 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+}
+
+// 保存数据
+const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+            if (valid) {
+                if (formContent.value.id) {
+                    await updatePassWord(formContent.value)
+                    ElMessage.success('修改密码成功，请重新登录！')
+                    setTimeout(async () => {
+                        await userStore.logout()
+                        await router.push(LOGIN_URL)
+                    }, 2000)
+                }
+                close()
+            }
+        })
+    } catch (err) {
+        console.error('验证过程中出现错误', err)
+    }
+}
+
+// 打开弹窗是编辑
+const openDialog = async () => {
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+    dialogVisible.value = true
+    formContent.value.id = userStore.userInfo.id
+}
+
+// 对外映射
+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/ThemeDialog.vue
+++ b/frontend/src/layouts/components/Header/components/ThemeDialog.vue
@@ -0,0 +1,45 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="主题切换" width="500px" draggable>
+        <el-divider content-position="center">主题颜色</el-divider>
+        <div style="display: flex; justify-content: center;">
+            <el-color-picker v-model="color" />
+        </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="sure">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { onMounted, ref } from "vue";
+  import { useTheme } from "@/hooks/useTheme";
+import { on } from "events";
+  const color = ref('')
+  const { changePrimary} = useTheme();
+
+  const dialogVisible = ref(false);
+  const openDialog = () => {
+      // 修复：使用可选链和空值合并运算符确保不会出现 null 或 undefined
+    const storedColor = JSON.parse(localStorage.getItem('cn-global') ?? '{}').primary;
+    color.value = storedColor ?? '#526ADE'; // 默认值为 '#526ADE'
+    dialogVisible.value = true;
+  };
+
+  const sure = () => {
+    changePrimary(color.value); // 切换主题
+    dialogVisible.value = false;
+  };
+
+  // onMounted(() => {
+  //  // 修复：使用可选链和空值合并运算符确保不会出现 null 或 undefined
+  // const storedColor = JSON.parse(localStorage.getItem('cn-global') ?? '{}').primary;
+  // console.log('123',storedColor)
+  // color.value = storedColor ?? '#526ADE'; // 默认值为 '#526ADE'
+  // })
+  
+  defineExpose({ openDialog });
+  </script>
+  
--- 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,12 @@
+.el-main {
+  box-sizing: border-box;
+  min-height: 0;
+  padding: 15px;//主体padding
+  overflow-x: hidden;
+  overflow-y: auto;
+  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,81 @@
+<template>
+    <Maximize v-show="maximize" />
+    <Tabs v-if="tabs && showMenuFlag" />
+    <el-main>
+        <router-view v-slot="{ Component, route }" style="height: 100%">
+            <!-- {{ keepAliveName}} -->
+            <!-- <transition  name="slide-right" mode="out-in"> -->
+            <keep-alive :include="tabsMenuList">
+                <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+            <!-- </transition> -->
+        </router-view>
+    </el-main>
+    <el-footer>
+        <Footer />
+    </el-footer>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, provide, ref, 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'
+import { useAuthStore } from '@/stores/modules/auth'
+import { useTabsStore } from '@/stores/modules/tabs'
+
+const tabStore = useTabsStore()
+const globalStore = useGlobalStore()
+const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
+const authStore = useAuthStore()
+const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore)
+const keepAliveStore = useKeepAliveStore()
+const { keepAliveName } = storeToRefs(keepAliveStore)
+//是否显示导航栏
+const showMenuFlag = computed(() => authStore.showMenuFlagGet)
+// 注入刷新页面方法
+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">
+@use './index.scss';
+</style>
--- a/frontend/src/layouts/components/Menu/SubMenu.vue
+++ b/frontend/src/layouts/components/Menu/SubMenu.vue
@@ -0,0 +1,97 @@
+<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 = async (subItem: Menu.MenuOptions) => {
+    if (subItem.meta?.isLink) {
+        window.open(subItem.meta.isLink, '_blank')
+        return
+    }
+    await 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;
+    color: #fff !important; //一级导航文字选中颜色
+    //background-color: #5274a5 !important; //一级导航选中背景色
+
+    background-color: var(--el-color-primary-light-3) !important;
+}
+.el-menu--collapse {
+    .is-active {
+        .el-sub-menu__title {
+            color: #ffffff !important;
+            // background-color: var(--el-color-primary) !important;
+            //background-color: #5274a5 !important;
+            background-color: var(--el-color-primary-light-3) !important;
+
+            border-bottom: 0 !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;
+        color: #fff !important; //一级导航文字选中颜色
+        //background-color: #5274a5 !important; //一级导航选中背景色
+        background-color: var(--el-color-primary-light-3) !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,88 @@
+<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">
+@use '../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,121 @@
+<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 { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { TabPaneName, TabsPaneContext } from 'element-plus'
+import { HOME_URL } from '@/config'
+import { useGlobalStore } from '@/stores/modules/global'
+import { useTabsStore } from '@/stores/modules/tabs'
+import MoreButton from './components/MoreButton.vue'
+
+const route = useRoute()
+const router = useRouter()
+const tabStore = useTabsStore()
+const globalStore = useGlobalStore()
+
+const tabsMenuValue = ref(route.fullPath)
+const tabsMenuList = computed(() => tabStore.tabsMenuList)
+const tabsIcon = computed(() => globalStore.tabsIcon)
+
+onMounted(() => {
+    tabsDrop()
+    initTabs()
+})
+
+watch(
+    () => route.fullPath,
+    () => {
+        if (route.meta.isFull) return
+        if (route.meta.hideTab) {
+            tabsMenuValue.value = route.meta.parentPath as string
+        } else {
+            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 }
+)
+
+const initTabs = () => {
+    const affixTabs = router
+        .getRoutes()
+        .filter(item => item.meta.isAffix && !item.meta.isHide && !item.meta.isFull && item.name && item.path)
+        .sort((a, b) => {
+            if (a.path === HOME_URL) return -1
+            if (b.path === HOME_URL) return 1
+            return 0
+        })
+
+    for (let index = affixTabs.length - 1; index >= 0; index -= 1) {
+        const item = affixTabs[index]
+        const tabsParams = {
+            icon: item.meta.icon as string,
+            title: item.meta.title as string,
+            path: item.path,
+            name: item.name as string,
+            close: !item.meta.isAffix,
+            isKeepAlive: item.meta.isKeepAlive as boolean,
+            unshift: true
+        }
+        tabStore.addTabs(tabsParams)
+    }
+}
+
+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)
+        }
+    })
+}
+
+const tabClick = (tabItem: TabsPaneContext) => {
+    const fullPath = tabItem.props.name as string
+    router.push(fullPath)
+}
+
+const tabRemove = (fullPath: TabPaneName) => {
+    tabStore.removeTabs(fullPath as string, fullPath == route.fullPath)
+}
+</script>
+
+<style scoped lang="scss">
+@use './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-3);
+      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,198 @@
+<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">
+@use './index.scss';
+</style>
--- a/frontend/src/layouts/index.vue
+++ b/frontend/src/layouts/index.vue
@@ -0,0 +1,37 @@
+<!-- 💥 这里是一次性加载 LayoutComponents -->
+<template>
+  <component :is="LayoutComponents[layout]" />
+  <ThemeDrawer />
+
+
+</template>
+
+<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">
+.layout {
+  min-width: 600px;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+</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>