布局设置

src/assets/main.css

@@ -23,7 +23,7 @@ html, body, #app, .index-container {
     min-height: 400px;
 }
 /**
- * slide-fade 动画
+ * slide-fade动画
  */
 .slide-fade-enter-active {
     transition: all 0.3s ease-out;
@@ -38,3 +38,7 @@ html, body, #app, .index-container {
     transform: translateX(20px);
     opacity: 0;
 }
+
+.flex-grow {
+    flex-grow: 1;
+}

src/components/common-menu/index.vue

@@ -13,15 +13,18 @@ const props = defineProps({
 const menuItems = computed(() => {
   return filterMenus(props.menus)
 })
-const calcIcon = menuItem => {
+const calcWithIf = menuItem => {
   if (menuItem.iconIf) {
     menuItem.icon = menuItem.iconIf(menuItem)
   }
+  if (menuItem.labelIf) {
+    menuItem.label = menuItem.labelIf(menuItem)
+  }
   return menuItem.icon
 }
 const filterMenus = menus => menus.filter(menu => !menu.disabled)
   .map(menu => {
-    menu.icon = calcIcon(menu)
+    calcWithIf(menu)
     if (menu.children && menu.children.length) {
       menu.children = filterMenus(menu.children)
     }
@@ -36,10 +39,17 @@ const filterMenus = menus => menus.filter(menu => !menu.disabled)
     :collapse="collapse"
   >
     <template v-for="(menuItem, index) in menuItems">
-      <el-sub-menu
+      <div
-        v-if="menuItem.children && menuItem.children.length"
+        v-if="menuItem.isSplit"
         :key="menuItem.index||index"
-        :index="menuItem.index"
+        :class="menuItem.splitCls"
+      >
+        {{ menuItem.splitText }}
+      </div>
+      <el-sub-menu
+        v-else-if="menuItem.children && menuItem.children.length"
+        :key="menuItem.index||index"
+        :index="`${menuItem.index||index}`"
         v-bind="menuItem.attrs"
       >
         <template #title>

src/layout/LeftMenu.vue

@@ -1,65 +1,18 @@
 <script setup>
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { useBusinessMenus } from '@/services/GlobalService'
 const globalConfigStore = useGlobalConfigStore()
+const businessMenus = useBusinessMenus()
 </script>
 
 <template>
   <el-scrollbar>
-    <el-menu
+    <common-menu
       class="el-menu-left"
       :collapse="globalConfigStore.isCollapseLeft"
+      :menus="businessMenus"
       :default-openeds="['1']"
-    >
+    />
-      <el-menu-item
-        index="0"
-        route="/"
-      >
-        <span>Simple Element Plus</span>
-        <div v-if="globalConfigStore.isCollapseLeft">
-          SEP
-        </div>
-      </el-menu-item>
-      <el-sub-menu index="1">
-        <template #title>
-          <el-icon><setting /></el-icon>
-          <span>{{ $t('menu.label.systemManagement') }}</span>
-        </template>
-        <el-menu-item index="1-1">
-          <el-icon><user /></el-icon>
-          <span>{{ $t('menu.label.userManagement') }}</span>
-        </el-menu-item>
-        <el-menu-item index="1-2">
-          <el-icon><Menu /></el-icon>
-          <span>{{ $t('menu.label.roleManagement') }}</span>
-        </el-menu-item>
-        <el-menu-item index="1-3">
-          <el-icon><lock /></el-icon>
-          <span>{{ $t('menu.label.authorityManagement') }}</span>
-        </el-menu-item>
-        <el-menu-item index="1-4">
-          <el-icon><Menu /></el-icon>
-          <span>{{ $t('menu.label.menuManagement') }}</span>
-        </el-menu-item>
-      </el-sub-menu>
-      <el-sub-menu index="2">
-        <template #title>
-          <el-icon><WarningFilled /></el-icon>
-          <span>{{ $t('menu.label.errorPage') }}</span>
-        </template>
-        <el-menu-item index="2-1">
-          <el-icon><Warning /></el-icon>
-          <span>{{ $t('menu.label.errorPage404') }}</span>
-        </el-menu-item>
-        <el-menu-item index="2-2">
-          <el-icon><Warning /></el-icon>
-          <span>{{ $t('menu.label.errorPage403') }}</span>
-        </el-menu-item>
-        <el-menu-item index="2-3">
-          <el-icon><Warning /></el-icon>
-          <span>{{ $t('menu.label.errorPage500') }}</span>
-        </el-menu-item>
-      </el-sub-menu>
-    </el-menu>
   </el-scrollbar>
 </template>
 

src/layout/TopNav.vue

@@ -1,14 +1,26 @@
 <script setup>
-import { useBaseTopMenus } from '@/services/GlobalService'
+import { useBaseTopMenus, useBusinessMenus } from '@/services/GlobalService'
-
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { GlobalLayoutMode } from '@/consts/GlobalConstants'
+import { computed } from 'vue'
+const globalConfigStore = useGlobalConfigStore()
 const topMenus = useBaseTopMenus()
+const businessMenus = useBusinessMenus()
+
+const allMenus = computed(() => {
+  if (globalConfigStore.layoutMode === GlobalLayoutMode.TOP) {
+    return [...businessMenus.value, ...topMenus.value.slice(1)]
+  }
+  return topMenus.value
+})
 
 </script>
 <template>
   <common-menu
     router
     mode="horizontal"
-    :menus="topMenus"
+    :ellipsis="false"
+    :menus="allMenus"
   />
 </template>
 

src/messages/messages_cn.js

@@ -7,6 +7,9 @@ export default {
       langEn: 'English',
       language: '语言',
       theme: '主题',
+      layout: '布局',
+      layoutLeft: '左侧菜单',
+      layoutTop: '顶部菜单',
       themeDefault: '默认',
       themeDark: '黑色',
       personalCenter: '个人中心',

src/messages/messages_en.js

@@ -7,6 +7,9 @@ export default {
       langEn: 'English',
       language: 'Language',
       theme: 'Themes',
+      layout: 'Layout',
+      layoutLeft: 'Left Menus',
+      layoutTop: 'Top Menus',
       themeDefault: 'default',
       themeDark: 'dark',
       personalCenter: 'Personal Center',

src/services/GlobalService/index.js

@@ -1,4 +1,4 @@
-import { GlobalLocales } from '@/consts/GlobalConstants'
+import { GlobalLayoutMode, GlobalLocales } from '@/consts/GlobalConstants'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { ref } from 'vue'
 
@@ -7,7 +7,12 @@ export const useBaseTopMenus = () => {
   return ref([
     {
       iconIf: () => globalConfigStore.isCollapseLeft ? 'expand' : 'fold',
-      click: globalConfigStore.collapseLeft
+      click: globalConfigStore.collapseLeft,
+      disabled: globalConfigStore.layoutMode !== GlobalLayoutMode.LEFT
+    },
+    {
+      isSplit: true,
+      splitCls: 'flex-grow'
     },
     {
       labelKey: 'common.label.language',
@@ -42,7 +47,23 @@ export const useBaseTopMenus = () => {
       ]
     },
     {
-      labelKey: 'common.label.personalCenter',
+      labelKey: 'common.label.layout',
+      index: 'layout',
+      children: [
+        {
+          iconIf: () => globalConfigStore.layoutMode === GlobalLayoutMode.LEFT ? 'check' : '',
+          labelKey: 'common.label.layoutLeft',
+          click: () => globalConfigStore.changeLayout(GlobalLayoutMode.LEFT)
+        },
+        {
+          iconIf: () => globalConfigStore.layoutMode === GlobalLayoutMode.TOP ? 'check' : '',
+          labelKey: 'common.label.layoutTop',
+          click: () => globalConfigStore.changeLayout(GlobalLayoutMode.TOP)
+        }
+      ]
+    },
+    {
+      icon: 'user',
       index: 'personal',
       children: [
         {
@@ -61,3 +82,52 @@ export const useBaseTopMenus = () => {
     }
   ])
 }
+
+export const useBusinessMenus = () => {
+  const globalConfigStore = useGlobalConfigStore()
+  return ref([
+    {
+      labelIf: () => globalConfigStore.layoutMode === GlobalLayoutMode.LEFT && globalConfigStore.isCollapseLeft ? 'SEP' : 'Simple Element Plus'
+    },
+    {
+      icon: 'setting',
+      labelKey: 'menu.label.systemManagement',
+      children: [
+        {
+          icon: 'user',
+          labelKey: 'menu.label.userManagement'
+        },
+        {
+          icon: 'menu',
+          labelKey: 'menu.label.roleManagement'
+        },
+        {
+          icon: 'lock',
+          labelKey: 'menu.label.authorityManagement'
+        },
+        {
+          icon: 'menu',
+          labelKey: 'menu.label.menuManagement'
+        }
+      ]
+    },
+    {
+      icon: 'WarningFilled',
+      labelKey: 'menu.label.errorPage',
+      children: [
+        {
+          index: '/not-found',
+          icon: 'Warning',
+          labelKey: 'menu.label.errorPage404'
+        },
+        {
+          icon: 'Warning',
+          labelKey: 'menu.label.errorPage403'
+        },
+        {
+          icon: 'Warning',
+          labelKey: 'menu.label.errorPage500'
+        }
+      ]
+    }])
+}

src/views/HomeView.vue

@@ -1,11 +1,19 @@
 <script setup>
 import LeftMenu from '@/layout/LeftMenu.vue'
 import TopNav from '@/layout/TopNav.vue'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { GlobalLayoutMode } from '@/consts/GlobalConstants'
+import { computed } from 'vue'
+const globalConfigStore = useGlobalConfigStore()
+const showLeftMenu = computed(() => {
+  return globalConfigStore.layoutMode === GlobalLayoutMode.LEFT
+})
 </script>
 
 <template>
   <el-container class="index-container">
     <el-aside
+      v-if="showLeftMenu"
       class="index-aside"
       width="auto"
     >