REAL SHOWCASE SOURCEpage-states

1 个文件 · 50 行 · TypeScript

// ===== showcase/src/examples/components/page_states.ts ===== import {  RenderBadge,  RenderButton,  RenderEmpty,  RenderGroupBox,  RenderIconButton,  RenderPage,  RenderPageHeader,  RenderStackPanel,  RenderText,} from 'ds-ui' export function createPageStatesExample(): RenderPage {  const status = new RenderText('RenderPage 承载页面生命周期和内容替换能力', { role: 'secondary' })  const patientInfo = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'stretch' })  patientInfo.addChild(new RenderText('林晓雨 女 36 岁', { role: 'title', weight: 'semibold' }))  patientInfo.addChild(new RenderText('住院号 ZY20260718036 · 呼吸与危重症医学科 · 12 床', { role: 'secondary' }))  patientInfo.addChild(new RenderText('主要诊断:急性上呼吸道感染', { role: 'accent' }))   const group = new RenderGroupBox({    title: '患者基本信息',    headerInfo: '最后更新 10:32',    headerLeading: new RenderBadge({ value: '住院', status: 'primary' }),    headerActions: new RenderIconButton({ icon: 'refresh', tooltip: '刷新患者信息', onClick: () => { status.text = '患者基本信息已刷新' } }),    child: patientInfo,  })   const empty = new RenderEmpty({    icon: 'document-search',    title: '暂无检验报告',    description: '当前住院记录还没有已发布的检验结果。',    action: new RenderButton({ label: '申请检验', variant: 'primary', onClick: () => { status.text = '已进入检验申请流程' } }),  })   const content = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  content.addChild(new RenderPageHeader({    title: 'Page / GroupBox / Empty 页面状态',    description: '展示页面生命周期容器、分组信息面板以及带操作入口的空状态。',  }))  content.addChild(group)  content.addChild(empty, 1)  content.addChild(status)  content.padding = 24  return new RenderPage({    child: content,    onLoaded: () => { status.text = '页面首次布局完成,onLoaded 已触发' },  })}