web-component-gallery 2.3.10 → 2.3.12

package/lib/browse/index.jsx

@@ -37,11 +37,13 @@ const getPreviewType = (url, contentType = '') => {
 /**
  * 渲染单个文件内容的函数
  * @param {function} h - Vue 的渲染函数
- * @param {object} param1 - 包含 url 和 name 的对象
+ * @param {object} file - 文件对象
  * @param {array} images - 图片列表，用于预览
  * @returns {VNode} 返回渲染的虚拟 DOM 节点
  */
-const renderContent = function (h, { url, name }, images) {
+const renderContent = function (h, file, images) {
+  const { url, name } = file
+
   if (!url) return
 
   const { isThumb, astrictH } = this
@@ -51,7 +53,7 @@ const renderContent = function (h, { url, name }, images) {
 
   // 点击处理函数：如果是图片或缩略图模式，则触发预览
   const handleClick = () => {
-    if (isImage || isThumb) previewFile(url, images, this)
+    if (isImage || isThumb) previewFile(file, images, this)
   }
 
   // 如果是非图片且处于缩略图模式，渲染带图标的占位符

package/lib/descriptions-list/index.jsx

@@ -96,9 +96,21 @@ const DescriptionsList = {
       if (this.isResponsive) {
         this.setDescContentWidth()
         this.bindResize()
-      } else {
-        this.responsiveColumn = this.getColumnValue()
+        return
+      }
+      this.responsiveColumn = this.getColumnValue()
+    },
+    initComponent() {
+      if (this.isResponsive) {
+        this.setDescContentWidth()
+        this.bindResize()
+        return
       }
+      this.responsiveColumn = this.getColumnValue()
+      this.$nextTick(() => {
+        const container = this.$refs.Descriptions
+        if (container) this.updateItemStyles(container, container.offsetWidth)
+      })
     },
     
     // 清理窗口大小监听和定时器
@@ -107,12 +119,11 @@ const DescriptionsList = {
         clearTimeout(this.resizeTimer)
         this.resizeTimer = null
       }
-      window.removeEventListener('resize', this.handleResize)
     },
     
     // 绑定窗口大小变化事件
     bindResize() {
-      window.addEventListener('resize', this.handleResize)
+      this.$bus.$onWindow(this, 'resize', this.handleResize)
     },
     
     // 处理窗口大小变化（带防抖）
@@ -157,8 +168,6 @@ const DescriptionsList = {
     
     // 更新每一项的标签和内容宽度样式
     updateItemStyles(container, totalWidth) {
-      if (!this.isResponsive) return
-
       this.$nextTick(() => {
         const rows = container.querySelectorAll('.ant-descriptions-row')
         let itemCount = 0
@@ -170,6 +179,7 @@ const DescriptionsList = {
           labels.forEach((label, index) => {
             const itemConfig = this.descSettings[itemCount]
             const span = itemConfig?.span || 1
+
             // 计算每项总宽度和内容区域宽度
             const eachWidth = (totalWidth / this.responsiveColumn) * span
             const contentWidth = eachWidth - this.labelWidth

package/lib/modal/index.jsx

@@ -2,6 +2,9 @@ import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { Modal } from 'ant-design-vue/es'
 import IconFont from '../icon-font'
 
+const MODAL_MODES = ['small', 'middle', 'large', 'max']
+const HEADLESS_MODES = ['screen', 'headless-large']
+
 const ModalProps = {
   size: PropTypes.string.def('small'),
   title: PropTypes.string.def('标题'),
@@ -14,7 +17,6 @@ const ModalComp = {
   props: ModalProps,
   data() {
     return {
-      modalModes: ['small', 'middle', 'large', 'max'],
       internalMode: this.size
     }
   },
@@ -28,9 +30,13 @@ const ModalComp = {
       window.open(this.$attrs.externalLink, '_blank')
     },
     handleConvert() {
-      const currentIndex = this.modalModes.indexOf(this.internalMode)
-      const isLastMode = currentIndex === this.modalModes.length - 1
-      this.internalMode = isLastMode ? this.size : this.modalModes[currentIndex + 1]
+      const normalizedMode = this.internalMode === 'headless-large' ? 'large' : this.internalMode
+      const currentIndex = MODAL_MODES.indexOf(normalizedMode)
+      const isLastMode = currentIndex === MODAL_MODES.length - 1
+      this.internalMode = isLastMode ? this.size : MODAL_MODES[currentIndex + 1]
+    },
+    hasTitleBar() {
+      return !HEADLESS_MODES.includes(this.size)
     }
   },
   render() {
@@ -53,7 +59,7 @@ const ModalComp = {
           ...this.$listeners
         }}
       >
-        {this.size !== 'screen' && (
+        {this.hasTitleBar() && (
           <div slot="title" class="AntModal__Title">
             <span>{this.title}</span> 
             <div class="AntModal__Title__Blank">

package/lib/modal/style/index.less

@@ -18,6 +18,16 @@
         }
     }
 
+    &__headless-large {
+        .ant-modal {
+            .layout(1600px, 848px);
+
+            &-body {
+                padding: 0;
+            }
+        }
+    }
+
     &__max {
         .ant-modal {
             top: 0;

package/package.json

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