@yxhl/specter-pui-vtk 1.0.102 → 1.0.103

package/src/components/assembly/VtkUpload.vue

@@ -26,7 +26,7 @@
         :key="file.uid"
         class="vtk-upload__picture-card-item"
       >
-        <v-img :key="file.url || file.preview || file.uid" :src="file.url || file.preview" cover class="fill-height" />
+        <v-img :key="file.url || file.preview || file.uid" :src="file.url || file.preview" cover class="fill-height" />
         <div class="vtk-upload__picture-card-mask">
           <VBtn icon size="x-small" variant="text" color="white" title="查看" @click.stop="handlePreview(file)">
             <VIcon>mdi-eye</VIcon>
@@ -217,6 +217,11 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /** 单张图片最大像素（宽*高），超过则拒绝上传；传 0 表示不限制 */
+  maxPixels: {
+    type: Number,
+    default: 50_000_000,
+  },
   /** 列表类型：text | picture | picture-card */
   listType: {
     type: String,
@@ -297,10 +302,10 @@ const previewTranslateX = ref(0);
 const previewTranslateY = ref(0);
 const previewDragState = ref(null);
 
-// 内部维护文件列表
-const fileList = ref([]);
-let isSyncingModel = false;
-const localPreviewUrls = new Set();
+// 内部维护文件列表
+const fileList = ref([]);
+let isSyncingModel = false;
+const localPreviewUrls = new Set();
 
 watch(
   () => props.modelValue,
@@ -310,47 +315,139 @@ watch(
       return;
     }
 
-    // Accept external URL lists or file object lists.
-    revokeAllLocalPreviews();
-    fileList.value = normalizeFileList(val || []);
-  },
-);
+    // Accept external URL lists or file object lists.
+    revokeAllLocalPreviews();
+    fileList.value = normalizeFileList(val || []);
+  },
+);
 
 /* -------------------- 工具函数 -------------------- */
 let uidCounter = 0;
 const genUid = () => `vtk-upload-${Date.now()}-${uidCounter++}`;
 
