动态表单实现|share blog

一、动态表单的核心价值

在数字化业务场景中，表单是数据采集的核心载体。传统固定表单难以适配多变的业务需求（如企业HR入职信息表随政策调整增减字段、电商售后登记表单按商品类型变更），而动态表单允许用户通过可视化配置自定义字段结构，无需开发人员修改代码即可快速适配新业务，大幅提升研发效率与业务灵活性。

二、动态表单实现的核心原理

动态表单的实现围绕“数据结构化、配置可视化、渲染动态化”三大核心目标，整体架构分为四层，自上而下形成完整链路：

1. 配置层：可视化字段设计

配置层是用户与动态表单交互的入口，核心功能是让非技术人员通过拖拽、勾选等操作完成字段定义。

核心配置项

基础字段属性：字段名称、标识（唯一key）、类型（文本、数字、日期、单选、多选、附件等）；
校验规则：必填项、字符长度限制、正则表达式（如手机号、邮箱格式）、自定义校验逻辑；
展示属性：占位提示语、默认值、是否隐藏、排序权重；
关联逻辑：字段联动（如选择“企业用户”后显示“企业名称”字段）、下拉选项数据源（静态列表或接口动态获取）。

易用性设计

配置层通常提供可视化编辑器，支持字段拖拽排序、分组管理（如入职表单分为“个人基本信息”“工作相关信息”组），并实时预览表单效果。

2. 元数据层：表单结构的“骨架”

配置层的操作最终转化为标准化的元数据（Schema），是动态表单的核心，本质为JSON格式配置文件，需记录字段基础信息并关联版本信息，支撑历史数据兼容。

示例元数据结构

{
  "formId": "employee_onboard_001",
  "schemaVersion": "v2",
  "fields": [
    {
      "key": "user_name",
      "name": "姓名",
      "type": "text",
      "required": true,
      "maxLength": 20,
      "defaultValue": ""
    },
    {
      "key": "user_type",
      "name": "用户类型",
      "type": "radio",
      "options": [{"label": "企业用户", "value": "company"}, {"label": "个人用户", "value": "personal"}],
      "required": true
    },
    {
      "key": "company_name",
      "name": "企业名称",
      "type": "text",
      "required": false,
      "showCondition": {
        "field": "user_type",
        "value": "company"
      }
    }
  ]
}

关键字段说明

schemaVersion：标记表单版本，解决字段变更时历史数据兼容问题；
showCondition：定义字段联动规则，实现动态显示/隐藏逻辑。

3. 渲染层：动态生成表单界面

渲染层核心任务是解析元数据，自动生成表单界面。前端需匹配不同字段类型的UI组件，解析校验规则和联动逻辑，实现实时校验与界面动态调整。

实现关键点

组件映射：维护“字段类型 - UI组件”映射关系，支持自定义组件扩展（如身份证扫描组件）；
规则解析：将元数据校验规则转化为前端可执行逻辑（如required: true转化为非空校验并显示错误提示）；
联动实现：监听关联字段数值变化，根据showCondition动态修改目标字段显示状态，保证交互流畅。

4. 存储层：兼容多版本的数据持久化

存储层需解决两大核心问题：表单数据存储、不同版本历史数据兼容。常见方案如下：

（1）JSON统一存储（推荐）

核心思路：结构与数据分离

主表存储公共信息：表单ID、提交人、提交时间、元数据版本（schemaVersion）；
详情字段存储JSON格式：将用户提交的字段值序列化后存入JSON字段（如MySQL JSON类型、PostgreSQL JSONB类型）。

优势：无需频繁修改数据库表结构，适配字段动态增减；通过schemaVersion关联元数据，实现历史数据回溯与正确渲染。

（2）冗余字段存储（适用于简单场景）

对于字段变动少的场景，在数据库表中预留冗余字段或新增字段存储新内容，旧字段保留兼容历史数据（如v2新增“企业名称”字段，旧数据该字段设为“未填写”）。

缺点：字段扩展性差，不适用于用户完全自定义字段的场景；难以追溯历史数据提交版本。

三、动态表单的设计与实现

1. 设计的考虑

需从配置层入手设计，不同字段类型的schema既有公共属性（如字段名称、是否必选），也有专属属性（如输入框的字符长度限制、单选框的选项列表）。

第一步：确定字段类型

