One-API 项目中的模型筛选功能优化实践

背景介绍

One-API 是一个开源的 API 管理系统，它允许用户通过统一的接口管理多个不同供应商的 AI 模型服务。在实际使用中，随着接入的模型数量增多，用户需要一个更高效的方式来查找和管理可用模型。

问题分析

在 One-API 的"可用模型"页面中，原始设计虽然提供了完整的模型列表展示，但随着模型数量的增加，用户面临着以下挑战：

1. 模型列表缺乏有效的分类筛选机制
2. 查找特定供应商的模型需要多次操作
3. 界面交互不够直观高效

解决方案

针对上述问题，开发团队提出了两种不同的优化方案：

官方解决方案

One-API 官方在最新版本中已经实现了供应商筛选功能，该功能集成在数据表格的工具栏筛选器中。用户可以通过以下步骤使用：

1. 点击工具栏中的"筛选"按钮
2. 在供应商字段中选择需要的供应商
3. 系统会自动过滤显示对应供应商的模型

这种方案保持了界面的一致性，利用了 MUI DataGrid 组件的内置功能，实现起来较为简洁。

社区贡献方案

一位社区开发者提出了自定义的筛选方案，主要特点包括：

1. 在工具栏直接添加供应商下拉选择框
2. 支持一键切换不同供应商的模型视图
3. 保留了原有的搜索和筛选功能
4. 界面交互更加直观

该方案通过 React 的 useState 和 useMemo 等钩子实现了高效的筛选逻辑，核心代码如下：

const handleSupplierChange = (event) => {
  setSelectedSupplier(event.target.value);
};

const filteredRows = useMemo(() => {
  if (!selectedSupplier) return rows;
  return rows.filter(row => row.channel_type === parseInt(selectedSupplier));
}, [rows, selectedSupplier]);

技术实现细节

两种方案都基于以下技术栈实现：

1. 前端框架：React
2. UI组件库：Material-UI (MUI)
3. 表格组件：MUI DataGrid
4. 状态管理：React Hooks

关键实现点包括：

1. 数据获取：通过 API 获取模型列表、价格信息和供应商数据
2. 状态管理：使用 useState 管理筛选状态，useMemo 优化筛选性能
3. UI集成：自定义 DataGrid 的工具栏组件，保持界面风格一致

方案对比

特性	官方方案	社区方案
交互步骤	需要打开筛选面板	直接下拉选择
界面占用	节省空间	需要额外工具栏空间
实现复杂度	较低	中等
灵活性	支持多条件组合筛选	专注于供应商筛选

最佳实践建议

对于不同场景下的实现选择：

1. 简单项目：推荐使用官方方案，维护成本低
2. 定制化需求强的项目：可以考虑社区方案，提供更直观的交互
3. 大量模型的场景：建议结合两种方案，提供多种筛选途径

总结

One-API 的模型筛选功能优化展示了开源项目中常见的功能演进过程。通过官方和社区两种不同的实现方案，用户可以根据自身需求选择最适合的交互方式。这种功能的优化不仅提升了用户体验，也体现了开源项目通过社区协作不断完善的特点。

对于开发者而言，理解这两种实现方案的差异和适用场景，有助于在实际项目中做出更合理的技术选型。同时，这种功能优化思路也可以应用于其他需要数据筛选和展示的管理系统开发中。