低代码系统设计与选型：Schema、编辑器、运行时和安全

从完整平台到 H5、表单和后端工作流，拆解低代码产品形态、Schema 契约、设计器/运行时分层、验证与上线治理。

本文围绕 dream2023/awesome-lesscode 做原创工程整理。项目来自 腾讯新闻前端团队 2022 年的 25 个 Awesome 项目推荐；README 固定到 2026-10-10 核验的 commit 62df94fb5134d7f83c1e8ed031ec6dcc77e894c6；19,620 字节、155 行、189 个 HTTP(S) 引用（146 个不同目标），根目录 LICENSE 返回 404。 下方保留固定版本入口。

仓库内容地图

• 整体解决方案：内部工具、流程、数据与权限
• 前端框架：JSON/Schema 驱动渲染、组件协议、扩展能力
• H5：活动页面、拖拽设计、预览与发布
• 数据大屏：图表组件、数据源刷新与屏幕适配
• 表单设计器：字段协议、联动校验和国际化
• 设计器、AI + 前端、拖拽与跨技术栈组件
• 后端：API、事件、流程和集成编排
• 文章与趋势：技术实践和无代码网站资源

怎么读才有收获

固定快照的项目按整体解决方案、前端八个子类、后端和文章资源分组。把它当历史候选目录，先按要解决的业务问题缩小范围，再逐项核对当前维护状态、许可证、部署、权限和数据迁移。

低代码不是一种产品形态

低代码描述的是用结构化配置、可视化编排或模型驱动来减少重复编码；它不是“无需工程治理”，也不是一个可以互换的产品类别。先问需求由谁创建、谁负责上线、谁维护数据和权限，再判断要买完整平台、集成一个前端引擎，还是只做一套受限的配置表单。

常见方案可以分成五种：

1. 完整业务平台：带数据模型、账号/权限、流程、集成和运维后台，适合内部工具或部门级应用。需要重点检查权限粒度、数据可迁移性、审计、部署方式、授权费用和升级路线。
2. 配置驱动页面：以 JSON/Schema 描述表单、列表和后台页面，通常开发者维护接口与页面配置，适合重复度高的运营/管理页面。优点是有约束、易审查；边界是定制交互可能很快超出 schema 能力。
3. 可视化页面/H5 构建器：通过拖拽画布生成营销页、专题页或活动内容。必须评估移动端适配、页面发布/回滚、素材授权、埋点、预览环境和生成 HTML 的安全处理。
4. 表单与设计器框架：提供字段模型、属性面板、组件注册和扩展点，由团队把它接进自己的产品。它不是可立即使用的完整平台，仍需自行实现保存、权限、版本、发布和运行态。
5. 后端流程/集成编排：将 API、事件、定时器、数据转换和业务动作串成工作流。它需要和普通页面搭建分开评估，尤其关注凭据保管、重试/幂等、速率限制、审计和故障隔离。

AI 生成页面是这些形态的输入方式，不是独立的生产保障层。模型生成的 schema、SQL、表达式和外部 URL 都是不可信输入；必须经过解析、白名单校验、权限判断、预览和测试，不能让模型输出直接执行。

把 Schema 当成长期数据契约

一个可维护的搭建系统至少要能表达协议版本、组件映射、组件树、属性、数据源、事件、路由、国际化和应用元数据。Schema 是编辑器、渲染器、组件资产与发布服务之间的契约，不是把任意 JavaScript 塞进数据库的容器。

建议区分三种版本：协议版本决定字段和语义；组件/物料版本决定可用属性和依赖；业务页面版本记录用户保存、审核、发布和回滚的历史。升级时需要迁移器把旧 schema 转为新 schema，并保留原文快照；只有渲染成功还不够，还要核对布局、交互、权限和数据绑定语义。

用有版本号的组件清单解析组件名，属性按组件 schema 做类型、默认值、范围与长度验证。表达式尽量使用受限的 AST 或声明式运算符；不要把任意字符串交给 eval、Function、模板编译器或 shell。运行时缺少某个组件、依赖版本冲突或 schema 版本不兼容时，应给出可定位的错误节点，而不是整页白屏。

编辑器、运行时、出码的边界

编辑器通常由物料面板、画布、大纲树、属性/样式面板、事件与数据绑定、撤销重做、预览和版本操作组成。画布中的节点要有稳定 ID；拖拽要处理嵌套命中、占位提示、键盘替代操作和移动端触摸。属性面板展示的配置应来自组件协议，而不是再维护一份不一致的手写表。

撤销重做适合保存语义操作或可逆补丁，并把连续输入合并成合理事务；不要每按一个键都生成数据库版本。自动保存要有草稿状态、失败重试、并发冲突提示和最后保存时间。多人协作需要另外解决锁、冲突合并、权限变化和离线编辑，不是加入 WebSocket 就自然具备。

