// ===== showcase/src/examples/components/centered_form_layout.ts ===== import {  RenderBorder,  RenderButton,  RenderGridPanel,  RenderPageHeader,  RenderParagraph,  RenderStackPanel,  RenderText,  RenderTextBox,  gridAuto,  gridFr,  gridPx,} from 'ds-ui' const fieldLabel = (text: string): RenderText => {  const label = new RenderText(text, { role: 'secondary' })  label.verticalAlignment = 'center'  return label} export function createCenteredFormLayoutExample(): RenderGridPanel {  const status = new RenderParagraph('表单拥有 maxWidth，外层单格 Grid 才有可用于居中的剩余空间。')  const patientName = new RenderTextBox({ value: '李安然', placeholder: '输入患者姓名' })  const encounterId = new RenderTextBox({ value: 'MZ20260718018', readonly: true })  const department = new RenderTextBox({ value: '呼吸内科', placeholder: '输入科室' })   const form = new RenderGridPanel({    columns: [gridPx(88), gridFr()],    rows: [gridAuto(), gridAuto(), gridAuto()],    columnGap: 12,    rowGap: 12,  })  form.addChild(fieldLabel('患者姓名'), { row: 0, column: 0 })  form.addChild(patientName, { row: 0, column: 1 })  form.addChild(fieldLabel('门诊号'), { row: 1, column: 0 })  form.addChild(encounterId, { row: 1, column: 1 })  form.addChild(fieldLabel('接诊科室'), { row: 2, column: 0 })  form.addChild(department, { row: 2, column: 1 })   const actions = new RenderStackPanel({    orientation: 'horizontal',    spacing: 8,    mainAxisAlignment: 'end',    crossAxisAlignment: 'center',  })  actions.addChild(new RenderButton({    label: '重置',    onClick: () => {      patientName.value = '李安然'      encounterId.value = 'MZ20260718018'      department.value = '呼吸内科'      status.text = '表单已恢复演示数据。'    },  }))  actions.addChild(new RenderButton({    label: '保存',    variant: 'primary',    onClick: () => {      status.text = '居中表单已提交。'    },  }))   const content = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  content.addChild(new RenderPageHeader({ title: '患者登记', description: '外层居中，内层 Grid 对齐字段。' }))  content.addChild(form)  content.addChild(actions)  content.addChild(status)   const card = new RenderBorder({ background: 'panel', padding: 20, child: content })  card.maxWidth = 560  card.horizontalAlignment = 'center'  card.verticalAlignment = 'center'   const host = new RenderGridPanel({ columns: [gridFr()], rows: [gridFr()], padding: 24 })  host.addChild(card)  return host}