@yxhl/specter-pui-vtk 1.0.85 → 1.0.86

package/package.json

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

package/src/components/assembly/VtkImg.vue

@@ -37,10 +37,10 @@
       @click:outside="closePreview"
     >
       <VCard class="image-viewer-card">
-        <v-toolbar dark color="primary">
-          <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>
@@ -53,14 +53,14 @@
             <VBtn icon dark @click="rotateImage(90)">
               <VIcon>mdi-rotate-right</VIcon>
             </VBtn>
-            <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>
+            <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 
@@ -379,7 +379,7 @@ const endImageDrag = (event) => {
 
 /* 图片查看器样式 */
 .image-viewer-card {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, 0.3);
   color: white;
 }
 

package/src/components/assembly/VtkUpload.vue

@@ -2,10 +2,10 @@
   <div class="vtk-upload">
     <!-- 拖拽 / 点击上传区域 -->
     <div
-      v-if="listType !== 'picture-card' && !detail"
-      :class="['vtk-upload__dragger', { 'is-dragover': isDragover, 'is-disabled': disabled }]"
-      title="点击上传"
-      @click="!disabled && triggerInput()"
+      v-if="listType !== 'picture-card' && !detail"
+      :class="['vtk-upload__dragger', { 'is-dragover': isDragover, 'is-disabled': disabled }]"
+      title="点击上传"
+      @click="!disabled && triggerInput()"
       @dragover.prevent="onDragover"
       @dragleave.prevent="isDragover = false"
       @drop.prevent="onDrop"
@@ -28,12 +28,12 @@
       >
         <v-img :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>
-          </VBtn>
-          <VBtn v-if="!disabled && !detail" icon size="x-small" variant="text" color="white" title="删除" @click.stop="handleRemove(file)">
-            <VIcon>mdi-delete</VIcon>
-          </VBtn>
+          <VBtn icon size="x-small" variant="text" color="white" title="查看" @click.stop="handlePreview(file)">
+            <VIcon>mdi-eye</VIcon>
+          </VBtn>
+          <VBtn v-if="!disabled && !detail" icon size="x-small" variant="text" color="white" title="删除" @click.stop="handleRemove(file)">
+            <VIcon>mdi-delete</VIcon>
+          </VBtn>
         </div>
         <!-- 上传进度 -->
         <div v-if="file.status === 'uploading'" class="vtk-upload__picture-card-progress">
@@ -43,10 +43,10 @@
 
       <!-- 添加按钮 -->
       <div
-        v-if="!disabled && !detail && (limit === 0 || fileList.length < limit)"
-        :class="['vtk-upload__picture-card-add', { 'is-dragover': isDragover }]"
-        title="添加文件"
-        @click="triggerInput()"
+        v-if="!disabled && !detail && (limit === 0 || fileList.length < limit)"
+        :class="['vtk-upload__picture-card-add', { 'is-dragover': isDragover }]"
+        title="添加文件"
+        @click="triggerInput()"
         @dragover.prevent="onDragover"
         @dragleave.prevent="isDragover = false"
         @drop.prevent="onDrop"
@@ -79,14 +79,14 @@
         <span class="vtk-upload__list-item-name flex-grow-1 text-truncate" @click="handlePreview(file)" :title="file.name">{{ file.name }}</span>
         <span v-if="file.status === 'uploading'" class="text-caption text-grey ml-2">{{ file.percentage }}%</span>
         <VBtn
-          v-if="!disabled && !detail"
+          v-if="!disabled && !detail"
           icon
           size="x-small"
-          variant="text"
-          color="grey"
-          class="ml-1"
-          title="删除"
-          @click="handleRemove(file)"
+          variant="text"
+          color="grey"
+          class="ml-1"
+          title="删除"
+          @click="handleRemove(file)"
         >
           <VIcon size="16">mdi-close</VIcon>
         </VBtn>
@@ -105,33 +105,57 @@
     <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 />
