From bf491d6fe7064b365b0b81884b66c191f8014830 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Wed, 23 Jul 2025 03:29:11 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(model-pricing):?=
 =?UTF-8?q?=20extract=20`resetPricingFilters`=20utility=20and=20eliminate?=
 =?UTF-8?q?=20duplication=20(#1365)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../table/model-pricing/PricingSidebar.jsx    |  47 +++-----
 .../modal/PricingFilterModal.jsx              | 100 ++++++++++++++++--
 web/src/helpers/utils.js                      |  52 +++++++++
 3 files changed, 156 insertions(+), 43 deletions(-)

diff --git a/web/src/components/table/model-pricing/PricingSidebar.jsx b/web/src/components/table/model-pricing/PricingSidebar.jsx
index 6c13c014..8605f5c9 100644
--- a/web/src/components/table/model-pricing/PricingSidebar.jsx
+++ b/web/src/components/table/model-pricing/PricingSidebar.jsx
@@ -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">
diff --git a/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx b/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
index a9602591..483104f7 100644
--- a/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
+++ b/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
@@ -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>
   );
 };
diff --git a/web/src/helpers/utils.js b/web/src/helpers/utils.js
index 5a8aa9cd..265be6c2 100644
--- a/web/src/helpers/utils.js
+++ b/web/src/helpers/utils.js
@@ -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');
+  }
+};