web-component-gallery 2.3.6 → 2.3.8

package/lib/browse/index.jsx

@@ -1,162 +1,105 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import { Base64 } from '../../utils/Base64'
-import { transferData } from '../../utils/Filter'
+// 引入自定义图标组件
 import { IconFont } from '../index'
+// 引入文件处理工具函数：格式化数据、获取文件类型、预览文件
+import { formatFileData, getFileType, previewFile } from '../../utils/File'
 
 const BrowseProps = {
+  // 数据源，支持字符串、数组或对象，默认为空数组
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).def([]),
-  /** 是否缩略图显示 */
+  // 是否以缩略图模式展示
   isThumb: PropTypes.bool,
-  /** 支持http地址可配置 */
+  // HTTPS 相关的配置对象，默认为空对象
   httpsUrl: PropTypes.object.def({}),
-  /** 限制高度 */
+  // 限制高度，支持字符串或数字类型
   astrictH: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+} 
+
+// 定义默认图标类型
+const ICON_TYPE = 'file_thumb'
+
+/**
+ * 根据 URL 和内容类型获取预览所需的标签类型
+ * @param {string} url - 文件 URL
+ * @param {string} contentType - 内容类型
+ * @returns {string} 返回 'img', 'audio', 'video' 或 'iframe'
+ */
+const getPreviewType = (url, contentType = '') => {
+  const type = getFileType(url, contentType)
+  switch (type) {
+    case 'PICTURE': return 'img'
+    case 'AUDIO': return 'audio'
+    case 'VIDEO': return 'video'
+    default: return 'iframe'
+  }
 }
 
