refactor(project): business changed its name to effects, and universal-ui changed its name to common-ui

packages/effects/access/src/access-control.vue

@@ -0,0 +1,43 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAccess } from './use-access';
+
+interface Props {
+  /**
+   * 通过什么方式来控制组件，如果是 role，则传入角色，如果是 code，则传入权限码
+   * @default 'role'
+   */
+  type?: 'code' | 'role';
+
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  value?: string[];
+}
+
+defineOptions({
+  name: 'AccessControl',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'role',
+  value: () => [],
+});
+
+const { hasAuthByCodes, hasAuthByRoles } = useAccess();
+
+const hasAuth = computed(() => {
+  const { type, value } = props;
+  return type === 'role' ? hasAuthByRoles(value) : hasAuthByCodes(value);
+});
+</script>
+
+<template>
+  <slot v-if="!value"></slot>
+  <slot v-else-if="hasAuth"></slot>
+</template>

packages/effects/access/src/generate-accessible.ts

@@ -0,0 +1,65 @@
+import type {
+  AccessModeType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben-core/typings';
+
+import {
+  generateMenus,
+  generateRoutesByBackend,
+  generateRoutesByFrontend,
+} from '@vben-core/helpers';
+import { cloneDepp } from '@vben-core/toolkit';
+
+async function generateAccessible(
+  mode: AccessModeType,
+  options: GenerateMenuAndRoutesOptions,
+) {
+  const { router } = options;
+
+  options.routes = cloneDepp(options.routes);
+  // 生成路由
+  const accessibleRoutes = await generateRoutes(mode, options);
+
+  // 动态添加到router实例内
+  accessibleRoutes.forEach((route) => {
+    router.addRoute(route);
+  });
+
+  // 生成菜单
+  const accessibleMenus = await generateMenus(accessibleRoutes, options.router);
+
+  return { accessibleMenus, accessibleRoutes };
+}
+
+/**
+ * Generate routes
+ * @param mode
+ */
+async function generateRoutes(
+  mode: AccessModeType,
+  options: GenerateMenuAndRoutesOptions,
+) {
+  const { forbiddenComponent, roles, routes } = options;
+
+  switch (mode) {
+    // 允许所有路由访问，不做任何过滤处理
+    case 'allow-all': {
+      return routes;
+    }
+    case 'frontend': {
+      return await generateRoutesByFrontend(
+        routes,
+        roles || [],
+        forbiddenComponent,
+      );
+    }
+    case 'backend': {
+      return await generateRoutesByBackend(options);
+    }
+    default: {
+      return routes;
+    }
+  }
+}
+
+export { generateAccessible };

packages/effects/access/src/index.ts

@@ -0,0 +1,3 @@
+export { default as AccessControl } from './access-control.vue';
+export * from './generate-accessible';
+export * from './use-access';

packages/effects/access/src/use-access.ts

@@ -0,0 +1,52 @@
+import { computed } from 'vue';
+
+import { preferences, updatePreferences } from '@vben-core/preferences';
+import { useCoreAccessStore } from '@vben-core/stores';
+
+function useAccess() {
+  const coreAccessStore = useCoreAccessStore();
+  const accessMode = computed(() => {
+    return preferences.app.accessMode;
+  });
+
+  /**
+   * 基于角色判断是否有权限
+   * @description: Determine whether there is permission，The role is judged by the user's role
+   * @param roles
+   */
+  function hasAuthByRoles(roles: string[]) {
+    const userRoleSet = new Set(coreAccessStore.userRoles);
+    const intersection = roles.filter((item) => userRoleSet.has(item));
+    return intersection.length > 0;
+  }
+
+  /**
+   * 基于权限码判断是否有权限
+   * @description: Determine whether there is permission，The permission code is judged by the user's permission code
+   * @param codes
+   */
+  function hasAuthByCodes(codes: string[]) {
+    const userCodesSet = new Set(coreAccessStore.accessCodes);
+
+    const intersection = codes.filter((item) => userCodesSet.has(item));
+    return intersection.length > 0;
+  }
+
+  async function toggleAccessMode() {
+    updatePreferences({
+      app: {
+        accessMode:
+          preferences.app.accessMode === 'frontend' ? 'backend' : 'frontend',
+      },
+    });
+  }
+
+  return {
+    accessMode,
+    hasAuthByCodes,
+    hasAuthByRoles,
+    toggleAccessMode,
+  };
+}
+
+export { useAccess };