ctx.visualUI 操作由可视化界面编辑器生成的界面。代码可以按元素“引用名”修改属性、样式和可见性，也可以监听点击。

​
API

方法返回值说明
open(name, options?)Promise<VisualUIViewHandle>打开界面并返回本次实例句柄
attach(name)VisualUIViewHandle | null获取已打开的界面实例
onBeforeOpen(name, listener)取消监听函数界面挂载前执行，并等待异步任务
onOpen(name, listener)取消监听函数界面打开后执行
VisualUIViewHandle 提供 name、get(refId)、close() 和 onClose()。元素句柄提供 setProps()、setStyle()、setHidden() 与 on("click", listener)。

​
案例：打开并更新欢迎面板

输入： 扩展 my.extension 包含界面 main-panel，其中有引用名为 title 的文本元素。 
const name = "@my.extension/main-panel";
const view = await ctx.visualUI.open(name, { modal: true });
const title = view.get("title");

title?.setProps({ text: "欢迎回来" });
title?.setStyle({ color: "#ffd76a" });

console.log({
  name: view.name,
  titleFound: title !== null,
});
输出： 
{
  "name": "@my.extension/main-panel",
  "titleFound": true
}
界面以模态方式打开，标题文字显示为金色的“欢迎回来”。如果编辑器中没有填写 title 引用名，view.get("title") 输出 null。 完整的生命周期和控制器写法见程序控制可视化界面。