light-chaser-pro 1.0.0

package/light-chaser-ui/lib/searchable-select/SearchableSelect.tsx

@@ -0,0 +1,239 @@
+/*
+ * 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.
+ */
+
+
+/**
+ *
+ * ## 🎯 核心特性
+ *
+ * 1. **通用性强**：支持任意数据类型，只需提供数据获取函数和转换函数
+ * 2. **完全可配置**：继承了 Ant Design Select 的所有属性
+ * 3. **防抖优化**：可自定义防抖延迟和配置
+ * 4. **首次加载**：可配置是否在聚焦时自动加载数据
+ * 5. **错误处理**：内置错误处理和状态管理
+ * 6. **TypeScript 支持**：完整的类型定义
+ *
+ * ## 📋 主要 Props
+ *
+ * | 属性 | 类型 | 必填 | 默认值 | 说明 |
+ * |------|------|------|--------|------|
+ * | `fetcher` | `DataFetcher<T>` | ✅ | - | 数据获取函数 |
+ * | `transformer` | `DataTransformer<T>` | ✅ | - | 数据转换函数 |
+ * | `debounceDelay` | `number` | ❌ | 500 | 防抖延迟(ms) |
+ * | `loadOnFocus` | `boolean` | ❌ | true | 是否聚焦时加载 |
+ * | `searchingText` | `string` | ❌ | '搜索中...' | 搜索中提示文字 |
+ * | `noDataText` | `string` | ❌ | '暂无数据' | 无数据提示文字 |
+ *
+ * ## 🔧 使用方式
+ *
+ * **最简单的用法：**
+ * ```typescript
+ * <SearchableSelect
+ *     fetcher={quickSearchRole}
+ *     transformer={(role) => ({
+ *         label: role.description,
+ *         value: role.name
+ *     })}
+ *     placeholder="请选择角色"
+ * />
+ * ```
+ *
+ * **完整配置：**
+ * ```typescript
+ * <SearchableSelect
+ *     fetcher={userFetcher}
+ *     transformer={userTransformer}
+ *     mode="multiple"
+ *     allowClear
+ *     style={{ width: '100%' }}
+ *     placeholder="请选择用户"
+ *     debounceDelay={300}
+ *     loadOnFocus={false}
+ *     searchingText="正在搜索..."
+ *     onChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * ## ✨ 优势
+ *
+ * 1. **复用性**：一次封装，到处使用
+ * 2. **类型安全**：完整的 TypeScript 支持
+ * 3. **灵活配置**：支持所有 Ant Design Select 的属性
+ * 4. **性能优化**：内置防抖和状态管理
+ * 5. **易于维护**：集中的逻辑处理
+ *
+ */
+import {Select, SelectProps} from "antd";
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {debounce} from "lodash";
+
+// 通用选项接口
+export interface SelectOption {
+    label: string;
+    value: string | number;
+}
+
+// 数据获取函数类型
+export type DataFetcher<T = any> = (keywords?: string) => Promise<T[] | null | undefined>;
+
+// 数据转换函数类型
+export type DataTransformer<T = any> = (item: T) => SelectOption;
+
+// 数据回显函数类型 - 根据值获取完整的数据项
+export type DataInitializer<T = any> = (values: (string | number)[] | string | number) => Promise<T[] | null | undefined>;
+
+// SearchableSelect 组件的 props 接口
+export interface SearchableSelectProps<T = any> extends Omit<SelectProps, 'options' | 'onSearch' | 'loading'> {
+    /** 数据获取函数 */
+    fetcher: DataFetcher<T>;
+    /** 数据转换函数，将API返回的数据转换为SelectOption格式 */
+    transformer: DataTransformer<T>;
+    /** 数据初始化回显函数，根据默认值获取对应的数据项 */
+    initializer?: DataInitializer<T>;
+    /** 防抖延迟时间，默认500ms */
+    debounceDelay?: number;
+    /** 搜索中的提示文字 */
+    searchingText?: string;
+    /** 无数据时的提示文字 */
+    noDataText?: string;
+    /** 是否在首次聚焦时加载数据，默认true */
+    loadOnFocus?: boolean;
+    /** 防抖配置 */
+    debounceOptions?: {
+        leading?: boolean;
+        trailing?: boolean;
+    };
+}
+
+function SearchableSelect<T = any>({
+                                       fetcher,
+                                       transformer,
+                                       initializer,
+                                       debounceDelay = 500,
+                                       searchingText = '搜索中...',
+                                       noDataText = '暂无数据',
+                                       loadOnFocus = true,
+                                       debounceOptions = {leading: true, trailing: true},
+                                       value,
+                                       defaultValue,
+                                       ...selectProps
+                                   }: SearchableSelectProps<T>) {
+    const [options, setOptions] = useState<SelectOption[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+    const [isInitializing, setIsInitializing] = useState(false);
+    console.log('SearchableSelect props:', {})
+    // 获取当前的有效值（优先使用 value，否则使用 defaultValue）
+    const currentValue = value !== undefined ? value : defaultValue;
+
+    // 标准化值为数组格式，方便统一处理
+    const normalizeValue = useCallback((val: any): (string | number)[] => {
+        if (val === undefined || val === null) return [];
+        return Array.isArray(val) ? val : [val];
+    }, []);
+
+    // 加载数据的通用方法
+    const loadData = useCallback(async (keywords?: string) => {
+        setLoading(true);
+        try {
+            const list = await fetcher(keywords);
+            if (list && Array.isArray(list)) {
+                const newOptions = list.map(transformer);
+                setOptions(newOptions);
+                return newOptions;
+            } else {
+                setOptions([]);
+                return [];
+            }
+        } catch (error) {
+            console.error('Error fetching data:', error);
+            setOptions([]);
+            return [];
+        } finally {
+            setLoading(false);
+        }
+    }, [fetcher, transformer]);
+
+    // 初始化数据回显
+    const initializeData = useCallback(async (values: (string | number)[]) => {
+        if (!initializer || values.length === 0) return;
+
+        setIsInitializing(true);
+        try {
+            const list = await initializer(values);
+            if (list && Array.isArray(list)) {
+                const initialOptions = list.map(transformer);
+                setOptions(prev => {
+                    // 合并初始化的选项和现有选项，避免重复
+                    const existingValues = new Set(prev.map(opt => opt.value));
+                    const newOptions = initialOptions.filter(opt => !existingValues.has(opt.value));
+                    return [...prev, ...newOptions];
+                });
+            }
+        } catch (error) {
+            console.error('Error initializing data:', error);
+        } finally {
+            setIsInitializing(false);
+        }
+    }, [initializer, transformer]);
+
+    // 处理默认值的初始化
+    useEffect(() => {
+        if (currentValue !== undefined && currentValue !== null) {
+            const values = normalizeValue(currentValue);
+            if (values.length > 0) {
+                initializeData(values);
+            }
+        }
+    }, [currentValue, initializeData, normalizeValue]);
+
+    // 防抖搜索函数
+    const debouncedSearch = useMemo(() =>
+            debounce(async (keywords: string) => {
+                await loadData(keywords);
+            }, debounceDelay, debounceOptions),
+        [loadData, debounceDelay, debounceOptions]
+    );
+
+    const handleSearch = useCallback((searchValue: string) => {
+        debouncedSearch(searchValue);
+    }, [debouncedSearch]);
+
+    // 首次聚焦时加载初始数据
+    const handleFocus = useCallback(async (e: any) => {
+        if (loadOnFocus && !hasInitialLoaded) {
+            setHasInitialLoaded(true);
+            await loadData();
+        }
+        // 调用外部传入的onFocus回调
+        selectProps.onFocus?.(e);
+    }, [hasInitialLoaded, loadData, loadOnFocus, selectProps.onFocus]);
+
+    // 判断是否正在加载（包括初始化和搜索）
+    const isLoading = loading || isInitializing;
+
+    return (
+        <Select
+            showSearch
+            filterOption={false}
+            loading={isLoading}
+            options={options}
+            onSearch={handleSearch}
+            onFocus={handleFocus}
+            notFoundContent={isLoading ? searchingText : noDataText}
+            value={value}
+            defaultValue={defaultValue}
+            {...selectProps}
+        />
+    );
+}
+
+export default SearchableSelect;

package/light-chaser-ui/lib/select/Select.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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, {useEffect, useState} from "react";
+import {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+import {Select as AntdSelect} from 'antd';
+import {debounce} from "lodash";
+
+export interface ISelectOption {
+    label: string;
+    value: string | number;
+}
+
+export interface SelectProps extends UIContainerProps {
+    // 选中的值（受控）
+    value?: string | string[];
+    // 默认选中的值（非受控）
+    defaultValue?: string | string[];
+    // 选项列表（非受控）
+    options?: ISelectOption[];
+    //开启搜索
+    showSearch?: boolean;
+    //搜索方法
+    handleSearch?: (search: string) => Promise<ISelectOption[]>;
+    //禁用
+    disabled?: boolean;
+    // 占位符（非受控）
+    placeholder?: string;
+    // 选中值改变时的回调
+    onChange?: (value: string | string[]) => void;
+}
+
+const Select: React.FC<SelectProps> = (props) => {
+    const {
+        value, defaultValue, options = [], disabled = false, showSearch, handleSearch,
+        placeholder = "", onChange, ...containerProps
+    } = props;
+
+    const mode = Array.isArray(value ?? defaultValue) ? "multiple" : undefined;
+
+    const [fetchOptions, setOptions] = useState<ISelectOption[]>([]);
+
+    const _onSearch = debounce((value: string) => {
+        if (!handleSearch)
+            return;
+        handleSearch(value).then(result => {
+            if (Array.isArray(result))
+                setOptions(result)
+            else
+                setOptions([]);
+        });
+    }, 300)
+
+    useEffect(() => {
+        if (handleSearch)
+            _onSearch("");
+    }, []);
+
+    const finalOptions = showSearch && handleSearch ? fetchOptions : options;
+
+    return (
+        <UIContainer {...containerProps} className="lc-select">
+            <AntdSelect value={value} defaultValue={defaultValue}
+                        mode={mode}
+                        options={finalOptions}
+                        disabled={disabled}
+                        placeholder={placeholder}
+                        showSearch={showSearch}
+                        loading={finalOptions?.length === 0}
+                        onSearch={showSearch ? _onSearch : undefined}
+                        filterOption={(inputValue, option) => {
+                            if (option)
+                                return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
+                            return false;
+                        }}
+                        style={{width: "100%"}}
+                        onChange={onChange}/>
+        </UIContainer>
+    );
+};
+export default Select;

package/light-chaser-ui/lib/slider/Slider.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 {Slider as AntdSlider} from "antd";
+import {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+
+export interface SliderProps extends UIContainerProps {
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    min?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+}
+
+export const Slider = (props: SliderProps) => {
+    const {value, defaultValue, max, min, step, onChange, ...containerProps} = props;
+    return (
+        <UIContainer {...containerProps} className={'lc-slider'}>
+            <AntdSlider max={max} min={min} step={step} defaultValue={defaultValue} value={value}
+                        onChange={onChange}/>
+        </UIContainer>
+    )
+}
+
+export interface RangeSliderProps extends UIContainerProps {
+    value?: number[];
+    defaultValue?: number[];
+    max?: number;
+    min?: number;
+    step?: number;
+    onChange?: (value: number[]) => void;
+}
+
+export const RangeSlider = (props: RangeSliderProps) => {
+    const {value, defaultValue, max, min, step, onChange, ...containerProps} = props;
+    return (
+        <UIContainer {...containerProps} className={'lc-range-slider'}>
+            <AntdSlider max={max} min={min} step={step} defaultValue={defaultValue} value={value} range={true}
+                        onChange={onChange}/>
+        </UIContainer>
+    )
+}

package/light-chaser-ui/lib/switch/Switch.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 {useState} from "react";
+import {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+import {Switch as AntdSwitch} from 'antd';
+
+export interface SwitchProps extends UIContainerProps {
+    onChange?: (data: boolean) => void;
+    // 开关状态值（受控）
+    value?: boolean;
+    // 开关状态值（非受控）
+    defaultValue?: boolean;
+    disabled?: boolean;
+}
+
+export default function Switch(props: SwitchProps) {
+    const {value, defaultValue, disabled, onChange, ...containerProps} = props;
+    const controlled: boolean = value !== undefined && defaultValue === undefined;
+    const [stateValue, setStateValue] = useState<boolean>(!!(controlled ? value : defaultValue));
+    const finalValue: boolean = !!(controlled ? value : stateValue);
+
+    const _onChange = (checked: boolean) => {
+        onChange && onChange(checked);
+        if (!controlled)
+            setStateValue(checked);
+    };
+
+    return (
+        <UIContainer {...containerProps} className={'lc-switch'}>
+            <AntdSwitch disabled={disabled} checked={finalValue} onChange={_onChange}/>
+        </UIContainer>
+    );
+}

package/light-chaser-ui/lib/text-area/TextArea.tsx

@@ -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.
+ */
+
+import React, {ChangeEvent, useState} from 'react';
+import {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+import {Input as AntdInput} from 'antd';
+
+const {TextArea: AntdTextArea} = AntdInput;
+
+export interface TextAreaProps extends UIContainerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (data: string) => void;
+}
+
+/**
+ * 下滑线输入框
+ */
+export const TextArea: React.FC<TextAreaProps> = (props) => {
+    const {value, defaultValue, ...rest} = props;
+    const control = !!value && !defaultValue;
+    const [text, setText] = useState(defaultValue);
+
+    const onChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        event.stopPropagation();
+        const {onChange} = props;
+        onChange && onChange(event.target.value);
+        if (!control)
+            setText(event.target.value);
+    }
+
+    return (
+        <UIContainer {...rest}>
+            <div className={'lc-text-area-container'}>
+                <AntdTextArea value={control ? value : text} onChange={onChange}/>
+            </div>
+        </UIContainer>
+    );
+}
+
+export default TextArea;

package/light-chaser-ui/lib/text-only/TextOnly.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 {UIContainer, UIContainerProps} from "../ui-container/UIContainer";
+
+export interface TextOnlyProps extends UIContainerProps {
+    defaultValue?: string;
+}
+
+const TextOnly: React.FC<TextOnlyProps> = (props) => {
+    const {defaultValue, tip, label} = props;
+    return (
+        <UIContainer tip={tip} label={label}>{defaultValue}</UIContainer>
+    );
+}
+export default TextOnly;