add layout settings

src/assets/style/global-variables.scss

@@ -15,3 +15,4 @@ $collapseMenuActiveColor: $menuTextColor; // 菜单宽度折叠后，已选中
 $collapseMenuActiveBorderColor: $mainColor; // 菜单宽度折叠后，已选中菜单的边框颜色
 $collapseMenuActiveBorderWidth: 2px; // 菜单宽度折叠后，已选中菜单的边框宽度
 $arrowColor: #909399; // 展开/收起箭头颜色
+$horizontalMenuHeight: 40px; // 菜单栏水平排列时候的高度

src/defaultSettings.js

@@ -0,0 +1,75 @@
+/*
+ *                                |~~~~~~~|
+ *                                |       |
+ *                                |       |
+ *                                |       |
+ *                                |       |
+ *                                |       |
+ *     |~.\\\_\~~~~~~~~~~~~~~xx~~~         ~~~~~~~~~~~~~~~~~~~~~/_//;~|
+ *     |  \  o \_         ,XXXXX),                         _..-~ o /  |
+ *     |    ~~\  ~-.     XXXXX`)))),                 _.--~~   .-~~~   |
+ *      ~~~~~~~`\   ~\~~~XXX' _/ ';))     |~~~~~~..-~     _.-~ ~~~~~~~
+ *               `\   ~~--`_\~\, ;;;\)__.---.~~~      _.-~
+ *                 ~-.       `:;;/;; \          _..-~~
+ *                    ~-._      `''        /-~-~
+ *                        `\              /  /
+ *                          |         ,   | |
+ *                           |  '        /  |
+ *                            \/;          |
+ *                             ;;          |
+ *                             `;   .       |
+ *                             |~~~-----.....|
+ *                            | \             \
+ *                           | /\~~--...__    |
+ *                           (|  `\       __-\|
+ *                           ||    \_   /~    |
+ *                           |)     \~-'      |
+ *                            |      | \      '
+ *                            |      |  \    :
+ *                             \     |  |    |
+ *                              |    )  (    )
+ *                               \  /;  /\  |
+ *                               |    |/   |
+ *                               |    |   |
+ *                                \  .'  ||
+ *                                |  |  | |
+ *                                (  | |  |
+ *                                |   \ \ |
+ *                                || o `.)|
+ *                                |`\\) |
+ *                                |       |
+ *                                |       |
+ *
+ * @Descripttion:
+ * @version:
+ * @Date: 2021-07-22 17:22:14
+ * @LastEditors: huzhushan@126.com
+ * @LastEditTime: 2021-07-23 14:44:42
+ * @Author: huzhushan@126.com
+ * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
+ * @Github: https://github.com/huzhushan/vue3-element-admin
+ * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
+ */
+
+export default {
+  menus: {
+    // 菜单栏排列方式
+    mode: 'vertical', // horizontal: 水平排列   vertical: 垂直排列
+  },
+  tagsbar: {
+    // 标签栏是否显示
+    isShow: true,
+  },
+  breadcrumbs: {
+    // 面包屑导航是否显示
+    isShow: true,
+  },
+  topbar: {
+    // 顶栏是否固定
+    isFixed: true,
+  },
+  layout: {
+    // 是否流式布局
+    isFluid: true,
+  },
+}

src/layout/components/Sidebar/Menus.vue

@@ -27,7 +27,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:46:48
+ * @LastEditTime: 2021-07-23 11:07:24
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -38,6 +38,7 @@
   <el-scrollbar class="scroll">
     <el-menu
       class="menu"
+      :mode="mode"
       :collapse="collapse"
       :uniqueOpened="true"
       :router="true"
