Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Jun 6, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion agent/utils/files/utils.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Jun 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • The IsHidden function should consider the full path to determine if it's hidden across various file systems.
  • Ensure that filepath.Base(path) returns the base name of the path instead of just a relative substring.

Expand Down
1 change: 1 addition & 0 deletions frontend/src/api/interface/file.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export namespace File {
size: number;
isDir: boolean;
isSymlink: boolean;
isHidden: boolean;
linkPath: string;
type: string;
updateTime: string;
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1409,6 +1409,8 @@ const message = {
existFileDirHelper: '選択したファイル/フォルダーには同じ名前のものが既に存在します。慎重に操作してください！',
noSuchFile: 'ファイルまたはディレクトリが見つかりませんでした。確認して再試行してください。',
setting: '設定',
showHide: '隠しファイルを表示',
noShowHide: '隠しファイルを表示しない',
},
ssh: {
autoStart: 'オートスタート',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/ko.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1395,6 +1395,8 @@ const message = {
existFileDirHelper: '선택한 파일/폴더에 동일한 이름이 이미 존재합니다. 신중하게 작업하세요!',
noSuchFile: '파일 또는 디렉터리를 찾을 수 없습니다. 확인 후 다시 시도하세요.',
setting: '설정',
showHide: '숨김 파일 표시',
noShowHide: '숨김 파일 숨기기',
},
ssh: {
autoStart: '자동 시작',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/ms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/pt-br.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/ru.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1439,6 +1439,8 @@ const message = {
existFileDirHelper: 'Выбранный файл/папка имеет дублирующееся имя. Пожалуйста, действуйте осторожно!',
noSuchFile: 'Файл или каталог не найдены. Пожалуйста, проверьте и повторите попытку.',
setting: 'настройка',
showHide: 'Показывать скрытые файлы',
noShowHide: 'Не показывать скрытые файлы',
},
ssh: {
autoStart: 'Автозапуск',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/zh-Hant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1394,6 +1394,8 @@ const message = {
existFileDirHelper: '選擇的檔案/資料夾存在同名，請謹慎操作！',
noSuchFile: '找不到該檔案或目錄，請檢查後重試。',
setting: '设置',
showHide: '顯示隱藏檔案',
noShowHide: '不顯示隱藏檔案',
},
ssh: {
autoStart: '開機自啟',
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lang/modules/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1390,6 +1390,8 @@ const message = {
existFileDirHelper: '选择的文件/文件夹存在同名，请谨慎操作！',
noSuchFile: '未能找到该文件或目录，请检查后重试',
setting: '设置',
showHide: '显示隐藏文件',
noShowHide: '不显示隐藏文件',
},
ssh: {
autoStart: '开机自启',
Expand Down
31 changes: 22 additions & 9 deletions frontend/src/views/host/file-management/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex gap-y-2 items-center gap-x-4" ref="toolRef">
<div class="flex-shrink-0 flex items-center justify-between">
<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 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>
Expand All @@ -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"
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -197,8 +200,8 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button-group>
<el-button class="btn mr-2.5" @click="openRecycleBin">
<el-button-group class="sm:!inline-block !flex flex-wrap gap-y-2">
<el-button class="btn" @click="openRecycleBin">
{{ $t('file.recycleBin') }}
</el-button>
<el-button class="btn" @click="toTerminal">
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1446,7 +1460,6 @@ onBeforeUnmount(() => {
}

.copy-button {
margin-left: 10px;
.close {
width: 10px;
.close-icon {
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Jun 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

Differences and Suggestions

  1. Template Changes

    • Changed class="hidden sm:block" to class="hidden sm:w-min w-full sm:block" on both path-related divs.

  2. Dropdown Icon Positioning

    • Removed unnecessary sm:!inline-block !flex flex-wrap gap-y-2 from the button group within the dropdown menu of directories listing.

  3. Tooltip Content Localization

    • Used $t('file.showHide') and $t('file.noShowHide') for tooltip content instead of hardcoded texts. This ensures localization capabilities across different languages supported by your application.

  4. View/Hide Button Logic Optimization

    • Added a function viewHideFile that toggles the isHidden state and re-fetches the search results accordingly.

  5. Styling Adjustments

    • Suggested adjusting CSS classes like .copy-button, .close, .icon-sm for better styling consistency, but these might be up-to-date or specific styles not mentioned here.

Summary

The reviewed code primarily focuses on improving template structure, localized tooltips, and optimized view/hide functionality without introducing significant new bugs. The changes ensure alignment with best practices, such as using Vue 3 Composition API hooks and ensuring accessibility through proper layout adjustments.

Expand Down
5 changes: 4 additions & 1 deletion frontend/src/views/host/file-management/preview/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Jun 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet contains several inconsistencies and potential improvements:

  1. Missing v-bind directive: Replace = with colon (:) to properly bind attributes in Vue templates.

  2. Unnecessary condition inside template: The conditional statement v-if="imageFiles.length > 1" is redundant because the outer <aside> element already includes this condition in its own attribute.

  3. Incorrect indentation: The nested <el-tooltip> tag should have proper indentation relative to the parent tags.

  4. Potential memory leak if no files exist: Ensure that when imageFiles becomes empty, the component cleans up any related state or events.

Optimization suggestions:

  • Consider using computed properties for filtering or transforming data if necessary.
  • Use destructuring to avoid repeated property access.
  • Add event listeners only when needed.

Here's the refactored version of the code with these considerations applied:

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

<script>
export default {
    data() {
        return {
            imageFiles: [] // Example data
        };
    },
    computed: {
        filteredImageFiles() {
            return this.imageFiles.filter(file => file.type === 'image'); // Filter images
        }
    }
};
</script>

This version addresses the issues and enhances readability while maintaining functionality.

Expand Down
Loading