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

packages/effects/access/build.config.ts

@@ -0,0 +1,21 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});

packages/effects/access/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@vben/access",
+  "version": "5.0.0",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/permissions"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/helpers": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/stores": "workspace:*",
+    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "vue": "^3.4.31"
+  }
+}

packages/effects/access/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';

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

packages/effects/access/tailwind.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';

packages/effects/access/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}