通用列表页

    标准的数据列表页面模板，适用于各类管理后台的数据展示场景。

    预览

    枚举定义

    展开查看
    src/constants/contract.tsx
    import React from 'react';
import { Badge } from 'antd';

/** 状态枚举 */
export enum ContractStatusEnum {
  /** 待处理 */
  PENDING = 'PENDING',
  /** 进行中 */
  PROCESSING = 'PROCESSING',
  /** 已完成 */
  COMPLETED = 'COMPLETED',
}

/** 状态映射 */
export const ContractStatusMapping: Record<ContractStatusEnum, string> = {
  [ContractStatusEnum.PENDING]: '待处理',
  [ContractStatusEnum.PROCESSING]: '进行中',
  [ContractStatusEnum.COMPLETED]: '已完成',
};

/** 状态Badge映射 */
export const ContractStatusBadge: Record<ContractStatusEnum, React.ReactNode> = {
  [ContractStatusEnum.PENDING]: <Badge status="warning" text={ContractStatusMapping.PENDING} />,
  [ContractStatusEnum.PROCESSING]: <Badge status="processing" text={ContractStatusMapping.PROCESSING} />,
  [ContractStatusEnum.COMPLETED]: <Badge status="success" text={ContractStatusMapping.COMPLETED} />,
};

/** 操作按钮枚举 */
export enum ActionButtonEnum {
  /** 查看详情 */
  VIEW = 'VIEW',
  /** 编辑 */
  EDIT = 'EDIT',
}

/** 操作按钮映射 */
export const ActionButtonMapping: Record<ActionButtonEnum, string> = {
  [ActionButtonEnum.VIEW]: '查看',
  [ActionButtonEnum.EDIT]: '编辑',
};

    依赖组件

    组件用途
    PageView页面布局容器
    SearchForm搜索表单组件
    EasyButton按钮组件
    EasyText文本组件（用于省略显示）
    MultiButtonAction操作按钮组
    useAntdTable分页表格 Hook
    buildPagination分页配置构建

    功能特性

    搜索表单

    支持多种筛选控件：

    • Select - 单选/多选下拉框（状态、类型、区域）
    • Cascader - 级联选择器（城市）
    • 支持搜索、清空、最大标签显示等常用功能

    数据表格

    • 固定列（编号、操作列固定左侧）
    • 宽度自适应（scroll: x: 'max-content'）
    • 自定义渲染（状态 Badge、文字省略）

    分页

    • 使用 useAntdTable 实现
    • 默认每页 10 条
    • 与搜索表单联动

    操作列

    • 动态操作按钮（查看、编辑）
    • 使用 MultiButtonAction 组件

    使用说明

    1. 修改字段 - 根据实际业务调整 DataItem 接口和列配置
    2. 替换 Mock - 将 generateMockData 替换为真实 API 调用
    3. 完善操作 - 在 handleAction 中实现具体业务逻辑
    4. 抽取枚举 - 将业务枚举抽取到 src/constants/ 目录下