labsop_scientific_h5/components/ui/CommonFileList.vue

<template>
  <view class="ui-file-list" v-if="filteredFiles && filteredFiles.length">
    <view 
      class="file-item" 
      v-for="(file, index) in filteredFiles" 
      :key="file.id || index"
      @click="handlePreview(file)"
    >
      <view class="file-icon">
        <uv-icon name="file-text" color="#1c9bfd" size="64rpx"></uv-icon>
      </view>
      <view class="file-info">
        <text class="f-name">{{ file.fileName || file.name }}</text>
        <view class="f-meta">
          <text class="f-type" v-if="file.fileType">{{ file.fileType }}</text>
          <text class="f-size" v-if="file.fileSize">{{ formatSize(file.fileSize) }}</text>
          <text class="f-date" v-if="file.createdTime || file.createTime">
            {{ (file.createdTime || file.createTime).slice(0, 10) }}
          </text>
        </view>
      </view>
      <view class="file-action">
        <uv-icon name="arrow-right" color="#c0c4cc" size="32rpx"></uv-icon>
      </view>
    </view>
  </view>
  <view v-else class="empty-wrap">
    <uv-empty mode="data" text="暂无附件信息"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { previewFile } from '@/utils/file';

/**
 * UI 通用组件 - 附件列表呈现
 * 封装统一样式的附件项及其预览联通逻辑。
 */
const props = defineProps<{
  /** 附件数组（支持 ProjectFile 类型及类似结构） */
  files: any[];
}>();

const filteredFiles = computed(() => {
  if (!props.files) return [];
  return props.files.filter((file) => file.fileName || file.name);
});

/**
 * 实现点击预览逻辑
 */
const handlePreview = (file: any) => {
  const url = file.fileUrl || file.url;
  const name = file.fileName || file.name;
  if (!url) return uni.showToast({ title: '文件地址不存在', icon: 'none' });
  previewFile(url, name);
};


/**
 * 文件大小美化展示
 */
const formatSize = (size: number) => {
  if (!size) return '';
  if (size < 1024) return size + 'B';
  if (size < 1024 * 1024) return (size / 1024).toFixed(2) + 'KB';
  return (size / (1024 * 1024)).toFixed(2) + 'MB';
};
</script>

<style lang="scss" scoped>
.ui-file-list {
  display: flex;
  flex-direction: column;

  .file-item {
    display: flex;
    align-items: center;
    padding: 30rpx 24rpx;
    background-color: #f8fafc;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    border: 2rpx solid transparent;
    transition: all 0.2s;

    &:last-child {
      margin-bottom: 0;
    }

    &:active {
      background-color: #f1f5f9;
      transform: scale(0.98);
      border-color: #e2e8f0;
    }

    .file-icon {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 24rpx;
      background-color: #fff;
      border-radius: 12rpx;
    }

    .file-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .f-name {
        font-size: 28rpx;
        color: #343a3f;
        font-weight: 500;
        margin-bottom: 12rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        overflow: hidden;
      }

      .f-meta {
        display: flex;
        font-size: 24rpx;
        color: #94a3b8;
        gap: 16rpx;

        .f-type {
          color: #1c9bfd;
          background-color: rgba(28, 155, 253, 0.08);
          padding: 2rpx 10rpx;
          border-radius: 6rpx;
        }
      }
    }

    .file-action {
      margin-left: 16rpx;
    }
  }
}

.empty-wrap {
  padding: 80rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>