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/User/EditUser.js

@@ -14,6 +14,7 @@ import {
   Spin,
   Typography,
 } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
 
 const EditUser = (props) => {
   const userId = props.editingUser.id;
@@ -120,11 +121,13 @@ const EditUser = (props) => {
     setIsModalOpen(true);
   };
 
+  const { t } = useTranslation();
+
   return (
     <>
       <SideSheet
         placement={'right'}
-        title={<Title level={3}>{'编辑用户'}</Title>}
+        title={<Title level={3}>{t('编辑用户')}</Title>}
         headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         visible={props.visible}
@@ -132,7 +135,7 @@ const EditUser = (props) => {
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
               <Button theme='solid' size={'large'} onClick={submit}>
-                提交
+                {t('提交')}
               </Button>
               <Button
                 theme='solid'
@@ -140,7 +143,7 @@ const EditUser = (props) => {
                 type={'tertiary'}
                 onClick={handleCancel}
               >
-                取消
+                {t('取消')}
               </Button>
             </Space>
           </div>
@@ -151,35 +154,35 @@ const EditUser = (props) => {
       >
         <Spin spinning={loading}>
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>用户名</Typography.Text>
+            <Typography.Text>{t('用户名')}</Typography.Text>
           </div>
           <Input
-            label='用户名'
+            label={t('用户名')}
             name='username'
-            placeholder={'请输入新的用户名'}
+            placeholder={t('请输入新的用户名')}
             onChange={(value) => handleInputChange('username', value)}
             value={username}
             autoComplete='new-password'
           />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>密码</Typography.Text>
+            <Typography.Text>{t('密码')}</Typography.Text>
           </div>
           <Input
-            label='密码'
+            label={t('密码')}
             name='password'
             type={'password'}
-            placeholder={'请输入新的密码，最短 8 位'}
+            placeholder={t('请输入新的密码，最短 8 位')}
             onChange={(value) => handleInputChange('password', value)}
             value={password}
             autoComplete='new-password'
           />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>显示名称</Typography.Text>
+            <Typography.Text>{t('显示名称')}</Typography.Text>
           </div>
           <Input
-            label='显示名称'
+            label={t('显示名称')}
             name='display_name'
-            placeholder={'请输入新的显示名称'}
+            placeholder={t('请输入新的显示名称')}
             onChange={(value) => handleInputChange('display_name', value)}
             value={display_name}
             autoComplete='new-password'
@@ -187,76 +190,76 @@ const EditUser = (props) => {
           {userId && (
             <>
               <div style={{ marginTop: 20 }}>
-                <Typography.Text>分组</Typography.Text>
+                <Typography.Text>{t('分组')}</Typography.Text>
               </div>
               <Select
-                placeholder={'请选择分组'}
+                placeholder={t('请选择分组')}
                 name='group'
                 fluid
                 search
                 selection
                 allowAdditions
-                additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
+                additionLabel={t('请在系统设置页面编辑分组倍率以添加新的分组：')}
                 onChange={(value) => handleInputChange('group', value)}
                 value={inputs.group}
                 autoComplete='new-password'
                 optionList={groupOptions}
               />
               <div style={{ marginTop: 20 }}>
-                <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
+                <Typography.Text>{`${t('剩余额度')}${renderQuotaWithPrompt(quota)}`}</Typography.Text>
               </div>
               <Space>
                 <Input
                   name='quota'
-                  placeholder={'请输入新的剩余额度'}
+                  placeholder={t('请输入新的剩余额度')}
                   onChange={(value) => handleInputChange('quota', value)}
                   value={quota}
                   type={'number'}
                   autoComplete='new-password'
                 />
-                <Button onClick={openAddQuotaModal}>添加额度</Button>
+                <Button onClick={openAddQuotaModal}>{t('添加额度')}</Button>
               </Space>
             </>
           )}
-          <Divider style={{ marginTop: 20 }}>以下信息不可修改</Divider>
+          <Divider style={{ marginTop: 20 }}>{t('以下信息不可修改')}</Divider>
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
+            <Typography.Text>{t('已绑定的 GitHub 账户')}</Typography.Text>
           </div>
           <Input
             name='github_id'
             value={github_id}
             autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
             readonly
           />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>已绑定的微信账户</Typography.Text>
+            <Typography.Text>{t('已绑定的微信账户')}</Typography.Text>
           </div>
           <Input
             name='wechat_id'
             value={wechat_id}
             autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
             readonly
           />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>已绑定的邮箱账户</Typography.Text>
+            <Typography.Text>{t('已绑定的邮箱账户')}</Typography.Text>
           </div>
           <Input
             name='email'
             value={email}
             autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
             readonly
           />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>已绑定的Telegram账户</Typography.Text>
+            <Typography.Text>{t('已绑定的Telegram账户')}</Typography.Text>
           </div>
           <Input
             name='telegram_id'
             value={telegram_id}
             autoComplete='new-password'
-            placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
             readonly
           />
         </Spin>
@@ -272,11 +275,11 @@ const EditUser = (props) => {
         closable={null}
       >
         <div style={{ marginTop: 20 }}>
-          <Typography.Text>{`新额度${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal))}`}</Typography.Text>
+          <Typography.Text>{`${t('新额度')}${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal))}`}</Typography.Text>
         </div>
         <Input
           name='addQuotaLocal'
-          placeholder={'需要添加的额度（支持负数）'}
+          placeholder={t('需要添加的额度（支持负数）')}
           onChange={(value) => {
             setAddQuotaLocal(value);
           }}

web/src/pages/User/index.js

@@ -1,18 +1,22 @@
 import React from 'react';
 import UsersTable from '../../components/UsersTable';
 import { Layout } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
 
-const User = () => (
-  <>
-    <Layout>
-      <Layout.Header>
-        <h3>管理用户</h3>
+const User = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Layout>
+        <Layout.Header>
+        <h3>{t('管理用户')}</h3>
       </Layout.Header>
       <Layout.Content>
         <UsersTable />
-      </Layout.Content>
-    </Layout>
-  </>
-);
+        </Layout.Content>
+      </Layout>
+    </>
+  );
+};
 
 export default User;