@peng_kai/kit 0.0.15 → 0.0.16

package/admin/hooks/usePage.ts

@@ -1,16 +1,16 @@
-import { createGlobalState, usePrevious } from '@vueuse/core'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { shallowRef, ref, reactive, computed, watch, readonly } from 'vue'
-import type { VNode } from 'vue'
-import { useMenu } from './useMenu'
-import type { TMenu } from './useMenu'
-import { getTitle } from '../defines/defineRoute.helpers'
-import { getDependencies } from "../../kitDependencies";
+import { createGlobalState, usePrevious } from '@vueuse/core';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { computed, reactive, readonly, ref, shallowRef, watch } from 'vue';
+import type { VNode } from 'vue';
+import { getTitle } from '../defines/route';
+import { getDependencies } from '../../kitDependencies';
+import { useMenu } from './useMenu';
+import type { TMenu } from './useMenu';
 
-export { usePage }
-export type { TPageState, IBreadcrumb }
+export { usePage };
+export type { TPageState, IBreadcrumb };
 
-type TPageState = ReturnType<typeof getPageState>
+type TPageState = ReturnType<typeof getPageState>;
 
 interface IBreadcrumb {
   title: string
@@ -20,70 +20,70 @@ interface IBreadcrumb {
 }
 
 const usePage = createGlobalState(() => {
-  const { useRouter } = getDependencies()
-  const router = useRouter()
-  const currentPageNode = shallowRef<VNode>()
-  const currentPageKey = ref('')
-  const pageCacheList = reactive<string[]>([])
-  const pageStateMap = new Map<string, TPageState>()
-  const currentPageState = computed(() => pageStateMap.get(currentPageKey.value))
-  const previousPageState = usePrevious(currentPageState)
+  const { useRouter } = getDependencies();
+  const router = useRouter();
+  const currentPageNode = shallowRef<VNode>();
+  const currentPageKey = ref('');
+  const pageCacheList = reactive<string[]>([]);
+  const pageStateMap = new Map<string, TPageState>();
+  const currentPageState = computed(() => pageStateMap.get(currentPageKey.value));
+  const previousPageState = usePrevious(currentPageState);
 
   const openPage = (key: string) => {
-    const route = pageStateMap.get(key)?.route
+    const route = pageStateMap.get(key)?.route;
 
     if (!route)
-      return
+      return;
 
-    router.push(route.fullPath)
-  }
+    router.push(route.fullPath);
+  };
 
   const closePage = (key: string) => {
     if (!pageStateMap.has(key))
-      return
+      return;
 
-    const cacheIndex = pageCacheList.indexOf(key)
-    cacheIndex >= 0 && pageCacheList.splice(cacheIndex, 1)
+    const cacheIndex = pageCacheList.indexOf(key);
+    cacheIndex >= 0 && pageCacheList.splice(cacheIndex, 1);
     // 关闭当前页面则返回上一个路由
-    currentPageKey.value === key && router.go(-1)
-    pageStateMap.delete(key)
-  }
+    currentPageKey.value === key && router.go(-1);
+    pageStateMap.delete(key);
+  };
 
   const setPage = (pageNode: VNode, route: RouteLocationNormalizedLoaded) => {
-    const pageKey = route?.meta?.pageKeyFn?.(route) ?? route.fullPath
-    const pageInfo = getPageState(route)
-    const canKeepAlive = route.meta.keepAlive && !pageCacheList.includes(pageKey)
+    const pageKey = route?.meta?.pageKeyFn?.(route) ?? route.fullPath;
+    const pageInfo = getPageState(route);
+    const canKeepAlive = route.meta.keepAlive && !pageCacheList.includes(pageKey);
 
-    canKeepAlive && pageCacheList.push(pageKey)
+    canKeepAlive && pageCacheList.push(pageKey);
     pageStateMap.has(pageKey) || pageStateMap.set(pageKey, pageInfo)
 
-    ;(pageNode as any).type.name = pageKey
-    currentPageKey.value = pageKey
-    currentPageNode.value = pageNode
+    ;(pageNode as any).type.name = pageKey;
+    currentPageKey.value = pageKey;
+    currentPageNode.value = pageNode;
 
-    return pageNode
-  }
+    return pageNode;
+  };
 
   const getCurrentPageState = () => {
-    return pageStateMap.get(currentPageKey.value)
-  }
+    return pageStateMap.get(currentPageKey.value);
+  };
 
   // 监听 title 变化
   watch(() => currentPageState.value?.title, (title) => {
-    let _title = title
+    let _title = title;
 
     if (!_title) {
-      const pageState = currentPageState.value
+      const pageState = currentPageState.value;
 
       // 当前 title 为空时，使用路由 title
       if (pageState) {
-        _title = getTitle(pageState?.route)
-        pageState.title = _title!
+        _title = getTitle(pageState?.route);
+        pageState.title = _title!;
       }
     }
 
-    document.title = _title!
-  })
+    document.title = _title!;
+  });
 
   return {
     currentPageNode,
@@ -96,35 +96,37 @@ const usePage = createGlobalState(() => {
     setPage,
     openPage,
     closePage,
-  }
-})
+  };
+});
 
 function getPageState(route: RouteLocationNormalizedLoaded) {
-  const { getMenuPath } = useMenu()
-  const menuPath = getMenuPath(route.name as string)
-  const currentMenu = menuPath.pop()
-  const { icon: mIcon } = route.meta
-  const title = currentMenu?.label ?? getTitle(route) ?? import.meta.env.VITE_APP_TITLE
-  const icon = currentMenu?.icon ?? mIcon?.()
+  const deps = getDependencies();
+  const appName = deps.appName as string;
+  const { getMenuPath } = useMenu();
+  const menuPath = getMenuPath(route.name as string);
+  const currentMenu = menuPath.pop();
+  const { icon: mIcon } = route.meta;
+  const title = currentMenu?.label ?? getTitle(route) ?? appName;
+  const icon = currentMenu?.icon ?? mIcon?.();
   const state = reactive({
     title,
     icon,
     breadcrumbs: menuPath.map(menuToBreadcrumb),
     route: readonly(route),
     refresh() {
-      const menuKey = this.route.name as string
-      const { getMenu, getMenuPath } = useMenu()
-      const menu = getMenu(menuKey)
-      const menuPath = getMenuPath(menuKey)
+      const menuKey = this.route.name as string;
+      const { getMenu, getMenuPath } = useMenu();
+      const menu = getMenu(menuKey);
+      const menuPath = getMenuPath(menuKey);
 
-      menuPath.pop()
+      menuPath.pop();
 
-      this.title = menu?.label ?? getTitle(this.route) ?? import.meta.env.VITE_APP_TITLE
-      this.breadcrumbs = menuPath.map(menuToBreadcrumb)
+      this.title = menu?.label ?? getTitle(this.route) ?? appName;
+      this.breadcrumbs = menuPath.map(menuToBreadcrumb);
     },
-  })
+  });
 
