@yxhl/specter-pui-vtk 1.0.89 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yxhl/specter-pui-vtk",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "雅心互联 Vue 3 + Vuetify3 组件库",
   "type": "module",
   "main": "./dist/specter-pui.umd.js",

package/src/components/assembly/VtkImg.vue

@@ -41,15 +41,15 @@
           <v-toolbar-title>{{ currentImageTitle }}</v-toolbar-title>
           <VSpacer></VSpacer>
           <v-toolbar-items>
-            <VBtn icon dark title="新窗口打开" @click="openCurrentImageInNewWindow">
-              <VIcon>mdi-open-in-new</VIcon>
-            </VBtn>
-            <VBtn icon dark title="下载图片" @click="downloadCurrentImage">
-              <VIcon>mdi-download</VIcon>
-            </VBtn>
-            <VBtn icon dark @click="zoomImage(-0.3)">
-              <VIcon>mdi-magnify-minus-outline</VIcon>
-            </VBtn>
+            <VBtn icon dark title="新窗口打开" @click="openCurrentImageInNewWindow">
+              <VIcon>mdi-open-in-new</VIcon>
+            </VBtn>
+            <VBtn icon dark title="下载图片" @click="downloadCurrentImage">
+              <VIcon>mdi-download</VIcon>
+            </VBtn>
+            <VBtn icon dark @click="zoomImage(-0.3)">
+              <VIcon>mdi-magnify-minus-outline</VIcon>
+            </VBtn>
             <VBtn icon dark @click="zoomImage(0.3)">
               <VIcon>mdi-magnify-plus-outline</VIcon>
             </VBtn>
@@ -108,28 +108,28 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, watch, getCurrentInstance } from 'vue';
+<script setup>
+import { ref, computed, watch, getCurrentInstance } from 'vue';
 
