feat: 文件列表组件新增创建文件夹功能 (#5647)

2024-12-08 14:59:19 +08:00 · 2024-07-02 22:43:24 +08:00 · 2024-07-02 22:43:24 +08:00 · 9da5e67183
commit 9da5e67183
parent 2a1ec4db75
7 changed files with 111 additions and 20 deletions
--- a/backend/i18n/lang/en.yaml
+++ b/backend/i18n/lang/en.yaml
@ -74,7 +74,7 @@ ErrFileToLarge: "file is too large"
 ErrPathNotFound: "Path is not found"
 ErrMovePathFailed: "The target path cannot contain the original path!"
 ErrLinkPathNotFound: "Target path does not exist!"
-ErrFileIsExit: "File already exists!"
+ErrFileIsExit: "File or directory already exists!"
 ErrFileUpload: "Failed to upload file {{.name}}  {{.detail}}"
 ErrFileDownloadDir: "Download folder not supported"
 ErrCmdNotFound: "{{ .name}} command does not exist, please install this command on the host first"
@ -131,7 +131,7 @@ ErrLocalExist: "The local database already exists with that name, please modify
 #redis
 ErrTypeOfRedis: "The recovery file type does not match the current persistence mode. Modify the file type and try again"

-#container 
+#container
 ErrInUsed: "{{ .detail }} is in use and cannot be deleted"
 ErrObjectInUsed: "This object is in use and cannot be deleted"
 ErrPortRules: "The number of ports does not match, please re-enter!"
--- a/backend/i18n/lang/zh-Hant.yaml
+++ b/backend/i18n/lang/zh-Hant.yaml
@ -75,7 +75,7 @@ ErrFileToLarge: "文件超過10M,無法打開"
 ErrPathNotFound: "目錄不存在"
 ErrMovePathFailed: "目標路徑不能包含原路徑！"
 ErrLinkPathNotFound: "目標路徑不存在!"
-ErrFileIsExit: "文件已存在！"
+ErrFileIsExit: "文件或文件夾已存在！"
 ErrFileUpload: "{{ .name }} 上傳文件失敗 {{ .detail}}"
 ErrFileDownloadDir: "不支持下載文件夾"
 ErrCmdNotFound: "{{ .name}} 命令不存在，請先在宿主機安裝此命令"
--- a/backend/i18n/lang/zh.yaml
+++ b/backend/i18n/lang/zh.yaml
@ -74,7 +74,7 @@ ErrFileToLarge: "文件超过10M,无法打开"
 ErrPathNotFound: "目录不存在"
 ErrMovePathFailed: "目标路径不能包含原路径！"
 ErrLinkPathNotFound: "目标路径不存在!"
-ErrFileIsExit: "文件已存在！"
+ErrFileIsExit: "文件或文件夹已存在！"
 ErrFileUpload: "{{ .name }} 上传文件失败 {{ .detail}}"
 ErrFileDownloadDir: "不支持下载文件夹"
 ErrCmdNotFound: "{{ .name}} 命令不存在，请先在宿主机安装此命令"
@ -134,7 +134,7 @@ ErrLocalExist: "本地数据库已存在该名称，请修改后重试"
 #redis
 ErrTypeOfRedis: "恢复文件类型与当前持久化方式不符，请修改后重试"

-#container 
+#container
 ErrInUsed: "{{ .detail }} 正被使用，无法删除"
 ErrObjectInUsed: "该对象正被使用，无法删除"
 ErrPortRules: "端口数目不匹配，请重新输入！"
--- a/frontend/src/components/file-list/index.vue
+++ b/frontend/src/components/file-list/index.vue
@ -67,7 +67,19 @@
                    <template #default="{ row }">
                        <svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
                        <svg-icon v-else className="table-icon" iconName="p-file-normal"></svg-icon>
-                        <el-link :underline="false" @click="open(row)">{{ row.name }}</el-link>
+                        <el-link v-if="!row.isCreate" :underline="false" @click="open(row)">{{ row.name }}</el-link>
+                        <el-input
+                            v-else
+                            ref="rowRefs"
+                            v-model="newFlower"
+                            style="width: 240px"
+                            placeholder="new flower"
+                            @input="handleChange(newFlower, row)"
+                        >
+                            <template #append>
+                                <el-button :icon="Check" @click="createFlower(row)" />
+                            </template>
+                        </el-input>
                    </template>
                </el-table-column>
            </el-table>
@ -83,9 +95,16 @@
                    </el-tag>
                </el-tooltip>
            </div>
-            <div class="button">
-                <el-button @click="closePage">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="selectFile">{{ $t('commons.button.confirm') }}</el-button>
+            <div class="flex items-center justify-between">
+                <el-button link @click="onAddRow" type="primary">
+                    {{ $t('commons.button.create') }}
+                </el-button>
+                <div class="button">
+                    <el-button @click="closePage">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button type="primary" @click="selectFile" :disabled="disBtn">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </div>
            </div>
        </div>
    </el-popover>
@ -93,19 +112,24 @@

 <script lang="ts" setup>
 import { File } from '@/api/interface/file';
-import { GetFilesList } from '@/api/modules/files';
-import { Folder } from '@element-plus/icons-vue';
+import { CreateFile, GetFilesList } from '@/api/modules/files';
+import { Folder, Check, HomeFilled, Close } from '@element-plus/icons-vue';
 import BreadCrumbs from '@/components/bread-crumbs/index.vue';
 import BreadCrumbItem from '@/components/bread-crumbs/bread-crumbs-item.vue';
-import { onMounted, onUpdated, reactive, ref } from 'vue';
+import { onMounted, onUpdated, reactive, ref, nextTick } from 'vue';
+import i18n from '@/lang';
+import { MsgSuccess, MsgWarning } from '@/utils/message';

 const rowName = ref('');
-const data = ref();
+const data = ref([]);
 const loading = ref(false);
 const paths = ref<string[]>([]);
 const req = reactive({ path: '/', expand: true, page: 1, pageSize: 300, showHidden: true });
 const selectRow = ref();
+const rowRefs = ref();
 const popoverVisible = ref(false);
+const newFlower = ref();
+const disBtn = ref(false);

 const props = defineProps({
    path: {
@ -129,6 +153,7 @@ const props = defineProps({
 const em = defineEmits(['choose']);

 const checkFile = (row: any) => {
+    disBtn.value = row.isCreate;
    selectRow.value = row;
    rowName.value = selectRow.value.name;
 };
@ -170,21 +195,25 @@ const open = async (row: File.File) => {
        } else {
            req.path = req.path + '/' + name;
        }
-        search(req);
+        await search(req);
    }
+    selectRow.value = {};
    rowName.value = '';
 };

 const jump = async (index: number) => {
-    let path = '/';
+    let path = '';
    if (index != -1) {
-        const jPaths = paths.value.slice(0, index + 1);
-        for (let i in jPaths) {
-            path = path + '/' + jPaths[i];
+        if (index !== -1) {
+            const jPaths = paths.value.slice(0, index + 1);
+            path = '/' + jPaths.join('/');
        }
    }
+    path = path || '/';
    req.path = path;
-    search(req);
+    selectRow.value = {};
+    rowName.value = '';
+    await search(req);
    popoverVisible.value = true;
 };

@ -193,7 +222,7 @@ const search = async (req: File.ReqFile) => {
    loading.value = true;
    await GetFilesList(req)
        .then((res) => {
-            data.value = res.data.items;
+            data.value = res.data.items || [];
            req.path = res.data.path;
            const pathArray = req.path.split('/');
            paths.value = [];
@ -208,6 +237,62 @@ const search = async (req: File.ReqFile) => {
        });
 };

+let addForm = reactive({ path: '', name: '', isDir: true, mode: 0o755, isLink: false, isSymlink: true, linkPath: '' });
+
+const onAddRow = async () => {
+    const createRow = data.value?.find((row: { isCreate: any }) => row.isCreate);
+    if (createRow) {
+        MsgWarning(i18n.global.t('commons.msg.creatingInfo'));
+        return;
+    }
+    newFlower.value = i18n.global.t('file.noNameFolder');
+    rowName.value = newFlower.value;
+    selectRow.value.name = newFlower.value;
+    const basePath = req.path === '/' ? req.path : `${req.path}/`;
+    selectRow.value.path = `${basePath}${newFlower.value}`;
+    data.value?.unshift({
+        path: selectRow.value.path,
+        isCreate: true,
+        isDir: true,
+        name: newFlower.value,
+    });
+    disBtn.value = true;
+    await nextTick();
+    rowRefs.value.focus();
+};
+
+const handleChange = (value: string, row: any) => {
+    if (rowName.value === row.name) {
+        selectRow.value.name = value;
+        rowName.value = value;
+        row.name = value;
+        const basePath = req.path === '/' ? req.path : `${req.path}/`;
+        selectRow.value.path = `${basePath}${value}`;
+    }
+};
+
+const createFlower = async (row: any) => {
+    const basePath = req.path === '/' ? req.path : `${req.path}/`;
+    addForm.path = `${basePath}${newFlower.value}`;
+    if (addForm.path.indexOf('.1panel_clash') > -1) {
+        MsgWarning(i18n.global.t('file.clashDitNotSupport'));
+        return;
+    }
+    addForm.name = newFlower.value;
+    let addItem = {};
+    Object.assign(addItem, addForm);
+    loading.value = true;
+    CreateFile(addItem as File.FileCreate)
+        .then(() => {
+            row.isCreate = false;
+            disBtn.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.createSuccess'));
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
 onMounted(() => {
    if (props.path != '') {
        req.path = props.path;
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@ -146,6 +146,7 @@ const message = {
            refreshSuccess: 'Refresh successful',
            rootInfoErr: "It's already the root directory",
            resetSuccess: 'Reset successful',
+            creatingInfo: 'Creating, no need for this operation',
        },
        login: {
            username: 'UserName',
@ -1249,6 +1250,7 @@ const message = {
        saveContentAndClose: 'The file has been modified, do you want to save and close it?',
        saveAndOpenNewFile: 'The file has been modified, do you want to save and open the new file?',
        noEdit: 'The file has not been modified, no need to do this!',
+        noNameFolder: 'Untitled Folder',
    },
    ssh: {
        autoStart: 'Auto Start',
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@ -146,6 +146,7 @@ const message = {
            refreshSuccess: '重繪成功',
            rootInfoErr: '已經是根目錄了',
            resetSuccess: '重置成功',
+            creatingInfo: '正在創建，無需此操作',
        },
        login: {
            username: '用戶名',
@ -1186,6 +1187,7 @@ const message = {
        saveContentAndClose: '檔案已被修改，是否保存並關閉？',
        saveAndOpenNewFile: '檔案已被修改，是否保存並打開新檔案？',
        noEdit: '檔案未修改，無需此操作！',
+        noNameFolder: '未命名資料夾',
    },
    ssh: {
        autoStart: '開機自啟',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -146,6 +146,7 @@ const message = {
            refreshSuccess: '刷新成功',
            rootInfoErr: '已经是根目录了',
            resetSuccess: '重置成功',
+            creatingInfo: '正在创建，无需此操作',
        },
        login: {
            username: '用户名',
@ -1187,6 +1188,7 @@ const message = {
        saveContentAndClose: '文件已被修改，是否保存并关闭？',
        saveAndOpenNewFile: '文件已被修改，是否保存并打开新文件？',
        noEdit: '文件未修改,无需此操作！',
+        noNameFolder: '未命名文件夹',
    },
    ssh: {
        autoStart: '开机自启',