aldehyde 0.2.454 → 0.2.456

package/src/aldehyde/layout/menu/l2menu-message-bar.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, useEffect, useState, useRef } from "react";
 import { Badge, Dropdown, Menu, Button } from "antd";
 import { BellOutlined } from "@ant-design/icons";
 import "antd/dist/reset.css";
@@ -6,6 +6,7 @@ import { Level2Menu } from "../../tmpl/interface";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
 import { NavLink } from "react-router-dom";
 import HCDataSource from "../../tmpl/hc-data-source";
+import WebSocket from "../../tmpl/web-socket";
 import Units from "../../units";
 import "./message-bar.less";
 
@@ -20,61 +21,51 @@ interface MessageBar {
   count: number;
 }
 
-interface L2MenuMessageBarState {
-  messageBars?: MessageBar[];
-  anyState?: boolean;
-}
-
-class L2MenuMessageBar extends React.PureComponent<
-  L2MenuMessageBarProps,
-  L2MenuMessageBarState
-> {
-  state = {
-    messageBars: undefined,
-    anyState: false,
-  };
-  static defaultProps = {
-    backgroudColor: "#4a5f74",
-  };
+const Index = (props: L2MenuMessageBarProps) => {
+  const { backgroudColor, style = {}, version = "v2" } = props;
+  const [messageBars, setMessageBars] = useState<MessageBar[]>([]);
+  const wsRef = useRef(undefined); // 实时数据websocket连接
+  const subscribeRef = useRef(undefined); // 实时数据订阅
 
-  async componentDidMount() {
+  const getMessageBars = async () => {
     let l2Menus = await HCDataSource.fastMenu("MessageBar");
-    const messageBars: MessageBar[] = [];
-
+    const temArr: MessageBar[] = [];
     if (l2Menus) {
       for (const item of l2Menus) {
         if (item.disabled) {
           continue;
         }
-        const messageBar: MessageBar = {
-          l2Menu: item,
-          count: 0,
-        };
-        let that = this;
-        setInterval(async () => {
-          let count = await HcserviceV3.requestLtmplCount(null, item.id);
-          messageBar.count = count;
-          this.setState({
-            anyState: !this.state.anyState,
-          });
-        }, 60000);
+
+        const messageBar: MessageBar = { l2Menu: item, count: 0 };
         let count = await HcserviceV3.requestLtmplCount(null, item.id);
         messageBar.count = count;
-        messageBars.push(messageBar);
+        temArr.push(messageBar);
       }
     }
+    setMessageBars(temArr);
+    if (temArr?.length) getWebSocketMessageBar();
+  }
 
-    this.setState({
-      messageBars,
+  // 订阅消息数据
+  const getWebSocketMessageBar = async () => {
+    if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
+    wsRef.current = WebSocket.getInstance("v3/kk-ws");
+    subscribeRef.current = await wsRef.current.subscribe("/user/queue/bar-messages", {}, (data) => {
+      const temData = data?.message?.[0] || {};
+      setMessageBars(val => val.map(r => r.l2Menu.id === temData.menuId ? { ...r, count: temData.count } : r));
     });
   }
 
-  renderMessageBar = (messageBars: MessageBar[]) => {
-    const { backgroudColor, style = {}, version = "v2" } = this.props;
+  useEffect(() => {
+    getMessageBars();
+    return () => {
+      if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
+    }
+  }, []);
+
+  const renderMessageBar = () => {
     let total: number = 0;
-    const syyy: CSSProperties = {
-      "--message-bar-backgroupd": backgroudColor,
-    } as CSSProperties;
+    const syyy: CSSProperties = { "--message-bar-backgroupd": backgroudColor } as CSSProperties;
     const menu = (
       <Menu key={1}>
         {messageBars.map((messageBar, index) => {
@@ -83,11 +74,7 @@ class L2MenuMessageBar extends React.PureComponent<
           }
           let defaultCriteriaData = "";
           if (messageBar.l2Menu.defaultCriteriaValue) {
-            defaultCriteriaData =
-              "&" +
-              Units.transQueryParamsToStr(
-                messageBar.l2Menu.defaultCriteriaValue
-              );
+            defaultCriteriaData = "&" + Units.transQueryParamsToStr(messageBar.l2Menu.defaultCriteriaValue);
           }
           return (
             <Menu.Item key={index}>
@@ -107,16 +94,15 @@ class L2MenuMessageBar extends React.PureComponent<
         })}
       </Menu>
     );
-
-    if (!messageBars || messageBars.length == 0) {
+    if (!messageBars?.length) {
       return;
-    } else if (messageBars.length == 1) {
+    }
+    if (messageBars.length == 1) {
       let messageBar = messageBars[0];
       const l2Menu = messageBar.l2Menu;
       let defaultCriteriaData = "";
       if (l2Menu.defaultCriteriaValue) {
-        defaultCriteriaData =
-          "&" + Units.transQueryParamsToStr(l2Menu.defaultCriteriaValue);
+        defaultCriteriaData = "&" + Units.transQueryParamsToStr(l2Menu.defaultCriteriaValue);
       }
       return (
         <div style={syyy}>
@@ -151,13 +137,7 @@ class L2MenuMessageBar extends React.PureComponent<
       return (
         <Dropdown overlay={menu} placement="bottomCenter">
           <div style={syyy}>
-            <Badge
-              count={total}
-              size="small"
-              overflowCount={99}
-              offset={[6, 0]}
-              className="ripple-dot"
-            >
+            <Badge size="small" count={total} overflowCount={99} offset={[6, -2]} className="ripple-dot">
               <Button
                 icon={<BellOutlined />}
                 shape="default"
@@ -179,10 +159,7 @@ class L2MenuMessageBar extends React.PureComponent<
     }
   };
 
-  render() {
-    const { messageBars } = this.state;
-    return <>{messageBars ? this.renderMessageBar(messageBars) : ""}</>;
-  }
+  return messageBars?.length ? renderMessageBar() : "";
 }
 
-export default L2MenuMessageBar;
+export default Index;

package/src/aldehyde/layout/menu/message-bar.less

@@ -1,6 +1,7 @@
 .ripple-dot .ant-badge-count {
     overflow: revert;
     box-shadow: none;
+    padding: 0 4px;
 
     .ant-scroll-number-only {
         display: flex;
@@ -13,6 +14,10 @@
         height: 100%;
         line-height: 12px;
     }
+
+    bdi {
+        display: flex;
+    }
 }
 
 .ripple-dot .ant-badge-count::before {

package/src/aldehyde/lowcode-components/bar-chart/index.tsx

@@ -125,6 +125,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -135,6 +144,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

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

@@ -107,6 +107,14 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            handleDataImgSrc(value);
+        }
+    }
+
     useEffect(() => {
         if (props) {
             handleDefImgSrc(props.style || {});
@@ -121,6 +129,7 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
             handleInitData(newDataConfig);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

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

@@ -130,6 +130,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -139,6 +148,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/capsule-bar-chart/index.tsx

@@ -143,6 +143,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -153,6 +162,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/carousel/index.tsx

@@ -126,6 +126,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { config, value } = val.initData;
+            const temVal = handleData(value);
+            const ossConfig = getOssConfig(config?.serverKey || defServerKey);
+            setData(temVal.map((r) => handleValue(r, ossConfig)).flat().filter(Boolean));
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => { // 组件更新配置
             const { base, style, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -135,6 +145,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/circular-progress-chart/index.tsx

@@ -128,6 +128,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = value?.[0]?.value?.[0]?.v1 || 0;
+            setData(temData * 100);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -138,6 +147,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/column-3d-chart/index.tsx

@@ -179,6 +179,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -189,6 +198,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/column-chart/index.tsx

@@ -148,6 +148,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -158,6 +168,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/data-number/index.tsx

@@ -110,6 +110,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { config, value } = val.wsData;
+            const temData = handleData(value, config?.defaultValue);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({ // 暴露到外部func
         updateConfig: (newConfig) => { // 组件更新配置
             const { style: { defaultValue, enume: newEnume, ...style }, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -120,6 +129,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy
     }));

package/src/aldehyde/lowcode-components/data.d.ts

@@ -8,6 +8,7 @@ export interface DataConfigProps {
     searchParams?: { [key: string]: any };
     isInitParams?: boolean;
     isDefRequest?: boolean;
+    wsData?: any;
 }
 
 export interface OssConfig {

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

@@ -156,6 +156,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -165,6 +174,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

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

@@ -238,6 +238,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -247,6 +256,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/gauge-chart/index.tsx

@@ -90,6 +90,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -100,6 +109,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/line-bar-chart/index.tsx

@@ -141,6 +141,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const { nullSetZero } = config || {};
+            const temData = handleData(value, nullSetZero);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -151,6 +161,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/line-chart/index.tsx

@@ -136,6 +136,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const { nullSetZero } = config || {};
+            const temData = handleData(value, nullSetZero);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -146,6 +156,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/liquid-chart/index.tsx

@@ -106,6 +106,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }
 
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
             const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
@@ -116,6 +125,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
             handleInitData(newDataConfig);
             setSearchParams(newDataConfig.searchParams);
             setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
         },
         destroy: handleDestroy,
     }));

package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts

@@ -1,13 +1,13 @@
 import AbstractController from "./abstract-controller";
 import React, { ComponentType } from "react";
-import AbstractDesignerController from "./abstract-designer-controller";
+import ComponentController from "./component-controller";
 
 export type ClazzTemplate<C> = new () => C | null;
 
 export interface ActionInfo {
     name: string;
     id: string;
-    handler: (controller: AbstractDesignerController, params?: any) => void;
+    handler: (controller: ComponentController, params?: any) => void;
 }
 
 export interface ICategorize {

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

@@ -1,12 +1,12 @@
 import React, { memo, Suspense, useEffect, useRef, useState, useContext } from "react";
 import Loading from "./loading";
 import { ILayerItem, LayerManagerDataType } from "../interface";
-import AbstractDesignerController from "./abstract-designer-controller";
+import ComponentController from "./component-controller";
 import abstractDesignerLoader from "./abstract-designer-loader";
 import { useNavigate } from "react-router-dom";
 import { ControllerContext } from "../index";
 
-const registerProxy = (compId: string, controller: AbstractDesignerController) => {
+const registerProxy = (compId: string, controller: ComponentController) => {
     controller.changeData = new Proxy(controller.changeData, {
         apply(target, thisArg, argus) {
             return target.apply(thisArg, argus as any);
@@ -22,7 +22,7 @@ export interface ComponentContainerProps {
 const ComponentContainer = memo((props: ComponentContainerProps) => {
     const { layer, layerManager } = props;
     const ref = useRef(null);
-    const [compController, setCompController] = useState<{ [key: string]: AbstractDesignerController }>({});
+    const [compController, setCompController] = useState<{ [key: string]: ComponentController }>({});
     const navigate = useNavigate();
     const { setControllers, setSearchParams } = useContext(ControllerContext);