03-三种开发模式：零代码、低代码、可视化

browise 支持三种开发模式——零代码（CommonQuery）、低代码（MetaGrid+BaseEntity）、可视化（FormEditor拖拽）。关键不是有三种模式，是三种模式共享同一套 _t/_o 数据协议，从一种切换到另一种不需要重写数据层。这篇讲清楚每种模式的边界和共用机制。

---

一、为什么要有三种模式

政务项目的现实：80%的页面是"查询条件+结果列表+增删改查"，15%是标准表单加少量脚本，5%是复杂交互。

三种模式对应这个分布：

模式	覆盖	产出物	写代码量
零代码	80%标准查询页	一条元数据配置 + 一行Vue标签	~0
低代码	15%业务页	实体类 + MetaGrid配置	少量
可视化	5%复杂表单	设计器画布 + 自动生成脚本	脚本级

---

二、模式一：零代码 CommonQuery

browise-vue/src/components/common/CommonQuery.vue（10.8KB）。

用法只有一行：

<CommonQuery :sqlId="'SYS_USER_s'" />

它内部自动完成四步：

① httpClient.describe(sqlId)
     → GET /ea/describe/SYS_USER_s
     → 返回字段元数据数组
     [
       { name:"psn_id",  label:"人员编号", dataType:1, displayType:"TextBox",  required:true },
       { name:"psn_name",label:"姓名",     dataType:1, displayType:"TextBox" },
       { name:"psn_sex", label:"性别",     dataType:1, displayType:"ComboBox",
         codeName:"SEX" },
       { name:"birth",   label:"出生日期", dataType:2, displayType:"DateBox" }
     ]

② 按元数据渲染查询条件表单
     → 哪些字段是查询条件（EA05里定义的）自动变成输入框/下拉/日期

③ 按元数据渲染结果列表列
     → label做表头、codeName自动翻译码值、dataType决定对齐

④ 分页/导出
     → POST /ea/page/{sqlId} 服务端分页
     → doExport对接 /api/export/excel

开发一个新查询页的全部工作 = 在 EA01-EA05 表里配一条 SQL 元数据。 字段要改显示名，改 EA03 的 label；要加查询条件，在 EA05 加一行——不碰任何代码。

describe() 返回的元数据从哪来？EA引擎在启动时用 MetadataLoader 把 EA01-05 五张表全量加载进 EaMetadataCache（ConcurrentHashMap），describe 只是查缓存拼 JSON。

---

三、模式二：低代码 MetaGrid + BaseEntity

当页面需要定制（主从联动、行内编辑、操作列按钮）时，退出零代码模式，用 MetaGrid：

<MetaGrid
  pageUrl="/user/page"
  :columns="[
    { field: 'psnName', title: '姓名' },
    { field: 'psnSex',  title: '性别', formatter: 'SEX' },
  ]"
  :exportOptions="['server','client','checked']">
  <template #operations="{ row }">
    <Button @click="edit(row)">编辑</Button>
  </template>
</MetaGrid>

MetaGrid（browise-vue/src/components/grid/MetaGrid.vue，16.5KB）支持三种数据模式：

模式	数据来源	适用
server paging	pageUrl 服务端分页	大数据量列表
store	绑定useCenter的StoreState	主从联动/编辑提交
manual	手动灌rows	一次性展示

后端配 BaseEntity（browise-data/.../BaseEntity.java，11.5KB）：

@TableName("SYS_USER")
public class SysUser extends BaseEntity {
    private String psnName;
    // getter/setter
}

// 保存——脏标记自动分发
SysUser user = new SysUser();
user.setPsnName("张三");
user.save();   // 内部按_t分发到MyBatis Mapper的insert/update/delete

BaseEntity 内部反射追踪字段变更——和前端 Row._t/_o 同一套脏标记逻辑，只是载体从 Map 变成了实体字段。

---

四、模式三：可视化 FormEditor

browise-vue/src/components/editor/formdesigner/ 目录11个文件，核心是 useFormEditor.ts（42.9KB，前端最大文件）——设计器的完整状态机。

能力清单：

控件面板（ControlPalette）
  → 18种控件拖拽到栅格画布（GridCanvas 25.0KB）
  → 容器嵌套（TabContainer/FieldSet/Panel）
  → 属性面板（PropertyPanel 17.0KB，20+属性+事件Tab）
  → Monaco脚本编辑（ScriptEditor，单击/双击/回车/变化四类事件）
  → 实时预览（FormRuntime运行时渲染）
  → 保存：控件树+属性存T_EL，字段配置存T_EL_CLOUMN

设计器的产物存两张表（formbuilder模块的 FormElementService 负责 deleteAll+insert 整体重建保存）：

• T_EL —— 元素树（每个控件一行，含容器层级）
• T_EL_CLOUMN —— 字段级配置（绑定哪个EA字段、校验、事件）

运行时 FormRuntime.vue 递归渲染 T_EL 元素树——设计器画的页面和手写的Vue组件走同一条渲染路径。

设计器的需求来源是 formEdit设计器功能详解.md（567行）——那是 wiserise 时代 Dojo/JSP 表单设计器的完整交互文档，browise 把它当需求说明书逐条重做。

---

五、三种模式共用什么

关键架构点：三种模式共享 _t/_o 协议和 EA 元数据，切换模式不动数据层。

                    ┌─ 零代码 CommonQuery ─┐
EA元数据(五表) ────→ ├─ 低代码 MetaGrid    ├────→ useRowSet(_t/_o)
                    └─ 可视化 FormEditor ──┘            │
                                                        ▼
                                              commonSave / BaseEntity.save
                                                        │
                                                        ▼
                                                   Oracle

一个页面从 CommonQuery 起步，后来需要定制——把 sqlId 传给 MetaGrid 的 store 模式，查询逻辑不变；再后来要复杂表单——FormEditor 画完界面，字段还是绑同一个 EA 字段。渐进升级而不是重写，这是三种模式存在的真正意义。

---

✅ 亮点：以"80/15/5"的页面分布引出三种模式的定位，讲清三种模式共享 _t/_o 协议和EA元数据——渐进升级不重写数据层。适合评估低代码平台覆盖率的架构师。扩展方向：第48篇拆CommonQuery实现、第49篇拆useFormEditor状态机。