feat: Copy and move files with the same name file processing (#7871)

Author: lan-yonghui

frontend/src/lang/modules/en.ts

@@ -1374,6 +1374,7 @@ const message = {
         existFileTitle: 'Same name file prompt',
         existFileHelper: 'The uploaded file contains a file with the same name, do you want to overwrite it?',
         existFileSize: 'File size (new -> old)',
+        existFileDirHelper: 'The selected file/folder has a duplicate name. Please proceed with caution!',
     },
     ssh: {
         setting: 'Setting',

frontend/src/lang/modules/ja.ts

@@ -1352,6 +1352,7 @@ const message = {
         existFileTitle: '同名ファイルの警告',
         existFileHelper: 'アップロードしたファイルに同じ名前のファイルが含まれています。上書きしますか？',
         existFileSize: 'ファイルサイズ（新しい -> 古い）',
+        existFileDirHelper: '選択したファイル/フォルダーには同じ名前のものが既に存在します。慎重に操作してください！',
     },
     ssh: {
         setting: '設定',

frontend/src/lang/modules/ko.ts

@@ -1338,6 +1338,7 @@ const message = {
         existFileTitle: '동일한 이름의 파일 경고',
         existFileHelper: '업로드한 파일에 동일한 이름의 파일이 포함되어 있습니다. 덮어쓰시겠습니까?',
         existFileSize: '파일 크기 (새로운 -> 오래된)',
+        existFileDirHelper: '선택한 파일/폴더에 동일한 이름이 이미 존재합니다. 신중하게 작업하세요!',
     },
     ssh: {
         setting: '설정',

frontend/src/lang/modules/ms.ts

@@ -1394,6 +1394,7 @@ const message = {
         existFileTitle: 'Amaran fail dengan nama yang sama',
         existFileHelper: 'Fail yang dimuat naik mengandungi fail dengan nama yang sama. Adakah anda mahu menimpanya?',
         existFileSize: 'Saiz fail (baru -> lama)',
+        existFileDirHelper: 'Fail/folder yang dipilih mempunyai nama yang sama. Sila berhati-hati!',
     },
     ssh: {
         setting: 'tetapan',

frontend/src/lang/modules/pt-br.ts

@@ -1381,6 +1381,7 @@ const message = {
         existFileTitle: 'Aviso de arquivo com o mesmo nome',
         existFileHelper: 'O arquivo enviado contém um arquivo com o mesmo nome. Deseja substituí-lo?',
         existFileSize: 'Tamanho do arquivo (novo -> antigo)',
+        existFileDirHelper: 'O arquivo/pasta selecionado tem um nome duplicado. Por favor, prossiga com cautela!',
     },
     ssh: {
         setting: 'configuração',

frontend/src/lang/modules/ru.ts

@@ -1384,6 +1384,7 @@ const message = {
         existFileTitle: 'Предупреждение о файле с тем же именем',
         existFileHelper: 'Загруженный файл содержит файл с таким же именем. Заменить его?',
         existFileSize: 'Размер файла (новый -> старый)',
+        existFileDirHelper: 'Выбранный файл/папка имеет дублирующееся имя. Пожалуйста, действуйте осторожно!',
     },
     ssh: {
         setting: 'настройка',

frontend/src/lang/modules/tw.ts

@@ -1309,6 +1309,7 @@ const message = {
         existFileTitle: '同名檔案提示',
         existFileHelper: '上傳的檔案存在同名檔案，是否覆蓋？',
         existFileSize: '文件大小（新->舊）',
+        existFileDirHelper: '選擇的檔案/資料夾存在同名，請謹慎操作！',
     },
     ssh: {
         setting: '設定',

frontend/src/lang/modules/zh.ts

@@ -1311,6 +1311,7 @@ const message = {
         existFileTitle: '同名文件提示',
         existFileHelper: '上传的文件存在同名文件，是否覆盖？',
         existFileSize: '文件大小 (新 -> 旧)',
+        existFileDirHelper: '选择的文件/文件夹存在同名，请谨慎操作！',
     },
     ssh: {
         setting: '配置',

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

@@ -549,7 +549,7 @@ const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
 const fileUpload = reactive({ path: '' });
 const fileRename = reactive({ path: '', oldName: '' });
 const fileWget = reactive({ path: '' });
-const fileMove = reactive({ oldPaths: [''], type: '', path: '', name: '', count: 0 });
+const fileMove = reactive({ oldPaths: [''], allNames: [''], type: '', path: '', name: '', count: 0, isDir: false });
 const processPage = reactive({ open: false });
 
 const createRef = ref();
@@ -961,14 +961,23 @@ const openRename = (item: File.File) => {
 const openMove = (type: string) => {
     fileMove.type = type;
     fileMove.name = '';
-    const oldpaths = [];
+    fileMove.allNames = [];
+    fileMove.isDir = false;
+    const oldPaths = [];
     for (const s of selects.value) {
-        oldpaths.push(s['path']);
+        oldPaths.push(s['path']);
     }
     fileMove.count = selects.value.length;
-    fileMove.oldPaths = oldpaths;
+    fileMove.oldPaths = oldPaths;
     if (selects.value.length == 1) {
         fileMove.name = selects.value[0].name;
+        fileMove.isDir = selects.value[0].isDir;
+    } else {
+        const allNames = [];
+        for (const s of selects.value) {
+            allNames.push(s['name']);
+        }
+        fileMove.allNames = allNames;
     }
     moveOpen.value = true;
 };
@@ -979,6 +988,7 @@ const closeMove = () => {
     fileMove.oldPaths = [];
     fileMove.name = '';
     fileMove.count = 0;
+    fileMove.isDir = false;
     moveOpen.value = false;
 };
 

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

@@ -4,7 +4,7 @@
         :destroy-on-close="true"
         :close-on-click-modal="false"
         :close-on-press-escape="false"
-        size="40%"
+        size="675"
     >
         <template #header>
             <DrawerHeader :header="title" :back="handleClose" />
@@ -33,6 +33,23 @@
                             <el-radio :value="false" size="large">{{ $t('file.rename') }}</el-radio>
                         </el-radio-group>
                     </div>
+                    <div v-if="existFiles.length > 0 && !changeName" class="text-center">
+                        <el-alert :show-icon="true" type="warning" :closable="false">
+                            <div class="whitespace-break-spaces">
+                                <span>{{ $t('file.existFileDirHelper') }}</span>
+                            </div>
+                        </el-alert>
+                        <el-transfer
+                            v-model="skipFiles"
+                            class="text-left inline-block mt-4"
+                            :titles="[$t('commons.button.cover'), $t('commons.button.skip')]"
+                            :format="{
+                                noChecked: '${total}',
+                                hasChecked: '${checked}/${total}',
+                            }"
+                            :data="transferData"
+                        />
+                    </div>
                 </el-form>
             </el-col>
         </el-row>
@@ -48,21 +65,23 @@
 </template>
 
 <script lang="ts" setup>
-import { CheckFile, MoveFile } from '@/api/modules/files';
+import { BatchCheckFiles, CheckFile, MoveFile } from '@/api/modules/files';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { FormInstance, FormRules } from 'element-plus';
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, ComputedRef } from 'vue';
 import FileList from '@/components/file-list/index.vue';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { getDateStr } from '@/utils/util';
 
 interface MoveProps {
     oldPaths: Array<string>;
+    allNames: Array<string>;
     type: string;
     path: string;
     name: string;
+    isDir: boolean;
 }
 
 const fileForm = ref<FormInstance>();
@@ -71,6 +90,9 @@ const open = ref(false);
 const type = ref('cut');
 const changeName = ref(false);
 const oldName = ref('');
+const existFiles = ref([]);
+const skipFiles = ref([]);
+const transferData = ref([]);
 
 const title = computed(() => {
     if (type.value === 'cut') {
@@ -85,6 +107,8 @@ const addForm = reactive({
     newPath: '',
     type: '',
     name: '',
+    allNames: [] as string[],
+    isDir: false,
     cover: false,
 });
 
@@ -103,6 +127,18 @@ const handleClose = (search: boolean) => {
     em('close', search);
 };
 
+const getFileName = (filePath: string) => {
+    if (filePath.endsWith('/')) {
+        filePath = filePath.slice(0, -1);
+    }
+
+    return filePath.split('/').pop();
+};
+
+const coverFiles: ComputedRef<string[]> = computed(() => {
+    return addForm.oldPaths.filter((item) => !skipFiles.value.includes(getFileName(item))).map((item) => item);
+});
+
 const getPath = (path: string) => {
     addForm.newPath = path;
 };
@@ -111,7 +147,7 @@ const changeType = () => {
     if (addForm.cover) {
         addForm.name = oldName.value;
     } else {
-        addForm.name = oldName.value + '-' + getDateStr();
+        addForm.name = renameFileWithSuffix(oldName.value, addForm.isDir);
     }
 };
 
@@ -137,24 +173,80 @@ const submit = async (formEl: FormInstance | undefined) => {
             return;
         }
         loading.value = true;
+        addForm.oldPaths = coverFiles.value;
         mvFile();
     });
 };
 
+const getCompleteExtension = (filename: string): string => {
+    const compoundExtensions = [
+        '.tar.gz',
+        '.tar.bz2',
+        '.tar.xz',
+        '.tar.lzma',
+        '.tar.Z',
+        '.tar.zst',
+        '.tar.lzo',
+        '.tar.sz',
+        '.tgz',
+        '.tbz2',
+        '.txz',
+        '.tzst',
+    ];
+    const foundExtension = compoundExtensions.find((ext) => filename.endsWith(ext));
+    if (foundExtension) {
+        return foundExtension;
+    }
+    const match = filename.match(/\.[a-zA-Z0-9]+$/);
+    return match ? match[0] : '';
+};
+
+const renameFileWithSuffix = (fileName: string, isDir: boolean): string => {
+    const insertStr = '-' + getDateStr();
+    const completeExt = isDir ? '' : getCompleteExtension(fileName);
+    if (!completeExt) {
+        return `${fileName}${insertStr}`;
+    } else {
+        const baseName = fileName.slice(0, fileName.length - completeExt.length);
+        return `${baseName}${insertStr}${completeExt}`;
+    }
+};
+
+const handleFilePaths = async (fileNames: string[], newPath: string) => {
+    const uniqueFiles = [...new Set(fileNames)];
+    const fileNamesWithPath = uniqueFiles.map((file) => newPath + '/' + file);
+    const existData = await BatchCheckFiles(fileNamesWithPath);
+    existFiles.value = existData.data;
+    transferData.value = existData.data.map((file) => ({
+        key: file.name,
+        label: file.name,
+    }));
+};
+
 const acceptParams = async (props: MoveProps) => {
     changeName.value = false;
     addForm.oldPaths = props.oldPaths;
     addForm.type = props.type;
     addForm.newPath = props.path;
+    addForm.isDir = props.isDir;
     addForm.name = '';
+    addForm.allNames = props.allNames;
     type.value = props.type;
     if (props.name && props.name != '') {
         oldName.value = props.name;
         const res = await CheckFile(props.path + '/' + props.name);
         if (res.data) {
             changeName.value = true;
             addForm.cover = false;
-            addForm.name = props.name + '-' + getDateStr();
+            addForm.name = renameFileWithSuffix(props.name, addForm.isDir);
+            open.value = true;
+        } else {
+            mvFile();
+        }
+    } else if (props.allNames && props.allNames.length > 0) {
+        await handleFilePaths(addForm.allNames, addForm.newPath);
+        if (existFiles.value.length > 0) {
+            changeName.value = false;
             open.value = true;
         } else {
             mvFile();
@@ -166,3 +258,41 @@ const acceptParams = async (props: MoveProps) => {
 
 defineExpose({ acceptParams });
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-transfer) {
+    --el-transfer-panel-width: 250px;
+    .el-button {
+        padding: 4px 7px;
+    }
+}
+
+:deep(.el-transfer__buttons) {
+    padding: 5px 15px;
+    @media (max-width: 600px) {
+        width: 250px;
+        text-align: center;
+        padding: 10px 0;
+        .el-button [class*='el-icon'] svg {
+            transform: rotate(90deg);
+        }
+    }
+
+    @media (min-width: 601px) {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        width: 40px;
+        height: 40px;
+        justify-content: center;
+        .el-button + .el-button {
+            margin-left: 0;
+        }
+    }
+}
+
+:deep(.el-transfer-panel .el-transfer-panel__footer) {
+    height: 65px;
+}
+</style>