From ed90cb8f8e8d3bbf594757caa950f8521869ece4 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Mon, 8 Nov 2021 19:33:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E4=BF=AE=E5=A4=8DmultiTab?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E9=80=BB=E8=BE=91=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=B7=A6=E8=BE=B9=E5=92=8C=E5=8F=B3=E8=BE=B9?=
 =?UTF-8?q?=E7=9A=84=E6=A0=87=E7=AD=BE=E5=8F=B3=E9=94=AE=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/ContextMenu.vue         | 28 +++++++++++++++--
 src/store/modules/app/index.ts                | 31 +++++++++++++++++++
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue b/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
index 69cdc290..4917358f 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
@@ -33,7 +33,7 @@ interface Props {
   y: number;
 }
 
-type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-all';
+type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
 type Option = DropdownOption & {
   key: DropdownKey;
 };
@@ -49,7 +49,7 @@ const emit = defineEmits<{
 }>();
 
 const app = useAppStore();
-const { removeMultiTab, clearMultiTab } = useAppStore();
+const { removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore();
 const { handleReload } = useReloadInject();
 const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
 
@@ -71,6 +71,16 @@ const options = computed<Option[]>(() => [
     key: 'close-other',
     icon: iconifyRender('ant-design:column-width-outlined')
   },
+  {
+    label: '关闭左边标签页',
+    key: 'close-left',
+    icon: iconifyRender('mdi:format-horizontal-align-left')
+  },
+  {
+    label: '关闭右边标签页',
+    key: 'close-right',
+    icon: iconifyRender('mdi:format-horizontal-align-right')
+  },
   {
     label: '关闭全部标签页',
     key: 'close-all',
@@ -88,7 +98,7 @@ const actionMap = new Map<DropdownKey, () => void>([
   [
     'close-current',
     () => {
-      removeMultiTab(app.multiTab.activeRoute);
+      removeMultiTab(props.currentPath);
     }
   ],
   [
@@ -97,6 +107,18 @@ const actionMap = new Map<DropdownKey, () => void>([
       clearMultiTab([props.currentPath]);
     }
   ],
+  [
+    'close-left',
+    () => {
+      clearLeftMultiTab(props.currentPath);
+    }
+  ],
+  [
+    'close-right',
+    () => {
+      clearRightMultiTab(props.currentPath);
+    }
+  ],
   [
     'close-all',
     () => {
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index acf78598..45a484c4 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -110,6 +110,37 @@ const appStore = defineStore({
       router.push(activePath);
       this.setActiveMultiTab(activePath);
     },
+    /** 删除左边多页签 */
+    clearLeftMultiTab(fullPath: string) {
+      const { routes } = this.multiTab;
+      const currentIndex = routes.findIndex(route => route.fullPath === fullPath);
+      const activeIndex = this.activeMultiTabIndex;
+      if (currentIndex > -1) {
+        const remain = [ROUTE_HOME.path, ...routes.slice(currentIndex).map(v => v.fullPath)];
+        const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
+        this.multiTab.routes = updateRoutes;
+        if (activeIndex < currentIndex) {
+          const activePath = updateRoutes[updateRoutes.length - 1].fullPath;
+          router.push(activePath);
+          this.setActiveMultiTab(activePath);
+        }
+      }
+    },
+    /** 删除右边多页签 */
+    clearRightMultiTab(fullPath: string) {
+      const { routes } = this.multiTab;
+      const currentIndex = routes.findIndex(route => route.fullPath === fullPath);
+      const activeIndex = this.activeMultiTabIndex;
+      if (currentIndex > -1) {
+        const remain = [ROUTE_HOME.path, ...routes.slice(0, currentIndex + 1).map(v => v.fullPath)];
+        const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
+        this.multiTab.routes = updateRoutes;
+        if (activeIndex > currentIndex) {
+          router.push(fullPath);
+          this.setActiveMultiTab(fullPath);
+        }
+      }
+    },
     /** 点击单个页签tab */
     handleClickTab(fullPath: string) {
       if (this.multiTab.activeRoute !== fullPath) {