feat: The file list does not display hidden files by default (#8943)

Refs: #5702

agent/utils/files/utils.go

@@ -66,7 +66,8 @@ func GetGroup(gid uint32) string {
 const dotCharacter = 46
 
 func IsHidden(path string) bool {
-	return path[0] == dotCharacter
+	base := filepath.Base(path)
+	return len(base) > 1 && base[0] == dotCharacter
 }
 
 func countLines(path string) (int, error) {

frontend/src/api/interface/file.ts

@@ -11,6 +11,7 @@ export namespace File {
         size: number;
         isDir: boolean;
         isSymlink: boolean;
+        isHidden: boolean;
         linkPath: string;
         type: string;
         updateTime: string;

frontend/src/lang/modules/en.ts

@@ -1468,6 +1468,8 @@ const message = {
         existFileDirHelper: 'The selected file/folder has a duplicate name. Please proceed with caution!',
         noSuchFile: 'The file or directory was not found. Please check and try again.',
         setting: 'Setting',
+        showHide: 'Show hidden files',
+        noShowHide: 'Don’t show hidden files',
     },
     ssh: {
         autoStart: 'Auto Start',

frontend/src/lang/modules/ja.ts

@@ -1409,6 +1409,8 @@ const message = {
         existFileDirHelper: '選択したファイル/フォルダーには同じ名前のものが既に存在します。慎重に操作してください！',
         noSuchFile: 'ファイルまたはディレクトリが見つかりませんでした。確認して再試行してください。',
         setting: '設定',
+        showHide: '隠しファイルを表示',
+        noShowHide: '隠しファイルを表示しない',
     },
     ssh: {
         autoStart: 'オートスタート',

frontend/src/lang/modules/ko.ts

@@ -1395,6 +1395,8 @@ const message = {
         existFileDirHelper: '선택한 파일/폴더에 동일한 이름이 이미 존재합니다. 신중하게 작업하세요!',
         noSuchFile: '파일 또는 디렉터리를 찾을 수 없습니다. 확인 후 다시 시도하세요.',
         setting: '설정',
+        showHide: '숨김 파일 표시',
+        noShowHide: '숨김 파일 숨기기',
     },
     ssh: {
         autoStart: '자동 시작',

frontend/src/lang/modules/ms.ts

@@ -1452,6 +1452,8 @@ const message = {
         existFileDirHelper: 'Fail/folder yang dipilih mempunyai nama yang sama. Sila berhati-hati!',
         noSuchFile: 'Fail atau direktori tidak ditemui. Sila periksa dan cuba lagi.',
         setting: 'tetapan',
+        showHide: 'Tunjukkan fail tersembunyi',
+        noShowHide: 'Jangan tunjukkan fail tersembunyi',
     },
     ssh: {
         autoStart: 'Mula automatik',

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

@@ -1438,6 +1438,8 @@ const message = {
         existFileDirHelper: 'O arquivo/pasta selecionado tem um nome duplicado. Por favor, prossiga com cautela!',
         noSuchFile: 'O arquivo ou diretório não foi encontrado. Por favor, verifique e tente novamente.',
         setting: 'configuração',
+        showHide: 'Mostrar arquivos ocultos',
+        noShowHide: 'Não mostrar arquivos ocultos',
     },
     ssh: {
         autoStart: 'Início automático',

frontend/src/lang/modules/ru.ts

@@ -1439,6 +1439,8 @@ const message = {
         existFileDirHelper: 'Выбранный файл/папка имеет дублирующееся имя. Пожалуйста, действуйте осторожно!',
         noSuchFile: 'Файл или каталог не найдены. Пожалуйста, проверьте и повторите попытку.',
         setting: 'настройка',
+        showHide: 'Показывать скрытые файлы',
+        noShowHide: 'Не показывать скрытые файлы',
     },
     ssh: {
         autoStart: 'Автозапуск',

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

@@ -1394,6 +1394,8 @@ const message = {
         existFileDirHelper: '選擇的檔案/資料夾存在同名，請謹慎操作！',
         noSuchFile: '找不到該檔案或目錄，請檢查後重試。',
         setting: '设置',
+        showHide: '顯示隱藏檔案',
+        noShowHide: '不顯示隱藏檔案',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1390,6 +1390,8 @@ const message = {
         existFileDirHelper: '选择的文件/文件夹存在同名，请谨慎操作！',
         noSuchFile: '未能找到该文件或目录，请检查后重试',
         setting: '设置',
+        showHide: '显示隐藏文件',
+        noShowHide: '不显示隐藏文件',
     },
     ssh: {
         autoStart: '开机自启',

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

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div class="flex gap-y-2 items-center gap-x-4" ref="toolRef">
+        <div class="flex sm:flex-row flex-col justify-start gap-y-2 items-center gap-x-4" ref="toolRef">
-            <div class="flex-shrink-0 flex items-center justify-between">
+            <div class="flex-shrink-0 flex sm:w-min w-full items-center justify-start">
                 <el-tooltip :content="$t('file.back')" placement="top">
                     <el-button icon="Back" @click="back" circle />
                 </el-tooltip>
@@ -14,8 +14,11 @@
                 <el-tooltip :content="$t('commons.button.refresh')" placement="top">
                     <el-button icon="Refresh" circle @click="search" />
                 </el-tooltip>
+                <el-tooltip :content="isHidden ? $t('file.showHide') : $t('file.noShowHide')" placement="top">
+                    <el-button class="btn" circle :icon="isHidden ? Hide : View" @click="viewHideFile" />
+                </el-tooltip>
             </div>
-            <div class="flex-1 hidden sm:block" ref="pathRef">
+            <div class="flex-1 sm:w-min w-full hidden sm:block" ref="pathRef">
                 <div
                     v-show="!searchableStatus"
                     @click="searchableStatus = true"
@@ -94,7 +97,7 @@
                     "
                 />
             </div>
-            <div class="flex-1 sm:hidden block">
+            <div class="flex-1 sm:w-min w-full sm:hidden block">
                 <div class="address-bar shadow-md rounded-md px-4 py-2 flex items-center flex-grow">
                     <div class="flex items-center address-url">
                         <span class="root mr-2">
@@ -197,8 +200,8 @@
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
-                    <el-button-group>
+                    <el-button-group class="sm:!inline-block !flex flex-wrap gap-y-2">
-                        <el-button class="btn mr-2.5" @click="openRecycleBin">
+                        <el-button class="btn" @click="openRecycleBin">
                             {{ $t('file.recycleBin') }}
                         </el-button>
                         <el-button class="btn" @click="toTerminal">
@@ -551,7 +554,7 @@ import { MsgWarning } from '@/utils/message';
 import { useSearchable } from './hooks/searchable';
 import { ResultData } from '@/api/interface';
 import { GlobalStore } from '@/store';
-import { Download as ElDownload, Upload as ElUpload } from '@element-plus/icons-vue';
+import { Download as ElDownload, Upload as ElUpload, View, Hide } from '@element-plus/icons-vue';
 
 import i18n from '@/lang';
 import CreateFile from './create/index.vue';
@@ -654,6 +657,7 @@ const calculateBtn = ref(false);
 const dirNum = ref(0);
 const fileNum = ref(0);
 const imageFiles = ref([]);
+const isHidden = ref(true);
 
 const { searchableStatus, searchablePath, searchableInputRef, searchableInputBlur } = useSearchable(paths);
 
@@ -701,12 +705,22 @@ const searchFile = async () => {
 
 const handleSearchResult = (res: ResultData<File.File>) => {
     paginationConfig.total = res.data.itemTotal;
-    data.value = res.data.items;
+    if (isHidden.value) {
+        data.value = res.data.items.filter((item) => !item.isHidden);
+    } else {
+        data.value = res.data.items;
+    }
     dirNum.value = data.value.filter((item) => item.isDir).length;
     fileNum.value = data.value.filter((item) => !item.isDir).length;
     req.path = res.data.path;
 };
 
+const viewHideFile = async () => {
+    isHidden.value = !isHidden.value;
+    let searchResult = await searchFile();
+    handleSearchResult(searchResult);
+};
+
 const open = async (row: File.File) => {
     calculateBtn.value = false;
     disableBtn.value = false;
@@ -1446,7 +1460,6 @@ onBeforeUnmount(() => {
 }
 
 .copy-button {
-    margin-left: 10px;
     .close {
         width: 10px;
         .close-icon {

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

@@ -30,7 +30,10 @@
         >
             <template v-if="fileType === 'image'">
                 <div class="flex h-full">
-                    <aside class="w-[200px] overflow-y-auto p-2 sm:block hidden left-aside rounded">
+                    <aside
+                        class="w-[200px] overflow-y-auto p-2 sm:block hidden left-aside rounded"
+                        v-if="imageFiles.length > 1"
+                    >
                         <template v-for="(item, index) in imageFiles" :key="index">
                             <el-tooltip :content="item.path" placement="right">
                                 <div