CN_Tool_client/frontend/src/stores/modules/tabs.ts

import router from '@/routers'
import { defineStore } from 'pinia'
import { getUrlWithParams } from '@/utils'
import { useKeepAliveStore } from './keepAlive'
import type { TabsMenuProps, TabsState } from '@/stores/interface'
import { TABS_STORE_KEY } from '@/stores/constant'

const keepAliveStore = useKeepAliveStore()

const getCacheName = (tabItem: TabsMenuProps) => tabItem.cacheName || tabItem.name
const shouldKeepAlive = (tabItem: TabsMenuProps) => tabItem.isKeepAlive !== false
const getCacheNameList = (tabsMenuList: TabsMenuProps[]) =>
    tabsMenuList.filter(shouldKeepAlive).map(getCacheName).filter(Boolean)

export const useTabsStore = defineStore(TABS_STORE_KEY, {
    state: (): TabsState => ({
        tabsMenuList: []
    }),
    actions: {
        // Add Tabs
        async addTabs(tabItem: TabsMenuProps) {
            if (this.tabsMenuList.every(item => item.path !== tabItem.path)) {
                if (tabItem?.unshift) {
                    this.tabsMenuList.unshift(tabItem)
                } else {
                    this.tabsMenuList.push(tabItem)
                }
            }
            const cacheName = getCacheName(tabItem)
            if (shouldKeepAlive(tabItem) && cacheName && !keepAliveStore.keepAliveName.includes(cacheName)) {
                await keepAliveStore.addKeepAliveName(cacheName)
            }
        },
        // Remove Tabs
        async removeTabs(tabPath: string, isCurrent: boolean = true) {
            const tabItem = this.tabsMenuList.find(item => item.path === tabPath)

            if (isCurrent) {
                this.tabsMenuList.forEach((item, index) => {
                    if (item.path !== tabPath) return
                    const nextTab = this.tabsMenuList[index + 1] || this.tabsMenuList[index - 1]
                    if (!nextTab) return
                    router.push(nextTab.path)
                })
            }
            this.tabsMenuList = this.tabsMenuList.filter(item => item.path !== tabPath)
            // remove keepalive
            const cacheName = tabItem ? getCacheName(tabItem) : ''
            cacheName && (await keepAliveStore.removeKeepAliveName(cacheName))
        },
        // Close Tabs On Side
        async closeTabsOnSide(path: string, type: 'left' | 'right') {
            const currentIndex = this.tabsMenuList.findIndex(item => item.path === path)
            if (currentIndex !== -1) {
                const range = type === 'left' ? [0, currentIndex] : [currentIndex + 1, this.tabsMenuList.length]
                this.tabsMenuList = this.tabsMenuList.filter((item, index) => {
                    return index < range[0] || index >= range[1] || !item.close
                })
            }
            // set keepalive
            await keepAliveStore.setKeepAliveName(getCacheNameList(this.tabsMenuList))
        },
        // Close MultipleTab
        async closeMultipleTab(tabsMenuValue?: string) {
            this.tabsMenuList = this.tabsMenuList.filter(item => {
                return item.path === tabsMenuValue || !item.close
            })
            // set keepalive
            await keepAliveStore.setKeepAliveName(getCacheNameList(this.tabsMenuList))
        },
        // Set Tabs
        async setTabs(tabsMenuList: TabsMenuProps[]) {
            this.tabsMenuList = tabsMenuList
            await keepAliveStore.setKeepAliveName(getCacheNameList(this.tabsMenuList))
        },
        // Set Tabs Title
        async setTabsTitle(title: string) {
            this.tabsMenuList.forEach(item => {
                if (item.path == getUrlWithParams()) item.title = title
            })
        }
    }
    // persist: piniaPersistConfig(TABS_STORE_KEY)
})