light-chaser-pro 1.0.0

package/light-chaser-app/src/theme/default.less

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+/**
+ * 所有主题属性分3级，权重依次递减
+ */
+
+:root {
+  --color-h: #ffffff;
+  --color-m: #e1e1e1;
+  --color-l: #d2d2d2;
+
+  --color-hover-h: #d2ecf9;
+  --color-hover-m: #c1d9e6;
+  --color-hover-l: #abbdc6;
+
+  --background-h: #1e1e2f;
+  --background-m: #1f2427;
+  --background-l: #292e30;
+
+  --border-width-h: 3px;
+  --border-width-m: 2px;
+  --border-width-l: 1px;
+
+  --border-color-h: #1891ac;
+  --border-color-m: #1c91ab;
+  --border-color-l: #2090a9;
+
+  --border-radius-h: 15px;
+  --border-radius-m: 10px;
+  --border-radius-l: 5px;
+
+}

package/light-chaser-app/src/util/AuthFetchUtil.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 FetchUtil from "./FetchUtil.ts";
+import AuthTools from "light-chaser-util/lib/AuthTools.ts";
+
+/**
+ * 带有权限验证的Fetch工具类
+ */
+export default class AuthFetchUtil {
+    public static async post<T>(url: string, data: any, options?: RequestInit): Promise<T> {
+        options = AuthFetchUtil.addToken(options);
+        return await FetchUtil.post<T>(url, data, options);
+    }
+
+    public static async get<T>(url: string, options?: RequestInit): Promise<T> {
+        options = AuthFetchUtil.addToken(options);
+        return await FetchUtil.get<T>(url, options);
+    }
+
+    private static addToken(options?: RequestInit): RequestInit {
+        options = options || {};
+        const token = AuthTools.getToken();
+        options.headers = options.headers || {};
+        (options.headers as any)['Authorization'] = `Bearer ${token}`;
+        return options;
+    }
+
+}

package/light-chaser-app/src/util/BoundsValidatorUtil.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 {PIXEL_BOUNDARY_VALUE} from "../constant/GlobalConstant.ts";
+
+// ----------- 重载声明 -----------
+export function convergenceToInterval(value: number): number;
+export function convergenceToInterval(value: number, min: number, max: number): number;
+
+// ----------- 实现部分 -----------
+export function convergenceToInterval(value: number, min?: number, max?: number): number {
+    const realMin = min ?? -PIXEL_BOUNDARY_VALUE;
+    const realMax = max ?? PIXEL_BOUNDARY_VALUE;
+
+    if (value >= 0) {
+        return value > realMax ? realMax : value;
+    } else {
+        return value < realMin ? realMin : value;
+    }
+}

package/light-chaser-app/src/util/ControllerUtil.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+export const getController = (id: string) => {
+    return window.LC_ENV?.currentManager?.layerManager?.controllers[id];
+}

package/light-chaser-app/src/util/CoordinateUtil.ts

