whistle.mock-plugins

# 前端表格和列表功能增强本次更新为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个，按名称升序排序 - **缓存时效**：永久保存直到手动清除 ### 自定义选项 - 分页大小可根据需要调整 - 排序字段可扩展 - 缓存策略可配置这些功能大大提升了用户在管理大量接口和功能模块时的效率，提供了更好的用户体验。