Playground

通过 A2UI JSON 实时渲染组件。左侧直接编辑组件树，右侧会立即展示当前可成功解析的渲染结果。

Examples

选择模板

先选一个场景，再在右侧查看渲染效果并继续调整 JSON。

JSON Editor

直接编辑根组件 JSON，保持和官方 playground 一样的核心工作流。

餐厅推荐列表743 lines已同步 16:52:02

餐厅推荐

改成更完整的推荐工作台：既有推荐结果，也有预订偏好、行程信息和备选页签，右侧渲染层次更丰富。

{ "type": "Column", "id": "restaurant-root", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Text", "id": "restaurant-title", "properties": { "text": { "literal": "今晚适合 4 人商务聚餐的餐厅推荐" }, "usageHint": "h2" } }, { "type": "Text", "id": "restaurant-copy", "properties": { "text": { "literal": "已根据“浦东、预算 400 元内、适合商务沟通”的条件筛选，优先展示安静度、包间可用性和临时改签灵活性更高的候选。" }, "usageHint": "body" } }, { "type": "Divider", "id": "restaurant-header-divider", "properties": {} }, { "type": "Row", "id": "restaurant-filters", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Card", "id": "restaurant-filter-1", "properties": { "children": [ { "type": "Text", "id": "restaurant-filter-1-label", "properties": { "text": { "literal": "区域" }, "usageHint": "caption" } }, { "type": "Divider", "id": "restaurant-filter-1-divider", "properties": {} }, { "type": "Text", "id": "restaurant-filter-1-value", "properties": { "text": { "literal": "浦东陆家嘴" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-filter-1-note", "properties": { "text": { "literal": "步行或短途打车可达" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-filter-2", "properties": { "children": [ { "type": "Text", "id": "restaurant-filter-2-label", "properties": { "text": { "literal": "预算" }, "usageHint": "caption" } }, { "type": "Divider", "id": "restaurant-filter-2-divider", "properties": {} }, { "type": "Text", "id": "restaurant-filter-2-value", "properties": { "text": { "literal": "人均 ¥120 - ¥180" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-filter-2-note", "properties": { "text": { "literal": "整体预算控制在 ¥400 内" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-filter-3", "properties": { "children": [ { "type": "Text", "id": "restaurant-filter-3-label", "properties": { "text": { "literal": "重点偏好" }, "usageHint": "caption" } }, { "type": "Divider", "id": "restaurant-filter-3-divider", "properties": {} }, { "type": "Text", "id": "restaurant-filter-3-value", "properties": { "text": { "literal": "安静 / 可预订 / 适合沟通" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-filter-3-note", "properties": { "text": { "literal": "优先考虑包间、停车和座位间距" }, "usageHint": "caption" } } ] } } ] } }, { "type": "Divider", "id": "restaurant-filters-divider", "properties": {} }, { "type": "Row", "id": "restaurant-feature", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Card", "id": "restaurant-featured-card", "weight": 1.35, "properties": { "children": [ { "type": "Text", "id": "restaurant-featured-title", "properties": { "text": { "literal": "首选：云和会馆" }, "usageHint": "h3" } }, { "type": "Text", "id": "restaurant-featured-meta", "properties": { "text": { "literal": "评分 4.7 · 步行 8 分钟 · 人均 ¥168" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-featured-reason", "properties": { "text": { "literal": "包间质量稳定，晚高峰噪音控制较好，服务节奏也更适合正式商务沟通；菜品风险低，适合第一次正式会面。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-featured-note", "properties": { "text": { "literal": "如果你更在意稳妥与安静，这家应排第一；如果临时需要投影设备，也更容易协调。" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-booking", "properties": { "children": [ { "type": "Text", "id": "restaurant-booking-title", "properties": { "text": { "literal": "预订偏好" }, "usageHint": "h4" } }, { "type": "MultipleChoice", "id": "restaurant-booking-purpose", "properties": { "options": [ { "label": { "literal": "正式商务沟通" }, "value": "business" }, { "label": { "literal": "轻松聚餐" }, "value": "casual" }, { "label": { "literal": "带演示材料沟通" }, "value": "presentation" } ], "selections": { "literal": "business" } } }, { "type": "DateTimeInput", "id": "restaurant-booking-time", "properties": { "value": { "literal": "2026-03-17T19:00" }, "enableDate": true, "enableTime": true } }, { "type": "CheckBox", "id": "restaurant-booking-room", "properties": { "label": { "literal": "优先预订包间" }, "value": { "literalBoolean": true } } }, { "type": "CheckBox", "id": "restaurant-booking-parking", "properties": { "label": { "literal": "需要提供停车位信息" }, "value": { "literalBoolean": true } } }, { "type": "Text", "id": "restaurant-booking-note", "properties": { "text": { "literal": "尽量在 17:30 前锁位，避免晚高峰排队。" }, "usageHint": "caption" } } ] } } ] } }, { "type": "Divider", "id": "restaurant-divider", "properties": {} }, { "type": "Row", "id": "restaurant-plan-row", "properties": { "alignment": "stretch", "distribution": "start", "children": [ { "type": "Card", "id": "restaurant-route-card", "weight": 1.15, "properties": { "children": [ { "type": "Text", "id": "restaurant-route-title", "properties": { "text": { "literal": "到店安排" }, "usageHint": "h4" } }, { "type": "Text", "id": "restaurant-route-body", "properties": { "text": { "literal": "18:40 从陆家嘴地铁站出发，步行约 8 分钟可达；如果带客户同行，建议 18:50 先到店确认包间。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-route-note", "properties": { "text": { "literal": "门口停车位较少，自驾建议提前联系餐厅登记车牌。" }, "usageHint": "caption" } } ] } }, { "type": "Card", "id": "restaurant-budget-card", "properties": { "children": [ { "type": "Text", "id": "restaurant-budget-title", "properties": { "text": { "literal": "预算匹配度" }, "usageHint": "h4" } }, { "type": "Text", "id": "restaurant-budget-copy", "properties": { "text": { "literal": "当前推荐与预算的匹配程度" }, "usageHint": "caption" } }, { "type": "Slider", "id": "restaurant-budget-slider", "properties": { "value": { "literalNumber": 82 }, "minValue": 0, "maxValue": 100 } }, { "type": "Text", "id": "restaurant-budget-note", "properties": { "text": { "literal": "在人均 168 元的情况下，四人用餐仍保留了加点空间。" }, "usageHint": "caption" } } ] } } ] } }, { "type": "Divider", "id": "restaurant-plan-divider", "properties": {} }, { "type": "Tabs", "id": "restaurant-tabs", "properties": { "tabItems": [ { "id": "restaurant-tabs-tab-0", "title": { "literal": "备选名单" }, "child": { "type": "List", "id": "restaurant-shortlist", "properties": { "direction": "vertical", "children": [ { "type": "Card", "id": "restaurant-option-1", "properties": { "children": [ { "type": "Text", "id": "restaurant-option-1-title", "properties": { "text": { "literal": "江南里" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-option-1-divider", "properties": {} }, { "type": "Text", "id": "restaurant-option-1-line-1", "properties": { "text": { "literal": "评分 4.6 · 人均 ¥145" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-1-line-2", "properties": { "text": { "literal": "本帮菜口味稳，出菜速度快" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-1-line-3", "properties": { "text": { "literal": "更适合重视性价比的商务晚餐" }, "usageHint": "body" } } ] } }, { "type": "Card", "id": "restaurant-option-2", "properties": { "children": [ { "type": "Text", "id": "restaurant-option-2-title", "properties": { "text": { "literal": "初见 Bistro" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-option-2-divider", "properties": {} }, { "type": "Text", "id": "restaurant-option-2-line-1", "properties": { "text": { "literal": "评分 4.5 · 人均 ¥158" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-2-line-2", "properties": { "text": { "literal": "环境现代，适合带演示材料沟通" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-option-2-line-3", "properties": { "text": { "literal": "临时改成更轻松的会面也不会突兀" }, "usageHint": "body" } } ] } } ] } } }, { "id": "restaurant-tabs-tab-1", "title": { "literal": "推荐理由" }, "child": { "type": "List", "id": "restaurant-reasons", "properties": { "direction": "vertical", "children": [ { "type": "Card", "id": "restaurant-reason-1", "properties": { "children": [ { "type": "Text", "id": "restaurant-reason-1-title", "properties": { "text": { "literal": "为什么首推云和会馆" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-reason-1-divider", "properties": {} }, { "type": "Text", "id": "restaurant-reason-1-line-1", "properties": { "text": { "literal": "安静度最稳定，包间体验明显优于同价位餐厅。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-reason-1-line-2", "properties": { "text": { "literal": "服务响应快，适合正式会面中的节奏控制。" }, "usageHint": "body" } } ] } }, { "type": "Card", "id": "restaurant-reason-2", "properties": { "children": [ { "type": "Text", "id": "restaurant-reason-2-title", "properties": { "text": { "literal": "何时切换备选" }, "usageHint": "h4" } }, { "type": "Divider", "id": "restaurant-reason-2-divider", "properties": {} }, { "type": "Text", "id": "restaurant-reason-2-line-1", "properties": { "text": { "literal": "如果晚间临时约人，可换到江南里降低等待风险。" }, "usageHint": "body" } }, { "type": "Text", "id": "restaurant-reason-2-line-2", "properties": { "text": { "literal": "如果希望氛围更轻松，可改成初见 Bistro。" }, "usageHint": "body" } } ] } } ] } } } ] } }, { "type": "Divider", "id": "restaurant-tabs-divider", "properties": {} }, { "type": "Card", "id": "restaurant-footer", "properties": { "children": [ { "type": "Text", "id": "restaurant-footer-title", "properties": { "text": { "literal": "推荐结论" }, "usageHint": "h4" } }, { "type": "Text", "id": "restaurant-footer-copy", "properties": { "text": { "literal": "优先预订云和会馆；如果更重视性价比，选择江南里会更合适；如果需要更现代的轻商务氛围，则选择初见 Bistro。" }, "usageHint": "body" } }, { "type": "Row", "id": "restaurant-footer-actions", "properties": { "alignment": "center", "distribution": "start", "children": [ { "type": "Button", "id": "restaurant-footer-button", "properties": { "child": { "type": "Text", "id": "restaurant-footer-button-label", "properties": { "text": { "literal": "复制推荐摘要" }, "usageHint": "body" } } } }, { "type": "Button", "id": "restaurant-footer-book-button", "properties": { "child": { "type": "Text", "id": "restaurant-footer-book-button-label", "properties": { "text": { "literal": "生成预订备注" }, "usageHint": "body" } } } } ] } } ] } } ] } }

Preview

编辑左侧 JSON 后，右侧会立即更新。

Column餐厅推荐

餐厅推荐列表

餐厅推荐

Live