🔍 fix: select search filter

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.
This commit is contained in:
t0ng7u
2025-07-27 00:01:12 +08:00
parent bbc3ae6e7b
commit 90cf9efd6b
5 changed files with 18 additions and 14 deletions

View File

@@ -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);
};
// -------------------------------