-// 文件类型常量
-const FILE_TYPES = {
-  PICTURE: ["gif", "jpeg", "png", "jpg", "bmp", "tif", "svg", "psd", "raw", "WMF", "webp", "apng"],
-  AUDIO: ["mp3", "wma", "flac", "aac", "mmf", "amr", "m4a", "m4r", "ogg", "mp2", "wav"],
-  VIDEO: ["avi", "flv", "mpg", "mpeg", "mpe", "m1v", "m2v", "mpv2", "mp2v", "dat", "ts", "tp", "tpr", "pva", "pss", "mp4", "m4v", "m4p", "m4b", "3gp", "3gpp", "3g2", "3gp2", "ogg", "mov", "qt", "amr", "rm", "ram", "rmvb", "rpm"]
-}
-
-// 初始化数据
-const setInnerData = (data, https) => {
-  // 处理Base64图片数据
-  if (typeof data === 'string' && data.startsWith('data:image')) {
-    return [{
-      url: data,
-      contentType: 'image',
-      name: 'base64_image'
-    }]
+/**
+ * 渲染单个文件内容的函数
+ * @param {function} h - Vue 的渲染函数
+ * @param {object} param1 - 包含 url 和 name 的对象
+ * @param {array} images - 图片列表，用于预览
+ * @returns {VNode} 返回渲染的虚拟 DOM 节点
+ */
+const renderContent = function (h, { url, name }, images) {
+  if (!url) return
+
+  const { isThumb, astrictH } = this
+  const tag = getPreviewType(url)
+  const isImage = tag === 'img'
+  const isMedia = ['audio', 'video'].includes(tag)
+
+  // 点击处理函数：如果是图片或缩略图模式，则触发预览
+  const handleClick = () => {
+    if (isImage || isThumb) previewFile(url, images, this)
   }
 
-  // 解析数据
-  let innerData = transferData(data, 'Array')
-
-  // 确保返回数组格式
-  const dataArray = Array.isArray(innerData) ? innerData : [innerData]
-
-  const { FILEURL, KKFILEURL, OVERVIEWFILEURL } = https
-  
-  // URL前缀配置检查
-  if (!FILEURL || !KKFILEURL || !OVERVIEWFILEURL) {
-    console.warn('缺少必要的URL配置')
-    return dataArray
+  // 如果是非图片且处于缩略图模式，渲染带图标的占位符
+  if (!isImage && isThumb) {
+    return (
+      <div class="Browse__FileThumb" onClick={handleClick}>
+        <IconFont type={ICON_TYPE} />
+        <span>{name}</span>
+      </div>
+    )
   }
 
-  // 处理URL
-  return dataArray.map(dataItem => {
-    if (!dataItem || typeof dataItem !== 'object') {
-      return dataItem
-    }
-
-    // 如果已经是完整URL，直接返回
-    if (dataItem.url && (dataItem.url.startsWith('http') || dataItem.url.startsWith('data:image'))) {
-      return dataItem
-    }
-
-    // 构造完整URL
-    const baseUrl = getCustomTag(dataItem.url) === 'iframe' && KKFILEURL && OVERVIEWFILEURL
-      ? `${KKFILEURL}${encodeURIComponent(Base64.encode(`${OVERVIEWFILEURL}${dataItem.url}`))}`
-      : `${FILEURL}${dataItem.url || ''}`;
-
-    return {
-      ...dataItem,
-      url: baseUrl
-    }
-  })
-}
-
-// 不同类型不同容器承载
-const getCustomTag = (url) => {
-  // base64 图片处理
-  if (url.startsWith('data:image')) return 'img'
-  
-  // 文件扩展名处理
-  const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase()
-  return FILE_TYPES.PICTURE.includes(ext) ? 'img' :
-         FILE_TYPES.AUDIO.includes(ext) ? 'audio' :
-         FILE_TYPES.VIDEO.includes(ext) ? 'video' : 'iframe'
-}
-
-function renderContent(h, {url, name}, images) {
-    if (!url) return
-    
-    const { isThumb, astrictH, $viewerApi, $postM } = this
-
-    const MEDIA_TYPES = {
-      IFRAME: 'iframe',
-      IMAGE: 'img'
-    }
-
-    const ICON_TYPE = "file_thumb"
-
-    const CustomTag = getCustomTag(url)
-
-    const attrs = {
-      src: url,
-      ...(astrictH && { style: `width: auto; height: ${astrictH}px; objectFit: contain;` })
-    }
-
-    const handleClick = () => {
-      if (CustomTag !== MEDIA_TYPES.IMAGE && !isThumb) return
-
-      if (CustomTag === MEDIA_TYPES.IFRAME && isThumb) {
-        $postM({
-          type: 'customModal',
-          name: 'browse',
-          params: { data: { url } }
-        })
-        return
-      }
-
-      try {
-        $viewerApi({
-          options: {
-            url: 'url',
-            toolbar: true,
-            initialViewIndex: images.findIndex(file => file.url == url)
-          },
-          images
-        })
-      } catch(error){ console.error('未安装v-viewer@1.6.4组件库') }
-    }
+  // 构建基础标签属性
+  const attrs = {
+    src: url,
+    // 音视频和 iframe 显示控制条
+    ...((isMedia || tag === 'iframe') && { controls: true }),
+    // 音视频自动播放配置
+    ...(isMedia && { autoplay: true, muted: true, playsinline: true })
+  }
 
-    if (CustomTag === MEDIA_TYPES.IFRAME) {
-      if (isThumb) {
-        return <div class="Browse__FileThumb">
-          <IconFont type={ICON_TYPE} onClick={handleClick} />
-          <span>{name}</span>
-        </div>
-      }
-      attrs['controls'] = true
-    }
+  // 构建基础标签样式
+  const style = {
+    ...(astrictH && { width: 'auto', height: `${astrictH}px` })
+  } 
 
-    return <CustomTag {...{ attrs }} onClick={handleClick} />
+  // 渲染实际的媒体标签
+  return <tag {...{ attrs, style }} onClick={handleClick} />
 }
 
+// 定义 Browse 组件
 const Browse = {
   name: 'Browse',
   props: BrowseProps,
-  render(h, content) {
-    const {data, $https, httpsUrl} = this
-    const innerData = setInnerData(data, {...$https, ...httpsUrl})
+  render(h) {
+    const { data, $https, httpsUrl } = this
+    // 格式化文件数据，合并 HTTPS 配置
+    const list = formatFileData(data, { ...$https, ...httpsUrl })
 
     return (
       <div class="Browse">
-        {
-          innerData.map( dataItem =>
-            renderContent.call(this, h, dataItem, innerData)
-          )
-        }
+        {list.map(item => renderContent.call(this, h, item, list))}
       </div>
     )
   }
 }
 
-Browse.install = function (Vue) {
-  Vue.component('Browse', Browse)
-}
+// 安装方法，用于注册全局组件
+Browse.install = Vue => Vue.component('Browse', Browse)
 
-export default Browse
+export default Browse

package/lib/browse/style/index.less

@@ -1,3 +1,12 @@
+video,
 iframe {
+    border: 0;
     .layout();
+}
+
+img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    .square(auto);
 }

package/lib/form-comp/ASelectCustom.vue

@@ -178,6 +178,8 @@ export default {
       return {
         allowClear: true,
         showSearch: true,
+        // 多选、标签模式下默认最多显示3个Tag
+        // maxTagCount: 3,
         defaultActiveFirstOption: !this.isInput,
         filterOption: this.shouldUseLocalFilter,
         ...this.$attrs
@@ -497,11 +499,9 @@ export default {
         })
         
         let newInnerOptions = []
-        if (this.pagination.current === 1 && isReset) {
-          newInnerOptions = [...records]
-        } else {
-          newInnerOptions = [...this.innerOptions, ...this.handleFilter(records)]
-        }
+        this.pagination.current === 1 && isReset
+          ? newInnerOptions = [...records]
+          : newInnerOptions = [...this.innerOptions, ...this.handleFilter(records)]
         
         // 对合并后的数据进行去重
         this.innerOptions = this.deduplicateOptions(newInnerOptions)

package/lib/form-comp/AUpload.vue

@@ -1,113 +1,154 @@
 <template>
-  <div class="TAntdUpload">
+  <div :class="['a-upload', `a-upload--${uploadConfig.listType}`]">
     <Upload
       name="file"
       :file-list="fileList"
-      :accept="fileAccept"
-      v-bind="uploadAttrs"
+      v-bind="uploadConfig"
       @change="handleFileChange"
       @preview="handleFilePreview"
-      @reject="$message.error(`上传文件类型只能为${fileAccept}`)"
+      @reject="handleFileReject"
     >
+      <!-- 文本按钮模式 -->
       <Button 
         type="primary"
-        v-if="uploadAttrs.listType === 'text'"
+        v-if="isTextType"
+        :disabled="!canUpload"
       >
         <Icon type="upload" />上传
       </Button>
+      
+      <!-- 卡片模式 -->
       <template v-else>
-        <Icon v-if="!fileList || fileList.length < uploadLen"
+        <Icon 
+          v-if="canUpload"
           type="plus" 
           style="font-size: 36px"
         />
       </template>
     </Upload>
 
-    <span class="tips" v-if="tips">{{ tips }}</span>
+    <div class="a-upload__tips" v-if="tips">{{ tips }}</div>
   </div>
 </template>
 
 <script>
-import { Icon, Button, Upload, message } from 'ant-design-vue'
 
-// 常量定义
-const IMAGE_SUFFIX = new Set(['JPEG', 'JPG', 'GIF', 'PNG', 'TIFF', 'WEBP', 'BMP'])
+import { previewFile } from '../../utils/File'
+import { transferData } from '../../utils/Filter'
+import { Icon, Button, Upload } from 'ant-design-vue'
 
 export default {
   name: 'AUpload',
+  
   model: {
     prop: 'value',
     event: 'handleFileUpload'
   },
-  components: { Icon, Button, Upload },
+  
+  components: { 
+    Icon, 
+    Button, 
+    Upload 
+  },
+  
+  inheritAttrs: false,
+  
   props: {
+    // 绑定值，支持字符串或数组格式
     value: {
       type: [String, Array],
       default: () => []
     },
-    /* 提示文字 */
+    // 提示文本信息
     tips: String,
-    /* 上传文件数量限制 */
+    // 允许上传的最大文件数量
     uploadLen: {
       type: Number,
       default: 1
     },
-    /* 上传接口 */
+    // 自定义文件上传接口地址
     fileUploadUrl: String,
-    /* 显示需要pin的接口前缀 */
+    // 文件访问地址的前缀 URL
     filePrefixUrl: String,
-    /* 上传文件格式限制 */
-    fileAccept: String,
-    /* 上传文件携带Headers信息 */
+    // 允许上传的文件类型限制（accept 属性）
+    fileAccept: String, 
+    // 上传请求的额外头部信息
     fileHeaders: Object,
-    /* 删除文件函数回调 */
+    // 自定义文件删除处理函数，若不传则使用默认 store action
     fileRemoveHandle: Function
   },
+  
   data() {
     return {
       fileList: [],
-      modalValue: []
+      internalFileList: []
     }
   },
+  
   watch: {
-    value() {
-      this.setResetFile()
+    value: {
+      handler: 'resetFileList',
+      immediate: true
     }
   },
+  
   computed: {
-    uploadAttrs() {
-      const { filePrefixUrl, fileUploadUrl, fileHeaders } = this
+    isTextType() {
+      return this.uploadConfig.listType === 'text'
+    },
+    
+    canUpload() {
+      return this.fileList?.length < this.uploadLen && !this.uploadConfig.disabled
+    },
+
+    httpsUrl() {
+      const { $https, filePrefixUrl, fileUploadUrl } = this
+      
+      return {
+        ...$https,
+        FILEURL: filePrefixUrl ?? $https?.FILEURL,
+        UPLOADURL: fileUploadUrl ?? $https?.UPLOADURL
+      }
+    },
+
+    uploadConfig() {
+      const { httpsUrl, fileAccept, fileHeaders, $store, $attrs } = this
+      
       return {
         listType: 'picture-card',
-        prefix: filePrefixUrl ?? this.$https.FILEURL,
-        action: fileUploadUrl ?? this.$https.UPLOADURL,
-        headers: fileHeaders ?? this.$store.getters.fileHeaders,
-        ...this.$attrs
+        accept: fileAccept,
+        prefix: httpsUrl.FILEURL,
+        action: httpsUrl.UPLOADURL,
+        headers: fileHeaders ?? $store?.getters?.fileHeaders,
+        ...$attrs
       }
     }
   },
-  mounted() {
-    this.setResetFile()
-  },
+  
   beforeDestroy() {
-    this.fileList = []
-    this.modalValue = []
+    this.cleanup()
   },
+  
   methods: {
-    /**
-     * 重置文件列表
-     */
-    setResetFile() {
-      let arrayObject
-      try {
-        arrayObject = JSON.parse(this.value)
-      } catch (e) {
-        arrayObject = [].concat(this.value)
-      }
-      this.modalValue = arrayObject ?? []
-      this.fileList = this.modalValue.map(file => ({
+    // 重置文件列表
+    resetFileList() {
+      const rawList = transferData(this.value, 'Array')
+      
+      // 标准化内部数据：统一使用 id，移除 uid
+      this.internalFileList = rawList.map(file => {
+        const normalized = { ...file }
+        normalized.id = normalized.id || normalized.uid
+        if (normalized.uid) delete normalized.uid
+
+        return normalized
+      })
+
+      // 构建展示列表：适配 Ant Design Upload 组件需要的 uid 格式
+      const { prefix } = this.uploadConfig
+      this.fileList = this.internalFileList.map(file => ({
         ...file,
-        url: `${this.uploadAttrs.prefix}${file.url}`,
+        uid: file.id,
+        url: `${prefix}${file.url}`,
         type: file.contentType || file.type,
         status: 'done'
       }))
@@ -117,70 +158,90 @@ export default {
      * 文件预览处理
      * @param {Object} file - 文件对象
      */
-    handleFilePreview({uid, type, url}) {
-      if (!type || !url) return
-
-      const suffix = url.substr(url.lastIndexOf('.') + 1).toUpperCase()
-      
-      if (type.includes('image') || IMAGE_SUFFIX.has(suffix)) {
-        this.$viewerApi({
-          options: {
-            url: 'url',
-            toolbar: true,
-            initialViewIndex: this.fileList.findIndex(file => file.url === url)
-          },
-          images: this.fileList
-        })
-        return
-      }
-
-      // 仅适用于子项目调起
-      this.$postM({
-        type: 'customModal',
-        name: 'browse',
-        params: { data: this.modalValue.find(item => item.uid === uid) }
-      })
+    handleFilePreview({ uid }) {
+      const sourceFile = this.internalFileList.find(f => f.id === uid)
+      previewFile(sourceFile, this.internalFileList, this)
     },
 
     /**
      * 文件状态变化处理
-     * @param {Object} file - 文件对象
-     * @param {Array} fileList - 文件列表
+     * @param {Object} params - 参数对象
+     * @param {Object} params.file - 当前文件对象
+     * @param {Array} params.fileList - 文件列表
      */
     handleFileChange({ file, fileList }) {
-      const {uid, status, response} = file
+      const { uid, status, response } = file
 
+      // 上传中
       if (status === 'uploading') {
         this.fileList = fileList
         return
       }
 
+      // 上传失败：后端返回非 200 状态码
       if (response && response.code !== 200) {
-        this.fileList = this.fileList.filter(e => e.uid !== uid)
-        this.$message.error(response.msg || '上传失败')
+        this.fileList = this.fileList.filter(item => item.uid !== uid)
+        this.$message.error(response.msg || '文件上传失败')
         return
       }
 
+      // 根据状态处理
       switch (status) {
         case 'removed':
-          const requestHandle = this.fileRemoveHandle 
-            ? this.fileRemoveHandle({ id: uid })
-            : this.$store.dispatch('fileRemoveHandle', { id: uid })
-          requestHandle.then(() => {
-            this.modalValue = this.modalValue.filter(e => e.uid !== uid)
-            this.$emit('handleFileUpload', JSON.stringify(this.modalValue))
-          })
+          this.handleFileRemove(uid)
           break
         case 'done':
-          const {id, ...innerData} = response.data
-          this.modalValue.push({...innerData, uid: id})
-          this.$emit('handleFileUpload', JSON.stringify(this.modalValue))
+          this.handleFileDone(response)
           break
         case 'error':
           this.$message.error('文件上传失败')
           break
       }
+    },
+
+    /**
+     * 文件类型拒绝
+     */
+    handleFileReject() {
+      this.$message.error(`上传文件类型只能为${this.fileAccept}`)
+    },
+
+    /**
+     * 删除文件
+     * @param {String} id - 文件 ID
+     */
+    handleFileRemove(id) {
+      const requestHandle = this.fileRemoveHandle 
+        ? this.fileRemoveHandle({ id })
+        : this.$store.dispatch('fileRemoveHandle', { id })
+
+      requestHandle.then(() => {
+        this.internalFileList = this.internalFileList.filter(e => e.id !== id)
+        this.$emit('handleFileUpload', JSON.stringify(this.internalFileList))
+      })
+    },
+
+    /**
+     * 上传完成处理
+     * @param {Object} response - 上传响应对象
+     */
+    handleFileDone(response) {
+      if (!response?.data) {
+        this.$message.error('文件上传失败！')
+        return
+      }
+
+      this.internalFileList.push(response.data)
+      this.$emit('handleFileUpload', JSON.stringify(this.internalFileList))
+    },
+
+    /**
+     * 清理数据
+     */
+    cleanup() {
+      this.fileList = []
+      this.internalFileList = []
     }
   }
 }
-</script>
+</script>

package/lib/form-comp/style/ARangePicker.less

@@ -1,10 +1,10 @@
- 
 .ADatePicker {
     width: 100%;
     align-items: center;
-    .flex-layout(@flexGap: 0 6px);
+    .flex-layout(@flexGap: 0 6px); 
   
     .ant-calendar-picker {
       flex: 1;
+      min-width: 0 !important;
     }
 }

package/lib/form-comp/style/ASelectCustom.less

@@ -1,18 +1,42 @@
- 
-// 添加flex属性解决css中div莫名高度
 .ASelectCustom {
-    width: 100%;
+    align-items: center;
+    .flex-layout();
 
     .loading-more {
         font-size: @font-size-base;
         text-align: center;
         padding: @padding-xs 0;
         box-sizing: border-box;
-    }
+    } 
+
+    .ant-select {
+        &-selection {
+            .layout(100%, @input-height-base);
+
+            &--multiple {
+                padding-bottom: 0;
+            }
+
+            &__rendered {
+                overflow: hidden; 
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                // 2px为上下边框兼容
+                height: @input-height-base - 2px;
+
+                ul {
+                    width: auto;
+                    display: flex;
+
+                    li { min-width: 70px; }
+                }
+            }
+        }
 
-    .ant-select-dropdown-menu {
-        max-height: 300px;
-        overflow-y: auto;
-        .scrollbarStyle();
+        &-dropdown-menu {
+            max-height: 300px;
+            overflow-y: auto;
+            .scrollbarStyle();
+        }
     }
 }