# 前端表格和列表功能增强

本次更新为whistle mock插件的前端界面添加了表格排序、分页大小选择和前端缓存功能。

## 🆕 新增功能

### 1. 接口管理页面 (InterfaceManagement.js)

#### 表格列排序功能
- **支持的排序列**：
  - 状态 (active) - 启用优先/禁用优先
  - 名称 (name) - 中文字母排序
  - URL匹配规则 (urlPattern) - 字母排序
  - 处理方式 (proxyType) - 字母排序
  - 状态码 (httpStatus) - 数值排序
  - 内容类型 (contentType) - 字母排序
  - 目标URL (targetUrl) - 字母排序
  - 自定义头 (customHeaders) - 按数量排序
  - 请求方法 (httpMethod) - 字母排序

- **排序特性**：
  - 支持升序/降序两个方向
  - 点击列标题进行排序
  - 排序状态有视觉指示器
  - 智能处理空值和特殊字符

#### 分页功能增强
- **可选择每页显示数量**：10、20、50、100 条
- **分页信息显示**：显示当前页范围和总数
- **快速跳转**：支持直接跳转到指定页面
- **智能分页**：切换功能模块时自动重置到第一页

#### 前端缓存
- **缓存内容**：
  - 当前排序字段和顺序
  - 每页显示数量
  - 当前页码
- **缓存键**：`interface-table-config`
- **自动恢复**：页面刷新后自动恢复上次的表格状态

#### 状态栏显示
- 显示当前功能模块名称
- 显示接口总数和分页信息
- 显示当前排序状态

### 2. 功能模块管理页面 (MockData.js)

#### 卡片列表排序功能
- **支持的排序字段**：
  - 名称 (name) - 中文字母排序
  - 创建时间 (createdAt) - 时间排序
  - 接口数量 (interfaceCount) - 数值排序
  - 状态 (active) - 启用/禁用排序

- **排序控制器**：
  - 下拉选择排序字段
  - 下拉选择排序方向（升序/降序）
  - 实时排序，无需刷新页面

#### 分页功能
- **可选择每页显示数量**：8、12、16、24 个卡片
- **分页组件**：
  - 页码导航
  - 快速跳转
  - 每页大小选择器
  - 总数统计显示

#### 前端缓存
- **缓存内容**：
  - 排序字段和顺序
  - 每页显示数量
  - 当前页码
- **缓存键**：`feature-list-config`
- **状态持久化**：所有设置在页面刷新后保持不变

#### 控制栏设计
- **排序区域**：左侧显示排序选项
- **分页区域**：右侧显示分页大小和总数
- **响应式设计**：在小屏幕上自动换行

## 🛠️ 技术实现

### 缓存机制
```javascript
// 读取缓存配置
const [tableConfig, setTableConfig] = useState(() => {
  const cached = localStorage.getItem('interface-table-config');
  return cached ? JSON.parse(cached) : defaultConfig;
});

// 保存配置到缓存
const saveTableConfig = (config) => {
  const newConfig = { ...tableConfig, ...config };
  setTableConfig(newConfig);
  localStorage.setItem('interface-table-config', JSON.stringify(newConfig));
};
```

### 排序算法
- **字符串排序**：使用 `localeCompare` 支持中文排序
- **数值排序**：使用数值比较，处理空值情况
- **时间排序**：转换为时间戳进行比较
- **布尔值排序**：转换为数值进行比较

### 分页逻辑
```javascript
// 获取分页数据
const getPaginatedData = () => {
  const sortedData = getSortedData();
  const startIndex = (current - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return sortedData.slice(startIndex, endIndex);
};
```

## 🎯 用户体验优化

### 视觉反馈
- 排序状态有明确的图标指示
- 分页信息清晰显示当前状态
- 控制栏使用浅色背景区分

### 操作便捷性
- 点击列标题即可排序
- 分页大小选择器支持快速切换
- 状态信息实时更新

### 性能优化
- localStorage缓存减少重复配置
- 智能的默认值设置
- 分页减少DOM渲染压力

## 📋 使用说明

### 接口管理页面
1. **排序**：点击表格列标题进行排序，再次点击切换排序方向
2. **分页**：使用表格底部的分页控件调整每页显示数量和切换页面
3. **状态查看**：在列表上方的状态栏查看当前排序和分页信息

### 功能模块管理页面  
1. **排序**：使用控制栏左侧的下拉菜单选择排序字段和方向
2. **分页**：使用控制栏右侧的下拉菜单调整每页显示数量
3. **导航**：使用底部分页组件进行页面切换

## 🔧 配置说明

### 默认配置
- **接口表格**：每页10条，按名称升序排序
- **功能模块**：每页12个，按名称升序排序
- **缓存时效**：永久保存直到手动清除

### 自定义选项
- 分页大小可根据需要调整
- 排序字段可扩展
- 缓存策略可配置

这些功能大大提升了用户在管理大量接口和功能模块时的效率，提供了更好的用户体验。