aldehyde 0.2.474 → 0.2.476

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/render/handlers/selection-handlers.ts

@@ -82,6 +82,30 @@ export class SelectionHandlers implements Handler {
    * @param angle 旋转角度
    * @returns
    */
+
+  // 拖动时更新位置
+  private updateManualPointsByDrag(rect: { x: number; y: number }, transformerPos?: Konva.Vector2d, isAttract = false) {
+    const groups = this.render.transformer.nodes();
+    const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
+    const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
+    for (const pair of pairs) {
+      const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
+      const toGroup = groups.find((o) => o.id() === pair.to.groupId);
+      if (fromGroup && toGroup) {
+        if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
+          let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
+          const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
+          if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
+            const offsetX = this.render.toStageValue((isAttract ? transformerPos.x : rect.x) - this.transformerMousedownPos.x);
+            const offsetY = this.render.toStageValue((isAttract ? transformerPos.y : rect.y) - this.transformerMousedownPos.y);
+            manualPoints = manualPointsBefore.map((o: ManualPoint) => ({ x: o.x + offsetX, y: o.y + offsetY }));
+            fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
+          }
+        }
+      }
+    }
+  }
+
   rotatePoint(x: number, y: number, centerX: number, centerY: number, angle: number) {
     const radians = (angle * Math.PI) / 180; // 将角度转换为弧度
     // 计算旋转后的坐标
@@ -274,38 +298,22 @@ export class SelectionHandlers implements Handler {
       },
       dragmove: () => { // 拖动
         const rect = this.render.transformer.findOne('.back')!.getClientRect();
-        const { pos: transformerPos, isAttract } = this.render.attractTool.attractTransformer(rect);
-        if (isAttract) {  // 磁吸偏移
-          this.selectingNodesPositionByOffset({
-            x: this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
-            y: this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
-          });
-        }
-        const groups = this.render.transformer.nodes();  // 拐点也需要移动
-        const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
-        const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
-        for (const pair of pairs) {
-          const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
-          const toGroup = groups.find((o) => o.id() === pair.to.groupId);
-          if (fromGroup && toGroup) {  // 必须成对移动才记录
-            if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
-              let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
-              const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
-              if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
-                manualPoints = isAttract
-                  ? manualPointsBefore.map((o: ManualPoint) => ({
-                    x: o.x + this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
-                    y: o.y + this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
-                  }))
-                  : manualPointsBefore.map((o: ManualPoint) => ({
-                    x: o.x + this.render.toStageValue(rect.x - this.transformerMousedownPos.x),
-                    y: o.y + this.render.toStageValue(rect.y - this.transformerMousedownPos.y)
-                  }));
-                fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
-              }
-            }
+        // 磁吸控制：关闭时跳过磁吸逻辑，让 transformer 自由拖动
+        if (this.render.showAttract) {
+          const { pos: transformerPos, isAttract } = this.render.attractTool.attractTransformer(rect);
+          if (isAttract) {  // 磁吸偏移
+            this.selectingNodesPositionByOffset({
+              x: this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
+              y: this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
+            });
           }
+          // 拐点磁吸偏移
+          this.updateManualPointsByDrag(rect, transformerPos, isAttract);
+        } else {
+          // 拐点跟随拖动偏移
+          this.updateManualPointsByDrag(rect, undefined, false);
         }
+        const groups = this.render.transformer.nodes();
         for (const group of groups) { // 更新坐标记录
           this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
         }

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/render/index.ts

@@ -73,6 +73,8 @@ export class Render {
   historyIndex = -1;
   graphType: GraphType | undefined = undefined;  // 画图类型
   texting = false; // 添加文字中
+  showGrid = true; // 显示网格
+  showAttract = true; // 显示磁吸
 
   // 事件发射器（替代 mitt）
   private emitter = new SimpleEventEmitter();
@@ -100,11 +102,9 @@ export class Render {
     this.groupTransformer.add(this.transformer);
     this.groupTransformer.add(this.selectRect);
     this.layerCover.add(this.groupTransformer);
-    // 附加工具
-    if (!this.config.readonly && this.config.showBg) {
-      this.draws[BgDraw.name] = new BgDraw(this, this.layerFloor, {
-        size: this.bgSize
-      });
+
+    if (this.config.showBg) { // 背景
+      this.draws[BgDraw.name] = new BgDraw(this, this.layerFloor, { size: this.bgSize, showGrid: this.showGrid, readonly: this.config.readonly });
     }
 
     this.draws[LinkDraw.name] = new LinkDraw(this, this.layerCover, {
@@ -465,6 +465,17 @@ export class Render {
     document.body.style.cursor = this.texting ? 'text' : 'default';
   }
 
+  // 更改网格显示
+  changeShowGrid(show: boolean) {
+    this.showGrid = show;
+    (this.draws[BgDraw.name] as BgDraw)?.updateOption({ showGrid: show });
+  }
+
+  // 更改磁吸显示
+  changeShowAttract(show: boolean) {
+    this.showAttract = show;
+  }
+
   // 页面设置 默认值
   static PageSettingsDefault: PageSettings = {
     // 画布默认尺寸
@@ -489,6 +500,7 @@ export class Render {
   // 更新页面设置
   setPageSettings(settings: PageSettings, update = false) {
     this.stage.setAttr('pageSettings', settings);
+    this.emit('page-settings-change', settings);
     // 更新背景
     this.updateBackground();
     if (update) {
@@ -504,10 +516,6 @@ export class Render {
 
   // 更新背景
   updateBackground() {
-    const background = this.getBackground();
-    if (background) {
-      background.fill(this.getPageSettings().background ?? 'transparent');
-    }
     this.draws[BgDraw.name]?.draw();
     this.draws[GraphDraw.name]?.draw();
     this.draws[LinkDraw.name]?.draw();
@@ -697,6 +705,30 @@ export class Render {
     this.draws[PreviewDraw.name]?.draw();
   }
 
+  // 获取画布上所有素材节点及其配置
+  getAllAssets(): Array<{ id: string; assetType: AssetType; settings: AssetSettings }> {
+    const nodes = this.layer.getChildren((node) => !this.ignore(node));
+    return nodes.map((node) => ({
+      id: node.id(),
+      assetType: node.attrs.assetType as AssetType,
+      settings: this.getAssetSettings(node)
+    }));
+  }
+
+  // 根据节点 id 动态更新组件属性
+  updateAssetById(id: string, settings: Partial<AssetSettings>) {
+    const node = this.layer.findOne(`#${id}`);
+    if (!node) {
+      console.warn(`[Render.updateAssetById] 未找到节点 id=${id}`);
+      return;
+    }
+    // 合并现有设置与新设置
+    const currentSettings = this.getAssetSettings(node);
+    const mergedSettings: AssetSettings = { ...currentSettings, ...settings };
+    // 调用现有方法应用
+    this.setAssetSettings(node, mergedSettings, false);
+  }
+
   // 连接线设置 默认值
   static LinkSettingsDefault: LinkSettings = {
     stroke: '',

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/render/tools/position-tool.ts

@@ -13,6 +13,7 @@ export class PositionTool {
 
   // 自适应大小
   positionFit() {
+    const { pageWidth, pageHeight } = this.render.getPageSettings();
     const children = [
       ...this.render.layer.getChildren(),
       ...this.render.layerCover.find('.link-line')
@@ -21,9 +22,7 @@ export class PositionTool {
     let minX = Infinity,
       maxX = -Infinity,
       minY = Infinity,
-      maxY = -Infinity,
-      minStartX = Infinity,
-      minStartY = Infinity;
+      maxY = -Infinity;
 
     const stageState = this.render.getStageState();
     for (const node of children) {
@@ -34,64 +33,40 @@ export class PositionTool {
           width: this.render.toStageValue(rect.width),
           height: this.render.toStageValue(rect.height)
         }))(node.getClientRect());
-        if (x < minX) {
-          minX = x;
-        }
-        if (x + width > maxX) {
-          maxX = x + width;
-        }
-        if (y < minY) {
-          minY = y;
-        }
-        if (y + height > maxY) {
-          maxY = y + height;
-        }
-
-        if (x < minStartX) {
-          minStartX = x;
-        }
-        if (y < minStartY) {
-          minStartY = y;
-        }
+        if (x < minX) minX = x;
+        if (x + width > maxX) maxX = x + width;
+        if (y < minY) minY = y;
+        if (y + height > maxY) maxY = y + height;
       } else if (node instanceof Konva.Line && node.name() === 'link-line') {
         // 连线占用空间
         const points = node.points();
         for (let i = 0; i < points.length; i += 2) {
-          const [x, y] = [points[i], points[i + 1]];
-          if (x < minX) {
-            minX = x - 1;
-          }
-          if (x > maxX) {
-            maxX = x + 1;
-          }
-          if (y < minY) {
-            minY = y - 1;
-          }
-          if (y > maxY) {
-            maxY = y + 1;
-          }
-          if (x < minStartX) {
-            minStartX = x - 1;
-          }
-          if (y < minStartY) {
-            minStartY = y - 1;
-          }
+          const [px, py] = [points[i], points[i + 1]];
+          if (px < minX) minX = px - 1;
+          if (px > maxX) maxX = px + 1;
+          if (py < minY) minY = py - 1;
+          if (py > maxY) maxY = py + 1;
         }
       }
     }
 
-    minX === Infinity && (minX = (this.render.stage.width() - this.render.rulerSize) / 2);
-    maxX === -Infinity && (maxX = minX);
-    minY === Infinity && (minY = (this.render.stage.height() - this.render.rulerSize) / 2);
-    maxY === -Infinity && (maxY = minY);
-    minStartX === Infinity && minX;
-    minStartY === Infinity && minY;
+    // 把画布区域也纳入计算范围（画布从 (0,0) 到 (pageWidth, pageHeight)）
+    if (0 < minX) minX = 0;
+    if (pageWidth > maxX) maxX = pageWidth;
+    if (0 < minY) minY = 0;
+    if (pageHeight > maxY) maxY = pageHeight;
+
+    // 没有素材时，以画布自身为准
+    if (minX === Infinity) minX = 0;
+    if (maxX === -Infinity) maxX = pageWidth;
+    if (minY === Infinity) minY = 0;
+    if (maxY === -Infinity) maxY = pageHeight;
 
-    const assetSize = {
+    const contentSize = {
       width: maxX - minX,
       height: maxY - minY
     };
-    const assetRate = assetSize.width / assetSize.height;
+    const contentRate = contentSize.width / contentSize.height;
 
     const viewSize = {
       width: this.render.stage.width() - (this.render.config.readonly ? 0 : this.render.rulerSize),
@@ -100,29 +75,36 @@ export class PositionTool {
     const viewRate = viewSize.width / viewSize.height;
     let scale = 1;
 
-    if (viewRate > assetRate) {
-      scale = viewSize.height / assetSize.height;
-    } else if (viewRate < assetRate) {
-      scale = viewSize.width / assetSize.width;
+    // 设置padding，避免边缘紧贴
+    const padding = 20;
+    const effectiveWidth = viewSize.width - padding * 2;
+    const effectiveHeight = viewSize.height - padding * 2;
+
+    if (viewRate > contentRate) {  // 视口比内容更"扁"，以高度为基准
+      scale = effectiveHeight / contentSize.height;
+    } else {  // 视口比内容更"长"，以宽度为基准
+      scale = effectiveWidth / contentSize.width;
     }
 
     scale = Math.max(0.2, scale);
     scale = Math.floor(scale * 100) / 100;
 
-    if (assetSize.width <= viewSize.width && assetSize.height <= viewSize.height) {
-      scale = 1;
-    }
+    // 设置缩放比例最大为1（暂时隐藏）
+    // if (contentSize.width * scale <= viewSize.width && contentSize.height * scale <= viewSize.height) {
+    //   scale = Math.min(1, scale);
+    // }
+
     this.render.stage.setAttrs({
       scale: { x: scale, y: scale },
       position: {
         x:
           (this.render.config.readonly ? 0 : this.render.rulerSize) -
           minX * scale +
-          (viewSize.width - assetSize.width * scale) / 2,
+          (viewSize.width - contentSize.width * scale) / 2,
         y:
           (this.render.config.readonly ? 0 : this.render.rulerSize) -
           minY * scale +
-          (viewSize.height - assetSize.height * scale) / 2
+          (viewSize.height - contentSize.height * scale) / 2
       }
     });
 

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/render/types.ts

@@ -247,7 +247,11 @@ export interface PageSettings {
   pageWidth: number;
   pageHeight: number;
   // 样式设置
-  background: string;
+  background?: string;
+  backgroundImg?: { // 背景图
+    src: string;
+    code: string;
+  };
   stroke: string;
   strokeWidth: number;
   fill: string;

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

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import { Upload as AntdUpLoad, UploadFile, message } from "antd";
+import { RcFile } from "antd/es/upload";
+import { PlusOutlined } from "@ant-design/icons";
+import { HydrocarbonService, Superagent, ProgramConfig } from "../../../index";
+import { fileUpload } from "../../constant";
+import { useLocale } from "../../../locale/useLocale";
+
+const { sourceId, serverKey } = fileUpload;
+
+// 本地文件上传，处理url
+const handleImgUrl = (basePath: string) => {
+    if (basePath.startsWith("http")) {
+        return basePath;
+    }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        basePath
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode(serverKey)}`;
+    return url;
+}
+
+const fileInfo = {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+};
+
+export interface CommonFilePath {
+    fileName?: string;
+    contentType?: string;//文件类型
+    path?: string;
+    iconPath?: string;
+    valid?: string;
+    baseType?: string;
+    basePath?: string;
+};
+
+
+export interface UploadProps {
+    accept?: string;
+    size?: number;
+    onChange?: (data: { src: string, code: string }) => void;
+    value?: { src: string, code: string };
+    recordCode?: string; // 当前画面关联数据code,用于图片命名区分
+}
+
+const ImageUpload: React.FC<UploadProps> = (props) => {
+    const { onChange, accept, size, recordCode, value } = props;
+    const [fileList, setFileList] = useState([]);
+    const [imgCode, setImgCode] = useState<string>(); // 本地图片code
+    const { translate } = useLocale();
+
+    useEffect(() => {
+        setFileList(value?.src ? [{ ...fileInfo, url: handleImgUrl(value?.src) }] : []);
+        setImgCode(value?.code);
+    }, [value]);
+
+    const beforeUpload = async (file: RcFile) => {
+        if (size && file.size > size * 1024 * 1024) {
+            message.warning(translate("${文件大小不能超过}") + `${size}M`);
+            return false;
+        }
+        return true;
+    }
+
+    const handleChange = async (info) => {
+        if (info.file.status == "done") {
+            const fileKey = info.file.response.fileKey;
+            const fileName = info.file.name;
+            const data = { valid: "new", fileKey, fileName };
+            const result = { 描述: `${recordCode || ""}-${fileName}`, 文件: JSON.stringify(data) };
+            const { code } = await HydrocarbonService.postMstrucDtmplData(serverKey, sourceId, result, message);
+            setImgCode(code);
+            const imgData = await HydrocarbonService.requestMstrucDtmplData(serverKey, sourceId, code, null);
+            const basePath = JSON.parse(imgData.fieldMap["文件"] || "{}").base?.path;
+            if (basePath) {
+                const url = handleImgUrl(basePath);
+                setFileList([{ ...info.file, url }]);
+                // onChange?.(url);
+                onChange?.({ src: url, code });
+            } else {
+                setFileList([...info.fileList]);
+            }
+        } else {
+            setFileList([...info.fileList]);
+        }
+    };
+
+    const handleDelete = async () => {
+        await HydrocarbonService.deleteByCode(serverKey, sourceId, [imgCode]);
+        setFileList([]);
+        onChange?.(null);
+    };
+
+    return (
+        <AntdUpLoad
+            action={(file) => HydrocarbonService.postFileAction(serverKey, file)}
+            headers={Superagent.getHeaderObj(serverKey)}
+            name={'file'}
+            beforeUpload={beforeUpload}
+            listType={'picture-card'}
+            fileList={fileList?.length ? fileList as Array<UploadFile> : undefined}
+            accept={accept}
+            onChange={handleChange}
+            onRemove={handleDelete}
+            onPreview={() => window.open(fileList[0].url)}
+        >
+            {fileList.length > 0 ? null : <div className={'upload-btn'}>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>{translate("${上传图片}")}</div>
+            </div>}
+        </AntdUpLoad>
+    )
+};
+
+export default ImageUpload;

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

@@ -1,12 +1,22 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Form as AntdForm, Collapse } from "antd";
+import { Form as AntdForm, Collapse, Row, Col } from "antd";
 import _ from "lodash";
-import FormItemGroup from "../../../../form/form-Item-group";
+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: "坐标",
@@ -74,9 +84,9 @@ const defFormConfig = {
         groups: [
             {
                 fields: [
-                    { title: "文本", id: "text", extControlType: "textarea", style: { width: "100%" } },
+                    { 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%" } },
+                    { title: "字体大小", id: "fontSize", extControlType: "int", min: 1, style: { width: "100%" } }
                 ]
             },
             positionSetting
@@ -93,50 +103,121 @@ interface Props {
     linkCurrent?: Konva.Line; // 当前选中连线
     linkSettings?: LinkSettings; // 当前选中连线配置
     onLinkSettingsChange: (s: LinkSettings) => void; // 更新当前选中连线配置
-    formConfig?: { [key: string]: any }; // 表单配置
+    recordCode?: string; // 当前画面关联数据code
 }
 
 const Index = (props: Props) => {
-    const { pageSettings, onPageSettingsChange, assetCurrent, assetSettings, onAssetSettingsChange, linkCurrent, linkSettings, onLinkSettingsChange, formConfig } = 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 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={{ margin: "12px 0", paddingInline: "8px" }}>
-                        <FormItemGroup fields={r.fields || undefined} valueMap={undefined} />
+                    return <FormItem label={r.title} layout='vertical' style={{ marginBottom: "12px", paddingInline: "4px" }}>
+                        {handleFormItemType(r.fields)}
                     </FormItem>;
                 }
-                return <FormItemGroup layout='vertical' fields={r.fields || undefined} valueMap={undefined} />;
+                return handleFormItemType(r.fields, "vertical");
             });
         }
-        return <FormItemGroup layout='vertical' fields={item.fields || undefined} valueMap={undefined} />;
+        return handleFormItemType(item.fields, "vertical");
     }
 
     // 当前表单配置
     const currentFormConfig = useMemo(() => {
-        let temFormConfig = formConfig || (linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"]);
+        let temFormConfig: any = linkCurrent ? defFormConfig["linkSetting"] : defFormConfig["pageSetting"];
         if (assetCurrent) {
             const assetType = assetCurrent.getAttr("assetType");
             const graphType = assetCurrent.getAttr("graphType");
-            temFormConfig = defFormConfig[assetType === "Text" ? "Text" : graphType] || temFormConfig;
+            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;
-    }, [formConfig, linkCurrent, assetCurrent]);
+    }, [assetCurrent, linkCurrent]);
 
+    // 表单渲染
     const fieldGroupList = () => {
+        const renderId = handleFormItemType(baseSetting, "vertical");
         const items = currentFormConfig?.map((item, index) => ({
             key: index,
             label: item.title,
-            children: renderFormItem(item)
+            children: assetCurrent && item.title === "基本信息" ? [renderId, ...renderFormItem(item)] : renderFormItem(item)
         }));
-        return <Collapse bordered={false} size="small" defaultActiveKey={0} items={items} />;
+        return <Collapse styles={{ body: { padding: "0px 16px" } }} bordered={false} size="small" defaultActiveKey={[0, 1]} items={items} />;
     };
 
     // 更新数据
@@ -161,12 +242,21 @@ const Index = (props: Props) => {
             onLinkSettingsChange({ ...linkSettings, ...temVal });
             return;
         }
+        // 画布背景图片颜色-只能设置一个
+        let background = pageSettings.background;
+        let backgroundImg = pageSettings.backgroundImg;
+        if (val.background || val.backgroundImg) {
+            background = null;
+            backgroundImg = null;
+        }
+        form.setFieldsValue({ background, backgroundImg, ...temVal });
         // 默认画布配置
-        onPageSettingsChange({ ...pageSettings, ...temVal });
+        onPageSettingsChange({ ...pageSettings, background, backgroundImg, ...temVal });
     }
 
     // 表单数据实时回显更新
     const formSetFieldsValue = () => {
+        const nodeId = assetCurrent?.getAttr("id");
         const temVal = _.cloneDeep(formData);
         Object.keys(temVal).forEach((key) => {  // 使用公共表单组件，转换指定类型值
             const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
@@ -175,7 +265,11 @@ const Index = (props: Props) => {
                 return;
             }
         });
-        form.setFieldsValue(temVal);
+        const dataSourceConfig = formConfigs.find((item: any) => item.id === "dataSource");
+        if (dataSourceConfig) { // 数据源-无配置设置默认值
+            temVal["dataSource"] = temVal["dataSource"] || dataSourceConfig.defValue;
+        }
+        form.setFieldsValue({ ...temVal, id: nodeId });
     }
 
     // 表单数据实时回显更新