From 4cb1ecfb1c2cd76d22e88904874edaa8b9abce01 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Wed, 10 Sep 2025 11:55:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E5=8A=A8=20iframe=20?=
 =?UTF-8?q?=E5=88=B0=20@vben/common-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/infra/druid/index.vue |  3 +-
 .../web-antd/src/views/infra/server/index.vue |  3 +-
 .../src/views/infra/skywalking/index.vue      |  3 +-
 .../src/views/infra/swagger/index.vue         |  3 +-
 .../src/views/report/goview/index.vue         |  4 +-
 .../web-antd/src/views/report/jmreport/bi.vue |  4 +-
 .../src/views/report/jmreport/index.vue       |  4 +-
 .../src/components/diy-editor/index.vue       |  1 +
 apps/web-ele/src/components/iframe/iframe.vue | 38 -------------------
 apps/web-ele/src/components/iframe/index.ts   |  1 -
 apps/web-ele/src/views/infra/druid/index.vue  |  3 +-
 apps/web-ele/src/views/infra/server/index.vue |  3 +-
 .../src/views/infra/skywalking/index.vue      |  3 +-
 .../web-ele/src/views/infra/swagger/index.vue |  3 +-
 .../src/components/iframe/iframe.vue          |  0
 .../common-ui}/src/components/iframe/index.ts |  0
 .../effects/common-ui/src/components/index.ts |  1 +
 17 files changed, 13 insertions(+), 64 deletions(-)
 delete mode 100644 apps/web-ele/src/components/iframe/iframe.vue
 delete mode 100644 apps/web-ele/src/components/iframe/index.ts
 rename {apps/web-antd => packages/effects/common-ui}/src/components/iframe/iframe.vue (100%)
 rename {apps/web-antd => packages/effects/common-ui}/src/components/iframe/index.ts (100%)

diff --git a/apps/web-antd/src/views/infra/druid/index.vue b/apps/web-antd/src/views/infra/druid/index.vue
index 60140a5ba..01ec58d5f 100644
--- a/apps/web-antd/src/views/infra/druid/index.vue
+++ b/apps/web-antd/src/views/infra/druid/index.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref(`${import.meta.env.VITE_BASE_URL}/druid/index.html`);
diff --git a/apps/web-antd/src/views/infra/server/index.vue b/apps/web-antd/src/views/infra/server/index.vue
index 74d7334c8..d8893bdbd 100644
--- a/apps/web-antd/src/views/infra/server/index.vue
+++ b/apps/web-antd/src/views/infra/server/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref(`${import.meta.env.VITE_BASE_URL}/admin/applications`);
diff --git a/apps/web-antd/src/views/infra/skywalking/index.vue b/apps/web-antd/src/views/infra/skywalking/index.vue
index 1dcb32bfd..2ff01c3bf 100644
--- a/apps/web-antd/src/views/infra/skywalking/index.vue
+++ b/apps/web-antd/src/views/infra/skywalking/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref('http://skywalking.shop.iocoder.cn');
diff --git a/apps/web-antd/src/views/infra/swagger/index.vue b/apps/web-antd/src/views/infra/swagger/index.vue
index 0038fb92c..c04365cdf 100644
--- a/apps/web-antd/src/views/infra/swagger/index.vue
+++ b/apps/web-antd/src/views/infra/swagger/index.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref(`${import.meta.env.VITE_BASE_URL}/doc.html`); // Knife4j UI
diff --git a/apps/web-antd/src/views/report/goview/index.vue b/apps/web-antd/src/views/report/goview/index.vue
index 492f11b5f..f228fa3e4 100644
--- a/apps/web-antd/src/views/report/goview/index.vue
+++ b/apps/web-antd/src/views/report/goview/index.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
-import { IFrame } from '#/components/iframe';
-
 defineOptions({ name: 'GoView' });
 
 const accessStore = useAccessStore();
diff --git a/apps/web-antd/src/views/report/jmreport/bi.vue b/apps/web-antd/src/views/report/jmreport/bi.vue
index bb919322b..653a6ed4e 100644
--- a/apps/web-antd/src/views/report/jmreport/bi.vue
+++ b/apps/web-antd/src/views/report/jmreport/bi.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
-import { IFrame } from '#/components/iframe';
-
 defineOptions({ name: 'JimuBI' });
 const accessStore = useAccessStore();
 
diff --git a/apps/web-antd/src/views/report/jmreport/index.vue b/apps/web-antd/src/views/report/jmreport/index.vue
index bcf20c36d..73a47676c 100644
--- a/apps/web-antd/src/views/report/jmreport/index.vue
+++ b/apps/web-antd/src/views/report/jmreport/index.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
-import { IFrame } from '#/components/iframe';
-
 defineOptions({ name: 'JimuReport' });
 const accessStore = useAccessStore();
 
