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

@@ -9,8 +9,10 @@ import {
   verifyJSON,
   verifyJSONPromise
 } from '../../../helpers';
+import { useTranslation } from 'react-i18next';
 
 export default function SettingsChats(props) {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     Chats: "[]",
@@ -24,7 +26,7 @@ export default function SettingsChats(props) {
       await refForm.current.validate().then(() => {
         console.log('Validation passed');
         const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning('你似乎并没有修改什么');
+        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
         const requestQueue = updateArray.map((item) => {
           let value = '';
           if (typeof inputs[item.key] === 'boolean') {
@@ -44,23 +46,23 @@ export default function SettingsChats(props) {
               if (res.includes(undefined)) return;
             } else if (requestQueue.length > 1) {
               if (res.includes(undefined))
-                return showError('部分保存失败，请重试');
+                return showError(t('部分保存失败，请重试'));
             }
-            showSuccess('保存成功');
+            showSuccess(t('保存成功'));
             props.refresh();
           })
           .catch(() => {
-            showError('保存失败，请重试');
+            showError(t('保存失败，请重试'));
           })
           .finally(() => {
             setLoading(false);
           });
       }).catch((error) => {
         console.error('Validation failed:', error);
-        showError('请检查输入');
+        showError(t('请检查输入'));
       });
     } catch (error) {
-      showError('请检查输入');
+      showError(t('请检查输入'));
       console.error(error);
     }
   }
@@ -104,19 +106,19 @@ export default function SettingsChats(props) {
         getFormApi={(formAPI) => (refForm.current = formAPI)}
         style={{ marginBottom: 15 }}
       >
-        <Form.Section text={'令牌聊天设置'}>
+        <Form.Section text={t('令牌聊天设置')}>
           <Banner
             type='warning'
-            description={'必须将上方聊天链接全部设置为空，才能使用下方聊天设置功能'}
+            description={t('必须将上方聊天链接全部设置为空，才能使用下方聊天设置功能')}
           />
           <Banner
             type='info'
-            description={'链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1'}
+            description={t('链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1')}
           />
           <Form.TextArea
-            label={'聊天配置'}
+            label={t('聊天配置')}
             extraText={''}
-            placeholder={'为一个 JSON 文本'}
+            placeholder={t('为一个 JSON 文本')}
             field={'Chats'}
             autosize={{ minRows: 6, maxRows: 12 }}
             trigger='blur'
@@ -126,7 +128,7 @@ export default function SettingsChats(props) {
                 validator: (rule, value) => {
                   return verifyJSON(value);
                 },
-                message: '不是合法的 JSON 字符串'
+                message: t('不是合法的 JSON 字符串')
               }
             ]}
             onChange={(value) =>
@@ -140,7 +142,7 @@ export default function SettingsChats(props) {
       </Form>
       <Space>
         <Button onClick={onSubmit}>
-          保存聊天设置
+          {t('保存聊天设置')}
         </Button>
       </Space>
     </Spin>