Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

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

@@ -2,14 +2,16 @@ import type { DeepPartial } from '@vben-core/typings';
 
 import type { InitialOptions, Preferences } from './types';
 
+import { markRaw, reactive, readonly, watch } from 'vue';
+
 import { StorageManager } from '@vben-core/shared/cache';
 import { isMacOs, merge } from '@vben-core/shared/utils';
+
 import {
   breakpointsTailwind,
   useBreakpoints,
   useDebounceFn,
 } from '@vueuse/core';
-import { markRaw, reactive, readonly, watch } from 'vue';
 
 import { defaultPreferences } from './config';
 import { updateCSSVariables } from './update-css-variables';
@@ -37,106 +39,6 @@ class PreferenceManager {
     );
   }
 
-  /**
-   * 保存偏好设置
-   * @param {Preferences} preference - 需要保存的偏好设置
-   */
-  private _savePreferences(preference: Preferences) {
-    this.cache?.setItem(STORAGE_KEY, preference);
-    this.cache?.setItem(STORAGE_KEY_LOCALE, preference.app.locale);
-    this.cache?.setItem(STORAGE_KEY_THEME, preference.theme.mode);
-  }
-
-  /**
-   * 处理更新的键值
-   * 根据更新的键值执行相应的操作。
-   * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
-   */
-  private handleUpdates(updates: DeepPartial<Preferences>) {
-    const themeUpdates = updates.theme || {};
-    const appUpdates = updates.app || {};
-    if (themeUpdates && Object.keys(themeUpdates).length > 0) {
-      updateCSSVariables(this.state);
-    }
-
-    if (
-      Reflect.has(appUpdates, 'colorGrayMode') ||
-      Reflect.has(appUpdates, 'colorWeakMode')
-    ) {
-      this.updateColorMode(this.state);
-    }
-  }
-
-  private initPlatform() {
-    const dom = document.documentElement;
-    dom.dataset.platform = isMacOs() ? 'macOs' : 'window';
-  }
-
-  /**
-   *  从缓存中加载偏好设置。如果缓存中没有找到对应的偏好设置，则返回默认偏好设置。
-   */
-  private loadCachedPreferences() {
-    return this.cache?.getItem<Preferences>(STORAGE_KEY);
-  }
-
-  /**
-   * 加载偏好设置
-   * @returns {Preferences} 加载的偏好设置
-   */
-  private loadPreferences(): Preferences {
-    return this.loadCachedPreferences() || { ...defaultPreferences };
-  }
-
-  /**
-   * 监听状态和系统偏好设置的变化。
-   */
-  private setupWatcher() {
-    if (this.isInitialized) {
-      return;
-    }
-
-    // 监听断点，判断是否移动端
-    const breakpoints = useBreakpoints(breakpointsTailwind);
-    const isMobile = breakpoints.smaller('md');
-    watch(
-      () => isMobile.value,
-      (val) => {
-        this.updatePreferences({
-          app: { isMobile: val },
-        });
-      },
-      { immediate: true },
-    );
-
-    // 监听系统主题偏好设置变化
-    window
-      .matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', ({ matches: isDark }) => {
-        this.updatePreferences({
-          theme: { mode: isDark ? 'dark' : 'light' },
-        });
-      });
-  }
-
-  /**
-   * 更新页面颜色模式（灰色、色弱）
-   * @param preference
-   */
-  private updateColorMode(preference: Preferences) {
-    if (preference.app) {
-      const { colorGrayMode, colorWeakMode } = preference.app;
-      const dom = document.documentElement;
-      const COLOR_WEAK = 'invert-mode';
-      const COLOR_GRAY = 'grayscale-mode';
-      colorWeakMode
-        ? dom.classList.add(COLOR_WEAK)
-        : dom.classList.remove(COLOR_WEAK);
-      colorGrayMode
-        ? dom.classList.add(COLOR_GRAY)
-        : dom.classList.remove(COLOR_GRAY);
-    }
-  }
-
   clearCache() {
     [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
       this.cache?.removeItem(key);
@@ -220,6 +122,113 @@ class PreferenceManager {
     this.handleUpdates(updates);
     this.savePreferences(this.state);
   }
+
+  /**
+   * 保存偏好设置
+   * @param {Preferences} preference - 需要保存的偏好设置
+   */
+  private _savePreferences(preference: Preferences) {
+    this.cache?.setItem(STORAGE_KEY, preference);
+    this.cache?.setItem(STORAGE_KEY_LOCALE, preference.app.locale);
+    this.cache?.setItem(STORAGE_KEY_THEME, preference.theme.mode);
+  }
+
+  /**
+   * 处理更新的键值
+   * 根据更新的键值执行相应的操作。
+   * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
+   */
+  private handleUpdates(updates: DeepPartial<Preferences>) {
+    const themeUpdates = updates.theme || {};
+    const appUpdates = updates.app || {};
+    if (themeUpdates && Object.keys(themeUpdates).length > 0) {
+      updateCSSVariables(this.state);
+    }
+
+    if (
+      Reflect.has(appUpdates, 'colorGrayMode') ||
+      Reflect.has(appUpdates, 'colorWeakMode')
+    ) {
+      this.updateColorMode(this.state);
+    }
+  }
+
+  private initPlatform() {
+    const dom = document.documentElement;
+    dom.dataset.platform = isMacOs() ? 'macOs' : 'window';
+  }
+
+  /**
+   *  从缓存中加载偏好设置。如果缓存中没有找到对应的偏好设置，则返回默认偏好设置。
+   */
+  private loadCachedPreferences() {
+    return this.cache?.getItem<Preferences>(STORAGE_KEY);
+  }
+
+  /**
+   * 加载偏好设置
+   * @returns {Preferences} 加载的偏好设置
+   */
+  private loadPreferences(): Preferences {
+    return this.loadCachedPreferences() || { ...defaultPreferences };
+  }
+
+  /**
+   * 监听状态和系统偏好设置的变化。
+   */
+  private setupWatcher() {
+    if (this.isInitialized) {
+      return;
+    }
+
+    // 监听断点，判断是否移动端
+    const breakpoints = useBreakpoints(breakpointsTailwind);
+    const isMobile = breakpoints.smaller('md');
+    watch(
+      () => isMobile.value,
+      (val) => {
+        this.updatePreferences({
+          app: { isMobile: val },
+        });
+      },
+      { immediate: true },
+    );
+
+    // 监听系统主题偏好设置变化
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', ({ matches: isDark }) => {
+        // 如果偏好设置中主题模式为auto，则跟随系统更新
+        if (this.state.theme.mode === 'auto') {
+          this.updatePreferences({
+            theme: { mode: isDark ? 'dark' : 'light' },
+          });
+          // 恢复为auto模式
+          this.updatePreferences({
+            theme: { mode: 'auto' },
+          });
+        }
+      });
+  }
+
+  /**
+   * 更新页面颜色模式（灰色、色弱）
+   * @param preference
+   */
+  private updateColorMode(preference: Preferences) {
+    if (preference.app) {
+      const { colorGrayMode, colorWeakMode } = preference.app;
+      const dom = document.documentElement;
+      const COLOR_WEAK = 'invert-mode';
+      const COLOR_GRAY = 'grayscale-mode';
+      colorWeakMode
+        ? dom.classList.add(COLOR_WEAK)
+        : dom.classList.remove(COLOR_WEAK);
+      colorGrayMode
+        ? dom.classList.add(COLOR_GRAY)
+        : dom.classList.remove(COLOR_GRAY);
+    }
+  }
 }
 
 const preferencesManager = new PreferenceManager();

