From e47e2d63d13babaa380939f89f0b02028cebc19e Mon Sep 17 00:00:00 2001
From: John Bro <42930107+john1298308460@users.noreply.github.com>
Date: Fri, 26 Apr 2024 16:13:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E5=9B=9E=E9=80=80=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20(#4723)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: zhoujunhong <1298308460@qq.com>
---
 frontend/src/lang/modules/en.ts               |  4 ++
 frontend/src/lang/modules/tw.ts               |  4 ++
 frontend/src/lang/modules/zh.ts               |  4 ++
 .../src/views/host/file-management/index.vue  | 55 +++++++++++++++++--
 4 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index a47646532..ceacf5601 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/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',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 6e6987084..1d6229689 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1099,6 +1099,10 @@ const message = {
         clashDitNotSupport: '檔名禁止包含 .1panel_clash',
         clashDleteAlert: '回收站資料夾不能刪除',
         clashOpenAlert: '回收站目錄請點選【回收站】按鈕開啟',
+        right: '前進',
+        back: '後退',
+        top: '返回上一層',
+        refresh: '重新整理',
     },
     ssh: {
         autoStart: '開機自啟',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index d082f39f1..0ded33ed9 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1100,6 +1100,10 @@ const message = {
         clashDitNotSupport: '文件名禁止包含 .1panel_clash',
         clashDleteAlert: '回收站文件夹不能删除',
         clashOpenAlert: '回收站目录请点击【回收站】按钮打开',
+        right: '前进',
+        back: '后退',
+        top: '返回上一级',
+        refresh: '刷新',
     },
     ssh: {
         autoStart: '开机自启',
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index d6252c957..e11163ee9 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/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 = [];