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}