Attachments

说明

面向 AI 会话“输入框上方”承载待发送文件的附件条组件，纯展示、不依赖任何浏览器 API（真实取文件由宿主用 <InputFile> 等自行接入，组件只渲染状态）。Items 为 Attachment 列表（Key / Name / Size / Type / Icon / Thumb / Url / Status / Percent / Error），文件名、大小、失败原因等视为业务内容、直接展示不本地化。图标位优先显示 Thumb 缩略图，否则按 Status 与类型自动选择：uploading 显示旋转 loader，其余按 Type（留空则从 Name 后缀推断）映射图片 / PDF / 文档 / 表格 / 演示 / 压缩包 / 代码 / 音视频等图标，可用 Icon 覆盖；Size（字节）自动格式化为 B / KB / MB / GB。Status 归一为 done（默认）/ uploading / error——uploading 时渲染由 Percent 驱动的进度条与“上传中”标签，error 时红色描边并显示 Error（留空回退本地化“失败”）。ListType 提供 card（默认）/ pill 两种形态，Closable（默认 true）控制右上角移除按钮，点移除经 OnRemove 回传该 Attachment；点附件本体（done / uploading 时可点）经 OnPreview 回传，便于打开预览。Uploadable（默认 true）在末尾渲染一个内置“添加附件”入口（UploadText 作为翻译键、UploadIcon 默认 paperclip），点它触发 OnUpload 供宿主打开自己的选择器；空数据显示 EmptyText（可选、作为翻译键）。外观全部走 CSS 令牌接入框架明暗主题；文件名等视为业务数据，仅“添加附件 / 上传中 / 删除 / 失败”等走词条，常与 Bubble / Prompts 组合成完整会话输入区。

常见能力：

• 按 Type / 文件名后缀自动映射类型图标（图片/PDF/文档/表格/演示/压缩包/代码/音视频），Icon 可覆盖、Thumb 显缩略图
• Size 自动格式化为 B / KB / MB / GB，无需调用方拼接
• Status 三态：done 就绪、uploading 进度条（Percent 驱动 + “上传中”标签）、error 红态（显示 Error）
• ListType card / pill 两种形态，Closable 控制移除按钮，点附件 OnPreview、点移除 OnRemove 回传
• Uploadable 内置“添加附件”入口触发 OnUpload，EmptyText 空态
• 移除按钮 aria-label 走“删除”，“上传中 / 添加附件”走词条；文件名等视为业务数据不本地化
• 纯展示、无 JS 互操作、受控数据，明暗主题随 CSS 令牌自动适配

用法

<Attachments Items="@_files" ListType="card" Closable="true"
              Uploadable="true" UploadText="添加附件"
              OnUpload="OpenPicker" OnRemove="Remove" OnPreview="Preview" />

@code {
    List<Attachment> _files = new()
    {
        new("需求说明书.pdf", 2_400_000, "application/pdf"),
        new("数据模型草稿.docx", 51_200) { Status = "uploading", Percent = 42 },
        new("历史导出.zip", 8_900_000, "zip") { Status = "error", Error = "超过 5MB 限制" },
    };
    void OpenPicker() { /* 宿主在此打开 InputFile 选择器 */ }
    void Remove(Attachment a) => _files.Remove(a);
    void Preview(Attachment a) => _ = a.Url; // 打开预览
}

API 参数

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。