Attachment · Pactor UI 资产库

元信息

字段	值
规范 ID	`component.attachment`
名称	Attachment
二级分类	AI 与会话（`ai-chat`）
用途	展示、上传和管理会话附件
描述	中文惯用名：附件。

预览

静态结构：flex-wrap chip 组（w-56 border 卡片）= 类别图标（复用 FilePreview 的 inferKind）+ 名称 truncate + 大小 + 状态（uploading → loader 旋转 + 进度条；error → 「上传失败」+ 重试按钮）+ 移除按钮；onRemove / onRetry 传出 id（无 id 传下标）。上传与存储由调用方负责。

DSL 结构

DslNode

{
  "type": "Attachment",
  "props": {
    "items": [
      {
        "id": "a1",
        "name": "销售数据.xlsx",
        "fileSize": 128000,
        "fileType": "xlsx",
        "status": "done"
      },
      {
        "id": "a2",
        "name": "会议纪要.pdf",
        "fileType": "pdf",
        "status": "uploading",
        "progress": 60
      }
    ]
  },
  "events": {
    "onRemove": {
      "action": "setState",
      "params": {
        "removed": "${event}"
      }
    }
  }
}

何时用

何时使用

展示、上传和管理会话附件：发送前附件列表、消息附件呈现。

何时不用

完整文件预览：使用 FilePreview。
上传选择器：使用 Upload。

变体

变体	视觉形态	适用场景
done	图标 + 名称 + 大小	已就绪附件
uploading	进度条	上传中
error	失败标记 + 重试	上传失败可恢复

API 属性

属性	类型	默认值	说明
`items`	`AttachmentItemData[]`	[]	附件：{ id?, name, fileSize?, fileType?, status?, progress? }
`onRemove`	`event`	—	移除事件，传出 id / 下标（${event}）
`onRetry`	`event`	—	重试事件（error 态展示重试钮）
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式

使用规范

状态流转由调用方驱动（上传中 → 完成 / 失败），组件只呈现。

正例

✓ Composer 附件区：选择后 uploading 进度，失败可重试或移除。

反例

✕ 用 Attachment 做网盘文件列表（应使用 List / Table）。

Design Token 映射

不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。

关联资产