布局优化，目录结构优化

src/components/common-menu-item/index.vue

@@ -5,18 +5,26 @@ defineProps({
     required: true
   },
   index: {
-    type: String,
+    type: Number,
     required: false
   }
 })
 </script>
 
 <template>
-  <el-menu-item
-    :route="menuItem.route"
+  <div
+    v-if="menuItem.isSplit"
+    :key="menuItem.index||index"
+    :class="menuItem.menuCls"
+  >
+    {{ menuItem.splitText }}
+  </div>
+  <el-sub-menu
+    v-else-if="menuItem.children && menuItem.children.length"
+    :key="menuItem.index||index"
+    :index="`${menuItem.index||index}`"
+    :class="menuItem.menuCls"
     v-bind="menuItem.attrs"
-    :index="index"
-    @click="menuItem.click&&menuItem.click()"
   >
     <template #title>
       <common-icon
@@ -25,6 +33,37 @@ defineProps({
       <span v-if="menuItem.labelKey||menuItem.label">
         {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
       </span>
+      <div
+        v-if="menuItem.html"
+        v-html="menuItem.html"
+      />
+    </template>
+    <common-menu-item
+      v-for="(childMenu, childIdx) in menuItem.children"
+      :key="childMenu.index||childIdx"
+      :index="childIdx"
+      :menu-item="childMenu"
+    />
+  </el-sub-menu>
+  <el-menu-item
+    v-else
+    :class="menuItem.menuCls"
+    :route="menuItem.route"
+    v-bind="menuItem.attrs"
+    :index="menuItem.index"
+    @click="menuItem.click&&menuItem.click()"
+  >
+    <common-icon
+      :icon="menuItem.icon"
+    />
+    <template #title>
+      <span v-if="menuItem.labelKey||menuItem.label">
+        {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
+      </span>
+      <div
+        v-if="menuItem.html"
+        v-html="menuItem.html"
+      />
     </template>
   </el-menu-item>
 </template>

src/components/common-menu/index.vue

@@ -14,13 +14,12 @@ const menuItems = computed(() => {
   return filterMenus(props.menus)
 })
 const calcWithIf = menuItem => {
-  if (menuItem.iconIf) {
-    menuItem.icon = menuItem.iconIf(menuItem)
-  }
-  if (menuItem.labelIf) {
-    menuItem.label = menuItem.labelIf(menuItem)
-  }
-  return menuItem.icon
+  ['icon', 'labelKey', 'label', 'html'].forEach(key => {
+    const keyIf = menuItem[`${key}If`]
+    if (keyIf) {
+      menuItem[key] = keyIf(menuItem)
+    }
+  })
 }
 const filterMenus = menus => menus.filter(menu => !menu.disabled)
   .map(menu => {
@@ -35,43 +34,17 @@ const filterMenus = menus => menus.filter(menu => !menu.disabled)
 <template>
   <el-menu
     v-bind="$attrs"
+    :default-active="$route.path"
     router
     :collapse="collapse"
   >
-    <template v-for="(menuItem, index) in menuItems">
-      <div
-        v-if="menuItem.isSplit"
-        :key="menuItem.index||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>
-          <common-icon
-            :icon="menuItem.icon"
-          />
-          <span v-if="menuItem.labelKey||menuItem.label">
-            {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
-          </span>
-        </template>
-        <common-menu-item
-          v-for="(childMenu, childIdx) in menuItem.children"
-          :key="childMenu.index||childIdx"
-          :index="childMenu.index"
-          :menu-item="childMenu"
-        />
-      </el-sub-menu>
+    <template
+      v-for="(menuItem, index) in menuItems"
+      :key="index"
+    >
       <common-menu-item
-        v-else
-        :key="menuItem.index||index"
-        :index="menuItem.index"
         :menu-item="menuItem"
+        :index="index"
       />
     </template>
   </el-menu>

src/layout/LeftMenu.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
-import { useBusinessMenus } from '@/services/GlobalService'
+import { useBusinessMenus } from '@/services/global/GlobalService'
 const globalConfigStore = useGlobalConfigStore()
 const businessMenus = useBusinessMenus()
 </script>

src/layout/TopNav.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useBaseTopMenus, useBusinessMenus } from '@/services/GlobalService'
+import { useBaseTopMenus, useBusinessMenus } from '@/services/global/GlobalService'
 import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
 import { GlobalLayoutMode } from '@/consts/GlobalConstants'
 import { computed } from 'vue'

src/messages/base.js

@@ -0,0 +1,11 @@
+import cloneDeep from 'lodash/cloneDeep'
+
+const base = { // 预定义几种属性
+  label: {},
+  msg: {},
+  error: {}
+}
+
+export function baseMessages () {
+  return cloneDeep(base)
+}

src/messages/common_cn.js

@@ -0,0 +1,18 @@
+import { baseMessages } from '@/messages/base'
+export const common = baseMessages()
+
+common.label.login = '登录'
+common.label.index = '首页'
+common.label.langCn = '中文'
+common.label.langEn = 'English'
+common.label.language = '语言'
+common.label.theme = '主题'
+common.label.layout = '布局'
+common.label.layoutLeft = '左侧菜单'
+common.label.layoutTop = '顶部菜单'
+common.label.themeDefault = '默认'
+common.label.themeDark = '黑色'
+common.label.personalCenter = '个人中心'
+common.label.personalInfo = '个人资料'
+common.label.about = '关于'
+common.label.logout = '退出'

src/messages/common_en.js

@@ -0,0 +1,18 @@
+import { baseMessages } from '@/messages/base'
+export const common = baseMessages()
+
+common.label.login = 'Login'
+common.label.index = 'Home'
+common.label.langCn = '中文'
+common.label.langEn = 'English'
+common.label.language = 'Language'
+common.label.theme = 'Themes'
+common.label.layout = 'Layout'
+common.label.layoutLeft = 'Left Menus'
+common.label.layoutTop = 'Top Menus'
+common.label.themeDefault = 'default'
+common.label.themeDark = 'dark'
+common.label.personalCenter = 'Personal Center'
+common.label.personalInfo = 'Personal Info'
+common.label.about = 'About'
+common.label.logout = 'Logout'

src/messages/menu_cn.js

@@ -0,0 +1,12 @@
+import { baseMessages } from '@/messages/base'
+export const menu = baseMessages()
+
+menu.label.systemManagement = '系统管理'
+menu.label.userManagement = '用户管理'
+menu.label.roleManagement = '角色管理'
+menu.label.authorityManagement = '权限管理'
+menu.label.menuManagement = '菜单管理'
+menu.label.errorPage = '错误页面'
+menu.label.errorPage404 = '找不到页面'
+menu.label.errorPage403 = '没有权限'
+menu.label.errorPage500 = '服务器错误'

src/messages/menu_en.js

@@ -0,0 +1,12 @@
+import { baseMessages } from '@/messages/base'
+export const menu = baseMessages()
+
+menu.label.systemManagement = 'System Management'
+menu.label.userManagement = 'User Management'
+menu.label.roleManagement = 'Role Management'
+menu.label.authorityManagement = 'Authority Management'
+menu.label.menuManagement = 'Menu Management'
+menu.label.errorPage = 'Error Page'
+menu.label.errorPage404 = 'Not Found'
+menu.label.errorPage403 = 'Access Denied'
+menu.label.errorPage500 = 'Server Error'

src/messages/messages_cn.js

@@ -1,34 +1,7 @@
+import { common } from '@/messages/common_cn'
+import { menu } from '@/messages/menu_cn'
+
 export default {
-  common: { // 通用资源
-    label: {
-      login: '登录',
-      index: '首页',
-      langCn: '中文',
-      langEn: 'English',
-      language: '语言',
-      theme: '主题',
-      layout: '布局',
-      layoutLeft: '左侧菜单',
-      layoutTop: '顶部菜单',
-      themeDefault: '默认',
-      themeDark: '黑色',
-      personalCenter: '个人中心',
-      personalInfo: '个人资料',
-      about: '关于',
-      logout: '退出'
-    }
-  },
-  menu: {
-    label: {
-      systemManagement: '系统管理',
-      userManagement: '用户管理',
-      roleManagement: '角色管理',
-      authorityManagement: '权限管理',
-      menuManagement: '菜单管理',
-      errorPage: '错误页面',
-      errorPage404: '找不到页面',
-      errorPage403: '没有权限',
-      errorPage500: '服务器错误'
-    }
-  }
+  common,
+  menu
 }

src/messages/messages_en.js

@@ -1,34 +1,7 @@
+import { common } from '@/messages/common_en'
+import { menu } from '@/messages/menu_en'
+
 export default {
-  common: {
-    label: {
-      login: 'Login',
-      index: 'Home',
-      langCn: '中文',
-      langEn: 'English',
-      language: 'Language',
-      theme: 'Themes',
-      layout: 'Layout',
-      layoutLeft: 'Left Menus',
-      layoutTop: 'Top Menus',
-      themeDefault: 'default',
-      themeDark: 'dark',
-      personalCenter: 'Personal Center',
-      personalInfo: 'Personal Info',
-      about: 'About',
-      logout: 'Logout'
-    }
-  },
-  menu: {
-    label: {
-      systemManagement: 'System Management',
-      userManagement: 'User Management',
-      roleManagement: 'Role Management',
-      authorityManagement: 'Authority Management',
-      menuManagement: 'Menu Management',
-      errorPage: 'Error Page',
-      errorPage404: 'Not Found',
-      errorPage403: 'Access Denied',
-      errorPage500: 'Server Error'
-    }
-  }
+  common,
+  menu
 }

src/services/global/GlobalService.js

@@ -7,12 +7,11 @@ export const useBaseTopMenus = () => {
   return ref([
     {
       iconIf: () => globalConfigStore.isCollapseLeft ? 'expand' : 'fold',
-      click: globalConfigStore.collapseLeft,
-      disabled: globalConfigStore.layoutMode !== GlobalLayoutMode.LEFT
+      click: globalConfigStore.collapseLeft
     },
     {
       isSplit: true,
-      splitCls: 'flex-grow'
+      menuCls: 'flex-grow'
     },
     {
       labelKey: 'common.label.language',
@@ -84,10 +83,10 @@ export const useBaseTopMenus = () => {
 }
 
 export const useBusinessMenus = () => {
-  const globalConfigStore = useGlobalConfigStore()
   return ref([
     {
-      labelIf: () => globalConfigStore.layoutMode === GlobalLayoutMode.LEFT && globalConfigStore.isCollapseLeft ? 'SEP' : 'Simple Element Plus'
+      icon: 'HomeFilled',
+      label: 'Simple Element Plus'
     },
     {
       icon: 'setting',