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/LoginForm.js

@@ -28,6 +28,7 @@ import { IconGithubLogo, IconAlarm } from '@douyinfe/semi-icons';
 import WeChatIcon from './WeChatIcon';
 import { setUserData } from '../helpers/data.js';
 import LinuxDoIcon from './LinuxDoIcon.js';
+import { useTranslation } from 'react-i18next';
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({
@@ -45,6 +46,7 @@ const LoginForm = () => {
   let navigate = useNavigate();
   const [status, setStatus] = useState({});
   const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
+  const { t } = useTranslation();
 
   const logo = getLogo();
 
@@ -55,7 +57,7 @@ const LoginForm = () => {
 
   useEffect(() => {
     if (searchParams.get('expired')) {
-      showError('未登录或登录已过期，请重新登录！');
+      showError(t('未登录或登录已过期，请重新登录'));
     }
     let status = localStorage.getItem('status');
     if (status) {
@@ -182,20 +184,20 @@ const LoginForm = () => {
             <div style={{ width: 500 }}>
               <Card>
                 <Title heading={2} style={{ textAlign: 'center' }}>
-                  用户登录
+                  {t('用户登录')}
                 </Title>
                 <Form>
                   <Form.Input
                     field={'username'}
-                    label={'用户名'}
-                    placeholder='用户名'
+                    label={t('用户名/邮箱')}
+                    placeholder={t('用户名/邮箱')}
                     name='username'
                     onChange={(value) => handleChange('username', value)}
                   />
                   <Form.Input
                     field={'password'}
-                    label={'密码'}
-                    placeholder='密码'
+                    label={t('密码')}
+                    placeholder={t('密码')}
                     name='password'
                     type='password'
                     onChange={(value) => handleChange('password', value)}
@@ -209,7 +211,7 @@ const LoginForm = () => {
                     htmlType={'submit'}
                     onClick={handleSubmit}
                   >
-                    登录
+                    {t('登录')}
                   </Button>
                 </Form>
                 <div
@@ -220,10 +222,10 @@ const LoginForm = () => {
                   }}
                 >
                   <Text>
-                    没有账号请先 <Link to='/register'>注册账号</Link>
+                    {t('没有账户？')} <Link to='/register'>{t('点击注册')}</Link>
                   </Text>
                   <Text>
-                    忘记密码 <Link to='/reset'>点击重置</Link>
+                    {t('忘记密码？')} <Link to='/reset'>{t('点击重置')}</Link>
                   </Text>
                 </div>
                 {status.github_oauth ||
@@ -232,7 +234,7 @@ const LoginForm = () => {
                 status.linuxdo_oauth ? (
                   <>
                     <Divider margin='12px' align='center'>
-                      第三方登录
+                      {t('第三方登录')}
                     </Divider>
                     <div
                       style={{
@@ -296,12 +298,12 @@ const LoginForm = () => {
                   <></>
                 )}
                 <Modal
-                  title='微信扫码登录'
+                  title={t('微信扫码登录')}
                   visible={showWeChatLoginModal}
                   maskClosable={true}
                   onOk={onSubmitWeChatVerificationCode}
                   onCancel={() => setShowWeChatLoginModal(false)}
-                  okText={'登录'}
+                  okText={t('登录')}
                   size={'small'}
                   centered={true}
                 >
@@ -316,14 +318,14 @@ const LoginForm = () => {
                   </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)