aldehyde 0.2.473 → 0.2.475

package/src/aldehyde/draw-canvas/view/index.less

@@ -0,0 +1,60 @@
+.view-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.draw-viewer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+
+    *:focus-visible {
+        outline: none;
+    }
+
+    // 工具栏
+    .draw-viewer-toolbar {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 9;
+        display: none;
+
+        .fit {
+            font-size: 20px;
+            cursor: pointer;
+        }
+    }
+
+    // 画布区域
+    .draw-viewer-content {
+        width: 100%;
+        flex-grow: 1;
+        background-color: var(--ant-layout-body-bg);
+        position: relative;
+        overflow: hidden;
+
+        // Konva canvas 容器
+        >div {
+            width: 100% !important;
+            height: 100% !important;
+
+            canvas {
+                display: block;
+            }
+        }
+    }
+}
+
+.draw-viewer:hover {
+    .draw-viewer-toolbar {
+        display: block;
+    }
+}

package/src/aldehyde/draw-canvas/view/index.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { gunzipSync, strFromU8 } from 'fflate';
+import { Spin } from "antd";
+import { hexToUint8Array } from 'uint8array-extras';
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import Viewer from './view';
+import './index.less';
+
+interface Props {
+    recordCode: string
+}
+
+const Index = (props: Props) => {
+    const { recordCode } = props;
+    const [jsonData, setJsonData] = useState("{}"); // 画面数据
+    const [loading, setLoading] = useState(false); // 加载状态
+
+    // 获取视图数据
+    const getViewData = async () => {
+        setLoading(true);
+        const data = await HcserviceV3.getDiagram2DConfig(recordCode);
+        const content = data?.[0]?.content;
+        if (!content) {
+            return;
+        }
+        const temByteArray = hexToUint8Array(content.replace(/^0x/i, ""));
+        // 1. 将压缩的 ByteArray 解压回原始的 Uint8Array
+        const decompressedBuffer = gunzipSync(temByteArray);
+        // 2. 将 Uint8Array 转换回普通字符串
+        const originalData = strFromU8(decompressedBuffer);
+        setLoading(false);
+        setJsonData(originalData);
+    }
+
+    useEffect(() => {
+        if (recordCode) {
+            getViewData();
+        }
+    }, [recordCode])
+
+    if (loading) {
+        return <div className="view-loading"><Spin /></div>;
+    }
+
+    return <Viewer data={jsonData} />;
+};
+
+export default Index;

package/src/aldehyde/draw-canvas/view/view.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Space, Button } from "antd";
+import { ExpandOutlined } from '@ant-design/icons';
+import { Render } from '../edit/components/render';
+import './index.less';
+
+interface ViewerProps {
+  data?: string; // 画布 JSON 数据 
+  width?: number | string;
+  height?: number | string;
+}
+
+const Index: React.FC<ViewerProps> = (props) => {
+  const { data, width = '100%', height = '100%' } = props;
+  const boardRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const renderRef = useRef<Render | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  // 初始化渲染器（只读模式）
+  const initRender = useCallback(
+    (width: number, height: number) => {
+      if (renderRef.current || !stageRef.current) return;
+      const render = new Render(stageRef.current, {
+        width,
+        height,
+        showRuler: false, // 不需要标尺
+        showRefLine: false, // 不需要参考线
+        showPreview: false, // 不需要预览框
+        showContextmenu: false, // 不需要右键菜单
+        showBg: true,
+        readonly: true // ★ 只读模式
+      });
+      renderRef.current = render;
+      // 如果有数据，恢复画布
+      if (data) {
+        loadData(render, data);
+      }
+    },
+    [data]
+  );
+
+  // 加载画布数据
+  const loadData = useCallback(async (render: Render, jsonData: string) => {
+    try {
+      await render.importExportTool.restore(jsonData);
+      // 数据加载完成后自适应居中
+      render.positionTool.positionFit();
+    } catch (e) {
+      console.error('Failed to load canvas data:', e);
+    }
+  }, []);
+
+  // 监听容器尺寸变化
+  useEffect(() => {
+    if (!boardRef.current) return;
+    const observer = new ResizeObserver(() => {
+      const { width, height } = boardRef.current!.getBoundingClientRect();
+      if (renderRef.current) {
+        renderRef.current.resize(width, height); // 更新尺寸
+        renderRef.current.positionTool.positionFit(); // 自适应居中
+      } else {
+        initRender(width, height);
+      }
+    });
+    observer.observe(boardRef.current);
+    observerRef.current = observer;
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // 当外部 data 更新时，重新加载
+  useEffect(() => {
+    if (renderRef.current && data) {
+      loadData(renderRef.current, data);
+    }
+  }, [data, loadData]);
+
+  const handleFit = useCallback(() => {
+    if (!renderRef.current) return;
+    renderRef.current.positionTool.positionFit();
+  }, []);
+
+  // 清理
+  useEffect(() => {
+    return () => {
+      if (renderRef.current) {
+        renderRef.current.stage.destroy();
+        renderRef.current = null;
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="draw-viewer" style={{ width, height }}>
+      <div className="draw-viewer-toolbar">
+        <Space>
+          <Button type="text" className='fit' onClick={handleFit} icon={<ExpandOutlined />} />
+        </Space>
+      </div>
+      {/* 画布区域 */}
+      <div className="draw-viewer-content" ref={boardRef}>
+        <div ref={stageRef} />
+      </div>
+    </div>
+  );
+};
+
+export default Index;

package/src/aldehyde/form/form-Item-group.tsx

@@ -141,6 +141,7 @@ export default class FormItemGroup extends React.PureComponent<
     return (
       <FormItem
         label={translate("${" + item.title + "}")}
+        noStyle={item.noStyle || false}
         hidden={item.hidden}
         name={fieldConfig.controlType == "field-history" ? undefined : item[nameAttr]}
         key={item.id}
@@ -148,7 +149,7 @@ export default class FormItemGroup extends React.PureComponent<
         wrapperCol={{ span: wrapperColSpan }}
         tooltip={(!item.tip || item.tip == "") ? undefined : item.tip}
         initialValue={fieldValue}
-        style={{ margin: 4 }}
+        style={{ margin: "4px 4px 12px" }}
         rules={TmplConfigAnalysis.getRules(item, translate)}
       >
         <RenderEntryControl
@@ -200,7 +201,6 @@ export default class FormItemGroup extends React.PureComponent<
             </FormItem>
           );
         } else {
-
           formItem = item.shouldUpdate ? (
             <FormItem noStyle shouldUpdate={item.shouldUpdate}>
               {() => this.initFormItem(item, fieldValue)}
@@ -218,13 +218,13 @@ export default class FormItemGroup extends React.PureComponent<
     for (let i = 0; i < formItemList.length; i = i + 1) {
       let colSpan = fields[i].colSpan;
 
-      if (fields[i].extControlType == "hidden") {
+      if (fields[i].extControlType == "hidden" || fields[i].hidden) {
         colSpan = 0;
       } else if (maxColsOnRow && maxColsOnRow == 1) {
         colSpan = 2;
       }
       let col = (
-        <Col key={i} span={12 * colSpan} >
+        <Col key={i} span={12 * colSpan} style={{ width: "stretch" }}>
           {formItemList[i]}
         </Col>
       );
@@ -232,7 +232,7 @@ export default class FormItemGroup extends React.PureComponent<
     }
 
     const row = (
-      <Row gutter={[16, 8]} key={1}>
+      <Row gutter={[16, 0]} key={1}>
         {colList}
       </Row>
     );