示例：简单表单

import {  RenderButton,  RenderFieldPresenter,  RenderFormPanel,  RenderNumberInput,  RenderStackPanel,  RenderText,  RenderTextBox,} from 'ds-ui'

简单表单适合录入或维护单个对象，例如用户资料、字典项、配置项、模板元数据。核心结构是标题、表单、操作区和状态提示。

页面结构

StackPanel vertical
  PageHeader / Text title
  FormPanel
    FieldPresenter + input
    FieldPresenter + input
  Toolbar or button row

表单字段应该由 RenderFormPanel 管理排列，由 RenderFieldPresenter 管理标签、必填、单位和错误信息。

最小示例

const form = new RenderFormPanel({  columns: 2,  labelWidth: 88,  adaptive: true,  columnGap: 16,  rowGap: 8,}) form.addField(new RenderFieldPresenter({  label: '名称',  required: true,  child: new RenderTextBox({ placeholder: '请输入名称' }),})) form.addField(new RenderFieldPresenter({  label: '排序号',  child: new RenderNumberInput({ value: 1 }),})) const page = new RenderStackPanel({  orientation: 'vertical',  spacing: 8,  crossAxisAlignment: 'stretch',})page.addChild(new RenderText('基础资料维护'))page.addChild(form)page.addChild(new RenderButton({ label: '保存', onClick: save }))

状态设计

简单表单至少需要：

• 当前草稿对象。
• 字段校验结果。
• 保存中状态。
• 保存错误或成功提示。

草稿对象属于页面状态。字段错误展示在 RenderFieldPresenter 上。保存命令可以根据校验结果和保存中状态决定是否启用。

校验流程

推荐流程：

1. 输入控件更新草稿。
2. 页面层执行同步校验。
3. 字段展示层更新状态和提示。
4. 点击保存时执行最终校验。
5. 服务层提交并返回结果。

不要把服务提交逻辑写在输入组件里。输入组件只负责编辑值。

扩展点

• 字段较多时，分成多个 RenderSection 或 RenderGroupBox。
• 需要单位、错误和提示时，优先扩展字段展示层。
• 需要权限时，把保存按钮换成命令按钮。
• 需要弹窗编辑时，把同一套表单放入 modal 或 drawer。