aldehyde 0.2.488 → 0.2.490

package/src/aldehyde/draw-canvas-edit/components/setting-form/index.tsx

@@ -1,306 +1,306 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import { Form as AntdForm, Collapse, Row, Col } from "antd";
-import _ from "lodash";
-import FormItemGroup from "../../../form/form-Item-group";
-import { FieldConfig } from "../../../tmpl/interface";
-import { PageSettings, AssetSettings, LinkSettings } from '../render/types';
-import type Konva from 'konva';
-import { ProgramConfig } from "../../../index";
-import { useLocale } from "../../../locale/useLocale";
-import ImageUpload from "./imag-upload";
-
-const FormItem = AntdForm.Item;
-
-// ID配置
-const baseSetting = [{ title: "ID", id: "id", extControlType: "text", disabled: true, style: { width: "100%" } }];
-
-// 数据源配置
-const defDataSourceSetting = { title: "数据源", id: "dataSource", extControlType: "select", options: [], style: { width: "100%" } };
-
-// 坐标配置
-const positionSetting = {
-    title: "坐标",
-    isGroup: true,
-    fields: [
-        { title: "X", noStyle: true, id: "x", extControlType: "float", colSpan: 1, style: { width: "100%" } },
-        { title: "Y", noStyle: true, id: "y", extControlType: "float", colSpan: 1, style: { width: "100%" } }
-    ]
-};
-
-// 尺寸配置
-const sizeSetting = {
-    title: "宽高",
-    isGroup: true,
-    fields: [
-        { title: "宽", noStyle: true, id: "width", extControlType: "float", colSpan: 1, min: 0, style: { width: "100%" } },
-        { title: "高", noStyle: true, id: "height", extControlType: "float", colSpan: 1, min: 0, style: { width: "100%" } }
-    ]
-};
-
-
-// 旋转角度配置
-const rotationSetting = { fields: [{ title: "旋转角度", id: "rotation", extControlType: "int", min: -3600, max: 3600, style: { width: "100%" } }] };
-
-// 基础图形配置(矩形、圆形等)
-const baseGraphSetting = [
-    {
-        fields: [
-            { title: "线条颜色", id: "stroke", extControlType: "color", style: { width: "100%" } },
-            { title: "线宽", id: "strokeWidth", extControlType: "int", min: 0, style: { width: "100%" } },
-            { title: "填充颜色", id: "fill", extControlType: "color", style: { width: "100%" } },
-        ]
-    },
-    sizeSetting,
-    positionSetting,
-    rotationSetting
-];
-
-// 线条配置（折线、曲线等）
-const linesSetting = [
-    { title: "线条颜色", id: "stroke", extControlType: "color", style: { width: "100%" } },
-    { title: "线宽", id: "strokeWidth", extControlType: "int", min: 0, style: { width: "100%" } },
-    { title: "开始箭头", id: "arrowStart", extControlType: "yes-no-switch", style: { width: "100%" } },
-    { title: "结束箭头", id: "arrowEnd", extControlType: "yes-no-switch", style: { width: "100%" } }
-];
-
-// 默认画布、组件配置
-const defFormConfig = {
-    pageSetting: [ // 画布
-        {
-            title: "基本信息",
-            groups: [
-                {
-                    title: "画布尺寸",
-                    isGroup: true,
-                    fields: [
-                        { title: "宽", noStyle: true, id: "pageWidth", extControlType: "int", colSpan: 1, min: 0, style: { width: "100%" } },
-                        { title: "高", noStyle: true, id: "pageHeight", extControlType: "int", colSpan: 1, min: 0, style: { width: "100%" } }
-                    ]
-                },
-                {
-                    fields: [
-                        { title: "背景色", id: "background", extControlType: "color", style: { width: "100%" } },
-                        { title: "背景图", id: "backgroundImg", extControlType: "picture", style: { width: "100%" } }
-                    ]
-                }
-            ],
-        }
-    ],
-    linkSetting: [{ title: "基本信息", fields: linesSetting }], // 连线配置
-    Rect: [{ title: "基本信息", groups: baseGraphSetting }],
-    Circle: [{ title: "基本信息", groups: baseGraphSetting }],
-    Bezier: [{ title: "基本信息", groups: [{ fields: linesSetting }, positionSetting] }],
-    Curve: [{ title: "基本信息", groups: [{ fields: linesSetting }, positionSetting] }],
-    Text: [{
-        title: "基本信息",
-        groups: [
-            {
-                fields: [
-                    { title: "默认文本", id: "text", extControlType: "textarea", style: { width: "100%" } },
-                    { title: "文本颜色", id: "textFill", extControlType: "color", style: { width: "100%" } },
-                    { title: "字体大小", id: "fontSize", extControlType: "int", min: 1, style: { width: "100%" } }
-                ]
-            },
-            positionSetting
-        ]
-    }]
-};
-
-interface Props {
-    pageSettings?: PageSettings; // 画布配置
-    onPageSettingsChange: (s: PageSettings) => void; // 更新画布配置
-    assetCurrent?: Konva.Node; // 当前选中组件 
-    assetSettings?: AssetSettings; // 当前选中组件配置
-    onAssetSettingsChange: (s: AssetSettings) => void; // 更新当前选中组件配置
-    linkCurrent?: Konva.Line; // 当前选中连线
-    linkSettings?: LinkSettings; // 当前选中连线配置
-    onLinkSettingsChange: (s: LinkSettings) => void; // 更新当前选中连线配置
-    recordCode?: string; // 当前画面关联数据code
-}
-
-const Index = (props: Props) => {
-    const { pageSettings, onPageSettingsChange, assetCurrent, assetSettings, onAssetSettingsChange, linkCurrent, linkSettings, onLinkSettingsChange, recordCode } = props;
-    const formData = assetCurrent ? assetSettings : (linkCurrent ? linkSettings : pageSettings);
-    const [form] = AntdForm.useForm();
-    const [formConfigs, setFormConfigs] = useState<{ [key: string]: any }>([]);
-    const { translate } = useLocale();
-    const isValChangeRef = useRef<boolean>(false);
-
-    // 自定义表单项
-    const customFormItem = (items: { [key: string]: any }[], layout?: "vertical" | "horizontal") => {
-        const entryControls = items.map(item => {
-            const { extControlType } = item || {};
-            if (!extControlType) {
-                return null;
-            }
-            let entryControl;
-            switch (extControlType) {
-                case "picture":
-                    entryControl = <ImageUpload recordCode={recordCode} />;
-                    break;
-                default:
-                    break;
-            }
-            if (!entryControl) {
-                return null;
-            }
-            const colSpan = item.colSpan || 2;
-            return <Col key={item.id} span={12 * colSpan} style={{ width: "stretch" }}>
-                <FormItem
-                    layout={layout}
-                    label={translate("${" + item.title + "}")}
-                    noStyle={item.noStyle || false}
-                    hidden={item.hidden}
-                    name={item.id}
-                    key={item.id}
-                    labelCol={{ span: 24 }}
-                    wrapperCol={{ span: 24 }}
-                    tooltip={!item.tip ? undefined : item.tip}
-                    style={{ margin: "4px 4px 12px" }}
-                >{entryControl}</FormItem>
-            </Col>;
-        }).filter(Boolean);
-        return <Row gutter={[16, 0]} key={1}>{entryControls}</Row>;
-    }
-
-    // 处理表单组件使用公共组件or自定义组件
-    const handleFormItemType = (fields: FieldConfig[], layout?: "vertical" | "horizontal") => {
-        const customTypes = ["picture"]; // 自定义组件类型
-        const temArr = fields?.reduce((total, item) => {
-            const isCustom = customTypes.includes(item.extControlType || "");
-            const lastItem = total[total.length - 1];
-            if (lastItem && ((lastItem.type === "custom" && isCustom) || (lastItem.type === "default" && !isCustom))) {
-                lastItem.fields.push(item);
-                total[total.length - 1] = lastItem;
-            } else {
-                total.push({ type: isCustom ? "custom" : "default", fields: [item] });
-            }
-            return total;
-        }, []) || [];
-        return temArr.map(item => item.type === "default" ? <FormItemGroup layout={layout} fields={item.fields || undefined} valueMap={undefined} /> : customFormItem(item.fields, layout));
-    }
-
-    // FormItem渲染
-    const renderFormItem = (item: { [key: string]: any }) => {
-        if (item.groups) {
-            return item.groups.map(r => {
-                if (r?.isGroup) { // 表单分组显示
-                    return <FormItem label={r.title} layout='vertical' style={{ marginBottom: "12px", paddingInline: "4px" }}>
-                        {handleFormItemType(r.fields)}
-                    </FormItem>;
-                }
-                return handleFormItemType(r.fields, "vertical");
-            });
-        }
-        return handleFormItemType(item.fields, "vertical");
-    }
-
-    // 当前表单配置
-    const currentFormConfig = useMemo(() => {
-        let temFormConfig: any = linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"];
-        if (assetCurrent) {
-            const assetType = assetCurrent.getAttr("assetType");
-            const graphType = assetCurrent.getAttr("graphType");
-            const componentType = assetCurrent.getAttr("componentType"); // 组件类型-用于匹配表单等
-            temFormConfig = defFormConfig[assetType === "Text" ? "Text" : graphType];
-            if (!temFormConfig) { // 默认表单不存在配置则获取组件中的表单配置
-                const currentItem: any = ProgramConfig.get2DComponentByType(componentType);
-                const { config, dataSource, alterDataSources } = currentItem || {};
-                temFormConfig = JSON.parse(config || "[]");
-                if (dataSource || alterDataSources) { // 数据源配置
-                    const temArr = [dataSource, ...(alterDataSources || [])].filter(Boolean).map(r => {
-                        const [key, label] = r.split("@R@");
-                        return { label, value: key };
-                    });
-                    const dataSourceSetting = { title: "数据", fields: [{ ...defDataSourceSetting, options: temArr, defValue: dataSource ? temArr[0]?.value : undefined }] };
-                    temFormConfig = [dataSourceSetting, ...temFormConfig];
-                }
-            }
-        }
-        const configArr = temFormConfig.map(r => r.groups ? r.groups.map(i => i.fields) : r.fields).flat(Infinity);
-        setFormConfigs(configArr);
-        return temFormConfig;
-    }, [assetCurrent, linkCurrent]);
-
-    // 表单渲染
-    const fieldGroupList = () => {
-        const renderId = handleFormItemType(baseSetting, "vertical");
-        const items = currentFormConfig?.map((item, index) => ({
-            key: index,
-            label: item.title,
-            children: assetCurrent && item.title === "基本信息" ? [renderId, ...renderFormItem(item)] : renderFormItem(item)
-        }));
-        return <Collapse styles={{ body: { padding: "0px 16px" } }} bordered={false} size="small" defaultActiveKey={[0, 1]} items={items} />;
-    };
-
-    // 更新数据
-    const onValuesChange = (val: { [key: string]: any }) => {
-        isValChangeRef.current = true;
-        const temVal = val;
-        Object.keys(val).forEach((key) => {  // 使用公共表单组件，转换指定类型值
-            const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
-            if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
-                temVal[key] = val[key] === "是" ? true : false;
-                return;
-            }
-            if (["float", "int"].includes(extControlType)) { // 处理数字类型转换
-                temVal[key] = Number(val[key] || 0);
-                return;
-            }
-        });
-        if (assetCurrent) { // 当前选中组件
-            onAssetSettingsChange({ ...assetSettings, ...temVal });
-            return;
-        }
-        if (linkCurrent) { // 当前选中连线
-            onLinkSettingsChange({ ...linkSettings, ...temVal });
-            return;
-        }
-        // 画布背景图片颜色-只能设置一个
-        let background = pageSettings.background;
-        let backgroundImg = pageSettings.backgroundImg;
-        if (val.background || val.backgroundImg) {
-            background = null;
-            backgroundImg = null;
-        }
-        // 默认画布配置
-        onPageSettingsChange({ ...pageSettings, background, backgroundImg, ...temVal });
-    }
-
-    // 表单数据实时回显更新
-    const formSetFieldsValue = () => {
-        const nodeId = assetCurrent?.getAttr("id");
-        // 表单回显，同类型组件默认清空值再赋值
-        const allKey = formConfigs.reduce((total, item) => ({ ...total, [item.id]: undefined }), {})
-        const temVal = _.cloneDeep({ ...allKey, ...formData });
-        Object.keys(temVal).forEach((key) => {  // 使用公共表单组件，转换指定类型值
-            const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
-            if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
-                temVal[key] = temVal[key] === true ? "是" : "否";
-                return;
-            }
-        });
-        form.setFieldsValue({ ...temVal, id: nodeId });
-    }
-
-    // 表单数据实时回显更新
-    useEffect(() => {
-        if (formConfigs?.length && formData && !isValChangeRef.current) {
-            formSetFieldsValue();
-        }
-        isValChangeRef.current = false;
-    }, [formData, formConfigs]);
-
-    return <AntdForm
-        scrollToFirstError={true}
-        labelWrap={true}
-        size="small"
-        form={form}
-        onValuesChange={onValuesChange}
-    // onFinish={onValuesChange}
-    >
-        {fieldGroupList()}
-    </AntdForm>;
-};
-
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { Form as AntdForm, Collapse, Row, Col } from "antd";
+import _ from "lodash";
+import FormItemGroup from "../../../form/form-Item-group";
+import { FieldConfig } from "../../../tmpl/interface";
+import { PageSettings, AssetSettings, LinkSettings } from '../render/types';
+import type Konva from 'konva';
+import { ProgramConfig } from "../../../index";
+import { useLocale } from "../../../locale/useLocale";
+import ImageUpload from "./imag-upload";
+
+const FormItem = AntdForm.Item;
+
+// ID配置
+const baseSetting = [{ title: "ID", id: "id", extControlType: "text", disabled: true, style: { width: "100%" } }];
+
+// 数据源配置
+const defDataSourceSetting = { title: "数据源", id: "dataSource", extControlType: "select", options: [], style: { width: "100%" } };
+
+// 坐标配置
+const positionSetting = {
+    title: "坐标",
+    isGroup: true,
+    fields: [
+        { title: "X", noStyle: true, id: "x", extControlType: "float", colSpan: 1, style: { width: "100%" } },
+        { title: "Y", noStyle: true, id: "y", extControlType: "float", colSpan: 1, style: { width: "100%" } }
+    ]
+};
+
+// 尺寸配置
+const sizeSetting = {
+    title: "宽高",
+    isGroup: true,
+    fields: [
+        { title: "宽", noStyle: true, id: "width", extControlType: "float", colSpan: 1, min: 0, style: { width: "100%" } },
+        { title: "高", noStyle: true, id: "height", extControlType: "float", colSpan: 1, min: 0, style: { width: "100%" } }
+    ]
+};
+
+
+// 旋转角度配置
+const rotationSetting = { fields: [{ title: "旋转角度", id: "rotation", extControlType: "int", min: -3600, max: 3600, style: { width: "100%" } }] };
+
+// 基础图形配置(矩形、圆形等)
+const baseGraphSetting = [
+    {
+        fields: [
+            { title: "线条颜色", id: "stroke", extControlType: "color", style: { width: "100%" } },
+            { title: "线宽", id: "strokeWidth", extControlType: "int", min: 0, style: { width: "100%" } },
+            { title: "填充颜色", id: "fill", extControlType: "color", style: { width: "100%" } },
+        ]
+    },
+    sizeSetting,
+    positionSetting,
+    rotationSetting
+];
+
+// 线条配置（折线、曲线等）
+const linesSetting = [
+    { title: "线条颜色", id: "stroke", extControlType: "color", style: { width: "100%" } },
+    { title: "线宽", id: "strokeWidth", extControlType: "int", min: 0, style: { width: "100%" } },
+    { title: "开始箭头", id: "arrowStart", extControlType: "yes-no-switch", style: { width: "100%" } },
+    { title: "结束箭头", id: "arrowEnd", extControlType: "yes-no-switch", style: { width: "100%" } }
+];
+
+// 默认画布、组件配置
+const defFormConfig = {
+    pageSetting: [ // 画布
+        {
+            title: "基本信息",
+            groups: [
+                {
+                    title: "画布尺寸",
+                    isGroup: true,
+                    fields: [
+                        { title: "宽", noStyle: true, id: "pageWidth", extControlType: "int", colSpan: 1, min: 0, style: { width: "100%" } },
+                        { title: "高", noStyle: true, id: "pageHeight", extControlType: "int", colSpan: 1, min: 0, style: { width: "100%" } }
+                    ]
+                },
+                {
+                    fields: [
+                        { title: "背景色", id: "background", extControlType: "color", style: { width: "100%" } },
+                        { title: "背景图", id: "backgroundImg", extControlType: "picture", style: { width: "100%" } }
+                    ]
+                }
+            ],
+        }
+    ],
+    linkSetting: [{ title: "基本信息", fields: linesSetting }], // 连线配置
+    Rect: [{ title: "基本信息", groups: baseGraphSetting }],
+    Circle: [{ title: "基本信息", groups: baseGraphSetting }],
+    Bezier: [{ title: "基本信息", groups: [{ fields: linesSetting }, positionSetting] }],
+    Curve: [{ title: "基本信息", groups: [{ fields: linesSetting }, positionSetting] }],
+    Text: [{
+        title: "基本信息",
+        groups: [
+            {
+                fields: [
+                    { title: "默认文本", id: "text", extControlType: "textarea", style: { width: "100%" } },
+                    { title: "文本颜色", id: "textFill", extControlType: "color", style: { width: "100%" } },
+                    { title: "字体大小", id: "fontSize", extControlType: "int", min: 1, style: { width: "100%" } }
+                ]
+            },
+            positionSetting
+        ]
+    }]
+};
+
+interface Props {
+    pageSettings?: PageSettings; // 画布配置
+    onPageSettingsChange: (s: PageSettings) => void; // 更新画布配置
+    assetCurrent?: Konva.Node; // 当前选中组件 
+    assetSettings?: AssetSettings; // 当前选中组件配置
+    onAssetSettingsChange: (s: AssetSettings) => void; // 更新当前选中组件配置
+    linkCurrent?: Konva.Line; // 当前选中连线
+    linkSettings?: LinkSettings; // 当前选中连线配置
+    onLinkSettingsChange: (s: LinkSettings) => void; // 更新当前选中连线配置
+    recordCode?: string; // 当前画面关联数据code
+}
+
+const Index = (props: Props) => {
+    const { pageSettings, onPageSettingsChange, assetCurrent, assetSettings, onAssetSettingsChange, linkCurrent, linkSettings, onLinkSettingsChange, recordCode } = props;
+    const formData = assetCurrent ? assetSettings : (linkCurrent ? linkSettings : pageSettings);
+    const [form] = AntdForm.useForm();
+    const [formConfigs, setFormConfigs] = useState<{ [key: string]: any }>([]);
+    const { translate } = useLocale();
+    const isValChangeRef = useRef<boolean>(false);
+
+    // 自定义表单项
+    const customFormItem = (items: { [key: string]: any }[], layout?: "vertical" | "horizontal") => {
+        const entryControls = items.map(item => {
+            const { extControlType } = item || {};
+            if (!extControlType) {
+                return null;
+            }
+            let entryControl;
+            switch (extControlType) {
+                case "picture":
+                    entryControl = <ImageUpload recordCode={recordCode} />;
+                    break;
+                default:
+                    break;
+            }
+            if (!entryControl) {
+                return null;
+            }
+            const colSpan = item.colSpan || 2;
+            return <Col key={item.id} span={12 * colSpan} style={{ width: "stretch" }}>
+                <FormItem
+                    layout={layout}
+                    label={translate("${" + item.title + "}")}
+                    noStyle={item.noStyle || false}
+                    hidden={item.hidden}
+                    name={item.id}
+                    key={item.id}
+                    labelCol={{ span: 24 }}
+                    wrapperCol={{ span: 24 }}
+                    tooltip={!item.tip ? undefined : item.tip}
+                    style={{ margin: "4px 4px 12px" }}
+                >{entryControl}</FormItem>
+            </Col>;
+        }).filter(Boolean);
+        return <Row gutter={[16, 0]} key={1}>{entryControls}</Row>;
+    }
+
+    // 处理表单组件使用公共组件or自定义组件
+    const handleFormItemType = (fields: FieldConfig[], layout?: "vertical" | "horizontal") => {
+        const customTypes = ["picture"]; // 自定义组件类型
+        const temArr = fields?.reduce((total, item) => {
+            const isCustom = customTypes.includes(item.extControlType || "");
+            const lastItem = total[total.length - 1];
+            if (lastItem && ((lastItem.type === "custom" && isCustom) || (lastItem.type === "default" && !isCustom))) {
+                lastItem.fields.push(item);
+                total[total.length - 1] = lastItem;
+            } else {
+                total.push({ type: isCustom ? "custom" : "default", fields: [item] });
+            }
+            return total;
+        }, []) || [];
+        return temArr.map(item => item.type === "default" ? <FormItemGroup layout={layout} fields={item.fields || undefined} valueMap={undefined} /> : customFormItem(item.fields, layout));
+    }
+
+    // FormItem渲染
+    const renderFormItem = (item: { [key: string]: any }) => {
+        if (item.groups) {
+            return item.groups.map(r => {
+                if (r?.isGroup) { // 表单分组显示
+                    return <FormItem label={r.title} layout='vertical' style={{ marginBottom: "12px", paddingInline: "4px" }}>
+                        {handleFormItemType(r.fields)}
+                    </FormItem>;
+                }
+                return handleFormItemType(r.fields, "vertical");
+            });
+        }
+        return handleFormItemType(item.fields, "vertical");
+    }
+
+    // 当前表单配置
+    const currentFormConfig = useMemo(() => {
+        let temFormConfig: any = linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"];
+        if (assetCurrent) {
+            const assetType = assetCurrent.getAttr("assetType");
+            const graphType = assetCurrent.getAttr("graphType");
+            const componentType = assetCurrent.getAttr("componentType"); // 组件类型-用于匹配表单等
+            temFormConfig = defFormConfig[assetType === "Text" ? "Text" : graphType];
+            if (!temFormConfig) { // 默认表单不存在配置则获取组件中的表单配置
+                const currentItem: any = ProgramConfig.get2DComponentByType(componentType);
+                const { config, dataSource, alterDataSources } = currentItem || {};
+                temFormConfig = JSON.parse(config || "[]");
+                if (dataSource || alterDataSources) { // 数据源配置
+                    const temArr = [dataSource, ...(alterDataSources || [])].filter(Boolean).map(r => {
+                        const [key, label] = r.split("@R@");
+                        return { label, value: key };
+                    });
+                    const dataSourceSetting = { title: "数据", fields: [{ ...defDataSourceSetting, options: temArr, defValue: dataSource ? temArr[0]?.value : undefined }] };
+                    temFormConfig = [dataSourceSetting, ...temFormConfig];
+                }
+            }
+        }
+        const configArr = temFormConfig.map(r => r.groups ? r.groups.map(i => i.fields) : r.fields).flat(Infinity);
+        setFormConfigs(configArr);
+        return temFormConfig;
+    }, [assetCurrent, linkCurrent]);
+
+    // 表单渲染
+    const fieldGroupList = () => {
+        const renderId = handleFormItemType(baseSetting, "vertical");
+        const items = currentFormConfig?.map((item, index) => ({
+            key: index,
+            label: item.title,
+            children: assetCurrent && item.title === "基本信息" ? [renderId, ...renderFormItem(item)] : renderFormItem(item)
+        }));
+        return <Collapse styles={{ body: { padding: "0px 16px" } }} bordered={false} size="small" defaultActiveKey={[0, 1]} items={items} />;
+    };
+
+    // 更新数据
+    const onValuesChange = (val: { [key: string]: any }) => {
+        isValChangeRef.current = true;
+        const temVal = val;
+        Object.keys(val).forEach((key) => {  // 使用公共表单组件，转换指定类型值
+            const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
+            if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
+                temVal[key] = val[key] === "是" ? true : false;
+                return;
+            }
+            if (["float", "int"].includes(extControlType)) { // 处理数字类型转换
+                temVal[key] = Number(val[key] || 0);
+                return;
+            }
+        });
+        if (assetCurrent) { // 当前选中组件
+            onAssetSettingsChange({ ...assetSettings, ...temVal });
+            return;
+        }
+        if (linkCurrent) { // 当前选中连线
+            onLinkSettingsChange({ ...linkSettings, ...temVal });
+            return;
+        }
+        // 画布背景图片颜色-只能设置一个
+        let background = pageSettings.background;
+        let backgroundImg = pageSettings.backgroundImg;
+        if (val.background || val.backgroundImg) {
+            background = null;
+            backgroundImg = null;
+        }
+        // 默认画布配置
+        onPageSettingsChange({ ...pageSettings, background, backgroundImg, ...temVal });
+    }
+
+    // 表单数据实时回显更新
+    const formSetFieldsValue = () => {
+        const nodeId = assetCurrent?.getAttr("id");
+        // 表单回显，同类型组件默认清空值再赋值
+        const allKey = formConfigs.reduce((total, item) => ({ ...total, [item.id]: undefined }), {})
+        const temVal = _.cloneDeep({ ...allKey, ...formData });
+        Object.keys(temVal).forEach((key) => {  // 使用公共表单组件，转换指定类型值
+            const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
+            if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
+                temVal[key] = temVal[key] === true ? "是" : "否";
+                return;
+            }
+        });
+        form.setFieldsValue({ ...temVal, id: nodeId });
+    }
+
+    // 表单数据实时回显更新
+    useEffect(() => {
+        if (formConfigs?.length && formData && !isValChangeRef.current) {
+            formSetFieldsValue();
+        }
+        isValChangeRef.current = false;
+    }, [formData, formConfigs]);
+
+    return <AntdForm
+        scrollToFirstError={true}
+        labelWrap={true}
+        size="small"
+        form={form}
+        onValuesChange={onValuesChange}
+    // onFinish={onValuesChange}
+    >
+        {fieldGroupList()}
+    </AntdForm>;
+};
+
 export default Index;

package/src/aldehyde/draw-canvas-edit/constant.ts

@@ -1,6 +1,6 @@
-export const fileUpload = {
-    name: '文件模型上传',
-    sourceId: '505356896556589056',
-    serverKey: "localDevopsServer",
-    type: 'dtmpl',
+export const fileUpload = {
+    name: '文件模型上传',
+    sourceId: '505356896556589056',
+    serverKey: "localDevopsServer",
+    type: 'dtmpl',
 };