🔍 fix(pricing): synchronize search term with sidebar filters & reset behavior
* Add `searchValue` to every dependency array in `usePricingFilterCounts` to ensure group/vendor/tag counts and disabled states update dynamically while performing fuzzy search. * Refactor `PricingTopSection` search box into a controlled component: - Accept `searchValue` prop and bind it to `Input.value` - Extend memo dependencies to include `searchValue` This keeps the UI in sync with state changes triggered by `handleChange`. * Guarantee that `resetPricingFilters` clears the search field by leveraging the new controlled input. As a result, sidebar counters/disabled states now react to search input, and the “Reset” button fully restores default filters without leaving the search term visible.
This commit is contained in:
@@ -35,6 +35,7 @@ const PricingTopSection = ({
|
|||||||
models,
|
models,
|
||||||
filteredModels,
|
filteredModels,
|
||||||
loading,
|
loading,
|
||||||
|
searchValue,
|
||||||
t
|
t
|
||||||
}) => {
|
}) => {
|
||||||
const [showFilterModal, setShowFilterModal] = useState(false);
|
const [showFilterModal, setShowFilterModal] = useState(false);
|
||||||
@@ -46,6 +47,7 @@ const PricingTopSection = ({
|
|||||||
<Input
|
<Input
|
||||||
prefix={<IconSearch />}
|
prefix={<IconSearch />}
|
||||||
placeholder={t('模糊搜索模型名称')}
|
placeholder={t('模糊搜索模型名称')}
|
||||||
|
value={searchValue}
|
||||||
onCompositionStart={handleCompositionStart}
|
onCompositionStart={handleCompositionStart}
|
||||||
onCompositionEnd={handleCompositionEnd}
|
onCompositionEnd={handleCompositionEnd}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
@@ -78,7 +80,7 @@ const PricingTopSection = ({
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
), [selectedRowKeys, t, handleCompositionStart, handleCompositionEnd, handleChange, copyText, isMobile]);
|
), [selectedRowKeys, t, handleCompositionStart, handleCompositionEnd, handleChange, copyText, isMobile, searchValue]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -104,34 +104,27 @@ export const usePricingFilterCounts = ({
|
|||||||
// 生成不同视图所需的模型集合
|
// 生成不同视图所需的模型集合
|
||||||
const quotaTypeModels = useMemo(
|
const quotaTypeModels = useMemo(
|
||||||
() => allModels.filter((m) => matchesFilters(m, ['quota'])),
|
() => allModels.filter((m) => matchesFilters(m, ['quota'])),
|
||||||
[allModels, filterGroup, filterEndpointType, filterVendor, filterTag]
|
[allModels, filterGroup, filterEndpointType, filterVendor, filterTag, searchValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
const endpointTypeModels = useMemo(
|
const endpointTypeModels = useMemo(
|
||||||
() => allModels.filter((m) => matchesFilters(m, ['endpoint'])),
|
() => allModels.filter((m) => matchesFilters(m, ['endpoint'])),
|
||||||
[allModels, filterGroup, filterQuotaType, filterVendor, filterTag]
|
[allModels, filterGroup, filterQuotaType, filterVendor, filterTag, searchValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
const vendorModels = useMemo(
|
const vendorModels = useMemo(
|
||||||
() => allModels.filter((m) => matchesFilters(m, ['vendor'])),
|
() => allModels.filter((m) => matchesFilters(m, ['vendor'])),
|
||||||
[allModels, filterGroup, filterQuotaType, filterEndpointType, filterTag]
|
[allModels, filterGroup, filterQuotaType, filterEndpointType, filterTag, searchValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
const tagModels = useMemo(
|
const tagModels = useMemo(
|
||||||
() => allModels.filter((m) => matchesFilters(m, ['tag'])),
|
() => allModels.filter((m) => matchesFilters(m, ['tag'])),
|
||||||
[allModels, filterGroup, filterQuotaType, filterEndpointType, filterVendor]
|
[allModels, filterGroup, filterQuotaType, filterEndpointType, filterVendor, searchValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
const groupCountModels = useMemo(
|
const groupCountModels = useMemo(
|
||||||
() => allModels.filter((m) => matchesFilters(m, ['group'])),
|
() => allModels.filter((m) => matchesFilters(m, ['group'])),
|
||||||
[
|
[allModels, filterQuotaType, filterEndpointType, filterVendor, filterTag, searchValue]
|
||||||
allModels,
|
|
||||||
filterQuotaType,
|
|
||||||
filterEndpointType,
|
|
||||||
filterVendor,
|
|
||||||
filterTag,
|
|
||||||
searchValue,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in New Issue
Block a user