# 组件库总览

本文档是 el-plus 组件库的总入口，包含所有可用的页面类型和组件概览。

## 页面类型

本组件库支持两种页面类型，可自由组合组件实现业务需求：

| 页面类型 | 说明 | 文档 | 核心组件 |
|---------|------|------|---------|
| **列表页** | 包含搜索表单、数据表格、操作按钮等 | [pages/list.md](./pages/list.md) | EpSearchListPage |
| **详情页** | 包含表单、明细表格、附件等 | [pages/detail.md](./pages/detail.md) | EpForm |

## 组件分类

### 页面容器组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpSearchListPage** | 列表页容器，集成搜索表单和数据表格 | [search-list-page.md](./components/search-list-page.md) |
| **EpForm** | 表单容器，支持栅格布局和组件自由组合 | [form.md](./components/form.md) |

### 布局组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpHeader** | 顶部操作栏，用于放置页面级操作按钮 | [header.md](./components/header.md) |
| **EpTitle** | 标题分组，用于表单内容分组展示 | [title.md](./components/title.md) |

### 弹窗组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpDialog** | 对话框容器 | [dialog.md](./components/dialog.md) |
| **useFormDialog** | 表单对话框 Hook，快速实现表单弹窗 | [use-form-dialog.md](./components/use-form-dialog.md) |
| **useConfirmDialog** | 确认对话框 Hook，用于二次确认操作 | [use-confirm-dialog.md](./components/use-confirm-dialog.md) |
| **useChooseDialog** | 选择对话框 Hook，用于弹窗选择数据 | [use-choose-dialog.md](./components/use-choose-dialog.md) |

### 表单组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpInput** | 输入框 | [input.md](./components/input.md) |
| **EpSelect** | 下拉选择框 | [select.md](./components/select.md) |
| **EpDatePickerRange** | 日期范围选择 | [date-picker-range.md](./components/date-picker-range.md) |

### 数据展示组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpTable** | 数据表格 | [table.md](./components/table.md) |
| **EpCustomColumn** | 自定义列配置，用于表格列的个性化设置 | [custom-column.md](./components/custom-column.md) |
| **EpLink** | 链接，用于表格内链接跳转 | [link.md](./components/link.md) |
| **EpFooterInfo** | 底部信息展示 | [footer-info.md](./components/footer-info.md) |

### 操作组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpButtons** | 按钮组，支持配置多个操作按钮 | [buttons.md](./components/buttons.md) |

### 其他组件

| 组件 | 说明 | 文档 |
|------|------|------|
| **EpAttachment** | 附件管理，支持上传、预览、下载 | [attachment.md](./components/attachment.md) |

### Hooks 工具

| Hook | 说明 | 文档 |
|------|------|------|
| **useNavigation** | 导航工具，提供路由跳转、标签页管理、模式控制 | [use-navigation.md](./hooks/use-navigation.md) |
| **useUtils** | 工具函数集合，包含时间处理、文件操作、Cookie管理 | [use-utils.md](./hooks/use-utils.md) |

## 组件组合示例

所有组件都可以在 EpForm 中自由组合：

```typescript
const formItemList = [
  { col: 24, type: 'EpHeader', props: { /* ... */ } },
  { col: 24, type: 'EpTitle', props: { title: '基本信息' } },
  { type: 'EpInput', props: { /* ... */ } },
  { type: 'EpSelect', props: { /* ... */ } },
  { col: 24, type: 'EpTable', props: { /* ... */ } },
]
```

## 路由配置

页面生成后需配置路由，参考：[pages/router.md](./pages/router.md)

## 快速开始

根据你的需求选择：

1. **生成列表页** → 阅读 [pages/list.md](./pages/list.md)
2. **生成详情页** → 阅读 [pages/detail.md](./pages/detail.md)
3. **了解某个组件** → 查看上方对应组件文档