light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/right/status-list/StatusListStore.ts

@@ -0,0 +1,175 @@
+/*
+ * 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 {action, makeObservable, observable} from "mobx";
+import rightStore from "../RightStore.ts";
+import IdGenerate from "light-chaser-util/lib/IdGenerate.ts";
+
+class StatusListStore {
+    constructor() {
+        makeObservable(this, {
+            visible: observable,
+            list: observable,
+            activatedStatus: observable,
+            editId: observable,
+            setVisible: action,
+            setList: action,
+            addStatus: action,
+            delStatus: action,
+            setActivatedStatus: action,
+            setEditId: action,
+            changeStatusName: action,
+            init: action,
+            destroy: action
+        })
+    }
+
+    visible = false;
+
+    editId: null | string = null;
+
+    activatedStatus: string | null = null;
+
+    list: Array<{ id: string, name: string }> = [];
+
+    setEditId = (id: string | null) => this.editId = id;
+
+    setVisible = (v: boolean) => this.visible = v;
+
+    setActivatedStatus = (id: string) => {
+        if (id === this.activatedStatus)
+            return;
+        this.activatedStatus = id;
+        const {controllers} = window.LC_ENV.currentManager?.layerManager ?? {};
+        if (!controllers)
+            return;
+        const {activeElem, remountConfigDetailsPanel} = rightStore;
+        const controller = controllers[activeElem.id!];
+        if (!controller || !controller.config.status[id])
+            return;
+        const currentStatusConfig = controller.config.status[id].config;
+        controller.update(currentStatusConfig);
+        remountConfigDetailsPanel();
+    }
+
+    /**
+     * 添加新的状态
+     */
+    addStatus = () => {
+        //生成唯一id
+        const id = IdGenerate.generateId();
+        const status = {id, name: `状态${this.list.length + 1}`};
+
+        //找到当前激活的controller
+        const {activeElem} = rightStore;
+        const {controllers} = window.LC_ENV.currentManager?.layerManager ?? {};
+        if (!controllers)
+            return;
+        const controller = controllers[activeElem.id!];
+        if (!controller)
+            return;
+        if (!controller.config.status)
+            controller.getConfig().status = {};
+        controller.getConfig().status[id] = {name: status.name, config: {}};
+        this.list.push(status);
+    }
+
+    /**
+     * 删除状态
+     */
+    delStatus = (id: string) => {
+        if (!id)
+            return;
+        const {controllers} = window.LC_ENV.currentManager?.layerManager ?? {};
+        if (!controllers)
+            return;
+        const {activeElem} = rightStore;
+        const controller = controllers[activeElem.id!];
+        if (!controller)
+            return;
+        if (controller.config.status[id])
+            delete controller.config.status[id];
+        this.list = this.list.filter(item => item.id !== id);
+    }
+
+    /**
+     * 修改状态名称
+     * @param id
+     * @param name
+     */
+    changeStatusName = (id: string, name: string) => {
+        const {controllers} = window.LC_ENV.currentManager?.layerManager ?? {};
+        if (!id || !controllers)
+            return;
+        const controller = controllers[rightStore.activeElem.id!];
+        if (!controller)
+            return;
+        if (!controller.config.status[id])
+            return;
+        controller.config.status[id]['name'] = name;
+        this.list = this.list.map(item => item.id === id ? {id, name} : item);
+    }
+
+    /**
+     * 读取组件controller中的状态
+     * @param componentId 组件id
+     */
+    setList = (componentId: string) => {
+        const {controllers} = window.LC_ENV.currentManager?.layerManager ?? {};
+        if (!componentId || !controllers)
+            return;
+        const controller = controllers[componentId];
+        if (!controller)
+            return;
+        const {status} = controller.getConfig();
+        if (!status || Object.keys(status).length === 0)
+            return;
+        this.list = Object.keys(status).map(key => {
+            const st = status[key];
+            return {
+                id: key,
+                name: st.name,
+            }
+        })
+    }
+
+    /**
+     * 初始化
+     */
+    init = () => {
+        const {controllers} = window.LC_ENV.currentManager?.layerManager ?? {};
+        const componentId = rightStore.activeElem.id;
+        if (!componentId || !controllers)
+            return;
+        const controller = controllers[componentId];
+        if (!controller)
+            return;
+        const {status = {}} = controller.getConfig();
+        this.list = Object.keys(status).map(key => {
+            const st = status[key];
+            return {
+                id: key,
+                name: st.name,
+            }
+        })
+    }
+
+    /**
+     * 销毁
+     */
+    destroy = () => {
+        this.list = [];
+        this.activatedStatus = null;
+    }
+}
+
+const statusListStore = new StatusListStore();
+export default statusListStore;

