feat: iframe

.env.development

@@ -7,15 +7,16 @@ VITE_PUBLIC_PATH = /
 # 本地开发代理，可以解决跨域及多地址代理
 # 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
 # 可以有多个，注意多个不能换行，否则代理将会失效
-VITE_PROXY = [["/dev-api","http://localhost:48080"],["/upload","http://localhost:48080/admin-api/infra/file/upload"]]
+VITE_PROXY = [["/dev-api","http://localhost:48080"],["/upload","http://192.168.0.22:48080/admin-api/infra/file/upload"]]
 # VITE_PROXY=[["/api","http://vben.xingyuv.com/test"]]
 
 # 是否删除Console.log
 VITE_DROP_CONSOLE = false
 
 # 接口地址
+VITE_GLOB_BASE_URL = "http://localhost:48080"
 # 如果没有跨域问题，直接在这里配置即可
-VITE_GLOB_API_URL = "http://localhost:48080/admin-api"
+VITE_GLOB_API_URL = /admin-api
 
 # 文件上传接口  可选
 VITE_GLOB_UPLOAD_URL = /upload

.env.front

@@ -14,8 +14,10 @@ VITE_PROXY = [["/dev-api","http://api-dashboard.yudao.iocoder.cn"],["/upload","h
 VITE_DROP_CONSOLE = false
 
 # 接口地址
+# 接口地址
+VITE_GLOB_BASE_URL = "http://api-dashboard.yudao.iocoder.cn"
 # 如果没有跨域问题，直接在这里配置即可
-VITE_GLOB_API_URL = "http://api-dashboard.yudao.iocoder.cn/admin-api"
+VITE_GLOB_API_URL = /admin-api
 
 # 文件上传接口  可选
 VITE_GLOB_UPLOAD_URL = /upload

.env.production

@@ -13,6 +13,7 @@ VITE_BUILD_COMPRESS = 'gzip'
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # 接口地址 可以由nginx做转发或者直接写实际地址
+VITE_GLOB_BASE_URL = "http://localhost:48080"
 VITE_GLOB_API_URL = /admin-api
 
 # 文件上传地址 可以由nginx做转发或者直接写实际地址

.env.test

@@ -15,7 +15,8 @@ VITE_BUILD_COMPRESS = 'none'
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # 接口地址 可以由nginx做转发或者直接写实际地址
-VITE_GLOB_API_URL = /admin-api
+VITE_GLOB_BASE_URL = "http://localhost:48080"
+VITE_GLOB_API_URL = /admin-ap
 
 # 文件上传地址 可以由nginx做转发或者直接写实际地址
 VITE_GLOB_UPLOAD_URL = /upload

src/api/infra/dbDoc/index.ts

@@ -1,16 +1,16 @@
 import { defHttp } from '@/utils/http/axios'
 
 // 导出Html
-export const exportHtmlApi = () => {
-  return defHttp.get({ url: '/infra/db-doc/export-html' })
+export const exportHtmlApi = async () => {
+  return defHttp.get({ url: '/infra/db-doc/export-html', responseType: 'blob' })
 }
 
 // 导出Word
 export const exportWordApi = () => {
-  return defHttp.get({ url: '/infra/db-doc/export-word' })
+  return defHttp.get({ url: '/infra/db-doc/export-word', responseType: 'blob' })
 }
 
 // 导出Markdown
 export const exportMarkdownApi = () => {
-  return defHttp.get({ url: '/infra/db-doc/export-markdown' })
+  return defHttp.get({ url: '/infra/db-doc/export-markdown', responseType: 'blob' })
 }

src/components/IFrame/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '@/utils'
+
+import iFrame from './src/IFrame.vue'
+
+export const IFrame = withInstall(iFrame)

src/components/IFrame/src/IFrame.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe :src="props.src" style="width: 100%; height: 100%" frameborder="no" scrolling="auto" ref="frameRef"></iframe>
+  </div>
+</template>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  src: propTypes.string.def('')
+})
+const loading = ref(true)
+const height = ref('')
+const frameRef = ref<HTMLElement | null>(null)
+const init = () => {
+  height.value = document.documentElement.clientHeight - 94.5 + 'px'
+  loading.value = false
+}
+onMounted(() => {
+  setTimeout(() => {
+    init()
+  }, 300)
+})
+</script>

src/hooks/setting/index.ts

@@ -6,6 +6,7 @@ import { getAppEnvConfig } from '@/utils/env'
 export const useGlobSetting = (): Readonly<GlobConfig> => {
   const {
     VITE_GLOB_APP_TITLE,
+    VITE_GLOB_BASE_URL,
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
@@ -23,7 +24,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
   // Take global configuration
   const glob: Readonly<GlobConfig> = {
     title: VITE_GLOB_APP_TITLE,
-    apiUrl: VITE_GLOB_API_URL,
+    apiUrl: VITE_GLOB_BASE_URL + VITE_GLOB_API_URL,
     shortName: VITE_GLOB_APP_SHORT_NAME,
     urlPrefix: VITE_GLOB_API_URL_PREFIX,
     uploadUrl: VITE_GLOB_UPLOAD_URL,

src/types/config.d.ts

@@ -167,6 +167,7 @@ export interface GlobConfig {
 export interface GlobEnvConfig {
   // Site title
   VITE_GLOB_APP_TITLE: string
+  VITE_GLOB_BASE_URL: string
   // Service interface url
   VITE_GLOB_API_URL: string
   // Service interface url prefix

src/utils/env.ts

@@ -24,6 +24,7 @@ export function getAppEnvConfig() {
 
   const {
     VITE_GLOB_APP_TITLE,
+    VITE_GLOB_BASE_URL,
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
@@ -40,6 +41,7 @@ export function getAppEnvConfig() {
 
   return {
     VITE_GLOB_APP_TITLE,
+    VITE_GLOB_BASE_URL,
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,

src/views/infra/dbDoc/index.vue

@@ -1,3 +1,47 @@
 <template>
-  <div>开发中</div>
+  <PageWrapper>
+    <div class="mb-3">
+      <a-button type="primary" size="small" class="mr-1" @click="handleExport('HTML')">{{ t('action.export') + 'Html' }}</a-button>
+      <a-button type="primary" size="small" class="mr-1" @click="handleExport('Word')">{{ t('action.export') + 'Word' }}</a-button>
+      <a-button type="primary" size="small" @click="handleExport('Markdown')">{{ t('action.export') + 'Markdown' }}</a-button>
+    </div>
+    <IFrame :src="src" />
+  </PageWrapper>
 </template>
+<script setup lang="ts" name="Swagger">
+import { PageWrapper } from '@/components/Page'
+import { onMounted, ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { IFrame } from '@/components/IFrame'
+import * as DbDocApi from '@/api/infra/dbDoc'
+import { downloadByData } from '@/utils/file/download'
+
+const { t } = useI18n()
+// const src = ref(BASE_URL + '/doc.html')
+const src = ref('')
+/** 页面加载 */
+const init = async () => {
+  const res = await DbDocApi.exportHtmlApi()
+  let blob = new Blob([res], { type: 'text/html' })
+  let blobUrl = window.URL.createObjectURL(blob)
+  src.value = blobUrl
+}
+/** 处理导出  */
+const handleExport = async (type: string) => {
+  if (type === 'HTML') {
+    const res = await DbDocApi.exportHtmlApi()
+    downloadByData(res, '数据库文档.html')
+  }
+  if (type === 'Word') {
+    const res = await DbDocApi.exportWordApi()
+    downloadByData(res, '数据库文档.doc')
+  }
+  if (type === 'Markdown') {
+    const res = await DbDocApi.exportMarkdownApi()
+    downloadByData(res, '数据库文档.md')
+  }
+}
+onMounted(async () => {
+  await init()
+})
+</script>

src/views/infra/druid/index.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>开发中</div>
+  <div>
+    <IFrame :src="src" />
+  </div>
 </template>
+<script setup lang="ts" name="Swagger">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const BASE_URL = import.meta.env.VITE_GLOB_BASE_URL
+// const src = ref(BASE_URL + '/doc.html')
+const src = ref(BASE_URL + '/druid/index.html')
+</script>

src/views/infra/server/index.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>开发中</div>
+  <div>
+    <IFrame :src="src" />
+  </div>
 </template>
+<script setup lang="ts" name="Swagger">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const BASE_URL = import.meta.env.VITE_GLOB_BASE_URL
+// const src = ref(BASE_URL + '/doc.html')
+const src = ref(BASE_URL + '/admin/applications')
+</script>

src/views/infra/skywalking/index.vue

@@ -1,3 +1,11 @@
 <template>
-  <div>开发中</div>
+  <div>
+    <IFrame :src="src" />
+  </div>
 </template>
+<script setup lang="ts" name="Swagger">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const src = ref('http://skywalking.shop.iocoder.cn')
+</script>

src/views/infra/swagger/index.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>开发中</div>
+  <div>
+    <IFrame :src="src" />
+  </div>
 </template>
+<script setup lang="ts" name="Swagger">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const BASE_URL = import.meta.env.VITE_GLOB_BASE_URL
+// const src = ref(BASE_URL + '/doc.html')
+const src = ref(BASE_URL + '/swagger-ui')
+</script>

src/views/infra/webSocket/index.vue

@@ -61,9 +61,7 @@ const state = reactive({
   recordList: [] as { id: number; time: number; res: string }[]
 })
 const server = ref(
-  (import.meta.env.VITE_GLOB_API_URL.replace('/admin-api', '') + '/websocket/message').replace('http', 'ws') +
-    '?userId=' +
-    userStore.getUserInfo.user.id
+  (import.meta.env.VITE_GLOB_BASE_URL + '/websocket/message').replace('http', 'ws') + '?userId=' + userStore.getUserInfo.user.id
 )
 const { status, data, send, close, open } = useWebSocket(server.value, {
   autoReconnect: false,

vite.config.ts

@@ -36,7 +36,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     base: VITE_PUBLIC_PATH,
     root,
     server: {
-      https: true,
+      https: false,
       // Listening on all local IPs
       host: true,
       port: VITE_PORT,