light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/loader/DesignerLoader.ts

@@ -0,0 +1,334 @@
+/*
+ * 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 AbstractDesignerDefinition from "../../framework/core/AbstractDesignerDefinition.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {AbstractBPNodeController} from "../blueprint/node/core/AbstractBPNodeController.ts";
+import {DesignerMode, DesignerScene, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import baseApi from "../../api/engineering/BaseApi.ts";
+import {ISelectOption} from "light-chaser-ui/lib/select/Select.tsx";
+import {componentCategorize} from "../left/compoent-lib/ComponentCategorize.ts";
+import DesignerManager from "../manager/DesignerManager.ts";
+import {action, makeObservable, observable} from "mobx";
+import EventUtil from "../blueprint/util/EventUtil.ts";
+import AuthFetchUtil from "../../util/AuthFetchUtil.ts";
+
+export default class DesignerLoader {
+
+    constructor(mode: DesignerMode) {
+        this.mode = mode;
+        makeObservable(this, {
+            loaded: observable,
+            setLoaded: action,
+        });
+    }
+
+
+    //自定义组件信息映射
+    public static definitionMap: Record<string, AbstractDesignerDefinition> = {};
+    //蓝图节点控制器模板
+    public static bpControllerMap: Record<string, ClazzTemplate<AbstractBPNodeController>> = {};
+    //服务器组件信息映射
+    public static remoteScriptMap: Record<string, { id: string, script: string }> = {};
+    //设计器所处模式：编辑、预览、发布
+    public mode: DesignerMode = DesignerMode.EDIT;
+    //设计器是否已加载完成
+    public loaded: boolean = false;
+    //字体列表
+    public fonts: ISelectOption[] = [];
+    //当前loader绑定的项目管理器
+    public designerManager: DesignerManager = new DesignerManager(DesignerScene.DEFAULT);
+    //项目基础信息
+    public projectInfo: { id?: string, name?: string } = {};
+
+    public setLoaded = (loaded: boolean) => this.loaded = loaded;
+
+    /**
+     * 加载服务器组件
+     */
+    public loadRemoteComponents = async () => {
+        const remoteComponentList = await baseApi.getAllRemoteComponents();
+        if (remoteComponentList.length === 0) return;
+
+        const results = await Promise.allSettled(
+            remoteComponentList.map(script => {
+                    script.id = script.url.substring(script.url.lastIndexOf("/") + 1);
+                    return this.loadScript(script).catch(err => {
+                        console.error(`加载远程组件失败 [${script.id}]:`, err);
+                        throw {script, err}; // 抛出自定义对象用于后续识别
+                    })
+                }
+            )
+        );
+
+        const failed = results.filter(r => r.status === 'rejected') as PromiseRejectedResult[];
+        if (failed.length > 0)
+            console.warn(`有 ${failed.length} 个远程组件加载失败：`, failed.map(f => f.reason.script?.url));
+    };
+
+
+    /**
+     * 加载脚本(服务器组件的脚本)
+     * @param script
+     */
+    public loadScript = (script: { id: string; url: string }): Promise<null> => {
+        return new Promise((resolve, reject) => {
+            if (!script?.url)
+                return reject(new Error('Script URL is required.'));
+            // 防止重复加载
+            if (document.querySelector(`script[data-id="${script.id}"]`))
+                return resolve(null);
+
+            const scriptTag = document.createElement('script');
+            scriptTag.src = script.url;
+            scriptTag.async = true;
+            scriptTag.type = 'text/javascript';
+            scriptTag.setAttribute('data-id', script.id);
+
+            // 成功加载
+            scriptTag.onload = () => {
+                try {
+                    const Definition = window.__LIGHT_CHASER_REMOTE_COMPONENT_TEMP__ as ClazzTemplate<AbstractDesignerDefinition>;
+                    if (!Definition)
+                        return reject(new Error('Remote component not found on window.'));
+
+                    this.initDefinition(Definition, (definition) => {
+                        const baseInfo = definition.getBaseInfo();
+                        DesignerLoader.remoteScriptMap[baseInfo.compKey] = {
+                            id: script.id,
+                            script: script.url
+                        };
+                        resolve(null);
+                    });
+                } catch (err) {
+                    console.error('Error initializing definition: ' + (err as Error).message);
+                    scriptTag.remove();
+                    reject(new Error('Error initializing definition: ' + (err as Error).message));
+                }
+            };
+
+            // 加载失败
+            scriptTag.onerror = () => {
+                console.warn(`Failed to load script: ${script.url}`)
+                scriptTag.remove();
+                reject(new Error('Failed to load script: ' + script.url));
+            };
+
+            document.body.appendChild(scriptTag);
+        });
+    };
+
+
+    /**
+     * 加载服务器字体
+     */
+    public loadFonts() {
+        AuthFetchUtil.get<any>("/api/font/list").then(response => {
+            if (response !== null) {
+                const options: ISelectOption[] = [{label: "默认字体", value: ""}];
+                response.forEach((item: any) => {
+                    const {name, url} = item;
+                    options.push({label: name, value: name});
+                    const font = new FontFace(name, `url(${url})`);
+                    font.load().then((loadedFont) => {
+                        document.fonts.add(loadedFont);
+                    }).catch((error) => {
+                        console.error(`加载字体 "${name}" 失败: `, error);
+                    });
+                })
+                this.fonts.push(...options);
+            } else {
+                console.warn("获取服务器字体失败");
+            }
+        })
+    }
+
+    /**
+     * 加载动态脚本
+     */
+    public async loadDynamicScript(projectId?: string): Promise<void> {
+        return AuthFetchUtil.get<any>(`/api/dynamicScript/list?projectId=${projectId}`, {})
+            .then(response => {
+                if (response === null || !Array.isArray(response)) {
+                    console.warn("获取动态脚本列表失败");
+                    return;
+                }
+
+                const loadScript = (url: string) => {
+                    return new Promise<void>((resolve) => {
+                        const scriptTag = document.createElement('script');
+                        scriptTag.src = url;
+                        scriptTag.async = true;
+                        scriptTag.onload = () => resolve();
+                        scriptTag.onerror = () => {
+                            console.error(`动态脚本加载失败: ${url}`);
+                            resolve();
+                        };
+                        document.body.appendChild(scriptTag);
+                    });
+                };
+
+                const promises = response.map((script: any) => loadScript(script?.url));
+                return Promise.all(promises).then(() => {
+                    return;
+                });
+            })
+            .catch(err => {
+                console.error("动态脚本加载请求失败:", err);
+                return;
+            });
+    }
+
+
+    /**
+     * 初始化各组件的definition定义
+     */
+    public initDefinition = (Definition: ClazzTemplate<AbstractDesignerDefinition>, initAfter?: (ins: AbstractDesignerDefinition) => void) => {
+        if (!Definition) return;
+        const definition = new Definition();
+        if (!definition) return;
+        initAfter && initAfter(definition);
+        //获取组件的基础信息
+        if (typeof definition.getBaseInfo === "function") {
+            const compKey = definition.getBaseInfo().compKey;
+            if (compKey)
+                DesignerLoader.definitionMap[compKey] = definition;
+        }
+        //获取自定义分类
+        if (typeof definition.getCategorize === "function") {
+            const categorize = definition.getCategorize();
+            if (categorize) {
+                if (!categorize.icon)
+                    console.error("自定义组件的分类必须指定icon");
+                else
+                    componentCategorize.push(categorize);
+            }
+        }
+        //获取自定义子类型
+        if (typeof definition.getSubCategorize === "function") {
+            const subCategorize = definition.getSubCategorize();
+            if (subCategorize) {
+                if (!subCategorize.parentKey)
+                    console.error("自定义组件的子类型必须指定parentKey");
+                else
+                    componentCategorize.push(subCategorize);
+            }
+        }
+    }
+
+    /**
+     * 扫描集成的标准组件
+     */
+    public scanComponents(): void {
+        const glob = import.meta.glob('../../comps/**/*.ts', {eager: true}) as Record<string, any>;
+        for (const key of Object.keys(glob)) {
+            const Definition = glob[key]?.default;
+            // eslint-disable-next-line no-prototype-builtins
+            if (Definition && AbstractDesignerDefinition.isPrototypeOf(Definition)) {
+                this.initDefinition(Definition);
+            }
+        }
+    }
+
+    /**
+     * 扫描蓝图节点控制器模板
+     */
+    public scanBPController(): void {
+        const glob = import.meta.glob('../blueprint/node/core/impl/**/*.ts', {eager: true}) as Record<string, any>;
+        for (const key of Object.keys(glob)) {
+            const Clazz = glob[key]?.default as ClazzTemplate<AbstractBPNodeController>;
+            // eslint-disable-next-line no-prototype-builtins
+            if (Clazz && AbstractBPNodeController.isPrototypeOf(Clazz)) {
+                DesignerLoader.bpControllerMap[Clazz.name.replaceAll("Controller", "")] = Clazz;
+            }
+        }
+    }
+
+    /**
+     * 获取项目数据
+     * @param id 项目id
+     */
+    public getProjectData(id: string): Promise<IDesignerManager | null> {
+        throw new Error(`Please implement the method in a subclass: ${id}`);
+    }
+
+    /**
+     * 初始化项目运行环境
+     * @param projectId 项目id
+     * @param manager 项目管理器
+     */
+    public initializeRuntimeEnv(projectId: string, manager: DesignerManager): void {
+        throw new Error(`Please implement the method in a subclass: ${projectId} ===> ${manager}`);
+    }
+
+    /**
+     * 触发组件加载完成事件、蓝图全局节点加载完成事件、蓝图定时器节点定时出发事件
+     */
+    public triggerGlobalEvent = (manager: DesignerManager) => {
+        if (this.mode === DesignerMode.EDIT)
+            return;
+        EventUtil.triggerGlobalEvent(manager);
+    }
+
+    public async initDesignerManager(designerManager?: IDesignerManager) {
+        if (!designerManager)
+            throw new Error('未加载到项目数据...', designerManager);
+        this.designerManager.init(designerManager, this.mode);
+    }
+
+    /**
+     * 加载整个设计器的所有资源，模板方法模式
+     */
+    public async load(id: string) {
+        //加载服务器字体
+        this.loadFonts();
+        //加载三方扩展脚本
+        await this.loadDynamicScript(id);
+        //加载服务器组件
+        await this.loadRemoteComponents();
+        //扫描标准组件
+        this.scanComponents();
+        //扫描蓝图
+        this.scanBPController();
+        //加载数据
+        const projectData = await this.getProjectData(id);
+        //创建designerManager
+        await this.initDesignerManager(projectData ?? undefined)
+        //初始化运行环境
+        this.initializeRuntimeEnv(id, this.designerManager);
+        //触发全局事件
+        this.triggerGlobalEvent(this.designerManager);
+    }
+
+    /**
+     * 精简加载，适用于大屏应用场景下的加载过程，只加载必要字段，
+     * 1. 不需要重复扫描标准组件
+     * 2. 不需要重复扫描蓝图
+     * 2. 不做环境变量的初始化操作
+     * @param id 项目id
+     */
+    public async simpleLoad(id: string): Promise<void> {
+        //加载服务器字体
+        this.loadFonts();
+        //加载三方扩展脚本
+        await this.loadDynamicScript(id);
+        //加载服务器组件
+        await this.loadRemoteComponents();
+        //扫描标准组件
+        this.scanComponents();
+        //加载数据
+        const projectData = await this.getProjectData(id);
+        //创建designerManager
+        await this.initDesignerManager(projectData ?? undefined)
+        //触发全局事件
+        this.triggerGlobalEvent(this.designerManager);
+    }
+}

