nex_design/docs/components/ExtendInfoPanel.md

# 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) - 图表面板组件