light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/base-table/BaseTableConfig.tsx

@@ -0,0 +1,252 @@
+/*
+ * 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 {ConfigType} from "../../../designer/right/ConfigContent";
+import {BaseTableController} from "./BaseTableController";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+
+export const BaseTableStyleConfig: React.FC<ConfigType<BaseTableController>> = ({controller}) => {
+
+    const {columns, header, body} = controller.getConfig()?.style || {};
+    const [, setCount] = React.useState(0);
+
+    const schema: Control = {
+        key: 'style',
+        children: [
+            {
+                key: 'header',
+                type: 'accordion',
+                label: '表头',
+                children: [
+                    {
+                        type: 'grid',
+                        children: [
+                            {
+                                key: 'height',
+                                type: 'number-input',
+                                label: '高度',
+                                value: header?.height,
+                                config: {
+                                    min: 0,
+                                }
+                            },
+                            {
+                                key: 'background',
+                                type: 'color-picker',
+                                label: '背景',
+                                value: header?.background,
+                                config: {
+                                    showText: true,
+                                    modes: ['single', 'linear', 'radial']
+                                }
+                            },
+                            {
+                                key: 'color',
+                                type: 'color-picker',
+                                label: '字色',
+                                value: header?.color,
+                                config: {
+                                    showText: true,
+                                }
+                            },
+                            {
+                                key: 'fontSize',
+                                type: 'number-input',
+                                label: '字号',
+                                value: header?.fontSize,
+                                config: {
+                                    min: 0,
+                                }
+                            },
+                            {
+                                key: 'fontFamily',
+                                type: 'select',
+                                label: '字体',
+                                value: header?.fontFamily,
+                                config: {
+                                    options: window.LC_ENV.fonts,
+                                }
+                            },
+                            {
+                                key: 'fontWeight',
+                                type: 'number-input',
+                                label: '加粗',
+                                value: header?.fontWeight,
+                                config: {
+                                    min: 0,
+                                    max: 900,
+                                    step: 100
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: 'body',
+                type: 'accordion',
+                label: '表体',
+                children: [
+                    {
+                        type: 'grid',
+                        children: [
+                            {
+                                key: 'background',
+                                type: 'color-picker',
+                                label: '背景',
+                                value: body?.background,
+                                config: {
+                                    showText: true,
+                                    modes: ['single', 'linear', 'radial']
+                                }
+                            },
+                            {
+                                key: 'lineBackground',
+                                type: 'colors-picker',
+                                label: '行颜色',
+                                value: body?.lineBackground ?? [],
+                                config: {
+                                    modes: ['single', 'linear', 'radial'],
+                                    canAdd: true,
+                                }
+                            },
+                            {
+                                key: 'color',
+                                type: 'color-picker',
+                                label: '字色',
+                                value: body?.color,
+                                config: {
+                                    showText: true,
+                                }
+                            },
+                            {
+                                key: 'fontSize',
+                                type: 'number-input',
+                                label: '字号',
+                                value: body?.fontSize,
+                                config: {
+                                    min: 0,
+                                }
+                            },
+                            {
+                                key: 'fontFamily',
+                                type: 'select',
+                                label: '字体',
+                                value: body?.fontFamily,
+                                config: {
+                                    options: window.LC_ENV.fonts,
+                                }
+                            },
+                            {
+                                key: 'fontWeight',
+                                type: 'number-input',
+                                label: '加粗',
+                                value: body?.fontWeight,
+                                config: {
+                                    min: 0,
+                                    max: 900,
+                                    step: 100
+                                }
+                            },
+                            {
+                                type: 'switch',
+                                label: '轮播',
+                                key: 'enableCarousel',
+                                reRender: true,
+                                value: body?.enableCarousel,
+                            },
+                            {
+                                rules: "{enableCarousel}==='true'",
+                                type: 'number-input',
+                                label: '速度',
+                                key: 'carouselSpeed',
+                                value: body?.carouselSpeed,
+                                config: {
+                                    min: 0,
+                                    max: 100,
+                                    step: 0.01
+                                }
+                            },
+                            {
+                                type: 'number-input',
+                                label: '页行数',
+                                key: 'pageSize',
+                                value: body?.pageSize,
+                                config: {
+                                    min: 0,
+                                    max: 100
+                                }
+                            },
+                        ]
+                    }
+                ]
+            },
+            {
+                key: 'columns',
+                type: 'control-group',
+                label: '表格列',
+                value: columns,
+                config: {
+                    itemName: '列',
+                    template: {
+                        type: 'grid',
+                        children: [
+                            {
+                                key: 'key',
+                                type: 'input',
+                                label: '列字段名',
+                                value: 'newColumn',
+                            },
+                            {
+                                key: 'width',
+                                type: 'number-input',
+                                label: '列宽',
+                                config: {
+                                    min: 0,
+                                }
+                            },
+                            {
+                                key: 'label',
+                                type: 'input',
+                                label: '列显示名',
+                                value: '新建字段',
+                            },
+                            {
+                                key: 'textAlign',
+                                type: 'select',
+                                label: '对齐',
+                                value: 'center',
+                                config: {
+                                    options: [
+                                        {label: '左对齐', value: 'left'},
+                                        {label: '居中', value: 'center'},
+                                        {label: '右对齐', value: 'right'},
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                }
+            }
+        ]
+    };
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment, reRender} = fieldChangeData;
+        controller.update(dataFragment);
+        if (reRender) setCount(count => count + 1);
+    }
+    return (
+        <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+    )
+}

package/light-chaser-app/src/comps/lc/base-table/BaseTableController.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 BaseTableComponent, {BaseTableComponentProps, BaseTableComponentRef} from "./BaseTableComponent";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+import BPExecutor from "../../../designer/blueprint/core/BPExecutor.ts";
+
+export class BaseTableController extends AbstractDesignerController<BaseTableComponentRef, BaseTableComponentProps> {
+
+    async create(container: HTMLElement, config: BaseTableComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        this.instance = await ComponentUtil.createAndRender<BaseTableComponentRef>(container, BaseTableComponent, config);
+    }
+
+    destroy(): void {
+        this.instance?.destroy();
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): BaseTableComponentProps | null {
+        return this.config;
+    }
+
+    changeData(data: any) {
+        this.config = ObjectUtil.merge(this.config, {style: {data}, data: {value: data}});
+        this.instance?.updateConfig(this.config!);
+    }
+
+    update(config: BaseTableComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!);
+    }
+
+
+    setVisible(visible: boolean) {
+        this.instance?.changeVisible(visible);
+    }
+
+    updateTheme(newTheme: IThemeItem) {
+        if (!newTheme) return;
+        const styleConfig = this.config?.style ?? {};
+        const {colors: {main, background, mainText, subText, supplementSecond, supplementFirst}} = newTheme;
+        if (styleConfig?.header?.background)
+            styleConfig.header.background = main;
+        if (styleConfig?.header?.color)
+            styleConfig.header.color = mainText;
+        if (styleConfig?.body?.background)
+            styleConfig.body.background = background;
+        if (styleConfig?.body?.color)
+            styleConfig.body.color = subText;
+        if (styleConfig?.body?.lineBackground)
+            styleConfig.body.lineBackground = [supplementFirst!, supplementSecond!];
+        //重新渲染
+        this.update({style: styleConfig} as BaseTableComponentProps, {reRender: true});
+    }
+}

package/light-chaser-app/src/comps/lc/base-table/BaseTableDefinition.ts

@@ -0,0 +1,185 @@
+/*
+ * 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 baseTableImg from './base-table.png';
+import {BaseTableController} from "./BaseTableController";
+import {BaseTableComponentProps} from "./BaseTableComponent";
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+import {lazy} from "react";
+
+const BaseTableStyleConfig = lazy(() => import("./BaseTableConfig").then((module) => ({default: module.BaseTableStyleConfig})));
+
+export default class BaseTableDefinition extends AbstractDesignerDefinition<BaseTableController, BaseTableComponentProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "基础表格",
+            compKey: "LcBaseTable",
+            categorize: "web",
+        };
+    }
+
+    getChartImg(): string | null {
+        return baseTableImg;
+    }
+
+    getController(): ClazzTemplate<BaseTableController> | null {
+        return BaseTableController;
+    }
+
+    getInitConfig(): BaseTableComponentProps {
+        const data = [
+            {name: '张三', age: 18, sex: '男'},
+            {name: '李四', age: 20, sex: '女'},
+            {name: '王五', age: 22, sex: '男'}
+        ];
+        return {
+            base: {
+                id: "",
+                name: '基础表格',
+                type: 'LcBaseTable',
+            },
+            style:  {
+                columns: [
+                    {
+                        key: "name",
+                        label: "姓名",
+                        textAlign: "center"
+                    },
+                    {
+                        key: "age",
+                        label: "年龄",
+                        textAlign: "center"
+                    },
+                    {
+                        key: "sex",
+                        label: "性别",
+                        textAlign: "center"
+                    }
+                ],
+                data: [
+                    {
+                        name: "张三",
+                        age: 18,
+                        sex: "男"
+                    },
+                    {
+                        name: "李四",
+                        age: 20,
+                        sex: "女"
+                    },
+                    {
+                        name: "王五",
+                        age: 22,
+                        sex: "男"
+                    },
+                    {
+                        name: "xx五",
+                        age: 22,
+                        sex: "男"
+                    },
+                    {
+                        name: "小红",
+                        age: 19,
+                        sex: "女"
+                    },
+                    {
+                        name: "小蓝",
+                        age: 23,
+                        sex: "男"
+                    },
+                    {
+                        name: "小绿",
+                        age: 21,
+                        sex: "女"
+                    },
+                    {
+                        name: "小黄",
+                        age: 24,
+                        sex: "男"
+                    },
+                    {
+                        name: "小紫",
+                        age: 25,
+                        sex: "女"
+                    },
+                    {
+                        name: "小灰",
+                        age: 26,
+                        sex: "男"
+                    },
+                    {
+                        name: "小橙",
+                        age: 27,
+                        sex: "女"
+                    },
+                    {
+                        name: "小白",
+                        age: 28,
+                        sex: "男"
+                    }
+                ],
+                header: {
+                    height: 30,
+                    background: "linear-gradient(90deg,  #ff7361 0%, #ff432a 100%)",
+                    color: "#fff",
+                    fontSize: 14,
+                    fontWeight: 900
+                },
+                body: {
+                    background: "#14141400",
+                    color: "#ffffff",
+                    fontSize: 13,
+                    fontWeight: 500,
+                    enableCarousel: false,
+                    carouselSpeed: 3,
+                    pageSize: 5,
+                    lineBackground: [
+                        "linear-gradient(90deg,  #1199a3 0%, #008f99 100%)",
+                        "linear-gradient(90deg,  #15bfcc 0%, #1caab4 100%)"
+                    ]
+                }
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+            data: {
+                sourceType: 'static',
+                value: data
+            },
+        };
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        const menuMapping = super.getMenuToConfigContentMap();
+        menuMapping['style'] = BaseTableStyleConfig;
+        return menuMapping;
+    }
+
+    getEventList(): Array<EventInfo> {
+        const eventList = super.getEventList();
+        eventList.push(...[
+            {
+                id: "dataChange",
+                name: "数据变更时",
+            }
+        ])
+        return eventList;
+    }
+}

package/light-chaser-app/src/comps/lc/base-text/BaseTextComponent.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.
+ */
+
+.base-text-component {
+  --strokeColor: #fbfbfb;
+  --strokeWidth: 0;
+  --color: #ffffff;
+  --fontSize: 16px;
+  --fontFamily: 'Arial';
+  --fontWeight: 500;
+  --alignItems: center;
+  --justifyContent: center;
+  --letterSpacing: 0;
+  --lineHeight: 1;
+  --textAlign: left;
+  --backgroundImage: initial;
+  --backgroundClip: initial;
+  --WebkitBackgroundClip: initial;
+  --WebkitTextFillColor: initial;
+  --cursor: initial;
+
+  height: 100%;
+  display: flex;
+  -webkit-text-stroke-color: var(--strokeColor);
+  -webkit-text-stroke-width: calc(var(--strokeWidth) * 1px);
+  stroke-width: calc(var(--strokeWidth) * 1px);
+  color: var(--color);
+  font-size: calc(var(--fontSize) * 1px);
+  font-family: var(--fontFamily);
+  font-weight: var(--fontWeight);
+  align-items: var(--alignItems);
+  justify-content: var(--justifyContent);
+  letter-spacing: calc(var(--letterSpacing) * 1px);
+  line-height: var(--lineHeight);
+  text-align: var(--textAlign);
+  background-image: var(--backgroundImage);
+  background-clip: var(--backgroundClip);
+  -webkit-background-clip: var(--WebkitBackgroundClip);
+  -webkit-text-fill-color: var(--WebkitTextFillColor);
+  cursor: var(--cursor);
+
+  input {
+    outline: none;
+    width: 100%;
+    background-color: rgba(255, 222, 173, 0);
+    text-align: center;
+    border: none;
+  }
+}

