feat: i18n support

2025-09-17 09:16:36 +08:00 · 2025-02-01 17:00:24 +08:00 · 2025-02-01 17:00:24 +08:00 · ae20aea555
commit ae20aea555
parent 60f2776795
13 changed files with 156 additions and 63 deletions
--- a/web/default/public/locales/en/translation.json
+++ b/web/default/public/locales/en/translation.json
@ -240,5 +240,36 @@
      "display_short": "${{amount}}",
      "unit": "$"
    }
+  },
+  "redemption": {
+    "title": "Redemption Management",
+    "edit": {
+      "title_edit": "Update Redemption Code",
+      "title_create": "Create New Redemption Code",
+      "name": "Name",
+      "name_placeholder": "Please enter name",
+      "quota": "Quota",
+      "quota_placeholder": "Please enter quota per redemption code",
+      "count": "Generate Count",
+      "count_placeholder": "Please enter number of codes to generate",
+      "buttons": {
+        "submit": "Submit",
+        "cancel": "Cancel"
+      }
+    }
+  },
+  "log": {
+    "title": "Operation Log",
+    "usage_details": "Usage Details",
+    "total_quota": "Total Quota Used",
+    "click_to_view": "Click to View",
+    "table": {
+      "id": "ID",
+      "username": "Username",
+      "type": "Type",
+      "content": "Content",
+      "amount": "Amount",
+      "time": "Time"
+    }
  }
 }
--- a/web/default/public/locales/zh/translation.json
+++ b/web/default/public/locales/zh/translation.json
@ -240,5 +240,36 @@
      "display_short": "${{amount}}",
      "unit": "$"
    }
+  },
+  "redemption": {
+    "title": "兑换管理",
+    "edit": {
+      "title_edit": "更新兑换码信息",
+      "title_create": "创建新的兑换码",
+      "name": "名称",
+      "name_placeholder": "请输入名称",
+      "quota": "额度",
+      "quota_placeholder": "请输入单个兑换码中包含的额度",
+      "count": "生成数量",
+      "count_placeholder": "请输入生成数量",
+      "buttons": {
+        "submit": "提交",
+        "cancel": "取消"
+      }
+    }
+  },
+  "log": {
+    "title": "操作日志",
+    "usage_details": "使用明细",
+    "total_quota": "总消耗额度",
+    "click_to_view": "点击查看",
+    "table": {
+      "id": "ID",
+      "username": "用户名",
+      "type": "类型",
+      "content": "内容",
+      "amount": "数量",
+      "time": "时间"
+    }
  }
 }