package/light-chaser-app/src/designer/right/util.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 {MenuInfo} from "./MenuType";
+import {ColorFilter, Data, Deeplink, Optimize, SettingOne, Theme} from "@icon-park/react";
+
+export const getDefaultMenuList = (): Array<MenuInfo> => {
+    return [
+        {
+            icon: SettingOne,
+            name: '基础',
+            key: 'base',
+        },
+        {
+            icon: Optimize,
+            name: '样式',
+            key: 'style',
+        },
+        {
+            icon: Data,
+            name: '数据',
+            key: 'data',
+        },
+        {
+            icon: Deeplink,
+            name: '映射',
+            key: 'mapping',
+        },
+        {
+            icon: ColorFilter,
+            name: '滤镜',
+            key: 'filter',
+        },
+        // {
+        //     icon: VideoCameraFilled,
+        //     name: '动画',
+        //     key: 'animation',
+        // },
+        {
+            icon: Theme,
+            name: '主题',
+            key: 'theme',
+        }
+    ];
+}

package/light-chaser-app/src/designer/store/RuntimeStore.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 {action, makeObservable, observable} from "mobx";
+
+class RuntimeStore {
+
+    constructor() {
+        makeObservable(this, {
+            auxiliaryBorder: observable,
+            setAuxiliaryBorder: action,
+        })
+    }
+
+    auxiliaryBorder: boolean = false;
+
+    setAuxiliaryBorder = (auxiliaryBorder: boolean) => {
+        this.auxiliaryBorder = auxiliaryBorder;
+    }
+
+}
+
+const runtimeConfigStore = new RuntimeStore();
+export default runtimeConfigStore;

package/light-chaser-app/src/designer/style/DesignerGlobalStyle.less

@@ -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.
+ */
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  color: #e3e3e3;
+
+  * {
+    user-select: none;
+  }
+}
+
+.designer-ds-container {
+  overflow: hidden;
+  height: calc(100vh - 110px);
+  width: calc(100vw - 115px);
+  background-color: #181a24;
+  position: relative;
+
+  .designer-ds-content {
+    box-shadow: rgba(0, 0, 0, 0.7) 10.9px 10px 100px;
+    background: #232630;
+    position: absolute;
+  }
+
+  .canvas-transparent {
+    background-image: linear-gradient(45deg, #3a3a3a 25%, transparent 0, transparent 75%, #3a3a3a 0), linear-gradient(45deg, #3a3a3a 25%, transparent 0, transparent 75%, #3a3a3a 0);
+    background-color: #4a4a4a;
+    background-size: 10px 10px;
+    background-position: 0 0, 5px 5px;
+  }
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: linear-gradient(to right, #9da7d9, #7c85c4);
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-radius: 4px;
+  box-shadow: 0 0 8px rgba(157, 167, 217, 0.6);
+  transition: all 0.3s ease;
+}
+
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #9da7d9, 0 0 5px #9da7d9;
+  opacity: 1.0;
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+#nprogress .spinner {
+  display: none;
+}
+

package/light-chaser-app/src/designer/view/DesignerView.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.
+ */
+
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+
+  .lc-project-view {
+    background: rgb(28, 28, 28);
+    overflow: hidden;
+    position: relative;
+  }
+
+  //大屏预览模式下，数据加载异常时样式
+  .view-error-message {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(255, 0, 0, 0.24);
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    color: #ff1e1e;
+    font-weight: 500;
+    border: 2px dashed red;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+  }
+}

package/light-chaser-app/src/designer/view/DesignerView.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 {lazy, Suspense, useEffect, useRef} from 'react';
+import './DesignerView.less';
+import {observer} from "mobx-react";
+import ScaleAction from "../../framework/core/ScaleAction.ts";
+import canvasRender from "../left/layer-list/CanvasRender.ts";
+import '../../global/ExportViewGlobalMember.ts';
+import Loading from "light-chaser-ui/lib/loading/Loading.tsx";
+import ViewDesignerLoader from "../loader/ViewDesignerLoader.ts";
+import {DesignerMode} from "light-chaser-types/types/DesignerTypes.ts";
+
+
+const ScreenFit = lazy(() => import('../../framework/screen-fit/ScreenFit.tsx'));
+
+export interface DesignerViewProps {
+    id: string;
+}
+
+const DesignerView = observer((props: DesignerViewProps) => {
+
+    const loaderRef = useRef(new ViewDesignerLoader(DesignerMode.PREVIEW));
+
+    useEffect(() => {
+        loaderRef.current?.load(props.id).then(() => {
+            if (loaderRef.current?.projectInfo?.name)
+                document.title = loaderRef.current?.projectInfo.name
+        })
+    }, []);
+
+    if (!loaderRef.current?.loaded)
+        return <Loading/>;
+
+    const {canvasConfig: {width, height, adaptationType}} = loaderRef.current.designerManager.canvasManager;
+    const canvasDom = <div className="lc-project-view" style={{width, height}}>
+        {canvasRender.buildCanvasComponents(loaderRef.current.designerManager)}</div>;
+
+    const globalFilter = loaderRef.current.designerManager.globalFilterManger.getFilterStyle();
+    return (
+        <Suspense fallback={<Loading/>}>
+            {adaptationType && adaptationType === 'none' ? canvasDom :
+                <ScreenFit width={width!} height={height!} mode={adaptationType}
+                           scaleChange={(xScale, yScale) => {
+                               ScaleAction.doScale(xScale, yScale)
+                           }}>
+                    <div style={globalFilter}>{canvasDom}</div>
+                </ScreenFit>}
+        </Suspense>
+    );
+});
+
+export default DesignerView;

