light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/left/global-variable/GlobalVariable.less

@@ -0,0 +1,231 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+.global-variable {
+  width: 300px;
+  height: 100%;
+  background-color: #1E1E2F;
+  border-right: 1px solid #3A3A4E;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Inter', 'Helvetica Neue', sans-serif;
+
+  .global-variable-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    height: 56px;
+    border-bottom: 1px solid #3A3A4E;
+
+    .global-variable-title {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 28px;
+      color: #FFFFFF;
+    }
+
+    .operate-buttons {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .add-icon, .close-icon {
+        color: #A0A0B2;
+        cursor: pointer;
+        padding: 6px;
+        border-radius: 4px;
+        transition: all 0.2s;
+
+        &:hover {
+          color: #4FB8FF;
+          background-color: rgba(79, 184, 255, 0.1);
+        }
+      }
+    }
+  }
+
+  .global-variable-body {
+    flex: 1;
+    padding: 16px 20px;
+    overflow-y: auto;
+
+    .gv-item {
+      margin-bottom: 12px;
+      background-color: #2C2C3E;
+      border-radius: 8px;
+      border: 1px solid #3A3A4E;
+      transition: all 0.2s;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+      &:hover {
+        border-color: #4FB8FF;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+        .gv-operate {
+          opacity: 1;
+        }
+      }
+
+      .gv-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+      }
+
+      .gv-name {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        line-height: 20px;
+        color: #FFFFFF;
+        flex: 1;
+        min-width: 0;
+
+        .gv-prefix {
+          color: #4FB8FF;
+          font-weight: 600;
+          font-size: 16px;
+        }
+
+        .gv-key {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .gv-badge {
+          .ant-badge-count {
+            background-color: #4FB8FF;
+            color: #FFFFFF;
+            font-size: 11px;
+            font-weight: 500;
+            height: 18px;
+            min-width: 18px;
+            line-height: 18px;
+            box-shadow: 0 0 0 1px #2C2C3E;
+          }
+        }
+      }
+
+      .gv-operate {
+        display: flex;
+        gap: 12px;
+        opacity: 0;
+        transition: opacity 0.2s;
+
+        .gv-action {
+          font-size: 12px;
+          line-height: 16px;
+          color: #4FB8FF;
+          cursor: pointer;
+          transition: color 0.2s;
+
+          &:hover {
+            color: #7ACFFF;
+          }
+
+          &.delete {
+            color: #FF6E6E;
+
+            &:hover {
+              color: #FF9B9B;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Popconfirm 样式覆盖
+.global-variable-popconfirm {
+  .ant-popover-inner {
+    background-color: #2C2C3E;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+    .ant-popconfirm-title {
+      color: #FFFFFF;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .ant-popconfirm-description {
+      color: #A0A0B2;
+      font-size: 13px;
+      margin-top: 4px;
+    }
+
+    .ant-popconfirm-buttons {
+      margin-top: 16px;
+
+      button {
+        border-radius: 4px;
+        height: 32px;
+        padding: 0 16px;
+        font-size: 13px;
+        font-weight: 500;
+
+        &.ant-btn-primary {
+          background-color: #FF6E6E;
+          border-color: #FF6E6E;
+
+          &:hover {
+            background-color: #FF8585;
+            border-color: #FF8585;
+          }
+        }
+
+        &.ant-btn-default {
+          background-color: transparent;
+          border-color: #3A3A4E;
+          color: #A0A0B2;
+
+          &:hover {
+            border-color: #4FB8FF;
+            color: #4FB8FF;
+          }
+        }
+      }
+    }
+  }
+}
+
+.global-variable-edit-panel {
+  background-color: #2C2C3E;
+  border-radius: 8px;
+  margin: 16px;
+  height: calc(100vh - 200px);
+  overflow-y: auto;
+
+  .data-config {
+    padding: 0;
+    margin-top: 16px;
+  }
+
+  .global-variable-save-btn {
+    margin-top: 20px;
+    height: 36px;
+    width: 100%;
+    background-color: #4FB8FF;
+    border-color: #4FB8FF;
+    border-radius: 4px;
+    font-weight: 500;
+
+    &:hover {
+      background-color: #7ACFFF;
+      border-color: #7ACFFF;
+    }
+  }
+}

package/light-chaser-app/src/designer/left/global-variable/GlobalVariable.ts

@@ -0,0 +1,151 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {IGlobalVariable} from "light-chaser-types/types/GlobalVariableTypes.ts";
+import {DataConfigType} from "light-chaser-types/types/DataSourceTypes.ts";
+import {DesignerMode} from "light-chaser-types/types/DesignerTypes.ts";
+import ComponentDataUpdater from "../../../framework/core/tools/ComponentDataUpdater.ts";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController.ts";
+import BPExecutor from "../../blueprint/core/BPExecutor.ts";
+import DataUtil from "../../../util/DataUtil.ts";
+
+type IGvDependency = {
+    controllers: Record<string, AbstractDesignerController>
+}
+
+class GlobalVariable {
+    /**
+     * 全局变量唯一id
+     */
+    id: string;
+    /**
+     * 全局变量的key
+     */
+    key: string;
+    /**
+     * 值
+     */
+    value: any;
+    /**
+     * 触发来源
+     */
+    triggerSource?: DataConfigType;
+    /**
+     * 绑定的组件id
+     */
+    bindTarget: string[];
+    /**
+     * 修改变量的数据后绑定的组件是否重新渲染
+     */
+    reRender?: boolean;
+
+    private updater: ComponentDataUpdater[] = [];
+    private starterUpdater: ComponentDataUpdater | null = null;
+    private dependency: IGvDependency = {controllers: {}};
+    private bpExecutor: BPExecutor | null = null;
+
+    constructor(id: string, key: string, value: any, reRender: boolean, bindTarget?: string[], triggerSource?: DataConfigType) {
+        this.id = id;
+        this.key = key;
+        this.value = value;
+        this.reRender = reRender;
+        this.bindTarget = bindTarget ?? [];
+        this.triggerSource = triggerSource;
+    }
+
+    getGlobalVariable = (): IGlobalVariable => {
+        return {
+            id: this.id,
+            key: this.key,
+            value: this.value,
+            triggerSource: this.triggerSource,
+            bindTarget: this.bindTarget,
+            reRender: this.reRender
+        }
+    }
+
+    /**
+     * 用于编辑全局变量时的更新操作
+     * @param gv
+     */
+    update = (gv: IGlobalVariable) => {
+        if (!gv || !gv.id || gv.id !== this.id)
+            return;
+        gv.key && (this.key = gv.key);
+        gv.value && (this.value = gv.value);
+        if (gv.reRender != null)
+            this.reRender = gv.reRender;
+        if (gv.triggerSource) {
+            this.triggerSource = gv.triggerSource;
+            //如果全局变量取的静态数据的值，更新全局变量配置应该立即更新全局变量的value值。确保静态数据始终为最新
+            if (gv.triggerSource?.sourceType === 'static')
+                this.value = DataUtil.getStaticData(gv.triggerSource?.staticData);
+        }
+    }
+
+    /**
+     * 设置全局变量的值
+     */
+    setValue = (value: any) => {
+        this.value = value;
+        if (window.LC_ENV.mode !== DesignerMode.EDIT) {
+            if (this.reRender && this.bindTarget && this.bindTarget.length > 0) {
+                this.updater.forEach(updater => updater.destroy());
+                this.updater = [];
+                //主动触发组件数据更新
+                this.bindTarget.forEach(id => {
+                    const controller = this.dependency?.controllers[id];
+                    const updater = new ComponentDataUpdater(
+                        (data: any) => {
+                            controller?.changeData(data);
+                        },
+                        () => {
+                            console.log("全局变量驱动组件更新失败");
+                        });
+                    updater.run(controller?.getConfig().data, true);
+                    this.updater.push(updater);
+                })
+            }
+            //主动触发蓝图事件
+            this.bpExecutor?.triggerComponentEvent(this.id, "gvDataChange", this.value);
+        }
+    }
+
+    /**
+     * 启动全局变量的配置，如果设置了定时触发的数据源，则启动定时器
+     */
+    start = (dependency: IGvDependency, bpExecutor: BPExecutor) => {
+        if (this.triggerSource) {
+            const starterUpdater = new ComponentDataUpdater(
+                (data: any) => {
+                    this.setValue(data);
+                },
+                () => {
+                    console.log("全局变量数据更新失败");
+                });
+            starterUpdater.run(this.triggerSource!);
+            this.dependency = dependency;
+            this.starterUpdater = starterUpdater;
+            this.bpExecutor = bpExecutor;
+        }
+    }
+
+    /**
+     * 停止运行的全局变量依赖，停止建立的数据连接（mqtt，websocket）
+     */
+    stop = () => {
+        this.updater.forEach(updater => updater.destroy());
+        this.starterUpdater?.destroy();
+    }
+
+}
+
+export default GlobalVariable;

package/light-chaser-app/src/designer/left/global-variable/GlobalVariableEditPanel.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {Modal} from "antd";
+import {observer} from "mobx-react";
+import {Control} from "light-chaser-ui/lib/types.ts";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import DataSourceConfig from "../../../comps/common-component/data-source-config/DataSourceConfig.tsx";
+import './GlobalVariable.less';
+import ObjectUtil from "light-chaser-util/lib/ObjectUtil.ts";
+import {DataConfigType} from "light-chaser-types/types/DataSourceTypes.ts";
+
+const GlobalVariableEditPanel = observer(() => {
+
+    const {globalVariableManager} = window.LC_ENV.currentManager!;
+    const {
+        editGlobalVariable,
+        createOrUpdateGlobalVariable,
+        setEditGlobalVariable,
+        setEditPanelVisible
+    } = globalVariableManager;
+    const schema: Control = {
+        type: 'grid',
+        children: [
+            {
+                key: 'key',
+                type: 'input',
+                label: '变量名',
+                value: editGlobalVariable?.key
+            },
+            {
+                key: 'reRender',
+                type: 'switch',
+                label: '主动渲染',
+                tip: '开启后，修改该变量数据时，会主动触发绑定了该变量的组件进行一次重新渲染，可以立马刷新组件数据',
+                value: editGlobalVariable?.reRender
+            }
+        ]
+    }
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        const {editGlobalVariable} = globalVariableManager;
+        setEditGlobalVariable(ObjectUtil.merge(editGlobalVariable, dataFragment));
+    }
+
+
+    return (
+        <Modal title={editGlobalVariable?.id ? '编辑全局变量' : '新建全局变量'} open={true} footer={null}
+               centered={true} width={500} maskClosable={false}
+               onCancel={() => setEditPanelVisible(false)}>
+            <div className="global-variable-edit-panel">
+                <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+                <DataSourceConfig data={editGlobalVariable?.triggerSource ?? {sourceType: 'static'}}
+                                  range={['static', 'api', 'database', 'commonApi', 'webSocket', 'mqtt']}
+                                  onSave={(config: DataConfigType) => {
+                                      setEditGlobalVariable(ObjectUtil.merge(globalVariableManager.editGlobalVariable, {triggerSource: config, value: config.value}));
+                                      createOrUpdateGlobalVariable();
+                                  }}
+                />
+                <p style={{
+                    color: '#959595',
+                    margin: '10px 0 0 0',
+                    fontSize: 12
+                }}>提示：任何情况下，都建议你设置静态数据值，他将作为当前变量的默认值使用，当其他数据来源没有首次更新数据时，会使用默认值作为当前变量的值</p>
+            </div>
+        </Modal>
+    )
+})
+
+export default GlobalVariableEditPanel;

package/light-chaser-app/src/designer/left/global-variable/GlobalVariableList.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import './GlobalVariable.less';
+import {Close, Help, Plus} from "@icon-park/react";
+import designerLeftStore from "../DesignerLeftStore.ts";
+import eventOperateStore from "../../operate-provider/EventOperateStore.ts";
+import {observer} from "mobx-react";
+import {Badge, Popconfirm} from 'antd';
+import GlobalVariableEditPanel from "./GlobalVariableEditPanel.tsx";
+
+const GlobalVariableList = observer(() => {
+    const {globalVariableManager} = window.LC_ENV.currentManager!;
+    const {
+        globalVariableInstance,
+        setEditPanelVisible,
+        editPanelVisible,
+        deleteGlobalVariable,
+        copyGlobalVariable,
+        activeGlobalVariable
+    } = globalVariableManager;
+    return (
+        <div className={'global-variable'}>
+            <div className={'global-variable-header'}>
+                <div className="global-variable-title">全局变量</div>
+                <div className="operate-buttons">
+                    <Plus className='add-icon' size={16} onClick={() => setEditPanelVisible(true)}/>
+                    <Close className="close-icon" size={16} onClick={() => {
+                        const {setMenu} = designerLeftStore;
+                        setMenu("");
+                        const {rulerRef} = eventOperateStore;
+                        rulerRef?.ruleWheel();
+                    }}/>
+                </div>
+            </div>
+            <div className={'global-variable-body'}>
+                {
+                    Object.values(globalVariableInstance).map((gv) => {
+                        return <div className={'gv-item'} key={gv.id}>
+                            <div className={'gv-content'}>
+                                <div className={'gv-name'}>
+                                    <span className="gv-prefix">#</span>
+                                    <span className="gv-key">{gv.key}</span>
+                                    {gv.bindTarget.length > 0 &&
+                                        <Badge count={gv.bindTarget.length}
+                                               className="gv-badge"
+                                               color={'#4FB8FF'}
+                                               size={"small"}/>
+                                    }
+                                </div>
+                                <div className={'gv-operate'}>
+                        <span className="gv-action" onClick={() => {
+                            activeGlobalVariable(gv.id);
+                            setEditPanelVisible(true);
+                        }}>编辑</span>
+                                    <span className="gv-action" onClick={() => {
+                                        copyGlobalVariable(gv.id);
+                                    }}>复制</span>
+                                    <Popconfirm
+                                        title="提示信息"
+                                        icon={<Help style={{color: '#FF6E6E'}}/>}
+                                        description="删除后无法撤销，确认删除嘛？"
+                                        onConfirm={() => deleteGlobalVariable(gv.id)}
+                                        okText="是"
+                                        cancelText="否"
+                                        overlayClassName="global-variable-popconfirm"
+                                    >
+                                        <span className="gv-action delete">删除</span>
+                                    </Popconfirm>
+                                </div>
+                            </div>
+                        </div>
+                    })
+                }
+            </div>
+            {editPanelVisible && <GlobalVariableEditPanel/>}
+        </div>
+    )
+})
+
+export default GlobalVariableList;