From 034881e72efa03b0973aac29219a6b6f15308e04 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Mon, 1 Jan 2024 20:55:46 +0800
Subject: [PATCH] =?UTF-8?q?tabs=E6=93=8D=E4=BD=9C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common-form/index.vue          |  2 +-
 src/components/common-tabs-view/index.vue     | 29 +++++++--
 .../common-tabs-view/tabs-view-item.vue       | 64 ++++++++++++++++---
 src/messages/common_cn.js                     |  5 ++
 src/messages/common_en.js                     |  5 ++
 src/stores/TabsViewStore.js                   | 58 +++++++++++++++--
 .../components/global/GlobalSettings.vue      |  6 +-
 7 files changed, 146 insertions(+), 23 deletions(-)

diff --git a/src/components/common-form/index.vue b/src/components/common-form/index.vue
index cc008a9..501cac4 100644
--- a/src/components/common-form/index.vue
+++ b/src/components/common-form/index.vue
@@ -77,7 +77,7 @@ const rules = computed(() => {
   return ruleResult
 })
 
-const form = ref(null)
+const form = ref()
 
 </script>
 
diff --git a/src/components/common-tabs-view/index.vue b/src/components/common-tabs-view/index.vue
index 1e77a34..c09f062 100644
--- a/src/components/common-tabs-view/index.vue
+++ b/src/components/common-tabs-view/index.vue
@@ -8,11 +8,10 @@ import TabsViewItem from '@/components/common-tabs-view/tabs-view-item.vue'
 const router = useRouter()
 const route = useRoute()
 const tabsViewStore = useTabsViewStore()
-const currentTabValue = ref('')
 watch(route, () => {
   if (route.path) {
     tabsViewStore.addHistoryTab(route)
-    currentTabValue.value = route.path
+    tabsViewStore.currentTab = route.path
   }
 })
 
@@ -20,13 +19,14 @@ onMounted(() => {
   if (!tabsViewStore.historyTabs.length) {
     tabsViewStore.addHistoryTab(route)
   }
-  currentTabValue.value = route.path
+  tabsViewStore.currentTab = route.path
 })
 
 const selectHistoryTab = path => {
   const tab = isString(path) ? tabsViewStore.findHistoryTab(path) : path
   if (tab) {
     router.push(tab)
+    tabsViewStore.addCachedTab(tab)
   }
 }
 
