light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/base-video/BaseVideoDefinition.ts

@@ -0,0 +1,86 @@
+/*
+ * 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 {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+import BaseVideoController, {BaseVideoComponentProps} from "./BaseVideoController.ts";
+import baseVideo from './baseVideo.png';
+import {MenuInfo} from "../../../designer/right/MenuType";
+import React, {lazy} from "react";
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+
+const BaseInfo = React.lazy(() => import("../../common-component/base-info/BaseInfo"));
+const FilterConfig = React.lazy(() => import("../../common-component/filter-config/FilterConfig.tsx"));
+const BaseVideoStyleConfig = lazy(() => import("./BaseVideoConfig.tsx").then((module) => ({default: module.BaseVideoStyleConfig})));
+
+export default class BaseVideoDefinition extends AbstractDesignerDefinition<BaseVideoController, BaseVideoComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "视频",
+            compKey: "BaseVideo",
+            categorize: "media",
+        };
+    }
+
+    getChartImg(): string | null {
+        return baseVideo;
+    }
+
+    getController(): ClazzTemplate<BaseVideoController> | null {
+        return BaseVideoController;
+    }
+
+    getInitConfig(): BaseVideoComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '视频',
+                type: 'BaseVideo',
+            },
+            style: {
+                src: undefined,
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+        };
+    }
+
+    getMenuList(): Array<MenuInfo> {
+        return super.getMenuList().filter((item: MenuInfo) => (item.key !== 'theme' && item.key !== 'data'));
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: BaseVideoStyleConfig,
+            filter: FilterConfig
+        };
+    }
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "click",
+                name: "点击时",
+            }
+        ]);
+    }
+
+}

package/light-chaser-app/src/comps/lc/carousel/CarouselComponent.less

@@ -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.
+ */
+
+.antd-carousel {
+  div, img {
+    width: 100%;
+    height: 100%;
+  }
+}

package/light-chaser-app/src/comps/lc/carousel/CarouselComponent.tsx

@@ -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 React, {ForwardedRef, useImperativeHandle, useRef, useState} from 'react';
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+import {Carousel} from "antd";
+import './CarouselComponent.less';
+import defaultData from './carousel.png';
+
+export interface CarouselComponentStyle {
+    //自动播放
+    autoplay?: boolean;
+    //自动播放速度
+    autoplaySpeed?: number;
+    //显示按钮
+    dots?: boolean;
+    //渐变切换
+    fade?: boolean;
+    //切换动效时间
+    speed?: number;
+}
+
+export interface CarouselComponentProps extends ComponentBaseProps {
+    style?: CarouselComponentStyle;
+}
+
+export interface CarouselComponentRef {
+    updateConfig: (newConfig: CarouselComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    changeVisible: (visible: boolean) => void;
+}
+
+const CarouselComponent = React.forwardRef((props: CarouselComponentProps,
+                                            ref: ForwardedRef<CarouselComponentRef>) => {
+    const [config, setConfig] = useState<CarouselComponentProps>({...props});
+    const [visible, setVisible] = useState(true);
+
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({...newConfig}),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        changeVisible: (visible) => setVisible(visible)
+    }));
+
+    const onClick = () => {
+        if ('click' in eventHandlerMap.current) {
+            eventHandlerMap.current['click']();
+        }
+    }
+
+    if (!visible)
+        return null;
+    const data = config?.data?.value || [defaultData, defaultData]
+    return (
+        <div style={{width: '100%', height: '100%', overflow: 'hidden'}} onClick={onClick} className={'antd-carousel'}>
+            <Carousel {...config.style}>
+                {
+                    data.map((src: string, index: number) => {
+                        return (
+                            <div key={index}><img alt={'轮播图' + index} src={src}/></div>
+                        )
+                    })
+                }
+            </Carousel>
+        </div>
+    );
+});
+
+export default CarouselComponent;

package/light-chaser-app/src/comps/lc/carousel/CarouselConfig.tsx

@@ -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 React from 'react';
+import {CarouselController} from "./CarouselController.ts";
+import {ConfigType} from "../../../designer/right/ConfigContent";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+
+export const CarouselConfig: React.FC<ConfigType<CarouselController>> = ({controller}) => {
+
+    const config = controller.getConfig()?.style ?? {};
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        controller.update(dataFragment);
+    }
+
+    const schema: Control = {
+        key: 'style',
+        type: 'grid',
+        children: [
+            {
+                type: 'switch',
+                key: 'autoplay',
+                label: '自动播放',
+                value: config.autoplay,
+            },
+            {
+                type: 'number-input',
+                key: 'autoplaySpeed',
+                label: '播放速度',
+                value: config.autoplaySpeed,
+            },
+            {
+                type: 'switch',
+                key: 'dots',
+                label: '显示按钮',
+                value: config.dots,
+            },
+            {
+                type: 'switch',
+                key: 'fade',
+                label: '淡入淡出',
+                value: config.fade,
+            },
+            {
+                type: 'number-input',
+                key: 'speed',
+                label: '动效速度',
+                value: config.speed,
+            },
+        ]
+    }
+
+
+    return (
+        <div style={{padding: 10}}><LCGUI schema={schema} onFieldChange={onFieldChange}/></div>
+    )
+}
+

