fix: Fix bug in file management with multiple tabs (#10170)

frontend/src/components/complex-table/index.vue

@@ -219,30 +219,30 @@ defineExpose({
     closeRightClick,
 });
 
-onMounted(() => {
+function calcHeight() {
-    let heightDiff = 320;
+    let heightDiff = props.heightDiff ?? 320;
-    let tabHeight = 0;
+    let tabHeight = globalStore.openMenuTabs ? 48 : 0;
-    if (props.heightDiff) {
+
-        heightDiff = props.heightDiff;
-    }
-    if (globalStore.openMenuTabs) {
-        tabHeight = 48;
-    }
     if (props.height) {
         tableHeight.value = props.height - tabHeight;
     } else {
         tableHeight.value = window.innerHeight - heightDiff - tabHeight;
     }
+}
 
-    window.onresize = () => {
+onMounted(() => {
-        return (() => {
+    calcHeight();
-            if (props.height) {
+    window.addEventListener('resize', calcHeight);
-                tableHeight.value = props.height - tabHeight;
+    watch(
-            } else {
+        () => props.height,
-                tableHeight.value = window.innerHeight - heightDiff - tabHeight;
+        () => {
-            }
+            calcHeight();
-        })();
+        },
-    };
+    );
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', calcHeight);
 });
 </script>
 

frontend/src/lang/modules/en.ts

@@ -1510,6 +1510,7 @@ const message = {
         cancelUpload: 'Cancel Upload',
         cancelUploadHelper: 'Whether to cancel the upload, after cancellation the upload list will be cleared.',
         keepOneTab: 'Keep at least one tab',
+        notCanTab: 'Cannot add more tabs',
     },
     ssh: {
         autoStart: 'Auto start',

frontend/src/lang/modules/ja.ts

@@ -1454,6 +1454,7 @@ const message = {
         cancelUpload: 'アップロードをキャンセル',
         cancelUploadHelper: 'アップロードをキャンセルするかどうか、キャンセル後、アップロードリストはクリアされます。',
         keepOneTab: '少なくとも1つのタブを保持してください',
+        notCanTab: 'これ以上タブを追加できません',
     },
     ssh: {
         autoStart: 'オートスタート',

frontend/src/lang/modules/ko.ts

@@ -1439,6 +1439,7 @@ const message = {
         cancelUpload: '업로드 취소',
         cancelUploadHelper: '업로드를 취소할지 여부, 취소 후 업로드 목록이 비워집니다.',
         keepOneTab: '최소한 하나의 탭을 유지하세요',
+        notCanTab: '더 이상 탭을 추가할 수 없습니다',
     },
     ssh: {
         autoStart: '자동 시작',

frontend/src/lang/modules/ms.ts

@@ -1497,6 +1497,7 @@ const message = {
         cancelUploadHelper:
             'Adakah hendak membatalkan muat naik, selepas pembatalan senarai muat naik akan dikosongkan.',
         keepOneTab: 'Pastikan sekurang-kurangnya satu tab dikekalkan',
+        notCanTab: 'Tidak dapat menambah tab lagi',
     },
     ssh: {
         autoStart: 'Mula automatik',

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

@@ -1484,6 +1484,7 @@ const message = {
         cancelUpload: 'Cancelar Upload',
         cancelUploadHelper: 'Deseja cancelar o upload, após o cancelamento, a lista de upload será limpa.',
         keepOneTab: 'Mantenha pelo menos uma aba',
+        notCanTab: 'Não é possível adicionar mais abas',
     },
     ssh: {
         autoStart: 'Início automático',

frontend/src/lang/modules/ru.ts

@@ -1485,6 +1485,7 @@ const message = {
         cancelUpload: 'Отменить загрузку',
         cancelUploadHelper: 'Отменить загрузку или нет, после отмены список загрузок будет очищен.',
         keepOneTab: 'Необходимо оставить как минимум одну вкладку',
+        notCanTab: 'Невозможно добавить больше вкладок',
     },
     ssh: {
         autoStart: 'Автозапуск',

frontend/src/lang/modules/tr.ts

@@ -1527,6 +1527,7 @@ const message = {
         cancelUpload: 'Yüklemeyi İptal Et',
         cancelUploadHelper: 'Yüklemeyi iptal etmek ister misiniz, iptal sonrası yükleme listesi temizlenecektir.',
         keepOneTab: 'En az bir sekme açık kalmalıdır',
+        notCanTab: 'Daha fazla sekme eklenemez',
     },
     ssh: {
         autoStart: 'Otomatik başlat',

frontend/src/lang/modules/zh-Hant.ts

@@ -1439,6 +1439,7 @@ const message = {
         cancelUpload: '取消上傳',
         cancelUploadHelper: '是否取消上傳，取消後將清空上傳列表',
         keepOneTab: '至少保留一個標籤頁',
+        notCanTab: '無法新增更多標籤頁',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1434,6 +1434,7 @@ const message = {
         cancelUpload: '取消上传',
         cancelUploadHelper: '是否取消上传，取消后将清空上传列表',
         keepOneTab: '至少保留一个标签页',
+        notCanTab: '不可增加更多的标签页',
     },
     ssh: {
         autoStart: '开机自启',

frontend/src/styles/element-dark.scss

@@ -155,6 +155,7 @@ html.dark {
 
     .el-tabs--card > .el-tabs__header .el-tabs__nav {
         border: 1px solid var(--panel-main-bg-color-8);
+        border-bottom: none;
     }
 
     .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {

frontend/src/styles/element.scss

@@ -257,6 +257,10 @@ html {
     }
 }
 
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    border-bottom-color: var(--panel-color-primary) !important;
+}
+
 .logo {
     color: var(--el-color-primary);
 }

frontend/src/views/host/file-management/hooks/searchable.ts

@@ -53,3 +53,42 @@ export function useSearchableForSelect(paths) {
         searchableInputBlur,
     };
 }
+
+export function useMultipleSearchable(paths) {
+    const searchableStatus = ref(false);
+    const searchablePath = ref('');
+    const searchableInputRefs = ref<Record<string, HTMLInputElement | null>>({});
+
+    const setSearchableInputRef = (id: string, el: HTMLInputElement | null) => {
+        if (el) {
+            searchableInputRefs.value[id] = el;
+        } else {
+            delete searchableInputRefs.value[id];
+        }
+    };
+
+    watch(searchableStatus, (val) => {
+        if (val) {
+            searchablePath.value = paths.value.at(-1)?.url || '';
+            nextTick(() => {
+                const keys = Object.keys(searchableInputRefs.value);
+                if (keys.length > 0) {
+                    const lastKey = keys[keys.length - 1];
+                    searchableInputRefs.value[lastKey]?.focus();
+                }
+            });
+        }
+    });
+
+    const searchableInputBlur = () => {
+        searchableStatus.value = false;
+    };
+
+    return {
+        searchableStatus,
+        searchablePath,
+        searchableInputRefs,
+        setSearchableInputRef,
+        searchableInputBlur,
+    };
+}