feat:动态路由样式调整

src/layout/components/Sidebar/index.vue

@@ -1,29 +1,38 @@
 <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="variables.menuBg"
-          :text-color="variables.menuText"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          active-text-color="#409EFF"
           :unique-opened="false"
-          :active-text-color="variables.menuActiveText"
           :collapse-transition="false"
-          mode="vertical"
-      >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route"
-                      :base-path="route.path"/>
+          mode="vertical">
+        <sidebar-item
+            v-for="route in routes"
+            :item="route"
+            :key="route.path"
+            :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
+
   </div>
 </template>
 
-<script>
+<script lang="ts">
 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.scss'
 import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 
@@ -33,17 +42,11 @@ export default defineComponent({
     Logo
   },
   setup() {
-    const store = useStore()
+    const store = useStore();
     const route = useRoute()
-    const sidebar = computed(() => {
-      return store.state.app.sidebar
-    })
-    const routes = computed(() => {
-      return store.state.permission.routes
-    })
-    const showLogo = computed(() => {
-      return store.state.settings.sidebarLogo
-    })
+    const sidebar = computed(() => store.state.app.sidebar)
+    const routes = computed(() => store.state.permission.routes)
+    const showLogo = computed(() => store.state.settings.sidebarLogo)
     const activeMenu = computed(() => {
       const {meta, path} = route
       // if set path, the sidebar will highlight the path you set
@@ -52,9 +55,7 @@ export default defineComponent({
       }
       return path
     })
-    const isCollapse = computed(() => {
-      return !sidebar.value.opened
-    })
+    const isCollapse = computed(() => !store.state.app.sidebar.opened)
 
     return {
       sidebar,
@@ -62,7 +63,7 @@ export default defineComponent({
       showLogo,
       variables,
       activeMenu,
-      isCollapse
+      isCollapse,
     }
   }
 })