aldehyde 0.2.449 → 0.2.450

package/src/aldehyde/controls/enum-tag/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Space, Tag } from "antd";
+import React, { useEffect, useState } from "react";
+import { Space } from "antd";
 import { VControlProps } from "../../tmpl/interface";
 import HCDataSource from "../../tmpl/hc-data-source";
 import { useLocale } from "../../locale/useLocale";
@@ -8,30 +8,38 @@ interface EnumTagsProps extends VControlProps { }
 
 const EnumTags: React.FC<EnumTagsProps> = (props) => {
   const { translate } = useLocale();
+  const [tagList, setTagList] = useState<any[]>([]);
+  const { value, fieldConfig, serverKey } = props;
 
-  const { value, itemType, fieldConfig } = props;
-  let viewControl = undefined;
-  let tagList = [];
-  if (value) {
-    let v = value;
-    if (value instanceof Array) {
-    } else {
-      if (value.indexOf("@,@") > 0) {
-        v = value.split("@,@");
+  const getTagList = async () => {
+    if (value) {
+      const temArr = [];
+      let v = value;
+      if (value instanceof Array) {
       } else {
-        v = value.split(",");
-      }
+        if (value.indexOf("@,@") > 0) {
+          v = value.split("@,@");
+        } else {
+          v = value.split(",");
+        }
 
+      }
+      for (let index = 0; index < v.length; index++) {
+        const item = v[index];
+        let color = await HCDataSource.getEnumValueColor(fieldConfig.mstrucId, value, serverKey) || "#1677FF";
+        temArr.push(<span key={item} className="tag" style={{ fontSize: "12px", padding: "4px 10px", borderRadius: "9999px", color, background: `${color}1A` }}>
+          {translate("${" + item + "}")}
+        </span>)
+      }
+      setTagList(temArr);
     }
-    v.forEach((v) => {
-      let color = HCDataSource.getEnumValueColor(fieldConfig.mstrucId, value) || "#1677FF";
-      tagList.push(<span key={v} className="tag" style={{ fontSize: "12px", padding: "4px 10px", borderRadius: "9999px", color, background: `${color}1A` }}>
-        {translate("${" + v + "}")}
-      </span>)
-    });
   }
-  viewControl = <Space size={[8, 8]} wrap>{tagList}</Space>;
-  return viewControl;
+
+  useEffect(() => {
+    getTagList();
+  }, [value]);
+
+  return <Space size={[8, 8]} wrap>{tagList}</Space>;
 };
 
 export default EnumTags;

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

@@ -56,9 +56,11 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
     const [localImgCode, setLocalImgCode] = useState<string>();
     const [localImgDel, setLocalImgDel] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(true);
 
     // 处理数据源图片地址
     const handleDataImgSrc = (val) => {
+        setLoading(false);
         const src = handleData(val);
         if (!src) {
             setImgSrc("");
@@ -157,8 +159,9 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
             } else {
                 getInitData();
             }
-        } else if (dataConfig?.sourceType === 'sourceId') {
+        } else {
             setImgSrc("");
+            setLoading(false);
         }
     }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
 
@@ -199,7 +202,7 @@ const BaseImageComponent = forwardRef((props: BaseImageComponentProps, ref: Forw
 
     return (
         <div style={{ width: '100%', height: '100%' }}>
-            {!(imgSrc || defImgSrc) ? emptyImg :
+            {(loading || !(imgSrc || defImgSrc)) ? emptyImg :
                 isDesignMode && localImgDel ? renderLocalImgDel :
                     <img alt={'图片组件'} style={{ opacity: config?.opacity }} width={'100%'} height={'100%'} src={imgSrc || defImgSrc} />}
         </div>

package/src/aldehyde/table/query-table.tsx

@@ -177,7 +177,7 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
         queryKey,
         pageInfo
       );
-      if (queryData?.key != this.props.queryKey?.key) {
+      if (queryData?.key !== queryKey) {
         this.setState({ loading: false, errorText: translate("${查询异常}"), dataSource: [] });
         return;
       } else {

package/src/aldehyde/tmpl/hc-data-source.tsx

@@ -364,14 +364,19 @@ HCDataSource.getEnumsValueMap = function (
   return map;
 };
 
-HCDataSource.getEnumOption = function (
+HCDataSource.getEnumOption = async function (
   mstrucId: string,
-  enumValue: string
-): EnumItem {
+  enumValue: string,
+  serverKey?: string
+) {
   if (!enumValue) {
     return null;
   }
   let options = this.getEnums(mstrucId);
+  if (!options) { // 枚举不存在查询
+    await loadEnum(serverKey, [mstrucId]);
+    options = this.getEnums(mstrucId);
+  }
   let enumItem: EnumItem = undefined;
   if (options) {
     options.forEach((option) => {
@@ -383,11 +388,12 @@ HCDataSource.getEnumOption = function (
   }
   return enumItem;
 };
-HCDataSource.getEnumValueColor = (
+HCDataSource.getEnumValueColor = async (
   mstrucId: string,
-  enumValue: string
-): string => {
-  let enumItem: EnumItem = HCDataSource.getEnumOption(mstrucId, enumValue);
+  enumValue: string,
+  serverKey?: string,
+) => {
+  let enumItem: EnumItem = await HCDataSource.getEnumOption(mstrucId, enumValue, serverKey);
   if (enumItem) {
     return enumItem.color;
   } else {

package/src/aldehyde/tmpl/hcservice-v3.tsx

@@ -1496,4 +1496,14 @@ export default class HcserviceV3 {
       return false;
     }
   }
+
+  // 测试ws发送消息
+  static async wsPush(hydrocarbonToken) {
+    await Super.super({
+      url: `/v3/ws-push/${hydrocarbonToken}`,
+      data: { message: "测试数据" },
+      method: "POST",
+    });
+    message.success(translate("${已发送}"));
+  }
 }

package/src/aldehyde/tmpl/web-socket.ts

@@ -0,0 +1,337 @@
+import SockJS from 'sockjs-client';
+import { Client, IFrame, IMessage, StompSubscription } from '@stomp/stompjs';
+import Units from "../units";
+
+/**
+ * 使用方法：
+ * const webSocket= WebSocket.getInstance(WS_URL); // 创建连接
+ * const subscribe = webSocket.subscribe('/topic/test',{}, (val)=>{console.log("推送的数据：",val)}); // 订阅
+ * subscribe.unsubscribe(); // 销毁订阅
+ * webSocket.disconnect(); // 关闭连接
+ */
+
+// 获取订阅地址
+const getWebSocketConfig = (path, options) => {
+    const serverKey = options.serverKey;
+    const header = options.connectionHeaders || {};
+    const programCode = header.programCode || Units.programCode(serverKey);
+    let server = new URL(options.hydrocarbonServer ? options.hydrocarbonServer : Units.api(serverKey));
+    let hydrocarbonToken = null;
+    if (header?.hydrocarbonToken) {
+        hydrocarbonToken = header.hydrocarbonToken;
+    } else if (serverKey) {
+        hydrocarbonToken = Units.serverHydrocarbonToken(serverKey)
+    } else if (Units.hydrocarbonToken(programCode)) {
+        hydrocarbonToken = Units.hydrocarbonToken(programCode);
+    } else {
+        hydrocarbonToken = Units.getAnoHydrocarbonToken()
+    }
+    const url = `http://${server.host}${server.pathname}/${path}`;
+    return { url, hydrocarbonToken, programCode };
+}
+
+export interface WebSocketOptions {
+    reconnectDelay?: number; // 重连间隔（ms）
+    heartbeatIncoming?: number; // 接收心跳最大间隔
+    heartbeatOutgoing?: number; // 发送心跳最小间隔
+    debug?: boolean; // 是否开启调试日志
+    connectionHeaders?: { [key: string]: string }; // 创建连接请求头信息
+}
+
+// 全局订阅Map类型
+interface SubscriptionRecord {
+    topic: string;
+    callback: (message: any, rawMessage: IMessage) => void;
+    subscription: StompSubscription | null;
+}
+
+// 订阅队列
+interface QueuedOperation {
+    type: 'SUBSCRIBE' | 'SEND';
+    payload: any;
+}
+
+// 连接状态枚举
+enum ConnectionState {
+    DISCONNECTED = 'DISCONNECTED', // 断开
+    CONNECTING = 'CONNECTING', // 连接中
+    CONNECTED = 'CONNECTED', // 已连接
+    RECONNECTING = 'RECONNECTING', // 重连中
+}
+
+class WebSocket {
+    private static instances = new Map<string, WebSocket>();
+
+    /**
+     * 获取单例实例的唯一入口
+     * @param url WebSocket 服务器地址
+     * @param options 配置项
+     * @returns 返回对应 URL 的唯一 WebSocket 实例
+     */
+    public static getInstance(url: string, options: WebSocketOptions = {}): WebSocket {
+        if (!WebSocket.instances.has(url)) {
+            // 注意：这里调用的是私有的构造函数
+            const instance = new WebSocket(url, options);
+            WebSocket.instances.set(url, instance);
+        }
+        return WebSocket.instances.get(url)!;
+    }
+
+    /**
+     * 私有构造函数
+     * 防止外部直接使用 new WebSocket() 导致单例失效
+     */
+    private constructor(url: string, options: WebSocketOptions = {}) {
+        this.url = url;
+        this.config = { ...this.config, ...options };
+        this.connect();
+    }
+
+    private url: string;
+    private client: Client | null = null;
+    private subscriptions = new Map<string, SubscriptionRecord>();
+    private operationQueue: QueuedOperation[] = [];
+    private state: ConnectionState = ConnectionState.DISCONNECTED;
+    private reconnectTimer: any = null;
+    private connectPromises = new Map<string, { resolve: () => void; reject: (error: Error) => void }>();
+    private config: Required<WebSocketOptions> = {
+        reconnectDelay: 10000,
+        heartbeatIncoming: 10000,
+        heartbeatOutgoing: 10000,
+        debug: false,
+        connectionHeaders: {},
+    };
+
+    // 建立连接
+    public connect(): Promise<void> {
+        if (this.state === ConnectionState.CONNECTED) { // 当前已连接不重复创建连接
+            return Promise.resolve();
+        }
+        this.state = ConnectionState.CONNECTING;
+        const { url: wsUrl, hydrocarbonToken, programCode } = getWebSocketConfig(this.url, this.config);
+        return new Promise<void>((resolve, reject) => {
+            const currentPromiseId = Date.now().toString();
+            this.connectPromises.set(currentPromiseId, { resolve, reject });
+            const { heartbeatIncoming, heartbeatOutgoing, reconnectDelay } = this.config;
+            const socket = new SockJS(wsUrl);
+            this.client = new Client({
+                webSocketFactory: () => socket,
+                // brokerURL: wsUrl,
+                debug: this.config.debug ? (str) => console.log('[STOMP]', str) : () => { },
+                heartbeatIncoming,
+                heartbeatOutgoing,
+                reconnectDelay,
+                connectHeaders: {
+                    "hydrocarbon-token": hydrocarbonToken,
+                    "hydrocarbon-program-token": programCode
+                },
+                onConnect: (frame) => { // 连接成功回调
+                    console.log("连接成功：frame", frame);
+                    this.state = ConnectionState.CONNECTED;
+                    this.connectPromises.forEach(({ resolve }) => resolve());
+                    this.connectPromises.clear();
+                    this._restoreSubscriptions();
+                    this._flushQueue().catch(console.error);
+                },
+                onStompError: (frame: IFrame) => {
+                    console.error('[WS] ❌ STOMP 协议错误', frame);
+                    const error = new Error(frame.headers['message'] || 'STOMP Error');
+                    if (this.state !== ConnectionState.DISCONNECTED) {
+                        this.state = ConnectionState.DISCONNECTED;
+                    }
+                    this.connectPromises.forEach(({ reject }) => reject(error));
+                    this.connectPromises.clear();
+                },
+                onWebSocketClose: () => {
+                    if ([ConnectionState.CONNECTED, ConnectionState.CONNECTING].includes(this.state)) {
+                        console.warn('[WS] ⚠️ 连接意外断开，准备重连...');
+                        this.state = ConnectionState.DISCONNECTED;
+                    }
+                },
+                onWebSocketError: (error) => {
+                    console.error('[WS] ❌ WebSocket 错误', error);
+                    const wsError = new Error('WebSocket Error');
+                    if (this.state !== ConnectionState.DISCONNECTED) {
+                        this.state = ConnectionState.DISCONNECTED;
+                    }
+                    this.connectPromises.forEach(({ reject }) => reject(wsError));
+                    this.connectPromises.clear();
+                },
+            });
+            this.client.activate();
+        });
+    }
+
+    // 订阅请求
+    public async subscribe<T = any>(topic: string, params: { [key: string]: any }, callback: (message: T, rawMessage: IMessage) => void): Promise<StompSubscription> {
+        if (this.state === ConnectionState.CONNECTED && this.client) {
+            return this._doSubscribe(topic, callback, params);
+        } else {
+            return new Promise((resolve, reject) => {
+                this.operationQueue.push({
+                    type: 'SUBSCRIBE',
+                    payload: { topic, callback, resolve, reject, params },
+                });
+            });
+        }
+    }
+
+    // 执行实际订阅
+    private _doSubscribe<T>(topic: string, callback: (message: T, rawMessage: IMessage) => void, params: { [key: string]: any }): Promise<StompSubscription> {
+        return new Promise((resolve, reject) => {
+            if (!this.client) {
+                reject(new Error('Client not initialized'));
+                return;
+            }
+            try {
+                const stompSub = this.client.subscribe(topic, (message: IMessage) => {
+                    try {
+                        let body: any = message.body;
+                        if (typeof message.body === 'string') {
+                            body = JSON.parse(message.body);
+                        }
+                        callback(body, message);
+                    } catch (e) {
+                        console.error('[WS] JSON 解析错误', e);
+                        callback(message.body as any, message);
+                    }
+                }, params || {});
+                // 3. 更新内存记录
+                this.subscriptions.set(topic, {
+                    topic,
+                    callback,
+                    subscription: stompSub // 关键：确保新的 subscription 对象被保存
+                });
+                resolve(stompSub);
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
+    // 发送消息
+    public send(destination: string, body: any): void {
+        if (this.state === ConnectionState.CONNECTED && this.client) {
+            try {
+                this.client.publish({
+                    destination,
+                    body: typeof body === 'string' ? body : JSON.stringify(body),
+                    headers: { 'content-type': 'application/json' },
+                });
+            } catch (error) {
+                console.error('[WS] 发送消息失败:', error);
+            }
+        } else {
+            this.operationQueue.push({ type: 'SEND', payload: { destination, body } });
+        }
+    }
+
+    // 取消订阅
+    public unsubscribe(topic: string): boolean {
+        const record = this.subscriptions.get(topic);
+        if (record) {
+            record.subscription?.unsubscribe();
+            this.subscriptions.delete(topic);
+            console.log(`[WS] 🚫 已取消订阅: ${topic}`);
+            return true;
+        }
+        return false;
+    }
+
+    // 取消所有订阅
+    public unsubscribeAll(): void {
+        this.subscriptions.forEach((record) => {
+            record.subscription?.unsubscribe();
+        });
+        this.subscriptions.clear();
+        console.log('[WS] 🚫 已取消所有订阅');
+    }
+
+    // 断开连接
+    public disconnect(): void {
+        this.state = ConnectionState.DISCONNECTED;
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        if (this.client) {
+            WebSocket.instances.delete(this.client.webSocket.url);
+            this.client.deactivate();
+            this.client = null;
+        }
+        this.unsubscribeAll();
+        this.operationQueue = [];
+        this.connectPromises.forEach(({ reject }) => {
+            reject(new Error('Connection manually disconnected'));
+        });
+        this.connectPromises.clear();
+        console.log('[WS] 🔌 客户端已主动断开');
+    }
+
+    // 当前订阅数量
+    public getSubscriptionCount(): number {
+        return this.subscriptions.size;
+    }
+
+    // 连接后恢复订阅
+    private _restoreSubscriptions() {
+        if (this.subscriptions.size === 0 || !this.client) return;
+        console.log(`[WS] 🔄 正在恢复 ${this.subscriptions.size} 个订阅...`);
+        this.subscriptions.forEach((record, topic) => {
+            try {
+                const stompSub = this.client.subscribe(topic, (message: IMessage) => {
+                    try {
+                        let body: any = message.body;
+                        if (typeof message.body === 'string') {
+                            body = JSON.parse(message.body);
+                        }
+                        record.callback(body, message);
+                    } catch (e) {
+                        record.callback(message.body, message);
+                    }
+                });
+                record.subscription = stompSub;
+            } catch (error) {
+                console.error(`[WS] 恢复订阅失败: ${topic}`, error);
+            }
+        });
+    }
+
+    // 订阅队列
+    private async _flushQueue() {
+        if (this.operationQueue.length === 0) return;
+        console.log(`[WS] 🚀 正在执行 ${this.operationQueue.length} 个排队操作...`);
+        const queue = [...this.operationQueue];
+        this.operationQueue = [];
+        for (const op of queue) {
+            try {
+                if (op.type === 'SUBSCRIBE') {
+                    const { topic, callback, resolve, reject, params } = op.payload;
+                    try {
+                        const subscription = await this._doSubscribe(topic, callback, params);
+                        resolve(subscription);
+                    } catch (error) {
+                        reject(error);
+                    }
+                } else if (op.type === 'SEND') {
+                    const { destination, body } = op.payload;
+                    this.send(destination, body);
+                }
+            } catch (error) {
+                console.error('[WS] 执行队列操作失败:', error);
+            }
+        }
+    }
+
+    // 判断是否已连接
+    public isConnected(): boolean {
+        return this.state === ConnectionState.CONNECTED;
+    }
+
+    // 获取所有订阅的topic
+    public getSubscribedTopics(): string[] {
+        return Array.from(this.subscriptions.keys());
+    }
+}
+
+export default WebSocket;