// ===== showcase/src/examples/components/password_field.ts ===== import {  RenderButton,  RenderFieldPresenter,  RenderPageHeader,  RenderPasswordField,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createPasswordFieldExample(): RenderStackPanel {  const status = new RenderText('密码默认以圆点隐藏；尾部眼睛按钮只改变显示方式，不改变真实值。', { role: 'secondary' })  const currentPassword = new RenderPasswordField({    value: 'Clinic@2026',    placeholder: '输入当前密码',    prefixText: '当前',    onRevealChange: revealed => {      status.text = revealed ? '当前密码已临时显示为明文。' : '当前密码已重新隐藏。'    },  })  const newPassword = new RenderPasswordField({    value: 'Medical#2026',    placeholder: '至少 10 位，包含数字和符号',    maxLength: 32,    status: 'success',    helperText: '强度良好：包含大小写字母、数字和符号。',    onChange: value => {      const strong = value.length >= 10 && /\d/.test(value) && /[^a-z0-9]/i.test(value)      newPassword.status = strong ? 'success' : 'warning'      newPassword.helperText = strong        ? '强度良好：包含数字和符号。'        : '建议至少 10 位，并包含数字和符号。'      status.text = `新密码已输入 ${value.length} 个字符。`    },  })  const confirmPassword = new RenderPasswordField({    value: 'Medical#2026',    placeholder: '再次输入新密码',    status: 'success',    helperText: '两次输入一致。',  })   const fields = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  fields.addChild(new RenderFieldPresenter({ label: '当前密码', required: true, child: currentPassword }))  fields.addChild(new RenderFieldPresenter({ label: '新密码', required: true, child: newPassword }))  fields.addChild(new RenderFieldPresenter({ label: '确认密码', required: true, child: confirmPassword }))  fields.addChild(new RenderFieldPresenter({    label: '只读凭据',    child: new RenderPasswordField({ value: 'ReadonlyToken', readonly: true, helperText: '只读字段仍可聚焦和复制。' }),  }))  fields.addChild(new RenderFieldPresenter({    label: '停用账号',    child: new RenderPasswordField({ value: 'DisabledSecret', disabled: true, helperText: '停用后不可聚焦或编辑。' }),  }))   const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({    label: '显示全部',    onClick: () => {      currentPassword.showPassword()      newPassword.showPassword()      confirmPassword.showPassword()      status.text = '三个可编辑密码字段已显示为明文。'    },  }))  actions.addChild(new RenderButton({    label: '全部隐藏',    onClick: () => {      currentPassword.hidePassword()      newPassword.hidePassword()      confirmPassword.hidePassword()      status.text = '三个可编辑密码字段已隐藏。'    },  }))  actions.addChild(new RenderButton({    label: '更新访问密码',    variant: 'primary',    onClick: () => {      const matches = newPassword.value === confirmPassword.value      confirmPassword.status = matches ? 'success' : 'error'      confirmPassword.helperText = matches ? '密码已通过一致性校验。' : '两次输入的密码不一致。'      status.text = matches ? '访问密码已更新。' : '更新失败：请确认两次输入一致。'    },  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'PasswordField 医疗门户凭据',    description: '演示密码掩码、眼睛按钮、强度反馈、一致性校验、只读和禁用状态。',  }))  panel.addChild(fields)  panel.addChild(actions)  panel.addChild(status)  panel.padding = 24  return panel}