ow

uniapp/youjiala/src/components/image-viewer/image-viewer.vue

@@ -33,6 +33,11 @@ interface Slot {
     rotate: number;
     /** 当前图缩放倍率（放大 ×1.25 / 缩小 ÷1.25，0.6~4 之间） */
     scale: number;
+    /** 平移量（px，屏幕轴；只有放大后单指拖动才会变，缩回 1 倍自动归零） */
+    x: number;
+    y: number;
+    /** 拖动会话中：临时关掉 transform 过渡，图片跟手 */
+    dragging: boolean;
 }
 
 const props = withDefaults(
@@ -54,6 +59,9 @@ const rotateRightIcon = rotateRightGlyph("#ffffff");
 
 const { t } = useLocale();
 
+// 图区尺寸缓存：拖动边界按「放大溢出量的一半」算，不必每帧调同步 API
+const { windowWidth: viewWidth, windowHeight: viewHeight } = uni.getSystemInfoSync();
+
 const slots = ref<Slot[]>([]);
 const index = ref(0);
 
@@ -68,6 +76,9 @@ watch(
                 loading: false,
                 rotate: 0,
                 scale: 1,
+                x: 0,
+                y: 0,
+                dragging: false,
             }));
             // 没有缩略图的老文件：打开即自动拉原图兜底，不留白等用户点按钮
             slots.value.forEach((_, i) => {
@@ -108,13 +119,67 @@ function rotateCurrent(delta: number): void {
     slot.rotate = (slot.rotate + delta) % 360;
 }
 
-/** 放大/缩小：倍率夹在 0.6~4，超出范围按钮照点不生效（变换仍平滑） */
+/**
+ * 拖动边界：放大 n 倍后中心最多偏出 (n-1)/2 个屏宽/屏高，图片不会整体拖出视野；
+ * 缩回 1 倍时 max 为 0，偏移自动归零
+ */
+function clampOffset(slot: Slot): void {
+    const maxX = Math.max(0, (slot.scale - 1) * viewWidth / 2);
+    const maxY = Math.max(0, (slot.scale - 1) * viewHeight / 2);
+    slot.x = Math.min(maxX, Math.max(-maxX, slot.x));
+    slot.y = Math.min(maxY, Math.max(-maxY, slot.y));
+}
+
+// 单指拖动会话（同一时刻只有一根手指在拖当前图，不必存进每个 Slot）
+let dragStartX = 0;
+let dragStartY = 0;
+let dragOriginX = 0;
+let dragOriginY = 0;
+
+/** 放大后才启用单指平移：小图状态单指手势留给 swiper 翻页 */
+function onImageTouchStart(e: any): void {
+    const slot = slots.value[index.value];
+    const touch = e.touches?.[0];
+    if (!slot || !touch || slot.scale <= 1) {
+        return;
+    }
+    slot.dragging = true;
+    dragStartX = touch.clientX;
+    dragStartY = touch.clientY;
+    dragOriginX = slot.x;
+    dragOriginY = slot.y;
+}
+
+/** 拖动平移：transform 里 translate 在最外层，位移沿屏幕轴、与旋转角无关，始终跟手 */
+function onImageTouchMove(e: any): void {
+    const slot = slots.value[index.value];
+    const touch = e.touches?.[0];
+    if (!slot || !slot.dragging || !touch) {
+        return;
+    }
+    slot.x = dragOriginX + touch.clientX - dragStartX;
+    slot.y = dragOriginY + touch.clientY - dragStartY;
+    clampOffset(slot);
+}
+
+function onImageTouchEnd(): void {
+    const slot = slots.value[index.value];
+    if (slot) {
+        slot.dragging = false;
+    }
+}
+
+/** 放大（>1 倍）时禁用 swiper 翻页，把单指手势让给图片平移 */
+const panEnabled = computed(() => (slots.value[index.value]?.scale ?? 1) > 1);
+
+/** 放大/缩小：倍率夹在 0.6~4，超出范围按钮照点不生效（变换仍平滑）；缩放后收一下平移量 */
 function zoomCurrent(factor: number): void {
     const slot = slots.value[index.value];
     if (!slot) {
         return;
     }
     slot.scale = Math.min(4, Math.max(0.6, slot.scale * factor));
+    clampOffset(slot);
 }
 
 /** 高清钮文案：拉取中 / 已高清 / 高清 */
@@ -179,7 +244,8 @@ function onImageError(i: number): void {
 </script>
 
 <template>
-  <view v-if="visible" class="iv" @touchmove.stop.prevent>
+    <view v-if="visible" class="iv" @touchstart="onImageTouchStart" @touchmove.stop.prevent="onImageTouchMove"
+        @touchend="onImageTouchEnd" @touchcancel="onImageTouchEnd">
         <!-- 顶部：计数 + 工具组（左旋/右旋/放大/缩小/高清/关闭，状态栏避让同 photo-slide-player 口径） -->
         <view class="iv-top">
             <text class="iv-count">
@@ -199,11 +265,7 @@ function onImageError(i: number): void {
                     <u-icon name="minus" size="40" color="#ffffff" />
                 </view>
                 <!-- 高清用文字（需求约定），拉取中/已加载禁用 -->
-        <view
-          class="iv-tool iv-tool--text"
-          :class="{ 'is-disabled': buttonDisabled }"
-          @click="loadOriginal()"
-        >
+                <view class="iv-tool iv-tool--text" :class="{ 'is-disabled': buttonDisabled }" @click="loadOriginal()">
                     <text class="iv-tool-text">
                         {{ buttonText }}
                     </text>
@@ -214,17 +276,14 @@ function onImageError(i: number): void {
             </view>
         </view>
 
-    <!-- 图区：左右滑动连览，每张按「缩略图 → 高清」渐进升级，旋转/缩放按图独立 -->
-    <swiper class="iv-swiper" :current="index" @change="onSwipeChange">
+        <!-- 图区：左右滑动连览，每张按「缩略图 → 高清」渐进升级，旋转/缩放/平移按图独立；
+         放大后禁用 swiper 翻页（单指手势让给拖动） -->
+        <swiper class="iv-swiper" :current="index" :disable-touch="panEnabled" @change="onSwipeChange">
             <swiper-item v-for="(slot, i) in slots" :key="i" class="iv-pane">
-        <image
-          v-if="slot.src"
-          class="iv-img"
-          :src="slot.src"
+                <image v-if="slot.src" class="iv-img" :class="{ 'iv-img--dragging': slot.dragging }" :src="slot.src"
                     mode="aspectFit"
-          :style="{ transform: `rotate(${slot.rotate}deg) scale(${slot.scale})` }"
-          @error="onImageError(i)"
-        />
+                    :style="{ transform: `translate(${slot.x}px, ${slot.y}px) rotate(${slot.rotate}deg) scale(${slot.scale})` }"
+                    @error="onImageError(i)" />
                 <!-- 缩略图缺失时的拉取占位（打开即自动拉原图，这里只在途提示） -->
                 <view v-else class="iv-wait">
                     <text class="iv-wait-text">
@@ -330,6 +389,11 @@ function onImageError(i: number): void {
     transition: transform 0.25s ease;
 }
 
+/* 拖动中关掉过渡：否则图片会追着手指爬，跟手感全无 */
+.iv-img--dragging {
+    transition: none;
+}
+
 .iv-wait {
     display: flex;
     align-items: center;

uniapp/youjiala/src/stores/uploadQueue.ts

@@ -74,6 +74,17 @@ function extOf(fileName: string): string {
   return dot > 0 ? fileName.slice(dot) : ".ext";
 }
 
+/**
+ * 分片协议名唯一前缀（uid-序号-总数.ext 的 uid 段）。
+ * pump() 是同步循环，同批并发任务几乎必在同一毫秒点着，只靠 Date.now() 会重名：
+ * App 端重名会让 copyTo 目标冲突或互相覆盖，H5 端重名会让分片文件互相覆盖；
+ * 重试任务也会重新准备，同样要换新名，故再拼模块级自增序号。
+ */
+function uniqueUploadTag(): string {
+  seq += 1;
+  return `uni-${Date.now()}-${seq}`;
+}
+
 /** 分片大小：内网 3MB / 公网 1MB（旧系统 FileUpload 同口径；开发构建视为内网） */
 function resolveChunkSize(): number {
   const publicNet = /localhost|127\.|192\.168\.|10\./.test(baseUrl);
@@ -88,7 +99,7 @@ function prepareAppFilePath(item: UploadItem): Promise<string> {
   // 真机验证前不引入分片循环（读不了本地字节切片）
   return copyIntoAppUploadDir(
     item.filePath,
-    `uni-${Date.now()}-1-1${extOf(item.name)}`,
+    `${uniqueUploadTag()}-1-1${extOf(item.name)}`,
   );
   // #endif
   // #ifndef APP-PLUS
@@ -202,7 +213,7 @@ export const useUploadQueueStore = defineStore(
       let aborted = false;
       const chunkSize = resolveChunkSize();
       const total = Math.max(Math.ceil(blob.size / chunkSize), 1);
-      const uid = `uni-${Date.now()}`;
+      const uid = uniqueUploadTag();
       const startedAt = Date.now();
       let doneBytes = 0;
 
@@ -272,7 +283,7 @@ export const useUploadQueueStore = defineStore(
       };
     }
 
-    /** uni 通道（App）：先复制成分片名再发（后端按 filename 解析分片）；复制失败回退原路径，至少能拿到明确的后端报错 */
+    /** uni 通道（App）：先复制成分片名再发（后端按 filename 解析分片）；复制失败直接判失败，不回退原路径 */
     function uniUpload(item: UploadItem): UploadHandle {
       let task: UniApp.UploadTask | null = null;
       let aborted = false;
@@ -310,7 +321,14 @@ export const useUploadQueueStore = defineStore(
 
       prepareAppFilePath(item)
         .then(start)
-        .catch(() => start(item.filePath));
+        .catch(() => {
+          // 绝不能回退原路径重传：原文件名没有 uid-序号-总数 协议，后端
+          // PackUploadDmsFile 拆不出分片序号会静默 return null（HTTP 200 空体），
+          // 任务反而被当成成功、库里却是 0 条——宁可显式失败让用户重试
+          item.status = "failed";
+          item.error = "文件准备失败";
+          finish(item);
+        });
 
       return {
         abort: () => {

uniapp/youjiala/src/utils/appFileWrite.ts

@@ -19,8 +19,8 @@ declare const plus: any;
 /** 单次过桥字节数：512KB 转 base64 约 683KB 字符串，兼顾内存峰值与调用次数 */
 const BYTES_PER_TRIP = 512 * 1024;
 
-const BASE64_CHARS
-  = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+const BASE64_CHARS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 
 /**
  * 纯 JS base64（浏览器 btoa 在 App 逻辑层不保证存在，不依赖它）：
@@ -52,7 +52,9 @@ export function base64OfBytes(bytes: ArrayBuffer): string {
   const parts: string[] = [];
   for (let offset = 0; offset < data.length; offset += chunkSize) {
     parts.push(
-      base64OfChunk(data.subarray(offset, Math.min(offset + chunkSize, data.length))),
+      base64OfChunk(
+        data.subarray(offset, Math.min(offset + chunkSize, data.length)),
+      ),
     );
   }
   return parts.join("");
@@ -71,27 +73,27 @@ const PUBLIC_DOWNLOAD_FOLDER = "有家啦";
 export function mimeOf(fileName: string): string {
   const ext = fileName.slice(fileName.lastIndexOf(".") + 1).toLowerCase();
   const map: Record<string, string> = {
-    "jpg": "image/jpeg",
-    "jpeg": "image/jpeg",
-    "png": "image/png",
-    "gif": "image/gif",
-    "webp": "image/webp",
-    "bmp": "image/bmp",
-    "mp3": "audio/mpeg",
-    "m4a": "audio/mp4",
-    "wav": "audio/wav",
-    "aac": "audio/aac",
-    "mp4": "video/mp4",
-    "mov": "video/quicktime",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    gif: "image/gif",
+    webp: "image/webp",
+    bmp: "image/bmp",
+    mp3: "audio/mpeg",
+    m4a: "audio/mp4",
+    wav: "audio/wav",
+    aac: "audio/aac",
+    mp4: "video/mp4",
+    mov: "video/quicktime",
     "3gp": "video/3gpp",
-    "pdf": "application/pdf",
-    "txt": "text/plain",
-    "json": "application/json",
-    "xls": "application/vnd.ms-excel",
-    "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "doc": "application/msword",
-    "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "zip": "application/zip",
+    pdf: "application/pdf",
+    txt: "text/plain",
+    json: "application/json",
+    xls: "application/vnd.ms-excel",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    doc: "application/msword",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    zip: "application/zip",
   };
   return map[ext] || "application/octet-stream";
 }

uniapp/youjiala/src/utils/dmsBytes.ts

@@ -13,7 +13,11 @@
 import { requestBuffer, saveArrayBuffer } from "@/common/http.interceptor";
 import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
 import dmsFileService from "@/service/master/dmsFileService";
-import { base64OfBytes, mimeOf, writeAppFileFromBytes } from "@/utils/appFileWrite";
+import {
+  base64OfBytes,
+  mimeOf,
+  writeAppFileFromBytes,
+} from "@/utils/appFileWrite";
 
 /** 取回结果：整文件字节 + 展示文件名（下载落盘与生成播放地址共用） */
 export interface FileBytes {
@@ -27,21 +31,27 @@ export interface FileBytes {
  */
 function imageMimeOf(bytes: ArrayBuffer, name: string): string {
   const head = new Uint8Array(bytes, 0, Math.min(12, bytes.byteLength));
-  if (head[0] === 0xFF && head[1] === 0xD8) {
+  if (head[0] === 0xff && head[1] === 0xd8) {
     return "image/jpeg";
   }
-  if (head[0] === 0x89 && head[1] === 0x50 && head[2] === 0x4E) {
+  if (head[0] === 0x89 && head[1] === 0x50 && head[2] === 0x4e) {
     return "image/png";
   }
   if (head[0] === 0x47 && head[1] === 0x49 && head[2] === 0x46) {
     return "image/gif";
   }
-  if (head[0] === 0x42 && head[1] === 0x4D) {
+  if (head[0] === 0x42 && head[1] === 0x4d) {
     return "image/bmp";
   }
   if (
-    head[0] === 0x52 && head[1] === 0x49 && head[2] === 0x46 && head[3] === 0x46
-    && head[8] === 0x57 && head[9] === 0x45 && head[10] === 0x42 && head[11] === 0x50
+    head[0] === 0x52 &&
+    head[1] === 0x49 &&
+    head[2] === 0x46 &&
+    head[3] === 0x46 &&
+    head[8] === 0x57 &&
+    head[9] === 0x45 &&
+    head[10] === 0x42 &&
+    head[11] === 0x50
   ) {
     return "image/webp";
   }
@@ -54,8 +64,8 @@ async function fetchCombineBytes(
   fileSizeKb: number,
 ): Promise<ArrayBuffer> {
   const segments = orderKey.split("-");
-  const total
-    = Number.parseInt(segments[segments.length - 1].split(".")[0], 10) || 1;
+  const total =
+    Number.parseInt(segments[segments.length - 1].split(".")[0], 10) || 1;
   const merged = new Uint8Array((fileSizeKb + 1) * 1024);
   let offset = 0;
   // 串行逐片：并发打多片旧系统没做、后端也没限流承诺，跟旧行为保持一致
@@ -118,7 +128,9 @@ export async function saveFileBytes(file: FileBytes): Promise<void> {
 export function toPlayableUrl(file: FileBytes): string {
   // #ifdef H5
   // Blob 必须带 MIME：Chrome 会嗅探无 type 的 blob，Safari/部分微信内核不嗅探，直接黑图
-  return URL.createObjectURL(new Blob([file.bytes], { type: mimeOf(file.name) }));
+  return URL.createObjectURL(
+    new Blob([file.bytes], { type: mimeOf(file.name) }),
+  );
   // #endif
   // #ifndef H5
   // #ifdef APP-PLUS