FilePreview
预览常见文件及其元信息。中文惯用名：文件预览。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.file-preview |
| 名称 | FilePreview |
| 二级分类 | 媒体与内容（media） |
| 用途 | 预览常见文件及其元信息 |
| 描述 | 中文惯用名：文件预览。 |
预览
静态结构：卡片（border rounded-md）= 预览体（bg-muted：image → img max-h-72 object-contain；video / audio → 原生播放器；text → pre max-h-72 滚动；other 或无 src → 居中占位图标）+ 元信息行（类别图标 + 名称 truncate + 格式化大小 + 类型 + 下载链接）。类别按 kind 显式指定或按 fileType / name 扩展名推断（inferKind）。
DSL 结构
{
"type": "FilePreview",
"props": {
"name": "月度经营分析.pdf",
"fileSize": 2485760,
"fileType": "application/pdf",
"src": "https://example.com/monthly.pdf"
}
}何时用
何时使用
- 预览常见文件及其元信息：附件列表、审批材料、上传结果确认。
- 图片 / 视频 / 音频 / 文本的内嵌预览 + 名称 / 大小 / 类型 / 下载。
何时不用
- 分页文档阅读：使用 DocumentPreview。
- 纯下载链接列表：用 List / Link 即可。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 图片 | 内嵌图片预览 | 设计稿、截图附件 |
| 文本 | 等宽文本滚动区 | 日志、markdown、配置文件 |
| 视频 / 音频 | 原生播放器 | 录屏、录音附件 |
| 其他 | 图标占位 + 元信息 | 压缩包、二进制等不支持内嵌的类型 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | — | 文件名（含扩展名，用于推断与展示） |
fileSize | number | — | 文件大小（字节，格式化展示） |
fileType | string | — | MIME 或扩展名（用于推断） |
src | string | — | 文件地址（内嵌预览与下载） |
content | string | — | 文本文件内容（text 类内嵌展示） |
kind | `'image' | 'text' | 'video' |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 文本预览的 content 由数据源下发，大文件应截断（如前 100KB）。
- 提供 src 即出现下载入口，不希望下载时不要传 src。
- 元信息至少包含名称与大小，类型可省略（图标已表达）。
正例
- ✓ 审批详情：附件区逐个 FilePreview，图片内嵌、合同 PDF 走元信息 + 下载。
- ✓ 日志排查：text 类展示截取的应用日志。
反例
- ✕ 把超大文本全量塞进 content（应服务端截断）。
- ✕ 用 FilePreview 播放流媒体视频（应使用 Video）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。