✨ feat: enhance SelectableButtonGroup with checkbox support and refactor pricing display settings (#1365)

- Add withCheckbox prop to SelectableButtonGroup component for checkbox-prefixed buttons
- Support both single value and array activeValue for multi-selection scenarios
- Refactor PricingDisplaySettings to use consistent SelectableButtonGroup styling
- Replace Switch components with checkbox-enabled SelectableButtonGroup
- Replace Select dropdown with SelectableButtonGroup for currency selection
- Maintain unified UI/UX across all pricing filter components
- Add proper JSDoc documentation for new withCheckbox functionality

This improves visual consistency and provides a more cohesive user experience
in the model pricing filter interface.

web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx

@@ -18,7 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Divider, Switch, Select, Tooltip } from '@douyinfe/semi-ui';
+import { Tooltip } from '@douyinfe/semi-ui';
+import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
 import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 const PricingDisplaySettings = ({
@@ -30,51 +31,69 @@ const PricingDisplaySettings = ({
   setShowRatio,
   t
 }) => {
-  return (
-    <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}
+  const items = [
+    {
+      value: 'recharge',
+      label: t('以充值价格显示')
+    },
+    {
+      value: 'ratio',
+      label: (
+        <span className="flex items-center gap-1">
+          {t('显示倍率')}
+          <Tooltip content={t('倍率是用于系统计算不同模型的最终价格用的，如果您不理解倍率，请忽略')}>
+            <IconHelpCircle
               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>
+              style={{ color: 'var(--semi-color-text-2)', cursor: 'help' }}
+            />
+          </Tooltip>
+        </span>
+      ),
+    }
+  ];
+
+  const currencyItems = [
+    { value: 'USD', label: 'USD ($)' },
+    { value: 'CNY', label: 'CNY (¥)' }
+  ];
+
+  const handleChange = (value) => {
+    if (value === 'recharge') {
+      setShowWithRecharge(!showWithRecharge);
+    } else if (value === 'ratio') {
+      setShowRatio(!showRatio);
+    }
+  };
+
+  const getActiveValues = () => {
+    const activeValues = [];
+    if (showWithRecharge) activeValues.push('recharge');
+    if (showRatio) activeValues.push('ratio');
+    return activeValues;
+  };
+
+  return (
+    <div>
+      <SelectableButtonGroup
+        title={t('显示设置')}
+        items={items}
+        activeValue={getActiveValues()}
+        onChange={handleChange}
+        withCheckbox
+        collapsible={false}
+        t={t}
+      />
+
+      {showWithRecharge && (
+        <SelectableButtonGroup
+          title={t('货币单位')}
+          items={currencyItems}
+          activeValue={currency}
+          onChange={setCurrency}
+          collapsible={false}
+          t={t}
+        />
+      )}
     </div>
   );
 };