mula
/
nex_design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
nex_design/docs/components/ExtendInfoPanel.md

12 KiB
Raw Blame History

ExtendInfoPanel 组件

组件说明

扩展信息面板组件，用于展示多个可折叠的信息区块。支持横向和纵向两种布局模式，每个区块独立管理展开/收起状态，支持自定义图标和内容。适合在页面的扩展信息区（右侧或顶部）使用。

注意：该组件由 SideInfoPanel 重命名而来，功能完全兼容。

组件位置

src/components/ExtendInfoPanel/ExtendInfoPanel.jsx
src/components/ExtendInfoPanel/ExtendInfoPanel.css

参数说明

参数名 类型 必填 默认值 说明
sections Array 否 [] 信息区块配置数组
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 │
└──────┴──────┴──────┘

使用示例

基础用法 - 垂直布局

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>,
        },
      ]}
    />
  )
}

水平布局 - 用于顶部扩展区（隐藏标题栏）

<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>
      ),
    },
  ]}
/>

水平布局 - 多个区块

<ExtendInfoPanel
  layout="horizontal"
  sections={[
    {
      key: 'stats',
      title: '数据统计',
      content: (
        <div style={{ display: 'flex', gap: '16px' }}>
          <StatCard title="总数" value={100} />
          <StatCard title="在线" value={85} />
        </div>
      ),
    },
  ]}
/>

多个区块

<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 使用

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 使用

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

横向布局（右侧扩展区）

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 />
        }
      ]}
    />
  }
/>

纵向布局（顶部扩展区）

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 结构层级

垂直布局

<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>

水平布局

<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 - 区块内容

自定义样式示例

/* 修改区块间距 */
.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. 布局选择

// ✅ 右侧扩展区使用垂直布局
<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 迁移

组件功能完全兼容，只需更改导入路径和组件名：

旧代码：

import SideInfoPanel from '../components/SideInfoPanel/SideInfoPanel'

<SideInfoPanel sections={[...]} />

新代码：

import ExtendInfoPanel from '../components/ExtendInfoPanel/ExtendInfoPanel'

<ExtendInfoPanel sections={[...]} />

新增参数：

  • layout - 布局模式（新增），默认 'vertical'

配合使用的组件

  • SplitLayout - 布局容器（必需）
  • StatCard - 统计卡片（推荐）
  • ChartPanel - 图表面板（推荐）
  • InfoPanel - 信息展示面板
  • PageTitleBar - 页面标题栏（配合纵向布局）

相关文档