// ===== showcase/src/examples/components/entry_grid.ts ===== import {  RenderButton,  RenderComboBox,  RenderDatePicker,  RenderEntryGrid,  RenderFieldPresenter,  RenderNumberInput,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderTextArea,  RenderTextBox,  RenderWrapPanel,  fieldTrack,} from 'ds-ui' export function createEntryGridExample(): RenderStackPanel {  const status = new RenderText('填写完成后点击“保存接诊记录”，错误会集中显示在对应行下方。', { role: 'secondary' })  const patientName = new RenderTextBox({ value: '李安然', placeholder: '输入患者姓名' })  const outpatientNo = new RenderTextBox({ value: 'MZ20260717018', placeholder: '输入门诊号' })  const temperature = new RenderNumberInput({ value: 36.8, min: 34, max: 43, step: 0.1 })  const complaint = new RenderTextArea({    value: '间断胸闷两天，活动后加重。',    placeholder: '记录主诉与持续时间',    minLines: 3,    maxLines: 5,  })   const patientField = new RenderFieldPresenter({    label: '患者姓名',    required: true,    child: patientName,  })  const outpatientField = new RenderFieldPresenter({    label: '门诊号',    required: true,    child: outpatientNo,  })  const complaintField = new RenderFieldPresenter({    label: '主诉',    required: true,    child: complaint,  })   const grid = new RenderEntryGrid({    columns: [fieldTrack(), fieldTrack(), fieldTrack(), fieldTrack()],    columnGap: 14,    rowGap: 12,    validationPresentation: 'row-feedback',    enterNavigation: 'next-focusable',  })  grid.addChild(patientField)  grid.addChild(outpatientField)  grid.addChild(new RenderFieldPresenter({    label: '就诊日期',    required: true,    child: new RenderDatePicker({ value: '2026-07-17', clearable: true }),  }))  grid.addChild(new RenderFieldPresenter({    label: '接诊科室',    child: new RenderComboBox({      value: 'cardiology',      options: [        { value: 'cardiology', label: '心内科' },        { value: 'respiratory', label: '呼吸内科' },        { value: 'emergency', label: '急诊医学科' },      ],    }),  }))  grid.addChild(new RenderFieldPresenter({ label: '体温', unit: '℃', child: temperature }))  grid.addChild(new RenderFieldPresenter({    label: '分诊级别',    child: new RenderComboBox({      value: 'normal',      options: [        { value: 'urgent', label: '紧急' },        { value: 'priority', label: '优先' },        { value: 'normal', label: '普通' },      ],    }),  }))  grid.addChild(new RenderFieldPresenter({    label: '接诊医生',    child: new RenderComboBox({      value: 'doctor-lin',      options: [        { value: 'doctor-lin', label: '林医生' },        { value: 'doctor-chen', label: '陈医生' },        { value: 'doctor-wang', label: '王医生' },      ],    }),  }))  grid.addChild(new RenderFieldPresenter({    label: '联系电话',    child: new RenderTextBox({ value: '138 0000 1268', placeholder: '输入手机号' }),  }))  grid.addChild(complaintField, { columnSpan: 2 })  grid.addChild(new RenderFieldPresenter({    label: '初步诊断',    child: new RenderTextArea({ value: '胸闷待查', minLines: 3, maxLines: 5 }),  }), { columnSpan: 2 })   const validate = (): void => {    patientField.status = patientName.value.trim() ? 'default' : 'error'    patientField.message = patientField.status === 'error' ? '患者姓名不能为空' : ''    outpatientField.status = outpatientNo.value.trim() ? 'default' : 'error'    outpatientField.message = outpatientField.status === 'error' ? '门诊号不能为空' : ''    complaintField.status = complaint.value.trim() ? 'default' : 'warning'    complaintField.message = complaintField.status === 'warning' ? '建议填写主诉，便于后续诊断与质控' : ''    status.text = patientField.status === 'error' || outpatientField.status === 'error'      ? '保存失败：请处理行级校验提示。'      : '接诊记录已保存；可继续按 Enter 在可聚焦字段之间移动。'  }   const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  actions.addChild(new RenderButton({    label: '触发校验',    onClick: () => {      patientName.value = ''      complaint.value = ''      validate()    },  }))  actions.addChild(new RenderButton({ label: '保存接诊记录', variant: 'primary', onClick: validate }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'EntryGrid 接诊录入',    description: '四列紧凑医疗表单，演示字段跨度、行级校验反馈和 Enter 焦点导航。',  }))  panel.addChild(grid)  panel.addChild(actions)  panel.addChild(status)  panel.padding = 24  return panel}