@@ -40,6 +40,7 @@ const removeHistoryTab = path => {
 const refreshHistoryTab = tab => {
   const time = new Date().getTime()
   router.push(`${tab.path}?${time}`)
+  tabsViewStore.addCachedTab(tab)
 }
 
 const removeOtherHistoryTabs = tab => {
@@ -47,12 +48,29 @@ const removeOtherHistoryTabs = tab => {
   selectHistoryTab(tab.path)
 }
 
+const removeHistoryTabs = (tab, type) => {
+  tabsViewStore.removeHistoryTabs(tab, type)
+  selectHistoryTab(tab.path)
+}
+
+const tabItems = ref()
+const onDropdownVisibleChange = (visible, tab) => {
+  if (visible) {
+    tabItems.value.forEach(({ dropdownRef }) => {
+      console.info(Object.assign({}, dropdownRef))
+      if (dropdownRef.id !== tab.path) {
+        dropdownRef.handleClose()
+      }
+    })
+  }
+}
+
 </script>
 
 <template>
   <el-tabs
     v-bind="$attrs"
-    v-model="currentTabValue"
+    v-model="tabsViewStore.currentTab"
     class="common-tabs"
     type="card"
     :closable="tabsViewStore.historyTabs.length>1"
@@ -61,10 +79,13 @@ const removeOtherHistoryTabs = tab => {
   >
     <tabs-view-item
       v-for="item in tabsViewStore.historyTabs"
+      ref="tabItems"
       :key="item.path"
       :refresh-history-tab="refreshHistoryTab"
       :remove-history-tab="removeHistoryTab"
       :remove-other-history-tabs="removeOtherHistoryTabs"
+      :remove-history-tabs="removeHistoryTabs"
+      :on-dropdown-visible-change="onDropdownVisibleChange"
       :tab-item="item"
     />
   </el-tabs>
diff --git a/src/components/common-tabs-view/tabs-view-item.vue b/src/components/common-tabs-view/tabs-view-item.vue
index ccb6b4e..290a0e7 100644
--- a/src/components/common-tabs-view/tabs-view-item.vue
+++ b/src/components/common-tabs-view/tabs-view-item.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useMenuInfo, useMenuName } from '@/components/utils'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useTabsViewStore } from '@/stores/TabsViewStore'
 
 const tabsViewStore = useTabsViewStore()
@@ -13,9 +13,26 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  removeHistoryTab: Function,
-  removeOtherHistoryTabs: Function,
-  refreshHistoryTab: Function
+  removeHistoryTab: {
+    type: Function,
+    required: true
+  },
+  removeOtherHistoryTabs: {
+    type: Function,
+    required: true
+  },
+  removeHistoryTabs: {
+    type: Function,
+    required: true
+  },
+  refreshHistoryTab: {
+    type: Function,
+    required: true
+  },
+  onDropdownVisibleChange: {
+    type: Function,
+    required: true
+  }
 })
 
 const menuName = computed(() => {
@@ -35,6 +52,12 @@ const menuIcon = computed(() => {
   }
   return null
 })
+const dropdownRef = ref()
+
+defineExpose({
+  dropdownRef
+})
+
 </script>
 
 <template>
@@ -42,7 +65,12 @@ const menuIcon = computed(() => {
     :name="tabItem.path"
   >
     <template #label>
-      <el-dropdown trigger="contextmenu">
+      <el-dropdown
+        :id="tabItem.path"
+        ref="dropdownRef"
+        trigger="contextmenu"
+        @visible-change="onDropdownVisibleChange($event, tabItem)"
+      >
         <span class="custom-tabs-label">
           <common-icon
             v-if="tabsViewStore.isShowTabIcon && menuIcon"
@@ -58,12 +86,32 @@ const menuIcon = computed(() => {
               <common-icon icon="refresh" />
               {{ $t('common.label.refresh') }}
             </el-dropdown-item>
-            <el-dropdown-item @click="removeHistoryTab(tabItem.path)">
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'close')"
+              @click="removeHistoryTab(tabItem.path)"
+            >
               <common-icon icon="close" />
               {{ $t('common.label.close') }}
             </el-dropdown-item>
-            <el-dropdown-item @click="removeOtherHistoryTabs(tabItem)">
-              <common-icon icon="close" />
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'left')"
+              @click="removeHistoryTabs(tabItem, 'left')"
+            >
+              <common-icon icon="KeyboardDoubleArrowLeftFilled" />
+              {{ $t('common.label.closeLeft') }}
+            </el-dropdown-item>
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'right')"
+              @click="removeHistoryTabs(tabItem, 'right')"
+            >
+              <common-icon icon="KeyboardDoubleArrowRightFilled" />
+              {{ $t('common.label.closeRight') }}
+            </el-dropdown-item>
+            <el-dropdown-item
+              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'other')"
+              @click="removeOtherHistoryTabs(tabItem)"
+            >
+              <common-icon icon="PlaylistRemoveFilled" />
               {{ $t('common.label.closeOther') }}
             </el-dropdown-item>
           </el-dropdown-menu>
diff --git a/src/messages/common_cn.js b/src/messages/common_cn.js
index 764a59d..6f8a504 100644
--- a/src/messages/common_cn.js
+++ b/src/messages/common_cn.js
@@ -8,6 +8,8 @@ common.label.settings = '设置'
 common.label.close = '关闭'
 common.label.refresh = '刷新'
 common.label.closeOther = '关闭其他'
+common.label.closeRight = '关闭右侧'
+common.label.closeLeft = '关闭左侧'
 common.label.langCn = '中文'
 common.label.langEn = 'English'
 common.label.language = '语言'
@@ -31,6 +33,9 @@ common.label.delete = '删除'
 common.label.search = '搜索'
 common.label.find = '查找'
 common.label.back = '返回'
+common.label.tabMode = '多标签模式'
+common.label.cachedTabMode = '缓存标签页'
+common.label.showTabIcon = '标签图标'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0}不能为空'
diff --git a/src/messages/common_en.js b/src/messages/common_en.js
index f32092c..6b3b5dd 100644
--- a/src/messages/common_en.js
+++ b/src/messages/common_en.js
@@ -8,6 +8,8 @@ common.label.settings = 'Settings'
 common.label.close = 'Close'
 common.label.refresh = 'Refresh'
 common.label.closeOther = 'Close Others'
+common.label.closeRight = 'Close Right'
+common.label.closeLeft = 'Close Left'
 common.label.langCn = '中文'
 common.label.langEn = 'English'
 common.label.language = 'Language'
@@ -31,6 +33,9 @@ common.label.delete = 'Delete'
 common.label.search = 'Search'
 common.label.find = 'Find'
 common.label.back = 'Back'
