REAL SHOWCASE SOURCEfield-presenter-clinical
1 个文件 · 119 行 · TypeScript
// ===== showcase/src/examples/components/field_presenter.ts ===== import { RenderButton, RenderComboBox, RenderFieldPresenter, RenderNumberInput, RenderPageHeader, RenderStackPanel, RenderText, RenderTextArea, RenderTextBox, RenderWrapPanel,} from 'ds-ui' export function createFieldPresenterExample(): RenderStackPanel { const status = new RenderText('FieldPresenter 统一管理标签、必填标记、单位、元信息和校验反馈。', { role: 'secondary' }) const patientName = new RenderTextBox({ value: '李安然', placeholder: '输入患者姓名' }) const nameField = new RenderFieldPresenter({ label: '患者姓名', labelWidth: 96, required: true, child: patientName, }) const pulseField = new RenderFieldPresenter({ label: '脉搏', labelWidth: 96, unit: '次/分', metaText: '正常', metaTone: 'success', child: new RenderNumberInput({ value: 78, min: 20, max: 240 }), }) const allergyField = new RenderFieldPresenter({ label: '药物过敏', labelWidth: 96, status: 'warning', message: '患者报告青霉素过敏,请在开立医嘱前复核。', validationDisplay: 'inline', child: new RenderComboBox({ value: 'penicillin', options: [ { value: 'none', label: '未发现' }, { value: 'penicillin', label: '青霉素' }, { value: 'other', label: '其他' }, ], }), }) const diagnosisField = new RenderFieldPresenter({ label: '非常长的临床初步诊断名称', labelWidth: 96, labelOverflow: 'clip', metaText: '待复核', metaTone: 'warning', child: new RenderTextBox({ value: '胸闷待查', placeholder: '输入初步诊断' }), }) const noteField = new RenderFieldPresenter({ label: '病情摘要', labelWidth: 96, required: true, status: 'error', message: '病情摘要至少需要 10 个字符。', validationDisplay: 'compact', child: new RenderTextArea({ value: '胸闷', minLines: 3, maxLines: 5 }), }) const fields = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' }) fields.addChild(nameField) fields.addChild(pulseField) fields.addChild(allergyField) fields.addChild(diagnosisField) fields.addChild(noteField) const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 }) actions.addChild(new RenderButton({ label: '触发姓名校验', onClick: () => { patientName.value = '' nameField.status = 'error' nameField.message = '患者姓名不能为空。' nameField.validationDisplay = 'inline' status.text = '姓名字段已切换为行内错误反馈。' }, })) actions.addChild(new RenderButton({ label: '标记脉搏异常', onClick: () => { pulseField.metaText = '偏快' pulseField.metaTone = 'danger' pulseField.status = 'warning' pulseField.message = '请复测脉搏并记录节律。' status.text = '单位列、元信息和校验状态已同步更新。' }, })) actions.addChild(new RenderButton({ label: '清除反馈', variant: 'primary', onClick: () => { patientName.value = '李安然' nameField.status = 'default' nameField.message = '' pulseField.metaText = '正常' pulseField.metaTone = 'success' pulseField.status = 'default' pulseField.message = '' status.text = '字段反馈已恢复为默认状态。' }, })) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'FieldPresenter 临床字段语义', description: '在统一字段壳中对齐标签和编辑器,并组合必填、单位、元信息与两种校验展示。', })) panel.addChild(fields) panel.addChild(actions) panel.addChild(status) panel.padding = 24 return panel}