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/components/RegisterForm.js

@@ -12,8 +12,10 @@ import WeChatIcon from './WeChatIcon.js';
 import TelegramLoginButton from 'react-telegram-login/src';
 import { setUserData } from '../helpers/data.js';
 import { UserContext } from '../context/User/index.js';
+import { useTranslation } from 'react-i18next';
 
 const RegisterForm = () => {
+  const { t } = useTranslation();
   const [inputs, setInputs] = useState({
     username: '',
     password: '',
@@ -182,28 +184,28 @@ const RegisterForm = () => {
             <div style={{ width: 500 }}>
               <Card>
                 <Title heading={2} style={{ textAlign: 'center' }}>
-                  新用户注册
+                  {t('新用户注册')}
                 </Title>
                 <Form size="large">
                   <Form.Input
                     field={'username'}
-                    label={'用户名'}
-                    placeholder="用户名"
+                    label={t('用户名')}
+                    placeholder={t('用户名')}
                     name="username"
                     onChange={(value) => handleChange('username', value)}
                   />
                   <Form.Input
                     field={'password'}
-                    label={'密码'}
-                    placeholder="密码，最短 8 位，最长 20 位"
+                    label={t('密码')}
+                    placeholder={t('输入密码，最短 8 位，最长 20 位')}
                     name="password"
                     type="password"
                     onChange={(value) => handleChange('password', value)}
                   />
                   <Form.Input
                     field={'password2'}
-                    label={'确认密码'}
-                    placeholder="确认密码"
+                    label={t('确认密码')}
+                    placeholder={t('确认密码')}
                     name="password2"
                     type="password"
                     onChange={(value) => handleChange('password2', value)}
@@ -212,21 +214,21 @@ const RegisterForm = () => {
                     <>
                       <Form.Input
                         field={'email'}
-                        label={'邮箱'}
-                        placeholder="输入邮箱地址"
+                        label={t('邮箱')}
+                        placeholder={t('输入邮箱地址')}
                         onChange={(value) => handleChange('email', value)}
                         name="email"
                         type="email"
                         suffix={
                           <Button onClick={sendVerificationCode} disabled={loading}>
-                            获取验证码
+                            {t('获取验证码')}
                           </Button>
                         }
                       />
                       <Form.Input
                         field={'verification_code'}
-                        label={'验证码'}
-                        placeholder="输入验证码"
+                        label={t('验证码')}
+                        placeholder={t('输入验证码')}
                         onChange={(value) => handleChange('verification_code', value)}
                         name="verification_code"
                       />
@@ -242,7 +244,7 @@ const RegisterForm = () => {
                     htmlType={'submit'}
                     onClick={handleSubmit}
                   >
-                    注册
+                    {t('注册')}
                   </Button>
                 </Form>
                 <div
@@ -253,9 +255,9 @@ const RegisterForm = () => {
                   }}
                 >
                   <Text>
-                    已有账户？
+                    {t('已有账户？')}
                     <Link to="/login">
-                      点击登录
+                      {t('点击登录')}
                     </Link>
                   </Text>
                 </div>
@@ -265,7 +267,7 @@ const RegisterForm = () => {
                 status.linuxdo_oauth ? (
                   <>
                     <Divider margin='12px' align='center'>
-                      第三方登录
+                      {t('第三方登录')}
                     </Divider>
                     <div
                       style={{
@@ -330,12 +332,12 @@ const RegisterForm = () => {
                 )}
               </Card>
               <Modal
-                title='微信扫码登录'
+                title={t('微信扫码登录')}
                 visible={showWeChatLoginModal}
                 maskClosable={true}
                 onOk={onSubmitWeChatVerificationCode}
                 onCancel={() => setShowWeChatLoginModal(false)}
-                okText={'登录'}
+                okText={t('登录')}
                 size={'small'}
                 centered={true}
               >
@@ -350,14 +352,14 @@ const RegisterForm = () => {
                 </div>
                 <div style={{ textAlign: 'center' }}>
                   <p>
-                    微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                    {t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}
                   </p>
                 </div>
                 <Form size='large'>
                   <Form.Input
                     field={'wechat_verification_code'}
-                    placeholder='验证码'
-                    label={'验证码'}
+                    placeholder={t('验证码')}
+                    label={t('验证码')}
                     value={inputs.wechat_verification_code}
                     onChange={(value) =>
                       handleChange('wechat_verification_code', value)