feat: 自适应手机模式

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;

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>

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>

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 }

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
     });

src/layout/components/header/components/left.vue → 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 *;

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>

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>

src/layout/components/header/index.vue → 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;