web-component-gallery 2.3.5 → 2.3.7

package/lib/browse/index.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { Base64 } from '../../utils/Base64'
+import { transferData } from '../../utils/Filter'
 import { IconFont } from '../index'
 
 const BrowseProps = {
@@ -21,41 +22,67 @@ const FILE_TYPES = {
 
 // 初始化数据
 const setInnerData = (data, https) => {
-  
-  let innerData = data ?? []
-
-  if (typeof(data) === 'string') {
-    try {
-      innerData = JSON.parse(data)
-    } catch(error) { innerData = [] }
+  // 处理Base64图片数据
+  if (typeof data === 'string' && data.startsWith('data:image')) {
+    return [{
+      url: data,
+      contentType: 'image',
+      name: 'base64_image'
+    }]
   }
 
-  const { FILEURL, KKFILEURL, OVERVIEWFILEURL } = https
+  // 解析数据
+  let innerData = transferData(data, 'Array')
+
+  // 确保返回数组格式
+  const dataArray = Array.isArray(innerData) ? innerData : [innerData]
 
-  innerData = Array.isArray(innerData) ? innerData : [innerData]
+  const { FILEURL, KKFILEURL, OVERVIEWFILEURL } = https
   
-  innerData.forEach(dataItem => {
-    if (!dataItem.url.startsWith('http')) {
-      dataItem.url = 
-       getCustomTag(dataItem.url) === 'iframe' 
-       ? KKFILEURL + encodeURIComponent( Base64.encode( OVERVIEWFILEURL + dataItem.url ) )
-       : FILEURL + dataItem.url
+  // URL前缀配置检查
+  if (!FILEURL || !KKFILEURL || !OVERVIEWFILEURL) {
+    console.warn('缺少必要的URL配置')
+    return dataArray
+  }
+
+  // 处理URL
+  return dataArray.map(dataItem => {
+    if (!dataItem || typeof dataItem !== 'object') {
+      return dataItem
     }
-  })
 
-  return innerData
+    // 如果已经是完整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()
-  if (FILE_TYPES.PICTURE.includes(ext)) return 'img'
-  if (FILE_TYPES.AUDIO.includes(ext)) return 'audio'
-  if (FILE_TYPES.VIDEO.includes(ext)) return 'video'
-  return 'iframe'
+  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 = {

package/lib/descriptions-list/index.jsx

@@ -5,24 +5,51 @@ import { transferData } from '../../utils/Filter.js'
 
 const { Item: DescriptionsItem } = Descriptions
 
-const descDefaultAttrs = {
+// 默认属性配置
+const DESC_DEFAULT_ATTRS = {
   size: 'middle',
   bordered: true
 }
 
+// 属性定义
 const DescriptionsProps = {
   title: PropTypes.string,
   column: PropTypes.oneOfType([PropTypes.number, PropTypes.object]).def(4),
+  labelWidth: PropTypes.number.def(160),
   descDetails: PropTypes.object,
   descSettings: PropTypes.array,
   descAttrs: PropTypes.object,
 }
 
+// 渲染内容组件
 const renderContent = (h, item, details) => {
   const CustomTag = item.type === 'file' ? Browse : 'span'
-  const data = item.hasOwnProperty('multiProps') ?
-    item.multiProps.map(propsItem => transferData(details[propsItem], 'Array')).flat() :
-    transferData(details[item.props], 'Array')
+  
+  // 统一处理内容值获取逻辑
+  const getContentValue = () => {
+    return item.customRender 
+      ? item.customRender(details[item.props], details) 
+      : details[item.props]
+  }
+  
+  const contentValue = getContentValue()
+  
+  // 处理文件类型的数据
+  const processData = () => {
+    if (item.type !== 'file') return contentValue
+    
+    if (item.customRender) return contentValue
+    
+    if (item.hasOwnProperty('multiProps')) {
+      return item.multiProps
+        .map(propsItem => transferData(details[propsItem], 'Array'))
+        .flat()
+    }
+    
+    return contentValue
+  }
+  
+  const data = processData()
   
   const props = {
     data,
@@ -30,16 +57,22 @@ const renderContent = (h, item, details) => {
     astrictH: 78
   }
   
-  const contentValue = item.customRender ? 
-    item.customRender(details[item.props], details) : 
-    details[item.props]
-  
   return (
     <CustomTag {...{ props }}>
       {contentValue ?? '暂无'}
     </CustomTag>
   )
 }
+// ... existing code ...
+
+// 响应式列数配置
+const COLUMN_CONFIG = [
+  { minWidth: 1600, getColumn: (column) => column || 4 },
+  { minWidth: 1200, getColumn: (column) => Math.min(4, column) },
+  { minWidth: 992, getColumn: (column) => Math.min(3, column) },
+  { minWidth: 576, getColumn: (column) => Math.min(2, column) },
+  { minWidth: 0, getColumn: () => 1 }
+]
 
 const DescriptionsList = {
   name: 'DescriptionsList',
@@ -47,30 +80,38 @@ const DescriptionsList = {
   data() {
     return {
       responsiveColumn: 1,
-      // 添加新属性：父级剩余高度
       parentRemainingHeight: 'auto'
     }
   },
+  
   mounted() {
-    this.setDescContentWidth()
-    this.$bus.$onWindow(this, 'resize', this.setDescContentWidth)
-    // 初始化父级剩余高度
-    // this.setParentRemainingHeight()
+    this.initComponent()
   },
+  
+  beforeDestroy() {
+    this.$bus.$offWindow(this, 'resize', this.setDescContentWidth)
+  },
+  
   methods: {
+    // 初始化组件
+    initComponent() {
+      this.setDescContentWidth()
+      this.$bus.$onWindow(this, 'resize', this.setDescContentWidth)
+    },
+    
+    // 获取响应式列数
     getCurrentColumn(width) {
-      if (width >= 1600) return this.column || 4
-      if (width >= 1200) return Math.min(4, this.column)
-      if (width >= 992) return Math.min(3, this.column)
-      if (width >= 576) return Math.min(2, this.column)
-      return 1
+      const config = COLUMN_CONFIG.find(item => width >= item.minWidth)
+      return config ? config.getColumn(this.column) : 1
     },
     
+    // 计算项目宽度
     calculateItemWidth(totalWidth, itemSpan) {
       const effectiveSpan = itemSpan && this.responsiveColumn > itemSpan ? itemSpan : 1
       return totalWidth * (effectiveSpan / this.responsiveColumn)
     },
     
+    // 设置描述内容宽度
     setDescContentWidth() {
       const retry = () => {
         const container = this.$refs.Descriptions
@@ -86,74 +127,76 @@ const DescriptionsList = {
         }
         
         this.responsiveColumn = this.getCurrentColumn(width)
-
-        setTimeout(() => {
-          const rowElements = container.querySelectorAll('.ant-descriptions-row')
-          // 记录数量
-          let count = 0
-
-          for (let i = 0; i < rowElements.length; i++) { 
-            const labelElements = rowElements[i].querySelectorAll('.ant-descriptions-item-label')
-            const contentElements = rowElements[i].querySelectorAll('.ant-descriptions-item-content')
-              
-            for (let j = 0; j < labelElements.length; j++) {
-              const itemSpan = this.descSettings[count]?.span || 1
-              const eachWidth = width / this.responsiveColumn * itemSpan
-
-              // 设置标签固定宽度
-              labelElements[j].style = `
-                width: 160px;
-                min-width: 160px; 
-                max-width: 160px;
-              `
-                
-              // 设置内容区域默认宽度
-              contentElements[j].style = `
-                width: ${eachWidth - 160}px;
-                min-width: ${eachWidth - 160}px; 
-                max-width: ${eachWidth - 160}px;
-              `
-                
-              count++
-            }
-          }
-        }, 0)
-        
+        this.updateItemStyles(container, width)
       }
+      
       retry()
     },
-  
+    
+    // 更新项目样式
+    updateItemStyles(container, totalWidth) {
+      this.$nextTick(() => {
+        const rowElements = container.querySelectorAll('.ant-descriptions-row')
+        let itemCount = 0
+
+        rowElements.forEach(rowElement => {
+          const labelElements = rowElement.querySelectorAll('.ant-descriptions-item-label')
+          const contentElements = rowElement.querySelectorAll('.ant-descriptions-item-content')
+          
+          labelElements.forEach((labelEl, index) => {
+            const itemConfig = this.descSettings[itemCount]
+            const itemSpan = itemConfig?.span || 1
+            const eachWidth = totalWidth / this.responsiveColumn * itemSpan
+            
+            // 设置标签样式
+            this.setStyle(labelEl, {
+              width: `${this.labelWidth}px`,
+              minWidth: `${this.labelWidth}px`,
+              maxWidth: `${this.labelWidth}px`
+            })
+            
+            // 设置内容样式
+            this.setStyle(contentElements[index], {
+              width: `${eachWidth - this.labelWidth}px`,
+              minWidth: `${eachWidth - this.labelWidth}px`,
+              maxWidth: `${eachWidth - this.labelWidth}px`
+            })
+            
+            itemCount++
+          })
+        })
+      })
+    },
+    
+    // 设置元素样式工具方法
+    setStyle(element, styles) {
+      if (element) {
+        Object.assign(element.style, styles)
+      }
+    },
+    
     // 设置父级剩余高度
     setParentRemainingHeight() {
       const parent = this.$el.parentElement
       if (parent) {
-        // 获取父级高度
         const parentHeight = parent.offsetHeight
-        // 获取当前组件在父级中的位置
         const rect = this.$el.getBoundingClientRect()
         const parentRect = parent.getBoundingClientRect()
-        
-        // 计算父级剩余高度（从当前组件顶部到父级底部）
         const remainingHeight = parentHeight - (rect.top - parentRect.top)
-        
-        // 设置高度
         this.parentRemainingHeight = `${remainingHeight}px`
       }
     }
   },
+  
   render(h) {
     const { title, descAttrs, descDetails, descSettings, $slots, $scopedSlots } = this
     
     return (
-      // style={{
-      //   // 动态设置高度
-      //   height: this.parentRemainingHeight
-      // }}
       <div class="Descriptions" ref="Descriptions">
         <Descriptions
           title={title}
           column={this.responsiveColumn}
-          {...{ attrs: { ...descDefaultAttrs, ...descAttrs } }}
+          {...{ attrs: { ...DESC_DEFAULT_ATTRS, ...descAttrs } }}
         >
           {descSettings.map((descItem, key) => (
             <DescriptionsItem
@@ -163,9 +206,9 @@ const DescriptionsList = {
               <span slot="label">
                 {$slots[`${descItem.props}Label`] ?? descItem.label}
               </span>
-              {$scopedSlots[descItem.props] ?
-                $scopedSlots[descItem.props](descDetails) :
-                renderContent(h, descItem, descDetails)
+              {$scopedSlots[descItem.props]
+                ? $scopedSlots[descItem.props](descDetails)
+                : renderContent(h, descItem, descDetails)
               }
             </DescriptionsItem>
           ))}

package/lib/descriptions-list/style/index.less

@@ -6,6 +6,13 @@
         .scrollbarStyle();
     }
 
+    // 无边框
+    .ant-descriptions-item {
+        display: flex;
+        align-items: center;
+    }
+
+    // 携带边框
     .ant-descriptions-bordered {
 
         .ant-descriptions-view > table {

package/lib/form-comp/ASelectCustom.vue

@@ -497,11 +497,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/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();
+        }
     }
 }

package/lib/model/Model.js

@@ -26,10 +26,7 @@ export default {
     /* 一行显示几个 PS:最多5个 */
     layoutSize: {
       type: Number,
-      default: 4,
-      validator: value => {
-        return value <= 5
-      }
+      default: 4
     },
     /* 表单项配置 */
     formSetting: Array

package/lib/model/style/index.less

@@ -9,13 +9,6 @@
     width: 100%;
   }
 
-  // 统一设置表单控件宽度
-  .ant-select,
-  .ant-input-number,
-  .ant-calendar-picker { 
-    width: 100%;
-  }
-
   .ant-radio-group {
     line-height: @input-height-lg;
   }
@@ -23,6 +16,10 @@
   .ant-form-item-children {
     display: flex;
     align-items: center;  
+
+    & > * {
+      width: 100%;
+    }
   }
 
   .FormLine {

package/lib/model/utils/render.js

@@ -13,9 +13,9 @@ const FormModelItem = FormModel.Item
 export function getFormWidth(child, layoutSize, gap = 24) {
   const width = (100 / layoutSize) * (child.size ?? 1)
   if (this.layout === 'vertical') {
-    return `flex: 0 1 calc(${width}% - ${gap}px); margin-right: ${gap}px;`
+    return `width: calc(${width}% - ${gap}px); margin-right: ${gap}px;`
   }
-  return `flex: 0 1 ${width}%;`
+  return `width: ${width}%;`
 }
 
 /**

package/lib/search/index.vue

@@ -132,7 +132,7 @@ export default {
         middle: '16px',
         default: '24px'
       } 
-      return `flex: 0 1 calc((${(100 / this.matchMediaSize) * (e.size ?? 1)}% - ${
+      return `width: calc((${(100 / this.matchMediaSize) * (e.size ?? 1)}% - ${
         gap[this.searchStyle]
       })); margin-right: ${gap[this.searchStyle]};`
     },

package/lib/search/style/index.less

@@ -1,33 +1,33 @@
 @import '../../form-comp/style/index.less';
 
 .WebComponentFormSearch {
-    gap: 16px 0;
-    .flex-mixins(@justify: flex-start); 
-
-    .ant-form-item {
-      display: inline-flex;
-      margin-right: unset;
-  
-      .ant-form-item-label {
-        min-width: 70px;
-        max-width: 100px;
-        text-align: right;
-      }
+  .flex-mixins(@justify: flex-start, @gap: 16px 0);
   
-      .ant-form-item-control-wrapper {
-        flex: 1;
-      }
-  
-      .ant-select,
-      .ant-input-number,
-      .ant-calendar-picker {
-        width: 100%;
-      }
+  .ant-form-item {
+    display: inline-flex;
+    margin-right: 0;
+    
+    .ant-form-item-label {
+      min-width: 70px;
+      max-width: 100px;
+      text-align: right;
     }
-  
-    &__Actions {
+    
+    .ant-form-item-control-wrapper {
       flex: 1;
-      text-align: right;
-      // margin-right: 16px;
+      min-width: 0;
+      display: inline-flex;
+      align-items: center;
     }
+    
+    &-control,
+    &-children > * {
+      width: 100%;
+    }
+  }
+  
+  &__Actions {
+    flex: 1;
+    text-align: right;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [

package/utils/Filter.js

@@ -6,7 +6,7 @@
  */
 
 export function getDay(day) {
-    return getNDaysBefore(day, "{y}-{m}-{d}")
+    return getNDaysBefore(day, null, "{y}-{m}-{d}")
 }
 
 // 获取n天前的时间

package/utils/Utils.js

@@ -17,35 +17,65 @@ export function chunkArray(arr, size) {
   return result
 }
 
+
 /**
  * 下载文件
- * @param {Blob} response - 文档流
+ * @param {Blob|Object} response - 文档流或包含data和headers的对象
  * @param {string} name - 文件名称
  * @param {string} type - 文件类型
  * @returns {void}
  */
-export function downLoadFn( response, name, type = "application/vnd.ms-excel" ) {  
-
+export function downLoadFn(response, name, type = "application/vnd.ms-excel") {  
+    // 兼容新写法：从response对象中解析data和headers
+    let fileData = response
+    let fileName = name
+    let fileType = type
+    
+    // 如果response是对象且包含data属性，则使用新写法
+    if (response && typeof response === 'object' && response.data) {
+        fileData = response.data
+        
+        // 从headers中解析文件名和类型
+        if (response.headers) {
+            const headers = response.headers
+            
+            // 解析文件类型
+            if (headers['content-type']) {
+                fileType = headers['content-type']
+            }
+            
+            // 解析文件名
+            if (headers['content-disposition']) {
+                const contentDisposition = headers['content-disposition']
+                const match = contentDisposition.match(/filename=([^;]+)/)
+                if (match && match[1]) {
+                    fileName = decodeURIComponent(match[1].replace(/['"]/g, ''))
+                }
+            }
+        }
+    }
+    
     let reader = new FileReader()
 
-    reader.readAsText( response, "utf-8" )  
+    reader.readAsText(fileData, "utf-8")
 
     reader.onload = function () {
         try {
-            message.error( JSON.parse( reader.result ).msg ) 
+            message.error(JSON.parse(reader.result).msg)
         } catch (err) {
-            message.success( "下载中..." ) 
-            let blob = new Blob( [ response ], { type } )
-            let url = window.URL.createObjectURL( blob )
-            const link = document.createElement( "a" )
+            message.success("下载中...")
+            let blob = new Blob([fileData], { type: fileType })
+            let url = window.URL.createObjectURL(blob)
+            const link = document.createElement("a")
             link.href = url
-            link.download = name
+            link.download = fileName
             link.click()
-            window.URL.revokeObjectURL( url )
+            window.URL.revokeObjectURL(url)
         }
     }
 }
 
+
 /**
  * 获取图片宽高 (如超出限制高度，则根据高度比计算出对应的宽度比)
  * @param {string} url - 图片地址