69 lines
2.5 KiB
React
69 lines
2.5 KiB
React
|
import { useState } from 'react'
|
|||
|
|
import { UpOutlined, DownOutlined } from '@ant-design/icons'
|
|||
|
|
import './ExtendInfoPanel.css'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 扩展信息面板组件
|
|||
|
|
* @param {Object} props
|
|||
|
|
* @param {Array} props.sections - 信息区块配置数组
|
|||
|
|
* @param {string} props.sections[].key - 区块唯一键
|
|||
|
|
* @param {string} props.sections[].title - 区块标题
|
|||
|
|
* @param {ReactNode} props.sections[].icon - 标题图标
|
|||
|
|
* @param {ReactNode} props.sections[].content - 区块内容
|
|||
|
|
* @param {boolean} props.sections[].defaultCollapsed - 默认是否折叠
|
|||
|
|
* @param {boolean} props.sections[].hideTitleBar - 是否隐藏该区块的标题栏（默认 false）
|
|||
|
|
* @param {string} props.layout - 布局方式：'vertical'（垂直堆叠）| 'horizontal'（水平排列）
|
|||
|
|
* @param {string} props.className - 自定义类名
|
|||
|
|
*/
|
|||
|
|
function ExtendInfoPanel({ sections = [], layout = 'vertical', 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={`extend-info-panel extend-info-panel-${layout} ${className}`}>
|
|||
|
|
{sections.map((section) => {
|
|||
|
|
const isCollapsed = collapsedSections[section.key]
|
|||
|
|
const hideTitleBar = section.hideTitleBar === true
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={section.key} className="extend-info-section">
|
|||
|
|
{/* 区块头部 - 可配置隐藏 */}
|
|||
|
|
{!hideTitleBar && (
|
|||
|
|
<div className="extend-info-section-header" onClick={() => toggleSection(section.key)}>
|
|||
|
|
<div className="extend-info-section-title">
|
|||
|
|
{section.icon && <span className="extend-info-section-icon">{section.icon}</span>}
|
|||
|
|
<span>{section.title}</span>
|
|||
|
|
</div>
|
|||
|
|
<button className="extend-info-section-toggle" type="button">
|
|||
|
|
{isCollapsed ? <DownOutlined /> : <UpOutlined />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 区块内容 - 如果隐藏标题栏则总是显示，否则根据折叠状态 */}
|
|||
|
|
{(hideTitleBar || !isCollapsed) && (
|
|||
|
|
<div className="extend-info-section-content">{section.content}</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ExtendInfoPanel
|