FlowLite 开发手册

FlowLite 是什么

FlowLite 是一套「元数据驱动」的低代码平台：用 JSON Schema 描述页面，引擎负责渲染与运行。适合后台管理系统、表单流程类应用的快速搭建。

四个核心概念

• 页面（Page）：一份 Schema JSON，描述组件树、属性、事件与数据绑定。
• 物料（Material）：可拖拽的组件单元，遵循统一物料协议，可扩展第三方组件。
• 数据源（DataSource）：页面数据的来源定义，支持静态数据、远程 API 与数据库直连。
• 动作（Action）：事件的响应单元，如打开弹窗、调用接口、页面跳转，可编排成动作流。

适合谁

会基本前端概念即可上手搭建；有 JavaScript 基础可以写自定义函数与二开组件。

第一步：新建页面

进入设计器 → 新建页面 → 选择「空白页」或「CRUD 模板」。模板会预置搜索区、表格与分页。

第二步：拖入组件

从左侧物料面板拖入「表单容器」，再拖入输入框、下拉框；右侧属性面板修改标题、占位符与校验规则。

第三步：绑定数据源

json{
  "type": "api",
  "url": "/api/users",
  "method": "GET",
  "autoLoad": true
}

第四步：配置动作

选中「查询」按钮 → 事件面板 → onClick → 选择「刷新数据源」。保存并预览，一个可用的查询页面完成。

常见疑问

页面自动保存草稿，发布后才对最终用户可见；草稿与线上版本互不影响。

画布基本操作

• 拖入：从物料面板拖组件到画布，蓝色占位线指示插入位置。
• 选中：单击组件；按住 Ctrl 多选。
• 移动：选中后拖拽排序，或用键盘方向键微调。
• 删除：选中后按 Delete，或右键菜单删除。

快捷键

• Ctrl/Cmd + S：保存草稿
• Ctrl/Cmd + Z / Shift+Z：撤销 / 重做
• Ctrl/Cmd + C / V：复制 / 粘贴组件（含跨页面粘贴）
• Ctrl/Cmd + D：复制一份当前组件

大纲树

画布左侧「大纲」面板以树形展示组件层级，嵌套深时用大纲树选中比点画布更准。

三种表单场景

• 数据录入：绑定 crud 数据源，提交即新增/更新记录。
• 筛选查询：表单值映射为查询参数，触发目标数据源刷新。
• 流程表单：提交动作选择「发起流程」，进入审批流。

联动配置

选中字段 → 「联动」面板 → 添加规则：当 {{form.type}} === "报销" 时显示「发票」字段。联动规则在保存时会做环检测，成环配置会被拦截并提示。

校验规则

必填、正则、长度、数值范围开箱即用；复杂规则用表达式或 async 校验。详见开发笔记《表单引擎的校验体系》。

内置图表

柱状、折线、饼图、仪表盘、指标卡五类，基于 ECharts 封装，属性面板可视化配置，无需手写 option。

数据绑定

图表的数据源可以是 api 或 static；用「字段映射」把返回的列拖到 X 轴 / Y 轴即可。多系列图表在「系列」面板添加。

自动刷新

数据源开启 autoRefresh（单位秒），看板类页面建议 30s 以上，避免给后端造成压力。

顶层结构

json{
  "version": "1.0",
  "component": "Page",
  "dataSources": {},
  "children": [],
  "events": {}
}

组件节点

每个节点四个要素：component（组件名）、props（静态属性）、events（事件绑定）、children（子节点）。表达式用双花括号：{{state.keyword}}。

版本与迁移

Schema 带 version 字段，引擎加载时自动按迁移管线升级到最新版本 —— 这是吸取了早期版本事故的教训（见踩坑记录）。手写 Schema 时请勿伪造高版本号。

三种数据源

• static：写死的 JSON，适合字典、枚举。
• api：HTTP 接口，支持 GET/POST、请求头、参数模板与响应适配器（adapter）。
• crud：对后端 REST 资源的完整封装，自动生成分页、排序、筛选参数。

