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,6 +39,90 @@ class PreferenceManager {
     );
   }
 
+  clearCache() {
+    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+  }
+
+  public getInitialPreferences() {
+    return this.initialPreferences;
+  }
+
+  public getPreferences() {
+    return readonly(this.state);
+  }
+
+  /**
+   * 覆盖偏好设置
+   * overrides  要覆盖的偏好设置
+   * namespace  命名空间
+   */
+  public async initPreferences({ namespace, overrides }: InitialOptions) {
+    // 是否初始化过
+    if (this.isInitialized) {
+      return;
+    }
+    // 初始化存储管理器
+    this.cache = new StorageManager({ prefix: namespace });
+    // 合并初始偏好设置
+    this.initialPreferences = merge({}, overrides, defaultPreferences);
+
+    // 加载并合并当前存储的偏好设置
+    const mergedPreference = merge(
+      {},
+      // overrides,
+      this.loadCachedPreferences() || {},
+      this.initialPreferences,
+    );
+
+    // 更新偏好设置
+    this.updatePreferences(mergedPreference);
+
+    this.setupWatcher();
+
+    this.initPlatform();
+    // 标记为已初始化
+    this.isInitialized = true;
+  }
+
+  /**
+   * 重置偏好设置
+   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
+   *
+   * @example
+   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
+   * 当前 state 为 { theme: 'dark', language: 'fr' }
+   * this.resetPreferences();
+   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
+   * 并且 localStorage 中的对应项将被移除
+   */
+  resetPreferences() {
+    // 将状态重置为初始偏好设置
+    Object.assign(this.state, this.initialPreferences);
+    // 保存重置后的偏好设置
+    this.savePreferences(this.state);
+    // 从存储中移除偏好设置项
+    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+    this.updatePreferences(this.state);
+  }
+
+  /**
+   * 更新偏好设置
+   * @param updates - 要更新的偏好设置
+   */
+  public updatePreferences(updates: DeepPartial<Preferences>) {
+    const mergedState = merge({}, updates, markRaw(this.state));
+
+    Object.assign(this.state, mergedState);
+
+    // 根据更新的键值执行相应的操作
+    this.handleUpdates(updates);
+    this.savePreferences(this.state);
+  }
+
   /**
    * 保存偏好设置
    * @param {Preferences} preference - 需要保存的偏好设置
@@ -112,9 +198,16 @@ class PreferenceManager {
     window
       .matchMedia('(prefers-color-scheme: dark)')
       .addEventListener('change', ({ matches: isDark }) => {
-        this.updatePreferences({
-          theme: { mode: isDark ? 'dark' : 'light' },
-        });
+        // 如果偏好设置中主题模式为auto，则跟随系统更新
+        if (this.state.theme.mode === 'auto') {
+          this.updatePreferences({
+            theme: { mode: isDark ? 'dark' : 'light' },
+          });
+          // 恢复为auto模式
+          this.updatePreferences({
+            theme: { mode: 'auto' },
+          });
+        }
       });
   }
 
@@ -136,90 +229,6 @@ class PreferenceManager {
         : dom.classList.remove(COLOR_GRAY);
     }
   }
-
-  clearCache() {
-    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
-      this.cache?.removeItem(key);
-    });
-  }
-
-  public getInitialPreferences() {
-    return this.initialPreferences;
-  }
-
-  public getPreferences() {
-    return readonly(this.state);
-  }
-
-  /**
-   * 覆盖偏好设置
-   * overrides  要覆盖的偏好设置
-   * namespace  命名空间
-   */
-  public async initPreferences({ namespace, overrides }: InitialOptions) {
-    // 是否初始化过
-    if (this.isInitialized) {
-      return;
-    }
-    // 初始化存储管理器
-    this.cache = new StorageManager({ prefix: namespace });
-    // 合并初始偏好设置
-    this.initialPreferences = merge({}, overrides, defaultPreferences);
-
-    // 加载并合并当前存储的偏好设置
-    const mergedPreference = merge(
-      {},
-      // overrides,
-      this.loadCachedPreferences() || {},
-      this.initialPreferences,
-    );
-
-    // 更新偏好设置
-    this.updatePreferences(mergedPreference);
-
-    this.setupWatcher();
-
-    this.initPlatform();
-    // 标记为已初始化
-    this.isInitialized = true;
-  }
-
-  /**
-   * 重置偏好设置
-   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
-   *
-   * @example
-   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
-   * 当前 state 为 { theme: 'dark', language: 'fr' }
-   * this.resetPreferences();
-   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
-   * 并且 localStorage 中的对应项将被移除
-   */
-  resetPreferences() {
-    // 将状态重置为初始偏好设置
-    Object.assign(this.state, this.initialPreferences);
-    // 保存重置后的偏好设置
-    this.savePreferences(this.state);
-    // 从存储中移除偏好设置项
-    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
-      this.cache?.removeItem(key);
-    });
-    this.updatePreferences(this.state);
-  }
-
-  /**
-   * 更新偏好设置
-   * @param updates - 要更新的偏好设置
-   */
-  public updatePreferences(updates: DeepPartial<Preferences>) {
-    const mergedState = merge({}, updates, markRaw(this.state));
-
-    Object.assign(this.state, mergedState);
-
-    // 根据更新的键值执行相应的操作
-    this.handleUpdates(updates);
-    this.savePreferences(this.state);
-  }
 }
 
 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 { defineComponent, watch } from 'vue';
+
 import { usePreferences } from '@vben/preferences';
+
 import { useVbenForm } from '@vben-core/form-ui';
-import { defineComponent, watch } from 'vue';
+
 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>