@peng_kai/kit 0.1.17 → 0.2.0-beta.1

package/admin/permission/routerGuard.ts

@@ -1,43 +1,41 @@
-import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
-import { hasToken } from '../../utils';
-
-export function setupPermissionRouterGuard(router: Router, rouneNames: { index: string, login: string, 403: string }) {
-  const { usePermission } = getDependencies();
-  const { refreshPermission, hasPermissions } = usePermission();
-
-  router.beforeEach(async (to, _, next) => {
-    const isLogin = hasToken();
-    const needLogin = Boolean(to.meta?.requireAuth);
-    let hasPermission = false;
-
-    if (isLogin) {
-      await refreshPermission();
-
-      const permissionCode = to.meta?.permissionCode;
-      hasPermission = permissionCode ? hasPermissions(permissionCode) : true;
-    }
-
-    // 已登录状态跳转登录页，跳转至首页
-    if (isLogin && to.name === rouneNames.login)
-      return next({ name: rouneNames.index, replace: true });
-
-    // 不需要登录权限的页面直接通行
-    else if (!needLogin)
-      return next(true);
-
-    // 未登录状态进入需要登录权限的页面
-    else if (!isLogin && needLogin)
-      return next({ name: rouneNames.login, replace: true });
-
-    // 登录状态进入需要登录权限的页面，有权限直接通行
-    else if (isLogin && needLogin && hasPermission)
-      return next(true);
-
-    // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
-    else if (isLogin && needLogin && !hasPermission)
-      return next({ name: rouneNames[403], replace: true });
-
-    return next(false);
-  });
-}
+import type { Router } from 'vue-router';
+import { adminPlugin } from '../adminPlugin';
+import { hasToken } from '../../utils';
+
+export function setupPermissionRouterGuard(router: Router, rouneNames: { index: string, login: string, 403: string }) {
+  router.beforeEach(async (to, _, next) => {
+    const permissionStore = adminPlugin.deps.usePermissionStore();
+    const isLogin = hasToken();
+    const needLogin = Boolean(to.meta?.requireAuth);
+    let hasPermission = false;
+
+    if (isLogin) {
+      await permissionStore.refreshPermission();
+
+      const permissionCode = to.meta?.permissionCode;
+      hasPermission = permissionCode ? permissionStore.hasPermission(permissionCode) : true;
+    }
+
+    // 已登录状态跳转登录页，跳转至首页
+    if (isLogin && to.name === rouneNames.login)
+      return next({ name: rouneNames.index, replace: true });
+
+    // 不需要登录权限的页面直接通行
+    else if (!needLogin)
+      return next(true);
+
+    // 未登录状态进入需要登录权限的页面
+    else if (!isLogin && needLogin)
+      return next({ name: rouneNames.login, replace: true });
+
+    // 登录状态进入需要登录权限的页面，有权限直接通行
+    else if (isLogin && needLogin && hasPermission)
+      return next(true);
+
+    // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
+    else if (isLogin && needLogin && !hasPermission)
+      return next({ name: rouneNames[403], replace: true });
+
+    return next(false);
+  });
+}

package/admin/permission/vuePlugin.ts

@@ -1,30 +1,46 @@
-import type { App } from 'vue';
-import { getDependencies } from '../../kitDependencies';
-
-export type THasPermissionsFn = ReturnType<ReturnType<typeof getDependencies>['usePermission']>['hasPermissions'];
-
-export function setupPermissionPlugin(app: App) {
-  const { usePermission } = getDependencies();
-  const { hasPermissions } = usePermission();
-
-  app.directive('has-permissions', {
-    mounted(el, binding) {
-      const codes = binding.value;
-
-      if (!hasPermissions(codes))
-        el.remove();
-    },
-    updated(el, binding) {
-      const codes = binding.value;
-
-      if (!hasPermissions(codes))
-        el.remove();
-    },
-  });
-
-  app.use({
-    install(app) {
-      app.config.globalProperties.$hasPermission = hasPermissions;
-    },
-  });
-}
+import type { App } from 'vue';
+import { watch } from 'vue';
+import { adminPlugin } from '../adminPlugin';
+
+type TCodes = string | string[];
+
+const PLUGIN_NAME = 'has-permission';
+const UNWATCH_NAME = `v-${PLUGIN_NAME}@unwatch`;
+
+export function setupPermissionPlugin(app: App) {
+  app.directive<HTMLElement, TCodes>(PLUGIN_NAME, {
+    mounted(el, binding) {
+      const permissionStore = adminPlugin.deps.usePermissionStore();
+
+      function updateVisibility() {
+        const codes = binding.value;
+        el.style.display = permissionStore.hasPermission(codes) ? '' : 'none';
+      }
+
+      (el as any)[UNWATCH_NAME] = watch(
+        () => permissionStore.permissionCodesStr,
+        updateVisibility,
+        { immediate: true },
+      );
+    },
+    unmounted(el) {
+      (el as any)[UNWATCH_NAME]?.();
+    },
+  });
+
+  app.use({
+    install(app) {
+      app.config.globalProperties.$hasPermission = (codes: TCodes) => {
+        const permissionStore = adminPlugin.deps.usePermissionStore();
+
+        return permissionStore.hasPermission(codes);
+      };
+    },
+  });
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $hasPermission: (code: string | string[]) => boolean
+  }
+}

