项目初始化

web-vue/packages/core/layouts/iframe/useFrameKeepAlive.ts

@@ -0,0 +1,105 @@
+import type { AppRouteRecordRaw } from '@jeesite/core/router/types';
+
+import { computed, toRaw, ref, unref } from 'vue';
+
+import { useMultipleTabStore } from '@jeesite/core/store/modules/multipleTab';
+
+import { uniqBy } from 'lodash-es';
+
+import { useMultipleTabSetting } from '@jeesite/core/hooks/setting/useMultipleTabSetting';
+import { useFullContent } from '@jeesite/core/hooks/web/useFullContent';
+
+import { RouteRecordRaw, useRouter } from 'vue-router';
+import { LAYOUT, IFRAME_BLANK } from '@jeesite/core/router/constant';
+import { router } from '@jeesite/core/router';
+
+const framePages = ref<AppRouteRecordRaw[]>();
+const tempFramePages = ref<AppRouteRecordRaw[]>();
+
+export function useFrameKeepAlive() {
+  const router = useRouter();
+  const { currentRoute } = router;
+  const { getShowMultipleTab } = useMultipleTabSetting();
+  const { getFullContent } = useFullContent();
+  const tabStore = useMultipleTabStore();
+
+  const getFramePages = computed(() => {
+    if (!unref(framePages.value)) {
+      framePages.value = getAllFramePages(toRaw(router.getRoutes()) as AppRouteRecordRaw[]);
+    }
+    return [...(framePages.value || []), ...(tempFramePages.value || [])];
+  });
+
+  const getOpenTabList = computed((): string[] => {
+    return tabStore.getTabList.reduce((prev: string[], next) => {
+      if (next.meta && Reflect.has(next.meta, 'frameSrc')) {
+        prev.push(next.name as string);
+      }
+      return prev;
+    }, []);
+  });
+
+  function getAllFramePages(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
+    let res: AppRouteRecordRaw[] = [];
+    for (const route of routes) {
+      const { meta: { frameSrc } = {}, children } = route;
+      if (frameSrc && !route.name.startsWith('JeeSite')) {
+        res.push(route);
+      }
+      if (children && children.length) {
+        res.push(...getAllFramePages(children));
+      }
+    }
+    res = uniqBy(res, 'name');
+    return (res || []) as AppRouteRecordRaw[];
+  }
+
+  function showIframe(item: AppRouteRecordRaw) {
+    return item.name === unref(currentRoute).name;
+  }
+
+  function hasRenderFrame(name: string) {
+    if (!unref(getShowMultipleTab) || unref(getFullContent)) {
+      return router.currentRoute.value.name === name;
+    }
+    return unref(getOpenTabList).includes(name);
+  }
+
+  return { hasRenderFrame, getFramePages, showIframe, getAllFramePages };
+}
+
+export function initFramePage() {
+  tempFramePages.value = JSON.parse(sessionStorage.getItem('temp-frame-pages') || '[]');
+  tempFramePages.value?.forEach((r) => addFramePage(r, false));
+  return addFramePage;
+}
+
+function addFramePage(route: AppRouteRecordRaw, store = true) {
+  if (store) {
+    let array = tempFramePages.value || [];
+    if (array.length > 10) {
+      array = array.slice(-10);
+    }
+    for (let i = array.length - 1; i >= 0; i--) {
+      if (array[i].name === route.name) {
+        array.splice(i, 1);
+      }
+    }
+    const currentRoute = router.currentRoute.value;
+    route.meta.currentActiveMenu = currentRoute.meta.currentActiveMenu || currentRoute.path;
+    array.push(route);
+    tempFramePages.value = array;
+    sessionStorage.setItem('temp-frame-pages', JSON.stringify(array));
+  }
+  router.addRoute({
+    component: LAYOUT,
+    meta: { single: true, affix: false },
+    name: `${route.name}Parent`,
+    children: [
+      {
+        component: IFRAME_BLANK,
+        ...route,
+      },
+    ],
+  } as unknown as RouteRecordRaw);
+}