refactor: IFrame

2025-11-04 20:28:44 +08:00 · 2022-11-22 21:55:31 +08:00
parent d604c6c5fb
commit 557f2937f5
6 changed files with 221 additions and 213 deletions
--- a/yudao-ui-admin-vue3/src/views/infra/dbDoc/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/dbDoc/index.vue
@@ -1,13 +1,39 @@
+<template>
+  <ContentWrap title="数据库文档">
+    <!-- 操作工具栏 -->
+    <div class="mb-10px">
+       <XButton
+          type="primary"
+          preIcon="ep:download"
+          :title="t('action.export') + ' HTML'"
+          @click="handleExport('HTML')"
+        />
+         <XButton
+          type="primary"
+          preIcon="ep:download"
+          :title="t('action.export') + ' Word'"
+          @click="handleExport('Word')"
+        />
+         <XButton
+          type="primary"
+          preIcon="ep:download"
+          :title="t('action.export') + ' Markdown'"
+          @click="handleExport('Markdown')"
+        />
+    </div>
+    <IFrame v-if="!loding" v-loading="loding" :src="src" />
+  </ContentWrap>
+</template>
 <script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
-import * as DbDocApi from '@/api/infra/dbDoc'
 import { onMounted, ref } from 'vue'
 import download from '@/utils/download'
 import { useI18n } from '@/hooks/web/useI18n'
+import { IFrame } from '@/components/IFrame'
+import * as DbDocApi from '@/api/infra/dbDoc'

 const { t } = useI18n() // 国际化
-const loding = ref(true)
 const src = ref('')
