不过，

一、属性面板到底能做什么？

再看使用者常常问，“属性面板到底能编辑哪些字段？”

• 它是编辑 Schema 上的字段的主要入口。
• 包含两大类字段：

1️⃣ 组件属性

{ "title": "文本"。"componentName": "Text","configure": }

• 痛点：使用者常因不清楚每个 prop 的编辑器而浪费时间；缺少统一规范导致 UI 控件重复开发。
• 解决思路：通过configure描述元数据，让 Setter 自动匹配。

2️⃣ Schema 顶层字段

{ "condition": true,"loop": null,"loopArgs": null。"events": {"onClick":"loadList"} }

• 痛点：这些字段不在 props 内，传统表单难以编辑，导致高级配置被忽视。其实，
• 解决思路：专门的高级配置面板。直接写入顶层字段，

二、技术方法设计：对齐 configure 与 Setter 的解耦架构

Alice 原来低代码引擎使用三层架构：SettingField → Setter → Command

• Pain Point: “我想立即跑通功能。但加入 SettingField 会导致更多维护成本。” SOLUTION: V1 优先完成主要链路，再逐步复用代理层。

  • // V1
    configure → Setter → command
    // 后续可插入
    configure → SettingField → Setter → command
    

  `

  三、基础属性 —— 类型感知 Setter 程序

  📌 元数据声明

  json { "...",\"configure\": }

  🔧 面板渲染流程

  文本内容： 字号： 颜色：
  • No explicit mapping 娱乐ween props and UI – users guess which control applies.

  ⚙️ 修改 -> 命令 -> Schema 更新

  js // 使用者拖动 NumberSetter 到24px PropertyPanel.onChange // 调用命令： engine.command.execute('updateProps',{ 至于nodeId，'page-title'。props:{fontSize:24} }) // DocumentModel 合并写入 schema.props.fontSize =24 // 通知画布重新渲染

  ---

  四、高级配置面板：专门处理 Schema 顶层字段

  配置项	控件形态	候选数据来源
  条件渲染	开关	无
  循环数据源	文本框 + datalist	state 中数组
  循环变量名	文本框	自动绑定
  事件绑定	下拉 + 文本框 + datalist	Schema.methods

  新增命令 updateSchemaAdvanced

  js execute{ const prevValue = schema if { delete schema } // 清空时删除字段 else{ schema = value } // direct assignment notify return prevValue // 支持撤销/重做 }

  ---

  五、设计态 VS 预览态的边界

  • 设计态 – 必须能看到/选中/编辑任何节点；即使 false 或 数据为空也不消失。
  • 预览态 – 完整执行条件判断与循环展开。

  html

  ...

  ...

  • 痛点使用者在设计阶段发现节点消失。误认为是错误，而是预览逻辑。
  • 方法将两种 Runtime 分离，仅在预览时应用完整语义。

  ---

  六、典型 Bug 分享：循环渲染在预览态不生效

  症状

  yaml 从loop来看。'data.list' 网络请求成功，但列表未展开。

  原因分析

  1. 表达式引擎求值时只查找当前节点作用域的数据。
  2. 内层 Container 的作用域为空 {}；根节点 Page 才持有 data.list。
  3. 缺少向父级查找机制导致 undefined。

  修复思路

  让表达式引擎统一使用 RuntimeContext.get 而非直接访问当前作用域。

  js const list = runtimeContext.get // 正确沿父链查找 if ) expandNode

  • 教训作用域链断裂会影响所有依赖表达式的高级功能——loop、condition、事件绑定等。

  ---

  七、 & 接下来规划

  1. Schema 驱动一切 – 所有 UI 操作最终落到 Schema 写操作上。
  2. 描述与渲染分离 – configure 描述了“我有什么”。Panel 根据描述渲染，无需改动主要。话说回来，
  3. Runtime 层决定行为差异 – 同一个 Renderer 在不同 Runtime 下表现不同。老实说，
  4. 表达式引擎是桥梁 – 正确实现作用域链是关键。否则循环/条件失效，

  V1 已完成主要链路，后续计划：

  • 属性联动 & 跨字段校验
  • 动态枚举值 & 表达式编辑器
  • 更多类型的 Setter

  在线体验请访问：.