优化UI

app/src/components/switch/DayNightSwitch.vue

@@ -1,62 +1,71 @@
 <script lang="ts" setup>
-  import { PropType, watch, computed } from 'vue';
-  import useModelValue from '@/utils/useModelValue';
-  import cloneDeep from 'lodash/cloneDeep';
-  import { storeToRefs } from 'pinia';
-  import { useThemeStore, ThemeProvider } from 'stepin/es/theme-provider';
+import { PropType, watch, computed } from 'vue';
+import useModelValue from '@/utils/useModelValue';
+import cloneDeep from 'lodash/cloneDeep';
+import { storeToRefs } from 'pinia';
+import { useThemeStore, ThemeProvider } from 'stepin/es/theme-provider';
 
-  export type Type = 'day' | 'night';
+export type Type = 'day' | 'night';
 
-  const props = defineProps({
-    value: { type: String as PropType<Type> },
-    nightColor: { type: String, default: '#1D1D1D' },
-  });
+const props = defineProps({
+  value: { type: String as PropType<Type> },
+  // nightColor: { type: String, default: '#1D1D1D' },
+  nightColor: { type: String, default: '#1a1a2e' },
+});
 
-  const emit = defineEmits<{
-    (e: 'update:value', value: Type): void;
-  }>();
+const emit = defineEmits<{
+  (e: 'update:value', value: Type): void;
+}>();
 
-  const { value: _value } = useModelValue(
-    () => props.value,
-    (val) => emit('update:value', val),
-    'day'
-  );
-  const switcher: { [key in Type]: Type } = {
-    day: 'night',
-    night: 'day',
-  };
+const { value: _value } = useModelValue(
+  () => props.value,
+  (val) => emit('update:value', val),
+  'day'
+);
+const switcher: { [key in Type]: Type } = {
+  day: 'night',
+  night: 'day',
+};
 
-  const { theme } = storeToRefs(useThemeStore());
+const { theme } = storeToRefs(useThemeStore());
 
-  // 监听主题色变换，更新缓存
-  let cachedMiddleColors = cloneDeep(theme.value.color.middle);
-  watch(
-    theme,
-    (val) => {
-      if (val.color.middle['bg-base'] !== props.nightColor) {
-        cachedMiddleColors = cloneDeep(val.color.middle);
-        _value.value = 'day';
-      } else {
-        _value.value = 'night';
-      }
-    },
-    { deep: true }
-  );
-
-  // 主题颜色配置
-  const colorCfg = computed(() => {
-    if (_value.value === 'day') {
-      return { middle: cachedMiddleColors };
+// 监听主题色变换，更新缓存
+let cachedMiddleColors = cloneDeep(theme.value.color.middle);
+watch(
+  theme,
+  (val) => {
+    if (val.color.middle['bg-base'] !== props.nightColor) {
+      cachedMiddleColors = cloneDeep(val.color.middle);
+      _value.value = 'day';
+    } else {
+      _value.value = 'night';
     }
-    return { middle: { 'bg-base': props.nightColor } };
-  });
+    console.log('theme', _value.value);
+    updateHtmlClass(_value.value);
+  },
+  { deep: true }
+);
+
+// 在你的主题store中添加切换逻辑
+const updateHtmlClass = (mode) => {
+  const html = document.documentElement;
+  if (mode === 'night') {
+    html.classList.add('dark-mode');
+  } else {
+    html.classList.remove('dark-mode');
+  }
+};
+// 主题颜色配置
+const colorCfg = computed(() => {
+  if (_value.value === 'day') {
+    return { middle: cachedMiddleColors };
+  }
+  return { middle: { 'bg-base': props.nightColor } };
+});
 </script>
 <template>
   <ThemeProvider is-root :color="colorCfg">
-    <div
-      @click="() => (_value = switcher[_value])"
-      class="bg-fill-2 day-night-switch hover:border-border relative border-border-2 text-lg rounded-full border border-solid flex items-center"
-    >
+    <div @click="() => (_value = switcher[_value])" class="bg-fill-2 day-night-switch hover:border-border relative border-border-2 text-lg rounded-full border border-solid flex items-center">
       <div :class="`spot transition-[left] duration-300 h-full absolute rounded-full bg-container ${_value}`"></div>
       <IconFont :class="`day-night-switch-item ${_value === 'day' ? 'checked' : ''}`" name="icon-sun" />
       <IconFont :class="`day-night-switch-item ${_value === 'night' ? 'checked' : ''}`" name="icon-moono" />
@@ -64,22 +73,22 @@
   </ThemeProvider>
 </template>
 <style scoped lang="less">
-  .day-night-switch {
-    .spot {
-      width: calc(50% - 1px);
-      z-index: 1;
-      left: 0;
-      &.night {
-        left: calc(50% + 1px);
-        @apply bg-layout;
-      }
-    }
-
-    &-item {
-      @apply z-20 bg-transparent p-xxs rounded-full text-disabled ~"last:ml-[2px]";
-      &.checked {
-        @apply text-text;
-      }
+.day-night-switch {
+  .spot {
+    width: calc(50% - 1px);
+    z-index: 1;
+    left: 0;
+    &.night {
+      left: calc(50% + 1px);
+      @apply bg-layout;
     }
   }
+
+  &-item {
+    @apply z-20 bg-transparent p-xxs rounded-full text-disabled ~"last:ml-[2px]";
+    &.checked {
+      @apply text-text;
+    }
+  }
+}
 </style>