@@ -66,6 +67,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    mode: {
+      type: String,
+      default: 'vertical',
+    },
   },
   setup() {
     const route = useRoute()
@@ -130,9 +135,23 @@ export default defineComponent({
 .el-submenu__title i {
   color: $arrowColor;
 }
+
+// 水平菜单
+.el-menu--horizontal {
+  .el-menu-item,
+  .el-submenu .el-submenu__title {
+    height: $horizontalMenuHeight;
+    line-height: $horizontalMenuHeight;
+  }
+  .el-menu-item.is-active,
+  .el-submenu.is-active .el-submenu__title {
+    border: none;
+  }
+}
 </style>
 <style lang="scss" scoped>
 .scroll {
+  height: auto;
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;

src/layout/components/Sidebar/index.vue

@@ -25,7 +25,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:46:24
+ * @LastEditTime: 2021-07-23 09:36:42
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin

src/layout/components/Tagsbar/index.vue

@@ -13,7 +13,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:47:18
+ * @LastEditTime: 2021-07-23 14:39:22
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -21,7 +21,7 @@
  -->
 
 <template>
-  <div class="tags-container">
+  <div class="tags-container" :class="{ hide: !isTagsbarShow }">
     <el-scrollbar
       ref="scrollContainer"
       :vertical="false"
@@ -68,13 +68,16 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, inject, computed } from 'vue'
 import { useTags } from './hooks/useTags'
 import { useContextMenu } from './hooks/useContextMenu'
 
 export default defineComponent({
   name: 'Tagsbar',
   setup() {
+    const defaultSettings = inject('defaultSettings')
+    const isTagsbarShow = computed(() => defaultSettings.tagsbar.isShow)
+
     const tags = useTags()
     const contextMenu = useContextMenu(tags.tagList)
 
@@ -84,6 +87,7 @@ export default defineComponent({
     }
 
     return {
+      isTagsbarShow,
       onScroll,
       ...tags,
       ...contextMenu,
@@ -97,8 +101,10 @@ export default defineComponent({
   height: 32px;
   width: 100%;
   background: #fff;
-  border-bottom: 1px solid #eaeaea;
+  border-bottom: 1px solid #e0e4ef;
-
+  &.hide {
+    display: none;
+  }
   .scroll-container {
     white-space: nowrap;
     overflow: hidden;
@@ -128,8 +134,8 @@ export default defineComponent({
       margin-right: 15px;
     }
     &.active {
-      color: $mainColor;
+      color: #303133;
-      border-bottom: 2px solid $mainColor;
+      background: #f5f5f5;
     }
     .title {
       display: inline-block;
@@ -141,7 +147,7 @@ export default defineComponent({
     }
     .el-icon-close {
       color: #5c5c5c;
-      margin-left: 2px;
+      margin-left: 8px;
       width: 16px;
       height: 16px;
       vertical-align: 2px;

src/layout/components/Topbar/Breadcrumbs.vue

@@ -27,7 +27,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:47:34
+ * @LastEditTime: 2021-07-23 14:13:23
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -36,9 +36,9 @@
 
 <template>
   <el-breadcrumb
-    separator="/"
+    separator-class="el-icon-arrow-right"
     class="breadcrumb"
-    :class="{ mobile: device === 'mobile' }"
+    :class="{ mobile: device === 'mobile', show: isHorizontalMenu }"
   >
     <el-breadcrumb-item
       v-for="(item, index) in breadcrumbs"
@@ -51,7 +51,14 @@
   </el-breadcrumb>
 </template>
 <script>
-import { defineComponent, computed, ref, onBeforeMount, watch } from 'vue'
+import {
+  defineComponent,
+  computed,
+  ref,
+  onBeforeMount,
+  watch,
+  inject,
+} from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
@@ -63,6 +70,11 @@ export default defineComponent({
     const route = router.currentRoute // 这里不使用useRoute获取当前路由，否则下面watch监听路由的时候会有警告
     const breadcrumbs = ref([])
 
+    const defaultSettings = inject('defaultSettings')
+    const isHorizontalMenu = computed(
+      () => defaultSettings.menus.mode === 'horizontal'
+    )
+
     const getBreadcrumbs = route => {
       const home = [{ path: '/', meta: { title: '首页' } }]
       if (route.name === 'home') {
@@ -87,6 +99,7 @@ export default defineComponent({
     return {
       device,
       breadcrumbs,
+      isHorizontalMenu,
     }
   },
 })
@@ -113,5 +126,19 @@ export default defineComponent({
   &.mobile {
     display: none;
   }
+  &.show {
+    display: block;
+    margin: 0;
+    padding: 16px;
+    background: #f5f5f5;
+  }
+}
+</style>
+<style lang="scss">
+.el-breadcrumb__inner {
+  &.is-link,
+  a {
+    color: #5c5c5c;
+  }
 }
 </style>

src/layout/components/Topbar/index.vue

@@ -37,7 +37,7 @@
  * @version: 
  * @Date: 2021-04-21 09:18:32
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:47:46
+ * @LastEditTime: 2021-07-23 13:42:10
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -45,11 +45,15 @@
  -->
 
 <template>
-  <div class="header">
+  <div class="header" :class="{ 'no-border': isHorizontalMenu }">
     <div class="navigation">
-      <logo v-if="device === 'mobile'" class="mobile" />
+      <logo
-      <hamburger />
+        v-if="isShowLogo"
-      <breadcrumbs />
+        class="mobile"
+        :class="{ 'show-title': isHorizontalMenu }"
+      />
+      <hamburger v-if="isShowHamburger" />
+      <breadcrumbs v-if="isShowBreadcrumbs" />
     </div>
     <div class="action">
       <error-log />
@@ -58,7 +62,7 @@
   </div>
 </template>
 <script>
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, inject } from 'vue'
 import Logo from '@/layout/components/Sidebar/Logo.vue'
 import Hamburger from './Hamburger.vue'
 import Breadcrumbs from './Breadcrumbs.vue'
@@ -75,11 +79,31 @@ export default defineComponent({
     ErrorLog,
   },
   setup() {
+    const defaultSettings = inject('defaultSettings')
+
     const store = useStore()
     const device = computed(() => store.state.app.device)
 
+    const isHorizontalMenu = computed(
+      () => defaultSettings.menus.mode === 'horizontal'
+    )
+
+    const isShowLogo = computed(
+      () => isHorizontalMenu.value || device.value === 'mobile'
+    )
+
+    const isShowHamburger = computed(() => !isHorizontalMenu.value)
+
+    const isShowBreadcrumbs = computed(
+      () => defaultSettings.breadcrumbs.isShow && !isHorizontalMenu.value
+    )
+
     return {
       device,
+      isHorizontalMenu,
+      isShowLogo,
+      isShowHamburger,
+      isShowBreadcrumbs,
     }
   },
 })
@@ -87,9 +111,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 .header {
   height: 48px;
-  border-bottom: 1px solid #eaeaea;
+  border-bottom: 1px solid #e0e4ef;
   display: flex;
   justify-content: space-between;
+  &.no-border {
+    border: none;
+  }
   .navigation {
     display: flex;
     align-items: center;
@@ -110,4 +137,10 @@ export default defineComponent({
     display: none;
   }
 }
+.show-title {
+  ::v-deep(.title) {
+    display: block;
+    color: #333;
+  }
+}
 </style>

src/layout/index.vue

@@ -27,7 +27,7 @@
  * @version: 
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 12:46:00
+ * @LastEditTime: 2021-07-23 14:39:15
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -35,24 +35,28 @@
  -->
 
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :class="{ fluid: isFluid }">
-    <sidebar />
+    <sidebar v-if="!isHorizontalMenu" />
-    <div class="right">
+    <div class="right" :class="{ flex: isTopbarFixed }">
       <div class="top">
         <topbar />
+        <menus mode="horizontal" v-if="isHorizontalMenu" />
         <tagsbar />
+        <breadcrumbs v-if="isBreadcrumbsShow" />
       </div>
-      <div class="main">
+      <div class="main" :class="{ pt0: isBreadcrumbsShow }">
         <Content />
       </div>
     </div>
   </div>
 </template>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, computed, inject } from 'vue'
 import Sidebar from './components/Sidebar/index.vue'
 import Topbar from './components/Topbar/index.vue'
+import Menus from './components/Sidebar/Menus.vue'
 import Tagsbar from './components/Tagsbar/index.vue'
+import Breadcrumbs from './components/Topbar/Breadcrumbs.vue'
 import Content from './components/Content/index.vue'
 import { useResizeHandler } from './hooks/useResizeHandler'
 
@@ -61,11 +65,30 @@ export default defineComponent({
   components: {
     Sidebar,
     Topbar,
+    Menus,
     Tagsbar,
+    Breadcrumbs,
     Content,
   },
   setup() {
     useResizeHandler()
+
+    const defaultSettings = inject('defaultSettings')
+    const isFluid = computed(() => defaultSettings.layout.isFluid)
+    const isTopbarFixed = computed(() => defaultSettings.topbar.isFixed)
+    const isHorizontalMenu = computed(
+      () => defaultSettings.menus.mode === 'horizontal'
+    )
+    const isBreadcrumbsShow = computed(
+      () => isHorizontalMenu.value && defaultSettings.breadcrumbs.isShow
+    )
+
+    return {
+      isFluid,
+      isTopbarFixed,
+      isHorizontalMenu,
+      isBreadcrumbsShow,
+    }
   },
 })
 </script>
@@ -73,21 +96,32 @@ export default defineComponent({
 <style lang="scss" scoped>
 .wrapper {
   display: flex;
+  margin: 0 auto;
+  width: 1440px;
   height: 100%;
+  &.fluid {
+    width: 100%;
+  }
 
   .right {
     flex: 1;
-    overflow: hidden;
+    overflow: auto;
-    display: flex;
+    &.flex {
-    flex-direction: column;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
     .top {
       background: #fff;
     }
     .main {
       flex: 1;
-      background: #f0f2f5;
+      background: #f5f5f5;
       padding: 16px;
       overflow: auto;
+      &.pt0 {
+        padding-top: 0;
+      }
     }
   }
 }

src/main.js

@@ -27,7 +27,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-23 11:08:56
+ * @LastEditTime: 2021-07-22 18:04:34
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -58,6 +58,10 @@ import './permission'
 // 引入svg图标注册脚本
 import 'vite-plugin-svg-icons/register'
 
+// 引入全局设置
+import defaultSettings from './defaultSettings'
+app.provide('defaultSettings', defaultSettings)
+
 // 注册全局组件
 import * as Components from './global-components'
 Object.entries(Components).forEach(([key, component]) => {

src/views/test/index.vue

@@ -52,7 +52,6 @@ export default defineComponent({
         { label: '邮箱', prop: 'userEmail' },
         {
           label: '操作',
-          fixed: 'right',
           width: 180,
           align: 'center',
           tdSlot: 'operate', // 自定义单元格内容的插槽名称