全代码框架提供了全部的前端源码，因此你可以使用任何已有的前端知识去解决问题，本文档只是提供了一个推荐的思路。
类似的，如果你觉得封装组件过于繁琐，在保证功能和界面一致的前提下，可以使用antdesign-vue提供的原始组件，如数据表格、对话框等。
本文档所有二开都是基于使用脚本将表单拆分后进行。为了封装的一致性，以及低开模式的实现，表单的主体是一个比较复杂的封装，通过JSON的配置数据实现字段渲染，虽然配置数据提供了校验、事件的接口，由于JSON文件和表单的主要文件在不同位置，在函数调用、值传递等方面有很多不便。因此我们提供了一个脚本，可以将JSON的配置文件拆分为若干个FormItem，以方便二开。
脚本位于dev_tools目录，进入页面的components目录，如src/views/jianyi/test1/components，执行：
node ..\\..\\..\\..\\..\\dev_tools\\template_extend.js
如果是目录层级不一样，需要调整相对路径的层级。如果提示文件解析失败，需要调整配置代码，保证export const formProps: FormProps这一段定义的表单主体文件，必须为纯JS，而且不能有任何外部模块的引入（代码只是使用eval的方式读取表单的ID等信息，并不会真的使用这些模块）。
可以参考二开脚本中的对应代码，临时定义一些虚假的模块使文件能顺利解析：
console.log('total rows: ' + confArr.length);
const funStr = \`
const uploadApi = ''; // 修复文件上传引用的API
return \${confArr.join('\\n')}
\`;
const fun = new Function(funStr);
formProps = fun();
拆分成功后，目录里会多出CustomDevForm、CustomDevSumForm、CustomDevTableItem这些文件，如果有多个表格，也会有1、2这样的序号附加。
找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：
<template>
<CustomDevForm
ref="systemFormRef"
:formProps="data.formDataProps"
:formModel="{}"
:isWorkFlow="props.fromPage!=FromPageType.MENU"
/>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { formProps, formEventConfigs } from './config';
//注释掉原来的引入
//import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
//引入二开拆分后的文件，注意template部分也要换掉
import CustomDevForm from "/@/views/jianyi/devgaofirst/components/CustomDevForm.vue";
</script>
如果模块没有经过定制，此时除了界面略有差别，应该和原有功能一致。
移动端表单拆分的执行逻辑大体和PC端一致，脚本位于common/tools目录，进入页面的components目录，如pages/jianyi/test1/components，执行：
node ..\\..\\..\\..\\common\\tools\\template_extend.js
如果目录层级难以确定，需要调整相对路径的层级。最简单的方法是直接将脚本文件复制到对应目录下，然后在文件目录的层级下执行脚本。 需要注意的是，移动端表单生成的config/index.js文件中的formProps参数被压缩成为一行，在执行脚本前需将其格式化为标准的Object格式。 同样的，找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：
<template>
<view class="form-fixed">
<CustomDevForm ref="formRef" :key="renderKey" :formProps="formConfig.formProps" :disabled="disabled" :control="formConfig.type"></CustomDevForm>
</view>
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue';
import SimpleForm from '@/components/simple-form/SimpleForm.vue';
import CustomDevForm from './CustomDevForm.vue';
</script>