package/light-chaser-app/src/designer/loader/EditDesignerLoader.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 DesignerLoader from "./DesignerLoader.ts";
+import {DesignerMode, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import baseApi from "../../api/engineering/BaseApi.ts";
+import DesignerManager from "../manager/DesignerManager.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import managerStore from "../manager/ManagerStore.ts";
+import {startAutoSave} from "../footer/auto-save/AutoSaveManager.ts";
+import {getSaveData} from "../operate-provider/hot-key/HotKeyImpl.ts";
+import enhanceFetch from "../footer/auto-save/EnhanceFetch.ts";
+import footerStore from "../footer/FooterStore.ts";
+
+export default class EditDesignerLoader extends DesignerLoader {
+
+    /**
+     * 加载编辑模式下的下项目数据
+     * @param id 项目id
+     */
+    async getProjectData(id: string): Promise<IDesignerManager | null> {
+        const res = await baseApi.getProjectData(id);
+        if (!res)
+            return null;
+        const {id: projectId, name, data} = res!;
+        this.projectInfo = {id, name}
+        data!.id = projectId;
+        data!.name = name;
+        return data!;
+    }
+
+    initializeRuntimeEnv(projectId: string, manager: DesignerManager) {
+        if (manager) {
+            //暴露必要的环境到 window
+            window.LC_ENV = {
+                ...window.LC_ENV,
+                projectId,
+                mode: DesignerMode.EDIT,
+                controllers: manager.layerManager.controllers,
+                definitions: DesignerLoader.definitionMap,
+                remoteScripts: DesignerLoader.remoteScriptMap,
+                fonts: this.fonts,
+                currentManager: manager,
+                mainManger: manager,
+            }
+            managerStore.pushManager(manager);
+            managerStore.setCurrentManager(manager);
+            this.setLoaded(true);
+        } else {
+            globalMessage?.messageApi?.error("未加载到项目数据，请联系管理员");
+        }
+    }
+
+
+    async load(id: string): Promise<void> {
+        await super.load(id);
+        startAutoSave(`LCP_${id}`, 1000 * 60 * 5,
+            () => JSON.stringify(getSaveData()),
+            () => ({...this.projectInfo}));
+        enhanceFetch();
+        const timer = window.setTimeout(() => {
+            const hasErr = localStorage.getItem(`PROJECT_ERROR_${window.LC_ENV.projectId}`) === '1';
+            if (hasErr)
+                footerStore.setSnapshotRecoveryVisible(true);
+            clearTimeout(timer);
+        }, 2000)
+    }
+}

package/light-chaser-app/src/designer/loader/PureReleaseDesignerLoader.ts

@@ -0,0 +1,123 @@
+/*
+ * 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 DesignerLoader from "./DesignerLoader.ts";
+import {DesignerMode, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import DesignerManager from "../manager/DesignerManager.ts";
+import {getApi} from "../../api/engineering/ApiManager.ts";
+
+export interface ProjectDependency {
+    id: string;
+    name: string;
+    projectJson: string;
+    fonts: Array<{ name: string, value: string }>;
+    dynamicScripts: Array<{ name: string, value: string }>;
+    components: Array<{ name: string, value: string }>;
+}
+
+
+export default class PureReleaseDesignerLoader extends DesignerLoader {
+
+    private projectDependency: ProjectDependency | null = null;
+
+    public async load(id: string): Promise<void> {
+        const data = await getApi().getProjectData(id) as any;
+        if (data) {
+            this.projectDependency = JSON.parse(data.dataJson);
+            this.projectInfo = {id: this.projectDependency?.id, name: this.projectDependency?.name};
+            await super.load(id);
+        }
+    }
+
+    public loadFonts() {
+        this.projectDependency?.fonts?.forEach((fontItem) => {
+            const {name, value} = fontItem;
+            console.log(`${name}: ${value}`);
+            const font = new FontFace(name, `url(${value})`);
+            font.load().then((loadedFont) => {
+                document.fonts.add(loadedFont);
+            }).catch((error) => {
+                console.error(`Failed to load font "${name}":`, error);
+            });
+        });
+    }
+
+    public async loadDynamicScript() {
+        const promises = this.projectDependency?.dynamicScripts.map((scriptItem) => {
+            return new Promise<void>((resolve) => {
+                const {name, value} = scriptItem;
+                console.info(`加载动态脚本${name}: ${value}`)
+                const scriptTag = document.createElement('script');
+                scriptTag.src = value;
+                scriptTag.async = true;
+                scriptTag.onload = () => resolve();
+                scriptTag.onerror = () => {
+                    console.error(`动态脚本加载失败: ${scriptTag.src}`);
+                    resolve();
+                };
+                document.body.appendChild(scriptTag);
+            })
+        })
+
+        Promise.all(promises ?? []).then(() => {
+            return;
+        })
+    }
+
+    loadRemoteComponents = async () => {
+        await Promise.all((this.projectDependency?.components ?? []).map(componentItem => {
+            const {name, value} = componentItem;
+            console.info(`加载服务器组件${name}: ${value}`)
+            const id = value.substring(value.lastIndexOf("/") + 1);
+            return this.loadScript({id, url: value})
+        }));
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async getProjectData(id: string): Promise<IDesignerManager | null> {
+        const manager = JSON.parse(this.projectDependency?.projectJson ?? '');
+        if (manager) {
+            const {id, name} = this.projectDependency!;
+            manager.id = id;
+            manager.name = name;
+        }
+        return manager;
+    }
+
+    initializeRuntimeEnv(projectId: string, manager: DesignerManager) {
+        if (manager) {
+            this.mode = DesignerMode.PURE_SHOW;
+            //暴露必要的环境到 window
+            window.LC_ENV = {
+                ...window.LC_ENV,
+                projectId,
+                mode: DesignerMode.PURE_SHOW,
+                controllers: manager.layerManager.controllers,
+                definitions: DesignerLoader.definitionMap,
+                remoteScripts: DesignerLoader.remoteScriptMap,
+                currentManager: manager,
+            }
+            this.setLoaded(true);
+        } else {
+            globalMessage?.messageApi?.error("项目不存在");
+        }
+    }
+
+    async simpleLoad(id: string): Promise<void> {
+        const data = await getApi().getProjectData(id) as any;
+        if (data) {
+            this.projectDependency = JSON.parse(data.dataJson);
+            await super.simpleLoad(id);
+        }
+    }
+}

package/light-chaser-app/src/designer/loader/ReleaseDesignerLoader.ts

@@ -0,0 +1,129 @@
+/*
+ * 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 DesignerLoader from "./DesignerLoader.ts";
+import {DesignerMode, IDesignerManager} from "light-chaser-types/types/DesignerTypes.ts";
+import DesignerManager from "../manager/DesignerManager.ts";
+import {EncryptResult, HybridCryptoUtil} from "../../util/HybridCryptoUtil.ts";
+import FetchUtil from "../../util/FetchUtil.ts";
+
+export default class ReleaseDesignerLoader extends DesignerLoader {
+
+    /**
+     * 查看项目所需密码
+     */
+    public pwd: string | null = null;
+
+    /**
+     * 项目依赖 + 项目数据
+     */
+    public projectBundle: any = null;
+
+    /**
+     * 获取发布模式下项目数据
+     * @param id
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async getProjectData(id: string): Promise<IDesignerManager | null> {
+        if (this.projectBundle) {
+            const {projectJson} = this.projectBundle;
+            const manager = JSON.parse(projectJson);
+            manager.id = this.projectInfo?.id;
+            manager.name = this.projectInfo?.name;
+            return manager;
+        }
+        return null
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async loadDynamicScript(projectId?: string): Promise<void> {
+        const promises = this.projectBundle?.dynamicScripts?.map((script: any) => {
+            return new Promise<void>((resolve) => {
+                const scriptTag = document.createElement('script');
+                scriptTag.src = new URL(script.value, window.location.origin).toString();
+                scriptTag.async = true;
+                scriptTag.onload = () => resolve();
+                scriptTag.onerror = () => {
+                    console.error(`动态脚本加载失败: ${scriptTag.src}`);
+                    resolve();
+                };
+                document.body.appendChild(scriptTag);
+            })
+        })
+        return Promise.all(promises).then(() => {
+            return;
+        });
+
+    }
+
+    loadFonts() {
+        if (this.projectBundle?.fonts) {
+            this.projectBundle.fonts.forEach((item: any) => {
+                const {name, value} = item;
+                const fontUrl = new URL(value, window.location.origin).toString();
+                const font = new FontFace(name, `url(${fontUrl})`);
+                font.load().then((loadedFont) => {
+                    document.fonts.add(loadedFont);
+                }).catch((error) => {
+                    console.error(`Failed to load font "${name}":`, error);
+                });
+            })
+        }
+    }
+
+    loadRemoteComponents = async () => {
+        if (this.projectBundle?.components) {
+            // 使用 Promise.all 等待所有脚本加载完毕
+            await Promise.all(this.projectBundle?.components.map((item: any) => {
+                const {value} = item;
+                const scriptUrl = new URL(value, window.location.origin).toString();
+                const id = scriptUrl.substring(scriptUrl.lastIndexOf("/") + 1);
+                return this.loadScript({id, url: scriptUrl})
+            }));
+        }
+    }
+
+    initializeRuntimeEnv(projectId: string, manager: DesignerManager) {
+        if (manager) {
+            this.mode = DesignerMode.RELEASE;
+            //暴露必要的环境到 window
+            window.LC_ENV = {
+                ...window.LC_ENV,
+                projectId,
+                mode: DesignerMode.RELEASE,
+                controllers: manager.layerManager.controllers,
+                definitions: DesignerLoader.definitionMap,
+                currentManager: manager
+            }
+            this.setLoaded(true);
+        } else {
+            console.error(`未获取到项目数据==> id:${projectId}, manager: ${manager}`);
+        }
+    }
+
+    public async load(id: string): Promise<void> {
+        let password: EncryptResult | null = null;
+        if (this.pwd)
+            password = await HybridCryptoUtil.encryptRequest(this.pwd!)
+        const res = await FetchUtil.post<any>("/api/release/getReleaseData", {id, password});
+        if (res !== null) {
+            this.projectBundle = JSON.parse(res.dataJson);
+            this.projectInfo = {id, name: res.name}
+            await super.load(id);
+        }
+    }
+
+    async simpleLoad(id: string): Promise<void> {
+        const res = await FetchUtil.post<any>("/api/release/getReleaseData", {id});
+        if (res !== null)
+            this.projectBundle = JSON.parse(res.dataJson);
+        await super.simpleLoad(id);
+    }
+}