File Type

FileTypeIcon 按后缀映射 21 种文件图标，FileCard 封装图标 + 文件名 + 大小 + 状态。

FileTypeIcon

按文件名后缀解析图标。支持 pdf / doc / xls / ppt / 图片 / 视频 / 音频 / 压缩包 / 设计稿 / folder 等 22 种。

Import

import { FileTypeIcon, FileCard } from "@forge-ui/react";

Usage

传 fileName，组件自己取 ext 查表。未知后缀回落到 txt。

1<FileTypeIcon fileName="design.fig" />

Design & Image

.fig

.psd

.ai

.eps

.jpg

.png

.gif

.svg

Document

.pdf

.doc

.txt

.xls

.ppt

.zip

.rar

Media

.mp3

.mp4

.wav

.mkv

.avi

.mov

Folder

folder

Dim

dim 让图标半透明，用于上传中态。

1<FileTypeIcon fileName="design.fig" dim />

API

Attribute	Type	Default	Description
`fileName`	`string`	`—`	文件名，取后缀查表映射图标。未知后缀回落到 txt，可传 "folder" 取文件夹图标。
`dim`	`boolean`	`false`	半透明态，用于 uploading 进度过渡。
`className`	`string`	`''`	额外 className。

FileCard

单行文件卡：图标 + 文件名 + 大小 + 状态 action。4 种 state：uploaded / success / uploading / error。

Usage

brief.pdf

2.4 MB

1<FileCard file={{ id: "1", name: "brief.pdf", size: "2.4 MB", state: "uploaded" }} />

States

uploading 显示进度条，success 绿勾，error 显示重试。

upload.pdf

1.2 MB-

Uploading

success.pdf

1.2 MB-

Uploaded

error.pdf

1.2 MB-

Failed

1<FileCard file={{ id: "1", name: "upload.pdf", size: "1.2 MB", state: "uploading" }} />
2<FileCard file={{ id: "2", name: "success.pdf", size: "1.2 MB", state: "success" }} />
3<FileCard file={{ id: "3", name: "error.pdf", size: "1.2 MB", state: "error" }} onRetry={() => {}} />

API

Attribute	Type	Default	Description
`file`	`FileItem`	`—`	单个文件对象 { id, name, size, state? }。
`file.state`	`'uploaded' \| 'success' \| 'uploading' \| 'error'`	`'uploaded'`	文件当前状态，决定右侧显示的图标或操作。
`onRemove`	`(id: string) => void`	`—`	点击关闭按钮时回调。
`onRetry`	`(id: string) => void`	`—`	error 状态下点击重试回调。
`className`	`string`	`''`	额外 className。