[RFC] Artifacts #1617

hy993658052 · 2026-01-05T06:27:08Z

hy993658052
Jan 5, 2026
Maintainer

Summary

提供了一个预览窗口，允许我们实时查看、迭代 AI 生成的代码、文档和应用，并与之交互。

Motivation

很多AI应用在形态上从单纯的对话型进化成了对话+预览的形式，可以直观的看到当前的进度和生成的产物，所以需要有一个组件作为独立的窗口展示这些内容。

Detailed Design

API 设计

export interface ArtifactsProps {
  options?: SegmentedProps['options']; // 切换模式的选项，默认['code', 'preview', 'docs']
  displayMode?: string, // 模式，默认code
  onDisplayModeChange?: (displayMode: string) => void, // 切换模式事件
  title?: React.ReactNode, // 标题
  toolbars?: React.ReactNode, // 自定义工具按钮
  customRender?: Partial<Record<string, React.ReactNode>>, // 自定义options的value对应的渲染内容
  // code模式参数
  code?: string, // 代码内容
  editable?: boolean, // 代码可编辑，默认false
  onEdit?: () => void, // 代码修改事件
  // preview模式参数
  src?: string, // 预览地址
  showAddress?: boolean, // 是否显示地址栏，包含刷新按钮、地址输入框、新标签打开按钮，默认true
  loading?: boolean, // 是否在loading状态
  loadingContainer?: React.ReactNode; // loading状态展示内容
  error?: boolean, // 是否在error状态
  errorContainer?: React.ReactNode; // error状态展示内容
  // docs模式参数
  docs?: Array<{
    name: string,
    key?: React.Key,
    files?: Array<{
      name: string,
      type?: 'markdown' | 'text' | 'image' | string,
      value: string
    }>
  }>; // 文档group
}

参考示例：

Example Usage

基础使用

import { Artifacts } from '@ant-design/x';
import React from 'react';
import { Button } from 'antd';

const App = () => {
  return (
    <>
      <Artifacts
        options={['code', 'preview', 'docs']}
        displayMode={'code'}
        title={'登录页模板生成'}
        toolbars={<Button>分享</Button>}
        code={'<html></html>'}
        src={'http://localhost:3000'}
        docs={[
          {
            name: '说明文档',
            files: [
              {
                name: 'README.md',
                type: 'markdown',
                value: '# 说明文档'
              }
            ]
          }
        ]}
      />
    </>
  );
};

export default App;

code需要支持多文件吗

是

0%

否

0%

0 votes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[RFC] Artifacts #1617

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Uh oh!

[RFC] Artifacts #1617

Uh oh!

hy993658052 Jan 5, 2026 Maintainer

Summary

Motivation

Detailed Design

API 设计

Example Usage

基础使用

Replies: 0 comments

hy993658052
Jan 5, 2026
Maintainer