From 5d837cca7e750a9cce1cbd9382fdcb4dfa942ce8 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Fri, 16 May 2025 17:17:34 +0800
Subject: [PATCH] feat: add iframe support for URL preview in
 AutoProbeResultsContainer

---
 .../autoprobe/AutoProbeResultsContainer.vue   | 22 +++++++++----------
 .../tabs/AutoProbeDetailTabPatterns.vue       |  1 +
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
index 84d11f40..f60b29aa 100644
--- a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
+++ b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
@@ -12,10 +12,12 @@ const props = defineProps<{
   data?: PageData | PageData[];
   fields?: AutoProbeNavItem[];
   activeFieldName?: string;
+  url?: string;
 }>();
 
 // Refs
 const resultsContainerRef = ref<HTMLElement | null>(null);
+const iframeRef = ref<HTMLIFrameElement | null>(null);
 
 // States
 const activeTabName = ref<string | undefined>(TAB_NAME_RESULTS);
@@ -151,7 +153,9 @@ defineOptions({ name: 'ClAutoProbeResultsContainer' });
         hide-footer
       />
     </div>
-    <div class="output" v-else-if="activeTabName === TAB_NAME_PREVIEW"></div>
+    <div class="preview" v-else-if="activeTabName === TAB_NAME_PREVIEW">
+      <iframe v-if="url" ref="iframeRef" :src="url" />
+    </div>
   </div>
 </template>
 
@@ -210,18 +214,14 @@ defineOptions({ name: 'ClAutoProbeResultsContainer' });
     }
   }
 
-  .output {
-    padding: 10px;
+  .preview {
+    overflow: hidden;
     height: calc(100% - 41px);
-    overflow: auto;
-    white-space: pre-wrap;
 
-    pre {
-      margin: 0;
-      font-size: 14px;
-      line-height: 1.5;
-      color: var(--cl-text-color);
-      white-space: pre-wrap;
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
     }
   }
 }
diff --git a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
index 03d2ff52..8af5b913 100644
--- a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
+++ b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
@@ -260,6 +260,7 @@ defineOptions({ name: 'ClAutoProbeDetailTabPatterns' });
         :data="resultsData"
         :fields="resultsFields"
         :active-field-name="resultsActiveField?.name"
+        :url="form.url"
         @size-change="onSizeChange"
       />
     </div>