@yxhl/specter-pui-vtk 1.0.77 → 1.0.78

package/src/components/assembly/VtkUpload.vue

@@ -1,602 +1,602 @@
-<template>
-  <div class="vtk-upload">
-    <!-- 拖拽 / 点击上传区域 -->
-    <div
-      v-if="listType !== 'picture-card'"
-      :class="['vtk-upload__dragger', { 'is-dragover': isDragover, 'is-disabled': disabled }]"
-      @click="!disabled && triggerInput()"
-      @dragover.prevent="onDragover"
-      @dragleave.prevent="isDragover = false"
-      @drop.prevent="onDrop"
-    >
-      <slot>
-        <div class="vtk-upload__dragger-inner">
-          <VIcon size="40" color="grey-lighten-1">mdi-cloud-upload-outline</VIcon>
-          <div class="text-body-2 mt-2 text-grey">将文件拖到此处，或<span class="text-primary" style="cursor:pointer">点击上传</span></div>
-          <div v-if="tip" class="text-caption text-grey-lighten-1 mt-1">{{ tip }}</div>
-        </div>
-      </slot>
-    </div>
-
-    <!-- picture-card 模式 -->
-    <div v-if="listType === 'picture-card'" class="vtk-upload__picture-card-wrap">
-      <div
-        v-for="file in fileList"
-        :key="file.uid"
-        class="vtk-upload__picture-card-item"
-      >
-        <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>
-        </div>
-        <!-- 上传进度 -->
-        <div v-if="file.status === 'uploading'" class="vtk-upload__picture-card-progress">
-          <v-progress-circular :model-value="file.percentage" size="36" color="white" />
-        </div>
-      </div>
-
-      <!-- 添加按钮 -->
-      <div
-        v-if="!disabled && (limit === 0 || fileList.length < limit)"
-        :class="['vtk-upload__picture-card-add', { 'is-dragover': isDragover }]"
-        @click="triggerInput()"
-        @dragover.prevent="onDragover"
-        @dragleave.prevent="isDragover = false"
-        @drop.prevent="onDrop"
-      >
-        <VIcon size="28" color="grey-lighten-1">mdi-plus</VIcon>
-      </div>
-    </div>
-
-    <!-- 隐藏的 input -->
-    <input
-      ref="inputRef"
-      type="file"
-      class="vtk-upload__input"
-      :accept="accept"
-      :multiple="multiple"
-      @change="onInputChange"
-    />
-
-    <!-- 文件列表 (非 picture-card) -->
-    <div v-if="showFileList && listType !== 'picture-card' && fileList.length > 0" class="vtk-upload__list mt-2">
-      <div
-        v-for="file in fileList"
-        :key="file.uid"
-        :class="['vtk-upload__list-item', `is-${file.status}`]"
-        style="cursor: pointer;"
-      >
-        <VIcon size="18" class="mr-1" :color="file.status === 'error' ? 'error' : 'primary'">
-          {{ fileIcon(file) }}
-        </VIcon>
-        <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"
-          icon
-          size="x-small"
-          variant="text"
-          color="grey"
-          class="ml-1"
-          @click="handleRemove(file)"
-        >
-          <VIcon size="16">mdi-close</VIcon>
-        </VBtn>
-        <!-- 进度条 -->
-        <v-progress-linear
-          v-if="file.status === 'uploading'"
-          :model-value="file.percentage"
-          color="primary"
-          class="vtk-upload__list-progress"
-          height="2"
-        />
-      </div>
-    </div>
-
-    <!-- 预览 Dialog -->
-    <VDialog v-model="previewVisible" max-width="800">
-      <VCard>
-        <v-card-title class="d-flex align-center bg-primary">
-				{{ previewFile?.name }}
-				<v-spacer></v-spacer>
-				<v-btn class="mx-0" icon @click="previewVisible = false" variant="plain">
-					<v-icon>mdi-close</v-icon>
-				</v-btn>
-			</v-card-title>
-        <div class="pa-4 d-flex justify-center">
-          <v-img v-if="isImage(previewFile)" :src="previewFile?._previewSrc" max-height="600" contain />
-          <div v-else class="text-center pa-8 text-grey">
-            <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">该文件暂时无法在线预览</div>
-          </div>
-        </div>
-      </VCard>
-    </VDialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import Request from '../../commons/request.js';
-
-defineOptions({
-  name: 'VtkUpload',
-  inheritAttrs: false,
-});
-
-const props = defineProps({
-  /** v-model 文件列表 */
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
-  /** 上传地址 */
-  action: {
-    type: String,
-    default: '',
-  },
-  /** 接受的文件类型，同原生 accept */
-  accept: {
-    type: String,
-    default: '',
-  },
-  /** 是否多选 */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  /** 最大上传数量，0 表示不限制 */
-  limit: {
-    type: Number,
-    default: 0,
-  },
-  /** 单文件最大体积，单位 MB，0 表示不限制 */
-  maxSize: {
-    type: Number,
-    default: 0,
-  },
-  /** 列表类型：text | picture | picture-card */
-  listType: {
-    type: String,
-    default: 'text',
-    validator: (v) => ['text', 'picture', 'picture-card'].includes(v),
-  },
-  /** 是否显示文件列表 */
-  showFileList: {
-    type: Boolean,
-    default: true,
-  },
-  /** 是否自动上传 */
-  autoUpload: {
-    type: Boolean,
-    default: true,
-  },
-  /** 是否禁用 */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /** 附加请求头 */
-  headers: {
-    type: Object,
-    default: () => ({}),
-  },
-  /** 附加请求数据 */
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-  /** 文件字段名 */
-  name: {
-    type: String,
-    default: 'file',
-  },
-  /** 提示文字 */
-  tip: {
-    type: String,
-    default: '',
-  },
-  /** 上传前钩子，返回 false 或 rejected Promise 则停止上传 */
-  beforeUpload: {
-    type: Function,
-    default: null,
-  },
-  /** 移除前钩子 */
-  beforeRemove: {
-    type: Function,
-    default: null,
-  },
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'change',
-  'success',
-  'error',
-  'progress',
-  'remove',
-  'exceed',
-  'preview',
-]);
-
-/* -------------------- 内部状态 -------------------- */
-const inputRef = ref(null);
-const isDragover = ref(false);
-const previewVisible = ref(false);
-const previewFile = ref(null);
-
-// 内部维护文件列表
-const fileList = ref([...(props.modelValue || [])]);
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    // 外部传入字符串数组（url 列表）时跳过，避免覆盖内部状态
-    if (!val?.length || typeof val[0] === 'string') return;
-    fileList.value = [...val];
-  },
-);
-
-/* -------------------- 工具函数 -------------------- */
-let uidCounter = 0;
-const genUid = () => `vtk-upload-${Date.now()}-${uidCounter++}`;
-
-const isImage = (file) => {
-  if (!file) return false;
-  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';
-};
-
-/* -------------------- 触发 input -------------------- */
-const triggerInput = () => {
-  inputRef.value && inputRef.value.click();
-};
-
-/* -------------------- 拖拽 -------------------- */
-const onDragover = () => {
-  if (!props.disabled) isDragover.value = true;
-};
-
-const onDrop = (e) => {
-  isDragover.value = false;
-  if (props.disabled) return;
-  processFiles(Array.from(e.dataTransfer.files));
-};
-
-/* -------------------- input change -------------------- */
-const onInputChange = (e) => {
-  processFiles(Array.from(e.target.files));
-  // 清空，允许重复选同一文件
-  e.target.value = '';
-};
-
-/* -------------------- 文件处理 -------------------- */
-const processFiles = (rawFiles) => {
-  if (!rawFiles.length) return;
-
-  // 数量限制检查
-  if (props.limit > 0 && fileList.value.length + rawFiles.length > props.limit) {
-    emit('exceed', rawFiles, fileList.value);
-    return;
-  }
-
-  rawFiles.forEach((raw) => {
-    // 体积检查
-    if (props.maxSize > 0 && raw.size / 1024 / 1024 > props.maxSize) {
-      const errFile = buildFile(raw, 'error');
-      emit('error', new Error(`文件 ${raw.name} 超过最大限制 ${props.maxSize}MB`), errFile, fileList.value);
-      return;
-    }
-
-    const file = buildFile(raw, 'ready');
-
-    // 生成预览
-    if (isImage(raw)) {
-      const reader = new FileReader();
-      reader.onload = (e) => { file.preview = e.target.result; };
-      reader.readAsDataURL(raw);
-    }
-
-    const beforeHook = props.beforeUpload ? props.beforeUpload(raw) : true;
-    Promise.resolve(beforeHook).then((result) => {
-      if (result === false) return;
-      addFile(file);
-      if (props.autoUpload && props.action) {
-        uploadFile(file);
-      }
-    }).catch(() => {});
-  });
-};
-
-const buildFile = (raw, status) => ({
-  uid: genUid(),
-  name: raw.name,
-  size: raw.size,
-  type: raw.type,
-  status,
-  percentage: 0,
-  raw,
-  url: '',
-  preview: '',
-  response: null,
-});
-
-const addFile = (file) => {
-  fileList.value.push(file);
-  syncModel();
-  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 uploadFile = (file) => {
-  file.status = 'uploading';
-  const formData = new FormData();
-  formData.append(props.name, file.raw);
-  Object.entries(props.data).forEach(([k, v]) => formData.append(k, v));
-
-  // 使用 axios 直接调，以获得 onUploadProgress
-  const tokenKey = window.VTK_CONFIG?.storageKeys?.token || '_mis_acis_token';
-  const token = window.$vtk?.storage?.get(tokenKey) || localStorage.getItem(tokenKey);
-
-  const headers = {
-    'content-type': 'multipart/form-data',
-    ...props.headers,
-  };
-  if (token) headers['Authorization'] = `Bearer ${token}`;
-
-  Request.http(props.action, formData, 'POST', headers).then((res) => {
-    file.status = 'success';
-    file.response = res;
-    // 兼容 { data: 'url' } 和 { data: { url: '...' } } 两种结构
-    const url = typeof res?.data === 'string' ? res.data : (res?.data?.url || res?.url || '');
-    if (url) file.url = url;
-    console.log('[VtkUpload] res:', res, '| file.url:', file.url, '| fileList:', JSON.parse(JSON.stringify(fileList.value)));
-    syncModel();
-    emit('success', res, file, fileList.value);
-    emit('change', file, fileList.value);
-  }).catch((err) => {
-    file.status = 'error';
-    syncModel();
-    emit('error', err, file, fileList.value);
-    emit('change', file, fileList.value);
-  });
-};
-
-/* -------------------- 移除文件 -------------------- */
-const handleRemove = (file) => {
-  const doRemove = () => {
-    fileList.value = fileList.value.filter((f) => f.uid !== file.uid);
-    syncModel();
-    emit('remove', file, fileList.value);
-  };
-
-  if (props.beforeRemove) {
-    Promise.resolve(props.beforeRemove(file, fileList.value)).then((result) => {
-      if (result !== false) doRemove();
-    }).catch(() => {});
-  } else {
-    doRemove();
-  }
-};
-
-/* -------------------- 预览 -------------------- */
-const isPdf = (file) => /\.pdf$/i.test(file?.name || '') || file?.type === 'application/pdf';
-const isExcel = (file) => /\.(xlsx|xls)$/i.test(file?.name || '');
-
-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 };
-      previewVisible.value = true;
-    }
-    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 显示提示
-      previewFile.value = { ...file, _previewSrc: fileUrl };
-      previewVisible.value = true;
-    }
-    return;
-  }
-
-  // 图片及其他：Dialog 内嵌预览
-  // 统一挂载可用的预览地址，供 Dialog 使用
-  previewFile.value = {
-    ...file,
-    _previewSrc: fileUrl,
-  };
-  previewVisible.value = true;
-};
-
-/* -------------------- 对外暴露方法 -------------------- */
-/** 手动触发未上传文件的上传 */
-const submit = () => {
-  fileList.value
-    .filter((f) => f.status === 'ready' && props.action)
-    .forEach(uploadFile);
-};
-
-/** 清空文件列表 */
-const clearFiles = () => {
-  fileList.value = [];
-  syncModel();
-};
-
-/** 手动移除某个文件 */
-const remove = (file) => handleRemove(file);
-
-defineExpose({ submit, clearFiles, remove });
-</script>
-
-<style lang="scss" scoped>
-.vtk-upload {
-  width: 100%;
-}
-
-/* ---- 拖拽区域 ---- */
-.vtk-upload__dragger {
-  border: 1px dashed rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  padding: 24px 16px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
-  background: transparent;
-
-  &:hover:not(.is-disabled) {
-    border-color: rgb(var(--v-theme-primary));
-  }
-
-  &.is-dragover {
-    border-color: rgb(var(--v-theme-primary));
-    background: rgba(var(--v-theme-primary), 0.05);
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-}
-
-/* ---- 文件列表 ---- */
-.vtk-upload__list {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-.vtk-upload__list-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 4px 4px 4px 8px;
-  border-radius: 4px;
-  font-size: 13px;
-  transition: background 0.15s;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-
-  &.is-error {
-    color: rgb(var(--v-theme-error));
-  }
-
-  &.is-success .vtk-upload__list-item-name {
-    cursor: pointer;
-    &:hover { color: rgb(var(--v-theme-primary)); }
-  }
-}
-
-.vtk-upload__list-item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 500px;
-}
-
-.vtk-upload__list-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-/* ---- picture-card ---- */
-.vtk-upload__picture-card-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.vtk-upload__picture-card-item,
-.vtk-upload__picture-card-add {
-  width: 100px;
-  height: 100px;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.vtk-upload__picture-card-item {
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-
-  &:hover .vtk-upload__picture-card-mask {
-    opacity: 1;
-  }
-}
-
-.vtk-upload__picture-card-mask {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.vtk-upload__picture-card-progress {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vtk-upload__picture-card-add {
-  border: 1px dashed rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
-
-  &:hover, &.is-dragover {
-    border-color: rgb(var(--v-theme-primary));
-    background: rgba(var(--v-theme-primary), 0.04);
-  }
-}
-
-/* ---- 隐藏 input ---- */
-.vtk-upload__input {
-  display: none;
-}
-</style>
+<template>
+  <div class="vtk-upload">
+    <!-- 拖拽 / 点击上传区域 -->
+    <div
+      v-if="listType !== 'picture-card'"
+      :class="['vtk-upload__dragger', { 'is-dragover': isDragover, 'is-disabled': disabled }]"
+      @click="!disabled && triggerInput()"
+      @dragover.prevent="onDragover"
+      @dragleave.prevent="isDragover = false"
+      @drop.prevent="onDrop"
+    >
+      <slot>
+        <div class="vtk-upload__dragger-inner">
+          <VIcon size="40" color="grey-lighten-1">mdi-cloud-upload-outline</VIcon>
+          <div class="text-body-2 mt-2 text-grey">将文件拖到此处，或<span class="text-primary" style="cursor:pointer">点击上传</span></div>
+          <div v-if="tip" class="text-caption text-grey-lighten-1 mt-1">{{ tip }}</div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- picture-card 模式 -->
+    <div v-if="listType === 'picture-card'" class="vtk-upload__picture-card-wrap">
+      <div
+        v-for="file in fileList"
+        :key="file.uid"
+        class="vtk-upload__picture-card-item"
+      >
+        <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>
+        </div>
+        <!-- 上传进度 -->
+        <div v-if="file.status === 'uploading'" class="vtk-upload__picture-card-progress">
+          <v-progress-circular :model-value="file.percentage" size="36" color="white" />
+        </div>
+      </div>
+
+      <!-- 添加按钮 -->
+      <div
+        v-if="!disabled && (limit === 0 || fileList.length < limit)"
+        :class="['vtk-upload__picture-card-add', { 'is-dragover': isDragover }]"
+        @click="triggerInput()"
+        @dragover.prevent="onDragover"
+        @dragleave.prevent="isDragover = false"
+        @drop.prevent="onDrop"
+      >
+        <VIcon size="28" color="grey-lighten-1">mdi-plus</VIcon>
+      </div>
+    </div>
+
+    <!-- 隐藏的 input -->
+    <input
+      ref="inputRef"
+      type="file"
+      class="vtk-upload__input"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onInputChange"
+    />
+
+    <!-- 文件列表 (非 picture-card) -->
+    <div v-if="showFileList && listType !== 'picture-card' && fileList.length > 0" class="vtk-upload__list mt-2">
+      <div
+        v-for="file in fileList"
+        :key="file.uid"
+        :class="['vtk-upload__list-item', `is-${file.status}`]"
+        style="cursor: pointer;"
+      >
+        <VIcon size="18" class="mr-1" :color="file.status === 'error' ? 'error' : 'primary'">
+          {{ fileIcon(file) }}
+        </VIcon>
+        <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"
+          icon
+          size="x-small"
+          variant="text"
+          color="grey"
+          class="ml-1"
+          @click="handleRemove(file)"
+        >
+          <VIcon size="16">mdi-close</VIcon>
+        </VBtn>
+        <!-- 进度条 -->
+        <v-progress-linear
+          v-if="file.status === 'uploading'"
+          :model-value="file.percentage"
+          color="primary"
+          class="vtk-upload__list-progress"
+          height="2"
+        />
+      </div>
+    </div>
+
+    <!-- 预览 Dialog -->
+    <VDialog v-model="previewVisible" max-width="800">
+      <VCard>
+        <v-card-title class="d-flex align-center bg-primary">
+				{{ previewFile?.name }}
+				<v-spacer></v-spacer>
+				<v-btn class="mx-0" icon @click="previewVisible = false" variant="plain">
+					<v-icon>mdi-close</v-icon>
+				</v-btn>
+			</v-card-title>
+        <div class="pa-4 d-flex justify-center">
+          <v-img v-if="isImage(previewFile)" :src="previewFile?._previewSrc" max-height="600" contain />
+          <div v-else class="text-center pa-8 text-grey">
+            <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">该文件暂时无法在线预览</div>
+          </div>
+        </div>
+      </VCard>
+    </VDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import Request from '../../commons/request.js';
+
+defineOptions({
+  name: 'VtkUpload',
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /** v-model 文件列表 */
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  /** 上传地址 */
+  action: {
+    type: String,
+    default: '',
+  },
+  /** 接受的文件类型，同原生 accept */
+  accept: {
+    type: String,
+    default: '',
+  },
+  /** 是否多选 */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  /** 最大上传数量，0 表示不限制 */
+  limit: {
+    type: Number,
+    default: 0,
+  },
+  /** 单文件最大体积，单位 MB，0 表示不限制 */
+  maxSize: {
+    type: Number,
+    default: 0,
+  },
+  /** 列表类型：text | picture | picture-card */
+  listType: {
+    type: String,
+    default: 'text',
+    validator: (v) => ['text', 'picture', 'picture-card'].includes(v),
+  },
+  /** 是否显示文件列表 */
+  showFileList: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否自动上传 */
+  autoUpload: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 附加请求头 */
+  headers: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 附加请求数据 */
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 文件字段名 */
+  name: {
+    type: String,
+    default: 'file',
+  },
+  /** 提示文字 */
+  tip: {
+    type: String,
+    default: '',
+  },
+  /** 上传前钩子，返回 false 或 rejected Promise 则停止上传 */
+  beforeUpload: {
+    type: Function,
+    default: null,
+  },
+  /** 移除前钩子 */
+  beforeRemove: {
+    type: Function,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'success',
+  'error',
+  'progress',
+  'remove',
+  'exceed',
+  'preview',
+]);
+
+/* -------------------- 内部状态 -------------------- */
+const inputRef = ref(null);
+const isDragover = ref(false);
+const previewVisible = ref(false);
+const previewFile = ref(null);
+
+// 内部维护文件列表
+const fileList = ref([...(props.modelValue || [])]);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    // 外部传入字符串数组（url 列表）时跳过，避免覆盖内部状态
+    if (!val?.length || typeof val[0] === 'string') return;
+    fileList.value = [...val];
+  },
+);
+
+/* -------------------- 工具函数 -------------------- */
+let uidCounter = 0;
+const genUid = () => `vtk-upload-${Date.now()}-${uidCounter++}`;
+
+const isImage = (file) => {
+  if (!file) return false;
+  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';
+};
+
+/* -------------------- 触发 input -------------------- */
+const triggerInput = () => {
+  inputRef.value && inputRef.value.click();
+};
+
+/* -------------------- 拖拽 -------------------- */
+const onDragover = () => {
+  if (!props.disabled) isDragover.value = true;
+};
+
+const onDrop = (e) => {
+  isDragover.value = false;
+  if (props.disabled) return;
+  processFiles(Array.from(e.dataTransfer.files));
+};
+
+/* -------------------- input change -------------------- */
+const onInputChange = (e) => {
+  processFiles(Array.from(e.target.files));
+  // 清空，允许重复选同一文件
+  e.target.value = '';
+};
+
+/* -------------------- 文件处理 -------------------- */
+const processFiles = (rawFiles) => {
+  if (!rawFiles.length) return;
+
+  // 数量限制检查
+  if (props.limit > 0 && fileList.value.length + rawFiles.length > props.limit) {
+    emit('exceed', rawFiles, fileList.value);
+    return;
+  }
+
+  rawFiles.forEach((raw) => {
+    // 体积检查
+    if (props.maxSize > 0 && raw.size / 1024 / 1024 > props.maxSize) {
+      const errFile = buildFile(raw, 'error');
+      emit('error', new Error(`文件 ${raw.name} 超过最大限制 ${props.maxSize}MB`), errFile, fileList.value);
+      return;
+    }
+
+    const file = buildFile(raw, 'ready');
+
+    // 生成预览
+    if (isImage(raw)) {
+      const reader = new FileReader();
+      reader.onload = (e) => { file.preview = e.target.result; };
+      reader.readAsDataURL(raw);
+    }
+
+    const beforeHook = props.beforeUpload ? props.beforeUpload(raw) : true;
+    Promise.resolve(beforeHook).then((result) => {
+      if (result === false) return;
+      addFile(file);
+      if (props.autoUpload && props.action) {
+        uploadFile(file);
+      }
+    }).catch(() => {});
+  });
+};
+
+const buildFile = (raw, status) => ({
+  uid: genUid(),
+  name: raw.name,
+  size: raw.size,
+  type: raw.type,
+  status,
+  percentage: 0,
+  raw,
+  url: '',
+  preview: '',
+  response: null,
+});
+
+const addFile = (file) => {
+  fileList.value.push(file);
+  syncModel();
+  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 uploadFile = (file) => {
+  file.status = 'uploading';
+  const formData = new FormData();
+  formData.append(props.name, file.raw);
+  Object.entries(props.data).forEach(([k, v]) => formData.append(k, v));
+
+  // 使用 axios 直接调，以获得 onUploadProgress
+  const tokenKey = window.VTK_CONFIG?.storageKeys?.token || '_mis_acis_token';
+  const token = window.$vtk?.storage?.get(tokenKey) || localStorage.getItem(tokenKey);
+
+  const headers = {
+    'content-type': 'multipart/form-data',
+    ...props.headers,
+  };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  Request.http(props.action, formData, 'POST', headers).then((res) => {
+    file.status = 'success';
+    file.response = res;
+    // 兼容 { data: 'url' } 和 { data: { url: '...' } } 两种结构
+    const url = typeof res?.data === 'string' ? res.data : (res?.data?.url || res?.url || '');
+    if (url) file.url = url;
+    console.log('[VtkUpload] res:', res, '| file.url:', file.url, '| fileList:', JSON.parse(JSON.stringify(fileList.value)));
+    syncModel();
+    emit('success', res, file, fileList.value);
+    emit('change', file, fileList.value);
+  }).catch((err) => {
+    file.status = 'error';
+    syncModel();
+    emit('error', err, file, fileList.value);
+    emit('change', file, fileList.value);
+  });
+};
+
+/* -------------------- 移除文件 -------------------- */
+const handleRemove = (file) => {
+  const doRemove = () => {
+    fileList.value = fileList.value.filter((f) => f.uid !== file.uid);
+    syncModel();
+    emit('remove', file, fileList.value);
+  };
+
+  if (props.beforeRemove) {
+    Promise.resolve(props.beforeRemove(file, fileList.value)).then((result) => {
+      if (result !== false) doRemove();
+    }).catch(() => {});
+  } else {
+    doRemove();
+  }
+};
+
+/* -------------------- 预览 -------------------- */
+const isPdf = (file) => /\.pdf$/i.test(file?.name || '') || file?.type === 'application/pdf';
+const isExcel = (file) => /\.(xlsx|xls)$/i.test(file?.name || '');
+
+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 };
+      previewVisible.value = true;
+    }
+    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 显示提示
+      previewFile.value = { ...file, _previewSrc: fileUrl };
+      previewVisible.value = true;
+    }
+    return;
+  }
+
+  // 图片及其他：Dialog 内嵌预览
+  // 统一挂载可用的预览地址，供 Dialog 使用
+  previewFile.value = {
+    ...file,
+    _previewSrc: fileUrl,
+  };
+  previewVisible.value = true;
+};
+
+/* -------------------- 对外暴露方法 -------------------- */
+/** 手动触发未上传文件的上传 */
+const submit = () => {
+  fileList.value
+    .filter((f) => f.status === 'ready' && props.action)
+    .forEach(uploadFile);
+};
+
+/** 清空文件列表 */
+const clearFiles = () => {
+  fileList.value = [];
+  syncModel();
+};
+
+/** 手动移除某个文件 */
+const remove = (file) => handleRemove(file);
+
+defineExpose({ submit, clearFiles, remove });
+</script>
+
+<style lang="scss" scoped>
+.vtk-upload {
+  width: 100%;
+}
+
+/* ---- 拖拽区域 ---- */
+.vtk-upload__dragger {
+  border: 1px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 24px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  background: transparent;
+
+  &:hover:not(.is-disabled) {
+    border-color: rgb(var(--v-theme-primary));
+  }
+
+  &.is-dragover {
+    border-color: rgb(var(--v-theme-primary));
+    background: rgba(var(--v-theme-primary), 0.05);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+/* ---- 文件列表 ---- */
+.vtk-upload__list {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.vtk-upload__list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 4px 4px 4px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  transition: background 0.15s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  &.is-error {
+    color: rgb(var(--v-theme-error));
+  }
+
+  &.is-success .vtk-upload__list-item-name {
+    cursor: pointer;
+    &:hover { color: rgb(var(--v-theme-primary)); }
+  }
+}
+
+.vtk-upload__list-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 500px;
+}
+
+.vtk-upload__list-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* ---- picture-card ---- */
+.vtk-upload__picture-card-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.vtk-upload__picture-card-item,
+.vtk-upload__picture-card-add {
+  width: 100px;
+  height: 100px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.vtk-upload__picture-card-item {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+
+  &:hover .vtk-upload__picture-card-mask {
+    opacity: 1;
+  }
+}
+
+.vtk-upload__picture-card-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.vtk-upload__picture-card-progress {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vtk-upload__picture-card-add {
+  border: 1px dashed rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+
+  &:hover, &.is-dragover {
+    border-color: rgb(var(--v-theme-primary));
+    background: rgba(var(--v-theme-primary), 0.04);
+  }
+}
+
+/* ---- 隐藏 input ---- */
+.vtk-upload__input {
+  display: none;
+}
+</style>