nova-admin/src/store/modules/tab.ts

import { defineStore } from 'pinia';
import { RouteLocationNormalized } from 'vue-router';
import { useAppRouter } from '@/hook';

interface TabState {
  inherentTab: {
    name: string;
    title: string;
    path: string;
  }[];
  tabs: RouteLocationNormalized[];
  tabWhiteList: string[];
  currentTab: string;
}
export const useTabStore = defineStore('tab-store', {
  state: (): TabState => {
    return {
      inherentTab: [
        {
          name: 'dashboard_workbench',
          title: '工作台',
          path: '/',
        },
      ],
      tabs: [],
      tabWhiteList: ['not-found', 'not-permission', 'service-error', 'login'],
      currentTab: 'dashboard_workbench',
    };
  },
  getters: {
    inherentTabName(): string[] {
      return this.inherentTab.map((item) => {
        return item.name;
      });
    },
  },
  actions: {
    addTab(route: RouteLocationNormalized) {
      // 如果已经在固有标签里则不添加
      if (this.inherentTabName.includes(route.name as string)) {
        return;
      }
      // 如果标签名称已存在则不添加
      if (this.hasExistTab(route.name as string)) {
        return;
      }
      // 如果在白名单内则不添加,错误页等
      if (this.tabWhiteList.includes(route.name as string)) {
        return;
      }
      this.tabs.push(route);
    },
    closeTab(name: string) {
      const { routerPush, toRoot } = useAppRouter(false);
      const tabsLength = this.tabs.length;
      // 如果动态标签大于一个,才会标签跳转
      if (this.tabs.length > 1) {
        // 获取关闭的标签索引
        const index = this.getTabIndex(name);
        const isLast = index + 1 === tabsLength;
        // 如果是关闭的当前页面，路由跳转到原先标签的后一个标签
        if (this.currentTab === name && !isLast) {
          // 跳转到后一个标签
          routerPush(this.tabs[index + 1].path);
        } else if (this.currentTab === name && isLast) {
          // 已经是最后一个了，就跳转前一个
          routerPush(this.tabs[index - 1].path);
        }
      }
      // 删除标签
      this.tabs = this.tabs.filter((item) => {
        return item.name !== name;
      });
      // 删除后如果清空了，就跳转到默认首页
      if (tabsLength - 1 === 0) {
        toRoot();
      }
    },

    closeOtherTabs(name: string) {
      const index = this.getTabIndex(name);
      this.tabs = this.tabs.filter((item, i) => i === index);
    },
    closeLeftTabs(name: string) {
      const index = this.getTabIndex(name);
      this.tabs = this.tabs.filter((item, i) => i >= index);
    },
    closeRightTabs(name: string) {
      const index = this.getTabIndex(name);
      this.tabs = this.tabs.filter((item, i) => i <= index);
    },
    closeAllTabs() {
      const { toRoot } = useAppRouter(false);
      this.tabs.length = 0;
      toRoot();
    },

    hasExistTab(name: string) {
      return this.tabs.some((item) => {
        return item.name === name;
      });
    },
    /* 设置当前激活的标签 */
    setCurrentTab(name: string) {
      this.currentTab = name;
    },
    getTabIndex(name: string) {
      return this.tabs.findIndex((item) => {
        return item.name === name;
      });
    },
  },
  persist: {
    enabled: true,
  },
});