feat: improve media preview UX with caching and loading states

frontend/app.js

@@ -260,6 +260,8 @@ createApp({
       currentMediaUrl: '',
       currentMediaName: '',
       currentMediaType: '', // 'image', 'video', 'audio'
+      mediaPreviewLoading: false,
+      mediaPreviewCache: {}, // { [filePath]: { url, expiresAt } }
       thumbnailLoadErrors: {}, // 缩略图加载失败标记（按文件路径）
       longPressDuration: 420, // 长按时间（毫秒）
       // 管理员编辑用户存储权限
@@ -1908,6 +1910,24 @@ handleDragLeave(e) {
 
     // ===== 媒体预览功能 =====
 
+    getCachedMediaUrl(filePath) {
+      if (!filePath) return null;
+      const cached = this.mediaPreviewCache[filePath];
+      if (!cached || !cached.url || !cached.expiresAt) return null;
+      if (Date.now() >= cached.expiresAt) return null;
+      return cached.url;
+    },
+
+    setCachedMediaUrl(filePath, url, expiresInSeconds = 3600) {
+      if (!filePath || !url) return;
+      const ttlMs = Math.max(60 * 1000, (Number(expiresInSeconds) || 3600) * 1000);
+      const expiresAt = Date.now() + ttlMs - 20 * 1000;
+      this.mediaPreviewCache = {
+        ...this.mediaPreviewCache,
+        [filePath]: { url, expiresAt }
+      };
+    },
+
     getCurrentFilePath(file) {
       if (!file || !file.name) return '';
       return this.currentPath === '/' ? `/${file.name}` : `${this.currentPath}/${file.name}`;
@@ -1929,12 +1949,15 @@ handleDragLeave(e) {
 
     // 获取媒体文件URL（OSS直连或后端代理）
     async getMediaUrl(file) {
-      const filePath = this.currentPath === '/'
-        ? `/${file.name}`
-        : `${this.currentPath}/${file.name}`;
+      const filePath = this.getCurrentFilePath(file);
 
       // OSS 模式优先直连，避免限流场景回退为后端中转
       if (this.storageType === 'oss' && this.user?.oss_config_source !== 'none') {
+        const cachedUrl = this.getCachedMediaUrl(filePath);
+        if (cachedUrl) {
+          return cachedUrl;
+        }
+
         try {
           const { data } = await axios.get(`${this.apiBase}/api/files/download-url`, {
             params: {
@@ -1943,6 +1966,7 @@ handleDragLeave(e) {
             }
           });
           if (data.success) {
+            this.setCachedMediaUrl(filePath, data.downloadUrl, data.expiresIn || 3600);
             return data.downloadUrl;
           }
         } catch (error) {
@@ -1987,6 +2011,7 @@ handleDragLeave(e) {
 
     // 打开图片预览
     async openImageViewer(file) {
+      this.mediaPreviewLoading = true;
       const url = await this.getMediaUrl(file);
       if (url) {
         this.currentMediaUrl = url;
@@ -1994,10 +2019,25 @@ handleDragLeave(e) {
         this.currentMediaType = 'image';
         this.showImageViewer = true;
       } else {
+        this.mediaPreviewLoading = false;
         this.showToast('error', '错误', '无法获取文件预览链接');
       }
     },
 
+    handleMediaPreviewLoaded() {
+      this.mediaPreviewLoading = false;
+    },
+
+    handleMediaPreviewWaiting() {
+      if (this.currentMediaType === 'video' || this.currentMediaType === 'audio') {
+        this.mediaPreviewLoading = true;
+      }
+    },
+
+    handleMediaPreviewPlaying() {
+      this.mediaPreviewLoading = false;
+    },
+
     handleMediaPreviewError(type = 'file') {
       const typeTextMap = {
         image: '图片',
@@ -2005,12 +2045,14 @@ handleDragLeave(e) {
         audio: '音频'
       };
       const typeText = typeTextMap[type] || '文件';
+      this.mediaPreviewLoading = false;
       this.showToast('error', '预览失败', `${typeText}预览失败，请尝试下载后查看`);
       this.closeMediaViewer();
     },
 
     // 打开视频播放器
     async openVideoPlayer(file) {
+      this.mediaPreviewLoading = true;
       const url = await this.getMediaUrl(file);
       if (url) {
         this.currentMediaUrl = url;
@@ -2018,12 +2060,14 @@ handleDragLeave(e) {
         this.currentMediaType = 'video';
         this.showVideoPlayer = true;
       } else {
+        this.mediaPreviewLoading = false;
         this.showToast('error', '错误', '无法获取文件预览链接');
       }
     },
 
     // 打开音频播放器
     async openAudioPlayer(file) {
+      this.mediaPreviewLoading = true;
       const url = await this.getMediaUrl(file);
       if (url) {
         this.currentMediaUrl = url;
@@ -2031,6 +2075,7 @@ handleDragLeave(e) {
         this.currentMediaType = 'audio';
         this.showAudioPlayer = true;
       } else {
+        this.mediaPreviewLoading = false;
         this.showToast('error', '错误', '无法获取文件预览链接');
       }
     },
@@ -2043,6 +2088,7 @@ handleDragLeave(e) {
       this.currentMediaUrl = '';
       this.currentMediaName = '';
       this.currentMediaType = '';
+      this.mediaPreviewLoading = false;
     },
 
     // 下载当前预览的媒体文件