@ebiz/designer-components 0.1.79 → 0.1.81

package/src/components/EbizFileList.vue

@@ -1,467 +1,467 @@
-<template>
-  <div class="ebiz-file-list" :class="{ 'mini-mode': size === 'mini' }">
-    <div v-if="computedFiles.length === 0" class="empty-state">
-      <t-icon name="file" size="20px" />
-      <p>暂无文件</p>
-    </div>
-    <div v-else class="file-list-container" :class="{ 'mini-container': size === 'mini' }">
-      <div v-for="(file, index) in computedFiles" :key="index" class="file-item"
-        :class="{ 'mini-item': size === 'mini' }" @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: actualImageSize, height: actualImageSize, borderRadius: '4px' }" error="" />
-        </div>
-
-        <!-- 非图片文件显示图标 -->
-        <div v-else class="file-icon">
-          <t-icon :name="getFileIcon(file.extension)" :size="actualImageSize"
-            :style="{ color: getFileColor(file.extension) }" />
-        </div>
-
-        <div v-if="size !== 'mini'" 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 && size !== 'mini'" 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: () => []
-  },
-  // 尺寸大小，支持default和mini
-  size: {
-    type: String,
-    default: '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 getFileExtension = (filename) => {
-  if (!filename) return '';
-  // 移除查询参数和锚点
-  const cleanFilename = filename.split('?')[0].split('#')[0];
-  const parts = cleanFilename.split('.');
-  return parts.length > 1 ? parts.pop().toLowerCase() : '';
-};
-
-// 提取文件名
-const extractFileName = (url) => {
-  if (!url) return '未知文件';
-
-  // 移除查询参数和锚点
-  const cleanUrl = url.split('?')[0].split('#')[0];
-  const parts = cleanUrl.split('/');
-  let fileName = parts[parts.length - 1] || '未知文件';
-
-  // 如果文件名为空或只是扩展名，生成一个默认名称
-  if (!fileName || fileName.startsWith('.')) {
-    const extension = getFileExtension(fileName || url);
-    fileName = extension ? `文件.${extension}` : '未知文件';
-  }
-
-  return fileName;
-};
-
-// 解析文件信息
-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') {
-    if (!props.files.trim()) {
-      return [];
-    }
-
-    // 判断是单个URL还是逗号分隔的多个URL
-    if (props.files.includes(',')) {
-      // 逗号分隔的多个URL
-      const urls = props.files.split(',').map(url => url.trim()).filter(url => url);
-      fileList = urls.map(url => parseFileInfo(url));
-    } else {
-      // 单个URL
-      fileList = [parseFileInfo(props.files.trim())];
-    }
-  } else if (Array.isArray(props.files)) {
-    // 数组格式
-    fileList = props.files.map(file => {
-      if (typeof file === 'string') {
-        // 数组中的字符串元素，直接作为URL处理
-        return parseFileInfo(file);
-      } else if (file && typeof file === 'object') {
-        // 对象格式的文件信息
-        const url = file.url || file.src || file.path || '';
-        return {
-          name: file.name || extractFileName(url),
-          url: getFullUrl(url),
-          size: file.size || null,
-          extension: file.extension || getFileExtension(url || file.name || ''),
-          ...file
-        };
-      } else {
-        // 其他情况，返回默认对象
-        return {
-          name: '未知文件',
-          url: '',
-          extension: '',
-          size: null
-        };
-      }
-    }).filter(file => file.url); // 过滤掉没有URL的文件
-  }
-
-  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 actualImageSize = computed(() => {
-  return props.size === 'mini' ? '20px' : props.imageSize;
-});
-
-// 格式化文件大小
-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%;
-
-  &.mini-mode {
-    .file-list-container {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 4px;
-    }
-  }
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    color: #999;
-
-    p {
-      margin: 8px 0 0 0;
-      font-size: 12px;
-    }
-  }
-
-  .file-list-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    &.mini-container {
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-  }
-
-  .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;
-
-    &.mini-item {
-      padding: 0;
-      border: none;
-      background: transparent;
-      box-shadow: none;
-      margin-right: 8px;
-      margin-bottom: 8px;
-
-      &:hover {
-        border-color: transparent;
-        box-shadow: none;
-      }
-    }
-
-    &: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(actualImageSize);
-    height: v-bind(actualImageSize);
-
-    .mini-item & {
-      margin-right: 0;
-    }
-  }
-
-  .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;
-  }
-}
+<template>
+  <div class="ebiz-file-list" :class="{ 'mini-mode': size === 'mini' }">
+    <div v-if="computedFiles.length === 0" class="empty-state">
+      <t-icon name="file" size="20px" />
+      <p>暂无文件</p>
+    </div>
+    <div v-else class="file-list-container" :class="{ 'mini-container': size === 'mini' }">
+      <div v-for="(file, index) in computedFiles" :key="index" class="file-item"
+        :class="{ 'mini-item': size === 'mini' }" @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: actualImageSize, height: actualImageSize, borderRadius: '4px' }" error="" />
+        </div>
+
+        <!-- 非图片文件显示图标 -->
+        <div v-else class="file-icon">
+          <t-icon :name="getFileIcon(file.extension)" :size="actualImageSize"
+            :style="{ color: getFileColor(file.extension) }" />
+        </div>
+
+        <div v-if="size !== 'mini'" 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 && size !== 'mini'" 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: () => []
+  },
+  // 尺寸大小，支持default和mini
+  size: {
+    type: String,
+    default: '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 getFileExtension = (filename) => {
+  if (!filename) return '';
+  // 移除查询参数和锚点
+  const cleanFilename = filename.split('?')[0].split('#')[0];
+  const parts = cleanFilename.split('.');
+  return parts.length > 1 ? parts.pop().toLowerCase() : '';
+};
+
+// 提取文件名
+const extractFileName = (url) => {
+  if (!url) return '未知文件';
+
+  // 移除查询参数和锚点
+  const cleanUrl = url.split('?')[0].split('#')[0];
+  const parts = cleanUrl.split('/');
+  let fileName = parts[parts.length - 1] || '未知文件';
+
+  // 如果文件名为空或只是扩展名，生成一个默认名称
+  if (!fileName || fileName.startsWith('.')) {
+    const extension = getFileExtension(fileName || url);
+    fileName = extension ? `文件.${extension}` : '未知文件';
+  }
+
+  return fileName;
+};
+
+// 解析文件信息
+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') {
+    if (!props.files.trim()) {
+      return [];
+    }
+
+    // 判断是单个URL还是逗号分隔的多个URL
+    if (props.files.includes(',')) {
+      // 逗号分隔的多个URL
+      const urls = props.files.split(',').map(url => url.trim()).filter(url => url);
+      fileList = urls.map(url => parseFileInfo(url));
+    } else {
+      // 单个URL
+      fileList = [parseFileInfo(props.files.trim())];
+    }
+  } else if (Array.isArray(props.files)) {
+    // 数组格式
+    fileList = props.files.map(file => {
+      if (typeof file === 'string') {
+        // 数组中的字符串元素，直接作为URL处理
+        return parseFileInfo(file);
+      } else if (file && typeof file === 'object') {
+        // 对象格式的文件信息
+        const url = file.url || file.src || file.path || '';
+        return {
+          name: file.name || extractFileName(url),
+          url: getFullUrl(url),
+          size: file.size || null,
+          extension: file.extension || getFileExtension(url || file.name || ''),
+          ...file
+        };
+      } else {
+        // 其他情况，返回默认对象
+        return {
+          name: '未知文件',
+          url: '',
+          extension: '',
+          size: null
+        };
+      }
+    }).filter(file => file.url); // 过滤掉没有URL的文件
+  }
+
+  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 actualImageSize = computed(() => {
+  return props.size === 'mini' ? '20px' : props.imageSize;
+});
+
+// 格式化文件大小
+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%;
+
+  &.mini-mode {
+    .file-list-container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    color: #999;
+
+    p {
+      margin: 8px 0 0 0;
+      font-size: 12px;
+    }
+  }
+
+  .file-list-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &.mini-container {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  .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;
+
+    &.mini-item {
+      padding: 0;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+      margin-right: 8px;
+      margin-bottom: 8px;
+
+      &:hover {
+        border-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    &: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(actualImageSize);
+    height: v-bind(actualImageSize);
+
+    .mini-item & {
+      margin-right: 0;
+    }
+  }
+
+  .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>