分类	具体类型
基础字段	单行文本、多行文本、数字、日期时间、单选、多选、下拉单选、下拉多选、分割线、标签、联级选择器
高级字段	密码、图片、地址、手机、附件、链接、计算（由基础组件复合而来）

第二步：设计各字段类型的Schema

单行文本Schema示例

{
    "id": "1127085317824533",
    "title": "姓名",
    "type": "input",
    "showLabel": true,
    "placeholder": "请输入姓名",
    "tips": true,
    "description": "请输入真实姓名",
    "readable": true,
    "editable": true,
    "fieldWidth": 1.0,
    "prefixIcon": "el-icon-user",
    "suffixIcon": "",
    "rules": {
        "required": false,
        "message": "请输入姓名",
        "trigger": "blur",
        "max": 100,
        "maxMessage": "姓名长度不能超过100个字符",
        "min": 1,
        "minMessage": "姓名长度不能少于1个字符",
        "pattern": "^[\\u4e00-\\u9fa5a-zA-Z·\\s]+$",
        "patternMessage": "姓名仅支持中文、字母、点和空格，请勿输入特殊字符"
    },
    "defaultValue": ""
}

多行文本Schema示例

{
    "id": "1127085317824533",
    "title": "备注",
    "type": "textarea",
    "showLabel": true,
    "placeholder": "请输入备注信息",
    "tips": true,
    "description": "请输入详细备注，最多200个字符",
    "readable": true,
    "editable": true,
    "fieldWidth": 1.0,
    "rows": 4,
    "autosize": {
        "minRows": 4,
        "maxRows": 8
    },
    "rules": {
        "required": false,
        "trigger": "blur",
        "max": 200,
        "maxMessage": "备注内容不能超过200个字符",
        "min": 10,
        "minMessage": "备注内容不能少于10个字符",
        "pattern": "^[\\u4e00-\\u9fa5a-zA-Z0-9，。！？；：、\\s\\r\\n]+$",
        "patternMessage": "备注仅支持中文、字母、数字、常用标点和换行，请勿输入特殊字符"
    },
    "defaultValue": ""
}

第三步：Schema配置项的存储

配置项采用JSON格式存储，数据库表设计参考：

字段名	类型	说明
id	字符串/数值	表单字段唯一标识
type	字符串	字段类型（如“input”“textarea”）
configs	JSON	字段配置项（如单行文本的`showLabel`、`rules`等）

示例：showLabel配置项的JSON存储形式

{"label": "必选", "type": "switch"}

第四步：前端布局设计

采用三列式布局（主流方案）：

左侧：表单配置项列表（可选的字段类型）；
中间：表单预览区域（可视化展示配置后的表单效果）；
右侧：字段配置项设置（针对选中的字段，配置其专属属性和公共属性）。

可以参考下图

2. 实现的细节

存储层实现

在这个系统中主要包含以下几个实体：

组件类型（field_component ）：存储左侧组件库的所有组件，是整个系统的 “组件基础库”。
字段配置元数据（field_config_schema）：存储 “每个组件类型对应的配置项 Schema”，定义某类组件该显示哪些配置项、配置项用什么控件编辑、校验规则等，是右侧配置面板的 “渲染依据”。
表单元数据（form_schema）：存储表单的基础信息 + 所有字段的配置（Schema）。
表单数据（form_data）：存储用户提交的表单业务数据，是动态表单的 “业务数据表” 。
其它扩展：表单分组表，表单操作日志表，表单权限表，表单草稿表，配置字典表（对配置项的可选值做标准化管理，比如 “组件的布局方式只能是 left/top/inline”“图标只能选系统内置的 el-icon-*”，避免配置值混乱）。

建表语句：

