// ===== showcase/src/examples/components/adaptive_grid.ts ===== import { RenderAdaptiveGridPanel, RenderBorder, RenderButton, RenderPageHeader, RenderStackPanel, RenderText, RenderWrapPanel } from 'ds-ui' const metric = (title: string, value: string) => {  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 5 })  content.addChild(new RenderText(title, { role: 'secondary' }))  content.addChild(new RenderText(value, { role: 'title', weight: 'semibold' }))  return new RenderBorder({ background: 'panel', padding: 14, child: content })} export function createAdaptiveGridExample(): RenderStackPanel {  const status = new RenderText('当前最小列宽 190px；缩放窗口时列数会自动变化。', { role: 'secondary' })  const grid = new RenderAdaptiveGridPanel({ minColumnWidth: 190, minColumns: 1, maxColumns: 4, columnGap: 10, rowGap: 10 })  grid.addChild(metric('今日门诊', '186 人次'))  grid.addChild(metric('平均候诊', '12 分钟'))  grid.addChild(metric('高风险患者', '7 人'))  grid.addChild(metric('床位使用率', '86%'))  grid.addChild(metric('趋势摘要', '门诊量较昨日上升 8%，午后 14:00 达到峰值。'), { columnSpan: 2 })  const actions = new RenderWrapPanel({ spacing: 8 })  actions.addChild(new RenderButton({ label: '紧凑 160px', onClick: () => { grid.minColumnWidth = 160; status.text = '最小列宽 160px，可容纳更多列。' } }))  actions.addChild(new RenderButton({ label: '标准 190px', variant: 'primary', onClick: () => { grid.minColumnWidth = 190; status.text = '最小列宽 190px，兼顾密度和可读性。' } }))  actions.addChild(new RenderButton({ label: '宽松 260px', onClick: () => { grid.minColumnWidth = 260; status.text = '最小列宽 260px，布局自动减少列数。' } }))  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'AdaptiveGridPanel 响应式指标', description: '根据可用宽度推导列数，并允许重要卡片跨列。' }))  panel.addChild(actions)  panel.addChild(grid)  panel.addChild(status)  panel.padding = 24  return panel}