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

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

@@ -1,6 +1,6 @@
 import { reactive, watch } from 'vue';
 
-import { preferences } from '@vben/preferences';
+import { preferences, usePreferences } from '@vben/preferences';
 import { convertToRgb, updateCSSVariables } from '@vben/utils';
 
 /**
@@ -160,53 +160,64 @@ export function useNaiveDesignTokens() {
 }
 
 export function useElementPlusDesignTokens() {
+  const { isDark } = usePreferences();
   const rootStyles = getComputedStyle(document.documentElement);
 
+  const getCssVariableValueRaw = (variable: string) => {
+    return rootStyles.getPropertyValue(variable);
+  };
+
   const getCssVariableValue = (variable: string, isColor: boolean = true) => {
-    const value = rootStyles.getPropertyValue(variable);
+    const value = getCssVariableValueRaw(variable);
     return isColor ? convertToRgb(`hsl(${value})`) : value;
   };
+
   watch(
     () => preferences.theme,
     () => {
       const background = getCssVariableValue('--background');
       const border = getCssVariableValue('--border');
+      const accent = getCssVariableValue('--accent');
+
       const variables: Record<string, string> = {
         '--el-bg-color': background,
         '--el-bg-color-overlay': getCssVariableValue('--popover'),
         '--el-bg-color-page': getCssVariableValue('--background-deep'),
         '--el-border-color': border,
         '--el-border-color-dark': border,
+        '--el-border-color-hover': accent,
         '--el-border-color-light': border,
         '--el-border-color-lighter': border,
-        '--el-border-radius-base': getCssVariableValue('--radius', false),
 
+        '--el-border-radius-base': getCssVariableValue('--radius', false),
         '--el-color-danger': getCssVariableValue('--destructive-500'),
         '--el-color-danger-dark-2': getCssVariableValue('--destructive'),
         '--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
         '--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
         '--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
         '--el-color-danger-light-8': getCssVariableValue('--destructive-100'),
-        '--el-color-danger-light-9': getCssVariableValue('--destructive-50'),
 
+        '--el-color-danger-light-9': getCssVariableValue('--destructive-50'),
         '--el-color-error': getCssVariableValue('--destructive-500'),
         '--el-color-error-dark-2': getCssVariableValue('--destructive'),
         '--el-color-error-light-3': getCssVariableValue('--destructive-400'),
         '--el-color-error-light-5': getCssVariableValue('--destructive-300'),
         '--el-color-error-light-7': getCssVariableValue('--destructive-200'),
         '--el-color-error-light-8': getCssVariableValue('--destructive-100'),
+
         '--el-color-error-light-9': getCssVariableValue('--destructive-50'),
-
         '--el-color-info-light-8': border,
-        '--el-color-info-light-9': background,
 
+        '--el-color-info-light-9': background,
         '--el-color-primary': getCssVariableValue('--primary-500'),
         '--el-color-primary-dark-2': getCssVariableValue('--primary'),
         '--el-color-primary-light-3': getCssVariableValue('--primary-400'),
         '--el-color-primary-light-5': getCssVariableValue('--primary-300'),
         '--el-color-primary-light-7': getCssVariableValue('--primary-200'),
         '--el-color-primary-light-8': getCssVariableValue('--primary-100'),
-        '--el-color-primary-light-9': getCssVariableValue('--primary-50'),
+        '--el-color-primary-light-9': isDark.value
+          ? accent
+          : getCssVariableValue('--primary-50'),
 
         '--el-color-success': getCssVariableValue('--success-500'),
         '--el-color-success-dark-2': getCssVariableValue('--success'),
@@ -214,18 +225,20 @@ export function useElementPlusDesignTokens() {
         '--el-color-success-light-5': getCssVariableValue('--success-300'),
         '--el-color-success-light-7': getCssVariableValue('--success-200'),
         '--el-color-success-light-8': getCssVariableValue('--success-100'),
-        '--el-color-success-light-9': getCssVariableValue('--success-50'),
 
+        '--el-color-success-light-9': getCssVariableValue('--success-50'),
         '--el-color-warning': getCssVariableValue('--warning-500'),
         '--el-color-warning-dark-2': getCssVariableValue('--warning'),
         '--el-color-warning-light-3': getCssVariableValue('--warning-400'),
         '--el-color-warning-light-5': getCssVariableValue('--warning-300'),
         '--el-color-warning-light-7': getCssVariableValue('--warning-200'),
         '--el-color-warning-light-8': getCssVariableValue('--warning-100'),
-        '--el-color-warning-light-9': getCssVariableValue('--warning-50'),
 
+        '--el-color-warning-light-9': getCssVariableValue('--warning-50'),
         '--el-fill-color-blank': background,
+        '--el-fill-color-light': getCssVariableValue('--accent'),
         '--el-text-color-primary': getCssVariableValue('--foreground'),
+
         '--el-text-color-regular': getCssVariableValue('--foreground'),
       };
       updateCSSVariables(variables, `__vben_design_styles__`);

packages/effects/layouts/src/basic/content/content-spinner.vue

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type { CSSProperties } from 'vue';
-
 import { VbenSpinner } from '@vben-core/shadcn-ui';
 
 import { useContentSpinner } from './use-content-spinner';
 
 defineOptions({ name: 'LayoutContentSpinner' });
 
-defineProps<{ overlayStyle: CSSProperties }>();
-
 const { spinning } = useContentSpinner();
 </script>
 <template>
-  <VbenSpinner :spinning="spinning" :style="overlayStyle" />
+  <VbenSpinner :spinning="spinning" />
 </template>

packages/effects/layouts/src/basic/layout.vue

@@ -295,11 +295,8 @@ const headerSlots = computed(() => {
     <template #content>
       <LayoutContent />
     </template>
-    <template
-      v-if="preferences.transition.loading"
-      #content-overlay="{ overlayStyle }"
-    >
-      <LayoutContentSpinner :overlay-style="overlayStyle" />
+    <template v-if="preferences.transition.loading" #content-overlay>
+      <LayoutContentSpinner />
     </template>
 
     <!-- 页脚 -->

packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue

@@ -23,7 +23,9 @@ const modelValue = defineModel<string>();
     class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
     disabled
   >
-    <span class="text-sm"><slot></slot></span>
+    <span class="text-sm">
+      <slot></slot>
+    </span>
     <ToggleGroup
       v-model="modelValue"
       class="gap-2"