+common.label.tabMode = 'Tabs Mode'
+common.label.cachedTabMode = 'Cache Tabs'
+common.label.showTabIcon = 'Tab Icon'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0} is required.'
diff --git a/src/stores/TabsViewStore.js b/src/stores/TabsViewStore.js
index c4408c1..6f199dc 100644
--- a/src/stores/TabsViewStore.js
+++ b/src/stores/TabsViewStore.js
@@ -17,6 +17,7 @@ export const useTabsViewStore = defineStore('tabsView', () => {
   const isTabMode = ref(true)
   const isCachedTabMode = ref(true)
   const isShowTabIcon = ref(true)
+  const currentTab = ref('')
   /**
    * @type {{value: [import('vue-router').RouteRecordRaw]}}
    */
@@ -28,7 +29,9 @@ export const useTabsViewStore = defineStore('tabsView', () => {
 
   const clearHistoryTabs = () => {
     if (historyTabs.value.length) {
-      const tab = historyTabs.value[0]
+      let idx = historyTabs.value.findIndex(v => currentTab.value && v.path === currentTab.value)
+      idx = idx > -1 ? idx : 0
+      const tab = historyTabs.value[idx]
       removeOtherHistoryTabs(tab)
     }
   }
@@ -73,6 +76,7 @@ export const useTabsViewStore = defineStore('tabsView', () => {
       }
     }
   }
+
   const removeHistoryTab = tab => {
     if (historyTabs.value.length > 1) {
       const idx = historyTabs.value.findIndex(v => v.path === tab.path)
@@ -85,6 +89,36 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     }
   }
 
+  const removeOtherHistoryTabs = tab => {
+    historyTabs.value = [tab]
+    cachedTabs.value = []
+    if (isCachedTabMode.value && tab.name) {
+      cachedTabs.value = [tab.name]
+    }
+  }
+
+  const removeHistoryTabs = (tab, type) => {
+    if (tab) {
+      const idx = cachedTabs.value.findIndex(v => v === tab.name)
+      let removeTabs = []
+      if (type === 'right') {
+        removeTabs = historyTabs.value.splice(idx + 1)
+      } else if (type === 'left') {
+        removeTabs = historyTabs.value.splice(0, idx)
+      }
+      if (removeTabs.length) {
+        removeTabs.forEach(removeCachedTab)
+      }
+    }
+  }
+  const addCachedTab = (tab) => {
+    if (isCachedTabMode.value && tab.name) {
+      if (!cachedTabs.value.includes(tab.name)) {
+        cachedTabs.value.push(tab.name)
+      }
+    }
+  }
+
   const removeCachedTab = tab => {
     if (tab) {
       const idx = cachedTabs.value.findIndex(v => v === tab.name)
@@ -94,11 +128,16 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     }
   }
 
-  const removeOtherHistoryTabs = tab => {
-    historyTabs.value = [tab]
-    cachedTabs.value = []
-    if (isCachedTabMode.value && tab.name) {
-      cachedTabs.value = [tab.name]
+  const hasCloseDropdown = (tab, type) => {
+    const idx = historyTabs.value.findIndex(v => v.path === tab.path)
+    switch (type) {
+      case 'close':
+      case 'other':
+        return historyTabs.value.length > 1
+      case 'left':
+        return idx !== 0
+      case 'right':
+        return idx !== historyTabs.value.length - 1
     }
   }
 
@@ -106,6 +145,7 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     isTabMode,
     isCachedTabMode,
     isShowTabIcon,
+    currentTab,
     historyTabs,
     cachedTabs,
     changeTabMode (val) {
@@ -122,9 +162,13 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     },
     removeHistoryTab,
     removeOtherHistoryTabs,
+    removeHistoryTabs,
     clearHistoryTabs,
     findHistoryTab,
-    addHistoryTab
+    addHistoryTab,
+    addCachedTab,
+    removeCachedTab,
+    hasCloseDropdown
   }
 }, {
   persist: true
diff --git a/src/views/components/global/GlobalSettings.vue b/src/views/components/global/GlobalSettings.vue
index 4b0084d..4630e68 100644
--- a/src/views/components/global/GlobalSettings.vue
+++ b/src/views/components/global/GlobalSettings.vue
@@ -51,7 +51,7 @@ const options = [
     }]
   },
   {
-    label: '多标签模式',
+    labelKey: 'common.label.tabMode',
     prop: 'isTabMode',
     type: 'switch',
     model: tabsViewStore,
@@ -60,7 +60,7 @@ const options = [
     }
   },
   {
-    label: '缓存标签',
+    labelKey: 'common.label.cachedTabMode',
     prop: 'isCachedTabMode',
     type: 'switch',
     model: tabsViewStore,
@@ -69,7 +69,7 @@ const options = [
     }
   },
   {
-    label: '标签图标',
+    labelKey: 'common.label.showTabIcon',
     prop: 'isShowTabIcon',
     type: 'switch',
     model: tabsViewStore