light-chaser-pro 1.0.0

package/prompt//347/273/204/344/273/266/345/274/200/345/217/221/346/217/220/347/244/272/350/257/215.md

@@ -0,0 +1,1090 @@
+## 项目基础信息
+
+技术栈锁定：React 18 + TypeScript 5 + MobX + AntD 5.20.0 + Less + Vite 5
+项目类型：数据可视化编辑器（类DataV/EasyV），支持拖拽组件和多数据源
+响应式：项目为PC端设计软件，不考虑响应式效果
+
+## 项目依赖
+
+```json
+"dependencies": {
+"@antv/g-base": "^0.5.15",
+"@antv/g2plot": "^2.4.31",
+"@icon-park/react": "^1.4.2",
+"@monaco-editor/react": "^4.6.0",
+"@scena/react-ruler": "^0.17.1",
+"antd": "^6.1.1",
+"countup.js": "^2.8.0",
+"crypto-js": "^4.2.0",
+"echarts": "^5.5.1",
+"ezuikit-js": "^7.7.10",
+"flv.js": "^1.6.2",
+"hls.js": "^1.5.11",
+"hotkeys-js": "^3.13.15",
+"jsencrypt": "^3.3.2",
+"light-chaser-types": "workspace:^",
+"light-chaser-ui": "workspace:^",
+"light-chaser-util": "workspace:^",
+"localforage": "^1.10.0",
+"lodash": "^4.17.21",
+"mobx": "^6.7.0",
+"mobx-react": "^7.6.0",
+"monaco-editor": "^0.44.0",
+"mqtt": "^5.10.1",
+"nprogress": "^0.2.0",
+"odometer_countup": "^1.0.4",
+"pixi.js": "^8.4.1",
+"react": "18.2.0",
+"react-dom": "18.2.0",
+"react-moveable": "^0.54.1",
+"react-router-dom": "^6.21.0",
+"react-selecto": "^1.22.6",
+"react-timer-hook": "^3.0.7"
+}
+```
+
+## 绝对禁令（违规立即终止）：
+
+1. 禁止引入新依赖（除非明确要求）
+2. 禁止修改现有状态管理逻辑
+3. 禁止删除已有代码注释
+4. 禁止使用未授权的第三方库
+
+## 代码风格（严格遵循）：
+
+参考我提供的代码案例，输出的代码风格应该和我提供的代码案例一致。尤其是换行、缩进。必须跟我提供的案例代码一样
+
+## 风格样式要求（严格遵循）
+
+注意事项：整个项目的组件风格已经通过Antd的ConfigProvider配置定制过（后续改造组件的过程中要考虑这一点）
+
+---
+
+1. 主题与配色
+
+- 整体深色主题与高对比亮色点缀
+- 主色板：#1E1E2F（背景）、#2C2C3E（容器）、#4FB8FF（主高亮）、#3CED92（成功指示）、#FF6E6E（警示）
+- 辅助色板：#A0A0B2（次级文字）、#FFFFFF（主要文字）
+- 冷暖对比：蓝绿系高亮对比红橙系警示
+
+2. 布局与排版
+
+- 响应式 12 列网格，最大宽度 1200px，手机至桌面自动适配
+- 间距：主轴 24px、次轴 16px、容器内边 20px
+- 字体：无衬线（Inter / Roboto / Helvetica Neue）
+- 字号层级：
+    1. 页面标题 24px / Bold / 行高32px
+    2. 区块标题 18px / Semibold / 行高28px
+    3. 正文说明 14px / Regular / 行高20px
+    4. 辅助信息 12px / Regular / 行高16px
+
+3. UI 组件与形态
+
+- 卡片：圆角8px、柔和阴影 (0 2px 8px rgba(0,0,0,0.3))
+- 按钮：
+    - 主按钮：#4FB8FF 背景、白色文字、圆角4px、12×24px 内边
+    - 次按钮：透明背景、#4FB8FF 边框/文字、圆角4px
+- 输入框：#2C2C3E 背景、1px #3A3A4E 边框、4px 圆角
+- 图标：24px 线性描边、2px 统一粗细
+
+4. 交互动效
+
+- 悬停：边框/背景高亮 10% 亮度提升
+- 激活：深暗 10% 并加粗边框
+- 切换/加载：0.2s 透明度与位移过渡
+- 提示框：#2C2C3E 背景 + 白字，圆角4px，阴影 0 1px 4px rgba(0,0,0,0.4)
+
+5. 可访问性与响应式
+
+- 文本对比度符合 WCAG AA
+- 键盘可操作、焦点态明显（2px #4FB8FF 高光）
+- 屏幕阅读器友好：合理语义、ARIA 标签
+- 多语言支持：自动换行、字符兼容
+
+---
+
+**总结**
+
+“深色简约主题；高对比亮色点缀；12 列响应式网格；无衬线字体；圆角卡片与柔和阴影；主/次按钮样式统一；线性 24px 图标；细节交互动效 0.2s 过渡；WCAG AA 对比度；键盘/屏幕阅读器支持；现代专业风格，全项目通用界面设计。”
+
+---
+
+## 可参考的上下文
+
+#### 样式文件
+
+```less
+.switch-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 4px 0;
+
+  // 自定义 AntD 开关样式
+  .ant-switch {
+    transition: all 0.2s ease-in-out;
+    background-color: var(--unCheckedBackgroundColor, #4c4c5e) !important;
+    border: var(--borderWidth, 0) solid var(--borderColor, transparent) !important;
+    border-radius: var(--borderRadius, 16px) !important;
+
+    // 开关把手样式
+    .ant-switch-handle {
+      transition: all 0.2s ease-in-out;
+
+      &::before {
+        background-color: var(--unCheckedHandleColor, #ffffff);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    // 内部文本样式
+    .ant-switch-inner {
+      color: #ffffff;
+      font-size: 12px;
+      font-weight: 500;
+      transition: all 0.2s ease-in-out;
+    }
+
+    // 选中状态
+    &.ant-switch-checked {
+      background-color: var(--checkedBackgroundColor, #4fb8ff) !important;
+      border-color: var(--borderColor, transparent) !important;
+
+      .ant-switch-handle {
+        &::before {
+          background-color: var(--checkedHandleColor, #ffffff);
+        }
+      }
+
+      .ant-switch-inner {
+        color: #ffffff;
+      }
+    }
+
+    // 悬停状态
+    &:hover:not(.ant-switch-disabled) {
+      background-color: var(--backgroundColorHover, #343447) !important;
+      border-color: var(--borderColorHover, #4fb8ff) !important;
+      border-width: var(--borderWidthHover, 2px) !important;
+      border-radius: var(--borderRadiusHover, 16px) !important;
+    }
+
+    // 禁用状态
+    &.ant-switch-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    // 加载状态
+    &.ant-switch-loading {
+      opacity: 0.7;
+    }
+
+    // 小尺寸
+    &.ant-switch-small {
+      min-width: 28px;
+      height: 16px;
+      line-height: 16px;
+
+      .ant-switch-handle {
+        width: 12px;
+        height: 12px;
+      }
+
+      .ant-switch-inner {
+        font-size: 10px;
+      }
+    }
+
+    // 默认尺寸
+    &:not(.ant-switch-small) {
+      min-width: 44px;
+      height: 22px;
+      line-height: 22px;
+
+      .ant-switch-handle {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  // 标签样式
+  .switch-label {
+    color: var(--labelColor, #ffffff);
+    font-size: var(--labelFontSize, 14px);
+    font-weight: var(--labelFontWeight, 400);
+    font-family: var(--fontFamily, inherit);
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    user-select: none;
+
+    &:hover {
+      color: #4fb8ff;
+    }
+
+    // 禁用状态
+    &.disabled {
+      color: #a0a0b2;
+      cursor: not-allowed;
+
+      &:hover {
+        color: #a0a0b2;
+      }
+    }
+  }
+
+  // 聚焦状态
+  .ant-switch:focus-visible {
+    outline: 2px solid rgba(79, 184, 255, 0.5);
+    outline-offset: 2px;
+  }
+}
+```
+
+#### 组件文件
+
+```tsx
+import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+import './BaseSwitchComponent.less';
+import {ConfigProvider, Switch, SwitchProps} from 'antd';
+
+// 组件样式接口定义
+export interface SwitchComponentStyle {
+    // 基础样式
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+    backgroundColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    borderStyle?: string;
+
+    // 开关特有样式
+    checkedBackgroundColor?: string;
+    unCheckedBackgroundColor?: string;
+    checkedHandleColor?: string;
+    unCheckedHandleColor?: string;
+    switchSize?: 'default' | 'small';
+    loading?: boolean;
+    disabled?: boolean;
+
+    // 标签样式
+    label?: string;
+    checkedLabel?: string;
+    unCheckedLabel?: string;
+    labelPosition?: 'left' | 'right';
+    labelColor?: string;
+    labelFontSize?: number;
+    labelFontWeight?: number;
+
+    // 悬停样式
+    backgroundColorHover?: string;
+    borderRadiusHover?: number;
+    borderWidthHover?: number;
+    borderColorHover?: string;
+}
+
+// 组件属性接口定义
+export interface SwitchComponentProps extends ComponentBaseProps {
+    style?: SwitchComponentStyle;
+    // 值相关属性
+    value?: boolean;
+    defaultValue?: boolean;
+}
+
+// 组件引用接口定义
+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, value, defaultValue} = config;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // 获取当前值
+    const getCurrentValue = () => {
+        return value ?? defaultValue ?? false;
+    };
+
+    // 暴露组件方法给外部调用
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setConfig({...newConfig});
+            updateCustomStyle(newConfig?.style ?? {});
+        },
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        getValue: () => 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)
+    }));
+
+    // 更新自定义 CSS 变量
+    const updateCustomStyle = (styleConfig: SwitchComponentStyle) => {
+        const {
+            backgroundColorHover = '#343447',
+            borderColorHover = '#4fb8ff',
+            borderRadiusHover = 4,
+            borderWidthHover = 2
+        } = styleConfig ?? {};
+
+        if (containerRef.current) {
+            containerRef.current.style.setProperty("--backgroundColorHover", backgroundColorHover);
+            containerRef.current.style.setProperty("--borderRadiusHover", `${borderRadiusHover}px`);
+            containerRef.current.style.setProperty("--borderWidthHover", `${borderWidthHover}px`);
+            containerRef.current.style.setProperty("--borderColorHover", borderColorHover);
+        }
+    };
+
+    // 处理开关状态变化
+    const handleChange = (checked: boolean) => {
+        setConfig(prev => ({
+            ...prev,
+            value: 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']();
+        }
+    };
+
+    // 初始化样式
+    useEffect(() => {
+        updateCustomStyle(style ?? {});
+    }, []);
+
+    // 构建 AntD Switch 的 props
+    const switchProps: SwitchProps = {
+        checked: value ?? defaultValue ?? false,
+        onChange: handleChange,
+        size: style?.switchSize || 'default',
+        loading: style?.loading ?? false,
+        disabled: style?.disabled ?? false,
+        checkedChildren: style?.checkedLabel || '',
+        unCheckedChildren: style?.unCheckedLabel || '',
+        style: {
+            backgroundColor: style?.unCheckedBackgroundColor || '#4c4c5e',
+            borderRadius: style?.borderRadius || 16,
+            borderWidth: style?.borderWidth || 0,
+            borderColor: style?.borderColor || 'transparent',
+            borderStyle: style?.borderStyle || 'solid',
+        },
+    };
+
+    // 构建自定义样式对象
+    const customStyles = {
+        // 开关容器样式
+        container: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            width: '100%',
+            height: '100%',
+        },
+        // 标签样式
+        label: {
+            color: style?.labelColor || '#ffffff',
+            fontSize: style?.labelFontSize || 14,
+            fontWeight: style?.labelFontWeight || 400,
+            fontFamily: style?.fontFamily || 'inherit',
+            cursor: style?.disabled ? 'not-allowed' : 'pointer',
+        }
+    };
+
+    return visible ? (
+        <div className="switch-component" ref={containerRef}>
+            <ConfigProvider
+                theme={{
+                    components: {
+                        Switch: {
+                            handleBg: style?.unCheckedHandleColor || '#ffffff',
+                            colorPrimary: style?.checkedBackgroundColor || '#4fb8ff',
+                            colorPrimaryHover: style?.checkedBackgroundColor ?
+                                `${style.checkedBackgroundColor}1a` : '#4fb8ff1a',
+                            colorTextQuaternary: style?.unCheckedBackgroundColor || '#4c4c5e',
+                            colorTextTertiary: style?.checkedBackgroundColor || '#4fb8ff',
+                        }
+                    }
+                }}
+            >
+                <div style={customStyles.container}>
+                    {/* 左侧标签 */}
+                    {style?.labelPosition !== 'right' && style?.label && (
+                        <span
+                            style={customStyles.label}
+                            onClick={() => !style?.disabled && handleChange(!getCurrentValue())}
+                        >
+                            {style.label}
+                        </span>
+                    )}
+
+                    {/* 开关组件 */}
+                    <Switch {...switchProps} />
+
+                    {/* 右侧标签 */}
+                    {style?.labelPosition === 'right' && style?.label && (
+                        <span
+                            style={customStyles.label}
+                            onClick={() => !style?.disabled && handleChange(!getCurrentValue())}
+                        >
+                            {style.label}
+                        </span>
+                    )}
+                </div>
+            </ConfigProvider>
+        </div>
+    ) : null;
+});
+
+export default SwitchComponent;
+```
+
+#### 配置文件
+
+```tsx
+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 "./BaseTabController.ts";
+
+export const SwitchStyleConfig: React.FC<ConfigType<SwitchController>> = ({controller}) => {
+    const {style, defaultValue} = controller.getConfig()!;
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        controller.update(dataFragment!);
+    };
+
+    const schema: Control[] = [
+        {
+            type: 'accordion',
+            label: '基础设置',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'switchSize',
+                            type: 'select',
+                            label: '开关尺寸',
+                            value: style?.switchSize || 'default',
+                            config: {
+                                options: [
+                                    {label: '默认', value: 'default'},
+                                    {label: '小号', value: 'small'},
+                                ]
+                            }
+                        },
+                        {
+                            key: 'label',
+                            type: 'input',
+                            label: '标签文本',
+                            value: style?.label || '',
+                        },
+                        {
+                            key: 'labelPosition',
+                            type: 'select',
+                            label: '标签位置',
+                            value: style?.labelPosition || 'left',
+                            config: {
+                                options: [
+                                    {label: '左侧', value: 'left'},
+                                    {label: '右侧', value: 'right'},
+                                ]
+                            }
+                        },
+                        {
+                            key: 'checkedLabel',
+                            type: 'input',
+                            label: '开启时文本',
+                            value: style?.checkedLabel || '',
+                        },
+                        {
+                            key: 'unCheckedLabel',
+                            type: 'input',
+                            label: '关闭时文本',
+                            value: style?.unCheckedLabel || '',
+                        },
+                        {
+                            key: 'defaultValue',
+                            type: 'switch',
+                            label: '默认状态',
+                            value: defaultValue as boolean,
+                        },
+                    ]
+                },
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'loading',
+                            type: 'switch',
+                            label: '加载状态',
+                            value: style?.loading ?? false,
+                        },
+                        {
+                            key: 'disabled',
+                            type: 'switch',
+                            label: '禁用状态',
+                            value: style?.disabled ?? false,
+                        },
+                    ]
+                },
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '颜色样式',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'checkedBackgroundColor',
+                            type: 'color-picker',
+                            label: '开启背景色',
+                            value: style?.checkedBackgroundColor || '#4fb8ff',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'unCheckedBackgroundColor',
+                            type: 'color-picker',
+                            label: '关闭背景色',
+                            value: style?.unCheckedBackgroundColor || '#4c4c5e',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'checkedHandleColor',
+                            type: 'color-picker',
+                            label: '开启把手色',
+                            value: style?.checkedHandleColor || '#ffffff',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'unCheckedHandleColor',
+                            type: 'color-picker',
+                            label: '关闭把手色',
+                            value: style?.unCheckedHandleColor || '#ffffff',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                    ]
+                },
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '文本样式',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'fontSize',
+                            type: 'number-input',
+                            label: '标签字号',
+                            value: style?.fontSize || 14,
+                            config: {min: 8, max: 72}
+                        },
+                        {
+                            key: 'fontWeight',
+                            type: 'number-input',
+                            label: '标签字重',
+                            value: style?.fontWeight || 400,
+                            config: {
+                                min: 100,
+                                max: 900,
+                                step: 100
+                            }
+                        },
+                        {
+                            key: 'fontFamily',
+                            type: 'select',
+                            label: '标签字体',
+                            value: style?.fontFamily,
+                            config: {
+                                options: window.LC_ENV.fonts,
+                            }
+                        },
+                        {
+                            key: 'color',
+                            type: 'color-picker',
+                            label: '标签颜色',
+                            value: style?.color || '#ffffff',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'labelColor',
+                            type: 'color-picker',
+                            label: '标签文字色',
+                            value: style?.labelColor || '#ffffff',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'labelFontSize',
+                            type: 'number-input',
+                            label: '标签文字大小',
+                            value: style?.labelFontSize || 14,
+                            config: {min: 8, max: 72}
+                        },
+                        {
+                            key: 'labelFontWeight',
+                            type: 'number-input',
+                            label: '标签文字粗细',
+                            value: style?.labelFontWeight || 400,
+                            config: {
+                                min: 100,
+                                max: 900,
+                                step: 100
+                            }
+                        },
+                    ]
+                },
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '边框样式',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'backgroundColor',
+                            type: 'color-picker',
+                            label: '容器背景色',
+                            value: style?.backgroundColor || 'transparent',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'borderRadius',
+                            type: 'number-input',
+                            label: '开关圆角',
+                            value: style?.borderRadius || 16,
+                            config: {min: 0, max: 50}
+                        },
+                        {
+                            key: 'borderWidth',
+                            type: 'number-input',
+                            label: '边框宽度',
+                            value: style?.borderWidth || 0,
+                            config: {min: 0, max: 10}
+                        },
+                        {
+                            key: 'borderColor',
+                            type: 'color-picker',
+                            label: '边框颜色',
+                            value: style?.borderColor || 'transparent',
+                            config: {showText: true}
+                        },
+                        {
+                            key: 'borderStyle',
+                            type: 'select',
+                            label: '边框样式',
+                            value: style?.borderStyle || 'solid',
+                            config: {
+                                options: [
+                                    {label: '无边框', value: 'none'},
+                                    {label: '实线', value: 'solid'},
+                                    {label: '虚线', value: 'dashed'},
+                                    {label: '点线', value: 'dotted'},
+                                    {label: '双线', value: 'double'},
+                                ]
+                            }
+                        },
+                    ]
+                },
+            ]
+        },
+        {
+            type: 'accordion',
+            label: '悬停样式',
+            children: [
+                {
+                    type: 'grid',
+                    key: 'style',
+                    children: [
+                        {
+                            key: 'backgroundColorHover',
+                            type: 'color-picker',
+                            label: '悬停背景色',
+                            value: style?.backgroundColorHover || '#343447',
+                            config: {
+                                showText: true,
+                            }
+                        },
+                        {
+                            key: 'borderRadiusHover',
+                            type: 'number-input',
+                            label: '悬停圆角',
+                            value: style?.borderRadiusHover || 16,
+                            config: {min: 0, max: 50}
+                        },
+                        {
+                            key: 'borderWidthHover',
+                            type: 'number-input',
+                            label: '悬停边框宽度',
+                            value: style?.borderWidthHover || 2,
+                            config: {min: 0, max: 10}
+                        },
+                        {
+                            key: 'borderColorHover',
+                            type: 'color-picker',
+                            label: '悬停边框颜色',
+                            value: style?.borderColorHover || '#4fb8ff',
+                            config: {showText: true}
+                        },
+                    ]
+                },
+            ]
+        }
+    ];
+
+    return (
+        <div style={{padding: 10}}>
+            <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+        </div>
+    );
+};
+```
+
+#### Controller文件
+
+```ts
+import SwitchComponent, {SwitchComponentProps, SwitchComponentRef} from "./BaseTabComponent.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 (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) {
+        if (!newTheme || !this.config?.style) return;
+        const styleConfig = this.config?.style;
+        const {colors: {supplementSecond, main, supplementFirst, mainText}} = newTheme;
+
+        // 更新文本相关颜色
+        if (styleConfig?.color)
+            styleConfig.color = mainText ?? '#ffffff';
+
+        if (styleConfig?.labelColor)
+            styleConfig.labelColor = mainText ?? '#ffffff';
+
+        // 更新背景颜色
+        if (styleConfig?.backgroundColor)
+            styleConfig.backgroundColor = supplementFirst ?? 'transparent';
+
+        // 更新开关状态颜色
+        if (styleConfig?.checkedBackgroundColor)
+            styleConfig.checkedBackgroundColor = main ?? '#4fb8ff';
+
+        if (styleConfig?.unCheckedBackgroundColor)
+            styleConfig.unCheckedBackgroundColor = supplementFirst ?? '#4c4c5e';
+
+        // 更新边框颜色
+        if (styleConfig?.borderColor)
+            styleConfig.borderColor = supplementFirst ?? 'transparent';
+
+        // 更新悬停样式
+        if (styleConfig?.backgroundColorHover)
+            styleConfig.backgroundColorHover = supplementSecond ?? '#343447';
+
+        if (styleConfig?.borderColorHover)
+            styleConfig.borderColorHover = main ?? '#4fb8ff';
+
+        // 重新渲染
+        this.update({style: styleConfig}, {reRender: true});
+    }
+}
+```
+
+#### Definition文件
+
+```ts
+import React from 'react';
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+import {SwitchController} from "./BaseTabController.ts";
+import {SwitchComponentProps} from "./BaseTabComponent.tsx";
+import SwitchImg from './datetime-picker.jpg';
+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("./BaseTabStyleConfig.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: {
+                // 基础样式
+                color: '#ffffff',
+                fontSize: 14,
+                fontWeight: 400,
+                fontFamily: 'PingFang SC',
+                backgroundColor: 'transparent',
+                borderRadius: 16,
+                borderWidth: 0,
+                borderColor: 'transparent',
+                borderStyle: 'solid',
+
+                // 开关特有样式
+                checkedBackgroundColor: '#4fb8ff',
+                unCheckedBackgroundColor: '#4c4c5e',
+                checkedHandleColor: '#ffffff',
+                unCheckedHandleColor: '#ffffff',
+                switchSize: 'default',
+                loading: false,
+                disabled: false,
+
+                // 标签样式
+                label: '开关',
+                checkedLabel: '',
+                unCheckedLabel: '',
+                labelPosition: 'left',
+                labelColor: '#ffffff',
+                labelFontSize: 14,
+                labelFontWeight: 400,
+
+                // 悬停样式
+                backgroundColorHover: '#343447',
+                borderRadiusHover: 16,
+                borderWidthHover: 0,
+                borderColorHover: '#4fb8ff',
+            },
+            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: "值变化时",
+            }
+        ]);
+    }
+}
+```
+
+## 需求描述
+
+这是我项目中的其中一个组件的代码。现在，我需要你参考这个代码，为我编写新的组件。你需要给我提供完整的代码。
+
+要求：
+
+- 实现一个按钮组（选项卡）组件。
+- 按钮组组件要支持单选和多选两种模式
+- 按钮组中的每个按钮以及按钮组的容器对应的边距、背景色、边框、阴影等一系列css样式都要可配置化
+- 组件要提供方法支持显示隐藏组件
+- 组件的默认UI样式要符合我上面要求的UI设计哲学
+- 不可以使用已有的组件库二次开发，要从零开始实现
+- 提供详细完整的注释说明
+- 你需要给我提供至少5个文件的代码，分开输出。文件名分别为：
+  - BaseTabComponent.less
+  - BaseTabComponent.tsx
+  - BaseTabController.ts
+  - BaseTabDefinition.ts
+  - BaseTabStyleConfig.tsx
+