开发文档

从零开始了解双蜂表单的技术架构与集成方式。

概述

双蜂表单是基于 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