工具栏
工具栏提供了常用的操作功能,主要包含:预览、默认值、导入、打印、生成代码、撤销重做等;如果你希望从开发侧控制这些能力的显示与隐藏,也可以继续查看控制功能模块显隐。
尺寸切换
点击图标可以切换不同的工作区尺寸

辅助线
点击图标工作区背景显示出辅助线,可用于精细化调整表单组件的尺寸

快速布局
通过选择列数,可以快速调整表单的整体布局列数

默认值
点击默认值按钮,工作区可切换至默认值的配置页面,配置表单字段初始值


设置默认值
表单默认值设置功能使用户能够方便地管理表单的默认数据,具体操作包括:
第一步:点击默认值按钮

第二步:填写或者选择默认数据

第三步:点击保存

重置默认值
点击重置按钮,可以将表单的默认值重置为预设的初始状态

清空默认值
点击清空按钮,可以将设置的默认值直接清空,使表单恢复到无默认数据的状态

打印表单
可以调用浏览器的打印功能,打印表单页面

如果你希望在运行时通过代码打印表单或导出 PDF,可以继续查看打印表单内容。
导入
支持Word、Excel、JSON等格式表单配置的导入

其中 JSON 导入导出的底层承载仍然是表单规则和表单配置对象;如果你希望进一步了解这些数据结构,可以继续阅读TS类型定义。
撤销/重做
设计器会实时同步用户的操作行为,为工具栏的撤销 / 重做功能提供数据支撑:
每一次拖拽、删除、修改操作都会被记录,点击 “撤销” 可回退到上一状态,避免误操作导致的进度丢失
回退(左侧按钮):
即回退操作,恢复到上一次组件拖入、修改或删除前的状态,支持多级撤销
恢复(右侧按钮):
即恢复操作,恢复到撤销前的状态,与撤销操作对应

生成拖拽规则
可以生成任意 Vue 组件或 UI 组件的拖拽规则

这个入口非常适合作为二次开发的起点。若要把生成结果继续整理成正式能力,通常会结合扩展组件、扩展模板与原型方法一起使用。
保存
保存当前表单设计示例到服务器,也可以公开到官方示例库

预览
在弹窗中预览当前设计的表单最终呈现效果,支持移动/电脑端适配预览

预览模式下,用户能够检查表单在 PC 端和移动端的外观和功能,确保其设计符合各个平台的预期表现。
如果你后续准备把预览结果真正接入项目中,可以继续查看快速上手、移动端自适应以及TS类型定义中的规则结构说明。
表单模式
在表单模式下,以表单样式展示,使得用户能够清晰地查看表单在 PC 端和移动端的数据和布局

阅读模式
在阅读模式下,表单以信息的方式展示,使得用户能够清晰地查看表单在 PC 端和移动端的数据和布局,不会出现编辑控件和操作按钮,使得用户能够以纯粹的视角审阅表单设计,适用于最终审核和展示场景。

生成组件
在生成组件模式下,系统会展示当前表单在 PC 端和移动端的 Vue 代码,使用户能够直接复制并使用这些代码来生成实际的表单组件。

生成FSC
生成的 SFC 文件遵循 Vue 组件的标准格式,包含模板()、脚本()和样式(``)部分。

生成HTML
生成 HTML 标准格式文件

清空
一键清除当前设计区域所有组件和配置,恢复空白状态

更多扩展
方便开发者在顶部工具栏添加开发的功能 


