perf: optimize the closing jump logic of tabs

* 依据tab访问历史回退上一个tab，原逻辑是返回一下个 或 上一个
 * 支持在配置中开启或关闭

packages/@core/preferences/src/config.ts

@@ -106,6 +106,7 @@ const defaultPreferences: Preferences = {
     showMaximize: true,
     showMore: true,
     styleType: 'chrome',
+    visitHistory: true,
     wheelable: true,
   },
   theme: {

packages/@core/preferences/src/types.ts

@@ -224,6 +224,8 @@ interface TabbarPreferences {
   showMore: boolean;
   /** 标签页风格 */
   styleType: TabsStyleType;
+  /** 是否开启访问历史记录 */
+  visitHistory: boolean;
   /** 是否开启鼠标滚轮响应 */
   wheelable: boolean;
 }

packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue

@@ -18,6 +18,7 @@ defineProps<{ disabled?: boolean }>();
 const tabbarEnable = defineModel<boolean>('tabbarEnable');
 const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarVisitHistory = defineModel<boolean>('tabbarVisitHistory');
 const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
 const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
@@ -56,6 +57,9 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.persist') }}
   </SwitchItem>
+  <SwitchItem v-model="tabbarVisitHistory" :disabled="!tabbarEnable" :tip="$t('preferences.tabbar.visitHistoryTip')">
+    {{ $t('preferences.tabbar.visitHistory') }}
+  </SwitchItem>
   <NumberFieldItem
     v-model="tabbarMaxCount"
     :disabled="!tabbarEnable"

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -120,6 +120,7 @@ const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarVisitHistory = defineModel<boolean>('tabbarVisitHistory');
 const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
 const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
@@ -400,6 +401,7 @@ async function handleReset() {
                 v-model:tabbar-draggable="tabbarDraggable"
                 v-model:tabbar-enable="tabbarEnable"
                 v-model:tabbar-persist="tabbarPersist"
+                v-model:tabbar-visit-history="tabbarVisitHistory"
                 v-model:tabbar-show-icon="tabbarShowIcon"
                 v-model:tabbar-show-maximize="tabbarShowMaximize"
                 v-model:tabbar-show-more="tabbarShowMore"

packages/locales/src/langs/en-US/preferences.json

@@ -68,6 +68,8 @@
     "showMore": "Show More Button",
     "showMaximize": "Show Maximize Button",
     "persist": "Persist Tabs",
+    "visitHistory": "Visit History",
+    "visitHistoryTip": "When enabled, the tab bar records tab visit history. \nClosing the current tab will automatically select the last opened tab.",
     "maxCount": "Max Count of Tabs",
     "maxCountTip": "When the number of tabs exceeds the maximum,\nthe oldest tab will be closed.\n Set to 0 to disable count checking.",
     "draggable": "Enable Draggable Sort",

packages/locales/src/langs/zh-CN/preferences.json

@@ -68,6 +68,8 @@
     "showMore": "显示更多按钮",
     "showMaximize": "显示最大化按钮",
     "persist": "持久化标签页",
+    "visitHistory": "访问历史记录",
+    "visitHistoryTip": "开启后，标签栏会记录标签访问历史\n关闭当前标签，会自动选中上一个打开的标签",
     "maxCount": "最大标签数",
     "maxCountTip": "每次打开新的标签时如果超过最大标签数，\n会自动关闭一个最先打开的标签\n设置为 0 则不限制",
     "draggable": "启动拖拽排序",

packages/stores/src/modules/tabbar.ts

@@ -73,7 +73,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
       this.tabs = this.tabs.filter(
         (item) => !keySet.has(getTabKeyFromTab(item)),
       );
-      this.visitHistory.remove(...keys);
+      if (isVisitHistory()) {
+        this.visitHistory.remove(...keys);
+      }
 
       await this.updateCacheTabs();
     },
@@ -179,7 +181,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
       }
       this.updateCacheTabs();
       // 添加访问历史记录
-      this.visitHistory.push(tab.key as string);
+      if (isVisitHistory()) {
+        this.visitHistory.push(tab.key as string);
+      }
       return tab;
     },
     /**
@@ -188,8 +192,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
     async closeAllTabs(router: Router) {
       const newTabs = this.tabs.filter((tab) => isAffixTab(tab));
       this.tabs = newTabs.length > 0 ? newTabs : [...this.tabs].splice(0, 1);
-      // 设置访问历史
-      this.visitHistory.retain(this.tabs.map((item) => getTabKeyFromTab(item)));
+      // 设置访问历史记录
+      if (isVisitHistory()) {
+        this.visitHistory.retain(
+          this.tabs.map((item) => getTabKeyFromTab(item)),
+        );
+      }
       await this._goToDefaultTab(router);
       this.updateCacheTabs();
     },
@@ -270,8 +278,10 @@ export const useTabbarStore = defineStore('core-tabbar', {
       if (currentTabKey !== getTabKeyFromTab(tab)) {
         this._close(tab);
         this.updateCacheTabs();
-        // 移除访问历史
-        this.visitHistory.remove(getTabKeyFromTab(tab));
+        // 移除访问历史记录
+        if (isVisitHistory()) {
+          this.visitHistory.remove(getTabKeyFromTab(tab));
+        }
         return;
       }
       if (this.getTabs.length <= 1) {
@@ -279,12 +289,43 @@ export const useTabbarStore = defineStore('core-tabbar', {
         return;
       }
       // 从访问历史记录中移除当前关闭的tab
-      this.visitHistory.remove(currentTabKey);
-      this._close(tab);
-      const previousTabKey = this.visitHistory.pop();
-      if (previousTabKey) {
-        // 跳转到上一个tab
-        await this._goToTab(this.getTabByKey(previousTabKey), router);
+      if (isVisitHistory()) {
+        this.visitHistory.remove(currentTabKey);
+        this._close(tab);
+
+        let previousTab: TabDefinition | undefined;
+        let previousTabKey: string | undefined;
+        while (true) {
+          previousTabKey = this.visitHistory.pop();
+          if (!previousTabKey) {
+            break;
+          }
+          previousTab = this.getTabByKey(previousTabKey);
+          if (previousTab) {
+            break;
+          }
+        }
+        await (previousTab
+          ? this._goToTab(previousTab, router)
+          : this._goToDefaultTab(router));
+        return;
+      }
+      // 未开启访问历史记录，直接跳转下一个或上一个tab
+      const index = this.getTabs.findIndex(
+        (item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
+      );
+
+      const before = this.getTabs[index - 1];
+      const after = this.getTabs[index + 1];
+
+      // 下一个tab存在，跳转到下一个
+      if (after) {
+        this._close(tab);
+        await this._goToTab(after, router);
+        // 上一个tab存在，跳转到上一个
+      } else if (before) {
+        this._close(tab);
+        await this._goToTab(before, router);
       }
     },
 
@@ -642,6 +683,13 @@ function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
   }
 }
 
+/**
+ * @zh_CN 是否开启访问历史记录
+ */
+function isVisitHistory() {
+  return preferences.tabbar.visitHistory;
+}
+
 /**
  * 从tab获取tab页的key
  * 如果tab没有key,那么就从route获取key