@peng_kai/kit 0.0.15 → 0.0.16

package/admin/defines/route/getRoutes.ts

@@ -0,0 +1,84 @@
+import type { RouteRecordRaw } from 'vue-router';
+import merge from 'lodash-es/merge';
+import { ENV } from '../../../utils';
+import { RouteSymbol } from './defineRoute';
+
+export { getRoutes };
+
+/** 获取路由 */
+async function getRoutes() {
+  const routeFileRE = /\/([A-Za-z0-9-]+.)?route\.ts$/;
+  const routeFiles = Object.fromEntries(
+    Object.entries(getRoutes.modules).filter(([n]) => routeFileRE.test(n)),
+  ) as Record<string, Function>;
+  let routes: RouteRecordRaw[] = [];
+
+  for (const name in routeFiles) {
+    const module: any = await routeFiles[name]();
+
+    if (Object.hasOwn(module?.default ?? {}, RouteSymbol))
+      Array.prototype.push.apply(routes, module.default());
+  }
+
+  // 处理路由
+  routes = meregeDefaultRouteParams(routes);
+  routes = sortRoute(routes);
+
+  // 输出路由
+  if (!ENV.isProd) {
+    console.groupCollapsed('一级路由');
+    console.table(
+      routes.map(route => ({ order: route.meta?.order, ...route })),
+      ['order', 'name', 'path'],
+    );
+    console.groupEnd();
+  }
+
+  return routes;
+}
+getRoutes.modules = {} as any;
+
+/** 给路由填充默认参数 */
+const defaultRouteParams: Partial<RouteRecordRaw> = {
+  meta: {
+    title: '标题',
+    icon: undefined,
+    order: 10,
+    requireAuth: true,
+    keepAlive: false,
+    hiddenTab: false,
+    pageKeyFn: route => route.path,
+  },
+};
+
+function meregeDefaultRouteParams(routes: RouteRecordRaw[], parentRoute?: RouteRecordRaw) {
+  const _routes: typeof routes = [];
+
+  for (const route of routes) {
+    if (route.children?.length)
+      route.children = meregeDefaultRouteParams(route.children, route);
+
+    const newRoute = merge({}, defaultRouteParams, route);
+    const { menuOrder } = newRoute.meta!;
+
+    // 处理 menuOrder
+    if (typeof menuOrder === 'string')
+      newRoute.meta!.menuOrder = menuOrder.replace('..', (parentRoute?.name ?? '') as string);
+
+    _routes.push(newRoute);
+  }
+
+  return _routes;
+}
+
+/** 给路由排序 */
+function sortRoute(routes: RouteRecordRaw[]) {
+  const _routes = routes.sort((r1, r2) => Number(r2?.meta?.order) - Number(r1?.meta?.order));
+
+  for (const route of _routes) {
+    if (route.children?.length)
+      route.children = sortRoute(route.children);
+  }
+
+  return _routes;
+}

package/admin/defines/route/helpers.ts

@@ -0,0 +1,49 @@
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+
+export function getTitle(route?: Pick<RouteLocationNormalizedLoaded, 'meta'>) {
+  const mTitle = route?.meta?.title;
+
+  return typeof mTitle === 'function' ? mTitle() : mTitle;
+}
+
+export function getMenusByRouter(router: Router) {
+  const menuOrderRE = /^(?<key>\w*)@(?<order>\d+)$/;
+  const routes = router.getRoutes();
+  const menus = routes
+    .filter(route => menuOrderRE.test((route.meta.menuOrder ?? '')))
+    .map((route) => {
+      const res = route.meta!.menuOrder!.match(menuOrderRE);
+      const parentKey = res?.groups?.key;
+      const order = Number(res?.groups?.order);
+      const name = route.name as string;
+      const menu = {
+        key: name,
+        label: route.meta.title ?? name,
+        icon: route.meta.icon,
+        trigger: () => router.push({ name }),
+        order,
+      };
+
+      return { parentKey, menu };
+    });
+
+  // 将含有子菜单的菜单的 trigger 设置为空函数
+  const hasSubMenus = menus.filter(menu => menus.some(m => m.parentKey === menu.menu.key));
+  hasSubMenus.forEach((menu) => {
+    menu.menu.trigger = (() => {}) as any;
+  });
+
+  return menus;
+}
+
+export function printRounesNameInterface(routes: { name: PropertyKey }[]) {
+  console.groupCollapsed('路由命名');
+  console.log('复制以下内容到 AppRouteNames');
+  const routesName = new Set();
+  routes.forEach((route) => {
+    if (typeof route.name === 'string')
+      routesName.add(route.name);
+  });
+  console.log([...routesName.values()].sort().filter(name => !!name).map(name => `${name}: true`).join('\n'));
+  console.groupEnd();
+}

