fix: add menu sort

Author: buqiyuan

package.json

@@ -33,22 +33,22 @@
     "mockjs": "^1.1.0",
     "nprogress": "^1.0.0-1",
     "pinia": "2.0.9",
-    "qs": "^6.10.2",
+    "qs": "^6.10.3",
     "socket.io-client": "4.4.1",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.26",
-    "vue-i18n": "^9.2.0-beta.26",
+    "vue-i18n": "^9.2.0-beta.28",
     "vue-router": "^4.0.12",
-    "xlsx": "^0.17.4"
+    "xlsx": "^0.17.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^16.0.0",
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^17.0.8",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "@vue/cli-plugin-babel": "^5.0.0-rc.1",
     "@vue/cli-plugin-eslint": "^5.0.0-rc.1",
     "@vue/cli-plugin-router": "^5.0.0-rc.1",
@@ -64,7 +64,7 @@
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.3.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",

src/layout/menu/menu-item.vue

@@ -12,7 +12,7 @@
           <TitleI18n :title="props.menuInfo?.meta?.title" />
         </span>
       </template>
-      <template v-for="item in props.menuInfo?.children" :key="item.name">
+      <template v-for="item in menuChildren" :key="item.name">
         <!-- 递归生成菜单 -->
         <MyMenuItem :menuInfo="item" />
       </template>
@@ -34,7 +34,7 @@
 </script>
 
 <script setup lang="ts">
-  import { PropType } from 'vue';
+  import { type PropType, computed } from 'vue';
   import { Menu } from 'ant-design-vue';
   import type { RouteRecordRaw } from 'vue-router';
   import { IconFont } from '@/components/basic/iconfont';
@@ -45,6 +45,12 @@
       type: Object as PropType<RouteRecordRaw>,
     },
   });
+
+  const menuChildren = computed(() =>
+    [...(props.menuInfo?.children || [])].sort(
+      (a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0),
+    ),
+  );
 </script>
 
 <style scoped></style>

src/layout/menu/menu.vue

@@ -35,7 +35,10 @@
   const currentRoute = useRoute();
   const router = useRouter();
 
-  const menus = computed(() => userStore.menus);
+  const menus = computed(() =>
+    [...userStore.menus].sort((a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0)),
+  );
+  console.log('menus', menus.value);
 
   // 根据activeMenu获取指定的menu
   const getTargetMenuByActiveMenuName = (activeMenu: string) => {

src/router/generator-router.tsx

@@ -23,7 +23,7 @@ export function filterAsyncRoute(
   return routes
     .filter((item) => item.type !== 2 && item.isShow && item.parentId == parentRoute?.id)
     .map((item) => {
-      const { router, viewPath, name, icon, keepalive } = item;
+      const { router, viewPath, name, icon, orderNum, keepalive } = item;
       let fullPath = '';
       const pathPrefix = lastNamePath.slice(-1)[0] || '';
       if (isUrl(router)) {
@@ -47,6 +47,7 @@ export function filterAsyncRoute(
         // name: `${viewPath ? toHump(viewPath) : fullPath}-${item.id}`,
         name: fullPath,
         meta: {
+          orderNum,
           title: name,
           perms: [],
           icon: icon,

src/router/staticModules/error.ts

@@ -7,6 +7,11 @@ const moduleName = 'error';
 export const notFound: RouteRecordRaw = {
   path: '/:pathMatch(.*)*',
   name: 'NotFound',
+  meta: {
+    title: 'NotFound',
+    hideInMenu: true,
+    hideInTabs: true,
+  },
   redirect: '/error/404',
   component: () => import(/* webpackChunkName: "404" */ '@/views/error/404.vue'),
 };

src/store/modules/user.ts

@@ -79,7 +79,7 @@ export const useUserStore = defineStore({
         this.userInfo = userInfo;
         // 生成路由
         const generatorResult = generatorDynamicRouter(menus);
-        this.menus = generatorResult.menus;
+        this.menus = generatorResult.menus.filter((item) => !item.meta?.hideInMenu);
         wsStore.initSocket();
 
         return { menus, perms, userInfo };

types/vue-router.d.ts

@@ -1,5 +1,6 @@
 import { type PermissionType } from '@/core/permission/modules/types';
 import { type LocaleType } from '@/locales/config';
+import { type RouteMeta as VRouteMeta } from 'vue-router';
 
 declare global {
   type Title18n = {
@@ -8,7 +9,7 @@ declare global {
 }
 
 declare module 'vue-router' {
-  interface RouteMeta extends Record<string | number | symbol, unknown> {
+  interface RouteMeta extends VRouteMeta {
     /** 标题 */
     title: string | Title18n;
     /** 当前路由是否需要权限验证 */
@@ -35,6 +36,8 @@ declare module 'vue-router' {
     hideInTabs?: boolean;
     /** 设置当前路由高亮的菜单项，值为route fullPath或route name,一般用于详情页 */
     activeMenu?: string;
+    /** 菜单排序号 */
+    orderNum?: number;
     isLink?: boolean;
   }
 }