light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/header/items/theme/ThemeManager.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 AbstractManager from "../../../manager/core/AbstractManager.ts";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+
+class ThemeManager extends AbstractManager<Array<IThemeItem>> {
+    constructor() {
+        super();
+        makeObservable(this, {
+            themeConfig: observable,
+            updateThemeConfig: action,
+        })
+    }
+
+    /**
+     * 主题
+     */
+    themeConfig: Array<IThemeItem> | null = [
+        {
+            id: "0",
+            name: "科技风格(默认主题)",
+            colors: {main: "#00dfff", mainText: "#62edff", subText: "#4ca4b1", background: "#00dfff33", supplementFirst: "#38929f", supplementSecond: "#1790a2",},
+        },
+        {
+            id: "1",
+            name: "烈焰战区",
+            colors: { main: "#FF5500", mainText: "#FFFFFF", subText: "#B34A1E", background: "#1A1412", supplementFirst: "#33221B", supplementSecond: "#4D2D22" }
+        },
+        {
+            id: "3",
+            name: "复古工业",
+            colors: { main: "#FFC107", mainText: "#FDF5E6", subText: "#B39547", background: "#2B2620", supplementFirst: "#423A2F", supplementSecond: "#594E3F" }
+        },
+        {
+            id: "4",
+            name: "数字森林",
+            colors: { main: "#00FF41", mainText: "#D0FFD0", subText: "#4E9A5E", background: "#0A1A0F", supplementFirst: "#14331E", supplementSecond: "#1E4D2D" }
+        },
+        {
+            id: "5",
+            name: "星际远航",
+            colors: { main: "#AEE9FF", mainText: "#E6F7FF", subText: "#8BB9D9", background: "#1B2429", supplementFirst: "#2B3A42", supplementSecond: "#3D525C" }
+        },
+        {
+            id: "9",
+            name: "未来主义",
+            colors: { main: "#1677FF", mainText: "#FFFFFF", subText: "#A6C5F7", background: "#24292F", supplementFirst: "#37414B", supplementSecond: "#4B5966" }
+        },
+        {
+            id: "10",
+            name: "核能核心",
+            colors: { main: "#722ED1", mainText: "#F9F0FF", subText: "#B391D9", background: "#121226", supplementFirst: "#23234D", supplementSecond: "#343473" }
+        }
+    ];
+
+    updateThemeConfig = (data: Array<IThemeItem>) => this.themeConfig = data;
+
+    destroy(): void {
+    }
+
+    getData(): Array<IThemeItem> {
+        return this.themeConfig!;
+    }
+
+    init(data: Array<IThemeItem>): void {
+        this.themeConfig = data || this.themeConfig;
+    }
+
+}
+
+export default ThemeManager;

package/light-chaser-app/src/designer/left/DesignerLeft.less

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+.designer-left {
+  height: calc(100vh - 56px);
+  display: inline-flex;
+}

package/light-chaser-app/src/designer/left/DesignerLeft.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 {observer} from "mobx-react";
+import designerLeftStore from "./DesignerLeftStore";
+import './DesignerLeft.less';
+import {ComponentType, useEffect, useRef} from "react";
+import LeftMenus from "./designer-left-menus/LeftMenus.tsx";
+import {ComponentList} from "./compoent-lib/ComponentList.tsx";
+import LayerList from "./layer-list/LayerList.tsx";
+import SourceList from "./source-list/SourceList.tsx";
+import {FilterList} from "./filter-lilst/FilterList.tsx";
+import GlobalVariableList from "./global-variable/GlobalVariableList.tsx";
+import TemplateLib from "./template-lib/TemplateLib.tsx";
+import SubProject from "./sub-project/SubProject.tsx";
+
+
+const leftFuncMap: Record<string, ComponentType> = {
+    'components': ComponentList,
+    'layer-list': LayerList,
+    'source-list': SourceList,
+    'filter-list': FilterList,
+    'global-variable': GlobalVariableList,
+    'template-lib': TemplateLib,
+    'sub-project': SubProject
+
+}
+
+export const DesignerLeft = observer(() => {
+    const {menu, setDesignerLeftRef} = designerLeftStore;
+    const leftDomRef = useRef<HTMLDivElement>(null);
+    const Component = leftFuncMap[menu];
+
+
+    useEffect(() => {
+        setDesignerLeftRef(leftDomRef.current);
+    }, []);
+
+    return (
+        <div className={'designer-left'} ref={leftDomRef}>
+            <LeftMenus/>
+            {Component && <Component/>}
+        </div>
+    );
+})
+
+export default DesignerLeft;

package/light-chaser-app/src/designer/left/DesignerLeftStore.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 {ReactNode} from "react";
+
+export interface ILeftMenu {
+    icon: ReactNode,
+    name: string,
+    key: string,
+}
+
+class DesignerLeftStore {
+    constructor() {
+        makeObservable(this, {
+            menu: observable,
+            setMenu: action,
+        });
+    }
+
+    menu: string = 'components';
+
+    setMenu = (menu: string) => this.menu = menu;
+
+    designerLeftRef: HTMLElement | null = null;
+
+    setDesignerLeftRef = (ref: HTMLElement | null) => this.designerLeftRef = ref;
+
+}
+
+const designerLeftStore = new DesignerLeftStore();
+export default designerLeftStore;

