From 558914f913f862ff3a8e4e6d94994578bee396ba Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Mon, 21 Apr 2025 23:58:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=20stylelint?=
 =?UTF-8?q?=20=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/TagsView/index.vue | 258 ++++++++++++++++-------
 1 file changed, 184 insertions(+), 74 deletions(-)

diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 4c8f6122..9e507abd 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="tags-container">
+    <!-- 水平滚动容器 -->
     <el-scrollbar class="scroll-container" :vertical="false" @wheel="handleScroll">
       <router-link
         v-for="tag in visitedViews"
@@ -10,18 +11,20 @@
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openContentMenu(tag, $event)"
       >
-        {{ translateRouteTitle(tag.title) }}
-        <el-icon
+        <!-- 标签文本 -->
+        <span class="tag-text">{{ translateRouteTitle(tag.title) }}</span>
+        <!-- 关闭按钮，固定标签不显示 -->
+        <span
           v-if="!isAffix(tag)"
           class="tag-close-icon"
           @click.prevent.stop="closeSelectedTag(tag)"
         >
-          <Close />
-        </el-icon>
+          ×
+        </span>
       </router-link>
     </el-scrollbar>
 
-    <!-- tag标签操作菜单 -->
+    <!-- 标签右键菜单 -->
     <ul
       v-show="contentMenuVisible"
       class="contextmenu"
@@ -62,18 +65,22 @@ import { translateRouteTitle } from "@/utils/i18n";
 
 import { usePermissionStore, useTagsViewStore, useSettingsStore, useAppStore } from "@/store";
 
-const { proxy } = getCurrentInstance()!;
+const instance = getCurrentInstance();
+const proxy = instance?.proxy;
 const router = useRouter();
 const route = useRoute();
 
+// 权限、标签页状态管理
 const permissionStore = usePermissionStore();
 const tagsViewStore = useTagsViewStore();
 const appStore = useAppStore();
 
+// 响应式引用访问已访问的标签视图列表
 const { visitedViews } = storeToRefs(tagsViewStore);
 const settingsStore = useSettingsStore();
 const layout = computed(() => settingsStore.layout);
 
