light-chaser-pro 1.0.0

package/light-chaser-types/types/GlobalVariableTypes.ts

@@ -0,0 +1,43 @@
+/*
+ * 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} from "./DataSourceTypes.ts";
+
+export interface IGlobalVariableManager {
+    globalVariables: Record<string, IGlobalVariable>;
+}
+
+export interface IGlobalVariable {
+    /**
+     * 全局变量id
+     */
+    id?: string;
+    /**
+     * 全局变量key
+     */
+    key?: string;
+    /**
+     * 全局变量值
+     */
+    value?: any;
+    /**
+     * 触发源，支持设计器自带的所有数据源触发修改全局变量的值
+     */
+    triggerSource?: DataConfigType;
+    /**
+     * 绑定目标，记录当前变量已经绑定了那些目标，比如组件的数据源中使用了全局变量
+     */
+    bindTarget?: string[];
+    /**
+     * 更新全局变量数据时，是否主动触发绑定该变量的组件重新渲染
+     */
+    reRender?: boolean;
+}

package/light-chaser-types/types/LayerTypes.ts

@@ -0,0 +1,90 @@
+/*
+ * 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 interface ILayerManager {
+    //元素样式
+    elemConfigs?: { [key: string]: Record<string, any> };
+    //图层信息
+    layerConfigs?: { [key: string]: ILayerItem };
+    //图层头指针
+    layerHeader?: string;
+    //图层尾指针
+    layerTail?: string;
+}
+
+
+export interface ILayerItem {
+    //唯一标识
+    id?: string | undefined;
+    //组件名称
+    name?: string | undefined;
+    //组件类型
+    type?: string | undefined;
+    //宽度
+    width?: number;
+    //高度
+    height?: number;
+    //坐标
+    x?: number;
+    //y坐标
+    y?: number;
+    //旋转角度
+    rotate?: number;
+    //是否隐藏（仅用于编辑模式）
+    hide?: boolean;
+    //是否锁定（仅用于编辑模式）
+    lock?: boolean;
+    //顺序
+    order?: number;
+    //父图层id
+    pid?: string;
+    //子图层列表
+    children?: ILayerItem[];
+    //子图层头指针
+    childHeader?: string;
+    //子图层尾指针
+    childTail?: string;
+    //前指针
+    prev?: string;
+    //后指针
+    next?: string;
+}
+
+
+/**
+ * 多个组件下的包围盒坐标
+ */
+export interface GroupCoordinateType {
+    /**
+     * 最小X坐标
+     */
+    minX?: number;
+    /**
+     * 最小Y坐标
+     */
+    minY?: number;
+    /**
+     * 最大X坐标
+     */
+    maxX?: number;
+    /**
+     * 最大Y坐标
+     */
+    maxY?: number;
+    /**
+     * 组合框的宽度
+     */
+    width?: number;
+    /**
+     * 组合框的高度
+     */
+    height?: number;
+}

package/light-chaser-types/types/ReleaseTypes.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.
+ */
+
+/**
+ * 发布设置类型定义
+ */
+export interface IProjectRelease {
+    // 是否加密
+    encrypt?: boolean;
+    // 密码
+    password?: string;
+    // 有效期（为null表示永久有效）
+    expirationDate?: number;
+}

package/light-chaser-types/types/ThemeTypes.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 interface ThemeColors {
+    //主体色
+    main?: string;
+    //主文字
+    mainText?: string;
+    //次文字
+    subText?: string;
+    //背景色
+    background?: string;
+    //补充一
+    supplementFirst?: string;
+    //补充二
+    supplementSecond?: string;
+}
+
+export interface IThemeItem {
+    colors: ThemeColors;
+    name: string;
+    id: string;
+}