-          <VBtn icon variant="text" title="新窗口打开" @click="openCurrentPreview">
-            <VIcon>mdi-open-in-new</VIcon>
-          </VBtn>
-          <template v-if="isImage(previewFile)">
-            <VBtn icon variant="text" title="缩小" @click="zoomPreview(-0.3)">
-              <VIcon>mdi-magnify-minus-outline</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" title="放大" @click="zoomPreview(0.3)">
-              <VIcon>mdi-magnify-plus-outline</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" title="向左旋转" @click="rotatePreview(-90)">
-              <VIcon>mdi-rotate-left</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" title="向右旋转" @click="rotatePreview(90)">
-              <VIcon>mdi-rotate-right</VIcon>
-            </VBtn>
-            <VBtn icon variant="text" title="重置" @click="resetPreviewTransform">
-              <VIcon>mdi-refresh</VIcon>
-            </VBtn>
-          </template>
-          <VBtn icon variant="text" title="关闭" @click="closePreview">
-            <VIcon>mdi-close</VIcon>
-          </VBtn>
+          <v-toolbar-title class="text-truncate">{{ previewFile?.name }}</v-toolbar-title>
+          <VSpacer />
+          <VBtn icon variant="text" title="新窗口打开" @click="openCurrentPreview">
+            <VIcon>mdi-open-in-new</VIcon>
+          </VBtn>
+          <template v-if="isImage(previewFile)">
+            <VBtn icon variant="text" :disabled="!hasPreviewPrev" title="上一张" @click="switchPreviewImage(-1)">
+              <VIcon>mdi-chevron-left</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" :disabled="!hasPreviewNext" title="下一张" @click="switchPreviewImage(1)">
+              <VIcon>mdi-chevron-right</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" title="缩小" @click="zoomPreview(-0.3)">
+              <VIcon>mdi-magnify-minus-outline</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" title="放大" @click="zoomPreview(0.3)">
+              <VIcon>mdi-magnify-plus-outline</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" title="向左旋转" @click="rotatePreview(-90)">
+              <VIcon>mdi-rotate-left</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" title="向右旋转" @click="rotatePreview(90)">
+              <VIcon>mdi-rotate-right</VIcon>
+            </VBtn>
+            <VBtn icon variant="text" title="重置" @click="resetPreviewTransform">
+              <VIcon>mdi-refresh</VIcon>
+            </VBtn>
+          </template>
+          <VBtn icon variant="text" title="关闭" @click="closePreview">
+            <VIcon>mdi-close</VIcon>
+          </VBtn>
         </v-toolbar>
         <div class="vtk-upload__preview-body">
+          <VBtn
+            v-if="isImage(previewFile) && hasPreviewPrev"
+            icon
+            class="vtk-upload__preview-nav vtk-upload__preview-nav--prev"
+            title="上一张"
+            @click.stop="switchPreviewImage(-1)"
+          >
+            <VIcon size="36">mdi-chevron-left</VIcon>
+          </VBtn>
+          <VBtn
+            v-if="isImage(previewFile) && hasPreviewNext"
+            icon
+            class="vtk-upload__preview-nav vtk-upload__preview-nav--next"
+            title="下一张"
+            @click.stop="switchPreviewImage(1)"
+          >
+            <VIcon size="36">mdi-chevron-right</VIcon>
+          </VBtn>
           <div v-if="isImage(previewFile)" class="vtk-upload__preview-image-wrap">
             <img
               class="vtk-upload__preview-image"
@@ -154,7 +178,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import Request from '../../commons/request.js';
 
 defineOptions({
@@ -210,15 +234,15 @@ const props = defineProps({
     default: true,
   },
   /** 是否禁用 */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /** 详情模式：隐藏上传和删除入口，仅展示已上传文件并保留查看 */
-  detail: {
-    type: Boolean,
-    default: false,
-  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 详情模式：隐藏上传和删除入口，仅展示已上传文件并保留查看 */
+  detail: {
+    type: Boolean,
+    default: false,
+  },
   /** 附加请求头 */
   headers: {
     type: Object,
@@ -273,87 +297,105 @@ const previewTranslateX = ref(0);
 const previewTranslateY = ref(0);
 const previewDragState = ref(null);
 
-// 内部维护文件列表
-const fileList = ref([]);
-let isSyncingModel = false;
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (isSyncingModel) {
-      isSyncingModel = false;
-      return;
-    }
-
-    // Accept external URL lists or file object lists.
-    fileList.value = normalizeFileList(val || []);
-  },
-);
+// 内部维护文件列表
+const fileList = ref([]);
+let isSyncingModel = false;
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (isSyncingModel) {
+      isSyncingModel = false;
+      return;
+    }
+
+    // Accept external URL lists or file object lists.
+    fileList.value = normalizeFileList(val || []);
+  },
+);
 
 /* -------------------- 工具函数 -------------------- */
-let uidCounter = 0;
-const genUid = () => `vtk-upload-${Date.now()}-${uidCounter++}`;
-
+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');
-  } catch (e) {
-    return 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
-    .filter((item) => item)
-    .map((item) => {
-      if (typeof item === 'string') {
-        return {
+    .filter((item) => item)
+    .map((item) => {
+      if (typeof item === 'string') {
+        return {
           uid: genUid(),
           name: getFileNameFromUrl(item),
           size: 0,
-          type: '',
+          type: props.listType === 'picture-card' || isImageUrl(item) ? 'image/*' : '',
           status: 'success',
           percentage: 100,
           raw: null,
-          url: item,
-          preview: '',
-          response: null,
-        };
-      }
-
-      return {
+          url: item,
+          preview: '',
+          response: null,
+        };
+      }
+
+      return {
         uid: item.uid || genUid(),
         name: item.name || getFileNameFromUrl(item.url || item.preview),
         size: item.size || 0,
-        type: item.type || '',
+        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,
-        ...item,
-      };
-    });
-};
-
-fileList.value = normalizeFileList(props.modelValue || []);
-
-const isImage = (file) => {
-  if (!file) return false;
-  return /image\//.test(file.type) || /\.(png|jpg|jpeg|gif|bmp|webp|svg)$/i.test(file.name || '');
+        url: item.url || '',
+        preview: item.preview || '',
+        response: item.response || null,
+        ...item,
+      };
+    });
 };
 