-const getFileNameFromUrl = (url) => {
-  const cleanUrl = String(url || '').split('?')[0].split('#')[0];
-  const name = cleanUrl.substring(cleanUrl.lastIndexOf('/') + 1);
-  try {
-    return decodeURIComponent(name || cleanUrl || 'file');
+const getFileNameFromUrl = (url) => {
+  const cleanUrl = String(url || '').split('?')[0].split('#')[0];
+  const name = cleanUrl.substring(cleanUrl.lastIndexOf('/') + 1);
+  try {
+    return decodeURIComponent(name || cleanUrl || 'file');
   } catch (e) {
     return name || cleanUrl || 'file';
-  }
-};
-
-const isImageUrl = (url) => {
-  const value = String(url || '');
-  const cleanUrl = value.split('?')[0].split('#')[0];
-  return /^data:image\//i.test(value) || /\.(png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(cleanUrl);
-};
-
-const normalizeFileList = (value) => {
-  if (!Array.isArray(value)) return [];
-
-  return value
+  }
+};
+
+const isImageUrl = (url) => {
+  const value = String(url || '');
+  const cleanUrl = value.split('?')[0].split('#')[0];
+  return /^data:image\//i.test(value) || /\.(png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(cleanUrl);
+};
+
+const isImageLike = (raw) => {
+  if (!raw) return false;
+  return /^image\//.test(raw.type || '') || isImageUrl(raw.name || '');
+};
+
+const readUInt16BE = (bytes, offset) => (bytes[offset] << 8) | bytes[offset + 1];
+const readUInt16LE = (bytes, offset) => bytes[offset] | (bytes[offset + 1] << 8);
+const readUInt32BE = (bytes, offset) => (
+  ((bytes[offset] << 24) | (bytes[offset + 1] << 16) | (bytes[offset + 2] << 8) | bytes[offset + 3]) >>> 0
+);
+
+// 按字节解析图片头部宽高（PNG / JPEG / GIF / WEBP），禁止整图解码
+const parseDimensions = (bytes) => {
+  const length = bytes.length;
+
+  // PNG：魔数 89 50 4E 47，IHDR 后宽 16 / 高 20（大端 uint32）
+  if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) {
+    return { w: readUInt32BE(bytes, 16), h: readUInt32BE(bytes, 20) };
+  }
+
+  // GIF：魔数 GIF8，宽 6-7 / 高 8-9（小端 uint16）
+  if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38) {
+    return { w: readUInt16LE(bytes, 6), h: readUInt16LE(bytes, 8) };
+  }
+
+  // JPEG：扫 SOF 段（0xC0–0xCF，排除 C4/C8/CC），高在段起点 +5、宽在 +7（大端 uint16）
+  if (bytes[0] === 0xff && bytes[1] === 0xd8) {
+    const sofMarkers = new Set([
+      0xc0, 0xc1, 0xc2, 0xc3, 0xc5, 0xc6, 0xc7, 0xc9, 0xca, 0xcb, 0xcd, 0xce, 0xcf,
+    ]);
+    let offset = 2;
+    while (offset + 9 < length) {
+      if (bytes[offset] !== 0xff) { offset += 1; continue; }
+      const segmentStart = offset;
+      let p = offset;
+      while (p < length && bytes[p] === 0xff) p += 1;
+      if (p >= length - 1) break;
+      const marker = bytes[p];
+      if (marker === 0x00 || marker === 0xd8 || marker === 0xd9) { offset = p + 1; continue; }
+      if (sofMarkers.has(marker)) {
+        return { w: readUInt16BE(bytes, segmentStart + 7), h: readUInt16BE(bytes, segmentStart + 5) };
+      }
+      if (p + 2 >= length) break;
+      const segLength = readUInt16BE(bytes, p + 2);
+      if (segLength < 2) break;
+      offset = p + 2 + segLength;
+    }
+  }
+
+  // WEBP：RIFF....WEBP
+  if (
+    bytes.length >= 30
+    && bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46
+    && bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50
+  ) {
+    const fourcc = String.fromCharCode(bytes[12], bytes[13], bytes[14], bytes[15]);
+    if (fourcc === 'VP8X') {
+      return {
+        w: 1 + ((bytes[24]) | (bytes[25] << 8) | (bytes[26] << 16)),
+        h: 1 + ((bytes[27]) | (bytes[28] << 8) | (bytes[29] << 16)),
+      };
+    }
+    if (fourcc === 'VP8 ') {
+      return {
+        w: bytes[26] | ((bytes[27] & 0x3f) << 8),
+        h: bytes[28] | ((bytes[29] & 0x3f) << 8),
+      };
+    }
+    if (fourcc === 'VP8L' && length >= 25) {
+      return {
+        w: 1 + (((bytes[22] & 0x3f) << 8) | bytes[21]),
+        h: 1 + (((bytes[24] & 0x0f) << 8) | bytes[23]),
+      };
+    }
+  }
+
+  return { w: 0, h: 0 };
+};
+
+// 只读本地文件头部 8KB 拿尺寸；解析失败返回 null（不阻塞普通图片上传）
+const parseImageSizeFromFile = async (raw) => {
+  if (!(raw instanceof Blob)) return null;
+  try {
+    const buffer = await raw.slice(0, 8192).arrayBuffer();
+    const { w, h } = parseDimensions(new Uint8Array(buffer));
+    if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return null;
+    return { w, h };
+  } catch (error) {
+    return null;
+  }
+};
+
+const normalizeFileList = (value) => {
+  if (!Array.isArray(value)) return [];
+
+  return value
     .filter((item) => item)
     .map((item) => {
       if (typeof item === 'string') {
         return {
-          uid: genUid(),
-          name: getFileNameFromUrl(item),
-          size: 0,
-          type: props.listType === 'picture-card' || isImageUrl(item) ? 'image/*' : '',
-          status: 'success',
-          percentage: 100,
-          raw: null,
+          uid: genUid(),
+          name: getFileNameFromUrl(item),
+          size: 0,
+          type: props.listType === 'picture-card' || isImageUrl(item) ? 'image/*' : '',
+          status: 'success',
+          percentage: 100,
+          raw: null,
           url: item,
           preview: '',
           response: null,
@@ -358,13 +455,13 @@ const normalizeFileList = (value) => {
       }
 
       return {
-        uid: item.uid || genUid(),
-        name: item.name || getFileNameFromUrl(item.url || item.preview),
-        size: item.size || 0,
-        type: item.type || (props.listType === 'picture-card' && (item.url || item.preview) ? 'image/*' : ''),
-        status: item.status || 'success',
-        percentage: item.percentage ?? 100,
-        raw: item.raw || null,
+        uid: item.uid || genUid(),
+        name: item.name || getFileNameFromUrl(item.url || item.preview),
+        size: item.size || 0,
+        type: item.type || (props.listType === 'picture-card' && (item.url || item.preview) ? 'image/*' : ''),
+        status: item.status || 'success',
+        percentage: item.percentage ?? 100,
+        raw: item.raw || null,
         url: item.url || '',
         preview: item.preview || '',
         response: item.response || null,
@@ -375,10 +472,10 @@ const normalizeFileList = (value) => {
 
 fileList.value = normalizeFileList(props.modelValue || []);
 
-const isImage = (file) => {
-  if (!file) return false;
-  return /image\//.test(file.type) || isImageUrl(file.name) || isImageUrl(file.url) || isImageUrl(file.preview);
-};
+const isImage = (file) => {
+  if (!file) return false;
+  return /image\//.test(file.type) || isImageUrl(file.name) || isImageUrl(file.url) || isImageUrl(file.preview);
+};
 
 const fileIcon = (file) => {
   if (file.status === 'error') return 'mdi-file-alert-outline';
@@ -386,21 +483,35 @@ const fileIcon = (file) => {
   return 'mdi-file-outline';
 };
 
-const getPreviewSrc = (file) => file?.url || file?.preview || '';
-
-const revokeLocalPreview = (file) => {
-  const preview = file?.preview;
-  if (preview && localPreviewUrls.has(preview)) {
-    URL.revokeObjectURL(preview);
-    localPreviewUrls.delete(preview);
-  }
-};
-
-const revokeAllLocalPreviews = () => {
-  fileList.value.forEach(revokeLocalPreview);
-  localPreviewUrls.forEach((url) => URL.revokeObjectURL(url));
-  localPreviewUrls.clear();
-};
+const getPreviewSrc = (file) => file?.url || file?.preview || '';
+
+// 拦截反馈：优先用全局 toast，找不到则降级 alert
+const showBlockMessage = (message) => {
+  try {
+    const toast = window.$vtk?.message?.toast;
+    if (typeof toast === 'function') {
+      toast(message, { color: 'error' });
+      return;
+    }
+  } catch (error) {
+    console.warn('VtkUpload: failed to show message toast', error);
+  }
+  window.alert?.(message);
+};
+
+const revokeLocalPreview = (file) => {
+  const preview = file?.preview;
+  if (preview && localPreviewUrls.has(preview)) {
+    URL.revokeObjectURL(preview);
+    localPreviewUrls.delete(preview);
+  }
+};
+
+const revokeAllLocalPreviews = () => {
+  fileList.value.forEach(revokeLocalPreview);
+  localPreviewUrls.forEach((url) => URL.revokeObjectURL(url));
+  localPreviewUrls.clear();
+};
 
 const previewImageList = computed(() => fileList.value.filter((file) => isImage(file) && getPreviewSrc(file)));
 
@@ -450,7 +561,7 @@ const processFiles = (rawFiles) => {
     return;
   }
 
-  rawFiles.forEach((raw) => {
+  rawFiles.forEach(async (raw) => {
     // 体积检查
     if (props.maxSize > 0 && raw.size / 1024 / 1024 > props.maxSize) {
       const errFile = buildFile(raw, 'error');
@@ -458,22 +569,34 @@ const processFiles = (rawFiles) => {
       return;
     }
 
+    // 分辨率检查：只读图片头部字节，超阈值则拒绝
+    if (props.maxPixels > 0 && isImageLike(raw)) {
+      const dims = await parseImageSizeFromFile(raw);
+      if (dims && dims.w * dims.h > props.maxPixels) {
+        const errFile = buildFile(raw, 'error');
+        const message = `图片 ${raw.name} 分辨率(宽*高)超出允许限制`;
+        showBlockMessage(message);
+        emit('error', new Error(message), errFile, fileList.value);
+        return;
+      }
+    }
+
     const file = buildFile(raw, 'ready');
 
-    // 生成本地预览地址，保证 picture-card 选图后立即回显缩略图。
-    if (isImage(raw)) {
-      if (typeof URL !== 'undefined' && URL.createObjectURL) {
-        file.preview = URL.createObjectURL(raw);
-        localPreviewUrls.add(file.preview);
-      } else {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          file.preview = e.target.result;
-          emit('change', file, fileList.value);
-        };
-        reader.readAsDataURL(raw);
-      }
-    }
+    // 生成本地预览地址，保证 picture-card 选图后立即回显缩略图。
+    if (isImage(raw)) {
+      if (typeof URL !== 'undefined' && URL.createObjectURL) {
+        file.preview = URL.createObjectURL(raw);
+        localPreviewUrls.add(file.preview);
+      } else {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          file.preview = e.target.result;
+          emit('change', file, fileList.value);
+        };
+        reader.readAsDataURL(raw);
+      }
+    }
 
     const beforeHook = props.beforeUpload ? props.beforeUpload(raw) : true;
     Promise.resolve(beforeHook).then((result) => {
@@ -536,12 +659,12 @@ const uploadFile = (file) => {
   Request.http(props.action, formData, 'POST', headers).then((res) => {
     file.status = 'success';
     file.response = res;
-    // 兼容 { data: 'url' } 和 { data: { url: '...' } } 两种结构
-    const url = typeof res?.data === 'string' ? res.data : (res?.data?.url || res?.url || '');
-    if (url) {
-      file.url = url;
-      revokeLocalPreview(file);
-    }
+    // 兼容 { data: 'url' } 和 { data: { url: '...' } } 两种结构
+    const url = typeof res?.data === 'string' ? res.data : (res?.data?.url || res?.url || '');
+    if (url) {
+      file.url = url;
+      revokeLocalPreview(file);
+    }
     console.log('[VtkUpload] res:', res, '| file.url:', file.url, '| fileList:', JSON.parse(JSON.stringify(fileList.value)));
     syncModel();
     emit('success', res, file, fileList.value);
@@ -556,11 +679,11 @@ const uploadFile = (file) => {
 
 /* -------------------- 移除文件 -------------------- */
 const handleRemove = (file) => {
-  const doRemove = () => {
-    revokeLocalPreview(file);
-    fileList.value = fileList.value.filter((f) => f.uid !== file.uid);
-    syncModel();
-    emit('remove', file, fileList.value);
+  const doRemove = () => {
+    revokeLocalPreview(file);
+    fileList.value = fileList.value.filter((f) => f.uid !== file.uid);
+    syncModel();
+    emit('remove', file, fileList.value);
   };
 
   if (props.beforeRemove) {
@@ -715,10 +838,10 @@ watch(previewVisible, (visible) => {
   resetPreviewTransform();
 });
 
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handlePreviewKeydown);
-  revokeAllLocalPreviews();
-});
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handlePreviewKeydown);
+  revokeAllLocalPreviews();
+});
 
 /* -------------------- 对外暴露方法 -------------------- */
 /** 手动触发未上传文件的上传 */
@@ -729,11 +852,11 @@ const submit = () => {
 };
 
 /** 清空文件列表 */
-const clearFiles = () => {
-  revokeAllLocalPreviews();
-  fileList.value = [];
-  syncModel();
-};
+const clearFiles = () => {
+  revokeAllLocalPreviews();
+  fileList.value = [];
+  syncModel();
+};
 
 /** 手动移除某个文件 */
 const remove = (file) => handleRemove(file);
@@ -892,24 +1015,24 @@ defineExpose({ submit, clearFiles, remove });
   position: relative;
 }
 
-.vtk-upload__preview-nav {
-  position: fixed;
-  top: 50%;
-  z-index: 10;
-  width: 50px;
-  height: 50px;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.5);
-  transform: translateY(-50%);
-}
-
-.vtk-upload__preview-nav--prev {
-  left: 20px;
-}
-
-.vtk-upload__preview-nav--next {
-  right: 20px;
-}
+.vtk-upload__preview-nav {
+  position: fixed;
+  top: 50%;
+  z-index: 10;
+  width: 50px;
+  height: 50px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  transform: translateY(-50%);
+}
+
+.vtk-upload__preview-nav--prev {
+  left: 20px;
+}
+
+.vtk-upload__preview-nav--next {
+  right: 20px;
+}
 
 .vtk-upload__preview-image-wrap {
   min-width: 100%;