54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
import { useState } from 'react'
|
|
import { UpOutlined, DownOutlined } from '@ant-design/icons'
|
|
import './PageTitleBar.css'
|
|
|
|
function PageTitleBar({
|
|
title,
|
|
badge,
|
|
description,
|
|
actions,
|
|
showToggle = false,
|
|
onToggle,
|
|
defaultExpanded = false,
|
|
}) {
|
|
const [expanded, setExpanded] = useState(defaultExpanded)
|
|
|
|
const handleToggle = () => {
|
|
const newExpanded = !expanded
|
|
setExpanded(newExpanded)
|
|
if (onToggle) {
|
|
onToggle(newExpanded)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="page-title-bar">
|
|
<div className="title-bar-content">
|
|
<div className="title-bar-left">
|
|
<div className="title-row">
|
|
<div className="title-group">
|
|
<h1 className="page-title">{title}</h1>
|
|
{badge && <span className="title-badge">{badge}</span>}
|
|
</div>
|
|
{description && <p className="page-description">{description}</p>}
|
|
</div>
|
|
</div>
|
|
<div className="title-bar-right">
|
|
{actions && <div className="title-actions">{actions}</div>}
|
|
{showToggle && (
|
|
<button
|
|
className="toggle-button"
|
|
onClick={handleToggle}
|
|
title={expanded ? '收起信息面板' : '展开信息面板'}
|
|
>
|
|
{expanded ? <UpOutlined /> : <DownOutlined />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PageTitleBar
|