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}