feat: 回收站文件支持批量还原 (#5497)

Refs #5148

frontend/src/lang/modules/en.ts

@@ -1171,6 +1171,8 @@ const message = {
         recycleBin: 'Recycle bin',
         sourcePath: 'Original path',
         deleteTime: 'Delete time',
+        confirmReduce: 'Are you sure you want to restore the following files?',
+        reduceSuccess: 'Restore successful',
         reduce: 'Reduction',
         reduceHelper:
             'If a file or directory with the same name exists in the original path, it will be overwritten. Do you want to continue?',

frontend/src/lang/modules/tw.ts

@@ -1111,6 +1111,8 @@ const message = {
         recycleBin: '回收站',
         sourcePath: '原路徑',
         deleteTime: '刪除時間',
+        confirmReduce: '確定還原以下文件？',
+        reduceSuccess: '還原成功',
         reduce: '還原',
         reduceHelper: '如果原路徑存在同名檔案或目錄，將會被覆蓋，是否繼續？',
         clearRecycleBin: '清空回收站',

frontend/src/lang/modules/zh.ts

@@ -1114,6 +1114,8 @@ const message = {
         sourcePath: '原路径',
         deleteTime: '删除时间',
         reduce: '还原',
+        confirmReduce: '确定还原以下文件？',
+        reduceSuccess: '还原成功',
         reduceHelper: '如果原路径存在同名文件或目录，将会被覆盖，是否继续？',
         clearRecycleBin: '清空回收站',
         clearRecycleBinHelper: '是否清空回收站？',

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

@@ -16,6 +16,9 @@
             <el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
                 {{ $t('commons.button.delete') }}
             </el-button>
+            <el-button @click="patchReduce" :disabled="data == null || selects.length == 0">
+                {{ $t('file.reduce') }}
+            </el-button>
             <el-form-item :label="$t('file.fileRecycleBin')">
                 <el-switch v-model="status" active-value="enable" inactive-value="disable" @change="changeStatus" />
             </el-form-item>
@@ -53,6 +56,7 @@
             <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
         </ComplexTable>
         <Delete ref="deleteRef" @close="search" />
+        <Reduce ref="reduceRef" @close="search" />
     </el-drawer>
 </template>
 
@@ -62,6 +66,7 @@ import { reactive, ref } from 'vue';
 import { dateFormat, computeSize } from '@/utils/util';
 import i18n from '@/lang';
 import Delete from './delete/index.vue';
+import Reduce from './reduce/index.vue';
 import { updateSetting } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 
@@ -85,6 +90,7 @@ const paginationConfig = reactive({
 });
 
 const deleteRef = ref();
+const reduceRef = ref();
 
 const handleClose = () => {
     open.value = false;
@@ -138,6 +144,11 @@ const patchDelete = () => {
     deleteRef.value.acceptParams(files.value);
 };
 
+const patchReduce = () => {
+    files.value = selects.value;
+    reduceRef.value.acceptParams(files.value);
+};
+
 const rdFile = async (row: any) => {
     ElMessageBox.confirm(i18n.global.t('file.reduceHelper'), i18n.global.t('file.reduce'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),

frontend/src/views/host/file-management/recycle-bin/reduce/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-dialog v-model="open" :title="$t('file.reduce')" width="30%" :close-on-click-modal="false">
+        <el-row>
+            <el-col :span="20" :offset="2">
+                <el-alert :title="$t('file.confirmReduce')" show-icon type="error" :closable="false"></el-alert>
+                <div class="flx-align-center mb-1 mt-1" v-for="(row, index) in files" :key="index">
+                    <div>
+                        <svg-icon v-if="row.isDir" className="table-icon mr-1 " iconName="p-file-folder"></svg-icon>
+                        <svg-icon v-else className="table-icon mr-1" :iconName="getIconName(row.extension)"></svg-icon>
+                    </div>
+                    <span class="sle">{{ row.name }}</span>
+                </div>
+            </el-col>
+        </el-row>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="open = false" :disabled="loading">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="onConfirm" v-loading="loading">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { getIcon } from '@/utils/util';
+import { reduceFile } from '@/api/modules/files';
+import { MsgSuccess } from '@/utils/message';
+import i18n from '@/lang';
+import { File } from '@/api/interface/file';
+
+const open = ref(false);
+const em = defineEmits(['close']);
+
+const files = ref();
+const loading = ref(false);
+const forceDelete = ref(false);
+
+const acceptParams = (props: File.RecycleBin[]) => {
+    files.value = props;
+    open.value = true;
+    forceDelete.value = false;
+};
+
+const onConfirm = () => {
+    const pros = [];
+    for (const s of files.value) {
+        pros.push(reduceFile({ from: s.from, rName: s.rName, name: s.name }));
+    }
+    loading.value = true;
+    Promise.all(pros)
+        .then(() => {
+            MsgSuccess(i18n.global.t('file.reduceSuccess'));
+            open.value = false;
+            em('close');
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const getIconName = (extension: string) => {
+    return getIcon(extension);
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>