style: 修改文件列表部分样式 (#2741)

frontend/src/lang/modules/en.ts

@@ -966,20 +966,21 @@ const message = {
         unsupportType: 'Unsupported file type',
         deleteHelper:
             'Are you sure you want to delete the following files? By default, it will enter the recycle bin after deletion',
-        fileHeper: 'Note: 1. Sorting is not supported after searching 2. Folders are not supported by size sorting',
+        fileHeper: 'Note: 1. Search results do not support sorting. 2. Folders cannot be sorted by size.',
         forceDeleteHelper: 'Permanently delete the file (without entering the recycle bin, delete it directly)',
         recycleBin: 'Recycle bin',
         sourcePath: 'Original path',
         deleteTime: 'Delete time',
         reduce: 'Reduction',
         reduceHelper:
-            'Restore the file to its original path. If a file or directory with the same name exists at the original address of the file, it will be overwritten. Do you want to continue?',
+            'If a file or directory with the same name exists in the original path, it will be overwritten. Do you want to continue?',
         clearRecycleBin: 'Clear the recycle bin',
         clearRecycleBinHelper: 'Do you want to clear the recycle bin?',
         favorite: 'favorites',
         removeFavorite: 'Remove from favorites?',
         addFavorite: 'Add to favorites',
         clearList: 'Clear list',
+        deleteRecycleHelper: 'Are you sure you want to permanently delete the following files?',
     },
     ssh: {
         autoStart: 'Auto Start',

frontend/src/lang/modules/tw.ts

@@ -927,19 +927,20 @@ const message = {
         currentSelect: '當前選中: ',
         unsupportType: '不支持的文件類型',
         deleteHelper: '確定刪除所選檔案？ 預設刪除之後將進入回收站？',
-        fileHeper: '注意：1.搜尋之後不支援排序 2.依大小排序不支援資料夾',
+        fileHeper: '注意：1. 搜尋結果不支援排序功能 2. 資料夾無法依大小排序。',
         forceDeleteHelper: '永久刪除檔案（不進入回收站，直接刪除）',
         recycleBin: '回收站',
         sourcePath: '原路徑',
         deleteTime: '刪除時間',
         reduce: '還原',
-        reduceHelper: '恢復檔案到原路徑，如果檔案原始位址，存在同名檔案或目錄，將會覆蓋，是否繼續？ ',
+        reduceHelper: '如果原路徑存在同名檔案或目錄，將會被覆蓋，是否繼續？',
         clearRecycleBin: '清空回收站',
         clearRecycleBinHelper: '是否清空回收站？',
         favorite: '收藏夾',
         removeFavorite: '是否從收藏夾移出？',
         addFavorite: '加入收藏夾',
         clearList: '清空列表',
+        deleteRecycleHelper: '確定永久刪除以下文件？',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -928,19 +928,20 @@ const message = {
         currentSelect: '当前选中: ',
         unsupportType: '不支持的文件类型',
         deleteHelper: '确定删除所选文件？ 默认删除之后将进入回收站',
-        fileHeper: '注意：1.搜索之后不支持排序 2.按大小排序不支持文件夹',
+        fileHeper: '注意：1. 搜索结果不支持排序功能 2. 文件夹无法按大小排序。',
         forceDeleteHelper: '永久删除文件（不进入回收站，直接删除）',
         recycleBin: '回收站',
         sourcePath: '原路径',
         deleteTime: '删除时间',
         reduce: '还原',
-        reduceHelper: '恢复文件到原路径，如果文件原地址，存在同名文件或目录，将会覆盖，是否继续？',
+        reduceHelper: '如果原路径存在同名文件或目录，将会被覆盖，是否继续？',
         clearRecycleBin: '清空回收站',
         clearRecycleBinHelper: '是否清空回收站？',
         favorite: '收藏夹',
         removeFavorite: '是否从收藏夹移出？',
         addFavorite: '加入收藏夹子',
         clearList: '清空列表',
+        deleteRecycleHelper: '确定永久删除以下文件？',
     },
     ssh: {
         autoStart: '开机自启',

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

@@ -195,7 +195,8 @@
                                             v-if="row.favoriteID > 0"
                                             link
                                             type="warning"
-                                            :icon="Star"
+                                            size="large"
+                                            :icon="StarFilled"
                                             @click="removeFavorite(row.favoriteID)"
                                         ></el-button>
                                         <div v-else>
@@ -293,7 +294,7 @@ import {
     SearchFavorite,
 } from '@/api/modules/files';
 import { computeSize, dateFormat, downloadFile, getIcon, getRandomStr } from '@/utils/util';
-import { Delete, Star } from '@element-plus/icons-vue';
+import { Delete, StarFilled, Star } from '@element-plus/icons-vue';
 import { File } from '@/api/interface/file';
 import { Mimetypes, Languages } from '@/global/mimetype';
 import { useRouter } from 'vue-router';

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

@@ -0,0 +1,89 @@
+<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.deleteRecycleHelper')" show-icon type="error" :closable="false"></el-alert>
+                <div class="resource">
+                    <table aria-describedby="deleteTable">
+                        <th></th>
+                        <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 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(DeleteFile({ path: s.from + '/' + s.rName, isDir: s.isDir, forceDelete: true }));
+    }
+    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/recycle-bin/index.vue

@@ -6,6 +6,9 @@
         <el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
             {{ $t('file.clearRecycleBin') }}
         </el-button>
+        <el-button @click="patchDelete" :disabled="data == null || data.length == 0">
+            {{ $t('commons.button.delete') }}
+        </el-button>
         <ComplexTable
             :pagination-config="paginationConfig"
             v-model:selects="selects"
@@ -35,15 +38,16 @@
             ></el-table-column>
             <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
         </ComplexTable>
+        <Delete ref="deleteRef" @close="search" />
     </el-drawer>
 </template>
 
 <script lang="ts" setup>
-import { DeleteFile, clearRecycle, getRecycleList, reduceFile } from '@/api/modules/files';
+import { clearRecycle, getRecycleList, reduceFile } from '@/api/modules/files';
 import { reactive, ref } from 'vue';
 import { dateFormat, computeSize } from '@/utils/util';
 import i18n from '@/lang';
-import { MsgSuccess } from '@/utils/message';
+import Delete from './delete/index.vue';
 
 const open = ref(false);
 const req = reactive({
@@ -63,6 +67,8 @@ const paginationConfig = reactive({
     total: 0,
 });
 
+const deleteRef = ref();
+
 const handleClose = () => {
     open.value = false;
     em('close', false);
@@ -86,30 +92,14 @@ const search = async () => {
 };
 
 const singleDel = (row: any) => {
-    ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.button.delete'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-    }).then(async () => {
-        files.value = [];
-        files.value.push(row);
-        deleteFile();
-    });
+    files.value = [];
+    files.value.push(row);
+    deleteRef.value.acceptParams(files.value);
 };
 
-const deleteFile = async () => {
-    const pros = [];
-    for (const s of files.value) {
-        pros.push(DeleteFile({ path: s.from + '/' + s.rName, isDir: s.isDir, forceDelete: true }));
-    }
-    loading.value = true;
-    Promise.all(pros)
-        .then(() => {
-            MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
-            search();
-        })
-        .finally(() => {
-            loading.value = false;
-        });
+const patchDelete = () => {
+    files.value = selects.value;
+    deleteRef.value.acceptParams(files.value);
 };
 
 const rdFile = async (row: any) => {