-- 1. 组件类型表（field_component）- 表单组件基础库
DROP TABLE IF EXISTS `field_component`;
CREATE TABLE `field_component`
(
    `id`             bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '组件唯一标识',
    `component_code` varchar(64)     NOT NULL COMMENT '组件编码（如input/textarea/radio）',
    `component_name` varchar(64)     NOT NULL COMMENT '组件名称（如单行文本/多行文本/单选框）',
    `component_type` varchar(32)     NOT NULL COMMENT '组件分类（base:基础字段/advanced:高级字段）',
    `sort`           int             NOT NULL DEFAULT 0 COMMENT '排序权重（数值越小越靠前）',
    `icon`           varchar(64)              DEFAULT '' COMMENT '组件图标',
    `description`    varchar(255)             DEFAULT '' COMMENT '组件描述',
    `status`         tinyint         NOT NULL DEFAULT 1 COMMENT '状态（1:启用/0:禁用）',
    `create_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (`id`),
    UNIQUE KEY `uk_component_code` (`component_code`),
    KEY `idx_component_type` (`component_type`)
) ENGINE = InnoDB
  DEFAULT CHARSET = utf8mb4 COMMENT ='组件类型表';

-- 插入组件数据
INSERT INTO `field_component` (`component_code`, `component_name`, `component_type`,
                               `sort`, `icon`, `description`, `status`)
VALUES
-- 单行文本组件
('input', '单行文本', 'base', 1, 'TextT24Filled', '普通单行文本输入框，适用于姓名、手机号等短文本输入', 1),
-- 多行文本组件
('textarea', '多行文本', 'base', 2, 'TextSmallCaps', '多行文本输入框，适用于备注、描述等长文本输入', 1),
('number', '数字输入框', 'base', 3, 'el-icon-number', '仅允许输入数字的输入框，支持整数/小数配置', 1),
('date', '日期选择器', 'base', 4, 'el-icon-date', '日期选择控件，支持年月日/年月日时分秒格式', 1),
('radio', '单选框', 'base', 5, 'el-icon-radio', '单选选项组，仅可选择一个选项', 1),
('checkbox', '多选框', 'base', 6, 'el-icon-checkbox', '多选选项组，可选择多个选项', 1),
('select', '下拉单选', 'base', 7, 'el-icon-select', '下拉选择框，仅可选择一个选项', 1),
('select-multiple', '下拉多选', 'base', 8, 'el-icon-select', '下拉选择框，可选择多个选项', 1),
('divider', '分割线', 'base', 9, 'el-icon-divider', '表单分区分割线，无数据输入功能', 1),
('label', '标签', 'base', 10, 'el-icon-label', '纯文本标签，用于表单说明，无输入功能', 1),
('cascader', '级联选择器', 'base', 11, 'el-icon-cascader', '级联下拉选择，适用于省市区等层级选择', 1),

-- 高级字段（component_type = advanced）
('password', '密码输入框', 'advanced', 1, 'el-icon-lock', '密码输入框，输入内容加密显示', 1),
('upload-image', '图片上传', 'advanced', 2, 'el-icon-picture', '单张/多张图片上传控件', 1),
('upload-file', '附件上传', 'advanced', 3, 'el-icon-upload', '文件上传控件，支持多种格式', 1),
('mobile', '手机号输入框', 'advanced', 4, 'el-icon-phone', '手机号专用输入框，自带格式校验', 1),
('id-card', '身份证输入框', 'advanced', 5, 'el-icon-idcard', '身份证号专用输入框，自带格式校验', 1),
('address', '地址选择器', 'advanced', 6, 'el-icon-location', '省市区+详细地址组合输入控件', 1),
('link', '链接输入框', 'advanced', 7, 'el-icon-link', 'URL链接输入框，自带格式校验', 1),
('calculator', '计算字段', 'advanced', 8, 'el-icon-calculator', '基于其他字段自动计算的字段，如总价=单价*数量', 1);

-- 2. 字段配置元数据表（field_config_schema）- 右侧配置面板渲染依据
DROP TABLE IF EXISTS `field_config_schema`;
CREATE TABLE `field_config_schema`
(
    `id`             bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '配置项Schema唯一标识',
    `component_code` varchar(64)     NOT NULL COMMENT '关联组件编码',
    `config_key`     varchar(64)     NOT NULL COMMENT '配置项key（如showLabel/placeholder/rules）',
    `config_label`   varchar(64)     NOT NULL COMMENT '配置项名称（如显示标签/占位提示/校验规则）',
    `config_type`    varchar(32)     NOT NULL COMMENT '配置项编辑控件类型（switch/input/select/textarea）',
    `config_options` json                     DEFAULT NULL COMMENT '配置项可选值（下拉框等需枚举值时使用）',
    `default_value`  json                     DEFAULT NULL COMMENT '配置项默认值',
    `is_required`    tinyint         NOT NULL DEFAULT 0 COMMENT '是否必填配置项（1:是/0:否）',
    `sort`           int             NOT NULL DEFAULT 0 COMMENT '配置项排序',
    `description`    varchar(4096)            DEFAULT '' COMMENT '配置项说明',
    `create_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (`id`),
    UNIQUE KEY `uk_component_config` (`component_code`, `config_key`),
    KEY `idx_component_code` (`component_code`)
) ENGINE = InnoDB
  DEFAULT CHARSET = utf8mb4 COMMENT ='字段配置元数据表';

