增加路由和material图标

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@vicons/material": "^0.12.0",
         "@vueuse/core": "^10.7.0",
         "dayjs": "^1.11.10",
         "element-plus": "^2.4.4",
@@ -320,6 +321,17 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.10.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz",
+      "integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -331,6 +343,11 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@vicons/material": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/material/-/material-0.12.0.tgz",
+      "integrity": "sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.2.tgz",
@@ -1751,6 +1768,20 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3271,6 +3302,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@vicons/material": "^0.12.0",
     "@vueuse/core": "^10.7.0",
     "dayjs": "^1.11.10",
     "element-plus": "^2.4.4",

src/assets/main.css

@@ -22,6 +22,28 @@ html, body, #app, .index-container {
     width: 250px;
     min-height: 400px;
 }
+
+.padding-left1 {
+    padding-left: 5px;
+}
+.padding-left2 {
+    padding-left: 10px;
+}
+.padding-right1 {
+    padding-right: 5px;
+}
+.padding-right2 {
+    padding-right: 10px;
+}
+.text-center {
+    text-align: center;
+}
+.text-left {
+    text-align: left;
+}
+.text-right {
+    text-align: right;
+}
 /**
  * slide-fade动画
  */

src/components/common-icon/index.vue

@@ -8,7 +8,10 @@ defineProps({
 </script>
 
 <template>
-  <el-icon v-if="icon">
+  <el-icon
+    v-if="icon"
+    v-bind="$attrs"
+  >
     <component
       :is="icon"
     />

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

@@ -1,5 +1,7 @@
 <script setup>
-defineProps({
+import { computed } from 'vue'
+
+const props = defineProps({
   menuItem: {
     type: Object,
     required: true
@@ -9,25 +11,41 @@ defineProps({
     required: false
   }
 })
+const isSubMenu = computed(() => {
+  const menuItem = props.menuItem
+  return !menuItem.isDropdown && menuItem.children && menuItem.children.length
+})
+const isDropdown = computed(() => {
+  const menuItem = props.menuItem
+  return menuItem.isDropdown && menuItem.children && menuItem.children.length
+})
+const menuCls = computed(() => {
+  const menuItem = props.menuItem
+  if (!menuItem.menuCls && menuItem.isDropdown) {
+    return 'padding-left1 padding-right1'
+  }
+  return menuItem.menuCls
+})
 </script>
 
 <template>
   <div
     v-if="menuItem.isSplit"
     :key="menuItem.index||index"
-    :class="menuItem.menuCls"
+    :class="menuCls"
   >
     {{ menuItem.splitText }}
   </div>
   <el-sub-menu
-    v-else-if="menuItem.children && menuItem.children.length"
+    v-else-if="isSubMenu"
     :key="menuItem.index||index"
     :index="`${menuItem.index||index}`"
-    :class="menuItem.menuCls"
+    :class="menuCls"
     v-bind="menuItem.attrs"
   >
     <template #title>
       <common-icon
+        :size="menuItem.iconSize"
         :icon="menuItem.icon"
       />
       <span v-if="menuItem.labelKey||menuItem.label">
@@ -45,15 +63,48 @@ defineProps({
       :menu-item="childMenu"
     />
   </el-sub-menu>
+  <el-menu-item
+    v-else-if="isDropdown"
+    :key="menuItem.index||index"
+    :class="menuCls"
+  >
+    <el-dropdown>
+      <span class="el-dropdown-link">
+        <common-icon
+          :size="menuItem.iconSize"
+          :icon="menuItem.icon"
+        />
+        <span v-if="menuItem.labelKey||menuItem.label">
+          {{ menuItem.labelKey?$t(menuItem.labelKey):menuItem.label }}
+        </span>
+      </span>
+      <template #dropdown>
+        <el-dropdown-item
+          v-for="(childMenu, childIdx) in menuItem.children"
+          :key="childMenu.index||childIdx"
+          @click="childMenu.click&&childMenu.click()"
+        >
+          <common-icon
+            :size="childMenu.iconSize"
+            :icon="childMenu.icon"
+          />
+          <span v-if="childMenu.labelKey||childMenu.label">
+            {{ childMenu.labelKey?$t(childMenu.labelKey):childMenu.label }}
+          </span>
+        </el-dropdown-item>
+      </template>
+    </el-dropdown>
+  </el-menu-item>
   <el-menu-item
     v-else
-    :class="menuItem.menuCls"
+    :class="menuCls"
     :route="menuItem.route"
     v-bind="menuItem.attrs"
     :index="menuItem.index"
     @click="menuItem.click&&menuItem.click()"
   >
     <common-icon
+      :size="menuItem.iconSize"
       :icon="menuItem.icon"
     />
     <template #title>

src/components/common-menu/index.vue

@@ -1,34 +1,16 @@
 <script setup>
 import { computed } from 'vue'
+import { filterMenus } from '@/components/utils'
 
 const props = defineProps({
   menus: {
     type: Array,
     required: true
-  },
-  collapse: {
-    type: Boolean
   }
 })
 const menuItems = computed(() => {
   return filterMenus(props.menus)
 })
-const calcWithIf = menuItem => {
-  ['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 => {
-    calcWithIf(menu)
-    if (menu.children && menu.children.length) {
-      menu.children = filterMenus(menu.children)
-    }
-    return menu
-  })
 </script>
 
 <template>
@@ -36,8 +18,8 @@ const filterMenus = menus => menus.filter(menu => !menu.disabled)
     v-bind="$attrs"
     :default-active="$route.path"
     router
-    :collapse="collapse"
   >
+    <slot name="before" />
     <template
       v-for="(menuItem, index) in menuItems"
       :key="index"
@@ -47,6 +29,7 @@ const filterMenus = menus => menus.filter(menu => !menu.disabled)
         :index="index"
       />
     </template>
+    <slot name="default" />
   </el-menu>
 </template>
 

src/components/utils/index.js

@@ -0,0 +1,16 @@
+const calcWithIf = menuItem => {
+  ['icon', 'labelKey', 'label', 'html'].forEach(key => {
+    const keyIf = menuItem[`${key}If`]
+    if (keyIf) {
+      menuItem[key] = keyIf(menuItem)
+    }
+  })
+}
+export const filterMenus = menus => menus.filter(menu => !menu.disabled)
+  .map(menu => {
+    calcWithIf(menu)
+    if (menu.children && menu.children.length) {
+      menu.children = filterMenus(menu.children)
+    }
+    return menu
+  })

src/icons/index.js

@@ -1,8 +1,12 @@
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import * as MaterialIconsVue from '@vicons/material'
 export default {
   install (app) {
     for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       app.component(key, component)
     }
+    for (const [key, component] of Object.entries(MaterialIconsVue)) {
+      app.component(key, component)
+    }
   }
 }

src/route/AdminRoutes.js

@@ -0,0 +1,19 @@
+const BASE_PATH = '/admin'
+
+export default [{
+  path: `${BASE_PATH}/users`,
+  name: 'Users',
+  component: () => import('@/views/admin/Users.vue')
+}, {
+  path: `${BASE_PATH}/roles`,
+  name: 'Roles',
+  component: () => import('@/views/admin/Roles.vue')
+}, {
+  path: `${BASE_PATH}/authority`,
+  name: 'Authority',
+  component: () => import('@/views/admin/Authority.vue')
+}, {
+  path: `${BASE_PATH}/menus`,
+  name: 'Menus',
+  component: () => import('@/views/admin/Menus.vue')
+}]

src/route/routes.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
+import AdminRoutes from '@/route/AdminRoutes'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -15,16 +16,17 @@ const router = createRouter({
       }, {
         path: 'personal',
         name: 'personal',
-        component: () => import('@/views/PersonalInfo.vue')
+        component: () => import('@/views/account/PersonalInfo.vue')
       },
       {
         path: '/:pathMatch(.*)*',
         name: 'notFound',
         component: () => import('@/views/404.vue')
-      }]
+      },
+      ...AdminRoutes
+      ]
     }
-  ],
+  ]
-  scrollBehavior: () => ({ left: 0, top: 0 })
 })
 
 export default router

