Preview Updated 2026-05-10

ArtifactCard 产物卡片

AI 生成的代码 / 文档 / 图片 / SVG / CSV / JSON 等"产物"的统一展示卡，含 copy / download / open 操作。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

kind 决定头部 icon 与 mime 推断。content 是原始字符串，传入则启用 copy + download 按钮；预览内容通过 default slot / children 给（可以放 <CfCode> / <svg> / <img> / 自定义渲染）。

背景视口

top-customers.sql代码sql14 行

SELECT u.id, u.name, COUNT(o.id) AS orders
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.created_at >= '2026-01-01'
GROUP BY u.id, u.name
ORDER BY orders DESC
LIMIT 100;

logo-mark.svgSVGsvg2 paths

src/App.vue

<script setup lang="ts">
import { CfArtifactCard } from '@chufix-design/vue';

const sql = `SELECT u.id, u.name, COUNT(o.id) AS orders
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.created_at >= '2026-01-01'
GROUP BY u.id, u.name
ORDER BY orders DESC
LIMIT 100;`;
</script>
<template>
  <div class="demo-stack" style="gap: 16px;">
    <CfArtifactCard
      kind="code"
      title="top-customers.sql"
      language="sql"
      :content="sql"
      meta="14 行"
    >
      <pre style="margin: 0; padding: 12px; font-family: var(--font-mono); font-size: var(--t-12); overflow-x: auto;">{{ sql }}</pre>
    </CfArtifactCard>
    <CfArtifactCard
      kind="svg"
      title="logo-mark.svg"
      language="svg"
      meta="2 paths"
      :content="'<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;><circle cx=&quot;16&quot; cy=&quot;16&quot; r=&quot;14&quot; fill=&quot;oklch(64% 0.16 263)&quot;/></svg>'"
    >
      <svg viewBox="0 0 32 32" width="80" height="80" aria-hidden="true">
        <circle cx="16" cy="16" r="14" fill="oklch(64% 0.16 263)" />
        <path d="M11 16l3 3 7-7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </CfArtifactCard>
  </div>
</template>

<script setup>
import { CfArtifactCard } from '@chufix-design/vue';

const sql = `SELECT u.id, u.name, COUNT(o.id) AS orders
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.created_at >= '2026-01-01'
GROUP BY u.id, u.name
ORDER BY orders DESC
LIMIT 100;`;
</script>
<template>
  <div class="demo-stack" style="gap: 16px;">
    <CfArtifactCard
      kind="code"
      title="top-customers.sql"
      language="sql"
      :content="sql"
      meta="14 行"
    >
      <pre style="margin: 0; padding: 12px; font-family: var(--font-mono); font-size: var(--t-12); overflow-x: auto;">{{ sql }}</pre>
    </CfArtifactCard>
    <CfArtifactCard
      kind="svg"
      title="logo-mark.svg"
      language="svg"
      meta="2 paths"
      :content="'<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;><circle cx=&quot;16&quot; cy=&quot;16&quot; r=&quot;14&quot; fill=&quot;oklch(64% 0.16 263)&quot;/></svg>'"
    >
      <svg viewBox="0 0 32 32" width="80" height="80" aria-hidden="true">
        <circle cx="16" cy="16" r="14" fill="oklch(64% 0.16 263)" />
        <path d="M11 16l3 3 7-7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </CfArtifactCard>
  </div>
</template>

import { CfArtifactCard } from '@chufix-design/react';

export default function Demo() {
  const sql = `SELECT u.id, u.name, COUNT(o.id) AS orders
  FROM users u
  LEFT JOIN orders o ON o.user_id = u.id
  WHERE u.created_at >= '2026-01-01'
  GROUP BY u.id, u.name
  ORDER BY orders DESC
  LIMIT 100;`;
  return (
    <>
      <div className="demo-stack" style={{ gap: 16 }}>
          <CfArtifactCard kind="code" title="top-customers.sql" language="sql" content={sql} meta="14 行" >
            <pre style={{ margin: 0, padding: 12, fontFamily: "var(--font-mono)", fontSize: "var(--t-12)", overflowX: "auto" }}>{sql}</pre>
          </CfArtifactCard>
          <CfArtifactCard kind="svg" title="logo-mark.svg" language="svg" meta="2 paths" content={'<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;><circle cx=&quot;16&quot; cy=&quot;16&quot; r=&quot;14&quot; fill=&quot;oklch(64% 0.16 263)&quot;/></svg>'}
          >
            <svg viewBox="0 0 32 32" width="80" height="80" aria-hidden="true">
              <circle cx="16" cy="16" r="14" fill="oklch(64% 0.16 263)" />
              <path d="M11 16l3 3 7-7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </CfArtifactCard>
        </div>
    </>
  );
}

import { CfArtifactCard } from '@chufix-design/react';

export default function Demo() {
  const sql = `SELECT u.id, u.name, COUNT(o.id) AS orders
  FROM users u
  LEFT JOIN orders o ON o.user_id = u.id
  WHERE u.created_at >= '2026-01-01'
  GROUP BY u.id, u.name
  ORDER BY orders DESC
  LIMIT 100;`;
  return (
    <>
      <div className="demo-stack" style={{ gap: 16 }}>
          <CfArtifactCard kind="code" title="top-customers.sql" language="sql" content={sql} meta="14 行" >
            <pre style={{ margin: 0, padding: 12, fontFamily: "var(--font-mono)", fontSize: "var(--t-12)", overflowX: "auto" }}>{sql}</pre>
          </CfArtifactCard>
          <CfArtifactCard kind="svg" title="logo-mark.svg" language="svg" meta="2 paths" content={'<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot;><circle cx=&quot;16&quot; cy=&quot;16&quot; r=&quot;14&quot; fill=&quot;oklch(64% 0.16 263)&quot;/></svg>'}
          >
            <svg viewBox="0 0 32 32" width="80" height="80" aria-hidden="true">
              <circle cx="16" cy="16" r="14" fill="oklch(64% 0.16 263)" />
              <path d="M11 16l3 3 7-7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </CfArtifactCard>
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`kind`	`'code' \| 'doc' \| 'svg' \| 'html' \| 'image' \| 'csv' \| 'json'`	`—`	决定 icon 与 download mime
`title`	`string`	`—`	标题
`language`	`string`	`—`	语言 / 文件扩展
`meta`	`string`	`—`	附加描述（行数 / token 数）
`content`	`string`	`—`	原始字符串；启用 copy / download
`filename`	`string`	`—`	下载文件名（默认 `{title}.{ext}`）
`actions`	`{ copy?, download?, open? }`	`{ copy:true, download:true, open:true }`	显示哪些操作
`kindLabel`	`string`	`—`	覆盖 kind 标签

Events

Vue	React	说明
`copy` / `download` / `open`	`onCopy` / `onDownload` / `onOpen`	按钮回调