feat: 添加下载全部

src/App.vue

@@ -2,16 +2,18 @@
   <n-config-provider>
     <n-message-provider>
       <content />
+      <n-dialog-provider>
         <router-view v-slot="{ Component, route }">
           <transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
             <component :is="Component" :key="route.path" />
           </transition>
         </router-view>
+      </n-dialog-provider>
     </n-message-provider>
   </n-config-provider>
 </template>
 <script lang="ts" setup>
-import { NConfigProvider, NMessageProvider } from 'naive-ui';
+import { NConfigProvider, NDialogProvider, NMessageProvider } from 'naive-ui';
 
 import Content from '@/views/content.vue';
 </script>

src/utils/file.ts

@@ -0,0 +1,20 @@
+export function downloadTextAsFile(text: string, filename: string) {
+  // 直接创建 File 对象（比 Blob 更高级）
+  const file = new File([text], filename, { type: 'text/plain' });
+
+  // 创建下载链接
+  const url = URL.createObjectURL(file);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  console.log(filename);
+  // 触发下载
+  document.body.appendChild(a);
+  a.click();
+
+  // 清理
+  requestIdleCallback(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(a.href);
+  });
+}

src/views/generator-code/components/generator/components/generator-preview.vue

@@ -1,9 +1,40 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
-import { NCollapse, NCollapseItem, NInput } from 'naive-ui';
+import { NButton, NCollapse, NCollapseItem, NInput, useDialog, useMessage } from 'naive-ui';
+import { ref } from 'vue';
 
 import { useVmsStore } from '@/store/modules/vms';
+import { downloadTextAsFile } from '@/utils/file';
 
+const dialog = useDialog();
+const message = useMessage();
 const vmsStore = useVmsStore();
+
+const download = (code: string, filename: string) => {
+  const extension = filename.includes('web') ? 'ts' : 'java';
+  filename = `${filename.split('/')[1]}.${extension}`;
+
+  let inputValue = ref(filename);
+
+  dialog.info({
+    title: '修改文件名',
+    positiveText: '下载',
+    negativeText: '取消',
+    content: () => (
+      <NInput
+        placeholder="Tiny Input"
+        clearable
+        value={inputValue.value}
+        onInput={(value) => (inputValue.value = value)}
+      />
+    ),
+    onPositiveClick: () => {
+      downloadTextAsFile(code, inputValue.value);
+    },
+    onNegativeClick: () => {
+      message.info('取消下载');
+    },
+  });
+};
 </script>
 
 <template>
@@ -14,6 +45,9 @@ const vmsStore = useVmsStore();
       :name="item.path"
       :title="item.path"
     >
+      <template #header-extra>
+        <n-button quaternary type="info" @click="download(item.code, item.path)">下载</n-button>
+      </template>
       <n-input
         :autosize="{ minRows: 3 }"
         :placeholder="item.comment"

src/views/generator-code/components/generator/hook.ts

@@ -55,4 +55,5 @@ export const selectAllInvert = () => {
 export const selectCancelAll = () => {
   formOption.generatorServer = [];
   formOption.generatorWeb = [];
+  formValue.path = [];
 };

src/views/generator-code/components/generator/index.vue

@@ -8,6 +8,15 @@
         <n-button attr-type="button" type="warning" @click="selectAllInvert">全部反选</n-button>
         <n-button attr-type="button" type="error" @click="selectCancelAll">全选取消</n-button>
         <n-button attr-type="button" type="info" @click="onSubmit">开始生成</n-button>
+        <n-button
+          :disabled="!(vmsStore.generators.length > 0 && formValue.path.length > 0)"
+          attr-type="button"
+          type="info"
+          @click="downloadAll"
+        >
+          {{ formValue.path.length }}
+          下载全部
+        </n-button>
       </n-button-group>
     </n-form-item>
   </n-form>
@@ -16,13 +25,14 @@
   <generator-preview />
 </template>
 
-<script lang="ts" setup>
+<script lang="tsx" setup>
 import { NButton, NButtonGroup, NForm, NFormItem, useMessage } from 'naive-ui';
 import { onMounted, ref } from 'vue';
 import { toRaw } from 'vue-demi';
 import { useRoute } from 'vue-router';
 
 import { useVmsStore } from '@/store/modules/vms';
+import { downloadTextAsFile } from '@/utils/file';
 import GeneratorForm from '@/views/generator-code/components/generator/components/generator-form.vue';
 import GeneratorPreview from '@/views/generator-code/components/generator/components/generator-preview.vue';
 import {
@@ -71,6 +81,19 @@ const onSubmit = (e: MouseEvent) => {
   });
 };
 
+/* 下载全部 */
+const downloadAll = () => {
+  vmsStore.generators.forEach((vms) => {
+    const code = vms.code;
+    const path = vms.path;
+
+    const extension = path.includes('web') ? 'ts' : 'java';
+    let filename = `${path.split('/')[1]}.${extension}`;
+
+    downloadTextAsFile(code, filename);
+  });
+};
+
 onMounted(() => {
   // 初始化表名称
   const tableName: any = route.query.tableName;