perf: optimize for some details and comments (#4030)

* perf: optimize for some details and comments

* fix: test case

* chore: update ci

packages/@core/preferences/src/preferences.test.ts

@@ -1,7 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { defaultPreferences } from './config';
-import { isDarkTheme, PreferenceManager } from './preferences';
+import { PreferenceManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
 
 describe('preferences', () => {
   let preferenceManager: PreferenceManager;

packages/@core/preferences/src/preferences.ts

@@ -19,14 +19,6 @@ const STORAGE_KEY = 'preferences';
 const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
 const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
 
-function isDarkTheme(theme: string) {
-  let dark = theme === 'dark';
-  if (theme === 'auto') {
-    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return dark;
-}
-
 class PreferenceManager {
   private cache: null | StorageManager = null;
   // private flattenedState: Flatten<Preferences>;
@@ -39,6 +31,7 @@ class PreferenceManager {
   constructor() {
     this.cache = new StorageManager();
 
+    // 避免频繁的操作缓存
     this.savePreferences = useDebounceFn(
       (preference: Preferences) => this._savePreferences(preference),
       150,
@@ -58,7 +51,6 @@ class PreferenceManager {
   /**
    * 处理更新的键值
    * 根据更新的键值执行相应的操作。
-   *
    * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
    */
   private handleUpdates(updates: DeepPartial<Preferences>) {
@@ -124,7 +116,7 @@ class PreferenceManager {
         this.updatePreferences({
           theme: { mode: isDark ? 'dark' : 'light' },
         });
-        updateCSSVariables(this.state);
+        // updateCSSVariables(this.state);
       });
   }
 
@@ -232,4 +224,4 @@ class PreferenceManager {
 }
 
 const preferencesManager = new PreferenceManager();
-export { isDarkTheme, PreferenceManager, preferencesManager };
+export { PreferenceManager, preferencesManager };

packages/@core/preferences/src/update-css-variables.ts

@@ -115,4 +115,4 @@ function isDarkTheme(theme: string) {
   return dark;
 }
 
-export { updateCSSVariables };
+export { isDarkTheme, updateCSSVariables };

packages/@core/preferences/src/use-preferences.ts

@@ -2,7 +2,8 @@ import { computed } from 'vue';
 
 import { diff } from '@vben-core/shared';
 
-import { isDarkTheme, preferencesManager } from './preferences';
+import { preferencesManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
 
 function usePreferences() {
   const preferences = preferencesManager.getPreferences();

packages/effects/hooks/src/use-design-tokens.ts

@@ -209,7 +209,7 @@ export function useElementPlusDesignTokens() {
         '--el-text-color-primary': getCssVariableValue('--foreground'),
         '--el-text-color-regular': getCssVariableValue('--foreground'),
       };
-      updateCSSVariables(variables, `__vben_ele_styles__`);
+      updateCSSVariables(variables, `__vben_design_styles__`);
     },
     { immediate: true },
   );

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

@@ -3,6 +3,7 @@
  * 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
  * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
  * 不好的地方是会增加一些代码量
+ * 自定义loading可以见：https://doc.vben.pro/guide/in-depth/loading.html
  */
 export function unmountGlobalLoading() {
   // 查找全局 loading 元素