feat：创建 基础数据和财务数据 路由页面

.vscode/settings.json

@@ -35,5 +35,6 @@
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["vue"],
-  "iconify.excludes": ["el"]
+  "iconify.excludes": ["el"],
+  "cSpell.words": ["auths"]
 }

locales/en.yaml

@@ -36,6 +36,8 @@ menus:
   gameData: Game Data
   clubData: Club Data
   searchClub: Search Club
+  financeData: "Finance Data"
+  diamondData: "Diamond Data"
   permission: Permission Manage
   permissionPage: Page Permission
   permissionButton: Button Permission

locales/zh-CN.yaml

@@ -36,6 +36,8 @@ menus:
   gameData: "牌局数据"
   clubData: "俱乐部数据"
   searchClub: "搜索俱乐部"
+  financeData: "财务数据"
+  diamondData: "钻石数据"
   permission: 权限管理
   permissionPage: 页面权限
   permissionButton: 按钮权限

mock/asyncRolesPath.ts

@@ -0,0 +1,30 @@
+// 模拟后端动态生成 有权限的路由路径
+import { MockMethod } from 'vite-plugin-mock'
+
+const permissionPath = {
+  page: [
+    '/permission',
+    '/permission/page/index',
+    '/permission/button/index',
+
+    // '/basic',
+    // '/basic/queryClub/index',
+    // '/basic/queryClub/queryClub',
+
+    '/finance',
+    '/finance/diamondData'
+  ],
+  btn: ['btn-edit', 'edit-create']
+}
+export default [
+  {
+    url: '/getAsyncPath',
+    method: 'get',
+    response: () => {
+      return {
+        success: true,
+        data: permissionPath
+      }
+    }
+  }
+] as MockMethod[]

mock/asyncRoutes.ts

@@ -1,5 +1,5 @@
 // 模拟后端动态生成路由
-import { MockMethod } from "vite-plugin-mock";
+import { MockMethod } from 'vite-plugin-mock'
 
 /**
  * roles：页面级别权限，这里模拟二种 "admin"、"common"
@@ -8,42 +8,95 @@ import { MockMethod } from "vite-plugin-mock";
  */
 
 const permissionRouter = {
-  path: "/permission",
+  path: '/permission',
   meta: {
-    title: "menus.permission",
+    title: 'menus.permission',
-    icon: "informationLine",
+    icon: 'informationLine',
-    rank: 10
+    rank: 99
   },
   children: [
     {
-      path: "/permission/page/index",
+      path: '/permission/page/index',
-      name: "PermissionPage",
+      name: 'PermissionPage',
       meta: {
-        title: "menus.permissionPage",
+        title: 'menus.permissionPage',
-        roles: ["admin", "common"]
+        roles: ['admin', 'common']
       }
     },
     {
-      path: "/permission/button/index",
+      path: '/permission/button/index',
-      name: "PermissionButton",
+      name: 'PermissionButton',
       meta: {
-        title: "menus.permissionButton",
+        title: 'menus.permissionButton',
-        roles: ["admin", "common"],
+        roles: ['admin', 'common'],
-        auths: ["btn_add", "btn_edit", "btn_delete"]
+        auths: ['btn_add', 'btn_edit', 'btn_delete']
       }
     }
   ]
-};
+}
+// const basic = {
+//   path: '/basic',
+//   redirect: '/basic/LiveData',
+//   meta: {
+//     title: 'menus.basicData',
+//     icon: 'lineChartLine',
+//     rank: 6
+//   },
+//   children: [
+//     {
+//       path: '/basic/LiveData',
+//       name: 'LiveData',
+//       meta: {
+//         title: 'menus.liveData'
+//       }
+//     },
+//     {
+//       path: '/basic/queryUser/index',
+//       name: 'UserData',
+//       meta: {
+//         title: 'menus.userData'
+//       }
+//     },
+//     {
+//       path: '/basic/queryUser/queryUser',
+//       name: 'QueryUser',
+//       meta: {
+//         title: 'menus.searchUser'
+//       }
+//     },
+//     {
+//       path: '/basic/GameData',
+//       name: 'GameData',
+//       meta: {
+//         title: 'menus.gameData'
+//       }
+//     },
+//     {
+//       path: '/basic/queryClub/index',
+//       name: 'ClubData',
+//       meta: {
+//         title: 'menus.clubData'
+//       }
+//     },
+//     {
+//       path: '/basic/queryClub/queryClub',
+//       name: 'QueryData',
+//       meta: {
+//         title: 'menus.searchClub'
+//       }
+//     }
+//   ]
+// }
 
 export default [
   {
-    url: "/getAsyncRoutes",
+    url: '/getAsyncRoutes',
-    method: "get",
+    method: 'get',
     response: () => {
       return {
         success: true,
         data: [permissionRouter]
-      };
+      }
     }
   }
