// ===== showcase/src/examples/components/content_containers.ts ===== import {  RenderBorder,  RenderButton,  RenderCard,  RenderPageHeader,  RenderParagraph,  RenderSection,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createContentContainersExample(): RenderStackPanel {  const status = new RenderText('容器负责结构与视觉层级，业务状态仍由页面管理', { role: 'secondary' })  const headerActions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  headerActions.addChild(new RenderButton({ label: '刷新', onClick: () => { status.text = '患者概览已刷新' } }))  headerActions.addChild(new RenderButton({ label: '新建记录', variant: 'primary', onClick: () => { status.text = '已创建新的随访记录' } }))   const metrics = new RenderStackPanel({ orientation: 'horizontal', spacing: 12, crossAxisAlignment: 'stretch' })  metrics.addChild(new RenderCard({    title: '生命体征',    description: '最近一次测量',    child: new RenderText('体温 36.8℃　血压 128/78 mmHg', { role: 'accent', weight: 'semibold' }),  }), 1)  metrics.addChild(new RenderCard({    title: '风险评估',    description: '护理评估结果',    variant: 'translucent',    child: new RenderText('跌倒风险：中风险', { role: 'title', weight: 'semibold' }),  }), 1)   const section = new RenderSection({    title: '当前诊疗摘要',    description: '由业务页面组合标题、说明、操作和内容。',    actions: new RenderButton({ label: '查看详情', onClick: () => { status.text = '已打开诊疗详情' } }),    child: new RenderBorder({      background: 'selected',      padding: 14,      accentSide: 'left',      child: new RenderParagraph('患者一般情况稳定，继续当前治疗方案。重点观察呼吸困难、发热和血氧饱和度变化。'),    }),  })   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Card / Section / PageHeader / Border',    description: '使用统一的医疗紧凑主题组织页面标题、指标卡片、内容分区和强调边框。',    actions: headerActions,  }))  panel.addChild(metrics)  panel.addChild(section)  panel.addChild(status)  panel.padding = 24  return panel}