Artifact

artifact

工件卡 · 智能体产出物(文档/简历/代码)对话内承载：头部(图标+标题+版本Chip+操作槽) + 折叠限高+底部渐隐遮罩 + 展开/收起(受控/非受控) · dogfood Chip

用法

基础用法

带标题/图标/版本 chip/操作区，长内容默认折叠（限高 + 渐隐 + 展开按钮）。

简历草稿 · 林晚晴v2

致云栖科技 · 应聘总裁私人秘书

五年行政与跨部门协调经验，曾独立支撑 CEO 办公室全年 200+ 场会议与差旅安排，擅长在信息密度极高的环境里维持秩序与优先级。

在前公司期间搭建了高管日程冲突自动检测流程，将排期返工率降低 60%；主导年度董事会材料的编排与保密流转，零差错交付三年。

我深知贵司正处于多产品线并行扩张期，总裁办公室需要的不只是执行，更是预判与兜底。我愿以两周试用证明上述判断。

tsx

<Artifact
  title="简历草稿 · 林晚晴"
  icon={<File className="size-4" />}
  version="v2"
  actions={<Button size="sm" variant="ghost">导出</Button>}
>
  {body}
</Artifact>

默认展开

defaultExpanded 让产出初始就摊开全文。

简历草稿v1

致云栖科技 · 应聘总裁私人秘书

五年行政与跨部门协调经验，曾独立支撑 CEO 办公室全年 200+ 场会议与差旅安排，擅长在信息密度极高的环境里维持秩序与优先级。

在前公司期间搭建了高管日程冲突自动检测流程，将排期返工率降低 60%；主导年度董事会材料的编排与保密流转，零差错交付三年。

我深知贵司正处于多产品线并行扩张期，总裁办公室需要的不只是执行，更是预判与兜底。我愿以两周试用证明上述判断。

tsx

<Artifact title="简历草稿" version="v1" defaultExpanded>
  {body}
</Artifact>

不可折叠

collapsedHeight={0} 关闭折叠，适合短产出。

简短产出

一段不需要折叠的简短内容。

tsx

<Artifact title="简短产出" collapsedHeight={0}>
  <p className="text-sm">一段不需要折叠的简短内容。</p>
</Artifact>

何时用

承载 agent 生成的成型产出物（文档、简历、代码块），需要标题/版本/导出操作并对长内容折叠限高时用。相关里 Dossier 偏多字段案卷展示；纯文本流式增长用 StreamingText；本组件是「最终成品」的容器卡，强调头部元信息 + 限高折叠。

导入

import { Artifact } from "@hulianui/ui"

Props

名称	类型	默认	说明
collapsedHeight	`number`	`240`	折叠态内容限高 px；`<=0` 表示不折叠
defaultExpanded	`boolean`	`false`	非受控初始展开态
expanded	`boolean`	—	受控展开态（与 onExpandedChange 配对）
className	`string`	—	容器附加类

Events

事件	类型	说明
onExpandedChange	`(expanded: boolean) => void`	受控展开态变化回调

Slots

插槽	类型	说明
title*	`ReactNode`	头部标题
icon	`ReactNode`	标题前图标
version	`ReactNode`	版本标识，渲染为小 chip（如 `"v2"`）
actions	`ReactNode`	头部右侧操作区（如导出按钮）
expandLabel	`ReactNode`	折叠时展开按钮文字（默认 `"展开全文"`）
collapseLabel	`ReactNode`	展开时收起按钮文字（默认 `"收起"`）
children	`ReactNode`	工件正文

禁忌 / 坑

受控/非受控二选一：传了 expanded 就必须配 onExpandedChange 自管状态，否则展开钮点了不动；只想要默认态用 defaultExpanded。
collapsedHeight<=0 关闭折叠后不会渲染渐隐遮罩与展开按钮，内容全量铺开——内容很长时别这么设。
候选坑 [[release-pipeline-stale-artifact-picked-by-readdir-find]] 讲 CI 发布流水线选错构建产物，与本 UI 工件卡无关，不适用。

用法

基础用法

带标题/图标/版本 chip/操作区，长内容默认折叠（限高 + 渐隐 + 展开按钮）。

简历草稿 · 林晚晴v2

致云栖科技 · 应聘总裁私人秘书

五年行政与跨部门协调经验，曾独立支撑 CEO 办公室全年 200+ 场会议与差旅安排，擅长在信息密度极高的环境里维持秩序与优先级。

在前公司期间搭建了高管日程冲突自动检测流程，将排期返工率降低 60%；主导年度董事会材料的编排与保密流转，零差错交付三年。

我深知贵司正处于多产品线并行扩张期，总裁办公室需要的不只是执行，更是预判与兜底。我愿以两周试用证明上述判断。

tsx

<Artifact
  title="简历草稿 · 林晚晴"
  icon={<File className="size-4" />}
  version="v2"
  actions={<Button size="sm" variant="ghost">导出</Button>}
>
  {body}
</Artifact>

默认展开

defaultExpanded 让产出初始就摊开全文。

简历草稿v1

致云栖科技 · 应聘总裁私人秘书

五年行政与跨部门协调经验，曾独立支撑 CEO 办公室全年 200+ 场会议与差旅安排，擅长在信息密度极高的环境里维持秩序与优先级。

在前公司期间搭建了高管日程冲突自动检测流程，将排期返工率降低 60%；主导年度董事会材料的编排与保密流转，零差错交付三年。

我深知贵司正处于多产品线并行扩张期，总裁办公室需要的不只是执行，更是预判与兜底。我愿以两周试用证明上述判断。

tsx

<Artifact title="简历草稿" version="v1" defaultExpanded>
  {body}
</Artifact>

不可折叠

collapsedHeight={0} 关闭折叠，适合短产出。

简短产出

一段不需要折叠的简短内容。

tsx

<Artifact title="简短产出" collapsedHeight={0}>
  <p className="text-sm">一段不需要折叠的简短内容。</p>
</Artifact>

何时用

名称

类型

默认

说明

collapsedHeight

number

240

折叠态内容限高 px；<=0 表示不折叠

defaultExpanded

boolean

false

非受控初始展开态

expanded

boolean

—

受控展开态（与 onExpandedChange 配对）

className

string

—

容器附加类

事件

类型

说明

onExpandedChange

(expanded: boolean) => void

受控展开态变化回调

Slots

插槽	类型	说明
title*	`ReactNode`	头部标题
icon	`ReactNode`	标题前图标
version	`ReactNode`	版本标识，渲染为小 chip（如 `"v2"`）
actions	`ReactNode`	头部右侧操作区（如导出按钮）
expandLabel	`ReactNode`	折叠时展开按钮文字（默认 `"展开全文"`）
collapseLabel	`ReactNode`	展开时收起按钮文字（默认 `"收起"`）
children	`ReactNode`	工件正文

禁忌 / 坑

受控/非受控二选一：传了 expanded 就必须配 onExpandedChange 自管状态，否则展开钮点了不动；只想要默认态用 defaultExpanded。

collapsedHeight<=0 关闭折叠后不会渲染渐隐遮罩与展开按钮，内容全量铺开——内容很长时别这么设。

候选坑 [[release-pipeline-stale-artifact-picked-by-readdir-find]] 讲 CI 发布流水线选错构建产物，与本 UI 工件卡无关，不适用。