tagview & sidebar 主题颜色与element ui(全局)同步

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -8,47 +8,50 @@
                 :background-color="variables.menuBg"
                 :text-color="variables.menuText"
                 :unique-opened="true"
-        :active-text-color="variables.menuActiveText"
+                :active-text-color="settings.theme"
                 :collapse-transition="false"
                 mode="vertical"
             >
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+                <sidebar-item
+                    v-for="(route, index) in permission_routes"
+                    :key="route.path  + index"
+                    :item="route"
+                    :base-path="route.path"
+                />
             </el-menu>
         </el-scrollbar>
     </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from "vuex";
-import Logo from './Logo'
+import Logo from "./Logo";
-import SidebarItem from './SidebarItem'
+import SidebarItem from "./SidebarItem";
-import variables from '@/assets/styles/variables.scss'
+import variables from "@/assets/styles/variables.scss";
 
 export default {
     components: { SidebarItem, Logo },
     computed: {
-    ...mapGetters([
+        ...mapState(["settings"]),
-      'permission_routes',
+        ...mapGetters(["permission_routes", "sidebar"]),
-      'sidebar'
-    ]),
         activeMenu() {
-      const route = this.$route
+            const route = this.$route;
-      const { meta, path } = route
+            const { meta, path } = route;
             // if set path, the sidebar will highlight the path you set
             if (meta.activeMenu) {
-        return meta.activeMenu
+                return meta.activeMenu;
             }
-      return path
+            return path;
         },
         showLogo() {
-      return this.$store.state.settings.sidebarLogo
+            return this.$store.state.settings.sidebarLogo;
         },
         variables() {
-      return variables
+            return variables;
         },
         isCollapse() {
-      return !this.sidebar.opened
+            return !this.sidebar.opened;
         }
     }
-}
+};
 </script>

ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
@@ -9,6 +9,7 @@
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
         class="tags-view-item"
+        :style="activeStyle(tag)"
         @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
         @contextmenu.prevent.native="openMenu(tag,$event)"
       >
@@ -46,6 +47,9 @@ export default {
     },
     routes() {
       return this.$store.state.permission.routes
+    },
+    theme() {
+      return this.$store.state.settings.theme;
     }
   },
   watch: {
@@ -69,6 +73,13 @@ export default {
     isActive(route) {
       return route.path === this.$route.path
     },
+    activeStyle(tag) {
+      if (!this.isActive(tag)) return {};
+      return {
+        "background-color": this.theme,
+        "border-color": this.theme
+      };
+    },
     isAffix(tag) {
       return tag.meta && tag.meta.affix
     },
@@ -189,6 +200,9 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
     }
   }
 }