+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 fileIcon = (file) => {
   if (file.status === 'error') return 'mdi-file-alert-outline';
   if (isImage(file)) return 'mdi-file-image-outline';
   return 'mdi-file-outline';
 };
 
+const getPreviewSrc = (file) => file?.url || file?.preview || '';
+
+const previewImageList = computed(() => fileList.value.filter((file) => isImage(file) && getPreviewSrc(file)));
+
+const previewImageIndex = computed(() => {
+  if (!previewFile.value) return -1;
+  return previewImageList.value.findIndex((file) => file.uid === previewFile.value.uid);
+});
+
+const hasPreviewPrev = computed(() => previewImageIndex.value > 0);
+const hasPreviewNext = computed(() => previewImageIndex.value >= 0 && previewImageIndex.value < previewImageList.value.length - 1);
+
 const previewImageStyle = computed(() => ({
   transform: `translate(${previewTranslateX.value}px, ${previewTranslateY.value}px) scale(${previewScale.value}) rotate(${previewRotation.value}deg)`,
 }));
@@ -364,20 +406,20 @@ const triggerInput = () => {
 };
 
 /* -------------------- 拖拽 -------------------- */
-const onDragover = () => {
-  if (!props.disabled && !props.detail) isDragover.value = true;
-};
-
-const onDrop = (e) => {
-  isDragover.value = false;
-  if (props.disabled || props.detail) return;
-  processFiles(Array.from(e.dataTransfer.files));
-};
+const onDragover = () => {
+  if (!props.disabled && !props.detail) isDragover.value = true;
+};
+
+const onDrop = (e) => {
+  isDragover.value = false;
+  if (props.disabled || props.detail) return;
+  processFiles(Array.from(e.dataTransfer.files));
+};
 
 /* -------------------- input change -------------------- */
