hrp-ui-base 1.4.5 → 1.4.7

package/src/components/layout/stores/useLayoutTabsStore.ts

@@ -1,367 +1,367 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
-
-/** 标签页配置项 */
-export interface TabsOptions {
-  /** 标签页标题 */
-  title: string;
-  /** 路由路径 */
-  path: string;
-  /** 路由名称 */
-  name?: string;
-  /** 路由参数 */
-  query?: Record<string, any>;
-  /** 缓存码，'0'表示缓存 */
-  cachedCode?: string;
-}
-
-/** 不显示在标签页的黑名单路径 */
-const TABS_BLACK_LIST: string[] = ["/login", "/application-entry", "/redirect"];
-
-/** 存储键名前缀 */
-const STORAGE_PREFIX = "SYSTEM_TABS";
-
-/** 从路由路径中解析系统ID（第一个/后面的内容） */
-function getSystemIdFromPath(path: string): string {
-  if (!path || path === "/") return "default";
-  const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-  const firstSegment = cleanPath.split("/")[0];
-  return firstSegment || "default";
-}
-
-/** 标签页 Store */
-export const useLayoutTabsStore = defineStore("layout-tabs", () => {
-  /** 当前系统ID */
-  const currentSystemId = ref<string>("");
-  /** 是否已从存储恢复数据 */
-  const isRestored = ref<boolean>(false);
-  /** 需要缓存的路由名称列表 */
-  const keepAliveRoutes = ref<string[]>([]);
-  /** 标签页列表 */
-  const tabsMenuList = ref<TabsOptions[]>([]);
-  /** 当前激活的标签页路径 */
-  const tabsMenuValue = ref<string>("");
-
-  /** 获取带系统前缀的存储键名 */
-  function getStorageKey(suffix: string): string {
-    const systemId = currentSystemId.value || "default";
-    return `${STORAGE_PREFIX}_${systemId}_${suffix}`;
-  }
-
-  function getTabsKey(): string {
-    return getStorageKey("LIST");
-  }
-
-  function getActiveTabKey(): string {
-    return getStorageKey("ACTIVE");
-  }
-
-  function getKeepAliveKey(): string {
-    return getStorageKey("KEEP_ALIVE");
-  }
-
-  /** 初始化系统ID（从当前路由解析） */
-  function initSystemId(systemId?: string) {
-    if (systemId) {
-      currentSystemId.value = systemId;
-    } else {
-      const currentPath =
-        window.location.hash.replace("#", "") || window.location.pathname;
-      currentSystemId.value = getSystemIdFromPath(currentPath);
-    }
-    sessionStorage.setItem("CURRENT_TABS_SYSTEM_ID", currentSystemId.value);
-  }
-
-  /** 重置所有标签页状态 */
-  function reset() {
-    keepAliveRoutes.value = [];
-    tabsMenuValue.value = "";
-    tabsMenuList.value = [];
-    sessionStorage.removeItem(getTabsKey());
-    sessionStorage.removeItem(getActiveTabKey());
-    sessionStorage.removeItem(getKeepAliveKey());
-  }
-
-  /** 添加标签页 */
-  function addTabs(tabItem: TabsOptions) {
-    if (!currentSystemId.value) {
-      initSystemId();
-    }
-    if (!isRestored.value) {
-      restoreTabsFromStorage();
-    }
-    if (
-      !tabItem.path ||
-      TABS_BLACK_LIST.some((path) => tabItem.path.startsWith(path))
-    ) {
-      return;
-    }
-
-    const tabInfo: TabsOptions = {
-      title: tabItem.title || "未命名页面",
-      path: tabItem.path,
-      name: tabItem.name,
-      query: tabItem.query,
-      cachedCode: tabItem.cachedCode,
-    };
-
-    const existIndex = tabsMenuList.value.findIndex(
-      (item) => item.path === tabItem.path
-    );
-    if (existIndex === -1) {
-      tabsMenuList.value.push(tabInfo);
-      tabsChange();
-    }
-
-    setTabsMenuValue(tabItem.path);
-    sessionStorage.setItem(getActiveTabKey(), tabItem.path);
-
-    if (tabItem.name && tabItem.cachedCode === "0") {
-      setKeepAlive(tabItem.name);
-    }
-  }
-
-  /** 移除标签页（需要传入 router 实例处理跳转） */
-  function removeTabs(tabPath: string, router?: any, nextTabPath?: string) {
-    const tabIndex = tabsMenuList.value.findIndex(
-      (item) => item.path === tabPath
-    );
-    if (tabIndex === -1) return;
-
-    if (tabsMenuValue.value === tabPath) {
-      let targetPath = nextTabPath;
-      let targetQuery: Record<string, any> | undefined;
-
-      if (!targetPath) {
-        const nextTab =
-          tabsMenuList.value[tabIndex + 1] || tabsMenuList.value[tabIndex - 1];
-        if (nextTab) {
-          targetPath = nextTab.path;
-          targetQuery = nextTab.query;
-        } else {
-          targetPath = "/application-entry";
-        }
-      } else {
-        const targetTab = tabsMenuList.value.find(
-          (item) => item.path === targetPath
-        );
-        targetQuery = targetTab?.query;
-      }
-
-      const doRemove = () => {
-        tabsMenuValue.value = targetPath!;
-        const removedTab = tabsMenuList.value.find(
-          (item) => item.path === tabPath
-        );
-        tabsMenuList.value = tabsMenuList.value.filter(
-          (item) => item.path !== tabPath
-        );
-        if (removedTab?.name) {
-          delKeepAlive(removedTab.name);
-        }
-        tabsChange();
-      };
-
-      if (router) {
-        router.push({ path: targetPath, query: targetQuery }).then(doRemove);
-      } else {
-        doRemove();
-      }
-    } else {
-      const removedTab = tabsMenuList.value[tabIndex];
-      if (removedTab?.name) {
-        delKeepAlive(removedTab.name);
-      }
-      tabsMenuList.value = tabsMenuList.value.filter(
-        (item) => item.path !== tabPath
-      );
-      tabsChange();
-    }
-  }
-
-  /** 设置当前激活的标签页 */
-  function setTabsMenuValue(value: string) {
-    tabsMenuValue.value = value;
-  }
-
-  /** 添加缓存路由 */
-  function setKeepAlive(routerName: string) {
-    if (routerName && !keepAliveRoutes.value.includes(routerName)) {
-      keepAliveRoutes.value.push(routerName);
-      sessionStorage.setItem(
-        getKeepAliveKey(),
-        JSON.stringify(keepAliveRoutes.value)
-      );
-    }
-  }
-
-  /** 删除缓存路由 */
-  function delKeepAlive(routerName: string) {
-    const index = keepAliveRoutes.value.indexOf(routerName);
-    if (index > -1) {
-      keepAliveRoutes.value.splice(index, 1);
-      sessionStorage.setItem(
-        getKeepAliveKey(),
-        JSON.stringify(keepAliveRoutes.value)
-      );
-    }
-  }
-
-  /** 关闭其他标签页 */
-  function closeMultipleTab(targetPath?: string) {
-    tabsMenuList.value = tabsMenuList.value.filter((item) => {
-      return item.path === targetPath;
-    });
-    keepAliveRoutes.value = keepAliveRoutes.value.filter((name) => {
-      return tabsMenuList.value.some((tab) => tab.name === name);
-    });
-    tabsChange();
-  }
-
-  /** 关闭左侧标签页 */
-  function closeLeftTabs(targetPath?: string, router?: any) {
-    const targetIndex = tabsMenuList.value.findIndex(
-      (item) => item.path === targetPath
-    );
-    if (targetIndex <= 0) return;
-
-    const currentIndex = tabsMenuList.value.findIndex(
-      (item) => item.path === tabsMenuValue.value
-    );
-    const isCurrentClosed = currentIndex < targetIndex;
-
-    const removedTabs = tabsMenuList.value.splice(0, targetIndex);
-    removedTabs.forEach((tab) => {
-      if (tab.name) delKeepAlive(tab.name);
-    });
-
-    if (isCurrentClosed && tabsMenuList.value.length > 0 && router) {
-      const newPath = tabsMenuList.value[0].path;
-      router.push(newPath);
-      tabsMenuValue.value = newPath;
-    }
-    tabsChange();
-  }
-
-  /** 关闭右侧标签页 */
-  function closeRightTabs(targetPath?: string, router?: any) {
-    const targetIndex = tabsMenuList.value.findIndex(
-      (item) => item.path === targetPath
-    );
-    if (targetIndex === -1 || targetIndex >= tabsMenuList.value.length - 1)
-      return;
-
-    const currentIndex = tabsMenuList.value.findIndex(
-      (item) => item.path === tabsMenuValue.value
-    );
-    const isCurrentClosed = currentIndex > targetIndex;
-
-    const removedTabs = tabsMenuList.value.splice(targetIndex + 1);
-    removedTabs.forEach((tab) => {
-      if (tab.name) delKeepAlive(tab.name);
-    });
-
-    if (isCurrentClosed && tabsMenuList.value.length > 0 && router) {
-      const newPath = tabsMenuList.value[tabsMenuList.value.length - 1].path;
-      router.push(newPath);
-      tabsMenuValue.value = newPath;
-    }
-    tabsChange();
-  }
-
-  /** 关闭全部标签页 */
-  function closeAllTabs(router?: any) {
-    tabsMenuList.value = [];
-    keepAliveRoutes.value = [];
-    tabsMenuValue.value = "";
-    if (router) {
-      router.push("/application-entry");
-    }
-    tabsChange();
-  }
-
-  /** 标签页变化时保存到 sessionStorage */
-  function tabsChange() {
-    sessionStorage.setItem(getTabsKey(), JSON.stringify(tabsMenuList.value));
-    sessionStorage.setItem(getActiveTabKey(), tabsMenuValue.value);
-    sessionStorage.setItem(
-      getKeepAliveKey(),
-      JSON.stringify(keepAliveRoutes.value)
-    );
-  }
-
-  /** 从 sessionStorage 恢复标签页 */
-  function restoreTabsFromStorage() {
-    if (!currentSystemId.value) {
-      initSystemId();
-    }
-    try {
-      const storedTabs = sessionStorage.getItem(getTabsKey());
-      tabsMenuList.value = storedTabs ? JSON.parse(storedTabs) : [];
-
-      const storedActiveTab = sessionStorage.getItem(getActiveTabKey());
-      tabsMenuValue.value = storedActiveTab || "";
-
-      const storedKeepAlive = sessionStorage.getItem(getKeepAliveKey());
-      keepAliveRoutes.value = storedKeepAlive ? JSON.parse(storedKeepAlive) : [];
-
-      isRestored.value = true;
-    } catch (e) {
-      console.error("恢复标签页失败:", e);
-      tabsMenuList.value = [];
-      keepAliveRoutes.value = [];
-      tabsMenuValue.value = "";
-      isRestored.value = true;
-    }
-  }
-
-  /** 切换系统时重新加载对应系统的标签页数据 */
-  function switchSystem(newSystemId?: string) {
-    if (newSystemId) {
-      currentSystemId.value = newSystemId;
-      sessionStorage.setItem("CURRENT_TABS_SYSTEM_ID", newSystemId);
-    } else {
-      initSystemId();
-    }
-    isRestored.value = false;
-    restoreTabsFromStorage();
-  }
-
-  /** 刷新当前页面 */
-  function refreshPage() {
-    const currentTab = tabsMenuList.value.find(
-      (item) => item.path === tabsMenuValue.value
-    );
-    if (currentTab?.name) {
-      delKeepAlive(currentTab.name);
-      setTimeout(() => {
-        if (currentTab.cachedCode === "0") {
-          setKeepAlive(currentTab.name!);
-        }
-      }, 100);
-    }
-  }
-
-  return {
-    currentSystemId,
-    isRestored,
-    keepAliveRoutes,
-    tabsMenuList,
-    tabsMenuValue,
-    reset,
-    addTabs,
-    removeTabs,
-    setTabsMenuValue,
-    setKeepAlive,
-    delKeepAlive,
-    closeMultipleTab,
-    closeLeftTabs,
-    closeRightTabs,
-    closeAllTabs,
-    tabsChange,
-    restoreTabsFromStorage,
-    refreshPage,
-    initSystemId,
-    switchSystem,
-  };
-});
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+/** 标签页配置项 */
+export interface TabsOptions {
+  /** 标签页标题 */
+  title: string;
+  /** 路由路径 */
+  path: string;
+  /** 路由名称 */
+  name?: string;
+  /** 路由参数 */
+  query?: Record<string, any>;
+  /** 缓存码，'0'表示缓存 */
+  cachedCode?: string;
+}
+
+/** 不显示在标签页的黑名单路径 */
+const TABS_BLACK_LIST: string[] = ["/login", "/application-entry", "/redirect"];
+
+/** 存储键名前缀 */
+const STORAGE_PREFIX = "SYSTEM_TABS";
+
+/** 从路由路径中解析系统ID（第一个/后面的内容） */
+function getSystemIdFromPath(path: string): string {
+  if (!path || path === "/") return "default";
+  const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+  const firstSegment = cleanPath.split("/")[0];
+  return firstSegment || "default";
+}
+
+/** 标签页 Store */
+export const useLayoutTabsStore = defineStore("layout-tabs", () => {
+  /** 当前系统ID */
+  const currentSystemId = ref<string>("");
+  /** 是否已从存储恢复数据 */
+  const isRestored = ref<boolean>(false);
+  /** 需要缓存的路由名称列表 */
+  const keepAliveRoutes = ref<string[]>([]);
+  /** 标签页列表 */
+  const tabsMenuList = ref<TabsOptions[]>([]);
+  /** 当前激活的标签页路径 */
+  const tabsMenuValue = ref<string>("");
+
+  /** 获取带系统前缀的存储键名 */
+  function getStorageKey(suffix: string): string {
+    const systemId = currentSystemId.value || "default";
+    return `${STORAGE_PREFIX}_${systemId}_${suffix}`;
+  }
+
+  function getTabsKey(): string {
+    return getStorageKey("LIST");
+  }
+
+  function getActiveTabKey(): string {
+    return getStorageKey("ACTIVE");
+  }
+
+  function getKeepAliveKey(): string {
+    return getStorageKey("KEEP_ALIVE");
+  }
+
+  /** 初始化系统ID（从当前路由解析） */
+  function initSystemId(systemId?: string) {
+    if (systemId) {
+      currentSystemId.value = systemId;
+    } else {
+      const currentPath =
+        window.location.hash.replace("#", "") || window.location.pathname;
+      currentSystemId.value = getSystemIdFromPath(currentPath);
+    }
+    sessionStorage.setItem("CURRENT_TABS_SYSTEM_ID", currentSystemId.value);
+  }
+
+  /** 重置所有标签页状态 */
+  function reset() {
+    keepAliveRoutes.value = [];
+    tabsMenuValue.value = "";
+    tabsMenuList.value = [];
+    sessionStorage.removeItem(getTabsKey());
+    sessionStorage.removeItem(getActiveTabKey());
+    sessionStorage.removeItem(getKeepAliveKey());
+  }
+
+  /** 添加标签页 */
+  function addTabs(tabItem: TabsOptions) {
+    if (!currentSystemId.value) {
+      initSystemId();
+    }
+    if (!isRestored.value) {
+      restoreTabsFromStorage();
+    }
+    if (
+      !tabItem.path ||
+      TABS_BLACK_LIST.some((path) => tabItem.path.startsWith(path))
+    ) {
+      return;
+    }
+
+    const tabInfo: TabsOptions = {
+      title: tabItem.title || "未命名页面",
+      path: tabItem.path,
+      name: tabItem.name,
+      query: tabItem.query,
+      cachedCode: tabItem.cachedCode,
+    };
+
+    const existIndex = tabsMenuList.value.findIndex(
+      (item) => item.path === tabItem.path
+    );
+    if (existIndex === -1) {
+      tabsMenuList.value.push(tabInfo);
+      tabsChange();
+    }
+
+    setTabsMenuValue(tabItem.path);
+    sessionStorage.setItem(getActiveTabKey(), tabItem.path);
+
+    if (tabItem.name && tabItem.cachedCode === "0") {
+      setKeepAlive(tabItem.name);
+    }
+  }
+
+  /** 移除标签页（需要传入 router 实例处理跳转） */
+  function removeTabs(tabPath: string, router?: any, nextTabPath?: string) {
+    const tabIndex = tabsMenuList.value.findIndex(
+      (item) => item.path === tabPath
+    );
+    if (tabIndex === -1) return;
+
+    if (tabsMenuValue.value === tabPath) {
+      let targetPath = nextTabPath;
+      let targetQuery: Record<string, any> | undefined;
+
+      if (!targetPath) {
+        const nextTab =
+          tabsMenuList.value[tabIndex + 1] || tabsMenuList.value[tabIndex - 1];
+        if (nextTab) {
+          targetPath = nextTab.path;
+          targetQuery = nextTab.query;
+        } else {
+          targetPath = "/application-entry";
+        }
+      } else {
+        const targetTab = tabsMenuList.value.find(
+          (item) => item.path === targetPath
+        );
+        targetQuery = targetTab?.query;
+      }
+
+      const doRemove = () => {
+        tabsMenuValue.value = targetPath!;
+        const removedTab = tabsMenuList.value.find(
+          (item) => item.path === tabPath
+        );
+        tabsMenuList.value = tabsMenuList.value.filter(
+          (item) => item.path !== tabPath
+        );
+        if (removedTab?.name) {
+          delKeepAlive(removedTab.name);
+        }
+        tabsChange();
+      };
+
+      if (router) {
+        router.push({ path: targetPath, query: targetQuery }).then(doRemove);
+      } else {
+        doRemove();
+      }
+    } else {
+      const removedTab = tabsMenuList.value[tabIndex];
+      if (removedTab?.name) {
+        delKeepAlive(removedTab.name);
+      }
+      tabsMenuList.value = tabsMenuList.value.filter(
+        (item) => item.path !== tabPath
+      );
+      tabsChange();
+    }
+  }
+
+  /** 设置当前激活的标签页 */
+  function setTabsMenuValue(value: string) {
+    tabsMenuValue.value = value;
+  }
+
+  /** 添加缓存路由 */
+  function setKeepAlive(routerName: string) {
+    if (routerName && !keepAliveRoutes.value.includes(routerName)) {
+      keepAliveRoutes.value.push(routerName);
+      sessionStorage.setItem(
+        getKeepAliveKey(),
+        JSON.stringify(keepAliveRoutes.value)
+      );
+    }
+  }
+
+  /** 删除缓存路由 */
+  function delKeepAlive(routerName: string) {
+    const index = keepAliveRoutes.value.indexOf(routerName);
+    if (index > -1) {
+      keepAliveRoutes.value.splice(index, 1);
+      sessionStorage.setItem(
+        getKeepAliveKey(),
+        JSON.stringify(keepAliveRoutes.value)
+      );
+    }
+  }
+
+  /** 关闭其他标签页 */
+  function closeMultipleTab(targetPath?: string) {
+    tabsMenuList.value = tabsMenuList.value.filter((item) => {
+      return item.path === targetPath;
+    });
+    keepAliveRoutes.value = keepAliveRoutes.value.filter((name) => {
+      return tabsMenuList.value.some((tab) => tab.name === name);
+    });
+    tabsChange();
+  }
+
+  /** 关闭左侧标签页 */
+  function closeLeftTabs(targetPath?: string, router?: any) {
+    const targetIndex = tabsMenuList.value.findIndex(
+      (item) => item.path === targetPath
+    );
+    if (targetIndex <= 0) return;
+
+    const currentIndex = tabsMenuList.value.findIndex(
+      (item) => item.path === tabsMenuValue.value
+    );
+    const isCurrentClosed = currentIndex < targetIndex;
+
+    const removedTabs = tabsMenuList.value.splice(0, targetIndex);
+    removedTabs.forEach((tab) => {
+      if (tab.name) delKeepAlive(tab.name);
+    });
+
+    if (isCurrentClosed && tabsMenuList.value.length > 0 && router) {
+      const newPath = tabsMenuList.value[0].path;
+      router.push(newPath);
+      tabsMenuValue.value = newPath;
+    }
+    tabsChange();
+  }
+
+  /** 关闭右侧标签页 */
+  function closeRightTabs(targetPath?: string, router?: any) {
+    const targetIndex = tabsMenuList.value.findIndex(
+      (item) => item.path === targetPath
+    );
+    if (targetIndex === -1 || targetIndex >= tabsMenuList.value.length - 1)
+      return;
+
+    const currentIndex = tabsMenuList.value.findIndex(
+      (item) => item.path === tabsMenuValue.value
+    );
+    const isCurrentClosed = currentIndex > targetIndex;
+
+    const removedTabs = tabsMenuList.value.splice(targetIndex + 1);
+    removedTabs.forEach((tab) => {
+      if (tab.name) delKeepAlive(tab.name);
+    });
+
+    if (isCurrentClosed && tabsMenuList.value.length > 0 && router) {
+      const newPath = tabsMenuList.value[tabsMenuList.value.length - 1].path;
+      router.push(newPath);
+      tabsMenuValue.value = newPath;
+    }
+    tabsChange();
+  }
+
+  /** 关闭全部标签页 */
+  function closeAllTabs(router?: any) {
+    tabsMenuList.value = [];
+    keepAliveRoutes.value = [];
+    tabsMenuValue.value = "";
+    if (router) {
+      router.push("/application-entry");
+    }
+    tabsChange();
+  }
+
+  /** 标签页变化时保存到 sessionStorage */
+  function tabsChange() {
+    sessionStorage.setItem(getTabsKey(), JSON.stringify(tabsMenuList.value));
+    sessionStorage.setItem(getActiveTabKey(), tabsMenuValue.value);
+    sessionStorage.setItem(
+      getKeepAliveKey(),
+      JSON.stringify(keepAliveRoutes.value)
+    );
+  }
+
+  /** 从 sessionStorage 恢复标签页 */
+  function restoreTabsFromStorage() {
+    if (!currentSystemId.value) {
+      initSystemId();
+    }
+    try {
+      const storedTabs = sessionStorage.getItem(getTabsKey());
+      tabsMenuList.value = storedTabs ? JSON.parse(storedTabs) : [];
+
+      const storedActiveTab = sessionStorage.getItem(getActiveTabKey());
+      tabsMenuValue.value = storedActiveTab || "";
+
+      const storedKeepAlive = sessionStorage.getItem(getKeepAliveKey());
+      keepAliveRoutes.value = storedKeepAlive ? JSON.parse(storedKeepAlive) : [];
+
+      isRestored.value = true;
+    } catch (e) {
+      console.error("恢复标签页失败:", e);
+      tabsMenuList.value = [];
+      keepAliveRoutes.value = [];
+      tabsMenuValue.value = "";
+      isRestored.value = true;
+    }
+  }
+
+  /** 切换系统时重新加载对应系统的标签页数据 */
+  function switchSystem(newSystemId?: string) {
+    if (newSystemId) {
+      currentSystemId.value = newSystemId;
+      sessionStorage.setItem("CURRENT_TABS_SYSTEM_ID", newSystemId);
+    } else {
+      initSystemId();
+    }
+    isRestored.value = false;
+    restoreTabsFromStorage();
+  }
+
+  /** 刷新当前页面 */
+  function refreshPage() {
+    const currentTab = tabsMenuList.value.find(
+      (item) => item.path === tabsMenuValue.value
+    );
+    if (currentTab?.name) {
+      delKeepAlive(currentTab.name);
+      setTimeout(() => {
+        if (currentTab.cachedCode === "0") {
+          setKeepAlive(currentTab.name!);
+        }
+      }, 100);
+    }
+  }
+
+  return {
+    currentSystemId,
+    isRestored,
+    keepAliveRoutes,
+    tabsMenuList,
+    tabsMenuValue,
+    reset,
+    addTabs,
+    removeTabs,
+    setTabsMenuValue,
+    setKeepAlive,
+    delKeepAlive,
+    closeMultipleTab,
+    closeLeftTabs,
+    closeRightTabs,
+    closeAllTabs,
+    tabsChange,
+    restoreTabsFromStorage,
+    refreshPage,
+    initSystemId,
+    switchSystem,
+  };
+});