// ===== showcase/src/examples/components/masonry_panel.ts ===== import { RenderBorder, RenderButton, RenderMasonryPanel, RenderPageHeader, RenderParagraph, RenderStackPanel, RenderText, RenderWrapPanel } from 'ds-ui' const notes = [  ['术前评估', '完成麻醉分级、凝血功能和术前谈话。'],  ['检验预警', '钾离子 3.1 mmol/L，建议复查并结合心电图评估。'],  ['护理观察', '夜间睡眠一般，疼痛评分 3 分。继续观察切口渗出情况。'],  ['用药核对', '长期用药 5 项，存在 1 项相互作用提醒。'],  ['随访计划', '出院后第 7、30 天完成电话随访。'],  ['影像摘要', '胸部 CT 未见新增实变影，建议结合临床随诊。'],] export function createMasonryPanelExample(): RenderStackPanel {  const status = new RenderText('卡片总是放入当前最短列，避免规则网格留下大块空白。', { role: 'secondary' })  const masonry = new RenderMasonryPanel({ columnCount: 3, columnGap: 10, rowGap: 10 })  for (const [title, detail] of notes) {    const content = new RenderStackPanel({ orientation: 'vertical', spacing: 8 })    content.addChild(new RenderText(title!, { role: 'title', weight: 'semibold' }))    content.addChild(new RenderParagraph(detail!))    masonry.addChild(new RenderBorder({ background: 'panel', padding: 14, child: content }))  }  const actions = new RenderWrapPanel({ spacing: 8 })  for (const count of [2, 3, 4]) actions.addChild(new RenderButton({ label: `${count} 列`, variant: count === 3 ? 'primary' : 'default', onClick: () => {    masonry.columnCount = count    status.text = `已使用 ${count} 列重新执行最短列排布。`  } }))  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'MasonryPanel 临床信息瀑布流', description: '不同高度的摘要卡片按最短列策略紧凑排列。' }))  panel.addChild(actions)  panel.addChild(masonry)  panel.addChild(status)  panel.padding = 24  return panel}