refactor: 暗黑模式自定义样式统一

Former-commit-id: 83dc3250edd859af22c13cf12835327c71709f55

src/layout/components/AppMain.vue

@@ -23,6 +23,7 @@ const tagsViewStore = useTagsViewStore();
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color: var(--el-bg-color-page);
 }
 
 .fixed-header + .app-main {

src/layout/components/Settings/index.vue

@@ -9,7 +9,7 @@ import { useDark, useToggle } from '@vueuse/core';
  */
 const settingsStore = useSettingsStore();
 const isDark = useDark();
-const toggleDark = useToggle(isDark);
+const toggleDark = () => useToggle(isDark);
 
 /**
  * 切换布局
@@ -28,30 +28,32 @@ onMounted(() => {
   <div class="settings-container">
     <h3 class="text-base font-bold">项目配置</h3>
     <el-divider />
-    <div class="drawer-item">
-      <span>开启 Tags-View</span>
-      <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">开启 Tags-View</span>
+      <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="drawer-item">
-      <span>固定 Header</span>
-      <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">固定 Header</span>
+      <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="drawer-item">
-      <span>侧边栏 Logo</span>
-      <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">侧边栏 Logo</span>
+      <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
     <el-divider>主题</el-divider>
 
     <div class="flex justify-center" @click.stop>
-     <el-switch
+      <el-switch
         v-model="isDark"
         @change="toggleDark"
         inline-prompt
-        :active-icon="Sunny"
-        :inactive-icon="Moon"
+        :active-icon="Moon"
+        :inactive-icon="Sunny"
+        active-color="var(--el-fill-color-dark)"
+        inactive-color="var(--el-color-primary)"
       />
     </div>
 
@@ -101,25 +103,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .settings-container {
   padding: 16px;
-  font-size: 14px;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, 0.85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right;
-  }
-
   .layout {
     display: flex;
     flex-wrap: wrap;

src/layout/components/Sidebar/Logo.vue

@@ -17,7 +17,7 @@ const logo = ref<string>(
 </script>
 
 <template>
-  <transition class="bg-gray-800">
+  <transition class="bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
     <router-link
       v-if="collapse"
       key="collapse"

src/layout/components/Sidebar/index.vue

@@ -8,7 +8,7 @@ import { useSettingsStore } from '@/store/modules/settings';
 import { usePermissionStore } from '@/store/modules/permission';
 import { useAppStore } from '@/store/modules/app';
 import { storeToRefs } from 'pinia';
-import variables from '@/styles/ts-variables.module.scss'
+import variables from '@/styles/ts-variables.module.scss';
 
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
@@ -16,25 +16,15 @@ const appStore = useAppStore();
 
 const { sidebarLogo } = storeToRefs(settingsStore);
 const route = useRoute();
-
-const isCollapse = computed(() => !appStore.sidebar.opened);
-
-const activeMenu = computed<string>(() => {
-  const { meta, path } = route;
-  if (meta?.activeMenu) {
-    return meta.activeMenu;
-  }
-  return path;
-});
 </script>
 
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <logo v-if="sidebarLogo" :collapse="isCollapse" />
+    <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar>
       <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
+        :default-active="route.path"
+        :collapse="!appStore.sidebar.opened"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
         :active-text-color="variables.menuActiveText"
@@ -47,7 +37,7 @@ const activeMenu = computed<string>(() => {
           :item="route"
           :key="route.path"
           :base-path="route.path"
-          :is-collapse="isCollapse"
+          :is-collapse="!appStore.sidebar.opened"
         />
       </el-menu>
     </el-scrollbar>