@peng_kai/kit 0.0.14 → 0.0.16

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