diff --git a/apps/web-antd/src/views/infra/druid/index.vue b/apps/web-antd/src/views/infra/druid/index.vue
index 60140a5b..01ec58d5 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 74d7334c..d8893bdb 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 1dcb32bf..2ff01c3b 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 0038fb92..c04365cd 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 492f11b5..f228fa3e 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 bb919322..653a6ed4 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 bcf20c36..73a47676 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 7f7ce0e3..60c94775 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 de70d89a..00000000
--- 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 d437bc0d..00000000
--- 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 60140a5b..01ec58d5 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 74d7334c..d8893bdb 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 1dcb32bf..2ff01c3b 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 0038fb92..c04365cd 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 670af500..a9f57909 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';