From 9d6e232d0fd766a05df2e2a538423831ea730bc0 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <31820853+zhengkunwang223@users.noreply.github.com>
Date: Tue, 6 Sep 2022 17:48:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/api/v1/file.go                    |  24 +++-
 backend/app/dto/file.go                       |   8 +-
 backend/app/service/file.go                   |  47 +++++---
 backend/router/ro_file.go                     |   5 +-
 frontend/src/api/index.ts                     |   3 +
 frontend/src/api/interface/file.ts            |   8 +-
 frontend/src/api/modules/files.ts             |   8 +-
 frontend/src/utils/util.ts                    |  11 ++
 .../views/file-management/download/index.vue  | 110 +++++++++++-------
 frontend/src/views/file-management/index.vue  |  99 +++++++++++-----
 .../src/views/file-management/wget/index.vue  | 101 ++++++++++++++++
 11 files changed, 325 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/views/file-management/wget/index.vue

diff --git a/backend/app/api/v1/file.go b/backend/app/api/v1/file.go
index 2f9ffa9f1..ad178dca6 100644
--- a/backend/app/api/v1/file.go
+++ b/backend/app/api/v1/file.go
@@ -155,7 +155,7 @@ func (b *BaseApi) UploadFiles(c *gin.Context) {
 	helper.SuccessWithMsg(c, fmt.Sprintf("%d files upload success", success))
 }
 