-- 插入input组件的核心配置项
INSERT INTO `field_config_schema` (`component_code`, `config_key`, `config_label`, `config_type`,
                                   `config_options`, `default_value`, `is_required`, `sort`, `description`)
VALUES
    -- 单行文本
    ('input', 'title', '字段标题', 'input', NULL, '""', 1, 1, '表单中显示的字段名称，如"姓名"'),
    ('input', 'showLabel', '显示标签', 'switch', NULL, 'true', 1, 2, '是否显示字段标题标签'),
    ('input', 'placeholder', '占位提示语', 'input', NULL, '""', 0, 3, '输入框为空时显示的提示文字'),
    ('input', 'tips', '显示说明提示', 'switch', NULL, 'true', 0, 4, '是否显示字段的描述说明'),
    ('input', 'description', '字段描述', 'textarea', NULL, '""', 0, 5, '字段的详细说明，会显示在提示中'),
    ('input', 'readable', '是否只读', 'switch', NULL, 'true', 0, 6, '字段是否仅可读取，不可编辑'),
    ('input', 'editable', '是否可编辑', 'switch', NULL, 'true', 0, 7, '字段是否允许编辑'),
    ('input', 'fieldWidth', '字段宽度', 'segment',
     '[
       {
         "label": "1/4",
         "value": 0.25
       },
       {
         "label": "1/3",
         "value": 0.33
       },
       {
         "label": "1/2",
         "value": 0.5
       },
       {
         "label": "2/3",
         "value": 0.67
       },
       {
         "label": "3/4",
         "value": 0.75
       },
       {
         "label": "整行",
         "value": 1.0
       }
     ]',
     '"1.0"', 0, 99, '字段占一行的比例（0-1）'),
    ('input', 'prefixIcon', '前缀图标', 'select',
     '[
       {
         "value": "User"
       },
       {
         "value": "IosPhonePortrait"
       }
     ]',
     NULL, 0, 9, ''),
    ('input', 'suffixIcon', '后缀图标', 'select',
     '[
       {
         "value": "Search"
       }
     ]',
     NULL, 0, 10, ''),
    ('input', 'rules', '校验规则', 'json', NULL,
     NULL,
     0, 11, '字段的校验规则，包含必填、长度、正则等，示例：{
        "required": false,
        "message": "请输入姓名",
        "trigger": "blur",
        "max": 100,
        "maxMessage": "姓名长度不能超过100个字符",
        "min": 1,
        "minMessage": "姓名长度不能少于1个字符",
        "pattern": "^[\\u4e00-\\u9fa5a-zA-Z·\\s]+$",
        "patternMessage": "姓名仅支持中文、字母、点和空格，请勿输入特殊字符"
    }'),
    ('input', 'defaultValue', '默认值', 'input', NULL, '""', 0, 12, '字段初始化时的默认值');

INSERT INTO `field_config_schema` (`component_code`,
                                   `config_key`,
                                   `config_label`,
                                   `config_type`,
                                   `config_options`,
                                   `default_value`,
                                   `is_required`,
                                   `sort`,
                                   `description`)
