web-component-gallery 2.3.9 → 2.3.10

package/lib/descriptions-list/index.jsx

@@ -1,49 +1,54 @@
+// 导入类型检查工具
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
+// 导入 Ant Design Vue 的描述列表组件
 import Descriptions from 'ant-design-vue/es/descriptions'
+// 导入自定义的文件浏览组件
 import Browse from '../browse/index.jsx'
+// 导入数据转换工具函数
 import { transferData } from '../../utils/Filter.js'
 
 const { Item: DescriptionsItem } = Descriptions
 
-// 默认属性配置
+// 描述列表的默认属性配置
 const DESC_DEFAULT_ATTRS = {
   size: 'middle',
   bordered: true
 }
 
-// 属性定义
+// 组件的 Props 定义
 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,
+  title: PropTypes.string, // 标题
+  column: PropTypes.oneOfType([PropTypes.number, PropTypes.object]).def(4), // 列数，支持响应式对象或固定数字
+  isResponsive: PropTypes.bool.def(true), // 是否开启响应式布局
+  labelWidth: PropTypes.number.def(160), // 标签固定宽度
+  descDetails: PropTypes.object, // 描述详情数据
+  descSettings: PropTypes.array, // 描述项配置数组
+  descAttrs: PropTypes.object, // 传递给 Descriptions 组件的其他属性
 }
 
-// 渲染内容组件
+/**
+ * 渲染描述项的内容
+ * @param {Function} h - 渲染函数
+ * @param {Object} item - 当前项的配置
+ * @param {Object} details - 详情数据
+ */
 const renderContent = (h, item, details) => {
+  // 根据类型决定使用自定义组件还是普通 span
   const CustomTag = item.type === 'file' ? Browse : 'span'
   
-  // 统一处理内容值获取逻辑
-  const getContentValue = () => {
-    return item.customRender 
-      ? item.customRender(details[item.props], details) 
-      : details[item.props]
-  }
+  // 获取内容值：优先使用自定义渲染函数，否则直接取数据
+  const getContentValue = () => 
+    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.type !== 'file' || item.customRender) return contentValue
     
     if (item.hasOwnProperty('multiProps')) {
-      return item.multiProps
-        .map(propsItem => transferData(details[propsItem], 'Array'))
-        .flat()
+      // 处理多属性情况，转换并扁平化数组
+      return item.multiProps.map(propsItem => transferData(details[propsItem], 'Array')).flat()
     }
     
     return contentValue
@@ -51,21 +56,14 @@ const renderContent = (h, item, details) => {
   
   const data = processData()
   
-  const props = {
-    data,
-    isThumb: true,
-    astrictH: 78
-  }
-  
   return (
-    <CustomTag {...{ props }}>
+    <CustomTag {...{ props: { data, isThumb: true, astrictH: 78 } }}>
       {contentValue ?? '暂无'}
     </CustomTag>
   )
 }
-// ... existing code ...
 
