diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index d9977b1e..f788e895 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -106,6 +106,7 @@ const defaultPreferences: Preferences = { showMaximize: true, showMore: true, styleType: 'chrome', + visitHistory: true, wheelable: true, }, theme: { diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 17224b04..e1ef0a38 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -224,6 +224,8 @@ interface TabbarPreferences { showMore: boolean; /** 标签页风格 */ styleType: TabsStyleType; + /** 是否开启访问历史记录 */ + visitHistory: boolean; /** 是否开启鼠标滚轮响应 */ wheelable: boolean; } diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue index ea533dad..813f6041 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue +++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue @@ -18,6 +18,7 @@ defineProps<{ disabled?: boolean }>(); const tabbarEnable = defineModel('tabbarEnable'); const tabbarShowIcon = defineModel('tabbarShowIcon'); const tabbarPersist = defineModel('tabbarPersist'); +const tabbarVisitHistory = defineModel('tabbarVisitHistory'); const tabbarDraggable = defineModel('tabbarDraggable'); const tabbarWheelable = defineModel('tabbarWheelable'); const tabbarStyleType = defineModel('tabbarStyleType'); @@ -56,6 +57,9 @@ const styleItems = computed((): SelectOption[] => [ {{ $t('preferences.tabbar.persist') }} + + {{ $t('preferences.tabbar.visitHistory') }} + ('tabbarShowIcon'); const tabbarShowMore = defineModel('tabbarShowMore'); const tabbarShowMaximize = defineModel('tabbarShowMaximize'); const tabbarPersist = defineModel('tabbarPersist'); +const tabbarVisitHistory = defineModel('tabbarVisitHistory'); const tabbarDraggable = defineModel('tabbarDraggable'); const tabbarWheelable = defineModel('tabbarWheelable'); const tabbarStyleType = defineModel('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" diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json index 977632ac..f32d0b6a 100644 --- a/packages/locales/src/langs/en-US/preferences.json +++ b/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", diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json index f8e390f2..a36a9dbb 100644 --- a/packages/locales/src/langs/zh-CN/preferences.json +++ b/packages/locales/src/langs/zh-CN/preferences.json @@ -68,6 +68,8 @@ "showMore": "显示更多按钮", "showMaximize": "显示最大化按钮", "persist": "持久化标签页", + "visitHistory": "访问历史记录", + "visitHistoryTip": "开启后,标签栏会记录标签访问历史\n关闭当前标签,会自动选中上一个打开的标签", "maxCount": "最大标签数", "maxCountTip": "每次打开新的标签时如果超过最大标签数,\n会自动关闭一个最先打开的标签\n设置为 0 则不限制", "draggable": "启动拖拽排序", diff --git a/packages/stores/src/modules/tabbar.ts b/packages/stores/src/modules/tabbar.ts index 2de11b81..6b18c26e 100644 --- a/packages/stores/src/modules/tabbar.ts +++ b/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