// ===== showcase/src/examples/components/text_field.ts ===== import {  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderTextBox,} from 'ds-ui' export function createTextFieldExample(): RenderStackPanel {  const status = new RenderText('输入内容后，onChange 会在当前 Canvas Runtime 内即时触发')  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'TextField 表单输入',    description: '展示前后缀、清空、校验状态、只读与禁用等业务输入状态。',  }))  panel.addChild(new RenderTextBox({    value: 'ds-ui',    placeholder: '输入项目名称',    prefixText: '项目',    clearable: true,    maxLength: 32,    onChange: value => { status.text = `项目名称：${value || '（空）'}` },  }))  panel.addChild(new RenderTextBox({    value: 'https://example.com',    prefixText: 'URL',    suffixText: '↗',    status: 'success',    helperText: '地址格式有效',  }))  panel.addChild(new RenderTextBox({    value: 'invalid-address',    status: 'error',    helperText: '请输入完整的 https:// 地址',  }))  panel.addChild(new RenderTextBox({ value: '只读业务编号 CG-2026-0717', readonly: true }))  panel.addChild(new RenderTextBox({ value: '禁用输入', disabled: true }))  panel.addChild(status)  panel.padding = 24  return panel}