GbFormDesign

Vue 3 + Sass 动态表单设计器 / 预览器，1:1 复刻 form-create-designer（packages/element-ui）的界面与交互：

• 左侧图标栏（组件 / JSON）、组件面板（基础组件 + 布局组件）与大纲树（复制 / 删除 / 定位）
• 中间工具条（PC / 平板 / 手机、撤销 / 重做、导入 / 预览 / 清空）与画布（拖拽新增、同层排序、拖入分栏列、字段悬浮工具）
• 右侧配置面板（组件类型、字段名、隐藏、必填、宽度、默认值、提示、数值范围、选项、分栏列配置；表单配置页签）
• 预览弹窗：表单模式 / 组件模式（生成 Vue 模板）/ HTML 模式，一键复制
• JSON 面板：表单规则 / 表单配置编辑与导出
• 表单预览器 FormViewer：必填与范围校验、默认值、分栏渲染、只读模式

安装

npm install gbformdesign element-plus @element-plus/icons-vue

import GbFormDesign from 'gbformdesign'
import 'gbformdesign/style.css'
app.use(ElementPlus).use(GbFormDesign)

使用

<FormDesigner
  v-model="components"
  :options="options"
  :meta="{ name: '采购申请' }"
/>

<FormViewer :form-config="components" />

props：modelValue（组件数组）、options（表单配置：name/description/labelWidth/size）、meta、fileName。 事件：update:modelValue、update:options、import、export、validate。 ref 方法：getComponents()、getForm()、importJSON()、exportJSON()、downloadForm()、validate()、clearForm()、undo()、redo()。

数据模型

{
  "id": "cmp_amount",
  "type": "input-number",
  "required": true,
  "min": 0,
  "max": 100000,
  "defaultValue": 500,
  "props": { "label": "申请金额", "variableName": "amount", "placeholder": "请输入金额" },
  "style": { "width": "50%" }
}

type：input / textarea / input-number / radio-group / checkbox-group / select / switch / date-picker / row；row 使用 props.columns 与 children[列][行]。

API

import {
  normalizeForm, validateForm, importForm, exportForm,
  enrichFormVariables, findFormVariable, countFormComponents,
  FormVariable, COMPONENT_TYPES, downloadJSON, pickJSONFile
} from 'gbformdesign'

importForm 兼容：组件数组、{ components, options }、GBflow 文档、form-create 的 { rule, options }、RuoYi 的 formStructure。

开发

npm install
npm run dev      # http://127.0.0.1:5179
npm run build
npm test

版权

src/styles/fc/icon.css、designer.css、fonts/fc-icons.woff 取自 form-create-designer（MIT，Copyright (c) 2022 xaboy）；src/styles/config.scss 改编自其 ConfigItem 样式。

License

MIT