修复TagView过多后的滚动bug

UI/VA.Vue_V1.0/src/layouts/main-layout/tagView/ScrollPane.vue

@@ -7,9 +7,7 @@ const emitScroll = () => {
 const tagAndTagSpacing = ref(4)
 const visitedViews = computed(() => appStore.tagViewStore.getVisitedViews())
 const scrollContainer = ref<any>()
-const scrollWrapper = computed(() => {
-  return scrollContainer.value.wrap$
-})
+const scrollWrapper = computed(() => scrollContainer.value.wrapRef)
 function handleScroll(e: any) {
   const eventDelta = e.wheelDelta || -e.deltaY * 40
   const $scrollWrapper = scrollWrapper.value
@@ -28,7 +26,6 @@ function moveToTarget(currentTag: any) {
     firstTag = visitedViews.value[0]
     lastTag = visitedViews.value[visitedViews.value.length - 1]
   }
-
   if (firstTag === currentTag) {
     $scrollWrapper.scrollLeft = 0
   } else if (lastTag === currentTag) {
@@ -49,6 +46,7 @@ function moveToTarget(currentTag: any) {
         }
       }
     }
+
     // 下一个标记 offsetLeft
     let afterNextTagOffsetLeft = 0
     if (nextTag) {
@@ -65,6 +63,7 @@ function moveToTarget(currentTag: any) {
       $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
     }
   }
+  console.log("scrollWrapper", $scrollWrapper.scrollLeft, $scrollWrapper.scrollWidth, $containerWidth)
 }
 onMounted(() => {
   scrollWrapper.value?.addEventListener("scroll", emitScroll, true)
@@ -78,7 +77,9 @@ defineExpose({
 </script>
 
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
-    <slot />
+  <el-scrollbar ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
+    <div class="d-flex">
+      <slot />
+    </div>
   </el-scrollbar>
 </template>

UI/VA.Vue_V1.0/src/layouts/main-layout/tagView/TagView.vue

@@ -3,6 +3,7 @@ import type { RouteRecordRaw, RouteLocationNormalizedLoaded } from "vue-router"
 import { getNormalPath } from "@/core/utils"
 import appStore from "@/stores"
 import ScrollPane from "./ScrollPane.vue"
+import type { HtmlHTMLAttributes } from "vue"
 const route = useRoute()
 const router = useRouter()
 
@@ -222,18 +223,28 @@ watch(visible, (value) => {
 onMounted(() => {
   initTags()
   addTags()
+  nextTick(() => {
+    const $container = document.querySelector(".tags-view-container") as HTMLElement
+    if ($container) {
+      $container.style.width =
+        (document.querySelector(".app-header")?.clientWidth ?? 0) -
+        (document.querySelector(".app-navbar")?.clientWidth ?? 0) -
+        120 +
+        "px"
+    }
+  })
 })
 </script>
 <template>
-  <div id="tags-view-container" class="tags-view-container d-flex align-items-end w-100" ref="tagRef">
+  <div id="tags-view-container" class="tags-view-container d-flex align-items-end" ref="tagRef">
     <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper w-100" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
         :key="tag.path"
         :data-path="tag.path"
-        :class="`${isActive(tag) ? 'active' : 'text-primary'} ${isAffix(tag) ? '' : 'pe-8'}`"
+        :class="`${isActive(tag) ? 'active ps-5' : 'text-primary'} ${isAffix(tag) ? '' : 'pe-8'}`"
         :to="{ path: tag.path, query: tag.query }"
-        class="tags-view-item d-inline-block py-0 px-3"
+        class="tags-view-item py-0 px-3"
         :style="activeStyle(tag)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openMenu(tag, $event)"
@@ -245,7 +256,7 @@ onMounted(() => {
           icon-name="tag-cross"
           class="icon fs-3 ms-1"
           :class="isActive(tag) ? 'text-light' : 'text-primary'"
-          style="top: 3px; position: absolute"
+          style="top: 3px; right: 5px; position: absolute"
         />
       </router-link>
     </scroll-pane>
@@ -286,8 +297,10 @@ onMounted(() => {
     // border-bottom: 1px solid #d8dce5;
     // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
     .tags-view-item {
+      display: flex;
       position: relative;
       cursor: pointer;
+      white-space: nowrap;
       height: 24px;
       line-height: 24px;
       border: 1px solid #d8dce5;
@@ -307,12 +320,12 @@ onMounted(() => {
         &::before {
           content: "";
           background: #fff;
-          display: inline-block;
           width: 8px;
           height: 8px;
           border-radius: 50%;
-          position: relative;
-          margin-right: 3px;
+          position: absolute;
+          left: 5px;
+          top: calc(50% - 4px);
         }
       }
     }