VALUES ('textarea', 'title', '字段标题', 'input', NULL, '""', 1, 1, '表单中显示的字段名称，如"备注"'),
       ('textarea', 'showLabel', '显示标签', 'switch', NULL, 'true', 1, 2, '是否显示字段标题标签'),
       ('textarea', 'placeholder', '占位提示语', 'input', NULL, '""', 0, 3, '输入框为空时显示的提示文字'),
       ('textarea', 'tips', '显示说明提示', 'switch', NULL, 'true', 0, 4, '是否显示字段的描述说明'),
       ('textarea', 'description', '字段描述', 'textarea', NULL, '""', 0, 5, '字段的详细说明，会显示在提示中'),
       ('textarea', 'readable', '是否只读', 'switch', NULL, 'true', 0, 6, '字段是否仅可读取，不可编辑'),
       ('textarea', 'editable', '是否可编辑', 'switch', NULL, 'true', 0, 7, '字段是否允许编辑'),

       ('textarea', 'fieldWidth', '字段宽度', 'segment',
        '[
          {
            "label": "1/4",
            "value": 0.25
          },
          {
            "label": "1/3",
            "value": 0.33
          },
          {
            "label": "1/2",
            "value": 0.5
          },
          {
            "label": "2/3",
            "value": 0.67
          },
          {
            "label": "3/4",
            "value": 0.75
          },
          {
            "label": "整行",
            "value": 1.0
          }
        ]',
        '"1.0"', 0, 99, '字段占一行的比例（0-1）'),

       ('textarea', 'rows', '默认行数', 'input', NULL, '"4"', 0, 9, '文本域默认显示的行数'),
       ('textarea', 'autosize', '自适应高度', 'json', NULL,
        '{
          "minRows": 4,
          "maxRows": 8
        }', 0, 10, '文本域自适应高度配置，minRows为最小行数，maxRows为最大行数，示例：{
   "minRows": 4,
   "maxRows": 8
 }'),

-- ========== 校验规则 ==========
       ('textarea', 'rules', '校验规则', 'json', NULL,
        NULL, 0, 11, '字段的校验规则，包含必填、长度、正则等，示例：{
   "required": false,
   "trigger": "blur",
   "max": 200,
   "maxMessage": "备注内容不能超过200个字符",
   "min": 10,
   "minMessage": "备注内容不能少于10个字符",
   "pattern": "^[\\u4e00-\\u9fa5a-zA-Z0-9，。！？；：、\\s\\r\\n]+$",
   "patternMessage": "备注仅支持中文、字母、数字、常用标点和换行，请勿输入特殊字符"
 }'),

       ('textarea', 'defaultValue', '默认值', 'input', NULL, '""', 0, 12, '字段初始化时的默认值');

