fix: 修改UI结构，封装切换按钮

src/components/ThemeSelect/index.ts

@@ -0,0 +1,3 @@
+import ThemeSelect from './index.vue';
+
+export { ThemeSelect };

src/components/ThemeSelect/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <n-button quaternary @click="changeTheme">
+      <n-icon size="20" :depth="1">
+        <MoonIcon v-if="designStore.darkTheme" />
+        <SunnyIcon v-else />
+      </n-icon>
+    </n-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { setHtmlTheme } from '@/utils/style'
+import { Moon as MoonIcon, Sunny as SunnyIcon } from '@vicons/ionicons5'
+
+const designStore = useDesignStore()
+
+// 改变样式
+const changeTheme = () => {
+  designStore.changeTheme()
+  setHtmlTheme()
+}
+</script>

src/enums/styleEnum.ts

@@ -0,0 +1,4 @@
+export enum ThemeEnum {
+  dark = 'dark',
+  light = 'light'
+}

src/layout/components/Main/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <RouterView>
+  <router-view>
     <template #default="{ Component, route }">
       <transition name="zoom-fade" mode="out-in" appear>
         <keep-alive>
@@ -7,5 +7,5 @@
         </keep-alive>
       </transition>
     </template>
-  </RouterView>
+  </router-view>
 </template>

src/styles/common/_dark.scss

@@ -0,0 +1,10 @@
+@import './var.scss';
+
+$dark: (
+  //背景
+    background-color: $--color-dark-bg-1,
+  //渐变背景
+    background-image: linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-2 100%),
+  //毛玻璃
+    filter-color: $--filter-color-login-dark
+);

src/styles/common/_light.scss

@@ -0,0 +1,10 @@
+@import './var.scss';
+
+$light: (
+  //背景
+    background_color: $--color-light-fill-3,
+  //渐变背景
+    background-image: linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
+  //毛玻璃
+    filter-color: $--filter-color-login-light
+);

src/styles/common/mixins/mixins.scss

@@ -1,6 +1,6 @@
 @import './config.scss';
 @import './function.scss';
-@import './theme.scss';
+@import '../theme.scss';
 
 @mixin go($block) {
   $B: $namespace + '-' + $block;

src/styles/common/mixins/theme.scss

@@ -1,25 +0,0 @@
-@import './config.scss';
-@import '../var.scss';
-
-$themes: (
-  #{$theme-light}: (
-      background_color: #cccccc,
-      //背景色
-        background-image:
-        linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
-      //文字
-        text-color: #000000a6,
-      //毛玻璃
-        filter-color: $--filter-color-login-light
-    ),
-  #{$theme-dark}: (
-      background-color: $--color-bg-1,
-      //背景
-        background-image:
-        linear-gradient(120deg, $--color-bg-1 0%, $--color-bg-2 100%),
-      //文字
-        text-color: $--color-text-3,
-      //毛玻璃
-        filter-color: $--filter-color-login-dark
-    )
-);

src/styles/common/theme.scss

@@ -0,0 +1,10 @@
+@import './mixins/config.scss';
+@import './_dark.scss';
+@import './_light.scss';
+
+$themes: (
+  // 亮白
+  #{$theme-light}: $light,
+  // 暗黑
+  #{$theme-dark}: $dark
+);

src/styles/common/var.scss

@@ -4,19 +4,27 @@ $--color-warn: #fcbc40;
 $--color-success: #34c749;
 
 // 文字
+$--color-text: hsla(0, 0%, 100%, 1);
 $--color-text-1: hsla(0, 0%, 100%, 0.9);
 $--color-text-2: hsla(0, 0%, 100%, 0.7);
 $--color-text-3: hsla(0, 0%, 100%, 0.5);
 $--color-text-4: hsla(0, 0%, 100%, 0.3);
 
+// 白色
+$--color-light-fill: #fff;
+$--color-light-fill-1: #f7f8fa;
+$--color-light-fill-2: #f2f3f5;
+$--color-light-fill-3: #e5e6eb;
+$--color-light-fill-4: #c9cdd4;
+
 // 黑色
-$--color-black: #000;
+$--color-dark-black: #000;
-$--color-border: #333335;
+$--color-dark-bg-1: #17171a;
-$--color-bg-1: #17171a;
+$--color-dark-bg-2: #232324;
-$--color-bg-2: #232324;
+$--color-dark-bg-3: #2a2a2b;
-$--color-bg-3: #2a2a2b;
+$--color-dark-bg-4: #313132;
-$--color-bg-4: #313132;
+$--color-dark-bg-5: #373739;
-$--color-bg-5: #373739;
+$--color-dark-border: #333335;
 
 // 最大宽度
 $--max-width: 1920px;
@@ -33,6 +41,6 @@ $--filter-color-login-light: rgba(187, 202, 217, 0.7);
 
 // 边框
 $--border-radius-base: 8px;
-$--border-bottom-style: 1px solid $--color-border;
+$--border-bottom-style: 1px solid $--color-dark-border;
 // 阴影
 $--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

src/views/login/index.vue

@@ -17,12 +17,7 @@
     <header class="go-login-box-header">
       <div></div>
       <div class="header-ri">
-        <n-button quaternary @click="changeTheme">
+        <ThemeSelect />
-          <n-icon size="20" :depth="1">
-            <MoonIcon v-if="designStore.darkTheme" />
-            <SunnyIcon v-else />
-          </n-icon>
-        </n-button>
       </div>
     </header>
     <n-divider class="go-login-box-divider" />
@@ -125,12 +120,9 @@ import { useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import {
   PersonOutline as PersonOutlineIcon,
-  LockClosedOutline as LockClosedOutlineIcon,
+  LockClosedOutline as LockClosedOutlineIcon
-  Moon as MoonIcon,
-  Sunny as SunnyIcon
 } from '@vicons/ionicons5'
 import { requireUrl } from '@/utils/index'
-import { setHtmlTheme } from '@/utils/style'
 import shuffle from 'lodash/shuffle'
 import { carouselInterval } from '@/settings/designSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
@@ -188,12 +180,6 @@ const getImageUrl = (name: string, folder: string) => {
   return requireUrl(`../assets/images/${folder}`, `${name}.png`)
 }
 
-// 改变样式
-const changeTheme = () => {
-  designStore.changeTheme()
-  setHtmlTheme()
-}
-
 // 打乱
 const shuffleHandle = () => {
   shuffleTimiing.value = setInterval(() => {