设计态只加载编辑器需要的控件和调试信息；公开运行态只加载实际页面依赖。渲染器从注册表解析已知组件，通过 props、数据绑定和受控事件组合页面。两种环境要分开设置 CSP、网络权限、日志和错误页。租户页面不可访问构建服务器本地文件、内网地址、云元数据地址或其他租户的凭据。

Schema2Code 只有在需要开发者接管生成代码、纳入 Git/CI 或独立部署时才值得引入。要定义生成代码的稳定性、格式化差异、人工改动策略、来源映射和再次导入能力；如果每次生成都会覆盖开发者的手改，代码生成就不是可维护交付。只有配置式运行时的场景，不必为了“低代码”标签强行出码。

按业务场景选择，而不是按产品名字选择

先写清创建人、发布人、运行用户、数据所有人和事故责任人。再画一条真实流程：配置如何存储、何时校验、怎样预览、谁审批、如何发布、出错如何回滚、旧版本是否还能读取。若供应商无法说明导出格式、权限模型或删除路径，应把它当成风险而不是实施细节。

给候选方案一套可复现的验收

先挑一个窄而真实的任务，例如“运营同学配置商品筛选页，管理员控制字段权限，用户提交后进入已有订单服务”。不要先搭一个覆盖所有团队的万能平台。使用固定样例数据和角色，在同一流程里比较候选。

• 功能：新增/编辑/预览/发布/回滚走通；必填、联动、空态、错误态和权限拒绝都可见。
• 数据：确认数据源类型、分页/筛选语义、事务边界、缓存、导出和删除方式；不要把原始数据库凭据放进浏览器 schema。
• 协作：明确草稿、审核、发布、版本差异、冲突提示和责任人。
• 运行：测冷启动、首屏、长列表、低端手机、弱网、第三方组件加载失败和持续运行内存。
• 迁移：导出页面/schema/数据字典后，在隔离环境恢复并对比视觉、行为、路由和权限。
• 成本：分别核算开发接入、组件维护、升级、构建资源、运行资源、授权、培训和迁出成本。

把结果按场景权重打分，同时设置一票否决：无法实施服务端授权、许可证无法接受、关键数据不能导出、升级无法回滚或生产页面依赖不受控 CDN 时，不能靠其它高分抵消。

安全边界：配置依然是输入

服务端要验证 schema 大小、嵌套深度、节点数、组件名、属性字段、URL 协议和动作类型；前端验证用于及时反馈，不能替代服务端校验。渲染富文本时采用安全渲染器和上下文编码，不把配置字符串拼进 HTML、CSS、脚本或 SQL。

低代码“数据源 URL”会把服务端变成代请求代理：只允许预先登记的连接器和目标域名，限制重定向、DNS/IP 范围、端口、超时与响应体积，并在网络层阻断环回、私网和云元数据地址。连接器密钥放在服务端密钥管理中，界面只显示掩码，不回传完整秘密。

组件和插件按可信发布流程安装：锁定版本和哈希、扫描依赖、隔离加载、限制网络来源、签名/审批变更，并记录谁在何时把它加入哪个应用。租户、项目、环境、草稿和生产发布都要分别做鉴权，不能只靠隐藏按钮。

下面的极简运行前校验只接受固定组件与动作类型，并限制节点数、深度和 ID。它不渲染 HTML，也不执行事件表达式；真实系统还需用 JSON Schema 或等价 validator 校验每种组件 props，服务端再次执行同一套契约检查。

const allowedComponents = new Set(["Page", "Section", "Text", "Button"]);
const allowedActions = new Set(["navigate", "submit", "toast"]);

function validatePage(schema) {
  if (!schema || schema.schemaVersion !== 1 || !Array.isArray(schema.children)) {
    throw new TypeError("Unsupported page schema");
  }
  const ids = new Set();
  let count = 0;
  function visit(node, depth) {
    if (!node || typeof node !== "object" || Array.isArray(node) || depth > 12 || ++count > 200) {
      throw new TypeError("Invalid node shape or size");
    }
    if (!allowedComponents.has(node.type) || typeof node.id !== "string" ||
        !/^[a-z0-9-]{1,40}$/i.test(node.id) || ids.has(node.id)) {
      throw new TypeError("Invalid component or duplicate id");
    }
    ids.add(node.id);
    const props = node.props ?? {};
    if (!props || typeof props !== "object" || Array.isArray(props)) {
      throw new TypeError("Invalid props");
    }
    if (node.type === "Text" && (typeof props.text !== "string" || props.text.length > 2000)) {
      throw new TypeError("Invalid text value");
    }
    if (node.actions !== undefined) {
      if (!node.actions || typeof node.actions !== "object" || Array.isArray(node.actions)) {
        throw new TypeError("Invalid actions");
      }
      for (const action of Object.values(node.actions)) {
        if (!action || typeof action !== "object" || !allowedActions.has(action.type)) {
          throw new TypeError("Action is not allowed");
        }
      }
    }
    const children = node.children ?? [];
    if (!Array.isArray(children)) throw new TypeError("Invalid children");
    children.forEach(child => visit(child, depth + 1));
  }
  schema.children.forEach(node => visit(node, 0));
  return { schemaVersion: 1, nodeCount: count };
}

