hrp-ui-base 1.0.3 → 1.0.5

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

@@ -0,0 +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,
+  };
+});

package/src/components.ts

@@ -9,7 +9,7 @@ import AnnexUploadWeijian from './components/annex-upload-weijian/index.vue'
 import BaseLayout from './components/base-layout/index.vue'
 
 // Layout components
-import { SysHeader, SysHeaderTabs, PersonalizationGuideDialog, SideMenu } from './components/layout'
+import { SysHeader, SysHeaderTabs, PersonalizationGuideDialog, SideMenu, LayoutContainer } from './components/layout'
 
 /**
  * 这里默认导出一个vue支持的install方法
@@ -32,6 +32,7 @@ export default {
     app.component("SysHeaderTabs", SysHeaderTabs);
     app.component("PersonalizationGuideDialog", PersonalizationGuideDialog);
     app.component("SideMenu", SideMenu);
+    app.component("LayoutContainer", LayoutContainer);
   }
 }
 
@@ -40,7 +41,7 @@ export default {
  * 为了将来支持类似这样按需使用 import {AnnexUpload} from "hrp-ui-base";
  * 有多少个组件就添加多少个组件
  */
-export { CustomButton, CustonSwitch, AnnexUpload, ListSearchContent, AnnexImgUpload, AnnexUploadWeijian, BaseLayout };
+export { CustomButton, CustonSwitch, AnnexUpload, ListSearchContent, AnnexImgUpload, AnnexUploadWeijian, BaseLayout, LayoutContainer };
 
 // 重新导出布局组件
 export * from './components/layout';
@@ -60,6 +61,7 @@ declare module "vue" {
     SysHeader: typeof SysHeader,
     SysHeaderTabs: typeof SysHeaderTabs,
     PersonalizationGuideDialog: typeof PersonalizationGuideDialog,
-    SideMenu: typeof SideMenu
+    SideMenu: typeof SideMenu,
+    LayoutContainer: typeof LayoutContainer
   }
 }