package/admin/defines/route/index.ts

@@ -0,0 +1,73 @@
+import type { VNode } from 'vue';
+
+export { defineRoute } from './defineRoute';
+export { getRoutes } from './getRoutes';
+export { getTitle, getMenusByRouter, printRounesNameInterface } from './helpers';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    /**
+     * 路由标题
+     *
+     * @description 可用来作 document.title 和菜单的名称
+     *
+     * 默认：APP 名称
+     */
+    title?: string | (() => string)
+    /**
+     * 菜单和面包屑对应的图标
+     *
+     * 默认：`''`
+     */
+    icon?: (() => VNode)
+    /**
+     * 路由添加顺序，仅作用于一级路由
+     *
+     * 默认：`10`
+     */
+    order?: number
+    /**
+     * 是否需要登录
+     *
+     * 默认：`false`
+     */
+    requireAuth?: boolean
+    /**
+     * 权限码
+     */
+    permissionCode?: string
+    /**
+     * 缓存页面
+     *
+     * 默认：`true`
+     */
+    keepAlive?: boolean
+    /**
+     * 菜单排序（越大越前）
+     *
+     * 格式：[parent]@[order]
+     * - `parent`：可选。不填则默认取路由的 name 值，并在作为一级菜单显示
+     * - `order`：必选。路由排序，值越小排越前
+     *
+     * 例子：
+     * - `@10`：一级菜单
+     * - `..@10`：所在的路由层级的父级菜单，例如父级菜单是 admin，那么`..`就是`admin`
+     * - `admin@10`：指定菜单的父级为 `admin`
+     *
+     * 默认：undefined。不在菜单中显示
+     */
+    menuOrder?: string
+    /**
+     * 是否隐藏标签页
+     *
+     * 默认：`false`
+     */
+    hiddenTab?: boolean
+    /**
+     * 用于生成页面运行时的 key
+     *
+     * 默认：取 route 对象中 path 值
+     */
+    pageKeyFn?: (route: RouteLocationNormalizedLoaded) => string
+  }
+}

package/admin/defines/route-guard/defineRouteGuard.ts

@@ -0,0 +1,18 @@
+import type { Router } from 'vue-router';
+
+export interface IGuardConfig {
+  /** 路由守卫添加顺序（升序加载） */
+  order?: number
+  setup: (router: Router) => void
+}
+
+// 路由守卫标识
+export const RouteGuardSymbol = Symbol('app-route-guard');
+
+// 定义路由守卫
+export function defineRouteGuard(guard: IGuardConfig) {
+  (guard as any)[RouteGuardSymbol] = true;
+  guard.order ??= 10;
+
+  return guard;
+}

package/admin/defines/route-guard/getRouteGuards.ts