-defineOptions({
-  name: 'VtkImg',
-  inheritAttrs: true
-});
-
-const { proxy } = getCurrentInstance();
+defineOptions({
+  name: 'VtkImg',
+  inheritAttrs: true
+});
+
+const { proxy } = getCurrentInstance();
 
 const props = defineProps({
-  src: {
-    type: String,
-    default: null,
-  },
-  downloadSrc: {
-    type: String,
-    default: '',
-  },
-  error: {
-    type: String,
-    default: new URL('../../assets/img/wxsq.png', import.meta.url).href,
+  src: {
+    type: String,
+    default: null,
+  },
+  downloadSrc: {
+    type: String,
+    default: '',
+  },
+  error: {
+    type: String,
+    default: new URL('../../assets/img/wxsq.png', import.meta.url).href,
   },
   preview: {
     type: Boolean,
@@ -227,32 +227,32 @@ const currentImageUrl = computed(() => {
       }
     }
   }
-  return srcWithToken.value;
-});
-
-const currentImageRawUrl = computed(() => {
-  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
-    const currentImage = props.imageList[currentIndex.value];
-    const url = typeof currentImage === 'string' ? currentImage : currentImage?.url;
-    return url || props.src;
-  }
-
-  return props.src;
-});
-
-const currentImageDownloadUrl = computed(() => {
-  if (props.downloadSrc) return props.downloadSrc;
-
-  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
-    const currentImage = props.imageList[currentIndex.value];
-    if (currentImage && typeof currentImage === 'object') {
-      return currentImage.downloadUrl || currentImage.downloadSrc || currentImage.url || props.src;
-    }
-  }
-
-  return currentImageRawUrl.value;
-});
-
+  return srcWithToken.value;
+});
+
+const currentImageRawUrl = computed(() => {
+  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
+    const currentImage = props.imageList[currentIndex.value];
+    const url = typeof currentImage === 'string' ? currentImage : currentImage?.url;
+    return url || props.src;
+  }
+
+  return props.src;
+});
+
+const currentImageDownloadUrl = computed(() => {
+  if (props.downloadSrc) return props.downloadSrc;
+
+  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
+    const currentImage = props.imageList[currentIndex.value];
+    if (currentImage && typeof currentImage === 'object') {
+      return currentImage.downloadUrl || currentImage.downloadSrc || currentImage.url || props.src;
+    }
+  }
+
+  return currentImageRawUrl.value;
+});
+
 // 当前图片标题
 const currentImageTitle = computed(() => {
   if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
@@ -285,65 +285,132 @@ const viewerImageStyle = computed(() => ({
   transform: `translate(${imageTranslateX.value}px, ${imageTranslateY.value}px) scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
 }));
 
-const openCurrentImageInNewWindow = () => {
-  if (!currentImageRawUrl.value) return;
-
-  window.open(currentImageRawUrl.value, '_blank', 'noopener');
-};
-
-const imageMimeExtensionMap = {
-  'image/bmp': 'bmp',
-  'image/gif': 'gif',
-  'image/jpeg': 'jpg',
-  'image/png': 'png',
-  'image/svg+xml': 'svg',
-  'image/webp': 'webp',
+const openCurrentImageInNewWindow = () => {
+  if (!currentImageRawUrl.value) return;
+
+  window.open(currentImageRawUrl.value, '_blank', 'noopener');
+};
+
+const imageMimeExtensionMap = {
+  'image/bmp': 'bmp',
+  'image/gif': 'gif',
+  'image/jpeg': 'jpg',
+  'image/png': 'png',
+  'image/svg+xml': 'svg',
+  'image/webp': 'webp',
+};
+
+const imageExtensionMimeMap = {
+  bmp: 'image/bmp',
+  gif: 'image/gif',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  webp: 'image/webp',
+};
+
+const getImageFileExtension = (blob) => {
+  const mimeType = blob?.type?.split(';')[0]?.toLowerCase();
+
+  if (mimeType && imageMimeExtensionMap[mimeType]) {
+    return imageMimeExtensionMap[mimeType];
+  }
+
+  try {
+    const { pathname } = new URL(currentImageRawUrl.value, window.location.href);
+    const matched = pathname.match(/\.([a-z0-9]+)$/i);
+    return matched?.[1]?.toLowerCase() || 'png';
+  } catch (error) {
+    return 'png';
+  }
+};
+
+const getCurrentImageFileName = (blob) => {
+  const extension = getImageFileExtension(blob);
+  const titleName = currentImageTitle.value?.trim();
+
+  if (titleName) {
+    const safeTitle = titleName.replace(/[\\/:*?"<>|]/g, '_').replace(/\.[a-z0-9]+$/i, '');
+    return `${safeTitle}.${extension}`;
+  }
+
+  try {
+    const { pathname } = new URL(currentImageRawUrl.value, window.location.href);
+    const urlName = decodeURIComponent(pathname.split('/').pop() || '')
+      .replace(/[\\/:*?"<>|]/g, '_')
+      .replace(/\.[a-z0-9]+$/i, '');
+    return urlName ? `${urlName}.${extension}` : `image.${extension}`;
+  } catch (error) {
+    return `image.${extension}`;
+  }
 };
 
-const imageExtensionMimeMap = {
-  bmp: 'image/bmp',
-  gif: 'image/gif',
-  jpeg: 'image/jpeg',
-  jpg: 'image/jpeg',
-  png: 'image/png',
-  svg: 'image/svg+xml',
-  webp: 'image/webp',
+const isDownloadRiskWebView = () => {
+  const ua = window.navigator?.userAgent || '';
+  const hasEmbeddedBridge = typeof window.dd !== 'undefined' || typeof window.AlipayJSBridge !== 'undefined';
+  return hasEmbeddedBridge
+    || /DingTalk|AliApp\(DingTalk|zjzwfw|zzd|ZJGovernment|ZhejiangGovernment|GovDing|Electron|WebView|; wv\)/i.test(ua);
 };
 
-const getImageFileExtension = (blob) => {
-  const mimeType = blob?.type?.split(';')[0]?.toLowerCase();
+const getDownloadFailureReason = (error) => {
+  const message = error?.message || '';
+  const name = error?.name || '';
 
-  if (mimeType && imageMimeExtensionMap[mimeType]) {
-    return imageMimeExtensionMap[mimeType];
+  if (name === 'AbortError') return '已取消下载';
+  if (name === 'NotAllowedError' || name === 'SecurityError') return '当前客户端阻止了文件保存';
+  if (name === 'QuotaExceededError') return '存储空间不足或客户端限制写入';
+  if (/Failed to fetch|NetworkError|Load failed/i.test(message)) {
+    return '图片地址不允许跨域读取，或当前网络无法访问图片';
   }
-
-  try {
-    const { pathname } = new URL(currentImageRawUrl.value, window.location.href);
-    const matched = pathname.match(/\.([a-z0-9]+)$/i);
-    return matched?.[1]?.toLowerCase() || 'png';
-  } catch (error) {
-    return 'png';
+  if (/HTTP error! status:\s*(\d+)/i.test(message)) {
+    return `图片请求失败，状态码 ${message.match(/HTTP error! status:\s*(\d+)/i)?.[1]}`;
   }
+  if (/Response is not an image/i.test(message)) return '下载地址返回的不是图片文件';
+  if (/Downloaded image is empty/i.test(message)) return '下载到的图片文件为空';
+  if (/Downloaded file is not an image/i.test(message)) return '下载到的文件不是图片格式';
+  if (/Downloaded image cannot be decoded/i.test(message)) return '下载到的图片无法被浏览器解析';
+
+  return message || '未知错误';
 };
 
-const getCurrentImageFileName = (blob) => {
-  const extension = getImageFileExtension(blob);
-  const titleName = currentImageTitle.value?.trim();
+const validateImageBlob = async (blob) => {
+  if (!blob || blob.size <= 0) {
+    throw new Error('Downloaded image is empty');
+  }
 
-  if (titleName) {
-    const safeTitle = titleName.replace(/[\\/:*?"<>|]/g, '_').replace(/\.[a-z0-9]+$/i, '');
-    return `${safeTitle}.${extension}`;
+  const extension = getImageFileExtension(blob);
+  const mimeType = blob.type?.split(';')[0]?.trim().toLowerCase();
+  if (mimeType && !mimeType.startsWith('image/')) {
+    throw new Error(`Downloaded file is not an image: ${mimeType}`);
   }
 
-  try {
-    const { pathname } = new URL(currentImageRawUrl.value, window.location.href);
-    const urlName = decodeURIComponent(pathname.split('/').pop() || '')
-      .replace(/[\\/:*?"<>|]/g, '_')
-      .replace(/\.[a-z0-9]+$/i, '');
-    return urlName ? `${urlName}.${extension}` : `image.${extension}`;
-  } catch (error) {
-    return `image.${extension}`;
+  if (typeof window.createImageBitmap === 'function' && mimeType !== 'image/svg+xml') {
+    try {
+      const bitmap = await window.createImageBitmap(blob);
+      bitmap.close?.();
+      return;
+    } catch (error) {
+      console.warn('VtkImg: createImageBitmap validation failed, fallback to Image validation', error);
+    }
   }
+
+  if (extension === 'svg') return;
+
+  await new Promise((resolve, reject) => {
+    const url = window.URL.createObjectURL(blob);
+    const image = new Image();
+
+    image.onload = () => {
+      window.URL.revokeObjectURL(url);
+      resolve();
+    };
+    image.onerror = () => {
+      window.URL.revokeObjectURL(url);
+      reject(new Error('Downloaded image cannot be decoded'));
+    };
+    image.src = url;
+  });
 };
 
 const triggerBrowserDownload = (blob, fileName) => {
@@ -354,159 +421,161 @@ const triggerBrowserDownload = (blob, fileName) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-  window.URL.revokeObjectURL(url);
-};
-
-const triggerBrowserUrlDownload = (url, fileName) => {
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = fileName;
-  link.target = '_blank';
-  link.rel = 'noopener';
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const showDownloadToast = (message, color = 'info') => {
-  try {
-    const toast = proxy?.$vtk?.message?.toast || window.$vtk?.message?.toast;
-    if (typeof toast === 'function') {
-      toast(message, { color });
-      return;
-    }
-  } catch (error) {
-    console.warn('VtkImg: failed to show message toast', error);
-  }
-
-  if (color === 'error' || color === 'warning') {
-    window.alert?.(message);
-  }
-};
-
-const isCrossOriginUrl = (url) => {
-  try {
-    return new URL(url, window.location.href).origin !== window.location.origin;
-  } catch (error) {
-    return false;
-  }
+  setTimeout(() => window.URL.revokeObjectURL(url), 60 * 1000);
 };
-
+
+const triggerBrowserUrlDownload = (url, fileName) => {
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  link.target = '_blank';
+  link.rel = 'noopener';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const showDownloadToast = (message, color = 'info') => {
+  try {
+    const toast = proxy?.$vtk?.message?.toast || window.$vtk?.message?.toast;
+    if (typeof toast === 'function') {
+      toast(message, { color });
+      return;
+    }
+  } catch (error) {
+    console.warn('VtkImg: failed to show message toast', error);
+  }
+
+  if (color === 'error' || color === 'warning') {
+    window.alert?.(message);
+  }
+};
+
 const getDownloadFileHandle = async (fileName, blob) => {
-  if (typeof window.showSaveFilePicker !== 'function') {
-    showDownloadToast('当前浏览器不支持选择保存目录，将使用默认下载方式。', 'warning');
+  if (isDownloadRiskWebView()) {
     return null;
   }
 
-  const extension = getImageFileExtension(blob);
-  const mimeType = imageExtensionMimeMap[extension] || blob?.type || 'image/png';
-
-  try {
-    return await window.showSaveFilePicker({
-      suggestedName: fileName,
-      types: [
-        {
-          description: '图片文件',
-          accept: {
-            [mimeType]: [`.${extension}`],
-          },
-        },
-      ],
-    });
-  } catch (error) {
-    if (error?.name === 'AbortError') {
-      showDownloadToast('已取消下载。');
-      return false;
-    }
-
-    console.warn('VtkImg: showSaveFilePicker unavailable, fallback to browser download', error);
+  if (typeof window.showSaveFilePicker !== 'function') {
+    showDownloadToast('当前浏览器不支持选择保存目录，将使用默认下载方式。', 'warning');
     return null;
   }
-};
-
-const isImageResponse = (response, blob, url) => {
-  const contentType = response.headers.get('content-type')?.split(';')[0]?.trim().toLowerCase();
-
-  if (contentType?.startsWith('image/')) return true;
-  if (blob.type?.startsWith('image/')) return true;
-
-  const canFallbackToExtension = !contentType
-    || contentType === 'application/octet-stream'
-    || contentType === 'binary/octet-stream';
-  if (!canFallbackToExtension) return false;
-
-  try {
-    const { pathname } = new URL(url, window.location.href);
-    const extension = pathname.match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase();
-    return Boolean(extension && imageExtensionMimeMap[extension]);
-  } catch (error) {
-    return false;
-  }
-};
-
-const fetchImageBlob = async (url) => {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  const blob = await response.blob();
-  if (!isImageResponse(response, blob, url)) {
-    const contentType = response.headers.get('content-type') || blob.type || 'unknown';
-    throw new Error(`Response is not an image: ${contentType}`);
-  }
-
-  return blob;
-};
-
-const fetchCurrentImageBlob = async () => {
-  if (!currentImageDownloadUrl.value) {
-    throw new Error('Image download url is empty');
-  }
-
-  return fetchImageBlob(currentImageDownloadUrl.value);
-};
-
-const downloadCurrentImage = async () => {
-  const downloadUrl = currentImageDownloadUrl.value;
-
-  if (!downloadUrl) {
-    showDownloadToast('暂无可下载的图片地址。', 'warning');
-    return;
-  }
-
-  if (isCrossOriginUrl(downloadUrl)) {
-    triggerBrowserUrlDownload(downloadUrl, getCurrentImageFileName());
-    showDownloadToast('图片为跨域地址，已切换为浏览器下载。', 'warning');
-    return;
-  }
-
+
+  const extension = getImageFileExtension(blob);
+  const mimeType = imageExtensionMimeMap[extension] || blob?.type || 'image/png';
+
+  try {
+    return await window.showSaveFilePicker({
+      suggestedName: fileName,
+      types: [
+        {
+          description: '图片文件',
+          accept: {
+            [mimeType]: [`.${extension}`],
+          },
+        },
+      ],
+    });
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      showDownloadToast('已取消下载。');
+      return false;
+    }
+
+    console.warn('VtkImg: showSaveFilePicker unavailable, fallback to browser download', error);
+    return null;
+  }
+};
+
+const isImageResponse = (response, blob, url) => {
+  const contentType = response.headers.get('content-type')?.split(';')[0]?.trim().toLowerCase();
+
+  if (contentType?.startsWith('image/')) return true;
+  if (blob.type?.startsWith('image/')) return true;
+
+  const canFallbackToExtension = !contentType
+    || contentType === 'application/octet-stream'
+    || contentType === 'binary/octet-stream';
+  if (!canFallbackToExtension) return false;
+
+  try {
+    const { pathname } = new URL(url, window.location.href);
+    const extension = pathname.match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase();
+    return Boolean(extension && imageExtensionMimeMap[extension]);
+  } catch (error) {
+    return false;
+  }
+};
+
+const fetchImageBlob = async (url) => {
+  const response = await fetch(url, { mode: 'cors' });
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const blob = await response.blob();
+  if (!isImageResponse(response, blob, url)) {
+    const contentType = response.headers.get('content-type') || blob.type || 'unknown';
+    throw new Error(`Response is not an image: ${contentType}`);
+  }
+
+  return blob;
+};
+
+const fetchCurrentImageBlob = async () => {
+  if (!currentImageDownloadUrl.value) {
+    throw new Error('Image download url is empty');
+  }
+
+  return fetchImageBlob(currentImageDownloadUrl.value);
+};
+
+const downloadCurrentImage = async () => {
+  const downloadUrl = currentImageDownloadUrl.value;
+
+  if (!downloadUrl) {
+    showDownloadToast('暂无可下载的图片地址。', 'warning');
+    return;
+  }
+
   try {
     const blob = await fetchCurrentImageBlob();
+    await validateImageBlob(blob);
     const fileName = getCurrentImageFileName(blob);
     const fileHandle = await getDownloadFileHandle(fileName, blob);
     if (fileHandle === false) return;
+
+    if (fileHandle) {
+      const writable = await fileHandle.createWritable();
+      await writable.write(blob);
+      await writable.close();
+      showDownloadToast('图片下载成功。', 'success');
+      return;
+    }
 
-    if (fileHandle) {
-      const writable = await fileHandle.createWritable();
-      await writable.write(blob);
-      await writable.close();
-      showDownloadToast('图片下载成功。', 'success');
+    triggerBrowserDownload(blob, fileName);
+    if (isDownloadRiskWebView()) {
+      showDownloadToast('已使用兼容方式下载图片，如文件仍不可用，请在系统浏览器中打开后保存。');
       return;
     }
 
-    triggerBrowserDownload(blob, fileName);
     showDownloadToast('图片已开始下载。', 'success');
   } catch (error) {
-    console.error('下载图片失败：图片地址不允许跨域读取，请配置资源 CORS 或传入同源 downloadSrc。', error);
+    const failureReason = getDownloadFailureReason(error);
+    console.error(`下载图片失败：${failureReason}`, error);
     triggerBrowserUrlDownload(downloadUrl, getCurrentImageFileName());
-    showDownloadToast('图片下载失败，已切换为浏览器下载。', 'warning');
+    if (isDownloadRiskWebView()) {
+      showDownloadToast(`下载失败：${failureReason}。已打开原图，请在系统浏览器中保存。`, 'warning');
+      return;
+    }
+
+    showDownloadToast(`下载失败：${failureReason}。已切换为浏览器下载。`, 'warning');
   }
 };
-
-const resetImageTransform = () => {
-  imageRotation.value = 0;
-  imageScale.value = 1;
+
+const resetImageTransform = () => {
+  imageRotation.value = 0;
+  imageScale.value = 1;
   imageTranslateX.value = 0;
   imageTranslateY.value = 0;
   imageDragState.value = null;