@@ -0,0 +1,105 @@
+/*
+ * 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 {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+import LayerUtil from "../designer/left/layer-list/util/LayerUtil.ts";
+
+export interface IBoxInfo {
+    minX: number,
+    minY: number,
+    maxX: number,
+    maxY: number,
+    width: number,
+    height: number
+}
+
+/**
+ * 坐标计算工具类。专门用于提供设计器中各种复杂的坐标计算方法
+ */
+export default class CoordinateUtil {
+    /**
+     * 计算多个组件的包维盒坐标
+     */
+    public static calculateGroupRect(layerIds: string[], layers: Record<string, ILayerItem>): IBoxInfo {
+        const coordinates = {
+            minX: Infinity,
+            minY: Infinity,
+            maxX: -Infinity,
+            maxY: -Infinity,
+            width: 0,
+            height: 0
+        }
+        layerIds.forEach((id) => {
+            const {x, y, width = 0, height = 0, type} = layers[id];
+            if (type === 'group')
+                return;
+            coordinates.minX = Math.min(coordinates.minX, x ?? Infinity);
+            coordinates.minY = Math.min(coordinates.minY, y ?? Infinity);
+            coordinates.maxX = Math.max(coordinates.maxX, (x ?? -Infinity) + width);
+            coordinates.maxY = Math.max(coordinates.maxY, (y ?? -Infinity) + height);
+        });
+        coordinates.width = coordinates.maxX - coordinates.minX;
+        coordinates.height = coordinates.maxY - coordinates.minY;
+        return coordinates;
+    }
+
+    /**
+     * 计算多个组件左上角坐标形成的包围盒, 适用于做组内下、右对齐的操作
+     */
+    public static calculateGroupRectLT(layerIds: string[], layers: Record<string, ILayerItem>): IBoxInfo {
+        const coordinates = {
+            minX: Infinity,
+            minY: Infinity,
+            maxX: -Infinity,
+            maxY: -Infinity,
+            width: 0,
+            height: 0
+        }
+        layerIds.forEach((id) => {
+            const {x, y, type} = layers[id];
+            if (type === 'group')
+                return;
+            coordinates.minX = Math.min(coordinates.minX, x ?? Infinity);
+            coordinates.minY = Math.min(coordinates.minY, y ?? Infinity);
+            coordinates.maxX = Math.max(coordinates.maxX, x ?? -Infinity);
+            coordinates.maxY = Math.max(coordinates.maxY, y ?? -Infinity);
+        })
+        coordinates.width = coordinates.maxX - coordinates.minX;
+        coordinates.height = coordinates.maxY - coordinates.minY;
+        return coordinates;
+    }
+
+    /**
+     * 计算分组图层的包围盒尺寸、坐标信息
+     * @param groupId 分组图层id
+     * @param layers 图层数据
+     */
+    public static calculateGroupLayerRect(groupId: string, layers: Record<string, ILayerItem>): IBoxInfo {
+        const layerIds = LayerUtil.findAllChildLayer([groupId], true);
+        return CoordinateUtil.calculateGroupRect(layerIds, layers);
+    }
+
+    /**
+     * 计算多个图层的左上角坐标
+     * @param layers
+     */
+    public static calculateLayersLeftTopRect(layers: ILayerItem[]): { x: number, y: number } {
+        const coordinates = {x: 0, y: 0}
+        layers.forEach((layer) => {
+            const {x, y, type} = layer;
+            if (type === 'group')
+                return;
+            coordinates.x = Math.min(coordinates.x, x ?? Infinity);
+            coordinates.y = Math.min(coordinates.y, y ?? Infinity);
+        });
+        return coordinates;
+    }
+}

package/light-chaser-app/src/util/DataUtil.ts

@@ -0,0 +1,111 @@
+/*
+ * 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 {DataConfigType, IStaticData} from "light-chaser-types/types/DataSourceTypes.ts";
+import {SafeEvalUtil} from "light-chaser-util/lib/SafeEvalUtil.ts";
+
+export default class DataUtil {
+    public static getStaticData(staticData?: IStaticData) {
+        if (!staticData)
+            return null;
+        if (typeof staticData === "object" && 'value' in staticData) {
+            let {value} = staticData;
+            if (staticData.filter) {
+                const func = SafeEvalUtil.run(staticData.filter);
+                value = typeof func === 'function' ? func(value) : value;
+            }
+            return value;
+        } else {
+            //兼容旧格式
+            return staticData;
+        }
+    }
+
+    public static getStaticDataConfig(config?: DataConfigType) {
+        const staticData = config?.staticData;
+        if (!staticData || typeof staticData !== 'object' || !('value' in staticData)) {
+            return {
+                value: config?.value,
+                filter: undefined
+            }
+        } else {
+            return config.staticData;
+        }
+    }
+
+    /**
+     * 解析 Headers，支持对象、JSON字符串、函数（同步/异步）
+     * @param headers
+     */
+    static async resolveHeaders(headers: any): Promise<Record<string, string>> {
+        return this.resolveDynamicValue(headers, {});
+    }
+
+    /**
+     * 解析 Params，支持对象、JSON字符串、函数（同步/异步）
+     * @param params
+     */
+    static async resolveParams(params: any): Promise<any> {
+        return this.resolveDynamicValue(params, {});
+    }
+
+    /**
+     * 通用动态值解析方法
+     * @param value 输入值（字符串、函数、对象）
+     * @param defaultValue 默认值
+     * @private
+     */
+    private static async resolveDynamicValue<T>(value: any, defaultValue: T): Promise<T> {
+        if (!value) return defaultValue;
+
+        try {
+            // 1. 如果是字符串，尝试解析为对象或函数
+            if (typeof value === 'string') {
+                value = value.trim();
+                if (value.startsWith('{') || value.startsWith('[')) {
+                    // JSON 字符串
+                    try {
+                        return JSON.parse(value);
+                    } catch (e) {
+                        console.warn("JSON parse failed, trying SafeEvalUtil", e);
+                        // 如果 JSON 解析失败，尝试用 SafeEvalUtil 运行（可能是 JS 对象字面量字符串）
+                        const result = SafeEvalUtil.run(value);
+                        return (typeof result === 'object' && result !== null && !Array.isArray(result)) ? result as unknown as T : defaultValue;
+                    }
+                } else {
+                    // 函数字符串
+                    const func = SafeEvalUtil.run(value);
+                    if (typeof func === 'function') {
+                        const result = await func();
+                        return (typeof result === 'object' && result !== null) ? result : defaultValue;
+                    }
+                    return defaultValue;
+                }
+            }
+
+            // 2. 如果是函数，直接执行
+            if (typeof value === 'function') {
+                const result = await value();
+                return (typeof result === 'object' && result !== null) ? result : defaultValue;
+            }
+
+            // 3. 如果已经是对象，直接返回
+            if (typeof value === 'object') {
+                return value;
+            }
+
+        } catch (e) {
+            console.error("Failed to resolve dynamic value:", e);
+        }
+
+        return defaultValue;
+    }
+}

