feat: 文件管理页面增加回退功能 (#4723)

Co-authored-by: zhoujunhong <1298308460@qq.com>

frontend/src/lang/modules/en.ts

@@ -1155,6 +1155,10 @@ const message = {
         clashDitNotSupport: 'File names are prohibited from containing .1panel_clash',
         clashDeleteAlert: 'The Recycle Bin folder cannot be deleted',
         clashOpenAlert: 'Please click the [Recycle Bin] button to open the recycle bin directory',
+        right: 'Forward',
+        back: 'Back',
+        top: 'Go Back',
+        refresh: 'Refresh',
     },
     ssh: {
         autoStart: 'Auto Start',

frontend/src/lang/modules/tw.ts

@@ -1099,6 +1099,10 @@ const message = {
         clashDitNotSupport: '檔名禁止包含 .1panel_clash',
         clashDleteAlert: '回收站資料夾不能刪除',
         clashOpenAlert: '回收站目錄請點選【回收站】按鈕開啟',
+        right: '前進',
+        back: '後退',
+        top: '返回上一層',
+        refresh: '重新整理',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1100,6 +1100,10 @@ const message = {
         clashDitNotSupport: '文件名禁止包含 .1panel_clash',
         clashDleteAlert: '回收站文件夹不能删除',
         clashOpenAlert: '回收站目录请点击【回收站】按钮打开',
+        right: '前进',
+        back: '后退',
+        top: '返回上一级',
+        refresh: '刷新',
     },
     ssh: {
         autoStart: '开机自启',

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

@@ -2,8 +2,18 @@
     <div>
         <div class="flex items-center">
             <div class="flex-shrink-0 flex items-center mr-4">
-                <el-button :icon="Back" @click="back" circle :disabled="paths.length == 0" />
-                <el-button :icon="Refresh" circle @click="search" />
+                <el-tooltip :content="$t('file.back')" placement="top">
+                    <el-button :icon="Back" @click="back" circle :disabled="paths.length == 0" />
+                </el-tooltip>
+                <el-tooltip :content="$t('file.right')" placement="top">
+                    <el-button :icon="Right" @click="right" circle :disabled="paths.length == 0" />
+                </el-tooltip>
+                <el-tooltip :content="$t('file.top')" placement="top">
+                    <el-button :icon="Top" @click="top" circle :disabled="paths.length == 0" />
+                </el-tooltip>
+                <el-tooltip :content="$t('file.refresh')" placement="top">
+                    <el-button :icon="Refresh" circle @click="search" />
+                </el-tooltip>
             </div>
             <div
                 v-show="!searchableStatus"
@@ -305,7 +315,7 @@ import {
     SearchFavorite,
 } from '@/api/modules/files';
 import { computeSize, copyText, dateFormat, downloadFile, getIcon, getRandomStr } from '@/utils/util';
-import { StarFilled, Star } from '@element-plus/icons-vue';
+import { StarFilled, Star, Top, Right } from '@element-plus/icons-vue';
 import { File } from '@/api/interface/file';
 import { Mimetypes, Languages } from '@/global/mimetype';
 import { useRouter } from 'vue-router';
@@ -362,6 +372,8 @@ let req = reactive(initData());
 let loading = ref(false);
 const paths = ref<FilePaths[]>([]);
 let pathWidth = ref(0);
+const history: string[] = [];
+let pointer = -1;
 
 const fileCreate = reactive({ path: '/', isDir: false, mode: 0o755 });
 const fileCompress = reactive({ files: [''], name: '', dst: '', operate: 'compress' });
@@ -461,7 +473,6 @@ const open = async (row: File.File) => {
             url: req.path,
             name: name,
         });
-
         jump(req.path);
     } else {
         openCodeEditor(row.path, row.extension);
@@ -491,7 +502,23 @@ const handlePath = () => {
     }
 };
 
+const right = () => {
+    if (pointer < history.length - 1) {
+        pointer++;
+        let url = history[pointer];
+        backForwardJump(url);
+    }
+};
+
 const back = () => {
+    if (pointer > 0) {
+        pointer--;
+        let url = history[pointer];
+        backForwardJump(url);
+    }
+};
+
+const top = () => {
     if (paths.value.length > 0) {
         let url = '/';
         if (paths.value.length >= 2) {
@@ -502,6 +529,10 @@ const back = () => {
 };
 
 const jump = async (url: string) => {
+    history.splice(pointer + 1);
+    history.push(url);
+    pointer = history.length - 1;
+
     const oldUrl = req.path;
     const oldPageSize = req.pageSize;
     // reset search params before exec jump
@@ -526,6 +557,22 @@ const jump = async (url: string) => {
     });
 };
 
+const backForwardJump = async (url: string) => {
+    const oldPageSize = req.pageSize;
+    // reset search params before exec jump
+    Object.assign(req, initData());
+    req.path = url;
+    req.containSub = false;
+    req.search = '';
+    req.pageSize = oldPageSize;
+    let searchResult = await searchFile();
+    handleSearchResult(searchResult);
+    getPaths(req.path);
+    nextTick(function () {
+        handlePath();
+    });
+};
+
 const getPaths = (reqPath: string) => {
     const pathArray = reqPath.split('/');
     paths.value = [];