package/light-chaser-app/src/designer/left/compoent-lib/ComponentCategorize.ts

@@ -0,0 +1,135 @@
+/*
+ * 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 {AllApplication, Browser, Cube, MapDraw, Monitor, Other, PieThree, Platte, Text} from "@icon-park/react";
+import {ComponentType} from "react";
+
+export interface ICategorize {
+    key: string;
+    name: string;
+    icon?: ComponentType;
+    parentKey?: string;
+}
+
+export const componentCategorize: ICategorize[] = [
+    {
+        key: "all",
+        name: "所有",
+        icon: AllApplication,
+    },
+    {
+        key: "chart",
+        name: "图表",
+        icon: PieThree,
+    },
+    {
+        key: "info",
+        name: "信息",
+        icon: Text,
+    },
+    {
+        key: "map",
+        name: "地图",
+        icon: MapDraw,
+    },
+    {
+        key: "ornament",
+        name: "装饰",
+        icon: Platte,
+    },
+    {
+        key: "model",
+        name: "模型",
+        icon: Cube,
+    },
+    {
+        key: "media",
+        name: "媒体",
+        icon: Monitor,
+    },
+    {
+        key: "web",
+        name: "web元素",
+        icon: Browser,
+    },
+    {
+        key: "other",
+        name: "其他",
+        icon: Other
+    }
+];
+
+export const componentSubCategorize: ICategorize[] = [
+    {
+        key: "all",
+        name: "所有",
+    },
+    {
+        key: "bar",
+        name: "条形图",
+        parentKey: "chart"
+    },
+    {
+        key: "column",
+        name: "柱状图",
+        parentKey: "chart"
+    },
+    {
+        key: "line",
+        name: "折线图",
+        parentKey: "chart"
+    },
+    {
+        key: "pie",
+        name: "饼图",
+        parentKey: "chart"
+    },
+    {
+        key: "scatter",
+        name: "散点图",
+        parentKey: "chart"
+    },
+    {
+        key: "wordCloud",
+        name: "词云图",
+        parentKey: "chart"
+    },
+    {
+        key: "area",
+        name: "面积图",
+        parentKey: "chart"
+    },
+    {
+        key: "radar",
+        name: "雷达图",
+        parentKey: "chart"
+    },
+    {
+        key: "funnel",
+        name: "漏斗图",
+        parentKey: "chart"
+    },
+    {
+        key: "progress",
+        name: "进度图",
+        parentKey: "chart"
+    },
+    {
+        key: "rose",
+        name: "玫瑰图",
+        parentKey: "chart"
+    },
+    {
+        key: "radial",
+        name: "玉珏图",
+        parentKey: "chart"
+    },
+];

package/light-chaser-app/src/designer/left/compoent-lib/ComponentList.less

@@ -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.
+ */
+
+.dl-component-list {
+  width: 300px;
+  height: 100%;
+  background-color: #1E1E2F;
+  border-right: 1px solid #2C2C3E;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  .dl-cl-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    height: 56px;
+    border-bottom: 1px solid #2C2C3E;
+    color: #FFFFFF;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+
+    .dl-cl-header-title {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 28px;
+    }
+
+    .dl-cl-header-operate {
+      display: flex;
+      align-items: center;
+
+    }
+  }
+
+  .dl-cl-body {
+    display: flex;
+    flex: 1;
+    height: calc(100% - 56px);
+
+    .main-categories {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #2C2C3E;
+      width: 48px;
+      padding: 16px 0;
+      gap: 8px;
+
+      .clo-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+        cursor: pointer;
+        color: #A0A0B2;
+        transition: all 0.2s ease;
+
+        .i-icon {
+          margin-top: 2px;
+        }
+
+        &:hover {
+          color: #4FB8FF;
+          background-color: rgba(79, 184, 255, 0.1);
+        }
+
+        .anticon {
+          font-size: 18px;
+        }
+      }
+
+      .clo-item-active {
+        color: #4FB8FF;
+        background-color: rgba(79, 184, 255, 0.2);
+      }
+    }
+
+    .sub-categories {
+      width: 96px;
+      background-color: #2C2C3E;
+      padding: 16px 0;
+      overflow-y: auto;
+      border-right: 1px solid #3A3A4E;
+
+      .clt-item {
+        padding: 8px 12px;
+        margin: 0 8px 4px;
+        font-size: 12px;
+        line-height: 16px;
+        color: #A0A0B2;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        text-align: left;
+
+        &:hover {
+          color: #4FB8FF;
+          background-color: rgba(79, 184, 255, 0.1);
+        }
+      }
+
+      .clt-item-active {
+        color: #4FB8FF;
+        background-color: rgba(79, 184, 255, 0.2);
+        font-weight: 500;
+      }
+    }
+
+    .component-list {
+      flex: 1;
+      background-color: #1E1E2F;
+      padding: 10px;
+      overflow-y: auto;
+    }
+  }
+}