@@ -0,0 +1,40 @@
+import { ENV } from '../../../utils';
+import { RouteGuardSymbol } from './defineRouteGuard';
+import type { IGuardConfig } from './defineRouteGuard';
+
+/**
+ * 获取路由守卫
+ */
+export async function getRouteGuards() {
+  const routeGuardFileRE = /\/([A-Za-z0-9-]+.)?route-guard\.ts$/;
+  const routeGuardFiles = Object.fromEntries(
+    Object.entries(getRouteGuards.modules).filter(([n]) => routeGuardFileRE.test(n)),
+  ) as Record<string, Function>;
+  const routeGuards: Array<IGuardConfig> = [];
+  const routeGuardRecord: { file: string, order: number }[] = [];
+
+  for (const name in routeGuardFiles) {
+    const module: any = await routeGuardFiles[name]();
+
+    if (Object.hasOwn(module?.default ?? {}, RouteGuardSymbol)) {
+      const guard = module.default;
+
+      routeGuards.push(guard);
+      routeGuardRecord.push({ file: name, order: guard.order });
+    }
+  }
+
+  // 处理路由守卫
+  routeGuards.sort((g1, g2) => Number(g2.order) - Number(g1.order));
+  routeGuardRecord.sort((g1, g2) => Number(g2.order) - Number(g1.order));
+
+  // 输出路由守卫
+  if (!ENV.isProd) {
+    console.groupCollapsed('路由守卫');
+    console.table(routeGuardRecord, ['order', 'file']);
+    console.groupEnd();
+  }
+
+  return routeGuards;
+}
+getRouteGuards.modules = {} as any;

package/admin/defines/route-guard/index.ts

@@ -0,0 +1,2 @@
+export { defineRouteGuard } from './defineRouteGuard';
+export { getRouteGuards } from './getRouteGuards';

package/admin/defines/startup/defineStartup.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+
+export type StartupFn = (app: App) => void | Promise<void>;
+
+export const StartupSymbol = Symbol('app-startup');
+
+export function defineStartup(startup: StartupFn) {
+  (startup as any)[StartupSymbol] = true;
+
+  return startup;
+}

package/admin/defines/startup/getStartups.ts

@@ -0,0 +1,30 @@
+import { ENV } from '../../../utils';
+import { StartupSymbol } from './defineStartup';
+import type { StartupFn } from './defineStartup';
+
+export async function getStartups() {
+  const moduleLoaders = getStartups.modules as Record<string, Function>;
+  const startupPaths: string[] = [];
+  const startups: Array<StartupFn> = [];
+
+  for (const [path, moduleLoader] of Object.entries(moduleLoaders)) {
+    const module: any = await moduleLoader();
+    const plugin: StartupFn = module?.default ?? {};
+
+    if (!Object.hasOwn(plugin, StartupSymbol))
+      continue;
+
+    startupPaths.push(path);
+    startups.push(plugin);
+  }
+
+  // 输出 App 插件
+  if (!ENV.isProd) {
+    console.groupCollapsed('启动时');
+    console.table(startupPaths.map(path => ({ path })), ['path']);
+    console.groupEnd();
+  }
+
+  return startups;
+}
+getStartups.modules = {} as any;

package/admin/defines/startup/index.ts

@@ -0,0 +1,2 @@
+export { defineStartup } from './defineStartup';
+export { getStartups } from './getStartups';

package/admin/hooks/index.ts

@@ -1,6 +1,5 @@
-export { usePage } from './usePage'
-export type { TPageState, IBreadcrumb } from './usePage'
-export { useMenu } from './useMenu'
-export type { TMenu } from './useMenu'
-export { usePageTab } from './usePageTab'
-export { usePermission } from './usePermission'
+export { usePage } from './usePage';
+export type { TPageState, IBreadcrumb } from './usePage';
+export { useMenu } from './useMenu';
+export type { TMenu } from './useMenu';
+export { usePageTab } from './usePageTab';

package/admin/hooks/useMenu.ts

@@ -1,9 +1,9 @@
-import { createGlobalState } from '@vueuse/core'
-import { reactive, ref, computed, watch } from 'vue'
-import type { UnwrapNestedRefs, VNode, Ref } from 'vue'
+import { createGlobalState } from '@vueuse/core';
+import { computed, reactive, ref } from 'vue';
+import type { Ref, UnwrapNestedRefs, VNode } from 'vue';
 
