Merge origin/main into nightly

Resolve conflicts:
- .gitignore: keep nightly additions (.test, skills-lock.json)
- relay/helper/price.go: keep both billingexpr and model imports
- en.json / zh-CN.json: keep nightly's superset of i18n entries
- service/billing_session.go: add missing 3rd arg to DecreaseUserQuota
- en.json / zh-CN.json: deduplicate 129+320 duplicate i18n keys

web/bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "react-template",
@@ -11,7 +10,7 @@
         "@visactor/react-vchart": "~1.8.8",
         "@visactor/vchart": "~1.8.8",
         "@visactor/vchart-semi-theme": "~1.8.8",
-        "axios": "1.13.5",
+        "axios": "1.15.0",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.11",
         "history": "^5.3.0",
@@ -777,7 +776,7 @@
 
     "autoprefixer": ["autoprefixer@10.4.21", "", { "dependencies": { "browserslist": "^4.24.4", "caniuse-lite": "^1.0.30001702", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ=="],
 
-    "axios": ["axios@1.13.5", "", { "dependencies": { "follow-redirects": "^1.15.11", "form-data": "^4.0.5", "proxy-from-env": "^1.1.0" } }, "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q=="],
+    "axios": ["axios@1.15.0", "", { "dependencies": { "follow-redirects": "^1.15.11", "form-data": "^4.0.5", "proxy-from-env": "^2.1.0" } }, "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q=="],
 
     "babel-plugin-macros": ["babel-plugin-macros@3.1.0", "", { "dependencies": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", "resolve": "^1.19.0" } }, "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg=="],
 
@@ -1657,7 +1656,7 @@
 
     "protocol-buffers-schema": ["protocol-buffers-schema@3.6.0", "", {}, "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="],
 
-    "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
+    "proxy-from-env": ["proxy-from-env@2.1.0", "", {}, "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA=="],
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 

web/package.json

@@ -10,7 +10,7 @@
     "@visactor/react-vchart": "~1.8.8",
     "@visactor/vchart": "~1.8.8",
     "@visactor/vchart-semi-theme": "~1.8.8",
-    "axios": "1.13.5",
+    "axios": "1.15.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "history": "^5.3.0",

web/src/components/playground/MessageContent.jsx

@@ -21,8 +21,9 @@ import React, { useRef, useEffect } from 'react';
 import { Typography, TextArea, Button } from '@douyinfe/semi-ui';
 import MarkdownRenderer from '../common/markdown/MarkdownRenderer';
 import ThinkingContent from './ThinkingContent';
-import { Loader2, Check, X } from 'lucide-react';
+import { Loader2, Check, X, Settings, AlertTriangle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { isAdmin } from '../../helpers/utils';
 
 const MessageContent = ({
   message,
@@ -64,6 +65,44 @@ const MessageContent = ({
       errorText = t('请求发生错误');
     }
 
+    if (message.errorCode === 'model_price_error') {
+      return (
+        <div className={`${className}`}>
+          <div
+            className='rounded-lg p-3 space-y-2'
+            style={{
+              background: 'var(--semi-color-bg-0)',
+              border: '1px solid var(--semi-color-border)',
+            }}
+          >
+            <div className='flex items-center gap-2'>
+              <AlertTriangle size={16} className='text-orange-500 shrink-0' />
+              <Typography.Text strong className='!text-[var(--semi-color-text-0)]'>
+                {t('模型价格未配置')}
+              </Typography.Text>
+            </div>
+            <Typography.Paragraph
+              className='!text-[var(--semi-color-text-1)] !text-sm !mb-0'
+              style={{ wordBreak: 'break-word' }}
+            >
+              {errorText}
+            </Typography.Paragraph>
+            {isAdmin() && (
+              <Button
+                size='small'
+                theme='light'
+                type='warning'
+                icon={<Settings size={14} />}
+                onClick={() => window.open('/console/setting?tab=ratio', '_blank')}
+              >
+                {t('前往设置')}
+              </Button>
+            )}
+          </div>
+        </div>
+      );
+    }
+
     return (
       <div className={`${className}`}>
         <Typography.Text className='text-white'>{errorText}</Typography.Text>

web/src/components/settings/PaymentSetting.jsx

@@ -18,12 +18,13 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment';
 import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway';
 import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe';
 import SettingsPaymentGatewayCreem from '../../pages/Setting/Payment/SettingsPaymentGatewayCreem';
 import SettingsPaymentGatewayWaffo from '../../pages/Setting/Payment/SettingsPaymentGatewayWaffo';
+import SettingsPaymentGatewayWaffoPancake from '../../pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake';
 import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 
@@ -48,6 +49,17 @@ const PaymentSetting = () => {
     StripeUnitPrice: 8.0,
     StripeMinTopUp: 1,
     StripePromotionCodesEnabled: false,
+
+    WaffoPancakeEnabled: false,
+    WaffoPancakeSandbox: false,
+    WaffoPancakeMerchantID: '',
+    WaffoPancakePrivateKey: '',
+    WaffoPancakeStoreID: '',
+    WaffoPancakeProductID: '',
+    WaffoPancakeReturnURL: '',
+    WaffoPancakeCurrency: 'USD',
+    WaffoPancakeUnitPrice: 1.0,
+    WaffoPancakeMinTopUp: 1,
   });
 
   let [loading, setLoading] = useState(false);
@@ -96,8 +108,21 @@ const PaymentSetting = () => {
           case 'MinTopUp':
           case 'StripeUnitPrice':
           case 'StripeMinTopUp':
+          case 'WaffoPancakeUnitPrice':
+          case 'WaffoPancakeMinTopUp':
             newInputs[item.key] = parseFloat(item.value);
             break;
+          case 'WaffoPancakeMerchantID':
+          case 'WaffoPancakePrivateKey':
+          case 'WaffoPancakeStoreID':
+          case 'WaffoPancakeProductID':
+          case 'WaffoPancakeReturnURL':
+          case 'WaffoPancakeCurrency':
+            newInputs[item.key] = item.value;
+            break;
+          case 'WaffoPancakeSandbox':
+            newInputs[item.key] = toBoolean(item.value);
+            break;
           default:
             if (item.key.endsWith('Enabled')) {
               newInputs[item.key] = toBoolean(item.value);
@@ -108,7 +133,7 @@ const PaymentSetting = () => {
         }
       });
 
-      setInputs(newInputs);
+      setInputs((prev) => ({ ...prev, ...newInputs }));
     } else {
       showError(t(message));
     }
@@ -133,19 +158,54 @@ const PaymentSetting = () => {
     <>
       <Spin spinning={loading} size='large'>
         <Card style={{ marginTop: '10px' }}>
-          <SettingsGeneralPayment options={inputs} refresh={onRefresh} />
-        </Card>
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsPaymentGateway options={inputs} refresh={onRefresh} />
-        </Card>
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsPaymentGatewayStripe options={inputs} refresh={onRefresh} />
-        </Card>
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsPaymentGatewayCreem options={inputs} refresh={onRefresh} />
-        </Card>
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsPaymentGatewayWaffo options={inputs} refresh={onRefresh} />
+          <Tabs
+            type='card'
+            defaultActiveKey='general'
+            contentStyle={{ paddingTop: 24 }}
+          >
+            <Tabs.TabPane tab={t('通用设置')} itemKey='general'>
+              <SettingsGeneralPayment
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('易支付设置')} itemKey='epay'>
+              <SettingsPaymentGateway
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('Stripe 设置')} itemKey='stripe'>
+              <SettingsPaymentGatewayStripe
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('Creem 设置')} itemKey='creem'>
+              <SettingsPaymentGatewayCreem
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={t('Waffo 设置')} itemKey='waffo'>
+              <SettingsPaymentGatewayWaffo
+                options={inputs}
+                refresh={onRefresh}
+                hideSectionTitle
+              />
+            </Tabs.TabPane>
+            {/*<Tabs.TabPane tab={t('Waffo Pancake 设置')} itemKey='waffo-pancake'>*/}
+            {/*  <SettingsPaymentGatewayWaffoPancake*/}
+            {/*    options={inputs}*/}
+            {/*    refresh={onRefresh}*/}
+            {/*    hideSectionTitle*/}
+            {/*  />*/}
+            {/*</Tabs.TabPane>*/}
+          </Tabs>
         </Card>
       </Spin>
     </>

web/src/components/settings/PersonalSetting.jsx

@@ -45,6 +45,8 @@ import EmailBindModal from './personal/modals/EmailBindModal';
 import WeChatBindModal from './personal/modals/WeChatBindModal';
 import AccountDeleteModal from './personal/modals/AccountDeleteModal';
 import ChangePasswordModal from './personal/modals/ChangePasswordModal';
+import SecureVerificationModal from '../common/modals/SecureVerificationModal';
+import { useSecureVerification } from '../../hooks/common/useSecureVerification';
 
 const PersonalSetting = () => {
   const [userState, userDispatch] = useContext(UserContext);
@@ -76,6 +78,10 @@ const PersonalSetting = () => {
   const [passkeyRegisterLoading, setPasskeyRegisterLoading] = useState(false);
   const [passkeyDeleteLoading, setPasskeyDeleteLoading] = useState(false);
   const [passkeySupported, setPasskeySupported] = useState(false);
+  const [
+    passkeyRequiredVerificationMethod,
+    setPasskeyRequiredVerificationMethod,
+  ] = useState(null);
   const [notificationSettings, setNotificationSettings] = useState({
     warningType: 'email',
     warningThreshold: 100000,
@@ -91,6 +97,34 @@ const PersonalSetting = () => {
     recordIpLog: false,
   });
 
+  const {
+    isModalVisible: isPasskeyVerificationModalVisible,
+    verificationMethods: passkeyVerificationMethods,
+    verificationState: passkeyVerificationState,
+    startVerification: startPasskeyVerification,
+    executeVerification: executePasskeyVerification,
+    cancelVerification: cancelPasskeyVerification,
+    setVerificationCode: setPasskeyVerificationCode,
+    switchVerificationMethod: switchPasskeyVerificationMethod,
+    checkVerificationMethods: checkPasskeyVerificationMethods,
+  } = useSecureVerification({
+    onSuccess: () => {
+      setPasskeyRequiredVerificationMethod(null);
+    },
+  });
+
+  const visiblePasskeyVerificationMethods = passkeyRequiredVerificationMethod
+    ? {
+        ...passkeyVerificationMethods,
+        has2FA:
+          passkeyRequiredVerificationMethod === '2fa' &&
+          passkeyVerificationMethods.has2FA,
+        hasPasskey:
+          passkeyRequiredVerificationMethod === 'passkey' &&
+          passkeyVerificationMethods.hasPasskey,
+      }
+    : passkeyVerificationMethods;
+
   useEffect(() => {
     let saved = localStorage.getItem('status');
     if (saved) {
@@ -203,18 +237,57 @@ const PersonalSetting = () => {
     }
   };
 
-  const handleRegisterPasskey = async () => {
-    if (!passkeySupported || !window.PublicKeyCredential) {
+  const startPasskeyManagementVerification = async (apiCall, options = {}) => {
+    const methods = await checkPasskeyVerificationMethods();
+    const requiredMethod = methods.has2FA
+      ? '2fa'
+      : methods.hasPasskey
+        ? 'passkey'
+        : null;
+
+    if (!requiredMethod) {
+      showError(t('您需要先启用两步验证或 Passkey 才能执行此操作'));
+      return;
+    }
+
+    if (requiredMethod === 'passkey' && !methods.passkeySupported) {
       showInfo(t('当前设备不支持 Passkey'));
       return;
     }
+
+    setPasskeyRequiredVerificationMethod(requiredMethod);
+    await startPasskeyVerification(apiCall, {
+      preferredMethod: requiredMethod,
+      title: t('安全验证'),
+      ...options,
+    });
+  };
+
+  const startPasskeyRegistration = async () => {
+    const methods = await checkPasskeyVerificationMethods();
+    if (!methods.has2FA) {
+      try {
+        await registerPasskey();
+      } catch (error) {
+        showError(error.message || t('Passkey 注册失败，请重试'));
+      }
+      return;
+    }
+
+    setPasskeyRequiredVerificationMethod('2fa');
+    await startPasskeyVerification(registerPasskey, {
+      preferredMethod: '2fa',
+      title: t('安全验证'),
+    });
+  };
+
+  const registerPasskey = async () => {
     setPasskeyRegisterLoading(true);
     try {
       const beginRes = await API.post('/api/user/passkey/register/begin');
       const { success, message, data } = beginRes.data;
       if (!success) {
-        showError(message || t('无法发起 Passkey 注册'));
-        return;
+        throw new Error(message || t('无法发起 Passkey 注册'));
       }
 
       const publicKey = prepareCredentialCreationOptions(
@@ -223,49 +296,69 @@ const PersonalSetting = () => {
       const credential = await navigator.credentials.create({ publicKey });
       const payload = buildRegistrationResult(credential);
       if (!payload) {
-        showError(t('Passkey 注册失败，请重试'));
-        return;
+        throw new Error(t('Passkey 注册失败，请重试'));
       }
 
       const finishRes = await API.post(
         '/api/user/passkey/register/finish',
         payload,
       );
-      if (finishRes.data.success) {
-        showSuccess(t('Passkey 注册成功'));
-        await loadPasskeyStatus();
-      } else {
-        showError(finishRes.data.message || t('Passkey 注册失败，请重试'));
+      if (!finishRes.data.success) {
+        throw new Error(
+          finishRes.data.message || t('Passkey 注册失败，请重试'),
+        );
       }
+
+      showSuccess(t('Passkey 注册成功'));
+      await loadPasskeyStatus();
+      return finishRes.data;
     } catch (error) {
       if (error?.name === 'AbortError') {
         showInfo(t('已取消 Passkey 注册'));
-      } else {
-        showError(t('Passkey 注册失败，请重试'));
+        return { cancelled: true };
       }
+      throw new Error(error?.message || t('Passkey 注册失败，请重试'));
     } finally {
       setPasskeyRegisterLoading(false);
     }
   };
 
-  const handleRemovePasskey = async () => {
+  const handleRegisterPasskey = async () => {
+    if (!passkeySupported || !window.PublicKeyCredential) {
+      showInfo(t('当前设备不支持 Passkey'));
+      return;
+    }
+    await startPasskeyRegistration();
+  };
+
+  const removePasskey = async () => {
     setPasskeyDeleteLoading(true);
     try {
       const res = await API.delete('/api/user/passkey');
       const { success, message } = res.data;
-      if (success) {
-        showSuccess(t('Passkey 已解绑'));
-        await loadPasskeyStatus();
-      } else {
-        showError(message || t('操作失败，请重试'));
+      if (!success) {
+        throw new Error(message || t('操作失败，请重试'));
       }
+
+      showSuccess(t('Passkey 已解绑'));
+      await loadPasskeyStatus();
+      return res.data;
     } catch (error) {
-      showError(t('操作失败，请重试'));
+      throw new Error(error?.message || t('操作失败，请重试'));
     } finally {
       setPasskeyDeleteLoading(false);
     }
   };
 
+  const handleRemovePasskey = async () => {
+    await startPasskeyManagementVerification(removePasskey);
+  };
+
+  const handlePasskeyVerificationCancel = () => {
+    setPasskeyRequiredVerificationMethod(null);
+    cancelPasskeyVerification();
+  };
+
   const getUserData = async () => {
     let res = await API.get(`/api/user/self`);
     const { success, message, data } = res.data;
@@ -556,6 +649,18 @@ const PersonalSetting = () => {
         turnstileSiteKey={turnstileSiteKey}
         setTurnstileToken={setTurnstileToken}
       />
+
+      <SecureVerificationModal
+        visible={isPasskeyVerificationModalVisible}
+        verificationMethods={visiblePasskeyVerificationMethods}
+        verificationState={passkeyVerificationState}
+        onVerify={executePasskeyVerification}
+        onCancel={handlePasskeyVerificationCancel}
+        onCodeChange={setPasskeyVerificationCode}
+        onMethodSwitch={switchPasskeyVerificationMethod}
+        title={passkeyVerificationState.title}
+        description={passkeyVerificationState.description}
+      />
     </div>
   );
 };

web/src/components/table/channels/modals/CodexUsageModal.jsx

@@ -29,6 +29,7 @@ import {
   Collapse,
 } from '@douyinfe/semi-ui';
 import { API, showError } from '../../../../helpers';
+import { MOBILE_BREAKPOINT } from '../../../../hooks/common/useIsMobile';
 
 const { Text } = Typography;
 
@@ -98,10 +99,12 @@ const resolveRateLimitWindows = (data) => {
   }
 
   if (!fiveHourWindow) {
-    fiveHourWindow = windows.find((windowData) => windowData !== weeklyWindow) ?? null;
+    fiveHourWindow =
+      windows.find((windowData) => windowData !== weeklyWindow) ?? null;
   }
   if (!weeklyWindow) {
-    weeklyWindow = windows.find((windowData) => windowData !== fiveHourWindow) ?? null;
+    weeklyWindow =
+      windows.find((windowData) => windowData !== fiveHourWindow) ?? null;
   }
 
   return { fiveHourWindow, weeklyWindow };
@@ -135,6 +138,40 @@ const getDisplayText = (value) => {
   return String(value).trim();
 };
 
+const isMobileViewport = () =>
+  typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT;
+
+const getCodexUsageModalLayout = () => {
+  if (isMobileViewport()) {
+    return {
+      width: 'calc(100vw - 16px)',
+      style: {
+        top: 8,
+        maxWidth: 'calc(100vw - 16px)',
+        margin: '0 auto',
+      },
+      bodyStyle: {
+        maxHeight: 'calc(100vh - 148px)',
+        overflowY: 'auto',
+        padding: '16px 16px 12px',
+      },
+    };
+  }
+
+  return {
+    width: 900,
+    style: {
+      top: 24,
+      maxWidth: 'min(900px, 92vw)',
+    },
+    bodyStyle: {
+      maxHeight: 'calc(100vh - 172px)',
+      overflowY: 'auto',
+      padding: '20px 24px 16px',
+    },
+  };
+};
+
 const formatAccountTypeLabel = (value, t) => {
   const tt = typeof t === 'function' ? t : (v) => v;
   const normalized = normalizePlanType(value);
@@ -224,7 +261,7 @@ const RateLimitWindowCard = ({ t, title, windowData }) => {
 
   return (
     <div className='rounded-lg border border-semi-color-border bg-semi-color-bg-0 p-3'>
-      <div className='flex items-center justify-between gap-2'>
+      <div className='flex flex-wrap items-start justify-between gap-x-3 gap-y-1'>
         <div className='font-medium'>{title}</div>
         <Text type='tertiary' size='small'>
           {tt('重置时间：')}
@@ -262,12 +299,86 @@ const RateLimitWindowCard = ({ t, title, windowData }) => {
   );
 };
 
+const RateLimitWindowGrid = ({ t, fiveHourWindow, weeklyWindow }) => {
+  const tt = typeof t === 'function' ? t : (v) => v;
+
+  return (
+    <div className='grid grid-cols-1 gap-3 md:grid-cols-2'>
+      <RateLimitWindowCard
+        t={tt}
+        title={tt('5小时窗口')}
+        windowData={fiveHourWindow}
+      />
+      <RateLimitWindowCard
+        t={tt}
+        title={tt('每周窗口')}
+        windowData={weeklyWindow}
+      />
+    </div>
+  );
+};
+
+const RateLimitGroupSection = ({
+  t,
+  title,
+  description,
+  rateLimitSource,
+  statusTag,
+  meteredFeature,
+}) => {
+  const tt = typeof t === 'function' ? t : (v) => v;
+  const { fiveHourWindow, weeklyWindow } =
+    resolveRateLimitWindows(rateLimitSource);
+  const featureText = getDisplayText(meteredFeature);
+
+  return (
+    <section className='space-y-3'>
+      <div className='flex flex-wrap items-start justify-between gap-3'>
+        <div className='min-w-0 space-y-2'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <div className='text-sm font-semibold text-semi-color-text-0'>
+              {title}
+            </div>
+            {statusTag}
+          </div>
+          {(description || featureText) && (
+            <div className='flex flex-wrap items-center gap-2 text-xs text-semi-color-text-2'>
+              {description ? <span>{description}</span> : null}
+              {featureText ? (
+                <div className='inline-flex max-w-full items-center gap-2 rounded-full bg-semi-color-fill-0 px-2 py-1'>
+                  <span className='text-[11px] text-semi-color-text-2'>
+                    metered_feature
+                  </span>
+                  <span className='min-w-0 break-all font-mono text-xs text-semi-color-text-0'>
+                    {featureText}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <RateLimitWindowGrid
+        t={tt}
+        fiveHourWindow={fiveHourWindow}
+        weeklyWindow={weeklyWindow}
+      />
+    </section>
+  );
+};
+
 const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
   const tt = typeof t === 'function' ? t : (v) => v;
   const [showRawJson, setShowRawJson] = useState(false);
   const data = payload?.data ?? null;
   const rateLimit = data?.rate_limit ?? {};
-  const { fiveHourWindow, weeklyWindow } = resolveRateLimitWindows(data);
+  const additionalRateLimits = Array.isArray(data?.additional_rate_limits)
+    ? data.additional_rate_limits.filter(
+        (item) =>
+          item && typeof item === 'object' && Object.keys(item).length > 0,
+      )
+    : [];
   const upstreamStatus = payload?.upstream_status;
   const accountType = data?.plan_type ?? rateLimit?.plan_type;
   const accountTypeLabel = formatAccountTypeLabel(accountType, tt);
@@ -277,7 +388,9 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
   const email = data?.email;
   const accountId = data?.account_id;
   const errorMessage =
-    payload?.success === false ? getDisplayText(payload?.message) || tt('获取用量失败') : '';
+    payload?.success === false
+      ? getDisplayText(payload?.message) || tt('获取用量失败')
+      : '';
 
   const rawText =
     typeof data === 'string' ? data : JSON.stringify(data ?? payload, null, 2);
@@ -313,7 +426,12 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
               </Tag>
             </div>
           </div>
-          <Button size='small' type='tertiary' theme='outline' onClick={onRefresh}>
+          <Button
+            size='small'
+            type='tertiary'
+            theme='outline'
+            onClick={onRefresh}
+          >
             {tt('刷新')}
           </Button>
         </div>
@@ -355,22 +473,61 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
             {tt('额度窗口')}
           </div>
           <Text type='tertiary' size='small'>
-            {tt('用于观察当前帐号在 Codex 上游的限额使用情况')}
+            {tt(
+              '用于观察当前帐号在 Codex 上游的基础限额与附加计费能力使用情况',
+            )}
           </Text>
         </div>
       </div>
 
-      <div className='grid grid-cols-1 gap-3 md:grid-cols-2'>
-        <RateLimitWindowCard
+      <div className='space-y-5'>
+        <RateLimitGroupSection
           t={tt}
-          title={tt('5小时窗口')}
-          windowData={fiveHourWindow}
-        />
-        <RateLimitWindowCard
-          t={tt}
-          title={tt('每周窗口')}
-          windowData={weeklyWindow}
+          title={tt('基础额度')}
+          description={tt('当前帐号的基础额度窗口')}
+          rateLimitSource={data}
+          statusTag={statusTag}
         />
+
+        {additionalRateLimits.length > 0 ? (
+          <div className='space-y-4 border-t border-semi-color-border pt-4'>
+            <div>
+              <div className='text-sm font-semibold text-semi-color-text-0'>
+                {tt('附加额度')}
+              </div>
+              <Text type='tertiary' size='small'>
+                {tt('按模型或能力拆分的附加计费能力窗口')}
+              </Text>
+            </div>
+
+            <div className='space-y-4'>
+              {additionalRateLimits.map((item, index) => {
+                const limitName =
+                  getDisplayText(item?.limit_name) ||
+                  getDisplayText(item?.metered_feature) ||
+                  `${tt('附加额度')} ${index + 1}`;
+
+                return (
+                  <div
+                    key={`${limitName}-${getDisplayText(item?.metered_feature)}-${index}`}
+                    className={
+                      index > 0 ? 'border-t border-semi-color-border pt-4' : ''
+                    }
+                  >
+                    <RateLimitGroupSection
+                      t={tt}
+                      title={limitName}
+                      description={tt('附加计费能力')}
+                      rateLimitSource={item}
+                      statusTag={resolveUsageStatusTag(tt, item?.rate_limit)}
+                      meteredFeature={item?.metered_feature}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
       </div>
 
       <Collapse
@@ -489,12 +646,14 @@ const CodexUsageLoader = ({ t, record, initialPayload, onCopy }) => {
 
 export const openCodexUsageModal = ({ t, record, payload, onCopy }) => {
   const tt = typeof t === 'function' ? t : (v) => v;
+  const layout = getCodexUsageModalLayout();
 
   Modal.info({
     title: tt('Codex 帐号与用量'),
-    centered: true,
-    width: 900,
-    style: { maxWidth: '95vw' },
+    centered: false,
+    width: layout.width,
+    style: layout.style,
+    bodyStyle: layout.bodyStyle,
     content: (
       <CodexUsageLoader
         t={tt}

web/src/components/table/channels/modals/EditChannelModal.jsx

@@ -208,6 +208,7 @@ const EditChannelModal = (props) => {
     allow_safety_identifier: false,
     allow_include_obfuscation: false,
     allow_inference_geo: false,
+    allow_speed: false,
     claude_beta_query: false,
     upstream_model_update_check_enabled: false,
     upstream_model_update_auto_sync_enabled: false,
@@ -890,6 +891,7 @@ const EditChannelModal = (props) => {
             parsedSettings.allow_include_obfuscation || false;
           data.allow_inference_geo =
             parsedSettings.allow_inference_geo || false;
+          data.allow_speed = parsedSettings.allow_speed || false;
           data.claude_beta_query = parsedSettings.claude_beta_query || false;
           data.upstream_model_update_check_enabled =
             parsedSettings.upstream_model_update_check_enabled === true;
@@ -919,6 +921,7 @@ const EditChannelModal = (props) => {
           data.allow_safety_identifier = false;
           data.allow_include_obfuscation = false;
           data.allow_inference_geo = false;
+          data.allow_speed = false;
           data.claude_beta_query = false;
           data.upstream_model_update_check_enabled = false;
           data.upstream_model_update_auto_sync_enabled = false;
@@ -936,6 +939,7 @@ const EditChannelModal = (props) => {
         data.allow_safety_identifier = false;
         data.allow_include_obfuscation = false;
         data.allow_inference_geo = false;
+        data.allow_speed = false;
         data.claude_beta_query = false;
         data.upstream_model_update_check_enabled = false;
         data.upstream_model_update_auto_sync_enabled = false;
@@ -1776,6 +1780,7 @@ const EditChannelModal = (props) => {
       }
       if (localInputs.type === 14) {
         settings.allow_inference_geo = localInputs.allow_inference_geo === true;
+        settings.allow_speed = localInputs.allow_speed === true;
         settings.claude_beta_query = localInputs.claude_beta_query === true;
       }
     }
@@ -1823,6 +1828,7 @@ const EditChannelModal = (props) => {
     delete localInputs.allow_safety_identifier;
     delete localInputs.allow_include_obfuscation;
     delete localInputs.allow_inference_geo;
+    delete localInputs.allow_speed;
     delete localInputs.claude_beta_query;
     delete localInputs.upstream_model_update_check_enabled;
     delete localInputs.upstream_model_update_auto_sync_enabled;
@@ -2480,6 +2486,7 @@ const EditChannelModal = (props) => {
                       </div>
                       <Form.Switch field='allow_service_tier' label={t('允许 service_tier 透传')} checkedText={t('开')} uncheckedText={t('关')} onChange={(value) => handleChannelOtherSettingsChange('allow_service_tier', value)} extraText={t('service_tier 字段用于指定服务层级，允许透传可能导致实际计费高于预期。默认关闭以避免额外费用')} />
                       <Form.Switch field='allow_inference_geo' label={t('允许 inference_geo 透传')} checkedText={t('开')} uncheckedText={t('关')} onChange={(value) => handleChannelOtherSettingsChange('allow_inference_geo', value)} extraText={t('inference_geo 字段用于控制 Claude 数据驻留推理区域。默认关闭以避免未经授权透传地域信息')} />
+                      <Form.Switch field='allow_speed' label={t('允许 speed 透传')} checkedText={t('开')} uncheckedText={t('关')} onChange={(value) => handleChannelOtherSettingsChange('allow_speed', value)} extraText={t('speed 字段用于控制 Claude 推理速度模式。默认关闭以避免意外切换到 fast 模式')} />
                     </>
                   )}
                 </div>

web/src/components/table/channels/modals/ModelTestModal.jsx

@@ -30,6 +30,7 @@ import {
   Banner,
 } from '@douyinfe/semi-ui';
 import { IconSearch, IconInfoCircle } from '@douyinfe/semi-icons';
+import { Settings } from 'lucide-react';
 import { copy, showError, showInfo, showSuccess } from '../../../../helpers';
 import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
 
@@ -168,17 +169,43 @@ const ModelTestModal = ({
         }
 
         return (
-          <div className='flex items-center gap-2'>
-            <Tag color={testResult.success ? 'green' : 'red'} shape='circle'>
-              {testResult.success ? t('成功') : t('失败')}
-            </Tag>
-            {testResult.success && (
-              <Typography.Text type='tertiary'>
-                {t('请求时长: ${time}s').replace(
-                  '${time}',
-                  testResult.time.toFixed(2),
+          <div className='flex flex-col gap-1'>
+            <div className='flex items-center gap-2'>
+              <Tag color={testResult.success ? 'green' : 'red'} shape='circle'>
+                {testResult.success ? t('成功') : t('失败')}
+              </Tag>
+              {testResult.success && (
+                <Typography.Text type='tertiary'>
+                  {t('请求时长: ${time}s').replace(
+                    '${time}',
+                    testResult.time.toFixed(2),
+                  )}
+                </Typography.Text>
+              )}
+            </div>
+            {!testResult.success && testResult.message && (
+              <div className='flex flex-col gap-1'>
+                <Typography.Text
+                  type='danger'
+                  size='small'
+                  className='break-all'
+                  style={{ maxWidth: '400px', fontSize: '12px' }}
+                >
+                  {testResult.message}
+                </Typography.Text>
+                {testResult.errorCode === 'model_price_error' && (
+                  <Button
+                    size='small'
+                    theme='light'
+                    type='warning'
+                    icon={<Settings size={12} />}
+                    onClick={() => window.open('/console/setting?tab=ratio', '_blank')}
+                    style={{ width: 'fit-content' }}
+                  >
+                    {t('前往设置')}
+                  </Button>
                 )}
-              </Typography.Text>
+              </div>
             )}
           </div>
         );

web/src/components/table/channels/modals/MultiKeyManageModal.jsx

@@ -360,7 +360,7 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
     {
       title: t('索引'),
       dataIndex: 'index',
-      render: (text) => `#${text}`,
+      render: (text) => `#${Number(text) + 1}`,
     },
     // {
     //   title: t('密钥预览'),

web/src/components/table/redemptions/modals/EditRedemptionModal.jsx

@@ -25,8 +25,12 @@ import {
   showError,
   showSuccess,
   renderQuota,
-  renderQuotaWithPrompt,
+  getCurrencyConfig,
 } from '../../../../helpers';
+import {
+  quotaToDisplayAmount,
+  displayAmountToQuota,
+} from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
   Button,
@@ -41,6 +45,7 @@ import {
   Avatar,
   Row,
   Col,
+  InputNumber,
 } from '@douyinfe/semi-ui';
 import {
   IconCreditCard,
@@ -57,10 +62,12 @@ const EditRedemptionModal = (props) => {
   const [loading, setLoading] = useState(isEdit);
   const isMobile = useIsMobile();
   const formApiRef = useRef(null);
+  const [showQuotaInput, setShowQuotaInput] = useState(false);
 
   const getInitValues = () => ({
     name: '',
     quota: 100000,
+    amount: Number(quotaToDisplayAmount(100000).toFixed(6)),
     count: 1,
     expired_time: null,
   });
@@ -79,6 +86,7 @@ const EditRedemptionModal = (props) => {
       } else {
         data.expired_time = new Date(data.expired_time * 1000);
       }
+      data.amount = Number(quotaToDisplayAmount(data.quota || 0).toFixed(6));
       formApiRef.current?.setValues({ ...getInitValues(), ...data });
     } else {
       showError(message);
@@ -104,7 +112,12 @@ const EditRedemptionModal = (props) => {
     setLoading(true);
     let localInputs = { ...values };
     localInputs.count = parseInt(localInputs.count) || 0;
-    localInputs.quota = parseInt(localInputs.quota) || 0;
+    localInputs.quota = displayAmountToQuota(localInputs.amount);
+    if (localInputs.quota <= 0) {
+      showError(t('请输入金额'));
+      setLoading(false);
+      return;
+    }
     localInputs.name = name;
     if (!localInputs.expired_time) {
       localInputs.expired_time = 0;
@@ -285,37 +298,63 @@ const EditRedemptionModal = (props) => {
                   </div>
 
                   <Row gutter={12}>
-                    <Col span={12}>
-                      <Form.AutoComplete
-                        field='quota'
-                        label={t('额度')}
-                        placeholder={t('请输入额度')}
+                    <Col span={24}>
+                      <Form.InputNumber
+                        field='amount'
+                        label={t('金额')}
+                        prefix={getCurrencyConfig().symbol}
+                        placeholder={t('输入金额')}
+                        precision={6}
+                        min={0}
+                        step={0.000001}
                         style={{ width: '100%' }}
-                        type='number'
-                        rules={[
-                          { required: true, message: t('请输入额度') },
-                          {
-                            validator: (rule, v) => {
-                              const num = parseInt(v, 10);
-                              return num > 0
-                                ? Promise.resolve()
-                                : Promise.reject(t('额度必须大于0'));
-                            },
-                          },
-                        ]}
-                        extraText={renderQuotaWithPrompt(
-                          Number(values.quota) || 0,
-                        )}
-                        data={[
-                          { value: 500000, label: '1$' },
-                          { value: 5000000, label: '10$' },
-                          { value: 25000000, label: '50$' },
-                          { value: 50000000, label: '100$' },
-                          { value: 250000000, label: '500$' },
-                          { value: 500000000, label: '1000$' },
-                        ]}
+                        onChange={(val) => {
+                          const amount = val === '' || val == null ? 0 : val;
+                          formApiRef.current?.setValue('amount', amount);
+                          formApiRef.current?.setValue(
+                            'quota',
+                            displayAmountToQuota(amount),
+                          );
+                        }}
                         showClear
                       />
+                      <div
+                        className='text-xs cursor-pointer mt-1'
+                        style={{ color: 'var(--semi-color-text-2)' }}
+                        onClick={() => setShowQuotaInput((v) => !v)}
+                      >
+                        {showQuotaInput
+                          ? `▾ ${t('收起原生额度输入')}`
+                          : `▸ ${t('使用原生额度输入')}`}
+                      </div>
+                      <div style={{ display: showQuotaInput ? 'block' : 'none' }} className='mt-2'>
+                        <Form.InputNumber
+                          field='quota'
+                          label={t('额度')}
+                          placeholder={t('输入额度')}
+                          rules={[
+                            { required: true, message: t('请输入额度') },
+                            {
+                              validator: (rule, v) => {
+                                const num = parseInt(v, 10);
+                                return num > 0
+                                  ? Promise.resolve()
+                                  : Promise.reject(t('额度必须大于0'));
+                              },
+                            },
+                          ]}
+                          onChange={(val) => {
+                            const quota = val === '' || val == null ? 0 : val;
+                            formApiRef.current?.setValue('quota', quota);
+                            formApiRef.current?.setValue(
+                              'amount',
+                              Number(quotaToDisplayAmount(quota).toFixed(6)),
+                            );
+                          }}
+                          style={{ width: '100%' }}
+                          showClear
+                        />
+                      </div>
                     </Col>
                     {!isEdit && (
                       <Col span={12}>

web/src/components/table/tokens/TokensColumnDefs.jsx

@@ -536,6 +536,13 @@ export const getTokensColumns = ({
         return <div>{renderTimestamp(text)}</div>;
       },
     },
+    {
+      title: t('最后使用时间'),
+      dataIndex: 'accessed_time',
+      render: (text, record, index) => {
+        return <div>{text ? renderTimestamp(text) : '-'}</div>;
+      },
+    },
     {
       title: t('过期时间'),
       dataIndex: 'expired_time',

web/src/components/table/tokens/modals/EditTokenModal.jsx

@@ -24,10 +24,14 @@ import {
   showSuccess,
   timestamp2string,
   renderGroupOption,
-  renderQuotaWithPrompt,
+  getCurrencyConfig,
   getModelCategories,
   selectFilter,
 } from '../../../../helpers';
+import {
+  quotaToDisplayAmount,
+  displayAmountToQuota,
+} from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
   Button,
@@ -41,6 +45,7 @@ import {
   Form,
   Col,
   Row,
+  InputNumber,
 } from '@douyinfe/semi-ui';
 import {
   IconCreditCard,
@@ -62,11 +67,13 @@ const EditTokenModal = (props) => {
   const formApiRef = useRef(null);
   const [models, setModels] = useState([]);
   const [groups, setGroups] = useState([]);
+  const [showQuotaInput, setShowQuotaInput] = useState(false);
   const isEdit = props.editingToken.id !== undefined;
 
   const getInitValues = () => ({
     name: '',
     remain_quota: 0,
+    remain_amount: 0,
     expired_time: -1,
     unlimited_quota: true,
     model_limits_enabled: false,
@@ -162,6 +169,9 @@ const EditTokenModal = (props) => {
       } else {
         data.model_limits = [];
       }
+      data.remain_amount = Number(
+        quotaToDisplayAmount(data.remain_quota || 0).toFixed(6),
+      );
       if (formApiRef.current) {
         formApiRef.current.setValues({ ...getInitValues(), ...data });
       }
@@ -209,7 +219,14 @@ const EditTokenModal = (props) => {
     setLoading(true);
     if (isEdit) {
       let { tokenCount: _tc, ...localInputs } = values;
-      localInputs.remain_quota = parseInt(localInputs.remain_quota);
+      localInputs.remain_quota = localInputs.unlimited_quota
+        ? 0
+        : displayAmountToQuota(localInputs.remain_amount);
+      if (!localInputs.unlimited_quota && localInputs.remain_quota <= 0) {
+        showError(t('请输入金额'));
+        setLoading(false);
+        return;
+      }
       if (localInputs.expired_time !== -1) {
         let time = Date.parse(localInputs.expired_time);
         if (isNaN(time)) {
@@ -245,7 +262,14 @@ const EditTokenModal = (props) => {
         } else {
           localInputs.name = baseName;
         }
-        localInputs.remain_quota = parseInt(localInputs.remain_quota);
+        localInputs.remain_quota = localInputs.unlimited_quota
+          ? 0
+          : displayAmountToQuota(localInputs.remain_amount);
+        if (!localInputs.unlimited_quota && localInputs.remain_quota <= 0) {
+          showError(t('请输入金额'));
+          setLoading(false);
+          break;
+        }
 
         if (localInputs.expired_time !== -1) {
           let time = Date.parse(localInputs.expired_time);
@@ -497,28 +521,63 @@ const EditTokenModal = (props) => {
                 </div>
                 <Row gutter={12}>
                   <Col span={24}>
-                    <Form.AutoComplete
-                      field='remain_quota'
-                      label={t('额度')}
-                      placeholder={t('请输入额度')}
-                      type='number'
+                    <Form.InputNumber
+                      field='remain_amount'
+                      label={t('金额')}
+                      prefix={getCurrencyConfig().symbol}
+                      placeholder={t('输入金额')}
+                      precision={6}
                       disabled={values.unlimited_quota}
-                      extraText={renderQuotaWithPrompt(values.remain_quota)}
-                      rules={
-                        values.unlimited_quota
-                          ? []
-                          : [{ required: true, message: t('请输入额度') }]
-                      }
-                      data={[
-                        { value: 500000, label: '1$' },
-                        { value: 5000000, label: '10$' },
-                        { value: 25000000, label: '50$' },
-                        { value: 50000000, label: '100$' },
-                        { value: 250000000, label: '500$' },
-                        { value: 500000000, label: '1000$' },
-                      ]}
+                      min={0}
+                      step={0.000001}
+                      onChange={(val) => {
+                        const amount = val === '' || val == null ? 0 : val;
+                        formApiRef.current?.setValue('remain_amount', amount);
+                        formApiRef.current?.setValue(
+                          'remain_quota',
+                          displayAmountToQuota(amount),
+                        );
+                      }}
+                      style={{ width: '100%' }}
+                      showClear
                     />
                   </Col>
+                  <Col span={24}>
+                    <div
+                      className='text-xs cursor-pointer mt-1'
+                      style={{ color: 'var(--semi-color-text-2)' }}
+                      onClick={() => setShowQuotaInput((v) => !v)}
+                    >
+                      {showQuotaInput
+                        ? `▾ ${t('收起原生额度输入')}`
+                        : `▸ ${t('使用原生额度输入')}`}
+                    </div>
+                    <div style={{ display: showQuotaInput ? 'block' : 'none' }} className='mt-2'>
+                      <Form.InputNumber
+                        field='remain_quota'
+                        label={t('额度')}
+                        placeholder={t('输入额度')}
+                        disabled={values.unlimited_quota}
+                        min={0}
+                        step={500000}
+                        rules={
+                          values.unlimited_quota
+                            ? []
+                            : [{ required: true, message: t('请输入额度') }]
+                        }
+                        onChange={(val) => {
+                          const quota = val === '' || val == null ? 0 : val;
+                          formApiRef.current?.setValue('remain_quota', quota);
+                          formApiRef.current?.setValue(
+                            'remain_amount',
+                            Number(quotaToDisplayAmount(quota).toFixed(6)),
+                          );
+                        }}
+                        style={{ width: '100%' }}
+                        showClear
+                      />
+                    </div>
+                  </Col>
                   <Col span={24}>
                     <Form.Switch
                       field='unlimited_quota'

web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx

@@ -845,7 +845,12 @@ export const getLogsColumns = ({
       ),
       dataIndex: 'ip',
       render: (text, record, index) => {
-        return (record.type === 2 || record.type === 5) && text ? (
+        const showIp =
+          (record.type === 2 ||
+            record.type === 5 ||
+            (isAdminUser && record.type === 1)) &&
+          text;
+        return showIp ? (
           <Tooltip content={text}>
             <span>
               <Tag

web/src/components/table/users/modals/EditUserModal.jsx

@@ -24,7 +24,6 @@ import {
   showError,
   showSuccess,
   renderQuota,
-  renderQuotaWithPrompt,
   getCurrencyConfig,
 } from '../../../../helpers';
 import {
@@ -46,6 +45,8 @@ import {
   Row,
   Col,
   InputNumber,
+  RadioGroup,
+  Radio,
 } from '@douyinfe/semi-ui';
 import {
   IconUser,
@@ -53,7 +54,7 @@ import {
   IconClose,
   IconLink,
   IconUserGroup,
-  IconPlus,
+  IconEdit,
 } from '@douyinfe/semi-icons';
 import UserBindingManagementModal from './UserBindingManagementModal';
 
@@ -63,13 +64,18 @@ const EditUserModal = (props) => {
   const { t } = useTranslation();
   const userId = props.editingUser.id;
   const [loading, setLoading] = useState(true);
-  const [addQuotaModalOpen, setIsModalOpen] = useState(false);
-  const [addQuotaLocal, setAddQuotaLocal] = useState('');
-  const [addAmountLocal, setAddAmountLocal] = useState('');
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustQuotaLocal, setAdjustQuotaLocal] = useState('');
+  const [adjustAmountLocal, setAdjustAmountLocal] = useState('');
+  const [adjustMode, setAdjustMode] = useState('add');
+  const [adjustLoading, setAdjustLoading] = useState(false);
   const isMobile = useIsMobile();
   const [groupOptions, setGroupOptions] = useState([]);
   const [bindingModalVisible, setBindingModalVisible] = useState(false);
   const formApiRef = useRef(null);
+  const [showAdjustQuotaRaw, setShowAdjustQuotaRaw] = useState(false);
+  const [showQuotaInput, setShowQuotaInput] = useState(false);
+  const [inputs, setInputs] = useState(null);
 
   const isEdit = Boolean(userId);
 
@@ -85,6 +91,7 @@ const EditUserModal = (props) => {
     linux_do_id: '',
     email: '',
     quota: 0,
+    quota_amount: 0,
     group: 'default',
     remark: '',
   });
@@ -107,13 +114,22 @@ const EditUserModal = (props) => {
     const { success, message, data } = res.data;
     if (success) {
       data.password = '';
-      formApiRef.current?.setValues({ ...getInitValues(), ...data });
+      data.quota_amount = Number(
+        quotaToDisplayAmount(data.quota || 0).toFixed(6),
+      );
+      setInputs({ ...getInitValues(), ...data });
     } else {
       showError(message);
     }
     setLoading(false);
   };
 
+  useEffect(() => {
+    if (inputs && formApiRef.current) {
+      formApiRef.current.setValues(inputs);
+    }
+  }, [inputs]);
+
   useEffect(() => {
     loadUser();
     if (userId) fetchGroups();
@@ -132,8 +148,8 @@ const EditUserModal = (props) => {
   const submit = async (values) => {
     setLoading(true);
     let payload = { ...values };
-    if (typeof payload.quota === 'string')
-      payload.quota = parseInt(payload.quota) || 0;
+    delete payload.quota;
+    delete payload.quota_amount;
     if (userId) {
       payload.id = parseInt(userId);
     }
@@ -150,11 +166,60 @@ const EditUserModal = (props) => {
     setLoading(false);
   };
 
-  /* --------------------- quota helper -------------------- */
-  const addLocalQuota = () => {
-    const current = parseInt(formApiRef.current?.getValue('quota') || 0);
-    const delta = parseInt(addQuotaLocal) || 0;
-    formApiRef.current?.setValue('quota', current + delta);
+  /* --------------------- atomic quota adjust -------------------- */
+  const adjustQuota = async () => {
+    const quotaVal = parseInt(adjustQuotaLocal) || 0;
+    if (quotaVal <= 0 && adjustMode !== 'override') return;
+    if (adjustMode === 'override' && (adjustQuotaLocal === '' || adjustQuotaLocal == null)) return;
+    setAdjustLoading(true);
+    try {
+      const res = await API.post('/api/user/manage', {
+        id: parseInt(userId),
+        action: 'add_quota',
+        mode: adjustMode,
+        value: adjustMode === 'override' ? quotaVal : Math.abs(quotaVal),
+      });
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess(t('调整额度成功'));
+        setAdjustModalOpen(false);
+        setAdjustQuotaLocal('');
+        setAdjustAmountLocal('');
+        const userRes = await API.get(`/api/user/${userId}`);
+        if (userRes.data.success) {
+          const data = userRes.data.data;
+          data.password = '';
+          data.quota_amount = Number(
+            quotaToDisplayAmount(data.quota || 0).toFixed(6),
+          );
+          setInputs({ ...getInitValues(), ...data });
+        }
+        props.refresh();
+      } else {
+        showError(message);
+      }
+    } catch (e) {
+      showError(e.message);
+    }
+    setAdjustLoading(false);
+  };
+
+  const getPreviewText = () => {
+    const current = formApiRef.current?.getValue('quota') || 0;
+    const val = parseInt(adjustQuotaLocal) || 0;
+    let result;
+    switch (adjustMode) {
+      case 'add':
+        result = current + Math.abs(val);
+        return `${t('当前额度')}：${renderQuota(current)}，+${renderQuota(Math.abs(val))} = ${renderQuota(result)}`;
+      case 'subtract':
+        result = current - Math.abs(val);
+        return `${t('当前额度')}：${renderQuota(current)}，-${renderQuota(Math.abs(val))} = ${renderQuota(result)}`;
+      case 'override':
+        return `${t('当前额度')}：${renderQuota(current)} → ${renderQuota(val)}`;
+      default:
+        return '';
+    }
   };
 
   /* --------------------------- UI --------------------------- */
@@ -305,24 +370,47 @@ const EditUserModal = (props) => {
 
                       <Col span={10}>
                         <Form.InputNumber
-                          field='quota'
-                          label={t('剩余额度')}
-                          placeholder={t('请输入新的剩余额度')}
-                          step={500000}
-                          extraText={renderQuotaWithPrompt(values.quota || 0)}
-                          rules={[{ required: true, message: t('请输入额度') }]}
+                          field='quota_amount'
+                          label={t('金额')}
+                          prefix={getCurrencyConfig().symbol}
+                          precision={6}
+                          step={0.000001}
                           style={{ width: '100%' }}
+                          readonly
                         />
                       </Col>
 
                       <Col span={14}>
-                        <Form.Slot label={t('添加额度')}>
+                        <Form.Slot label={t('调整额度')}>
                           <Button
-                            icon={<IconPlus />}
-                            onClick={() => setIsModalOpen(true)}
-                          />
+                            icon={<IconEdit />}
+                            onClick={() => setAdjustModalOpen(true)}
+                          >
+                            {t('调整额度')}
+                          </Button>
                         </Form.Slot>
                       </Col>
+
+                      <Col span={24}>
+                        <div
+                          className='text-xs cursor-pointer'
+                          style={{ color: 'var(--semi-color-text-2)' }}
+                          onClick={() => setShowQuotaInput((v) => !v)}
+                        >
+                          {showQuotaInput
+                            ? `▾ ${t('收起原生额度输入')}`
+                            : `▸ ${t('使用原生额度输入')}`}
+                        </div>
+                        <div style={{ display: showQuotaInput ? 'block' : 'none' }} className='mt-2'>
+                          <Form.InputNumber
+                            field='quota'
+                            label={t('额度')}
+                            placeholder={t('请输入额度')}
+                            style={{ width: '100%' }}
+                            readonly
+                          />
+                        </div>
+                      </Col>
                     </Row>
                   </Card>
                 )}
@@ -372,81 +460,102 @@ const EditUserModal = (props) => {
         formApiRef={formApiRef}
       />
 
-      {/* 添加额度模态框 */}
+      {/* 调整额度模态框 */}
       <Modal
         centered
-        visible={addQuotaModalOpen}
-        onOk={() => {
-          addLocalQuota();
-          setIsModalOpen(false);
-          setAddQuotaLocal('');
-          setAddAmountLocal('');
-        }}
+        visible={adjustModalOpen}
+        onOk={adjustQuota}
         onCancel={() => {
-          setIsModalOpen(false);
+          setAdjustModalOpen(false);
+          setAdjustQuotaLocal('');
+          setAdjustAmountLocal('');
+          setAdjustMode('add');
         }}
+        confirmLoading={adjustLoading}
         closable={null}
         title={
           <div className='flex items-center'>
-            <IconPlus className='mr-2' />
-            {t('添加额度')}
+            <IconEdit className='mr-2' />
+            {t('调整额度')}
           </div>
         }
       >
         <div className='mb-4'>
-          {(() => {
-            const current = formApiRef.current?.getValue('quota') || 0;
-            return (
-              <Text type='secondary' className='block mb-2'>
-                {`${t('新额度：')}${renderQuota(current)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(current + parseInt(addQuotaLocal || 0))}`}
-              </Text>
-            );
-          })()}
+          <Text type='secondary' className='block mb-2'>
+            {getPreviewText()}
+          </Text>
         </div>
-        {getCurrencyConfig().type !== 'TOKENS' && (
-          <div className='mb-3'>
-            <div className='mb-1'>
-              <Text size='small'>{t('金额')}</Text>
-              <Text size='small' type='tertiary'>
-                {' '}
-                ({t('仅用于换算，实际保存的是额度')})
-              </Text>
-            </div>
-            <InputNumber
-              prefix={getCurrencyConfig().symbol}
-              placeholder={t('输入金额')}
-              value={addAmountLocal}
-              precision={2}
-              onChange={(val) => {
-                setAddAmountLocal(val);
-                setAddQuotaLocal(
-                  val != null && val !== ''
-                    ? displayAmountToQuota(Math.abs(val)) * Math.sign(val)
-                    : '',
-                );
-              }}
-              style={{ width: '100%' }}
-              showClear
-            />
+        <div className='mb-3'>
+          <div className='mb-1'>
+            <Text size='small'>{t('操作')}</Text>
           </div>
-        )}
-        <div>
+          <RadioGroup
+            type='button'
+            value={adjustMode}
+            onChange={(e) => {
+              setAdjustMode(e.target.value);
+              setAdjustQuotaLocal('');
+              setAdjustAmountLocal('');
+            }}
+            style={{ width: '100%' }}
+          >
+            <Radio value='add'>{t('添加')}</Radio>
+            <Radio value='subtract'>{t('减少')}</Radio>
+            <Radio value='override'>{t('覆盖')}</Radio>
+          </RadioGroup>
+        </div>
+        <div className='mb-3'>
+          <div className='mb-1'>
+            <Text size='small'>{t('金额')}</Text>
+          </div>
+          <InputNumber
+            prefix={getCurrencyConfig().symbol}
+            placeholder={t('输入金额')}
+            value={adjustAmountLocal}
+            precision={6}
+            min={adjustMode === 'override' ? undefined : 0}
+            step={0.000001}
+            onChange={(val) => {
+              const amount = val === '' || val == null ? '' : val;
+              setAdjustAmountLocal(amount);
+              setAdjustQuotaLocal(
+                amount === ''
+                  ? ''
+                  : adjustMode === 'override'
+                    ? displayAmountToQuota(amount)
+                    : displayAmountToQuota(Math.abs(amount)),
+              );
+            }}
+            style={{ width: '100%' }}
+            showClear
+          />
+        </div>
+        <div
+          className='text-xs cursor-pointer mt-2'
+          style={{ color: 'var(--semi-color-text-2)' }}
+          onClick={() => setShowAdjustQuotaRaw((v) => !v)}
+        >
+          {showAdjustQuotaRaw
+            ? `▾ ${t('收起原生额度输入')}`
+            : `▸ ${t('使用原生额度输入')}`}
+        </div>
+        <div style={{ display: showAdjustQuotaRaw ? 'block' : 'none' }} className='mt-2'>
           <div className='mb-1'>
             <Text size='small'>{t('额度')}</Text>
           </div>
           <InputNumber
             placeholder={t('输入额度')}
-            value={addQuotaLocal}
+            value={adjustQuotaLocal}
+            min={adjustMode === 'override' ? undefined : 0}
             onChange={(val) => {
-              setAddQuotaLocal(val);
-              setAddAmountLocal(
-                val != null && val !== ''
-                  ? Number(
-                      (
-                        quotaToDisplayAmount(Math.abs(val)) * Math.sign(val)
-                      ).toFixed(2),
-                    )
-                  : '',
+              const quota = val === '' || val == null ? '' : val;
+              setAdjustQuotaLocal(quota);
+              setAdjustAmountLocal(
+                quota === ''
+                  ? ''
+                  : adjustMode === 'override'
+                    ? Number(quotaToDisplayAmount(quota).toFixed(6))
+                    : Number(quotaToDisplayAmount(Math.abs(quota)).toFixed(6)),
               );
             }}
             style={{ width: '100%' }}

web/src/components/topup/RechargeCard.jsx

@@ -21,7 +21,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Typography,
-  Tag,
   Card,
   Button,
   Banner,
@@ -32,6 +31,7 @@ import {
   Col,
   Spin,
   Tooltip,
+  Tag,
   Tabs,
   TabPane,
 } from '@douyinfe/semi-ui';
@@ -88,8 +88,7 @@ const RechargeCard = ({
   topupInfo,
   onOpenHistory,
   enableWaffoTopUp,
-  waffoTopUp,
-  waffoPayMethods,
+  enableWaffoPancakeTopUp,
   subscriptionLoading = false,
   subscriptionPlans = [],
   billingPreference,
@@ -105,6 +104,7 @@ const RechargeCard = ({
   const [activeTab, setActiveTab] = useState('topup');
   const shouldShowSubscription =
     !subscriptionLoading && subscriptionPlans.length > 0;
+  const regularPayMethods = payMethods || [];
 
   useEffect(() => {
     if (initialTabSetRef.current) return;
@@ -227,19 +227,31 @@ const RechargeCard = ({
           <div className='py-8 flex justify-center'>
             <Spin size='large' />
           </div>
-        ) : enableOnlineTopUp || enableStripeTopUp || enableCreemTopUp || enableWaffoTopUp ? (
+        ) : enableOnlineTopUp ||
+          enableStripeTopUp ||
+          enableCreemTopUp ||
+          enableWaffoTopUp ||
+          enableWaffoPancakeTopUp ? (
           <Form
             getFormApi={(api) => (onlineFormApiRef.current = api)}
             initValues={{ topUpCount: topUpCount }}
           >
             <div className='space-y-6'>
-              {(enableOnlineTopUp || enableStripeTopUp || enableWaffoTopUp) && (
+              {(enableOnlineTopUp ||
+                enableStripeTopUp ||
+                enableWaffoTopUp ||
+                enableWaffoPancakeTopUp) && (
                 <Row gutter={12}>
                   <Col xs={24} sm={24} md={24} lg={10} xl={10}>
                     <Form.InputNumber
                       field='topUpCount'
                       label={t('充值数量')}
-                      disabled={!enableOnlineTopUp && !enableStripeTopUp && !enableWaffoTopUp}
+                      disabled={
+                        !enableOnlineTopUp &&
+                        !enableStripeTopUp &&
+                        !enableWaffoTopUp &&
+                        !enableWaffoPancakeTopUp
+                      }
                       placeholder={
                         t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
                       }
@@ -291,16 +303,27 @@ const RechargeCard = ({
                       style={{ width: '100%' }}
                     />
                   </Col>
-                  {payMethods && payMethods.filter(m => m.type !== 'waffo').length > 0 && (
-                  <Col xs={24} sm={24} md={24} lg={14} xl={14}>
-                    <Form.Slot label={t('选择支付方式')}>
+                  {regularPayMethods.length > 0 && (
+                    <Col xs={24} sm={24} md={24} lg={14} xl={14}>
+                      <Form.Slot label={t('选择支付方式')}>
                         <Space wrap>
-                          {payMethods.filter(m => m.type !== 'waffo').map((payMethod) => {
-                            const minTopupVal = Number(payMethod.min_topup) || 0;
+                          {regularPayMethods.map((payMethod) => {
+                            const minTopupVal =
+                              Number(payMethod.min_topup) || 0;
                             const isStripe = payMethod.type === 'stripe';
+                            const isWaffo =
+                              typeof payMethod.type === 'string' &&
+                              payMethod.type.startsWith('waffo:');
+                            const isWaffoPancake =
+                              payMethod.type === 'waffo_pancake';
                             const disabled =
-                              (!enableOnlineTopUp && !isStripe) ||
+                              (!enableOnlineTopUp &&
+                                !isStripe &&
+                                !isWaffo &&
+                                !isWaffoPancake) ||
                               (!enableStripeTopUp && isStripe) ||
+                              (!enableWaffoTopUp && isWaffo) ||
+                              (!enableWaffoPancakeTopUp && isWaffoPancake) ||
                               minTopupVal > Number(topUpCount || 0);
 
                             const buttonEl = (
@@ -320,6 +343,21 @@ const RechargeCard = ({
                                     <SiWechat size={18} color='#07C160' />
                                   ) : payMethod.type === 'stripe' ? (
                                     <SiStripe size={18} color='#635BFF' />
+                                  ) : payMethod.icon ? (
+                                    <img
+                                      src={payMethod.icon}
+                                      alt={payMethod.name}
+                                      style={{
+                                        width: 18,
+                                        height: 18,
+                                        objectFit: 'contain',
+                                      }}
+                                    />
+                                  ) : payMethod.type === 'waffo_pancake' ? (
+                                    <CreditCard
+                                      size={18}
+                                      color='var(--semi-color-primary)'
+                                    />
                                   ) : (
                                     <CreditCard
                                       size={18}
@@ -355,8 +393,8 @@ const RechargeCard = ({
                             );
                           })}
                         </Space>
-                    </Form.Slot>
-                  </Col>
+                      </Form.Slot>
+                    </Col>
                   )}
                 </Row>
               )}
@@ -388,7 +426,9 @@ const RechargeCard = ({
                   <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;
+                        preset.discount ||
+                        topupInfo?.discount?.[preset.value] ||
+                        1.0;
                       const originalPrice = preset.value * priceRatio;
                       const discountedPrice = originalPrice * discount;
                       const hasDiscount = discount < 1.0;
@@ -404,7 +444,7 @@ const RechargeCard = ({
                           const s = JSON.parse(statusStr);
                           usdRate = s?.usd_exchange_rate || 7;
                         }
-                      } catch (e) { }
+                      } catch (e) {}
 
                       let displayValue = preset.value; // 显示的数量
                       let displayActualPay = actualPay;
@@ -455,7 +495,10 @@ const RechargeCard = ({
                               {hasDiscount && (
                                 <Tag style={{ marginLeft: 4 }} color='green'>
                                   {t('折').includes('off')
-                                    ? ((1 - parseFloat(discount)) * 100).toFixed(1)
+                                    ? (
+                                        (1 - parseFloat(discount)) *
+                                        100
+                                      ).toFixed(1)
                                     : (discount * 10).toFixed(1)}
                                   {t('折')}
                                 </Tag>
@@ -482,46 +525,6 @@ const RechargeCard = ({
                 </Form.Slot>
               )}
 
-              {/* Waffo 充值区域 */}
-              {enableWaffoTopUp &&
-                waffoPayMethods &&
-                waffoPayMethods.length > 0 && (
-                  <Form.Slot label={t('Waffo 充值')}>
-                    <Space wrap>
-                      {waffoPayMethods.map((method, index) => (
-                        <Button
-                          key={index}
-                          theme='outline'
-                          type='tertiary'
-                          onClick={() => waffoTopUp(index)}
-                          loading={paymentLoading}
-                          icon={
-                            method.icon ? (
-                              <img
-                                src={method.icon}
-                                alt={method.name}
-                                style={{
-                                  width: 36,
-                                  height: 36,
-                                  objectFit: 'contain',
-                                }}
-                              />
-                            ) : (
-                              <CreditCard
-                                size={18}
-                                color='var(--semi-color-text-2)'
-                              />
-                            )
-                          }
-                          className='!rounded-lg !px-4 !py-2'
-                        >
-                          {method.name}
-                        </Button>
-                      ))}
-                    </Space>
-                  </Form.Slot>
-                )}
-
               {/* Creem 充值区域 */}
               {enableCreemTopUp && creemProducts.length > 0 && (
                 <Form.Slot label={t('Creem 充值')}>

web/src/components/topup/SubscriptionPlansCard.jsx

@@ -442,6 +442,14 @@ const SubscriptionPlansCard = ({
                             (subscription?.end_time || 0) * 1000,
                           ).toLocaleString()}
                         </div>
+                        {isActive && subscription?.next_reset_time > 0 && (
+                          <div className='text-xs text-gray-500 mb-2'>
+                            {t('下一次重置')}:{' '}
+                            {new Date(
+                              subscription.next_reset_time * 1000,
+                            ).toLocaleString()}
+                          </div>
+                        )}
                         <div className='text-xs text-gray-500 mb-2'>
                           {t('总额度')}:{' '}
                           {totalAmount > 0 ? (

web/src/components/topup/index.jsx

@@ -75,6 +75,8 @@ const TopUp = () => {
   const [enableWaffoTopUp, setEnableWaffoTopUp] = useState(false);
   const [waffoPayMethods, setWaffoPayMethods] = useState([]);
   const [waffoMinTopUp, setWaffoMinTopUp] = useState(1);
+  const [enableWaffoPancakeTopUp, setEnableWaffoPancakeTopUp] = useState(false);
+  const [waffoPancakeMinTopUp, setWaffoPancakeMinTopUp] = useState(1);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [open, setOpen] = useState(false);
@@ -112,6 +114,39 @@ const TopUp = () => {
     discount: {},
   });
 
+  const confirmPayMethods = [
+    ...payMethods,
+    ...waffoPayMethods.map((method, index) => ({
+      ...method,
+      type: `waffo:${index}`,
+      min_topup: waffoMinTopUp,
+      color: method.color || 'rgba(var(--semi-primary-5), 1)',
+    })),
+  ];
+
+  const getPayMethodConfig = (payment) =>
+    confirmPayMethods.find((method) => method.type === payment);
+
+  const getPaymentMinTopUp = (payment) => {
+    const configuredMinTopUp = Number(getPayMethodConfig(payment)?.min_topup);
+    return Number.isFinite(configuredMinTopUp) && configuredMinTopUp > 0
+      ? configuredMinTopUp
+      : minTopUp;
+  };
+
+  const requestAmountByPayment = async (payment, value) => {
+    if (payment === 'stripe') {
+      return getStripeAmount(value);
+    }
+    if (payment === 'waffo_pancake') {
+      return getWaffoPancakeAmount(value);
+    }
+    if (typeof payment === 'string' && payment.startsWith('waffo:')) {
+      return getWaffoAmount(value);
+    }
+    return getAmount(value);
+  };
+
   const topUp = async () => {
     if (redemptionCode === '') {
       showInfo(t('请输入兑换码！'));
@@ -162,6 +197,16 @@ const TopUp = () => {
         showError(t('管理员未开启Stripe充值！'));
         return;
       }
+    } else if (payment === 'waffo_pancake') {
+      if (!enableWaffoPancakeTopUp) {
+        showError(t('管理员未开启 Waffo Pancake 充值！'));
+        return;
+      }
+    } else if (payment.startsWith('waffo:')) {
+      if (!enableWaffoTopUp) {
+        showError(t('管理员未开启 Waffo 充值！'));
+        return;
+      }
     } else {
       if (!enableOnlineTopUp) {
         showError(t('管理员未开启在线充值！'));
@@ -172,14 +217,11 @@ const TopUp = () => {
     setPayWay(payment);
     setPaymentLoading(true);
     try {
-      if (payment === 'stripe') {
-        await getStripeAmount();
-      } else {
-        await getAmount();
-      }
+      const selectedMinTopUp = getPaymentMinTopUp(payment);
+      await requestAmountByPayment(payment);
 
-      if (topUpCount < minTopUp) {
-        showError(t('充值数量不能小于') + minTopUp);
+      if (topUpCount < selectedMinTopUp) {
+        showError(t('充值数量不能小于') + selectedMinTopUp);
         return;
       }
       setOpen(true);
@@ -191,6 +233,29 @@ const TopUp = () => {
   };
 
   const onlineTopUp = async () => {
+    if (payWay === 'waffo_pancake') {
+      setConfirmLoading(true);
+      try {
+        await waffoPancakeTopUp();
+      } finally {
+        setOpen(false);
+        setConfirmLoading(false);
+      }
+      return;
+    }
+
+    if (payWay.startsWith('waffo:')) {
+      const payMethodIndex = Number(payWay.split(':')[1]);
+      setConfirmLoading(true);
+      try {
+        await waffoTopUp(Number.isFinite(payMethodIndex) ? payMethodIndex : 0);
+      } finally {
+        setOpen(false);
+        setConfirmLoading(false);
+      }
+      return;
+    }
+
     if (payWay === 'stripe') {
       // Stripe 支付处理
       if (amount === 0) {
@@ -317,32 +382,122 @@ const TopUp = () => {
 
   const waffoTopUp = async (payMethodIndex) => {
     try {
-        if (topUpCount < waffoMinTopUp) {
-            showError(t('充值数量不能小于') + waffoMinTopUp);
-            return;
-        }
-        setPaymentLoading(true);
-        const requestBody = {
-            amount: parseInt(topUpCount),
-        };
-        if (payMethodIndex != null) {
-            requestBody.pay_method_index = payMethodIndex;
-        }
-        const res = await API.post('/api/user/waffo/pay', requestBody);
-        if (res !== undefined) {
-            const { message, data } = res.data;
-            if (message === 'success' && data?.payment_url) {
-                window.open(data.payment_url, '_blank');
-            } else {
-                showError(data || t('支付请求失败'));
-            }
+      if (topUpCount < waffoMinTopUp) {
+        showError(t('充值数量不能小于') + waffoMinTopUp);
+        return;
+      }
+      setPaymentLoading(true);
+      const requestBody = {
+        amount: parseInt(topUpCount),
+      };
+      if (payMethodIndex != null) {
+        requestBody.pay_method_index = payMethodIndex;
+      }
+      const res = await API.post('/api/user/waffo/pay', requestBody);
+      if (res !== undefined) {
+        const { message, data } = res.data;
+        if (message === 'success' && data?.payment_url) {
+          window.open(data.payment_url, '_blank');
         } else {
-            showError(res);
+          showError(data || t('支付请求失败'));
         }
+      } else {
+        showError(res);
+      }
     } catch (e) {
-        showError(t('支付请求失败'));
+      showError(t('支付请求失败'));
     } finally {
-        setPaymentLoading(false);
+      setPaymentLoading(false);
+    }
+  };
+
+  const getWaffoAmount = async (value) => {
+    if (value === undefined) {
+      value = topUpCount;
+    }
+    setAmountLoading(true);
+    try {
+      const res = await API.post('/api/user/waffo/amount', {
+        amount: parseInt(value),
+      });
+      if (res !== undefined) {
+        const { message, data } = res.data;
+        if (message === 'success') {
+          setAmount(parseFloat(data));
+        } else {
+          setAmount(0);
+          Toast.error({ content: '错误：' + data, id: 'getAmount' });
+        }
+      } else {
+        showError(res);
+      }
+    } catch (err) {
+      // amount fetch failed silently
+    } finally {
+      setAmountLoading(false);
+    }
+  };
+
+  const waffoPancakeTopUp = async () => {
+    const minTopUpValue = Number(waffoPancakeMinTopUp || 1);
+    if (topUpCount < minTopUpValue) {
+      showError(t('充值数量不能小于') + minTopUpValue);
+      return;
+    }
+
+    setPaymentLoading(true);
+    try {
+      const res = await API.post('/api/user/waffo-pancake/pay', {
+        amount: parseInt(topUpCount),
+      });
+      if (res !== undefined) {
+        const { message, data } = res.data;
+        if (message === 'success') {
+          const checkoutUrl = data?.checkout_url || '';
+          if (checkoutUrl) {
+            window.open(checkoutUrl, '_blank');
+          } else {
+            showError(t('支付请求失败'));
+          }
+        } else {
+          const errorMsg =
+            typeof data === 'string' ? data : message || t('支付请求失败');
+          showError(errorMsg);
+        }
+      } else {
+        showError(res);
+      }
+    } catch (e) {
+      showError(t('支付请求失败'));
+    } finally {
+      setPaymentLoading(false);
+    }
+  };
+
+  const getWaffoPancakeAmount = async (value) => {
+    if (value === undefined) {
+      value = topUpCount;
+    }
+    setAmountLoading(true);
+    try {
+      const res = await API.post('/api/user/waffo-pancake/amount', {
+        amount: parseInt(value),
+      });
+      if (res !== undefined) {
+        const { message, data } = res.data;
+        if (message === 'success') {
+          setAmount(parseFloat(data));
+        } else {
+          setAmount(0);
+          Toast.error({ content: '错误：' + data, id: 'getAmount' });
+        }
+      } else {
+        showError(res);
+      }
+    } catch (err) {
+      // amount fetch failed silently
+    } finally {
+      setAmountLoading(false);
     }
   };
 
@@ -481,20 +636,26 @@ const TopUp = () => {
           const enableStripeTopUp = data.enable_stripe_topup || false;
           const enableOnlineTopUp = data.enable_online_topup || false;
           const enableCreemTopUp = data.enable_creem_topup || false;
+          const enableWaffoTopUp = data.enable_waffo_topup || false;
+          const enableWaffoPancakeTopUp =
+            data.enable_waffo_pancake_topup || false;
           const minTopUpValue = enableOnlineTopUp
             ? data.min_topup
             : enableStripeTopUp
               ? data.stripe_min_topup
-              : data.enable_waffo_topup
+              : enableWaffoTopUp
                 ? data.waffo_min_topup
+                : enableWaffoPancakeTopUp
+                  ? data.waffo_pancake_min_topup
                 : 1;
           setEnableOnlineTopUp(enableOnlineTopUp);
           setEnableStripeTopUp(enableStripeTopUp);
           setEnableCreemTopUp(enableCreemTopUp);
-          const enableWaffoTopUp = data.enable_waffo_topup || false;
           setEnableWaffoTopUp(enableWaffoTopUp);
           setWaffoPayMethods(data.waffo_pay_methods || []);
           setWaffoMinTopUp(data.waffo_min_topup || 1);
+          setEnableWaffoPancakeTopUp(enableWaffoPancakeTopUp);
+          setWaffoPancakeMinTopUp(data.waffo_pancake_min_topup || 1);
           setMinTopUp(minTopUpValue);
           setTopUpCount(minTopUpValue);
 
@@ -739,7 +900,7 @@ const TopUp = () => {
         amountLoading={amountLoading}
         renderAmount={renderAmount}
         payWay={payWay}
-        payMethods={payMethods}
+        payMethods={confirmPayMethods}
         amountNumber={amount}
         discountRate={topupInfo?.discount?.[topUpCount] || 1.0}
       />
@@ -789,8 +950,7 @@ const TopUp = () => {
           creemProducts={creemProducts}
           creemPreTopUp={creemPreTopUp}
           enableWaffoTopUp={enableWaffoTopUp}
-          waffoTopUp={waffoTopUp}
-          waffoPayMethods={waffoPayMethods}
+          enableWaffoPancakeTopUp={enableWaffoPancakeTopUp}
           presetAmounts={presetAmounts}
           selectedPreset={selectedPreset}
           selectPresetAmount={selectPresetAmount}
@@ -804,7 +964,7 @@ const TopUp = () => {
           setSelectedPreset={setSelectedPreset}
           renderAmount={renderAmount}
           amountLoading={amountLoading}
-          payMethods={payMethods}
+          payMethods={confirmPayMethods}
           preTopUp={preTopUp}
           paymentLoading={paymentLoading}
           payWay={payWay}

web/src/components/topup/modals/PaymentConfirmModal.jsx

@@ -140,6 +140,17 @@ const PaymentConfirmModal = ({
                             size={16}
                             color='#635BFF'
                           />
+                        ) : payMethod.icon ? (
+                          <img
+                            src={payMethod.icon}
+                            alt={payMethod.name}
+                            className='mr-2'
+                            style={{
+                              width: 16,
+                              height: 16,
+                              objectFit: 'contain',
+                            }}
+                          />
                         ) : (
                           <CreditCard
                             className='mr-2'

web/src/components/topup/modals/TopupHistoryModal.jsx

@@ -161,6 +161,16 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
 
   const columns = useMemo(() => {
     const baseColumns = [
+      ...(userIsAdmin
+        ? [
+            {
+              title: t('用户ID'),
+              dataIndex: 'user_id',
+              key: 'user_id',
+              render: (userId) => <Text>{userId ?? '-'}</Text>,
+            },
+          ]
+        : []),
       {
         title: t('订单号'),
         dataIndex: 'trade_no',

web/src/helpers/quota.js

@@ -1,3 +1,21 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
 import { getCurrencyConfig } from './render';
 
 export const getQuotaPerUnit = () => {
@@ -7,19 +25,23 @@ export const getQuotaPerUnit = () => {
 
 export const quotaToDisplayAmount = (quota) => {
   const q = Number(quota || 0);
-  if (!Number.isFinite(q) || q <= 0) return 0;
+  if (!Number.isFinite(q) || q === 0) return 0;
+  const sign = Math.sign(q);
+  const abs = Math.abs(q);
   const { type, rate } = getCurrencyConfig();
   if (type === 'TOKENS') return q;
-  const usd = q / getQuotaPerUnit();
-  if (type === 'USD') return usd;
-  return usd * (rate || 1);
+  const usd = abs / getQuotaPerUnit();
+  if (type === 'USD') return sign * usd;
+  return sign * usd * (rate || 1);
 };
 
 export const displayAmountToQuota = (amount) => {
   const val = Number(amount || 0);
-  if (!Number.isFinite(val) || val <= 0) return 0;
+  if (!Number.isFinite(val) || val === 0) return 0;
+  const sign = Math.sign(val);
+  const abs = Math.abs(val);
   const { type, rate } = getCurrencyConfig();
   if (type === 'TOKENS') return Math.round(val);
-  const usd = type === 'USD' ? val : val / (rate || 1);
-  return Math.round(usd * getQuotaPerUnit());
+  const usd = type === 'USD' ? abs : abs / (rate || 1);
+  return sign * Math.round(usd * getQuotaPerUnit());
 };

web/src/hooks/channels/useChannelsData.jsx

@@ -890,7 +890,7 @@ export const useChannelsData = () => {
         return Promise.resolve();
       }
 
-      const { success, message, time } = res.data;
+      const { success, message, time, error_code } = res.data;
 
       // 更新测试结果
       setModelTestResults((prev) => ({
@@ -900,6 +900,7 @@ export const useChannelsData = () => {
           message,
           time: time || 0,
           timestamp: Date.now(),
+          errorCode: error_code || null,
         },
       }));
 
@@ -927,7 +928,7 @@ export const useChannelsData = () => {
           );
         }
       } else {
-        showError(`${t('模型')} ${model}: ${message}`);
+        showError(message);
       }
     } catch (error) {
       // 处理网络错误
@@ -939,9 +940,10 @@ export const useChannelsData = () => {
           message: error.message || t('网络错误'),
           time: 0,
           timestamp: Date.now(),
+          errorCode: null,
         },
       }));
-      showError(`${t('模型')} ${model}: ${error.message || t('测试失败')}`);
+      showError(error.message || t('测试失败'));
     } finally {
       // 从正在测试的模型集合中移除
       setTestingModels((prev) => {

web/src/hooks/dashboard/useDashboardCharts.jsx

@@ -214,6 +214,29 @@ export const useDashboardCharts = (
           },
         ],
       },
+      dimension: {
+        content: [
+          {
+            key: (datum) => datum['Model'],
+            value: (datum) => datum['Count'] || 0,
+          },
+        ],
+        updateContent: (array) => {
+          array.sort((a, b) => b.value - a.value);
+          let sum = 0;
+          for (let i = 0; i < array.length; i++) {
+            let value = parseFloat(array[i].value);
+            if (isNaN(value)) value = 0;
+            sum += value;
+            array[i].value = renderNumber(value);
+          }
+          array.unshift({
+            key: t('总计'),
+            value: renderNumber(sum),
+          });
+          return array;
+        },
+      },
     },
     color: {
       specified: modelColorMap,
@@ -335,6 +358,27 @@ export const useDashboardCharts = (
           value: (datum) => renderQuota(datum['rawQuota'] || 0, 4),
         }],
       },
+      dimension: {
+        content: [{
+          key: (datum) => datum['User'],
+          value: (datum) => datum['rawQuota'] || 0,
+        }],
+        updateContent: (array) => {
+          array.sort((a, b) => b.value - a.value);
+          let sum = 0;
+          for (let i = 0; i < array.length; i++) {
+            let value = parseFloat(array[i].value);
+            if (isNaN(value)) value = 0;
+            sum += value;
+            array[i].value = renderQuota(value, 4);
+          }
+          array.unshift({
+            key: t('总计'),
+            value: renderQuota(sum, 4),
+          });
+          return array;
+        },
+      },
     },
     color: { type: 'ordinal', range: USER_COLORS },
   });
@@ -463,13 +507,25 @@ export const useDashboardCharts = (
       modelLineData.sort((a, b) => a.Time.localeCompare(b.Time));
 
       // ===== 模型调用次数排行柱状图 =====
-      const rankData = Array.from(modelTotals)
+      const MAX_RANK_MODELS = 20;
+      const allRankData = Array.from(modelTotals)
         .map(([model, count]) => ({
           Model: model,
           Count: count,
         }))
         .sort((a, b) => b.Count - a.Count);
 
+      let rankData;
+      if (allRankData.length > MAX_RANK_MODELS) {
+        const topModels = allRankData.slice(0, MAX_RANK_MODELS);
+        const otherCount = allRankData
+          .slice(MAX_RANK_MODELS)
+          .reduce((sum, item) => sum + item.Count, 0);
+        rankData = [...topModels, { Model: t('其他'), Count: otherCount }];
+      } else {
+        rankData = allRankData;
+      }
+
       updateChartSpec(
         setSpecModelLine,
         modelLineData,

web/src/hooks/playground/useApiRequest.jsx

@@ -196,10 +196,17 @@ export const useApiRequest = (
 
         if (!response.ok) {
           let errorBody = '';
+          let parsedError = null;
           try {
             errorBody = await response.text();
+            const errorJson = JSON.parse(errorBody);
+            if (errorJson?.error) {
+              parsedError = errorJson.error;
+            }
           } catch (e) {
-            errorBody = '无法读取错误响应体';
+            if (!errorBody) {
+              errorBody = '无法读取错误响应体';
+            }
           }
 
           const errorInfo = handleApiError(
@@ -215,9 +222,13 @@ export const useApiRequest = (
           }));
           setActiveDebugTab(DEBUG_TABS.RESPONSE);
 
-          throw new Error(
-            `HTTP error! status: ${response.status}, body: ${errorBody}`,
+          const err = new Error(
+            parsedError?.message ||
+              `HTTP error! status: ${response.status}, body: ${errorBody}`,
           );
+          err.errorCode = parsedError?.code || null;
+          err.errorType = parsedError?.type || null;
+          throw err;
         }
 
         const data = await response.json();
@@ -277,6 +288,7 @@ export const useApiRequest = (
             newMessages[newMessages.length - 1] = {
               ...lastMessage,
               content: t('请求发生错误: ') + error.message,
+              errorCode: error.errorCode || null,
               status: MESSAGE_STATUS.ERROR,
               ...autoCollapseState,
             };
@@ -379,7 +391,20 @@ export const useApiRequest = (
         // 只有在流没有正常完成且连接状态异常时才处理错误
         if (!isStreamComplete && source.readyState !== 2) {
           console.error('SSE Error:', e);
-          const errorMessage = e.data || t('请求发生错误');
+          let errorMessage = e.data || t('请求发生错误');
+          let errorCode = null;
+
+          if (e.data) {
+            try {
+              const errorJson = JSON.parse(e.data);
+              if (errorJson?.error) {
+                errorMessage = errorJson.error.message || errorMessage;
+                errorCode = errorJson.error.code || null;
+              }
+            } catch (_) {
+              // not JSON, use raw data as error message
+            }
+          }
 
           const errorInfo = handleApiError(new Error(errorMessage));
           errorInfo.readyState = source.readyState;
@@ -393,8 +418,19 @@ export const useApiRequest = (
           }));
           setActiveDebugTab(DEBUG_TABS.RESPONSE);
 
-          streamMessageUpdate(errorMessage, 'content');
-          completeMessage(MESSAGE_STATUS.ERROR);
+          setMessage((prevMessage) => {
+            const newMessages = [...prevMessage];
+            const lastMessage = newMessages[newMessages.length - 1];
+            if (lastMessage && lastMessage.status !== MESSAGE_STATUS.COMPLETE && lastMessage.status !== MESSAGE_STATUS.ERROR) {
+              newMessages[newMessages.length - 1] = {
+                ...lastMessage,
+                content: (lastMessage.content || '') + errorMessage,
+                errorCode: errorCode,
+                status: MESSAGE_STATUS.ERROR,
+              };
+            }
+            return newMessages;
+          });
           sseSourceRef.current = null;
           source.close();
         }
@@ -446,6 +482,7 @@ export const useApiRequest = (
     [
       setDebugData,
       setActiveDebugTab,
+      setMessage,
       streamMessageUpdate,
       completeMessage,
       t,

web/src/hooks/usage-logs/useUsageLogsData.jsx

@@ -622,13 +622,13 @@ export const useLogsData = () => {
           ),
         });
       }
-      if (isAdminUser && logs[i].type !== 6) {
+      if (isAdminUser && logs[i].type !== 6 && logs[i].type !== 1) {
         expandDataLocal.push({
           key: t('请求转换'),
           value: requestConversionDisplayValue(other?.request_conversion),
         });
       }
-      if (isAdminUser && logs[i].type !== 6) {
+      if (isAdminUser && logs[i].type !== 6 && logs[i].type !== 1) {
         let localCountMode = '';
         if (other?.admin_info?.local_count_tokens) {
           localCountMode = t('本地计费');
@@ -640,6 +640,83 @@ export const useLogsData = () => {
           value: localCountMode,
         });
       }
+      if (isAdminUser && logs[i].type === 1) {
+        const adminInfo = other?.admin_info;
+        if (adminInfo) {
+          if (adminInfo.payment_method) {
+            expandDataLocal.push({
+              key: t('订单支付方式'),
+              value: adminInfo.payment_method,
+            });
+          }
+          if (adminInfo.callback_payment_method) {
+            expandDataLocal.push({
+              key: t('回调支付方式'),
+              value: adminInfo.callback_payment_method,
+            });
+          }
+          if (adminInfo.caller_ip) {
+            expandDataLocal.push({
+              key: t('回调调用者IP'),
+              value: adminInfo.caller_ip,
+            });
+          }
+          if (adminInfo.server_ip) {
+            expandDataLocal.push({
+              key: t('服务器IP'),
+              value: adminInfo.server_ip,
+            });
+          }
+          if (adminInfo.node_name) {
+            expandDataLocal.push({
+              key: t('节点名称'),
+              value: adminInfo.node_name,
+            });
+          }
+          if (adminInfo.version) {
+            expandDataLocal.push({
+              key: t('系统版本'),
+              value: adminInfo.version,
+            });
+          }
+        } else {
+          expandDataLocal.push({
+            key: t('审计信息'),
+            value: (
+              <span style={{ color: 'var(--semi-color-warning)' }}>
+                {t(
+                  '该记录由旧版本实例写入，缺少审计信息，建议将实例升级至最新版本以便记录服务器IP、回调IP、支付方式与系统版本等审计字段。',
+                )}
+              </span>
+            ),
+          });
+        }
+      }
+      if (isAdminUser && logs[i].type === 3 && other?.admin_info) {
+        const adminInfo = other.admin_info;
+        const hasUsername =
+          adminInfo.admin_username !== undefined &&
+          adminInfo.admin_username !== null &&
+          adminInfo.admin_username !== '';
+        const hasId =
+          adminInfo.admin_id !== undefined &&
+          adminInfo.admin_id !== null &&
+          adminInfo.admin_id !== '';
+        if (hasUsername || hasId) {
+          let operatorValue = '';
+          if (hasUsername && hasId) {
+            operatorValue = `${adminInfo.admin_username} (ID: ${adminInfo.admin_id})`;
+          } else if (hasUsername) {
+            operatorValue = String(adminInfo.admin_username);
+          } else {
+            operatorValue = `ID: ${adminInfo.admin_id}`;
+          }
+          expandDataLocal.push({
+            key: t('操作管理员'),
+            value: operatorValue,
+          });
+        }
+      }
       expandDatesLocal[logs[i].key] = expandDataLocal;
     }
 

web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx

@@ -18,29 +18,43 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Form, Spin } from '@douyinfe/semi-ui';
+import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
 import {
   API,
   removeTrailingSlash,
   showError,
   showSuccess,
+  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
 export default function SettingsGeneralPayment(props) {
   const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('通用设置');
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     ServerAddress: '',
+    CustomCallbackAddress: '',
+    TopupGroupRatio: '',
+    PayMethods: '',
+    AmountOptions: '',
+    AmountDiscount: '',
   });
+  const [originInputs, setOriginInputs] = useState({});
   const formApiRef = useRef(null);
 
   useEffect(() => {
     if (props.options && formApiRef.current) {
       const currentInputs = {
         ServerAddress: props.options.ServerAddress || '',
+        CustomCallbackAddress: props.options.CustomCallbackAddress || '',
+        TopupGroupRatio: props.options.TopupGroupRatio || '',
+        PayMethods: props.options.PayMethods || '',
+        AmountOptions: props.options.AmountOptions || '',
+        AmountDiscount: props.options.AmountDiscount || '',
       };
       setInputs(currentInputs);
+      setOriginInputs({ ...currentInputs });
       formApiRef.current.setValues(currentInputs);
     }
   }, [props.options]);
@@ -49,19 +63,93 @@ export default function SettingsGeneralPayment(props) {
     setInputs(values);
   };
 
-  const submitServerAddress = async () => {
+  const submitGeneralSettings = async () => {
+    if (
+      originInputs.TopupGroupRatio !== inputs.TopupGroupRatio &&
+      !verifyJSON(inputs.TopupGroupRatio)
+    ) {
+      showError(t('充值分组倍率不是合法的 JSON 字符串'));
+      return;
+    }
+
+    if (
+      originInputs.PayMethods !== inputs.PayMethods &&
+      !verifyJSON(inputs.PayMethods)
+    ) {
+      showError(t('充值方式设置不是合法的 JSON 字符串'));
+      return;
+    }
+
+    if (
+      originInputs.AmountOptions !== inputs.AmountOptions &&
+      inputs.AmountOptions.trim() !== '' &&
+      !verifyJSON(inputs.AmountOptions)
+    ) {
+      showError(t('自定义充值数量选项不是合法的 JSON 数组'));
+      return;
+    }
+
+    if (
+      originInputs.AmountDiscount !== inputs.AmountDiscount &&
+      inputs.AmountDiscount.trim() !== '' &&
+      !verifyJSON(inputs.AmountDiscount)
+    ) {
+      showError(t('充值金额折扣配置不是合法的 JSON 对象'));
+      return;
+    }
+
     setLoading(true);
     try {
-      let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
-      const res = await API.put('/api/option/', {
-        key: 'ServerAddress',
-        value: ServerAddress,
-      });
-      if (res.data.success) {
+      const options = [
+        {
+          key: 'ServerAddress',
+          value: removeTrailingSlash(inputs.ServerAddress),
+        },
+      ];
+
+      if (inputs.CustomCallbackAddress !== '') {
+        options.push({
+          key: 'CustomCallbackAddress',
+          value: removeTrailingSlash(inputs.CustomCallbackAddress),
+        });
+      }
+      if (originInputs.TopupGroupRatio !== inputs.TopupGroupRatio) {
+        options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
+      }
+      if (originInputs.PayMethods !== inputs.PayMethods) {
+        options.push({ key: 'PayMethods', value: inputs.PayMethods });
+      }
+      if (originInputs.AmountOptions !== inputs.AmountOptions) {
+        options.push({
+          key: 'payment_setting.amount_options',
+          value: inputs.AmountOptions,
+        });
+      }
+      if (originInputs.AmountDiscount !== inputs.AmountDiscount) {
+        options.push({
+          key: 'payment_setting.amount_discount',
+          value: inputs.AmountDiscount,
+        });
+      }
+
+      const results = await Promise.all(
+        options.map((option) =>
+          API.put('/api/option/', {
+            key: option.key,
+            value: option.value,
+          }),
+        ),
+      );
+
+      const errorResults = results.filter((res) => !res.data.success);
+      if (errorResults.length === 0) {
         showSuccess(t('更新成功'));
+        setOriginInputs({ ...inputs });
         props.refresh && props.refresh();
       } else {
-        showError(res.data.message);
+        errorResults.forEach((res) => {
+          showError(res.data.message);
+        });
       }
     } catch (error) {
       showError(t('更新失败'));
@@ -76,7 +164,7 @@ export default function SettingsGeneralPayment(props) {
         onValueChange={handleFormChange}
         getFormApi={(api) => (formApiRef.current = api)}
       >
-        <Form.Section text={t('通用设置')}>
+        <Form.Section text={sectionTitle}>
           <Form.Input
             field='ServerAddress'
             label={t('服务器地址')}
@@ -86,7 +174,73 @@ export default function SettingsGeneralPayment(props) {
               '该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置',
             )}
           />
-          <Button onClick={submitServerAddress}>{t('更新服务器地址')}</Button>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.Input
+                field='CustomCallbackAddress'
+                label={t('回调地址')}
+                placeholder={t('例如：https://yourdomain.com')}
+                extraText={t(
+                  '留空时默认使用服务器地址作为回调地址，填写后将覆盖默认值',
+                )}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='TopupGroupRatio'
+                label={t('充值分组倍率')}
+                placeholder={t('为一个 JSON 文本，键为组名称，值为倍率')}
+                autosize
+              />
+            </Col>
+          </Row>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='PayMethods'
+                label={t('充值方式设置')}
+                placeholder={t('为一个 JSON 文本')}
+                autosize
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='AmountOptions'
+                label={t('自定义充值数量选项')}
+                placeholder={t(
+                  '为一个 JSON 数组，例如：[10, 20, 50, 100, 200, 500]',
+                )}
+                autosize
+                extraText={t(
+                  '设置用户可选择的充值数量选项，例如：[10, 20, 50, 100, 200, 500]',
+                )}
+              />
+            </Col>
+          </Row>
+          <Row style={{ marginTop: 16 }}>
+            <Col span={24}>
+              <Form.TextArea
+                field='AmountDiscount'
+                label={t('充值金额折扣配置')}
+                placeholder={t(
+                  '为一个 JSON 对象，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
+                )}
+                autosize
+                extraText={t(
+                  '设置不同充值金额对应的折扣，键为充值金额，值为折扣率，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
+                )}
+              />
+            </Col>
+          </Row>
+          <Button onClick={submitGeneralSettings} style={{ marginTop: 16 }}>
+            {t('保存通用设置')}
+          </Button>
         </Form.Section>
       </Form>
     </Spin>

web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx

@@ -18,19 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Form, Row, Col, Typography, Spin } from '@douyinfe/semi-ui';
-const { Text } = Typography;
+import { Banner, Button, Form, Row, Col, Spin } from '@douyinfe/semi-ui';
 import {
   API,
   removeTrailingSlash,
   showError,
   showSuccess,
-  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { Info } from 'lucide-react';
 
 export default function SettingsPaymentGateway(props) {
   const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('易支付设置');
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     PayAddress: '',
@@ -38,13 +38,7 @@ export default function SettingsPaymentGateway(props) {
     EpayKey: '',
     Price: 7.3,
     MinTopUp: 1,
-    TopupGroupRatio: '',
-    CustomCallbackAddress: '',
-    PayMethods: '',
-    AmountOptions: '',
-    AmountDiscount: '',
   });
-  const [originInputs, setOriginInputs] = useState({});
   const formApiRef = useRef(null);
 
   useEffect(() => {
@@ -61,35 +55,9 @@ export default function SettingsPaymentGateway(props) {
           props.options.MinTopUp !== undefined
             ? parseFloat(props.options.MinTopUp)
             : 1,
-        TopupGroupRatio: props.options.TopupGroupRatio || '',
-        CustomCallbackAddress: props.options.CustomCallbackAddress || '',
-        PayMethods: props.options.PayMethods || '',
-        AmountOptions: props.options.AmountOptions || '',
-        AmountDiscount: props.options.AmountDiscount || '',
       };
 
-      // 美化 JSON 展示
-      try {
-        if (currentInputs.AmountOptions) {
-          currentInputs.AmountOptions = JSON.stringify(
-            JSON.parse(currentInputs.AmountOptions),
-            null,
-            2,
-          );
-        }
-      } catch {}
-      try {
-        if (currentInputs.AmountDiscount) {
-          currentInputs.AmountDiscount = JSON.stringify(
-            JSON.parse(currentInputs.AmountDiscount),
-            null,
-            2,
-          );
-        }
-      } catch {}
-
       setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
       formApiRef.current.setValues(currentInputs);
     }
   }, [props.options]);
@@ -104,40 +72,6 @@ export default function SettingsPaymentGateway(props) {
       return;
     }
 
-    if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
-      if (!verifyJSON(inputs.TopupGroupRatio)) {
-        showError(t('充值分组倍率不是合法的 JSON 字符串'));
-        return;
-      }
-    }
-
-    if (originInputs['PayMethods'] !== inputs.PayMethods) {
-      if (!verifyJSON(inputs.PayMethods)) {
-        showError(t('充值方式设置不是合法的 JSON 字符串'));
-        return;
-      }
-    }
-
-    if (
-      originInputs['AmountOptions'] !== inputs.AmountOptions &&
-      inputs.AmountOptions.trim() !== ''
-    ) {
-      if (!verifyJSON(inputs.AmountOptions)) {
-        showError(t('自定义充值数量选项不是合法的 JSON 数组'));
-        return;
-      }
-    }
-
-    if (
-      originInputs['AmountDiscount'] !== inputs.AmountDiscount &&
-      inputs.AmountDiscount.trim() !== ''
-    ) {
-      if (!verifyJSON(inputs.AmountDiscount)) {
-        showError(t('充值金额折扣配置不是合法的 JSON 对象'));
-        return;
-      }
-    }
-
     setLoading(true);
     try {
       const options = [
@@ -156,32 +90,7 @@ export default function SettingsPaymentGateway(props) {
       if (inputs.MinTopUp !== '') {
         options.push({ key: 'MinTopUp', value: inputs.MinTopUp.toString() });
       }
-      if (inputs.CustomCallbackAddress !== '') {
-        options.push({
-          key: 'CustomCallbackAddress',
-          value: inputs.CustomCallbackAddress,
-        });
-      }
-      if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
-        options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
-      }
-      if (originInputs['PayMethods'] !== inputs.PayMethods) {
-        options.push({ key: 'PayMethods', value: inputs.PayMethods });
-      }
-      if (originInputs['AmountOptions'] !== inputs.AmountOptions) {
-        options.push({
-          key: 'payment_setting.amount_options',
-          value: inputs.AmountOptions,
-        });
-      }
-      if (originInputs['AmountDiscount'] !== inputs.AmountDiscount) {
-        options.push({
-          key: 'payment_setting.amount_discount',
-          value: inputs.AmountDiscount,
-        });
-      }
 
-      // 发送请求
       const requestQueue = options.map((opt) =>
         API.put('/api/option/', {
           key: opt.key,
@@ -191,7 +100,6 @@ export default function SettingsPaymentGateway(props) {
 
       const results = await Promise.all(requestQueue);
 
-      // 检查所有请求是否成功
       const errorResults = results.filter((res) => !res.data.success);
       if (errorResults.length > 0) {
         errorResults.forEach((res) => {
@@ -199,8 +107,6 @@ export default function SettingsPaymentGateway(props) {
         });
       } else {
         showSuccess(t('更新成功'));
-        // 更新本地存储的原始值
-        setOriginInputs({ ...inputs });
         props.refresh && props.refresh();
       }
     } catch (error) {
@@ -216,12 +122,15 @@ export default function SettingsPaymentGateway(props) {
         onValueChange={handleFormChange}
         getFormApi={(api) => (formApiRef.current = api)}
       >
-        <Form.Section text={t('支付设置')}>
-          <Text>
-            {t(
-              '（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）',
+        <Form.Section text={sectionTitle}>
+          <Banner
+            type='info'
+            icon={<Info size={16} />}
+            description={t(
+              '当前仅支持易支付接口，回调地址请在通用设置中配置。',
             )}
-          </Text>
+            style={{ marginBottom: 16 }}
+          />
           <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
@@ -233,14 +142,14 @@ export default function SettingsPaymentGateway(props) {
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
                 field='EpayId'
-                label={t('易支付商户ID')}
+                label={t('商户 ID')}
                 placeholder={t('例如：0001')}
               />
             </Col>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
                 field='EpayKey'
-                label={t('易支付商户密钥')}
+                label={t('API 密钥')}
                 placeholder={t('敏感信息不会发送到前端显示')}
                 type='password'
               />
@@ -250,14 +159,7 @@ export default function SettingsPaymentGateway(props) {
             gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
             style={{ marginTop: 16 }}
           >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='CustomCallbackAddress'
-                label={t('回调地址')}
-                placeholder={t('例如：https://yourdomain.com')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
               <Form.InputNumber
                 field='Price'
                 precision={2}
@@ -265,7 +167,7 @@ export default function SettingsPaymentGateway(props) {
                 placeholder={t('例如：7，就是7元/美金')}
               />
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
               <Form.InputNumber
                 field='MinTopUp'
                 label={t('最低充值美元数量')}
@@ -273,58 +175,9 @@ export default function SettingsPaymentGateway(props) {
               />
             </Col>
           </Row>
-          <Form.TextArea
-            field='TopupGroupRatio'
-            label={t('充值分组倍率')}
-            placeholder={t('为一个 JSON 文本，键为组名称，值为倍率')}
-            autosize
-          />
-          <Form.TextArea
-            field='PayMethods'
-            label={t('充值方式设置')}
-            placeholder={t('为一个 JSON 文本')}
-            autosize
-          />
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col span={24}>
-              <Form.TextArea
-                field='AmountOptions'
-                label={t('自定义充值数量选项')}
-                placeholder={t(
-                  '为一个 JSON 数组，例如：[10, 20, 50, 100, 200, 500]',
-                )}
-                autosize
-                extraText={t(
-                  '设置用户可选择的充值数量选项，例如：[10, 20, 50, 100, 200, 500]',
-                )}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col span={24}>
-              <Form.TextArea
-                field='AmountDiscount'
-                label={t('充值金额折扣配置')}
-                placeholder={t(
-                  '为一个 JSON 对象，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
-                )}
-                autosize
-                extraText={t(
-                  '设置不同充值金额对应的折扣，键为充值金额，值为折扣率，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
-                )}
-              />
-            </Col>
-          </Row>
-
-          <Button onClick={submitPayAddress}>{t('更新支付设置')}</Button>
+          <Button onClick={submitPayAddress} style={{ marginTop: 16 }}>
+            {t('更新易支付设置')}
+          </Button>
         </Form.Section>
       </Form>
     </Spin>

web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx

@@ -34,10 +34,11 @@ import {
 const { Text } = Typography;
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import { Plus, Trash2 } from 'lucide-react';
+import { BookOpen, Plus, Trash2 } from 'lucide-react';
 
 export default function SettingsPaymentGatewayCreem(props) {
   const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('Creem 设置');
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     CreemApiKey: '',
@@ -259,15 +260,22 @@ export default function SettingsPaymentGatewayCreem(props) {
         onValueChange={handleFormChange}
         getFormApi={(api) => (formApiRef.current = api)}
       >
-        <Form.Section text={t('Creem 设置')}>
-          <Text>
-            {t('Creem 介绍')}
-            <a href='https://creem.io' target='_blank' rel='noreferrer'>
-              Creem Official Site
-            </a>
-            <br />
-          </Text>
-          <Banner type='info' description={t('Creem Setting Tips')} />
+        <Form.Section text={sectionTitle}>
+          <Banner
+            type='info'
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                {t('Creem 介绍')}
+                <a href='https://creem.io' target='_blank' rel='noreferrer'>
+                  Creem Official Site
+                </a>
+                <br />
+                {t('Creem Setting Tips')}
+              </>
+            }
+            style={{ marginBottom: 16 }}
+          />
 
           <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
@@ -281,7 +289,7 @@ export default function SettingsPaymentGatewayCreem(props) {
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
                 field='CreemWebhookSecret'
-                label={t('Webhook 密钥')}
+                label={t('Webhook 签名密钥')}
                 placeholder={t(
                   '用于验证回调 new-api 的 webhook 请求的密钥，敏感信息不显示',
                 )}
@@ -291,7 +299,7 @@ export default function SettingsPaymentGatewayCreem(props) {
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Switch
                 field='CreemTestMode'
-                label={t('测试模式')}
+                label={t('沙盒模式')}
                 extraText={t('启用后将使用 Creem Test Mode')}
               />
             </Col>

web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx

@@ -18,16 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState, useRef } from 'react';
-import {
-  Banner,
-  Button,
-  Form,
-  Row,
-  Col,
-  Typography,
-  Spin,
-} from '@douyinfe/semi-ui';
-const { Text } = Typography;
+import { Banner, Button, Form, Row, Col, Spin } from '@douyinfe/semi-ui';
 import {
   API,
   removeTrailingSlash,
@@ -35,9 +26,11 @@ import {
   showSuccess,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { BookOpen, TriangleAlert } from 'lucide-react';
 
 export default function SettingsPaymentGateway(props) {
   const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('Stripe 设置');
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     StripeApiSecret: '',
@@ -165,42 +158,53 @@ export default function SettingsPaymentGateway(props) {
         onValueChange={handleFormChange}
         getFormApi={(api) => (formApiRef.current = api)}
       >
-        <Form.Section text={t('Stripe 设置')}>
-          <Text>
-            Stripe 密钥、Webhook 等设置请
-            <a
-              href='https://dashboard.stripe.com/developers'
-              target='_blank'
-              rel='noreferrer'
-            >
-              点击此处
-            </a>
-            进行设置，最好先在
-            <a
-              href='https://dashboard.stripe.com/test/developers'
-              target='_blank'
-              rel='noreferrer'
-            >
-              测试环境
-            </a>
-            进行测试。
-            <br />
-          </Text>
+        <Form.Section text={sectionTitle}>
           <Banner
             type='info'
-            description={`Webhook 填：${props.options.ServerAddress ? removeTrailingSlash(props.options.ServerAddress) : t('网站地址')}/api/stripe/webhook`}
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                Stripe 密钥、Webhook 等设置请
+                <a
+                  href='https://dashboard.stripe.com/developers'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  点击此处
+                </a>
+                进行设置，建议先在
+                <a
+                  href='https://dashboard.stripe.com/test/developers'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  测试环境
+                </a>
+                完成联调。
+                <br />
+                {t('回调地址')}：
+                {props.options.ServerAddress
+                  ? removeTrailingSlash(props.options.ServerAddress)
+                  : t('网站地址')}
+                /api/stripe/webhook
+              </>
+            }
+            style={{ marginBottom: 12 }}
           />
           <Banner
             type='warning'
-            description={`需要包含事件：checkout.session.completed 和 checkout.session.expired`}
+            icon={<TriangleAlert size={16} />}
+            description='需要包含事件：checkout.session.completed 和 checkout.session.expired'
+            style={{ marginBottom: 16 }}
           />
           <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
                 field='StripeApiSecret'
                 label={t('API 密钥')}
-                placeholder={t(
-                  'sk_xxx 或 rk_xxx 的 Stripe 密钥，敏感信息不显示',
+                placeholder={t('例如：sk_xxx 或 rk_xxx，留空表示保持当前不变')}
+                extraText={t(
+                  '保存后不会回显，请填写当前环境对应的 Stripe API 密钥',
                 )}
                 type='password'
               />
@@ -209,7 +213,8 @@ export default function SettingsPaymentGateway(props) {
               <Form.Input
                 field='StripeWebhookSecret'
                 label={t('Webhook 签名密钥')}
-                placeholder={t('whsec_xxx 的 Webhook 签名密钥，敏感信息不显示')}
+                placeholder={t('例如：whsec_xxx，留空表示保持当前不变')}
+                extraText={t('用于校验 Stripe Webhook 签名，保存后不会回显')}
                 type='password'
               />
             </Col>
@@ -217,7 +222,8 @@ export default function SettingsPaymentGateway(props) {
               <Form.Input
                 field='StripePriceId'
                 label={t('商品价格 ID')}
-                placeholder={t('price_xxx 的商品价格 ID，新建产品后可获得')}
+                placeholder={t('例如：price_xxx')}
+                extraText={t('在 Stripe 后台创建价格后获得')}
               />
             </Col>
           </Row>
@@ -231,6 +237,7 @@ export default function SettingsPaymentGateway(props) {
                 precision={2}
                 label={t('充值价格（x元/美金）')}
                 placeholder={t('例如：7，就是7元/美金')}
+                extraText={t('按 1 美元对应的站内价格填写')}
               />
             </Col>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
@@ -238,6 +245,7 @@ export default function SettingsPaymentGateway(props) {
                 field='StripeMinTopUp'
                 label={t('最低充值美元数量')}
                 placeholder={t('例如：2，就是最低充值2$')}
+                extraText={t('用户单次最少可充值的美元数量')}
               />
             </Col>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>

web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffo.jsx

@@ -31,13 +31,21 @@ import {
   Input,
   Space,
 } from '@douyinfe/semi-ui';
-import { API, showError, showSuccess } from '../../../helpers';
+import {
+  API,
+  removeTrailingSlash,
+  showError,
+  showSuccess,
+} from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { BookOpen, TriangleAlert } from 'lucide-react';
 
 const { Text } = Typography;
+const toBoolean = (value) => value === true || value === 'true';
 
 export default function SettingsPaymentGatewayWaffo(props) {
   const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('Waffo 设置');
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     WaffoEnabled: false,
@@ -55,7 +63,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
     WaffoNotifyUrl: '',
     WaffoReturnUrl: '',
   });
-  const [originInputs, setOriginInputs] = useState({});
   const formApiRef = useRef(null);
   const iconFileInputRef = useRef(null);
 
@@ -93,14 +100,14 @@ export default function SettingsPaymentGatewayWaffo(props) {
   useEffect(() => {
     if (props.options && formApiRef.current) {
       const currentInputs = {
-        WaffoEnabled: props.options.WaffoEnabled === 'true' || props.options.WaffoEnabled === true,
+        WaffoEnabled: toBoolean(props.options.WaffoEnabled),
         WaffoApiKey: props.options.WaffoApiKey || '',
         WaffoPrivateKey: props.options.WaffoPrivateKey || '',
         WaffoPublicCert: props.options.WaffoPublicCert || '',
         WaffoSandboxPublicCert: props.options.WaffoSandboxPublicCert || '',
         WaffoSandboxApiKey: props.options.WaffoSandboxApiKey || '',
         WaffoSandboxPrivateKey: props.options.WaffoSandboxPrivateKey || '',
-        WaffoSandbox: props.options.WaffoSandbox === 'true',
+        WaffoSandbox: toBoolean(props.options.WaffoSandbox),
         WaffoMerchantId: props.options.WaffoMerchantId || '',
         WaffoCurrency: props.options.WaffoCurrency || 'USD',
         WaffoUnitPrice: parseFloat(props.options.WaffoUnitPrice) || 1.0,
@@ -109,7 +116,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
         WaffoReturnUrl: props.options.WaffoReturnUrl || '',
       };
       setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
       formApiRef.current.setValues(currentInputs);
 
       // 解析支付方式列表
@@ -149,15 +155,30 @@ export default function SettingsPaymentGatewayWaffo(props) {
         options.push({ key: 'WaffoPrivateKey', value: inputs.WaffoPrivateKey });
       }
 
-      options.push({ key: 'WaffoPublicCert', value: inputs.WaffoPublicCert || '' });
-      options.push({ key: 'WaffoSandboxPublicCert', value: inputs.WaffoSandboxPublicCert || '' });
+      options.push({
+        key: 'WaffoPublicCert',
+        value: inputs.WaffoPublicCert || '',
+      });
+      options.push({
+        key: 'WaffoSandboxPublicCert',
+        value: inputs.WaffoSandboxPublicCert || '',
+      });
 
       if (inputs.WaffoSandboxApiKey && inputs.WaffoSandboxApiKey !== '') {
-        options.push({ key: 'WaffoSandboxApiKey', value: inputs.WaffoSandboxApiKey });
+        options.push({
+          key: 'WaffoSandboxApiKey',
+          value: inputs.WaffoSandboxApiKey,
+        });
       }
 
-      if (inputs.WaffoSandboxPrivateKey && inputs.WaffoSandboxPrivateKey !== '') {
-        options.push({ key: 'WaffoSandboxPrivateKey', value: inputs.WaffoSandboxPrivateKey });
+      if (
+        inputs.WaffoSandboxPrivateKey &&
+        inputs.WaffoSandboxPrivateKey !== ''
+      ) {
+        options.push({
+          key: 'WaffoSandboxPrivateKey',
+          value: inputs.WaffoSandboxPrivateKey,
+        });
       }
 
       options.push({
@@ -165,7 +186,10 @@ export default function SettingsPaymentGatewayWaffo(props) {
         value: inputs.WaffoSandbox ? 'true' : 'false',
       });
 
-      options.push({ key: 'WaffoMerchantId', value: inputs.WaffoMerchantId || '' });
+      options.push({
+        key: 'WaffoMerchantId',
+        value: inputs.WaffoMerchantId || '',
+      });
       options.push({ key: 'WaffoCurrency', value: inputs.WaffoCurrency || '' });
 
       options.push({
@@ -178,8 +202,14 @@ export default function SettingsPaymentGatewayWaffo(props) {
         value: String(inputs.WaffoMinTopUp || 1),
       });
 
-      options.push({ key: 'WaffoNotifyUrl', value: inputs.WaffoNotifyUrl || '' });
-      options.push({ key: 'WaffoReturnUrl', value: inputs.WaffoReturnUrl || '' });
+      options.push({
+        key: 'WaffoNotifyUrl',
+        value: inputs.WaffoNotifyUrl || '',
+      });
+      options.push({
+        key: 'WaffoReturnUrl',
+        value: inputs.WaffoReturnUrl || '',
+      });
 
       // 保存支付方式列表
       options.push({
@@ -205,8 +235,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
         });
       } else {
         showSuccess(t('更新成功'));
-        // 更新本地存储的原始值
-        setOriginInputs({ ...inputs });
         props.refresh?.();
       }
     } catch (error) {
@@ -218,7 +246,12 @@ export default function SettingsPaymentGatewayWaffo(props) {
   // 打开新增弹窗
   const openAddPayMethodModal = () => {
     setEditingPayMethodIndex(-1);
-    setPayMethodForm({ name: '', icon: '', payMethodType: '', payMethodName: '' });
+    setPayMethodForm({
+      name: '',
+      icon: '',
+      payMethodType: '',
+      payMethodName: '',
+    });
     setPayMethodModalVisible(true);
   };
 
@@ -324,19 +357,32 @@ export default function SettingsPaymentGatewayWaffo(props) {
         onValueChange={handleFormChange}
         getFormApi={(api) => (formApiRef.current = api)}
       >
-        <Form.Section text={t('Waffo 设置')}>
-          <Text>
-            {t('Waffo 是一个支付聚合平台，支持多种支付方式。')}
-            <a href='https://waffo.com' target='_blank' rel='noreferrer'>
-              Waffo Official Site
-            </a>
-            <br />
-          </Text>
+        <Form.Section text={sectionTitle}>
           <Banner
             type='info'
-            description={t(
-              '请在 Waffo 后台获取 API 密钥、商户 ID 以及 RSA 密钥对，并配置回调地址。',
-            )}
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                Waffo 密钥、商户和支付方式等设置请
+                <a href='https://waffo.com' target='_blank' rel='noreferrer'>
+                  点击此处
+                </a>
+                进行配置，切换沙盒模式时请同步填写对应环境的密钥。
+                <br />
+                {t('回调地址')}：
+                {props.options.ServerAddress
+                  ? removeTrailingSlash(props.options.ServerAddress)
+                  : t('网站地址')}
+                /api/waffo/webhook
+              </>
+            }
+            style={{ marginBottom: 12 }}
+          />
+          <Banner
+            type='warning'
+            icon={<TriangleAlert size={16} />}
+            description={t('请确认商户和所选环境密钥一致。')}
+            style={{ marginBottom: 16 }}
           />
 
           <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
@@ -356,161 +402,188 @@ export default function SettingsPaymentGatewayWaffo(props) {
                 size='default'
                 checkedText='｜'
                 uncheckedText='〇'
-                extraText={t('启用后将使用 Waffo 沙盒环境')}
+                extraText={t('用于切换当前下单和回调校验所使用的环境')}
               />
             </Col>
-          </Row>
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoApiKey'
-                label={t('API 密钥 (生产)')}
-                placeholder={t('生产环境 Waffo API 密钥')}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoSandboxApiKey'
-                label={t('API 密钥 (沙盒)')}
-                placeholder={t('沙盒环境 Waffo API 密钥')}
-                type='password'
-              />
-            </Col>
-          </Row>
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
                 field='WaffoMerchantId'
                 label={t('商户 ID')}
-                placeholder={t('Waffo 商户 ID')}
+                placeholder={t('例如：MER_xxx')}
+                extraText={t('当前环境共用同一商户 ID')}
               />
             </Col>
           </Row>
 
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoApiKey'
+                label={t('API 密钥（生产环境）')}
+                placeholder={t(
+                  '填写后覆盖当前生产环境 API 密钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写生产环境对应的 API 密钥')}
+                type='password'
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.TextArea
                 field='WaffoPrivateKey'
-                label={t('RSA 私钥 (生产)')}
-                placeholder={t('生产环境 RSA 私钥 Base64 (PKCS#8 DER)')}
+                label={t('API 私钥（生产环境）')}
+                placeholder={t(
+                  '填写后覆盖当前生产环境私钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写生产环境对应的 API 私钥')}
                 type='password'
                 autosize={{ minRows: 3, maxRows: 6 }}
               />
             </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoSandboxPrivateKey'
-                label={t('RSA 私钥 (沙盒)')}
-                placeholder={t('沙盒环境 RSA 私钥 Base64 (PKCS#8 DER)')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-          </Row>
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.TextArea
                 field='WaffoPublicCert'
-                label={t('Waffo 公钥 (生产)')}
-                placeholder={t('生产环境 Waffo 公钥 Base64 (X.509 DER)')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoSandboxPublicCert'
-                label={t('Waffo 公钥 (沙盒)')}
-                placeholder={t('沙盒环境 Waffo 公钥 Base64 (X.509 DER)')}
+                label={t('Waffo 公钥（生产环境）')}
+                placeholder={t(
+                  '填写生产环境 Waffo 公钥，Base64 或 PEM 内容均可',
+                )}
+                extraText={t('用于校验生产环境的 Waffo 回调签名')}
                 type='password'
                 autosize={{ minRows: 3, maxRows: 6 }}
               />
             </Col>
           </Row>
 
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoSandboxApiKey'
+                label={t('API 密钥（测试环境）')}
+                placeholder={t(
+                  '填写后覆盖当前测试环境 API 密钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写测试环境对应的 API 密钥')}
+                type='password'
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.TextArea
+                field='WaffoSandboxPrivateKey'
+                label={t('API 私钥（测试环境）')}
+                placeholder={t(
+                  '填写后覆盖当前测试环境私钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写测试环境对应的 API 私钥')}
+                type='password'
+                autosize={{ minRows: 3, maxRows: 6 }}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.TextArea
+                field='WaffoSandboxPublicCert'
+                label={t('Waffo 公钥（测试环境）')}
+                placeholder={t(
+                  '填写测试环境 Waffo 公钥，Base64 或 PEM 内容均可',
+                )}
+                extraText={t('用于校验测试环境的 Waffo 回调签名')}
+                type='password'
+                autosize={{ minRows: 3, maxRows: 6 }}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.Input
                 field='WaffoCurrency'
                 label={t('货币')}
+                placeholder='USD'
+                extraText={t('Waffo 当前使用 USD 结算')}
                 disabled
               />
             </Col>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.InputNumber
                 field='WaffoUnitPrice'
-                label={t('单价 (USD)')}
-                placeholder='1.0'
+                precision={2}
+                label={t('充值价格（x元/美金）')}
+                placeholder={t('例如：7，就是7元/美金')}
+                extraText={t('按 1 美元对应的站内价格填写')}
                 min={0}
-                step={0.1}
-                extraText={t('每个充值单位对应的 USD 金额，默认 1.0')}
               />
             </Col>
             <Col xs={24} sm={24} md={8} lg={8} xl={8}>
               <Form.InputNumber
                 field='WaffoMinTopUp'
-                label={t('最低充值数量')}
-                placeholder='1'
+                label={t('最低充值美元数量')}
+                placeholder={t('例如：2，就是最低充值2$')}
+                extraText={t('用户单次最少可充值的美元数量')}
                 min={1}
-                step={1}
-                extraText={t('Waffo 充值的最低数量，默认 1')}
               />
             </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
             <Col xs={24} sm={24} md={12} lg={12} xl={12}>
               <Form.Input
                 field='WaffoNotifyUrl'
-                label={t('回调通知地址')}
-                placeholder={t('例如 https://example.com/api/waffo/webhook')}
-                extraText={t('留空则自动使用 服务器地址 + /api/waffo/webhook')}
+                label={t('回调地址')}
+                placeholder={t('例如：https://example.com/api/waffo/webhook')}
+                extraText={t('留空则自动使用当前站点的默认回调地址')}
               />
             </Col>
             <Col xs={24} sm={24} md={12} lg={12} xl={12}>
               <Form.Input
                 field='WaffoReturnUrl'
                 label={t('支付返回地址')}
-                placeholder={t('例如 https://example.com/console/topup')}
-                extraText={t('支付完成后用户跳转的页面，留空则自动使用 服务器地址 + /console/topup')}
+                placeholder={t('例如：https://example.com/console/topup')}
+                extraText={t('留空则自动使用当前站点的默认充值页地址')}
               />
             </Col>
           </Row>
+        </Form.Section>
 
+        <Form.Section text={t('支付方式设置')}>
+          <Text type='secondary'>
+            {t(
+              '这里配置 Waffo 下展示给用户的 Card、Apple Pay、Google Pay 等子支付方式。',
+            )}
+          </Text>
+          <div style={{ marginTop: 12, marginBottom: 12 }}>
+            <Button onClick={openAddPayMethodModal}>{t('新增支付方式')}</Button>
+          </div>
+          <Table
+            columns={payMethodColumns}
+            dataSource={waffoPayMethods}
+            rowKey={(record, index) => index}
+            pagination={false}
+            size='small'
+            empty={
+              <Text type='tertiary'>{t('暂无支付方式，点击上方按钮新增')}</Text>
+            }
+          />
           <Button onClick={submitWaffoSetting} style={{ marginTop: 16 }}>
             {t('更新 Waffo 设置')}
           </Button>
         </Form.Section>
       </Form>
 
-      {/* 支付方式配置区块（独立于 Form，使用独立状态管理） */}
-      <div style={{ marginTop: 24 }}>
-        <Typography.Title heading={6} style={{ marginBottom: 8 }}>{t('支付方式')}</Typography.Title>
-        <Text type='secondary'>
-          {t('配置 Waffo 充值时可用的支付方式，保存后在充值页面展示给用户。')}
-        </Text>
-        <div style={{ marginTop: 12, marginBottom: 12 }}>
-          <Button onClick={openAddPayMethodModal}>
-            {t('新增支付方式')}
-          </Button>
-        </div>
-        <Table
-          columns={payMethodColumns}
-          dataSource={waffoPayMethods}
-          rowKey={(record, index) => index}
-          pagination={false}
-          size='small'
-          empty={<Text type='tertiary'>{t('暂无支付方式，点击上方按钮新增')}</Text>}
-        />
-        <Button onClick={submitWaffoSetting} style={{ marginTop: 16 }}>
-          {t('更新 Waffo 设置')}
-        </Button>
-      </div>
-
       {/* 新增/编辑支付方式弹窗 */}
       <Modal
-        title={editingPayMethodIndex === -1 ? t('新增支付方式') : t('编辑支付方式')}
+        title={
+          editingPayMethodIndex === -1 ? t('新增支付方式') : t('编辑支付方式')
+        }
         visible={payMethodModalVisible}
         onOk={handlePayMethodModalOk}
         onCancel={() => setPayMethodModalVisible(false)}
@@ -521,14 +594,22 @@ export default function SettingsPaymentGatewayWaffo(props) {
           <div>
             <div style={{ marginBottom: 4 }}>
               <Text strong>{t('显示名称')}</Text>
-              <span style={{ color: 'var(--semi-color-danger)', marginLeft: 4 }}>*</span>
+              <span
+                style={{ color: 'var(--semi-color-danger)', marginLeft: 4 }}
+              >
+                *
+              </span>
             </div>
             <Input
               value={payMethodForm.name}
-              onChange={(val) => setPayMethodForm({ ...payMethodForm, name: val })}
+              onChange={(val) =>
+                setPayMethodForm({ ...payMethodForm, name: val })
+              }
               placeholder={t('例如：Credit Card')}
             />
-            <Text type='tertiary' size='small'>{t('用户在充值页面看到的支付方式名称，例如：Credit Card')}</Text>
+            <Text type='tertiary' size='small'>
+              {t('用户在充值页面看到的支付方式名称，例如：Credit Card')}
+            </Text>
           </div>
           <div>
             <div style={{ marginBottom: 4 }}>
@@ -574,32 +655,44 @@ export default function SettingsPaymentGatewayWaffo(props) {
               )}
             </Space>
             <div>
-              <Text type='tertiary' size='small'>{t('上传 PNG/JPG/SVG 图片，建议尺寸 ≤ 128×128px')}</Text>
+              <Text type='tertiary' size='small'>
+                {t('上传 PNG/JPG/SVG 图片，建议尺寸 ≤ 128×128px')}
+              </Text>
             </div>
           </div>
           <div>
             <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('Pay Method Type')}</Text>
+              <Text strong>{t('支付方式类型')}</Text>
             </div>
             <Input
               value={payMethodForm.payMethodType}
-              onChange={(val) => setPayMethodForm({ ...payMethodForm, payMethodType: val })}
+              onChange={(val) =>
+                setPayMethodForm({ ...payMethodForm, payMethodType: val })
+              }
               placeholder='CREDITCARD,DEBITCARD'
               maxLength={64}
             />
-            <Text type='tertiary' size='small'>{t('Waffo API 参数，可空，例如：CREDITCARD,DEBITCARD（最多64位）')}</Text>
+            <Text type='tertiary' size='small'>
+              {t(
+                'Waffo API 参数，可空，例如：CREDITCARD,DEBITCARD（最多64位）',
+              )}
+            </Text>
           </div>
           <div>
             <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('Pay Method Name')}</Text>
+              <Text strong>{t('支付方式名称')}</Text>
             </div>
             <Input
               value={payMethodForm.payMethodName}
-              onChange={(val) => setPayMethodForm({ ...payMethodForm, payMethodName: val })}
+              onChange={(val) =>
+                setPayMethodForm({ ...payMethodForm, payMethodName: val })
+              }
               placeholder={t('可空')}
               maxLength={64}
             />
-            <Text type='tertiary' size='small'>{t('Waffo API 参数，可空（最多64位）')}</Text>
+            <Text type='tertiary' size='small'>
+              {t('Waffo API 参数，可空（最多64位）')}
+            </Text>
           </div>
         </div>
       </Modal>

web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx

@@ -0,0 +1,411 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Banner, Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import {
+  API,
+  removeTrailingSlash,
+  showError,
+  showSuccess,
+} from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+import { BookOpen, TriangleAlert } from 'lucide-react';
+
+const defaultInputs = {
+  WaffoPancakeEnabled: false,
+  WaffoPancakeSandbox: false,
+  WaffoPancakeMerchantID: '',
+  WaffoPancakePrivateKey: '',
+  WaffoPancakeWebhookPublicKey: '',
+  WaffoPancakeWebhookTestKey: '',
+  WaffoPancakeStoreID: '',
+  WaffoPancakeProductID: '',
+  WaffoPancakeReturnURL: '',
+  WaffoPancakeCurrency: 'USD',
+  WaffoPancakeUnitPrice: 1.0,
+  WaffoPancakeMinTopUp: 1,
+};
+
+const toBoolean = (value) => value === true || value === 'true';
+
+export default function SettingsPaymentGatewayWaffoPancake(props) {
+  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle
+    ? undefined
+    : t('Waffo Pancake 设置');
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState(defaultInputs);
+  const formApiRef = useRef(null);
+
+  useEffect(() => {
+    if (!props.options || !formApiRef.current) return;
+
+    const currentInputs = {
+      WaffoPancakeEnabled: toBoolean(props.options.WaffoPancakeEnabled),
+      WaffoPancakeSandbox: toBoolean(props.options.WaffoPancakeSandbox),
+      WaffoPancakeMerchantID: props.options.WaffoPancakeMerchantID || '',
+      WaffoPancakePrivateKey: props.options.WaffoPancakePrivateKey || '',
+      WaffoPancakeWebhookPublicKey:
+        props.options.WaffoPancakeWebhookPublicKey || '',
+      WaffoPancakeWebhookTestKey:
+        props.options.WaffoPancakeWebhookTestKey || '',
+      WaffoPancakeStoreID: props.options.WaffoPancakeStoreID || '',
+      WaffoPancakeProductID: props.options.WaffoPancakeProductID || '',
+      WaffoPancakeReturnURL: props.options.WaffoPancakeReturnURL || '',
+      WaffoPancakeCurrency: props.options.WaffoPancakeCurrency || 'USD',
+      WaffoPancakeUnitPrice:
+        props.options.WaffoPancakeUnitPrice !== undefined
+          ? parseFloat(props.options.WaffoPancakeUnitPrice)
+          : 1.0,
+      WaffoPancakeMinTopUp:
+        props.options.WaffoPancakeMinTopUp !== undefined
+          ? parseFloat(props.options.WaffoPancakeMinTopUp)
+          : 1,
+    };
+
+    setInputs(currentInputs);
+    formApiRef.current.setValues(currentInputs);
+  }, [props.options]);
+
+  const handleFormChange = (values) => {
+    setInputs(values);
+  };
+
+  const submitWaffoPancakeSetting = async () => {
+    const values = {
+      ...inputs,
+      ...(formApiRef.current?.getValues?.() || {}),
+    };
+    values.WaffoPancakeEnabled = toBoolean(values.WaffoPancakeEnabled);
+    values.WaffoPancakeSandbox = toBoolean(values.WaffoPancakeSandbox);
+    const currentWebhookField = values.WaffoPancakeSandbox
+      ? 'WaffoPancakeWebhookTestKey'
+      : 'WaffoPancakeWebhookPublicKey';
+    const currentWebhookLabel = values.WaffoPancakeSandbox
+      ? t('Webhook 公钥（测试环境）')
+      : t('Webhook 公钥（生产环境）');
+
+      if (values.WaffoPancakeEnabled && !values.WaffoPancakeMerchantID.trim()) {
+      showError(t('请输入商户 ID'));
+      return;
+    }
+
+    if (values.WaffoPancakeEnabled && !values.WaffoPancakeStoreID.trim()) {
+      showError(t('请输入 Store ID'));
+      return;
+    }
+
+    if (values.WaffoPancakeEnabled && !values.WaffoPancakeProductID.trim()) {
+      showError(t('请输入 Product ID'));
+      return;
+    }
+
+    if (
+      values.WaffoPancakeEnabled &&
+      !String(values[currentWebhookField] || '').trim()
+    ) {
+      showError(currentWebhookLabel);
+      return;
+    }
+
+    if (
+      values.WaffoPancakeEnabled &&
+      Number(values.WaffoPancakeUnitPrice) <= 0
+    ) {
+      showError(t('充值价格必须大于 0'));
+      return;
+    }
+
+    if (values.WaffoPancakeEnabled && Number(values.WaffoPancakeMinTopUp) < 1) {
+      showError(t('最低充值美元数量必须大于 0'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const options = [
+        {
+          key: 'WaffoPancakeEnabled',
+          value: values.WaffoPancakeEnabled ? 'true' : 'false',
+        },
+        {
+          key: 'WaffoPancakeSandbox',
+          value: values.WaffoPancakeSandbox ? 'true' : 'false',
+        },
+        {
+          key: 'WaffoPancakeMerchantID',
+          value: values.WaffoPancakeMerchantID || '',
+        },
+        {
+          key: 'WaffoPancakeStoreID',
+          value: values.WaffoPancakeStoreID || '',
+        },
+        {
+          key: 'WaffoPancakeProductID',
+          value: values.WaffoPancakeProductID || '',
+        },
+        {
+          key: 'WaffoPancakeReturnURL',
+          value: removeTrailingSlash(values.WaffoPancakeReturnURL || ''),
+        },
+        {
+          key: 'WaffoPancakeCurrency',
+          value: values.WaffoPancakeCurrency || 'USD',
+        },
+        {
+          key: 'WaffoPancakeUnitPrice',
+          value: String(values.WaffoPancakeUnitPrice),
+        },
+        {
+          key: 'WaffoPancakeMinTopUp',
+          value: String(values.WaffoPancakeMinTopUp),
+        },
+      ];
+
+      if ((values.WaffoPancakePrivateKey || '').trim()) {
+        options.push({
+          key: 'WaffoPancakePrivateKey',
+          value: values.WaffoPancakePrivateKey,
+        });
+      }
+
+      if ((values.WaffoPancakeWebhookPublicKey || '').trim()) {
+        options.push({
+          key: 'WaffoPancakeWebhookPublicKey',
+          value: values.WaffoPancakeWebhookPublicKey,
+        });
+      }
+
+      if ((values.WaffoPancakeWebhookTestKey || '').trim()) {
+        options.push({
+          key: 'WaffoPancakeWebhookTestKey',
+          value: values.WaffoPancakeWebhookTestKey,
+        });
+      }
+
+      const results = await Promise.all(
+        options.map((opt) =>
+          API.put('/api/option/', {
+            key: opt.key,
+            value: opt.value,
+          }),
+        ),
+      );
+
+      const errorResults = results.filter((res) => !res.data.success);
+      if (errorResults.length > 0) {
+        errorResults.forEach((res) => showError(res.data.message));
+        return;
+      }
+
+      showSuccess(t('更新成功'));
+      props.refresh?.();
+    } catch (error) {
+      showError(t('更新失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        initValues={inputs}
+        onValueChange={handleFormChange}
+        getFormApi={(api) => (formApiRef.current = api)}
+      >
+        <Form.Section text={sectionTitle}>
+          <Banner
+            type='info'
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                Waffo Pancake 的商户、商品和签名密钥请
+                <a
+                  href='https://docs.waffo.ai'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  点击此处
+                </a>
+                获取，建议先在测试环境完成联调。
+                <br />
+                {t('回调地址')}：
+                {props.options.ServerAddress
+                  ? removeTrailingSlash(props.options.ServerAddress)
+                  : t('网站地址')}
+                /api/waffo-pancake/webhook
+              </>
+            }
+            style={{ marginBottom: 12 }}
+          />
+          <Banner
+            type='warning'
+            icon={<TriangleAlert size={16} />}
+            description={t(
+              '请确认 Merchant、Store、Product 和所选环境密钥一致。',
+            )}
+            style={{ marginBottom: 16 }}
+          />
+          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Switch
+                field='WaffoPancakeEnabled'
+                label={t('启用 Waffo Pancake')}
+                checkedText='｜'
+                uncheckedText='〇'
+              />
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Switch
+                field='WaffoPancakeSandbox'
+                label={t('沙盒模式')}
+                checkedText='｜'
+                uncheckedText='〇'
+                extraText={t('用于切换当前下单和回调校验所使用的环境')}
+              />
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeCurrency'
+                label={t('货币')}
+                placeholder='USD'
+                extraText={t('默认使用 USD 结算')}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeMerchantID'
+                label={t('商户 ID')}
+                placeholder={t('例如：MER_xxx')}
+                extraText={t('请填写当前环境对应的商户 ID')}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeStoreID'
+                label={t('Store ID')}
+                placeholder={t('例如：STO_xxx')}
+                extraText={t('请填写当前环境对应的 Store ID')}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeProductID'
+                label={t('Product ID')}
+                placeholder={t('例如：PROD_xxx')}
+                extraText={t('请填写当前环境对应的 Product ID')}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='WaffoPancakePrivateKey'
+                label={t('API 私钥')}
+                placeholder={t('填写后覆盖当前私钥，留空表示保持当前不变')}
+                extraText={t('保存后不会回显，请填写当前环境对应的 API 私钥')}
+                type='password'
+                autosize={{ minRows: 4, maxRows: 8 }}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.Input
+                field='WaffoPancakeReturnURL'
+                label={t('支付返回地址')}
+                placeholder={t('例如：https://example.com/console/topup')}
+                extraText={t('留空则自动使用当前站点的默认充值页地址')}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='WaffoPancakeWebhookPublicKey'
+                label={t('Webhook 公钥（生产环境）')}
+                placeholder={t(
+                  '填写后覆盖当前生产环境 Webhook 公钥，留空表示保持当前不变',
+                )}
+                extraText={t('用于校验生产环境的 Waffo Pancake Webhook 签名')}
+                type='password'
+                autosize={{ minRows: 4, maxRows: 8 }}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='WaffoPancakeWebhookTestKey'
+                label={t('Webhook 公钥（测试环境）')}
+                placeholder={t(
+                  '填写后覆盖当前测试环境 Webhook 公钥，留空表示保持当前不变',
+                )}
+                extraText={t('用于校验测试环境的 Waffo Pancake Webhook 签名')}
+                type='password'
+                autosize={{ minRows: 4, maxRows: 8 }}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.InputNumber
+                field='WaffoPancakeUnitPrice'
+                precision={2}
+                label={t('充值价格（x元/美金）')}
+                placeholder={t('例如：7，就是7元/美金')}
+                extraText={t('按 1 美元对应的站内价格填写')}
+                min={0}
+              />
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.InputNumber
+                field='WaffoPancakeMinTopUp'
+                label={t('最低充值美元数量')}
+                placeholder={t('例如：2，就是最低充值2$')}
+                extraText={t('用户单次最少可充值的美元数量')}
+                min={1}
+              />
+            </Col>
+          </Row>
+
+          <Button onClick={submitWaffoPancakeSetting}>
+            {t('更新 Waffo Pancake 设置')}
+          </Button>
+        </Form.Section>
+      </Form>
+    </Spin>
+  );
+}

web/src/pages/Setting/Ratio/components/GroupTable.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
 import {
   Button,
   Input,
@@ -61,60 +61,63 @@ export function serializeGroupTable(rows) {
   };
 }
 
-export default function GroupTable({
-  groupRatio,
-  userUsableGroups,
-  onChange,
-}) {
+export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
   const { t } = useTranslation();
 
   const [rows, setRows] = useState(() =>
     buildRows(groupRatio, userUsableGroups),
   );
 
-  const emitChange = useCallback(
-    (newRows) => {
-      setRows(newRows);
-      onChange?.(serializeGroupTable(newRows));
-    },
-    [onChange],
-  );
+  // Use functional setRows to keep updateRow/addRow/removeRow referentially
+  // stable, preventing columns useMemo from rebuilding on every keystroke
+  // which causes the Input cursor to jump to end (cursor reset bug).
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const emitAndSet = useCallback((updater) => {
+    setRows((prev) => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onChangeRef.current?.(serializeGroupTable(next));
+      return next;
+    });
+  }, []);
 
   const updateRow = useCallback(
     (id, field, value) => {
-      const next = rows.map((r) =>
-        r._id === id ? { ...r, [field]: value } : r,
+      emitAndSet((prev) =>
+        prev.map((r) => (r._id === id ? { ...r, [field]: value } : r)),
       );
-      emitChange(next);
     },
-    [rows, emitChange],
+    [emitAndSet],
   );
 
   const addRow = useCallback(() => {
-    const existingNames = new Set(rows.map((r) => r.name));
-    let counter = 1;
-    let newName = `group_${counter}`;
-    while (existingNames.has(newName)) {
-      counter++;
-      newName = `group_${counter}`;
-    }
-    emitChange([
-      ...rows,
-      {
-        _id: uid(),
-        name: newName,
-        ratio: 1,
-        selectable: true,
-        description: '',
-      },
-    ]);
-  }, [rows, emitChange]);
+    emitAndSet((prev) => {
+      const existingNames = new Set(prev.map((r) => r.name));
+      let counter = 1;
+      let newName = `group_${counter}`;
+      while (existingNames.has(newName)) {
+        counter++;
+        newName = `group_${counter}`;
+      }
+      return [
+        ...prev,
+        {
+          _id: uid(),
+          name: newName,
+          ratio: 1,
+          selectable: true,
+          description: '',
+        },
+      ];
+    });
+  }, [emitAndSet]);
 
   const removeRow = useCallback(
     (id) => {
-      emitChange(rows.filter((r) => r._id !== id));
+      emitAndSet((prev) => prev.filter((r) => r._id !== id));
     },
-    [rows, emitChange],
+    [emitAndSet],
   );
 
   const groupNames = useMemo(() => rows.map((r) => r.name), [rows]);
@@ -127,6 +130,11 @@ export default function GroupTable({
     return new Set(Object.keys(counts).filter((k) => counts[k] > 1));
   }, [groupNames]);
 
+  // Use ref so column render functions always read the latest duplicate set
+  // without adding duplicateNames to columns deps (which would break cursor).
+  const duplicateNamesRef = useRef(duplicateNames);
+  duplicateNamesRef.current = duplicateNames;
+
   const columns = useMemo(
     () => [
       {
@@ -138,7 +146,9 @@ export default function GroupTable({
           <Input
             size='small'
             value={record.name}
-            status={duplicateNames.has(record.name) ? 'warning' : undefined}
+            status={
+              duplicateNamesRef.current.has(record.name) ? 'warning' : undefined
+            }
             onChange={(v) => updateRow(record._id, 'name', v)}
           />
         ),
@@ -212,7 +222,7 @@ export default function GroupTable({
         ),
       },
     ],
-    [t, duplicateNames, updateRow, removeRow],
+    [t, updateRow, removeRow],
   );
 
   return (
@@ -223,9 +233,7 @@ export default function GroupTable({
         rowKey='_id'
         hidePagination
         size='small'
-        empty={
-          <Text type='tertiary'>{t('暂无分组，点击下方按钮添加')}</Text>
-        }
+        empty={<Text type='tertiary'>{t('暂无分组，点击下方按钮添加')}</Text>}
       />
       <div className='mt-3 flex justify-center'>
         <Button icon={<IconPlus />} theme='outline' onClick={addRow}>
@@ -234,7 +242,8 @@ export default function GroupTable({
       </div>
       {duplicateNames.size > 0 && (
         <Text type='warning' size='small' className='mt-2 block'>
-          {t('存在重复的分组名称：')}{Array.from(duplicateNames).join(', ')}
+          {t('存在重复的分组名称：')}
+          {Array.from(duplicateNames).join(', ')}
         </Text>
       )}
     </div>