59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import { useState } from 'react'
|
|
import { UpOutlined, DownOutlined } from '@ant-design/icons'
|
|
import './SideInfoPanel.css'
|
|
|
|
/**
|
|
* 侧边信息面板组件
|
|
* @param {Object} props
|
|
* @param {Array} props.sections - 信息区块配置数组
|
|
* @param {string} props.className - 自定义类名
|
|
*/
|
|
function SideInfoPanel({ sections = [], className = '' }) {
|
|
const [collapsedSections, setCollapsedSections] = useState(() => {
|
|
const initial = {}
|
|
sections.forEach((section) => {
|
|
if (section.defaultCollapsed) {
|
|
initial[section.key] = true
|
|
}
|
|
})
|
|
return initial
|
|
})
|
|
|
|
const toggleSection = (key) => {
|
|
setCollapsedSections((prev) => ({
|
|
...prev,
|
|
[key]: !prev[key],
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<div className={`side-info-panel ${className}`}>
|
|
{sections.map((section) => {
|
|
const isCollapsed = collapsedSections[section.key]
|
|
|
|
return (
|
|
<div key={section.key} className="side-info-section">
|
|
{/* 区块头部 */}
|
|
<div className="side-info-section-header" onClick={() => toggleSection(section.key)}>
|
|
<div className="side-info-section-title">
|
|
{section.icon && <span className="side-info-section-icon">{section.icon}</span>}
|
|
<span>{section.title}</span>
|
|
</div>
|
|
<button className="side-info-section-toggle" type="button">
|
|
{isCollapsed ? <DownOutlined /> : <UpOutlined />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* 区块内容 */}
|
|
{!isCollapsed && (
|
|
<div className="side-info-section-content">{section.content}</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SideInfoPanel
|