输入框附件
AI 输入栏内的附件卡片:progress 可配置,成功态为黄边 + 100% 徽章。
附件列表通过 attachments 传入;progress: 0 播上传环,到 100 显示「上传成功!」并切黄边。文件名、类型、缩略图都是数据项,不是写死 UI。
安装
npx @joyui/cli add composer-attachments --yes或通过 JoyUI MCP / CLI 安装。
应用场景
智能体对话中拖入合同 / 截图:把上传接口的进度写回 progress,完成后由父级把文件 id 交给下一轮 prompt。
API
ComposerWithAttachments
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| attachments | 附件列表;progress 驱动上传态。 | ComposerAttachment[] | — | 演示数据 |
| className | 合并到根节点的额外类名。 | string | — | — |
ComposerAttachment
| 字段 | 说明 | 类型 | 必填 | 示例 |
|---|---|---|---|---|
| id | id。 | string | 是 | "demo-png" |
| name | 文件名。 | string | 是 | "a.png" |
| kind | 类型。 | "image"|"document"|"spreadsheet"|"file" | 是 | "image" |
| progress | 0 动画;100 成功。 | number | 否 | 0 |