🔧 refactor(pricing-filters): extract display settings & improve mobile layout (#1365)

* **PricingDisplaySettings.jsx**
  • Extracted display settings (recharge price, currency, ratio toggle) from PricingSidebar
  • Maintains complete styling and functionality as standalone component

* **SelectableButtonGroup.jsx**
  • Added isMobile detection with conditional Col spans
  • Mobile: `span={12}` (2 buttons per row) for better touch experience
  • Desktop: preserved responsive grid `xs={24} sm={24} md={24} lg={12} xl={8}`

* **PricingSidebar.jsx**
  • Updated imports to use new PricingDisplaySettings component
  • Simplified component structure while preserving reset logic

These changes enhance code modularity and provide optimized mobile UX for filter button groups across the pricing interface.

web/src/components/table/model-pricing/PricingSidebar.jsx

@@ -18,11 +18,11 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Divider, Button, Switch, Select, Tooltip } from '@douyinfe/semi-ui';
-import { IconHelpCircle } from '@douyinfe/semi-icons';
-import PricingCategories from './sidebar/PricingCategories.jsx';
-import PricingGroups from './sidebar/PricingGroups.jsx';
-import PricingQuotaTypes from './sidebar/PricingQuotaTypes.jsx';
+import { 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';
 
 const PricingSidebar = ({
   showWithRecharge,
@@ -79,13 +79,13 @@ const PricingSidebar = ({
 
   return (
     <div className="p-4">
-      {/* 筛选标题和重置按钮 */}
       <div className="flex items-center justify-between mb-6">
         <div className="text-lg font-semibold text-gray-800">
           {t('筛选')}
         </div>
         <Button
           theme="outline"
+          type='tertiary'
           onClick={handleResetFilters}
           className="text-gray-500 hover:text-gray-700"
         >
@@ -93,54 +93,16 @@ const PricingSidebar = ({
         </Button>
       </div>
 
-      {/* 显示设置 */}
-      <div className="mb-6">
-        <Divider margin='12px' align='left'>
-          {t('显示设置')}
-        </Divider>
-        <div className="px-2">
-          <div className="flex items-center justify-between mb-3">
-            <span className="text-sm text-gray-700">{t('以充值价格显示')}</span>
-            <Switch
-              checked={showWithRecharge}
-              onChange={setShowWithRecharge}
-              size="small"
-            />
-          </div>
-          {showWithRecharge && (
-            <div className="mt-2 mb-3">
-              <div className="text-xs text-gray-500 mb-1">{t('货币单位')}</div>
-              <Select
-                value={currency}
-                onChange={setCurrency}
-                size="small"
-                className="w-full"
-              >
-                <Select.Option value="USD">USD ($)</Select.Option>
-                <Select.Option value="CNY">CNY (¥)</Select.Option>
-              </Select>
-            </div>
-          )}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-1">
-              <span className="text-sm text-gray-700">{t('显示倍率')}</span>
-              <Tooltip content={t('倍率是用于系统计算不同模型的最终价格用的，如果您不理解倍率，请忽略')}>
-                <IconHelpCircle
-                  size="small"
-                  style={{ color: 'var(--semi-color-text-2)', cursor: 'help' }}
-                />
-              </Tooltip>
-            </div>
-            <Switch
-              checked={showRatio}
-              onChange={setShowRatio}
-              size="small"
-            />
-          </div>
-        </div>
-      </div>
+      <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} />