继续在Behance上做练习（Day：46）

[XJQ124]

实现下拉框的效果

进度：三分之一

1、配合java后端组对骆驼进行开发内侧

2、把原先的数组增加属性，然后通过索引值去判断

    const GitDiv = () => {
        const [expand, setExpand] = useState(true)
        const toggle = (index) => {
            setExpand(prevIndex => (prevIndex === index ? true : index));
        };

        //Popover里的内容：
        const [visiblePopover, setVisiblePopover] = useState(null)
        const handlePopover = (index, visible) => {
            if (visible) {
                setVisiblePopover(index)
            } else {
                setVisiblePopover(null)
            }
        }

        const rectangles = [
            { icon: <RocketOutlined />, text: '创意领域' },
            {
                icon: <ToolOutlined />, text: '工具', content: (
                    <div style={{marginLeft:30,marginRight:30}}> 
                        <div className='rectangle-font'>
                            搜素工具
                        </div>
                        <Input placeholder="开始键入以查看列表" style={{ width: 300 }} />
                        <div className='rectangle-font'>
                            热门工具
                        </div>
                        <div className='font-padding'>
                            Adobe Photoshop
                        </div>
                        <div className='font-padding'>
                            Adobe Illustrator
                        </div>
                        <div className='font-padding'>
                            Adobe InDesign
                        </div>
                        <div className='font-padding'>
                            Adobe After Effects
                        </div>
                        <div className='font-padding'>
                            Adobe Photoshop Lightroom
                        </div>
                    </div>)
            },
            { icon: <RadarChartOutlined />, text: '颜色', content: '颜色的内容' },
            { icon: <HomeOutlined />, text: '位置', content: '位置的内容' },
            { icon: <ShopOutlined />, text: '学校', content: '学校的内容' },
            { icon: <BarChartOutlined />, text: '资源', content: '资源的内容' },
            { icon: <TeamOutlined />, text: '订阅', content: '订阅的内容' },
        ];
        return _.map(rectangles, (rectangle, index) => (
            <Popover
                key={index}
                content={rectangle.content}
                placement="bottom"
                trigger="click"
                open={visiblePopover === index}
                onOpenChange={(visible) => handlePopover(index, visible)}
            >
                <Button
                    className={`rectangle ${expand === index ? 'expanded' : ''}`}
                    onClick={() => toggle(index)}
                    onFocus={() => setExpand(index)}  // 处理焦点时的状态变化
                    key={index}
                >
                    <div style={{ marginRight: 8, marginLeft: 8 }} >{rectangle.icon}</div>
                    <div className='rectangle-text'>{rectangle.text}</div>
                    <CaretDownOutlined style={{ fontSize: 8, marginLeft: 8, marginRight: 8, transform: `rotate(${expand === index ? 0 : 180}deg)` }} />
                </Button>
            </Popover>
        ))
    }

目前下拉框的都有了，就是第二个部分哪个颜色选择器，我要想一想如何变的和范本一样