package/light-chaser-types/types/main.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.
+ */
+
+export type {
+    IProjectInfoManager,
+    IPage,
+    IPageParam
+} from './DesignerTypes.ts';
+
+export {
+    DesignerMode,
+    ProjectState,
+} from './DesignerTypes.ts';
+
+export type {
+    IBluePrintManager,
+    IBPLine,
+    IPoint,
+    BPNodeLayoutType,
+    NodeInfoType,
+    AnchorPointInfoType,
+    EventInfo
+} from './BluePrintTypes.ts';
+
+export {AnchorPointType} from './BluePrintTypes.ts';
+
+export type {AdaptationType, ICanvasManager} from './CanvasTypes.ts';
+
+export type {
+    MenuToConfigMappingType,
+    BaseInfoType,
+    ComponentBaseProps,
+    ComponentInfoType,
+    UpdateOptions,
+    ICategorize,
+    MenuInfo
+} from './ComponentTypes.ts';
+
+export type {
+    APIConfig,
+    IDatabase,
+    DataConfigType
+} from './DataSourceTypes.ts';
+
+export type {DesignerRulerRef, ClazzTemplate} from './DesignerToolsTypes.ts';
+
+export type {
+    IFilterConfigType,
+    IFilterManager,
+    IFilter
+} from './FilterTypes.ts';
+
+export type {
+    ILayerManager,
+    ILayerItem
+} from './LayerTypes.ts';
+
+export type {
+    ThemeColors,
+    IThemeItem
+} from './ThemeTypes.ts';

package/light-chaser-types/vite.config.ts

@@ -0,0 +1,14 @@
+import {defineConfig} from 'vite'
+import path from 'path'
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+    plugins: [dts({include: ['types']})],
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, 'types/main.ts'),
+            formats: ['es'],
+            fileName: 'light-chaser-types'
+        },
+    }
+});

package/light-chaser-ui/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="theme-color" content="#000000"/>
+    <meta name="description" content="数据可视化设计器"/>
+    <meta name="robots" content="index,follow">
+    <meta name="author" content="xiaopujun"/>
+    <meta name="keywords"
+          content="light,chaser,light chaser,LIGHT,LIGHT CHASER,数据,可视化,数据可视化,大屏可视化,看板,大屏看板,数据看板,编辑器,web编辑器,web设计器,设计器,拖拽,可拖拽,可视化图表,可视化工具,追光者设计器,追光者,react大屏,react大屏设计器,react数据可视化,数字孪生">
+    <title>LIGHT CHASER UI TEST</title>
+    <style>
+        * {
+            user-select: none;
+        }
+    </style>
+</head>
+<body style="padding: 0;margin: 0;background: #333333">
+<div id="root" style="height: 100%"></div>
+<script type="module" src="/src/test.tsx"></script>
+</body>
+</html>

package/light-chaser-ui/lib/accordion/Accordion.less

