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 已触发' }, })}