diff --git a/apps/web-ele/src/components/iframe/iframe.vue b/apps/web-ele/src/components/iframe/iframe.vue
new file mode 100644
index 000000000..de70d89a9
--- /dev/null
+++ b/apps/web-ele/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-ele/src/components/iframe/index.ts b/apps/web-ele/src/components/iframe/index.ts
new file mode 100644
index 000000000..d437bc0d3
--- /dev/null
+++ b/apps/web-ele/src/components/iframe/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 000000000..eb91f8d47
--- /dev/null
+++ b/apps/web-ele/src/views/infra/druid/index.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+import { DocAlert } from '#/components/doc-alert';
+import { IFrame } from '#/components/iframe';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/druid/index.html`);
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.druid');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="数据库 MyBatis" url="https://doc.iocoder.cn/mybatis/" />
+      <DocAlert
+        title="多数据源（读写分离）"
+        url="https://doc.iocoder.cn/dynamic-datasource/"
+      />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/infra/server/index.vue b/apps/web-ele/src/views/infra/server/index.vue
new file mode 100644
index 000000000..b2293e2ee
--- /dev/null
+++ b/apps/web-ele/src/views/infra/server/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+import { DocAlert } from '#/components/doc-alert';
+import { IFrame } from '#/components/iframe';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/admin/applications`);
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    // 友情提示：如果访问出现 404 问题：
+    // 1）boot 参考 https://doc.iocoder.cn/server-monitor/ 解决；
+    // 2）cloud 参考 https://cloud.iocoder.cn/server-monitor/ 解决
+    const data = await getConfigKey('url.spring-boot-admin');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/infra/skywalking/index.vue b/apps/web-ele/src/views/infra/skywalking/index.vue
new file mode 100644
index 000000000..50b8bab0f
--- /dev/null
+++ b/apps/web-ele/src/views/infra/skywalking/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+import { DocAlert } from '#/components/doc-alert';
+import { IFrame } from '#/components/iframe';
+
+const loading = ref(true); // 是否加载中
+const src = ref('http://skywalking.shop.iocoder.cn');
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.skywalking');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/infra/swagger/index.vue b/apps/web-ele/src/views/infra/swagger/index.vue
new file mode 100644
index 000000000..52a162a1c
--- /dev/null
+++ b/apps/web-ele/src/views/infra/swagger/index.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+import { DocAlert } from '#/components/doc-alert';
+import { IFrame } from '#/components/iframe';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/doc.html`); // Knife4j UI
+// const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.swagger');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="接口文档" url="https://doc.iocoder.cn/api-doc/" />
+    </template>
+
+    <IFrame v-if="!loading" :src="src" />
+  </Page>
+</template>