From 221d7b5c9918fe8914092e5e98a9be637213ad4e Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Fri, 13 Dec 2024 19:03:14 +0800
Subject: [PATCH] feat: Integrate i18n support and enhance UI text localization
- Added internationalization (i18n) support across various components, enabling dynamic language switching and improved user experience.
- Updated multiple components to utilize translation functions for labels, buttons, and messages, ensuring consistent language display.
- Enhanced the user interface by refining text elements in the ChannelsTable, LogsTable, and various settings pages, improving clarity and accessibility.
- Adjusted CSS styles for better responsiveness and layout consistency across different screen sizes.
---
i18n/en.json | 21 +-
web/src/App.js | 9 +-
web/src/components/ChannelsTable.js | 335 ++---
web/src/components/Footer.js | 7 +-
web/src/components/HeaderBar.js | 93 +-
web/src/components/LoginForm.js | 32 +-
web/src/components/LogsTable.js | 248 ++--
web/src/components/MjLogsTable.js | 509 +++----
web/src/components/ModelPricing.js | 215 +--
web/src/components/OtherSetting.js | 62 +-
web/src/components/PageLayout.js | 4 +-
web/src/components/PersonalSetting.js | 117 +-
web/src/components/RedemptionsTable.js | 118 +-
web/src/components/RegisterForm.js | 44 +-
web/src/components/SiderBar.js | 38 +-
web/src/components/TokensTable.js | 194 ++-
web/src/components/UsersTable.js | 184 +--
web/src/helpers/render.js | 61 +-
web/src/i18n/i18n.js | 6 +-
web/src/i18n/locales/en copy.json | 1238 +++++++++++++++++
web/src/i18n/locales/en.json | 644 +++++----
web/src/i18n/locales/zh.json | 13 +
web/src/index.css | 24 +-
web/src/pages/Channel/EditChannel.js | 196 ++-
web/src/pages/Channel/index.js | 22 +-
web/src/pages/Detail/index.js | 64 +-
web/src/pages/Playground/Playground.js | 51 +-
web/src/pages/Redemption/EditRedemption.js | 35 +-
web/src/pages/Redemption/index.js | 14 +-
.../pages/Setting/Operation/SettingsChats.js | 28 +-
.../Setting/Operation/SettingsCreditLimit.js | 28 +-
.../Operation/SettingsDataDashboard.js | 39 +-
.../Setting/Operation/SettingsDrawing.js | 33 +-
.../Setting/Operation/SettingsGeneral.js | 45 +-
.../pages/Setting/Operation/SettingsLog.js | 26 +-
.../Setting/Operation/SettingsMonitoring.js | 29 +-
.../Operation/SettingsSensitiveWords.js | 24 +-
web/src/pages/Setting/index.js | 11 +-
web/src/pages/Token/index.js | 22 +-
web/src/pages/TopUp/index.js | 54 +-
web/src/pages/User/EditUser.js | 61 +-
web/src/pages/User/index.js | 22 +-
42 files changed, 3192 insertions(+), 1828 deletions(-)
create mode 100644 web/src/i18n/locales/en copy.json
create mode 100644 web/src/i18n/locales/zh.json
diff --git a/i18n/en.json b/i18n/en.json
index 944f903b..1f480f96 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -174,11 +174,11 @@
"\"验证码\"": "\"Verification code\"",
"全部用户": "All users",
"当前用户": "Current user",
- "'全部'": "'All'",
- "'充值'": "'Recharge'",
- "'消费'": "'Consumption'",
- "'管理'": "'Management'",
- "'系统'": "'System'",
+ "全部'": "All'",
+ "充值'": "Recharge'",
+ "消费'": "Consumption'",
+ "管理'": "Management'",
+ "系统'": "System'",
" 充值 ": " Recharge ",
" 消费 ": " Consumption ",
" 管理 ": " Management ",
@@ -377,6 +377,7 @@
"添加新的用户": "Add New User",
"自定义": "Custom",
"等价金额": "Equivalent Amount",
+ "等价金额:{{quota}}:": "Equivalent amount: {{quota}}",
"未登录或登录已过期,请重新登录": "Not logged in or login has expired, please log in again",
"请求次数过多,请稍后再试": "Too many requests, please try again later",
"服务器内部错误,请联系管理员": "Server internal error, please contact the administrator",
@@ -525,5 +526,13 @@
"模型版本": "Model version",
"请输入星火大模型版本,注意是接口地址中的版本号,例如:v2.1": "Please enter the version of the Starfire model, note that it is the version number in the interface address, for example: v2.1",
"点击查看": "click to view",
- "请确保已在 Azure 上创建了 gpt-35-turbo 模型,并且 apiVersion 已正确填写!": "Please make sure that the gpt-35-turbo model has been created on Azure, and the apiVersion has been filled in correctly!"
+ "请确保已在 Azure 上创建了 gpt-35-turbo 模型,并且 apiVersion 已正确填写!": "Please make sure that the gpt-35-turbo model has been created on Azure, and the apiVersion has been filled in correctly!",
+ "第 {{start}} - {{end}} 条,共 {{total}} 条": "Items {{start}} - {{end}} of {{total}}",
+ "模型测试": "Model test",
+ "请选择最长响应时间": "Please select the longest response time",
+ "成功时自动启用通道": "Enable channel when successful",
+ "分钟": "minutes",
+ "设置过短会影响数据库性能": "Setting too short will affect database performance",
+ "仅修改展示粒度,统计精确到小时": "Only modify display granularity, statistics accurate to the hour",
+ "当运行通道全部测试时,超过此时间将自动禁用通道": "When running all channel tests, the channel will be automatically disabled when this time is exceeded"
}
diff --git a/web/src/App.js b/web/src/App.js
index c42e6363..10ad9e34 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -26,6 +26,7 @@ import Pricing from './pages/Pricing/index.js';
import Task from "./pages/Task/index.js";
import Playground from './pages/Playground/Playground.js';
import OAuth2Callback from "./components/OAuth2Callback.js";
+import { useTranslation } from 'react-i18next';
const Home = lazy(() => import('./pages/Home'));
const Detail = lazy(() => import('./pages/Detail'));
@@ -34,6 +35,7 @@ const About = lazy(() => import('./pages/About'));
function App() {
const [userState, userDispatch] = useContext(UserContext);
// const [statusState, statusDispatch] = useContext(StatusContext);
+ const { i18n } = useTranslation();
const loadUser = () => {
let user = localStorage.getItem('user');
@@ -56,7 +58,12 @@ function App() {
linkElement.href = logo;
}
}
- }, []);
+ // 从localStorage获取上次使用的语言
+ const savedLang = localStorage.getItem('i18nextLng');
+ if (savedLang) {
+ i18n.changeLanguage(savedLang);
+ }
+ }, [i18n]);
return (
<>
diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index 61dd45a2..3167650f 100644
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -36,43 +36,111 @@ import { IconList, IconTreeTriangleDown } from '@douyinfe/semi-icons';
import { loadChannelModels } from './utils.js';
import EditTagModal from '../pages/Channel/EditTagModal.js';
import TextNumberInput from './custom/TextNumberInput.js';
+import { useTranslation } from 'react-i18next';
function renderTimestamp(timestamp) {
return <>{timestamp2string(timestamp)}>;
}
-let type2label = undefined;
-
-function renderType(type) {
- if (!type2label) {
- type2label = new Map();
- for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
- type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
- }
- type2label[0] = { value: 0, text: '未知类型', color: 'grey' };
- }
- return (
-