package/light-chaser-app/src/comps/lc/carousel/CarouselController.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 "../../../framework/core/AbstractController";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import CarouselComponent, {CarouselComponentProps, CarouselComponentRef} from "./CarouselComponent.tsx";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import BPExecutor from "../../../designer/blueprint/core/BPExecutor";
+
+export class CarouselController extends AbstractDesignerController<CarouselComponentRef, CarouselComponentProps> {
+
+    async create(container: HTMLElement, config: CarouselComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        this.instance = await ComponentUtil.createAndRender<CarouselComponentRef>(container, CarouselComponent, config);
+    }
+
+    destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): CarouselComponentProps | null {
+        return this.config;
+    }
+
+
+    changeData(data: string[]) {
+        if (this.config?.data)
+            this.config.data.value = data;
+        this.instance?.updateConfig(this.config!);
+    }
+
+    update(config: CarouselComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!);
+    }
+
+    registerEvent() {
+        const nodeId = this.config?.base?.id ?? '';
+        const executor = this.bpExecutor;
+        this.instance?.setEventHandler({
+            click: () => executor?.triggerComponentEvent(nodeId!, "click", this.config),
+        })
+    }
+
+
+    setVisible(visible: boolean) {
+        this.instance?.changeVisible(visible);
+    }
+}

package/light-chaser-app/src/comps/lc/carousel/CarouselDefinition.ts

@@ -0,0 +1,91 @@
+/*
+ * 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 {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+import {MenuInfo} from "../../../designer/right/MenuType";
+import carouselImg from './carousel.png';
+import {CarouselController} from "./CarouselController.ts";
+import {CarouselComponentProps} from "./CarouselComponent.tsx";
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+import {lazy} from "react";
+
+const CarouselConfig = lazy(() => import("./CarouselConfig.tsx").then((module) => ({default: module.CarouselConfig})));
+
+export default class CarouselDefinition extends AbstractDesignerDefinition<CarouselController, CarouselComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "轮播图",
+            compKey: "carousel",
+            categorize: "web",
+        };
+    }
+
+    getChartImg(): string | null {
+        return carouselImg;
+    }
+
+    getController(): ClazzTemplate<CarouselController> | null {
+        return CarouselController;
+    }
+
+    getInitConfig(): CarouselComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '轮播图',
+                type: 'carousel',
+            },
+            style: {
+                autoplay: true,
+                autoplaySpeed: 3000,
+                dots: true,
+                fade: false,
+                speed: 500,
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+            data: {
+                sourceType: 'static',
+                value: [carouselImg, carouselImg]
+            }
+        };
+    }
+
+    getMenuList(): Array<MenuInfo> {
+        return super.getMenuList().filter((item: MenuInfo) => (item.key !== 'theme'));
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        const menuMapping = super.getMenuToConfigContentMap();
+        menuMapping['style'] = CarouselConfig;
+        return menuMapping;
+    }
+
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "click",
+                name: "点击时",
+            }
+        ]);
+    }
+}

package/light-chaser-app/src/comps/lc/date-time/DateTimeComponent.less

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+.date-time-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}

package/light-chaser-app/src/comps/lc/date-time/DateTimeComponent.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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, {ForwardedRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import './DateTimeComponent.less';
+import {ComponentInfoType} from "light-chaser-types/types/ComponentTypes.ts";
+import {IFilterConfigType} from "light-chaser-types/types/FilterTypes.ts";
+
+export interface DateTimeComponentStyle {
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    alignItems?: string;
+    justifyContent?: string;
+    letterSpacing?: string;
+    formatType?: FormatType;
+}
+
+export interface DateTimeComponentProps {
+    base?: ComponentInfoType;
+    style?: DateTimeComponentStyle;
+    filter?: IFilterConfigType;
+}
+
+export interface DateTimeComponentRef {
+    updateConfig: (newConfig: DateTimeComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    destroy: () => void;
+    changeVisible: (visible: boolean) => void;
+}
+
+export enum FormatType {
+    DASH = '0',// 2021-01-01 12:00:00
+    SLASH = '1', // 2021/01/01 12:00:00
+    CN = '2', // 2021年01月01日 12时00分00秒
+}
+
+function formatDateTime(format: string): string {
+    const current = new Date();
+    // 获取年、月、日
+    const year = current.getFullYear();
+    const month = (current.getMonth() + 1).toString().padStart(2, '0');
+    const day = current.getDate().toString().padStart(2, '0');
+    // 获取小时、分钟、秒
+    const hours = current.getHours().toString().padStart(2, '0');
+    const minutes = current.getMinutes().toString().padStart(2, '0');
+    const seconds = current.getSeconds().toString().padStart(2, '0');
+
+    switch (format) {
+        case FormatType.SLASH:
+            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+        case FormatType.CN:
+            return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
+        default:
+            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+}
+
+const DateTimeComponent = React.forwardRef((props: DateTimeComponentProps,
+                                            ref: ForwardedRef<DateTimeComponentRef>) => {
+    const [config, setConfig] = useState<DateTimeComponentProps>({...props});
+    const {formatType = FormatType.CN, ...style} = config?.style ?? {};
+    const [datetime, setDateTime] = useState<string>(formatDateTime(formatType));
+    const [visible, setVisible] = useState(true);
+    const timeRef = useRef<NodeJS.Timeout | null>(null);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+
+
+    useEffect(() => {
+        timeRef.current = setInterval(() => {
+            setDateTime(() => formatDateTime(config.style?.formatType ?? FormatType.CN));
+        }, 1000);
+    }, []);
+
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({...newConfig}),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        changeVisible: (visible) => setVisible(visible),
+        destroy: () => {
+            timeRef.current && clearInterval(timeRef.current);
+            timeRef.current = null;
+        }
+    }));
+
+    if (!visible)
+        return null;
+    return (
+        <div className="date-time-component" style={{...style}}>
+            {datetime}
+        </div>
+    );
+});
+
+export default DateTimeComponent;