XCard A2UI 动态卡片

基于 A2UI 协议的动态卡片渲染（对齐 @ant-design/x-card），当前实现 v0.9 命令集。

何时使用

• Agent 通过结构化 JSON 命令流动态构建交互界面。
• 需要 surface / dataModel / action 上报的企业级 Agent UI。

代码演示

基本

本地 catalog + Text / Button 渲染。

这是 A2UI 动态卡片（v0.9）

<script setup lang="tsx">
import { Button as AntButton } from 'ant-design-vue';
import { computed, defineComponent, ref } from 'vue';
import { Box, Card, registerCatalog, type A2UICommand_v0_9 } from 'ant-design-x-vue';

defineOptions({ name: 'AXXCardBasic' });

registerCatalog({
  $id: 'local://demo',
  components: {
    Text: { type: 'object', properties: { text: {} } },
    Button: { type: 'object', properties: { text: {}, action: {} } },
  },
});

const Text = defineComponent({
  name: 'Text',
  props: { text: String },
  setup(p, { slots }) {
    return () => (
      <div>
        <p style={{ margin: '0 0 12px' }}>{p.text}</p>
        {slots.default?.()}
      </div>
    );
  },
});

const Button = defineComponent({
  name: 'Button',
  props: {
    text: String,
    action: Object,
    onAction: Function,
  },
  setup(p) {
    return () => (
      <AntButton
        type="primary"
        onClick={() => (p.onAction as any)?.((p.action as any)?.event?.name || 'click', {})}
      >
        {p.text}
      </AntButton>
    );
  },
});

const actionLog = ref('');
const commands = ref<A2UICommand_v0_9[]>([
  {
    version: 'v0.9',
    createSurface: { surfaceId: 'main', catalogId: 'local://demo' },
  },
  {
    version: 'v0.9',
    updateComponents: {
      surfaceId: 'main',
      components: [
        { id: 'root', component: 'Text', text: '这是 A2UI 动态卡片（v0.9）', children: ['btn'] },
        {
          id: 'btn',
          component: 'Button',
          text: '提交',
          action: { event: { name: 'submit' } },
        },
      ],
    },
  },
]);

const comps = computed(() => ({ Text, Button }));

defineRender(() => {
  return (
    <div>
      <Box
        commands={commands.value}
        components={comps.value}
        allowedCatalogIds={['local://demo']}
        onAction={(payload) => {
          actionLog.value = `action=${payload.name}, surface=${payload.surfaceId}`;
        }}
      >
        <Card id="main" />
      </Box>
      {actionLog.value ? <p style={{ marginTop: 12, color: '#666' }}>{actionLog.value}</p> : null}
    </div>
  );
});
</script>

隐藏源代码

API

XCard.Box

属性	说明	类型	默认值
commands	命令队列（追加式）	A2UICommand_v0_9[]	[]
components	已注册的 Vue 组件映射（组件名需大写开头）	Record<string, Component>	{}
allowedCatalogIds	远程 catalog 白名单；未列出则拒绝 fetch（安全）	string[]	-
onAction	组件触发 action 时回调	(payload: ActionPayload) => void	-

XCard.Card

属性	说明	类型
id	surfaceId	string

Catalog

import { registerCatalog, loadCatalog, clearCatalogCache } from 'ant-design-x-vue-next';

registerCatalog({
  $id: 'local://demo',
  components: { Text: { type: 'object' }, Button: { type: 'object' } },
});

企业安全建议

• 务必配置 allowedCatalogIds，禁止 Agent 任意 URL 拉 catalog（防 SSRF）。
• 组件实现由宿主提供；onAction 不要自动执行危险操作，需业务侧二次确认。
• 优先使用 registerCatalog + local:// 本地目录。

说明

• 当前支持 A2UI v0.9：createSurface / updateComponents / updateDataModel / deleteSurface。
• v0.8 兼容后续对齐。

贡献者

贡献者

正在加载贡献者信息...