150 lines
4.2 KiB
Markdown
150 lines
4.2 KiB
Markdown
# 组件文档目录
|
|
|
|
## 概述
|
|
|
|
本目录包含 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 个核心组件文档
|