浮动窗口
浮动窗口用于把工具、检查器、调试面板或临时业务窗口放到主界面之上。它和普通 popup 不同:浮动窗口通常可拖动、可调整大小、可长期停留。
API 总览
import { AppOverlayService, RenderButton, RenderObjectInspector, RenderText, RenderWindow, type AppModalWindowOptions, type AppHost, type RenderWindowBorderStyle, type RenderWindowChrome, type RenderWindowOptions, type RenderWindowPresentation,} from 'ds-ui'
由应用入口保留 AppHost,需要窗口服务时从同一个 host 获取:
function openFloatingWindow(host: AppHost, window: RenderWindow): RenderWindow { return host.uiServices.showWindow(window)}
| API | 类型 | 用途 |
|---|---|---|
RenderWindow |
class | 浮动或嵌入式窗口外壳,负责 chrome、拖拽、尺寸、owned window 和内容布局。 |
RenderWindowOptions |
type | 窗口构造参数。 |
RenderWindowBorderStyle |
type | 窗口边框尺寸模式:sizable 可调整大小,fixed 固定大小。 |
RenderWindowChrome |
type | 窗口 chrome 类型,例如标准标题栏或无 chrome。 |
RenderWindowPresentation |
type | 当前呈现模式:floating、tabbed 或 docked。 |
AppModalWindowOptions |
type | showModalWindow() 的应用上下文选项。 |
AppOverlayService |
class | 应用级窗口/浮层服务。业务打开独立浮窗时优先通过服务托管。 |
RenderWindow.setWindowBounds({ x, y, width, height }) 用于程序化更新浮动窗口边界。只改变位置时,它会登记移动前后的视觉损伤区域;改变尺寸时,它会进入 layout。窗口阴影已经包含在视觉边界内,业务代码不需要手动请求全屏重绘。
最小装配顺序是:创建 RenderWindow,设置内容子节点,再交给宿主窗口、AppOverlayService 或 DockWindowManager 管理。窗口关闭或页面释放时必须释放窗口及其私有上下文、订阅和子窗口。
基本用法
const window = new RenderWindow({ title: '对象详情', x: 80, y: 80, width: 420, height: 320, borderStyle: 'sizable', draggable: true,}) window.addChild(new RenderObjectInspector({ label: 'state', value: state, adaptiveTreeHeight: true,}))
浮动窗口本身只负责窗口外壳。窗口内容应继续由基础布局和组件组合。
模态窗口
如果需要 WinForms/WPF 风格的真模态窗口,使用 AppOverlayService.showModalWindow(window, options) 打开普通 RenderWindow。它不会绘制遮罩,而是把该窗口放入应用级 modal 栈:modal 存在期间,普通浮窗和主窗口仍然显示在原位置,但点击、滚轮和外部焦点切换都会被拦截,并让当前最顶层 modal 轻微闪烁提示。
const dialog = new RenderWindow({ title: '保存确认', width: 360, height: 200, borderStyle: 'fixed',}) dialog.setChildren([ new RenderText('是否保存当前修改?'), new RenderButton({ label: '保存', onClick: () => dialog.closeWithResult(true), }), new RenderButton({ label: '取消', onClick: () => dialog.closeWithResult(false), }),]) const saved = await uiServices.showModalWindow(dialog)
showModalWindow() 返回 Promise<boolean>。调用 closeWithResult(true) 或 closeWithResult(false) 会把明确结果传给 Promise;关闭按钮、普通 close()、dispose 等非受控关闭统一解析为 false。非模态窗口也可以调用 closeWithResult(),它会退化为普通关闭。
模态窗口会作为主窗口的 owned window 挂载,默认强制居中到 canvas viewport,默认隐藏最大化按钮。嵌套 modal 是允许的,只有栈顶 modal 可交互;关闭栈顶后,交互权会回到上一层 modal。打开 modal 时会关闭临时 popup、context menu 和 tooltip,但不会强制隐藏已有的普通浮窗或持久 loading。
适用场景
- 对象查看器。
- 运行时诊断。
- 布局检查器。
- 可停留的业务辅助窗口。
- 多窗口工作台中的浮动 tab。
上下文规则
浮动窗口如果由某个页面打开,应优先继承该页面上下文。否则当 tab 浮动或弹出后,窗口内命令和业务数据可能查不到原页面状态。
窗口关闭时要释放:
- 窗口私有上下文。
- 订阅。
- 定时器。
- 大对象引用。
- 子窗口。
使用建议
- 调试和工具类窗口可以长期停留。
- 编辑型窗口要处理脏数据确认。
- 窗口内容不要自绘大段 UI,优先组合已有组件。
- 如果只是简单提示、确认或输入,优先使用
alert()、confirm()、prompt();需要真正窗口能力时再使用showModalWindow()。