chore: Optimize multi-theme switching

packages/business/universal-ui/src/preferences/blocks/index.ts

@@ -11,6 +11,7 @@ export { default as Sidebar } from './layout/sidebar.vue';
 export { default as Tabbar } from './layout/tabbar.vue';
 export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
 export { default as SwitchItem } from './switch-item.vue';
-export { default as ThemeColor } from './theme/color.vue';
+export { default as BuiltinTheme } from './theme/builtin.vue';
 export { default as ColorMode } from './theme/color-mode.vue';
+export { default as Radius } from './theme/radius.vue';
 export { default as Theme } from './theme/theme.vue';

packages/business/universal-ui/src/preferences/blocks/theme/builtin.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { BuiltinThemeType } from '@vben/types';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import { TinyColor, convertToHsl } from '@vben-core/colorful';
+import { MdiEditBoxOutline } from '@vben-core/iconify';
+import {
+  BUILT_IN_THEME_PRESETS,
+  type BuiltinThemePreset,
+} from '@vben-core/preferences';
+
+defineOptions({
+  name: 'PreferenceBuiltinTheme',
+});
+
+const props = defineProps<{ isDark: boolean }>();
+
+const colorInput = ref();
+const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+
+const inputValue = computed(() => {
+  return new TinyColor(themeColorPrimary.value).toHexString();
+});
+
+function typeView(name: BuiltinThemeType) {
+  switch (name) {
+    case 'default': {
+      return $t('preferences.theme.default');
+    }
+    case 'violet': {
+      return $t('preferences.theme.violet');
+    }
+    case 'pink': {
+      return $t('preferences.theme.pink');
+    }
+    case 'rose': {
+      return $t('preferences.theme.rose');
+    }
+    case 'sky-blue': {
+      return $t('preferences.theme.sky-blue');
+    }
+    case 'deep-blue': {
+      return $t('preferences.theme.deep-blue');
+    }
+
+    case 'green': {
+      return $t('preferences.theme.green');
+    }
+    case 'deep-green': {
+      return $t('preferences.theme.deep-green');
+    }
+    case 'orange': {
+      return $t('preferences.theme.orange');
+    }
+    case 'yellow': {
+      return $t('preferences.theme.yellow');
+    }
+    case 'zinc': {
+      return $t('preferences.theme.zinc');
+    }
+    case 'neutral': {
+      return $t('preferences.theme.neutral');
+    }
+    case 'slate': {
+      return $t('preferences.theme.slate');
+    }
+    case 'gray': {
+      return $t('preferences.theme.gray');
+    }
+    case 'custom': {
+      return $t('preferences.theme.custom');
+    }
+  }
+}
+
+function handleSelect(theme: BuiltinThemePreset) {
+  modelValue.value = theme.type;
+  const primaryColor = props.isDark
+    ? theme.darkPrimaryColor || theme.primaryColor
+    : theme.primaryColor;
+
+  themeColorPrimary.value = primaryColor || theme.color;
+}
+
+function handleInputChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  themeColorPrimary.value = convertToHsl(target.value);
+}
+
+function selectColor() {
+  colorInput.value?.[0]?.click?.();
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in BUILT_IN_THEME_PRESETS" :key="theme.type">
+      <div class="flex cursor-pointer flex-col" @click="handleSelect(theme)">
+        <div
+          :class="{
+            'outline-box-active': theme.type === modelValue,
+          }"
+          class="outline-box flex-center group cursor-pointer"
+        >
+          <template v-if="theme.type !== 'custom'">
+            <div
+              :style="{ backgroundColor: theme.color }"
+              class="mx-10 my-2 size-5 rounded-md"
+            ></div>
+          </template>
+          <template v-else>
+            <div class="size-full px-10 py-2" @click.stop="selectColor">
+              <div class="flex-center relative size-5 rounded-sm">
+                <MdiEditBoxOutline
+                  class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
+                />
+                <input
+                  ref="colorInput"
+                  :value="inputValue"
+                  class="absolute inset-0 opacity-0"
+                  type="color"
+                  @input="handleInputChange"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="text-muted-foreground my-2 text-center text-xs">
+          {{ typeView(theme.type) }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/business/universal-ui/src/preferences/blocks/theme/color.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue';
-import { computed, ref, watch, watchEffect } from 'vue';
-
-import { MdiEditBoxOutline } from '@vben-core/iconify';
-import { TinyColor, convertToHsl } from '@vben-core/toolkit';
-
-defineOptions({
-  name: 'PreferenceColor',
-});
-
-const props = withDefaults(defineProps<{ colorPrimaryPresets: string[] }>(), {
-  colorPrimaryPresets: () => [],
-});
-
-const colorInput = ref();
-const currentColor = ref(props.colorPrimaryPresets?.[0]);
-
-const modelValue = defineModel<string>();
-
-const activeColor = computed((): CSSProperties => {
-  return {
-    outlineColor: currentColor.value,
-    outlineWidth: '2px',
-  };
-});
-
-function isActive(color: string): string[] {
-  return color === currentColor.value ? ['outline-box-active'] : [];
-}
-
-const inputStyle = computed((): CSSProperties => {
-  return props.colorPrimaryPresets.includes(currentColor.value)
-    ? {}
-    : activeColor.value;
-});
-
-const inputValue = computed(() => {
-  return new TinyColor(modelValue.value).toHexString();
-});
-
-function selectColor() {
-  colorInput.value.click();
-}
-
-function handleInputChange(e: Event) {
-  const target = e.target as HTMLInputElement;
-  modelValue.value = convertToHsl(target.value);
-}
-
-// 监听颜色变化，转成系统可识别的 hsl 格式
-watch(currentColor, (val) => {
-  modelValue.value = convertToHsl(val);
-});
-
-watchEffect(() => {
-  if (modelValue.value) {
-    currentColor.value = modelValue.value;
-  }
-});
-</script>
-
-<template>
-  <div class="flex w-full flex-wrap justify-between">
-    <template v-for="color in colorPrimaryPresets" :key="color">
-      <div
-        :class="isActive(color)"
-        class="outline-box p-2"
-        @click="currentColor = color"
-      >
-        <div
-          :style="{ backgroundColor: color }"
-          class="h-5 w-5 rounded-md"
-        ></div>
-      </div>
-    </template>
-    <div :style="inputStyle" class="outline-box p-2" @click="selectColor">
-      <div class="flex-center bg-accent relative h-5 w-5 rounded-md">
-        <MdiEditBoxOutline class="absolute z-10" />
-        <input
-          ref="colorInput"
-          :value="inputValue"
-          class="absolute inset-0 opacity-0"
-          type="color"
-          @input="handleInputChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>

packages/business/universal-ui/src/preferences/blocks/theme/radius.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceColorMode',
+});
+
+const modelValue = defineModel<string | undefined>('themeRadius', {
+  default: '0.5',
+});
+
+const items = [
+  { label: '0', value: '0' },
+  { label: '0.25', value: '0.25' },
+  { label: '0.5', value: '0.5' },
+  { label: '0.75', value: '0.75' },
+  { label: '1', value: '1' },
+];
+</script>
+
+<template>
+  <ToggleGroup
+    v-model="modelValue"
+    class="gap-2"
+    size="sm"
+    type="single"
+    variant="outline"
+  >
+    <template v-for="item in items" :key="item.value">
+      <ToggleGroupItem
+        :value="item.value"
+        class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
+      >
+        {{ item.label }}
+      </ToggleGroupItem>
+    </template>
+  </ToggleGroup>
+</template>

packages/business/universal-ui/src/preferences/blocks/theme/theme.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import type { ThemeModeType } from '@vben-core/preferences';
+
+import type { Component } from 'vue';
+
 import { $t } from '@vben/locales';
 import {
   IcRoundMotionPhotosAuto,
@@ -17,7 +21,7 @@ const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu', {
   default: true,
 });
 
-const THEME_PRESET = [
+const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
   {
     icon: IcRoundWbSunny,
     name: 'light',