@jiangood/open-admin 1.0.0-beta.5

package/src/framework/fields/FieldRemoteSelect/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { SelectProps } from "antd/es/select";
+import { FieldProps } from '../types';
+
+interface FieldRemoteSelectProps extends Omit<SelectProps, 'value' | 'onChange'>, FieldProps<any> {
+    /**
+     * 请求地址
+     */
+    url: string;
+    /**
+     * 防抖时间（毫秒）
+     */
+    debounceTime?: number;
+    /**
+     * 请求参数处理函数
+     */
+    paramsProcessor?: (params: any) => any;
+    /**
+     * 响应数据处理函数
+     */
+    dataProcessor?: (data: any) => any;
+    /**
+     * 缓存大小
+     */
+    cacheSize?: number;
+    /**
+     * 初始加载
+     */
+    initialLoad?: boolean;
+    /**
+     * 搜索时是否清空已选项
+     */
+    clearOnSearch?: boolean;
+    /**
+     * 请求失败回调
+     */
+    onError?: (error: any) => void;
+    /**
+     * 加载完成回调
+     */
+    onLoad?: (data: any) => void;
+}
+
+export const FieldRemoteSelect: React.FC<FieldRemoteSelectProps>;

package/src/framework/fields/FieldRemoteSelect/index.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Select, Spin, message } from 'antd';
+import { debounce } from 'lodash';
+import { HttpUtils } from "../../utils";
+
+export const FieldRemoteSelect = ({
+    url,
+    debounceTime = 500,
+    paramsProcessor,
+    dataProcessor,
+    cacheSize = 10,
+    initialLoad = true,
+    clearOnSearch = false,
+    onError,
+    onLoad,
+    value,
+    ...rest
+}) => {
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [cache, setCache] = useState(new Map());
+    const fetchIdRef = useRef(0);
+    const searchHistoryRef = useRef([]);
+
+    const loadData = useCallback(async (searchText = '') => {
+        const fetchId = ++fetchIdRef.current;
+        const cacheKey = searchText || '_initial_';
+
+        // 检查缓存
+        if (cache.has(cacheKey)) {
+            const cachedData = cache.get(cacheKey);
+            setOptions(cachedData || []);
+            onLoad?.(cachedData);
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            let params = { searchText, selected: value };
+            if (paramsProcessor) {
+                params = paramsProcessor(params);
+            }
+
+            const data = await HttpUtils.get(url, params);
+            const processedData = dataProcessor ? dataProcessor(data) : data;
+
+            if (fetchId === fetchIdRef.current) {
+                setOptions(processedData || []);
+                
+                // 更新缓存
+                setCache(prevCache => {
+                    const newCache = new Map(prevCache);
+                    newCache.set(cacheKey, processedData || []);
+                    
+                    // 限制缓存大小
+                    if (newCache.size > cacheSize) {
+                        const firstKey = newCache.keys().next().value;
+                        newCache.delete(firstKey);
+                    }
+                    
+                    return newCache;
+                });
+
+                onLoad?.(processedData);
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            setOptions([]);
+            onError?.(error);
+        } finally {
+            if (fetchId === fetchIdRef.current) {
+                setLoading(false);
+            }
+        }
+    }, [url, value, paramsProcessor, dataProcessor, cache, cacheSize, onError, onLoad]);
+
+    // 使用 useMemo 缓存 debounce 函数
+    const debouncedLoadData = useCallback(
+        debounce((value) => loadData(value), debounceTime),
+        [loadData, debounceTime]
+    );
+
+    useEffect(() => {
+        if (initialLoad) {
+            loadData();
+        }
+    }, [initialLoad, loadData]);
+
+    const handleSearch = useCallback((searchValue) => {
+        const trimmedValue = searchValue.trim();
+        
+        // 记录搜索历史
+        if (trimmedValue && !searchHistoryRef.current.includes(trimmedValue)) {
+            searchHistoryRef.current = [trimmedValue, ...searchHistoryRef.current].slice(0, 5);
+        }
+        
+        if (trimmedValue === '') {
+            setOptions([]);
+            return;
+        }
+        
+        debouncedLoadData(trimmedValue);
+    }, [debouncedLoadData]);
+
+    return (
+        <Select
+            showSearch={{
+                filterOption: false,
+                onSearch: handleSearch,
+            }}
+            options={options}
+            notFoundContent={loading ? <Spin size="small" /> : '数据为空'}
+            style={{ width: '100%', minWidth: 200 }}
+            allowClear
+            loading={loading}
+            {...rest}
+        />
+    );
+};
+
+FieldRemoteSelect.defaultProps = {
+    placeholder: '请搜索选择'
+};

package/src/framework/fields/FieldRemoteSelectMultiple/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import {SelectProps} from "antd/es/select";
+
+interface FieldRemoteSelectMultipleProps extends Omit<SelectProps, 'options' | 'children'| 'mode' | 'value' | 'onChange'> {
+    /**
+     * 请求地址
+     */
+    url: string;
+    /**
+     * 选中的值
+     */
+    value?: any[];
+    /**
+     * 值变化回调
+     */
+    onChange?: (value: any[]) => void;
+}
+
+export class FieldRemoteSelectMultiple extends React.Component<FieldRemoteSelectMultipleProps, any> {
+}

package/src/framework/fields/FieldRemoteSelectMultiple/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {Select, Spin, message} from 'antd';
+import {debounce} from 'lodash';
+import {HttpUtils} from "../../utils";
+
+export class FieldRemoteSelectMultiple extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.fetchIdRef = 0;
+        this.state = {
+            options: [],
+            loading: false,
+        };
+
+        this.loadDataDebounce = debounce(this.loadData, 800);
+    }
+
+    static defaultProps = {
+        placeholder: '请搜索选择'
+    };
+
+    componentDidMount() {
+        this.loadData('');
+    }
+
+    componentWillUnmount() {
+        this.loadDataDebounce.cancel();
+    }
+
+    loadData = async (searchText) => {
+        const {url, value} = this.props;
+        const fetchId = ++this.fetchIdRef;
+
+        this.setState({loading: true});
+
+        try {
+            const data = await HttpUtils.get(url, {searchText, selected: value});
+
+            if (fetchId === this.fetchIdRef) {
+                this.setState({options: data || []});
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            this.setState({options: []});
+        } finally {
+            if (fetchId === this.fetchIdRef) {
+                this.setState({loading: false});
+            }
+        }
+    };
+
+    handleSearch = (value) => {
+        if (value.trim() === '') {
+            this.setState({options: []});
+            return;
+        }
+        this.loadDataDebounce(value.trim());
+    };
+
+    render() {
+        const {options, loading} = this.state;
+        const {value, onChange, url, ...selectProps} = this.props;
+        return (
+            <Select
+                showSearch={
+                    {
+                        filterOption: false,
+                        onSearch: this.handleSearch,
+                    }
+                }
+                value={value}
+                onChange={onChange}
+                options={options}
+                notFoundContent={loading ? <Spin size="small"/> : '数据为空'}
+                style={{width: '100%', minWidth: 200}}
+                allowClear
+                mode='multiple'
+                {...selectProps}
+            >
+            </Select>
+        );
+    }
+}

package/src/framework/fields/FieldRemoteSelectMultipleInline/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import {SelectProps} from "antd/es/select";
+import { FieldProps } from '../types';
+
+/**
+ *  多选，但是值是字符串，逗号破解的
+ */
+export interface FieldRemoteSelectMultipleInlineProps extends Omit<SelectProps, 'options' | 'children'| 'mode' | 'value' | 'onChange'>, FieldProps<string> {
+    /**
+     * 请求地址
+     */
+    url: string;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean;
+}
+
+export class FieldRemoteSelectMultipleInline extends React.Component<FieldRemoteSelectMultipleInlineProps, any> {
+}

package/src/framework/fields/FieldRemoteSelectMultipleInline/index.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {Select, Spin, message} from 'antd';
+import {debounce} from 'lodash';
+import {HttpUtils, StringUtils} from "../../utils";
+
+/**
+ *  多选，但是值是字符串，逗号破解的
+ */
+export class FieldRemoteSelectMultipleInline extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.fetchIdRef = 0;
+        this.state = {
+            options: [],
+            loading: false,
+        };
+
+        this.loadDataDebounce = debounce(this.loadData, 800);
+    }
+
+    static defaultProps = {
+        placeholder: '请搜索选择'
+    };
+
+    componentDidMount() {
+        this.loadData('');
+    }
+
+    componentWillUnmount() {
+        this.loadDataDebounce.cancel();
+    }
+
+    loadData = async (searchText) => {
+        const {url, value} = this.props;
+        const fetchId = ++this.fetchIdRef;
+
+        this.setState({loading: true});
+
+        try {
+            const data = await HttpUtils.get(url, {searchText, selected: value});
+
+            if (fetchId === this.fetchIdRef) {
+                this.setState({options: data || []});
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            this.setState({options: []});
+        } finally {
+            if (fetchId === this.fetchIdRef) {
+                this.setState({loading: false});
+            }
+        }
+    };
+
+    handleSearch = (value) => {
+        if (value.trim() === '') {
+            this.setState({options: []});
+            return;
+        }
+        this.loadDataDebounce(value.trim());
+    };
+
+    render() {
+        const {options, loading} = this.state;
+        const {value, onChange, url, ...selectProps} = this.props;
+        return (
+            <Select
+                showSearch={
+                    {
+                        filterOption: false,
+                        onSearch: this.handleSearch,
+                    }
+                }
+                value={StringUtils.split(value, ',')}
+                onChange={arr => onChange && onChange(StringUtils.join(arr, ','))}
+                options={options}
+                notFoundContent={loading ? <Spin size="small"/> : '数据为空'}
+                style={{width: '100%', minWidth: 200}}
+                allowClear
+                mode='multiple'
+                {...selectProps}
+            >
+            </Select>
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTree/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import {TreeProps} from "antd";
+import { FieldProps } from '../types';
+
+/**
+ * 多选树
+ *
+ * 区别于下拉框，是扁平展示的树
+ * 这种需要扁平展示的树，通常都是多选。
+ *
+ */
+interface FieldRemoteTreeProps extends Omit<TreeProps, 'treeData' | 'checkedKeys' | 'onCheck' | 'multiple' | 'checkable' | 'defaultExpandAll' | 'checkStrictly'>, FieldProps<string[]> {
+    /**
+     * 请求地址
+     */
+    url: string;
+}
+
+export class FieldRemoteTree extends React.Component<FieldRemoteTreeProps, string> {
+}

package/src/framework/fields/FieldRemoteTree/index.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {Spin, Tree} from "antd";
+import {HttpUtils} from "../../utils";
+
+/**
+ * 多选树
+ *
+ * 区别于下拉框，是扁平展示的树
+ * 这种需要扁平展示的树，通常都是多选。
+ *
+ */
+export class FieldRemoteTree extends React.Component {
+    state = {
+        treeLoading: true,
+        treeData: [],
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+    loadData = async () => {
+        this.setState({treeLoading: true});
+        const {url} = this.props;
+        try {
+            const treeData = await HttpUtils.get(url);
+            this.setState({treeData});
+        } catch (e) {
+            console.log(e);
+        } finally {
+            this.setState({treeLoading: false});
+        }
+    };
+
+    render() {
+        if (this.state.treeLoading) {
+            return <Spin/>;
+        }
+        return <Tree
+            multiple
+            checkable
+            onCheck={e => this.props.onChange && this.props.onChange(e.checked)}
+            checkedKeys={this.props.value}
+            treeData={this.state.treeData}
+            defaultExpandAll
+            checkStrictly
+        >
+        </Tree>;
+    }
+}

package/src/framework/fields/FieldRemoteTreeCascader/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+/**
+ * 远程树级联选择器, 类似select，但是树级联
+ *
+ * 注意，value为非数组形式，区别于cascader组件
+ */
+interface FieldRemoteTreeCascaderProps extends FieldProps<string> {
+    /**
+     * 请求地址
+     * 要求返回数据格式为：tree
+     */
+    url: string;
+}
+
+export class FieldRemoteTreeCascader extends React.Component<FieldRemoteTreeCascaderProps, any> {
+}

package/src/framework/fields/FieldRemoteTreeCascader/index.jsx

@@ -0,0 +1,59 @@
+import {Cascader, message, Spin} from 'antd';
+import React from 'react';
+import {HttpUtils, TreeUtils} from "../../utils";
+
+/**
+ * 远程树级联选择器, 类似select，但是树级联
+ *
+ * 注意，value为非数组形式，区别于cascader组件
+ */
+export class FieldRemoteTreeCascader extends React.Component {
+    state = {
+        data: [],
+        loading: false,
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+    loadData = async () => {
+        const {url} = this.props;
+        this.setState({loading: true});
+
+        try {
+            const list = await HttpUtils.get(url);
+            this.setState({data: list});
+        } catch (e) {
+            console.log(e);
+        } finally {
+            this.setState({loading: false});
+        }
+
+    };
+
+    render() {
+        const {data} = this.state;
+        if (this.state.loading) {
+            return <Spin/>;
+        }
+        const {value, onChange, ...rest} = this.props;
+
+        let arr = [];
+        if (value != null) {
+            arr = TreeUtils.getKeyList(data, value);
+        }
+
+        return (
+            <Cascader
+                options={this.state.data}
+                onChange={arr => {
+                    onChange && onChange(arr[arr.length - 1]);
+                }}
+                value={arr}
+                fieldNames={{label: 'title', value: 'key'}}
+                {...rest}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTreeSelect/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+interface FieldRemoteTreeSelectProps extends FieldProps<string | number> {
+    /**
+     * 请求地址
+     */
+    url: string;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean;
+    
+    id?: string;
+}
+
+export class FieldRemoteTreeSelect extends React.Component<FieldRemoteTreeSelectProps, any> {
+}

package/src/framework/fields/FieldRemoteTreeSelect/index.jsx

@@ -0,0 +1,57 @@
+import {Spin, TreeSelect} from 'antd';
+import React from 'react';
+import {HttpUtils, StringUtils} from "../../utils";
+
+export class FieldRemoteTreeSelect extends React.Component {
+    static defaultProps = {
+        treeDefaultExpandAll: true,
+    };
+
+    state = {
+        data: [],
+        loading: false,
+        key: this.props.id,
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+    loadData = async () => {
+        const {url} = this.props;
+        this.setState({loading: true});
+        try {
+            const rs = await HttpUtils.get(url);
+            this.setState({data: rs});
+        } finally {
+            this.setState({loading: false});
+        }
+    };
+
+    render() {
+        const {value, onChange, treeDefaultExpandAll} = this.props;
+        const {data, loading} = this.state;
+
+        if (loading) {
+            return <Spin/>;
+        }
+
+        return (
+            <TreeSelect
+                style={{width: '100%', minWidth: 200}}
+                allowClear={true}
+                dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+                treeData={data}
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                value={value || undefined}
+                onChange={onChange}
+                filterTreeNode={(inputValue, treeNode) => {
+                    const {title} = treeNode;
+                    return StringUtils.contains(title, inputValue);
+                }}
+                treeLine={{showLeafIcon: true}}
+                treeDefaultExpandAll={treeDefaultExpandAll}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTreeSelectMultiple/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+interface FieldRemoteTreeSelectMultipleProps extends FieldProps<(string | number)[]> {
+    /**
+     * 请求地址
+     */
+    url: string;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean;
+    
+    id?: string;
+    style?: React.CSSProperties;
+}
+
+export class FieldRemoteTreeSelectMultiple extends React.Component<FieldRemoteTreeSelectMultipleProps, any> {
+}

package/src/framework/fields/FieldRemoteTreeSelectMultiple/index.jsx

@@ -0,0 +1,62 @@
+import {Spin, TreeSelect} from 'antd';
+import React from 'react';
+import {HttpUtils, StringUtils} from "../../utils";
+
+export class FieldRemoteTreeSelectMultiple extends React.Component {
+    static defaultProps = {
+        treeDefaultExpandAll: true,
+        style: {
+            width: '100%',
+            minWidth: 200,
+        },
+    };
+
+    state = {
+        data: [],
+        loading: false,
+        key: this.props.id,
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+    loadData = async () => {
+        const {url} = this.props;
+        this.setState({loading: true});
+        try {
+            const rs = await HttpUtils.get(url);
+            this.setState({data: rs});
+        } finally {
+            this.setState({loading: false});
+        }
+    };
+
+    render() {
+        const {value, onChange, style, treeDefaultExpandAll} = this.props;
+        const {data, loading} = this.state;
+
+        if (loading) {
+            return <Spin/>;
+        }
+
+        return (
+            <TreeSelect
+                style={style}
+                allowClear={true}
+                dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+                treeData={data}
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                value={value || undefined}
+                onChange={onChange}
+                multiple={true}
+                filterTreeNode={(inputValue, treeNode) => {
+                    const {title} = treeNode;
+                    return StringUtils.contains(title, inputValue);
+                }}
+                treeLine={{showLeafIcon: true}}
+                treeDefaultExpandAll={treeDefaultExpandAll}
+            />
+        );
+    }
+}