--- a/web/default/src/App.js
+++ b/web/default/src/App.js
@ -44,8 +44,9 @@ function App() {
  const loadStatus = async () => {
    try {
      const res = await API.get('/api/status');
-      const { success, message, data } = res.data || {};  // Add default empty object
-      if (success && data) {  // Check data exists
+      const { success, message, data } = res.data || {}; // Add default empty object
+      if (success && data) {
+        // Check data exists
        localStorage.setItem('status', JSON.stringify(data));
        statusDispatch({ type: 'set', payload: data });
        localStorage.setItem('system_name', data.system_name);
--- a/web/default/src/components/LogsTable.js
+++ b/web/default/src/components/LogsTable.js
@ -18,6 +18,7 @@ import {
  showWarning,
  timestamp2string,
 } from '../helpers';
+import { useTranslation } from 'react-i18next';

 import { ITEMS_PER_PAGE } from '../constants';
 import { renderColorLabel, renderQuota } from '../helpers/render';
@ -137,6 +138,7 @@ function renderDetail(log) {
 }

 const LogsTable = () => {
+  const { t } = useTranslation();
  const [logs, setLogs] = useState([]);
  const [showStat, setShowStat] = useState(false);
  const [loading, setLoading] = useState(true);
@ -309,14 +311,14 @@ const LogsTable = () => {
    <>
      <>
        <Header as='h3'>
-          使用明细（总消耗额度：
-          {showStat && renderQuota(stat.quota)}
+          {t('log.usage_details')}（{t('log.total_quota')}：
+          {showStat && renderQuota(stat.quota, t)}
          {!showStat && (
            <span
              onClick={handleEyeClick}
              style={{ cursor: 'pointer', color: 'gray' }}
            >
-              点击查看
+              {t('log.click_to_view')}
            </span>
          )}
          ）
@ -554,7 +556,7 @@ const LogsTable = () => {
                          {log.completion_tokens ? log.completion_tokens : ''}
                        </Table.Cell>
                        <Table.Cell>
-                          {log.quota ? renderQuota(log.quota, 6) : ''}
+                          {log.quota ? renderQuota(log.quota, t, 6) : ''}
                        </Table.Cell>
                      </>
                    )}
--- a/web/default/src/components/RedemptionsTable.js
+++ b/web/default/src/components/RedemptionsTable.js
@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
  Button,
  Form,
@ -25,39 +26,37 @@ function renderTimestamp(timestamp) {
  return <>{timestamp2string(timestamp)}</>;
 }

-function renderStatus(status) {
+function renderStatus(status, t) {
  switch (status) {
    case 1:
      return (
        <Label basic color='green'>
-          未使用
+          {t('redemption.status.unused')}
        </Label>
      );
    case 2:
      return (
        <Label basic color='red'>
-          {' '}
-          已禁用{' '}
+          {t('redemption.status.disabled')}
        </Label>
      );
    case 3:
      return (
        <Label basic color='grey'>
-          {' '}
-          已使用{' '}
+          {t('redemption.status.used')}
        </Label>
      );
    default:
      return (
        <Label basic color='black'>
-          {' '}
-          未知状态{' '}
+          {t('redemption.status.unknown')}
        </Label>
      );
  }
 }

 const RedemptionsTable = () => {
+  const { t } = useTranslation();
  const [redemptions, setRedemptions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [activePage, setActivePage] = useState(1);
@ -260,8 +259,8 @@ const RedemptionsTable = () => {
                  <Table.Cell>
                    {redemption.name ? redemption.name : '无'}
                  </Table.Cell>
-                  <Table.Cell>{renderStatus(redemption.status)}</Table.Cell>
-                  <Table.Cell>{renderQuota(redemption.quota)}</Table.Cell>
+                  <Table.Cell>{renderStatus(redemption.status, t)}</Table.Cell>
+                  <Table.Cell>{renderQuota(redemption.quota, t)}</Table.Cell>
                  <Table.Cell>
                    {renderTimestamp(redemption.created_time)}
                  </Table.Cell>
--- a/web/default/src/components/TokensTable.js
+++ b/web/default/src/components/TokensTable.js
@ -69,14 +69,14 @@ const TokensTable = () => {
    { key: 'next', text: t('token.copy_options.next'), value: 'next' },
    { key: 'ama', text: t('token.copy_options.ama'), value: 'ama' },
    { key: 'opencat', text: t('token.copy_options.opencat'), value: 'opencat' },
-    { key: 'lobe', text: t('token.copy_options.lobe'), value: 'lobechat' }
+    { key: 'lobe', text: t('token.copy_options.lobe'), value: 'lobechat' },
  ];

  const OPEN_LINK_OPTIONS = [
    { key: 'next', text: t('token.copy_options.next'), value: 'next' },
    { key: 'ama', text: t('token.copy_options.ama'), value: 'ama' },
    { key: 'opencat', text: t('token.copy_options.opencat'), value: 'opencat' },
-    { key: 'lobe', text: t('token.copy_options.lobe'), value: 'lobechat' }
+    { key: 'lobe', text: t('token.copy_options.lobe'), value: 'lobechat' },
  ];

  const [tokens, setTokens] = useState([]);
@ -135,7 +135,8 @@ const TokensTable = () => {
    let nextUrl;

    if (nextLink) {
-      nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      nextUrl =
+        nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
    } else {
      nextUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
    }
@ -152,7 +153,9 @@ const TokensTable = () => {
        url = nextUrl;
        break;
      case 'lobechat':
-        url = nextLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
+        url =
+          nextLink +
+          `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
        break;
      default:
        url = `sk-${key}`;
@ -376,19 +379,21 @@ const TokensTable = () => {
            .map((token, idx) => {
              if (token.deleted) return <></>;

-              const copyOptionsWithHandlers = COPY_OPTIONS.map(option => ({
+              const copyOptionsWithHandlers = COPY_OPTIONS.map((option) => ({
                ...option,
                onClick: async () => {
                  await onCopy(option.value, token.key);
-                }
+                },
              }));

-              const openLinkOptionsWithHandlers = OPEN_LINK_OPTIONS.map(option => ({
-                ...option,
-                onClick: async () => {
-                  await onOpenLink(option.value, token.key);
-                }
-              }));
+              const openLinkOptionsWithHandlers = OPEN_LINK_OPTIONS.map(
+                (option) => ({
+                  ...option,
+                  onClick: async () => {
+                    await onOpenLink(option.value, token.key);
+                  },
+                })
+              );

              return (
                <Table.Row key={token.id}>
@ -473,7 +478,11 @@ const TokensTable = () => {
                          ? t('token.buttons.disable')
                          : t('token.buttons.enable')}
                      </Button>
-                      <Button size={'small'} as={Link} to={'/token/edit/' + token.id}>
+                      <Button
+                        size={'small'}
+                        as={Link}
+                        to={'/token/edit/' + token.id}
+                      >
                        {t('token.buttons.edit')}
                      </Button>
                    </div>
--- a/web/default/src/components/UsersTable.js
+++ b/web/default/src/components/UsersTable.js
@ -10,6 +10,7 @@ import {
 } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';
+import { useTranslation } from 'react-i18next';

 import { ITEMS_PER_PAGE } from '../constants';
 import {
@ -33,6 +34,7 @@ function renderRole(role) {
 }

 const UsersTable = () => {
+  const { t } = useTranslation();
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [activePage, setActivePage] = useState(1);
@ -266,12 +268,12 @@ const UsersTable = () => {
                  <Table.Cell>
                    <Popup
                      content='剩余额度'
-                      trigger={<Label basic>{renderQuota(user.quota)}</Label>}
+                      trigger={<Label basic>{renderQuota(user.quota, t)}</Label>}
                    />
                    <Popup
                      content='已用额度'
                      trigger={
-                        <Label basic>{renderQuota(user.used_quota)}</Label>
+                        <Label basic>{renderQuota(user.used_quota, t)}</Label>
                      }
                    />
                    <Popup
--- a/web/default/src/helpers/render.js
+++ b/web/default/src/helpers/render.js
@ -41,26 +41,32 @@ export function renderNumber(num) {
 }

 export function renderQuota(quota, t, precision = 2) {
-  const displayInCurrency = localStorage.getItem('display_in_currency') === 'true';
-  const quotaPerUnit = parseFloat(localStorage.getItem('quota_per_unit') || '1');
-  
+  const displayInCurrency =
+    localStorage.getItem('display_in_currency') === 'true';
+  const quotaPerUnit = parseFloat(
+    localStorage.getItem('quota_per_unit') || '1'
+  );
+
  if (displayInCurrency) {
    const amount = (quota / quotaPerUnit).toFixed(precision);
    return t('common.quota.display_short', { amount });
  }
-  
+
  return renderNumber(quota);
 }

 export function renderQuotaWithPrompt(quota, t) {
-  const displayInCurrency = localStorage.getItem('display_in_currency') === 'true';
-  const quotaPerUnit = parseFloat(localStorage.getItem('quota_per_unit') || '1');
-  
+  const displayInCurrency =
+    localStorage.getItem('display_in_currency') === 'true';
+  const quotaPerUnit = parseFloat(
+    localStorage.getItem('quota_per_unit') || '1'
+  );
+
  if (displayInCurrency) {
    const amount = (quota / quotaPerUnit).toFixed(2);
    return ` (${t('common.quota.display', { amount })})`;
  }
-  
+
  return '';
 }

--- a/web/default/src/pages/Log/index.js
+++ b/web/default/src/pages/Log/index.js
@ -1,16 +1,21 @@
 import React from 'react';
 import { Card } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 import LogsTable from '../../components/LogsTable';

-const Log = () => (
-  <div className='dashboard-container'>
-    <Card fluid className='chart-card'>
-      <Card.Content>
-        {/*<Card.Header className='header'>操作日志</Card.Header>*/}
-        <LogsTable />
-      </Card.Content>
-    </Card>
-  </div>
-);
+const Log = () => {
+  const { t } = useTranslation();
+  
+  return (
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>{t('log.title')}</Card.Header>
+          <LogsTable />
+        </Card.Content>
+      </Card>
+    </div>
+  );
+};

 export default Log;
--- a/web/default/src/pages/Redemption/EditRedemption.js
+++ b/web/default/src/pages/Redemption/EditRedemption.js
@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';

 const EditRedemption = () => {
+  const { t } = useTranslation();
  const params = useParams();
  const navigate = useNavigate();
  const redemptionId = params.id;
@ -83,14 +85,14 @@ const EditRedemption = () => {
      <Card fluid className='chart-card'>
        <Card.Content>
          <Card.Header className='header'>
-            {isEdit ? '更新兑换码信息' : '创建新的兑换码'}
+            {isEdit ? t('redemption.edit.title_edit') : t('redemption.edit.title_create')}
          </Card.Header>
          <Form loading={loading} autoComplete='new-password'>
            <Form.Field>
              <Form.Input
-                label='名称'
+                label={t('redemption.edit.name')}
                name='name'
-                placeholder={'请输入名称'}
+                placeholder={t('redemption.edit.name_placeholder')}
                onChange={handleInputChange}
                value={name}
                autoComplete='new-password'
@ -99,9 +101,9 @@ const EditRedemption = () => {
            </Form.Field>
            <Form.Field>
              <Form.Input
-                label={`额度${renderQuotaWithPrompt(quota)}`}
+                label={`${t('redemption.edit.quota')}${renderQuotaWithPrompt(quota, t)}`}
                name='quota'
-                placeholder={'请输入单个兑换码中包含的额度'}
+                placeholder={t('redemption.edit.quota_placeholder')}
                onChange={handleInputChange}
                value={quota}
                autoComplete='new-password'
@ -112,9 +114,9 @@ const EditRedemption = () => {
              <>
                <Form.Field>
                  <Form.Input
-                    label='生成数量'
+                    label={t('redemption.edit.count')}
                    name='count'
-                    placeholder={'请输入生成数量'}
+                    placeholder={t('redemption.edit.count_placeholder')}
                    onChange={handleInputChange}
                    value={count}
                    autoComplete='new-password'
@ -124,9 +126,11 @@ const EditRedemption = () => {
              </>
            )}
            <Button positive onClick={submit}>
-              提交
+              {t('redemption.edit.buttons.submit')}
+            </Button>
+            <Button onClick={handleCancel}>
+              {t('redemption.edit.buttons.cancel')}
            </Button>
-            <Button onClick={handleCancel}>取消</Button>
          </Form>
        </Card.Content>
      </Card>
--- a/web/default/src/pages/Token/EditToken.js
+++ b/web/default/src/pages/Token/EditToken.js
@ -107,12 +107,12 @@ const EditToken = () => {

  useEffect(() => {
    if (isEdit) {
-      loadToken().catch(error => {
+      loadToken().catch((error) => {
        showError(error.message || 'Failed to load token');
        setLoading(false);
      });
    }
-    loadAvailableModels().catch(error => {
+    loadAvailableModels().catch((error) => {
      showError(error.message || 'Failed to load models');
    });
  }, []);
@ -255,7 +255,10 @@ const EditToken = () => {
            <Message>{t('token.edit.quota_notice')}</Message>
            <Form.Field>
              <Form.Input
-                label={`${t('token.edit.quota')}${renderQuotaWithPrompt(remain_quota, t)}`}
+                label={`${t('token.edit.quota')}${renderQuotaWithPrompt(
+                  remain_quota,
+                  t
+                )}`}
                name='remain_quota'
                placeholder={t('token.edit.quota_placeholder')}
                onChange={handleInputChange}
--- a/web/default/src/pages/Token/index.js
+++ b/web/default/src/pages/Token/index.js
@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';

 const Token = () => {
  const { t } = useTranslation();
-  
+
  return (
    <div className='dashboard-container'>
      <Card fluid className='chart-card'>
--- a/web/default/src/pages/TopUp/index.js
+++ b/web/default/src/pages/TopUp/index.js
@ -131,7 +131,7 @@ const TopUp = () => {
                      <div style={{ textAlign: 'center', paddingTop: '1em' }}>
                        <Statistic>
                          <Statistic.Value style={{ color: '#2185d0' }}>
-                            {renderQuota(userQuota)}
+                            {renderQuota(userQuota, t)}
                          </Statistic.Value>
                          <Statistic.Label>
                            {t('topup.get_code.current_quota')}