web-component-gallery 2.3.6 → 2.3.8

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

@@ -1,15 +1,18 @@
-.TAntdUpload {
-    .tips {
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
+.a-upload {
+    &__tips {
+      color: @error-color;
+      line-height: @line-height-base;
+    }
+
+    &--text > &__tips {
+      margin-top: 8px;
     }
   
     .ant-upload {
       background: transparent;
-    }
-    
-    .ant-upload-picture-card-wrapper {
-      display: flex;
-    }
-}
+
+      &-picture-card-wrapper {
+        display: flex;
+      }
+    } 
+}

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.6",
+  "version": "2.3.8",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [

package/utils/Axios.js

@@ -98,7 +98,7 @@ function handleResponse(response, options, manager) {
   
   if (config.responseType === 'blob') return { data, headers }
   if (data.code && data.code !== 200) return handleError(data, options)
-  return data?.data ?? data
+  return data?.data
 }
 
 function handleError(error, options, manager) {

package/utils/File.js

@@ -0,0 +1,146 @@
+import { Base64 } from './Base64'
+import { transferData } from './Filter'  
+
+// 文件类型常量
+export 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'],
+    DOCUMENT: ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt', 'csv', 'rtf']
+}
+
+// 文件类型映射
+const TYPE_MAP = { 
+    image: 'PICTURE',
+    audio: 'AUDIO',
+    video: 'VIDEO',
+    application: 'DOCUMENT'
+} 
+
+/**
+ * 获取文件类型（图片、视频、音频、文档）
+ * @param {string} url - 文件 URL 或文件名
+ * @param {string} contentType - MIME type (可选)
+ * @returns {string} 文件类型：'PICTURE' | 'AUDIO' | 'VIDEO' | 'DOCUMENT' | 'OTHER'
+ */
+export function getFileType(url, contentType = '') {
+    if (!url) return 'OTHER'
+
+    // 优先使用 contentType 判断
+    if (contentType) {
+        const mainType = contentType.split('/')[0].toLowerCase()
+        if (TYPE_MAP[mainType]) return TYPE_MAP[mainType]
+    }
+
+    // Base64 图片处理
+    if (url.startsWith('data:image')) return 'PICTURE'
+
+    // 从 URL 提取扩展名判断
+    const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase()
+    
+    if (FILE_TYPES.PICTURE.includes(ext)) return 'PICTURE'
+    if (FILE_TYPES.AUDIO.includes(ext)) return 'AUDIO'
+    if (FILE_TYPES.VIDEO.includes(ext)) return 'VIDEO'
+    if (FILE_TYPES.DOCUMENT.includes(ext)) return 'DOCUMENT'
+
+    return 'OTHER'
+}
+
+/**
+ * 文件预览处理
+ * @param {Object} file - 当前文件对象 {url, contentType, ...}
+ * @param {Array|string} fileList - 文件列表（数组或 URL 字符串）
+ * @param {Object} ctx - 上下文对象，包含 $viewerApi, $postM, $https/httpsUrl
+ */
+export function previewFile(file, fileList, ctx) {
+    // 基础校验：文件必须存在且包含 url
+    if (!file?.url) return
+
+    const { $viewerApi, $postM, $https, httpsUrl } = ctx
+    
+    // 智能格式化文件数据（如果已格式化则直接使用）
+    const formattedFiles = formatFileData(fileList, $https || httpsUrl) 
+    
+    const { id, url, contentType } = file
+    // 获取文件类型（PICTURE | AUDIO | VIDEO | DOCUMENT | OTHER）
+    const type = getFileType(url, contentType)
+
+    // 场景 1: 图片预览，使用 v-viewer 组件
+    if (type === 'PICTURE') { 
+        // 筛选出所有图片类型的文件用于轮播
+        const images = formattedFiles.filter(f => getFileType(f.url, f.contentType) === 'PICTURE')
+        try {
+            $viewerApi({
+                options: {
+                    url: 'url', // 指定图片 URL 字段名
+                    toolbar: true, // 显示工具栏
+                    initialViewIndex: images.findIndex(f => (file.id && f.id === file.id) || f.url === url) || 0 // 优先比对 id，id 不存在则比对 url
+                },
+                images
+            })
+        } catch (e) {
+            console.error('未安装 v-viewer@1.6.4 组件库，请执行 yarn add v-viewer@1.6.4')
+        }
+        return
+    }
+
+    // 场景 2: 其他类型文件（视频/音频/文档），通过自定义弹窗预览
+    $postM({ 
+        type: 'customModal', 
+        name: 'browse', 
+        params: { data: file }
+    }) 
+}
+
+/**
+ * 格式化文件数据
+ * @param {string|Array|Object} data - 文件数据（字符串、数组或对象）
+ * @param {Object} httpsConfig - HTTPS 配置对象
+ * @returns {Array} 格式化后的文件数组 [{url, name, contentType, ...}]
+ */
+export function formatFileData(data, httpsConfig) {
+    // 智能解析数据（自动转换类型）
+    let files = transferData(data)
+    if (!files) return []
+
+    // 字符串处理：转为对象数组
+    if (typeof files === 'string') files = [{ url: files }]
+    
+    // 对象处理：转为对象数组
+    if (typeof files === 'object' && !Array.isArray(files)) files = [files]
+
+    // 解构 URL 配置项
+    const { FILEURL, KKFILEURL, OVERVIEWFILEURL } = httpsConfig || {}
+
+    // 校验必要的 URL 配置
+    if (!FILEURL || !KKFILEURL || !OVERVIEWFILEURL) return files
+
+    // 处理数组中的每一项数据
+    return files.map(dataItem => {
+        // 确保每项都是对象格式
+        if (typeof dataItem === 'string') dataItem = { url: dataItem }
+
+        const { url } = dataItem
+
+        // URL 不存在，过滤掉
+        if (!url) return null
+
+        // 已是完整 URL (http/https/Base64)，直接返回
+        if (url.startsWith('http') || url.startsWith('data:image')) {
+            return dataItem
+        }
+
+        // 构造完整 URL
+        const isDocument = getFileType(url) === 'DOCUMENT'
+        const baseUrl = isDocument
+            ? `${KKFILEURL}${encodeURIComponent(Base64.encode(`${OVERVIEWFILEURL}${url}`))}`
+            : `${FILEURL}${url}`
+
+        return {
+            ...dataItem,
+            url: baseUrl
+        }
+    }).filter(Boolean)
+}