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: "#fff4fa",
  textFill: {
    type: "linear-gradient",
    angle: 20,
    stops: [
      { color: "#fff8fc", position: 0 },
      { color: "#ff9fbd", position: 100 },
    ],
  },
  textStroke: { width: 1.5, color: "#351622", mode: "outer" },
});

console.log({
  name: view.name,
  titleFound: title !== null,
});
输出： 
{
  "name": "@my.extension/main-panel",
  "titleFound": true
}
界面以模态方式打开，标题文字显示为樱花粉渐变和外描边的“欢迎回来”。如果编辑器中没有填写 title 引用名，view.get("title") 输出 null。 setStyle() 会对 VisualUIStyle 已知字段提供类型补全，包括 textFill、 textStroke 和 textShadows。它仍是增量浅合并：更新渐变时应传完整的 textFill 对象，清除阴影时传 textShadows: []。 完整的生命周期和控制器写法见程序控制可视化界面。