light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/lc/base-tab/BaseTabComponent.less

@@ -0,0 +1,90 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+.lc-tab-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  box-sizing: border-box;
+  overflow: hidden; // 防止溢出
+
+  // 容器基础样式，通过 CSS 变量控制
+  background-color: var(--containerBgColor, transparent);
+  border-radius: var(--containerRadius, 8px);
+  border: var(--containerBorderWidth, 0) solid var(--containerBorderColor, transparent);
+  padding: var(--containerPadding, 4px);
+  gap: var(--itemGap, 8px);
+  box-shadow: var(--containerShadow, none);
+
+  // 布局方向与对齐
+  flex-direction: var(--flexDirection, row);
+  justify-content: var(--justifyContent, flex-start);
+  align-items: var(--alignItems, center);
+  flex-wrap: var(--flexWrap, nowrap);
+
+  // 单个 Tab 项样式
+  .tab-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s ease-in-out;
+    box-sizing: border-box;
+    white-space: nowrap; // 防止文字换行
+
+    // 默认（未选中）状态变量
+    background-color: var(--itemBgColor, #2C2C3E);
+    color: var(--itemColor, #A0A0B2);
+    border-radius: var(--itemRadius, 4px);
+    border: var(--itemBorderWidth, 1px) solid var(--itemBorderColor, transparent);
+    font-size: var(--itemFontSize, 14px);
+    font-weight: var(--itemFontWeight, 400);
+    font-family: var(--fontFamily, inherit);
+
+    // 尺寸控制
+    min-width: var(--itemMinWidth, auto);
+    padding: var(--itemPadding, 4px 12px);
+    height: var(--itemHeight, 32px);
+    box-shadow: var(--itemShadow, none);
+
+    // 悬停状态
+    &:hover:not(.disabled):not(.active) {
+      background-color: var(--itemHoverBgColor, #343447);
+      color: var(--itemHoverColor, #FFFFFF);
+      border-color: var(--itemHoverBorderColor, #4FB8FF);
+      transform: translateY(-1px); // 微动效
+    }
+
+    // 选中状态
+    &.active {
+      background-color: var(--activeBgColor, #4FB8FF);
+      color: var(--activeColor, #FFFFFF);
+      border-color: var(--activeBorderColor, transparent);
+      font-weight: var(--activeFontWeight, 600);
+      box-shadow: var(--activeShadow, 0 2px 8px rgba(79, 184, 255, 0.3));
+    }
+
+    // 禁用状态
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      filter: grayscale(1);
+    }
+
+    // 聚焦可视性 (无障碍)
+    &:focus-visible {
+      outline: 2px solid var(--activeBgColor, #4FB8FF);
+      outline-offset: 2px;
+    }
+  }
+}

package/light-chaser-app/src/comps/lc/base-tab/BaseTabComponent.tsx

@@ -0,0 +1,240 @@
+/*
+ * 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 {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {ComponentBaseProps} from "light-chaser-types/types/ComponentTypes.ts";
+import './BaseTabComponent.less';
+
+// 选项接口定义
+export interface TabOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+
+// 组件样式接口定义
+export interface TabComponentStyle {
+    // 基础字体
+    fontFamily?: string;
+
+    // 容器样式
+    containerBgColor?: string;
+    containerRadius?: number;
+    containerBorderWidth?: number;
+    containerBorderColor?: string;
+    containerPadding?: number; // 内边距
+    itemGap?: number; // 间距
+    containerShadow?: string;
+
+    // 布局配置
+    layout?: 'horizontal' | 'vertical';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between';
+    flexWrap?: boolean;
+
+    // 选项配置
+    mode?: 'single' | 'multiple'; // 单选或多选
+
+    // 未选中项样式 (默认)
+    itemBgColor?: string;
+    itemColor?: string;
+    itemRadius?: number;
+    itemBorderWidth?: number;
+    itemBorderColor?: string;
+    itemFontSize?: number;
+    itemFontWeight?: number;
+    itemHeight?: number;
+    itemMinWidth?: number;
+    itemPadding?: string; // e.g. "4px 12px"
+    itemShadow?: string;
+
+    // 选中项样式
+    activeBgColor?: string;
+    activeColor?: string;
+    activeBorderColor?: string;
+    activeFontWeight?: number;
+    activeShadow?: string;
+
+    // 悬停样式
+    itemHoverBgColor?: string;
+    itemHoverColor?: string;
+    itemHoverBorderColor?: string;
+}
+
+// 组件属性接口定义
+export interface TabComponentProps extends ComponentBaseProps {
+    style?: TabComponentStyle;
+}
+
+// 组件引用接口定义
+export interface TabComponentRef {
+    updateConfig: (newConfig: TabComponentProps) => void;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    getOptions: () => TabOption[] | undefined;
+    setOptions: (options: TabOption[]) => void;
+    changeVisible: (visible: boolean) => void;
+}
+
+// 按钮组（选项卡）组件实现
+export const BaseTabComponent = forwardRef((
+    props: TabComponentProps,
+    ref: ForwardedRef<TabComponentRef>
+) => {
+    const [config, setConfig] = useState<TabComponentProps>({...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 [options, setOptions] = useState<TabOption[]>(data?.value ?? []);
+    const [selected, setSelected] = useState<(string | number)[]>([])
+
+    // 暴露组件方法给外部调用
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setConfig({...newConfig});
+            updateCustomStyle(newConfig?.style ?? {});
+            // 如果配置更新中包含值，也更新内部值
+            if (data?.value !== undefined) {
+                setOptions(data?.value ?? []);
+            }
+        },
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        getOptions: () => options,
+        setOptions: (newValue) => setOptions(newValue),
+        changeVisible: (visible) => setVisible(visible)
+    }));
+
+    // 更新自定义 CSS 变量
+    const updateCustomStyle = (styleConfig: TabComponentStyle) => {
+        if (!containerRef.current) return;
+
+        const setProp = (key: string, value: any) => {
+            if (value !== undefined && value !== null) {
+                containerRef.current!.style.setProperty(key, value.toString());
+            }
+        };
+
+        const s = styleConfig;
+
+        // 容器
+        setProp('--containerBgColor', s.containerBgColor);
+        setProp('--containerRadius', `${s.containerRadius ?? 8}px`);
+        setProp('--containerBorderWidth', `${s.containerBorderWidth ?? 0}px`);
+        setProp('--containerBorderColor', s.containerBorderColor);
+        setProp('--containerPadding', `${s.containerPadding ?? 4}px`);
+        setProp('--itemGap', `${s.itemGap ?? 8}px`);
+        setProp('--containerShadow', s.containerShadow);
+        setProp('--flexDirection', s.layout === 'vertical' ? 'column' : 'row');
+        setProp('--justifyContent', s.justifyContent ?? 'flex-start');
+        setProp('--flexWrap', s.flexWrap ? 'wrap' : 'nowrap');
+        setProp('--fontFamily', s.fontFamily);
+
+        // 默认项
+        setProp('--itemBgColor', s.itemBgColor);
+        setProp('--itemColor', s.itemColor);
+        setProp('--itemRadius', `${s.itemRadius ?? 4}px`);
+        setProp('--itemBorderWidth', `${s.itemBorderWidth ?? 1}px`);
+        setProp('--itemBorderColor', s.itemBorderColor);
+        setProp('--itemFontSize', `${s.itemFontSize ?? 14}px`);
+        setProp('--itemFontWeight', s.itemFontWeight);
+        setProp('--itemHeight', `${s.itemHeight ?? 32}px`);
+        setProp('--itemMinWidth', s.itemMinWidth ? `${s.itemMinWidth}px` : 'auto');
+        setProp('--itemPadding', s.itemPadding);
+        setProp('--itemShadow', s.itemShadow);
+
+        // 选中项
+        setProp('--activeBgColor', s.activeBgColor);
+        setProp('--activeColor', s.activeColor);
+        setProp('--activeBorderColor', s.activeBorderColor);
+        setProp('--activeFontWeight', s.activeFontWeight);
+        setProp('--activeShadow', s.activeShadow);
+
+        // 悬停项
+        setProp('--itemHoverBgColor', s.itemHoverBgColor);
+        setProp('--itemHoverColor', s.itemHoverColor);
+        setProp('--itemHoverBorderColor', s.itemHoverBorderColor);
+    };
+
+    // 处理值变更逻辑
+    const handleValueChange = (newValue: string | number | (string | number)[], triggerEvent = true) => {
+        if (triggerEvent) {
+            // 触发通用改变事件
+            if ('change' in eventHandlerMap.current) {
+                eventHandlerMap.current['change']({options, value: newValue});
+            }
+            // 触发值改变事件
+            if ('valueChange' in eventHandlerMap.current) {
+                eventHandlerMap.current['valueChange']({options, value: newValue});
+            }
+        }
+    };
+
+    // 处理单个 Tab 点击
+    const handleItemClick = (option: TabOption) => {
+        if (option.disabled) return;
+
+        const isMultiple = style?.mode === 'multiple';
+        const clickedValue = option.value;
+
+        let newSelected: (string | number)[] = [];
+        if (isMultiple) {
+            newSelected = selected.includes(clickedValue) ? selected.filter(v => v !== clickedValue) : [...selected, clickedValue];
+        } else {
+            newSelected = selected.includes(clickedValue) ? [] : [clickedValue];
+        }
+
+        setSelected(newSelected);
+        handleValueChange(isMultiple ? newSelected : clickedValue, true);
+
+        // 触发点击事件
+        if ('click' in eventHandlerMap.current) {
+            eventHandlerMap.current['click'](option, newSelected);
+        }
+    };
+
+    // 判断是否选中
+    const isActive = (val: string | number) => {
+        return selected.includes(val);
+    };
+
+    // 初始化样式
+    useEffect(() => {
+        updateCustomStyle(style ?? {});
+    }, []); // 仅挂载时执行一次，后续更新由 updateConfig 接管
+
+    // 生成类名
+    const getItemClass = (option: TabOption) => {
+        const classes = ['tab-item'];
+        if (isActive(option.value)) classes.push('active');
+        if (option.disabled) classes.push('disabled');
+        return classes.join(' ');
+    };
+
+    return visible ? (
+            <div className="lc-tab-component" ref={containerRef}>
+                {((data?.value as TabOption[]) || []).map((option, index) => (
+                        <div key={`${option.value}-${index}`}
+                             className={getItemClass(option)}
+                             onClick={() => handleItemClick(option)}
+                             title={option.label}>
+                            {option.label}
+                        </div>
+                    )
+                )}
+            </div>
+        ) :
+        null;
+});
+
+export default BaseTabComponent;

package/light-chaser-app/src/comps/lc/base-tab/BaseTabController.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 BaseTabComponent, {TabComponentProps, TabComponentRef} 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 BaseTabController extends AbstractDesignerController<TabComponentRef, TabComponentProps> {
+
+    async create(container: HTMLElement, config: TabComponentProps, bpExecutor: BPExecutor, index?: number): Promise<void> {
+        await super.create(container, config, bpExecutor, index);
+        // 创建并渲染组件实例
+        this.instance = await ComponentUtil.createAndRender<TabComponentRef>(container, BaseTabComponent, config);
+    }
+
+    // 控制组件显示/隐藏
+    setVisible(visible: boolean): void {
+        this.instance?.changeVisible(visible);
+    }
+
+    destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.componentDataUpdater?.destroy();
+    }
+
+    getConfig(): TabComponentProps | null {
+        return this.config;
+    }
+
+    // 响应数据源变化
+    changeData(data: any) {
+        // 如果传入的是数组或原始值，尝试直接作为 Value 设置
+        // 实际场景中可能需要根据数据源格式解析出 options，此处暂定为设置值
+        if (this.config?.data != undefined)
+            this.config.data.value = data;
+        this.instance?.setOptions(data);
+    }
+
+    update(config: TabComponentProps, 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: any) => executor?.triggerComponentEvent(nodeId!, "change", value),
+                valueChange: (value: any) => executor?.triggerComponentEvent(nodeId!, "valueChange", value),
+                click: (option: any, value: any) => executor?.triggerComponentEvent(nodeId!, "click", {option, value}),
+            });
+        }
+    }
+
+    // 响应全局主题切换
+    updateTheme(newTheme: IThemeItem) {
+        if (!newTheme || !this.config?.style) return;
+        const styleConfig = this.config.style;
+        const {
+            colors: {
+                main,             // 主高亮色 #4FB8FF
+                mainText,         // 主要文字 #FFFFFF
+                subText,          // 次级文字 #A0A0B2
+                background,       // 整体背景 #1E1E2F
+                supplementFirst,  // 容器背景 #2C2C3E
+            }
+        } = newTheme;
+
+        // 1. 容器整体样式赋值
+        if (supplementFirst || background) {
+            styleConfig.containerBgColor = supplementFirst ?? background;
+        }
+        styleConfig.containerBorderColor = "#3A3A4E"; // 遵循输入框/容器边框规范
+
+        // 2. 未选中项样式 (默认态)
+        styleConfig.itemBgColor = "transparent";      // 默认项背景通常透明或与容器一致
+        styleConfig.itemColor = subText ?? "#A0A0B2"; // 默认使用次级文字颜色
+        styleConfig.itemBorderColor = "transparent";
+
+        // 3. 选中项样式 (激活态)
+        if (main) {
+            styleConfig.activeBgColor = main;           // 主高亮背景
+            styleConfig.activeBorderColor = main;
+        }
+        styleConfig.activeColor = "#FFFFFF";          // 激活态文字固定为白色以保证对比度
+
+        // 4. 悬停样式 (Hover 态)
+        // 根据要求：悬停背景高亮 10% 亮度提升，通常表现为微亮处理
+        styleConfig.itemHoverBgColor = "rgba(255, 255, 255, 0.08)";
+        styleConfig.itemHoverColor = mainText ?? "#FFFFFF";
+        styleConfig.itemHoverBorderColor = main;
+
+        // 重新渲染
+        this.update({style: styleConfig}, {reRender: true});
+    }
+}

package/light-chaser-app/src/comps/lc/base-tab/BaseTabDefinition.ts

@@ -0,0 +1,137 @@
+/*
+ * 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 { BaseInfoType, MenuToConfigMappingType } from "light-chaser-types/types/ComponentTypes.ts";
+import { BaseTabController } from "./BaseTabController.ts";
+import { TabComponentProps } from "./BaseTabComponent.tsx";
+// 假设这里有一个缩略图，实际项目请替换
+import TabImg from './tab.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 BaseTabStyleConfig = React.lazy(() => import("./BaseTabStyleConfig.tsx").then((module) => ({ default: module.BaseTabStyleConfig })));
+const FilterConfig = React.lazy(() => import("../../common-component/filter-config/FilterConfig.tsx"));
+
+export default class BaseTabDefinition extends AbstractDesignerDefinition<BaseTabController, TabComponentProps> {
+
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "按钮选项卡",
+            compKey: "BaseTab",
+            categorize: "web",
+            width: 300,
+            height: 48,
+        };
+    }
+
+    getChartImg(): string | null {
+        return TabImg;
+    }
+
+    getController(): ClazzTemplate<BaseTabController> | null {
+        return BaseTabController;
+    }
+
+    getInitConfig(): TabComponentProps {
+        return {
+            base: {
+                id: "",
+                name: '按钮选项卡',
+                type: 'BaseTab',
+            },
+            style: {
+                fontFamily: '',
+
+                // 容器默认
+                containerBgColor: 'transparent',
+                containerRadius: 8,
+                containerBorderWidth: 0,
+                containerBorderColor: 'transparent',
+                containerPadding: 4,
+                itemGap: 8,
+                layout: 'horizontal',
+                justifyContent: 'flex-start',
+                flexWrap: false,
+
+                // 模式与数据
+                mode: 'single',
+
+                // 默认项
+                itemBgColor: '#2C2C3E',
+                itemColor: '#A0A0B2',
+                itemRadius: 4,
+                itemBorderWidth: 1,
+                itemBorderColor: '#3A3A4E', // 微弱边框
+                itemFontSize: 14,
+                itemFontWeight: 400,
+                itemHeight: 32,
+                itemMinWidth: 80,
+                itemPadding: '4px 12px',
+
+                // 选中项
+                activeBgColor: '#4FB8FF',
+                activeColor: '#FFFFFF',
+                activeBorderColor: 'transparent',
+                activeFontWeight: 600,
+                activeShadow: '0 2px 8px rgba(79, 184, 255, 0.3)',
+
+                // 悬停
+                itemHoverBgColor: '#343447',
+                itemHoverColor: '#FFFFFF',
+                itemHoverBorderColor: '#4FB8FF',
+            },
+            data: {
+                sourceType: 'static',
+                value: [
+                    {label: '选项一', value: '1'},
+                    {label: '选项二', value: '2'},
+                    {label: '选项三', value: '3'}
+                ]
+            }
+        };
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        return {
+            base: BaseInfo,
+            style: BaseTabStyleConfig,
+            animation: AnimationConfig,
+            theme: ThemeConfig,
+            data: DataConfig,
+            filter: FilterConfig
+        };
+    }
+
+    getEventList(): EventInfo[] {
+        const events = super.getEventList();
+        return events.concat([
+            {
+                id: "change",
+                name: "选中改变时",
+            },
+            {
+                id: "valueChange",
+                name: "值变化时",
+            },
+            {
+                id: "click",
+                name: "点击选项时",
+            }
+        ]);
+    }
+}