// ===== showcase/src/examples/components/layout_lab.ts ===== import {  RenderBorder,  RenderButton,  RenderDockPanel,  RenderGridPanel,  RenderPageHeader,  RenderParagraph,  RenderSplitter,  RenderStackPanel,  RenderText,  gridAuto,  gridFr,} from 'ds-ui' const region = (title: string, detail: string, background: 'muted' | 'panel' | 'selected' = 'muted') => {  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 6 })  panel.addChild(new RenderText(title, { role: 'title', weight: 'semibold' }))  panel.addChild(new RenderParagraph(detail))  return new RenderBorder({ background, padding: 14, child: panel })} export function createLayoutLabExample(): RenderStackPanel {  const status = new RenderText('拖动中间分割条，观察长期工作区的比例调整。', { role: 'secondary' })  const detailGrid = new RenderGridPanel({    columns: [gridFr(), gridFr()],    rows: [gridAuto(), gridFr()],    columnGap: 10,    rowGap: 10,  })  detailGrid.addChild(region('基础信息', '姓名、性别、年龄'), { row: 0, column: 0 })  detailGrid.addChild(region('诊断信息', '主诊断与并发症', 'selected'), { row: 0, column: 1 })  detailGrid.addChild(region('就诊记录', '10:20 完成门诊接诊\n10:35 补充既往病史\n10:48 提交检验申请'), { row: 1, column: 0, columnSpan: 2 })   const splitter = new RenderSplitter({    first: region('患者列表', '王小明\n李安然\n周文静'),    second: detailGrid,    direction: 'horizontal',    ratio: 0.28,    minRatio: 0.2,    maxRatio: 0.55,    splitterSize: 7,    onChange: ratio => { status.text = `Splitter：左侧占比 ${Math.round(ratio * 100)}%` },  })   const toolbar = new RenderStackPanel({ orientation: 'horizontal', spacing: 8, crossAxisAlignment: 'center' })  toolbar.addChild(new RenderText('门诊工作台', { role: 'title', weight: 'semibold' }), 1)  toolbar.addChild(new RenderButton({ label: '刷新', onClick: () => { status.text = 'DockPanel 顶部工具栏：已刷新。' } }))  toolbar.addChild(new RenderButton({ label: '保存', variant: 'primary', onClick: () => { status.text = 'DockPanel 顶部工具栏：已保存。' } }))   const dock = new RenderDockPanel()  const toolbarRegion = new RenderBorder({ background: 'panel', padding: 10, child: toolbar, height: 52 })  const navigation = new RenderStackPanel({ orientation: 'vertical', spacing: 10 })  navigation.addChild(new RenderText('模块导航', { role: 'title', weight: 'semibold' }))  for (const label of ['首页', '患者管理', '检验查询', '系统设置']) {    navigation.addChild(new RenderText(label, {      role: label === '患者管理' ? 'accent' : 'secondary',      overflow: 'ellipsis',    }))  }  const navigationRegion = new RenderBorder({ background: 'muted', padding: 14, child: navigation })  navigationRegion.width = 170  const statusBar = new RenderStackPanel({ orientation: 'horizontal', spacing: 12, crossAxisAlignment: 'center' })  statusBar.addChild(new RenderText('状态栏', { role: 'title', weight: 'semibold' }))  statusBar.addChild(new RenderText('就绪 · 18 个组件示例已加载', { role: 'secondary', overflow: 'ellipsis' }), 1)  const statusRegion = new RenderBorder({ background: 'panel', padding: 10, child: statusBar, height: 46 })  dock.addChild(toolbarRegion, { dock: 'top' })  dock.addChild(statusRegion, { dock: 'bottom' })  dock.addChild(navigationRegion, { dock: 'left' })  dock.setFill(splitter)   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: '布局原语实验室', description: 'StackPanel 组织页面流，GridPanel 精确对齐，DockPanel 划分区域，Splitter 提供可调分栏。' }))  dock.height = 360  panel.addChild(dock)  panel.addChild(status)  panel.padding = 20  return panel}