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>