修改bug

src/layout/components/TagsView/ScrollPane.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-07-04 10:44:35
+ * @LastEditors: zhp
+ * @Description:
+-->
 <template>
   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
     <slot />
@@ -17,7 +24,9 @@ export default {
   computed: {
     scrollWrapper() {
       return this.$refs.scrollContainer.$refs.wrap
-    }
+    },
+  },
+  watch: {
   },
   mounted() {
     this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)

src/layout/components/TagsView/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <div id="tags-view-container" class="tags-view-container">
+  <div ref="tagsViewContainer" id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
-        :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) : ''"
+      <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path"
+        :class="isActive(tag) ? 'active' : ''" :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)">
         {{ tag.title }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
@@ -36,6 +37,13 @@ export default {
     }
   },
   computed: {
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
+        return true
+      } else {
+        return false
+      }
+    },
     visitedViews() {
       return this.$store.state.tagsView.visitedViews
     },
@@ -44,9 +52,28 @@ export default {
     },
     theme() {
       return this.$store.state.settings.theme;
-    }
+    },
   },
   watch: {
+    changeColor(val) {
+      // if (val == true) {
+      //   this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+      //   var tag = document.getElementsByClassName("tags-view-item")
+      //   console.log('tag', tag)
+      //   for (let i in tag) {
+      //     tag[i].classList.add("changeColor")
+      //     // tag[i].classList.remove("default")
+      //   }
+      //   console.log('this.$refs.scrollContainer', this.$refs.tag);
+      // } else {
+      //   this.$refs.tagsViewContainer.style.backgroundColor = ''
+      //   var tag = document.getElementsByClassName("tags-view-item")
+      //   for (let i in tag) {
+      //     // tag[i].classList.remove("changeColor")
+      //     // tag[i].classList.add("default")
+      //   }
+      // }
+    },
     $route() {
       this.addTags()
       this.moveToCurrentTag()
@@ -60,6 +87,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.$route, this.changeColor);
     this.initTags()
     this.addTags()
   },
@@ -230,6 +258,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// :root{
+//   --theme-color: rgba(0, 0, 0, 0.45);
+//   --theme-background: #f4f4f4ff;
+// }
+.changeColor{
+  --theme-background: rgba(0, 59, 115, 1);
+  --theme-color: rgba(255, 255, 255, 1);
+}
 .tags-view-container {
   height: 42px;
   width: 100%;
@@ -245,8 +281,8 @@ export default {
       cursor: pointer;
       height: 28px;
       line-height: 28px;
-      color: rgba(0, 0, 0, 0.45);
-      background: #F4F4F4FF;
+      color: var(--theme-color,rgba(0, 0, 0, 0.45));
+      background:var(--theme-background,#f4f4f4ff);
       padding: 0 8px 0 12px;
       font-size: 14px;
       letter-spacing: 1px;
@@ -331,7 +367,7 @@ export default {
       .el-icon-close {
         &:hover {
           background-color: #fff;
-          color: #409eff;
+          color: rgba(62, 142, 247, 1);
         }
       }
     }

src/layout/index.vue

@@ -39,6 +39,13 @@ export default {
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
+        return true
+      } else {
+        return false
+      }
+    },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
@@ -51,6 +58,21 @@ export default {
       return variables;
     }
   },
+  watch: {
+    // changeColor(val) {
+    //   if (val == true) {
+    //     var tag = document.getElementsByClassName("main-container")
+    //     console.log('tag', tag);
+    //     tag.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+    //   } else {
+    //     var tag = document.getElementsByClassName("main-container")
+    //     // for (let i in tag) {
+    //     tag.style.backgroundColor = ''
+    //       // tag[i].classList.add("default")
+    //     // }
+    //   }
+    // },
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })