qc-iaaSystem/src/components/Settings/index.tsx

import { FullscreenExitOutlined, FullscreenOutlined, RedoOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
import { Button, Col, Row, Space, Tooltip } from "antd";
import React, { useContext } from "react";
import { DispatchHeader } from "../TablePro";

/**
 * 头部
 * @returns 
 */
const Settings: React.FC = () => {

    /******************************/
    const { isFullscreen, setIsFullscreen, isFull, toggleFull, setVisible, czChild, leftChild, ajax } = useContext(DispatchHeader)!;
    const colData = czChild ? { span: 24 } : { flex: '1 1 150px' }
    /******************************/

    return <Col span={24}>
        <Row gutter={[0, 10]} align='bottom'>
            <Col {...colData}>
                {isFullscreen && leftChild}
            </Col>
            {czChild && <Col flex='1 1 150px'>{czChild}</Col>}
            <Col flex='0 1 150px'>
                <Space style={{ float: 'right', marginBottom: 4 }}>
                    <Button size='small' type='text' style={{ color: '#F56C6C' }} onClick={() => { setIsFullscreen(!isFullscreen) }}>
                        <Tooltip title={isFullscreen ? '隐藏搜索' : '显示搜索'}><SearchOutlined /></Tooltip>
                    </Button>
                    {ajax && <Button size='small' type='text' style={{ color: '#67C23A' }} onClick={() => { ajax.refresh() }}>
                        <Tooltip title='刷新'><RedoOutlined /></Tooltip>
                    </Button>}
                    <Button size='small' type='text' style={{ color: '#E6A23C' }} onClick={() => { setVisible(true) }}>
                        <Tooltip title='设置'><SettingOutlined /></Tooltip>
                    </Button>
                    <Button type='text' size='small' style={{ color: '#409EFF' }} onClick={toggleFull}>
                        {<Tooltip title={!isFull ? '全屏' : '退出全屏'}>{!isFull ? <FullscreenOutlined /> : <FullscreenExitOutlined />}</Tooltip>}
                    </Button>
                </Space>
            </Col>
        </Row>
    </Col>
}

export default React.memo(Settings)