@yxhl/specter-pui-vtk 1.0.82 → 1.0.84

package/package.json

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

package/src/components/assembly/VtkUpload.vue

@@ -2,9 +2,10 @@
   <div class="vtk-upload">
     <!-- 拖拽 / 点击上传区域 -->
     <div
-      v-if="listType !== 'picture-card'"
-      :class="['vtk-upload__dragger', { 'is-dragover': isDragover, 'is-disabled': disabled }]"
-      @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"
@@ -27,12 +28,12 @@
       >
         <v-img :src="file.url || file.preview" cover class="fill-height" />
         <div class="vtk-upload__picture-card-mask">
-          <VBtn v-if="!disabled" icon size="x-small" variant="text" color="white" @click.stop="handlePreview(file)">
-            <VIcon>mdi-eye</VIcon>
-          </VBtn>
-          <VBtn v-if="!disabled" icon size="x-small" variant="text" color="white" @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">
@@ -42,9 +43,10 @@
 
       <!-- 添加按钮 -->
       <div
-        v-if="!disabled && (limit === 0 || fileList.length < limit)"
-        :class="['vtk-upload__picture-card-add', { 'is-dragover': isDragover }]"
-        @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"
@@ -77,13 +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"
+          v-if="!disabled && !detail"
           icon
           size="x-small"
-          variant="text"
-          color="grey"
-          class="ml-1"
-          @click="handleRemove(file)"
+          variant="text"
+          color="grey"
+          class="ml-1"
+          title="删除"
+          @click="handleRemove(file)"
         >
           <VIcon size="16">mdi-close</VIcon>
         </VBtn>
@@ -102,28 +105,31 @@
     <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-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>
         <div class="vtk-upload__preview-body">
           <div v-if="isImage(previewFile)" class="vtk-upload__preview-image-wrap">
@@ -148,7 +154,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import Request from '../../commons/request.js';
 
 defineOptions({
@@ -204,10 +210,15 @@ const props = defineProps({
     default: true,
   },
   /** 是否禁用 */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 详情模式：隐藏上传和删除入口，仅展示已上传文件并保留查看 */
+  detail: {
+    type: Boolean,
+    default: false,
+  },
   /** 附加请求头 */
   headers: {
     type: Object,
@@ -262,23 +273,77 @@ const previewTranslateX = ref(0);
 const previewTranslateY = ref(0);
 const previewDragState = ref(null);
 
-// 内部维护文件列表
-const fileList = ref([...(props.modelValue || [])]);
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    // 外部传入字符串数组（url 列表）时跳过，避免覆盖内部状态
-    if (!val?.length || typeof val[0] === 'string') return;
-    fileList.value = [...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++}`;
-
-const isImage = (file) => {
+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';
+  }
+};
+
+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: '',
+          status: 'success',
+          percentage: 100,
+          raw: null,
+          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 || '',
+        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 || '');
 };
@@ -299,19 +364,20 @@ const triggerInput = () => {
 };
 
 /* -------------------- 拖拽 -------------------- */
-const onDragover = () => {
-  if (!props.disabled) isDragover.value = true;
-};
-
-const onDrop = (e) => {
-  isDragover.value = false;
-  if (props.disabled) 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) => {
-  processFiles(Array.from(e.target.files));
+const onInputChange = (e) => {
+  if (props.disabled || props.detail) return;
+  processFiles(Array.from(e.target.files));
   // 清空，允许重复选同一文件
   e.target.value = '';
 };
@@ -373,12 +439,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));
-  emit('update:modelValue', urls);
-};
+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) => {
@@ -485,20 +555,25 @@ 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 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;