refactor(tagsview): 修复：尝试修复 tagview 在移动端显示不全问题

src/layout/components/TagsView/ScrollPane.vue

@@ -104,7 +104,7 @@ defineExpose({
     }
 
     :deep(.el-scrollbar__wrap) {
-      height: 34px !important;
+      // height: 34px !important;
       /* 与tags-view-container高度保持一致 */
       overflow-y: hidden !important;
       /* 明确禁用垂直滚动 */

src/layout/components/TagsView/index.vue

 <template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
+  <div id="tags-view-container"
+    class="tags-view-container">
+    <scroll-pane ref="scrollPaneRef"
+      class="tags-view-wrapper"
+      @scroll="handleScroll">
+      <router-link v-for="tag in visitedViews"
         :key="tag.path"
         :data-path="tag.path"
         :class="isActive(tag) ? 'active' : ''"
@@ -10,28 +12,34 @@
         class="tags-view-item"
         :style="activeStyle(tag)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
-      >
+        @contextmenu.prevent="openMenu(tag, $event)">
         {{ tag.title }}
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
-          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+        <span v-if="!isAffix(tag)"
+          @click.prevent.stop="closeSelectedTag(tag)">
+          <close class="el-icon-close"
+            style="width: 1em; height: 1em;vertical-align: middle;" />
         </span>
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+    <ul v-show="visible"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">
         <refresh-right style="width: 1em; height: 1em;" /> 刷新页面
       </li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+      <li v-if="!isAffix(selectedTag)"
+        @click="closeSelectedTag(selectedTag)">
         <close style="width: 1em; height: 1em;" /> 关闭当前
       </li>
       <li @click="closeOthersTags">
         <circle-close style="width: 1em; height: 1em;" /> 关闭其他
       </li>
-      <li v-if="!isFirstView()" @click="closeLeftTags">
+      <li v-if="!isFirstView()"
+        @click="closeLeftTags">
         <back style="width: 1em; height: 1em;" /> 关闭左侧
       </li>
-      <li v-if="!isLastView()" @click="closeRightTags">
+      <li v-if="!isLastView()"
+        @click="closeRightTags">
         <right style="width: 1em; height: 1em;" /> 关闭右侧
       </li>
       <li @click="closeAllTags(selectedTag)">
@@ -141,7 +149,7 @@ function initTags() {
   for (const tag of res) {
     // Must have tag name
     if (tag.name) {
-       useTagsViewStore().addVisitedView(tag)
+      useTagsViewStore().addVisitedView(tag)
     }
   }
 }
@@ -257,81 +265,105 @@ function handleScroll() {
 }
 </script>
 
-<style lang="scss" scoped>
-.tags-view-container {
-  height: 34px;
-  width: 100%;
-  background: var(--tags-bg, #fff);
-  border-bottom: 1px solid var(--tags-item-border, #d8dce5);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid var(--tags-item-border, #d8dce5);
-      color: var(--tags-item-text, #495060);
-      background: var(--tags-item-bg, #fff);
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-
-      &:first-of-type {
-        margin-left: 15px;
+<style lang="scss"
+  scoped>
+  .tags-view-container {
+    height: 34px;
+    width: 100%;
+    background: var(--tags-bg, #fff);
+    border-bottom: 1px solid var(--tags-item-border, #d8dce5);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+
+    // 添加移动端适配
+    @media (max-width: 768px) {
+      height: 40px; // 移动端适当增加高度
+
+      .tags-view-wrapper {
+        .tags-view-item {
+          height: 32px;
+          line-height: 32px;
+          font-size: 13px;
+          padding: 0 6px;
+          margin-top: 4px;
+
+          &:first-of-type {
+            margin-left: 10px;
+          }
+
+          &:last-of-type {
+            margin-right: 10px;
+          }
+        }
       }
+    }
 
-      &:last-of-type {
-        margin-right: 15px;
-      }
+    .tags-view-wrapper {
+      .tags-view-item {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        height: 26px;
+        line-height: 26px;
+        border: 1px solid var(--tags-item-border, #d8dce5);
+        color: var(--tags-item-text, #495060);
+        background: var(--tags-item-bg, #fff);
+        padding: 0 8px;
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 4px;
+
+        &:first-of-type {
+          margin-left: 15px;
+        }
 
-      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-
-        &::before {
-          content: '';
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 5px;
+        &:last-of-type {
+          margin-right: 15px;
+        }
+
+        &.active {
+          background-color: #42b983;
+          color: #fff;
+          border-color: #42b983;
+
+          &::before {
+            content: '';
+            background: #fff;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            position: relative;
+            margin-right: 5px;
+          }
         }
       }
     }
-  }
 
-  .contextmenu {
-    margin: 0;
-    background: var(--el-bg-color-overlay, #fff);
-    z-index: 3000;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--tags-item-text, #333);
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-    border: 1px solid var(--el-border-color-light, #e4e7ed);
-
-    li {
+    .contextmenu {
       margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;
-
-      &:hover {
-        background: var(--tags-item-hover, #eee);
+      background: var(--el-bg-color-overlay, #fff);
+      z-index: 3000;
+      position: absolute;
+      list-style-type: none;
+      padding: 5px 0;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--tags-item-text, #333);
+      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+      border: 1px solid var(--el-border-color-light, #e4e7ed);
+
+      li {
+        margin: 0;
+        padding: 7px 16px;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--tags-item-hover, #eee);
+        }
       }
     }
   }
-}
 </style>
 
 <style lang="scss">

src/layout/index.vue

@@ -106,7 +106,7 @@ function setLayout() {
     transition: width 0.28s;
   }
 
-  .app-main{
+  .app-main {
     // 头部固定菜单高度 50px
     height: calc(100vh - 50px);
   }
@@ -122,6 +122,11 @@ function setLayout() {
     .fixed-header+.app-main {
       height: 100vh;
       padding-top: 84px;
+
+      // 移动端适配
+      @media (max-width: 768px) {
+        padding-top: 90px; // 调整为50px导航栏 + 40px TagsView
+      }
     }
   }
 
@@ -136,6 +141,11 @@ function setLayout() {
 
   .mobile .fixed-header {
     width: 100%;
+
+    // 确保移动端TagsView正确显示
+    .tags-view-container {
+      height: 40px;
+    }
   }