♻️ 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:
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user