+// 当前选中的标签
 const selectedTag = ref<TagView>({
   path: "",
   fullPath: "",
@@ -83,10 +90,13 @@ const selectedTag = ref<TagView>({
   keepAlive: false,
 });
 
+// 固定标签列表
 const affixTags = ref<TagView[]>([]);
+// 右键菜单位置
 const left = ref(0);
 const top = ref(0);
 
+// 监听路由变化，添加标签并移动到当前标签位置
 watch(
   route,
   () => {
@@ -94,11 +104,13 @@ watch(
     moveToCurrentTag();
   },
   {
-    immediate: true, //初始化立即执行
+    immediate: true, // 初始化立即执行
   }
 );
 
-const contentMenuVisible = ref(false); // 右键菜单是否显示
+// 右键菜单显示状态
+const contentMenuVisible = ref(false);
+// 监听右键菜单显示状态，添加或移除点击事件监听器
 watch(contentMenuVisible, (value) => {
   if (value) {
     document.body.addEventListener("click", closeContentMenu);
@@ -109,11 +121,15 @@ watch(contentMenuVisible, (value) => {
 
 /**
  * 过滤出需要固定的标签
+ * @param routes 路由配置
+ * @param basePath 基础路径
+ * @returns 固定标签列表
  */
 function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
   let tags: TagView[] = [];
   routes.forEach((route: RouteRecordRaw) => {
     const tagPath = resolve(basePath, route.path);
+    // 当路由设置了meta.affix属性时，加入固定标签列表
     if (route.meta?.affix) {
       tags.push({
         path: tagPath,
@@ -124,6 +140,7 @@ function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
         keepAlive: route.meta?.keepAlive,
       });
     }
+    // 递归处理子路由
     if (route.children) {
       const tempTags = filterAffixTags(route.children, basePath + route.path);
       if (tempTags.length >= 1) {
@@ -134,17 +151,23 @@ function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
   return tags;
 }
 
+/**
+ * 初始化标签列表，添加需要固定的标签
+ */
 function initTags() {
   const tags: TagView[] = filterAffixTags(permissionStore.routes);
   affixTags.value = tags;
   for (const tag of tags) {
-    // Must have tag name
+    // 必须有标签名称才添加
     if (tag.name) {
       tagsViewStore.addVisitedView(tag);
     }
   }
 }
 
+/**
+ * 添加当前路由到标签列表
+ */
 function addTags() {
   if (route.meta.title) {
     tagsViewStore.addView({
@@ -159,13 +182,15 @@ function addTags() {
   }
 }
 
+/**
+ * the purpose of this function is make sure to move the current active tag into the view
+ */
 function moveToCurrentTag() {
-  // 使用 nextTick() 的目的是确保在更新 tagsView 组件之前，scrollPaneRef 对象已经滚动到了正确的位置。
+  // 使用 nextTick() 确保在更新 tagsView 组件之前滚动到正确位置
   nextTick(() => {
     for (const tag of visitedViews.value) {
       if (tag.path === route.path) {
-        // when query is different then update
-        // route.query = { ...route.query, ...tag.query };
+        // 当查询参数不同时更新标签
         if (tag.fullPath !== route.fullPath) {
           tagsViewStore.updateVisitedView({
             name: route.name as string,
@@ -182,10 +207,19 @@ function moveToCurrentTag() {
   });
 }
 
+/**
+ * 判断标签是否为固定标签
+ * @param tag 标签对象
+ * @returns 是否为固定标签
+ */
 function isAffix(tag: TagView) {
   return tag?.affix;
 }
 
+/**
+ * 判断选中的标签是否为第一个可见标签
+ * @returns 是否为第一个可见标签
+ */
 function isFirstView() {
   return (
     selectedTag.value.path === "/dashboard" ||
@@ -193,6 +227,10 @@ function isFirstView() {
   );
 }
 
+/**
+ * 判断选中的标签是否为最后一个可见标签
+ * @returns 是否为最后一个可见标签
+ */
 function isLastView() {
   return (
     selectedTag.value.fullPath ===
@@ -200,6 +238,10 @@ function isLastView() {
   );
 }
 
+/**
+ * 刷新选中的标签页
+ * @param view 标签对象
+ */
 function refreshSelectedTag(view: TagView) {
   tagsViewStore.delCachedView(view);
   const { fullPath } = view;
@@ -208,6 +250,10 @@ function refreshSelectedTag(view: TagView) {
   });
 }
 
+/**
+ * 关闭选中的标签页
+ * @param view 标签对象
+ */
 function closeSelectedTag(view: TagView) {
   tagsViewStore.delView(view).then((res: any) => {
     if (tagsViewStore.isActive(view)) {
@@ -216,6 +262,9 @@ function closeSelectedTag(view: TagView) {
   });
 }
 
+/**
+ * 关闭选中标签左侧的所有标签
+ */
 function closeLeftTags() {
   tagsViewStore.delLeftViews(selectedTag.value).then((res: any) => {
     if (!res.visitedViews.find((item: any) => item.path === route.path)) {
@@ -223,6 +272,10 @@ function closeLeftTags() {
     }
   });
 }
+
+/**
+ * 关闭选中标签右侧的所有标签
+ */
 function closeRightTags() {
   tagsViewStore.delRightViews(selectedTag.value).then((res: any) => {
     if (!res.visitedViews.find((item: any) => item.path === route.path)) {
@@ -231,6 +284,9 @@ function closeRightTags() {
   });
 }
 
+/**
+ * 关闭除选中标签外的所有标签
+ */
 function closeOtherTags() {
   router.push(selectedTag.value);
   tagsViewStore.delOtherViews(selectedTag.value).then(() => {
@@ -238,6 +294,10 @@ function closeOtherTags() {
   });
 }
 
+/**
+ * 关闭所有标签
+ * @param view 标签对象
+ */
 function closeAllTags(view: TagView) {
   tagsViewStore.delAllViews().then((res: any) => {
     tagsViewStore.toLastView(res.visitedViews, view);
@@ -246,19 +306,21 @@ function closeAllTags(view: TagView) {
 
 /**
  * 打开右键菜单
+ * @param tag 标签对象
+ * @param e 鼠标事件
  */
 function openContentMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
+  const offsetLeft = proxy?.$el.getBoundingClientRect().left; // 容器左边距
+  const offsetWidth = proxy?.$el.offsetWidth; // 容器宽度
+  const maxLeft = offsetWidth - menuMinWidth; // 左边界
+  const leftPosition = e.clientX - offsetLeft + 15; // 15: 右边距
 
-  const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
-  const offsetWidth = proxy?.$el.offsetWidth; // container width
-  const maxLeft = offsetWidth - menuMinWidth; // left boundary
-  const l = e.clientX - offsetLeft + 15; // 15: margin right
-
-  if (l > maxLeft) {
+  // 确保菜单不超出容器右边界
+  if (leftPosition > maxLeft) {
     left.value = maxLeft;
   } else {
-    left.value = l;
+    left.value = leftPosition;
   }
 
   // 混合模式下，需要减去顶部菜单(fixed)的高度
@@ -280,12 +342,18 @@ function closeContentMenu() {
 }
 
 /**
- * 滚动事件
+ * 处理鼠标滚轮事件，实现水平滚动
  */
 function handleScroll() {
   closeContentMenu();
 }
 
+/**
+ * 寻找最外层父节点
+ * @param tree 路由树
+ * @param findName 要查找的节点名称
+ * @returns 最外层父节点
+ */
 function findOutermostParent(tree: any[], findName: string) {
   let parentMap: any = {};
 
@@ -314,6 +382,10 @@ function findOutermostParent(tree: any[], findName: string) {
   return null;
 }
 
+/**
+ * 重新激活顶部菜单
+ * @param newVal 新的路由名
+ */
 const againActiveTop = (newVal: string) => {
   if (layout.value !== "mix") return;
   const parent = findOutermostParent(permissionStore.routes, newVal);
@@ -321,6 +393,7 @@ const againActiveTop = (newVal: string) => {
     appStore.activeTopMenu(parent.path);
   }
 };
+
 // 如果是混合模式，更改selectedTag，需要对应高亮的activeTop
 watch(
   () => route.name,
@@ -333,6 +406,8 @@ watch(
     deep: true,
   }
 );
+
+// 组件挂载时初始化标签
 onMounted(() => {
   initTags();
 });
@@ -341,94 +416,129 @@ onMounted(() => {
 <style lang="scss" scoped>
 .tags-container {
   width: 100%;
-  height: $tags-view-height;
+  height: 34px;
   background-color: var(--el-bg-color);
   border: 1px solid var(--el-border-color-light);
   box-shadow: 0 1px 1px var(--el-box-shadow-light);
 
-  .tags-item {
-    display: inline-block;
-    padding: 3px 8px;
-    margin: 4px 0 0 5px;
-    font-size: 12px;
-    cursor: pointer;
-    border: 1px solid var(--el-border-color-light);
+  /* 滚动容器样式 */
+  .scroll-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
 
-    &:hover {
-      color: var(--el-color-primary);
+    :deep(.el-scrollbar__bar) {
+      bottom: 0px;
     }
 
+    :deep(.el-scrollbar__wrap) {
+      height: 49px;
+    }
+  }
+
+  /* 标签项样式 */
+  .tags-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 26px;
+    padding: 0 8px;
+    margin-top: 4px;
+    margin-left: 5px;
+    font-size: 12px;
+    line-height: 26px;
+    color: var(--el-text-color-primary);
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color);
+
+    /* 第一个和最后一个标签的边距调整 */
     &:first-of-type {
       margin-left: 15px;
     }
-
     &:last-of-type {
       margin-right: 15px;
     }
 
+    /* 标签文本样式 */
+    .tag-text {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    /* 关闭按钮样式 */
     .tag-close-icon {
-      vertical-align: -0.15em;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      margin-left: 5px;
+      font-size: 12px;
+      font-weight: bold;
+      color: var(--el-text-color-secondary);
       cursor: pointer;
       border-radius: 50%;
+      transition: all 0.2s ease;
 
       &:hover {
-        color: #fff;
-        background-color: var(--el-color-primary);
+        color: var(--el-color-white);
+        background-color: var(--el-text-color-placeholder);
       }
     }
 
+    /* 活动标签样式 */
     &.active {
-      color: #fff;
+      color: var(--el-color-white);
       background-color: var(--el-color-primary);
-
+      border-color: var(--el-color-primary);
       &::before {
+        position: relative;
         display: inline-block;
         width: 8px;
         height: 8px;
-        margin-right: 5px;
+        margin-right: 2px;
         content: "";
-        background: #fff;
+        background: var(--el-color-white);
         border-radius: 50%;
       }
 
-      .tag-close-icon:hover {
-        color: var(--el-color-primary);
-        background-color: var(--el-fill-color-light);
+      /* 活动标签关闭按钮样式 */
+      .tag-close-icon {
+        color: var(--el-color-white);
+
+        &:hover {
+          color: var(--el-color-white);
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+
+  /* 右键菜单样式 */
+  .contextmenu {
+    position: absolute;
+    z-index: 3000;
+    padding: 5px 0;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--el-text-color-primary);
+    list-style-type: none;
+    background: var(--el-bg-color);
+    border-radius: 4px;
+    box-shadow: var(--el-box-shadow-light);
+
+    /* 菜单项样式 */
+    li {
+      padding: 7px 16px;
+      margin: 0;
+      cursor: pointer;
+      &:hover {
+        background: var(--el-fill-color-light);
       }
     }
   }
 }
-
-.contextmenu {
-  position: absolute;
-  z-index: 99;
-  font-size: 12px;
-  background: var(--el-bg-color-overlay);
-  border-radius: 4px;
-  box-shadow: var(--el-box-shadow-light);
-
-  li {
-    padding: 8px 16px;
-    cursor: pointer;
-
-    &:hover {
-      background: var(--el-fill-color-light);
-    }
-  }
-}
-
-.scroll-container {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-
-  .el-scrollbar__bar {
-    bottom: 0;
-  }
-
-  .el-scrollbar__wrap {
-    height: 49px;
-  }
-}
 </style>