-  return state
+  return state;
 }
 
 function menuToBreadcrumb(menu: TMenu) {
@@ -133,7 +135,7 @@ function menuToBreadcrumb(menu: TMenu) {
     icon: menu.icon,
     trigger: menu.trigger,
     children: menu.children?.map(menuToBreadcrumb),
-  })
+  });
 
-  return ret
+  return ret;
 }

package/admin/hooks/usePageTab.ts

@@ -1,35 +1,35 @@
-import { createGlobalState } from '@vueuse/core'
-import { ref, computed, watch } from 'vue'
-import { usePage } from './usePage'
+import { createGlobalState } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+import { usePage } from './usePage';
 
-export { usePageTab }
+export { usePageTab };
 
 const usePageTab = createGlobalState(() => {
-  const { currentPageKey, pageStateMap, openPage, closePage } = usePage()
-  const tabKeyList = ref<string[]>([])
+  const { currentPageKey, pageStateMap, openPage, closePage } = usePage();
+  const tabKeyList = ref<string[]>([]);
   const tabList = computed(() => tabKeyList.value.map((key) => {
-    const state = pageStateMap.get(key)
+    const state = pageStateMap.get(key);
 
-    return state ? { key, title: state.title, icon: state.icon } : undefined!
-  }).filter(tab => !!tab))
+    return state ? { key, title: state.title, icon: state.icon } : undefined!;
+  }).filter(tab => !!tab));
 
   const closeTab = (key: string) => {
-    const i = tabKeyList.value.indexOf(key)
+    const i = tabKeyList.value.indexOf(key);
 
     if (i > -1) {
-      closePage(key)
-      setTimeout(() => tabKeyList.value.splice(i, 1))
+      closePage(key);
+      setTimeout(() => tabKeyList.value.splice(i, 1));
     }
-  }
+  };
 
   watch(
     currentPageKey,
     (key) => {
       if (!tabKeyList.value.includes(key))
-        tabKeyList.value.push(key)
+        tabKeyList.value.push(key);
     },
     { immediate: true },
-  )
+  );
 
-  return { activeTab: currentPageKey, tabList, closeTab, openTab: openPage }
-})
+  return { activeTab: currentPageKey, tabList, closeTab, openTab: openPage };
+});

