feat(iframe): 新增iframe菜单缓存，切换tab时不再重新加载第三方网页 (#465)

web/src/layouts/[...all].tsx

@@ -15,7 +15,6 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const router = useRouter()
-    console.log(route)
     return () => (
       <div class="relative mx-auto w-full flex flex-col-center">
         <div class="absolute h-600px w-full"></div>

web/src/layouts/components/iframe/index.tsx

@@ -13,14 +13,25 @@ export default defineComponent({
   name: 'MineIframe',
   setup() {
     const route = useRoute()
+    const routers = useRouter().getRoutes()
+    const iframeStore = useIframeKeepAliveStore()
     onMounted(() => {
       const workerArea = document.querySelector('.mine-worker-area') as HTMLDivElement
       workerArea.classList.add('overflow-hidden')
       workerArea.style.height = `${getOnlyWorkAreaHeight() + 48}px`
     })
     return () => (
       <div class="mine-layout h-full w-full">
-        {(route.meta?.type === 'I' && route.meta?.link) && <iframe class="h-full w-full" frameborder="0" src={route.meta?.link}></iframe>}
+        {iframeStore.iframeList?.map((name: string) => {
+          return (
+            <iframe
+              class="h-full w-full"
+              frameborder="0"
+              src={routers.find(item => item.name === name)!.meta!.link}
+              v-show={route.name === name}
+            />
+          )
+        })}
       </div>
     )
   },

web/src/layouts/components/main-aside/index.tsx

@@ -30,7 +30,6 @@ export default defineComponent ({
     const shadowRight = ref<boolean>(false)
 
     function onAsideScroll() {
-      console.log(11111)
       const scrollTop = mainAsideRef.value.scrollTop
       const scrollLeft = mainAsideRef.value.scrollLeft
       shadowTop.value = scrollTop > 0

web/src/layouts/index.tsx

@@ -16,6 +16,7 @@ import MineSubAside from './components/sub-aside'
 import MineBars from './components/bars'
 import MineFooter from './components/footer'
 import MineBackTop from './components/back-top'
+import MineIframe from './components/iframe'
 import '@/layouts/style/index.scss'
 import type { SystemSettings } from '#/global'
 import handleResize from '@/utils/handleResize'
@@ -83,11 +84,12 @@ export default defineComponent({
                 {({ Component, route }) => (
                   <Transition name={appSetting.pageAnimate} mode="out-in">
                     <KeepAlive include={keepAliveStore.list}>
-                      {keepAliveStore.getShowState() && <Component key={route.fullPath} />}
+                      {(keepAliveStore.getShowState() && route.meta.type !== 'I') && <Component key={route.fullPath} />}
                     </KeepAlive>
                   </Transition>
                 )}
               </RouterView>
+              <MineIframe />
             </div>
             <MineFooter />
             <MineBackTop />

web/src/modules/base/views/permission/menu/menu-form.vue

@@ -284,7 +284,6 @@ const formItems = ref<MaFormItem[]>([
       },
       onAddBtn: (btn: MenuVo) => {
         form.value.btnPermission.push(btn)
-        console.log(form.value.btnPermission)
         btnPermissionRef.value?.setBtnData?.(form.value.btnPermission)
       },
     },

web/src/modules/base/views/uc/index.vue

@@ -104,7 +104,6 @@ const showFields = reactive({
 
 watch(avatar, async (val: string | undefined) => {
   const response: any = await useHttp().post('/admin/permission/update', { avatar: val ?? '' })
-  console.log(response)
   if (response.code === 200) {
     msg.success(globalTrans('crud.updateSuccess'))
     userStore.getUserInfo().avatar = val ?? ''

web/src/router/index.ts

@@ -53,6 +53,7 @@ router.beforeEach(async (to, from, next) => {
 router.afterEach(async (to) => {
   isLoading.value = false
   const keepAliveStore = useKeepAliveStore()
+  const iframeKeepAliveStore = useIframeKeepAliveStore()
 
   if (!isEmpty(to.meta.auth) && !hasAuth(to.meta.auth as string[])) {
     await router.push({ path: '/403' })
@@ -69,15 +70,19 @@ router.afterEach(async (to) => {
     return
   }
 
-  if (to.meta.cache) {
-    const componentName = to.matched.at(-1)?.components?.default.name
+  if (to.meta.cache && to.meta.type !== 'I') {
+    const componentName = to.matched.at(-1)?.components?.default!.name
     if (componentName) {
       keepAliveStore.add(componentName)
     }
     else {
       console.warn(`MineAdmin-UI：[${to.meta.title}] 组件页面未设置组件名，将不会被缓存`)
     }
   }
+
+  if (to.meta.type === 'I') {
+    iframeKeepAliveStore.add(to.name)
+  }
 })
 
 export default router

web/src/store/modules/useIframeKeepAliveStore.ts

@@ -0,0 +1,52 @@
+/**
+ * MineAdmin is committed to providing solutions for quickly building web applications
+ * Please view the LICENSE file that was distributed with this source code,
+ * For the full copyright and license information.
+ * Thank you very much for using MineAdmin.
+ *
+ * @Author X.Mo<[email protected]>
+ * @Link   https://github.com/mineadmin
+ */
+const useIframeKeepAliveStore = defineStore(
+  'useIframeKeepAliveStore',
+  () => {
+    const iframeList = ref<string[]>([])
+
+    function add(name: string | string[]) {
+      if (typeof name === 'string') {
+        !iframeList.value.includes(name) && iframeList.value.push(name)
+      }
+      else {
+        name.forEach((v) => {
+          v && !iframeList.value.includes(v) && iframeList.value.push(v)
+        })
+      }
+    }
+
+    function remove(name: string | string[]) {
+      if (typeof name === 'string') {
+        iframeList.value = iframeList.value.filter((v) => {
+          return v !== name
+        })
+      }
+      else {
+        iframeList.value = iframeList.value.filter((v) => {
+          return !name.includes(v)
+        })
+      }
+    }
+
+    function clean() {
+      iframeList.value = []
+    }
+
+    return {
+      iframeList,
+      add,
+      remove,
+      clean,
+    }
+  },
+)
+
+export default useIframeKeepAliveStore

web/src/store/modules/useRouteStore.ts

@@ -131,8 +131,7 @@ const useRouteStore = defineStore(
       routerMap.forEach((item: any) => {
         if (item.meta?.type !== 'B') {
           if (item.meta.type === 'I') {
-            item.meta.url = item.path
-            item.path = `/maIframe/${item.name}`
+            item.path = `/MineIframe/${item.name}`
             item.component = () => import(('@/layouts/components/iframe/index.tsx'))
           }
 

web/types/auto-imports.d.ts

@@ -74,6 +74,7 @@ declare global {
   const useGlobal: typeof import('../src/hooks/auto-imports/useGlobal')['default']
   const useHttp: typeof import('../src/hooks/auto-imports/useHttp')['default']
   const useId: typeof import('vue')['useId']
+  const useIframeKeepAliveStore: typeof import('../src/store/modules/useIframeKeepAliveStore')['default']
   const useKeepAliveStore: typeof import('../src/store/modules/useKeepAliveStore')['default']
   const useLink: typeof import('vue-router')['useLink']
   const useMenuStore: typeof import('../src/store/modules/useMenuStore')['default']