package/light-chaser-app/src/util/DomUtil.ts

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+
+export default class DomUtil {
+    /**
+     * 判断目标元素在目标容器内是否肉眼可见。
+     * @param el 目标元素
+     * @param container 目标容器
+     */
+    public static isViewInContainer(el: Element, container: Element): boolean {
+        if (!el || !container)
+            return true;
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = el.getBoundingClientRect();
+
+        return (
+            elementRect.top >= containerRect.top &&
+            elementRect.left >= containerRect.left &&
+            elementRect.bottom <= containerRect.bottom &&
+            elementRect.right <= containerRect.right
+        );
+    }
+
+    /**
+     * 计算目标元素与目标容器的距离
+     * @param el 目标元素
+     * @param container 目标容器
+     */
+    public static calculatesDistanceFromContainer(el: Element, container: Element): number {
+        if (!el || !container)
+            return NaN;
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = el.getBoundingClientRect();
+        return elementRect.top - containerRect.top;
+    }
+
+    /**
+     * 更新dom元素样式
+     */
+    public static updateDomStyle(target: HTMLElement, style: Record<string, string>) {
+        if (!style || !target)
+            return;
+        for (const key in style) {
+            const value = style[key];
+            if (value)
+                target.style.setProperty(key, value as string);
+        }
+    }
+}

package/light-chaser-app/src/util/EnvUtil.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 {DesignerMode} from "light-chaser-types/types/DesignerTypes.ts";
+
+export default class EnvUtil {
+    public static getModeByUrl() {
+        const {pathname, hash} = window.location;
+        if (hash.startsWith("#/pureRelease"))
+            return DesignerMode.PURE_SHOW
+        if (pathname.startsWith("/preview"))
+            return DesignerMode.PREVIEW
+        if (pathname.startsWith("/designer"))
+            return DesignerMode.EDIT
+        if (pathname.startsWith("/release"))
+            return DesignerMode.RELEASE
+        return null;
+    }
+}

package/light-chaser-app/src/util/FetchUtil.ts