package/light-chaser-app/src/designer/left/compoent-lib/ComponentList.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 './ComponentList.less';
+import {Tooltip} from "antd";
+import designerLeftStore from "../DesignerLeftStore";
+import eventOperateStore from "../../operate-provider/EventOperateStore";
+import {componentCategorize, componentSubCategorize} from "./ComponentCategorize";
+import componentListStore from "./ComponentListStore";
+import {observer} from "mobx-react";
+import {ComponentType, lazy, Suspense} from "react";
+import Loading from "light-chaser-ui/lib/loading/Loading.tsx";
+import {IIconProps} from "@icon-park/react/lib/runtime";
+import {Close} from "@icon-park/react";
+
+const CompList = lazy(() => import('./list/CompList'));
+
+export const CategoryList = observer(() => {
+    const {categories, setCategories, setSubCategories} = componentListStore;
+    return (
+        <>
+            {
+                componentCategorize.map((item, index) => {
+                    const {icon, name, key} = item;
+                    const Icon = icon as ComponentType<IIconProps>;
+                    return <Tooltip placement={'right'}
+                                    key={index}
+                                    title={name}>
+                        <div className={`clo-item ${categories === key ? "clo-item-active" : ""}`} onClick={() => {
+                            setCategories(key);
+                            setSubCategories('all');
+                        }}>
+                            <Icon theme="outline" strokeWidth={4}/>
+                        </div>
+                    </Tooltip>
+                })
+            }
+        </>
+    )
+});
+
+export const SubCategoryList = observer(() => {
+    const {categories, subCategories, setSubCategories} = componentListStore;
+    return (
+        <>
+            {
+                componentSubCategorize.map((item, index) => {
+                    const {name, key, parentKey} = item;
+                    if (categories === 'all' || key === 'all' || parentKey === categories) {
+                        return <div key={index}
+                                    onClick={() => setSubCategories(key)}
+                                    className={`clt-item ${subCategories === key ? " clt-item-active" : ""}`}>{name}</div>
+                    } else
+                        return null;
+                })
+            }
+        </>
+    )
+});
+
+
+export const ComponentList = () => {
+    return <div className={'dl-component-list'}>
+        <div className={'dl-cl-header'}>
+            <div className={'dl-cl-header-title'}>组件库</div>
+            <div className={'dl-cl-header-operate'}><Close size={14} style={{cursor: 'pointer'}} onClick={() => {
+                const {setMenu} = designerLeftStore;
+                setMenu("");
+                const {rulerRef} = eventOperateStore;
+                rulerRef?.ruleWheel();
+            }}/></div>
+        </div>
+        <div className={'dl-cl-body'}>
+            <Suspense fallback={<Loading/>}>
+                <div className={'main-categories'}><CategoryList/></div>
+                <div className={'sub-categories'}><SubCategoryList/></div>
+                <div className={'component-list'}><CompList/></div>
+            </Suspense>
+        </div>
+    </div>;
+}

package/light-chaser-app/src/designer/left/compoent-lib/ComponentListStore.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 {BaseInfoType} from "light-chaser-types/types/ComponentTypes.ts";
+import DesignerLoader from "../../loader/DesignerLoader.ts";
+
+class ComponentListStore {
+    constructor() {
+        makeObservable(this, {
+            categories: observable,
+            subCategories: observable,
+            search: observable,
+            compInfoArr: observable,
+            setCategories: action,
+            setSubCategories: action,
+            setSearch: action,
+            doInit: action
+        })
+    }
+
+    /**
+     * 组件基础信息数组。设计器左侧组件列表的展示过滤依赖于此数组。
+     * 该数组会在设计器加载时进行初始化，后续不再修改。若其他。 场景或组件需要。 操作该数组的数据。 应该操作他的备份。 而不是直接操作该数组。
+     */
+    compInfoArr: Array<BaseInfoType> = [];
+
+    categories: string = "all";
+
+    subCategories: string = "all";
+
+    search: string = "";
+
+    setCategories = (categories: string) => this.categories = categories;
+
+    setSubCategories = (subCategories: string) => this.subCategories = subCategories;
+
+    setSearch = (search: string) => this.search = search;
+
+    doInit = () => {
+        const comps: Array<BaseInfoType> = [];
+        if (DesignerLoader.definitionMap) {
+            Object.keys(DesignerLoader.definitionMap).forEach(key => {
+                const baseInfo = DesignerLoader.definitionMap[key].getBaseInfo();
+                if (!['LoopContainer', 'group'].includes(baseInfo.compKey))
+                    comps.push(baseInfo);
+            });
+        }
+        this.compInfoArr = comps;
+        this.search = "";
+    }
+
+}
+
+const componentListStore = new ComponentListStore();
+export default componentListStore;