refactor: 代码生成预览样式调整

src/views/tool/generator/GenPreviewModal.vue

@@ -1,37 +1,41 @@
 <template>
   <a-modal
     v-model:visible="visible"
-    title="生成预览"
+    :title="`生成 ${previewTableName} 表预览`"
     :mask-closable="false"
     :esc-to-close="false"
-    width="90%"
+    width="100%"
     :footer="false"
   >
-    <template #title>
-      <a-button type="primary" status="success" size="medium" title="生成预览" @click="onGenerate()">
-        <template #icon><icon-download /></template>生成 {{ previewTableName }} 表
-      </a-button>
-    </template>
     <div class="preview-content">
       <a-layout>
         <a-layout-sider theme="dark" :resize-directions="['right']" style="height: 700px">
           <a-tree class="selectPreview" :data="treeData" :show-line="true" @select="onSelectPreview" />
         </a-layout-sider>
         <a-layout-content>
-          <a-scrollbar style="height: 700px; overflow: auto">
+          <a-card :header-style="{ height: '50px' }">
-            <a-link style="position: absolute; right: 20px; top: 50px; z-index: 999" @click="onCopy">
+            <template #title> {{ currentPreview?.path }}\{{ currentPreview?.fileName }} </template>
-              <template #icon>
+            <template #extra>
-                <icon-copy size="large" />
+              <a-button-group type="outline" size="small">
-              </template>
+                <a-button @click="onCopy">
-              复制
+                  <template #icon>
-            </a-link>
+                    <icon-copy />
-            <a-card :title="currentPreview?.fileName">
+                  </template>
+                </a-button>
+                <a-button @click="gen">
+                  <template #icon>
+                    <icon-download />
+                  </template>
+                </a-button>
+              </a-button-group>
+            </template>
+            <a-scrollbar style="height: 650px; overflow: auto">
               <GiCodeView
                 :type="'vue' === currentPreview?.fileName.split('.')[1] ? 'vue' : 'javascript'"
                 :code-json="currentPreview?.content"
               />
-            </a-card>
+            </a-scrollbar>
-          </a-scrollbar>
+          </a-card>
         </a-layout-content>
       </a-layout>
     </div>
@@ -41,8 +45,10 @@
 <script setup lang="ts">
 import { Message, type TreeNodeData } from '@arco-design/web-vue'
 import { useClipboard } from '@vueuse/core'
-import { type GeneratePreviewResp, genPreview, generate } from '@/apis'
+import { type GeneratePreviewResp, genPreview } from '@/apis'
 
+// 生成
+const emit = defineEmits<{ (e: 'generate', tableNames: string[]): void }>()
 const { copy, copied } = useClipboard()
 const currentPreview = ref<GeneratePreviewResp>()
 const genPreviewList = ref<GeneratePreviewResp[]>([])
@@ -130,31 +136,9 @@ watch(copied, () => {
   }
 })
 
-// 生成
+const gen = () => {
-const onGenerate = async () => {
+  emit('generate', [previewTableName.value])
-  const res = await generate([previewTableName.value])
-  const contentDisposition = res.headers['content-disposition']
-  const pattern = /filename=([^;]+\.[^.;]+);*/
-  const result = pattern.exec(contentDisposition) || ''
-  // 对名字进行解码
-  const fileName = window.decodeURI(result[1])
-  // 创建下载的链接
-  const blob = new Blob([res.data])
-  const downloadElement = document.createElement('a')
-  const href = window.URL.createObjectURL(blob)
-  downloadElement.style.display = 'none'
-  downloadElement.href = href
-  // 下载后文件名
-  downloadElement.download = fileName
-  document.body.appendChild(downloadElement)
-  // 点击下载
-  downloadElement.click()
-  // 下载完成，移除元素
-  document.body.removeChild(downloadElement)
-  // 释放掉 blob 对象
-  window.URL.revokeObjectURL(href)
 }
-
 defineExpose({ onPreview })
 </script>
 

src/views/tool/generator/index.vue

@@ -34,14 +34,14 @@
     </a-card>
 
     <GenConfigDrawer ref="GenConfigDrawerRef" @save-success="search" />
-    <GenPreviewModal ref="GenPreviewModalRef" />
+    <GenPreviewModal ref="GenPreviewModalRef" @generate="onGenerate" />
   </div>
 </template>
 
 <script setup lang="ts">
 import GenConfigDrawer from './GenConfigDrawer.vue'
 import GenPreviewModal from './GenPreviewModal.vue'
-import { listGenerator } from '@/apis'
+import { generate, listGenerator } from '@/apis'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'
@@ -92,6 +92,31 @@ const GenPreviewModalRef = ref<InstanceType<typeof GenPreviewModal>>()
 const onPreview = (tableName: string) => {
   GenPreviewModalRef.value?.onPreview(tableName)
 }
+
+// 生成
+const onGenerate = async (tableNames: Array<string>) => {
+  const res = await generate(tableNames)
+  const contentDisposition = res.headers['content-disposition']
+  const pattern = /filename=([^;]+\.[^.;]+);*/
+  const result = pattern.exec(contentDisposition) || ''
+  // 对名字进行解码
+  const fileName = window.decodeURI(result[1])
+  // 创建下载的链接
+  const blob = new Blob([res.data])
+  const downloadElement = document.createElement('a')
+  const href = window.URL.createObjectURL(blob)
+  downloadElement.style.display = 'none'
+  downloadElement.href = href
+  // 下载后文件名
+  downloadElement.download = fileName
+  document.body.appendChild(downloadElement)
+  // 点击下载
+  downloadElement.click()
+  // 下载完成，移除元素
+  document.body.removeChild(downloadElement)
+  // 释放掉 blob 对象
+  window.URL.revokeObjectURL(href)
+}
 </script>
 
 <style></style>