fix: 侧边栏使用SCSS变量

src/layout/components/Sidebar/index.vue

@@ -1,16 +1,13 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse"/>
-    <!-- :background-color="variables.menuBg"
-          :text-color="variables.menuText"
-          :active-text-color="variables.menuActiveText"-->
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
-          background-color="#304156"
+          :background-color="variables.menuBg"
-          text-color="#bfcbd9"
+          :text-color="variables.menuText"
-          active-text-color="#409EFF"
+          :active-text-color="variables.menuActiveText"
           :unique-opened="false"
           :collapse-transition="false"
           mode="vertical">
@@ -30,19 +27,18 @@
 import {computed, defineComponent} from "vue";
 import SidebarItem from './SidebarItem.vue'
 import Logo from './Logo.vue'
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/variables.module.scss'
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useAppStoreHook } from "@/store/modules/app";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import {useRoute} from 'vue-router'
 
-const route =useRoute()
 
+const route =useRoute()
 const routes =computed(() => usePermissionStoreHook().routes)
 const showLogo = computed(() => useSettingStoreHook().sidebarLogo)
 const isCollapse = computed(() => !useAppStoreHook().sidebar.opened)
 
-
 const activeMenu = computed(() => {
   const {meta, path} = route
   // if set path, the sidebar will highlight the path you set

src/store/modules/settings.ts

@@ -10,9 +10,9 @@ import variables from '@/styles/element-variables.module.scss'
 export const useSettingStore = defineStore({
     id: "setting",
     state: (): SettingState => ({
-        theme: localStorage.get("theme") || variables.theme,
+        theme: variables.theme || localStorage.get("theme"),
         showSettings: showSettings,
-        tagsView: tagsView,
+        tagsView: localStorage.get("tagsView") != null ? localStorage.get("tagsView") : tagsView,
         fixedHeader: fixedHeader,
         sidebarLogo: sidebarLogo,
     }),
@@ -31,6 +31,7 @@ export const useSettingStore = defineStore({
                     break
                 case 'tagsView':
                     this.tagsView = value
+                    localStorage.set("tagsView", value)
                     break
                 case 'sidebarLogo':
                     this.sidebarLogo = value