开发文档
从零开始了解双蜂表单的技术架构与集成方式。
概述
双蜂表单是基于 Schema 驱动的表单引擎平台。前端使用 Vue 3 + Element Plus / Vant,后端使用 Egg.js + TypeORM + PostgreSQL,核心引擎为纯 TypeScript 实现,支持浏览器与 Node.js 双端运行。
快速上手
1 安装依赖
pnpm install 2 启动开发服务器
pnpm dev 3 创建表单
登录后进入工作台,点击「新建表单」,在设计器中拖拽字段完成表单设计。
4 配置规则
选中字段后在属性面板中配置显示隐藏、必填、联动等规则。
5 发布表单
点击「发布」按钮,获取分享链接即可开始收集数据。
Schema 协议
FormSchema 是双蜂表单的核心数据协议,所有表单结构、校验规则、流程配置均以 JSON Schema 形式描述。
| 类型名称 | 说明 |
|---|---|
| FormSchema | 顶层表单定义,包含页面、字段、规则、设置 |
| FieldSchema | 单个字段声明,包含类型、属性、校验 |
| RuleExpression | 声明式规则 AST,支持条件判断与动作 |
| FormSettings | 表单全局设置,包含提交、权限、通知配置 |
| FormPage | 表单页面,支持多页/标签页布局 |
引擎 API
FormEngine
表单引擎核心,负责 Schema 解析、依赖分析、渲染指令生成。
import { FormEngine } from "@engine/form";
const engine = new FormEngine(schema);
const parsed = engine.parse();
const instructions = engine.render(); RuleEngine
规则引擎,负责声明式表达式的求值与规则执行。
import { RuleEngine } from "@engine/rule";
const ruleEngine = new RuleEngine(expressions);
const result = ruleEngine.evaluate(context); ScoringEngine
计分引擎,支持多种评分策略(加权、百分比、等级、通过判定)。
import { ScoringEngine } from "@engine/scoring";
const scorer = new ScoringEngine(strategy);
const score = scorer.calculate(model); 前端集成
双蜂表单提供 Vue 3 组件绑定,支持 PC 端 (Element Plus) 和移动端 (Vant) 双端渲染。
- 使用 @engine/form/vue 导入 Vue 渲染组件
- 通过 Pinia store 管理表单状态
- 支持 client:load 按需加载交互组件
- 多端自适应:同一 Schema 自动切换 Element Plus / Vant 渲染
服务端集成
通过 RESTful API 与服务端集成,支持表单管理、数据提交与查询。
- 认证方式:JWT Bearer Token
- 提交数据:POST /api/v1/portal/instances
- 查询实例:GET /api/v1/portal/instances?formId=xxx
- 导出数据:GET /api/v1/portal/instances/export?formId=xxx