-] as MockMethod[];
+] as MockMethod[]

src/api/routes.ts

@@ -8,3 +8,7 @@ type Result = {
 export const getAsyncRoutes = () => {
   return http.request<Result>('get', '/getAsyncRoutes')
 }
+
+export const getAsyncPath = () => {
+  return http.request<Result>('get', '/getAsyncPath')
+}

src/router/localRouter/financeData.ts

@@ -0,0 +1,19 @@
+export default {
+  path: '/finance',
+  redirect: '/finance/diamondData',
+  meta: {
+    title: 'menus.financeData',
+    icon: 'barChart2Line',
+    rank: 7
+  },
+  children: [
+    {
+      path: '/finance/diamondData',
+      name: 'DiamondData',
+      meta: {
+        title: 'menus.diamondData',
+        showParent: true
+      }
+    }
+  ]
+}

src/router/localRouter/index.ts

@@ -0,0 +1,18 @@
+// import basicData from './basicData'
+import financeData from './financeData'
+/** rank 排序， // 菜单排序，值越高排的越后（只针对顶级路由）
+ * home：0
+ * error：98
+ * permission： 89
+ * login：101
+ * logout：102
+ *
+ * basic：6
+ * finance: 7
+ */
+
+// TODO: 恢复baseData 为异步路由
+const basicData = []
+const localFullRouter = [basicData, financeData]
+
+export default localFullRouter

src/router/modules/basicData.ts

@@ -18,6 +18,15 @@ export default {
         roles: ['admin']
       }
     },
+    {
+      path: '/basic/liveData2',
+      name: 'LiveData2',
+      component: () => import('@/views/basicData/LiveData.vue'),
+      meta: {
+        title: '测试2',
+        roles: ['admin1']
+      }
+    },
     {
       path: '/basic/userData',
       name: 'UserData',

src/router/modules/error.ts

@@ -7,7 +7,7 @@ export default {
     icon: 'signalWifiErrorLine',
     title: $t('menus.hsabnormal'),
     // showLink: false,
-    rank: 9
+    rank: 98
   },
   children: [
     {

src/router/utils.ts

@@ -27,7 +27,10 @@ const IFrame = () => import('@/layout/frameView.vue')
 const modulesRoutes = import.meta.glob('/src/views/**/*.{vue,tsx}')
 
 // 动态路由
-import { getAsyncRoutes } from '@/api/routes'
+import { getAsyncRoutes, getAsyncPath } from '@/api/routes'
+
+// 本地fake的动态路由
+import localFullRouter from './localRouter'
 
 function handRank(routeInfo: any) {
   const { name, path, parentId, meta } = routeInfo
@@ -204,7 +207,14 @@ function initRouter() {
       })
     } else {
       return new Promise(resolve => {
-        getAsyncRoutes().then(({ data }) => {
+        getAsyncRoutes().then(async ({ data }) => {
+          console.log(2)
+          data = [...localFullRouter, ...data]
+          // TODO：拆分接口返回的 page 和 btn 权限
+          data = filterRoutes({
+            rolesArr: await getAsyncPath().page,
+            routes: data
+          })
           handleAsyncRoutes(cloneDeep(data))
           storageSession().setItem(key, data)
           resolve(router)
@@ -213,7 +223,12 @@ function initRouter() {
     }
   } else {
     return new Promise(resolve => {
-      getAsyncRoutes().then(({ data }) => {
+      getAsyncRoutes().then(async ({ data }) => {
+        console.log(3, data)
+        const roleArr = await getAsyncPath()
+        data = [...localFullRouter, ...data]
+        data = filterRoutes({ rolesArr: roleArr.data.page, routes: data })
+        console.log('data3', data)
         handleAsyncRoutes(cloneDeep(data))
         resolve(router)
       })
@@ -221,6 +236,21 @@ function initRouter() {
   }
 }
 
+function filterRoutes(params) {
+  const { routes, rolesArr } = params
+  console.log({ routes, rolesArr })
+  const res = []
+  routes.forEach(route => {
+    if (rolesArr.includes(route.path)) {
+      res.push(route)
+    }
+    if (route.children) {
+      route.children = filterRoutes({ routes: route.children, rolesArr })
+    }
+  })
+  return res
+}
+
 /**
  * 将多级嵌套路由处理成一维数组
  * @param routesList 传入路由

src/views/finance/diamondData.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: 'FinanceData'
+})
+</script>
+
+<template>
+  <div>
+    <h1>钻石数据</h1>
+  </div>
+</template>