feat

src/layout/default-layout.vue

@@ -43,7 +43,14 @@
         <a-layout class="layout-content" :style="paddingStyle">
           <!-- <TabBar v-if="appStore.tabBar" /> -->
           <a-layout-content>
-            <PageLayout />
+            <div v-if="showIframe" class="iframe-container">
+              <iframe
+                :src="iframeUrl"
+                frameborder="0"
+                class="web-iframe"
+              ></iframe>
+            </div>
+            <PageLayout v-else />
           </a-layout-content>
           <Footer v-if="footer" />
         </a-layout>
@@ -63,6 +70,7 @@ import { useAppStore, useUserStore } from '@/store'
 import { computed, onMounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PageLayout from './page-layout.vue'
+import { getToken } from '@/utils/auth'
 
 const isInit = ref(false)
 const appStore = useAppStore()
@@ -82,6 +90,47 @@ const menuWidth = computed(() => {
 })
 
 console.log('route', route)
+const showIframe = ref(false)
+const iframeUrl = ref('')
+
+const updateShowIframe = () => {
+  const isWebPage = route?.meta?.is_web_page === true
+  const webUrl = route?.meta?.web_url
+  
+  if (isWebPage && webUrl && typeof webUrl === 'string') {
+    showIframe.value = true
+    // Add token as query parameter to the URL
+    const token = getToken()
+    if (token && typeof token === 'string') {
+      // Parse the URL and add token parameter
+      try {
+        const url = new URL(webUrl)
+        url.searchParams.set('token', token)
+        iframeUrl.value = url.toString()
+      } catch (error) {
+        // If URL is invalid, use it as is
+        console.warn('Invalid URL provided for iframe:', webUrl)
+        iframeUrl.value = webUrl
+      }
+    } else {
+      // No token available, use URL as is
+      iframeUrl.value = webUrl
+    }
+  } else {
+    showIframe.value = false
+    iframeUrl.value = ''
+  }
+}
+
+// Watch for route changes to update iframe display
+watch(
+  () => [route.fullPath, route.meta],
+  () => {
+    updateShowIframe()
+  },
+  { immediate: true, deep: true }
+)
+
 const paddingStyle = computed(() => {
   const paddingLeft = renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {}
   const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {}
@@ -221,5 +270,17 @@ onMounted(() => {
       }
     }
   }
+
+  .iframe-container {
+    width: 100%;
+    height: 100%;
+    min-height: calc(100vh - @nav-size-height);
+
+    .web-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
 }
 </style>