admin-vben5/packages/stores/src/modules/tabbar.ts

501 lines
12 KiB
TypeScript
Raw Normal View History

import type { TabDefinition } from '@vben-core/typings';
import type { Router, RouteRecordNormalized } from 'vue-router';
2024-06-08 19:49:06 +08:00
import { toRaw } from 'vue';
import { openWindow, startProgress, stopProgress } from '@vben-core/toolkit';
2024-05-19 21:20:42 +08:00
import { acceptHMRUpdate, defineStore } from 'pinia';
interface TabsState {
/**
* @zh_CN
*/
2024-07-10 00:50:41 +08:00
cachedTabs: Set<string>;
/**
* @zh_CN
*/
dragEndIndex: number;
2024-05-19 21:20:42 +08:00
/**
* @zh_CN
*/
2024-07-10 00:50:41 +08:00
excludeCachedTabs: Set<string>;
2024-05-19 21:20:42 +08:00
/**
* @zh_CN
*/
renderRouteView?: boolean;
/**
* @zh_CN
*/
tabs: TabDefinition[];
2024-07-20 09:36:10 +08:00
/**
* @zh_CN 使watch深度监听的话
*/
updateTime?: number;
2024-05-19 21:20:42 +08:00
}
/**
* @zh_CN 访
*/
export const useCoreTabbarStore = defineStore('core-tabbar', {
2024-05-19 21:20:42 +08:00
actions: {
/**
* Close tabs in bulk
*/
async _bulkCloseByPaths(paths: string[]) {
this.tabs = this.tabs.filter((item) => {
2024-07-10 00:50:41 +08:00
return !paths.includes(getTabPath(item));
2024-05-19 21:20:42 +08:00
});
this.updateCacheTab();
},
/**
* @zh_CN
* @param tab
*/
_close(tab: TabDefinition) {
2024-05-19 21:20:42 +08:00
const { fullPath } = tab;
if (isAffixTab(tab)) {
2024-05-19 21:20:42 +08:00
return;
}
const index = this.tabs.findIndex((item) => item.fullPath === fullPath);
index !== -1 && this.tabs.splice(index, 1);
},
/**
* @zh_CN
*/
async _goToDefaultTab(router: Router) {
if (this.getTabs.length <= 0) {
// TODO: 跳转首页
return;
}
const firstTab = this.getTabs[0];
await this._goToTab(firstTab, router);
},
/**
* @zh_CN
* @param tab
*/
async _goToTab(tab: TabDefinition, router: Router) {
2024-05-19 21:20:42 +08:00
const { params, path, query } = tab;
const toParams = {
params: params || {},
path,
query: query || {},
};
await router.replace(toParams);
},
/**
* @zh_CN
* @param routeTab
*/
addTab(routeTab: TabDefinition) {
2024-05-19 21:20:42 +08:00
const tab = cloneTab(routeTab);
2024-07-10 00:50:41 +08:00
if (!isTabShown(tab)) {
2024-05-19 21:20:42 +08:00
return;
}
const tabIndex = this.tabs.findIndex((tab) => {
2024-07-10 00:50:41 +08:00
return getTabPath(tab) === getTabPath(routeTab);
2024-05-19 21:20:42 +08:00
});
if (tabIndex === -1) {
// 获取动态路由打开数,超过 0 即代表需要控制打开数
const maxNumOfOpenTab = (routeTab?.meta?.maxNumOfOpenTab ??
-1) as number;
// 如果动态路由层级大于 0 了,那么就要限制该路由的打开数限制了
// 获取到已经打开的动态路由数, 判断是否大于某一个值
if (
maxNumOfOpenTab > 0 &&
this.tabs.filter((tab) => tab.name === routeTab.name).length >=
maxNumOfOpenTab
) {
// 关闭第一个
const index = this.tabs.findIndex(
(item) => item.name === routeTab.name,
);
index !== -1 && this.tabs.splice(index, 1);
}
2024-05-19 21:20:42 +08:00
this.tabs.push(tab);
} else {
// 页面已经存在,不重复添加选项卡,只更新选项卡参数
const currentTab = toRaw(this.tabs)[tabIndex];
if (!currentTab.meta.affixTab) {
const mergedTab = { ...currentTab, ...tab };
this.tabs.splice(tabIndex, 1, mergedTab);
}
2024-05-19 21:20:42 +08:00
}
this.updateCacheTab();
},
/**
* @zh_CN
*/
async closeAllTabs(router: Router) {
this.tabs = this.tabs.filter((tab) => isAffixTab(tab));
2024-05-19 21:20:42 +08:00
await this._goToDefaultTab(router);
this.updateCacheTab();
},
/**
* @zh_CN
* @param tab
*/
async closeLeftTabs(tab: TabDefinition) {
2024-05-19 21:20:42 +08:00
const index = this.tabs.findIndex(
2024-07-10 00:50:41 +08:00
(item) => getTabPath(item) === getTabPath(tab),
2024-05-19 21:20:42 +08:00
);
2024-07-10 00:50:41 +08:00
if (index < 1) {
return;
}
const leftTabs = this.tabs.slice(0, index);
const paths: string[] = [];
for (const item of leftTabs) {
if (!isAffixTab(item)) {
paths.push(getTabPath(item));
2024-05-19 21:20:42 +08:00
}
}
2024-07-10 00:50:41 +08:00
await this._bulkCloseByPaths(paths);
2024-05-19 21:20:42 +08:00
},
/**
* @zh_CN
* @param tab
*/
async closeOtherTabs(tab: TabDefinition) {
2024-07-10 00:50:41 +08:00
const closePaths = this.tabs.map((item) => getTabPath(item));
2024-05-19 21:20:42 +08:00
const paths: string[] = [];
for (const path of closePaths) {
if (path !== tab.fullPath) {
2024-07-10 00:50:41 +08:00
const closeTab = this.tabs.find((item) => getTabPath(item) === path);
2024-05-19 21:20:42 +08:00
if (!closeTab) {
continue;
}
2024-07-10 00:50:41 +08:00
if (!isAffixTab(closeTab)) {
paths.push(getTabPath(closeTab));
2024-05-19 21:20:42 +08:00
}
}
}
await this._bulkCloseByPaths(paths);
},
/**
* @zh_CN
* @param tab
*/
async closeRightTabs(tab: TabDefinition) {
2024-05-19 21:20:42 +08:00
const index = this.tabs.findIndex(
2024-07-10 00:50:41 +08:00
(item) => getTabPath(item) === getTabPath(tab),
2024-05-19 21:20:42 +08:00
);
if (index >= 0 && index < this.tabs.length - 1) {
const rightTabs = this.tabs.slice(index + 1);
2024-05-19 21:20:42 +08:00
const paths: string[] = [];
for (const item of rightTabs) {
2024-07-10 00:50:41 +08:00
if (!isAffixTab(item)) {
paths.push(getTabPath(item));
2024-05-19 21:20:42 +08:00
}
}
await this._bulkCloseByPaths(paths);
}
},
/**
* @zh_CN
* @param tab
* @param router
*/
async closeTab(tab: TabDefinition, router: Router) {
2024-05-19 21:20:42 +08:00
const { currentRoute } = router;
// 关闭不是激活选项卡
2024-07-10 00:50:41 +08:00
if (getTabPath(currentRoute.value) !== getTabPath(tab)) {
2024-05-19 21:20:42 +08:00
this._close(tab);
this.updateCacheTab();
return;
}
const index = this.getTabs.findIndex(
2024-07-10 00:50:41 +08:00
(item) => getTabPath(item) === getTabPath(currentRoute.value),
2024-05-19 21:20:42 +08:00
);
const before = this.getTabs[index - 1];
const after = this.getTabs[index + 1];
// 下一个tab存在跳转到下一个
if (after) {
this._close(currentRoute.value);
await this._goToTab(after, router);
// 上一个tab存在跳转到上一个
} else if (before) {
this._close(currentRoute.value);
await this._goToTab(before, router);
} else {
2024-06-02 22:13:15 +08:00
console.error('Failed to close the tab; only one tab remains open.');
2024-05-19 21:20:42 +08:00
}
},
2024-05-19 21:20:42 +08:00
/**
* @zh_CN key关闭标签页
* @param key
*/
async closeTabByKey(key: string, router: Router) {
2024-07-10 00:50:41 +08:00
const index = this.tabs.findIndex((item) => getTabPath(item) === key);
2024-05-19 21:20:42 +08:00
if (index === -1) {
return;
}
await this.closeTab(this.tabs[index], router);
},
/**
* @zh_CN
* @param tab
*/
async openTabInNewWindow(tab: TabDefinition) {
const { hash, origin } = location;
const path = tab.fullPath;
const fullPath = path.startsWith('/') ? path : `/${path}`;
const url = `${origin}${hash ? '/#' : ''}${fullPath}`;
openWindow(url, { target: '_blank' });
},
2024-05-19 21:20:42 +08:00
/**
* @zh_CN
* @param tab
*/
async pinTab(tab: TabDefinition) {
2024-05-19 21:20:42 +08:00
const index = this.tabs.findIndex(
2024-07-10 00:50:41 +08:00
(item) => getTabPath(item) === getTabPath(tab),
2024-05-19 21:20:42 +08:00
);
if (index !== -1) {
2024-07-06 10:08:46 +08:00
tab.meta.affixTab = true;
// this.addTab(tab);
this.tabs.splice(index, 1, tab);
2024-07-06 10:08:46 +08:00
}
2024-05-19 21:20:42 +08:00
},
2024-05-19 21:20:42 +08:00
/**
*
*/
async refresh(router: Router) {
2024-05-19 21:20:42 +08:00
const { currentRoute } = router;
const { name } = currentRoute.value;
2024-07-10 00:50:41 +08:00
this.excludeCachedTabs.add(name as string);
2024-05-19 21:20:42 +08:00
this.renderRouteView = false;
startProgress();
await new Promise((resolve) => setTimeout(resolve, 200));
2024-07-10 00:50:41 +08:00
this.excludeCachedTabs.delete(name as string);
2024-05-19 21:20:42 +08:00
this.renderRouteView = true;
stopProgress();
},
/**
* @zh_CN
*/
async resetTabTitle(tab: TabDefinition) {
if (!tab?.meta?.newTabTitle) {
return;
}
const findTab = this.tabs.find(
(item) => getTabPath(item) === getTabPath(tab),
);
if (findTab) {
findTab.meta.newTabTitle = undefined;
await this.updateCacheTab();
}
},
2024-05-19 21:20:42 +08:00
/**
*
* @param tabs
*/
setAffixTabs(tabs: RouteRecordNormalized[]) {
for (const tab of tabs) {
tab.meta.affixTab = true;
2024-05-19 21:20:42 +08:00
this.addTab(routeToTab(tab));
}
},
/**
* @zh_CN
* @param tab
* @param title
*/
async setTabTitle(tab: TabDefinition, title: string) {
const findTab = this.tabs.find(
(item) => getTabPath(item) === getTabPath(tab),
);
2024-07-20 09:36:10 +08:00
if (findTab) {
findTab.meta.newTabTitle = title;
2024-07-20 09:36:10 +08:00
await this.updateCacheTab();
}
},
2024-07-20 09:36:10 +08:00
async setUpdateTime() {
this.updateTime = Date.now();
},
/**
* @zh_CN
* @param oldIndex
* @param newIndex
*/
async sortTabs(oldIndex: number, newIndex: number) {
const currentTab = this.tabs[oldIndex];
this.tabs.splice(oldIndex, 1);
this.tabs.splice(newIndex, 0, currentTab);
this.dragEndIndex = this.dragEndIndex + 1;
},
/**
* @zh_CN
* @param tab
*/
async toggleTabPin(tab: TabDefinition) {
const affixTab = tab?.meta?.affixTab ?? false;
await (affixTab ? this.unpinTab(tab) : this.pinTab(tab));
},
2024-05-19 21:20:42 +08:00
/**
* @zh_CN
* @param tab
*/
async unpinTab(tab: TabDefinition) {
const index = this.tabs.findIndex(
2024-07-10 00:50:41 +08:00
(item) => getTabPath(item) === getTabPath(tab),
2024-05-19 21:20:42 +08:00
);
if (index !== -1) {
2024-07-06 10:08:46 +08:00
tab.meta.affixTab = false;
// this.addTab(tab);
this.tabs.splice(index, 1, tab);
2024-05-19 21:20:42 +08:00
}
},
/**
*
*/
async updateCacheTab() {
const cacheMap = new Set<string>();
for (const tab of this.tabs) {
// 跳过不需要持久化的标签页
const keepAlive = tab.meta?.keepAlive;
if (!keepAlive) {
continue;
}
tab.matched.forEach((t, i) => {
if (i > 0) {
cacheMap.add(t.name as string);
}
});
const name = tab.name as string;
cacheMap.add(name);
}
2024-07-10 00:50:41 +08:00
this.cachedTabs = cacheMap;
2024-05-19 21:20:42 +08:00
},
},
getters: {
affixTabs(): TabDefinition[] {
const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
return affixTabs.sort((a, b) => {
const orderA = (a.meta?.affixTabOrder ?? 0) as number;
const orderB = (b.meta?.affixTabOrder ?? 0) as number;
return orderA - orderB;
});
},
2024-07-10 00:50:41 +08:00
getCachedTabs(): string[] {
return [...this.cachedTabs];
2024-05-19 21:20:42 +08:00
},
2024-07-10 00:50:41 +08:00
getExcludeCachedTabs(): string[] {
return [...this.excludeCachedTabs];
2024-05-19 21:20:42 +08:00
},
getTabs(): TabDefinition[] {
const normalTabs = this.tabs.filter((tab) => !isAffixTab(tab));
return [...this.affixTabs, ...normalTabs].filter(Boolean);
2024-05-19 21:20:42 +08:00
},
},
2024-07-12 22:23:41 +08:00
persist: [
// tabs不需要保存在localStorage
{
paths: ['tabs'],
storage: sessionStorage,
},
],
2024-05-19 21:20:42 +08:00
state: (): TabsState => ({
2024-07-10 00:50:41 +08:00
cachedTabs: new Set(),
dragEndIndex: 0,
2024-07-10 00:50:41 +08:00
excludeCachedTabs: new Set(),
2024-05-19 21:20:42 +08:00
renderRouteView: true,
tabs: [],
2024-07-20 09:36:10 +08:00
updateTime: Date.now(),
2024-05-19 21:20:42 +08:00
}),
});
// 解决热更新问题
const hot = import.meta.hot;
if (hot) {
hot.accept(acceptHMRUpdate(useCoreTabbarStore, hot));
2024-05-19 21:20:42 +08:00
}
2024-07-10 00:50:41 +08:00
/**
* @zh_CN ,
* @param route
*/
function cloneTab(route: TabDefinition): TabDefinition {
2024-07-10 00:50:41 +08:00
if (!route) {
return route;
}
const { matched, ...opt } = route;
return {
...opt,
matched: (matched
? matched.map((item) => ({
meta: item.meta,
name: item.name,
path: item.path,
}))
: undefined) as RouteRecordNormalized[],
};
}
/**
* @zh_CN
* @param tab
*/
function isAffixTab(tab: TabDefinition) {
return tab?.meta?.affixTab ?? false;
2024-07-10 00:50:41 +08:00
}
/**
* @zh_CN
* @param tab
*/
function isTabShown(tab: TabDefinition) {
2024-07-10 00:50:41 +08:00
return !tab.meta.hideInTab;
}
/**
* @zh_CN
* @param tab
*/
function getTabPath(tab: RouteRecordNormalized | TabDefinition) {
return decodeURIComponent((tab as TabDefinition).fullPath || tab.path);
2024-07-10 00:50:41 +08:00
}
function routeToTab(route: RouteRecordNormalized) {
return {
meta: route.meta,
name: route.name,
path: route.path,
} as TabDefinition;
2024-07-10 00:50:41 +08:00
}