src/services/global/GlobalService.js

@@ -15,8 +15,9 @@ export const useBaseTopMenus = () => {
       menuCls: 'flex-grow'
     },
     {
-      labelKey: 'common.label.language',
+      icon: 'LanguageFilled',
       index: 'language',
+      isDropdown: true,
       children: [
         {
           iconIf: () => GlobalLocales.CN === globalConfigStore.currentLocale ? 'check' : '',
@@ -31,24 +32,15 @@ export const useBaseTopMenus = () => {
       ]
     },
     {
-      labelKey: 'common.label.theme',
       index: 'theme',
-      children: [
+      isDropdown: true,
-        {
+      iconIf: () => !globalConfigStore.isDarkTheme ? 'moon' : 'sunny',
-          iconIf: () => !globalConfigStore.isDarkTheme ? 'check' : '',
+      click: () => globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
-          labelKey: 'common.label.themeDefault',
-          click: () => globalConfigStore.changeTheme(false)
     },
     {
-          iconIf: () => globalConfigStore.isDarkTheme ? 'check' : '',
+      icon: 'DisplaySettingsRound',
-          labelKey: 'common.label.themeDark',
-          click: () => globalConfigStore.changeTheme(true)
-        }
-      ]
-    },
-    {
-      labelKey: 'common.label.layout',
       index: 'layout',
+      isDropdown: true,
       children: [
         {
           iconIf: () => globalConfigStore.layoutMode === GlobalLayoutMode.LEFT ? 'check' : '',
@@ -65,6 +57,7 @@ export const useBaseTopMenus = () => {
     {
       icon: 'user',
       index: 'personal',
+      isDropdown: true,
       children: [
         {
           labelKey: 'common.label.personalInfo',
@@ -94,18 +87,22 @@ export const useBusinessMenus = () => {
       labelKey: 'menu.label.systemManagement',
       children: [
         {
+          index: '/admin/users',
           icon: 'user',
           labelKey: 'menu.label.userManagement'
         },
         {
+          index: '/admin/roles',
           icon: 'menu',
           labelKey: 'menu.label.roleManagement'
         },
         {
+          index: '/admin/authority',
           icon: 'lock',
           labelKey: 'menu.label.authorityManagement'
         },
         {
+          index: '/admin/menus',
           icon: 'menu',
           labelKey: 'menu.label.menuManagement'
         }

src/views/admin/Authority.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>
+      {{ $t('menu.label.authorityManagement') }}
+    </strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/admin/Menus.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>
+      {{ $t('menu.label.menuManagement') }}
+    </strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/admin/Roles.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>
+      {{ $t('menu.label.roleManagement') }}
+    </strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/admin/Users.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>
+      {{ $t('menu.label.userManagement') }}
+    </strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>