package/light-chaser-app/src/framework/cache/AbstractCache.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 AbstractCache<T = any> {
+    private cachePool = new Map<string, T>();
+
+    public addCache(key: string, value: T): void {
+        this.cachePool.set(key, value);
+    }
+
+    public getCache(key: string): T | null {
+        return this.cachePool.get(key) || null;
+    }
+
+    public removeCache(key: string): void {
+        this.cachePool.delete(key);
+    }
+
+    public clearCache(): void {
+        this.cachePool.clear();
+    }
+
+    public isExistCache(key: string): boolean {
+        return this.cachePool.has(key);
+    }
+
+    public getCachePool(): Map<string, T> {
+        return this.cachePool;
+    }
+}

package/light-chaser-app/src/framework/cache/ImageSourceCache.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 AbstractCache from "./AbstractCache";
+import {IImageData} from "../../comps/lc/base-image/BaseImageComponent";
+
+class ImageSourceCache extends AbstractCache<any> {
+    public getAllImageCache(): IImageData[] {
+        return Array.from(this.getCachePool().values()) || [];
+    }
+}
+
+const imageSourceCache = new ImageSourceCache();
+export default imageSourceCache;
+

package/light-chaser-app/src/framework/cache/LocalCoverCache.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 AbstractCache from "./AbstractCache";
+
+class LocalCoverCache extends AbstractCache<any> {
+
+    public getAllCoverCache(): string[] {
+        return Array.from(this.getCachePool().values()) || [];
+    }
+
+    public clearCoverCache(): void {
+        this.getAllCoverCache().forEach((url: string) => {
+            URL.revokeObjectURL(url);
+        });
+    }
+}
+
+const localCoverCache = new LocalCoverCache();
+export default localCoverCache;
+

package/light-chaser-app/src/framework/context-menu/ContextMenu.less

@@ -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.
+ */
+
+.context-menu-container {
+  background-color: #2C2C3E;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  padding: 8px 0;
+  width: 160px;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+  border: 1px solid #3A3A4E;
+
+  .context-menu-item {
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    font-size: 14px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    .context-menu-icon {
+      margin-right: 12px;
+      display: flex;
+      align-items: center;
+
+      svg {
+        width: 16px;
+        height: 16px;
+        stroke: currentColor;
+        stroke-width: 2px;
+      }
+    }
+
+    .context-menu-text {
+      pointer-events: none;
+    }
+  }
+
+  .context-menu-item:hover {
+    background-color: rgba(79, 184, 255, 0.15);
+    color: #4FB8FF;
+  }
+
+  .context-menu-item:active {
+    background-color: rgba(79, 184, 255, 0.25);
+  }
+}

package/light-chaser-app/src/framework/context-menu/ContextMenu.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 './ContextMenu.less';
+
+export interface IContextMenuItem {
+    name: string;
+    icon: any;
+    onClick: (...args: any[]) => void;
+}
+
+export interface ContextMenuProps {
+    menus: IContextMenuItem[];
+    visible: boolean;
+    position: [number, number];
+}
+
+export default function ContextMenu(props: ContextMenuProps) {
+    const {menus, visible, position} = props;
+
+    const calculateMenuSize = (menuCount: number) => {
+        const menuHeight = 36; // 增加2px以符合设计规范
+        return [160, menuCount * menuHeight]; // 宽度增加以适应新设计
+    }
+
+    const buildMenuList = () => {
+        const menuListDom = [];
+        for (let i = 0; i < menus.length; i++) {
+            const menuItem = menus[i];
+            const Icon = menuItem.icon;
+            menuListDom.push(
+                <div key={i + ''} className={'context-menu-item'} onClick={(event) => menuItem.onClick(event)}>
+                    <span className="context-menu-icon"><Icon/></span>
+                    <span className="context-menu-text">{menuItem.name}</span>
+                </div>
+            )
+        }
+        return menuListDom;
+    }
+
+    const calculatePosition = (offsetW: number, offsetY: number) => {
+        const [x, y] = position;
+        const {innerWidth, innerHeight} = window;
+        let left = x;
+        let top = y;
+        if (x + offsetW > innerWidth)
+            left = innerWidth - offsetW;
+        if (y + offsetY > innerHeight)
+            top = innerHeight - offsetY;
+        return [left, top];
+    }
+
+    const [offsetW, offsetH] = calculateMenuSize(menus.length);
+    const _position = calculatePosition(offsetW, offsetH);
+
+    return (
+        <>
+            {visible &&
+                <div className={'context-menu-container'} style={{
+                    position: 'fixed',
+                    top: _position[1],
+                    left: _position[0],
+                    zIndex: 9999,
+                }}>
+                    {buildMenuList()}
+                </div>}
+        </>
+    );
+}