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() }, }}