feat: 修改删除文件的提示 (#2111)

Refs https://github.com/1Panel-dev/1Panel/issues/2086

frontend/src/lang/modules/en.ts

@@ -911,6 +911,7 @@ const message = {
         fileUploadStart: 'Uploading [{0}]....',
         currentSelect: 'Current Select: ',
         unsupportType: 'Unsupported file type',
+        deleteHelper: 'The following resources will be deleted, this operation cannot be rolled back, continue? ',
     },
     ssh: {
         sshAlert:

frontend/src/lang/modules/tw.ts

@@ -878,6 +878,7 @@ const message = {
         fileUploadStart: '正在上傳【{0}】....',
         currentSelect: '當前選中: ',
         unsupportType: '不支持的文件類型',
+        deleteHelper: '以下資源將被刪除，此操作不可回滾，是否繼續？',
     },
     ssh: {
         sshAlert: '列表數據根據登錄時間排序，但請註意，切換時區或其他操作可能導致登錄日誌的時間出現偏差。',

frontend/src/lang/modules/zh.ts

@@ -878,6 +878,7 @@ const message = {
         fileUploadStart: '正在上传【{0}】....',
         currentSelect: '当前选中: ',
         unsupportType: '不支持的文件类型',
+        deleteHelper: '以下资源将被删除，此操作不可回滚，是否继续？',
     },
     ssh: {
         sshAlert: '列表数据根据登录时间排序，但请注意，切换时区或其他操作可能导致登录日志的时间出现偏差。',

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

@@ -0,0 +1,86 @@
+<template>
+    <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
+        <el-row>
+            <el-col :span="20" :offset="2">
+                <el-alert :title="$t('file.deleteHelper')" type="error" effect="dark" :closable="false"></el-alert>
+                <div class="resource">
+                    <table>
+                        <tr v-for="(row, index) in files" :key="index">
+                            <td>
+                                <svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
+                                <svg-icon
+                                    v-else
+                                    className="table-icon"
+                                    :iconName="getIconName(row.extension)"
+                                ></svg-icon>
+                                <span>{{ row.name }}</span>
+                            </td>
+                        </tr>
+                    </table>
+                </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 lang="ts" setup>
+import i18n from '@/lang';
+import { ref } from 'vue';
+import { File } from '@/api/interface/file';
+import { getIcon } from '@/utils/util';
+import { DeleteFile } from '@/api/modules/files';
+import { MsgSuccess } from '@/utils/message';
+
+const open = ref(false);
+const files = ref();
+const loading = ref(false);
+const em = defineEmits(['close']);
+
+const acceptParams = (props: File.File[]) => {
+    files.value = props;
+    open.value = true;
+};
+
+const onConfirm = () => {
+    const pros = [];
+    for (const s of files.value) {
+        pros.push(DeleteFile({ path: s['path'], isDir: s['isDir'] }));
+    }
+    loading.value = true;
+    Promise.all(pros)
+        .then(() => {
+            MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
+            open.value = false;
+            em('close');
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const getIconName = (extension: string) => {
+    return getIcon(extension);
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+
+<style scoped>
+.resource {
+    margin-top: 10px;
+    max-height: 400px;
+    overflow: auto;
+}
+</style>

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

@@ -176,16 +176,16 @@
             <Process :open="processPage.open" @close="closeProcess" />
             <Owner ref="chownRef" @close="search"></Owner>
             <Detail ref="detailRef" />
+            <Delete ref="deleteRef" @close="search" />
         </LayoutContent>
     </div>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onMounted, reactive, ref, computed } from '@vue/runtime-core';
-import { GetFilesList, DeleteFile, GetFileContent, ComputeDirSize } from '@/api/modules/files';
+import { GetFilesList, GetFileContent, ComputeDirSize } from '@/api/modules/files';
 import { computeSize, dateFormat, downloadFile, getIcon, getRandomStr } from '@/utils/util';
 import { File } from '@/api/interface/file';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import i18n from '@/lang';
 import CreateFile from './create/index.vue';
 import ChangeRole from './change-role/index.vue';
@@ -198,13 +198,14 @@ import Wget from './wget/index.vue';
 import Move from './move/index.vue';
 import Download from './download/index.vue';
 import Owner from './chown/index.vue';
+import Delete from './delete/index.vue';
 import { Mimetypes, Languages } from '@/global/mimetype';
 import Process from './process/index.vue';
 import Detail from './detail/index.vue';
 import { useRouter } from 'vue-router';
 import { Back, Refresh } from '@element-plus/icons-vue';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
-import { ElMessageBox } from 'element-plus';
+// import { ElMessageBox } from 'element-plus';
 import { useSearchable } from './hooks/searchable';
 import { ResultData } from '@/api/interface';
 import { GlobalStore } from '@/store';
@@ -261,6 +262,7 @@ const pathRef = ref();
 const breadCrumbRef = ref();
 const chownRef = ref();
 const moveOpen = ref(false);
+const deleteRef = ref();
 
 // editablePath
 const { searchableStatus, searchablePath, searchableInputRef, searchableInputBlur } = useSearchable(paths);
@@ -407,30 +409,11 @@ const handleCreate = (commnad: string) => {
 };
 
 const delFile = async (row: File.File | null) => {
-    await useDeleteData(DeleteFile, row as File.FileDelete, 'commons.msg.delete');
-    search();
+    deleteRef.value.acceptParams([row]);
 };
 
 const batchDelFiles = () => {
-    ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.msg.deleteTitle'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'info',
-    }).then(() => {
-        const pros = [];
-        for (const s of selects.value) {
-            pros.push(DeleteFile({ path: s['path'], isDir: s['isDir'] }));
-        }
-        loading.value = true;
-        Promise.all(pros)
-            .then(() => {
-                MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-                search();
-            })
-            .finally(() => {
-                loading.value = false;
-            });
-    });
+    deleteRef.value.acceptParams(selects.value);
 };
 
 const getFileSize = (size: number) => {