添加统一管理颜色、字体功能

Author: lpya

src/App.vue

@@ -3,19 +3,46 @@
   <!-- <el-button @click="test">测试</el-button> -->
 </template>
 <script lang="ts" setup>
-import { useStore } from 'vuex'
 import { computed } from 'vue'
+
+import { useStore } from 'vuex'
 const store = useStore()
-const menuBg = computed(() => store.state.theme.styles.menuBg)
-// const test = () => {
-//   store.commit('SET_TEST')
-//   console.log(menuBg.value)
-// }
+
+const sidebarBg = computed(() => store.state.theme.styles.sidebarBg)
+const headerBg = computed(() => store.state.theme.styles.headerBg)
+const mainBg = computed(() => store.state.theme.styles.mainBg)
+const subMenuBg = computed(() => store.state.theme.styles.subMenuBg)
+const subMenuHover = computed(() => store.state.theme.styles.subMenuHover)
+const test = () => {
+  store.commit('SET_TEST')
+}
 </script>
 <style lang="scss">
 #app {
-  .app-menu-bg {
-    background: v-bind(menuBg);
+  .app-sidebar-bg {
+    background: v-bind(sidebarBg);
+  }
+  .app-header-bg {
+    background: v-bind(headerBg);
+  }
+  .app-main-bg {
+    background: v-bind(mainBg);
+  }
+  .el-menu {
+    .el-sub-menu {
+      .el-menu {
+        background: v-bind(subMenuBg);
+        li:hover {
+          background: v-bind(subMenuHover);
+        }
+        .el-sub-menu__title {
+          background: v-bind(subMenuBg) !important;
+          &:hover {
+            background: v-bind(subMenuHover) !important;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/interface/index.ts

@@ -35,12 +35,18 @@ export interface IPermission {
 }
 
 /**
- * 主题颜色
+ * 主题颜色、字体
  */
 export interface ITheme {
   styles: IThemeStyles
 }
 export interface IThemeStyles {
-  menuBg: string
-  test: string
+  sidebarBg: string //侧边栏背景颜色
+  headerBg: string //头部背景颜色
+  mainBg: string //主体内容背景颜色
+  menuBg: string //菜单栏背景颜色
+  menuTextColor: string //菜单栏字体颜色
+  menuTextActiveColor: string //菜单栏选中字体颜色
+  subMenuBg: string //子菜单栏背景颜色
+  subMenuHover: string //子菜单栏悬浮颜色
 }

src/layout/Index.vue

@@ -3,18 +3,18 @@
  * @Author: hutu
  * @Date: 2021-12-07 08:36:02
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-27 17:16:06
+ * @LastEditTime: 2021-12-28 17:05:25
 -->
 <template>
   <div class="layout">
-    <div class="layout-menu app-menu-bg" :style="{ width: menuCollapse ? '64px' : '210px' }">
+    <div class="layout-menu app-sidebar-bg" :style="{ width: menuCollapse ? '64px' : '210px' }">
       <Sidebar :list="accessRoutes" :route="route.path" :collapse="menuCollapse" />
     </div>
     <div class="layout-main">
-      <div class="layout-header">
+      <div class="layout-header app-header-bg">
         <Navbar />
       </div>
-      <div class="layout-content">
+      <div class="layout-content app-main-bg">
         <AppMain />
       </div>
     </div>
@@ -47,12 +47,8 @@ const accessRoutes = computed(() => store.state.permission.accessRoutes)
     flex: 1;
     .layout-header {
       height: 50px;
-      background: $white;
       border-bottom: 1px solid #eee;
     }
-    .layout-content {
-      background: $baseBg;
-    }
   }
 }
 </style>

src/layout/components/AppMain.vue

@@ -9,17 +9,10 @@
     </router-view>
   </div>
 </template>
-<script lang="ts" setup>
-const color = 'red'
-</script>
 <style lang="scss" scoped>
-.text {
-  color: v-bind(color);
-}
 .app-main {
   height: calc(100vh - 51px);
   width: 100%;
-  background: #f0f2f5;
   overflow: hidden;
 }
 .fade-leave-active,

src/layout/components/Sidebar.vue

@@ -3,42 +3,26 @@
  * @Author: hutu
  * @Date: 2021-12-07 08:36:02
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-16 16:01:36
+ * @LastEditTime: 2021-12-28 17:32:33
 -->
 <template>
   <div class="sidebar">
-    <el-menu :background-color="'#304156'" :text-color="'#bfcbd9'" :active-text-color="'#409EFF'" :default-active="props.route" mode="vertical" :collapse="props.collapse" :router="true">
+    <el-menu :background-color="styles.menuBg" :text-color="styles.menuTextColor" :active-text-color="styles.menuTextActiveColor" :default-active="props.route" mode="vertical" :collapse="props.collapse" :router="true">
       <SidebarItem :list="props.list" :isFirst="true" />
     </el-menu>
   </div>
 </template>
 
 <script lang="ts" setup>
-import SidebarItem from './SidebarItem.vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import { RouteRecordRaw } from 'vue-router'
+import SidebarItem from './SidebarItem.vue'
+const store = useStore()
+const styles = computed(() => store.state.theme.styles)
 const props = defineProps<{
   list: Array<RouteRecordRaw> //路由列表
   route: string //当前路由
   collapse: boolean //侧边栏是否折叠
 }>()
 </script>
-<style lang="scss">
-.sidebar {
-  .el-menu {
-    .el-sub-menu {
-      .el-menu {
-        background: $subMenuBg;
-        li:hover {
-          background: $subMenuHover;
-        }
-        .el-sub-menu__title {
-          background: $subMenuBg !important;
-          &:hover {
-            background: $subMenuHover !important;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/store/modules/theme.ts

@@ -2,13 +2,19 @@ import { ITheme } from '@/interface'
 
 const state: ITheme = {
   styles: {
+    sidebarBg: '#304156',
+    headerBg: '#ffffff',
+    mainBg: '#f0f2f5',
     menuBg: '#304156',
-    test: 'eee'
+    menuTextColor: '#bfcbd9',
+    menuTextActiveColor: '#409EFF',
+    subMenuBg: '#1f2d3d',
+    subMenuHover: '#001528'
   }
 }
 const mutations = {
   SET_TEST: (state: ITheme, flag: boolean): void => {
-    state.styles.menuBg = 'red'
+    state.styles.menuTextColor = 'red'
   }
 }
 const actions = {}