package/admin/layout/large/Breadcrumb.vue

@@ -1,11 +1,10 @@
 <script lang="ts">
-import { computed } from "vue";
-import type { VNode } from 'vue'
-import { Breadcrumb as ABreadcrumb } from "ant-design-vue";
-import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb'
-import type { IBreadcrumb } from '../../hooks'
-import { getDependencies } from "../../../kitDependencies";
-
+import { computed } from 'vue';
+import type { VNode } from 'vue';
+import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
+import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
+import type { IBreadcrumb } from '../../hooks';
+import { getDependencies } from '../../../kitDependencies';
 
 interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
   icon?: VNode | null
@@ -19,29 +18,29 @@ function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
     icon: breadcrumb.icon,
     children: breadcrumb.children?.map(child => _buildRoute(child)),
     trigger: breadcrumb.trigger,
-  }
+  };
 }
 </script>
 
 <script setup lang="ts">
-const { usePage } = getDependencies()
-const { currentPageState } = usePage()
+const { usePage } = getDependencies();
+const { currentPageState } = usePage();
 const routes = computed(() => {
-  let breadcrumbs: IBreadcrumbRoute[] = []
+  let breadcrumbs: IBreadcrumbRoute[] = [];
 
   if (!currentPageState.value)
-    return breadcrumbs
+    return breadcrumbs;
 
-  breadcrumbs = currentPageState.value.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb))
+  breadcrumbs = currentPageState.value.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb));
 
   breadcrumbs.push({
     path: currentPageState.value.title,
     breadcrumbName: currentPageState.value.title,
     icon: currentPageState.value.icon,
-  })
+  });
 
-  return breadcrumbs
-})
+  return breadcrumbs;
+});
 </script>
 
 <template>

package/admin/layout/large/Content.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { getDependencies } from "../../../kitDependencies";
+import { getDependencies } from '../../../kitDependencies';
 
-const { usePage } = getDependencies()
-const { pageCacheList, setPage } = usePage()
+const { usePage } = getDependencies();
+const { pageCacheList, setPage } = usePage();
 </script>
 
 <template>
-  <RouterView v-slot="{ Component, route }">
+  <RouterView #default="{ Component, route }">
     <KeepAlive :include="pageCacheList">
       <Suspense>
         <component :is="setPage(Component, route)" :key="(Component.type as any).name" />

package/admin/layout/large/Menu.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import { computed, ref, watch } from "vue";
-import { Menu as AMenu } from "ant-design-vue";
-import type { ItemType } from 'ant-design-vue'
-import type { TMenu } from '../../hooks'
-import { getDependencies } from "../../../kitDependencies";
+import { computed, ref, watch } from 'vue';
+import { Menu as AMenu } from 'ant-design-vue';
+import type { ItemType } from 'ant-design-vue';
+import type { TMenu } from '../../hooks';
+import { getDependencies } from '../../../kitDependencies';
 
 function formatMenu(menu: TMenu): ItemType {
   return {
@@ -12,33 +12,34 @@ function formatMenu(menu: TMenu): ItemType {
     label: menu.label,
     icon: menu.icon ?? undefined,
     onClick: (e) => {
-      (e as any).stopPropagation()
-      menu.trigger()
+      (e as any).stopPropagation();
+      menu.trigger();
     },
     children: menu.children?.map(formatMenu),
-  }
+  };
 }
 </script>
 
 <script setup lang="ts">
-const{ useRouter, useMenu } = getDependencies()
-const router = useRouter()
-const { menus, getMenuPath } = useMenu()
-const items = computed(() => menus.map(formatMenu))
-const openKeys = ref<string[]>([])
-const selectedKeys = ref<string[]>([])
+const { useRouter, useMenu } = getDependencies();
+const router = useRouter();
+const { menus, getMenuPath } = useMenu();
+const items = computed(() => menus.map(formatMenu));
+const openKeys = ref<string[]>([]);
+const selectedKeys = ref<string[]>([]);
 
 watch(
   () => router?.currentRoute.value,
   (route) => {
-    if (!route) return;
+    if (!route)
+      return;
 
-    const menuPath = getMenuPath(route.name as string)
-    openKeys.value = menuPath.map(menu => menu.key)
-    selectedKeys.value = [openKeys.value.pop()!]
+    const menuPath = getMenuPath(route.name as string);
+    openKeys.value = menuPath.map(menu => menu.key);
+    selectedKeys.value = [openKeys.value.pop()!];
   },
   { immediate: true },
-)
+);
 </script>
 
 <template>