packages/@core/ui-kit/popup-ui/src/alert/alert.vue

@@ -138,7 +138,7 @@ async function handleOpenChange(val: boolean) {
           <div class="flex items-center">
             <component :is="getIconRender" class="mr-2" />
             <span class="flex-auto">{{ $t(title) }}</span>
-            <AlertDialogCancel v-if="showCancel">
+            <AlertDialogCancel v-if="showCancel" as-child>
               <VbenButton
                 variant="ghost"
                 size="icon"
@@ -158,16 +158,17 @@ async function handleOpenChange(val: boolean) {
           <VbenLoading v-if="loading && contentMasking" :spinning="loading" />
         </AlertDialogDescription>
         <div class="flex justify-end gap-x-2" :class="`justify-${buttonAlign}`">
-          <AlertDialogCancel v-if="showCancel" :disabled="loading">
+          <AlertDialogCancel v-if="showCancel" as-child>
             <component
               :is="components.DefaultButton || VbenButton"
+              :disabled="loading"
               variant="ghost"
               @click="handleCancel"
             >
               {{ cancelText || $t('cancel') }}
             </component>
           </AlertDialogCancel>
-          <AlertDialogAction>
+          <AlertDialogAction as-child>
             <component
               :is="components.PrimaryButton || VbenButton"
               :loading="loading"

packages/effects/common-ui/src/components/index.ts

@@ -17,12 +17,15 @@ export * from '@vben-core/popup-ui';
 
 // 给文档用
 export {
+  VbenAvatar,
   VbenButton,
   VbenButtonGroup,
   VbenCheckButtonGroup,
   VbenCountToAnimator,
+  VbenFullScreen,
   VbenInputPassword,
   VbenLoading,
+  VbenLogo,
   VbenPinInput,
   VbenSpinner,
   VbenTree,

packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -9,6 +9,8 @@ import { $t } from '@vben/locales';
 import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
 import { convertToHsl, TinyColor } from '@vben/utils';
 
+import { useThrottleFn } from '@vueuse/core';
+
 defineOptions({
   name: 'PreferenceBuiltinTheme',
 });
@@ -19,6 +21,15 @@ const colorInput = ref();
 const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
 const themeColorPrimary = defineModel<string>('themeColorPrimary');
 
+const updateThemeColorPrimary = useThrottleFn(
+  (value: string) => {
+    themeColorPrimary.value = value;
+  },
+  300,
+  true,
+  true,
+);
+
 const inputValue = computed(() => {
   return new TinyColor(themeColorPrimary.value || '').toHexString();
 });
@@ -84,7 +95,7 @@ function handleSelect(theme: BuiltinThemePreset) {
 
 function handleInputChange(e: Event) {
   const target = e.target as HTMLInputElement;
-  themeColorPrimary.value = convertToHsl(target.value);
+  updateThemeColorPrimary(convertToHsl(target.value));
 }
 
 function selectColor() {

packages/effects/plugins/src/vxe-table/init.ts

@@ -1,8 +1,11 @@
 import type { SetupVxeTable } from './types';
 
-import { usePreferences } from '@vben/preferences';
-import { useVbenForm } from '@vben-core/form-ui';
 import { defineComponent, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import { useVbenForm } from '@vben-core/form-ui';
+
 import {
   VxeButton,
   VxeCheckbox,
@@ -103,7 +106,7 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
   initVxeTable();
   useTableForm = useVbenForm;
 
-  const preference = usePreferences();
+  const { isDark, locale } = usePreferences();
 
   const localMap = {
     'zh-CN': zhCN,
@@ -111,11 +114,11 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
   };
 
   watch(
-    [() => preference.theme.value, () => preference.locale.value],
-    ([theme, locale]) => {
-      VxeUI.setTheme(theme === 'dark' ? 'dark' : 'light');
-      VxeUI.setI18n(locale, localMap[locale]);
-      VxeUI.setLanguage(locale);
+    [() => isDark.value, () => locale.value],
+    ([isDarkValue, localeValue]) => {
+      VxeUI.setTheme(isDarkValue ? 'dark' : 'light');
+      VxeUI.setI18n(localeValue, localMap[localeValue]);
+      VxeUI.setLanguage(localeValue);
     },
     {
       immediate: true,

playground/src/views/examples/modal/index.vue

@@ -261,6 +261,9 @@ async function openPrompt() {
         </template>
       </Card>
       <Card class="w-[300px]" title="轻量提示弹窗">
+        <template #extra>
+          <DocButton path="/components/common-ui/vben-alert" />
+        </template>
         <p>通过快捷方法创建动态提示弹窗，适合一些轻量的提示和确认、输入等</p>
         <template #actions>
           <Button type="primary" @click="openAlert">Alert</Button>