@skyfox2000/webui 1.4.19 → 1.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.19",
+   "version": "1.4.21",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

package/src/components/form/index.ts

@@ -54,5 +54,8 @@ export { TransferTable };
 import TreeSelect from './treeSelect/index.vue';
 export { TreeSelect };
 
+import ImageList from './upload/imageList.vue';
+export { ImageList };
+
 import UploadList from './upload/uploadList.vue';
 export { UploadList };

package/src/components/form/upload/imageList.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { ToolIcon } from '../../common';
+import { computed, ref, watch } from 'vue';
+import message from 'vue-m-message';
+import type { UploadProps } from 'ant-design-vue';
+import { Upload, Image } from 'ant-design-vue';
+import { UploadFile, path } from '@/index';
+import { useInputFactory } from '@/utils/form-validate';
+import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
+import { fastUpload } from '@/utils/file-upload';
+import { MicroOpenApis } from '@/utils/micro-openapis';
+import { isMicroApp } from '@skyfox2000/microbase';
+import { useUserInfo } from '@/stores/userInfo';
+
+export interface ImageListProps {
+   /**
+    * 是否自动上传
+    */
+   autoUpload?: boolean;
+   /**
+    * 上传Url
+    */
+   uploadUrl: IUrlInfo;
+   /**
+    * 预览Url
+    */
+   previewUrl?: IUrlInfo;
+   /**
+    * 删除Url
+    */
+   deleteUrl?: IUrlInfo;
+   /**
+    * 文件列表
+    */
+   fileList: UploadFile[];
+   /**
+    * 提示文字
+    */
+   placeholder?: string;
+   /**
+    * 文件后缀列表
+    */
+   fileExt?: string[];
+   /**
+    * 最大文件大小
+    */
+   maxFileSize?: number;
+   /**
+    * 最大数量
+    */
+   maxCount?: number;
+   /**
+    * 最大数量提示
+    */
+   maxCountTip?: boolean;
+   /**
+    * 文件大小提示
+    */
+   maxFileSizeTip?: boolean;
+   /**
+    * 文件类型提示
+    */
+   fileExtTip?: boolean;
+   /**
+    * 文件路径
+    */
+   parentPath?: string;
+   /**
+    * 是否显示删除
+    */
+   showDelete?: boolean;
+}
+
+const props = withDefaults(defineProps<ImageListProps>(), {
+   autoUpload: false,
+   fileList: () => [],
+   placeholder: '',
+   maxFileSize: 20,
+   maxCount: 5,
+   maxCountTip: false,
+   maxFileSizeTip: true,
+   fileExtTip: true,
+   showDelete: true,
+});
+
+const inputFactory = useInputFactory();
+const { errInfo } = inputFactory;
+
+// Upload 组件的文件列表更新
+const displayList = ref<UploadFile[]>(props.fileList);
+// Upload 组件的内部文件列表
+const uploadList = ref<UploadFile[]>([]);
+
+const fileUploader = ref();
+const emit = defineEmits(['update:file-list']);
+const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
+
+// 统一的文件验证函数
+const validateFile = (file: File): boolean => {
+   // 文件类型验证
+   if (props.fileExt && props.fileExt.length > 0) {
+      const extension = file.name.split('.').pop()?.toLowerCase() || '';
+      if (!props.fileExt.includes(extension)) {
+         message.error('文件类型不支持');
+         return false;
+      }
+   }
+
+   // 文件大小验证
+   if (file.size / 1024 / 1024 > props.maxFileSize) {
+      message.error(`文件大小超过 ${props.maxFileSize}MB 限制`);
+      return false;
+   }
+
+   return true;
+};
+
+// 检查是否达到最大数量限制
+const isMaxCountReached = (): boolean => {
+   return props.maxCount > 1 && displayList.value.length >= props.maxCount;
+};
+
+// 准备文件信息
+const prepareFileInfo = (file: any): UploadFile<any> => {
+   const fileInfo = file as UploadFile<any>;
+   if (!fileInfo.params) fileInfo.params = {};
+   fileInfo.params.FileKey = fileInfo.name;
+   if (props.parentPath) {
+      fileInfo.params.FileKey = path.join('/', props.parentPath, fileInfo.name);
+   }
+   return fileInfo;
+};
+
+// 简化的 beforeUpload - 只做基本验证,不处理业务逻辑
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+   return validateFile(file) && props.autoUpload;
+};
+
+// 处理文件选择(核心逻辑)
+const handleFileSelect = async (newFiles: any[]) => {
+   if (newFiles.length === 0) return;
+
+   const tempFiles = [...displayList.value];
+   let hasError = false;
+
+   for (const file of newFiles) {
+      // 验证文件
+      if (!validateFile(file)) {
+         hasError = true;
+         continue;
+      }
+
+      const fileInfo = prepareFileInfo(file);
+
+      // 如果maxCount=1,直接替换
+      if (props.maxCount === 1) {
+         tempFiles.length = 0;
+         tempFiles.push(fileInfo);
+         break;
+      }
+
+      // 检查是否达到最大数量限制
+      if (isMaxCountReached()) {
+         message.error(`最多上传 ${props.maxCount} 个文件`);
+         hasError = true;
+         break;
+      }
+
+      // 检查是否为同名文件(严格判断)
+      const existingIndex = tempFiles.findIndex((f) => f.name === fileInfo.name);
+
+      if (existingIndex > -1) {
+         // 同名文件:替换
+         tempFiles[existingIndex] = fileInfo;
+      } else {
+         // 新文件:添加到列表
+         tempFiles.push(fileInfo);
+      }
+   }
+
+   // 更新显示列表
+   if (!hasError || tempFiles.length > 0) {
+      displayList.value = tempFiles;
+   }
+
+   // 清空 Upload 组件的内部列表
+   uploadList.value = [];
+};
+
+// Upload 组件的文件列表更新
+const updateUploadList: UploadProps['onUpdate:fileList'] = (newFiles) => {
+   // 只更新 Upload 内部列表
+   uploadList.value = newFiles as unknown as UploadFile[];
+
+   // 处理新选择的文件
+   handleFileSelect(newFiles);
+};
+
+const uploadProps = computed<UploadProps>(() => ({
+   accept: acceptString.value,
+   multiple: props.maxCount !== 1,
+   fileList: uploadList.value as UploadProps['fileList'],
+   'onUpdate:fileList': updateUploadList,
+   beforeUpload: beforeUpload,
+   listType: 'text',
+   showUploadList: false,
+   customRequest: async () => {
+      if (props.autoUpload && props.uploadUrl) {
+         for (const file of displayList.value) {
+            if (file.percent === 0) {
+               await fastUpload(props.uploadUrl, file);
+            }
+         }
+      }
+   },
+}));
+
+watch(
+   () => props.fileList,
+   (newVal) => {
+      displayList.value = newVal;
+   },
+   { deep: true, immediate: true },
+);
+
+watch(
+   () => displayList.value,
+   (newVal) => {
+      emit('update:file-list', newVal);
+   },
+   { deep: true },
+);
+
+watch(
+   () => props.parentPath,
+   (newVal) => {
+      if (newVal) {
+         displayList.value.forEach((file) => {
+            file.params.FileKey = path.join('/', newVal, file.fileName);
+         });
+      }
+   },
+);
+
+const previewVisible = ref(false);
+const previewImage = ref('');
+
+const previewFile = (index: number) => {
+   const file = displayList.value[index];
+   previewImage.value = getImageUrl(file);
+   previewVisible.value = true;
+};
+
+const removeFile = (index: number) => {
+   const file = displayList.value[index];
+   if (props.deleteUrl && file.minioFile && file.minioFile.Key) {
+      httpPost<ApiResponse>(props.deleteUrl, {
+         Query: {
+            FileKey: file.minioFile!.Key,
+         },
+      }).then((res) => {
+         if (res && res.status === ResStatus.SUCCESS) {
+            message.success('删除文件成功！');
+            displayList.value.splice(index, 1);
+         }
+      });
+   } else {
+      displayList.value.splice(index, 1);
+   }
+};
+
+const imageUrlCache = ref<Map<string, string>>(new Map());
+
+const getImageUrl = (file: UploadFile) => {
+   // 新选择的文件，使用本地预览
+   if (file.originFileObj) {
+      return URL.createObjectURL(file.originFileObj);
+   }
+   // 已上传的文件，使用缓存的 Blob URL
+   if (file.minioFile) {
+      const cacheKey = file.minioFile.Key;
+      if (imageUrlCache.value.has(cacheKey)) {
+         return imageUrlCache.value.get(cacheKey)!;
+      }
+      // 异步加载图片
+      loadImageFromMinio(file);
+      return '';
+   }
+   return '';
+};
+
+const loadImageFromMinio = async (file: UploadFile) => {
+   if (!file.minioFile || !props.previewUrl) return;
+
+   const cacheKey = file.minioFile.Key;
+   try {
+      // 构建GET请求URL
+      const url = `${props.previewUrl.url}?FileKey=${encodeURIComponent(file.minioFile.Key)}`;
+
+      // 获取token
+      const token = isMicroApp() ? await MicroOpenApis.getToken() : useUserInfo().getToken();
+
+      // 使用fetch发起带token的GET请求
+      const response = await fetch(url, {
+         method: 'GET',
+         headers: {
+            Authorization: `Bearer ${token}`,
+         },
+      });
+
+      if (response.ok) {
+         const blob = await response.blob();
+         // 创建 Blob URL 并缓存
+         const blobUrl = URL.createObjectURL(blob);
+         imageUrlCache.value.set(cacheKey, blobUrl);
+      } else {
+         console.error('加载图片失败:', response.status);
+      }
+   } catch (error) {
+      console.error('加载图片失败:', error);
+   }
+};
+
+const showUploadButton = computed(() => {
+   return displayList.value.length < props.maxCount;
+});
+
+const hoveredIndex = ref(-1);
+</script>
+
+<template>
+   <div class="w-full mt-1">
+      <div class="flex flex-wrap gap-2">
+         <div v-for="(file, index) in displayList" :key="index" class="relative image-item"
+            @mouseenter="hoveredIndex = index" @mouseleave="hoveredIndex = -1">
+            <div class="w-16 h-16 border border-solid border-gray-200 rounded overflow-hidden">
+               <img :src="getImageUrl(file)" class="w-full h-full object-cover" />
+            </div>
+
+            <div v-if="hoveredIndex === index"
+               class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center gap-4 rounded">
+               <div v-if="previewUrl" class="flex items-center text-white cursor-pointer hover:text-blue-400"
+                  @click="previewFile(index)">
+                  <ToolIcon icon="icon-eye" clickable />
+                  <span class="text-sm ml-1">预览</span>
+               </div>
+               <div v-if="showDelete !== false" class="flex items-center text-white cursor-pointer hover:text-red-400"
+                  @click="removeFile(index)">
+                  <ToolIcon icon="icon-new" :angle="45" clickable />
+                  <span class="text-sm ml-1">删除</span>
+               </div>
+            </div>
+         </div>
+
+         <div v-if="showUploadButton" class="w-16 h-16">
+            <Upload ref="fileUploader" v-bind="uploadProps"
+               v-auth="{ role: ['Super', 'Admin'], permit: ':imagelist:upload' }">
+               <div
+                  class="w-16 h-16 border border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-blue-500 transition-colors"
+                  :class="[errInfo?.errClass]">
+                  <ToolIcon icon="icon-new" class="text-gray-400 w-10 h-10" />
+               </div>
+            </Upload>
+         </div>
+      </div>
+
+      <!-- 图片预览模态窗口 -->
+      <Image :preview="{ visible: previewVisible, onVisibleChange: (vis) => (previewVisible = vis) }"
+         :src="previewImage" style="display: none" />
+   </div>
+</template>
+
+<style scoped>
+.error {
+   border-color: #ff4d4f80;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+
+.error-text {
+   color: #ff4d4f !important;
+}
+
+.image-item {
+   transition: all 0.3s;
+}
+</style>

package/src/components/index.ts

@@ -50,6 +50,7 @@ export {
    Transfer,
    TransferTable,
    TreeSelect,
+   ImageList,
    UploadList,
 } from './form';
 

package/src/index.ts

@@ -270,6 +270,7 @@ export {
    Transfer,
    TransferTable,
    TreeSelect,
+   ImageList,
    UploadList,
    Breadcrumb,
    Content,