@skyfox2000/webui 1.4.19 → 1.4.22

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/form/upload/uploadList.vue

@@ -79,6 +79,10 @@ export interface UploadListProps {
     * 是否显示删除
     */
    showDelete?: boolean;
+   /**
+    * 是否显示目录上传按钮
+    */
+   showFolderUpload?: boolean;
 }
 
 const props = withDefaults(defineProps<UploadListProps>(), {
@@ -93,6 +97,7 @@ const props = withDefaults(defineProps<UploadListProps>(), {
    showActionText: true,
    showOnlineSwitch: false,
    showDelete: true,
+   showFolderUpload: false,
 });
 
 const inputFactory = useInputFactory();
@@ -105,6 +110,7 @@ const displayList = ref<UploadFile[]>(props.fileList);
 const uploadList = ref<UploadFile[]>([]);
 
 const fileUploader = ref();
+const fileFolderUploader = ref();
 const emit = defineEmits(['update:file-list']);
 const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
 
@@ -137,11 +143,30 @@ const isMaxCountReached = (): boolean => {
 const prepareFileInfo = (file: any): UploadFile<any> => {
    const fileInfo = file as UploadFile<any>;
    if (!fileInfo.params) fileInfo.params = {};
+   
+   // 获取相对路径（只有目录上传时才有）
+   let relativePath = fileInfo.name;
+   if (fileInfo.webkitRelativePath) {
+      relativePath = fileInfo.webkitRelativePath;
+   }
+   
+   // 对于目录上传，使用相对路径作为文件名，保持目录结构
+   if (fileInfo.webkitRelativePath) {
+      fileInfo.name = fileInfo.webkitRelativePath;
+      fileInfo.fileName = fileInfo.webkitRelativePath.split('/').pop(); // 只取文件名部分
+   }
+   
    fileInfo.params.FileKey = fileInfo.name;
    if (props.parentPath) {
       fileInfo.params.FileKey = path.join('/', props.parentPath, fileInfo.name);
    }
    fileInfo.status = UploadStatus.Pending;
+   
+   // 保存相对路径用于显示（只有目录上传时才使用）
+   if (fileInfo.webkitRelativePath) {
+      fileInfo.relativePath = relativePath;
+   }
+   
    return fileInfo;
 };
 
@@ -231,6 +256,19 @@ const uploadProps = computed<UploadProps>(() => ({
    },
 }));
 
+const folderUploadProps = computed<UploadProps>(() => ({
+   accept: acceptString.value,
+   multiple: true,
+   directory: true,  // 添加标准属性
+   webkitdirectory: true,  // Webkit属性
+   fileList: [] as UploadProps['fileList'],
+   'onUpdate:fileList': (newFiles) => handleFileSelect(newFiles),
+   beforeUpload: () => false,
+   listType: 'text',
+   showUploadList: false,
+   customRequest: () => {},
+}));
+
 watch(
    () => props.fileList,
    (newVal) => {
@@ -375,11 +413,15 @@ const getStatus = (status?: UploadStatus) => {
 <template>
    <div class="w-full border border-solid border-gray-100 mt-1 rounded-md py-5" :class="[errInfo?.errClass]">
       <div class="flex items-center justify-between w-full">
-         <div class="w-35 mx-3">
+         <div class="w-35 mx-3 flex gap-2">
             <Upload ref="fileUploader" v-bind="uploadProps"
                v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
                <Button :class="[errInfo?.errClass + '-text']">选择文件</Button>
             </Upload>
+            <Upload v-if="showFolderUpload" ref="fileFolderUploader" :webkitdirectory="true" :directory="true" v-bind="folderUploadProps"
+               v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
+               <Button :class="[errInfo?.errClass + '-text']">选择目录</Button>
+            </Upload>
          </div>
          <div class="flex-1 text-sm text-gray-500" :class="[errInfo?.errClass + '-text']">
             {{ getPlaceholder() }}
@@ -387,11 +429,12 @@ const getStatus = (status?: UploadStatus) => {
       </div>
 
       <div class="mt-4 px-3">
-         <div v-for="(file, index) in displayList" :key="index" class="mb-2 pb-1">
+         <div v-for="(file, index) in displayList" :key="(props.parentPath || '') + (file.relativePath || file.name || index)" class="mb-2 pb-1">
             <div class="flex items-center justify-between">
                <div class="flex items-center">
                   <span class="text-gray-700 mr-2"
-                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']">{{ file.fileName ?? file.name
+                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']" 
+                     :title="file.relativePath || file.fileName || file.name">{{ file.fileName ?? file.name
                      }}</span>
                   <span>
                      <Tag :color="getStatusColor(file.status)">{{ getStatus(file.status) }}</Tag>

package/src/components/index.ts

@@ -19,6 +19,8 @@ export {
    Drawer,
    Form,
    FormItem,
+   List,
+   ListOperate,
    Search,
    SearchItem,
    Table,
@@ -50,6 +52,7 @@ export {
    Transfer,
    TransferTable,
    TreeSelect,
+   ImageList,
    UploadList,
 } from './form';
 

package/src/const/options.ts

@@ -1,8 +1,10 @@
+import { OptionItemProps } from '@/typings/option';
+
 /**
  * 静态选项
  */
 export class OPTIONS {
-   private static dict: Record<string, Record<string, any>[]> = {};
+   private static dict: Record<string, (Record<string, any> | OptionItemProps)[]> = {};
    static Keys = {
       EnableDisable: 'EnableDisable',
       SuccessResult: 'SuccessResult',
@@ -18,6 +20,14 @@ export class OPTIONS {
    static getOptions = (key: string) => {
       return OPTIONS.dict[key];
    };
+   /**
+    * 静态选择项列表
+    * @param key 名称
+    * @returns
+    */
+   static getOptionItems = (key: string) => {
+      return OPTIONS.dict[key] as OptionItemProps[];
+   };
    /**
     * 静态选择项对象
     * @param key 名称

package/src/index.ts

@@ -258,6 +258,8 @@ export {
    InputIcon,
    InputPassword,
    InputNumber,
+   List,
+   ListOperate,
    PropEditor,
    type PropConfigItem,
    Radio,
@@ -270,6 +272,7 @@ export {
    Transfer,
    TransferTable,
    TreeSelect,
+   ImageList,
    UploadList,
    Breadcrumb,
    Content,

package/src/typings/upload.d.ts

@@ -137,6 +137,16 @@ export interface UploadFile<T = AjaxResponse> {
     * minio文件信息
     */
    minioFile?: MinioFile;
+
+   /**
+    * 相对路径（目录上传时使用）
+    */
+   relativePath?: string;
+
+   /**
+    * 文件的相对路径（浏览器原生属性）
+    */
+   webkitRelativePath?: string;
 }
 
 /**