aldehyde 0.2.480 → 0.2.482

package/src/aldehyde/detail/view/view-compare-panel.tsx

@@ -1,57 +1,57 @@
-import { Card,  Splitter} from "antd";
-import React, { useEffect, useState } from "react";
-import {DtmplConfig} from "../../tmpl/interface";
-import DtmplView from "./dtmpl-view";
-import Units from "../../units";
-
-export type ViewComparData={
-    code: string,
-    versionId?: number,
-    time:string,
-    userName?: string,
-}
-
-type ViewComparePanelProp = {
-    serverKey?:string;
-    dtmplConfig:DtmplConfig,
-    sourceId:string,
-    data?:ViewComparData[]
-};
-
-
-
-const ViewComparePanel = (props: ViewComparePanelProp) => {
-  // button
-    const {serverKey,
-    dtmplConfig,
-        sourceId,data}=props;
-
-
-
-  return (
-      <>
-      <Card  styles={{body:{padding:'0px'}}} style={{width:data && data.length>1? 500*data.length:'100%'}}>
-      <div style={{whiteSpace: 'nowrap',
-          overflowX: 'auto'}}>
-      <Splitter >
-      {data?
-          data.map((d)=>{
-             return <Splitter.Panel >
-                 <Card title={d.userName+ ":" + Units.formateDate(d.time)} style={{minWidth:'400px'}}>
-            <DtmplView maxColsOnRow={data && data.length>1?1:2}
-                  serverKey={serverKey}
-                  showRightNav={false}
-                  dtmplConfig={dtmplConfig}
-                  sourceId={sourceId}
-                  code={d.code}
-                  versionId={d.versionId}
-              ></DtmplView> </Card></Splitter.Panel>
-          }) :null}
-      </Splitter>
-      </div>
-      </Card>
-      </>
-  );
-};
-
-export default ViewComparePanel;
+import { Card,  Splitter} from "antd";
+import React, { useEffect, useState } from "react";
+import {DtmplConfig} from "../../tmpl/interface";
+import DtmplView from "./dtmpl-view";
+import Units from "../../units";
+
+export type ViewComparData={
+    code: string,
+    versionId?: number,
+    time:string,
+    userName?: string,
+}
+
+type ViewComparePanelProp = {
+    serverKey?:string;
+    dtmplConfig:DtmplConfig,
+    sourceId:string,
+    data?:ViewComparData[]
+};
+
+
+
+const ViewComparePanel = (props: ViewComparePanelProp) => {
+  // button
+    const {serverKey,
+    dtmplConfig,
+        sourceId,data}=props;
+
+
+
+  return (
+      <>
+      <Card  styles={{body:{padding:'0px'}}} style={{width:data && data.length>1? 500*data.length:'100%'}}>
+      <div style={{whiteSpace: 'nowrap',
+          overflowX: 'auto'}}>
+      <Splitter >
+      {data?
+          data.map((d)=>{
+             return <Splitter.Panel >
+                 <Card title={d.userName+ ":" + Units.formateDate(d.time)} style={{minWidth:'400px'}}>
+            <DtmplView maxColsOnRow={data && data.length>1?1:2}
+                  serverKey={serverKey}
+                  showRightNav={false}
+                  dtmplConfig={dtmplConfig}
+                  sourceId={sourceId}
+                  code={d.code}
+                  versionId={d.versionId}
+              ></DtmplView> </Card></Splitter.Panel>
+          }) :null}
+      </Splitter>
+      </div>
+      </Card>
+      </>
+  );
+};
+
+export default ViewComparePanel;

package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less

@@ -27,8 +27,8 @@
         top: 6px;
         left: 6px;
         object-fit: contain;
-        width: calc(100% - 12px);
-        height: calc(100% - 12px);
+        width: calc(~"100% - 12px");
+        height: calc(~"100% - 12px");
         pointer-events: none;
       }
     }

package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Dropdown, Modal, Space, Button, Divider, Tooltip } from 'antd';
-import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined } from '@ant-design/icons';
+import { Dropdown, Modal, Space, Button, Divider, Tooltip, message } from 'antd';
+import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined, SettingOutlined } from '@ant-design/icons';
 import { gzipSync, strToU8 } from 'fflate';
 import { uint8ArrayToHex } from 'uint8array-extras';
 import HcserviceV3 from "../../../tmpl/hcservice-v3";
