light-chaser-pro 1.0.0

package/light-chaser-cli/template/src/index.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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 React, {useEffect, useRef, useState} from "react";
+import {createRoot} from "react-dom/client";
+import {AbstractDesignerDefinition} from "light-chaser-interface";
+import {createBrowserRouter, RouterProvider, useNavigate, useParams} from "react-router-dom";
+import style from './index.module.less';
+import 'light-chaser-ui/dist/style.css';
+
+(function () {
+    const definitionMap: Record<string, AbstractDesignerDefinition> = {};
+    const componentInfoList = [];
+    // @ts-ignore
+    const glob = import.meta.glob('./components/**/*.ts', {eager: true}) as Record<string, any>;
+    for (const key of Object.keys(glob)) {
+        const Clazz = glob[key]?.default;
+        // eslint-disable-next-line no-prototype-builtins
+        if (Clazz && AbstractDesignerDefinition.isPrototypeOf(Clazz)) {
+            const definition: AbstractDesignerDefinition = new Clazz();
+            //获取组件的基础信息
+            if (typeof definition.getBaseInfo === "function") {
+                const componentInfo = definition.getBaseInfo();
+                if (componentInfo?.compKey)
+                    definitionMap[componentInfo.compKey] = definition;
+                componentInfoList.push(componentInfo);
+            }
+        }
+    }
+    window.__DEFINITION_MAP__ = definitionMap;
+    window.__COMPONENT_INFO_LIST__ = componentInfoList;
+})();
+
+const ComponentList = () => {
+    if (!window.__COMPONENT_INFO_LIST__)
+        return null;
+    const navigate = useNavigate();
+    const bgColorList = [
+        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        'linear-gradient(to right, #6a11cb 0%, #2575fc 100%)',
+        'linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%)',
+        'linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%)',
+        'linear-gradient(-20deg, #2b5876 0%, #4e4376 100%)',
+        'linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)',
+    ]
+    return (
+        <div className={style['component-list']}>
+            {
+                window.__COMPONENT_INFO_LIST__.map((info: any) => {
+                    return (
+                        <div key={info.compKey}
+                             style={{background: bgColorList[Math.floor(Math.random() * bgColorList.length)]}}
+                             onClick={() => {
+                                 window.__CURRENT_COMPONENT__ = info.compKey;
+                                 navigate(`/component/${info.compKey}`);
+                             }}
+                             className={style['component-item']}>
+                            <div className={style['component-item-content']}>
+                                {info.compName}</div>
+                        </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+const ComponentView = () => {
+    const {componentKey} = useParams();
+    const containerRef = useRef<any>();
+    const controllerRef = useRef<any>();
+    const definition = window.__DEFINITION_MAP__[componentKey];
+    if (!definition)
+        return null;
+    const [activeMenu, setActiveMenu] = useState();
+    const menuList = definition?.getMenuList() ?? [];
+    const {width, height} = definition.getBaseInfo();
+    const menuToConfig = definition.getMenuToConfigContentMap();
+    const ConfigComponent = menuToConfig[activeMenu ?? ''];
+
+
+    useEffect(() => {
+        const Controller = definition.getController();
+        const controllerInstance = new Controller();
+        controllerInstance.create(containerRef.current, definition.getInitConfig(), null).then(() => {
+            controllerInstance.registerEvent();
+        })
+        controllerRef.current = controllerInstance;
+    }, []);
+
+
+    return (
+        <div className={style['main-canvas']}>
+            <div className={style["canvas-left"]}>
+                <div style={{width, height}} ref={containerRef}></div>
+            </div>
+            <div className={style["canvas-right"]}>
+                <div className={style["config-menus"]}>
+                    {
+                        menuList.map((menu: any) => {
+                            return (
+                                <div key={menu.key}
+                                     onClick={() => setActiveMenu(menu.key)}
+                                     className={`${style['config-menu-item']} ${activeMenu === menu.key ? style['menu-active'] : ''}`}>
+                                    {menu.name}
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                <div className={style["config-content"]}>
+                    {ConfigComponent && <ConfigComponent controller={controllerRef.current}/>}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+createRoot(document.getElementById('root')!).render(
+    <RouterProvider router={createBrowserRouter([
+        {
+            path: '/',
+            element: <ComponentList/>
+        },
+        {
+            path: '/component/:componentKey',
+            element: <ComponentView/>
+        }
+    ])}/>
+);
+

package/light-chaser-cli/template/src/vite-env.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+/// <reference types="vite/client" />
+
+import {AbstractDesignerDefinition} from "light-chaser-interface";
+
+declare global {
+    interface Window {
+        __DEFINITION_MAP__: Record<string, AbstractDesignerDefinition>;
+        __COMPONENT_INFO_LIST__: object[];
+        __CURRENT_COMPONENT__: string;
+    }
+}

package/light-chaser-cli/template/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "useDefineForClassFields": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/light-chaser-cli/template/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsx": "react",
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  }
+}

package/light-chaser-interface/README.md

@@ -0,0 +1,3 @@
+light-chaser-interface子包用于脚手架的接口定义，这些接口仅作为定义。不做具体实现。目的是为了使用脚手架自定义组件时能编译动过。而实际使用时。应该使用主设计器内的实现。
+
+> 警告：本包内的接口定义的变动应随主设计器内的接口定义的变动而变动。两者应该从设计定义上保持一致，实现上两者不做要求

package/light-chaser-interface/lib/AbstractController.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 {UpdateOptions} from "light-chaser-types";
+
+/**
+ * @param I 组件实例类型
+ * @param C 组件配置类型
+ */
+abstract class AbstractController<I = any, C = any> {
+
+    /**
+     * 组件实例引用
+     * @protected
+     */
+    protected instance: I | null = null;
+    /**
+     * 组件配置(包括组件数据)
+     * @protected
+     */
+    public config: C | null = null;
+    /**
+     * 组件所处容器的dom元素
+     * @protected
+     */
+    public container: HTMLElement | null = null;
+
+    /******************生命周期******************/
+
+    /**
+     * 创建组件并将组件挂载到指定的容器中
+     * @param container 容器
+     * @param config 组件配置
+     * @param others 组件配置
+     */
+    public abstract create(container: HTMLElement, config: C, ...others: unknown[]): Promise<void>;
+
+    /**
+     * 更新组件配置，并触发组件重新渲染
+     * @param config 组件属性（参数）
+     * @param upOp 操作类型
+     */
+    public abstract update(config: C, upOp?: UpdateOptions): void;
+
+    /**
+     * 销毁组件
+     */
+    public destroy(): void {
+    }
+
+
+    /******************普通方法******************/
+    /**
+     * 获取组件配置数据
+     */
+    public abstract getConfig(): C | null;
+
+}
+
+export default AbstractController;

package/light-chaser-interface/lib/AbstractDefinition.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 {ComponentType} from "react";
+import AbstractController from "./AbstractController";
+import {BaseInfoType, ClazzTemplate, ICategorize, MenuToConfigMappingType} from "light-chaser-types";
+
+export interface MenuInfo {
+    //图标
+    icon: ComponentType;
+    //名称
+    name: string;
+    //标识
+    key: string;
+    //点击事件
+    onClick?: (menuKey: string) => void;
+}
+
+/**
+ * 自动扫描抽象组件定义核心类。
+ * 对于所有继承并实现了该抽象类的子类，都会被自动扫描到并注册到设计器中。
+ * 因此，所有要接入设计器的react组件都应该按照该类的约定实现其所有的方法。
+ *
+ * 泛型说明：
+ * C: 组件控制器类，用于指定当前组件定义对应的控制器类
+ * P: 组件配置类型，用于指定当前组件的配置数据(config属性的类型)
+ */
+export abstract class AbstractDefinition<C extends AbstractController = AbstractController, P = any> {
+
+    /**
+     * 返回组件基础信息，用于在组件列表中展示
+     */
+    abstract getBaseInfo(): BaseInfoType ;
+
+    /**
+     * 返回组件的初始配置，用于在画布渲染组件时的初始化组件数据
+     */
+    abstract getInitConfig(): P;
+
+    /**
+     * 返回React组件Controller控制器的类模板，在画布中创建组件实例时会根据该方法的返回值实例化组件控制器并保存。
+     * 后续将通过该控制器的实例对象来控制组件的生命周期
+     */
+    abstract getController(): ClazzTemplate<C> | null;
+
+    /**
+     * 返回组件图片缩略图，在组件列表中展示时使用。图片尺寸越小越好
+     */
+    abstract getChartImg(): string | null;
+
+    /**
+     * 返回右侧配置菜单列表，双击组件时需要展示该菜单列表
+     */
+    abstract getMenuList(): Array<MenuInfo>;
+
+    /**
+     * 返回右侧菜单与对应配置内容组件的映射关系
+     */
+    abstract getMenuToConfigContentMap(): MenuToConfigMappingType;
+
+
+    /**
+     * 自定义组件主分类，如需要创建一个设计器没有提供的主分类，则实现该方法
+     */
+    getCategorize(): ICategorize | null {
+        return null;
+    }
+
+    /**
+     * 自定义组件子分类,如需要创建一个设计器没有提供的子分类，则实现该方法
+     */
+    getSubCategorize(): ICategorize | null {
+        return null;
+    }
+}
+

package/light-chaser-interface/lib/AbstractDesignerController.ts

@@ -0,0 +1,80 @@
+/*
+ * 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 AbstractController from "./AbstractController";
+import BPExecutor from "./BPExecutor";
+import {IFilterConfigType, IThemeItem} from "light-chaser-types";
+
+
+/**
+ * lib中的AbstractDesignerController仅作定义使用，不做具体实现。用于脚手架中做类型约束
+ * AbstractDesignerController继承自AbstractController，在泛型的定义和约束上和AbstractController完全保持一致。
+ * 此外，AbstractDesignerController扩展了一些自定义组件所需的特有方法，如：修改组件数据、注册蓝图事件等
+ */
+abstract class AbstractDesignerController<I = any, C = any> extends AbstractController<I, C> {
+    //上一次数据连接状态 true：成功 false：失败
+    protected lastReqState: boolean = true;
+    //蓝图事件触发器
+    public bpExecutor: BPExecutor | null = null;
+    //组件统一数据更新器
+    public componentDataUpdater: any | null = null;
+    //循环渲染索引
+    public index?: number;
+
+    public async create(container: HTMLElement, config: C, bpExecutor: BPExecutor, index?: number): Promise<void> {
+    }
+
+    /**
+     * 更新组件数据,且必须触发组件的重新渲染
+     * @param data
+     */
+    public changeData(data: any): void {
+    }
+
+    /**
+     * 用于注册组件事件，在组件接入蓝图事件系统时使用
+     */
+    public registerEvent(): void {
+    }
+
+    /**
+     * 加载组件数据，用于在预览（展示）模式下渲染完组件后根据当前组件的数据配置自动加载并更新组件数组。
+     * 注：若自定义组件有自己的数据加载方式，则需要覆写此方法
+     */
+    public loadComponentData(): void {
+
+    }
+
+    /**
+     * 更新本组件的主题样式方法，用于在全局切换主题时使用
+     * @param newTheme 新主题
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public updateTheme(newTheme: IThemeItem): void {
+    }
+
+    public updateFilter(filter: IFilterConfigType): void {
+    }
+
+    /**
+     * 设置组件的显示状态，默认直接使用css属性控制组件显示。
+     * 接入组件的过程中，建议自行实现该方法以达到更好的性能表现。建议的做法是显示时重新渲染组件. 隐藏时卸载整个组件即dom元素。可以节省内存开销
+     * @param visible
+     */
+    public setVisible(visible: boolean): void {
+    }
+
+
+    destroy() {
+    }
+}
+
+export default AbstractDesignerController;

package/light-chaser-interface/lib/AbstractDesignerDefinition.ts

@@ -0,0 +1,71 @@
+/*
+ * 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 {AbstractDefinition} from "./AbstractDefinition";
+import AbstractController from "./AbstractController";
+import AbstractDesignerController from "./AbstractDesignerController";
+import {Optimize} from "@icon-park/react";
+import {ComponentType} from "react";
+import {EventInfo, MenuToConfigMappingType} from "light-chaser-types";
+
+export interface ActionInfo {
+    name: string;
+    id: string;
+    handler: (controller: AbstractDesignerController, params?: any) => void;
+}
+
+export interface MenuInfo {
+    //图标
+    icon: ComponentType;
+    //名称
+    name: string;
+    //标识
+    key: string;
+    //点击事件
+    onClick?: (menuKey: string) => void;
+}
+
+
+export default abstract class AbstractDesignerDefinition<C extends AbstractController = AbstractDesignerController, P = any> extends AbstractDefinition<C, P> {
+
+    getMenuList(): Array<MenuInfo> {
+        return [
+            {
+                icon: Optimize,
+                name: '样式',
+                key: 'style',
+            },
+        ];
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {};
+    }
+
+    /**
+     * 返回当前组件能触发的事件列表, 在蓝图图层节点中使用
+     */
+    getEventList(): EventInfo[] {
+        return [
+            {
+                id: "loaded",
+                name: "组件加载完成时",
+            }
+        ];
+    }
+
+    /**
+     * 返回当前组件能接受的动作列表，在蓝图图层节点中使用。可据此实现对组件的操作
+     */
+    getActionList(): ActionInfo[] {
+        return [];
+    }
+}

package/light-chaser-interface/lib/BPExecutor.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 BPExecutor {
+
+    /**
+     * 触发组件事件
+     * @param componentId 组件id
+     * @param eventId 事件id
+     * @param params 事件参数
+     * @param index 组件索引(循环渲染时使用)
+     */
+    public triggerComponentEvent(componentId: string, eventId: string, params: any, index?: number): void {
+    }
+
+}

package/light-chaser-interface/lib/ConfigComponents.tsx

@@ -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.
+ */
+
+export function AnimationConfig() {
+    return (
+        <></>
+    )
+}
+
+export function ThemeConfig() {
+    return (
+        <></>
+    )
+}
+
+export function BaseInfo() {
+    return (
+        <></>
+    )
+}
+
+export function DataConfig() {
+    return (
+        <></>
+    )
+}
+
+export function FilterConfig() {
+    return (
+        <></>
+    )
+}

package/light-chaser-interface/lib/main.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 {AnimationConfig, ThemeConfig, BaseInfo, DataConfig, FilterConfig} from './ConfigComponents.tsx'
+export {default as AbstractController} from './AbstractController.ts'
+export {default as AbstractDesignerController} from './AbstractDesignerController.ts'
+export {AbstractDefinition} from './AbstractDefinition.ts'
+export {default as AbstractDesignerDefinition} from './AbstractDesignerDefinition.ts'
+export {default as BPExecutor} from './BPExecutor'

package/light-chaser-interface/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "light-chaser-interface",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/light-chaser-interface.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "check": "npx tsc --noEmit --watch",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@icon-park/react": "^1.4.2",
+    "light-chaser-util": "^0.0.6",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "light-chaser-types": "^0.0.5",
+    "react-refresh": "^0.8.3",
+    "typescript": "^5.0.2",
+    "vite": "^5.0.7",
+    "vite-plugin-dts": "4.0.0-beta.1"
+  }
+}

package/light-chaser-interface/tsconfig-build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "lib"
+  ]
+}