refactor: IFrame

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 res = await DbDocApi.exportHtmlApi()
-  download.html(res, '数据库文档.html')
-}
-/** 处理导出 Word */
-const handleExportWord = async () => {
+/** 处理导出  */
+const handleExport = async (type: string) => {
   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>

yudao-ui-admin-vue3/src/views/infra/druid/index.vue

@@ -1,12 +1,13 @@
+<template>
+  <ContentWrap>
+    <IFrame :src="src" />
+  </ContentWrap>
+</template>
 <script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
 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>
 
-<template>
-  <ContentWrap>
-    <IFrame :src="src" />
-  </ContentWrap>
-</template>

yudao-ui-admin-vue3/src/views/infra/redis/index.vue

@@ -1,9 +1,135 @@
+<template>
+  <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
+    <el-row>
+      <el-col :span="24" class="card-box" shadow="hover">
+        <el-card>
+          <el-descriptions title="基本信息" :column="6" border>
+            <el-descriptions-item label="Redis版本 :">
+              {{ cache?.info?.redis_version }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行模式 :">
+              {{ cache?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="端口 :">
+              {{ cache?.info?.tcp_port }}
+            </el-descriptions-item>
+            <el-descriptions-item label="客户端数 :">
+              {{ cache?.info?.connected_clients }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行时间(天) :">
+              {{ cache?.info?.uptime_in_days }}
+            </el-descriptions-item>
+            <el-descriptions-item label="使用内存 :">
+              {{ cache?.info?.used_memory_human }}
+            </el-descriptions-item>
+            <el-descriptions-item label="使用CPU :">
+              {{ cache?.info ? parseFloat(cache?.info?.used_cpu_user_children).toFixed(2) : '' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="内存配置 :">
+              {{ cache?.info?.maxmemory_human }}
+            </el-descriptions-item>
+            <el-descriptions-item label="AOF是否开启 :">
+              {{ cache?.info?.aof_enabled == '0' ? '否' : '是' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="RDB是否成功 :">
+              {{ cache?.info?.rdb_last_bgsave_status }}
+            </el-descriptions-item>
+            <el-descriptions-item label="Key数量 :">
+              {{ cache?.dbSize }}
+            </el-descriptions-item>
+            <el-descriptions-item label="网络入口/出口 :">
+              {{ cache?.info?.instantaneous_input_kbps }}kps/
+              {{ cache?.info?.instantaneous_output_kbps }}kps
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="margin-top: 10px">
+        <el-card :gutter="12" shadow="hover">
+          <div ref="commandStatsRef" style="height: 350px"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" style="margin-top: 10px">
+        <el-card style="margin-left: 10px" :gutter="12" shadow="hover">
+          <div ref="usedmemory" style="height: 350px"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 10px">
+      <el-col :span="24" class="card-box" shadow="hover">
+        <el-card>
+          <el-table
+            v-loading="keyListLoad"
+            :data="keyList"
+            row-key="id"
+            @row-click="openKeyTemplate"
+          >
+            <el-table-column prop="keyTemplate" label="Key 模板" width="200" />
+            <el-table-column prop="keyType" label="Key 类型" width="100" />
+            <el-table-column prop="valueType" label="Value 类型" />
+            <el-table-column prop="timeoutType" label="超时时间" width="200">
+              <template #default="{ row }">
+                <DictTag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="row?.timeoutType" />
+                <span v-if="row?.timeout > 0">({{ row?.timeout / 1000 }} 秒)</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="memo" label="备注" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-scrollbar>
+  <XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
+    <el-row>
+      <el-col :span="14" style="margin-top: 10px">
+        <el-card shadow="always">
+          <template #header>
+            <div class="card-header">
+              <span>键名列表</span>
+            </div>
+          </template>
+          <el-table :data="cacheKeys" style="width: 100%" @row-click="handleKeyValue">
+            <el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true">
+              <template #default="{ row }">
+                {{ row }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="right" width="60">
+              <template #default="{ row }">
+                <el-button link type="primary" @click="handleDeleteKey(row)">
+                  <Icon icon="ep:delete" />
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="10" style="margin-top: 10px">
+        <el-card shadow="always">
+          <template #header>
+            <div class="card-header">
+              <span>缓存内容</span>
+              <el-button
+                link
+                type="primary"
+                @click="handleDeleteKeys(keyTemplate)"
+                style="float: right; padding: 3px 0"
+              >
+                <Icon icon="ep:refresh" />清理全部
+              </el-button>
+            </div>
+          </template>
+          <el-descriptions :column="1">
+            <el-descriptions-item label="缓存键名:">{{ cacheForm.key }}</el-descriptions-item>
+            <el-descriptions-item label="缓存内容:">{{ cacheForm.value }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+    </el-row>
+  </XModal>
+</template>
 <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,
@@ -12,9 +138,17 @@ import {
   ElTableColumn,
   ElScrollbar,
   ElDescriptions,
-  ElDescriptionsItem,
-  ElMessage
+  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[]>([])
@@ -29,7 +163,6 @@ const readRedisInfo = async () => {
 }
 // 图表
 const commandStatsRef = ref<HTMLElement>()
-
 const usedmemory = ref<HTMLDivElement>()
 
 const loadEchartOptions = (stats) => {
@@ -138,11 +271,11 @@ const openKeyTemplate = async (row: RedisKeyInfo) => {
 }
 const handleDeleteKey = async (row) => {
   RedisApi.deleteKeyApi(row)
-  ElMessage.success('删除成功')
+  message.success(t('common.delSuccess'))
 }
 const handleDeleteKeys = async (row) => {
   RedisApi.deleteKeysApi(row)
-  ElMessage.success('删除成功')
+  message.success(t('common.delSuccess'))
 }
 const handleKeyValue = async (row) => {
   const res = await RedisApi.getKeyValueApi(row)
@@ -152,136 +285,6 @@ onBeforeMount(() => {
   readRedisInfo()
 })
 </script>
-<template>
-  <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
-    <el-row>
-      <el-col :span="24" class="card-box" shadow="hover">
-        <el-card>
-          <el-descriptions title="基本信息" :column="6" border>
-            <el-descriptions-item label="Redis版本 :">
-              {{ cache?.info?.redis_version }}
-            </el-descriptions-item>
-            <el-descriptions-item label="运行模式 :">
-              {{ cache?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
-            </el-descriptions-item>
-            <el-descriptions-item label="端口 :">
-              {{ cache?.info?.tcp_port }}
-            </el-descriptions-item>
-            <el-descriptions-item label="客户端数 :">
-              {{ cache?.info?.connected_clients }}
-            </el-descriptions-item>
-            <el-descriptions-item label="运行时间(天) :">
-              {{ cache?.info?.uptime_in_days }}
-            </el-descriptions-item>
-            <el-descriptions-item label="使用内存 :">
-              {{ cache?.info?.used_memory_human }}
-            </el-descriptions-item>
-            <el-descriptions-item label="使用CPU :">
-              {{ cache?.info ? parseFloat(cache?.info?.used_cpu_user_children).toFixed(2) : '' }}
-            </el-descriptions-item>
-            <el-descriptions-item label="内存配置 :">
-              {{ cache?.info?.maxmemory_human }}
-            </el-descriptions-item>
-            <el-descriptions-item label="AOF是否开启 :">
-              {{ cache?.info?.aof_enabled == '0' ? '否' : '是' }}
-            </el-descriptions-item>
-            <el-descriptions-item label="RDB是否成功 :">
-              {{ cache?.info?.rdb_last_bgsave_status }}
-            </el-descriptions-item>
-            <el-descriptions-item label="Key数量 :">
-              {{ cache?.dbSize }}
-            </el-descriptions-item>
-            <el-descriptions-item label="网络入口/出口 :">
-              {{ cache?.info?.instantaneous_input_kbps }}kps/
-              {{ cache?.info?.instantaneous_output_kbps }}kps
-            </el-descriptions-item>
-          </el-descriptions>
-        </el-card>
-      </el-col>
-      <el-col :span="12" style="margin-top: 10px">
-        <el-card :gutter="12" shadow="hover">
-          <div ref="commandStatsRef" style="height: 350px"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="12" style="margin-top: 10px">
-        <el-card style="margin-left: 10px" :gutter="12" shadow="hover">
-          <div ref="usedmemory" style="height: 350px"></div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row style="margin-top: 10px">
-      <el-col :span="24" class="card-box" shadow="hover">
-        <el-card>
-          <el-table
-            v-loading="keyListLoad"
-            :data="keyList"
-            row-key="id"
-            @row-click="openKeyTemplate"
-          >
-            <el-table-column prop="keyTemplate" label="Key 模板" width="200" />
-            <el-table-column prop="keyType" label="Key 类型" width="100" />
-            <el-table-column prop="valueType" label="Value 类型" />
-            <el-table-column prop="timeoutType" label="超时时间" width="200">
-              <template #default="{ row }">
-                <DictTag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="row?.timeoutType" />
-                <span v-if="row?.timeout > 0">({{ row?.timeout / 1000 }} 秒)</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="memo" label="备注" />
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
-  </el-scrollbar>
-  <XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
-    <el-row>
-      <el-col :span="14" style="margin-top: 10px">
-        <el-card shadow="always">
-          <template #header>
-            <div class="card-header">
-              <span>键名列表</span>
-            </div>
-          </template>
-          <el-table :data="cacheKeys" style="width: 100%" @row-click="handleKeyValue">
-            <el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true">
-              <template #default="{ row }">
-                {{ row }}
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="right" width="60">
-              <template #default="{ row }">
-                <el-button link type="primary" @click="handleDeleteKey(row)">
-                  <Icon icon="ep:delete" />
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-      <el-col :span="10" style="margin-top: 10px">
-        <el-card shadow="always">
-          <template #header>
-            <div class="card-header">
-              <span>缓存内容</span>
-              <el-button
-                link
-                type="primary"
-                @click="handleDeleteKeys(keyTemplate)"
-                style="float: right; padding: 3px 0"
-              >
-                <Icon icon="ep:refresh" />清理全部
-              </el-button>
-            </div>
-          </template>
-          <el-descriptions :column="1">
-            <el-descriptions-item label="缓存键名:">{{ cacheForm.key }}</el-descriptions-item>
-            <el-descriptions-item label="缓存内容:">{{ cacheForm.value }}</el-descriptions-item>
-          </el-descriptions>
-        </el-card>
-      </el-col>
-    </el-row>
-  </XModal>
-</template>
 <style scoped>
 .redis {
   height: 600px;

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>

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>

yudao-ui-admin-vue3/src/views/infra/swagger/index.vue

@@ -1,12 +1,13 @@
+<template>
+  <ContentWrap>
+    <IFrame :src="src" />
+  </ContentWrap>
+</template>
 <script setup lang="ts">
-import { IFrame } from '@/components/IFrame'
 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>
 
-<template>
-  <ContentWrap>
-    <IFrame :src="src" />
-  </ContentWrap>
-</template>