@peng_kai/kit 0.1.17 → 0.2.0-beta.0

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/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 };
+}