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(), }}