package/light-chaser-app/src/comps/lc/base-text/BaseTextComponent.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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 {ChangeEvent, Component, ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import './BaseTextComponent.less';
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+import {DesignerMode} from "light-chaser-types/types/DesignerTypes.ts";
+import ObjectUtil from "light-chaser-util/lib/ObjectUtil.ts";
+
+export interface BaseTextComponentStyle {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+    alignItems?: string;
+    justifyContent?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+    letterSpacing?: number;
+    lineHeight?: number;
+    textAlign?: string;
+    backgroundImage?: string;
+    backgroundClip?: string;
+    WebkitBackgroundClip?: string;
+    WebkitTextFillColor?: string;
+    cursor?: string;
+}
+
+export interface BaseTextComponentProps extends ComponentBaseProps {
+    style?: BaseTextComponentStyle;
+}
+
+export interface BaseTextComponentRef {
+    updateConfig: (newConfig: BaseTextComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+}
+
+export const BaseTextComponent = forwardRef((props: BaseTextComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
+    const [config, setConfig] = useState<BaseTextComponentProps>({...props});
+    const {style, data} = config;
+    const [edit, setEdit] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+    const textRef = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setConfig({...newConfig});
+            newConfig?.style && setStyle(newConfig.style);
+        },
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+    }));
+
+    const onClick = () => {
+        if ('click' in eventHandlerMap.current)
+            eventHandlerMap.current['click']();
+    }
+
+    const setStyle = (config: BaseTextComponentStyle) => {
+        Object.keys({...config}).forEach((key) => {
+            textRef.current?.style?.setProperty(`--${key}`, style![key as keyof BaseTextComponentStyle] as string)
+        })
+    }
+
+    /**
+     * 只在编辑模式下有效
+     * @param e
+     */
+    const changeContent = (e: ChangeEvent<HTMLInputElement>) => {
+        if (data)
+            data['value'] = e.target.value;
+        if (data?.staticData) {
+            if (typeof (data?.staticData as any) === 'string')
+                data.staticData = {value: e.target.value};
+            else
+                data.staticData = ObjectUtil.merge(data.staticData, {value: e.target.value})
+        }
+        if (!config?.base?.id || !window.LC_ENV.currentManager.layerManager?.layerConfigs)
+            return;
+        window.LC_ENV.currentManager.layerManager.layerConfigs[config.base.id].name = e.target.value;
+        if (!window.LC_ENV.layerInstances)
+            return;
+        const layerInstance = window.LC_ENV.layerInstances[config.base?.id];
+        layerInstance && (layerInstance as Component).setState({name: e.target.value});
+    }
+
+    const getContent = () => {
+        if (typeof data?.value === "string")
+            return data.value;
+        console.warn(`组件【${config.base?.name}】数据格式错误`)
+        return data?.value?.toString()
+    }
+
+    useEffect(() => {
+        style && setStyle(style);
+    }, []);
+
+    return (
+        <div onDoubleClick={() => window.LC_ENV.mode === DesignerMode.EDIT && setEdit(true)}
+             ref={textRef}
+             className={'base-text-component'}
+             onKeyDown={(e) => e.stopPropagation()}
+             onClick={onClick}>
+            {edit ? <input
+                ref={(ref) => ref?.select()}
+                onChange={changeContent}
+                onBlur={() => setEdit(false)}
+                autoFocus={true}
+                type={'text'}
+                defaultValue={getContent()}/> : getContent()}
+        </div>
+    );
+});
+
+export default BaseTextComponent;