2.10.0
中文
Ant Design X Vue

English

简体中文

English

简体中文

Theme

A2UI v0.8 ​

中文：A2UI v0.8

v0.8 is the compatibility protocol: commands have no version field, and the first update implicitly creates a Surface. Prefer A2UI v0.9 for new work.

The eight demos below mirror the React @ant-design/x-card 2.10 v0.8 showcase set: coffee booking, progressive loading, streaming recommendations, file browser, multi-card cart, filter search, multi-step registration, and action-context resolution. Each scenario uses native v0.8 commands (surfaceUpdate / dataModelUpdate / beginRendering).

Examples ​

Basic usage ​

v0.8 surfaceUpdate + dataModelUpdate + beginRendering
Basic usage

Coffee booking: choose a date and coffee, then confirm the order. Commands run in surfaceUpdate → dataModelUpdate → beginRendering order; on success the booking Surface is deleted and a result card is rendered.

Progressive ​

v0.8 surfaceUpdate 渐进更新两个 Surface
Progressive

Two coordinated Surfaces: loading-indicator shows progress while the product Surface appends two products per batch through repeated surfaceUpdate calls.

Streaming ​

v0.8 dataModelUpdate 驱动进度与推荐列表
Streaming

Food recommendations. Intro text streams first, then dataModelUpdate writes progress and restaurant lists incrementally so cards appear as progress advances.

Nested interaction ​

v0.8 文件树、详情卡与手风琴面板嵌套交互
Welcome to Project File Browser! Browse the project structure below. Click on files to view details, expand folders to explore nested contents.
Nested interaction

File tree, file detail, and accordion panels. Selecting a file writes selectedFile into the dataModel; the detail card follows the same path, while panel data is stored as JSON strings in valueMap.

Multi-card sync ​

v0.8 JSON 字符串 + dataModelUpdate 同步三张卡片
Welcome to Smart Shopping Cart! 🛒 Browse products, add them to your cart, and see real-time price calculations. Experience the power of multi-surface collaboration!
Multi-card sync

Product list, cart, and order summary share /cart. Add, quantity changes, removal, and checkout all update the dataModel, then switch to a success Surface.

v0.8 将 filters 以 valueMap JSON 字符串写回
Welcome to Product Search! 🔍 Find the perfect product by filtering by category, price, and rating. Results will update in real-time as you adjust filters.
Filter search

Keyword, categories, price range, and minimum rating are written to /filters. The panel and result list read the same data and refresh after a short delay.

Form validation ​

v0.8 分步校验 + 结果卡片
Form validation

Multi-step registration: basic info → security → result. Fields validate locally and write formData through the action context; the registration Surface is replaced by the result card.

Action context resolve ​

v0.8 数组格式 action.context，由 Card 解析 { path } 引用
onAction 回调日志（path 引用已解析）：

暂无日志，请填写表单后提交

Action context resolve

v0.8 action.context is { key, value: { path } }[]. Input writes the dataModel; an empty-context submit is resolved by Card.

API ​

XCard.Box / XCard.Card are shared across protocol versions. The tables below document the v0.8 command shapes. Bind :on-action in templates — it is a prop, not an emit.

XCard.Box ​

Box is the container that owns Card instances and dispatches commands. Place XCard.Card in the default slot.

PropDescriptionTypeDefault
commandsA2UI command objects(A2UICommand_v0_9 | XAgentCommand_v0_8)[][]
componentsImplementation map; names must start with an uppercase letterRecord<string, Component>-
onActionFired when a card triggers an action(payload: ActionPayload) => void-

XCard.Card ​

Renders a single Surface.

PropDescriptionTypeDefault
idSurface ID, matching surfaceId in commandsstring-

Custom components receive:

  • onAction(name, context): Card then resolves path references according to the protocol version
  • onDataChange(path, value): writes the current surface dataModel directly

ActionPayload ​

PropertyDescriptionTypeDefault
nameEvent namestring-
surfaceIdThe surfaceId that triggered the actionstring-
contextContext from the component, with path references resolvedRecord<string, any>-

Action context path resolution ​

When a component triggers an action, X Card resolves path references in the context to real values.

Path reference format (v0.8) ​

v0.8 action configs commonly use an array to describe path bindings:

json
{
  "id": "submit-btn",
  "component": {
    "Button": {
      "action": {
        "name": "agent:send_context_text",
        "context": [
          { "key": "username", "value": { "path": "/form/username" } },
          { "key": "email", "value": { "path": "/form/email" } }
        ]
      }
    }
  }
}

Resolution result ​

After the user clicks the button, onAction receives:

json
{
  "username": { "value": "John" },
  "email": { "value": "john@example.com" }
}

Note:

  • Only values that are themselves { path: "xxx" } are converted
  • Actual values passed by the component are not rewritten

XAgentCommand_v0_8 ​

XAgentCommand_v0_8 is an alias of A2UICommand_v0_8 and supports the following commands.

SurfaceUpdateCommand ​

Update components on a Surface.

PropertyDescriptionTypeDefault
surfaceUpdate.surfaceIdSurface IDstring-
surfaceUpdate.componentsComponent listComponentWrapper_v0_8[]-

ComponentWrapper_v0_8 ​

ts
interface ComponentWrapper_v0_8 {
  id: string
  component: {
    [componentType: string]: {
      child?: string
      children?: string[] | ExplicitList
      [key: string]: any | PathValue | LiteralStringValue
    }
  }
}

ExplicitList ​

ts
interface ExplicitList {
  explicitList: string[]
}

DataModelUpdateCommand ​

Update the data model (v0.8 format).

PropertyDescriptionTypeDefault
dataModelUpdate.surfaceIdSurface IDstring-
dataModelUpdate.contentsData content listArray<{ key: string; valueString?: string; valueMap?: Array<{ key: string; valueString: string }> }>-

BeginRenderingCommand ​

Begin rendering.

PropertyDescriptionTypeDefault
beginRendering.surfaceIdSurface IDstring-
beginRendering.rootRoot component IDstring-

DeleteSurfaceCommand ​

Delete a Surface.

PropertyDescriptionTypeDefault
deleteSurface.surfaceIdSurface IDstring-

PathValue ​

ts
interface PathValue {
  path: string
}

LiteralStringValue ​

Literal string value (v0.8 specific).

ts
interface LiteralStringValue {
  literalString: string
}