refactor: Integrate the @vben-core/shared package

packages/utils/README.md

@@ -1,6 +1,6 @@
 # @vben/utils
 
-用于多个 `app` 公用的工具包，继承了 `@vben-core/toolkit`、`@vben-core/helper`、`@vben-core/request` 的所有能力。业务上有通用的工具函数可以放在这里。
+用于多个 `app` 公用的工具包，继承了 `@vben-core/shared/utils` 的所有能力。业务上有通用的工具函数可以放在这里。
 
 ## 用法
 

packages/utils/package.json

@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "vue-router": "^4.4.0"
   }

packages/utils/src/helpers/generate-menus.ts

@@ -1,7 +1,7 @@
 import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
 import type { Router, RouteRecordRaw } from 'vue-router';
 
-import { filterTree, mapTree } from '@vben-core/toolkit';
+import { filterTree, mapTree } from '@vben-core/shared';
 
 /**
  * 根据 routes 生成菜单列表

packages/utils/src/helpers/generate-routes-backend.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { mapTree } from '@vben-core/toolkit';
+import { mapTree } from '@vben-core/shared';
 import {
   ComponentRecordType,
   GenerateMenuAndRoutesOptions,

packages/utils/src/helpers/generate-routes-frontend.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { filterTree, mapTree } from '@vben-core/toolkit';
+import { filterTree, mapTree } from '@vben-core/shared';
 
 /**
  * 动态生成路由 - 前端方式

packages/utils/src/helpers/index.ts

@@ -3,3 +3,4 @@ export * from './generate-menus';
 export * from './generate-routes-backend';
 export * from './generate-routes-frontend';
 export * from './merge-route-modules';
+export * from './unmount-global-loading';

packages/utils/src/helpers/unmount-global-loading.ts

@@ -0,0 +1,30 @@
+/**
+ * 移除并销毁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 },
+    ); // 确保事件只触发一次
+  }
+}

packages/utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from './helpers';
-export * from '@vben-core/toolkit';
+export * from '@vben-core/shared/colorful';
+export * from '@vben-core/shared/utils';