package/admin/route-guards/collapseMenu.ts

@@ -1,11 +1,11 @@
 import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
+import { adminPlugin } from '../adminPlugin';
 
 export function setupCollapseMenu(router: Router) {
-  const deps = getDependencies();
+  const menuStore = adminPlugin.deps.useMenuStore();
 
   router.beforeEach(() => {
-    deps.useMenu().collapsed.value = false;
+    menuStore.collapsed = false;
     return true;
   });
 }

package/admin/route-guards/index.ts

@@ -1,3 +1,3 @@
-export { setupPageProgress } from './pageProgress';
-export { setupPageTitle } from './pageTitle';
-export { setupCollapseMenu } from './collapseMenu';
+export { setupPageProgress } from './pageProgress';
+export { setupPageTitle } from './pageTitle';
+export { setupCollapseMenu } from './collapseMenu';

package/admin/route-guards/pageProgress.ts

@@ -1,27 +1,27 @@
-import type { Router } from 'vue-router';
-import { useStyleTag } from '@vueuse/core';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
-
-/**
- * 用于显示页面跳转时，页面顶部进度条
- */
-export function setupPageProgress(router: Router) {
-  NProgress.configure({ showSpinner: false });
-  useStyleTag(`
-    #nprogress .bar {
-      height: 3px;
-      background: var(--antd-colorPrimary);
-    }
-    #nprogress .peg {
-      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
-    }
-  `);
-
-  router.beforeEach(() => {
-    NProgress.start();
-  });
-  router.afterEach(() => {
-    setTimeout(() => NProgress.done(), 200);
-  });
-}
+import type { Router } from 'vue-router';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+/**
+ * 用于显示页面跳转时，页面顶部进度条
+ */
+export function setupPageProgress(router: Router) {
+  NProgress.configure({ showSpinner: false });
+  useStyleTag(`
+    #nprogress .bar {
+      height: 3px;
+      background: var(--antd-colorPrimary);
+    }
+    #nprogress .peg {
+      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
+    }
+  `);
+
+  router.beforeEach(() => {
+    NProgress.start();
+  });
+  router.afterEach(() => {
+    setTimeout(() => NProgress.done(), 200);
+  });
+}

package/admin/route-guards/pageTitle.ts

@@ -1,19 +1,18 @@
-import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
-
-/**
- * 用于在路由跳转后，同步修改 title
- */
-export function setupPageTitle(router: Router) {
-  const deps = getDependencies();
-
-  router.afterEach((to, _, err) => {
-    const title = to.meta.title;
-
-    if (!err) {
-      document.title = typeof title === 'function'
-        ? title()
-        : title ?? deps.appName;
-    }
-  });
-}
+import type { Router } from 'vue-router';
+import { adminPlugin } from '../adminPlugin';
+
+/**
+ * 用于在路由跳转后，同步修改 title
+ */
+export function setupPageTitle(router: Router) {
+  router.afterEach((to, _, err) => {
+    const meta = adminPlugin.meta;
+    const title = to.meta.title;
+
+    if (!err) {
+      document.title = typeof title === 'function'
+        ? title()
+        : title ?? meta.appName;
+    }
+  });
+}

package/admin/{hooks/useMenu.ts → stores/createUseMenuStore.ts}

@@ -1,128 +1,133 @@
-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 };
-});
+import { computed, reactive, ref } from 'vue';
+import type { Ref, UnwrapNestedRefs, VNode } from 'vue';
+import { defineStore } from 'pinia';
+
+export { createUseMenuStore };
+export type { TMenu, TUseMenuStore };
+
+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>;
+type TUseMenuStore = ReturnType<typeof createUseMenuStore>;
+
+function createUseMenuStore() {
+  return defineStore('appMenu', () => storeSetup());
+}
+
+function storeSetup() {
+  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 };
+}