refactor: router system

.env

@@ -6,3 +6,6 @@ VITE_APP_NAME=Nova - Admin
 VITE_ROUTE_MODE = web
 # 权限路由模式: static ｜ dynamic
 VITE_AUTH_ROUTE_MODE=dynamic
+
+# 设置登陆后跳转地址
+VITE_HOME_PATH = /dashboard/workbench

build/plugins.ts

@@ -55,14 +55,14 @@ export function createVitePlugins(env: ImportMetaEnv) {
     // auto use svg icon
     createSvgIconsPlugin({
       // 指定需要缓存的图标文件夹
-      iconDirs: [path.resolve(__dirname, 'src/assets/icons')],
+      iconDirs: [path.resolve(__dirname, '../src/assets/icons')],
       // 指定symbolId格式
       symbolId: 'icon-[dir]-[name]',
       // inject: 'body-last',
       // customDomId: '__svg__icons__dom__',
     }),
-  ]
 
+  ]
   // use compression
   if (env.VITE_COMPRESS_OPEN === 'Y') {
     const { VITE_COMPRESS_TYPE = 'gzip' } = env

package.json

@@ -58,6 +58,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
     "qs": "^6.12.0",
+    "radash": "^12.1.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src/components/custom/SvgIcon.vue

@@ -21,7 +21,7 @@ const symbolId = computed(() => `#${props.prefix}-${props.name}`)
     aria-hidden="true"
     :width="`${props.size}px`"
     :height="`${props.size}px`"
-    display="inline"
+    class="inline"
   >
     <use
       :xlink:href="symbolId"

src/hooks/useSystem.ts

@@ -1,5 +1,5 @@
+import { isArray, isString } from 'radash'
 import { useAuthStore } from '@/store'
-import { isArray, isString } from '@/utils'
 
 interface AppInfo {
   /** 项目名称 */

src/layouts/components/common/Watermark.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
   showWatermark: boolean
-  text: string
+  text?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   showWatermark: false,

src/layouts/components/header/Breadcrumb.vue

@@ -1,26 +1,48 @@
 <script setup lang="ts">
-import { useRouteStore } from '@/store'
-import { useAppRouter } from '@/hooks'
-
 const router = useRouter()
-const routeStore = useRouteStore()
+const route = useRoute()
-const { routerPush } = useAppRouter()
 const routes = computed(() => {
-  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string)
+  return route.matched
 })
 </script>
 
 <template>
-  <n-breadcrumb class="px-4">
+  <TransitionGroup name="list" tag="ul" style="display: flex; gap:1em;">
-    <n-breadcrumb-item
+    <n-el
-      v-for="(item, index) in routes"
+      v-for="(item) in routes"
-      :key="index"
+      :key="item.path"
-      @click="routerPush(item.path)"
+      tag="li" style="
+            color: var(--text-color-2);
+            transition: 0.3s var(--cubic-bezier-ease-in-out);
+          "
+      class="flex-center gap-2 cursor-pointer split"
+      @click="router.push(item.path)"
     >
       <e-icon :icon="item.meta.icon" />
       {{ item.meta.title }}
-    </n-breadcrumb-item>
+    </n-el>
-  </n-breadcrumb>
+  </TransitionGroup>
 </template>
 
-<style scoped></style>
+<style lang="scss">
+.split:not(:first-child)::before {
+   content: '/';
+   padding-right:0.6em;
+}
+
+.list-move,
+/* 对移动中的元素应用的过渡 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from,.list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.list-leave-active {
+  position: absolute;
+}
+</style>

src/layouts/components/sider/Logo.vue

@@ -18,7 +18,7 @@ const appStore = useAppStore()
     />
     <span
       v-show="!appStore.collapsed"
-      class="mx-4"
+      class="mx-3"
     >{{ name }}</span>
   </div>
 </template>

src/router/guard/dynamic.ts

@@ -1,7 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router'
+import { clone, construct, min } from 'radash'
 import { BasicLayout } from '@/layouts/index'
 import { useRouteStore } from '@/store'
 import { usePermission } from '@/hooks'
+import { arrayToTree } from '@/utils'
 
 // 引入所有页面
 const modules = import.meta.glob('../../views/**/*.vue')
@@ -10,70 +12,53 @@ const modules = import.meta.glob('../../views/**/*.vue')
 function setRedirect(routes: AppRoute.Route[]) {
   routes.forEach((route) => {
     if (route.children) {
-      const nonHiddenChild = route.children.find(child => !child.meta || !child.meta.hide)
+      if (!route.redirect) {
-      if (nonHiddenChild)
+        // 过滤出没有隐藏的子元素集
-        route.redirect = nonHiddenChild.path
+        const visibleChilds = route.children.filter(child => !child.meta.hide)
+
+        // 过滤出含有order属性的页面
+        const orderChilds = visibleChilds.filter(child => child.meta.order)
+
+        // 重定向页默认第一个子元素的路径
+        let target = route.children[0]
+        if (orderChilds.length > 0)
+          // 有order则取最小者重定向
+          target = min(orderChilds, i => i.meta.order as number) as AppRoute.Route
+
+        route.redirect = target.path
+      }
 
       setRedirect(route.children)
     }
   })
 }
-/* 路由树转换成一维数组 */
+export function createDynamicRoutes(routes: AppRoute.RowRoute[]) {
-function FlatAuthRoutes(routes: AppRoute.Route[]) {
-  let result: AppRoute.Route[] = []
-  routes.forEach((item: AppRoute.Route) => {
-    if (item.children) {
-      const temp = item.children || []
-      delete item.children
-      result.push(item)
-      result = [...result, ...FlatAuthRoutes(temp)]
-    }
-    else {
-      result.push(item)
-    }
-  })
-  return result
-}
-/* 路由无权限过滤 */
-function filterPermissionRoutes(routes: AppRoute.Route[]) {
   const { hasPermission } = usePermission()
-  return routes.filter((route) => {
+  // 结构化meta字段
-    return hasPermission(route.meta.roles)
+  let resultRouter = clone(routes).map(i => construct(i)) as AppRoute.Route[]
-  })
+  // 路由权限过滤
-}
+  resultRouter = resultRouter.filter(i => hasPermission(i.meta.roles))
 
-function createCatheRoutes(routes: AppRoute.Route[]) {
+  // 生成需要keepAlive的路由name数组
-  return routes
-    .filter((item) => {
-      return item.meta.keepAlive
-    })
-    .map(item => item.name)
-}
-export function createDynamicRoutes(routes: AppRoute.Route[]) {
-  /* 复制一层 */
-  let resultRouter = JSON.parse(JSON.stringify(routes))
-  /* 设置路由重定向到子级第一个 */
-  setRedirect(resultRouter)
-  // 数组降维成一维数组,然后删除所有的childen
-  resultRouter = FlatAuthRoutes(resultRouter)
-  /* 路由权限过滤 */
-  resultRouter = filterPermissionRoutes(resultRouter)
-  // 过滤需要缓存的路由name数组
   const routeStore = useRouteStore()
-  routeStore.cacheRoutes = createCatheRoutes(resultRouter)
+  routeStore.cacheRoutes = resultRouter.filter((i) => {
+    return i.meta.keepAlive
+  })
+    .map(i => i.name)
+
   // 生成路由，有redirect的不需要引入文件
   resultRouter = resultRouter.map((item: any) => {
-    if (!item.redirect) {
+    if (item.componentPath && !item.redirect)
-      // 动态加载对应页面
+      item.component = modules[`../../views${item.componentPath}`]
-      item.component = modules[`../../views${item.path}/index.vue`]
-    }
     return item
   })
 
+  resultRouter = arrayToTree(resultRouter) as AppRoute.Route[]
+  setRedirect(resultRouter)
   const appRootRoute: RouteRecordRaw = {
     path: '/appRoot',
     name: 'appRoot',
-    redirect: '/dashboard/workbench',
+    redirect: import.meta.env.VITE_HOME_PATH,
     component: BasicLayout,
     meta: {
       title: '首页',

src/router/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import { setupRouterGuard } from '@/router/guard'
+import { routes } from './routes'
-import { routes } from '@/router/routes'
+import { setupRouterGuard } from './guard'
 
 const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env
 export const router = createRouter({

src/router/modules/dashboard.ts

@@ -1,30 +0,0 @@
-export const dashboard = {
-  name: 'dashboard',
-  path: '/dashboard',
-  redirect: '/dashboard/workbench',
-  meta: {
-    title: '分析页-static',
-    requiresAuth: true,
-    icon: 'icon-park-outline:analysis',
-  },
-  children: [
-    {
-      name: 'dashboard_workbench',
-      path: '/dashboard/workbench',
-      meta: {
-        title: '工作台',
-        requiresAuth: true,
-        icon: 'icon-park-outline:alarm',
-      },
-    },
-    {
-      name: 'dashboard_monitor',
-      path: '/dashboard/monitor',
-      meta: {
-        title: '监控页',
-        requiresAuth: true,
-        icon: 'icon-park-outline:anchor',
-      },
-    },
-  ],
-}

src/router/modules/index.ts

@@ -1,4 +0,0 @@
-import { dashboard } from './dashboard'
-import { test } from './test'
-
-export const staticRoutes = [dashboard, test]

src/router/modules/test.ts

@@ -1,63 +0,0 @@
-export const test = {
-  name: 'test',
-  path: '/test',
-  redirect: '/test/test1',
-  meta: {
-    title: '测试专题',
-    requiresAuth: true,
-    icon: 'icon-park-outline:ambulance',
-  },
-  children: [
-    {
-      name: 'test1',
-      path: '/test/test1',
-      meta: {
-        title: '测试专题1',
-        requiresAuth: true,
-        icon: 'icon-park-outline:alarm',
-      },
-    },
-    {
-      name: 'test2',
-      path: '/test/test2',
-      meta: {
-        title: '测试专题2',
-        requiresAuth: true,
-        icon: 'icon-park-outline:pic',
-      },
-      children: [
-        {
-          name: 'test2_detail',
-          path: '/test/test2/detail',
-          meta: {
-            title: '测试专题2的详情页',
-            requiresAuth: true,
-            icon: 'icon-park-outline:tool',
-            hide: true,
-            activeMenu: '/test/test2',
-          },
-        },
-      ],
-    },
-    {
-      name: 'test3',
-      path: '/test/test3',
-      meta: {
-        title: '测试专题3',
-        requiresAuth: true,
-        icon: 'icon-park-outline:tool',
-      },
-      children: [
-        {
-          name: 'test4',
-          path: '/test/test3/test4',
-          meta: {
-            title: '测试专题4',
-            requiresAuth: true,
-            icon: 'icon-park-outline:tool',
-          },
-        },
-      ],
-    },
-  ],
-}

src/router/routes/index.ts

@@ -1,5 +1,4 @@
 import type { RouteRecordRaw } from 'vue-router'
-import { BasicLayout } from '@/layouts/index'
 
 /* 页面中的一些固定路由，错误页等 */
 export const routes: RouteRecordRaw[] = [
@@ -7,7 +6,7 @@ export const routes: RouteRecordRaw[] = [
     path: '/',
     name: 'root',
     redirect: '/appRoot',
-    component: BasicLayout,
+    component: () => import('@/layouts/index'),
     children: [
     ],
   },
@@ -48,7 +47,12 @@ export const routes: RouteRecordRaw[] = [
   },
   {
     path: '/:pathMatch(.*)*',
-    redirect: '/404',
+    component: () => import('@/views/error/404/index.vue'),
+    name: '404',
+    meta: {
+      title: '找不到页面',
+      icon: 'icon-park-outline:ghost',
+    },
   },
 
 ]

src/router/staticRoutes.ts

@@ -0,0 +1,140 @@
+export const staticRoutes: AppRoute.RowRoute[] = [
+  {
+    'id': 1,
+    'pid': 0,
+    'name': 'dashboard',
+    'path': '/dashboard',
+    'componentPath': null,
+    'redirect': '/dashboard/workbench',
+    'meta.title': '分析页',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:analysis',
+  },
+  {
+    'id': 2,
+    'pid': 1,
+    'name': 'dashboard_workbench',
+    'path': '/dashboard/workbench',
+    'componentPath': '/dashboard/workbench/index.vue',
+    'meta.title': '工作台',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:alarm',
+  },
+  {
+    'id': 3,
+    'pid': 1,
+    'name': 'dashboard_monitor',
+    'path': '/dashboard/monitor',
+    'componentPath': '/dashboard/monitor/index.vue',
+    'meta.title': '监控页',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:anchor',
+  },
+  {
+    'id': 4,
+    'pid': 0,
+    'name': 'test',
+    'path': '/test',
+    'componentPath': null,
+    'redirect': '/test/test1',
+    'meta.title': '测试专题',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:ambulance',
+  },
+  {
+    'id': 5,
+    'pid': 4,
+    'name': 'test1',
+    'path': '/test/test1',
+    'componentPath': '/test/test1/index.vue',
+    'meta.title': '测试专题1',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:alarm',
+  },
+  {
+    'id': 6,
+    'pid': 4,
+    'name': 'test2',
+    'path': '/test/test2',
+    'componentPath': '/test/test2/index.vue',
+    'meta.title': '测试专题2',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:pic',
+  },
+  {
+    'id': 7,
+    'pid': 6,
+    'name': 'test2_detail',
+    'path': '/test/test2/detail',
+    'componentPath': '/test/test2/detail/index.vue',
+    'meta.title': '测试专题2的详情页',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:tool',
+    'meta.hide': true,
+    'meta.activeMenu': '/test/test2',
+  },
+  {
+    'id': 8,
+    'pid': 4,
+    'name': 'test3',
+    'path': '/test/test3',
+    'componentPath': null,
+    'meta.title': '测试专题3',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:tool',
+  },
+  {
+    'id': 9,
+    'pid': 8,
+    'name': 'test4',
+    'path': '/test/test3/test4',
+    'componentPath': '/test/test3/test4/index.vue',
+    'meta.title': '测试专题4',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:tool',
+  },
+  {
+    'id': 10,
+    'pid': 0,
+    'name': 'permission',
+    'path': '/permission',
+    'componentPath': null,
+    'meta.title': '权限示例',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:people-safe',
+  },
+  {
+    'id': 11,
+    'pid': 10,
+    'name': 'permission_permission',
+    'path': '/permission/permission',
+    'componentPath': '/permission/permission/index.vue',
+    'meta.title': '权限示例',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:right-user',
+  },
+  {
+    'id': 12,
+    'pid': 10,
+    'name': 'permission_justSuper',
+    'path': '/permission/justSuper',
+    'componentPath': '/permission/justSuper/index.vue',
+    'meta.title': '超管super可见',
+    'meta.requiresAuth': true,
+    'meta.icon': 'icon-park-outline:wrong-user',
+    'meta.roles': [
+      'super',
+    ],
+  },
+  {
+    'id': 13,
+    'pid': 0,
+    'name': 'PluginMap',
+    'path': '/plugin/map',
+    'componentPath': '/plugin/map/index.vue',
+    'meta.title': '地图',
+    'meta.requiresAuth': true,
+    'meta.icon': 'carbon:map',
+    'meta.keepAlive': true,
+  },
+]

src/service/api/login.ts

@@ -23,5 +23,5 @@ export function fetchUserInfo(params: any) {
   return alovaInstance.Get<Auth.UserInfo>('/getUserInfo', { params })
 }
 export function fetchUserRoutes(params: { id: number }) {
-  return alovaInstance.Get<AppRoute.Route[]>('/getUserRoutes', { params })
+  return alovaInstance.Get<AppRoute.RowRoute[]>('/getUserRoutes', { params })
 }

src/store/index.ts

@@ -7,7 +7,6 @@ export * from './route'
 export * from './tab'
 
 // 安装pinia全局状态库
-
 export function installPinia(app: App) {
   const pinia = createPinia()
   pinia.use(piniaPluginPersist)

src/store/route.ts

@@ -1,17 +1,18 @@
 import type { MenuOption } from 'naive-ui'
 import { RouterLink } from 'vue-router'
 import { h } from 'vue'
-import { local, renderIcon } from '@/utils'
+import { clone, construct } from 'radash'
+import { arrayToTree, local, renderIcon } from '@/utils'
 import { createDynamicRoutes } from '@/router/guard/dynamic'
 import { router } from '@/router'
 import { fetchUserRoutes } from '@/service'
-import { staticRoutes } from '@/router/modules'
+import { staticRoutes } from '@/router/staticRoutes'
 import { usePermission } from '@/hooks'
 
 interface RoutesStatus {
   isInitAuthRoute: boolean
   menus: any
-  userRoutes: AppRoute.Route[]
+  userRoutes: AppRoute.RowRoute[]
   activeMenu: string | null
   authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE']
   cacheRoutes: string[]
@@ -36,25 +37,6 @@ export const useRouteStore = defineStore('route-store', {
       /* 删除后面添加的路由 */
       router.removeRoute('appRoot')
     },
-    /* 根据当前路由的name生成面包屑数据 */
-    createBreadcrumbFromRoutes(routeName = '/') {
-      const path: AppRoute.Route[] = []
-      // 筛选所有包含目标的各级路由组合成一维数组
-      const getPathfromRoutes = (
-        routeName: string,
-        userRoutes: AppRoute.Route[],
-      ) => {
-        userRoutes.forEach((item) => {
-          if (this.hasPathinAllPath(routeName, item)) {
-            path.push(item)
-            if (item.children && item.children.length !== 0)
-              getPathfromRoutes(routeName, item.children)
-          }
-        })
-      }
-      getPathfromRoutes(routeName, this.userRoutes)
-      return path
-    },
     /* 判断当前路由和子路由中是否存在为routeName的路由 */
     hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
       if (userRoutes.name === routeName)
@@ -76,48 +58,37 @@ export const useRouteStore = defineStore('route-store', {
       this.activeMenu = key
     },
     /* 生成侧边菜单的数据 */
-    createMenus(userRoutes: AppRoute.Route[]) {
+    createMenus(userRoutes: AppRoute.RowRoute[]) {
       this.userRoutes = userRoutes
 
-      let resultMenus: AppRoute.Route[] = JSON.parse(JSON.stringify(userRoutes))
+      const resultMenus = clone(userRoutes).map(i => construct(i)) as AppRoute.Route[]
-      resultMenus = this.removeHiddenRoutes(resultMenus)
+      /** 过滤不需要显示的菜单 */
-      this.menus = this.transformAuthRoutesToMenus(resultMenus)
+      const visibleMenus = resultMenus.filter(route => !route.meta.hide)
-    },
+      // 生成侧边菜单
-    /** 过滤不需要显示的菜单 */
+      this.menus = arrayToTree(this.transformAuthRoutesToMenus(visibleMenus))
-    removeHiddenRoutes(routes: AppRoute.Route[]) {
-      return routes.filter((route) => {
-        if (route.meta && route.meta.hide)
-          return false
-        else if (route.children)
-          route.children = this.removeHiddenRoutes(route.children)
-
-        return true
-      })
     },
 
     //* 将返回的路由表渲染成侧边栏 */
     transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] {
-      return (
+      const { hasPermission } = usePermission()
-        userRoutes
+      /** 过滤没有权限的侧边菜单 */
-          /** 过滤没有权限的侧边菜单 */
+      return userRoutes.filter(i => hasPermission(i.meta.roles))
-          .filter((item: AppRoute.Route) => {
+      /** 根据order大小菜单排序  */
-            const { hasPermission } = usePermission()
+        .sort((a, b) => {
-            return hasPermission(item.meta.roles)
+          if (a.meta && a.meta.order && b.meta && b.meta.order)
-          })
+            return a.meta.order - b.meta.order
-          /** 根据order大小菜单排序  */
+          else if (a.meta && a.meta.order)
-          .sort((a, b) => {
+            return -1
-            if (a.meta && a.meta.order && b.meta && b.meta.order)
+          else if (b.meta && b.meta.order)
-              return a.meta.order - b.meta.order
+            return 1
-            else if (a.meta && a.meta.order)
+          else return 0
-              return -1
+        })
-            else if (b.meta && b.meta.order)
+        /** 转换为侧边菜单数据结构 */
-              return 1
+        .map((item) => {
-            else return 0
+          const target: MenuOption = {
-          })
+            id: item.id,
-          /** 转换为侧边菜单数据结构 */
+            pid: item.pid,
-          .map((item) => {
+            label:
-            const target: MenuOption = {
-              label:
                 (!item.children || item.children.length === 0)
                   ? () =>
                       h(
@@ -130,20 +101,19 @@ export const useRouteStore = defineStore('route-store', {
                         { default: () => item.meta.title },
                       )
                   : item.meta.title,
-              key: item.path,
+            key: item.path,
-              icon: renderIcon(item.meta.icon),
+            icon: renderIcon(item.meta.icon),
-            }
+          }
-            /** 判断子元素 */
+          /** 判断子元素 */
-            if (item.children) {
+          if (item.children) {
-              const children = this.transformAuthRoutesToMenus(item.children)
+            const children = this.transformAuthRoutesToMenus(item.children)
-              // 只有子元素有且不为空时才添加
+            // 只有子元素有且不为空时才添加
-              if (children.length !== 0)
+            if (children.length !== 0)
-                target.children = children
+              target.children = children
-              else target.children = undefined
+            else target.children = undefined
-            }
+          }
-            return target
+          return target
-          })
+        })
-      )
     },
     /* 初始化动态路由 */
     async initDynamicRoute() {

src/typings/env.d.ts

@@ -32,6 +32,8 @@ interface ImportMetaEnv {
   readonly VITE_ROUTE_MODE?: 'hash' | 'web'
   /** 路由加载模式 */
   readonly VITE_AUTH_ROUTE_MODE?: 'static' | 'dynamic'
+  /** 首次加载页面 */
+  readonly VITE_HOME_PATH: string
 
   /** 后端服务的环境类型 */
   readonly MODE: ServiceEnvType

src/typings/route.d.ts

@@ -1,22 +1,7 @@
 declare namespace AppRoute {
-  /** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
-  interface Route {
-    /** 路由名称(路由唯一标识) */
-    name: string
-    /** 路由路径 */
-    path: string
-    /** 路由重定向 */
-    redirect?: string
-    /** 子路由 */
-    children?: Route[]
-    /** 路由描述 */
-    meta: RouteMeta
-    /** 路由属性 */
-    // props?: boolean | Record<string, any> | ((to: any) => Record<string, any>);
-  }
   /** 路由描述 */
   interface RouteMeta {
-    /* 页面标题，通常必选。 */
+  /* 页面标题，通常必选。 */
     title: string
     /* 图标，一般配合菜单使用 */
     icon?: string
@@ -35,4 +20,33 @@ declare namespace AppRoute {
     /** 当前路由需要选中的菜单项(用于跳转至不在左侧菜单显示的路由且需要高亮某个菜单的情况) */
     activeMenu?: string
   }
+  /** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
+  interface baseRoute {
+    /** 路由名称(路由唯一标识) */
+    name: string
+    /** 路由路径 */
+    path: string
+    /** 路由重定向 */
+    redirect?: string
+    /* 页面组件地址 */
+    componentPath?: string | null
+    // 路由id
+    id: numnber
+    // 父级路由id，顶级页面为0
+    pid: number
+  }
+
+  type RowRoute = {
+    [K in keyof RouteMeta as `meta.${K}`]?: RouteMeta[K]
+  } & baseRoute
+
+  interface Route extends baseRoute {
+    /** 子路由 */
+    children?: Route[]
+    /* 页面组件 */
+    component: any
+    /** 路由描述 */
+    meta: RouteMeta
+  }
+
 }

src/utils/index.ts

@@ -1,3 +1,25 @@
 export * from './icon'
-export * from './is'
 export * from './storage'
+
+export function arrayToTree(arr) {
+  const map = {}
+
+  arr.forEach((item) => {
+    map[item.id] = { ...item }
+  })
+
+  arr.forEach((item) => {
+    if (item.pid !== 0) {
+      const parent = map[item.pid]
+      if (parent) {
+        parent.children = parent.children || []
+        parent.children.push(map[item.id])
+      }
+    }
+  })
+
+  // 找出根节点
+  const tree = Object.values(map).filter(item => item.pid === 0)
+
+  return tree
+}

src/utils/is.ts

@@ -1,97 +0,0 @@
-const toString = Object.prototype.toString.bind({})
-
-export function is(val: unknown, type: string) {
-  return toString.call(val) === `[object ${type}]`
-}
-
-export function isString(val: unknown): val is string {
-  return is(val, 'String')
-}
-
-export function isNumber(val: unknown): val is number {
-  return is(val, 'Number')
-}
-
-export function isBoolean(val: unknown): val is boolean {
-  return is(val, 'Boolean')
-}
-
-export function isNull(val: unknown): val is null {
-  return val === null
-}
-
-export function isUnDef<T = unknown>(val?: T): val is T {
-  return !isDef(val)
-}
-
-export function isDef<T = unknown>(val?: T): val is T {
-  return typeof val !== 'undefined'
-}
-
-export function isNullOrUnDef(val: unknown): val is null | undefined {
-  return isUnDef(val) || isNull(val)
-}
-
-export function isObject(val: any): val is Record<any, any> {
-  return val !== null && is(val, 'Object')
-}
-
-export function isArray(val: any): val is Array<any> {
-  return val && Array.isArray(val)
-}
-
-export function isEmpty<T = unknown>(val: T): val is T {
-  if (isArray(val) || isString(val))
-    return val.length === 0
-
-  if (val instanceof Map || val instanceof Set)
-    return val.size === 0
-
-  if (isObject(val))
-    return Object.keys(val).length === 0
-
-  return false
-}
-
-export function isDate(val: unknown): val is Date {
-  return is(val, 'Date')
-}
-
-export function isPromise<T = any>(val: unknown): val is Promise<T> {
-  return (
-    is(val, 'Promise')
-    && isObject(val)
-    && isFunction(val.then)
-    && isFunction(val.catch)
-  )
-}
-
-export function isFunction(val: unknown): val is Function {
-  return typeof val === 'function'
-}
-
-export function isFile<T extends File>(val: T | unknown): val is T {
-  return is(val, 'File')
-}
-
-export function isRegExp(val: unknown): val is RegExp {
-  return is(val, 'RegExp')
-}
-
-export function isWindow(val: any): val is Window {
-  return typeof window !== 'undefined' && is(val, 'Window')
-}
-
-export function isElement(val: unknown): val is Element {
-  return isObject(val) && !!val.tagName
-}
-
-export const isServer = typeof window === 'undefined'
-
-export const isClient = !isServer
-
-export function isUrl(path: string): boolean {
-  const reg
-    = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
-  return reg.test(path)
-}

src/views/test/test2/detail/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div text-center>
+  <n-alert title="目前可公开的情报" type="warning">
-    这是详情子页，他不会出现在侧边栏
+    这是详情子页，他不会出现在侧边栏,他其实是上个页面的同级，并不是下级，这个要注意
-  </div>
+  </n-alert>
 </template>
 
 <style scoped></style>