💱 feat(settings): introduce site-wide quota display type (USD/CNY/TOKENS/CUSTOM)

Replace the legacy boolean “DisplayInCurrencyEnabled” with an injected, type-safe configuration `general_setting.quota_display_type`, and wire it through the backend and frontend. Backend - Add `QuotaDisplayType` to `operation_setting.GeneralSetting` with injected registration via `config.GlobalConfig.Register("general_setting", ...)`. Helpers: `IsCurrencyDisplay()`, `IsCNYDisplay()`, `GetQuotaDisplayType()`. - Expose `quota_display_type` in `/api/status` and keep legacy `display_in_currency` for backward compatibility. - Logger: update `LogQuota` and `FormatQuota` to support USD/CNY/TOKENS. When CNY is selected, convert using `operation_setting.USDExchangeRate`. - Controllers: - `billing`: compute subscription/usage amounts based on the selected type (USD: divide by `QuotaPerUnit`; CNY: USD→CNY; TOKENS: keep raw tokens). - `topup` / `topup_stripe`: treat inputs as “amount” for USD/CNY and as token-count for TOKENS; adjust min topup and pay money accordingly. - `misc`: include `quota_display_type` in status payload. - Compatibility: in `model/option.UpdateOption`, map updates to `DisplayInCurrencyEnabled` → `general_setting.quota_display_type` (true→USD, false→TOKENS). Keep exporting the legacy key in `OptionMap`. Frontend - Settings: replace the “display in currency” switch with a Select (`general_setting.quota_display_type`) offering USD / CNY / Tokens. Provide fallback mapping from legacy `DisplayInCurrencyEnabled`. - Persist `quota_display_type` to localStorage (keep `display_in_currency` for legacy components). - Rendering helpers: base all quota/price rendering on `quota_display_type`; use `usd_exchange_rate` for CNY symbol/values. - Pricing page: default view currency follows site display type (USD/CNY), while TOKENS mode still allows per-view currency toggling when needed. Notes - No database migrations required. - Legacy clients remain functional via compatibility fields.
2025-09-29 23:23:31 +08:00
parent 9f989fc7ef
commit 39a868faea
46 changed files with 1268 additions and 601 deletions
--- a/web/src/components/common/modals/TwoFactorAuthModal.jsx
+++ b/web/src/components/common/modals/TwoFactorAuthModal.jsx
@@ -135,7 +135,9 @@ const TwoFactorAuthModal = ({
            autoFocus
          />
          <Typography.Text type='tertiary' size='small' className='mt-2 block'>
-            {t('支持6位TOTP验证码或8位备用码，可到`个人设置-安全设置-两步验证设置`配置或查看。')}
+            {t(
+              '支持6位TOTP验证码或8位备用码，可到`个人设置-安全设置-两步验证设置`配置或查看。',
+            )}
          </Typography.Text>
        </div>
      </div>
--- a/web/src/components/settings/OperationSetting.jsx
+++ b/web/src/components/settings/OperationSetting.jsx
@@ -42,7 +42,7 @@ const OperationSetting = () => {
    QuotaPerUnit: 0,
    USDExchangeRate: 0,
    RetryTimes: 0,
-    DisplayInCurrencyEnabled: false,
+    'general_setting.quota_display_type': 'USD',
    DisplayTokenStatEnabled: false,
    DefaultCollapseSidebar: false,
    DemoSiteEnabled: false,
--- a/web/src/components/settings/SystemSetting.jsx
+++ b/web/src/components/settings/SystemSetting.jsx
@@ -45,7 +45,6 @@ import { useTranslation } from 'react-i18next';
 const SystemSetting = () => {
  const { t } = useTranslation();
  let [inputs, setInputs] = useState({
-    
    PasswordLoginEnabled: '',
    PasswordRegisterEnabled: '',
    EmailVerificationEnabled: '',
@@ -188,7 +187,9 @@ const SystemSetting = () => {
      setInputs(newInputs);
      setOriginInputs(newInputs);
      // 同步模式布尔到本地状态
-      if (typeof newInputs['fetch_setting.domain_filter_mode'] !== 'undefined') {
+      if (
+        typeof newInputs['fetch_setting.domain_filter_mode'] !== 'undefined'
+      ) {
        setDomainFilterMode(!!newInputs['fetch_setting.domain_filter_mode']);
      }
      if (typeof newInputs['fetch_setting.ip_filter_mode'] !== 'undefined') {
@@ -695,14 +696,17 @@ const SystemSetting = () => {
                        noLabel
                        extraText={t('SSRF防护开关详细说明')}
                        onChange={(e) =>
-                          handleCheckboxChange('fetch_setting.enable_ssrf_protection', e)
+                          handleCheckboxChange(
+                            'fetch_setting.enable_ssrf_protection',
+                            e,
+                          )
                        }
                      >
                        {t('启用SSRF防护（推荐开启以保护服务器安全）')}
                      </Form.Checkbox>
                    </Col>
                  </Row>
-                  
+
                  <Row
                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
                    style={{ marginTop: 16 }}
@@ -713,14 +717,19 @@ const SystemSetting = () => {
                        noLabel
                        extraText={t('私有IP访问详细说明')}
                        onChange={(e) =>
-                          handleCheckboxChange('fetch_setting.allow_private_ip', e)
+                          handleCheckboxChange(
+                            'fetch_setting.allow_private_ip',
+                            e,
+                          )
                        }
                      >
-                        {t('允许访问私有IP地址（127.0.0.1、192.168.x.x等内网地址）')}
+                        {t(
+                          '允许访问私有IP地址（127.0.0.1、192.168.x.x等内网地址）',
+                        )}
                      </Form.Checkbox>
                    </Col>
                  </Row>
-                  
+
                  <Row
                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
                    style={{ marginTop: 16 }}
@@ -731,7 +740,10 @@ const SystemSetting = () => {
                        noLabel
                        extraText={t('域名IP过滤详细说明')}
                        onChange={(e) =>
-                          handleCheckboxChange('fetch_setting.apply_ip_filter_for_domain', e)
+                          handleCheckboxChange(
+                            'fetch_setting.apply_ip_filter_for_domain',
+                            e,
+                          )
                        }
                        style={{ marginBottom: 8 }}
                      >
@@ -740,17 +752,23 @@ const SystemSetting = () => {
                      <Text strong>
                        {t(domainFilterMode ? '域名白名单' : '域名黑名单')}
                      </Text>
-                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
-                        {t('支持通配符格式，如：example.com, *.api.example.com')}
+                      <Text
+                        type='secondary'
+                        style={{ display: 'block', marginBottom: 8 }}
+                      >
+                        {t(
+                          '支持通配符格式，如：example.com, *.api.example.com',
+                        )}
                      </Text>
                      <Radio.Group
                        type='button'
                        value={domainFilterMode ? 'whitelist' : 'blacklist'}
                        onChange={(val) => {
-                          const selected = val && val.target ? val.target.value : val;
+                          const selected =
+                            val && val.target ? val.target.value : val;
                          const isWhitelist = selected === 'whitelist';
                          setDomainFilterMode(isWhitelist);
-                          setInputs(prev => ({
+                          setInputs((prev) => ({
                            ...prev,
                            'fetch_setting.domain_filter_mode': isWhitelist,
                          }));
@@ -765,9 +783,9 @@ const SystemSetting = () => {
                        onChange={(value) => {
                          setDomainList(value);
                          // 触发Form的onChange事件
-                          setInputs(prev => ({
+                          setInputs((prev) => ({
                            ...prev,
-                            'fetch_setting.domain_list': value
+                            'fetch_setting.domain_list': value,
                          }));
                        }}
                        placeholder={t('输入域名后回车，如：example.com')}
@@ -784,17 +802,21 @@ const SystemSetting = () => {
                      <Text strong>
                        {t(ipFilterMode ? 'IP白名单' : 'IP黑名单')}
                      </Text>
-                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                      <Text
+                        type='secondary'
+                        style={{ display: 'block', marginBottom: 8 }}
+                      >
                        {t('支持CIDR格式，如：8.8.8.8, 192.168.1.0/24')}
                      </Text>
                      <Radio.Group
                        type='button'
                        value={ipFilterMode ? 'whitelist' : 'blacklist'}
                        onChange={(val) => {
-                          const selected = val && val.target ? val.target.value : val;
+                          const selected =
+                            val && val.target ? val.target.value : val;
                          const isWhitelist = selected === 'whitelist';
                          setIpFilterMode(isWhitelist);
-                          setInputs(prev => ({
+                          setInputs((prev) => ({
                            ...prev,
                            'fetch_setting.ip_filter_mode': isWhitelist,
                          }));
@@ -809,9 +831,9 @@ const SystemSetting = () => {
                        onChange={(value) => {
                          setIpList(value);
                          // 触发Form的onChange事件
-                          setInputs(prev => ({
+                          setInputs((prev) => ({
                            ...prev,
-                            'fetch_setting.ip_list': value
+                            'fetch_setting.ip_list': value,
                          }));
                        }}
                        placeholder={t('输入IP地址后回车，如：8.8.8.8')}
@@ -826,7 +848,10 @@ const SystemSetting = () => {
                  >
                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                      <Text strong>{t('允许的端口')}</Text>
-                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                      <Text
+                        type='secondary'
+                        style={{ display: 'block', marginBottom: 8 }}
+                      >
                        {t('支持单个端口和端口范围，如：80, 443, 8000-8999')}
                      </Text>
                      <TagInput
@@ -834,15 +859,18 @@ const SystemSetting = () => {
                        onChange={(value) => {
                          setAllowedPorts(value);
                          // 触发Form的onChange事件
-                          setInputs(prev => ({
+                          setInputs((prev) => ({
                            ...prev,
-                            'fetch_setting.allowed_ports': value
+                            'fetch_setting.allowed_ports': value,
                          }));
                        }}
                        placeholder={t('输入端口后回车，如：80 或 8000-8999')}
                        style={{ width: '100%' }}
                      />
-                      <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                      <Text
+                        type='secondary'
+                        style={{ display: 'block', marginBottom: 8 }}
+                      >
                        {t('端口配置详细说明')}
                      </Text>
                    </Col>
--- a/web/src/components/settings/personal/cards/AccountManagement.jsx
+++ b/web/src/components/settings/personal/cards/AccountManagement.jsx
@@ -85,7 +85,8 @@ const AccountManagement = ({
    );
  };
  const isBound = (accountId) => Boolean(accountId);
-  const [showTelegramBindModal, setShowTelegramBindModal] = React.useState(false);
+  const [showTelegramBindModal, setShowTelegramBindModal] =
+    React.useState(false);

  return (
    <Card className='!rounded-2xl'>
@@ -226,7 +227,8 @@ const AccountManagement = ({
                        onGitHubOAuthClicked(status.github_client_id)
                      }
                      disabled={
-                        isBound(userState.user?.github_id) || !status.github_oauth
+                        isBound(userState.user?.github_id) ||
+                        !status.github_oauth
                      }
                    >
                      {status.github_oauth ? t('绑定') : t('未启用')}
@@ -384,7 +386,8 @@ const AccountManagement = ({
                        onLinuxDOOAuthClicked(status.linuxdo_client_id)
                      }
                      disabled={
-                        isBound(userState.user?.linux_do_id) || !status.linuxdo_oauth
+                        isBound(userState.user?.linux_do_id) ||
+                        !status.linuxdo_oauth
                      }
                    >
                      {status.linuxdo_oauth ? t('绑定') : t('未启用')}
--- a/web/src/components/table/channels/modals/EditChannelModal.jsx
+++ b/web/src/components/table/channels/modals/EditChannelModal.jsx
@@ -87,23 +87,7 @@ const REGION_EXAMPLE = {

 // 支持并且已适配通过接口获取模型列表的渠道类型
 const MODEL_FETCHABLE_TYPES = new Set([
-  1,
-  4,
-  14,
-  34,
-  17,
-  26,
-  24,
-  47,
-  25,
-  20,
-  23,
-  31,
-  35,
-  40,
-  42,
-  48,
-  43,
+  1, 4, 14, 34, 17, 26, 24, 47, 25, 20, 23, 31, 35, 40, 42, 48, 43,
 ]);

 function type2secretPrompt(type) {
@@ -348,7 +332,10 @@ const EditChannelModal = (props) => {
          break;
        case 45:
          localModels = getChannelModels(value);
-          setInputs((prevInputs) => ({ ...prevInputs, base_url: 'https://ark.cn-beijing.volces.com' }));
+          setInputs((prevInputs) => ({
+            ...prevInputs,
+            base_url: 'https://ark.cn-beijing.volces.com',
+          }));
          break;
        default:
          localModels = getChannelModels(value);
@@ -442,7 +429,8 @@ const EditChannelModal = (props) => {
          // 读取 Vertex 密钥格式
          data.vertex_key_type = parsedSettings.vertex_key_type || 'json';
          // 读取企业账户设置
-          data.is_enterprise_account = parsedSettings.openrouter_enterprise === true;
+          data.is_enterprise_account =
+            parsedSettings.openrouter_enterprise === true;
        } catch (error) {
          console.error('解析其他设置失败:', error);
          data.azure_responses_version = '';
@@ -868,7 +856,10 @@ const EditChannelModal = (props) => {
      showInfo(t('请至少选择一个模型！'));
      return;
    }
-    if (localInputs.type === 45 && (!localInputs.base_url || localInputs.base_url.trim() === '')) {
+    if (
+      localInputs.type === 45 &&
+      (!localInputs.base_url || localInputs.base_url.trim() === '')
+    ) {
      showInfo(t('请输入API地址！'));
      return;
    }
@@ -912,7 +903,8 @@ const EditChannelModal = (props) => {
        }
      }
      // 设置企业账户标识，无论是true还是false都要传到后端
-      settings.openrouter_enterprise = localInputs.is_enterprise_account === true;
+      settings.openrouter_enterprise =
+        localInputs.is_enterprise_account === true;
      localInputs.settings = JSON.stringify(settings);
    }

@@ -1318,7 +1310,9 @@ const EditChannelModal = (props) => {
                        setIsEnterpriseAccount(value);
                        handleInputChange('is_enterprise_account', value);
                      }}
-                      extraText={t('企业账户为特殊返回格式，需要特殊处理，如果非企业账户，请勿勾选')}
+                      extraText={t(
+                        '企业账户为特殊返回格式，需要特殊处理，如果非企业账户，请勿勾选',
+                      )}
                      initValue={inputs.is_enterprise_account}
                    />
                  )}
@@ -1944,27 +1938,27 @@ const EditChannelModal = (props) => {
                    )}

                    {inputs.type === 45 && (
-                        <div>
-                          <Form.Select
-                              field='base_url'
-                              label={t('API地址')}
-                              placeholder={t('请选择API地址')}
-                              onChange={(value) =>
-                                  handleInputChange('base_url', value)
-                              }
-                              optionList={[
-                                {
-                                  value: 'https://ark.cn-beijing.volces.com',
-                                  label: 'https://ark.cn-beijing.volces.com'
-                                },
-                                {
-                                  value: 'https://ark.ap-southeast.bytepluses.com',
-                                  label: 'https://ark.ap-southeast.bytepluses.com'
-                                }
-                              ]}
-                              defaultValue='https://ark.cn-beijing.volces.com'
-                          />
-                        </div>
+                      <div>
+                        <Form.Select
+                          field='base_url'
+                          label={t('API地址')}
+                          placeholder={t('请选择API地址')}
+                          onChange={(value) =>
+                            handleInputChange('base_url', value)
+                          }
+                          optionList={[
+                            {
+                              value: 'https://ark.cn-beijing.volces.com',
+                              label: 'https://ark.cn-beijing.volces.com',
+                            },
+                            {
+                              value: 'https://ark.ap-southeast.bytepluses.com',
+                              label: 'https://ark.ap-southeast.bytepluses.com',
+                            },
+                          ]}
+                          defaultValue='https://ark.cn-beijing.volces.com'
+                        />
+                      </div>
                    )}
                  </Card>
                )}
--- a/web/src/components/table/mj-logs/MjLogsFilters.jsx
+++ b/web/src/components/table/mj-logs/MjLogsFilters.jsx
@@ -56,10 +56,10 @@ const MjLogsFilters = ({
              showClear
              pure
              size='small'
-              presets={DATE_RANGE_PRESETS.map(preset => ({
+              presets={DATE_RANGE_PRESETS.map((preset) => ({
                text: t(preset.text),
                start: preset.start(),
-                end: preset.end()
+                end: preset.end(),
              }))}
            />
          </div>
--- a/web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
+++ b/web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
@@ -56,6 +56,7 @@ const PricingDisplaySettings = ({
  const currencyItems = [
    { value: 'USD', label: 'USD ($)' },
    { value: 'CNY', label: 'CNY (¥)' },
+    { value: 'CUSTOM', label: t('自定义货币') },
  ];

  const handleChange = (value) => {
--- a/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
+++ b/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
@@ -107,6 +107,7 @@ const SearchActions = memo(
                optionList={[
                  { value: 'USD', label: 'USD' },
                  { value: 'CNY', label: 'CNY' },
+                  { value: 'CUSTOM', label: t('自定义货币') },
                ]}
              />
            )}
--- a/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
+++ b/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
@@ -36,8 +36,9 @@ import {
 } from 'lucide-react';
 import {
  TASK_ACTION_FIRST_TAIL_GENERATE,
-  TASK_ACTION_GENERATE, TASK_ACTION_REFERENCE_GENERATE,
-  TASK_ACTION_TEXT_GENERATE
+  TASK_ACTION_GENERATE,
+  TASK_ACTION_REFERENCE_GENERATE,
+  TASK_ACTION_TEXT_GENERATE,
 } from '../../../constants/common.constant';
 import { CHANNEL_OPTIONS } from '../../../constants/channel.constants';

--- a/web/src/components/table/task-logs/TaskLogsFilters.jsx
+++ b/web/src/components/table/task-logs/TaskLogsFilters.jsx
@@ -56,10 +56,10 @@ const TaskLogsFilters = ({
              showClear
              pure
              size='small'
-              presets={DATE_RANGE_PRESETS.map(preset => ({
+              presets={DATE_RANGE_PRESETS.map((preset) => ({
                text: t(preset.text),
                start: preset.start(),
-                end: preset.end()
+                end: preset.end(),
              }))}
            />
          </div>
--- a/web/src/components/table/task-logs/modals/ContentModal.jsx
+++ b/web/src/components/table/task-logs/modals/ContentModal.jsx
@@ -60,38 +60,54 @@ const ContentModal = ({
    if (videoError) {
      return (
        <div style={{ textAlign: 'center', padding: '40px' }}>
-          <Text type="tertiary" style={{ display: 'block', marginBottom: '16px' }}>
+          <Text
+            type='tertiary'
+            style={{ display: 'block', marginBottom: '16px' }}
+          >
            视频无法在当前浏览器中播放，这可能是由于：
          </Text>
-          <Text type="tertiary" style={{ display: 'block', marginBottom: '8px', fontSize: '12px' }}>
+          <Text
+            type='tertiary'
+            style={{ display: 'block', marginBottom: '8px', fontSize: '12px' }}
+          >
            • 视频服务商的跨域限制
          </Text>
-          <Text type="tertiary" style={{ display: 'block', marginBottom: '8px', fontSize: '12px' }}>
+          <Text
+            type='tertiary'
+            style={{ display: 'block', marginBottom: '8px', fontSize: '12px' }}
+          >
            • 需要特定的请求头或认证
          </Text>
-          <Text type="tertiary" style={{ display: 'block', marginBottom: '16px', fontSize: '12px' }}>
+          <Text
+            type='tertiary'
+            style={{ display: 'block', marginBottom: '16px', fontSize: '12px' }}
+          >
            • 防盗链保护机制
          </Text>
-          
+
          <div style={{ marginTop: '20px' }}>
-            <Button 
+            <Button
              icon={<IconExternalOpen />}
              onClick={handleOpenInNewTab}
              style={{ marginRight: '8px' }}
            >
              在新标签页中打开
            </Button>
-            <Button 
-              icon={<IconCopy />}
-              onClick={handleCopyUrl}
-            >
+            <Button icon={<IconCopy />} onClick={handleCopyUrl}>
              复制链接
            </Button>
          </div>
-          
-          <div style={{ marginTop: '16px', padding: '8px', backgroundColor: '#f8f9fa', borderRadius: '4px' }}>
-            <Text 
-              type="tertiary" 
+
+          <div
+            style={{
+              marginTop: '16px',
+              padding: '8px',
+              backgroundColor: '#f8f9fa',
+              borderRadius: '4px',
+            }}
+          >
+            <Text
+              type='tertiary'
              style={{ fontSize: '10px', wordBreak: 'break-all' }}
            >
              {modalContent}
@@ -104,22 +120,24 @@ const ContentModal = ({
    return (
      <div style={{ position: 'relative' }}>
        {isLoading && (
-          <div style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            zIndex: 10
-          }}>
-            <Spin size="large" />
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              zIndex: 10,
+            }}
+          >
+            <Spin size='large' />
          </div>
        )}
-        <video 
-          src={modalContent} 
-          controls 
-          style={{ width: '100%' }} 
+        <video
+          src={modalContent}
+          controls
+          style={{ width: '100%' }}
          autoPlay
-          crossOrigin="anonymous"
+          crossOrigin='anonymous'
          onError={handleVideoError}
          onLoadedData={handleVideoLoaded}
          onLoadStart={() => setIsLoading(true)}
@@ -134,10 +152,10 @@ const ContentModal = ({
      onOk={() => setIsModalOpen(false)}
      onCancel={() => setIsModalOpen(false)}
      closable={null}
-      bodyStyle={{ 
-        height: isVideo ? '450px' : '400px', 
+      bodyStyle={{
+        height: isVideo ? '450px' : '400px',
        overflow: 'auto',
-        padding: isVideo && videoError ? '0' : '24px'
+        padding: isVideo && videoError ? '0' : '24px',
      }}
      width={800}
    >
--- a/web/src/components/table/usage-logs/UsageLogsFilters.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsFilters.jsx
@@ -57,10 +57,10 @@ const LogsFilters = ({
              showClear
              pure
              size='small'
-              presets={DATE_RANGE_PRESETS.map(preset => ({
+              presets={DATE_RANGE_PRESETS.map((preset) => ({
                text: t(preset.text),
                start: preset.start(),
-                end: preset.end()
+                end: preset.end(),
              }))}
            />
          </div>
--- a/web/src/components/topup/RechargeCard.jsx
+++ b/web/src/components/topup/RechargeCard.jsx
@@ -30,7 +30,8 @@ import {
  Space,
  Row,
  Col,
-  Spin, Tooltip
+  Spin,
+  Tooltip,
 } from '@douyinfe/semi-ui';
 import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
 import { CreditCard, Coins, Wallet, BarChart2, TrendingUp } from 'lucide-react';
@@ -266,7 +267,8 @@ const RechargeCard = ({
                        {payMethods && payMethods.length > 0 ? (
                          <Space wrap>
                            {payMethods.map((payMethod) => {
-                              const minTopupVal = Number(payMethod.min_topup) || 0;
+                              const minTopupVal =
+                                Number(payMethod.min_topup) || 0;
                              const isStripe = payMethod.type === 'stripe';
                              const disabled =
                                (!enableOnlineTopUp && !isStripe) ||
@@ -280,7 +282,9 @@ const RechargeCard = ({
                                  type='tertiary'
                                  onClick={() => preTopUp(payMethod.type)}
                                  disabled={disabled}
-                                  loading={paymentLoading && payWay === payMethod.type}
+                                  loading={
+                                    paymentLoading && payWay === payMethod.type
+                                  }
                                  icon={
                                    payMethod.type === 'alipay' ? (
                                      <SiAlipay size={18} color='#1677FF' />
@@ -291,7 +295,10 @@ const RechargeCard = ({
                                    ) : (
                                      <CreditCard
                                        size={18}
-                                        color={payMethod.color || 'var(--semi-color-text-2)'}
+                                        color={
+                                          payMethod.color ||
+                                          'var(--semi-color-text-2)'
+                                        }
                                      />
                                    )
                                  }
@@ -301,12 +308,22 @@ const RechargeCard = ({
                                </Button>
                              );

-                              return disabled && minTopupVal > Number(topUpCount || 0) ? (
-                                <Tooltip content={t('此支付方式最低充值金额为') + ' ' + minTopupVal} key={payMethod.type}>
+                              return disabled &&
+                                minTopupVal > Number(topUpCount || 0) ? (
+                                <Tooltip
+                                  content={
+                                    t('此支付方式最低充值金额为') +
+                                    ' ' +
+                                    minTopupVal
+                                  }
+                                  key={payMethod.type}
+                                >
                                  {buttonEl}
                                </Tooltip>
                              ) : (
-                                <React.Fragment key={payMethod.type}>{buttonEl}</React.Fragment>
+                                <React.Fragment key={payMethod.type}>
+                                  {buttonEl}
+                                </React.Fragment>
                              );
                            })}
                          </Space>
@@ -324,23 +341,27 @@ const RechargeCard = ({
                  <Form.Slot label={t('选择充值额度')}>
                    <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2'>
                      {presetAmounts.map((preset, index) => {
-                        const discount = preset.discount || topupInfo?.discount?.[preset.value] || 1.0;
+                        const discount =
+                          preset.discount ||
+                          topupInfo?.discount?.[preset.value] ||
+                          1.0;
                        const originalPrice = preset.value * priceRatio;
                        const discountedPrice = originalPrice * discount;
                        const hasDiscount = discount < 1.0;
                        const actualPay = discountedPrice;
                        const save = originalPrice - discountedPrice;
-                        
+
                        return (
                          <Card
                            key={index}
                            style={{
                              cursor: 'pointer',
-                              border: selectedPreset === preset.value 
-                                ? '2px solid var(--semi-color-primary)' 
-                                : '1px solid var(--semi-color-border)',
+                              border:
+                                selectedPreset === preset.value
+                                  ? '2px solid var(--semi-color-primary)'
+                                  : '1px solid var(--semi-color-border)',
                              height: '100%',
-                              width: '100%'
+                              width: '100%',
                            }}
                            bodyStyle={{ padding: '12px' }}
                            onClick={() => {
@@ -352,24 +373,35 @@ const RechargeCard = ({
                            }}
                          >
                            <div style={{ textAlign: 'center' }}>
-                              <Typography.Title heading={6} style={{ margin: '0 0 8px 0' }}>
+                              <Typography.Title
+                                heading={6}
+                                style={{ margin: '0 0 8px 0' }}
+                              >
                                <Coins size={18} />
                                {formatLargeNumber(preset.value)}
                                {hasDiscount && (
-                                   <Tag style={{ marginLeft: 4 }} color="green">
-                                   {t('折').includes('off') ?
-                                     ((1 - parseFloat(discount)) * 100).toFixed(1) :
-                                     (discount * 10).toFixed(1)}{t('折')}
-                                 </Tag>
+                                  <Tag style={{ marginLeft: 4 }} color='green'>
+                                    {t('折').includes('off')
+                                      ? (
+                                          (1 - parseFloat(discount)) *
+                                          100
+                                        ).toFixed(1)
+                                      : (discount * 10).toFixed(1)}
+                                    {t('折')}
+                                  </Tag>
                                )}
                              </Typography.Title>
-                              <div style={{ 
-                                color: 'var(--semi-color-text-2)', 
-                                fontSize: '12px', 
-                                margin: '4px 0' 
-                              }}>
+                              <div
+                                style={{
+                                  color: 'var(--semi-color-text-2)',
+                                  fontSize: '12px',
+                                  margin: '4px 0',
+                                }}
+                              >
                                {t('实付')} {actualPay.toFixed(2)}，
-                                {hasDiscount ? `${t('节省')} ${save.toFixed(2)}` : `${t('节省')} 0.00`}
+                                {hasDiscount
+                                  ? `${t('节省')} ${save.toFixed(2)}`
+                                  : `${t('节省')} 0.00`}
                              </div>
                            </div>
                          </Card>
--- a/web/src/components/topup/index.jsx
+++ b/web/src/components/topup/index.jsx
@@ -80,11 +80,11 @@ const TopUp = () => {
  // 预设充值额度选项
  const [presetAmounts, setPresetAmounts] = useState([]);
  const [selectedPreset, setSelectedPreset] = useState(null);
-  
+
  // 充值配置信息
  const [topupInfo, setTopupInfo] = useState({
    amount_options: [],
-    discount: {}
+    discount: {},
  });

  const topUp = async () => {
@@ -262,9 +262,9 @@ const TopUp = () => {
      if (success) {
        setTopupInfo({
          amount_options: data.amount_options || [],
-          discount: data.discount || {}
+          discount: data.discount || {},
        });
-        
+
        // 处理支付方式
        let payMethods = data.pay_methods || [];
        try {
@@ -280,10 +280,15 @@ const TopUp = () => {
            payMethods = payMethods.map((method) => {
              // 规范化最小充值数
              const normalizedMinTopup = Number(method.min_topup);
-              method.min_topup = Number.isFinite(normalizedMinTopup) ? normalizedMinTopup : 0;
+              method.min_topup = Number.isFinite(normalizedMinTopup)
+                ? normalizedMinTopup
+                : 0;

              // Stripe 的最小充值从后端字段回填
-              if (method.type === 'stripe' && (!method.min_topup || method.min_topup <= 0)) {
+              if (
+                method.type === 'stripe' &&
+                (!method.min_topup || method.min_topup <= 0)
+              ) {
                const stripeMin = Number(data.stripe_min_topup);
                if (Number.isFinite(stripeMin)) {
                  method.min_topup = stripeMin;
@@ -313,7 +318,11 @@ const TopUp = () => {
          setPayMethods(payMethods);
          const enableStripeTopUp = data.enable_stripe_topup || false;
          const enableOnlineTopUp = data.enable_online_topup || false;
-          const minTopUpValue = enableOnlineTopUp? data.min_topup : enableStripeTopUp? data.stripe_min_topup : 1;
+          const minTopUpValue = enableOnlineTopUp
+            ? data.min_topup
+            : enableStripeTopUp
+              ? data.stripe_min_topup
+              : 1;
          setEnableOnlineTopUp(enableOnlineTopUp);
          setEnableStripeTopUp(enableStripeTopUp);
          setMinTopUp(minTopUpValue);
@@ -330,12 +339,12 @@ const TopUp = () => {
          console.log('解析支付方式失败:', e);
          setPayMethods([]);
        }
-        
+
        // 如果有自定义充值数量选项，使用它们替换默认的预设选项
        if (data.amount_options && data.amount_options.length > 0) {
-          const customPresets = data.amount_options.map(amount => ({
+          const customPresets = data.amount_options.map((amount) => ({
            value: amount,
-            discount: data.discount[amount] || 1.0
+            discount: data.discount[amount] || 1.0,
          }));
          setPresetAmounts(customPresets);
        }
@@ -483,7 +492,7 @@ const TopUp = () => {
  const selectPresetAmount = (preset) => {
    setTopUpCount(preset.value);
    setSelectedPreset(preset.value);
-    
+
    // 计算实际支付金额，考虑折扣
    const discount = preset.discount || topupInfo.discount[preset.value] || 1.0;
    const discountedAmount = preset.value * priceRatio * discount;
--- a/web/src/components/topup/modals/PaymentConfirmModal.jsx
+++ b/web/src/components/topup/modals/PaymentConfirmModal.jsx
@@ -40,9 +40,10 @@ const PaymentConfirmModal = ({
  amountNumber,
  discountRate,
 }) => {
-  const hasDiscount = discountRate && discountRate > 0 && discountRate < 1 && amountNumber > 0;
-  const originalAmount = hasDiscount ? (amountNumber / discountRate) : 0;
-  const discountAmount = hasDiscount ? (originalAmount - amountNumber) : 0;
+  const hasDiscount =
+    discountRate && discountRate > 0 && discountRate < 1 && amountNumber > 0;
+  const originalAmount = hasDiscount ? amountNumber / discountRate : 0;
+  const discountAmount = hasDiscount ? originalAmount - amountNumber : 0;
  return (
    <Modal
      title={