@ebiz/designer-components 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizFileList.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="ebiz-file-list">
+    <div v-if="computedFiles.length === 0" class="empty-state">
+      <t-icon name="file" size="48px" />
+      <p>暂无文件</p>
+    </div>
+    <div v-else class="file-list-container">
+      <div 
+        v-for="(file, index) in computedFiles" 
+        :key="index" 
+        class="file-item"
+        @click="handleFileClick(file)"
+      >
+        <!-- 图片文件直接显示缩略图 -->
+        <div v-if="isImage(file.extension)" class="file-icon">
+          <t-image
+            :src="file.url"
+            :alt="file.name"
+            fit="cover"
+            loading="lazy"
+            :style="{ width: imageSize, height: imageSize, borderRadius: '4px' }"
+            @error="handleImageError"
+          />
+        </div>
+        
+        <!-- 非图片文件显示图标 -->
+        <div v-else class="file-icon">
+          <t-icon :name="getFileIcon(file.extension)" :size="imageSize" :style="{ color: getFileColor(file.extension) }" />
+        </div>
+        
+        <div class="file-info">
+          <div class="file-name" :title="file.name">{{ file.name }}</div>
+          <div class="file-meta">
+            <span v-if="showFileType" class="file-type">{{ file.extension?.toUpperCase() || '未知' }}</span>
+            <span v-if="showFileSize && file.size" class="file-size">{{ formatFileSize(file.size) }}</span>
+          </div>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div v-if="showActions" class="file-actions">
+          <t-button 
+            size="small" 
+            variant="text" 
+            @click.stop="handleDownload(file)"
+            :title="isImage(file.extension) ? '查看' : '下载'"
+          >
+            <t-icon :name="isImage(file.extension) ? 'view-list' : 'download'" />
+          </t-button>
+          <t-button 
+            v-if="allowDelete" 
+            size="small" 
+            variant="text" 
+            theme="danger"
+            @click.stop="handleDelete(file, index)"
+            title="删除"
+          >
+            <t-icon name="delete" />
+          </t-button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 图片预览弹窗 -->
+    <t-image-viewer
+      v-model:visible="previewVisible"
+      :images="previewImages"
+      :index="previewIndex"
+      :close-on-esc="true"
+      @close="previewVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizFileList"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed, ref } from 'vue';
+import { Image as TImage, ImageViewer as TImageViewer, Icon as TIcon, Button as TButton } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 文件列表数据，支持数组或字符串（逗号分隔）
+  files: {
+    type: [Array, String],
+    default: () => []
+  },
+  // 图片尺寸
+  imageSize: {
+    type: String,
+    default: '50px'
+  },
+  // 是否显示文件大小
+  showFileSize: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示文件类型
+  showFileType: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示操作按钮
+  showActions: {
+    type: Boolean,
+    default: true
+  },
+  // 是否允许删除
+  allowDelete: {
+    type: Boolean,
+    default: false
+  },
+  // 文件基础URL（用于相对路径）
+  baseUrl: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['file-click', 'file-download', 'file-delete', 'file-preview']);
+
+// 预览相关状态
+const previewVisible = ref(false);
+const previewImages = ref([]);
+const previewIndex = ref(0);
+
+// 获取完整URL
+const getFullUrl = (url) => {
+  if (!url) return '';
+  if (url.startsWith('http') || url.startsWith('data:')) return url;
+  return props.baseUrl + url;
+};
+
+// 提取文件名
+const extractFileName = (url) => {
+  if (!url) return '未知文件';
+  const parts = url.split('/');
+  return parts[parts.length - 1] || '未知文件';
+};
+
+// 获取文件扩展名
+const getFileExtension = (filename) => {
+  if (!filename) return '';
+  const parts = filename.split('.');
+  return parts.length > 1 ? parts.pop().toLowerCase() : '';
+};
+
+// 解析文件信息
+const parseFileInfo = (url) => {
+  const fullUrl = getFullUrl(url);
+  const fileName = extractFileName(url);
+  const extension = getFileExtension(fileName);
+  
+  return {
+    name: fileName,
+    url: fullUrl,
+    extension,
+    size: null
+  };
+};
+
+// 计算文件列表
+const computedFiles = computed(() => {
+  let fileList = [];
+  
+  if (typeof props.files === 'string') {
+    // 字符串格式，按逗号分割
+    const urls = props.files.split(',').map(url => url.trim()).filter(url => url);
+    fileList = urls.map(url => parseFileInfo(url));
+  } else if (Array.isArray(props.files)) {
+    // 数组格式
+    fileList = props.files.map(file => {
+      if (typeof file === 'string') {
+        return parseFileInfo(file);
+      } else {
+        return {
+          name: file.name || extractFileName(file.url),
+          url: getFullUrl(file.url),
+          size: file.size,
+          extension: file.extension || getFileExtension(file.url || file.name),
+          ...file
+        };
+      }
+    });
+  }
+  
+  return fileList;
+});
+
+// 判断是否为图片
+const isImage = (extension) => {
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
+  return imageExtensions.includes(extension?.toLowerCase());
+};
+
+// 获取文件图标
+const getFileIcon = (extension) => {
+  const iconMap = {
+    // 文档类
+    'pdf': 'file-pdf',
+    'doc': 'file-word',
+    'docx': 'file-word', 
+    'xls': 'file-excel',
+    'xlsx': 'file-excel',
+    'ppt': 'file-powerpoint',
+    'pptx': 'file-powerpoint',
+    'txt': 'file-text',
+    'rtf': 'file-text',
+    // 代码类
+    'js': 'file-code',
+    'ts': 'file-code',
+    'html': 'file-code',
+    'css': 'file-code',
+    'json': 'file-code',
+    'xml': 'file-code',
+    // 压缩类
+    'zip': 'file-zip',
+    'rar': 'file-zip',
+    '7z': 'file-zip',
+    'tar': 'file-zip',
+    'gz': 'file-zip',
+    // 音视频类
+    'mp3': 'file-music',
+    'wav': 'file-music',
+    'mp4': 'file-video',
+    'avi': 'file-video',
+    'mov': 'file-video',
+    'wmv': 'file-video'
+  };
+  
+  return iconMap[extension?.toLowerCase()] || 'file';
+};
+
+// 获取文件颜色
+const getFileColor = (extension) => {
+  const colorMap = {
+    'pdf': '#FF4757',
+    'doc': '#2E5BFF',
+    'docx': '#2E5BFF',
+    'xls': '#00A854',
+    'xlsx': '#00A854',
+    'ppt': '#FF8C42',
+    'pptx': '#FF8C42',
+    'txt': '#666666',
+    'zip': '#9C27B0',
+    'rar': '#9C27B0',
+    'mp3': '#FF9800',
+    'mp4': '#795548'
+  };
+  
+  return colorMap[extension?.toLowerCase()] || '#666666';
+};
+
+// 格式化文件大小
+const formatFileSize = (bytes) => {
+  if (!bytes) return '';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let size = bytes;
+  let unitIndex = 0;
+  
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+};
+
+// 是否可在线预览
+const canPreviewOnline = (extension) => {
+  const onlinePreviewExtensions = ['pdf', 'txt', 'html', 'xml', 'json'];
+  return onlinePreviewExtensions.includes(extension?.toLowerCase());
+};
+
+// 文件下载
+const handleDownload = (file) => {
+  const link = document.createElement('a');
+  link.href = file.url;
+  link.download = file.name;
+  link.target = '_blank';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  
+  emit('file-download', file);
+};
+
+// 图片预览
+const handlePreview = (file) => {
+  const imageFiles = computedFiles.value.filter(f => isImage(f.extension));
+  previewImages.value = imageFiles.map(f => f.url);
+  previewIndex.value = imageFiles.findIndex(f => f.url === file.url);
+  previewVisible.value = true;
+  
+  emit('file-preview', file);
+};
+
+// 文件点击处理
+const handleFileClick = (file) => {
+  emit('file-click', file);
+  
+  if (isImage(file.extension)) {
+    // 图片文件，显示预览
+    handlePreview(file);
+  } else if (canPreviewOnline(file.extension)) {
+    // 可在线预览的文件
+    window.open(file.url, '_blank');
+  } else {
+    // 其他文件，触发下载
+    handleDownload(file);
+  }
+};
+
+// 文件删除
+const handleDelete = (file, index) => {
+  emit('file-delete', file, index);
+};
+
+// 图片加载错误处理
+const handleImageError = () => {
+  // 图片加载失败时的处理
+};
+</script>
+
+<style lang="less" scoped>
+.ebiz-file-list {
+  width: 100%;
+  
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    color: #999;
+    
+    p {
+      margin: 8px 0 0 0;
+      font-size: 14px;
+    }
+  }
+  
+  .file-list-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .file-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s;
+    background: #fff;
+    
+    &:hover {
+      border-color: #0052d9;
+      box-shadow: 0 2px 8px rgba(0, 82, 217, 0.15);
+      
+      .file-actions {
+        opacity: 1;
+      }
+    }
+  }
+  
+  .file-icon {
+    margin-right: 12px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: v-bind(imageSize);
+    height: v-bind(imageSize);
+  }
+  
+  .file-info {
+    flex: 1;
+    min-width: 0;
+    
+    .file-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .file-meta {
+      display: flex;
+      gap: 8px;
+      
+      .file-size,
+      .file-type {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+  
+  .file-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    flex-shrink: 0;
+  }
+}
+
+
+</style> 

package/src/index.js

@@ -95,6 +95,7 @@ import EbizMeetingRoomSelector from './components/EbizMeetingRoomSelector.vue'
 import EbizMobileMeetingRoomSelector from './components/EbizMobileMeetingRoomSelector.vue'
 import EbizDropdown from './components/EbizDropdown.vue'
 import EbizDropdownItem from './components/EbizDropdownItem.vue'
+import EbizFileList from './components/EbizFileList.vue'
 
 // 导出组件
 export {
@@ -223,6 +224,8 @@ export {
   EbizDropdown,
   // 下拉菜单项组件
   EbizDropdownItem,
+  // 文件列表组件
+  EbizFileList,
   // 会议室选择器组件
   EbizMeetingRoomSelector,
   // 新增 EbizMobileMeetingRoomSelector 组件

package/src/router/index.js

@@ -376,6 +376,12 @@ const routes = [
     name: 'MobileMeetingRoomSelector',
     component: () => import('../views/EbizMobileMeetingRoomSelectorDemo.vue'),
     meta: { title: 'Ebiz移动端会议室选择器组件示例' }
+  },
+  {
+    path: '/file-list-demo',
+    name: 'FileListDemo',
+    component: () => import('../views/EbizFileListDemo.vue'),
+    meta: { title: 'Ebiz文件列表组件示例' }
   }
 ]