// ===== showcase/src/examples/components/form_panel.ts ===== import {  RenderButton,  RenderComboBox,  RenderDatePicker,  RenderFieldPresenter,  RenderFormPanel,  RenderNumberInput,  RenderPageHeader,  RenderSearchBox,  RenderStackPanel,  RenderSwitch,  RenderText,  RenderTextBox,  RenderWrapPanel,} from 'ds-ui' export function createFormPanelExample(): RenderStackPanel {  const status = new RenderText('FormPanel 负责排列字段，FieldPresenter 负责标签、必填和校验反馈')  const form = new RenderFormPanel({ columns: 3, minColumnWidth: 220, labelWidth: 82, adaptive: true, columnGap: 16, rowGap: 12 })  form.addField(new RenderFieldPresenter({    label: '患者姓名', required: true,    child: new RenderTextBox({ value: '李安然', placeholder: '输入姓名', onChange: value => { status.text = `患者姓名：${value}` } }),  }))  form.addField(new RenderFieldPresenter({    label: '年龄', unit: '岁',    child: new RenderNumberInput({ value: 36, min: 0, max: 150 }),  }))  form.addField(new RenderFieldPresenter({    label: '性别',    child: new RenderComboBox({ options: [{ value: 'F', label: '女' }, { value: 'M', label: '男' }], value: 'F' }),  }))  form.addField(new RenderFieldPresenter({    label: '就诊日期', required: true,    child: new RenderDatePicker({ value: '2026-07-17', clearable: true }),  }))  form.addField(new RenderFieldPresenter({    label: '接诊医生',    child: new RenderSearchBox({ value: '', placeholder: '输入姓名或工号', onSearch: value => { status.text = `搜索医生：${value || '空'}` } }),  }), { columnSpan: 2 })  form.addField(new RenderFieldPresenter({    label: '病历标题', required: true, status: 'error', message: '标题至少需要 4 个字符', validationDisplay: 'inline',    child: new RenderTextBox({ value: '复诊', placeholder: '输入病历标题' }),  }), { columnSpan: 2 })  form.addField(new RenderFieldPresenter({ label: '自动保存', child: new RenderSwitch({ checked: true, label: '启用' }) }))   const actions = new RenderWrapPanel({ spacing: 10, runSpacing: 10 })  actions.addChild(new RenderButton({ label: '保存草稿', onClick: () => { status.text = '草稿已保存' } }))  actions.addChild(new RenderButton({ label: '提交表单', variant: 'primary', onClick: () => { status.text = '提交前应由业务层完成字段校验' } }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'FormPanel 响应式表单', description: '三列桌面布局会根据可用宽度自动降为两列或单列。' }))  panel.addChild(form)  panel.addChild(actions)  panel.addChild(status)  panel.padding = 24  return panel}