refactor: ♻️ 代码重构优化

src/layout/components/Settings/index.vue

@@ -1,8 +1,97 @@
+<template>
+  <div class="settings-container">
+    <h3 class="text-base font-bold">项目配置</h3>
+    <el-divider>主题设置</el-divider>
+
+    <div class="flex-center">
+      <el-switch
+        v-model="isDark"
+        :active-icon="IconEpMoon"
+        :inactive-icon="IconEpSunny"
+        @change="handleThemeChange"
+      />
+    </div>
+
+    <el-divider>界面设置</el-divider>
+    <div class="py-[8px] flex justify-between">
+      <el-text>开启 Tags-View</el-text>
+      <el-switch v-model="settingsStore.tagsView" />
+    </div>
+
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">固定 Header</span>
+      <el-switch v-model="settingsStore.fixedHeader" />
+    </div>
+
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">侧边栏 Logo</span>
+      <el-switch v-model="settingsStore.sidebarLogo" />
+    </div>
+
+    <el-divider>主题颜色</el-divider>
+
+    <ul class="w-full space-x-2 flex justify-center py-2">
+      <li
+        v-for="(color, index) in themeColors"
+        :key="index"
+        class="inline-block w-[30px] h-[30px] cursor-pointer theme-wrap"
+        :style="{ background: color }"
+        @click="changeThemeColor(color)"
+      >
+        <i-ep-check v-show="color === currentThemeColor" />
+      </li>
+    </ul>
+
+    <el-divider>导航设置</el-divider>
+
+    <ul class="layout">
+      <el-tooltip content="左侧模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-left ' +
+            (settingsStore.layout === 'left' ? 'is-active' : '')
+          "
+          @click="changeLayout('left')"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+      <el-tooltip content="顶部模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-top ' +
+            (settingsStore.layout === 'top' ? 'is-active' : '')
+          "
+          @click="changeLayout('top')"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+      <el-tooltip content="混合模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-mix ' +
+            (settingsStore.layout === 'mix' ? 'is-active' : '')
+          "
+          @click="changeLayout('mix')"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+    </ul>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
 import { useAppStore } from "@/store/modules/app";
 import { useRoute } from "vue-router";
+import IconEpSunny from "~icons/ep/sunny";
+import IconEpMoon from "~icons/ep/moon";
 
 const route = useRoute();
 
@@ -76,6 +165,19 @@ function changeThemeColor(color: string) {
 const currentThemeColor = computed(() => {
   return settingsStore.themeColor;
 });
+
+/**
+ * 切换主题
+ */
+const isDark = ref<boolean>(settingsStore.theme === "dark");
+const handleThemeChange = (isDark: any) => {
+  useToggle(isDark);
+  settingsStore.changeSetting({
+    key: "theme",
+    value: isDark ? "dark" : "light",
+  });
+};
+
 onMounted(() => {
   window.document.body.setAttribute("layout", settingsStore.layout);
   const theme = settingsStore.theme;
@@ -90,83 +192,6 @@ onMounted(() => {
 });
 </script>
 
-<template>
-  <div class="settings-container">
-    <h3 class="text-base font-bold">项目配置</h3>
-
-    <el-divider>界面设置</el-divider>
-    <div class="py-[8px] flex justify-between">
-      <span class="text-xs">开启 Tags-View</span>
-      <el-switch v-model="settingsStore.tagsView" />
-    </div>
-
-    <div class="py-[8px] flex justify-between">
-      <span class="text-xs">固定 Header</span>
-      <el-switch v-model="settingsStore.fixedHeader" />
-    </div>
-
-    <div class="py-[8px] flex justify-between">
-      <span class="text-xs">侧边栏 Logo</span>
-      <el-switch v-model="settingsStore.sidebarLogo" />
-    </div>
-
-    <el-divider>主题颜色</el-divider>
-
-    <ul class="w-full space-x-2 flex justify-center py-2">
-      <li
-        v-for="(color, index) in themeColors"
-        :key="index"
-        class="inline-block w-[30px] h-[30px] cursor-pointer theme-wrap"
-        :style="{ background: color }"
-        @click="changeThemeColor(color)"
-      >
-        <i-ep-check v-show="color === currentThemeColor" />
-      </li>
-    </ul>
-
-    <el-divider>导航设置</el-divider>
-
-    <ul class="layout">
-      <el-tooltip content="左侧模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-left ' +
-            (settingsStore.layout === 'left' ? 'is-active' : '')
-          "
-          @click="changeLayout('left')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-      <el-tooltip content="顶部模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-top ' +
-            (settingsStore.layout === 'top' ? 'is-active' : '')
-          "
-          @click="changeLayout('top')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-      <el-tooltip content="混合模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-mix ' +
-            (settingsStore.layout === 'mix' ? 'is-active' : '')
-          "
-          @click="changeLayout('mix')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-    </ul>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .settings-container {
   padding: 16px;

src/layout/components/Sidebar/LeftMenu.vue

@@ -46,7 +46,7 @@ function resolvePath(routePath: string) {
 </script>
 <template>
   <el-menu
-    :default-active="layout === 'top' ? '-' : currRoute.path"
+    :default-active="currRoute.path"
     :collapse="!appStore.sidebar.opened"
     :background-color="variables.menuBg"
     :text-color="variables.menuText"

src/layout/main.vue

@@ -1,3 +1,18 @@
+<template>
+  <div :class="{ hasTagsView: showTagsView }" class="main-container">
+    <div :class="{ 'fixed-header': fixedHeader, device: device }">
+      <navbar v-if="layout === 'left'" />
+      <tags-view v-if="showTagsView" />
+    </div>
+    <!--主页面-->
+    <app-main />
+    <!-- 设置面板 -->
+    <RightPanel v-if="showSettings">
+      <settings />
+    </RightPanel>
+  </div>
+</template>
+
 <script lang="ts" setup>
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
@@ -42,20 +57,6 @@ watchEffect(() => {
   }
 });
 </script>
-<template>
-  <div :class="{ hasTagsView: showTagsView }" class="main-container">
-    <div :class="{ 'fixed-header': fixedHeader, device: device }">
-      <navbar v-if="layout === 'left'" />
-      <tags-view v-if="showTagsView" />
-    </div>
-    <!--主页面-->
-    <app-main />
-    <!-- 设置面板 -->
-    <RightPanel v-if="showSettings">
-      <settings />
-    </RightPanel>
-  </div>
-</template>
 
 <style lang="scss" scoped>
 .fixed-header {
@@ -75,14 +76,12 @@ watchEffect(() => {
   width: 100%;
 }
 
-.isTop .fixed-header {
+body[layout="top"] .fixed-header {
+  top: 50px;
   width: 100% !important;
 }
 
-.isMix,
-.isTop {
-  .fixed-header {
-    top: 50px;
-  }
+body[layout="mix"] .fixed-header {
+  top: 50px;
 }
 </style>