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 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>