light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/base-switch/BaseSwitchComponent.tsx

@@ -0,0 +1,190 @@
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef, useState} from 'react';
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+import './BaseSwitchComponent.less';
+import {ConfigProvider, Switch, SwitchProps} from 'antd';
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController.ts";
+import {getController} from "../../../util/ControllerUtil.ts";
+
+// 组件样式接口定义
+export interface SwitchComponentStyle {
+    token?: {
+        colorPrimary?: string;
+        colorPrimaryHover?: string;
+        colorPrimaryBorder?: string;
+        colorText?: string;
+        colorTextLightSolid?: string;
+        fontSize?: number;
+    },
+    components?: {
+        handleSize?: number;
+        trackHeight?: number;
+        trackMinWidth?: number;
+        trackPadding?: number;
+        handleBg?: string;
+        colorBgContainer?: string;
+    },
+    props: {
+        size?: 'default' | 'small';
+        loading?: boolean;
+        disabled?: boolean;
+        checkedChildren?: string;
+        unCheckedChildren?: string;
+    },
+    label?: {
+        // 标签样式
+        content?: string;
+        position?: 'left' | 'right';
+        color?: string;
+        fontSize?: number;
+        fontWeight?: number;
+        fontFamily?: string;
+    }
+}
+
+// 组件属性接口定义
+export interface SwitchComponentProps extends ComponentBaseProps {
+    style?: SwitchComponentStyle;
+    // 值相关属性
+    value?: boolean;
+    defaultValue?: boolean;
+    controller?: AbstractDesignerController;
+}
+
+// 组件引用接口定义
+export interface SwitchComponentRef {
+    updateConfig: (newConfig: SwitchComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    getValue: () => boolean | undefined;
+    setValue: (value: boolean) => void;
+    toggle: () => void;
+    changeVisible: (visible: boolean) => void;
+}
+
+// 开关组件实现
+export const SwitchComponent = forwardRef((
+    props: SwitchComponentProps,
+    ref: ForwardedRef<SwitchComponentRef>
+) => {
+    const [config, setConfig] = useState<SwitchComponentProps>({...props});
+    const [visible, setVisible] = useState(true);
+    const {style, data} = config;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // 获取当前值
+    const getCurrentValue = () => {
+        return data?.value ?? null;
+    };
+
+    // 暴露组件方法给外部调用
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setConfig({...newConfig});
+        },
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        getValue: () => data?.value,
+        setValue: (newValue) => {
+            setConfig(prev => ({
+                ...prev,
+                value: newValue
+            }));
+            if ('valueChange' in eventHandlerMap.current) {
+                eventHandlerMap.current['valueChange'](newValue);
+            }
+        },
+        toggle: () => {
+            const currentValue = getCurrentValue();
+            const newValue = !currentValue;
+            setConfig(prev => ({
+                ...prev,
+                value: newValue
+            }));
+            if ('toggle' in eventHandlerMap.current) {
+                eventHandlerMap.current['toggle'](newValue);
+            }
+            if ('valueChange' in eventHandlerMap.current) {
+                eventHandlerMap.current['valueChange'](newValue);
+            }
+        },
+        changeVisible: (visible) => setVisible(visible)
+    }));
+
+    // 处理开关状态变化
+    const handleChange = (checked: boolean) => {
+        getController(props?.base?.id ?? '')?.changeData(checked);
+
+        // 触发值改变事件
+        if ('change' in eventHandlerMap.current)
+            eventHandlerMap.current['change'](checked);
+
+        // 触发值变化事件
+        if ('valueChange' in eventHandlerMap.current)
+            eventHandlerMap.current['valueChange'](checked);
+
+        // 触发点击事件
+        if ('click' in eventHandlerMap.current)
+            eventHandlerMap.current['click'](checked);
+
+        // 根据状态触发开/关事件
+        if (checked && 'on' in eventHandlerMap.current)
+            eventHandlerMap.current['on']();
+        if (!checked && 'off' in eventHandlerMap.current)
+            eventHandlerMap.current['off']();
+    };
+
+    const switchProps: SwitchProps = {
+        checked: data?.value ?? false,
+        onChange: handleChange,
+        ...style?.props,
+    };
+
+    // 构建自定义样式对象
+    const customStyles = {
+        // 开关容器样式
+        containerStyle: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            width: '100%',
+            height: '100%',
+        },
+        // 标签样式
+        labelStyle: {
+            color: style?.label?.color || '#ffffff',
+            fontSize: style?.label?.fontSize || 14,
+            fontWeight: style?.label?.fontWeight || 400,
+            fontFamily: style?.label?.fontFamily || 'inherit',
+            cursor: style?.props?.disabled ? 'not-allowed' : 'pointer',
+        }
+    };
+    console.log('重新渲染', props)
+    const {label} = (style ?? {});
+    return visible ? (
+        <div className="switch-component" ref={containerRef}>
+            <ConfigProvider theme={{
+                token: style?.token,
+                components: {Switch: style?.components}
+            }}>
+                <div style={customStyles.containerStyle}>
+                    {label?.position !== 'right' && style?.label && (
+                        <span style={customStyles.labelStyle}
+                              onClick={() => !style?.props?.disabled && handleChange(!getCurrentValue())}>
+                            {label?.content}
+                        </span>
+                    )}
+                    <Switch  {...switchProps} />
+                    {label?.position === 'right' && style?.label && (
+                        <span style={customStyles.labelStyle}
+                              onClick={() => !style?.props?.disabled && handleChange(!getCurrentValue())}>
+                             {label?.content}
+                        </span>
+                    )}
+                </div>
+            </ConfigProvider>
+        </div>
+    ) : null;
+});
+
+export default SwitchComponent;

