核心是用统一 schema 驱动渲染，解耦配置变更与 dom 更新：每个字段含 type、label、name 等基础属性及 visibleif/disabledif 控制逻辑；渲染时 createelement 全新创建节点，结合上下文求值控制显隐禁用；编辑只改数据、触发防抖重绘；提交用 formdata 自然忽略隐藏/禁用项；html 语义化、结构清晰、无冗余标记。
核心是把配置变更和 DOM 更新解耦，用统一的 schema 驱动渲染，而不是靠手动操作元素属性或拼接 HTML 字符串。
配置结构要能直接映射到字段行为
每个字段的配置对象必须包含 type、label、name、required、placeholder 等基础字段，同时支持 visibleIf、disabledIf 这类控制逻辑。比如：
- {"type": "text", "label": "姓名", "name": "name", "required": true, "visibleIf": "userType === 'customer'"}
- visibleIf 表达式不直接执行，而是由渲染函数结合当前上下文（如 { userType: 'customer' }）动态求值
- 所有字段顺序由 schema 数组索引决定，不能依赖 DOM 插入顺序
预览区用纯 JS 渲染，不依赖 innerHTML
每次配置变化，都清空画布并重新生成 DOM 节点，确保状态干净：
- 用
document.createElement创建 input、label、select 等元素，避免 XSS 和事件残留 - 通过
setAttribute设置 name、type、required，用textContent填充 label 文本 - 对 visibleIf/ disabledIf 的结果做判断，用
element.style.display = 'none'或element.disabled = true控制显隐与可用性 - 不复用旧节点，也不 cloneNode —— 每次都是全新创建，杜绝状态污染
实时响应靠监听配置变更，不是监听 DOM
用户在属性面板修改 label 或勾选 required，应直接更新对应 schema 条目，再触发重渲染：
- 所有编辑操作（双击 label、切换开关、输入 placeholder）都只改数据，不碰 DOM
- 用一个 render() 函数集中处理：遍历 schema → 创建元素 → 绑定显隐/禁用逻辑 → 插入画布
- 为避免频繁重绘，可加简单防抖（如 100ms 内连续修改只触发一次 render）
- 表单提交时用
new FormData(formEl)采集数据，它天然忽略 display: none 和 disabled 元素，与 visibleIf / disabledIf 行为一致
样式与结构保持语义化和可维护
预览输出的 HTML 应该是标准、干净、可读的，方便后续嵌入或调试：
- 用
<fieldset></fieldset>包裹逻辑分组，<legend></legend>做分组标题 - 每个字段外层套
<div class="form-item">，便于 CSS 定制和 JS 定位 <li>name 属性使用数组语法，如 <code>name="contact[]"或name="items[][price]"，保证后端能解析结构化数据 - 不插入无意义的 div 或 span，不靠 class 名控制功能逻辑（如不用
class="required-field"来判断是否必填）
