aldehyde 0.2.314 → 0.2.316

package/src/aldehyde/login2/login-page.tsx

@@ -4,14 +4,14 @@ import LoginBgPng from "./img/login-bg.png";
 import { useLocale } from "../locale/useLocale";
 import HCDataSource from "../tmpl/hc-data-source";
 import ProgramConfig from "../units";
-import { Col, Row} from "antd";
+import { Col, Row } from "antd";
 import ResetPassword from "../layout/menu/reset-password";
-import {SafetyCertificateTwoTone} from '@ant-design/icons'
+import { SafetyCertificateTwoTone } from '@ant-design/icons'
 type LoginPageProps = {
-    programName?: string;
-    copyright?: string;
+  programName?: string;
+  copyright?: string;
 };
-const LoginPage = (props:LoginPageProps) => {
+const LoginPage = (props: LoginPageProps) => {
 
   const { translate } = useLocale();
 
@@ -40,51 +40,50 @@ const LoginPage = (props:LoginPageProps) => {
           aspectRatio: "1/1",
         }}
       >
-
-          <div
-              style={{
-                  fontWeight: 600,
-                  fontSize: "30px",
-                  color: "#222222",
-                  marginBottom: 10,
-              }}
-          >
-              {translate("${欢迎,登录}")}
-          </div>
-          <div
-              style={{
-                  fontWeight: 600,
-                  fontSize: "24px",
-                  color: "#222222",
-                  marginBottom: 40,
-              }}
-          >{props.programName=="Aldehyde"?"":
-              <><SafetyCertificateTwoTone />
-              {props.programName?translate("${" + props.programName + "}"): translate("${" + ProgramConfig.programName() + "}")}
+        <div
+          style={{
+            fontWeight: 600,
+            fontSize: "30px",
+            color: "#222222",
+            marginBottom: 10,
+          }}
+        >
+          {translate("${欢迎,登录}")}
+        </div>
+        <div
+          style={{
+            fontWeight: 600,
+            fontSize: "24px",
+            color: "#222222",
+            marginBottom: 40,
+          }}
+        >{props.programName == "Aldehyde" ? "" :
+          <><SafetyCertificateTwoTone />
+            {props.programName ? translate("${" + props.programName + "}") : translate("${" + ProgramConfig.programName() + "}")}
           </>}
-          </div>
+        </div>
         <Login
           onFinish={(token) => {
             HCDataSource.clear();
             window.location.hash = "/v2/home";
-              ProgramConfig.setHydrocarbonToken(token);
+            ProgramConfig.setHydrocarbonToken(token);
           }}
         ></Login>
-          <Row>
-              <Col span={6} offset={18}><ResetPassword showUserName={true}></ResetPassword></Col>
-          </Row>
+        <Row>
+          <Col span={6} offset={18}><ResetPassword showUserName={true}></ResetPassword></Col>
+        </Row>
+        {props.copyright ?
           <div
-              style={{
-                  fontWeight: 600,
-                  fontSize: "14px",
-                  color: "#999",
-                  marginTop: 40,
-              }}
-          ><Row>
-              <Col>{"Copyright ◎ 2025" + (props.copyright?props.copyright:"浙江恩赫控股集团有限公司")}</Col>
-          </Row>
-
-          </div>
+            style={{
+              fontWeight: 600,
+              fontSize: "14px",
+              color: "#999",
+              marginTop: 40,
+            }}
+          >
+            {"Copyright ◎ 2025" + (props.copyright || "")}
+          </div> : ""
+        }
       </div>
     </div>
   );

package/src/aldehyde/login3/index.less

@@ -9,6 +9,7 @@
     flex-direction: row-reverse;
     justify-content: flex-start;
     align-items: center;
+    overflow: hidden;
 
     .login-logo-img {
         position: absolute;
@@ -62,7 +63,7 @@
 
         .login-form {
             padding: 40px;
-            min-height: 442px;
+            min-height: 350px;
             position: relative;
 
             .ant-input::placeholder {
@@ -95,8 +96,7 @@
                 font-weight: 600;
                 font-size: 14px;
                 color: #ffffff;
-                position: absolute;
-                bottom: 40px;
+                margin-top: 40px;
             }
         }
 

package/src/aldehyde/login3/login-page.tsx

@@ -54,9 +54,11 @@ const LoginPage = (props: LoginPageProps) => {
           <div className="reset-password">
             <ResetPassword showUserName={true} />
           </div>
-          <div className="login-copyright">
-            {"Copyright ◎ 2025" + (props.copyright ? props.copyright : "浙江恩赫控股集团有限公司")}
-          </div>
+          {props.copyright ?
+            <div className="login-copyright">
+              {"Copyright ◎ 2025" + (props.copyright || "")}
+            </div> : ""
+          }
         </div>
       </div>
     </div >

package/src/aldehyde/lowcode-components/base-button/index.tsx

@@ -50,6 +50,8 @@ const handleCompsHide = (ids: string[], type: string) => {
     updateLayer?.(toBeUpdate);
 }
 
+const pattern = /ddpage\/([^/]+).*menuId=([^&]+)/;
+
 interface ILayerItem {
     id?: string | undefined;
     hide?: boolean;
@@ -66,11 +68,17 @@ export interface ComponentStyle {
     event?: {
         eventType: string;
         compsIds: string[];
+        routerType: string;
+        target: string;
+        path: string;
+        ddpageId: string;
+        menu: string;
     };
 }
 
 export interface ComponentProps {
     style?: ComponentStyle;
+    navigate?: (parms: any) => void;
 }
 
 export interface ComponentRef {
@@ -78,7 +86,7 @@ export interface ComponentRef {
 }
 
 const ButtonComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, } = props;
+    const { style, navigate } = props;
     const [config, setConfig] = useState<ComponentStyle>(style || {});
 
     useImperativeHandle(ref, () => ({
@@ -93,13 +101,37 @@ const ButtonComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<Com
      * eventType 事件类型
      */
     const onClick = () => {
-        const { compsIds, eventType } = config.event || {};
+        const { compsIds, eventType, routerType, target, path, ddpageId, menu } = config.event || {};
         switch (eventType) {
             case "toggle":
             case "show":
             case "hide":
                 handleCompsHide(compsIds, eventType);
                 break;
+            case "router":
+                const location = window.location;
+                const version = localStorage.getItem("version");
+                if (routerType === "screen") { // 大屏跳转
+                    const hash = location.hash;
+                    const match = hash.match(pattern);
+                    const sourceId = match?.[1];
+                    const menuId = match?.[2];
+                    const isLayout = ["#/v2/", "#/v3/"].some(prefix => hash.startsWith(prefix));
+                    if (sourceId && menuId) {
+                        const url = `${isLayout ? `/${version}` : ""}/ddpage/${sourceId}/${ddpageId}?menuId=${menuId}`;
+                        target === "self" ? navigate(url) : window.open(`#${url}`, "_blank");
+                    }
+                    return;
+                }
+                if (routerType === "url") { // 外部链接
+                    window.open(path, `_${target}`);
+                    return;
+                }
+                if (routerType === "menu") {  // 菜单
+                    const newUrl = menu.replace("{version}", `/${version}`);
+                    target === "self" ? navigate(newUrl) : window.open(`#${newUrl}`, "_blank");
+                }
+                break;
             default:
                 break;
         }

package/src/aldehyde/lowcode-components/base-map/index.tsx

@@ -159,6 +159,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     // 自定义弹窗渲染
     const customizeTooltipConfig = (config) => {
         const { title, width, height, padding, backgroundColor, backgroundImage, content } = config;
+        let titleText = title.text;
         return {
             padding: 0,
             borderWidth: 0,
@@ -167,10 +168,11 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             formatter: (params) => {
                 const itemData = params.data.itemData;
                 const dom = document.createElement("div");
+                if (title.titleType === "d1") { titleText = itemData?.value?.[title.titleType] || ""; }
                 const bgImg = `background-image: url(${backgroundImage});background-size: 100% 100%;background-repeat: no-repeat;background-position: center;`;
                 dom.style = `width:${width}px;height:${height}px;${backgroundImage ? bgImg : `background:${backgroundColor}`}`;
                 dom.innerHTML = `<div style="padding:${padding}px;width:100%;height:100%">
-                    ${title?.text ? `<div style="width:100%;margin-bottom:4px; font-size: ${title.fontSize}px; color: ${title.color}; text-align: ${title.position}">${title?.text}</div>` : ""}
+                    ${title?.text ? `<div style="width:100%;margin-bottom:4px; font-size: ${title.fontSize}px; color: ${title.color}; text-align: ${title.position}">${titleText}</div>` : ""}
                     ${content?.value?.map(r => itemData?.config?.[r] && `<div style="width:100%;display:flex;justify-content:space-between;align-items:center; font-size: ${content.fontSize}px; color: ${content.color};">
                         <div style="width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${itemData?.config?.[r] || ""}</div>
                         <div style="width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right">${itemData?.value?.[r] || ""}</div>

package/src/aldehyde/lowcode-components/effectScatter-map/index.tsx

@@ -185,6 +185,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     // 自定义弹窗渲染
     const customizeTooltipConfig = (config) => {
         const { title, width, height, padding, backgroundColor, backgroundImage, content } = config;
+        let titleText = title.text;
         return {
             padding: 0,
             borderWidth: 0,
@@ -193,10 +194,11 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             formatter: (params) => {
                 const itemData = params.data.itemData;
                 const dom = document.createElement("div");
+                if (title.titleType === "d1") { titleText = itemData?.value?.[title.titleType]; }
                 const bgImg = `background-image: url(${backgroundImage});background-size: 100% 100%;background-repeat: no-repeat;background-position: center;`;
                 dom.style = `width:${width}px;height:${height}px;${backgroundImage ? bgImg : `background:${backgroundColor}`}`;
                 dom.innerHTML = `<div style="padding:${padding}px;width:100%;height:100%">
-                    ${title?.text ? `<div style="width:100%;margin-bottom:4px; font-size: ${title.fontSize}px; color: ${title.color}; text-align: ${title.position}">${title?.text}</div>` : ""}
+                    ${title?.text ? `<div style="width:100%;margin-bottom:4px; font-size: ${title.fontSize}px; color: ${title.color}; text-align: ${title.position}">${titleText}</div>` : ""}
                     ${content?.value?.map(r => itemData?.config?.[r] && `<div style="width:100%;display:flex;justify-content:space-between;align-items:center; font-size: ${content.fontSize}px; color: ${content.color};">
                         <div style="width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${itemData?.config?.[r] || ""}</div>
                         <div style="width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right">${itemData?.value?.[r] || ""}</div>

package/src/aldehyde/lowcode-components/effectScatter-map-3d/index.tsx

@@ -281,6 +281,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     // 自定义弹窗渲染
     const customizeTooltipConfig = (config) => {
         const { title, width, height, padding, backgroundColor, backgroundImage, content } = config;
+        let titleText = title.text;
         return {
             padding: 0,
             borderWidth: 0,
@@ -289,10 +290,11 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             formatter: (params) => {
                 const itemData = params.data.itemData;
                 const dom = document.createElement("div");
+                if (title.titleType === "d1") { titleText = itemData?.value?.[title.titleType]; }
                 const bgImg = `background-image: url(${backgroundImage});background-size: 100% 100%;background-repeat: no-repeat;background-position: center;`;
                 dom.style = `width:${width}px;height:${height}px;${backgroundImage ? bgImg : `background:${backgroundColor}`}`;
                 dom.innerHTML = `<div style="padding:${padding}px;width:100%;height:100%">
-                    ${title?.text ? `<div style="width:100%;margin-bottom:4px; font-size: ${title.fontSize}px; color: ${title.color}; text-align: ${title.position}">${title?.text}</div>` : ""}
+                    ${title?.text ? `<div style="width:100%;margin-bottom:4px; font-size: ${title.fontSize}px; color: ${title.color}; text-align: ${title.position}">${titleText}</div>` : ""}
                     ${content?.value?.map(r => itemData?.config?.[r] && `<div style="width:100%;display:flex;justify-content:space-between;align-items:center; font-size: ${content.fontSize}px; color: ${content.color};">
                         <div style="width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${itemData?.config?.[r] || ""}</div>
                         <div style="width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right">${itemData?.value?.[r] || ""}</div>

package/src/aldehyde/lowcode-components/index.ts

@@ -49,6 +49,7 @@ import StrokeAnimation from "./stroke-animation";
 import EffectScatterMap3D from "./effectScatter-map-3d";
 import BaseButton from "./base-button";
 import BaseTabs from "./base-tabs";
+import PlaceholderComponent from "./placeholder-component";
 
 
 type CompoundedComponent = {
@@ -102,7 +103,8 @@ type CompoundedComponent = {
     StrokeAnimation?: typeof StrokeAnimation,
     EffectScatterMap3D?: typeof EffectScatterMap3D,
     BaseButton?: typeof BaseButton,
-    BaseTabs?: typeof BaseTabs
+    BaseTabs?: typeof BaseTabs,
+    PlaceholderComponent?: typeof PlaceholderComponent
 };
 
 const LowcodeComponents: CompoundedComponent = {
@@ -114,7 +116,8 @@ const LowcodeComponents: CompoundedComponent = {
     Decoration1, Decoration2, Decoration3, Decoration4, Decoration5,
     Decoration6, Decoration7, Decoration8, Decoration9, Decoration10, Decoration11,
     BaseTable, TextScroller, CapsuleBarChart, CircularProgressChart, ActTable, ProgressChart,
-    LineBarChart, Column3dChart, StrokeAnimation, EffectScatterMap3D, BaseButton, BaseTabs
+    LineBarChart, Column3dChart, StrokeAnimation, EffectScatterMap3D, BaseButton, BaseTabs,
+    PlaceholderComponent
 };
 
 export default LowcodeComponents;

package/src/aldehyde/lowcode-components/lowcode-view/component/assets.ts

@@ -50,6 +50,7 @@ import StrokeAnimation from "../../stroke-animation";
 import EffectScatterMap3D from "../../effectScatter-map-3d";
 import BaseButton from "../../base-button";
 import BaseTabs from "../../base-tabs";
+import PlaceholderComponent from "../../placeholder-component";
 
 interface ComponentItemConfig {
     baseInfo: BaseInfoType, // 基础信息
@@ -435,5 +436,12 @@ export const compsConfig: { [key: string]: ComponentItemConfig } = {
             compName: "选项卡",
             compKey: "BaseTabs"
         }
+    },
+    PlaceholderComponent: {
+        componentNode: PlaceholderComponent,
+        baseInfo: {
+            compName: "占位组件",
+            compKey: "PlaceholderComponent"
+        }
     }
 };

package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx

@@ -3,6 +3,7 @@ import Loading from "./loading";
 import { ILayerItem, LayerManagerDataType } from "../interface";
 import AbstractDesignerController from "./abstract-designer-controller";
 import abstractDesignerLoader from "./abstract-designer-loader";
+import { useNavigate } from "react-router-dom";
 
 const registerProxy = (compId: string, controller: AbstractDesignerController) => {
     controller.changeData = new Proxy(controller.changeData, {
@@ -21,6 +22,7 @@ const ComponentContainer = memo((props: ComponentContainerProps) => {
     const { layer, layerManager } = props;
     const ref = useRef(null);
     const [compController, setCompController] = useState<{ [key: string]: AbstractDesignerController }>({});
+    const navigate = useNavigate();
 
     useEffect(() => {
         //通过ref创建组件，并将组件实例存入Map中。后续通过Map匹配到具体实例，调用实例的对象方法进行组件的更新操作
@@ -44,7 +46,7 @@ const ComponentContainer = memo((props: ComponentContainerProps) => {
             //todo 此处逻辑应该使用设计模式优化，而非写死
             registerProxy(layer.id!, Controller);
             setCompController(val => ({ ...val, [layer.id]: Controller }))
-            Controller.create(ref.current!, config).then(() => {
+            Controller.create(ref.current!, { ...config, navigate }).then(() => {
                 //在组件完全渲染完毕后进行数据的加载和事件的注册
                 Controller.loadComponentData();
                 //设置组件滤镜效果（todo 考虑是否应该在此处设置？）

package/src/aldehyde/lowcode-components/placeholder-component/index.tsx

@@ -0,0 +1,57 @@
+
+import React, { ForwardedRef, forwardRef, useMemo, useImperativeHandle, useState } from 'react';
+import Units from "../../units/index";
+import { useLocale } from "../../locale/useLocale";
+
+const defStyle = {
+    color: '#9a9a9a',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: '1px solid #9a9a9a',
+};
+
+export interface ComponentProps {
+    style: { key: string },
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+export interface CompImageonentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+}
+
+const PlaceholderComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<CompImageonentRef>) => {
+    const { isDesignMode } = props;
+    const { translate } = useLocale();
+    const [key, setKey] = useState<string>(props.style?.key);
+
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setKey(newConfig.style?.key),
+    }));
+
+
+    const renderComponent = useMemo(() => {
+        const temComponent = Units.getCustomComponent(key);
+        if (temComponent) {
+            return React.createElement(temComponent);
+        }
+        return <div style={defStyle}>{translate("${没有找到自定义组件}")}</div>;
+    }, [key]);
+
+    return (
+        <div style={{ width: '100%', height: '100%' }}>
+            {isDesignMode || !key ?
+                <div style={defStyle}>
+                    <div>{translate("${占位组件}")}</div>
+                </div> :
+                <div style={{ width: '100%', height: '100%', overflow: "auto" }}>
+                    {renderComponent}
+                </div>
+            }
+        </div>
+    );
+});
+
+export default PlaceholderComponent;