diff --git a/kicc-ui/src/enums/cacheEnum.ts b/kicc-ui/src/enums/cacheEnum.ts index 29e58f4a..a58a0907 100644 --- a/kicc-ui/src/enums/cacheEnum.ts +++ b/kicc-ui/src/enums/cacheEnum.ts @@ -28,8 +28,10 @@ export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__'; // 锁定信息 export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__'; +// 多标签键 export const MULTIPLE_TABS_KEY = 'MULTIPLE_TABS__KEY__'; +// 应用主题键 export const APP_DARK_MODE_KEY_ = '__APP__DARK__MODE__'; // 基本全局本地缓存密钥 diff --git a/kicc-ui/src/store/modules/multipleTab.ts b/kicc-ui/src/store/modules/multipleTab.ts index 37f508f1..2c8b802b 100644 --- a/kicc-ui/src/store/modules/multipleTab.ts +++ b/kicc-ui/src/store/modules/multipleTab.ts @@ -53,98 +53,82 @@ export const useMultipleTabStore = defineStore({ }, }, actions: { - /** - * 根据当前打开的标签更新缓存 - */ + /** 更新缓存标签缓存目前打开的标签 */ async updateCacheTab() { const cacheMap: Set = new Set(); - for (const tab of this.tabList) { const item = getRawRoute(tab); // 忽略缓存 const needCache = !item.meta?.ignoreKeepAlive; - if (!needCache) { - continue; - } + if (!needCache) continue; const name = item.name as string; cacheMap.add(name); } this.cacheTabList = cacheMap; }, - /** - * 刷新标签 - */ + /** 刷新标签 */ async refreshPage(router: Router) { const { currentRoute } = router; const route = unref(currentRoute); const name = route.name; - const findTab = this.getCachedTabList.find((item) => item === name); - if (findTab) { - this.cacheTabList.delete(findTab); - } + if (findTab) this.cacheTabList.delete(findTab); const redo = useRedo(router); await redo(); }, + /** 清除所有缓存标签 */ clearCacheTabs(): void { this.cacheTabList = new Set(); }, + /** 刷新标签数据存储数据 */ resetState(): void { this.tabList = []; this.clearCacheTabs(); }, + /** 处理跳转页面 */ goToPage(router: Router) { const go = useGo(router); const len = this.tabList.length; const { path } = unref(router.currentRoute); - let toPath: PageEnum | string = PageEnum.BASE_HOME; - if (len > 0) { const page = this.tabList[len - 1]; const p = page.fullPath || page.path; - if (p) { - toPath = p; - } + if (p) toPath = p; } // 如果path不等于toPath,就跳转到当前页面并报错 path !== toPath && go(toPath as PageEnum, true); }, + /** 添加标签页 */ async addTab(route: RouteLocationNormalized) { const { path, name, fullPath, params, query } = getRawRoute(route); - // 404 页面不需要添加标签 + // 404页面不需要添加标签 if ( path === PageEnum.ERROR_PAGE || path === PageEnum.BASE_LOGIN || !name || [REDIRECT_NAME, PAGE_NOT_FOUND_NAME].includes(name as string) - ) { - return; - } + ) return; let updateIndex = -1; - // 现有页面,不要重复添加标签 + // 现有页面,不要重复添加标签 const tabHasExits = this.tabList.some((tab, index) => { updateIndex = index; return (tab.fullPath || tab.path) === (fullPath || path); }); - // 如果选项卡已经存在,则执行更新操作 if (tabHasExits) { const curTab = toRaw(this.tabList)[updateIndex]; - if (!curTab) { - return; - } + if (!curTab) return; curTab.params = params || curTab.params; curTab.query = query || curTab.query; curTab.fullPath = fullPath || curTab.fullPath; this.tabList.splice(updateIndex, 1, curTab); - } else { - // 添加选项卡 - this.tabList.push(route); - } + // 添加选项卡 + } else this.tabList.push(route); this.updateCacheTab(); cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList); }, + /** 关闭标签页 */ async closeTab(tab: RouteLocationNormalized, router: Router) { const getToTarget = (tabItem: RouteLocationNormalized) => { const { params, path, query } = tabItem; @@ -156,20 +140,15 @@ export const useMultipleTabStore = defineStore({ }; const close = (route: RouteLocationNormalized) => { const { fullPath, meta: { affix } = {} } = route; - if (affix) { - return; - } + if (affix) return; const index = this.tabList.findIndex((item) => item.fullPath === fullPath); index !== -1 && this.tabList.splice(index, 1); }; const { currentRoute, replace } = router; const { path } = unref(currentRoute); - if (path !== tab.path) { - // 关闭不是激活选项卡 - close(tab); - return; - } - // 关闭被激活atb + // 关闭不是激活选项卡 + if (path !== tab.path) return close(tab); + // 关闭被激活选项卡 let toTarget: RouteLocationRaw = {}; const index = this.tabList.findIndex((item) => item.path === path); // 如果当前是最左边的选项卡 @@ -179,7 +158,7 @@ export const useMultipleTabStore = defineStore({ const userStore = useUserStore(); toTarget = userStore.getUserInfo.homePath || PageEnum.BASE_HOME; } else { - // 跳转到右侧标签 + // 跳转到右侧标签 const page = this.tabList[index + 1]; toTarget = getToTarget(page); } @@ -189,21 +168,21 @@ export const useMultipleTabStore = defineStore({ toTarget = getToTarget(page); } close(currentRoute.value); - replace(toTarget); + await replace(toTarget); }, - // 按key关闭 + /** 标签新增与删除回调处理,用于关闭标签页 */ async closeTabByKey(key: string, router: Router) { const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key); index !== -1 && this.closeTab(this.tabList[index], router); }, - // 对选项卡进行排序 + /** 对选项卡进行排序 */ async sortTabs(oldIndex: number, newIndex: number) { const currentTab = this.tabList[oldIndex]; this.tabList.splice(oldIndex, 1); this.tabList.splice(newIndex, 0, currentTab); this.lastDragEndIndex = this.lastDragEndIndex + 1; }, - // 关闭右侧的标签并跳转 + /** 关闭右侧的标签并跳转 */ async closeLeftTabs(route: RouteLocationNormalized, router: Router) { const index = this.tabList.findIndex((item) => item.path === route.path); if (index > 0) { @@ -211,70 +190,55 @@ export const useMultipleTabStore = defineStore({ const pathList: string[] = []; for (const item of leftTabs) { const affix = item?.meta?.affix ?? false; - if (!affix) { - pathList.push(item.fullPath); - } + if (!affix) pathList.push(item.fullPath); } this.bulkCloseTabs(pathList); } this.updateCacheTab(); handleGotoPage(router); }, - // 关闭左侧标签并跳转 + /** 关闭左侧标签并跳转 */ async closeRightTabs(route: RouteLocationNormalized, router: Router) { const index = this.tabList.findIndex((item) => item.fullPath === route.fullPath); - if (index >= 0 && index < this.tabList.length - 1) { const rightTabs = this.tabList.slice(index + 1, this.tabList.length); - const pathList: string[] = []; for (const item of rightTabs) { const affix = item?.meta?.affix ?? false; - if (!affix) { - pathList.push(item.fullPath); - } + if (!affix) pathList.push(item.fullPath); } this.bulkCloseTabs(pathList); } this.updateCacheTab(); handleGotoPage(router); }, + /** 关闭全部标签并跳转 */ async closeAllTab(router: Router) { this.tabList = this.tabList.filter((item) => item?.meta?.affix ?? false); this.clearCacheTabs(); this.goToPage(router); }, - /** - * 关闭其他标签 - */ + /** 关闭其他标签 */ async closeOtherTabs(route: RouteLocationNormalized, router: Router) { const closePathList = this.tabList.map((item) => item.fullPath); const pathList: string[] = []; for (const path of closePathList) { if (path !== route.fullPath) { const closeItem = this.tabList.find((item) => item.path === path); - if (!closeItem) { - continue; - } + if (!closeItem) continue; const affix = closeItem?.meta?.affix ?? false; - if (!affix) { - pathList.push(closeItem.fullPath); - } + if (!affix) pathList.push(closeItem.fullPath); } } this.bulkCloseTabs(pathList); this.updateCacheTab(); handleGotoPage(router); }, - /** - * 批量关闭标签页 - */ + /** 批量关闭标签页 */ async bulkCloseTabs(pathList: string[]) { this.tabList = this.tabList.filter((item) => !pathList.includes(item.fullPath)); }, - /** - * 设置标签的标题 - */ + /** 设置标签的标题 */ async setTabTitle(title: string, route: RouteLocationNormalized) { const findTab = this.getTabList.find((item) => item === route); if (findTab) { @@ -282,9 +246,7 @@ export const useMultipleTabStore = defineStore({ await this.updateCacheTab(); } }, - /** - * 替换选项卡的路径 - */ + /** 替换选项卡的路径 */ async updateTabPath(fullPath: string, route: RouteLocationNormalized) { const findTab = this.getTabList.find((item) => item === route); if (findTab) {