REAL SHOWCASE SOURCEprompt-clinical-input

1 个文件 · 61 行 · TypeScript

// ===== showcase/src/examples/components/prompt.ts ===== import {  RenderButton,  RenderPageHeader,  RenderPromptModal,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui'import type { ShowcaseExample } from '../../showcase_example' export function createPromptExample(): ShowcaseExample {  let patientAlias = '李安然-复诊'  const currentValue = new RenderText(`当前显示名称:${patientAlias}`, { role: 'title', weight: 'semibold' })  const status = new RenderText('Prompt 适合收集重命名、简短原因或单个命令参数。', { role: 'secondary' })   const renamePrompt = new RenderPromptModal({    title: '重命名患者标签',    content: '请输入新的显示名称。确认后会立即更新当前页面。',    value: patientAlias,    placeholder: '例如:李安然-重点随访',    onClose: (key, value) => {      if (key === 'ok') {        patientAlias = value        currentValue.text = `当前显示名称:${patientAlias || '(空名称)'}`        status.text = `已确认输入:${value || '空字符串'}。空字符串与取消具有不同语义。`      } else {        status.text = '已取消输入,原显示名称保持不变。'      }    },  })   const reasonPrompt = new RenderPromptModal({    title: '填写退回原因',    content: '请输入一条简短原因。复杂、多字段流程应使用 Drawer 或页面表单。',    placeholder: '例如:缺少过敏史确认',    onClose: (key, value) => {      status.text = key === 'ok' ? `退回原因:${value || '空字符串'}` : '已取消填写退回原因。'    },  })   const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  actions.addChild(new RenderButton({ label: '重命名标签', variant: 'primary', onClick: () => renamePrompt.show() }))  actions.addChild(new RenderButton({ label: '填写退回原因', onClick: () => reasonPrompt.show() }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Prompt 单行输入对话框',    description: '阻断式收集一段简短文本,明确区分确认、取消和合法的空字符串。',  }))  panel.addChild(currentValue)  panel.addChild(actions)  panel.addChild(status)  panel.addChild(new RenderText('试一试:输入内容后按 Enter 确认,按 Escape 取消;遮罩点击会被消费但不会关闭对话框。', { role: 'secondary' }))  panel.padding = 24  return {    content: panel,    afterMount: () => renamePrompt.show(),  }}