# PageTitleBar 组件

## 组件说明

页面标题栏组件，用于显示页面的标题、描述信息、操作按钮和可选的展开/收起控制按钮。

## 组件位置

```
src/components/PageTitleBar/PageTitleBar.jsx
src/components/PageTitleBar/PageTitleBar.css
```

## 参数说明

| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| title | string | 是 | - | 页面标题文本 |
| badge | ReactNode | 否 | - | 标题右侧的徽章内容（如状态标签等） |
| description | string | 否 | - | 页面描述文本，显示在标题下方 |
| actions | ReactNode | 否 | - | 右侧操作按钮区域内容 |
| showToggle | boolean | 否 | false | 是否显示展开/收起按钮 |
| onToggle | function(expanded: boolean) | 否 | - | 展开/收起状态变化时的回调函数 |
| defaultExpanded | boolean | 否 | true | 默认展开状态 |

## 使用示例

### 基础用法

```jsx
import PageTitleBar from '../components/PageTitleBar/PageTitleBar'

function MyPage() {
  return (
    <div>
      <PageTitleBar
        title="用户列表"
        description="管理系统用户，包括用户信息、权限和授权管理"
      />
      {/* 页面内容 */}
    </div>
  )
}
```

### 带徽章的标题

```jsx
import { Tag } from 'antd'

<PageTitleBar
  title="主机详情"
  badge={<Tag color="green">在线</Tag>}
  description="查看主机的详细信息和运行状态"
/>
```

### 带展开/收起功能

```jsx
import { useState } from 'react'
import PageTitleBar from '../components/PageTitleBar/PageTitleBar'

function MyPage() {
  const [showStatsPanel, setShowStatsPanel] = useState(true)

  return (
    <div>
      <PageTitleBar
        title="主机列表"
        description="查看和管理所有接入的主机终端"
        showToggle={true}
        onToggle={(expanded) => setShowStatsPanel(expanded)}
      />

      {/* 可展开/收起的内容区域 */}
      {showStatsPanel && (
        <div className="stats-panel">
          {/* 统计面板内容 */}
        </div>
      )}
    </div>
  )
}
```

### 带操作按钮

```jsx
import { Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'

<PageTitleBar
  title="用户列表"
  description="管理系统用户"
  actions={
    <Button type="primary" icon={<PlusOutlined />}>
      新增用户
    </Button>
  }
/>
```

## 样式定制

组件提供以下 CSS 类名供自定义样式：

- `.page-title-bar` - 组件根容器
- `.title-bar-content` - 内容容器
- `.title-bar-left` - 左侧内容区域
- `.title-bar-right` - 右侧内容区域
- `.title-group` - 标题和徽章组合
- `.page-title` - 标题文本
- `.title-badge` - 徽章容器
- `.page-description` - 描述文本
- `.title-actions` - 操作按钮区域
- `.toggle-button` - 展开/收起按钮

## 使用场景

1. **列表页面** - 显示列表页面的标题和描述
2. **详情页面** - 显示详情页的标题和状态标签
3. **带统计面板的页面** - 配合展开/收起功能控制统计信息的显示
4. **需要快捷操作的页面** - 通过 actions 参数在标题栏添加常用操作按钮

## 注意事项

1. `title` 参数为必填项，建议简洁明了
2. 当使用 `showToggle` 时，建议同时提供 `onToggle` 回调以响应状态变化
3. `badge` 参数支持任何 React 节点，常用的如 Ant Design 的 Tag、Badge 组件
4. `actions` 区域不建议放置过多按钮，以保持界面简洁