-func (b *BaseApi) ChangeName(c *gin.Context) {
+func (b *BaseApi) ChangeFileName(c *gin.Context) {
 	var req dto.FileRename
 	if err := c.ShouldBindJSON(&req); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
@@ -168,20 +168,20 @@ func (b *BaseApi) ChangeName(c *gin.Context) {
 	helper.SuccessWithData(c, nil)
 }
 
-func (b *BaseApi) Download(c *gin.Context) {
-	var req dto.FileDownload
+func (b *BaseApi) WgetFile(c *gin.Context) {
+	var req dto.FileWget
 	if err := c.ShouldBindJSON(&req); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
 		return
 	}
-	if err := fileService.Download(req); err != nil {
+	if err := fileService.Wget(req); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
 		return
 	}
 	helper.SuccessWithData(c, nil)
 }
 
-func (b *BaseApi) Move(c *gin.Context) {
+func (b *BaseApi) MoveFile(c *gin.Context) {
 	var req dto.FileMove
 	if err := c.ShouldBindJSON(&req); err != nil {
 		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
@@ -193,3 +193,17 @@ func (b *BaseApi) Move(c *gin.Context) {
 	}
 	helper.SuccessWithData(c, nil)
 }
+
+func (b *BaseApi) Download(c *gin.Context) {
+	var req dto.FileDownload
+	if err := c.ShouldBindJSON(&req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+	filePath, err := fileService.FileDownload(req)
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	c.File(filePath)
+}
diff --git a/backend/app/dto/file.go b/backend/app/dto/file.go
index a72414e28..9c2f1e5a9 100644
--- a/backend/app/dto/file.go
+++ b/backend/app/dto/file.go
@@ -58,7 +58,7 @@ type FileRename struct {
 	NewName string
 }
 
-type FileDownload struct {
+type FileWget struct {
 	Url  string `json:"url" validate:"required"`
 	Path string `json:"path" validate:"required"`
 	Name string `json:"name" validate:"required"`
@@ -69,3 +69,9 @@ type FileMove struct {
 	OldPaths []string `json:"oldPaths" validate:"required"`
 	NewPath  string   `json:"newPath" validate:"required"`
 }
+
+type FileDownload struct {
+	Paths []string `json:"paths" validate:"required"`
+	Type  string   `json:"type" validate:"required"`
+	Name  string   `json:"name" validate:"required"`
+}
diff --git a/backend/app/service/file.go b/backend/app/service/file.go
index 44f8eca2e..a601b356c 100644
--- a/backend/app/service/file.go
+++ b/backend/app/service/file.go
@@ -9,8 +9,10 @@ import (
 	"github.com/pkg/errors"
 	"io"
 	"io/fs"
+	"os"
 	"path/filepath"
 	"strings"
+	"time"
 )
 
 type FileService struct {
@@ -94,18 +96,18 @@ func (f FileService) DeCompress(c dto.FileDeCompress) error {
 	return fo.Decompress(c.Path, c.Dst, files.CompressType(c.Type))
 }
 
-func (f FileService) GetContent(c dto.FileOption) (dto.FileInfo, error) {
-	info, err := files.NewFileInfo(c.FileOption)
+func (f FileService) GetContent(op dto.FileOption) (dto.FileInfo, error) {
+	info, err := files.NewFileInfo(op.FileOption)
 	if err != nil {
 		return dto.FileInfo{}, err
 	}
 	return dto.FileInfo{*info}, nil
 }
 
-func (f FileService) SaveContent(c dto.FileEdit) error {
+func (f FileService) SaveContent(edit dto.FileEdit) error {
 
 	info, err := files.NewFileInfo(files.FileOption{
-		Path:   c.Path,
+		Path:   edit.Path,
 		Expand: false,
 	})
 	if err != nil {
@@ -113,30 +115,30 @@ func (f FileService) SaveContent(c dto.FileEdit) error {
 	}
 
 	fo := files.NewFileOp()
-	return fo.WriteFile(c.Path, strings.NewReader(c.Content), info.FileMode)
+	return fo.WriteFile(edit.Path, strings.NewReader(edit.Content), info.FileMode)
 }
 
-func (f FileService) ChangeName(c dto.FileRename) error {
+func (f FileService) ChangeName(re dto.FileRename) error {
 	fo := files.NewFileOp()
-	return fo.Rename(c.OldName, c.NewName)
+	return fo.Rename(re.OldName, re.NewName)
 }
 
-func (f FileService) Download(c dto.FileDownload) error {
+func (f FileService) Wget(w dto.FileWget) error {
 	fo := files.NewFileOp()
-	return fo.DownloadFile(c.Url, filepath.Join(c.Path, c.Name))
+	return fo.DownloadFile(w.Url, filepath.Join(w.Path, w.Name))
 }
 
-func (f FileService) MvFile(c dto.FileMove) error {
+func (f FileService) MvFile(m dto.FileMove) error {
 	fo := files.NewFileOp()
-	if c.Type == "cut" {
-		return fo.Cut(c.OldPaths, c.NewPath)
+	if m.Type == "cut" {
+		return fo.Cut(m.OldPaths, m.NewPath)
 	}
 	var errs []error
-	if c.Type == "copy" {
-		for _, src := range c.OldPaths {
-			if err := fo.Copy(src, c.NewPath); err != nil {
+	if m.Type == "copy" {
+		for _, src := range m.OldPaths {
+			if err := fo.Copy(src, m.NewPath); err != nil {
 				errs = append(errs, err)
-				global.LOG.Errorf("copy file [%s] to [%s] failed, err: %s", src, c.NewPath, err.Error())
+				global.LOG.Errorf("copy file [%s] to [%s] failed, err: %s", src, m.NewPath, err.Error())
 			}
 		}
 	}
@@ -152,6 +154,19 @@ func (f FileService) MvFile(c dto.FileMove) error {
 	return nil
 }
 
+func (f FileService) FileDownload(d dto.FileDownload) (string, error) {
+	tempPath := filepath.Join(os.TempDir(), fmt.Sprintf("%d", time.Now().UnixNano()))
+	if err := os.MkdirAll(tempPath, os.ModePerm); err != nil {
+		return "", err
+	}
+	fo := files.NewFileOp()
+	if err := fo.Compress(d.Paths, tempPath, d.Name, files.CompressType(d.Type)); err != nil {
+		return "", err
+	}
+	filePath := filepath.Join(tempPath, d.Name)
+	return filePath, nil
+}
+
 func getUuid() string {
 	b := make([]byte, 16)
 	io.ReadFull(rand.Reader, b)
diff --git a/backend/router/ro_file.go b/backend/router/ro_file.go
index e7a0f5adf..f88c19470 100644
--- a/backend/router/ro_file.go
+++ b/backend/router/ro_file.go
@@ -25,9 +25,10 @@ func (f *FileRouter) InitFileRouter(Router *gin.RouterGroup) {
 		fileRouter.POST("/content", baseApi.GetContent)
 		fileRouter.POST("/save", baseApi.SaveContent)
 		fileRouter.POST("/upload", baseApi.UploadFiles)
-		fileRouter.POST("/rename", baseApi.ChangeName)
+		fileRouter.POST("/rename", baseApi.ChangeFileName)
+		fileRouter.POST("/wget", baseApi.WgetFile)
+		fileRouter.POST("/move", baseApi.MoveFile)
 		fileRouter.POST("/download", baseApi.Download)
-		fileRouter.POST("/move", baseApi.Move)
 	}
 
 }
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 72ecf6222..538a4438a 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -78,6 +78,9 @@ class RequestHttp {
     delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
         return this.service.delete(url, { params, ..._object });
     }
+    download<BlobPart>(url: string, params?: object, _object = {}): Promise<BlobPart> {
+        return this.service.post(url, params, _object);
+    }
 }
 
 export default new RequestHttp(config);
diff --git a/frontend/src/api/interface/file.ts b/frontend/src/api/interface/file.ts
index fc7c5545b..980116848 100644
--- a/frontend/src/api/interface/file.ts
+++ b/frontend/src/api/interface/file.ts
@@ -71,7 +71,7 @@ export namespace File {
         newName: string;
     }
 
-    export interface FileDownload {
+    export interface FileWget {
         path: string;
         name: string;
         url: string;
@@ -82,4 +82,10 @@ export namespace File {
         newPath: string;
         type: string;
     }
+
+    export interface FileDownload {
+        paths: string[];
+        name: string;
+        url: string;
+    }
 }
diff --git a/frontend/src/api/modules/files.ts b/frontend/src/api/modules/files.ts
index 1cffa8e8f..c57c2a6d6 100644
--- a/frontend/src/api/modules/files.ts
+++ b/frontend/src/api/modules/files.ts
@@ -45,10 +45,14 @@ export const RenameRile = (params: File.FileRename) => {
     return http.post<File.File>('files/rename', params);
 };
 
-export const DownloadFile = (params: File.FileDownload) => {
-    return http.post<File.File>('files/download', params);
+export const WgetFile = (params: File.FileWget) => {
+    return http.post<File.File>('files/wget', params);
 };
 
 export const MoveFile = (params: File.FileMove) => {
     return http.post<File.File>('files/move', params);
 };
+
+export const DownloadFile = (params: File.FileDownload) => {
+    return http.download<BlobPart>('files/download', params, { responseType: 'blob' });
+};
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
index f7fe5ba11..50aa07aa5 100644
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@@ -48,3 +48,14 @@ export function dateFromat(row: number, col: number, dataStr: any) {
     second = second < 10 ? `0${String(second)}` : second;
     return `${String(y)}-${String(m)}-${String(d)}   ${String(h)}:${String(minute)}:${String(second)}`;
 }
+
+export function getRandomStr(e: number): string {
+    const t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
+    const a = t.length;
+    let n = '';
+
+    for (let i = 0; i < e; i++) {
+        n += t.charAt(Math.floor(Math.random() * a));
+    }
+    return n;
+}
diff --git a/frontend/src/views/file-management/download/index.vue b/frontend/src/views/file-management/download/index.vue
index 70bbd5f97..4b53f38dc 100644
--- a/frontend/src/views/file-management/download/index.vue
+++ b/frontend/src/views/file-management/download/index.vue
@@ -1,71 +1,69 @@
 <template>
-    <el-dialog v-model="open" :before-close="handleClose" :title="$t('file.download')" width="30%" @open="onOpen">
-        <el-form
-            ref="fileForm"
-            label-position="left"
-            :model="addForm"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('file.downloadUrl')" prop="url">
-                <el-input v-model="addForm.url" />
-            </el-form-item>
-            <el-form-item :label="$t('file.path')" prop="path">
-                <el-input v-model="addForm.path">
-                    <template #append> <FileList :path="path" @choose="getPath"></FileList> </template
-                ></el-input>
+    <el-dialog
+        v-model="open"
+        :title="$t('file.download')"
+        :before-close="handleClose"
+        width="30%"
+        @open="onOpen"
+        v-loading="loading"
+    >
+        <el-form ref="fileForm" label-position="left" :model="addForm" label-width="100px" :rules="rules">
+            <el-form-item :label="$t('file.compressType')" prop="type">
+                <el-select v-model="addForm.type">
+                    <el-option v-for="item in options" :key="item" :label="item" :value="item" />
+                </el-select>
             </el-form-item>
             <el-form-item :label="$t('file.name')" prop="name">
-                <el-input v-model="addForm.name"></el-input>
+                <el-input v-model="addForm.name">
+                    <template #append>{{ extension }}</template></el-input
+                >
             </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit(fileForm)" :disabled="loading">{{
-                    $t('commons.button.confirm')
-                }}</el-button>
+                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
     </el-dialog>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+import { FormInstance, FormRules } from 'element-plus';
+import { CompressExtention, CompressType } from '@/enums/files';
+import { computed, PropType, reactive, ref, toRefs } from 'vue';
 import { DownloadFile } from '@/api/modules/files';
+import { File } from '@/api/interface/file';
 import { Rules } from '@/global/form-rues';
-import i18n from '@/lang';
-import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { reactive, ref, toRefs } from 'vue';
 
 const props = defineProps({
     open: {
         type: Boolean,
         default: false,
     },
-    path: {
+    paths: {
+        type: Array as PropType<string[]>,
+        default: function () {
+            return [];
+        },
+    },
+    name: {
         type: String,
         default: '',
     },
 });
-const { open } = toRefs(props);
-const fileForm = ref<FormInstance>();
-const loading = ref(false);
 
 const rules = reactive<FormRules>({
     name: [Rules.requiredInput],
-    path: [Rules.requiredInput],
-    url: [Rules.requiredInput],
+    type: [Rules.requiredInput],
 });
 
-const addForm = reactive({
-    url: '',
-    path: '',
-    name: '',
-});
+const { open } = toRefs(props);
+const fileForm = ref<FormInstance>();
+const options = ref<string[]>([]);
+let loading = ref(false);
 
 const em = defineEmits(['close']);
-
 const handleClose = () => {
     if (fileForm.value) {
         fileForm.value.resetFields();
@@ -73,12 +71,27 @@ const handleClose = () => {
     em('close', open);
 };
 
-const getPath = (path: string) => {
-    addForm.path = path;
-};
+let addForm = ref({
+    paths: [] as string[],
+    type: '',
+    name: '',
+});
+
+const extension = computed(() => {
+    return CompressExtention[addForm.value.type];
+});
 
 const onOpen = () => {
-    addForm.path = props.path;
+    addForm.value = {
+        type: 'zip',
+        paths: props.paths,
+        name: props.name,
+    };
+    console.log(addForm);
+    options.value = [];
+    for (const t in CompressType) {
+        options.value.push(CompressType[t]);
+    }
 };
 
 const submit = async (formEl: FormInstance | undefined) => {
@@ -87,10 +100,19 @@ const submit = async (formEl: FormInstance | undefined) => {
         if (!valid) {
             return;
         }
+        let addItem = {};
+        Object.assign(addItem, addForm.value);
+        addItem['name'] = addForm.value.name + extension.value;
         loading.value = true;
-        DownloadFile(addForm)
-            .then(() => {
-                ElMessage.success(i18n.global.t('file.downloadStart'));
+        DownloadFile(addItem as File.FileDownload)
+            .then((res) => {
+                const downloadUrl = window.URL.createObjectURL(new Blob([res]));
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = downloadUrl;
+                a.download = addItem['name'];
+                const event = new MouseEvent('click');
+                a.dispatchEvent(event);
                 handleClose();
             })
             .finally(() => {
diff --git a/frontend/src/views/file-management/index.vue b/frontend/src/views/file-management/index.vue
index 777d26a01..7ab10eeca 100644
--- a/frontend/src/views/file-management/index.vue
+++ b/frontend/src/views/file-management/index.vue
@@ -59,13 +59,19 @@
                         </el-dropdown>
                         <el-button type="primary" plain @click="openUpload"> {{ $t('file.upload') }}</el-button>
                         <!-- <el-button type="primary" plain> {{ $t('file.search') }}</el-button> -->
-                        <el-button type="primary" plain @click="openDownload"> {{ $t('file.remoteFile') }}</el-button>
+                        <el-button type="primary" plain @click="openWget"> {{ $t('file.remoteFile') }}</el-button>
                         <el-button type="primary" plain @click="openMove('copy')" :disabled="selects.length === 0">
                             {{ $t('file.copy') }}</el-button
                         >
                         <el-button type="primary" plain @click="openMove('cut')" :disabled="selects.length === 0">
                             {{ $t('file.move') }}</el-button
                         >
+                        <el-button type="primary" plain @click="openCompress(selects)" :disabled="selects.length === 0">
+                            {{ $t('file.compress') }}</el-button
+                        >
+                        <el-button type="primary" plain @click="openDownload" :disabled="selects.length === 0">
+                            {{ $t('file.download') }}</el-button
+                        >
                         <!-- <el-button type="primary" plain> {{ $t('file.sync') }}</el-button>
                         <el-button type="primary" plain> {{ $t('file.terminal') }}</el-button>
                         <el-button type="primary" plain> {{ $t('file.shareList') }}</el-button> -->
@@ -138,20 +144,28 @@
                 @close="closeRename"
             ></FileRename>
             <Upload :open="uploadPage.open" :path="uploadPage.path" @close="closeUpload"></Upload>
-            <FileDown :open="downloadPage.open" :path="downloadPage.path" @close="closeDownload"></FileDown>
+            <Wget :open="wgetPage.open" :path="wgetPage.path" @close="closeWget"></Wget>
             <Move :open="movePage.open" :oldPaths="movePage.oldPaths" :type="movePage.type" @close="clodeMove"></Move>
+            <Download
+                :open="downloadPage.open"
+                :paths="downloadPage.paths"
+                :name="downloadPage.name"
+                @close="closeDownload"
+            ></Download>
         </el-row>
     </LayoutContent>
 </template>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from '@vue/runtime-core';
+import { GetFilesList, GetFilesTree, DeleteFile, GetFileContent, SaveFileContent } from '@/api/modules/files';
+import { dateFromat, getRandomStr } from '@/utils/util';
+import { File } from '@/api/interface/file';
+import { useDeleteData } from '@/hooks/use-delete-data';
+import { ElMessage } from 'element-plus';
 import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import i18n from '@/lang';
-import { GetFilesList, GetFilesTree, DeleteFile, GetFileContent, SaveFileContent } from '@/api/modules/files';
-import { dateFromat } from '@/utils/util';
-import { File } from '@/api/interface/file';
 import BreadCrumbs from '@/components/bread-crumbs/index.vue';
 import BreadCrumbItem from '@/components/bread-crumbs/bread-crumbs-item.vue';
 import CreateFile from './create/index.vue';
@@ -160,20 +174,19 @@ import Compress from './compress/index.vue';
 import Decompress from './decompress/index.vue';
 import Upload from './upload/index.vue';
 import FileRename from './rename/index.vue';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import CodeEditor from './code-editor/index.vue';
-import { ElMessage } from 'element-plus';
-import FileDown from './download/index.vue';
+import Wget from './wget/index.vue';
 import Move from './move/index.vue';
+import Download from './download/index.vue';
 
-let data = ref();
-let selects = ref<any>([]);
-let req = reactive({ path: '/', expand: true });
-let loading = ref(false);
-let treeLoading = ref(false);
-let paths = ref<string[]>([]);
-let fileTree = ref<File.FileTree[]>([]);
-let expandKeys = ref<string[]>([]);
+const data = ref();
+const selects = ref<any>([]);
+const req = reactive({ path: '/', expand: true });
+const loading = ref(false);
+const treeLoading = ref(false);
+const paths = ref<string[]>([]);
+const fileTree = ref<File.FileTree[]>([]);
+const expandKeys = ref<string[]>([]);
 
 const filePage = reactive({ open: false, createForm: { path: '/', isDir: false, mode: 0o755 } });
 const modePage = reactive({ open: false, modeForm: { path: '/', isDir: false, mode: 0o755 } });
@@ -183,8 +196,9 @@ const editorPage = reactive({ open: false, content: '', loading: false });
 const codeReq = reactive({ path: '', expand: false });
 const uploadPage = reactive({ open: false, path: '' });
 const renamePage = reactive({ open: false, path: '', oldName: '' });
-const downloadPage = reactive({ open: false, path: '' });
+const wgetPage = reactive({ open: false, path: '' });
 const movePage = reactive({ open: false, oldPaths: [''], type: '' });
+const downloadPage = reactive({ open: false, paths: [''], name: '' });
 
 const defaultProps = {
     children: 'children',
@@ -237,7 +251,11 @@ const jump = async (index: number) => {
     if (index != -1) {
         const jPaths = paths.value.slice(0, index + 1);
         for (let i in jPaths) {
-            path = path + '/' + jPaths[i];
+            if (path.endsWith('/')) {
+                path = path + jPaths[i];
+            } else {
+                path = path + '/' + jPaths[i];
+            }
         }
     }
     req.path = path;
@@ -311,10 +329,18 @@ const closeMode = () => {
     search(req);
 };
 
-const openCompress = (item: File.File) => {
+const openCompress = (items: File.File[]) => {
     compressPage.open = true;
-    compressPage.files = [item.path];
-    compressPage.name = item.name;
+    const paths = [];
+    for (const item of items) {
+        paths.push(item.path);
+    }
+    compressPage.files = paths;
+    if (paths.length === 1) {
+        compressPage.name = items[0].name;
+    } else {
+        compressPage.name = getRandomStr(6);
+    }
     compressPage.dst = req.path;
 };
 
@@ -359,13 +385,13 @@ const closeUpload = () => {
     search(req);
 };
 
-const openDownload = () => {
-    downloadPage.open = true;
-    downloadPage.path = req.path;
+const openWget = () => {
+    wgetPage.open = true;
+    wgetPage.path = req.path;
 };
 
-const closeDownload = () => {
-    downloadPage.open = false;
+const closeWget = () => {
+    wgetPage.open = false;
     search(req);
 };
 
@@ -382,12 +408,12 @@ const closeRename = () => {
 
 const openMove = (type: string) => {
     movePage.type = type;
-    movePage.open = true;
     const oldpaths = [];
     for (const s of selects.value) {
         oldpaths.push(s['path']);
     }
     movePage.oldPaths = oldpaths;
+    movePage.open = true;
 };
 
 const clodeMove = () => {
@@ -395,6 +421,21 @@ const clodeMove = () => {
     search(req);
 };
 
+const openDownload = () => {
+    const paths = [];
+    for (const s of selects.value) {
+        paths.push(s['path']);
+    }
+    downloadPage.paths = paths;
+    downloadPage.name = getRandomStr(6);
+    downloadPage.open = true;
+};
+
+const closeDownload = () => {
+    downloadPage.open = false;
+    search(req);
+};
+
 const saveContent = (content: string) => {
     editorPage.loading = true;
     SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
@@ -429,7 +470,9 @@ const buttons = [
     },
     {
         label: i18n.global.t('file.compress'),
-        click: openCompress,
+        click: (row: File.File) => {
+            openCompress([row]);
+        },
     },
     {
         label: i18n.global.t('file.deCompress'),
diff --git a/frontend/src/views/file-management/wget/index.vue b/frontend/src/views/file-management/wget/index.vue
new file mode 100644
index 000000000..c4158c8da
--- /dev/null
+++ b/frontend/src/views/file-management/wget/index.vue
@@ -0,0 +1,101 @@
+<template>
+    <el-dialog v-model="open" :before-close="handleClose" :title="$t('file.download')" width="30%" @open="onOpen">
+        <el-form
+            ref="fileForm"
+            label-position="left"
+            :model="addForm"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('file.downloadUrl')" prop="url">
+                <el-input v-model="addForm.url" />
+            </el-form-item>
+            <el-form-item :label="$t('file.path')" prop="path">
+                <el-input v-model="addForm.path">
+                    <template #append> <FileList :path="path" @choose="getPath"></FileList> </template
+                ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('file.name')" prop="name">
+                <el-input v-model="addForm.name"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit(fileForm)" :disabled="loading">{{
+                    $t('commons.button.confirm')
+                }}</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { WgetFile } from '@/api/modules/files';
+import { Rules } from '@/global/form-rues';
+import i18n from '@/lang';
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { reactive, ref, toRefs } from 'vue';
+
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: false,
+    },
+    path: {
+        type: String,
+        default: '',
+    },
+});
+const { open } = toRefs(props);
+const fileForm = ref<FormInstance>();
+const loading = ref(false);
+
+const rules = reactive<FormRules>({
+    name: [Rules.requiredInput],
+    path: [Rules.requiredInput],
+    url: [Rules.requiredInput],
+});
+
+const addForm = reactive({
+    url: '',
+    path: '',
+    name: '',
+});
+
+const em = defineEmits(['close']);
+
+const handleClose = () => {
+    if (fileForm.value) {
+        fileForm.value.resetFields();
+    }
+    em('close', open);
+};
+
+const getPath = (path: string) => {
+    addForm.path = path;
+};
+
+const onOpen = () => {
+    addForm.path = props.path;
+};
+
+const submit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid) => {
+        if (!valid) {
+            return;
+        }
+        loading.value = true;
+        WgetFile(addForm)
+            .then(() => {
+                ElMessage.success(i18n.global.t('file.downloadStart'));
+                handleClose();
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    });
+};
+</script>