REAL SHOWCASE SOURCEstructured-panels
1 个文件 · 100 行 · TypeScript
// ===== showcase/src/examples/components/structured_panels.ts ===== import { RenderBorder, RenderCollapsiblePanelGroup, RenderPageHeader, RenderReviewSidebar, RenderStackPanel, RenderText,} from 'ds-ui' function detailPanel(title: string, lines: string[]): RenderBorder { const content = new RenderStackPanel({ orientation: 'vertical', spacing: 7, crossAxisAlignment: 'stretch' }) content.addChild(new RenderText(title, { role: 'title', weight: 'semibold' })) for (const line of lines) content.addChild(new RenderText(line, { role: 'secondary', size: 'small', overflow: 'ellipsis' })) return new RenderBorder({ background: 'muted', padding: 12, child: content })} export function createStructuredPanelsExample(): RenderStackPanel { const status = new RenderText('点击折叠标题、拖动分隔条,或操作右侧审阅卡片', { role: 'secondary' }) const group = new RenderCollapsiblePanelGroup({ sections: [ { key: 'patient', title: '患者摘要', expanded: true, flex: 1, child: detailPanel('林晓雨 · 女 · 36 岁', ['住院号:ZY20260718036', '科室:呼吸与危重症医学科', '过敏史:青霉素']), }, { key: 'diagnosis', title: '诊断与问题', expanded: true, flex: 1.2, child: detailPanel('当前诊断', ['急性上呼吸道感染 J06.9', '原发性高血压 I10.x00', '待确认:肺部感染']), }, { key: 'orders', title: '医嘱摘要', expanded: false, child: detailPanel('长期医嘱', ['低流量吸氧', '监测血氧饱和度', '每日复查体温']), }, ], minContentHeight: 70, onExpandedChange: event => { status.text = `${event.key} 已${event.expanded ? '展开' : '折叠'}` }, }) const sidebar = new RenderReviewSidebar({ width: 330, items: [ { key: 'review-1', type: 'comment', title: '主诉需要补充', meta: '王医生 · 10:18', content: '请补充症状持续时间以及是否伴随咳痰。', badgeLabel: '待处理', anchorX: 0, anchorY: 86, connector: true, color: '#155aa8', active: true, actions: [ { key: 'reply', label: '回复', variant: 'primary', onClick: () => { status.text = '已进入回复编辑' } }, { key: 'resolve', label: '解决', onClick: () => { status.text = '审阅意见已解决' } }, ], }, { key: 'review-2', type: 'track', title: '诊断内容已修改', meta: '系统追踪 · 10:26', content: '“上呼吸道感染”调整为“急性上呼吸道感染”。', reason: '规范诊断名称', badgeLabel: '修订', anchorX: 0, anchorY: 210, connector: true, color: '#0f7a4f', expanded: true, detailLines: ['原内容:上呼吸道感染', '新内容:急性上呼吸道感染'], auditTrail: [{ key: 'audit-1', label: '王医生修改', meta: '10:26', detail: '规范诊断名称' }], }, ], }) const workspace = new RenderStackPanel({ orientation: 'horizontal', spacing: 14, crossAxisAlignment: 'stretch' }) workspace.addChild(group, 1) workspace.addChild(sidebar) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'CollapsiblePanelGroup / ReviewSidebar', description: '组合可折叠、可调整高度的信息面板与带锚点连线、操作和审计记录的审阅侧栏。', })) panel.addChild(workspace, 1) panel.addChild(status) panel.padding = 20 return panel}