# 组件文档目录

## 概述

本目录包含 Nex Design 系统所有主要组件的详细文档，包括组件说明、参数配置、使用示例等。

## 组件列表

### 页面布局组件

1. **[PageTitleBar](./PageTitleBar.md)** - 页面标题栏组件
   - 显示页面标题、描述和操作按钮
   - 支持展开/收起功能
   - 适用于所有页面的顶部区域

### 列表相关组件

2. **[ListActionBar](./ListActionBar.md)** - 列表操作栏组件
   - 提供操作按钮、搜索、筛选功能
   - 适用于列表页面的顶部操作区

3. **[TreeFilterPanel](./TreeFilterPanel.md)** - 树形筛选面板组件
   - 树形结构的数据筛选
   - 支持搜索和多级展开
   - 配合 ListActionBar 使用

4. **[ListTable](./ListTable.md)** - 列表表格组件
   - 统一的表格样式和交互
   - 支持行选择、分页、排序
   - 适用于所有列表页面

### 详情展示组件

5. **[DetailDrawer](./DetailDrawer.md)** - 详情抽屉组件
   - 从右侧滑出的详情面板
   - 支持标签页和操作按钮
   - 固定头部，内容可滚动

6. **[InfoPanel](./InfoPanel.md)** - 信息展示面板组件
   - 网格布局展示结构化数据
   - 支持自定义字段渲染
   - 配合 DetailDrawer 使用

### 交互反馈组件

7. **[ConfirmDialog](./ConfirmDialog.md)** - 确认对话框组件
   - 提供统一的确认对话框样式
   - 支持删除、警告、通用确认等场景
   - 支持异步操作

8. **[Toast](./Toast.md)** - 通知反馈组件
   - 操作完成后的提示信息
   - 支持成功、错误、警告、信息四种类型
   - 从右上角滑出，自动消失

## 组件关系图

```
页面结构层次：

┌─────────────────────────────────────────┐
│ PageTitleBar (页面标题栏)                │
├─────────────────────────────────────────┤
│ ListActionBar (操作栏)                   │
│   ├─ 操作按钮                            │
│   ├─ 搜索框                              │
│   └─ TreeFilterPanel (筛选面板)          │
├─────────────────────────────────────────┤
│ ListTable (数据表格)                     │
│   └─ 点击行 → DetailDrawer               │
├─────────────────────────────────────────┤
│ DetailDrawer (详情抽屉)                  │
│   ├─ InfoPanel (基本信息)                │
│   └─ Tabs (关联数据标签页)               │
└─────────────────────────────────────────┘

交互反馈：
  操作 → ConfirmDialog (确认) → Toast (结果反馈)
```

## 组件组合示例

### 标准列表页面

```jsx
<PageTitleBar title="用户列表" description="..." />

<ListActionBar
  actions={[...]}
  search={{...}}
  filter={{
    content: <TreeFilterPanel {...} />
  }}
/>

<ListTable
  columns={columns}
  dataSource={data}
  onRowClick={showDetail}
/>

<DetailDrawer visible={showDrawer}>
  <InfoPanel data={selectedItem} fields={fields} />
</DetailDrawer>
```

### 删除操作流程

```jsx
// 1. 点击删除按钮
<Button onClick={() => handleDelete(record)}>删除</Button>

// 2. 显示确认对话框
ConfirmDialog.delete({
  itemName: record.name,
  onOk: async () => {
    // 3. 执行删除
    await api.delete(record.id)
    // 4. 显示结果反馈
    Toast.success('删除成功')
  }
})
```

## 使用指南

### 开始使用

1. 查看对应组件的详细文档
2. 了解组件的参数配置
3. 参考示例代码
4. 根据实际需求调整参数

### 设计原则

- **一致性** - 所有组件使用统一的设计语言
- **可复用** - 组件高度封装，易于复用
- **可配置** - 提供丰富的配置选项
- **易用性** - API 设计简洁直观

### 技术栈

- React 18
- Ant Design 5.x
- CSS Modules

## 更新记录

- 2025-11-04: 初始版本，包含 8 个核心组件文档