-const onInputChange = (e) => {
-  if (props.disabled || props.detail) return;
-  processFiles(Array.from(e.target.files));
+const onInputChange = (e) => {
+  if (props.disabled || props.detail) return;
+  processFiles(Array.from(e.target.files));
   // 清空，允许重复选同一文件
   e.target.value = '';
 };
@@ -439,16 +481,16 @@ const addFile = (file) => {
   emit('change', file, fileList.value);
 };
 
-const syncModel = () => {
-  const urls = fileList.value
-    .filter((f) => f.status === 'success' && f.url)
-    .map((f) => String(f.url));
-  isSyncingModel = true;
-  emit('update:modelValue', urls);
-  nextTick(() => {
-    isSyncingModel = false;
-  });
-};
+const syncModel = () => {
+  const urls = fileList.value
+    .filter((f) => f.status === 'success' && f.url)
+    .map((f) => String(f.url));
+  isSyncingModel = true;
+  emit('update:modelValue', urls);
+  nextTick(() => {
+    isSyncingModel = false;
+  });
+};
 
 /* -------------------- 上传逻辑 -------------------- */
 const uploadFile = (file) => {
@@ -525,6 +567,39 @@ const zoomPreview = (step) => {
   previewScale.value = Math.min(3, Math.max(0.2, nextScale));
 };
 
+const setImagePreviewFile = (file) => {
+  previewFile.value = {
+    ...file,
+    _previewSrc: getPreviewSrc(file),
+  };
+  resetPreviewTransform();
+};
+
+const switchPreviewImage = (step) => {
+  if (!isImage(previewFile.value)) return;
+
+  const index = previewImageIndex.value;
+  const nextFile = previewImageList.value[index + step];
+  if (!nextFile) return;
+
+  emit('preview', nextFile);
+  setImagePreviewFile(nextFile);
+};
+
+const handlePreviewKeydown = (event) => {
+  if (!previewVisible.value || !isImage(previewFile.value)) return;
+
+  if (event.key === 'ArrowLeft' && hasPreviewPrev.value) {
+    event.preventDefault();
+    switchPreviewImage(-1);
+  }
+
+  if (event.key === 'ArrowRight' && hasPreviewNext.value) {
+    event.preventDefault();
+    switchPreviewImage(1);
+  }
+};
+
 const startPreviewDrag = (event) => {
   if (previewScale.value <= 1) return;
   event.preventDefault();
@@ -555,28 +630,28 @@ const endPreviewDrag = (event) => {
   previewDragState.value = null;
 };
 
-const openFileInNewTab = (file, fileUrl) => {
-  if (fileUrl) {
-    window.open(fileUrl, '_blank');
-    return;
-  }
+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 openCurrentPreview = () => {
-  if (!previewFile.value) return;
-  openFileInNewTab(previewFile.value, previewFile.value._previewSrc || previewFile.value.url || previewFile.value.preview);
-};
-
-const handlePreview = (file) => {
+    win?.addEventListener('unload', () => URL.revokeObjectURL(blobUrl));
+  }
+};
+
+const openCurrentPreview = () => {
+  if (!previewFile.value) return;
+  openFileInNewTab(previewFile.value, previewFile.value._previewSrc || previewFile.value.url || previewFile.value.preview);
+};
+
+const handlePreview = (file) => {
   emit('preview', file);
 
-  const fileUrl = file.url || file.preview;
+  const fileUrl = getPreviewSrc(file);
 
   // Non-image files open in a new tab.
   if (!isImage(file) && !isExcel(file)) {
@@ -586,28 +661,34 @@ const handlePreview = (file) => {
 
   // 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 {
-      // Excel without a public URL falls back to the dialog hint.
-      previewFile.value = { ...file, _previewSrc: fileUrl };
-      resetPreviewTransform();
-      previewVisible.value = true;
+    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;
     }
     return;
   }
 
-  // Images preview inside the dialog.
-  previewFile.value = {
-    ...file,
-    _previewSrc: fileUrl,
-  };
-  resetPreviewTransform();
+  // Images preview inside the dialog.
+  setImagePreviewFile(file);
   previewVisible.value = true;
 };
 
 watch(previewVisible, (visible) => {
-  if (!visible) resetPreviewTransform();
+  if (visible) {
+    window.addEventListener('keydown', handlePreviewKeydown);
+    return;
+  }
+
+  window.removeEventListener('keydown', handlePreviewKeydown);
+  resetPreviewTransform();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handlePreviewKeydown);
 });
 
 /* -------------------- 对外暴露方法 -------------------- */
@@ -729,7 +810,7 @@ defineExpose({ submit, clearFiles, remove });
 .vtk-upload__picture-card-mask {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+  background: rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -768,16 +849,38 @@ defineExpose({ submit, clearFiles, remove });
 
 /* ---- preview ---- */
 .vtk-upload__preview-card {
+  --vtk-upload-preview-bg: rgba(0, 0, 0, 0.3);
+
   height: 100vh;
-  background: #111;
+  background: var(--vtk-upload-preview-bg);
 }
 
 .vtk-upload__preview-body {
   height: calc(100vh - 64px);
   overflow: auto;
-  background: #111;
+  background: var(--vtk-upload-preview-bg);
+  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-image-wrap {
   min-width: 100%;
   min-height: 100%;
@@ -810,7 +913,7 @@ defineExpose({ submit, clearFiles, remove });
   align-items: center;
   justify-content: center;
   padding: 32px;
-  color: rgba(255, 255, 255, 0.72);
+  color: rgba(var(--v-theme-on-surface), 0.72);
   text-align: center;
 }
 </style>