@@ -0,0 +1,193 @@
+/*
+ * 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 responseHandler from "../api/ReponseHandler.ts";
+
+export interface HttpResponse {
+    code: number;
+    msg: string;
+    data: any;
+}
+
+export default class FetchUtil {
+    /**
+     * GET请求
+     * @param url
+     * @param options
+     */
+    static async get<T>(url: string, options: RequestInit = {}): Promise<T> {
+        options.method = 'GET';
+        const response = await FetchUtil.request(url, options);
+        return responseHandler(response) as T;
+    }
+
+    /**
+     * POST请求
+     * @param url
+     * @param data
+     * @param options
+     */
+    static async post<T>(url: string, data: any, options: RequestInit = {}): Promise<T> {
+        options.method = 'POST';
+        //默认'Content-Type': 'application/json',
+        options.headers = options.headers || {};
+        if (!options.headers || !('Content-Type' in options.headers)) {
+            (options.headers as any)['Content-Type'] = 'application/json';
+        }
+
+        const contentType = (options.headers as any)['Content-Type'] || 'application/json';
+        if (contentType === 'application/json') {
+            options.body = JSON.stringify(data);
+        } else if (contentType === 'application/x-www-form-urlencoded') {
+            const params = new URLSearchParams();
+            for (const [key, value] of Object.entries(data)) {
+                params.append(key, value as string);
+            }
+            options.body = params.toString();
+        } else if (contentType === 'multipart/form-data') {
+            // multipart/form-data 不能直接设置 Content-Type，因为需要由浏览器自动生成
+            delete (options.headers as any)['Content-Type'];
+            if (data instanceof FormData) {
+                options.body = data;
+            } else {
+                const formData = new FormData();
+                data.values().forEach((value: any, key: string) => {
+                    formData.append(key, value as Blob | string);
+                })
+                options.body = formData;
+            }
+        } else {
+            // 默认处理为 text/plain
+            options.body = data.toString();
+        }
+        const response = await FetchUtil.request(url, options);
+        return responseHandler(response) as T;
+    }
+
+    /**
+     * 请求的标准返回结果必须包含code、msg字段，data字段可选，且code为200时，data为有效数据
+     * @param url
+     * @param options
+     * @private
+     */
+    private static async request(url: string, options: RequestInit = {}): Promise<HttpResponse> {
+        let response: Response | null = null;
+        try {
+            response = await fetch(url, options);
+            if (!response.ok)
+                return {code: response.status, msg: response.statusText, data: null};
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                const res = await response.json();
+                if (typeof res === 'object' && 'code' in res && 'msg' in res)
+                    return res;
+                else
+                    return {code: 200, msg: '操作成功', data: res};
+            } else if (contentType && (contentType.includes('text/html') || contentType.includes('text/plain'))) {
+                const text = await response.text()
+                return {code: 200, msg: '操作成功', data: text}
+            } else {
+                const blob = await response.blob()
+                return {code: 200, msg: '操作成功', data: blob}
+            }
+        } catch (error: any) {
+            return {code: response?.status ?? 500, msg: response?.statusText ?? '', data: null};
+        }
+    }
+
+    /**
+     * 返回原生结果，不做任何封装
+     * @param url
+     * @param options
+     * @private
+     */
+    private static async requestNativeResult(url: string, options: RequestInit = {}): Promise<any> {
+        let response: Response | null = null;
+        try {
+            response = await fetch(url, options);
+            if (response.ok) {
+                const contentType = response.headers.get('content-type');
+                if (contentType && contentType.includes('application/json')) {
+                    return await response.json();
+                } else if (contentType && (contentType.includes('text/html') || contentType.includes('text/plain'))) {
+                    return await response.text()
+                } else {
+                    return await response.blob()
+                }
+            } else {
+                console.error('请求错误:', response?.status, response?.statusText);
+                return null;
+            }
+        } catch (error) {
+            console.error('请求错误:', error);
+            return null;
+        }
+    }
+
+    /**
+     * 请求前置处理，返回处理后的url和options
+     * @param url
+     * @param method
+     * @param headers
+     * @param params
+     * @private
+     */
+    private static doRequestBefore(url: string, method: string, headers: Record<string, string>, params: FormData | Record<string, any>): {
+        url: string,
+        options: RequestInit
+    } {
+        const options: RequestInit = {
+            method: method.toUpperCase(),
+            headers: headers,
+        };
+        if (params) {
+            if (method.toUpperCase() === 'GET') {
+                if (params && Object.keys(params).length > 0) {
+                    const queryString = new URLSearchParams(params as Record<string, string>).toString();
+                    url = `${url}?${queryString}`;
+                }
+            } else {
+                options.headers = {
+                    'Content-Type': 'application/json',
+                    ...options.headers,
+                };
+                options.body = JSON.stringify(params);
+            }
+        }
+        return {url, options};
+    }
+
+    /**
+     * 执行自定义请求，请求参数均通过外部指定，返回结果必须为HttpResponse对象，必须包含code、msg字段，data字段可选
+     * @param url
+     * @param method
+     * @param headers
+     * @param params
+     */
+    static async doRequest(url: string, method: string, headers: Record<string, string>, params: FormData | Record<string, any>): Promise<HttpResponse> {
+        const reqInfo = FetchUtil.doRequestBefore(url, method, headers, params);
+        return FetchUtil.request(reqInfo.url, reqInfo.options);
+    }
+
+    /**
+     * 执行自定义请求，请求参数均通过外部指定，返回结果为接口原生结果
+     * @param url
+     * @param method
+     * @param headers
+     * @param params
+     */
+    static async doRequestNativeResult(url: string, method: string, headers: Record<string, string>, params: FormData | Record<string, any>): Promise<object> {
+        const reqInfo = FetchUtil.doRequestBefore(url, method, headers, params);
+        return FetchUtil.requestNativeResult(reqInfo.url, reqInfo.options);
+    }
+
+
+}