unis_sip/oms_web/docs/components

组件文档目录

概述

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

组件列表

页面布局组件

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

列表相关组件

2. ListActionBar - 列表操作栏组件

   • 提供操作按钮、搜索、筛选功能
   • 适用于列表页面的顶部操作区

3. TreeFilterPanel - 树形筛选面板组件

   • 树形结构的数据筛选
   • 支持搜索和多级展开
   • 配合 ListActionBar 使用

4. ListTable - 列表表格组件

   • 统一的表格样式和交互
   • 支持行选择、分页、排序
   • 适用于所有列表页面

详情展示组件

5. DetailDrawer - 详情抽屉组件

   • 从右侧滑出的详情面板
   • 支持标签页和操作按钮
   • 固定头部，内容可滚动

6. InfoPanel - 信息展示面板组件

   • 网格布局展示结构化数据
   • 支持自定义字段渲染
   • 配合 DetailDrawer 使用

交互反馈组件

7. ConfirmDialog - 确认对话框组件

   • 提供统一的确认对话框样式
   • 支持删除、警告、通用确认等场景
   • 支持异步操作

8. Toast - 通知反馈组件

   • 操作完成后的提示信息
   • 支持成功、错误、警告、信息四种类型
   • 从右上角滑出，自动消失

组件关系图

页面结构层次：

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

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

组件组合示例

标准列表页面

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

删除操作流程

// 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 个核心组件文档