Merge pull request #2916 from worryzyy/feature/add-quota-amount-input

feat(user): add currency amount input with auto quota conversion

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

@@ -25,7 +25,12 @@ import {
   showSuccess,
   renderQuota,
   renderQuotaWithPrompt,
+  getCurrencyConfig,
 } from '../../../../helpers';
+import {
+  quotaToDisplayAmount,
+  displayAmountToQuota,
+} from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
   Button,
@@ -60,6 +65,7 @@ const EditUserModal = (props) => {
   const [loading, setLoading] = useState(true);
   const [addQuotaModalOpen, setIsModalOpen] = useState(false);
   const [addQuotaLocal, setAddQuotaLocal] = useState('');
+  const [addAmountLocal, setAddAmountLocal] = useState('');
   const isMobile = useIsMobile();
   const [groupOptions, setGroupOptions] = useState([]);
   const formApiRef = useRef(null);
@@ -367,8 +373,12 @@ const EditUserModal = (props) => {
         onOk={() => {
           addLocalQuota();
           setIsModalOpen(false);
+          setAddQuotaLocal('');
+          setAddAmountLocal('');
+        }}
+        onCancel={() => {
+          setIsModalOpen(false);
         }}
-        onCancel={() => setIsModalOpen(false)}
         closable={null}
         title={
           <div className='flex items-center'>
@@ -387,14 +397,48 @@ const EditUserModal = (props) => {
             );
           })()}
         </div>
-        <InputNumber
+        {getCurrencyConfig().type !== 'TOKENS' && (
-          placeholder={t('需要添加的额度（支持负数）')}
+          <div className='mb-3'>
-          value={addQuotaLocal}
+            <div className='mb-1'>
-          onChange={setAddQuotaLocal}
+              <Text size='small'>{t('金额')}</Text>
-          style={{ width: '100%' }}
+              <Text size='small' type='tertiary'> ({t('仅用于换算，实际保存的是额度')})</Text>
-          showClear
+            </div>
-          step={500000}
+            <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>
+        )}
+        <div>
+          <div className='mb-1'>
+            <Text size='small'>{t('额度')}</Text>
+          </div>
+          <InputNumber
+            placeholder={t('输入额度')}
+            value={addQuotaLocal}
+            onChange={(val) => {
+              setAddQuotaLocal(val);
+              setAddAmountLocal(
+                val != null && val !== ''
+                  ? Number((quotaToDisplayAmount(Math.abs(val)) * Math.sign(val)).toFixed(2))
+                  : '',
+              );
+            }}
+            style={{ width: '100%' }}
+            showClear
+            step={500000}
+          />
+        </div>
       </Modal>
     </>
   );

web/src/i18n/locales/en.json

@@ -2603,6 +2603,10 @@
     "频率限制的周期（分钟）": "Rate limit period (minutes)",
     "颜色": "Color",
     "额度": "Quota",
+    "输入额度": "Enter quota",
+    "金额": "Amount",
+    "输入金额": "Enter amount",
+    "仅用于换算，实际保存的是额度": "For conversion only, quota is what gets saved",
     "额度必须大于0": "Quota must be greater than 0",
     "额度提醒阈值": "Quota reminder threshold",
     "额度查询接口返回令牌额度而非用户额度": "Displays token quota instead of user quota",

web/src/i18n/locales/fr.json

@@ -2566,6 +2566,10 @@
     "频率限制的周期（分钟）": "Période de limitation de débit (minutes)",
     "颜色": "Couleur",
     "额度": "Quota",
+    "输入额度": "Entrer le quota",
+    "金额": "Montant",
+    "输入金额": "Entrer le montant",
+    "仅用于换算，实际保存的是额度": "Uniquement pour la conversion, c'est le quota qui est enregistré",
     "额度必须大于0": "Le quota doit être supérieur à 0",
     "额度提醒阈值": "Seuil de rappel de quota",
     "额度查询接口返回令牌额度而非用户额度": "Affiche le quota de jetons au lieu du quota utilisateur",

web/src/i18n/locales/ja.json

@@ -2549,6 +2549,10 @@
     "频率限制的周期（分钟）": "レート制限の期間（分）",
     "颜色": "カラー",
     "额度": "クォータ",
+    "输入额度": "クォータを入力",
+    "金额": "金額",
+    "输入金额": "金額を入力",
+    "仅用于换算，实际保存的是额度": "換算用のみ、実際に保存されるのはクォータです",
     "额度必须大于0": "クォータは0より大きい必要があります",
     "额度提醒阈值": "クォータアラートしきい値",
     "额度查询接口返回令牌额度而非用户额度": "クォータ取得APIは、ユーザークォータではなくトークンクォータを返します",

web/src/i18n/locales/ru.json

@@ -2579,6 +2579,10 @@
     "频率限制的周期（分钟）": "Период ограничения частоты (минуты)",
     "颜色": "Цвет",
     "额度": "Квота",
+    "输入额度": "Введите квоту",
+    "金额": "Сумма",
+    "输入金额": "Введите сумму",
+    "仅用于换算，实际保存的是额度": "Только для пересчёта, сохраняется квота",
     "额度必须大于0": "Квота должна быть больше 0",
     "额度提醒阈值": "Порог напоминания о квоте",
     "额度查询接口返回令牌额度而非用户额度": "Интерфейс запроса квоты возвращает квоту токенов, а не квоту пользователя",

web/src/i18n/locales/vi.json

@@ -3130,6 +3130,9 @@
     "频率限制的周期（分钟）": "Chu kỳ giới hạn tần suất (phút)",
     "颜色": "Màu sắc",
     "额度": "Hạn ngạch",
+    "输入额度": "Nhập hạn ngạch",
+    "输入金额": "Nhập số tiền",
+    "仅用于换算，实际保存的是额度": "Chỉ dùng để quy đổi, giá trị lưu thực tế là hạn ngạch",
     "额度必须大于0": "Hạn ngạch phải lớn hơn 0",
     "额度提醒阈值": "Ngưỡng nhắc nhở hạn ngạch",
     "额度查询接口返回令牌额度而非用户额度": "Giao diện truy vấn hạn ngạch trả về hạn ngạch mã thông báo thay vì hạn ngạch người dùng",