-// 响应式列数配置
+// 响应式列数配置：根据容器宽度动态计算列数
 const COLUMN_CONFIG = [
   { minWidth: 1600, getColumn: (column) => column || 4 },
   { minWidth: 1200, getColumn: (column) => Math.min(4, column) },
@@ -79,8 +77,8 @@ const DescriptionsList = {
   props: DescriptionsProps,
   data() {
     return {
-      responsiveColumn: 1,
-      parentRemainingHeight: 'auto'
+      responsiveColumn: 1, // 当前响应式列数
+      resizeTimer: null // 防抖定时器
     }
   },
   
@@ -89,78 +87,97 @@ const DescriptionsList = {
   },
   
   beforeDestroy() {
-    this.$bus.$offWindow(this, 'resize', this.setDescContentWidth)
+    this.cleanupResize()
   },
   
   methods: {
-    // 初始化组件
+    // 初始化组件逻辑
     initComponent() {
-      this.setDescContentWidth()
-      this.$bus.$onWindow(this, 'resize', this.setDescContentWidth)
+      if (this.isResponsive) {
+        this.setDescContentWidth()
+        this.bindResize()
+      } else {
+        this.responsiveColumn = this.getColumnValue()
+      }
     },
     
-    // 获取响应式列数
-    getCurrentColumn(width) {
-      const config = COLUMN_CONFIG.find(item => width >= item.minWidth)
-      return config ? config.getColumn(this.column) : 1
+    // 清理窗口大小监听和定时器
+    cleanupResize() {
+      if (this.resizeTimer) {
+        clearTimeout(this.resizeTimer)
+        this.resizeTimer = null
+      }
+      window.removeEventListener('resize', this.handleResize)
+    },
+    
+    // 绑定窗口大小变化事件
+    bindResize() {
+      window.addEventListener('resize', this.handleResize)
+    },
+    
+    // 处理窗口大小变化（带防抖）
+    handleResize() {
+      if (this.resizeTimer) clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        this.setDescContentWidth()
+      }, 150)
+    },
+    
+    // 获取非响应式模式下的列数值
+    getColumnValue() {
+      return typeof this.column === 'object' ? this.column.xs : this.column || 4
     },
     
-    // 计算项目宽度
-    calculateItemWidth(totalWidth, itemSpan) {
-      const effectiveSpan = itemSpan && this.responsiveColumn > itemSpan ? itemSpan : 1
-      return totalWidth * (effectiveSpan / this.responsiveColumn)
+    // 根据当前宽度获取应显示的列数
+    getCurrentColumn(width) {
+      const config = COLUMN_CONFIG.find(item => width >= item.minWidth)
+      return config?.getColumn(this.column) ?? 1
     },
     
-    // 设置描述内容宽度
+    // 计算并设置描述内容的宽度和列数
     setDescContentWidth() {
-      const retry = () => {
-        const container = this.$refs.Descriptions
-        if (!container) return 
-        
-        const viewElement = container.querySelector('.ant-descriptions-view')
-        if (!viewElement) return
-        
-        const width = viewElement.offsetWidth
-        if (width === 0) {
-          setTimeout(retry, 100)
-          return
-        }
-        
-        this.responsiveColumn = this.getCurrentColumn(width)
-        this.updateItemStyles(container, width)
+      if (!this.isResponsive) return
+
+      const container = this.$refs.Descriptions
+      if (!container) return 
+      
+      const viewElement = container.querySelector('.ant-descriptions-view')
+      if (!viewElement) return
+      
+      const width = viewElement.offsetWidth
+      // 如果宽度为 0（可能尚未渲染），延迟重试
+      if (width === 0) {
+        setTimeout(() => this.setDescContentWidth(), 100)
+        return
       }
       
-      retry()
+      this.responsiveColumn = this.getCurrentColumn(width)
+      this.updateItemStyles(container, width)
     },
     
-    // 更新项目样式
+    // 更新每一项的标签和内容宽度样式
     updateItemStyles(container, totalWidth) {
+      if (!this.isResponsive) return
+
       this.$nextTick(() => {
-        const rowElements = container.querySelectorAll('.ant-descriptions-row')
+        const rows = 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')
+        rows.forEach(row => {
+          const labels = row.querySelectorAll('.ant-descriptions-item-label')
+          const contents = row.querySelectorAll('.ant-descriptions-item-content')
           
-          labelElements.forEach((labelEl, index) => {
+          labels.forEach((label, index) => {
             const itemConfig = this.descSettings[itemCount]
-            const itemSpan = itemConfig?.span || 1
-            const eachWidth = totalWidth / this.responsiveColumn * itemSpan
+            const span = itemConfig?.span || 1
+            // 计算每项总宽度和内容区域宽度
+            const eachWidth = (totalWidth / this.responsiveColumn) * span
+            const contentWidth = eachWidth - this.labelWidth
             
-            // 设置标签样式
-            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`
-            })
+            // 设置固定标签宽度
+            this.setStyle(label, { width: `${this.labelWidth}px`, minWidth: `${this.labelWidth}px`, maxWidth: `${this.labelWidth}px` })
+            // 设置自适应内容宽度
+            this.setStyle(contents[index], { width: `${contentWidth}px`, minWidth: `${contentWidth}px`, maxWidth: `${contentWidth}px` })
             
             itemCount++
           })
@@ -168,22 +185,22 @@ const DescriptionsList = {
       })
     },
     
-    // 设置元素样式工具方法
+    // 辅助方法：设置元素样式
     setStyle(element, styles) {
-      if (element) {
-        Object.assign(element.style, styles)
-      }
+      if (element) Object.assign(element.style, styles)
+    }
+  },
+  
+  watch: {
+    // 监听响应式开关变化
+    isResponsive(val) {
+      val ? this.bindResize() : this.cleanupResize()
+      this.responsiveColumn = val ? this.getCurrentColumn(window.innerWidth) : this.getColumnValue()
     },
-    
-    // 设置父级剩余高度
-    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`
+    // 监听列数配置变化
+    column(val) {
+      if (!this.isResponsive) {
+        this.responsiveColumn = this.getColumnValue()
       }
     }
   },
@@ -199,10 +216,7 @@ const DescriptionsList = {
           {...{ attrs: { ...DESC_DEFAULT_ATTRS, ...descAttrs } }}
         >
           {descSettings.map((descItem, key) => (
-            <DescriptionsItem
-              key={key}
-              span={descItem.span ?? 1}
-            >
+            <DescriptionsItem key={key} span={descItem.span ?? 1}>
               <span slot="label">
                 {$slots[`${descItem.props}Label`] ?? descItem.label}
               </span>
@@ -218,8 +232,9 @@ const DescriptionsList = {
   }
 }
 
+// 安装方法，用于注册全局组件
 DescriptionsList.install = function(Vue) {
   Vue.component('DescriptionsList', DescriptionsList)
 }
 
-export default DescriptionsList
+export default DescriptionsList

package/package.json

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