// 多標簽頁信息存儲
export const useMultipleTabStore = defineStore({
  id: 'app-multiple-tab',
  state: { /*...*/ },
  getters: { /*...*/ }
  actions：{ /*...*/ }   
});
export function useMultipleTabWithOutStore() {
  return useMultipleTabStore(store);
}

// 多標簽頁狀態(tài)
export interface MultipleTabState { 
  cacheTabList: Set<string>;  // 緩存標簽頁路由名稱 
  // 標簽頁路由列表   RouteLocationNormalized  路由記錄的標準化版本
  tabList: RouteLocationNormalized[];  
  lastDragEndIndex: number; // 最后一次拖動標簽的索引
} 
state: (): MultipleTabState => ({ 
  cacheTabList: new Set(), 
  tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [],  // 優(yōu)先加載緩存/本地存儲內(nèi)容
  lastDragEndIndex: 0,
}),
getters: {
  // 獲取標簽頁路由列表
  getTabList(): RouteLocationNormalized[] {
    return this.tabList;
  },
  // 獲取緩存標簽頁路由名稱列表
  getCachedTabList(): string[] {
    return Array.from(this.cacheTabList);
  },
  // 獲取最后一次拖動標簽的索引
  getLastDragEndIndex(): number {
    return this.lastDragEndIndex;
  },
}, 

// 打開標簽頁
async addTab(route: RouteLocationNormalized) {
  // 路由基本屬性
  const { path, name, fullPath, params, query, meta } = getRawRoute(route);
  // 錯誤處理頁面 登錄 重定向 等頁面
  if (
    path === PageEnum.ERROR_PAGE ||
    path === PageEnum.BASE_LOGIN ||
    !name ||
    [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string)
  ) {
    return;
  }
  let updateIndex = -1;
  // 標簽頁已經(jīng)存在，不在重復添加標簽
  const tabHasExits = this.tabList.some((tab, index) => {
    updateIndex = index;
    return (tab.fullPath || tab.path) === (fullPath || path);
  });
  // 標簽已經(jīng)存在，執(zhí)行更新操作
  if (tabHasExits) {
    const curTab = toRaw(this.tabList)[updateIndex]; // 獲取當前標簽頁路由記錄
    if (!curTab) {
      return;
    }
    curTab.params = params || curTab.params; // 從 path 中提取的已解碼參數(shù)字典
    curTab.query = query || curTab.query; // 從 URL 的 search 部分提取的已解碼查詢參數(shù)的字典。
    curTab.fullPath = fullPath || curTab.fullPath; // URL 編碼與路由地址有關(guān)。包括 path、 query 和 hash。
    this.tabList.splice(updateIndex, 1, curTab); // 替換原有的標簽頁路由記錄
  } else {
    // 添加標簽頁
    // 獲取動態(tài)路由打開數(shù)，超過 0 即代表需要控制打開數(shù)
    const dynamicLevel = meta?.dynamicLevel ?? -1;
    if (dynamicLevel > 0) {
      // 如果設置大于 0 了，那么就要限制該路由的打開數(shù)限制了
      // 首先獲取到真實的路由，使用配置方式減少計算開銷.
      // const realName: string = path.match(/(\S*)\//)![1];
      const realPath = meta?.realPath ?? '';
      // 獲取到已經(jīng)打開的動態(tài)路由數(shù), 判斷是否大于某一個值
      if (
        this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel
      ) {
        // 關(guān)閉第一個
        const index = this.tabList.findIndex((item) => item.meta.realPath === realPath);
        index !== -1 && this.tabList.splice(index, 1);
      }
    }
    this.tabList.push(route); // 添加至路由列表中
  }
  this.updateCacheTab();
  // 使用本地存儲持久化
  cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
},

// 根據(jù)當前打開的標簽更新緩存
async updateCacheTab() {
  // Set 集合存儲
  const cacheMap: Set<string> = new Set();
  for (const tab of this.tabList) {
    const item = getRawRoute(tab);
    // 若忽略KeepAlive緩存 不緩存
    const needCache = !item.meta?.ignoreKeepAlive;
    if (!needCache) {
      continue;
    }
    const name = item.name as string;
    cacheMap.add(name);
  }
  this.cacheTabList = cacheMap; // 存儲路由記錄名稱的 Set 集合
},

// 設置標簽標題
async setTabTitle(title: string, route: RouteLocationNormalized) {
  const findTab = this.getTabList.find((item) => item === route);
  if (findTab) {
    findTab.meta.title = title; // meta實現(xiàn) 設置每個頁面的title標題
    await this.updateCacheTab();
  }
},

// src\layouts\default\tabs\components\TabContent.vue 
<template>
  <Dropdown :dropMenuList="getDropMenuList" :trigger="getTrigger" @menu-event="handleMenuEvent">
    <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs">
      <span class="ml-1">{{ getTitle }}</span>
    </div> 
  </Dropdown>
</template>
props: {
  tabItem: {
    type: Object as PropType<RouteLocationNormalized>,
    default: null,
  },
  isExtra: Boolean,
},
// 獲取標題信息
const getTitle = computed(() => {
  const { tabItem: { meta } = {} } = props;
  return meta && t(meta.title as string);
});