// ===== showcase/src/examples/components/medical_record_editor.ts ===== import {  MedicalRecordEditorController,  RenderButton,  RenderMedicalRecordEditor,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,  type MedicalRecordDocument,} from 'ds-ui' const documentModel: MedicalRecordDocument = {  type: 'doc',  props: { width: 210, height: 297, padding: { top: 25.4, bottom: 25.4, left: 19.1, right: 19.1 }, orient: 'portrait', headerLine: 12, footerLine: 12, columns: 1, pageNumOffset: 0 },  children: [    { type: 'header', props: {}, children: [] },    { type: 'body', props: {}, children: [      { type: 'p', props: {}, children: [{ type: 'text', props: { fontSize: 20, fontWeight: 'bold', fontName: '宋体' }, content: '入院记录' }] },      { type: 'p', props: {}, children: [        { type: 'text', content: '姓名：李安然    性别：女    年龄：42 岁    科室：心内科' },      ] },      { type: 'p', props: {}, children: [        { type: 'text', content: '入院日期：' },        { type: 'data-ele-date', props: { id: 'admitDate', caption: '入院日期', format: 'YYYY-MM-DD' }, children: [{ type: 'text', content: '2026-07-17' }] },        { type: 'text', content: '    过敏史：' },        { type: 'data-ele-list', props: { id: 'allergy', caption: '过敏史', multiSelect: true, options: [{ code: 'PEN', value: '青霉素' }, { code: 'CEP', value: '头孢' }, { code: 'NONE', value: '无' }] }, children: [{ type: 'text', content: '青霉素' }] },      ] },      { type: 'p', props: {}, children: [{ type: 'text', props: { fontSize: 14, fontName: '宋体' }, content: '主诉：活动后胸闷三天，加重半天。' }] },      { type: 'p', props: {}, children: [{ type: 'text', props: { fontSize: 14, fontName: '宋体' }, content: '现病史：患者三天前出现胸闷，休息后缓解，无发热、咯血。' }] },      { type: 'p', props: {}, children: [{ type: 'text', props: { fontSize: 14, fontName: '宋体' }, content: '查体：神志清楚，双肺呼吸音清，心率 86 次/分，律齐。' }] },    ] },    { type: 'footer', props: {}, children: [] },  ],} export function createMedicalRecordEditorExample(): RenderStackPanel {  const controller = new MedicalRecordEditorController({ document: documentModel })  controller.setDocumentMode('form')  controller.setShowComment(true)  const editor = new RenderMedicalRecordEditor({ controller, debug: false })  editor.height = 540  const status = new RenderText('表单模式：数据元可交互，正文按模板约束编辑。', { role: 'secondary' })  const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({ label: '表单模式', variant: 'primary', onClick: () => { controller.setDocumentMode('form'); status.text = '已切换到表单模式。' } }))  actions.addChild(new RenderButton({ label: '编辑模式', onClick: () => { controller.setDocumentMode('edit'); status.text = '已切换到自由编辑模式。' } }))  actions.addChild(new RenderButton({ label: '只读预览', onClick: () => { controller.setDocumentMode('view'); status.text = '已切换到只读预览模式。' } }))  actions.addChild(new RenderButton({ label: '序列化病历', onClick: () => { status.text = `病历 JSON 已生成，共 ${JSON.stringify(controller.serialize()).length} 个字符。` } }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'MedicalRecordEditor 入院记录', description: '分页病历编辑、结构化数据元、文档模式、批注能力和 JSON 序列化的完整业务编辑器。' }))  panel.addChild(actions)  panel.addChild(status)  panel.addChild(editor, 1)  panel.padding = 12  return panel}