REAL SHOWCASE SOURCEstatus-indicators

1 个文件 · 69 行 · TypeScript

// ===== showcase/src/examples/components/status_indicators.ts ===== import {  RenderBadge,  RenderButton,  RenderChip,  RenderDivider,  RenderPageHeader,  RenderProgressBar,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createStatusIndicatorsExample(): RenderStackPanel {  const status = new RenderText('点击标签或更新进度,观察状态反馈', { role: 'secondary' })   const badges = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  badges.addChild(new RenderBadge({ value: '门诊', status: 'primary' }))  badges.addChild(new RenderBadge({ value: '已完成', status: 'success' }))  badges.addChild(new RenderBadge({ value: '待复核', status: 'warning' }))  badges.addChild(new RenderBadge({ value: '危急值', status: 'danger', appearance: 'filled' }))  badges.addChild(new RenderBadge({ value: 128, max: 99, status: 'danger' }))  badges.addChild(new RenderBadge({ dot: true, status: 'success' }))   const chips = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  const diagnosisChip = new RenderChip({    label: '原发性高血压',    selected: true,    removable: true,    onClick: () => { diagnosisChip.selected = !diagnosisChip.selected; status.text = diagnosisChip.selected ? '已选中主要诊断' : '已取消主要诊断' },    onRemove: () => { diagnosisChip.disabled = true; status.text = '诊断标签已移除' },  })  chips.addChild(diagnosisChip)  chips.addChild(new RenderChip({ label: '2 型糖尿病', removable: true, onRemove: () => { status.text = '已移除次要诊断' } }))  chips.addChild(new RenderChip({ label: '药物过敏', disabled: true }))   const progress = new RenderProgressBar({ value: 0.68, label: '病历完成度 68%' })  const syncing = new RenderProgressBar({ value: -1, label: '正在同步医嘱' })  syncing.startIndeterminate()  const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  actions.addChild(new RenderButton({    label: '完成病历',    variant: 'primary',    onClick: () => { progress.setValue(1); progress.label = '病历完成度 100%'; status.text = '病历已完成' },  }))  actions.addChild(new RenderButton({    label: '停止同步',    onClick: () => { syncing.stopIndeterminate(1); syncing.label = '医嘱同步完成'; status.text = '医嘱已同步' },  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Badge / Chip / Divider / ProgressBar',    description: '组合状态徽标、可操作标签、内容分隔线和确定或不确定进度反馈。',  }))  panel.addChild(new RenderText('状态徽标', { role: 'title', weight: 'semibold' }))  panel.addChild(badges)  panel.addChild(new RenderDivider())  panel.addChild(new RenderText('诊断标签', { role: 'title', weight: 'semibold' }))  panel.addChild(chips)  panel.addChild(new RenderDivider())  panel.addChild(progress)  panel.addChild(syncing)  panel.addChild(actions)  panel.addChild(status)  panel.padding = 24  return panel}