左侧导航栏：CompositePanel.DragSourceWidget
拖拽组件：Component
输入控件：inputs <br>
布局控件：Layouts<br>
自增控件：Arrays <br>
展示控件：Displays <br>
大纲树组件：OutlinedTree
历史记录：History
中心工作区：Workspace
顶部操作：ToolbarPanel<br>
操作区域：ViewportPanel.ViewPanel<br>
拖拽面板：type="DESIGNABLE"<br>
json树编辑控件：type="JSONTREE"
代码树：type="MARKUP"
表单预览：type="PREVIEW" PreviewWidget
配置面板：SettingsPanel.SettingsForm<br>
const node = useCurrentNode(currentWorkspaceId)<br>配置项：node?.designerProps?.propsSchema<br>配置项数据：node?.props<br>渲染配置面板<br>
PreviewWidget：核心表单渲染
const form = useMemo(() => createForm(), [])
const { form: formProps, schema } = transformToSchema(props.tree, {<br> designableFormName: 'Root',<br> designableFieldName: 'DesignableField',<br> })
<Form {...formProps} form={form}><br> <SchemaField schema={schema} /><br> </Form>
@designable/react
useDesigner<br>const designer = useDesigner()
@formily/antd
// 适配其拖拽组件<br>export const A: ComposedA = connect(<br> antdA as A,<br> mapProps()<br>)
const SchemaField = createSchemaField({<br> components: {<br> ...<br> },<br>})<br>
保存/提交<br>ActionsWidget.tsx<br>
获取提交结果：<br>const submit = async (designer: Engine) => {<br> const fr = formRef.formRef.current.getForm();<br> await fr.validate('dk822gxacmz');<br> console.log(fr.values)<br> };<br>
获取表单配置：<br>const config = transformToSchema(designer.getCurrentTree(), {<br> designableFieldName: 'DesignableField',<br> designableFormName: 'Root',<br> })
初始化
designer.setCurrentTree(<br> transformToTreeNode(formilySchema), {<br> designableFieldName: 'DesignableField',<br> designableFormName: 'Root',<br> })<br> )<br>
新增组件步骤
配置数组新增<br><b><u>designable/antd/src/sources</u></b><br>{<br> componentName: 'DesignableField',<br> props: {<br> title: 'MtdInput',<br> type: 'string',<br> 'x-decorator': 'FormItem',<br> 'x-component': 'MtdInput',<br> },<br> },<br>
描述语言配置<br><b><u>designable/antd/src/locales/zh-CN.ts：</u></b><br>MtdInput: { title: 'mtd输入框', TextArea: 'mtd多行文本' }<br>
配置面板<br><b><u>designable/antd/src/schemas</u></b><br>
拖拽面板注册<br><b><u>designable/antd/src/components/DesignableField/options.ts：<br></u></b>import { MtdInput } from '@formily/antd'<br>const SchemaField = createSchemaField({<br> components: { MtdInput }<br>})<br>
表单注册<br><b><u>designable/antd/playground/widgets/PreviewWidget.tsx：</u></b><br>import { MtdInput } from '@formily/antd'<br>const SchemaField = createSchemaField({<br> components: { MtdInput }<br>})<br>