-- 3. 表单元数据表（form_schema）- 表单基础信息+字段配置
DROP TABLE IF EXISTS `form_schema`;
CREATE TABLE `form_schema`
(
    `id`             bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '表单Schema唯一标识',
    `form_id`        varchar(64)     NOT NULL COMMENT '表单业务标识（如employee_onboard_001）',
    `form_name`      varchar(128)    NOT NULL COMMENT '表单名称',
    `schema_version` varchar(32)     NOT NULL COMMENT 'Schema版本（如v1/v2）',
    `form_desc`      varchar(512)             DEFAULT '' COMMENT '表单描述',
    `fields`         json            NOT NULL COMMENT '表单字段配置集合（核心Schema）',
    `status`         tinyint         NOT NULL DEFAULT 1 COMMENT '表单状态（1:启用/0:禁用）',
    `create_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (`id`),
    UNIQUE KEY `uk_form_version` (`form_id`, `schema_version`),
    KEY `idx_form_id` (`form_id`)
) ENGINE = InnoDB
  DEFAULT CHARSET = utf8mb4 COMMENT ='表单元数据表';

-- 4. 表单业务数据表（form_data）- 用户提交的表单数据
DROP TABLE IF EXISTS `form_data`;
CREATE TABLE `form_data`
(
    `id`             bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '表单数据唯一标识',
    `form_id`        varchar(64)     NOT NULL COMMENT '关联表单业务标识',
    `schema_version` varchar(32)     NOT NULL COMMENT '提交时的Schema版本',
    `form_data_json` json            NOT NULL COMMENT '表单业务数据JSON',
    `submit_time`    datetime        NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '提交时间',
    `status`         tinyint         NOT NULL DEFAULT 1 COMMENT '数据状态（1:有效/0:作废）',
    `ext_info`       json                     DEFAULT NULL COMMENT '扩展信息（如审批状态/备注等）',
    PRIMARY KEY (`id`),
    KEY `idx_form_id_version` (`form_id`, `schema_version`),
    KEY `idx_submit_time` (`submit_time`)
) ENGINE = InnoDB
  DEFAULT CHARSET = utf8mb4 COMMENT ='表单业务数据表';

核心操作流程

① 配置保存流程：用户在前端配置字段→前端校验配置合法性→后端接收并二次校验→序列化 JSON 入库→标记版本为 “生效 / 历史”；
② 配置读取流程：前端请求表单配置→后端查库→返回 JSON 配置给前端，前端渲染表单；

后端实现

结合动态表单的四层架构（配置层、元数据层、渲染层、存储层）和数据库设计，后端主要负责元数据管理、配置校验、数据存储与读取、版本控制等核心功能：

组件基础库管理模块：核心是维护field_component表的 CRUD，为前端配置层提供 “可拖拽的组件列表” 数据源
字段配置元数据管理模块：维护field_config_schema表，为前端 “右侧配置面板” 提供渲染依据
表单元数据（Schema）核心管理模块：这是后端的核心模块，维护form_schema表，实现 “可视化配置→结构化存储” 的核心链路，需要考虑版本控制，配置校验等细节
表单业务数据管理模块：维护form_data表，实现 “用户提交数据→JSON 存储”，核心解决数据持久化 + 版本兼容

前端实现

前端实现围绕后端四层架构（配置层、元数据层、渲染层、存储层）展开，基于 Vue 3 + TypeScript + Element Plus 构建可视化设计器，核心实现「组件库渲染、拖拽设计、动态配置、表单渲染、数据交互」五大核心能力，与后端数据库表和接口逻辑深度对齐。

核心实现思路

前端整体以后端四张核心表为数据基础，形成 “配置 - 存储 - 渲染” 的完整链路：

组件库加载：从后端field_component表拉取启用状态的组件列表（区分基础 / 高级字段），渲染左侧可拖拽的组件库；
配置面板渲染：选中组件后，从field_config_schema表获取该组件对应的配置项（如输入框的占位符、校验规则等），动态渲染右侧配置面板；
元数据生成：用户完成字段配置后，前端将配置信息整合为标准化 JSON 格式，匹配form_schema表的fields字段结构，支持版本标记；
表单渲染与提交：读取form_schema表的元数据，解析字段类型、校验规则、联动逻辑，动态生成表单界面；用户提交数据后，将数据序列化为 JSON 存入后端form_data表，关联表单 ID 和版本号。

可视化设计界面

采用三列式布局，与后端设计逻辑完全匹配：

左侧组件库：按field_component表的component_type（base/advanced）分类展示组件，仅显示状态为启用（status=1）的组件，支持拖拽添加到设计区；
中间设计 / 预览区：设计模式下支持字段排序、删除、配置操作；预览模式下按元数据渲染可提交的表单，实时校验字段规则；
右侧配置面板：根据选中组件的编码，加载field_config_schema表中对应的配置项，按sort排序展示，适配switch/input/select/json等不同配置类型，必填配置项（is_required=1）标注必填标识。

核心交互逻辑

组件添加与排序：拖拽组件到设计区时生成唯一字段 ID，初始化field_config_schema表中定义的默认配置；通过拖拽排序调整字段顺序，同步更新元数据中的字段列表顺序；
配置项管理：修改配置项时实时预览效果，保存配置后更新到表单字段的 JSON 配置中，支持配置项的实时校验（如正则规则格式、数值范围等）；
元数据版本控制：保存表单配置时，指定schema_version（如 v1/v2），提交到后端form_schema表，保证同表单 ID 下不同版本的配置隔离；
表单数据提交：预览模式下提交表单时，校验字段规则（基于元数据中的rules配置），通过后将数据 JSON 化，关联当前表单 ID 和版本号，存入后端form_data表。

关键适配点

组件类型映射：前端维护 “组件编码（component_code）- UI 组件” 映射关系，如input对应单行文本组件、textarea对应多行文本组件，完全匹配field_component表的组件编码；
配置项解析：针对field_config_schema表中不同config_type（如segment字段宽度、json校验规则），适配对应的编辑控件，保证配置项录入格式与后端存储一致；
历史数据兼容：渲染历史表单数据时，根据form_data表的schema_version拉取对应版本的form_schema元数据，按旧版配置渲染表单，保证数据展示的准确性。

核心交互流程

配置保存流程：用户拖拽组件→配置字段属性→前端校验配置合法性→提交 JSON 格式的表单元数据到后端→后端存入form_schema表并标记版本；
表单渲染流程：前端请求指定表单 ID 的元数据→后端返回form_schema表中的 JSON 配置→前端解析配置渲染表单→用户填写数据→提交后存入form_data表；
配置修改流程：修改已有表单配置→生成新的版本号→保存为新的form_schema记录→旧版本配置保留，保证历史提交数据可正常渲染。