校验通过仍不代表用户有权执行动作：例如 submit 必须重新经过服务端身份、对象级授权、CSRF/幂等和业务状态检查。渲染器也应使用 textContent/框架安全绑定展示文本；允许配置的 URL 用 HTTPS 协议和目标域名白名单校验。

从资源目录到可维护的平台

第一阶段只做单一模板和有限组件；第二阶段定义组件协议、表单验证和导入导出；第三阶段补草稿/审核/版本回滚与角色权限；第四阶段加入数据连接器和运行监控；最后才考虑插件市场、多人协作、AI 生成与多端出码。每一步都要有数据迁移方案和停用某个组件/插件的方法。

持续监控发布失败率、schema 校验失败、组件缺失、运行时异常、数据源超时、首屏耗时和版本回滚。埋点不要记录用户填写的敏感字段、连接器秘密或完整请求正文；按租户授权后的最小必要字段做聚合。建立每个组件的支持版本范围、维护人、弃用期限和迁移说明。

建议的演练顺序

1. 实现一个只包含标题、文本、输入框和按钮的 JSON 页面；为每个节点定义稳定 ID、props 类型和版本。
2. 增加表单规则、必填/格式错误、键盘操作和移动端布局，写 schema 单测及真实浏览器 E2E。
3. 增加只读的 mock 数据源和 allowlist 动作；服务器端再验证权限，不开放任意 URL 或自定义脚本。
4. 保存草稿、生成版本 diff、执行审核发布和一键回滚；并发编辑时展示冲突，不静默覆盖。
5. 导出 schema 与组件锁文件，在干净环境恢复；记录恢复耗时、缺少依赖时的错误和可回滚方式。

完成标准不是拖拽画布能显示，而是另一个账号能在授权范围内配置、审核、发布、使用、排查故障并在失败时回退。

官方协议与安全资料

• Low-Code Engine 搭建协议：页面/区块/组件 Schema 与编辑器、渲染器、出码模块的职责边界。
• Low-Code Engine 资产包协议：组件、依赖、设计器插件和设置器的资源描述。
• JSON Schema 入门：结构、类型约束和数据验证。
• OWASP 输入校验指南：输入长度、嵌套对象和 allowlist 校验。
• OWASP XSS 防护指南：安全渲染、上下文编码与 HTML 消毒。
• OWASP SSRF 防护指南：约束由平台服务端代发的网络请求。

动手路线

1. 做一张选型表：数据连接、权限、版本管理、回滚、组件扩展、导出和费用。
2. 用候选平台搭一个有查询、筛选、编辑、审计的后台页。
3. 尝试升级组件版本并回退，验证页面 Schema 是否兼容。

使用边界

固定 README 没有根目录 LICENSE 文件；本文只保留资源名称和外链，不复制项目介绍文案。目录和商业条款会变化，使用前必须核对上游当前状态与每个产品的独立许可证。

上游外链目录（固定快照）

整体解决方案（11）

• orange-admin
• steedos-platform
• ToolJet
• NocoBase
• mall-cook
• openblocks
• nocodb
• illa-builder
• rowy
• budibase
• apitable

前端：框架（5）

• amis
• lowcode-engine
• ams
• mometa
• sunmao-ui

前端：H5（9）

• luban-h5
• gods-pen
• h5-factory
• h5-Dooring
• dooringx
• tefact
• vite-vue3-lowcode
• TMagic
• ih5

前端：数据大屏（1）

• go-view

前端：表单设计器（7）

• avue 表单设计器
• formily
• variant-form
• vue-form-making
• vue Ant-Design
• Element-Pro-Crud
• drip-form

前端：设计器（7）

• grapesjs
• antd-visual-editor
• Web-Editor
• designable
• builder
• wix
• ivx

前端：AI + 前端（4）

• imgcook
• Screenshot-to-code
• deco
• code.fun

前端：拖拽（5）

• dnd-kit
• VvvebJs
• react-dnd
• vue-smooth-dnd
• vue-draggable

前端：跨技术栈（2）

• magic-microservices
• mitosis

后端（4）

• yao
• node-red
• noflo
• Linx

文章与趋势（2）

• 可视化搭建工具技术探索之表单
• NoCodeVista

原始入口

• 固定版本 README 与仓库入口
• 发现这份资源的原始推荐
• 返回 25 个开源项目专题目录