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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin, Tag } from '@douyinfe/semi-ui';
+import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
 import {
   compareObjects,
   API,
@@ -7,12 +7,15 @@ import {
   showSuccess,
   showWarning,
 } from '../../../helpers';
+import { useTranslation } from 'react-i18next';
 
 export default function DataDashboard(props) {
+  const { t } = useTranslation();
+  
   const optionsDataExportDefaultTime = [
-    { key: 'hour', label: '小时', value: 'hour' },
-    { key: 'day', label: '天', value: 'day' },
-    { key: 'week', label: '周', value: 'week' },
+    { key: 'hour', label: t('小时'), value: 'hour' },
+    { key: 'day', label: t('天'), value: 'day' },
+    { key: 'week', label: t('周'), value: 'week' },
   ];
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
@@ -25,7 +28,7 @@ export default function DataDashboard(props) {
 
   function onSubmit() {
     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,13 +47,13 @@ export default function DataDashboard(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);
@@ -81,12 +84,12 @@ export default function DataDashboard(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={'DataExportEnabled'}
-                  label={'启用数据看板（实验性）'}
+                  label={t('启用数据看板（实验性）')}
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
@@ -102,12 +105,12 @@ export default function DataDashboard(props) {
             <Row>
               <Col span={8}>
                 <Form.InputNumber
-                  label={'数据看板更新间隔 '}
+                  label={t('数据看板更新间隔')}
                   step={1}
                   min={1}
-                  suffix={'分钟'}
-                  extraText={'设置过短会影响数据库性能'}
-                  placeholder={'数据看板更新间隔'}
+                  suffix={t('分钟')}
+                  extraText={t('设置过短会影响数据库性能')}
+                  placeholder={t('数据看板更新间隔')}
                   field={'DataExportInterval'}
                   onChange={(value) =>
                     setInputs({
@@ -119,11 +122,11 @@ export default function DataDashboard(props) {
               </Col>
               <Col span={8}>
                 <Form.Select
-                  label='数据看板默认时间粒度'
+                  label={t('数据看板默认时间粒度')}
                   optionList={optionsDataExportDefaultTime}
                   field={'DataExportDefaultTime'}
-                  extraText={'仅修改展示粒度，统计精确到小时'}
-                  placeholder={'数据看板默认时间粒度'}
+                  extraText={t('仅修改展示粒度，统计精确到小时')}
+                  placeholder={t('数据看板默认时间粒度')}
                   style={{ width: 180 }}
                   onChange={(value) =>
                     setInputs({
@@ -136,7 +139,7 @@ export default function DataDashboard(props) {
             </Row>
             <Row>
               <Button size='default' onClick={onSubmit}>
-                保存数据看板设置
+                {t('保存数据看板设置')}
               </Button>
             </Row>
           </Form.Section>