feat: 添加文件预览功能和优化文件打开逻辑

app/Models/UserFavorite.php

@@ -253,12 +253,23 @@ class UserFavorite extends AbstractModel
             foreach ($favorites->items() as $favorite) {
                 if ($favorite->favoritable_type === self::TYPE_FILE && isset($files[$favorite->favoritable_id])) {
                     $file = $files[$favorite->favoritable_id];
+                    $fileData = File::handleImageUrl(array_merge(
+                        $file->only(['id', 'ext']),
+                        [
+                            'name' => $file->name,
+                            'size' => $file->size,
+                            'pid' => $file->pid,
+                        ]
+                    ));
                     $data['files'][] = [
                         'id' => $file->id,
                         'name' => $file->name,
                         'ext' => $file->ext,
                         'size' => $file->size,
                         'pid' => $file->pid,
+                        'image_url' => $fileData['image_url'] ?? null,
+                        'image_width' => $fileData['image_width'] ?? null,
+                        'image_height' => $fileData['image_height'] ?? null,
                         'favorited_at' => Carbon::parse($favorite->created_at)->format('Y-m-d H:i:s'),
                         'remark' => $favorite->remark,
                     ];

resources/assets/js/pages/manage/components/FavoriteManagement.vue

@@ -59,6 +59,7 @@
 <script>
 import SearchButton from "../../../components/SearchButton.vue";
 import QuickEdit from "../../../components/QuickEdit.vue";
+import {openFileInClient, previewImageFromList} from "../../../utils/file";
 
 export default {
     name: "FavoriteManagement",
@@ -329,6 +330,9 @@ export default {
                             ext: file.ext,
                             size: file.size,
                             pid: file.pid,
+                            image_url: file.image_url,
+                            image_width: file.image_width,
+                            image_height: file.image_height,
                             favorited_at: file.favorited_at,
                             remark: file.remark || '',
                         });
@@ -385,19 +389,10 @@ export default {
                     this.$emit('on-close');
                     break;
                 case 'file':
-                    this.$router.push({
+                    if (previewImageFromList(this, this.allData, item)) {
-                        name: 'manage-file',
+                        break;
-                        params: {
+                    }
-                            folderId: item.pid || 0,
+                    openFileInClient(this, item);
-                            fileId: null,
-                            shakeId: item.id
-                        }
-                    });
-                    this.$store.state.fileShakeId = item.id;
-                    setTimeout(() => {
-                        this.$store.state.fileShakeId = 0;
-                    }, 600);
-                    this.$emit('on-close');
                     break;
                 case 'message':
                     this.$store.dispatch("openDialog", item.dialog_id).then(() => {

resources/assets/js/pages/manage/components/RecentManagement.vue

@@ -46,6 +46,7 @@
 
 <script>
 import {mapState} from "vuex";
+import {openFileInClient} from "../../../utils/file";
 
 export default {
     name: "RecentManagement",
@@ -251,47 +252,24 @@ export default {
                     this.$store.dispatch('openTask', row);
                     break;
                 case 'file':
-                    this.openWindow(`/single/file/${row.id}`, row.name, `file-${row.id}`, row.size);
+                    openFileInClient(this, row);
                     break;
                 case 'task_file':
-                    this.openWindow(`/single/file/task/${row.id}`, row.name, `file-task-${row.id}`, row.size);
+                    openFileInClient(this, row, {
+                        path: `/single/file/task/${row.id}`,
+                        windowName: `file-task-${row.id}`,
+                        title: row.name,
+                    });
                     break;
                 case 'message_file':
-                    this.openWindow(`/single/file/msg/${row.id}`, row.name, `file-msg-${row.id}`, row.size);
+                    openFileInClient(this, row, {
+                        path: `/single/file/msg/${row.id}`,
+                        windowName: `file-msg-${row.id}`,
+                        title: row.name,
+                    });
                     break;
             }
         },
-        openWindow(path, title, name, size) {
-            const text = title || this.$L('查看');
-            const finalTitle = size ? `${text} (${$A.bytesToSize(size)})` : text;
-            if (this.$Electron) {
-                this.$store.dispatch('openChildWindow', {
-                    name,
-                    path,
-                    userAgent: "/hideenOfficeTitle/",
-                    force: false,
-                    config: {
-                        title: finalTitle,
-                        titleFixed: true,
-                        parent: null,
-                        width: Math.min(window.screen.availWidth, 1440),
-                        height: Math.min(window.screen.availHeight, 900),
-                    },
-                });
-            } else if (this.$isEEUIApp) {
-                this.$store.dispatch('openAppChildPage', {
-                    pageType: 'app',
-                    pageTitle: finalTitle,
-                    url: 'web.js',
-                    params: {
-                        titleFixed: true,
-                        url: $A.urlReplaceHash(path)
-                    },
-                });
-            } else {
-                window.open($A.mainUrl(path.substring(1)));
-            }
-        },
         removeItem(row) {
             if (!row.record_id) {
                 return;

resources/assets/js/utils/file.js

@@ -0,0 +1,92 @@
+export const imageExtensions = ['jpg', 'jpeg', 'webp', 'png', 'gif', 'bmp'];
+
+function extractExt(target) {
+    if (!target) {
+        return '';
+    }
+    if (typeof target === 'string') {
+        return target.toLowerCase();
+    }
+    const ext = target.ext || '';
+    if (ext) {
+        return `${ext}`.toLowerCase();
+    }
+    if (target.name && target.name.includes('.')) {
+        return target.name.split('.').pop().toLowerCase();
+    }
+    return '';
+}
+
+export function isImageFile(target) {
+    return imageExtensions.includes(extractExt(target));
+}
+
+export function previewImageFromList(vm, items, currentItem) {
+    if (!vm || !currentItem || !Array.isArray(items)) {
+        return false;
+    }
+    if (!currentItem.image_url || !isImageFile(currentItem)) {
+        return false;
+    }
+    const imageItems = items.filter(item => item && item.type === 'file' && isImageFile(item) && item.image_url);
+    const index = imageItems.findIndex(item => item.id === currentItem.id);
+    if (index === -1) {
+        return false;
+    }
+    const previewList = imageItems.map(item => {
+        if (item.image_width && item.image_height) {
+            return {
+                src: item.image_url,
+                width: item.image_width,
+                height: item.image_height,
+            };
+        }
+        return item.image_url;
+    });
+    vm.$store.dispatch('previewImage', {index, list: previewList});
+    return true;
+}
+
+export function openFileInClient(vm, item, options = {}) {
+    if (!vm || !item) {
+        return;
+    }
+    const path = options.path || `/single/file/${item.id}`;
+    const baseTitle = options.title || item.name || vm.$L('查看');
+    const sizeValue = options.size !== undefined ? options.size : item.size;
+    const finalTitle = sizeValue ? `${baseTitle} (${$A.bytesToSize(sizeValue)})` : baseTitle;
+    const windowName = options.windowName || `file-${item.id}`;
+    const windowConfig = Object.assign({
+        title: finalTitle,
+        titleFixed: true,
+        parent: null,
+        width: Math.min(window.screen.availWidth, 1440),
+        height: Math.min(window.screen.availHeight, 900),
+    }, options.windowConfig || {});
+
+    if (vm.$Electron) {
+        vm.$store.dispatch('openChildWindow', {
+            name: windowName,
+            path,
+            userAgent: "/hideenOfficeTitle/",
+            force: options.force === undefined ? false : options.force,
+            config: windowConfig,
+        });
+        return;
+    }
+
+    if (vm.$isEEUIApp) {
+        vm.$store.dispatch('openAppChildPage', {
+            pageType: 'app',
+            pageTitle: finalTitle,
+            url: 'web.js',
+            params: Object.assign({
+                titleFixed: true,
+                url: $A.urlReplaceHash(path),
+            }, options.appParams || {}),
+        });
+        return;
+    }
+
+    window.open($A.mainUrl(path.substring(1)));
+}