REAL SHOWCASE SOURCEdock-workbench
1 个文件 · 49 行 · TypeScript
// ===== showcase/src/examples/components/dock_workbench.ts ===== import { DockWorkbenchManager, RenderButton, RenderDockWorkbench, RenderPageHeader, RenderStackPanel, RenderText, RenderWrapPanel,} from 'ds-ui' const content = (title: string, description: string) => { const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderText(title, { role: 'title', weight: 'semibold' })) panel.addChild(new RenderText(description, { role: 'secondary' })) panel.padding = 16 return panel} export function createDockWorkbenchExample(): RenderStackPanel { const manager = new DockWorkbenchManager() const workbench = new RenderDockWorkbench({ manager, disposeManagerOnDispose: true }) const openDocument = (id: string, title: string) => manager.hasItem(id) ? manager.activateItem(id) : manager.openDocument({ itemId: id, title, icon: 'document', content: content(title, '文档默认进入中心区域,可在标签之间切换。') }) const openTool = (id: string, title: string, region: 'left' | 'right' | 'bottom') => manager.hasItem(id) ? manager.activateItem(id) : manager.openTool({ itemId: id, title, region, icon: 'toolbox', content: content(title, `这是 ${region} 工具区,可停靠、自动隐藏或调整尺寸。`) }) const controls = new RenderWrapPanel({ spacing: 8, runSpacing: 8 }) controls.addChild(new RenderButton({ label: '打开设计器', onClick: () => openDocument('designer', '页面设计器') })) controls.addChild(new RenderButton({ label: '打开数据模型', onClick: () => openDocument('model', '数据模型') })) controls.addChild(new RenderButton({ label: '解决方案', onClick: () => openTool('solution', '解决方案', 'left') })) controls.addChild(new RenderButton({ label: '属性', onClick: () => openTool('properties', '属性', 'right') })) controls.addChild(new RenderButton({ label: '输出', onClick: () => openTool('output', '输出', 'bottom') })) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'DockWorkbench IDE 工作台', description: '中心文档、左右工具区与底部输出区由统一 Manager 管理。' })) panel.addChild(controls) panel.addChild(workbench, 1) openDocument('designer', '页面设计器') openDocument('model', '数据模型') openTool('solution', '解决方案', 'left') openTool('properties', '属性', 'right') openTool('output', '输出', 'bottom') panel.padding = 12 return panel}