开发指南

功能介绍

作为 DIY 页面装修的核心交互组件，支持用户通过「可视化拖拽 + 字段配置 + 规则自定义」的方式，零代码快速搭建个性化表单（如报名表单、问卷调研、信息收集、预约申请等），覆盖多场景数据采集需求，同时提供表单提交、数据管理、权限控制等全流程能力，确保数据采集高效、安全、可追溯。

左侧展示组件库，中间实时预览，右侧可以编辑组件的属性设置等

自定义表单装修效果图

框架开发的的自定义功能代码位置：niucloud-core/src/main/resources/core/loader/diy_form/

如需了解核心原理，开发者可以自行阅读

component.json 框架开发的自定义表单组件，以及加载插件的自定义表单组件

template.json 自定义表单模板，以及加载插件的表单模板

type.json 表单类型，以及加载插件的表单类型

如需了解自定义表单装修的核心原理，开发者可以自行阅读

文件位置：admin\src\app\views\diy_form\edit.vue

与自定义页面装修共用，万能表单也可以使用自定义组件

文件位置：admin\src\stores\modules\diy.ts 装修数据最终存储到数据表中的结构主要包含两大部分：

global：global 对象为整体页面的数据结构，后续还会持续完善，实现更加灵活的自定义装修 value：value 为组件集合，在装修时添加自定义组件会变化

在移动端（uni-app）中，自定义页面通过 diy-group 组件进行渲染。该组件负责解析和展示装修数据中的所有组件

文件位置：uni-app/src/addon/components/diy/group/

文件位置：uni-app/src/hooks/useDiyForm.ts