♻️ refactor(model-pricing): extract resetPricingFilters utility and eliminate duplication (#1365)

Centralize filter-reset logic to improve maintainability and consistency.

- Add `resetPricingFilters` helper to `web/src/helpers/utils.js`, encapsulating all reset actions (search, category, currency, ratio, group, quota type, etc.).
- Update `PricingFilterModal.jsx` and `PricingSidebar.jsx` to import and use the new utility instead of keeping their own duplicate `handleResetFilters`.
- Removes repeated code, ensures future changes to reset behavior require modification in only one place, and keeps components lean.
This commit is contained in:
t0ng7u
2025-07-23 03:29:11 +08:00
parent c15e753a0a
commit bf491d6fe7
3 changed files with 156 additions and 43 deletions

View File

@@ -23,6 +23,7 @@ import PricingCategories from './filter/PricingCategories';
import PricingGroups from './filter/PricingGroups';
import PricingQuotaTypes from './filter/PricingQuotaTypes';
import PricingDisplaySettings from './filter/PricingDisplaySettings';
import { resetPricingFilters } from '../../../helpers/utils';
const PricingSidebar = ({
showWithRecharge,
@@ -41,41 +42,17 @@ const PricingSidebar = ({
...categoryProps
}) => {
// 重置所有筛选条件
const handleResetFilters = () => {
// 重置搜索
if (handleChange) {
handleChange('');
}
// 重置模型分类到默认
if (setActiveKey && categoryProps.availableCategories?.length > 0) {
setActiveKey(categoryProps.availableCategories[0]);
}
// 重置充值价格显示
if (setShowWithRecharge) {
setShowWithRecharge(false);
}
// 重置货币
if (setCurrency) {
setCurrency('USD');
}
// 重置显示倍率
setShowRatio(false);
// 重置分组筛选
if (setFilterGroup) {
setFilterGroup('all');
}
// 重置计费类型筛选
if (setFilterQuotaType) {
setFilterQuotaType('all');
}
};
const handleResetFilters = () =>
resetPricingFilters({
handleChange,
setActiveKey,
availableCategories: categoryProps.availableCategories,
setShowWithRecharge,
setCurrency,
setShowRatio,
setFilterGroup,
setFilterQuotaType,
});
return (
<div className="p-4">

View File

@@ -18,8 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
import { Modal } from '@douyinfe/semi-ui';
import PricingSidebar from '../PricingSidebar';
import { Modal, Button } from '@douyinfe/semi-ui';
import PricingCategories from '../filter/PricingCategories';
import PricingGroups from '../filter/PricingGroups';
import PricingQuotaTypes from '../filter/PricingQuotaTypes';
import PricingDisplaySettings from '../filter/PricingDisplaySettings';
import { resetPricingFilters } from '../../../../helpers/utils';
const PricingFilterModal = ({
visible,
@@ -27,20 +31,100 @@ const PricingFilterModal = ({
sidebarProps,
t
}) => {
const {
showWithRecharge,
setShowWithRecharge,
currency,
setCurrency,
handleChange,
setActiveKey,
showRatio,
setShowRatio,
filterGroup,
setFilterGroup,
filterQuotaType,
setFilterQuotaType,
...categoryProps
} = sidebarProps;
const handleResetFilters = () =>
resetPricingFilters({
handleChange,
setActiveKey,
availableCategories: categoryProps.availableCategories,
setShowWithRecharge,
setCurrency,
setShowRatio,
setFilterGroup,
setFilterQuotaType,
});
const handleConfirm = () => {
onClose();
};
const footer = (
<div className="flex justify-end">
<Button
theme="outline"
type='tertiary'
onClick={handleResetFilters}
>
{t('重置')}
</Button>
<Button
theme="solid"
type="primary"
onClick={handleConfirm}
>
{t('确定')}
</Button>
</div>
);
return (
<Modal
title={t('筛选')}
visible={visible}
onCancel={onClose}
footer={null}
footer={footer}
style={{ width: '100%', height: '100%', margin: 0 }}
bodyStyle={{
padding: 0,
height: 'calc(100vh - 110px)',
overflow: 'auto'
bodyStyle={{
padding: 0,
height: 'calc(100vh - 160px)',
overflowY: 'auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
}}
>
<PricingSidebar {...sidebarProps} />
<div className="p-2">
<PricingDisplaySettings
showWithRecharge={showWithRecharge}
setShowWithRecharge={setShowWithRecharge}
currency={currency}
setCurrency={setCurrency}
showRatio={showRatio}
setShowRatio={setShowRatio}
t={t}
/>
<PricingCategories {...categoryProps} setActiveKey={setActiveKey} t={t} />
<PricingGroups
filterGroup={filterGroup}
setFilterGroup={setFilterGroup}
usableGroup={categoryProps.usableGroup}
models={categoryProps.models}
t={t}
/>
<PricingQuotaTypes
filterQuotaType={filterQuotaType}
setFilterQuotaType={setFilterQuotaType}
models={categoryProps.models}
t={t}
/>
</div>
</Modal>
);
};

View File

@@ -616,3 +616,55 @@ export const createCardProPagination = ({
</>
);
};
// -------------------------------
// 重置模型定价筛选条件
export const resetPricingFilters = ({
handleChange,
setActiveKey,
availableCategories,
setShowWithRecharge,
setCurrency,
setShowRatio,
setFilterGroup,
setFilterQuotaType,
}) => {
// 重置搜索
if (typeof handleChange === 'function') {
handleChange('');
}
// 重置模型分类到默认
if (
typeof setActiveKey === 'function' &&
Array.isArray(availableCategories) &&
availableCategories.length > 0
) {
setActiveKey(availableCategories[0]);
}
// 重置充值价格显示
if (typeof setShowWithRecharge === 'function') {
setShowWithRecharge(false);
}
// 重置货币
if (typeof setCurrency === 'function') {
setCurrency('USD');
}
// 重置显示倍率
if (typeof setShowRatio === 'function') {
setShowRatio(false);
}
// 重置分组筛选
if (typeof setFilterGroup === 'function') {
setFilterGroup('all');
}
// 重置计费类型筛选
if (typeof setFilterQuotaType === 'function') {
setFilterQuotaType('all');
}
};