@@ -0,0 +1,158 @@
+/*
+ * 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.
+ */
+.lc-accordion {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  background-color: #2C2C3E;
+  overflow: hidden; // 确保圆角裁剪内部元素
+
+  .ant-collapse-borderless {
+    background: transparent;
+
+    > .ant-collapse-item {
+      border-bottom: none;
+
+      > .ant-collapse-header {
+        padding: 16px 20px;
+        color: #FFFFFF;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 28px;
+        transition: all 0.2s ease;
+        border-radius: 8px 8px 0 0; // 添加顶部圆角
+        align-items: center;
+
+        &:hover {
+          background-color: rgba(79, 184, 255, 0.1);
+          border-radius: 8px 8px 0 0; // 保持悬浮时的圆角
+        }
+
+        &:focus-visible {
+          outline: 2px solid #4FB8FF;
+          outline-offset: -2px;
+          border-radius: 8px 8px 0 0; // 保持焦点时的圆角
+        }
+
+        .ant-collapse-extra {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+
+  .ant-collapse-content {
+    border: none;
+    background-color: #2C2C3E;
+    border-radius: 0 0 8px 8px; // 底部圆角
+
+    .ant-collapse-content-box {
+      padding: 10px 16px 8px;
+      background-color: #2C2C3E;
+      color: #A0A0B2;
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: 0 0 8px 8px; // 底部圆角
+    }
+  }
+}
+
+.lc-sub-accordion {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  background-color: #1E1E2F;
+  overflow: hidden; // 确保圆角裁剪内部元素
+
+  .ant-collapse-panel {
+    .ant-collapse-body {
+      padding: 10px 18px !important;
+    }
+  }
+
+  .ant-collapse-borderless {
+    background: transparent;
+
+    > .ant-collapse-item {
+      border-bottom: none;
+
+      > .ant-collapse-header {
+        padding: 12px 16px;
+        color: #A0A0B2;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        transition: all 0.2s ease;
+        border-radius: 8px; // 初始圆角
+        align-items: center;
+
+
+        &:hover {
+          color: #FFFFFF;
+          background-color: rgba(79, 184, 255, 0.1);
+          border-radius: 8px 8px 0 0; // 展开时保持圆角
+        }
+
+        &:focus-visible {
+          outline: 2px solid #4FB8FF;
+          outline-offset: -2px;
+          border-radius: 8px 8px 0 0; // 焦点时保持圆角
+        }
+
+        .ant-collapse-extra {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+
+  .ant-collapse-content {
+    border: none;
+    background-color: #1E1E2F;
+    border-radius: 0 0 8px 8px; // 底部圆角
+
+    .ant-collapse-content-box {
+      padding: 16px;
+      background-color: #1E1E2F;
+      color: #A0A0B2;
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: 0 0 8px 8px; // 底部圆角
+    }
+  }
+}
+
+// 处理折叠状态下的圆角
+.lc-accordion,
+.lc-sub-accordion {
+  .ant-collapse-item:not(.ant-collapse-item-active) {
+    .ant-collapse-header {
+      border-radius: 8px !important; // 未展开时保持完整圆角
+
+      &:hover {
+        border-radius: 8px !important; // 未展开时悬浮也保持完整圆角
+      }
+    }
+  }
+}
+
+// 图标样式统一
+.lc-accordion,
+.lc-sub-accordion {
+  .icon-park {
+    width: 18px;
+    height: 18px;
+    color: #A0A0B2;
+
+    &:hover {
+      color: #4FB8FF;
+    }
+  }
+}

package/light-chaser-ui/lib/accordion/Accordion.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 {Collapse, CollapseProps, Tooltip} from "antd";
+import {Help} from "@icon-park/react";
+import './Accordion.less';
+import {AccordionProps} from "./IAccordionType.ts";
+
+/**
+ * 手风琴组件
+ * 说明:该组件的。 Title属性show switch属性。 都是非受控的属性。 也就是说只能在创建这个组件的时候就确定这两个属性的值，
+ * 后续是无法改变的。 除非销毁这个组件之后重新创建组件。 Value属性和defaultValue属性。 两者任选其一。 如果你使用value属性。
+ * 则这个组件的值是受控的。 可以通过外部控制来更新这个组件的状态值。 如果你使用的是defaultValue属性，则这个组件的值是非受控的。
+ * 操作这个组件的时候。 组件值，由本组件自身维护，不受外部控制。
+ */
+export default function Accordion(props: AccordionProps) {
+    const {label, tip, defaultActive, children} = props;
+    const items: CollapseProps['items'] = [
+        {
+            key: '1',
+            label: label,
+            children: <div>{children}</div>,
+            extra: tip && <Tooltip title={tip} style={{marginLeft: 1}}><Help/></Tooltip>
+        },
+    ];
+
+    return (
+        <div className={'lc-accordion'}>
+            <Collapse bordered={false}
+                      defaultActiveKey={defaultActive ? ['1'] : undefined}
+                      expandIconPosition={'end'}
+                      items={items}/>
+        </div>
+    );
+}

package/light-chaser-ui/lib/accordion/IAccordionType.ts

@@ -0,0 +1,35 @@
+/*
+ * 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, {ReactNode} from "react";
+
+export interface AccordionProps {
+    /**
+     * 标题
+     */
+    label?: string;
+    /**
+     * 说明文字
+     */
+    tip?: string;
+    // 开关值变化回调
+    onChange?: (data: boolean) => void;
+    // 开关状态值（受控）
+    value?: boolean;
+    // 开关状态值（非受控）
+    defaultValue?: boolean;
+    /**
+     * 默认展开
+     */
+    defaultActive?: boolean;
+    containerStyle?: React.CSSProperties;
+    children?: ReactNode;
+}

package/light-chaser-ui/lib/accordion/SubAccordion.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 {Collapse, CollapseProps, Tooltip} from "antd";
+import {Help} from "@icon-park/react";
+import './Accordion.less';
+import {AccordionProps} from "./IAccordionType.ts";
+
+
+/**
+ * 手风琴组件
+ * 说明:该组件的。 Title属性show switch属性。 都是非受控的属性。 也就是说只能在创建这个组件的时候就确定这两个属性的值，
+ * 后续是无法改变的。 除非销毁这个组件之后重新创建组件。 Value属性和defaultValue属性。 两者任选其一。 如果你使用value属性。
+ * 则这个组件的值是受控的。 可以通过外部控制来更新这个组件的状态值。 如果你使用的是defaultValue属性，则这个组件的值是非受控的。
+ * 操作这个组件的时候。 组件值，由本组件自身维护，不受外部控制。
+ */
+export default function SubAccordion(props: AccordionProps) {
+    const {label, tip, containerStyle, defaultActive, children} = props;
+    const items: CollapseProps['items'] = [
+        {
+            key: '1',
+            label: label,
+            children: <div>{children}</div>,
+            extra: tip && <Tooltip title={tip} style={{marginLeft: 1}}><Help/></Tooltip>
+        },
+    ];
+
+    return (
+        <div className={'lc-sub-accordion'} style={{...containerStyle}}>
+            <Collapse bordered={false}
+                      defaultActiveKey={defaultActive ? ['1'] : undefined}
+                      expandIconPosition={'end'}
+                      items={items}/>
+        </div>
+    );
+}

package/light-chaser-ui/lib/button/Button.tsx

@@ -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 React from 'react';
+import {Button as AntdButton, ButtonProps as AntdButtonProps} from 'antd';
+
+export interface ButtonProps {
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onChange?: () => void;
+    type?: AntdButtonProps['type'];
+    width?: string | number;
+    height?: string | number;
+    background?: string;
+}
+
+export default function Button(props: ButtonProps) {
+    const {onChange, onClick, background, type, width, height, children} = props;
+
+    const _onChange = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        onChange && onChange();
+        onClick && onClick(e);
+    }
+
+    return (
+        <AntdButton type={type ?? 'primary'} style={{width: width ?? '100%', height, background}} onClick={_onChange}
+                    className="lc-button">{children}</AntdButton>
+    );
+}

package/light-chaser-ui/lib/card-panel/CardPanel.less

@@ -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.
+ */
+
+.card-panel {
+
+  .card-panel-label {
+    color: #d1dfe9;
+    margin-bottom: 10px;
+    font-size: 13px;
+
+    .card-help {
+      font-size: 14px;
+      position: relative;
+      top: 3px;
+      cursor: pointer;
+    }
+  }
+
+  .card-panel-content {
+    color: #c6c9cd;
+    font-size: 12px;
+    padding: 0 10px;
+  }
+}

package/light-chaser-ui/lib/card-panel/CardPanel.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 from "react";
+import "./CardPanel.less";
+import {Tooltip} from "antd";
+import {Help} from "@icon-park/react";
+
+export interface ItemPanelProps {
+    label: string;
+    tip?: string;
+    children: React.ReactNode;
+    contentStyle?: React.CSSProperties;
+}
+
+const CardPanel: React.FC<ItemPanelProps> = (props) => {
+    const {label, tip, contentStyle, children} = props;
+    return (
+        <div className={"card-panel"}>
+            <div className={"card-panel-label"}>
+                {label} {tip && <Tooltip className={'card-help'} title={tip}>&nbsp;<Help/>&nbsp;</Tooltip>}
+            </div>
+            <div style={{...contentStyle}} className={"card-panel-content"}>{children}</div>
+        </div>
+    )
+}
+
+export default CardPanel;