feat: able to display quota in dollar

2025-11-09 23:53:41 +08:00 · 2023-06-20 20:09:17 +08:00
parent 3d76a974d1
commit b179c2f208
19 changed files with 125 additions and 45 deletions
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -48,6 +48,8 @@ function App() {
      localStorage.setItem('system_name', data.system_name);
      localStorage.setItem('logo', data.logo);
      localStorage.setItem('footer_html', data.footer_html);
+      localStorage.setItem('quota_per_unit', data.quota_per_unit);
+      localStorage.setItem('display_in_currency', data.display_in_currency);
      if (data.chat_link) {
        localStorage.setItem('chat_link', data.chat_link);
      } else {
--- a/web/src/components/OperationSetting.js
+++ b/web/src/components/OperationSetting.js
@@ -13,9 +13,11 @@ const OperationSetting = () => {
    GroupRatio: '',
    TopUpLink: '',
    ChatLink: '',
+    QuotaPerUnit: 0,
    AutomaticDisableChannelEnabled: '',
    ChannelDisableThreshold: 0,
-    LogConsumeEnabled: ''
+    LogConsumeEnabled: '',
+    DisplayInCurrencyEnabled: ''
  });
  const [originInputs, setOriginInputs] = useState({});
  let [loading, setLoading] = useState(false);
@@ -118,6 +120,9 @@ const OperationSetting = () => {
        if (originInputs['ChatLink'] !== inputs.ChatLink) {
          await updateOption('ChatLink', inputs.ChatLink);
        }
+        if (originInputs['QuotaPerUnit'] !== inputs.QuotaPerUnit) {
+          await updateOption('QuotaPerUnit', inputs.QuotaPerUnit);
+        }
        break;
    }
  };
