500 lines
12 KiB
Markdown
500 lines
12 KiB
Markdown
# ExtendInfoPanel 组件
|
||
|
||
## 组件说明
|
||
|
||
扩展信息面板组件，用于展示多个可折叠的信息区块。支持横向和纵向两种布局模式，每个区块独立管理展开/收起状态，支持自定义图标和内容。适合在页面的扩展信息区（右侧或顶部）使用。
|
||
|
||
> **注意**：该组件由 SideInfoPanel 重命名而来，功能完全兼容。
|
||
|
||
## 组件位置
|
||
|
||
```
|
||
src/components/ExtendInfoPanel/ExtendInfoPanel.jsx
|
||
src/components/ExtendInfoPanel/ExtendInfoPanel.css
|
||
```
|
||
|
||
## 参数说明
|
||
|
||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||
|--------|------|------|--------|------|
|
||
| sections | Array<SectionConfig> | 否 | [] | 信息区块配置数组 |
|
||
| layout | string | 否 | 'vertical' | 布局方式：'vertical'（垂直堆叠）\| 'horizontal'（水平排列） |
|
||
| className | string | 否 | '' | 自定义类名 |
|
||
|
||
### SectionConfig 配置项
|
||
|
||
| 属性名 | 类型 | 必填 | 说明 |
|
||
|--------|------|------|------|
|
||
| key | string | 是 | 区块唯一标识 |
|
||
| title | string | 是 | 区块标题 |
|
||
| icon | ReactNode | 否 | 标题图标 |
|
||
| content | ReactNode | 是 | 区块内容 |
|
||
| defaultCollapsed | boolean | 否 | 是否默认折叠，默认 false |
|
||
| hideTitleBar | boolean | 否 | 是否隐藏标题栏，默认 false（隐藏后区块内容始终显示） |
|
||
|
||
## 布局模式
|
||
|
||
### 垂直布局（Vertical）
|
||
|
||
区块垂直堆叠排列，适合在右侧信息面板中使用。
|
||
|
||
```
|
||
┌────────────────┐
|
||
│ Section 1 │
|
||
├────────────────┤
|
||
│ Section 2 │
|
||
├────────────────┤
|
||
│ Section 3 │
|
||
└────────────────┘
|
||
```
|
||
|
||
### 水平布局（Horizontal）
|
||
|
||
区块水平排列，适合在顶部扩展面板中使用。
|
||
|
||
```
|
||
┌──────┬──────┬──────┐
|
||
│ Sec1 │ Sec2 │ Sec3 │
|
||
└──────┴──────┴──────┘
|
||
```
|
||
|
||
## 使用示例
|
||
|
||
### 基础用法 - 垂直布局
|
||
|
||
```jsx
|
||
import ExtendInfoPanel from '../components/ExtendInfoPanel/ExtendInfoPanel'
|
||
import { DashboardOutlined } from '@ant-design/icons'
|
||
|
||
function MyPage() {
|
||
return (
|
||
<ExtendInfoPanel
|
||
layout="vertical"
|
||
sections={[
|
||
{
|
||
key: 'overview',
|
||
title: '概览',
|
||
icon: <DashboardOutlined />,
|
||
content: <div>概览内容</div>,
|
||
},
|
||
]}
|
||
/>
|
||
)
|
||
}
|
||
```
|
||
|
||
### 水平布局 - 用于顶部扩展区（隐藏标题栏）
|
||
|
||
```jsx
|
||
<ExtendInfoPanel
|
||
layout="horizontal"
|
||
sections={[
|
||
{
|
||
key: 'stats',
|
||
title: '数据统计',
|
||
hideTitleBar: true, // 隐藏标题栏，内容始终显示
|
||
content: (
|
||
<div className="stat-cards-grid stat-cards-grid-4">
|
||
<StatCard title="总数" value={100} />
|
||
<StatCard title="在线" value={85} />
|
||
<StatCard title="离线" value={10} />
|
||
<StatCard title="错误" value={5} />
|
||
</div>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
```
|
||
|
||
### 水平布局 - 多个区块
|
||
|
||
```jsx
|
||
<ExtendInfoPanel
|
||
layout="horizontal"
|
||
sections={[
|
||
{
|
||
key: 'stats',
|
||
title: '数据统计',
|
||
content: (
|
||
<div style={{ display: 'flex', gap: '16px' }}>
|
||
<StatCard title="总数" value={100} />
|
||
<StatCard title="在线" value={85} />
|
||
</div>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
```
|
||
|
||
### 多个区块
|
||
|
||
```jsx
|
||
<ExtendInfoPanel
|
||
sections={[
|
||
{
|
||
key: 'info',
|
||
title: '基本信息',
|
||
icon: <InfoCircleOutlined />,
|
||
content: <div>基本信息内容</div>,
|
||
},
|
||
{
|
||
key: 'stats',
|
||
title: '统计数据',
|
||
icon: <BarChartOutlined />,
|
||
content: <div>统计数据内容</div>,
|
||
},
|
||
{
|
||
key: 'logs',
|
||
title: '操作日志',
|
||
icon: <FileTextOutlined />,
|
||
defaultCollapsed: true, // 默认折叠
|
||
content: <div>日志内容</div>,
|
||
},
|
||
]}
|
||
/>
|
||
```
|
||
|
||
### 配合 StatCard 使用
|
||
|
||
```jsx
|
||
import StatCard from '../components/StatCard/StatCard'
|
||
|
||
<ExtendInfoPanel
|
||
sections={[
|
||
{
|
||
key: 'overview',
|
||
title: '概览',
|
||
icon: <DashboardOutlined />,
|
||
content: (
|
||
<div style={{ display: 'grid', gap: '12px' }}>
|
||
<StatCard
|
||
key="total"
|
||
title="镜像总数"
|
||
value={32}
|
||
icon={<DatabaseOutlined />}
|
||
color="blue"
|
||
gridColumn="1 / -1"
|
||
/>
|
||
<StatCard
|
||
key="running"
|
||
title="运行中"
|
||
value={28}
|
||
color="green"
|
||
/>
|
||
<StatCard
|
||
key="stopped"
|
||
title="已停止"
|
||
value={4}
|
||
color="gray"
|
||
/>
|
||
</div>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
```
|
||
|
||
### 配合 ChartPanel 使用
|
||
|
||
```jsx
|
||
import ChartPanel from '../components/ChartPanel/ChartPanel'
|
||
|
||
<ExtendInfoPanel
|
||
sections={[
|
||
{
|
||
key: 'charts',
|
||
title: '数据可视化',
|
||
icon: <LineChartOutlined />,
|
||
content: (
|
||
<>
|
||
<ChartPanel
|
||
key="cpu"
|
||
type="line"
|
||
title="CPU使用率趋势"
|
||
data={cpuData}
|
||
height={180}
|
||
/>
|
||
<ChartPanel
|
||
key="memory"
|
||
type="line"
|
||
title="内存使用率趋势"
|
||
data={memoryData}
|
||
height={180}
|
||
/>
|
||
</>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
```
|
||
|
||
### 完整示例 - 配合 SplitLayout
|
||
|
||
#### 横向布局（右侧扩展区）
|
||
|
||
```jsx
|
||
import SplitLayout from '../components/SplitLayout/SplitLayout'
|
||
import ExtendInfoPanel from '../components/ExtendInfoPanel/ExtendInfoPanel'
|
||
|
||
<SplitLayout
|
||
direction="horizontal"
|
||
mainContent={
|
||
<>
|
||
<ListActionBar ... />
|
||
<ListTable ... />
|
||
</>
|
||
}
|
||
extendContent={
|
||
<ExtendInfoPanel
|
||
layout="vertical" // 区块垂直堆叠
|
||
sections={[
|
||
{
|
||
key: 'overview',
|
||
title: '概览',
|
||
icon: <DashboardOutlined />,
|
||
content: <StatCards />
|
||
},
|
||
{
|
||
key: 'monitor',
|
||
title: '性能监控',
|
||
icon: <LineChartOutlined />,
|
||
content: <Charts />
|
||
}
|
||
]}
|
||
/>
|
||
}
|
||
/>
|
||
```
|
||
|
||
#### 纵向布局（顶部扩展区）
|
||
|
||
```jsx
|
||
import { useState } from 'react'
|
||
import PageTitleBar from '../components/PageTitleBar/PageTitleBar'
|
||
import SplitLayout from '../components/SplitLayout/SplitLayout'
|
||
import ExtendInfoPanel from '../components/ExtendInfoPanel/ExtendInfoPanel'
|
||
|
||
function UserListPage() {
|
||
const [showStats, setShowStats] = useState(false)
|
||
|
||
return (
|
||
<>
|
||
<PageTitleBar
|
||
title="用户列表"
|
||
showToggle={true}
|
||
onToggle={setShowStats}
|
||
/>
|
||
|
||
<SplitLayout
|
||
direction="vertical"
|
||
mainContent={
|
||
<>
|
||
<ListActionBar ... />
|
||
<ListTable ... />
|
||
</>
|
||
}
|
||
extendContent={
|
||
<ExtendInfoPanel
|
||
layout="horizontal" // 区块水平排列
|
||
sections={[
|
||
{
|
||
key: 'stats',
|
||
title: '数据统计',
|
||
content: (
|
||
<div style={{ display: 'flex', gap: '16px' }}>
|
||
<StatCard title="总用户数" value={100} />
|
||
<StatCard title="启用" value={85} color="green" />
|
||
<StatCard title="停用" value={15} color="gray" />
|
||
<StatCard title="筛选结果" value={85} color="orange" />
|
||
</div>
|
||
)
|
||
}
|
||
]}
|
||
/>
|
||
}
|
||
showExtend={showStats}
|
||
/>
|
||
</>
|
||
)
|
||
}
|
||
```
|
||
|
||
## 布局结构
|
||
|
||
### DOM 结构层级
|
||
|
||
#### 垂直布局
|
||
|
||
```html
|
||
<div class="extend-info-panel extend-info-panel-vertical">
|
||
|
||
<!-- 信息区块 1 -->
|
||
<div class="extend-info-section">
|
||
<!-- 区块头部（可点击） -->
|
||
<div class="extend-info-section-header" onClick={toggleSection}>
|
||
<div class="extend-info-section-title">
|
||
<span class="extend-info-section-icon">{icon}</span>
|
||
<span>{title}</span>
|
||
</div>
|
||
<button class="extend-info-section-toggle">
|
||
{isCollapsed ? <DownOutlined /> : <UpOutlined />}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 区块内容（折叠时隐藏） -->
|
||
{!isCollapsed && (
|
||
<div class="extend-info-section-content">
|
||
{content}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<!-- 更多区块... -->
|
||
|
||
</div>
|
||
```
|
||
|
||
#### 水平布局
|
||
|
||
```html
|
||
<div class="extend-info-panel extend-info-panel-horizontal">
|
||
<div class="extend-info-section">...</div>
|
||
<div class="extend-info-section">...</div>
|
||
<div class="extend-info-section">...</div>
|
||
</div>
|
||
```
|
||
|
||
## 样式定制
|
||
|
||
组件提供以下 CSS 类名供自定义样式：
|
||
|
||
- `.extend-info-panel` - 面板容器
|
||
- `.extend-info-panel-vertical` - 垂直布局模式
|
||
- `.extend-info-panel-horizontal` - 水平布局模式
|
||
- `.extend-info-section` - 单个信息区块
|
||
- `.extend-info-section-header` - 区块头部
|
||
- `.extend-info-section-title` - 区块标题
|
||
- `.extend-info-section-icon` - 标题图标
|
||
- `.extend-info-section-toggle` - 折叠按钮
|
||
- `.extend-info-section-content` - 区块内容
|
||
|
||
### 自定义样式示例
|
||
|
||
```css
|
||
/* 修改区块间距 */
|
||
.extend-info-panel-vertical {
|
||
gap: 20px;
|
||
}
|
||
|
||
/* 自定义区块头部背景 */
|
||
.extend-info-section-header {
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
|
||
}
|
||
|
||
/* 修改水平布局的区块宽度 */
|
||
.extend-info-panel-horizontal .extend-info-section {
|
||
flex: 1;
|
||
min-width: 300px;
|
||
}
|
||
```
|
||
|
||
## 使用场景
|
||
|
||
### 1. 右侧信息面板（垂直布局）
|
||
|
||
- **系统监控面板**：展示系统状态、性能指标、告警信息
|
||
- **数据分析侧边栏**：展示统计数据、图表、筛选器
|
||
- **详情页辅助信息**：展示相关数据、操作历史、关联信息
|
||
|
||
### 2. 顶部扩展面板（水平布局）
|
||
|
||
- **统计数据面板**：展示多个统计卡片
|
||
- **快捷操作区**：展示常用操作和快捷入口
|
||
- **筛选条件区**：展示可展开的筛选条件
|
||
|
||
## 注意事项
|
||
|
||
### 1. 布局选择
|
||
|
||
```jsx
|
||
// ✅ 右侧扩展区使用垂直布局
|
||
<SplitLayout direction="horizontal">
|
||
<ExtendInfoPanel layout="vertical" />
|
||
</SplitLayout>
|
||
|
||
// ✅ 顶部扩展区使用水平布局
|
||
<SplitLayout direction="vertical">
|
||
<ExtendInfoPanel layout="horizontal" />
|
||
</SplitLayout>
|
||
|
||
// ❌ 避免：右侧扩展区使用水平布局（宽度不够）
|
||
<SplitLayout direction="horizontal">
|
||
<ExtendInfoPanel layout="horizontal" />
|
||
</SplitLayout>
|
||
```
|
||
|
||
### 2. 区块数量
|
||
|
||
- **垂直布局**：建议 2-4 个区块，过多影响用户体验
|
||
- **水平布局**：建议 1-4 个区块，根据容器宽度调整
|
||
|
||
### 3. 折叠状态
|
||
|
||
- 区块的折叠状态由组件内部管理，外部无法直接控制
|
||
- 可通过 `defaultCollapsed` 设置初始状态
|
||
- 建议将不常用的区块设为默认折叠
|
||
|
||
### 4. 内容高度
|
||
|
||
- **垂直布局**：区块内容高度不限，但建议单个区块不要过长（建议 < 500px）
|
||
- **水平布局**：建议控制区块内容高度一致，保持视觉整齐
|
||
|
||
### 5. 图标使用
|
||
|
||
- 建议为每个区块添加图标，提升视觉识别度
|
||
- 图标应与区块内容相关
|
||
- 使用 Ant Design 图标库保持风格统一
|
||
|
||
### 6. 宽度适配
|
||
|
||
- **垂直布局**：组件自适应父容器宽度，建议在 320-400px 容器中使用
|
||
- **水平布局**：组件占满父容器宽度，区块平均分配或根据内容自适应
|
||
|
||
## 迁移指南
|
||
|
||
### 从 SideInfoPanel 迁移
|
||
|
||
组件功能完全兼容，只需更改导入路径和组件名：
|
||
|
||
**旧代码**：
|
||
```jsx
|
||
import SideInfoPanel from '../components/SideInfoPanel/SideInfoPanel'
|
||
|
||
<SideInfoPanel sections={[...]} />
|
||
```
|
||
|
||
**新代码**：
|
||
```jsx
|
||
import ExtendInfoPanel from '../components/ExtendInfoPanel/ExtendInfoPanel'
|
||
|
||
<ExtendInfoPanel sections={[...]} />
|
||
```
|
||
|
||
**新增参数**：
|
||
- `layout` - 布局模式（新增），默认 'vertical'
|
||
|
||
## 配合使用的组件
|
||
|
||
- **SplitLayout** - 布局容器（必需）
|
||
- **StatCard** - 统计卡片（推荐）
|
||
- **ChartPanel** - 图表面板（推荐）
|
||
- **InfoPanel** - 信息展示面板
|
||
- **PageTitleBar** - 页面标题栏（配合纵向布局）
|
||
|
||
## 相关文档
|
||
|
||
- [主内容区布局](../layouts/content-area-layout.md) - 详细的布局使用指南
|
||
- [SplitLayout](./SplitLayout.md) - 布局容器组件
|
||
- [StatCard](./StatCard.md) - 统计卡片组件
|
||
- [ChartPanel](./ChartPanel.md) - 图表面板组件
|