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/Setting/Operation/SettingsLog.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Button, Col, Form, Row, Spin, DatePicker } from '@douyinfe/semi-ui';
 import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
 import {
   compareObjects,
   API,
@@ -10,6 +11,7 @@ import {
 } from '../../../helpers';
 
 export default function SettingsLog(props) {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [loadingCleanHistoryLog, setLoadingCleanHistoryLog] = useState(false);
   const [inputs, setInputs] = useState({
@@ -24,7 +26,7 @@ export default function SettingsLog(props) {
       (item) => item.key !== 'historyTimestamp',
     );
 
-    if (!updateArray.length) return showWarning('你似乎并没有修改什么');
+    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
     const requestQueue = updateArray.map((item) => {
       let value = '';
       if (typeof inputs[item.key] === 'boolean') {
@@ -43,13 +45,13 @@ export default function SettingsLog(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError('部分保存失败，请重试');
+          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
         }
-        showSuccess('保存成功');
+        showSuccess(t('保存成功'));
         props.refresh();
       })
       .catch(() => {
-        showError('保存失败，请重试');
+        showError(t('保存失败，请重试'));
       })
       .finally(() => {
         setLoading(false);
@@ -58,16 +60,16 @@ export default function SettingsLog(props) {
   async function onCleanHistoryLog() {
     try {
       setLoadingCleanHistoryLog(true);
-      if (!inputs.historyTimestamp) throw new Error('请选择日志记录时间');
+      if (!inputs.historyTimestamp) throw new Error(t('请选择日志记录时间'));
       const res = await API.delete(
         `/api/log/?target_timestamp=${Date.parse(inputs.historyTimestamp) / 1000}`,
       );
       const { success, message, data } = res.data;
       if (success) {
-        showSuccess(`${data} 条日志已清理！`);
+        showSuccess(`${data} ${t('条日志已清理！')}`);
         return;
       } else {
-        throw new Error('日志清理失败：' + message);
+        throw new Error(t('日志清理失败：') + message);
       }
     } catch (error) {
       showError(error.message);
@@ -96,12 +98,12 @@ export default function SettingsLog(props) {
           getFormApi={(formAPI) => (refForm.current = formAPI)}
           style={{ marginBottom: 15 }}
         >
-          <Form.Section text={'日志设置'}>
+          <Form.Section text={t('日志设置')}>
             <Row gutter={16}>
               <Col span={8}>
                 <Form.Switch
                   field={'LogConsumeEnabled'}
-                  label={'启用额度消费日志记录'}
+                  label={t('启用额度消费日志记录')}
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
@@ -116,7 +118,7 @@ export default function SettingsLog(props) {
               <Col span={8}>
                 <Spin spinning={loadingCleanHistoryLog}>
                   <Form.DatePicker
-                    label='日志记录时间'
+                    label={t('日志记录时间')}
                     field={'historyTimestamp'}
                     type='dateTime'
                     inputReadOnly={true}
@@ -128,7 +130,7 @@ export default function SettingsLog(props) {
                     }}
                   />
                   <Button size='default' onClick={onCleanHistoryLog}>
-                    清除历史日志
+                    {t('清除历史日志')}
                   </Button>
                 </Spin>
               </Col>
@@ -136,7 +138,7 @@ export default function SettingsLog(props) {
 
             <Row>
               <Button size='default' onClick={onSubmit}>
-                保存日志设置
+                {t('保存日志设置')}
               </Button>
             </Row>
           </Form.Section>