ow

uniapp/youjiala/src/pages/tab/file.vue

@@ -16,6 +16,7 @@
  */
 import type { FolderRow } from "@/components/folder-move-picker/folder-move-picker.vue";
 import type { ShareTarget } from "@/components/folder-share-picker/folder-share-picker.vue";
+import type { ImageViewerItem } from "@/components/image-viewer/image-viewer.vue";
 import type { PickerOption } from "@/components/option-picker/option-picker.vue";
 import type { FileCategory, FileItem, FileKind, FileTabItem, QuickEntryItem } from "@/data/custom/fileBrowser";
 import { useLocale } from "uview-pro";
@@ -35,7 +36,7 @@ import publishVideoService from "@/service/master/publishVideoService";
 import { useMediaIntentStore } from "@/stores/mediaIntent";
 import { useUploadQueueStore } from "@/stores/uploadQueue";
 import { chooseFiles } from "@/utils/chooseFiles";
-import { fetchFileBytes, saveFileBytes, toPlayableUrl } from "@/utils/dmsBytes";
+import { fetchFileBytes, saveFileBytes, toImageUrl, toPlayableUrl } from "@/utils/dmsBytes";
 import { clearPlayback, setPlayback } from "@/utils/playbackBus";
 import { transferGlyph } from "@/utils/transferGlyph";
 
@@ -593,27 +594,37 @@ async function actionDownload(targets: FileItem[]): Promise<void> {
   }, t("FilePage.downloading"));
 }
 
+// ----- 图片查看器（缩略图秒开 + 按需原图，见 components/image-viewer）-----
+const viewerVisible = ref(false);
+const viewerItems = ref<ImageViewerItem[]>([]);
+
 /** 图片预览：单选一张、多选多图相册连览。
- *  走原图拼整通道（旧 MyComputer @preview-image → GetOrgPictureFile 就是分片拼整）；
- *  DownloadFilePreview 是旧缩略图通道，依赖上传时生成的 scale 目录，本地库没有缩略图只会 400 */
-async function actionPreview(targets: FileItem[]): Promise<void> {
+ *  缩略图先行——thumbUrl 列表已加载过（甚至命中 HTTP 缓存），组装进查看器秒开；
+ *  原图按需拉取（查看器底部「查看原图」触发 loadFull，走分片拼整 + 落盘旧通道）。
+ *  替代旧 uni.previewImage 链路：它要先串行拉全部原图字节落盘才弹窗，慢的根因在此 */
+function actionPreview(targets: FileItem[]): void {
   const images = targets.filter(f => f.kind === "image");
   if (!images.length) {
     toast(t("FilePage.previewNoImage"));
     return;
   }
-  await withBusy(async () => {
-    const urls: string[] = [];
-    for (const file of images) {
-      const record = recordOf(file);
-      if (record) {
-        urls.push(toPlayableUrl(await fetchFileBytes(record)));
-      }
-    }
-    if (urls.length) {
-      uni.previewImage({ urls, current: urls[0] });
-    }
+  viewerItems.value = images.map((file) => {
+    const item: ImageViewerItem = {
+      name: file.name,
+      // 列表宫格同款 Scale 缩略图（后端拼好的直链）；老文件无缩略图时留空，查看器会自动拉原图兜底
+      thumb: file.thumbUrl || "",
+      loadFull: async () => {
+        const record = recordOf(file);
+        if (!record) {
+          throw new Error(t("FilePage.actionFailed"));
+        }
+        // App 端 WebView 不吃 file:// 本地文件，高清图走 data: URI（toImageUrl 内部分流）
+        return toImageUrl(await fetchFileBytes(record));
+      },
+    };
+    return item;
   });
+  viewerVisible.value = true;
 }
 
 /** 视频/音频播放：视频有直链 Url 直接进播放页，否则字节拼整后本地播（H5 blob: 地址经 query 传递） */
@@ -944,7 +955,7 @@ const transferIconWhite = transferGlyph("#ffffff");
   <!-- 弹层（操作面板/抽屉/对话框）或多选态展开时收起 tabbar：tabbar 在页面 fixed 层叠上下文之外，
        弹层 z-index 再高也压不住它，直接隐藏最干净（主流云盘同款交互） -->
   <app-page :hide-nav="true"
-    :show-tabbar="atRoot && !actionFile && !selectMode && !folderDialogVisible && !renameVisible && !moveVisible && !shareVisible && !publishVisible">
+    :show-tabbar="atRoot && !actionFile && !selectMode && !folderDialogVisible && !renameVisible && !moveVisible && !shareVisible && !publishVisible && !viewerVisible">
     <view class="file-page" :style="{ background: themeGlowBackground }">
       <!-- 上半屏整体固定，只有文件列表所在的 scroll-view 内部滚动（整页不滚） -->
       <view class="file-page__head">
@@ -1023,6 +1034,8 @@ const transferIconWhite = transferGlyph("#ffffff");
       </view>
       <file-action-sheet :visible="!!actionFile" :file="actionFile" @close="actionFile = null"
         @action="onSheetAction" />
+      <!-- 图片查看器：缩略图秒开连览，底部「查看原图」按需拉原图（全屏遮罩，打开时收起 tabbar） -->
+      <image-viewer :visible="viewerVisible" :items="viewerItems" @close="viewerVisible = false" />
       <folder-name-dialog :visible="folderDialogVisible" :submitting="folderSubmitting"
         @close="folderDialogVisible = false" @confirm="onCreateFolder" />
       <!-- 重命名：同一个命名对话框的第二个实例（预填当前名 + 重命名文案） -->