在做一套零代码平台(ZeroCode),业务人员自己搭系统的那种。这类产品要成立,第一道门槛不是别的,是表单设计器——它是业务人员每天打交道的工作台,体验不行,后面的一切都白搭。
一、整体思路:三栏、所见即所得
经典三栏布局:左边是字段类型库,中间是画布,右边是属性面板。点选画布里的任意字段,右边立刻切换到它的配置;点空白处,则切换到表单级设置。所有配置即时反映在画布上,保存之前你看到的就是用户将来填写的样子。
顶部工具栏很克制:返回、未保存标记、字段计数(上限 2000)、撤销重做、保存。常用操作全在这一条里。
二、字段库:35 种,分四大类
- 布局字段(3):分段(下划线/左竖条/箭头折叠三种样式)、标签页、描述;
- 常用字段(10):文本、数值、单选、多选、日期、日期时间、电话、邮箱、地区等;
- 高级字段(16):金额、百分比、评分、条形码、签名、附件、用户、部门、富文本、自动编号、公式,加四个系统字段(创建/更新时间、创建/更新人);
- 关联字段(6):关联记录、级联选择、引用、汇总、子表等。
重点在"每种字段都有专属配置":文本可配正则校验和失败提示;金额可选货币符号和千分位;自动编号支持按天/周/月/年重置(订单号场景直接覆盖);签名支持防伪摘要、时间戳和提交者 IP,可以撑住巡检签收这类严肃场景。
三、排版:把"拖拽"这个基本动作做扎实
12 栅格,一行最多 4 个字段,宽度四档(1/4、1/2、3/4、整行)。几个用户可直接感知的行为:
- 拖拽和单击都能加字段,单击自动追加到末尾;
- 行间、行内两种落点,拖拽过程有指示线实时提示,不会松手才知放错;
- 一键按一/二/三/四列全表重排,整行组件自动独占一行;
- 删字段后同行自动补位,不留空;
- 50 步撤销重做。
这些听起来都是"应该的",但每一个背后都是真实用户抱怨过的坑——拖拽类编辑器的口碑就死在这些细节上。
四、标签页:长表单的分页方案
表单一长,填写体验就崩了。标签页字段把表单拆成多页,每个页签内部是一块独立的自由排版区域,交互和主画布一致。字段可以在主画布和页签之间随意进出;页签支持自定义名称、图标、标题颜色,位置可放顶部/底部/左侧,单页签时还能自动隐藏页签栏。
五、公式引擎:让表单会算账
三种计算方式:数值表达式(点选字段和运算符拼接,不学语法)、日期计算(时长/加减/距此刻)、函数计算(50+ 内置函数,分五类,带搜索、插入与语法校验)。输出可配格式、小数位、前后缀。对 Excel 用户来说基本零学习成本。
六、表间关系:关联、子表、引用、汇总
- 关联记录:三种关系类型 + 双向关联,候选数据可筛选可排序,展示方式四种(弹框/下拉/卡片/表格);数据联动是亮点——选中关联记录后自动把它的字段值填进本表;
- 子表:订单明细标配,行数限制、合计行、冻结列、字段防重复、新增行默认值、批量添加(选来源表多条记录,按字段映射自动生成子行);
- 引用/汇总:引用取关联表的值(可选仅显示或存储),汇总做聚合(求和/平均/计数/去重/最值/拼接)。
七、规则与权限
- 联动规则:值变化/字段显示/值清空三种触发,条件可叠加,动作支持显示/隐藏/只读/赋值/提示并按序执行;
- 数据权限:表单级配置查看范围(全部/仅本人/本部门)与编辑范围(录入人/本部门/指定角色),后端强制执行;字段级还能单独设可见范围。
样式层面,PC 和移动端的标签位置可以分别设置,提交按钮文案可改,重置按钮可关。
八、写在最后
一句话总结这个设计器的能力边界:凡是你想用 Excel + 邮件 + 人肉催办撑着的场景——客户跟进、进销存、报销、巡检、报名——它基本都能直接接住,而且改表单的人就是提需求的人。
后续计划继续补移动端体验和一些垂直字段。也欢迎掘金的各位聊聊:你在业务里最希望表单设计器有什么能力?评论区见。
自己跑一套
整个平台已打包为 Docker 镜像(阿里云 ACR),一条命令拉取:
docker pull registry.cn-zhangjiakou.aliyuncs.com/xuanyuanke/zerocode:latest
