@yxhl/specter-pui-vtk 1.0.80 → 1.0.82

package/package.json

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

package/src/components/assembly/VtkImg.vue

@@ -37,21 +37,30 @@
       @click:outside="closePreview"
     >
       <VCard class="image-viewer-card">
-        <v-toolbar dark color="primary">
-          <VBtn icon dark @click="closePreview">
-            <VIcon>mdi-close</VIcon>
-          </VBtn>
-          <v-toolbar-title>{{ currentImageTitle }}</v-toolbar-title>
-          <VSpacer></VSpacer>
-          <v-toolbar-items>
+        <v-toolbar dark color="primary">
+          <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 @click="zoomImage(0.3)">
+              <VIcon>mdi-magnify-plus-outline</VIcon>
+            </VBtn>
             <VBtn icon dark @click="rotateImage(-90)">
               <VIcon>mdi-rotate-left</VIcon>
             </VBtn>
             <VBtn icon dark @click="rotateImage(90)">
               <VIcon>mdi-rotate-right</VIcon>
             </VBtn>
-          </v-toolbar-items>
-        </v-toolbar>
+            <VBtn icon dark @click="resetImageTransform">
+              <VIcon>mdi-refresh</VIcon>
+            </VBtn>
+            <VBtn icon dark @click="closePreview">
+              <VIcon>mdi-close</VIcon>
+            </VBtn>
+          </v-toolbar-items>
+        </v-toolbar>
         
         <div class="image-viewer-content">
           <VBtn 
@@ -63,11 +72,14 @@
             <VIcon>mdi-chevron-left</VIcon>
           </VBtn>
           
-          <div class="image-container">
+          <div class="image-container" @wheel.prevent="handleImageWheel">
             <v-img
               :src="currentImageUrl"
               class="viewer-image"
-              :style="{ transform: `rotate(${imageRotation}deg)` }"
+              :class="{ 'viewer-image--draggable': imageScale > 1 }"
+              :style="viewerImageStyle"
+              draggable="false"
+              @pointerdown="startImageDrag"
             />
           </div>
           
