import { 
  PreviewDirective, 
  PreviewComponent, 
  PreviewModalComponent 
} from 'ngx-file-preview';

@Component({
  // ... 其他配置
  imports: [
    PreviewDirective,
    PreviewComponent,
  ]
})

import { PreviewDirective } from '@eternalheart/ngx-file-preview';

@Component({
  imports: [PreviewDirective],
  template: `
    <div [ngxFilePreview]="file">点击预览单个文件</div>
    <div [ngxFilePreview]="files">点击预览多个文件</div>
  `
})
export class YourComponent {
  file: PreviewFile = {
    name: 'example.jpg',
    type: 'image',
    url: 'path/to/file.jpg'
  };

  files: PreviewFile[] = [
    // ... 文件数组
  ];
}

import { PreviewComponent } from '@eternalheart/ngx-file-preview';

@Component({
  imports: [PreviewComponent],
  template: `
    <ngx-file-preview 
      [files]="files"
      (fileSelect)="onFileSelect($event)">
    </ngx-file-preview>
  `
})

@Component({
  template: `
    <ngx-file-preview [files]="files">
      <ng-template #itemTemplate 
                   let-file 
                   let-index="index"
                   let-isActive="isActive"
                   let-preview="preview">
        <div class="custom-item" 
             [class.active]="isActive"
             (click)="preview()">
          <span>{{ file.name }}</span>
          <span>{{ formatFileSize(file.size) }}</span>
        </div>
      </ng-template>
    </ngx-file-preview>
  `
})

interface PreviewFile {
  url: string;          // 文件URL
  type: PreviewType;    // 文件类型
  name: string;         // 文件名
  size?: number;        // 文件大小（可选）
  lastModified?: number;// 最后修改时间（可选）
  coverUrl?: string;    // 封面图URL（视频/音频可用，可选）
}

type PreviewType = 
  | 'image'   // 图片
  | 'pdf'     // PDF文档
  | 'ppt'     // PPT演示文稿
  | 'word'    // Word文档
  | 'txt'     // 文本文件
  | 'video'   // 视频
  | 'excel'   // Excel表格
  | 'audio'   // 音频
  | 'zip'     // 压缩包
  | 'unknown' // 未知类型