feat(projects): route store

.env

@@ -10,3 +10,9 @@ VITE_ICON_PREFIX=icon
 # the prefix of the local svg icon component, must include VITE_ICON_PREFIX
 # format {VITE_ICON_PREFIX}-{local icon name}
 VITE_ICON_LOCAL_PREFIX=icon-local
+
+# auth route mode: static ｜ dynamic
+VITE_AUTH_ROUTE_MODE=static
+
+# static auth route home
+VITE_ROUTE_HOME=home

src/router/elegant/routes.ts

@@ -6,7 +6,7 @@ import type { ElegantRoute } from '@elegant-router/types';
 export const autoRoutes: ElegantRoute[] = [
   {
     path: '/403',
-    component: 'layout.base',
+    component: 'layout.blank',
     children: [
       {
         name: '403',
@@ -22,7 +22,7 @@ export const autoRoutes: ElegantRoute[] = [
   },
   {
     path: '/404',
-    component: 'layout.base',
+    component: 'layout.blank',
     children: [
       {
         name: '404',
@@ -38,7 +38,7 @@ export const autoRoutes: ElegantRoute[] = [
   },
   {
     path: '/500',
-    component: 'layout.base',
+    component: 'layout.blank',
     children: [
       {
         name: '500',
@@ -70,7 +70,7 @@ export const autoRoutes: ElegantRoute[] = [
   },
   {
     path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
-    component: 'layout.base',
+    component: 'layout.blank',
     children: [
       {
         name: 'login',

src/router/index.ts

@@ -6,7 +6,7 @@ import {
   createMemoryHistory,
   type RouterHistory
 } from 'vue-router';
-import { routes } from './routes';
+import { createRoutes } from './routes';
 import { createRouterGuard } from './guard';
 
 const { VITE_ROUTER_HISTORY_MODE = 'history', VITE_BASE_URL } = import.meta.env;
@@ -17,9 +17,11 @@ const historyCreatorMap: Record<Env.RouterHistoryMode, (base?: string) => Router
   memory: createMemoryHistory
 };
 
+const { constantVueRoutes } = createRoutes();
+
 export const router = createRouter({
   history: historyCreatorMap[VITE_ROUTER_HISTORY_MODE](VITE_BASE_URL),
-  routes
+  routes: constantVueRoutes
 });
 
 /**

src/router/routes/index.ts

@@ -1,29 +1,62 @@
-import type { ElegantRoute, CustomRoute } from '@elegant-router/types';
+import type { ElegantRoute, CustomRoute, SingleLevelRoute } from '@elegant-router/types';
 import { autoRoutes } from '../elegant/routes';
 import { layouts, views } from '../elegant/imports';
 import { transformElegantRouteToVueRoute } from '../elegant/transform';
 
-const constantRoutes: CustomRoute[] = [
-  {
-    name: 'root',
-    path: '/',
-    redirect: {
-      name: 'home'
-    }
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    component: 'layout.blank',
-    children: [
-      {
-        name: 'not-found',
-        path: '',
-        component: 'view.404'
+export function createRoutes() {
+  const builtinRoutes: CustomRoute[] = [
+    {
+      name: 'root',
+      path: '/',
+      redirect: {
+        name: 'home'
+      },
+      meta: {
+        title: 'root',
+        constant: true
       }
-    ]
-  }
-];
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      component: 'layout.blank',
+      children: [
+        {
+          name: 'not-found',
+          path: '',
+          component: 'view.404',
+          meta: {
+            title: 'not-found',
+            constant: true
+          }
+        }
+      ]
+    }
+  ];
+
+  const constantRoutes: ElegantRoute[] = [...builtinRoutes];
+
+  const authRoutes: ElegantRoute[] = [];
+
+  autoRoutes.forEach(route => {
+    const isConstant = Boolean(route.meta?.constant);
+
+    const isSingleConstant = Boolean((route as SingleLevelRoute).children?.[0]?.meta?.constant);
+
+    if (isConstant || isSingleConstant) {
+      constantRoutes.push(route);
+    } else {
+      authRoutes.push(route);
+    }
+  });
+
+  const constantVueRoutes = transformElegantRouteToVueRoute(constantRoutes, layouts, views);
 
-const elegantRoutes: ElegantRoute[] = [...constantRoutes, ...autoRoutes];
+  const authVueRoutes = transformElegantRouteToVueRoute(authRoutes, layouts, views);
 
-export const routes = transformElegantRouteToVueRoute(elegantRoutes, layouts, views);
+  return {
+    constantRoutes,
+    authRoutes,
+    constantVueRoutes,
+    authVueRoutes
+  };
+}

src/store/modules/route/index.ts

@@ -1,6 +1,68 @@
+import { ref } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
 import { defineStore } from 'pinia';
+import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
+import { router } from '@/router';
+import { createRoutes } from '@/router/routes';
 
 export const useRouteStore = defineStore(SetupStoreId.Route, () => {
-  //
+  const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
+
+  /**
+   * auth route mode
+   * @description it recommends to use static mode in the development environment, and use dynamic mode in the production environment,
+   * if use static mode in development environment, the auth routes will be auto generated by plugin "@elegant-router/vue"
+   */
+  const authRouteMode = ref(import.meta.env.VITE_AUTH_ROUTE_MODE);
+
+  /**
+   * home route key
+   */
+  const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
+
+  /**
+   * global menus
+   */
+  // const menus = ref<App.Global.Menu[]>([]);
+
+  async function initAuthRoute() {
+    if (authRouteMode.value === 'static') {
+      await initStaticAuthRoute();
+    } else {
+      await initDynamicAuthRoute();
+    }
+  }
+
+  /**
+   * init static auth route
+   */
+  async function initStaticAuthRoute() {
+    const { authVueRoutes } = createRoutes();
+    handleVueRoutes(authVueRoutes);
+  }
+
+  /**
+   * init dynamic auth route
+   */
+  async function initDynamicAuthRoute() {
+    //
+  }
+
+  function handleVueRoutes(routes: RouteRecordRaw[]) {
+    addRoutesToVueRouter(routes);
+  }
+
+  function addRoutesToVueRouter(routes: RouteRecordRaw[]) {
+    routes.forEach(route => {
+      router.addRoute(route);
+    });
+  }
+
+  return {
+    routeHome,
+    initAuthRoute,
+    isInitAuthRoute,
+    setIsInitAuthRoute
+  };
 });

src/store/modules/route/shared.ts

@@ -0,0 +1,7 @@
+import type { ElegantRoute } from '@elegant-router/types';
+
+export function getGlobalMenusByAuthRoutes(_routes: ElegantRoute[]) {
+  const menus: App.Global.Menu[] = [];
+
+  return menus;
+}

src/typings/app.d.ts

@@ -72,8 +72,16 @@ declare namespace App {
     /**
      * the global menu
      */
-    interface Menu {
-      label: string;
+    interface Menu<
+      T extends import('@elegant-router/types').AutoRouteKey = import('@elegant-router/types').AutoRouteKey
+    > {
+      key: string;
+      title: string;
+      i18nKey: I18n.I18nKey;
+      routeKey: T;
+      routePath: import('@elegant-router/types').RouteMap[T];
+      icon: string;
+      children?: Menu<T>[];
     }
   }
 

src/typings/env.d.ts

@@ -35,16 +35,25 @@ declare namespace Env {
      * the router history mode
      */
     readonly VITE_ROUTER_HISTORY_MODE?: RouterHistoryMode;
-
     /**
      * the prefix of the iconify icon
      */
     readonly VITE_ICON_PREFIX: 'icon';
-
     /**
      * the prefix of the local icon
      * @description this prefix is start with the icon prefix
      */
     readonly VITE_ICON_LOCAL_PREFIX: 'local-icon';
+    /**
+     * the auth route mode
+     * - static: the auth routes is generated in front-end
+     * - dynamic: the auth routes is generated in back-end
+     */
+    readonly VITE_AUTH_ROUTE_MODE: 'static' | 'dynamic';
+    /**
+     * the home route key
+     * @description it only has effect when the auth route mode is static, if the route mode is dynamic, the home route key is defined in the back-end
+     */
+    readonly VITE_ROUTE_HOME: import('@elegant-router/types').AutoRouteKey;
   }
 }

src/typings/router.d.ts

@@ -24,7 +24,7 @@ declare module 'vue-router' {
     roles?: string[];
     /**
      * is constant route
-     * @description does not need to login, and the route is defined in the frontend
+     * @description does not need to login, and the route is defined in the front-end
      */
     constant?: boolean;
     /**