#产物卡

产物卡展示报告、文档、图片、补丁或数据集等持久输出。它比目录资源卡更扁平、更紧凑。

npm install @a3s-lab/ui

<article class="artifact-card" data-state="complete">
  <header><h3>发布就绪报告</h3><span data-artifact-meta>Markdown</span></header>
  <section><div data-artifact-preview>...</div></section>
  <footer>...</footer>
</article>

import "@a3s-lab/ui/a3s.css";

#用法

<article class="artifact-card" data-state="complete">
  <header><h3>发布就绪报告</h3><span data-artifact-meta>Markdown</span></header>
  <section><div data-artifact-preview>...</div></section>
  <footer>...</footer>
</article>

#HTML 结构

#状态与变体

生成中状态保留未来的标题与格式。过期状态说明发生了什么变化以及如何重新生成。

#可访问性

用符合页面层级的标题命名产物，元数据只补充格式、版本、大小和时间，不能重复整段预览。生成中状态保留标题与预期格式，并用一个礼貌型状态说明进度；错误和过期状态必须写出原因与重新生成入口。下载与打开是两个不同操作，需要明确名称和可见焦点。宿主负责内容可信度、生成、版本、下载和路由，卡片只展示持久输出，不能把“已生成”自动表述为“已验证”。