package/light-chaser-app/src/comps/lc/base-switch/BaseSwitchController.ts

@@ -0,0 +1,104 @@
+import SwitchComponent, {SwitchComponentProps, SwitchComponentRef} from "./BaseSwitchComponent.tsx";
+import {UpdateOptions} from "../../../framework/core/AbstractController";
+import AbstractDesignerController from "../../../framework/core/AbstractDesignerController";
+import ComponentUtil from "light-chaser-util/lib/ComponentUtil.ts";
+import ObjectUtil from "../../../../../light-chaser-util/lib/ObjectUtil.ts";
+import BPExecutor from "../../../designer/blueprint/core/BPExecutor";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+
+export class SwitchController extends AbstractDesignerController<SwitchComponentRef, SwitchComponentProps> {
+
+    async create(container: HTMLElement, config: SwitchComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        this.instance = await ComponentUtil.createAndRender<SwitchComponentRef>(container, SwitchComponent, config);
+    }
+
+    setVisible(visible: boolean): void {
+        this.instance?.changeVisible(visible);
+    }
+
+    destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): SwitchComponentProps | null {
+        return this.config;
+    }
+
+    changeData(data: any) {
+        if (this.config?.data?.value !== undefined)
+            this.config.data.value = data;
+        if (typeof data === "boolean")
+            this.instance?.setValue(data);
+    }
+
+    update(config: SwitchComponentProps, upOp?: UpdateOptions | undefined): void {
+        this.config = ObjectUtil.merge(this.config, config);
+        upOp = upOp || {reRender: true};
+        if (upOp.reRender)
+            this.instance?.updateConfig(this.config!);
+    }
+
+    registerEvent() {
+        if (this.instance) {
+            const nodeId = this.config?.base?.id ?? "";
+            const executor = this.bpExecutor;
+            this.instance.setEventHandler({
+                change: (value: boolean) => executor?.triggerComponentEvent(nodeId!, "change", value),
+                click: (value: boolean) => executor?.triggerComponentEvent(nodeId!, "click", value),
+                on: () => executor?.triggerComponentEvent(nodeId!, "on", this.config),
+                off: () => executor?.triggerComponentEvent(nodeId!, "off", this.config),
+                toggle: (value: boolean) => executor?.triggerComponentEvent(nodeId!, "toggle", value),
+                valueChange: (value: boolean) => executor?.triggerComponentEvent(nodeId!, "valueChange", value),
+            });
+        }
+    }
+
+    updateTheme(newTheme: IThemeItem) {
+        // 1. 基础校验
+        if (!newTheme?.colors || !this.config?.style) return;
+
+        const styleConfig = this.config.style;
+        const {main, mainText, background, supplementFirst} = newTheme.colors;
+
+        // 2. 更新 token 层级 (基础变量)
+        if (styleConfig.token) {
+            const token = styleConfig.token;
+            // 主色映射
+            if (main) {
+                token.colorPrimary = main;
+                token.colorPrimaryBorder = main;
+                // 这里的 Hover 暂时设为 main，如果需要亮度变化可在此处理
+                token.colorPrimaryHover = main;
+            }
+            // 文字颜色映射
+            if (mainText) {
+                token.colorText = mainText;
+                token.colorTextLightSolid = mainText;
+            }
+        }
+
+        // 3. 更新 components 层级 (组件局部变量)
+        if (styleConfig.components) {
+            const comp = styleConfig.components;
+            // 容器背景通常对应 supplementFirst 或 background
+            if (supplementFirst || background) {
+                comp.colorBgContainer = supplementFirst ?? background;
+            }
+            // 把手背景可根据主题色微调，默认白色，也可映射为 mainText 的反色
+            comp.handleBg = "#FFFFFF";
+        }
+
+        // 4. 更新 label 层级 (标签样式)
+        if (styleConfig.label) {
+            const label = styleConfig.label;
+            if (mainText) label.color = mainText;
+            // 如果存在 subText，可以考虑将其应用到 label 的 content 或次级说明上
+        }
+
+        // 5. 提交更新并重绘
+        this.update({style: styleConfig}, {reRender: true});
+    }
+}

