---初始化后台管理web页面项目

src/layouts/iframe/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="showFrame">
+    <template v-for="frame in getFramePages" :key="frame.path">
+      <FramePage
+        v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)"
+        v-show="showIframe(frame)"
+        :frameSrc="frame.meta.frameSrc.replace('#{token}', userStore.getToken)"
+      />
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { unref, computed } from 'vue';
+  import FramePage from '/@/views/sys/iframe/index.vue';
+
+  import { useFrameKeepAlive } from './useFrameKeepAlive';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const userStore = useUserStore();
+
+  const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
+
+  const showFrame = computed(() => unref(getFramePages).length > 0);
+</script>

src/layouts/iframe/useFrameKeepAlive.ts

@@ -0,0 +1,59 @@
+import type { AppRouteRecordRaw } from '/@/router/types';
+
+import { computed, toRaw, unref } from 'vue';
+
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+
+import { uniqBy } from 'lodash-es';
+
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
+import { useRouter } from 'vue-router';
+
+export function useFrameKeepAlive() {
+  const router = useRouter();
+  const { currentRoute } = router;
+  const { getShowMultipleTab } = useMultipleTabSetting();
+  const tabStore = useMultipleTabStore();
+  const getFramePages = computed(() => {
+    const ret = getAllFramePages(toRaw(router.getRoutes()) as unknown as AppRouteRecordRaw[]) || [];
+    return ret;
+  });
+
+  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) {
+        res.push(route);
+      }
+      if (children && children.length) {
+        res.push(...getAllFramePages(children));
+      }
+    }
+    res = uniqBy(res, 'name');
+    return res;
+  }
+
+  function showIframe(item: AppRouteRecordRaw) {
+    return item.name === unref(currentRoute).name;
+  }
+
+  function hasRenderFrame(name: string) {
+    if (!unref(getShowMultipleTab)) {
+      return router.currentRoute.value.name === name;
+    }
+    return unref(getOpenTabList).includes(name);
+  }
+
+  return { hasRenderFrame, getFramePages, showIframe, getAllFramePages };
+}