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}