// 图片使用antd的Image，继承ImageProps
export interface FileCardProps extends ImageProps {
  prefixCls?: string;
  style?: React.CSSProperties;
  className?: string;

  name: string; // 必填，文件名
  size?: number | string; // 文件大小
  src?: string; // 地址
  description?: string; // 描述，默认是展示文件大小
  mask?: React.ReactNode; // 悬浮展示操作按钮
  mime?: string; // 用于指定文件类型
  icon?: React.ReactNode; // 自定义文件icon图标
  type?: 'file' | 'image' | 'audio' | 'video'; // 展示形式，默认会根据文件类型选择对应的type
  onClick?: () => void; // 点击事件回调
}

export interface FileCardListProps {
  items?: FileCardProps[]; // 卡片列表
  size?: 'small' | 'default'; // 设置卡片展示形式
  removable?: boolean; // 卡片右上角会出现删除图标，点击从列表中移除
  onRemove?: (item?: FileCardProps, list?: FileCardProps[]) => void; // 移出事件回调，参数为移除的文件、移除后的文件列表
}

import { FileCard } from '@ant-design/x';
import React from 'react';

const App = () => {
  return (
    <>
      <FileCard name="test.pdf" size={1024} />
      <FileCard name="test.png" src="https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*GooRSKgHZi0AAAAAAAAAAAAAegitAQ/original" />
    </>
  );
};

export default App;

import { FileCard } from '@ant-design/x';
import React from 'react';

const App = () => {
  return (
    <>
      <FileCard name="test.pdf" size={1024} cardSize="small" />
    </>
  );
};

export default App;

import { FileCard } from '@ant-design/x';
import React from 'react';
import { DownloadOutlined, EnterOutlined } from '@ant-design/icons';
import { Button } from 'antd';

const App = () => {
  return (
    <>
      <FileCard
        name="test.pdf"
        size={1024}
        mask={(
          <>
            <Button icon={<DownloadOutlined />} />
            <Button icon={<EnterOutlined />} />
          </>
        )}
        onClick
      />
    </>
  );
};

export default App;

import { FileCard } from '@ant-design/x';
import React from 'react';

const App = () => {
  return (
    <>
      <FileCard name="test.mp3" src="https://mdn.alipayobjects.com/cto_doraemon/afts/file/f9bPT6CpgkMAAAAAAAAAAAAAehe3AQBr" />
    </>
  );
};

export default App;