package/admin/layout/large/PageTab.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
-import { getDependencies } from "../../../kitDependencies";
+import { TabPane as ATabPane, Tabs as ATabs } from 'ant-design-vue';
+import { getDependencies } from '../../../kitDependencies';
 
-const { usePageTab } = getDependencies()
-const { activeTab, tabList, openTab, closeTab } = usePageTab()
+const { usePageTab } = getDependencies();
+const { activeTab, tabList, openTab, closeTab } = usePageTab();
 </script>
 
 <template>

package/admin/layout/large/index.ts

@@ -1,4 +1,4 @@
-export { default as Breadcrumb } from './Breadcrumb.vue'
-export { default as Content } from './Content.vue'
-export { default as Menu } from './Menu.vue'
-export { default as PageTab } from './PageTab.vue'
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as Content } from './Content.vue';
+export { default as Menu } from './Menu.vue';
+export { default as PageTab } from './PageTab.vue';

package/admin/permission/index.ts

@@ -0,0 +1,4 @@
+export { setupPermissionRouterGuard } from './routerGuard';
+export { setupPermissionPlugin } from './vuePlugin';
+export { usePermission } from './usePermission';
+export type { THasPermissionsFn } from './vuePlugin';

package/admin/permission/routerGuard.ts

@@ -0,0 +1,43 @@
+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);
+  });
+}

package/admin/permission/usePermission.ts

@@ -0,0 +1,52 @@
+import { createGlobalState } from '@vueuse/core';
+import type { AsyncReturnType } from 'type-fest';
+import { computed, readonly, ref, watch } from 'vue';
+import { getDependencies } from '../../kitDependencies';
+
+export { usePermission };
+export type { TRole };
+
+type TRole = () => Promise<Record<string, boolean> | null | undefined>;
+
+const usePermission = createGlobalState(() => {
+  const { roles } = getDependencies();
+  const role = ref('main');
+  const permissionCodes = ref<AsyncReturnType<TRole>>();
+  const permissionCodesStr = computed(() => Object.keys(permissionCodes.value ?? {}).sort().join(','));
+
+  /**
+   * 刷新权限
+   */
+  const refreshPermission = async () => {
+    permissionCodes.value = await roles[role.value]?.();
+
+    return permissionCodes.value;
+  };
+
+  /**
+   * 是否满足权限要求
+   * @param codes 权限 code
+   */
+  const hasPermissions = (codes: string | string[]) => {
+    const _codes = Array.isArray(codes) ? codes : [codes];
+    const _permissionCodes = permissionCodes.value;
+
+    if (_permissionCodes === null)
+      return false;
+    else if (_permissionCodes === undefined)
+      // undefined 则表示没有权限要求，返回 true
+      return true;
+    else
+      return _codes.every(code => !!_permissionCodes[code]);
+  };
+
+  watch(role, refreshPermission, { immediate: true });
+
+  return {
+    permissionCodes: readonly(permissionCodes),
+    permissionCodesStr,
+    role,
+    hasPermissions,
+    refreshPermission,
+  };
+});

package/admin/permission/vuePlugin.ts

@@ -0,0 +1,30 @@
+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;
+    },
+  });
+}

package/admin/route-guards/index.ts

@@ -0,0 +1,2 @@
+export { setupPageProgress } from './pageProgress';
+export { setupPageTitle } from './pageTitle';

package/admin/route-guards/pageProgress.ts

@@ -0,0 +1,16 @@
+import type { Router } from 'vue-router';
+import { getDependencies } from '../../kitDependencies';
+
+export function setupPageProgress(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;
+    }
+  });
+}

package/admin/route-guards/pageTitle.ts

@@ -0,0 +1,24 @@
+import type { Router } from 'vue-router';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+export function setupPageTitle(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/types/assist.ts

@@ -0,0 +1,10 @@
+import { createSelfKeyProxy } from '../../utils';
+
+export declare interface AppPermissionCodes {}
+export declare interface AppRouteNames {}
+
+/** 权限 code 类型辅助（permission code） */
+export const pc_ = createSelfKeyProxy<{ [K in keyof AppPermissionCodes]: K }>();
+
+/** 路由 name 类型辅助（route name） */
+export const rn_ = createSelfKeyProxy<{ [K in keyof AppRouteNames]: K }>();

package/admin/unocss/index.ts

@@ -3,4 +3,4 @@ export const shortcuts = [
   ['page-section', 'p-4 bg-$antd-colorBgContainer'],
   // 用于 FormItem 在 flex布局下的自适应
   [/^fiw-(.*?)_(.*?)_(.*?)$/, ([, w1, w2, w3]) => `min-w-${w1} w-${w2} max-w-${w3} flex-auto`],
-]
+];