diff --git a/src/components/meDarkSwitch.vue b/src/components/meDarkSwitch.vue
index 1336af25..5fe1466a 100644
--- a/src/components/meDarkSwitch.vue
+++ b/src/components/meDarkSwitch.vue
@@ -20,6 +20,8 @@ const settingStore = useSettingStore();
 @use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
 
 .#{$namespace}-switch {
+    margin: 0 10px;
+
     .#{$namespace}-switch__core {
         border-color: getCssVar('switch-off', 'color') !important;
         background-color: getCssVar('switch-off', 'color') !important;
diff --git a/src/components/meLocaleSelect.vue b/src/components/meLocaleSelect.vue
index e750043c..1687e60e 100644
--- a/src/components/meLocaleSelect.vue
+++ b/src/components/meLocaleSelect.vue
@@ -1,6 +1,6 @@
 <template>
-    <el-dropdown class="me-locale-select pointer" max-height="500px">
-        <div class="flex-center">
+    <el-dropdown class="me-locale-select" trigger="click" max-height="500px">
+        <div class="flex-center pointer">
             <me-icon-translation class="icon"></me-icon-translation>
         </div>
         <template #dropdown>
@@ -22,8 +22,12 @@ const setLanguage = (locale: string) => {
 .me-locale-select {
     line-height: 100%;
 
-    .icon {
-        font-size: 1.4em;
+    .flex-center {
+        padding: 0 10px;
+
+        .icon {
+            font-size: 1.2em;
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/meSizeSelect.vue b/src/components/meSizeSelect.vue
index b94d27b3..dd24ae80 100644
--- a/src/components/meSizeSelect.vue
+++ b/src/components/meSizeSelect.vue
@@ -1,6 +1,6 @@
 <template>
-    <el-dropdown class="me-size-select pointer" max-height="500px">
-        <div class="flex-center">
+    <el-dropdown class="me-size-select" trigger="click" max-height="500px">
+        <div class="flex-center pointer">
             <me-icon-size class="icon"></me-icon-size>
         </div>
         <template #dropdown>
@@ -18,8 +18,13 @@ const settingStore = useSettingStore();
 </script>
 <style lang="scss" scoped>
 .me-size-select {
-    .icon {
-        font-size: 1.2em;
+    .flex-center {
+        padding: 0 10px;
+
+        .icon {
+            font-size: 1.2em;
+        }
     }
+
 }
 </style>
diff --git a/src/config/index.ts b/src/config/index.ts
index 8540e947..8c2434f6 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -15,6 +15,6 @@ export interface ThemeConfig {
 let themeConfig: ThemeConfig = {
     isDark: false,//是否暗黑模式
     size: sizeEnum.default,//默认大小
-    menuCollapse: false,//菜单是否折叠
+    menuCollapse: true,//菜单是否折叠
 }
 export { loginConfig, localeConfig, themeConfig }
diff --git a/src/event/modules/core.ts b/src/event/modules/core.ts
index 5decc420..a052ae67 100644
--- a/src/event/modules/core.ts
+++ b/src/event/modules/core.ts
@@ -16,7 +16,7 @@ mitter.once(event.ready, async (app) => {
     await installI18n(app);
     installRoute(app);
     window.addEventListener('resize', () => mitter.emit(event.resize));
-    // 进度条配置项这样写
+    //进度条配置
     nProgress.configure({
         showSpinner: false
     });
diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg
index 7828f568..3a148ae9 100644
--- a/src/icons/svg/dashboard.svg
+++ b/src/icons/svg/dashboard.svg
@@ -1 +1,5 @@
-<svg viewBox="0 0 128 100"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"></path></svg>
\ No newline at end of file
+<svg viewBox="0 0 128 100">
+    <path
+        d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/src/layout/components/header/components/right.vue b/src/layout/components/header/components/right.vue
deleted file mode 100644
index 4720fbc9..00000000
--- a/src/layout/components/header/components/right.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <el-space class="right">
-    <div></div>
-    <me-dark-switch class="item no-hover"></me-dark-switch>
-    <el-dropdown class="item pointer" max-height="500px">
-      <div class="flex-center">
-        <el-badge is-dot>
-          <el-icon-bell class="message-icon"></el-icon-bell>
-        </el-badge>
-      </div>
-      <template #dropdown>
-        <div class="message-tabs">
-          <div class="message-header">
-            <div>全部已读</div>
-            <div>查看更多</div>
-          </div>
-          <el-tabs model-value="notify">
-            <el-tab-pane label="通知" name="notify">
-              <el-card class="box-card" shadow="never">
-                <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
-              </el-card>
-            </el-tab-pane>
-            <el-tab-pane label="消息" name="message">Config</el-tab-pane>
-            <el-tab-pane label="待办" name="agenda">Role</el-tab-pane>
-          </el-tabs>
-        </div>
-
-      </template>
-    </el-dropdown>
-    <me-locale-select class="item"></me-locale-select>
-    <me-size-select class="item"></me-size-select>
-    <el-space class="item pointer">
-      <el-avatar size="small" src="" />
-      admin
-    </el-space>
-  </el-space>
-</template>
-<script setup lang="ts" name="right">
-import MeDarkSwitch from "@/components/meDarkSwitch.vue";
-import MeLocaleSelect from "@/components/meLocaleSelect.vue";
-import MeSizeSelect from "@/components/meSizeSelect.vue";
-
-
-</script>
-<style lang="scss" scoped>
-@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
-
-.right {
-  font-size: 1rem;
-  height: 100%;
-
-  .item {
-    padding: 0 10px;
-    height: 100%;
-  }
-
-  .item:hover {
-    background-color: getCssVar('bg-color', 'page');
-  }
-
-  .no-hover:hover {
-    background-color: unset;
-  }
-
-  &:deep(.el-space__item) {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .message-icon {
-    height: 25px;
-    line-height: 25px;
-    font-size: 1.2em;
-  }
-
-}
-
-.message-tabs {
-  padding: 15px 10px;
-  height: 300px;
-
-  .message-header {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/layout/components/header/components/left.vue b/src/layout/components/navbar/components/left.vue
similarity index 60%
rename from src/layout/components/header/components/left.vue
rename to src/layout/components/navbar/components/left.vue
index 5718652b..a0820ea5 100644
--- a/src/layout/components/header/components/left.vue
+++ b/src/layout/components/navbar/components/left.vue
@@ -4,21 +4,25 @@
         <el-icon-expand class="fold-expand pointer" @click="setMenuCollapse()" v-if="settingStore.menuCollapse">
         </el-icon-expand>
         <el-icon-fold class="fold-expand pointer" @click="setMenuCollapse()" v-else></el-icon-fold>
-        <el-scrollbar :min-size="10" wrap-style="display:flex;align-items:center">
+        <el-scrollbar :min-size="10" wrap-style="display:flex;align-items:center" v-if="!globalStore.isMobile">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-                <el-breadcrumb-item>promotion management></el-breadcrumb-item>
-                <el-breadcrumb-item>promotion list</el-breadcrumb-item>
-                <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+                <el-breadcrumb-item :to="index === breadcrumbList.length - 1 ? undefined : item.redirect"
+                    v-for="(item, index) in breadcrumbList">{{ item.meta!.title }}</el-breadcrumb-item>
             </el-breadcrumb>
         </el-scrollbar>
     </el-space>
 </template>
 <script setup lang="ts" name="left">
-import { useSettingStore } from '@/store';
+import { useSettingStore, useGlobalStore } from '@/store';
+import { RouteRecordRaw } from 'vue-router';
 const settingStore = useSettingStore();
+const globalStore = useGlobalStore();
 const setMenuCollapse = () => { settingStore.menuCollapse = !settingStore.menuCollapse };
-
+const breadcrumbList = ref([] as RouteRecordRaw[]);
+const route = useRoute();
+watch(route, (route) => {
+    breadcrumbList.value = route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+}, { immediate: true });
 </script>
 <style lang="scss" scoped>
 @use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
diff --git a/src/layout/components/navbar/components/right/components/messageBox.vue b/src/layout/components/navbar/components/right/components/messageBox.vue
new file mode 100644
index 00000000..3d82ac4e
--- /dev/null
+++ b/src/layout/components/navbar/components/right/components/messageBox.vue
@@ -0,0 +1,75 @@
+<template>
+    <el-dropdown class="message-box" max-height="500px" trigger="click">
+        <div class="flex-center pointer">
+            <el-badge is-dot>
+                <el-icon-bell class="message-icon"></el-icon-bell>
+            </el-badge>
+        </div>
+        <template #dropdown>
+            <div class="message-tabs">
+                <div class="message-header">
+                    <el-link>全部已读</el-link>
+                    <el-link>查看更多</el-link>
+                </div>
+                <el-tabs model-value="notify">
+                    <el-tab-pane label="通知" name="notify">
+                        <div v-for="o in 4" :key="o" class="text notify-item">
+                            {{ 'List item ' + o }}<div class="date">2022/08/08</div>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="消息" name="message">Config</el-tab-pane>
+                    <el-tab-pane label="待办" name="agenda">Role</el-tab-pane>
+                </el-tabs>
+            </div>
+
+        </template>
+    </el-dropdown>
+</template>
+<script setup lang="ts" name="messageBox">
+
+
+</script>
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+.message-box {
+    .flex-center {
+        padding: 0 10px;
+
+        .message-icon {
+            height: 25px;
+            line-height: 25px;
+            font-size: 1.2em;
+        }
+    }
+}
+
+.message-tabs {
+    padding: 15px 10px;
+    height: 300px;
+    font-size: 1rem;
+
+    .message-header {
+        display: flex;
+        justify-content: space-between;
+
+        :deep(.el-link) {
+            font-size: .85em !important
+        }
+    }
+
+    :deep(.el-tabs__header) {
+        margin-bottom: 0;
+    }
+
+    .notify-item {
+        padding: 5px 0;
+        border-bottom: 1px solid #eeeeee;
+
+        .date {
+            font-size: 12px;
+            color: getCssVar('text-color', 'placeholder');
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/navbar/components/right/index.vue b/src/layout/components/navbar/components/right/index.vue
new file mode 100644
index 00000000..2e6e4f2a
--- /dev/null
+++ b/src/layout/components/navbar/components/right/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-space class="right">
+    <div></div>
+    <me-dark-switch class="item no-hover"></me-dark-switch>
+    <message-box class="item"></message-box>
+    <me-locale-select class="item"></me-locale-select>
+    <me-size-select class="item"></me-size-select>
+    <el-space class="item pointer">
+      <el-avatar size="small" src="" />
+      admin
+    </el-space>
+  </el-space>
+</template>
+<script setup lang="ts" name="right">
+import MeDarkSwitch from "@/components/meDarkSwitch.vue";
+import MeLocaleSelect from "@/components/meLocaleSelect.vue";
+import MeSizeSelect from "@/components/meSizeSelect.vue";
+import MessageBox from "./components/messageBox.vue";
+
+
+</script>
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
+.right {
+  font-size: 1rem;
+  height: 100%;
+
+  .item {
+    height: 100%;
+  }
+
+  .item:hover {
+    background-color: getCssVar('bg-color', 'page');
+  }
+
+  .no-hover:hover {
+    background-color: unset;
+  }
+
+  &:deep(.el-space__item) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/header/components/tags/components/contextmenu.vue b/src/layout/components/navbar/components/tags/components/contextmenu.vue
similarity index 100%
rename from src/layout/components/header/components/tags/components/contextmenu.vue
rename to src/layout/components/navbar/components/tags/components/contextmenu.vue
diff --git a/src/layout/components/header/components/tags/index.vue b/src/layout/components/navbar/components/tags/index.vue
similarity index 100%
rename from src/layout/components/header/components/tags/index.vue
rename to src/layout/components/navbar/components/tags/index.vue
diff --git a/src/layout/components/header/index.vue b/src/layout/components/navbar/index.vue
similarity index 79%
rename from src/layout/components/header/index.vue
rename to src/layout/components/navbar/index.vue
index ae70ef18..671355fd 100644
--- a/src/layout/components/header/index.vue
+++ b/src/layout/components/navbar/index.vue
@@ -1,21 +1,19 @@
 <template>
-    <div class="header">
+    <div class="navbar">
         <left></left>
         <right class="right-header"></right>
     </div>
     <tags></tags>
 </template>
-<script setup lang="ts" name="layoutHeader">
+<script setup lang="ts" name="navbar">
 import left from './components/left.vue';
-import right from './components/right.vue';
+import right from './components/right/index.vue';
 import tags from './components/tags/index.vue';
-
-
 </script>
 <style lang="scss" scoped>
 @use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
 
-.header {
+.navbar {
     height: 48px;
     display: flex;
     align-items: center;
diff --git a/src/layout/components/sidebar/components/sidebarItem.vue b/src/layout/components/sidebar/components/sidebarItem.vue
index 7cbe5c50..f8fdbc45 100644
--- a/src/layout/components/sidebar/components/sidebarItem.vue
+++ b/src/layout/components/sidebar/components/sidebarItem.vue
@@ -1,21 +1,22 @@
 <template>
-    <template v-if="item.meta && !item.meta.hideMenu">
+    <template v-if="!item.meta?.hideMenu">
         <template
-            v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild!.children || onlyOneChild!.noShowingChildren) && !item.meta.alwaysShow">
-            <component v-if="onlyOneChild!.meta" :is="onlyOneChild!.meta?.isLink ? 'a' : 'routerLink'" :href="basePath"
-                :to="basePath">
-                <el-menu-item :index="basePath" :title="onlyOneChild!.meta.title">
-                    <component :is="onlyOneChild!.meta!.icon" v-if="onlyOneChild!.meta.icon" />
+            v-if="onlyOneChild && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow">
+            <component v-if="onlyOneChild.meta && onlyOneChild.meta.title"
+                :is="onlyOneChild.meta?.isLink ? 'a' : 'routerLink'" :href="basePath"
+                :to="resolvePath(onlyOneChild.path)">
+                <el-menu-item :index="resolvePath(onlyOneChild.path)" :title="onlyOneChild.meta.title">
+                    <component :is="onlyOneChild.meta.icon" v-if="onlyOneChild.meta.icon" />
                     <template #title>
-                        <span class="menu">{{ onlyOneChild!.meta.title }}</span>
+                        <span class="menu">{{ onlyOneChild.meta.title }}</span>
                     </template>
                 </el-menu-item>
             </component>
         </template>
         <el-sub-menu v-else :index="resolvePath(item.path)">
             <template v-if="item.meta" #title>
-                <component :is="item.meta.icon" v-if="item.meta.icon" />
-                <span class="menu">{{ item.meta.title }}</span>
+                <component :is="item.meta!.icon" v-if="item.meta!.icon" />
+                <span class="menu">{{ item.meta!.title }}</span>
             </template>
             <sidebar-item v-for="child in item.children" :key="child.path" :item="child"
                 :base-path="resolvePath(child.path)"></sidebar-item>
@@ -28,7 +29,6 @@ import { isExternal } from '@/utils/validate';
 import { resolve } from 'path-browserify';
 import { PropType } from 'vue';
 import { RouteRecordRaw } from 'vue-router';
-
 const props = defineProps({
     item: {
         type: Object as PropType<RouteRecordRaw>,
@@ -58,7 +58,7 @@ const resolvePath = (routePath: string) => {
     }
     return resolve(props.basePath, routePath)
 }
-
+hasOneShowingChild(props.item.children, props.item)
 </script>
 <style lang="scss" scoped>
 </style>
\ No newline at end of file
diff --git a/src/layout/components/sidebar/index.vue b/src/layout/components/sidebar/index.vue
index 8888fb02..1635bd86 100644
--- a/src/layout/components/sidebar/index.vue
+++ b/src/layout/components/sidebar/index.vue
@@ -1,7 +1,8 @@
 <template>
   <el-scrollbar view-class="layout-sidebar-content" class="layout-sidebar"
-    :class="{ collapse: settingStore.menuCollapse }">
-    <el-menu class="el-menu-vertical-demo" :default-active="activeMenu" :collapse="settingStore.menuCollapse">
+    :class="{ collapse: !globalStore.isMobile && settingStore.menuCollapse }">
+    <el-menu class="el-menu-vertical-demo" :default-active="activeMenu"
+      :collapse="!globalStore.isMobile && settingStore.menuCollapse">
       <div class="title">
         Me<span> - Admin</span>
       </div>
@@ -10,9 +11,10 @@
   </el-scrollbar>
 </template>
 <script setup lang="ts" name="layoutSidebar">
-import { useSettingStore, useRouteStore } from '@/store';
+import { useSettingStore, useRouteStore, useGlobalStore } from '@/store';
 const settingStore = useSettingStore();
 const routeStore = useRouteStore();
+const globalStore = useGlobalStore();
 const route = useRoute();
 let activeMenu = ref('');
 watch(route, (route) => {
@@ -48,7 +50,7 @@ watch(route, (route) => {
       height: getCssVar('menu-item', 'height');
       line-height: getCssVar('menu-item', 'height');
       font-weight: bold;
-      margin: 0 12px;
+      padding: 0 12px;
       font-size: 1.25em;
       word-break: break-all;
       overflow-y: hidden;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ac001080..450eae11 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,11 +1,11 @@
 <template>
     <el-container class="layout">
-        <el-aside width="max-content">
+        <el-aside width="max-content" v-if="!globalStore.isMobile">
             <layout-sidebar></layout-sidebar>
         </el-aside>
         <el-container>
             <el-header height="max-content">
-                <layout-header></layout-header>
+                <layout-navbar></layout-navbar>
             </el-header>
             <el-main>
                 <el-scrollbar>
@@ -19,14 +19,20 @@
             </el-main>
         </el-container>
     </el-container>
+    <el-drawer custom-class="me-sidebar-drawer" :model-value="!settingStore.menuCollapse" :with-header="false"
+        size="200px" direction="ltr" v-if="globalStore.isMobile" @close="() => settingStore.menuCollapse = true">
+        <layout-sidebar></layout-sidebar>
+    </el-drawer>
 </template>
 <script setup lang="ts" name="layout">
 import layoutSidebar from './components/sidebar/index.vue';
-import layoutHeader from './components/header/index.vue';
+import layoutNavbar from './components/navbar/index.vue';
 import meComponent from '@/components/meComponent.vue';
-import { useRouteStore } from '@/store';
+import { useRouteStore, useSettingStore, useGlobalStore } from '@/store';
 import { MeKeepAliveProps } from '@/components/meKeepAlive';
+const settingStore = useSettingStore();
 const routeStore = useRouteStore();
+const globalStore = useGlobalStore();
 const keepAliveProps = reactive<MeKeepAliveProps>({
     max: 30,
     excludeKey: routeStore.noCacheFullPath,
@@ -55,4 +61,8 @@ watch(route, () => {
         padding: 0;
     }
 }
+
+:global(.me-sidebar-drawer .el-drawer__body) {
+    padding: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/router/routes/1-dashboard.ts b/src/router/routes/1-dashboard.ts
index 5888cf46..e5542940 100644
--- a/src/router/routes/1-dashboard.ts
+++ b/src/router/routes/1-dashboard.ts
@@ -7,7 +7,6 @@ export const routes: RouteRecordRaw[] = [
         path: PageEnum.HOME,
         redirect: PageEnum.HOME + '/index',
         component: Layout,
-        meta: { title: '控制台', icon: 'me-icon-dashboard' },
         children: concatObjectValue<RouteRecordRaw>(import.meta.glob('./dashboard/*.ts', { eager: true, import: 'routes' }))
     }
 ];
\ No newline at end of file
diff --git a/src/router/routes/dashboard/1-index.ts b/src/router/routes/dashboard/1-index.ts
index 58b51d43..2596ce5d 100644
--- a/src/router/routes/dashboard/1-index.ts
+++ b/src/router/routes/dashboard/1-index.ts
@@ -3,6 +3,6 @@ export const routes: RouteRecordRaw[] = [
     {
         path: 'index',
         component: () => import('@/views/dashboard/index.vue'),
-        meta: { title: '控制台', hideMenu: true, affix: true },
+        meta: { title: '控制台', affix: true, icon: 'me-icon-dashboard' },
     }
 ];
\ No newline at end of file
diff --git a/src/store/modules/global.ts b/src/store/modules/global.ts
index 7c1f0022..d36e048a 100644
--- a/src/store/modules/global.ts
+++ b/src/store/modules/global.ts
@@ -1,4 +1,10 @@
 import { Composer } from "vue-i18n";
+import { event, mitter } from "@/event";
+const WIDTH = 992 // refer to Bootstrap's responsive design
+const isMobile = ref(window.document.body.offsetWidth < WIDTH);
+mitter.on(event.resize, () => {
+    isMobile.value = window.document.body.offsetWidth < WIDTH;
+});
 export default defineStore('global', {
     state: () => {
         let _i18n: Composer<unknown, unknown, unknown>;
@@ -16,7 +22,8 @@ export default defineStore('global', {
                         }
                     }
                 }
-            })
+            }),
+            isMobile
         }
     }
 });
\ No newline at end of file
diff --git a/src/utils/permison.ts b/src/utils/permison.ts
index 0058ee04..41a506b4 100644
--- a/src/utils/permison.ts
+++ b/src/utils/permison.ts
@@ -26,16 +26,14 @@ export function filterAsyncRoutes(routes: RouteRecordRaw[], activeMenu?: string)
   const res: RouteRecordRaw[] = [];
   routes.forEach(route => {
     const tmp = { ...route }
-    if (route.meta && hasPermission(route.meta.rule)) {
-      if (route.meta.hideMenu) {
+    if (!route.meta || hasPermission(route.meta.rule)) {
+      if (route.meta?.hideMenu) {
         if (typeof route.meta.activeMenu === 'undefined' && activeMenu) {
           route.meta.activeMenu = activeMenu;
         }
       } else {
-        activeMenu = route.meta.activeMenu || route.path;
+        activeMenu = route.meta?.activeMenu || route.path;
       }
-
-
       if (tmp.children) {
         tmp.children = filterAsyncRoutes(tmp.children, activeMenu)
       }
diff --git a/src/views/login/components/header.vue b/src/views/login/components/header.vue
index e20227e1..9bcdde0c 100644
--- a/src/views/login/components/header.vue
+++ b/src/views/login/components/header.vue
@@ -16,9 +16,5 @@ import MeSizeSelect from '@/components/meSizeSelect.vue';
     justify-content: right;
     align-items: center;
     padding: 12px;
-
-    >div {
-        padding: 0 12px
-    }
 }
 </style>
\ No newline at end of file
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
index ed2b6f0f..50f6d6ff 100644
--- a/types/vue-router.d.ts
+++ b/types/vue-router.d.ts
@@ -2,7 +2,7 @@ import { _RouteRecordBase, RouteMeta } from 'vue-router';
 declare module 'vue-router' {
     interface RouteMeta extends Record<string | number | symbol, unknown> {
         // 标题设置该路由在侧边栏和面包屑中展示的名字
-        title: string,
+        title?: string,
         //对应权限 多个之间为或的关系
         rule?: string[],
         // 是否是固定的tag
@@ -27,6 +27,8 @@ declare module 'vue-router' {
         // 若你想不管路由下面的 children 声明的个数都显示你的根路由
         // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
         alwaysShow?: boolean,
+        //是否需要面包屑false不需要 ture或undefined为需要
+        breadcrumb?: boolean,
     }
     interface _RouteRecordBase {
         //没有需要展示的子集（会动态计算不要设置默认值）