-export { useMenu }
-export type { TMenu }
+export { useMenu };
+export type { TMenu };
 
 interface IMenuConfig {
   key: string
@@ -23,61 +23,61 @@ interface IMenuReactive {
   children?: IMenuReactive[]
 }
 
-type TMenu = UnwrapNestedRefs<IMenuReactive>
+type TMenu = UnwrapNestedRefs<IMenuReactive>;
 
 const useMenu = createGlobalState(() => {
-  const menus = reactive<TMenu[]>([])
-  const collapsed = ref(false)
+  const menus = reactive<TMenu[]>([]);
+  const collapsed = ref(false);
 
   const findMenu = (menus: TMenu[], key: string) => {
-    const queue = [...menus]
+    const queue = [...menus];
 
     while (queue.length > 0) {
-      const menu = queue.shift()!
+      const menu = queue.shift()!;
 
       if (menu.key === key)
-        return menu
+        return menu;
 
       if (menu.children)
-        queue.push(...menu.children)
+        queue.push(...menu.children);
     }
 
-    return undefined
-  }
+    return undefined;
+  };
 
   /**
    * 获取目标路由的路径
    * @param key 目标路由
    */
   const getMenuPath = (key: string) => {
-    const path: TMenu[] = []
+    const path: TMenu[] = [];
 
     const _getMenuPath = (menus: TMenu[], key: string) => {
       for (const menu of menus) {
         if (menu.key === key) {
-          path.push(menu)
-          return true
+          path.push(menu);
+          return true;
         }
 
         if (menu.children) {
-          path.push(menu)
+          path.push(menu);
           if (_getMenuPath(menu.children, key))
-            return true
-          path.pop()
+            return true;
+          path.pop();
         }
       }
 
-      return false
-    }
+      return false;
+    };
 
-    _getMenuPath(menus, key)
+    _getMenuPath(menus, key);
 
-    return path
-  }
+    return path;
+  };
 
   const addMenu = (menuConfig: IMenuConfig, parentKey?: string) => {
-    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string)
-    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null
+    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string);
+    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null;
 
     const _menu = reactive<IMenuReactive>({
       key: menuConfig.key,
@@ -85,44 +85,44 @@ const useMenu = createGlobalState(() => {
       icon: computed(iconGetter),
       trigger: menuConfig.trigger,
       order: menuConfig.order,
-    })
+    });
 
     if (parentKey) {
-      const parentMenu = findMenu(menus, parentKey)
+      const parentMenu = findMenu(menus, parentKey);
 
       if (!parentMenu)
-        return
+        return;
 
-      const children = reactive(parentMenu.children ?? [])
-      children.push(_menu)
-      children.sort((a, b) => a.order - b.order)
-      parentMenu.children = children
+      const children = reactive(parentMenu.children ?? []);
+      children.push(_menu);
+      children.sort((a, b) => b.order - a.order);
+      parentMenu.children = children;
     }
     else {
-      menus.push(_menu)
-      menus.sort((a, b) => a.order - b.order)
+      menus.push(_menu);
+      menus.sort((a, b) => b.order - a.order);
     }
-  }
+  };
 
   const removeMenu = (key: string) => {
     const _remove = (menus: TMenu[], key: string) => {
       for (let i = 0; i < menus.length; i++) {
-        const menu = menus[i]
+        const menu = menus[i];
         if (menu.key === key) {
-          menus.splice(i, 1)
-          return
+          menus.splice(i, 1);
+          return;
         }
         if (menu.children)
-          _remove(menu.children, key)
+          _remove(menu.children, key);
       }
-    }
+    };
 
-    return _remove(menus, key)
-  }
+    return _remove(menus, key);
+  };
 
   const getMenu = (key: string) => {
-    return findMenu(menus, key)
-  }
+    return findMenu(menus, key);
+  };
 
-  return { menus, collapsed, getMenuPath, addMenu, removeMenu, getMenu }
-})
+  return { menus, collapsed, getMenuPath, addMenu, removeMenu, getMenu };
+});