布局设置

2025-11-12 14:27:49 +00:00 · 2023-12-24 10:28:52 +08:00
parent bb40594f2a
commit 6e15f9e36c
8 changed files with 127 additions and 64 deletions
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -38,3 +38,7 @@ html, body, #app, .index-container {
    transform: translateX(20px);
    opacity: 0;
 }
+
+.flex-grow {
+    flex-grow: 1;
+}
--- a/src/components/common-menu/index.vue
+++ b/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
-        v-if="menuItem.children && menuItem.children.length"
+      <div
+        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>
--- a/src/layout/LeftMenu.vue
+++ b/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>

--- a/src/layout/TopNav.vue
+++ b/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>

--- a/src/messages/messages_cn.js
+++ b/src/messages/messages_cn.js
@@ -7,6 +7,9 @@ export default {
      langEn: 'English',
      language: '语言',
      theme: '主题',
+      layout: '布局',
+      layoutLeft: '左侧菜单',
+      layoutTop: '顶部菜单',
      themeDefault: '默认',
      themeDark: '黑色',
      personalCenter: '个人中心',
--- a/src/messages/messages_en.js
+++ b/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',
--- a/src/services/GlobalService/index.js
+++ b/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'
+        }
+      ]
+    }])
+}
--- a/src/views/HomeView.vue
+++ b/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"
    >