// ===== showcase/src/examples/components/segmented_control.ts ===== import {  RenderBadge,  RenderBorder,  RenderPageHeader,  RenderSegmentedControl,  RenderStackPanel,  RenderText,} from 'ds-ui' export function createSegmentedControlExample(): RenderStackPanel {  const status = new RenderText('当前查看：今日生命体征，舒适密度。', { role: 'secondary' })  const summary = new RenderText('待处理 12 · 高风险 3 · 已完成 28', { role: 'accent', weight: 'semibold' })  let range = 'today'  let density = 'comfortable'   const sync = (): void => {    const rangeLabel = range === 'today' ? '今日' : range === 'week' ? '本周' : '本月'    const densityLabel = density === 'compact' ? '紧凑' : '舒适'    status.text = `当前查看：${rangeLabel}生命体征，${densityLabel}密度。`    summary.text = range === 'today'      ? '待处理 12 · 高风险 3 · 已完成 28'      : range === 'week'        ? '待处理 46 · 高风险 9 · 已完成 186'        : '待处理 128 · 高风险 21 · 已完成 742'  }   const rangeControl = new RenderSegmentedControl({    value: range,    options: [      { value: 'today', label: '今日' },      { value: 'week', label: '本周' },      { value: 'month', label: '本月' },      { value: 'quarter', label: '季度', disabled: true },    ],    onChange: value => {      range = value      sync()    },  })  const densityControl = new RenderSegmentedControl({    value: density,    options: [      { value: 'compact', label: '紧凑' },      { value: 'comfortable', label: '舒适' },    ],    onChange: value => {      density = value      sync()    },  })   const filters = new RenderStackPanel({ orientation: 'horizontal', spacing: 18, crossAxisAlignment: 'center' })  filters.addChild(new RenderText('时间范围', { role: 'title', weight: 'semibold' }))  filters.addChild(rangeControl)  filters.addChild(new RenderText('显示密度', { role: 'title', weight: 'semibold' }))  filters.addChild(densityControl)   const summaryRow = new RenderStackPanel({ orientation: 'horizontal', spacing: 10, crossAxisAlignment: 'center' })  summaryRow.addChild(new RenderBadge({ value: '监护中心', status: 'primary' }))  summaryRow.addChild(summary, 1)  summaryRow.addChild(new RenderText('“季度”因数据未归档而禁用', { role: 'secondary', size: 'small' }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'SegmentedControl 监护视图切换',    description: '少量互斥选项在当前位置切换时间范围和显示密度，并跳过禁用分段。',  }))  panel.addChild(new RenderBorder({ background: 'panel', padding: 16, child: filters }))  panel.addChild(new RenderBorder({ background: 'selected', padding: 16, accentSide: 'left', child: summaryRow }))  panel.addChild(status)  panel.padding = 24  return panel}