@@ -129,7 +134,7 @@ const OperationSetting = () => {
          <Header as='h3'>
            通用设置
          </Header>
-          <Form.Group widths={2}>
+          <Form.Group widths={3}>
            <Form.Input
              label='充值链接'
              name='TopUpLink'
@@ -148,6 +153,30 @@ const OperationSetting = () => {
              type='link'
              placeholder='例如 ChatGPT Next Web 的部署地址'
            />
+            <Form.Input
+              label='额度汇率'
+              name='QuotaPerUnit'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.QuotaPerUnit}
+              type='number'
+              step='0.01'
+              placeholder='一单位货币能兑换的额度'
+            />
+          </Form.Group>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.LogConsumeEnabled === 'true'}
+              label='启用额度消费日志记录'
+              name='LogConsumeEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.DisplayInCurrencyEnabled === 'true'}
+              label='以货币形式显示额度'
+              name='DisplayInCurrencyEnabled'
+              onChange={handleInputChange}
+            />
          </Form.Group>
          <Form.Button onClick={() => {
            submitConfig('general').then();
@@ -264,12 +293,6 @@ const OperationSetting = () => {
              placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
            />
          </Form.Group>
-          <Form.Checkbox
-            checked={inputs.LogConsumeEnabled === 'true'}
-            label='启用额度消费日志记录'
-            name='LogConsumeEnabled'
-            onChange={handleInputChange}
-          />
          <Form.Button onClick={() => {
            submitConfig('ratio').then();
          }}>保存倍率设置</Form.Button>
--- a/web/src/components/RedemptionsTable.js
+++ b/web/src/components/RedemptionsTable.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string } from '../helpers';

 import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';

 function renderTimestamp(timestamp) {
  return (
@@ -220,7 +221,7 @@ const RedemptionsTable = () => {
                  <Table.Cell>{redemption.id}</Table.Cell>
                  <Table.Cell>{redemption.name ? redemption.name : '无'}</Table.Cell>
                  <Table.Cell>{renderStatus(redemption.status)}</Table.Cell>
-                  <Table.Cell>{redemption.quota}</Table.Cell>
+                  <Table.Cell>{renderQuota(redemption.quota)}</Table.Cell>
                  <Table.Cell>{renderTimestamp(redemption.created_time)}</Table.Cell>
                  <Table.Cell>{redemption.redeemed_time ? renderTimestamp(redemption.redeemed_time) : "尚未兑换"} </Table.Cell>
                  <Table.Cell>
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, copy, showError, showSuccess, showWarning, timestamp2string } from '../helpers';

 import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';

 function renderTimestamp(timestamp) {
  return (
@@ -220,7 +221,7 @@ const TokensTable = () => {
                <Table.Row key={token.id}>
                  <Table.Cell>{token.name ? token.name : '无'}</Table.Cell>
                  <Table.Cell>{renderStatus(token.status)}</Table.Cell>
-                  <Table.Cell>{token.unlimited_quota ? '无限制' : token.remain_quota}</Table.Cell>
+                  <Table.Cell>{token.unlimited_quota ? '无限制' : renderQuota(token.remain_quota, 2)}</Table.Cell>
                  <Table.Cell>{renderTimestamp(token.created_time)}</Table.Cell>
                  <Table.Cell>{token.expired_time === -1 ? '永不过期' : renderTimestamp(token.expired_time)}</Table.Cell>
                  <Table.Cell>
--- a/web/src/components/UsersTable.js
+++ b/web/src/components/UsersTable.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';

 import { ITEMS_PER_PAGE } from '../constants';
-import { renderGroup, renderNumber, renderText } from '../helpers/render';
+import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';

 function renderRole(role) {
  switch (role) {
@@ -244,8 +244,8 @@ const UsersTable = () => {
                    {user.email ? <Popup hoverable content={user.email} trigger={<span>{renderText(user.email, 24)}</span>} /> : '无'}
                  </Table.Cell>
                  <Table.Cell>
-                    <Popup content='剩余额度' trigger={<Label>{renderNumber(user.quota)}</Label>} />
-                    <Popup content='已用额度' trigger={<Label>{renderNumber(user.used_quota)}</Label>} />
+                    <Popup content='剩余额度' trigger={<Label>{renderQuota(user.quota)}</Label>} />
+                    <Popup content='已用额度' trigger={<Label>{renderQuota(user.used_quota)}</Label>} />
                    <Popup content='请求次数' trigger={<Label>{renderNumber(user.request_count)}</Label>} />
                  </Table.Cell>
                  <Table.Cell>{renderRole(user.role)}</Table.Cell>
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -35,4 +35,15 @@ export function renderNumber(num) {
  } else {
    return num;
  }
+}
+
+export function renderQuota(quota, digits = 2) {
+  let quotaPerUnit = localStorage.getItem('quota_per_unit');
+  let displayInCurrency = localStorage.getItem('display_in_currency');
+  quotaPerUnit = parseFloat(quotaPerUnit);
+  displayInCurrency = displayInCurrency === 'true';
+  if (displayInCurrency) {
+    return '$' + (quota / quotaPerUnit).toFixed(digits);
+  }
+  return renderNumber(quota);
 }
--- a/web/src/pages/Redemption/EditRedemption.js
+++ b/web/src/pages/Redemption/EditRedemption.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { useParams } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
+import { renderQuota } from '../../helpers/render';

 const EditRedemption = () => {
  const params = useParams();
@@ -87,7 +88,7 @@ const EditRedemption = () => {
          </Form.Field>
          <Form.Field>
            <Form.Input
-              label='额度'
+              label={`额度（等价金额 ${renderQuota(quota)}）`}
              name='quota'
              placeholder={'请输入单个兑换码中包含的额度'}
              onChange={handleInputChange}
--- a/web/src/pages/Token/EditToken.js
+++ b/web/src/pages/Token/EditToken.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
 import { useParams } from 'react-router-dom';
 import { API, showError, showSuccess, timestamp2string } from '../../helpers';
+import { renderQuota } from '../../helpers/render';

 const EditToken = () => {
  const params = useParams();
@@ -137,7 +138,7 @@ const EditToken = () => {
          <Message>注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。</Message>
          <Form.Field>
            <Form.Input
-              label='额度'
+              label={`额度（等价金额 ${renderQuota(remain_quota)}）`}
              name='remain_quota'
              placeholder={'请输入额度'}
              onChange={handleInputChange}
--- a/web/src/pages/TopUp/index.js
+++ b/web/src/pages/TopUp/index.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Grid, Header, Segment, Statistic } from 'semantic-ui-react';
 import { API, showError, showInfo, showSuccess } from '../../helpers';
+import { renderQuota } from '../../helpers/render';

 const TopUp = () => {
  const [redemptionCode, setRedemptionCode] = useState('');
@@ -81,7 +82,7 @@ const TopUp = () => {
        <Grid.Column>
          <Statistic.Group widths='one'>
            <Statistic>
-              <Statistic.Value>{userQuota.toLocaleString()}</Statistic.Value>
+              <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
              <Statistic.Label>剩余额度</Statistic.Label>
            </Statistic>
          </Statistic.Group>