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.

web/src/pages/Redemption/EditRedemption.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   API,
   downloadTextAsFile,
@@ -22,6 +23,7 @@ import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import { Divider } from 'semantic-ui-react';
 
 const EditRedemption = (props) => {
+  const { t } = useTranslation();
   const isEdit = props.editingRedemption.id !== undefined;
   const [loading, setLoading] = useState(isEdit);
 
@@ -69,7 +71,7 @@ const EditRedemption = (props) => {
     let name = inputs.name;
     if (!isEdit && inputs.name === '') {
       // set default name
-      name = '兑换码-' + renderQuota(quota);
+      name = t('新建兑换码') + ' ' + renderQuota(quota);
     }
     setLoading(true);
     let localInputs = inputs;
@@ -90,11 +92,11 @@ const EditRedemption = (props) => {
     const { success, message, data } = res.data;
     if (success) {
       if (isEdit) {
-        showSuccess('兑换码更新成功！');
+        showSuccess(t('兑换码更新成功！'));
         props.refresh();
         props.handleClose();
       } else {
-        showSuccess('兑换码创建成功！');
+        showSuccess(t('兑换码创建成功！'));
         setInputs(originInputs);
         props.refresh();
         props.handleClose();
@@ -107,13 +109,12 @@ const EditRedemption = (props) => {
       for (let i = 0; i < data.length; i++) {
         text += data[i] + '\n';
       }
-      // downloadTextAsFile(text, `${inputs.name}.txt`);
       Modal.confirm({
-        title: '兑换码创建成功',
+        title: t('兑换码创建成功'),
         content: (
           <div>
-            <p>兑换码创建成功，是否下载兑换码？</p>
-            <p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p>
+            <p>{t('兑换码创建成功，是否下载兑换码？')}</p>
+            <p>{t('兑换码将以文本文件的形式下载，文件名为兑换码的名称。')}</p>
           </div>
         ),
         onOk: () => {
@@ -130,7 +131,7 @@ const EditRedemption = (props) => {
         placement={isEdit ? 'right' : 'left'}
         title={
           <Title level={3}>
-            {isEdit ? '更新兑换码信息' : '创建新的兑换码'}
+            {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
           </Title>
         }
         headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
@@ -140,7 +141,7 @@ const EditRedemption = (props) => {
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
               <Button theme='solid' size={'large'} onClick={submit}>
-                提交
+                {t('提交')}
               </Button>
               <Button
                 theme='solid'
@@ -148,7 +149,7 @@ const EditRedemption = (props) => {
                 type={'tertiary'}
                 onClick={handleCancel}
               >
-                取消
+                {t('取消')}
               </Button>
             </Space>
           </div>
@@ -160,9 +161,9 @@ const EditRedemption = (props) => {
         <Spin spinning={loading}>
           <Input
             style={{ marginTop: 20 }}
-            label='名称'
+            label={t('名称')}
             name='name'
-            placeholder={'请输入名称'}
+            placeholder={t('请输入名称')}
             onChange={(value) => handleInputChange('name', value)}
             value={name}
             autoComplete='new-password'
@@ -170,12 +171,12 @@ const EditRedemption = (props) => {
           />
           <Divider />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
+            <Typography.Text>{t('额度') + renderQuotaWithPrompt(quota)}</Typography.Text>
           </div>
           <AutoComplete
             style={{ marginTop: 8 }}
             name='quota'
-            placeholder={'请输入额度'}
+            placeholder={t('请输入额度')}
             onChange={(value) => handleInputChange('quota', value)}
             value={quota}
             autoComplete='new-password'
@@ -193,12 +194,12 @@ const EditRedemption = (props) => {
           {!isEdit && (
             <>
               <Divider />
-              <Typography.Text>生成数量</Typography.Text>
+              <Typography.Text>{t('生成数量')}</Typography.Text>
               <Input
                 style={{ marginTop: 8 }}
-                label='生成数量'
+                label={t('生成数量')}
                 name='count'
-                placeholder={'请输入生成数量'}
+                placeholder={t('请输入生成数量')}
                 onChange={(value) => handleInputChange('count', value)}
                 value={count}
                 autoComplete='new-password'

web/src/pages/Redemption/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import RedemptionsTable from '../../components/RedemptionsTable';
 import { Layout } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
 
-const Redemption = () => (
-  <>
-    <Layout>
-      <Layout.Header>
-        <h3>管理兑换码</h3>
+const Redemption = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Layout>
+        <Layout.Header>
+        <h3>{t('管理兑换码')}</h3>
       </Layout.Header>
       <Layout.Content>
         <RedemptionsTable />
@@ -14,5 +17,6 @@ const Redemption = () => (
     </Layout>
   </>
 );
+}
 
 export default Redemption;