package/light-chaser-app/src/comps/lc/base-switch/BaseSwitchDefinition.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {SwitchController} from "./BaseSwitchController.ts";
+import {SwitchComponentProps} from "./BaseSwitchComponent.tsx";
+import SwitchImg from './base-switch.png';
+import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition.ts";
+import {ClazzTemplate} from "light-chaser-types/types/DesignerToolsTypes.ts";
+import {EventInfo} from "light-chaser-types/types/BluePrintTypes.ts";
+
+// 懒加载配置组件
+const BaseInfo = React.lazy(() => import("../../common-component/base-info/BaseInfo"));
+const ThemeConfig = React.lazy(() => import("../../common-component/theme-config/ThemeConfig.tsx"));
+const AnimationConfig = React.lazy(() => import("../../common-component/animation-config/AnimationConfig.tsx"));
+const DataConfig = React.lazy(() => import("../../common-component/data-config/DataConfig.tsx"));
+const FilterConfig = React.lazy(() => import("../../common-component/filter-config/FilterConfig.tsx"));
+const SwitchStyleConfig = React.lazy(() => import("./BaseSwitchStyleConfig.tsx").then((module) => ({default: module.SwitchStyleConfig})));
+
+export default class SwitchDefinition extends AbstractDesignerDefinition<SwitchController, SwitchComponentProps> {
+
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "开关组件",
+            compKey: "Switch",
+            categorize: "web",
+            width: 120,
+            height: 32,
+        };
+    }
+
+    getChartImg(): string | null {
+        return SwitchImg;
+    }
+
+    getController(): ClazzTemplate<SwitchController> | null {
+        return SwitchController;
+    }
+
+    getInitConfig(): SwitchComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '开关组件',
+                type: 'Switch',
+            },
+            style: {
+                token: {
+                    colorPrimary: "#4FB8FF",                  // 主高亮色
+                    colorPrimaryHover: "#7ACDFF",             // 悬停亮度提升10%（#4FB8FF亮度提升）
+                    colorPrimaryBorder: "#4FB8FF",            // 主色边框
+                    colorText: "#FFFFFF",                     // 主要文字
+                    colorTextLightSolid: "#FFFFFF",           // 主按钮文字
+                    fontSize: 14,                             // 字体大小 14px
+                },
+                components: {
+                    handleSize: 20,                           // 开关把手大小
+                    trackHeight: 24,                          // 开关轨道高度
+                    trackMinWidth: 44,                        // 轨道最小宽度
+                    trackPadding: 2,                          // 轨道内边距
+                    handleBg: "#FFFFFF",                      // 把手背景色
+                    colorBgContainer: "#2C2C3E",              // 容器背景色
+                },
+                props: {
+                    checkedChildren: "开",
+                    unCheckedChildren: "关",
+                    loading: false,                               // 非加载状态
+                    disabled: false,                              // 非禁用状态
+                    size: 'default',                        // 默认尺寸
+                },
+                label: {
+                    content: "",
+                    position: 'left',
+                    color: '#FFFFFF',
+                    fontSize: 14,
+                    fontWeight: 400,
+                    fontFamily: "",
+                },
+            },
+            data: {
+                sourceType: 'static',
+                value: false
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            }
+        };
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: SwitchStyleConfig,
+            animation: AnimationConfig,
+            theme: ThemeConfig,
+            filter: FilterConfig,
+            data: DataConfig
+        };
+    }
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "change",
+                name: "状态改变时",
+            },
+            {
+                id: "click",
+                name: "点击时",
+            },
+            {
+                id: "on",
+                name: "开启时",
+            },
+            {
+                id: "off",
+                name: "关闭时",
+            },
+            {
+                id: "toggle",
+                name: "切换时",
+            },
+            {
+                id: "valueChange",
+                name: "值变化时",
+            }
+        ]);
+    }
+}

