@peng_kai/kit 0.0.14 → 0.0.16

package/admin/layout/large/Menu.vue

@@ -1,68 +1,69 @@
-<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";
-
-function formatMenu(menu: TMenu): ItemType {
-  return {
-    key: menu.key,
-    title: menu.label,
-    label: menu.label,
-    icon: menu.icon ?? undefined,
-    onClick: (e) => {
-      (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[]>([])
-
-watch(
-  () => router?.currentRoute.value,
-  (route) => {
-    if (!route) return;
-
-    const menuPath = getMenuPath(route.name as string)
-    openKeys.value = menuPath.map(menu => menu.key)
-    selectedKeys.value = [openKeys.value.pop()!]
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <AMenu
-    class="menu"
-    :items="items"
-    :openKeys="openKeys"
-    :selectedKeys="selectedKeys"
-    mode="inline"
-    :inlineIndent="14"
-  />
-</template>
-
-<style lang="scss" scoped>
-.menu {
-  border-inline-end: none !important;
-
-  &.ant-menu-inline-collapsed {
-    width: var(--app-siderbar-width);
-  }
-
-  &,
-  .ant-menu {
-    background-color: transparent;
-  }
-}
-</style>
+<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';
+
+function formatMenu(menu: TMenu): ItemType {
+  return {
+    key: menu.key,
+    title: menu.label,
+    label: menu.label,
+    icon: menu.icon ?? undefined,
+    onClick: (e) => {
+      (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[]>([]);
+
+watch(
+  () => router?.currentRoute.value,
+  (route) => {
+    if (!route)
+      return;
+
+    const menuPath = getMenuPath(route.name as string);
+    openKeys.value = menuPath.map(menu => menu.key);
+    selectedKeys.value = [openKeys.value.pop()!];
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <AMenu
+    class="menu"
+    :items="items"
+    :openKeys="openKeys"
+    :selectedKeys="selectedKeys"
+    mode="inline"
+    :inlineIndent="14"
+  />
+</template>
+
+<style lang="scss" scoped>
+.menu {
+  border-inline-end: none !important;
+
+  &.ant-menu-inline-collapsed {
+    width: var(--app-siderbar-width);
+  }
+
+  &,
+  .ant-menu {
+    background-color: transparent;
+  }
+}
+</style>

package/admin/layout/large/PageTab.vue

@@ -1,71 +1,71 @@
-<script setup lang="ts">
-import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
-import { getDependencies } from "../../../kitDependencies";
-
-const { usePageTab } = getDependencies()
-const { activeTab, tabList, openTab, closeTab } = usePageTab()
-</script>
-
-<template>
-  <ATabs
-    class="app-page-tabs"
-    :activeKey="activeTab"
-    type="editable-card"
-    size="small"
-    :animated="false"
-    :hideAdd="true"
-    :tabBarGutter="4"
-    @tabClick="(openTab as any)"
-    @edit="(closeTab as any)"
-  >
-    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
-      <template #closeIcon>
-        <i class="i-icon-park-outline:close" />
-      </template>
-    </ATabPane>
-  </ATabs>
-</template>
-
-<style scoped lang="scss">
-.app-page-tabs {
-  :deep(.ant-tabs-nav) {
-    margin: 0;
-  }
-
-  :deep(.ant-tabs-nav::before) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-tab) {
-    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
-  }
-
-  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
-    transform: translateX(8px);
-  }
-
-  :deep(.ant-tabs-tab-active) {
-    --uno: 'border-[currentColor]!';
-  }
-
-  :deep(.ant-tabs-tab-remove) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    margin: 0;
-    opacity: 0;
-    transition: all 150ms;
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
-    transform: translateX(0);
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
-    margin-left: 0;
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import { TabPane as ATabPane, Tabs as ATabs } from 'ant-design-vue';
+import { getDependencies } from '../../../kitDependencies';
+
+const { usePageTab } = getDependencies();
+const { activeTab, tabList, openTab, closeTab } = usePageTab();
+</script>
+
+<template>
+  <ATabs
+    class="app-page-tabs"
+    :activeKey="activeTab"
+    type="editable-card"
+    size="small"
+    :animated="false"
+    :hideAdd="true"
+    :tabBarGutter="4"
+    @tabClick="(openTab as any)"
+    @edit="(closeTab as any)"
+  >
+    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
+      <template #closeIcon>
+        <i class="i-icon-park-outline:close" />
+      </template>
+    </ATabPane>
+  </ATabs>
+</template>
+
+<style scoped lang="scss">
+.app-page-tabs {
+  :deep(.ant-tabs-nav) {
+    margin: 0;
+  }
+
+  :deep(.ant-tabs-nav::before) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-tab) {
+    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
+  }
+
+  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
+    transform: translateX(8px);
+  }
+
+  :deep(.ant-tabs-tab-active) {
+    --uno: 'border-[currentColor]!';
+  }
+
+  :deep(.ant-tabs-tab-remove) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin: 0;
+    opacity: 0;
+    transition: all 150ms;
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+    transform: translateX(0);
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+</style>

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/styles/globalCover.scss

@@ -1,43 +1,43 @@
-:root {
-  // table 组件头部圆角设为 0
-  .ant-table-wrapper {
-    .ant-table .ant-table-header,
-    table,
-    .ant-table-container table > thead > tr:first-child > *:first-child,
-    .ant-table-container table > thead > tr:first-child > *:last-child {
-      border-radius: 0;
-    }
-
-    .ant-pagination {
-      margin-bottom: 0;
-    }
-  }
-
-
-  // 隐藏在 sticky 模式下的滚动条
-  .ant-table-sticky-scroll {
-    display: none;
-  }
-
-  // 卡片
-  .ant-card .ant-card-actions > li > span {
-    cursor: inherit;
-  }
-
-  // Tab 溢出出现下列框时
-  .ant-tabs-dropdown-menu-title-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  // 表格
-  .ant-table-wrapper {
-    .ant-table-row-expand-icon-collapsed::before {
-      height: 1.5px;
-    }
-    .ant-table-row-expand-icon-collapsed::after {
-      width: 1.5px;
-    }
-  }
-}
+:root {
+  // table 组件头部圆角设为 0
+  .ant-table-wrapper {
+    .ant-table .ant-table-header,
+    table,
+    .ant-table-container table > thead > tr:first-child > *:first-child,
+    .ant-table-container table > thead > tr:first-child > *:last-child {
+      border-radius: 0;
+    }
+
+    .ant-pagination {
+      margin-bottom: 0;
+    }
+  }
+
+
+  // 隐藏在 sticky 模式下的滚动条
+  .ant-table-sticky-scroll {
+    display: none;
+  }
+
+  // 卡片
+  .ant-card .ant-card-actions > li > span {
+    cursor: inherit;
+  }
+
+  // Tab 溢出出现下列框时
+  .ant-tabs-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // 表格
+  .ant-table-wrapper {
+    .ant-table-row-expand-icon-collapsed::before {
+      height: 1.5px;
+    }
+    .ant-table-row-expand-icon-collapsed::after {
+      width: 1.5px;
+    }
+  }
+}

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`],
-]
+];