From ce6e3d79e3b9ca8157c6b415cb33208ce7481f5f Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 14 May 2025 14:55:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20ele=20infra=20drui?=
 =?UTF-8?q?d=E5=92=8C=E6=9C=8D=E5=8A=A1=E7=9B=B8=E5=85=B3=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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  | 38 +++++++++++++++++++
 apps/web-ele/src/views/infra/server/index.vue | 37 ++++++++++++++++++
 .../src/views/infra/skywalking/index.vue      | 34 +++++++++++++++++
 .../web-ele/src/views/infra/swagger/index.vue | 35 +++++++++++++++++
 6 files changed, 183 insertions(+)
 create mode 100644 apps/web-ele/src/components/iframe/iframe.vue
 create mode 100644 apps/web-ele/src/components/iframe/index.ts
 create mode 100644 apps/web-ele/src/views/infra/druid/index.vue
 create mode 100644 apps/web-ele/src/views/infra/server/index.vue
 create mode 100644 apps/web-ele/src/views/infra/skywalking/index.vue
 create mode 100644 apps/web-ele/src/views/infra/swagger/index.vue

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 00000000..de70d89a
--- /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 00000000..d437bc0d
--- /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 00000000..eb91f8d4
--- /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 00000000..b2293e2e
--- /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 00000000..50b8bab0
--- /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 00000000..52a162a1
--- /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>