From 13181bbb8980eab8c1acc2da01d6027818e05c82 Mon Sep 17 00:00:00 2001 From: Charles7c Date: Wed, 4 Sep 2024 23:01:41 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=20t?= =?UTF-8?q?ab=20=E9=A1=B5=E7=AD=BE=E5=90=8E=E5=8F=82=E6=95=B0=E4=B8=A2?= =?UTF-8?q?=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 同步 Gi Demo 升级 --- src/layout/components/Tabs/index.vue | 25 +++-- src/stores/modules/tabs.ts | 108 +++++++++++-------- src/views/login/components/account/index.vue | 4 +- src/views/login/components/email/index.vue | 4 +- src/views/login/components/phone/index.vue | 4 +- src/views/login/social/index.vue | 4 +- src/views/system/file/main/FileAside.vue | 6 +- 7 files changed, 92 insertions(+), 63 deletions(-) diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue index ba06949..723a895 100644 --- a/src/layout/components/Tabs/index.vue +++ b/src/layout/components/Tabs/index.vue @@ -6,11 +6,11 @@ size="medium" :type="appStore.tabMode" :active-key="route.path" - @tab-click="(key) => handleTabClick(key as string)" - @delete="tabsStore.closeCurrent" + @tab-click="handleTabClick($event as string)" + @delete="tabsStore.closeCurrent($event as string)" > + + + + @@ -40,7 +44,7 @@ diff --git a/src/stores/modules/tabs.ts b/src/stores/modules/tabs.ts index e4f36e0..bbd7400 100644 --- a/src/stores/modules/tabs.ts +++ b/src/stores/modules/tabs.ts @@ -1,59 +1,61 @@ import { defineStore } from 'pinia' import { ref } from 'vue' -import type { RouteRecordName, RouteRecordRaw } from 'vue-router' +import { type RouteLocationNormalized, type RouteRecordName, useRouter } from 'vue-router' import _XEUtils_ from 'xe-utils' -import router from '@/router' import { useRouteStore } from '@/stores' const storeSetup = () => { - const tagList = ref([]) // 保存页签tab的数组 - const cacheList = ref([]) // keep-alive缓存的数组, 元素是组件名 + const router = useRouter() + const tabList = ref([]) // 保存页签tab的数组 + const cacheList = ref([]) // keep-alive缓存的数组，元素是组件名 // 添加一个页签, 如果当前路由已经打开, 则不再重复添加 - const addTagItem = (item: RouteRecordRaw) => { - if (tagList.value.some((i) => i.path === item.path)) return - if (item.meta?.showInTabs ?? true) { - tagList.value.push(item) + const addTabItem = (item: RouteLocationNormalized) => { + const index = tabList.value.findIndex((i) => i.path === item.path) + if (index >= 0) { + tabList.value[index].fullPath !== item.fullPath && (tabList.value[index] = item) + } else { + if (item.meta?.showInTabs ?? true) { + tabList.value.push(item) + } } } // 删除一个页签 - const deleteTagItem = (path: string) => { - const index = tagList.value.findIndex((item) => item.path === path && !item.meta?.affix) - if (index >= 0) { - const isActive = router.currentRoute.value.path === tagList.value[index]['path'] - tagList.value.splice(index, 1) - if (isActive) { - router.push({ path: tagList.value[tagList.value.length - 1]['path'] }) - } + const deleteTabItem = (path: string) => { + const index = tabList.value.findIndex((item) => item.path === path && !item.meta?.affix) + if (index < 0) return + const isActive = router.currentRoute.value.path === tabList.value[index].path + tabList.value.splice(index, 1) + if (isActive) { + router.push(tabList.value[tabList.value.length - 1].fullPath) } } // 清空页签 - const clearTagList = () => { + const clearTabList = () => { const routeStore = useRouteStore() - const arr: RouteRecordRaw[] = [] + const arr: RouteLocationNormalized[] = [] _XEUtils_.eachTree(routeStore.routes, (item) => { if (item.meta?.affix ?? false) { - arr.push(item) + arr.push(item as unknown as RouteLocationNormalized) } }) - tagList.value = arr + tabList.value = arr } // 添加缓存页 - const addCacheItem = (item: RouteRecordRaw) => { - if (item.name) { - if (cacheList.value.includes(item.name)) return - if (item.meta?.keepAlive) { - cacheList.value.push(item.name) - } + const addCacheItem = (item: RouteLocationNormalized) => { + if (!item.name) return + if (cacheList.value.includes(item.name)) return + if (item.meta?.keepAlive) { + cacheList.value.push(item.name) } } // 删除一个缓存页 const deleteCacheItem = (name: RouteRecordName) => { - const index = cacheList.value.findIndex((item) => item === name) + const index = cacheList.value.findIndex((i) => i === name) if (index >= 0) { cacheList.value.splice(index, 1) } @@ -66,50 +68,66 @@ const storeSetup = () => { // 关闭当前 const closeCurrent = (path: string) => { - deleteTagItem(path) - const item = tagList.value.find((i) => i.path === path) - if (item?.name) { - deleteCacheItem(item.name) - } + const item = tabList.value.find((i) => i.path === path) + item?.name && deleteCacheItem(item.name) + deleteTabItem(path) } // 关闭其他 const closeOther = (path: string) => { - const arr = tagList.value.filter((i) => i.path !== path) + const arr = tabList.value.filter((i) => i.path !== path) arr.forEach((item) => { - deleteTagItem(item.path) - if (item?.name) { - deleteCacheItem(item.name) - } + deleteTabItem(item.path) + item?.name && deleteCacheItem(item.name) + }) + } + + // 关闭右侧 + const closeRight = (path: string) => { + const index = tabList.value.findIndex((i) => i.path === path) + if (index < 0) return + const arr = tabList.value.filter((i, n) => n > index) + arr.forEach((item) => { + deleteTabItem(item.path) + item?.name && deleteCacheItem(item.name) }) } // 关闭全部 const closeAll = () => { - clearTagList() + clearTabList() + clearCacheList() router.push({ path: '/' }) } // 重置 const reset = () => { - clearTagList() + clearTabList() clearCacheList() } + // 初始化 + const init = () => { + if (tabList.value.some((i) => !i?.meta.affix)) return + reset() + } + return { - tagList, + tabList, cacheList, - addTagItem, - deleteTagItem, - clearTagList, + addTabItem, + deleteTabItem, + clearTabList, addCacheItem, deleteCacheItem, clearCacheList, closeCurrent, closeOther, + closeRight, closeAll, - reset + reset, + init } } -export const useTabsStore = defineStore('tabs', storeSetup, { persist: false }) +export const useTabsStore = defineStore('tabs', storeSetup, { persist: { storage: sessionStorage } }) diff --git a/src/views/login/components/account/index.vue b/src/views/login/components/account/index.vue index 3368228..6a37bc4 100644 --- a/src/views/login/components/account/index.vue +++ b/src/views/login/components/account/index.vue @@ -34,7 +34,7 @@ import { type FormInstance, Message } from '@arco-design/web-vue' import { useStorage } from '@vueuse/core' import { getImageCaptcha } from '@/apis' -import { useUserStore } from '@/stores' +import { useTabsStore, useUserStore } from '@/stores' import { encryptByRsa } from '@/utils/encrypt' const loginConfig = useStorage('login-config', { @@ -94,6 +94,7 @@ const getCaptcha = () => { } const userStore = useUserStore() +const tabsStore = useTabsStore() const router = useRouter() const loading = ref(false) // 登录 @@ -108,6 +109,7 @@ const handleLogin = async () => { captcha: form.captcha, uuid: form.uuid }) + tabsStore.reset() const { redirect, ...othersQuery } = router.currentRoute.value.query router.push({ path: (redirect as string) || '/', diff --git a/src/views/login/components/email/index.vue b/src/views/login/components/email/index.vue index 5247015..738fab7 100644 --- a/src/views/login/components/email/index.vue +++ b/src/views/login/components/email/index.vue @@ -35,7 +35,7 @@