DirectSurface UIDirectSurface UI
开始使用
组件/导航和工作区组件

导航和工作区组件 / COMPONENT

Window

浮动窗口用于把工具、检查器、调试面板或临时业务窗口放到主界面之上。它和普通 popup 不同:浮动窗口通常可拖动、可调整大小、可长期停留。

文档 READY示例 1
PUBLIC APIRenderWindow

FUNCTION EXPLORER

可运行示例与完整源码。

这里始终保留组件的主运行入口;文档中的示例用于补充具体功能说明。

LIVE EXAMPLE WINDOW
全屏
正在启动 DirectSurface UI 运行时…

浮动窗口

浮动窗口用于把工具、检查器、调试面板或临时业务窗口放到主界面之上。它和普通 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,设置内容子节点,再交给宿主窗口、AppOverlayServiceDockWindowManager 管理。窗口关闭或页面释放时必须释放窗口及其私有上下文、订阅和子窗口。

基本用法

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,}))
LIVE CANVAS可运行组件示例
ON-DEMAND RUNTIME交互式示例将在进入视区时启动避免文档首屏同时初始化多个 Canvas Runtime

浮动窗口本身只负责窗口外壳。窗口内容应继续由基础布局和组件组合。

模态窗口

如果需要 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()