feat: Preview the current directory image (#8930)

Refs: #6117

Author: lan-yonghui

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

@@ -253,7 +253,7 @@
                             </el-button>
                         </template>
                         <template v-else>
-                            <el-dropdown class="mr-2.5" style="border-left: 1px solid #ccc">
+                            <el-dropdown class="mr-2.5">
                                 <el-button class="btn">
                                     {{ hostMount[0]?.path }} ({{ $t('file.root') }})
                                     {{ formatFileSize(hostMount[0]?.free) }}
@@ -314,7 +314,7 @@
                                     </el-button>
                                 </template>
 
-                                <el-dropdown v-if="moreButtons.length" style="border-left: 1px solid #ccc">
+                                <el-dropdown v-if="moreButtons.length">
                                     <el-button>
                                         {{ $t('tabs.more') }}
                                         <i class="el-icon-arrow-down el-icon--right" />
@@ -614,7 +614,7 @@ const fileCreate = reactive({ path: '/', isDir: false, mode: 0o755 });
 const fileCompress = reactive({ files: [''], name: '', dst: '', operate: 'compress' });
 const fileDeCompress = reactive({ path: '', name: '', dst: '', mimeType: '' });
 const fileEdit = reactive({ content: '', path: '', name: '', language: 'plaintext', extension: '' });
-const filePreview = reactive({ path: '', name: '', extension: '', fileType: '' });
+const filePreview = reactive({ path: '', name: '', extension: '', fileType: '', imageFiles: [] });
 const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100, isDetail: false });
 const fileUpload = reactive({ path: '' });
 const fileRename = reactive({ path: '', oldName: '' });
@@ -653,6 +653,7 @@ const disableBtn = ref(false);
 const calculateBtn = ref(false);
 const dirNum = ref(0);
 const fileNum = ref(0);
+const imageFiles = ref([]);
 
 const { searchableStatus, searchablePath, searchableInputRef, searchableInputBlur } = useSearchable(paths);
 
