refactor: Integrate the @vben-core/shared package

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

@@ -1,5 +1,9 @@
 <!--
  Access control component for fine-grained access control.
+ TODO: 可以扩展更完善的功能：
+ 1. 支持多个权限码，只要有一个权限码满足即可 或者 多个权限码全部满足
+ 2. 支持多个角色，只要有一个角色满足即可 或者 多个角色全部满足
+ 3. 支持自定义权限码和角色的判断逻辑
 -->
 <script lang="ts" setup>
 import { computed } from 'vue';

packages/effects/access/src/directive.ts

@@ -16,7 +16,9 @@ function isAccessible(el: Element, binding: any) {
     return;
   }
   const authMethod =
-    accessMode.value === 'frontend' ? hasAccessByRoles : hasAccessByCodes;
+    accessMode.value === 'frontend' && binding.arg === 'role'
+      ? hasAccessByRoles
+      : hasAccessByCodes;
 
   if (!authMethod(value)) {
     el?.remove();
@@ -31,8 +33,6 @@ const authDirective: Directive = {
   mounted,
 };
 
-export function installAccessDirective(app: App) {
+export function useAccessDirective(app: App) {
   app.directive('access', authDirective);
 }
-
-export default authDirective;

packages/effects/access/src/index.ts

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

packages/effects/hooks/package.json

@@ -20,7 +20,7 @@
     }
   },
   "dependencies": {
-    "@vben-core/hooks": "workspace:*",
+    "@vben-core/composables": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/stores": "workspace:*",
     "@vben/types": "workspace:*",

packages/effects/hooks/src/index.ts

@@ -1,8 +1,7 @@
-export * from './unmount-global-loading';
 export * from './use-app-config';
 export * from './use-content-maximize';
 export * from './use-design-tokens';
 export * from './use-refresh';
 export * from './use-tabs';
 export * from './use-watermark';
-export * from '@vben-core/hooks';
+export * from '@vben-core/composables';

packages/effects/hooks/src/unmount-global-loading.ts

@@ -1,30 +0,0 @@
-/**
- * 移除并销毁loading
- * 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
- * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
- * 不好的地方是会增加一些代码量
- */
-export function unmountGlobalLoading() {
-  // 查找全局 loading 元素
-  const loadingElement = document.querySelector('#__app-loading__');
-
-  if (loadingElement) {
-    // 添加隐藏类，触发过渡动画
-    loadingElement.classList.add('hidden');
-
-    // 查找所有需要移除的注入 loading 元素
-    const injectLoadingElements = document.querySelectorAll(
-      '[data-app-loading^="inject"]',
-    );
-
-    // 当过渡动画结束时，移除 loading 元素和所有注入的 loading 元素
-    loadingElement.addEventListener(
-      'transitionend',
-      () => {
-        loadingElement.remove(); // 移除 loading 元素
-        injectLoadingElements.forEach((el) => el.remove()); // 移除所有注入的 loading 元素
-      },
-      { once: true },
-    ); // 确保事件只触发一次
-  }
-}