From c5d97597c408ec72482792e1369dff41bf570371 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 27 Jul 2025 00:01:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20fix:=20select=20search=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
• Introduced a unified `selectFilter` helper that matches both `option.value` and `option.label`, ensuring all `<Select>` components support intuitive search (fixes channel “type” dropdown not filtering).
• Replaced all usages of the old `modelSelectFilter` with `selectFilter` in:
  • `EditChannelModal.jsx`
  • `SettingsPanel.js`
  • `EditTokenModal.jsx`
  • `EditTagModal.jsx`
• Removed the deprecated `modelSelectFilter` export from `utils.js` (no backward-compat alias).
• Updated documentation comments accordingly.

Why
The old filter only inspected `option.value`, causing searches to fail when `label` carried the meaningful text (e.g., numeric IDs for channel types). The new helper searches both fields, covering all scenarios and unifying the API across the codebase.

Notes
No functional regressions expected; all components have been migrated.
---
 web/src/components/playground/SettingsPanel.js     |  4 ++--
 .../table/channels/modals/EditChannelModal.jsx     |  6 +++---
 .../table/channels/modals/EditTagModal.jsx         |  4 ++--
 .../table/tokens/modals/EditTokenModal.jsx         |  4 ++--
 web/src/helpers/utils.js                           | 14 +++++++++-----
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/src/components/playground/SettingsPanel.js b/web/src/components/playground/SettingsPanel.js
index fa65b363..4d8ba66b 100644
--- a/web/src/components/playground/SettingsPanel.js
+++ b/web/src/components/playground/SettingsPanel.js
@@ -33,7 +33,7 @@ import {
   Settings,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { renderGroupOption, modelSelectFilter } from '../../helpers';
+import { renderGroupOption, selectFilter } from '../../helpers';
 import ParameterControl from './ParameterControl';
 import ImageUrlInput from './ImageUrlInput';
 import ConfigManager from './ConfigManager';
@@ -173,7 +173,7 @@ const SettingsPanel = ({
             name='model'
             required
             selection
-            filter={modelSelectFilter}
+            filter={selectFilter}
             autoClearSearchValue={false}
             onChange={(value) => onInputChange('model', value)}
             value={inputs.model}
diff --git a/web/src/components/table/channels/modals/EditChannelModal.jsx b/web/src/components/table/channels/modals/EditChannelModal.jsx
index 248307c4..a62ec286 100644
--- a/web/src/components/table/channels/modals/EditChannelModal.jsx
+++ b/web/src/components/table/channels/modals/EditChannelModal.jsx
@@ -46,7 +46,7 @@ import {
   Col,
   Highlight,
 } from '@douyinfe/semi-ui';
-import { getChannelModels, copy, getChannelIcon, getModelCategories, modelSelectFilter } from '../../../../helpers';
+import { getChannelModels, copy, getChannelIcon, getModelCategories, selectFilter } from '../../../../helpers';
 import {
   IconSave,
   IconClose,
@@ -979,7 +979,7 @@ const EditChannelModal = (props) => {
                     rules={[{ required: true, message: t('请选择渠道类型') }]}
                     optionList={channelOptionList}
                     style={{ width: '100%' }}
-                    filter={modelSelectFilter}
+                    filter={selectFilter}
                     autoClearSearchValue={false}
                     searchPosition='dropdown'
                     onSearch={(value) => setChannelSearchValue(value)}
@@ -1380,7 +1380,7 @@ const EditChannelModal = (props) => {
                     placeholder={t('请选择该渠道所支持的模型')}
                     rules={[{ required: true, message: t('请选择模型') }]}
                     multiple
-                    filter={modelSelectFilter}
+                    filter={selectFilter}
                     autoClearSearchValue={false}
                     searchPosition='dropdown'
                     optionList={modelOptions}
diff --git a/web/src/components/table/channels/modals/EditTagModal.jsx b/web/src/components/table/channels/modals/EditTagModal.jsx
index 5aadb95e..bbe99aff 100644
--- a/web/src/components/table/channels/modals/EditTagModal.jsx
+++ b/web/src/components/table/channels/modals/EditTagModal.jsx
@@ -25,7 +25,7 @@ import {
   showSuccess,
   showWarning,
   verifyJSON,
-  modelSelectFilter,
+  selectFilter,
 } from '../../../../helpers';
 import {
   SideSheet,
@@ -395,7 +395,7 @@ const EditTagModal = (props) => {
                     label={t('模型')}
                     placeholder={t('请选择该渠道所支持的模型，留空则不更改')}
                     multiple
-                    filter={modelSelectFilter}
+                    filter={selectFilter}
                     autoClearSearchValue={false}
                     searchPosition='dropdown'
                     optionList={modelOptions}
diff --git a/web/src/components/table/tokens/modals/EditTokenModal.jsx b/web/src/components/table/tokens/modals/EditTokenModal.jsx
index d26701f4..e9760edf 100644
--- a/web/src/components/table/tokens/modals/EditTokenModal.jsx
+++ b/web/src/components/table/tokens/modals/EditTokenModal.jsx
@@ -26,7 +26,7 @@ import {
   renderGroupOption,
   renderQuotaWithPrompt,
   getModelCategories,
-  modelSelectFilter,
+  selectFilter,
 } from '../../../../helpers';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile.js';
 import {
@@ -514,7 +514,7 @@ const EditTokenModal = (props) => {
                       multiple
                       optionList={models}
                       extraText={t('非必要，不建议启用模型限制')}
-                      filter={modelSelectFilter}
+                      filter={selectFilter}
                       autoClearSearchValue={false}
                       searchPosition='dropdown'
                       showClear
diff --git a/web/src/helpers/utils.js b/web/src/helpers/utils.js
index 5a8aa9cd..96a8edad 100644
--- a/web/src/helpers/utils.js
+++ b/web/src/helpers/utils.js
@@ -560,12 +560,16 @@ export function setTableCompactMode(compact, tableKey = 'global') {
 
 // -------------------------------
 // Select 组件统一过滤逻辑
-// 解决 label 为 ReactNode（带图标等）时无法用内置 filter 搜索的问题。
-// 使用方式： <Select filter={modelSelectFilter} ... />
-export const modelSelectFilter = (input, option) => {
+// 使用方式： <Select filter={selectFilter} ... />
+// 统一的 Select 搜索过滤逻辑 -- 支持同时匹配 option.value 与 option.label
+export const selectFilter = (input, option) => {
   if (!input) return true;
-  const val = (option?.value || '').toString().toLowerCase();
-  return val.includes(input.trim().toLowerCase());
+
+  const keyword = input.trim().toLowerCase();
+  const valueText = (option?.value ?? '').toString().toLowerCase();
+  const labelText = (option?.label ?? '').toString().toLowerCase();
+
+  return valueText.includes(keyword) || labelText.includes(keyword);
 };
 
 // -------------------------------