59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
import { Row, Col, Space, Button } from 'antd'
|
|
import './InfoPanel.css'
|
|
|
|
/**
|
|
* 信息展示面板组件
|
|
* @param {Object} props
|
|
* @param {Object} props.data - 数据源
|
|
* @param {Array} props.fields - 字段配置数组
|
|
* @param {Array} props.actions - 操作按钮配置（可选）
|
|
* @param {Array} props.gutter - Grid间距配置
|
|
*/
|
|
function InfoPanel({ data, fields = [], actions = [], gutter = [24, 16] }) {
|
|
if (!data) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="info-panel">
|
|
<Row gutter={gutter}>
|
|
{fields.map((field) => {
|
|
const value = data[field.key]
|
|
const displayValue = field.render ? field.render(value, data) : value
|
|
|
|
return (
|
|
<Col key={field.key} span={field.span || 6}>
|
|
<div className="info-panel-item">
|
|
<div className="info-panel-label">{field.label}</div>
|
|
<div className="info-panel-value">{displayValue}</div>
|
|
</div>
|
|
</Col>
|
|
)
|
|
})}
|
|
</Row>
|
|
|
|
{/* 可选的操作按钮区 */}
|
|
{actions && actions.length > 0 && (
|
|
<div className="info-panel-actions">
|
|
<Space size="middle">
|
|
{actions.map((action) => (
|
|
<Button
|
|
key={action.key}
|
|
type={action.type || 'default'}
|
|
icon={action.icon}
|
|
disabled={action.disabled}
|
|
danger={action.danger}
|
|
onClick={action.onClick}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
))}
|
|
</Space>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default InfoPanel
|