React Pagination List Template

带高级筛选的分页列表页面模板，包含：筛选器、分页表格、新增/编辑对话框、Zustand 状态管理。

安装

npm install @your-scope/react-pagination-template

使用方法

这是一个模板资源包，不是可直接导入的组件库。使用步骤：

1. 拷贝模板文件到项目

cp -r node_modules/@your-scope/react-pagination-template/dist/* src/pages/your-page-name/

2. 按照配置指南定制

详细配置说明请查看 dist/README.md

核心步骤：

1. 重命名 Store（防止全局冲突）
2. 替换示例业务字段
3. 配置表格列和筛选器
4. 对接实际 API

包含内容

dist/
├── README.md                    # 详细配置指南
├── index.tsx                    # 页面主入口
├── index.module.less            # 页面样式
├── store.ts                     # Zustand 状态管理
└── components/                  # 子组件
    ├── PageHeader/              # 页面头部
    ├── FilterSection/           # 筛选器
    ├── TableSection/            # 表格
    ├── PaginationFooter/        # 分页器
    ├── AddModal/                # 新增对话框
    └── EditModal/               # 编辑对话框

技术栈

• React 18
• TypeScript
• Zustand（状态管理）
• Ant Design（UI 组件）
• CSS Modules + Less

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "antd": ">=5.0.0",
  "zustand": ">=4.0.0",
  "dayjs": ">=1.11.0",
  "@ant-design/icons": ">=5.0.0"
}

License

MIT