fix: 修改tag右键操作异常

lib/saas/view/system/layout/tags.vue

@@ -14,10 +14,21 @@
     <div class="fatherTags">
       <ul id="tag-list" ref="tags">
         <div v-for="(item, index) in tagList" :key="index" @click="clickTag(item)">
-          <li
-            @click.right="openMenu($event, index)"
-            :id="selectTags.path === item.path ? 'ischoice' : ''">
-            <span>{{ isdisabledl || isdisabledr ? item.title.substring(0, 4) : item.title }}</span>
+          <li :id="selectTags.path === item.path ? 'ischoice' : ''">
+            <a-dropdown :trigger="['contextmenu']" @visibleChange="(v) => visibleChange(v, item)">
+              <span>
+                {{ isdisabledl || isdisabledr ? item.title.substring(0, 4) : item.title }}
+              </span>
+
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item key="1"> <li @click="closeAllMenu">关闭所有标签页</li></a-menu-item>
+                  <a-menu-item key="2">
+                    <li @click="closeOhterMenu">关闭其他标签页</li>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
             <ns-icon
               v-if="item.path !== baseHeader.redirect"
               name="close"
@@ -33,10 +44,10 @@
         name="fastBackward"
         class="icon_kt" />
     </div>
-    <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="closeAllMenu">关闭所有标签页</li>
       <li @click="closeOhterMenu">关闭其他标签页</li>
-    </ul>
+    </ul> -->
   </div>
 </template>
 <script lang="ts">
@@ -54,11 +65,11 @@
       const visible = ref<boolean>(false);
       const leftMenuTrigger = ref(false);
       mittEmit.on('leftMenuTrigger', (val) => {
-        console.log('leftMenuTrigger', val);
         leftMenuTrigger.value = val;
       });
       // const tagList = ref<tagsClass[]>([]);
       const rightNumber = ref<number>(0);
+      const rightTarget = ref();
       const tagsStore = useTags();
       const router = useRouter();
       const keepAliveStore = useKeepAlive();
@@ -68,13 +79,15 @@
       const tagList = computed(() => tagsStore.getTags);
       //右键关闭所有标签页
       const closeAllMenu = () => {
-        tagsStore.sliceTags(0);
+        // tagsStore.sliceTags(0);
+        tagsStore.clearTags();
       };
       //右键关闭其他标签页
       const closeOhterMenu = () => {
-        let choicetag = tagList.value[rightNumber.value];
-        tagsStore.sliceTags(0);
-        tagsStore.addTags(choicetag);
+        // let choicetag = tagList.value[rightNumber.value];
+        tagsStore.clearTags();
+        tagsStore.addTags(rightTarget.value);
+        clickTag(rightTarget.value);
       };
       const selectTags = inject('selectTags');
       console.log(selectTags);
@@ -94,7 +107,11 @@
           });
         }
       };
+      const visibleChange = (visible, target) => {
+        if (visible) rightTarget.value = target;
+      };
       return {
+        visibleChange,
         leftMenuTrigger,
         router,
         clickTag,
@@ -287,11 +304,11 @@
     align-items: center;
     position: fixed;
     top: @layout-header-height;
-    z-index: 2;
+    z-index: 6;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .nav-shutters-collapsed {
-    width: calc(100% - 40px);
+    width: calc(100% - @layout-sider-collapsed-width);
     // padding: 0 12px;
     min-height: @ns-nav-shutters-height;
     height: @ns-nav-shutters-height;
@@ -301,6 +318,7 @@
     position: fixed;
     top: @layout-header-height;
     z-index: 10;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .nav-shutters-container {
     display: flex;