响应适配器

后端返回结构千奇百怪，用 adapter 统一成 { list, total }：

js// adapter 是一个纯函数
(res) => ({ list: res.data.rows, total: res.data.count })

鉴权

API 数据源可配置「请求拦截器」，自动附带 token；敏感密钥请配置在服务端代理层，不要写进页面 Schema。

基本概念

流程由节点（Node）与连线（Edge）组成。节点类型：开始、审批、抄送、条件、结束。

配置一个审批流

• 拖入「开始 → 审批 → 结束」三个节点并连线。
• 审批节点设置审批人：指定人、角色或表单字段（如「部门主管」）。
• 条件节点配置分支表达式，如 {{form.amount}} > 10000 走总经理审批。

与表单联动

表单提交后调用动作「发起流程」，流程实例自动关联表单数据；审批意见会回写到表单只读区。

三级定制

• 全局主题：主色、圆角、字号阶梯，一处修改全站生效。
• 组件样式：每个组件的「样式」面板支持常用 CSS 属性的可视化调整。
• 自定义 CSS：页面级注入，选择器以页面 id 开头防止污染。

暗色模式

主题支持明暗双 token 体系，页面声明 theme: "auto" 即可跟随系统。

建议

优先用全局主题，少用自定义 CSS —— 主题变量升级时，自定义 CSS 是需要自己维护的部分。

什么是 API 编排

把多个接口组合成一次逻辑调用：串行（B 依赖 A 的结果）、并行（同时请求最后合并）、条件（按 A 的结果决定调谁）。

编排节点

• request：发起 HTTP 请求
• transform：JS 纯函数转换数据
• condition：条件分支
• merge：合并多个上游结果

一个例子

js// transform 节点：把订单列表聚合成 { 总额, 笔数 }
(orders) => ({
  total: orders.reduce((s, o) => s + o.amount, 0),
  count: orders.length
})

调试

每个节点可单独「试运行」，输入输出全记录，定位问题不用猜。

物料协议

一个物料 = 组件实现 + 物料描述（meta.json）：

json{
  "name": "SignaturePad",
  "title": "签名板",
  "props": [
    { "name": "penColor", "type": "color", "default": "#111" }
  ]
}

开发步骤

• 用任意框架实现组件，导出标准 props 接口。
• 编写 meta.json 声明可配置属性，设计器据此自动生成属性面板。
• 打包上传物料包，设计器内即可拖用。

约束

物料内禁止使用全局样式污染；异步资源必须自行清理副作用。

出码

「导出源码」会生成标准 Vue3 + Vite 工程，目录结构清晰、无私有依赖，可自由二次开发。

部署方式

• 静态托管：构建产物是纯静态文件，Nginx / OSS / COS 任选。
• 服务端渲染：保留 server 目录则按 Node 服务部署，环境变量在 .env 配置。

升级策略

平台升级不影响已出码工程；未出码的页面由引擎自动迁移 Schema，无需人工干预。

页面导出

任何页面都可导出为 .schema.json 文件，包含完整配置 —— 建议重要页面定期导出存档。

整站备份

「站点设置 → 备份」可导出全部页面 + 数据源定义 + 流程定义的打包文件，可用于站点迁移或灾难恢复。

跨环境迁移

导出包在「开发 → 测试 → 生产」环境间导入时，数据源会自动按环境变量重映射，无需手工改地址。

v1.0（2025.10）

• 首个公开版本：设计器、表单引擎、流程引擎、权限体系、出码。

v1.1（2026.01）

• 新增 API 编排；图表组件扩充至 5 类；设计器快捷键补全。

v1.2（2026.04）

• 联动规则环检测；异步校验竞态修复；页面级锁定协作。

v1.3（2026.08）

• 备份/迁移打包；大纲树面板；暗色主题双 token 体系。

路线图

多人实时协同编辑、物料市场、服务端渲染支持 —— 按反馈优先级排期。