@yxhl/specter-pui-vtk 1.0.87 → 1.0.89

package/package.json

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

package/src/components/assembly/VtkImg.vue

@@ -41,9 +41,15 @@
           <v-toolbar-title>{{ currentImageTitle }}</v-toolbar-title>
           <VSpacer></VSpacer>
           <v-toolbar-items>
-            <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>
@@ -102,22 +108,28 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, watch } from 'vue';
+<script setup>
+import { ref, computed, watch, getCurrentInstance } from 'vue';
 
-defineOptions({
-  name: 'VtkImg',
-  inheritAttrs: true
-});
+defineOptions({
+  name: 'VtkImg',
+  inheritAttrs: true
+});
+
+const { proxy } = getCurrentInstance();
 
 const props = defineProps({
-  src: {
-    type: String,
-    default: null,
-  },
-  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,
@@ -215,9 +227,32 @@ const currentImageUrl = computed(() => {
       }
     }
   }
-  return srcWithToken.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) {
@@ -250,9 +285,228 @@ const viewerImageStyle = computed(() => ({
   transform: `translate(${imageTranslateX.value}px, ${imageTranslateY.value}px) scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
 }));
 
-const resetImageTransform = () => {
-  imageRotation.value = 0;
-  imageScale.value = 1;
+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 triggerBrowserDownload = (blob, fileName) => {
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 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;
+  }
+};
+
+const getDownloadFileHandle = async (fileName, blob) => {
+  if (typeof window.showSaveFilePicker !== 'function') {
+    showDownloadToast('当前浏览器不支持选择保存目录，将使用默认下载方式。', 'warning');
+    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);
+    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;
+  }
+
+  try {
+    const blob = await fetchCurrentImageBlob();
+    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;
+    }
+
+    triggerBrowserDownload(blob, fileName);
+    showDownloadToast('图片已开始下载。', 'success');
+  } catch (error) {
+    console.error('下载图片失败：图片地址不允许跨域读取，请配置资源 CORS 或传入同源 downloadSrc。', error);
+    triggerBrowserUrlDownload(downloadUrl, getCurrentImageFileName());
+    showDownloadToast('图片下载失败，已切换为浏览器下载。', 'warning');
+  }
+};
+
+const resetImageTransform = () => {
+  imageRotation.value = 0;
+  imageScale.value = 1;
   imageTranslateX.value = 0;
   imageTranslateY.value = 0;
   imageDragState.value = null;