@@ -8,6 +8,7 @@ import IconFont from "../../../icon/aliIcon";
 import { Render } from '../render';
 import { GraphType, LinkType, AlignType } from '../render/types';
 import * as Draws from '../render/draws';
+import UploadReadExcel from "../../../controls/upload-read-excel";
 import './index.less';
 
 // 布局类型
@@ -78,6 +79,29 @@ const MainHeader = (props: MainHeaderProps) => {
     input.click();
   }, [render]);
 
+  // 批量设置组件属性
+  const handleBatchSetNodeConfig = useCallback((data: { [key: string]: any }[]) => {
+    if (!render || !data?.length) return;
+    const allAssets = render.getAllAssets();
+    data.forEach((item) => {
+      let nodeId, setting;
+      switch (item["组件类型"]) {
+        case "workstation":
+          const order = item["序号"];
+          const workstationNumber = item["工位编号"];
+          nodeId = allAssets.find((asset) => asset.componentType === "workstation" && asset.settings.order === order)?.id;
+          setting = { workstationNumber };
+          break;
+        default:
+          break;
+      }
+      if (nodeId) {
+        render.updateAssetById(nodeId, setting);
+      }
+    });
+    message.success("设置成功");
+  }, [render]);
+
   // 保存
   const handleSave = async () => {
     if (!recordCode) {
@@ -210,6 +234,13 @@ const MainHeader = (props: MainHeaderProps) => {
         <Tooltip title="快捷键">
           <Button type="text" onClick={() => setShowShortCut(true)} ><QuestionCircleOutlined /></Button>
         </Tooltip>
+        <Tooltip title="组件属性批量配置">
+          <>
+            <UploadReadExcel onChangeData={handleBatchSetNodeConfig} >
+              <Button type="text" ><SettingOutlined /></Button>
+            </UploadReadExcel>
+          </>
+        </Tooltip>
         <Tooltip title="导入">
           <Button type="text" onClick={handleRestore} ><ImportOutlined /></Button>
         </Tooltip>

package/src/aldehyde/draw-canvas-edit/components/render/components/index.less

@@ -0,0 +1,61 @@
+// 工位卡片
+.workstation-card {
+    overflow: hidden;
+
+    .card-list,
+    .ant-card {
+        margin: 0;
+    }
+
+    .ant-card {
+        height: 100%;
+
+        .ant-card-body {
+            padding: 0 !important;
+        }
+    }
+
+    .card-list-item-head {
+        margin: 12px 0 8px;
+    }
+
+    .card-list-item-head-title {
+        .card-list-item-head-primary {
+            min-height: 0px !important;
+
+            .primary-column {
+                font-size: 16px !important;
+            }
+        }
+
+        .card-list-item-head-second {
+            min-height: 0px !important;
+            margin-top: 0px !important;
+
+            .second-column {
+                font-size: 12px !important;
+                opacity: 0.8;
+            }
+        }
+    }
+
+    .card-list-item-content {
+        padding: 0 12px;
+
+        .card-list-item-main {
+            background-color: transparent;
+            margin-bottom: 8px;
+        }
+
+        .card-show-cols {
+            padding: 0;
+            background-color: transparent;
+        }
+    }
+
+    .card-list-item-footer {
+        text-align: right;
+        padding: 8px;
+        border-top: 1px solid #e8e8e8;
+    }
+}

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

@@ -0,0 +1,3 @@
+import { WorkstationComponent } from './workstation-component';
+
+export { WorkstationComponent };

package/src/aldehyde/draw-canvas-edit/components/render/components/workstation-component.tsx

@@ -0,0 +1,220 @@
+import React from "react";
+import { createRoot } from 'react-dom/client';
+import Konva from 'konva';
+import { Card, ConfigProvider } from "antd";
+import { Render } from '../index';
+import { AssetSettings } from '../types';
+import LtmplTable from "../../../../module/ltmpl-table";
+import { antdLangMp } from "../../../../index";
+import "./index.less";
+
+// 详情卡片
+const DetailCard = (props: { workstationNumber: string, pageId: string, locale: string }) => {
+  const { pageId, workstationNumber, locale } = props;
+
+  return <ConfigProvider locale={antdLangMp[locale]}>
+    <Card
+      className="workstation-card"
+      styles={{
+        body: { padding: 0 },
+        root: { width: 200, boxShadow: '0 2px 8px rgba(0,0,0,0.2)', border: "none" }
+      }}
+    >
+      <LtmplTable
+        sourceId={pageId}
+        funcMode="simple"
+        defShowType="cardList"
+        defaultCriteriaValue={{ thirdCriterion: workstationNumber }}
+        showPagination={false}
+        showAggregates={false}
+        defRowCardCount={1}
+      />
+    </Card >
+  </ConfigProvider >;
+}
+
+export interface WorkstationSettings extends AssetSettings {
+  workstationNumber: string; // 工位编号
+}
+
+export class WorkstationComponent {
+  private render: Render;
+  // 卡片挂载管理 
+  private cardRoot: ReturnType<typeof createRoot> | null = null;
+  private cardWrapper: HTMLDivElement | null = null;
+  private currentNodeId: string | null = null; // 当前打开的卡片对应的工位标识
+
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 关闭并销毁卡片，清理所有监听器
+  private closeCard = () => {
+    const stage = this.render?.stage;
+    if (stage) {  // 清理 stage 事件监听
+      stage.off('click tap');
+    }
+    if (this.cardRoot) { // 销毁 React 根节点
+      this.cardRoot.unmount();
+      this.cardRoot = null;
+    }
+    if (this.cardWrapper) { // 移除 DOM 节点
+      this.cardWrapper.remove();
+      this.cardWrapper = null;
+    }
+    this.currentNodeId = null;
+  };
+
+  // 根据容器边界重新计算卡片位置，避免被遮挡
+  private adjustCardPosition = (pointerPos: { x: number; y: number }) => {
+    if (!this.cardWrapper || !this.render.stage) return;
+    const container = this.render.stage.getContent();
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const cardWidth = this.cardWrapper.offsetWidth;
+    const cardHeight = this.cardWrapper.offsetHeight;
+    if (!cardWidth || !cardHeight) return;
+    const padding = 8; // 距离容器边缘的最小间距
+    let translateX = -(cardWidth / 2);  // 默认水平居中于指针
+    let translateY = -(cardHeight + padding); // 默认显示在指针上方
+    // 水平边界处理：卡片左侧超出
+    const cardLeft = pointerPos.x + translateX;
+    if (cardLeft < padding) {
+      translateX = padding - pointerPos.x;
+    }
+    // 水平边界处理：卡片右侧超出
+    const cardRight = pointerPos.x + translateX + cardWidth;
+    if (cardRight > containerWidth - padding) {
+      translateX = containerWidth - padding - cardWidth - pointerPos.x;
+    }
+    // 垂直边界处理：卡片上方超出 → 尝试翻转到指针下方
+    const cardTop = pointerPos.y + translateY;
+    if (cardTop < padding) {
+      // 检查下方空间是否足够
+      const cardBottomWhenBelow = pointerPos.y + padding + cardHeight;
+      if (cardBottomWhenBelow <= containerHeight - padding) {
+        translateY = padding; // 翻转到指针下方
+      } else {
+        // 上下空间都不足，强制贴住容器上边缘
+        translateY = padding - pointerPos.y;
+      }
+    } else {
+      // 即使上方不超出，也检查下方是否被容器底部裁切
+      const cardBottom = cardTop + cardHeight;
+      if (cardBottom > containerHeight - padding) {
+        translateY = padding; // 翻转到下方
+      }
+    }
+    this.cardWrapper.style.left = `${pointerPos.x}px`;
+    this.cardWrapper.style.top = `${pointerPos.y}px`;
+    this.cardWrapper.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  };
+
+  // 渲染工位详情卡片
+  private renderCard = async (props: { node: Konva.Group, settings: WorkstationSettings, pointerPos: { x: number, y: number } }) => {
+    const { node, settings, pointerPos } = props;
+    const { pageId, workstationNumber } = settings;
+    if (!node || !pageId || !workstationNumber || !pointerPos) return;
+    // 如果同一个工位的卡片已经渲染，不再重复渲染
+    const nodeId = node.id();
+    if (this.currentNodeId === nodeId) return;
+    this.closeCard(); // 先关闭已有卡片（不同工位时）
+    const container = this.render.stage.getContent();
+    this.cardWrapper = document.createElement('div');
+    this.cardWrapper.style.cssText = `
+      position:absolute;
+      left:${pointerPos.x}px;
+      top:${pointerPos.y}px;
+      transform:translate(-50%, calc(-100% - 8px));
+      z-index:1000;
+    `;
+    // 用原生监听器在 wrapper 层截断事件，阻止冒泡到 container（Konva 监听层）
+    // this.cardWrapper.addEventListener('click', (e) => e.stopImmediatePropagation());
+    this.cardWrapper.addEventListener('mousedown', (e) => e.stopImmediatePropagation());
+    container.appendChild(this.cardWrapper); // 挂载到 container 下面
+    this.cardRoot = createRoot(this.cardWrapper);
+    this.cardRoot.render(<DetailCard workstationNumber={workstationNumber} pageId={pageId} locale={this.render?.config?.locale} />);
+    this.currentNodeId = nodeId; // 记录当前打开的工位
+    this.render.stage.on('click tap', this.closeCard); // 点击画布外关闭卡片
+    this.render.stage.on('wheel', this.closeCard); // 缩放画布关闭卡片
+    this.render.stage.on('dragmove', this.closeCard); // 平移画布关闭卡片
+    // 渲染完成后根据容器边界重新校准卡片位置，避免被遮挡
+    requestAnimationFrame(() => this.adjustCardPosition(pointerPos));
+  };
+
+  /**
+   * 创建工位组件
+   */
+  async create(src: string, type: string) {
+    const { themeToken } = this.render.config || {};
+    const workstationNodes = this.render.getAllAssets()?.filter(asset => asset.componentType === 'workstation');
+    const order = Math.max(...workstationNodes.map(asset => asset.settings.order), 0) + 1;
+    const { group, points } = await this.render.componentFactory.createImageComponent({
+      src,
+      type,
+      componentType: 'workstation',
+    });
+    const fontSize = Math.min(group.width(), group.height()) * 0.5;
+    const text = new Konva.Text({ // 序号文本显示
+      name: 'order',
+      text: `${order}`,
+      fontSize,
+      fontFamily: 'Arial',
+      fill: themeToken.colorPrimary || '#000000',
+      align: 'center',
+      offsetX: 0,
+      offsetY: 0,
+      width: group.width(),
+    });
+    text.x(0);
+    text.y(group.height() / 2 - text.height() / 7);
+    const tooltip = this.render.componentFactory.createTooltipComponent({ // 弹窗显示
+      x: group.width() / 2,
+      y: group.height() / 2,
+    });
+    group.add(text);
+    group.add(tooltip);
+    this.render.setAssetSettings(group, { ...this.render.getAssetSettings(group), order }, true);
+    return { group, points };
+  }
+
+  /**
+   * 只读页面工位组件初始化
+   */
+  readonlyInit(node: Konva.Group) {
+    const orderText = node.findOne('.order');
+    orderText?.visible?.(false); // 只读页面不显示工位序号
+    this.render.componentFactory.setCursorPointer(node);
+  }
+
+  /**
+   * 更新工位组件设置
+   */
+  updateSettings(node: Konva.Group, settings: AssetSettings) {
+    this.render.componentFactory.updateTooltipText(node, (settings as WorkstationSettings).workstationNumber); // 工位编号弹窗
+    node.findOne('.order')?.setAttr('text', settings.order); // 工位序号显示
+    this.componentOnClick(node, settings as WorkstationSettings);
+  }
+
+  /**
+   * 克隆时更新工位组件序号
+   */
+  updateCloneOrder(node: Konva.Group, workstationOrders: number[]) {
+    const order = Math.max(...workstationOrders, 0) + 1;
+    workstationOrders.push(order);
+    const orderText = node.findOne('.order');
+    this.render.setAssetSettings(node, { ...this.render.getAssetSettings(node), order }, true);
+    orderText.setAttr('text', order);
+    return order;
+  }
+
+  // 渲染页工位点击事件：查看工位详情
+  componentOnClick(node: Konva.Group, settings: WorkstationSettings) {
+    node.off("click");
+    node.on('click', (e) => {
+      e.cancelBubble = true; // 阻止事件向上冒泡到 Stage 
+      const pointerPos = e.target.getStage()?.getPointerPosition();
+      this.renderCard({ node, settings, pointerPos });
+    });
+  }
+}