@@ -1034,6 +1035,12 @@ const openDeCompress = (item: File.File) => {
 
 const openView = (item: File.File) => {
     const fileType = getFileType(item.extension);
+    if (fileType === 'image') {
+        imageFiles.value = data.value
+            .filter((item) => !item.isDir)
+            .filter((item) => getFileType(item.extension) == 'image')
+            .map((item) => (item.isSymlink ? item.linkPath : item.path));
+    }
 
     const previewTypes = ['image', 'video', 'audio', 'word', 'excel'];
     if (previewTypes.includes(fileType)) {
@@ -1058,6 +1065,7 @@ const openPreview = (item: File.File, fileType: string) => {
     filePreview.name = item.name;
     filePreview.extension = item.extension;
     filePreview.fileType = fileType;
+    filePreview.imageFiles = imageFiles.value;
 
     previewRef.value.acceptParams(filePreview);
 };
@@ -1482,4 +1490,7 @@ onBeforeUnmount(() => {
 .search-button {
     width: 20vw;
 }
+.el-button-group > .el-dropdown > .el-button {
+    border-left-color: var(--el-border-color);
+}
 </style>

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

@@ -15,44 +15,68 @@
                 <span>{{ $t('commons.button.preview') + ' - ' + filePath }}</span>
                 <el-space alignment="center" :size="10" class="dialog-header-icon">
                     <el-tooltip :content="loadTooltip()" placement="top" v-if="fileType !== 'excel'">
-                        <el-icon @click="toggleFullscreen"><FullScreen /></el-icon>
+                        <el-icon @click="toggleFullscreen" class="cursor-pointer hover:scale-110">
+                            <FullScreen />
+                        </el-icon>
                     </el-tooltip>
-                    <el-icon @click="handleClose" size="20"><Close /></el-icon>
+                    <el-icon @click="handleClose" size="20" class="cursor-pointer hover:scale-110"><Close /></el-icon>
                 </el-space>
             </div>
         </template>
-        <div v-loading="loading" :style="isFullscreen ? 'height: 90vh' : 'height: 80vh'">
-            <div class="flex items-center justify-center h-full">
-                <el-image
-                    v-if="fileType === 'image'"
-                    :src="fileUrl"
-                    :style="isFullscreen ? 'height: 90vh' : 'height: 80vh'"
-                    fit="contain"
-                    :preview-src-list="[fileUrl]"
-                />
-
-                <video v-else-if="fileType === 'video'" :src="fileUrl" controls autoplay class="size-3/4"></video>
-
-                <audio v-else-if="fileType === 'audio'" :src="fileUrl" controls></audio>
-
-                <vue-office-docx
-                    v-else-if="fileType === 'word'"
-                    :src="fileUrl"
-                    :style="isFullscreen ? 'height: 90vh' : 'height: 80vh'"
-                    class="w-full"
-                    @rendered="renderedHandler"
-                    @error="errorHandler"
-                />
-
-                <vue-office-excel
-                    v-else-if="fileType === 'excel'"
-                    :src="fileUrl"
-                    :style="isFullscreen ? 'height: 90vh;' : 'height: 80vh'"
-                    class="w-full"
-                    @rendered="renderedHandler"
-                    @error="errorHandler"
-                />
-            </div>
+        <div
+            v-loading="loading"
+            :style="isFullscreen ? 'height: 90vh' : 'height: 80vh'"
+            :class="fileType === 'image' ? 'overflow-y-auto' : 'flex justify-center items-center'"
+        >
+            <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">
+                        <template v-for="(item, index) in imageFiles" :key="index">
+                            <el-tooltip :content="item.path" placement="right">
+                                <div
+                                    class="text-sm truncate mb-1 rounded p-1 left-item"
+                                    @click="changeImg(item.path)"
+                                    :class="item.path === filePath ? 'left-item-default' : ''"
+                                >
+                                    {{ item.path }}
+                                </div>
+                            </el-tooltip>
+                        </template>
+                    </aside>
+                    <main class="flex-1 overflow-hidden">
+                        <el-tooltip :content="filePath" placement="bottom">
+                            <el-image
+                                loading="lazy"
+                                :src="fileUrl"
+                                :alt="filePath"
+                                fit="contain"
+                                class="w-full h-full"
+                            />
+                        </el-tooltip>
+                    </main>
+                </div>
+            </template>
+            <video v-else-if="fileType === 'video'" :src="fileUrl" controls autoplay class="size-3/4"></video>
+
+            <audio v-else-if="fileType === 'audio'" :src="fileUrl" controls></audio>
+
+            <vue-office-docx
+                v-else-if="fileType === 'word'"
+                :src="fileUrl"
+                :style="isFullscreen ? 'height: 90vh' : 'height: 80vh'"
+                class="w-full"
+                @rendered="renderedHandler"
+                @error="errorHandler"
+            />
+
+            <vue-office-excel
+                v-else-if="fileType === 'excel'"
+                :src="fileUrl"
+                :style="isFullscreen ? 'height: 90vh;' : 'height: 80vh'"
+                class="w-full"
+                @rendered="renderedHandler"
+                @error="errorHandler"
+            />
         </div>
     </el-dialog>
 </template>
@@ -73,6 +97,7 @@ interface EditProps {
     path: string;
     name: string;
     extension: string;
+    imageFiles: [];
 }
 
 const open = ref(false);
@@ -81,6 +106,7 @@ const filePath = ref('');
 const fileName = ref('');
 const fileType = ref('');
 const fileUrl = ref('');
+const imageFiles = ref([]);
 
 const fileExtension = ref('');
 const isFullscreen = ref(false);
@@ -107,23 +133,38 @@ const toggleFullscreen = () => {
     isFullscreen.value = !isFullscreen.value;
 };
 
+const getDownloadUrl = (path: string) => {
+    const baseUrl = `${import.meta.env.VITE_API_URL as string}/files/download`;
+    const encodedPath = encodeURIComponent(path);
+    const timestamp = new Date().getTime();
+    return `${baseUrl}?path=${encodedPath}&timestamp=${timestamp}`;
+};
+
 const acceptParams = (props: EditProps) => {
+    imageFiles.value = [];
     fileExtension.value = props.extension;
     fileName.value = props.name;
     filePath.value = props.path;
     fileType.value = props.fileType;
     isFullscreen.value = fileType.value === 'excel';
 
     loading.value = true;
-    fileUrl.value = `${import.meta.env.VITE_API_URL as string}/files/download?path=${encodeURIComponent(
-        props.path,
-    )}&timestamp=${new Date().getTime()}`;
+    fileUrl.value = getDownloadUrl(props.path);
+    imageFiles.value = props.imageFiles.map((item) => ({
+        path: item,
+        url: getDownloadUrl(item),
+    }));
     open.value = true;
     loading.value = false;
 };
 
 const onOpen = () => {};
 
+const changeImg = (path: string) => {
+    filePath.value = path;
+    fileUrl.value = getDownloadUrl(path);
+};
+
 defineExpose({ acceptParams });
 </script>
 
@@ -135,4 +176,16 @@ defineExpose({ acceptParams });
 .dialog-header-icon {
     color: var(--el-color-info);
 }
+.left-aside {
+    background-color: var(--panel-menu-bg-color);
+    opacity: 85%;
+}
+.left-item {
+    &:hover {
+        background: var(--el-menu-item-bg-color-active) !important;
+    }
+}
+.left-item-default {
+    background: var(--el-menu-item-bg-color-active) !important;
+}
 </style>