# ProTable 组件

自定义实现的 ProTable 组件，用于替代 `@ant-design/pro-components` 的 ProTable。

## 功能特性

✅ 完整支持你当前代码中使用的所有功能：

### 核心功能
- **actionRef** - 表格操作引用，支持 `reload()` 和 `reset()` 方法
- **columns** - 列配置，支持所有你使用的属性
- **request** - 异步数据请求，自动处理分页、排序、过滤
- **rowKey** - 行唯一标识
- **pagination** - 分页配置

### 列配置 (ProColumns)
- `title` - 列标题
- `dataIndex` - 数据字段名
- `key` - 唯一标识
- `width` - 列宽
- `search` - 搜索配置
- `hideInTable` - 隐藏列
- `tooltip` - 提示信息
- `ellipsis` - 文本省略
- `valueType` - 值类型（date, dateTime, option 等）
- `valueEnum` - 枚举值（自动转换为过滤器）
- `render` - 自定义渲染函数
- `filters` - 过滤配置
- `onFilter` - 过滤函数
- `sorter` - 排序配置

### 工具栏
- `toolBarRender` - 自定义工具栏按钮
- `toolbar.menu` - 标签页切换（如 my/collaboration/community）
- `options.search` - 关键词搜索功能

## 安装使用

### 1. 复制文件
将 `ProTable.tsx` 复制到你的项目中。

### 2. 替换导入
```tsx
// 原来
import { ActionType, ProTable } from "@ant-design/pro-components";

// 现在
import ProTable, { ActionType } from './components/ProTable';
```

### 3. 使用方式
```tsx
import { useRef } from 'react';
import ProTable, { ActionType } from './components/ProTable';

const MyComponent = () => {
  const ref = useRef<ActionType>();

  return (
    <ProTable
      actionRef={ref}
      columns={[
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          width: 50,
          search: false,
        },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          ellipsis: true,
          render: (text, row, index, action) => {
            return <Button onClick={() => action.reload()}>{text}</Button>;
          },
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          filters: true,
          onFilter: true,
          valueEnum: {
            all: { text: '全部' },
            translation: { text: '翻译' },
            original: { text: '原创' },
          },
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          key: 'created_at',
          valueType: 'date',
          sorter: true,
        },
      ]}
      request={async (params, sorter, filter) => {
        // 构建 API URL
        const url = `/api/data?page=${params.current}&size=${params.pageSize}`;
        
        // 发起请求
        const res = await fetch(url);
        const json = await res.json();
        
        return {
          data: json.rows,
          total: json.count,
          success: true,
        };
      }}
      rowKey="id"
      bordered
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
      }}
      options={{
        search: true,
      }}
      toolBarRender={() => [
        <Button key="create" type="primary">新建</Button>,
      ]}
      toolbar={{
        menu: {
          activeKey: 'my',
          items: [
            { key: 'my', label: '我的' },
            { key: 'all', label: '全部' },
          ],
          onChange: (key) => {
            console.log('切换到', key);
          },
        },
      }}
    />
  );
};
```

## API 说明

### ProTable Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| columns | 列配置 | `ProColumns[]` | - |
| request | 数据请求函数 | `(params, sorter, filter) => Promise<RequestData>` | - |
| actionRef | 表格操作引用 | `React.MutableRefObject<ActionType>` | - |
| rowKey | 行唯一标识 | `string \| (record) => string` | `'id'` |
| bordered | 是否显示边框 | `boolean` | `false` |
| pagination | 分页配置 | `false \| PaginationConfig` | - |
| search | 搜索配置 | `false \| SearchConfig` | `false` |
| options | 选项配置 | `OptionsConfig` | `{}` |
| toolBarRender | 工具栏渲染 | `() => ReactNode[]` | - |
| toolbar | 工具栏配置 | `ToolbarConfig` | - |
| headerTitle | 表格标题 | `ReactNode` | - |
| params | 额外请求参数 | `Record<string, any>` | - |

### ActionType

```typescript
interface ActionType {
  reload: (resetPageIndex?: boolean) => void;  // 刷新表格
  reset: () => void;                           // 重置表格
}
```

### Request 函数参数

```typescript
async (params, sorter, filter) => {
  // params: { current: 1, pageSize: 20, keyword: '搜索词', ...自定义参数 }
  // sorter: { field_name: 'ascend' | 'descend' }
  // filter: { field_name: ['value1', 'value2'] }
  
  return {
    data: [],      // 数据列表
    total: 0,      // 总数
    success: true, // 是否成功
  };
}
```

## 与原 ProTable 的差异

### 保持一致的功能
✅ 所有你代码中使用的功能都已实现
✅ API 接口完全兼容
✅ TypeScript 类型支持

### 简化的部分
- 移除了未使用的高级功能（如拖拽排序、可编辑表格等）
- 简化了搜索表单（仅保留关键词搜索）
- 移除了列设置、密度调整等辅助功能

这些简化不影响你当前代码的运行。

## 迁移检查清单

- [ ] 复制 `ProTable.tsx` 到项目
- [ ] 更新导入语句
- [ ] 验证表格渲染正常
- [ ] 测试分页功能
- [ ] 测试搜索功能
- [ ] 测试过滤功能
- [ ] 测试排序功能
- [ ] 测试 actionRef.reload()
- [ ] 测试工具栏切换

## 注意事项

1. **依赖要求**：需要 `antd` 4.24+
2. **样式**：基于 Ant Design 原生样式，无需额外 CSS
3. **性能**：避免频繁调用 `reload()`，使用防抖优化
4. **类型安全**：使用 TypeScript 泛型确保类型安全

## 扩展

如需添加更多功能，可以在 `ProTable.tsx` 中扩展：

```tsx
// 添加批量操作
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

<Table
  rowSelection={{
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  }}
  // ...
/>

// 添加导出功能
const handleExport = () => {
  // 导出逻辑
};
```

## 许可

MIT
