REAL SHOWCASE SOURCEfloating-window

1 个文件 · 53 行 · TypeScript

// ===== showcase/src/examples/components/window.ts ===== import {  RenderButton,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWindow,  type AppHost,  type RenderBox,} from 'ds-ui'import type { ShowcaseExample } from '../../showcase_example' export function createWindowExample(): ShowcaseExample {  let host: AppHost | undefined  let windowCount = 0  const status = new RenderText('示例会在同一 Canvas Runtime 的窗口层打开真实 RenderWindow')  const openWindow = () => {    if (!host) return    windowCount += 1    const window = new RenderWindow({      title: `业务浮窗 ${windowCount}`,      x: 80 + windowCount * 24,      y: 72 + windowCount * 18,      width: 420,      height: 260,      minWidth: 280,      minHeight: 180,      borderStyle: 'sizable',    })    const body = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })    body.addChild(new RenderText('这是 Runtime 管理的浮动窗口', { role: 'title', weight: 'semibold' }))    body.addChild(new RenderText('拖动标题栏移动;拖动边缘缩放;最大化、关闭和焦点层级都由 RenderWindow 处理。'))    body.addChild(new RenderButton({ label: '关闭当前窗口', variant: 'primary', onClick: () => window.close() }))    body.padding = 18    window.addChild(body)    host.uiServices.showWindow(window)    status.text = `已打开 ${window.title} · 当前示例创建 ${windowCount} 个窗口`  }  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Window 浮动窗口', description: '通过 AppHost.uiServices 进入 Runtime 窗口层,支持拖动、缩放、焦点和生命周期。' }))  panel.addChild(new RenderButton({ label: '打开一个浮动窗口', variant: 'primary', onClick: openWindow }))  panel.addChild(status)  panel.padding = 24  const content: RenderBox = panel  return {    content,    afterMount: value => {      host = value      openWindow()    },  }}