package/light-chaser-app/src/comps/lc/base-switch/BaseSwitchStyleConfig.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+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";
+import {SwitchController} from "./BaseSwitchController.ts";
+
+export const SwitchStyleConfig: React.FC<ConfigType<SwitchController>> = ({controller}) => {
+    const {style} = controller.getConfig()!;
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        console.log(dataFragment);
+        controller.update(dataFragment!);
+    };
+
+    const schema: Control[] = [
+        {
+            type: 'accordion',
+            key: 'style',
+            label: '基础设置',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'props',
+                    config: {containerStyle: {marginBottom: '10px'}},
+                    children: [
+                        {
+                            key: 'size',
+                            type: 'select',
+                            label: '开关尺寸',
+                            value: style?.props?.size || 'default',
+                            config: {
+                                options: [
+                                    {label: '默认', value: 'default'},
+                                    {label: '小号', value: 'small'},
+                                    {label: '大号', value: 'large'},
+                                ]
+                            }
+                        },
+                        {
+                            key: 'checkedChildren',
+                            type: 'input',
+                            label: '开启时文本',
+                            value: style?.props?.checkedChildren || '',
+                        },
+                        {
+                            key: 'unCheckedChildren',
+                            type: 'input',
+                            label: '关闭时文本',
+                            value: style?.props?.unCheckedChildren || '',
+                        },
+                    ]
+                },
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'loading',
+                            type: 'switch',
+                            label: '加载状态',
+                            value: style?.props?.loading ?? false,
+                        },
+                        {
+                            key: 'disabled',
+                            type: 'switch',
+                            label: '禁用状态',
+                            value: style?.props?.disabled ?? false,
+                        },
+                    ]
+                },
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '开关按钮样式',
+            key: 'style',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'token',
+                    config: {containerStyle: {marginBottom: '10px'}},
+                    children: [
+                        {key: 'colorPrimary', type: 'color-picker', label: '主色', value: style?.token?.colorPrimary || '#1677ff', config: {showText: true}},
+                        {key: 'colorPrimaryHover', type: 'color-picker', label: '悬浮色', value: style?.token?.colorPrimaryHover || '#1677ff', config: {showText: true}},
+                        {key: 'colorPrimaryBorder', type: 'color-picker', label: '边框色', value: style?.token?.colorPrimaryBorder || '#1677ff', config: {showText: true}},
+                        {key: 'colorText', type: 'color-picker', label: '文本色', value: style?.token?.colorText || '#1677ff', config: {showText: true}},
+                        {key: 'colorTextLightSolid', type: 'color-picker', label: '按钮状态文本', value: style?.token?.colorTextLightSolid || '#1677ff', config: {showText: true}},
+                    ]
+                },
+                {
+                    type: 'grid',
+                    key: 'components',
+                    children: [
+                        {key: 'handleSize', type: 'number-input', label: '把手尺寸', value: style?.components?.handleSize || '#1677ff', config: {min: 0}},
+                        {key: 'trackHeight', type: 'number-input', label: '开关高度', value: style?.components?.trackHeight || '#1677ff', config: {min: 0}},
+                        {key: 'trackMinWidth', type: 'number-input', label: '最小宽度', value: style?.components?.trackMinWidth || '#1677ff', config: {min: 0}},
+                        {key: 'trackPadding', type: 'number-input', label: '内边距', value: style?.components?.trackPadding || '#1677ff', config: {min: 0}},
+                        {key: 'handleBg', type: 'color-picker', label: '把手背景', value: style?.components?.handleBg || '#1677ff', config: {showText: true}},
+                        {key: 'colorBgContainer', type: 'color-picker', label: '容器背景', value: style?.components?.colorBgContainer || '#1677ff', config: {showText: true}},
+
+                    ]
+                }
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '标签文本',
+            key: 'style',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'label',
+                    children: [
+                        {
+                            key: 'content',
+                            type: 'input',
+                            label: '标签文本',
+                            value: style?.label?.content || '',
+                        },
+                        {
+                            key: 'position',
+                            type: 'select',
+                            label: '标签位置',
+                            value: style?.label?.position || 'left',
+                            config: {
+                                options: [
+                                    {label: '左侧', value: 'left'},
+                                    {label: '右侧', value: 'right'},
+                                ]
+                            }
+                        },
+                        {
+                            key: 'fontSize',
+                            type: 'number-input',
+                            label: '标签字号',
+                            value: style?.label?.fontSize || 14,
+                            config: {min: 8, max: 72}
+                        },
+                        {
+                            key: 'fontWeight',
+                            type: 'number-input',
+                            label: '标签字重',
+                            value: style?.label?.fontWeight || 400,
+                            config: {min: 100, max: 900, step: 100}
+                        },
+                        {
+                            key: 'fontFamily',
+                            type: 'select',
+                            label: '标签字体',
+                            value: style?.label?.fontFamily,
+                            config: {
+                                options: window.LC_ENV.fonts,
+                            }
+                        },
+                        {
+                            key: 'color',
+                            type: 'color-picker',
+                            label: '标签文字色',
+                            value: style?.label?.color || '#ffffff',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'fontWeight',
+                            type: 'number-input',
+                            label: '标签文字粗细',
+                            value: style?.label?.fontWeight || 400,
+                            config: {
+                                min: 100,
+                                max: 900,
+                                step: 100
+                            }
+                        },
+                    ]
+                }
+            ]
+        },
+    ];
+
+    return (
+        <div style={{padding: 10}}>
+            <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+        </div>
+    );
+};