light-chaser-pro 1.0.0

package/light-chaser-ui/lib/color-picker/ColorPicker.tsx

@@ -0,0 +1,315 @@
+/*
+ * 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 {ColorPicker as AntdColorPicker, ConfigProvider, InputNumber, Slider} from 'antd';
+import {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+import './ColorPicker.less';
+import {FocusEvent, ReactNode, useEffect, useRef, useState} from "react";
+import {ColorUtil} from "light-chaser-util";
+import {getRecentColors, updateRecentColor} from "./RecentColors.ts";
+
+//对比两个等长度数组的元素变化值，返回变化元素的索引值，比如A = [1,2,3] , B=[1,4,3] 则返回下标1， 如果B=[1,3,3] B=[1,3,4] 则返回2. 如果没有变化则返回-1
+function findChangedIndex<T>(oldArr: T[], newArr: T[]): number {
+    const indexLimit = Math.min(oldArr.length, newArr.length);
+    for (let i = 0; i < indexLimit; i++) {
+        if (oldArr[i] !== newArr[i]) {
+            return i;
+        }
+    }
+    if (oldArr.length !== newArr.length)
+        return indexLimit;
+    else
+        return -1
+}
+
+/**
+ * 判断一个字符串是否是一个合法的颜色值
+ * @param color
+ */
+function isValidColor(color: string) {
+    const hexRegex = /^#([0-9A-F]{3}|[0-9A-F]{6,8})$/i;
+    const rgbRegex = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
+    const rgbaRegex = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(0|1|0?\.\d+)\)$/;
+    const hslRegex = /^hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/;
+    const hslaRegex = /^hsla\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(0|1|0?\.\d+)\)$/;
+    return hexRegex.test(color) || rgbRegex.test(color) || rgbaRegex.test(color) || hslRegex.test(color) || hslaRegex.test(color);
+}
+
+/**
+ * 判断字符串是否一个合法的径向渐变颜色值
+ * @param color
+ */
+function isRadialGradient(color: string) {
+    const radialGradientRegex = /^radial-gradient\(\s*((circle|ellipse|closest-side|closest-corner|farthest-side|farthest-corner|),)?\s*(((\s*#[0-9a-fA-F]{3,8}|\s*rgba?\([^)]+\))\s+)\d+%,?)+\)$/;
+    return radialGradientRegex.test(color);
+}
+
+/**
+ * 解析颜色值
+ * @param color
+ */
+function parseColorValue(color: string) {
+    //判断value是否是一个合法的颜色值，
+    if (isValidColor(color)) {
+        return {
+            mode: 'single',
+            rawValue: color
+        }
+    }
+    //判断value是否是线性渐变
+    if (color.startsWith('linear-gradient')) {
+        return {
+            mode: 'linear',
+            ...ColorUtil.parseLinerGradient(color)
+        }
+    }
+    //判断value是否是径向渐变
+    if (isRadialGradient(color)) {
+        return {
+            mode: 'radial',
+            ...ColorUtil.parseRadialGradient(color)
+        }
+    }
+}
+
+type ColorMode = 'single' | 'linear' | 'radial';
+
+export interface ColorPickerProps extends UIContainerProps {
+    value?: string;
+    defaultValue?: string;
+    modes?: Array<ColorMode>
+    showText?: boolean;
+    disabled?: boolean;
+    onChange?: (color: string) => void;
+}
+
+
+interface ColorVal {
+    mode?: string;
+    angle?: number;
+    rawValue?: string;
+    posArr: number[];
+    colorArr: string[];
+}
+
+const colorModes = [
+    {
+        label: '单色',
+        value: 'single'
+    },
+    {
+        label: '线性渐变',
+        value: 'linear'
+    },
+    {
+        label: '径向渐变',
+        value: 'radial'
+    }
+]
+
+export default function ColorPicker(props: ColorPickerProps) {
+    const {value, defaultValue, modes, showText, disabled, onChange, ...containerProps} = props;
+    const controlled = value != undefined && defaultValue == undefined;
+    const configRef = useRef<ColorVal>({mode: 'single', angle: 90, posArr: [0, 100], colorArr: ['#fff', '#000'], rawValue: '#fff'});
+    const [count, setCount] = useState(0);
+    const linerSelectedRef = useRef(0);
+    const radialSelectedRef = useRef(0);
+
+    useEffect(() => {
+        const finalValue = value || defaultValue || '#fff';
+        configRef.current = {...configRef.current, ...parseColorValue(finalValue)} as ColorVal;
+        updateColorValue(undefined, false);
+    }, controlled ? [props.value] : [])
+
+    const updateColorValue = (color?: string, triggerChange: boolean = true) => {
+        if (configRef.current.mode === 'single') {
+            color && (configRef.current.rawValue = color);
+        }
+        if (configRef.current.mode === 'linear') {
+            color && (configRef.current.colorArr[linerSelectedRef.current] = color);
+            configRef.current.rawValue = generateLinerGradient();
+        }
+        if (configRef.current.mode === 'radial') {
+            color && (configRef.current.colorArr[radialSelectedRef.current] = color);
+            configRef.current.rawValue = generateRadialGradient();
+        }
+        setCount(count + 1);
+        if (triggerChange)
+            onChange && onChange(configRef.current.rawValue!);
+        updateRecentColor(configRef.current.rawValue!)
+    };
+
+    const linerSlideChange = (value: number[]) => {
+        //查找本次修改颜色的索引
+        const index = findChangedIndex(configRef.current.posArr, value);
+        if (value.length > configRef.current.posArr.length) {
+            //增加新的节点
+            configRef.current.colorArr.splice(index, 0, configRef.current.colorArr[index - 1])
+        } else if (value.length < configRef.current.posArr.length) {
+            //删除节点
+            configRef.current.colorArr.splice(index, 1);
+        }
+        configRef.current.posArr = value;
+        updateColorValue();
+    }
+    const linerSlideFocus = (e: FocusEvent) => {
+        //匹配e.target.className中数字并提取数字
+        const index = e.target.className.match(/\d+/)?.[0];
+        linerSelectedRef.current = Number(index) - 1;
+        setCount(count + 1);
+    }
+    const generateLinerGradient = (): string => {
+        let linerGradient = "";
+        configRef.current.posArr.forEach((v, i) => {
+            linerGradient += ` ${configRef.current.colorArr[i]} ${v}%${i === configRef.current.posArr.length - 1 ? '' : ','}`;
+        })
+        return `linear-gradient(${configRef.current.angle}deg, ${linerGradient})`;
+    }
+
+
+    const radialSlideChange = (value: number[]) => {
+        //查找本次修改颜色的索引
+        const index = findChangedIndex(configRef.current.posArr, value);
+        if (value.length > configRef.current.posArr.length) {
+            //增加新的节点
+            configRef.current.colorArr.splice(index, 0, configRef.current.colorArr[index - 1])
+        } else if (value.length < configRef.current.posArr.length) {
+            //删除节点
+            configRef.current.colorArr.splice(index, 1);
+        }
+        configRef.current.posArr = value;
+        updateColorValue();
+    }
+
+    const radialSlideFocus = (e: FocusEvent) => {
+        //匹配e.target.className中数字并提取数字
+        const index = e.target.className.match(/\d+/)?.[0];
+        radialSelectedRef.current = Number(index) - 1;
+        setCount(count + 1);
+    }
+    const generateRadialGradient = (): string => {
+        let radialGradient = "";
+        configRef.current.posArr.forEach((v, i) => {
+            radialGradient += `${configRef.current.colorArr[i]} ${v}%${i === configRef.current.colorArr.length - 1 ? '' : ','}`;
+        })
+        return `radial-gradient(${radialGradient})`;
+    }
+
+
+    const customRender = (panel: ReactNode): ReactNode => {
+        return <div className="versatile-color-picker-panel">
+            <div className="picker-toolbar" onClick={(e) => {
+                const mode = (e.target as HTMLElement)?.dataset?.mode;
+                if (mode) {
+                    configRef.current.mode = mode;
+                    if (mode === 'single' && !isValidColor(configRef.current.rawValue!))
+                        configRef.current.rawValue = '#fff';
+                    updateColorValue();
+                }
+            }}>
+                {
+                    colorModes.filter(v => modes?.includes(v.value as ColorMode)).map(v => {
+                        return <div key={v.value} data-mode={v.value} className={`tool-item ${configRef.current.mode === v.value ? 'mode-active' : ''}`}>{v.label}</div>
+                    })
+                }
+            </div>
+            {
+                configRef.current.mode === 'linear' && <div className="liner-gradient-tool">
+                    <div className="liner-gradient-slider-container">
+                        <Slider className='liner-gradient-slider'
+                                range={{editable: true, minCount: 2, maxCount: 5}}
+                                tooltip={{open: false}}
+                                styles={{
+                                    rail: {
+                                        background: generateLinerGradient(),
+                                        height: 8,
+                                        top: 0,
+                                        borderRadius: 7
+                                    },
+                                    handle: {background: '#00000000'}
+                                }}
+                                onFocus={linerSlideFocus}
+                                step={1}
+                                included={false}
+                                onChange={linerSlideChange}
+                                value={configRef.current.posArr}
+                        />
+                    </div>
+                    <div className="liner-gradient-angle">
+                        <InputNumber size="small" value={configRef.current.angle ?? 90} onChange={(value) => {
+                            configRef.current.angle = value!;
+                            updateColorValue();
+                        }}/>
+                    </div>
+                </div>
+            }
+            {
+                configRef.current.mode === 'radial' && <div className="radial-gradient-tool">
+                    <div className="radial-gradient-slider-container">
+                        <Slider className='radial-gradient-slider'
+                                range={{editable: true, minCount: 2, maxCount: 5}}
+                                tooltip={{open: false}}
+                                styles={{
+                                    rail: {
+                                        background: generateRadialGradient(),
+                                        height: 8,
+                                        top: 1,
+                                        borderRadius: 7
+                                    },
+                                    handle: {background: '#00000000'}
+                                }}
+                                onFocus={radialSlideFocus}
+                                step={1}
+                                included={false}
+                                onChange={radialSlideChange}
+                                value={configRef.current.posArr}
+                        />
+                    </div>
+                </div>
+            }
+            {panel}
+        </div>
+    }
+    const index = configRef.current.mode === 'linear' ? linerSelectedRef.current : configRef.current.mode === 'radial' ? radialSelectedRef.current : undefined;
+    const color = index !== undefined ? configRef.current.colorArr[index] : configRef.current.rawValue;
+
+    return (
+        <UIContainer {...containerProps} className={'versatile-color-picker'}>
+            <ConfigProvider theme={{
+                token: {
+                    fontSizeSM: 12,
+                    marginXXS: 5
+                }
+            }}>
+                <AntdColorPicker panelRender={customRender}
+                                 children={
+                                     <div className="color-trigger-container">
+                                         <div className="color-picker-trigger-block" style={{background: configRef.current.rawValue}}></div>
+                                         {configRef.current.mode === 'single' && showText ?
+                                             <div className="color-picker-text">
+                                                 {configRef.current.rawValue?.toUpperCase()}
+                                             </div> : ''}
+                                     </div>}
+                                 presets={[
+                                     {label: '最近使用', colors: getRecentColors(), defaultOpen: true},
+                                     {label: '常用颜色', colors: ['#fff', '#000', '#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'], defaultOpen: false}
+                                 ]}
+                                 size={'small'}
+                                 format={'hex'}
+                                 disabled={disabled}
+                                 value={color}
+                                 placement={'bottom'}
+                                 arrow={false}
+                                 onChange={(color) => updateColorValue(color.toHexString())}/>
+            </ConfigProvider>
+        </UIContainer>
+    );
+}

package/light-chaser-ui/lib/color-picker/RecentColors.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 {debounce} from "lodash";
+
+const MAX_COLORS = 8;
+const STORAGE_KEY = '__recentColors__';
+
+/**
+ * 更新最近使用的颜色
+ * @param color 新的颜色值，例如 "#FF0000"
+ */
+export const updateRecentColor = debounce((color: string) => {
+    // 获取当前数组
+    let recent: string[] = (window as any)[STORAGE_KEY] || [];
+
+    // 如果已经存在该颜色，先移除
+    recent = recent.filter(c => c !== color);
+
+    // 添加到数组头部
+    recent.unshift(color);
+
+    // 保证长度不超过 MAX_COLORS
+    if (recent.length > MAX_COLORS) {
+        recent = recent.slice(0, MAX_COLORS);
+    }
+
+    // 保存回 window
+    (window as any)[STORAGE_KEY] = recent;
+}, 500)
+
+/**
+ * 获取最近使用的颜色
+ */
+export const getRecentColors = function () {
+    return (window as any)[STORAGE_KEY] || [];
+}

package/light-chaser-ui/lib/colors-picker/ColorsPicker.less

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+.colors-picker {
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .colors-item {
+    position: relative;
+    margin-right: 3px;
+
+    span {
+      position: absolute;
+      top: 0;
+      left: 18px;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      text-align: center;
+      background-color: #525252;
+
+      label {
+        cursor: pointer;
+        color: #d6d6d6;
+        position: relative;
+        top: -3.3px;
+      }
+    }
+  }
+
+  .colors-pick-add-btn {
+    border: 1px solid #007984;
+    width: 21px;
+    height: 21px;
+    border-radius: 15px;
+    font-size: 20px;
+    display: flex;
+
+    .add-icon {
+      color: #007984;
+      width: 21px;
+      height: 21px;
+      text-align: center;
+      line-height: 21px;
+      position: relative;
+      top: -4px;
+    }
+  }
+
+  .colors-pick-add-btn:hover {
+    cursor: pointer;
+    border-color: #00cde3;
+
+    .add-icon {
+      color: #00cde3;
+    }
+  }
+
+  .colors-pick-add-btn:active {
+    cursor: pointer;
+    border-color: #bef3ff;
+
+    .add-icon {
+      color: #bef3ff;
+    }
+  }
+}

package/light-chaser-ui/lib/colors-picker/ColorsPicker.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 {useRef, useState} from 'react';
+import './ColorsPicker.less';
+import {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+import ColorPicker from "../color-picker/ColorPicker.tsx";
+
+export interface ColorsPickerProp extends UIContainerProps {
+    value?: string[];
+    defaultValue?: string[];
+    canAdd?: boolean;
+    onChange?: (data: string[]) => void;
+    modes?: Array<'single' | 'linear' | 'radial'>
+}
+
+export default function ColorsPicker(props: ColorsPickerProp) {
+    const {value, defaultValue, modes, canAdd, onChange, ...containerProps} = props;
+    const controlled = value !== undefined && defaultValue === undefined;
+    const [stateValue, setStateValue] = useState(controlled ? value : defaultValue);
+    const [stateCanAdd, setStateCanAdd] = useState(!!canAdd);
+    const finalValue = controlled ? value : stateValue;
+    const maxRef = useRef<number>(5);
+
+    const _onChange = (color: string, id: number) => {
+        const tempValue = [...finalValue!];
+        tempValue[id] = color;
+        onChange && onChange(tempValue);
+        if (!controlled)
+            setStateValue(tempValue);
+    }
+
+    const addColor = () => {
+        const tempValue = [...finalValue!];
+        if (tempValue?.length >= maxRef.current)
+            return;
+        tempValue.push('#a9a9a9');
+        if (tempValue.length === maxRef.current)
+            setStateCanAdd(false);
+        setStateValue(tempValue);
+        onChange && onChange(tempValue);
+    }
+
+    const delColor = (id: number) => {
+        const tempValue = [...finalValue!];
+        tempValue.splice(id, 1);
+        if (tempValue.length < maxRef.current)
+            setStateCanAdd(true);
+        setStateValue(tempValue);
+        onChange && onChange(tempValue);
+    }
+
+    return (
+        <UIContainer {...containerProps}>
+            <div className={'colors-picker'}>
+                {finalValue?.map((item: string, i: number) => {
+                    return (
+                        <div className={"colors-item"} key={i + ''}>
+                            <ColorPicker value={item} modes={modes} onChange={(color) => _onChange(color, i)}/>
+                            <span onClick={() => delColor(i)}><label>×</label></span>
+                        </div>
+                    )
+                })}
+                {stateCanAdd &&
+                    <div onClick={addColor} className={'colors-pick-add-btn'}>
+                        <div className="add-icon">+</div>
+                    </div>}</div>
+        </UIContainer>
+    )
+}

package/light-chaser-ui/lib/control-group/ControlGroup.less

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+.control-group {
+  width: 100%;
+  padding: 10px;
+
+  .control-group-header {
+    color: #e4f4ff;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+
+    .cgh-operate {
+
+      .operate-icon {
+        cursor: pointer;
+        padding: 3px;
+        position: relative;
+        top: 1px;
+      }
+
+      .toggle-icon {
+        top: 2px;
+      }
+    }
+  }
+
+  .control-group-body {
+    padding: 5px;
+
+    .lc-accordion {
+
+      .accordion-header {
+        color: #c6c6c6;
+        font-size: 12px;
+      }
+    }
+  }
+}

package/light-chaser-ui/lib/control-group/ControlGroup.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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, {lazy, Suspense, useRef} from "react";
+import {Control} from "../types";
+import './ControlGroup.less';
+import {FieldChangeData} from "../gui/LCGUI";
+import Loading from "../loading/Loading";
+import LCGUIUtil from "../gui/LCGUIUtil";
+import {cloneDeep} from "lodash";
+import {AddOne, DeleteFive, Down, Right} from "@icon-park/react";
+import {ObjectUtil} from "light-chaser-util";
+
+const LCGUI = lazy(() => import("../gui/LCGUI").then((module) => ({default: module.LCGUI})));
+
+export interface ControlGroupProps {
+    label?: string;
+    itemName?: string;
+    template?: Control;
+    defaultValue?: object[];
+    onChange?: (value: unknown) => void;
+}
+
+const ControlGroup = (props: ControlGroupProps) => {
+    const {label, defaultValue = [], template, itemName} = props;
+    const [toggle, setToggle] = React.useState<boolean>(false);
+    const templateData = LCGUIUtil.parseSchemaData(template!);
+    const initSchema: Control = {children: []};
+    defaultValue.forEach((data, index) => {
+        initSchema.children?.push({
+            type: 'accordion',
+            key: index + '',
+            label: (itemName || '系列') + (index + 1),
+            children: [{...LCGUIUtil.schemaStructureAssignment(data, cloneDeep(template!))}]
+        });
+    });
+    const dataRef = useRef(defaultValue);
+    const [schema, setSchema] = React.useState<Control>(initSchema);
+
+    const addNewGroup = () => {
+        const {template} = props;
+        if (!template) return;
+        schema.children?.push({
+            type: 'accordion',
+            key: dataRef.current.length + '',
+            label: (itemName || '系列') + (dataRef.current.length + 1),
+            children: [template]
+        });
+        setSchema({...schema});
+        dataRef.current = [...dataRef.current, {...templateData}];
+        const {onChange} = props;
+        onChange && onChange(dataRef.current);
+    }
+
+    const delGroup = () => {
+        schema.children?.pop();
+        setSchema({...schema});
+        dataRef.current.pop();
+        const {onChange} = props;
+        onChange && onChange(dataRef.current);
+    }
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        const {dataFragment} = fieldChangeData;
+        const index = Number(Object.keys(dataFragment)[0]);
+        dataRef.current[index] = ObjectUtil.merge(dataRef.current[index], dataFragment[index as keyof object]);
+        const {onChange} = props;
+        onChange && onChange(dataRef.current);
+    }
+    return (
+        <div className="control-group">
+            <div className={'control-group-header'}>
+                <div className={'cgh-label'}><span>{label}</span></div>
+                <div className={'cgh-operate'}>
+                    <span className={'operate-icon'} onClick={delGroup}><DeleteFive/></span>
+                    <span className={'operate-icon'} onClick={addNewGroup}><AddOne/></span>
+                    <span className={'operate-icon toggle-icon'} onClick={() => setToggle(!toggle)}>
+                        {toggle ?
+                            <Down size={16}/> :
+                            <Right size={16}/>}
+                    </span>
+                </div>
+            </div>
+            {toggle && <div className={'control-group-body'} style={{display: toggle ? 'block' : 'none'}}>
+                <Suspense fallback={<Loading/>}>
+                    <LCGUI schema={schema} onFieldChange={onFieldChange}/>
+                </Suspense>
+            </div>}
+        </div>
+    )
+}
+
+export default ControlGroup;