diff --git a/apps/web-ele/src/components/diy-editor/index.vue b/apps/web-ele/src/components/diy-editor/index.vue
index 7f7ce0e38..60c94775b 100644
--- a/apps/web-ele/src/components/diy-editor/index.vue
+++ b/apps/web-ele/src/components/diy-editor/index.vue
@@ -3,6 +3,7 @@ import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
 import { inject, onMounted, ref, unref, watch } from 'vue';
 
+import { IFrame } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
diff --git a/apps/web-ele/src/components/iframe/iframe.vue b/apps/web-ele/src/components/iframe/iframe.vue
deleted file mode 100644
index de70d89a9..000000000
--- a/apps/web-ele/src/components/iframe/iframe.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-interface IFrameProps {
-  /** iframe 的源地址 */
-  src: string;
-}
-
-const props = defineProps<IFrameProps>();
-
-const loading = ref(true);
-const height = ref('');
-const frameRef = ref<HTMLElement | null>(null);
-
-function init() {
-  height.value = `${document.documentElement.clientHeight - 94.5}px`;
-  loading.value = false;
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    init();
-  }, 300);
-});
-// TODO @芋艿：优化：未来使用 vben 自带的内链实现
-</script>
-
-<template>
-  <div v-loading="loading" :style="`height:${height}`">
-    <iframe
-      ref="frameRef"
-      :src="props.src"
-      style="width: 100%; height: 100%"
-      frameborder="no"
-      scrolling="auto"
-    ></iframe>
-  </div>
-</template>
diff --git a/apps/web-ele/src/components/iframe/index.ts b/apps/web-ele/src/components/iframe/index.ts
deleted file mode 100644
index d437bc0d3..000000000
--- a/apps/web-ele/src/components/iframe/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as IFrame } from './iframe.vue';
diff --git a/apps/web-ele/src/views/infra/druid/index.vue b/apps/web-ele/src/views/infra/druid/index.vue
index 60140a5ba..01ec58d5f 100644
--- a/apps/web-ele/src/views/infra/druid/index.vue
+++ b/apps/web-ele/src/views/infra/druid/index.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref(`${import.meta.env.VITE_BASE_URL}/druid/index.html`);
diff --git a/apps/web-ele/src/views/infra/server/index.vue b/apps/web-ele/src/views/infra/server/index.vue
index 74d7334c8..d8893bdbd 100644
--- a/apps/web-ele/src/views/infra/server/index.vue
+++ b/apps/web-ele/src/views/infra/server/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref(`${import.meta.env.VITE_BASE_URL}/admin/applications`);
diff --git a/apps/web-ele/src/views/infra/skywalking/index.vue b/apps/web-ele/src/views/infra/skywalking/index.vue
index 1dcb32bfd..2ff01c3bf 100644
--- a/apps/web-ele/src/views/infra/skywalking/index.vue
+++ b/apps/web-ele/src/views/infra/skywalking/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref('http://skywalking.shop.iocoder.cn');
diff --git a/apps/web-ele/src/views/infra/swagger/index.vue b/apps/web-ele/src/views/infra/swagger/index.vue
index 0038fb92c..c04365cdf 100644
--- a/apps/web-ele/src/views/infra/swagger/index.vue
+++ b/apps/web-ele/src/views/infra/swagger/index.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
 
 import { getConfigKey } from '#/api/infra/config';
-import { IFrame } from '#/components/iframe';
 
 const loading = ref(true); // 是否加载中
 const src = ref(`${import.meta.env.VITE_BASE_URL}/doc.html`); // Knife4j UI
diff --git a/apps/web-antd/src/components/iframe/iframe.vue b/packages/effects/common-ui/src/components/iframe/iframe.vue
similarity index 100%
rename from apps/web-antd/src/components/iframe/iframe.vue
rename to packages/effects/common-ui/src/components/iframe/iframe.vue
diff --git a/apps/web-antd/src/components/iframe/index.ts b/packages/effects/common-ui/src/components/iframe/index.ts
similarity index 100%
rename from apps/web-antd/src/components/iframe/index.ts
rename to packages/effects/common-ui/src/components/iframe/index.ts
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index 670af500f..a9f57909c 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './count-to';
 export * from './doc-alert';
 export * from './ellipsis-text';
 export * from './icon-picker';
+export * from './iframe';
 export * from './json-viewer';
 export * from './loading';
 export * from './page';