diff --git a/apps/web-naive/src/components/iframe/iframe.vue b/apps/web-naive/src/components/iframe/iframe.vue
new file mode 100644
index 00000000..de70d89a
--- /dev/null
+++ b/apps/web-naive/src/components/iframe/iframe.vue
@@ -0,0 +1,38 @@
+<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-naive/src/components/iframe/index.ts b/apps/web-naive/src/components/iframe/index.ts
new file mode 100644
index 00000000..d437bc0d
--- /dev/null
+++ b/apps/web-naive/src/components/iframe/index.ts
@@ -0,0 +1 @@
+export { default as IFrame } from './iframe.vue';