style: 增加分页

backend/utils/files/fileinfo.go

@@ -31,6 +31,7 @@ type FileInfo struct {
 	ModTime    time.Time   `json:"modTime"`
 	FileMode   os.FileMode `json:"-"`
 	Items      []*FileInfo `json:"items"`
+	ItemTotal  int         `json:"itemTotal"`
 }
 
 type FileOption struct {
@@ -39,6 +40,8 @@ type FileOption struct {
 	Expand     bool   `json:"expand"`
 	Dir        bool   `json:"dir"`
 	ShowHidden bool   `json:"showHidden"`
+	Page       int    `json:"page"`
+	PageSize   int    `json:"pageSize"`
 }
 
 func NewFileInfo(op FileOption) (*FileInfo, error) {
@@ -70,7 +73,7 @@ func NewFileInfo(op FileOption) (*FileInfo, error) {
 	}
 	if op.Expand {
 		if file.IsDir {
-			if err := file.listChildren(op.Dir, op.ShowHidden); err != nil {
+			if err := file.listChildren(op.Dir, op.ShowHidden, op.Page, op.PageSize); err != nil {
 				return nil, err
 			}
 			return file, nil
@@ -83,12 +86,14 @@ func NewFileInfo(op FileOption) (*FileInfo, error) {
 	return file, nil
 }
 
-func (f *FileInfo) listChildren(dir, showHidden bool) error {
+func (f *FileInfo) listChildren(dir, showHidden bool, page, pageSize int) error {
 	afs := &afero.Afero{Fs: f.Fs}
 	files, err := afs.ReadDir(f.Path)
 	if err != nil {
 		return err
 	}
+	f.ItemTotal = len(files)
+
 	var items []*FileInfo
 	for _, df := range files {
 		if dir && !df.IsDir() {
@@ -138,7 +143,17 @@ func (f *FileInfo) listChildren(dir, showHidden bool) error {
 		}
 		items = append(items, file)
 	}
-	f.Items = items
+
+	start := (page - 1) * pageSize
+	end := pageSize + start
+	var result []*FileInfo
+	if start < 0 || start > f.ItemTotal || end < 0 || start > end || end > f.ItemTotal {
+		result = items
+	} else {
+		result = items[start:end]
+	}
+
+	f.Items = result
 	return nil
 }
 

frontend/src/api/interface/file.ts

@@ -1,4 +1,4 @@
-import { CommonModel } from '.';
+import { CommonModel, ReqPage } from '.';
 export namespace File {
     export interface File extends CommonModel {
         path: string;
@@ -18,9 +18,10 @@ export namespace File {
         dirSize: number;
         items: File[];
         extension: string;
+        itemTotal: number;
     }
 
-    export interface ReqFile {
+    export interface ReqFile extends ReqPage {
         path: string;
         search?: string;
         expand: boolean;

frontend/src/lang/modules/en.ts

@@ -246,5 +246,6 @@ export default {
         canNotDeCompress: 'Can not DeCompress this File',
         uploadSuccess: 'Upload Success!',
         downloadProcess: 'Download Process',
+        downloading: 'Downloading...',
     },
 };

frontend/src/lang/modules/zh.ts

@@ -246,5 +246,6 @@ export default {
         canNotDeCompress: '无法解压此文件',
         uploadSuccess: '上传成功!',
         downloadProcess: '下载进度',
+        downloading: '正在下载...',
     },
 };

frontend/src/views/host/file-management/index.vue

@@ -43,6 +43,7 @@
                     v-model:selects="selects"
                     :data="data"
                     v-loading="loading"
+                    @search="search(req)"
                 >
                     <template #toolbar>
                         <el-button-group>
@@ -211,7 +212,7 @@ import Process from './process/index.vue';
 
 const data = ref();
 let selects = ref<any>([]);
-let req = reactive({ path: '/', expand: true, showHidden: false });
+let req = reactive({ path: '/', expand: true, showHidden: false, page: 1, pageSize: 100 });
 let loading = ref(false);
 let treeLoading = ref(false);
 const paths = ref<string[]>([]);
@@ -223,7 +224,7 @@ const modePage = reactive({ open: false, modeForm: { path: '/', isDir: false, mo
 const compressPage = reactive({ open: false, files: [''], name: '', dst: '' });
 const deCompressPage = reactive({ open: false, path: '', name: '', dst: '', mimeType: '' });
 const editorPage = reactive({ open: false, content: '', loading: false });
-const codeReq = reactive({ path: '', expand: false });
+const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
 const uploadPage = reactive({ open: false, path: '' });
 const renamePage = reactive({ open: false, path: '', oldName: '' });
 const wgetPage = reactive({ open: false, path: '' });
@@ -239,14 +240,17 @@ const defaultProps = {
 
 const paginationConfig = reactive({
     page: 1,
-    pageSize: 5,
+    pageSize: 100,
     total: 0,
 });
 
 const search = async (req: File.ReqFile) => {
     loading.value = true;
+    req.page = paginationConfig.page;
+    req.pageSize = paginationConfig.pageSize;
     await GetFilesList(req)
         .then((res) => {
+            paginationConfig.total = res.data.itemTotal;
             data.value = res.data.items;
             req.path = res.data.path;
             const pathArray = req.path.split('/');

frontend/src/views/host/file-management/process/index.vue

@@ -7,15 +7,16 @@
         :before-close="handleClose"
     >
         <div v-for="(value, index) in res" :key="index">
-            <span>{{ value['name'] }}</span>
+            <span>{{ $t('file.downloading') }} {{ value['name'] }}</span>
             <el-progress :text-inside="true" :stroke-width="15" :percentage="value['percent']"></el-progress>
-            <span>{{ value['written'] }}/{{ value['total'] }}</span>
+            <span>{{ getFileSize(value['written']) }}/{{ getFileSize(value['total']) }}</span>
         </div>
     </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { FileKeys } from '@/api/modules/files';
+import { computeSize } from '@/utils/util';
 import { onBeforeUnmount, ref, toRefs } from 'vue';
 
 const props = defineProps({
@@ -84,6 +85,10 @@ const sendMsg = () => {
     }, 1000);
 };
 
+const getFileSize = (size: number) => {
+    return computeSize(size);
+};
+
 onBeforeUnmount(() => {
     closeSocket();
 });

frontend/src/views/host/file-management/wget/index.vue

@@ -9,7 +9,7 @@
             v-loading="loading"
         >
             <el-form-item :label="$t('file.downloadUrl')" prop="url">
-                <el-input v-model="addForm.url" />
+                <el-input v-model="addForm.url" @input="getFileName" />
             </el-form-item>
             <el-form-item :label="$t('file.path')" prop="path">
                 <el-input v-model="addForm.path">
@@ -100,6 +100,11 @@ const submit = async (formEl: FormInstance | undefined) => {
     });
 };
 
+const getFileName = (url: string) => {
+    const paths = url.split('/');
+    addForm.name = paths[paths.length - 1];
+};
+
 const onOpen = () => {
     addForm.path = props.path;
 };