V1.0.0
WinDesign A2UI Vue

简介 ​

这个库是干嘛的？ ​

win-design-a2ui-vue（简称 A2UI）让你用 JSON 配置 来渲染 Vue 页面，不用手写模板。

简单说：你给 JSON，A2UI 帮你渲染页面。用户操作后，你收到通知，再返回 JSON 更新页面。

json
[
  { "id": "btn", "component": "WButton", "type": "primary", "child": "btn_text" },
  { "id": "btn_text", "component": "Text", "text": "提交申请" }
]

上面这段 JSON 会渲染出一个蓝色按钮。

适合什么场景？ ​

场景说明
前端对接后端 API后端返回 JSON 描述页面结构，前端一键渲染。按钮点击自动调后端 API，不用手写事件处理
AI Agent 驱动页面AI 大模型输出 JSON，A2UI 渲染成可交互页面
动态表单 / 动态页面页面结构由配置决定，不需要发版就能改布局

核心概念（3 个就够） ​

概念一句话解释
Surface一个画布（页面容器），所有组件都画在 Surface 上
Component组件（按钮、输入框、表格、编辑器等），用 JSON 描述
Processor消息处理器，你跟它说"渲染这个 JSON"，它就帮你把 Surface 和 Component 渲染出来
你的代码                     A2UI 内部                     页面
─────────                   ──────────                    ──────
processor.processMessages(json)
        │
        ├─ createSurface  ──►  创建画布 (Surface)
        ├─ updateComponents ──►  渲染组件树 (Component)
        └─ updateDataModel ──►  写入数据
                                    │
                                    ▼
                              <A2UISurface>  ──►  用户看到页面

两种使用方式 ​

方式一：processMessages2（推荐，适合对接后端 API） ​

一个调用搞定：渲染页面 + 加载数据 + 按钮点击自动调 API。

typescript
processor.processMessages2(
  { userId: '001' },          // 会话上下文
  { orderId: 'ORD-001' },     // 业务参数
  {
    components: [
      { id: 'btn', component: 'WButton', type: 'primary',
        action: { event: { name: 'submit', api: { url: '/api/submit' } } },
        child: 'btn_text' },
      { id: 'btn_text', component: 'Text', text: '提交' }
    ]
  },
  (actionInfo, result) => {
    // API 返回后的回调
    console.log('API 返回:', result);
  }
);

方式二：processMessages（适合 AI Agent 推送） ​

分步发送消息，手动监听事件处理业务。

typescript
// 渲染页面
processor.processMessages([
  { version: 'v0.9', createSurface: { surfaceId: 'main', catalogId: 'default' } },
  { version: 'v0.9', updateComponents: { surfaceId: 'main', components: [...] } }
]);

// 监听事件
processor.onEvent((event) => {
  if (event.message.userAction?.name === 'submit') {
    // 处理业务...
    event.resolve([]);  // 完成后必须调用 resolve
  }
});

支持的组件 ​

A2UI 内置了 WinDesign 组件库的常用组件：

分类组件
布局WRow、WCol、WSplitter、WScrollbar
导航WBreadcrumb、WDropdown
文本Text（支持 h1-h6、body 等样式）
表单WInput、WAutocomplete、WMention、WInputTag、WInputNumber、WSelect、WTransfer、WRadioGroup、WCheckboxGroup、WCascader、WButton、WDatePicker、WTimePicker、WTimeSelect 等
数据展示WTable、WTableV2、WTree、WTreeV2、WProgress、WPagination、WEmpty、WResult、WSkeleton 等
编辑器PangoEditor（富文本文档编辑器）
容器WForm（表单容器，自动收集数据）

各组件 path 绑定能力详见 path 数据绑定速查。

下一步 ​

Design by UED