@@ -150,6 +162,11 @@ const props = defineProps({
 const showPreview = ref(false);
 // 图片旋转角度
 const imageRotation = ref(0);
+// 图片缩放和拖动位置
+const imageScale = ref(1);
+const imageTranslateX = ref(0);
+const imageTranslateY = ref(0);
+const imageDragState = ref(null);
 // 当前图片索引（预览模式下使用）
 const currentIndex = ref(0);
 
@@ -225,11 +242,23 @@ const hasNext = computed(() => {
   return props.imageList.length > 1 && currentIndex.value < props.imageList.length - 1;
 });
 
+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;
+  imageTranslateX.value = 0;
+  imageTranslateY.value = 0;
+  imageDragState.value = null;
+};
+
 // 监听预览状态变化
 watch(showPreview, (newVal) => {
   if (newVal) {
     // 打开预览时重置旋转角度和当前索引
-    imageRotation.value = 0;
+    resetImageTransform();
     currentIndex.value = props.index;
   }
 });
@@ -250,7 +279,7 @@ const closePreview = () => {
 const prevImage = () => {
   if (hasPrev.value) {
     currentIndex.value--;
-    imageRotation.value = 0; // 切换图片时重置旋转
+    resetImageTransform();
   }
 };
 
@@ -258,7 +287,7 @@ const prevImage = () => {
 const nextImage = () => {
   if (hasNext.value) {
     currentIndex.value++;
-    imageRotation.value = 0; // 切换图片时重置旋转
+    resetImageTransform();
   }
 };
 
@@ -266,6 +295,49 @@ const nextImage = () => {
 const rotateImage = (degrees) => {
   imageRotation.value += degrees;
 };
+
+const zoomImage = (step) => {
+  const nextScale = Number((imageScale.value + step).toFixed(2));
+  imageScale.value = Math.min(3, Math.max(0.2, nextScale));
+  if (imageScale.value <= 1) {
+    imageTranslateX.value = 0;
+    imageTranslateY.value = 0;
+  }
+};
+
+const handleImageWheel = (event) => {
+  zoomImage(event.deltaY < 0 ? 0.2 : -0.2);
+};
+
+const startImageDrag = (event) => {
+  if (imageScale.value <= 1) return;
+  event.preventDefault();
+  const target = event.currentTarget;
+  imageDragState.value = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    translateX: imageTranslateX.value,
+    translateY: imageTranslateY.value,
+  };
+  target.setPointerCapture?.(event.pointerId);
+  target.addEventListener('pointermove', moveImageDrag);
+  target.addEventListener('pointerup', endImageDrag, { once: true });
+  target.addEventListener('pointercancel', endImageDrag, { once: true });
+};
+
+const moveImageDrag = (event) => {
+  const state = imageDragState.value;
+  if (!state || state.pointerId !== event.pointerId) return;
+  imageTranslateX.value = state.translateX + event.clientX - state.startX;
+  imageTranslateY.value = state.translateY + event.clientY - state.startY;
+};
+
+const endImageDrag = (event) => {
+  event.currentTarget?.releasePointerCapture?.(event.pointerId);
+  event.currentTarget?.removeEventListener('pointermove', moveImageDrag);
+  imageDragState.value = null;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -330,7 +402,18 @@ const rotateImage = (degrees) => {
 .viewer-image {
   max-width: 90%;
   max-height: 80vh;
+  transform-origin: center center;
   transition: transform 0.3s ease;
+  user-select: none;
+  touch-action: none;
+}
+
+.viewer-image--draggable {
+  cursor: grab;
+}
+
+.viewer-image--draggable:active {
+  cursor: grabbing;
 }
 
 .nav-button {
@@ -369,4 +452,4 @@ const rotateImage = (degrees) => {
 :deep(.v-img__placeholder) {
   filter: blur(0px);
 }
-</style>
+</style>

package/src/components/assembly/VtkUpload.vue

@@ -99,44 +99,44 @@
     </div>
 
     <!-- 预览 Dialog -->
-    <VDialog v-model="previewVisible" fullscreen scrollable @click:outside="closePreview">
-      <VCard class="vtk-upload__preview-card">
-        <v-toolbar color="primary" density="comfortable">
-          <v-toolbar-title class="text-truncate">{{ previewFile?.name }}</v-toolbar-title>
-          <VSpacer />
-          <template v-if="isImage(previewFile)">
-            <VBtn icon variant="text" @click="zoomPreview(-0.1)">
-              <VIcon>mdi-magnify-minus-outline</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" @click="zoomPreview(0.1)">
-              <VIcon>mdi-magnify-plus-outline</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" @click="rotatePreview(-90)">
-              <VIcon>mdi-rotate-left</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" @click="rotatePreview(90)">
-              <VIcon>mdi-rotate-right</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" @click="resetPreviewTransform">
-              <VIcon>mdi-refresh</VIcon>
-            </VBtn>
-          </template>
-          <VBtn icon variant="text" @click="closePreview">
-            <VIcon>mdi-close</VIcon>
-          </VBtn>
-        </v-toolbar>
-        <div class="vtk-upload__preview-body">
-          <div v-if="isImage(previewFile)" class="vtk-upload__preview-image-wrap">
-            <img
-              class="vtk-upload__preview-image"
-              :src="previewFile?._previewSrc"
-              :alt="previewFile?.name"
-              :style="previewImageStyle"
-              draggable="false"
-              @pointerdown="startPreviewDrag"
-            />
-          </div>
-          <div v-else class="vtk-upload__preview-empty">
+    <VDialog v-model="previewVisible" fullscreen scrollable @click:outside="closePreview">
+      <VCard class="vtk-upload__preview-card">
+        <v-toolbar color="primary" density="comfortable">
+          <v-toolbar-title class="text-truncate">{{ previewFile?.name }}</v-toolbar-title>
+          <VSpacer />
+          <template v-if="isImage(previewFile)">
+            <VBtn icon variant="text" @click="zoomPreview(-0.3)">
+              <VIcon>mdi-magnify-minus-outline</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" @click="zoomPreview(0.3)">
+              <VIcon>mdi-magnify-plus-outline</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" @click="rotatePreview(-90)">
+              <VIcon>mdi-rotate-left</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" @click="rotatePreview(90)">
+              <VIcon>mdi-rotate-right</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" @click="resetPreviewTransform">
+              <VIcon>mdi-refresh</VIcon>
+            </VBtn>
+          </template>
+          <VBtn icon variant="text" @click="closePreview">
+            <VIcon>mdi-close</VIcon>
+          </VBtn>
+        </v-toolbar>
+        <div class="vtk-upload__preview-body">
+          <div v-if="isImage(previewFile)" class="vtk-upload__preview-image-wrap">
+            <img
+              class="vtk-upload__preview-image"
+              :src="previewFile?._previewSrc"
+              :alt="previewFile?.name"
+              :style="previewImageStyle"
+              draggable="false"
+              @pointerdown="startPreviewDrag"
+            />
+          </div>
+          <div v-else class="vtk-upload__preview-empty">
             <VIcon size="64">{{ isExcel(previewFile) ? 'mdi-microsoft-excel' : 'mdi-file-outline' }}</VIcon>
             <div class="mt-2">{{ previewFile?.name }}</div>
             <div class="text-caption mt-1">This file cannot be previewed online.</div>
@@ -148,7 +148,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import Request from '../../commons/request.js';
 
 defineOptions({
@@ -253,14 +253,14 @@ const emit = defineEmits([
 
 /* -------------------- 内部状态 -------------------- */
 const inputRef = ref(null);
-const isDragover = ref(false);
-const previewVisible = ref(false);
-const previewFile = ref(null);
-const previewScale = ref(1);
-const previewRotation = ref(0);
-const previewTranslateX = ref(0);
-const previewTranslateY = ref(0);
-const previewDragState = ref(null);
+const isDragover = ref(false);
+const previewVisible = ref(false);
+const previewFile = ref(null);
+const previewScale = ref(1);
+const previewRotation = ref(0);
+const previewTranslateX = ref(0);
+const previewTranslateY = ref(0);
+const previewDragState = ref(null);
 
 // 内部维护文件列表
 const fileList = ref([...(props.modelValue || [])]);
@@ -283,15 +283,15 @@ const isImage = (file) => {
   return /image\//.test(file.type) || /\.(png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(file.name || '');
 };
 
-const fileIcon = (file) => {
-  if (file.status === 'error') return 'mdi-file-alert-outline';
-  if (isImage(file)) return 'mdi-file-image-outline';
-  return 'mdi-file-outline';
-};
-
-const previewImageStyle = computed(() => ({
-  transform: `translate(${previewTranslateX.value}px, ${previewTranslateY.value}px) scale(${previewScale.value}) rotate(${previewRotation.value}deg)`,
-}));
+const fileIcon = (file) => {
+  if (file.status === 'error') return 'mdi-file-alert-outline';
+  if (isImage(file)) return 'mdi-file-image-outline';
+  return 'mdi-file-outline';
+};
+
+const previewImageStyle = computed(() => ({
+  transform: `translate(${previewTranslateX.value}px, ${previewTranslateY.value}px) scale(${previewScale.value}) rotate(${previewRotation.value}deg)`,
+}));
 
 /* -------------------- 触发 input -------------------- */
 const triggerInput = () => {
@@ -433,88 +433,88 @@ const handleRemove = (file) => {
 };
 
 /* -------------------- 预览 -------------------- */
-const isPdf = (file) => /\.pdf$/i.test(file?.name || '') || file?.type === 'application/pdf';
-const isExcel = (file) => /\.(xlsx|xls)$/i.test(file?.name || '');
-
-const resetPreviewTransform = () => {
-  previewScale.value = 1;
-  previewRotation.value = 0;
-  previewTranslateX.value = 0;
-  previewTranslateY.value = 0;
-};
-
-const closePreview = () => {
-  previewVisible.value = false;
-};
-
-const rotatePreview = (degrees) => {
-  previewRotation.value += degrees;
-};
-
-const zoomPreview = (step) => {
-  const nextScale = Number((previewScale.value + step).toFixed(2));
-  previewScale.value = Math.min(3, Math.max(0.2, nextScale));
-};
-
-const startPreviewDrag = (event) => {
-  if (previewScale.value <= 1) return;
-  event.preventDefault();
-  const target = event.currentTarget;
-  previewDragState.value = {
-    pointerId: event.pointerId,
-    startX: event.clientX,
-    startY: event.clientY,
-    translateX: previewTranslateX.value,
-    translateY: previewTranslateY.value,
-  };
-  target.setPointerCapture?.(event.pointerId);
-  target.addEventListener('pointermove', movePreviewDrag);
-  target.addEventListener('pointerup', endPreviewDrag, { once: true });
-  target.addEventListener('pointercancel', endPreviewDrag, { once: true });
-};
-
-const movePreviewDrag = (event) => {
-  const state = previewDragState.value;
-  if (!state || state.pointerId !== event.pointerId) return;
-  previewTranslateX.value = state.translateX + event.clientX - state.startX;
-  previewTranslateY.value = state.translateY + event.clientY - state.startY;
-};
-
-const endPreviewDrag = (event) => {
-  event.currentTarget?.releasePointerCapture?.(event.pointerId);
-  event.currentTarget?.removeEventListener('pointermove', movePreviewDrag);
-  previewDragState.value = null;
-};
-
-const handlePreview = (file) => {
-  emit('preview', file);
+const isExcel = (file) => /\.(xlsx|xls)$/i.test(file?.name || '');
+
+const resetPreviewTransform = () => {
+  previewScale.value = 1;
+  previewRotation.value = 0;
+  previewTranslateX.value = 0;
+  previewTranslateY.value = 0;
+};
+
+const closePreview = () => {
+  previewVisible.value = false;
+};
+
+const rotatePreview = (degrees) => {
+  previewRotation.value += degrees;
+};
+
+const zoomPreview = (step) => {
+  const nextScale = Number((previewScale.value + step).toFixed(2));
+  previewScale.value = Math.min(3, Math.max(0.2, nextScale));
+};
+
+const startPreviewDrag = (event) => {
+  if (previewScale.value <= 1) return;
+  event.preventDefault();
+  const target = event.currentTarget;
+  previewDragState.value = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    translateX: previewTranslateX.value,
+    translateY: previewTranslateY.value,
+  };
+  target.setPointerCapture?.(event.pointerId);
+  target.addEventListener('pointermove', movePreviewDrag);
+  target.addEventListener('pointerup', endPreviewDrag, { once: true });
+  target.addEventListener('pointercancel', endPreviewDrag, { once: true });
+};
+
+const movePreviewDrag = (event) => {
+  const state = previewDragState.value;
+  if (!state || state.pointerId !== event.pointerId) return;
+  previewTranslateX.value = state.translateX + event.clientX - state.startX;
+  previewTranslateY.value = state.translateY + event.clientY - state.startY;
+};
+
+const endPreviewDrag = (event) => {
+  event.currentTarget?.releasePointerCapture?.(event.pointerId);
+  event.currentTarget?.removeEventListener('pointermove', movePreviewDrag);
+  previewDragState.value = null;
+};
+
+const openFileInNewTab = (file, fileUrl) => {
+  if (fileUrl) {
+    window.open(fileUrl, '_blank');
+    return;
+  }
+
+  if (file.raw instanceof File || file.raw instanceof Blob) {
+    const blobUrl = URL.createObjectURL(file.raw);
+    const win = window.open(blobUrl, '_blank');
+    win?.addEventListener('unload', () => URL.revokeObjectURL(blobUrl));
+  }
+};
+
+const handlePreview = (file) => {
+  emit('preview', file);
 
   const fileUrl = file.url || file.preview;
 
-  // PDF：新标签页直接打开（浏览器原生支持）
-  if (isPdf(file)) {
-    if (fileUrl) {
-      window.open(fileUrl, '_blank');
-    } else if (file.raw instanceof File || file.raw instanceof Blob) {
-      // 本地未上传文件，用 Blob URL 打开
-      const blobUrl = URL.createObjectURL(file.raw);
-      const win = window.open(blobUrl, '_blank');
-      win?.addEventListener('unload', () => URL.revokeObjectURL(blobUrl));
-    } else {
-      // 无可用地址也无本地文件，降级到 Dialog
-      previewFile.value = { ...file, _previewSrc: fileUrl };
-      resetPreviewTransform();
-      previewVisible.value = true;
-    }
+  // Non-image files open in a new tab.
+  if (!isImage(file) && !isExcel(file)) {
+    openFileInNewTab(file, fileUrl);
     return;
   }
 
   // Excel：Office Online 查看器（需要文件有公网 URL）
   if (isExcel(file)) {
-    if (fileUrl && /^https?:\/\//.test(fileUrl)) {
-      window.open(`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`, '_blank');
-    } else {
-      // 无公网地址，降级为 Dialog 显示提示
+    if (fileUrl && /^https?:\/\//.test(fileUrl)) {
+      window.open(`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`, '_blank');
+    } else {
+      // Excel without a public URL falls back to the dialog hint.
       previewFile.value = { ...file, _previewSrc: fileUrl };
       resetPreviewTransform();
       previewVisible.value = true;
@@ -522,19 +522,18 @@ const handlePreview = (file) => {
     return;
   }
 
-  // 图片及其他：Dialog 内嵌预览
-  // 统一挂载可用的预览地址，供 Dialog 使用
-  previewFile.value = {
-    ...file,
-    _previewSrc: fileUrl,
-  };
-  resetPreviewTransform();
-  previewVisible.value = true;
-};
-
-watch(previewVisible, (visible) => {
-  if (!visible) resetPreviewTransform();
-});
+  // Images preview inside the dialog.
+  previewFile.value = {
+    ...file,
+    _previewSrc: fileUrl,
+  };
+  resetPreviewTransform();
+  previewVisible.value = true;
+};
+
+watch(previewVisible, (visible) => {
+  if (!visible) resetPreviewTransform();
+});
 
 /* -------------------- 对外暴露方法 -------------------- */
 /** 手动触发未上传文件的上传 */
@@ -688,55 +687,55 @@ defineExpose({ submit, clearFiles, remove });
 }
 
 /* ---- 隐藏 input ---- */
-.vtk-upload__input {
-  display: none;
-}
-
-/* ---- preview ---- */
-.vtk-upload__preview-card {
-  height: 100vh;
-  background: #111;
-}
-
-.vtk-upload__preview-body {
-  height: calc(100vh - 64px);
-  overflow: auto;
-  background: #111;
-}
-
-.vtk-upload__preview-image-wrap {
-  min-width: 100%;
-  min-height: 100%;
-  padding: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vtk-upload__preview-image {
-  display: block;
-  max-width: 90vw;
-  max-height: calc(100vh - 128px);
-  object-fit: contain;
-  transform-origin: center center;
-  transition: transform 0.2s ease;
-  user-select: none;
-  cursor: grab;
-  touch-action: none;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.vtk-upload__preview-empty {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  color: rgba(255, 255, 255, 0.72);
-  text-align: center;
-}
-</style>
+.vtk-upload__input {
+  display: none;
+}
+
+/* ---- preview ---- */
+.vtk-upload__preview-card {
+  height: 100vh;
+  background: #111;
+}
+
+.vtk-upload__preview-body {
+  height: calc(100vh - 64px);
+  overflow: auto;
+  background: #111;
+}
+
+.vtk-upload__preview-image-wrap {
+  min-width: 100%;
+  min-height: 100%;
+  padding: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vtk-upload__preview-image {
+  display: block;
+  max-width: 90vw;
+  max-height: calc(100vh - 128px);
+  object-fit: contain;
+  transform-origin: center center;
+  transition: transform 0.2s ease;
+  user-select: none;
+  cursor: grab;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.vtk-upload__preview-empty {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  color: rgba(255, 255, 255, 0.72);
+  text-align: center;
+}
+</style>