refactor: refacotr preference

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceColorMode',
+});
+
+const colorWeakMode = defineModel<boolean>('colorWeakMode', {
+  default: false,
+});
+
+const colorGrayMode = defineModel<boolean>('colorGrayMode', {
+  default: false,
+});
+</script>
+
+<template>
+  <SwitchItem v-model="colorWeakMode">
+    {{ $t('preference.weak-mode') }}
+  </SwitchItem>
+  <SwitchItem v-model="colorGrayMode">
+    {{ $t('preference.gray-mode') }}
+  </SwitchItem>
+</template>

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { MdiEditBoxOutline } from '@vben-core/iconify';
+import { TinyColor, convertToHsl } from '@vben-core/toolkit';
+
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, watch, watchEffect } from 'vue';
+
+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-6 w-6 rounded-md"
+        ></div>
+      </div>
+    </template>
+    <div :style="inputStyle" class="outline-box p-2" @click="selectColor">
+      <div class="flex-center bg-accent relative h-6 w-6 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/common-ui/src/preferences/blocks/theme/theme.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  IcRoundMotionPhotosAuto,
+  IcRoundWbSunny,
+  MdiMoonAndStars,
+} from '@vben-core/iconify';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTheme',
+});
+
+const modelValue = defineModel<string>({ default: 'auto' });
+const semiDarkMenu = defineModel<boolean>('semiDarkMenu', {
+  default: true,
+});
+
+const THEME_PRESET = [
+  {
+    icon: IcRoundWbSunny,
+    name: 'light',
+  },
+  {
+    icon: MdiMoonAndStars,
+    name: 'dark',
+  },
+  {
+    icon: IcRoundMotionPhotosAuto,
+    name: 'auto',
+  },
+];
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+
+function nameView(name: string) {
+  switch (name) {
+    case 'light': {
+      return $t('preference.light');
+    }
+    case 'dark': {
+      return $t('preference.dark');
+    }
+    case 'auto': {
+      return $t('preference.follow-system');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in THEME_PRESET" :key="theme.name">
+      <div
+        class="flex cursor-pointer flex-col"
+        @click="modelValue = theme.name"
+      >
+        <div
+          :class="activeClass(theme.name)"
+          class="outline-box flex-center py-4"
+        >
+          <component :is="theme.icon" class="mx-9 size-5" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ nameView(theme.name) }}
+        </div>
+      </div>
+    </template>
+
+    <SwitchItem
+      v-model="semiDarkMenu"
+      :disabled="modelValue !== 'light'"
+      class="mt-6"
+    >
+      {{ $t('preference.dark-menu') }}
+    </SwitchItem>
+  </div>
+</template>