+const loding = ref(true)
 /** 页面加载 */
 const init = async () => {
  const res = await DbDocApi.exportHtmlApi()
@@ -16,40 +42,16 @@ const init = async () => {
  src.value = blobUrl
  loding.value = false
 }
-/** 处理导出 HTML */
-const handleExportHtml = async () => {
+/** 处理导出  */
+const handleExport = async (type: string) => {
  const res = await DbDocApi.exportHtmlApi()
-  download.html(res, '数据库文档.html')
-}
-/** 处理导出 Word */
-const handleExportWord = async () => {
-  const res = await DbDocApi.exportHtmlApi()
-  download.word(res, '数据库文档.doc')
-}
-/** 处理导出 Markdown */
-const handleExportMarkdown = async () => {
-  const res = await DbDocApi.exportHtmlApi()
-  download.markdown(res, '数据库文档.md')
+  if (type === 'HTML') { download.html(res, '数据库文档.html') }
+  if (type === 'Word') { download.word(res, '数据库文档.doc') }
+  if(type === 'Markdown') {download.markdown(res, '数据库文档.md')}
+  
 }
 onMounted(async () => {
  await init()
 })
 </script>

-<template>
-  <ContentWrap title="数据库文档" message="https://doc.iocoder.cn/db-doc/">
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" @click="handleExportHtml">
-        <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') + ' HTML' }}
-      </el-button>
-      <el-button type="primary" @click="handleExportWord">
-        <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') + ' Word' }}
-      </el-button>
-      <el-button type="primary" @click="handleExportMarkdown">
-        <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') + ' Markdown' }}
-      </el-button>
-    </div>
-    <IFrame v-if="!loding" v-loading="loding" :src="src" />
-  </ContentWrap>
-</template>
--- a/yudao-ui-admin-vue3/src/views/infra/druid/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/druid/index.vue
@@ -1,12 +1,13 @@
-<script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
-import { ref } from 'vue'
-const BASE_URL = import.meta.env.VITE_BASE_URL
-const src = ref(BASE_URL + '/druid/index.html')
-</script>
-
 <template>
  <ContentWrap>
    <IFrame :src="src" />
  </ContentWrap>
 </template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const BASE_URL = import.meta.env.VITE_BASE_URL
+const src = ref(BASE_URL + '/druid/index.html')
+</script>
+
--- a/yudao-ui-admin-vue3/src/views/infra/redis/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/redis/index.vue
@@ -1,157 +1,3 @@
-<script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
-import * as RedisApi from '@/api/infra/redis'
-import { DICT_TYPE } from '@/utils/dict'
-import * as echarts from 'echarts'
-import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
-import {
-  ElRow,
-  ElCard,
-  ElCol,
-  ElTable,
-  ElTableColumn,
-  ElScrollbar,
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElMessage
-} from 'element-plus'
-const cache = ref<RedisMonitorInfoVO>()
-const keyListLoad = ref(true)
-const keyList = ref<RedisKeyInfo[]>([])
-// 基本信息
-const readRedisInfo = async () => {
-  const data = await RedisApi.getCacheApi()
-  cache.value = data
-  loadEchartOptions(data.commandStats)
-  const redisKeysInfo = await RedisApi.getKeyDefineListApi()
-  keyList.value = redisKeysInfo
-  keyListLoad.value = false //加载完成
-}
-// 图表
-const commandStatsRef = ref<HTMLElement>()
-
-const usedmemory = ref<HTMLDivElement>()
-
-const loadEchartOptions = (stats) => {
-  const commandStats = [] as any[]
-  const nameList = [] as string[]
-  stats.forEach((row) => {
-    commandStats.push({
-      name: row.command,
-      value: row.calls
-    })
-    nameList.push(row.command)
-  })
-
-  const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
-
-  commandStatsInstance.setOption({
-    title: {
-      text: '命令统计',
-      left: 'center'
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b} : {c} ({d}%)'
-    },
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: 30,
-      top: 10,
-      bottom: 20,
-      data: nameList,
-      textStyle: {
-        color: '#a1a1a1'
-      }
-    },
-    series: [
-      {
-        name: '命令',
-        type: 'pie',
-        radius: [20, 120],
-        center: ['40%', '60%'],
-        data: commandStats,
-        roseType: 'radius',
-        label: {
-          show: true
-        },
-        emphasis: {
-          label: {
-            show: true
-          },
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  })
-
-  const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
-  usedMemoryInstance.setOption({
-    title: {
-      text: '内存使用情况',
-      left: 'center'
-    },
-    tooltip: {
-      formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
-    },
-    series: [
-      {
-        name: '峰值',
-        type: 'gauge',
-        min: 0,
-        max: 100,
-        progress: {
-          show: true
-        },
-        detail: {
-          formatter: cache.value!.info.used_memory_human
-        },
-        data: [
-          {
-            value: parseFloat(cache.value!.info.used_memory_human),
-            name: '内存消耗'
-          }
-        ]
-      }
-    ]
-  })
-}
-const dialogVisible = ref(false)
-const keyTemplate = ref('')
-const cacheKeys = ref()
-const cacheForm = ref<{
-  key: string
-  value: string
-}>({
-  key: '',
-  value: ''
-})
-const openKeyTemplate = async (row: RedisKeyInfo) => {
-  keyTemplate.value = row.keyTemplate
-  cacheKeys.value = await RedisApi.getKeyListApi(row.keyTemplate)
-  dialogVisible.value = true
-}
-const handleDeleteKey = async (row) => {
-  RedisApi.deleteKeyApi(row)
-  ElMessage.success('删除成功')
-}
-const handleDeleteKeys = async (row) => {
-  RedisApi.deleteKeysApi(row)
-  ElMessage.success('删除成功')
-}
-const handleKeyValue = async (row) => {
-  const res = await RedisApi.getKeyValueApi(row)
-  cacheForm.value = res
-}
-onBeforeMount(() => {
-  readRedisInfo()
-})
-</script>
 <template>
  <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
    <el-row>
@@ -282,6 +128,163 @@ onBeforeMount(() => {
    </el-row>
  </XModal>
 </template>
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue'
+import {
+  ElRow,
+  ElCard,
+  ElCol,
+  ElTable,
+  ElTableColumn,
+  ElScrollbar,
+  ElDescriptions,
+  ElDescriptionsItem
+} from 'element-plus'
+import * as echarts from 'echarts'
+import { DICT_TYPE } from '@/utils/dict'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import * as RedisApi from '@/api/infra/redis'
+import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const cache = ref<RedisMonitorInfoVO>()
+const keyListLoad = ref(true)
+const keyList = ref<RedisKeyInfo[]>([])
+// 基本信息
+const readRedisInfo = async () => {
+  const data = await RedisApi.getCacheApi()
+  cache.value = data
+  loadEchartOptions(data.commandStats)
+  const redisKeysInfo = await RedisApi.getKeyDefineListApi()
+  keyList.value = redisKeysInfo
+  keyListLoad.value = false //加载完成
+}
+// 图表
+const commandStatsRef = ref<HTMLElement>()
+const usedmemory = ref<HTMLDivElement>()
+
+const loadEchartOptions = (stats) => {
+  const commandStats = [] as any[]
+  const nameList = [] as string[]
+  stats.forEach((row) => {
+    commandStats.push({
+      name: row.command,
+      value: row.calls
+    })
+    nameList.push(row.command)
+  })
+
+  const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
+
+  commandStatsInstance.setOption({
+    title: {
+      text: '命令统计',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 30,
+      top: 10,
+      bottom: 20,
+      data: nameList,
+      textStyle: {
+        color: '#a1a1a1'
+      }
+    },
+    series: [
+      {
+        name: '命令',
+        type: 'pie',
+        radius: [20, 120],
+        center: ['40%', '60%'],
+        data: commandStats,
+        roseType: 'radius',
+        label: {
+          show: true
+        },
+        emphasis: {
+          label: {
+            show: true
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  })
+
+  const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
+  usedMemoryInstance.setOption({
+    title: {
+      text: '内存使用情况',
+      left: 'center'
+    },
+    tooltip: {
+      formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
+    },
+    series: [
+      {
+        name: '峰值',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        progress: {
+          show: true
+        },
+        detail: {
+          formatter: cache.value!.info.used_memory_human
+        },
+        data: [
+          {
+            value: parseFloat(cache.value!.info.used_memory_human),
+            name: '内存消耗'
+          }
+        ]
+      }
+    ]
+  })
+}
+const dialogVisible = ref(false)
+const keyTemplate = ref('')
+const cacheKeys = ref()
+const cacheForm = ref<{
+  key: string
+  value: string
+}>({
+  key: '',
+  value: ''
+})
+const openKeyTemplate = async (row: RedisKeyInfo) => {
+  keyTemplate.value = row.keyTemplate
+  cacheKeys.value = await RedisApi.getKeyListApi(row.keyTemplate)
+  dialogVisible.value = true
+}
+const handleDeleteKey = async (row) => {
+  RedisApi.deleteKeyApi(row)
+  message.success(t('common.delSuccess'))
+}
+const handleDeleteKeys = async (row) => {
+  RedisApi.deleteKeysApi(row)
+  message.success(t('common.delSuccess'))
+}
+const handleKeyValue = async (row) => {
+  const res = await RedisApi.getKeyValueApi(row)
+  cacheForm.value = res
+}
+onBeforeMount(() => {
+  readRedisInfo()
+})
+</script>
 <style scoped>
 .redis {
  height: 600px;
--- a/yudao-ui-admin-vue3/src/views/infra/server/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/server/index.vue
@@ -1,12 +1,12 @@
-<script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
-import { ref } from 'vue'
-const BASE_URL = import.meta.env.VITE_BASE_URL
-const src = ref(BASE_URL + '/admin/applications')
-</script>
-
 <template>
  <ContentWrap>
    <IFrame :src="src" />
  </ContentWrap>
 </template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const BASE_URL = import.meta.env.VITE_BASE_URL
+const src = ref(BASE_URL + '/admin/applications')
+</script>
--- a/yudao-ui-admin-vue3/src/views/infra/skywalking/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/skywalking/index.vue
@@ -1,11 +1,12 @@
-<script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
-import { ref } from 'vue'
-const src = ref('http://skywalking.shop.iocoder.cn')
-</script>

 <template>
  <ContentWrap>
    <IFrame :src="src" />
  </ContentWrap>
 </template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const src = ref('http://skywalking.shop.iocoder.cn')
+</script>
--- a/yudao-ui-admin-vue3/src/views/infra/swagger/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/swagger/index.vue
@@ -1,12 +1,13 @@
-<script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
-import { ref } from 'vue'
-const BASE_URL = import.meta.env.VITE_BASE_URL
-const src = ref(BASE_URL + '/doc.html')
-</script>
-
 <template>
  <ContentWrap>
    <IFrame :src="src" />
  </ContentWrap>
 </template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IFrame } from '@/components/IFrame'
+
+const BASE_URL = import.meta.env.VITE_BASE_URL
+const src = ref(BASE_URL + '/doc.html')
+</script>
+