You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by do...@apache.org on 2021/08/26 02:53:38 UTC

[incubator-inlong] branch master updated: [INLONG-734] Support the internationalization of front-end system #1323 (#1478)

This is an automated email from the ASF dual-hosted git repository.

dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong.git


The following commit(s) were added to refs/heads/master by this push:
     new 41d02d1  [INLONG-734] Support the internationalization of front-end system #1323 (#1478)
41d02d1 is described below

commit 41d02d1e453592e3357d2ab051c22bee47e8138f
Author: Daniel <le...@outlook.com>
AuthorDate: Thu Aug 26 10:53:30 2021 +0800

    [INLONG-734] Support the internationalization of front-end system #1323 (#1478)
---
 .../AccessHelper/DataSourcesEditor/CreateModal.tsx |  10 +-
 .../AccessHelper/DataSourcesEditor/FileConfig.tsx  |  28 +--
 .../AccessHelper/DataSourcesEditor/index.tsx       |  15 +-
 .../AccessHelper/DataStorageEditor/DetailModal.tsx |   2 +-
 .../AccessHelper/DataStorageEditor/Editor.tsx      |  16 +-
 .../AccessHelper/DataStorageEditor/hiveConfig.tsx  |  47 ++--
 .../AccessHelper/FieldsConfig/bussinessFields.tsx  |  51 ++--
 .../AccessHelper/FieldsConfig/dataFields.tsx       |  65 ++---
 .../BussinessSelect/MyBussinessModal.tsx           |  23 +-
 .../ConsumeHelper/BussinessSelect/index.tsx        |   5 +-
 .../ConsumeHelper/FieldsConfig/basicFields.tsx     |  42 ++--
 .../src/components/EditableTable/index.tsx         |   9 +-
 .../src/components/FormGenerator/plugins.tsx       |  15 +-
 .../components/Layout/NavWidget/index.module.less  |   7 +-
 .../src/components/Layout/NavWidget/index.tsx      |   8 +-
 .../src/components/PageContainer/PageContainer.tsx |   2 +-
 .../src/components/StaffSelect/index.tsx           |   5 +-
 inlong-website/src/configs/menus/index.ts          |  10 +-
 inlong-website/src/configs/pagination/index.ts     |   4 +-
 inlong-website/src/i18n.ts                         |  29 +++
 inlong-website/src/locales/cn.json                 | 269 ++++++++++++++++++++-
 inlong-website/src/locales/en.json                 | 269 ++++++++++++++++++++-
 .../src/pages/AccessCreate/Bussiness/config.tsx    |  19 +-
 .../src/pages/AccessCreate/DataStream/config.tsx   |  23 +-
 inlong-website/src/pages/AccessCreate/index.tsx    |  25 +-
 .../pages/AccessDashboard/ExecutionLogModal.tsx    |  45 ++--
 .../src/pages/AccessDashboard/config.tsx           |  32 +--
 inlong-website/src/pages/AccessDashboard/index.tsx |   8 +-
 .../src/pages/AccessDashboard/status.tsx           |  19 +-
 .../src/pages/AccessDetail/DataSources/index.tsx   |  30 ++-
 .../src/pages/AccessDetail/DataSources/status.tsx  |  19 +-
 .../src/pages/AccessDetail/DataStorage/index.tsx   |  30 ++-
 .../src/pages/AccessDetail/DataStorage/status.tsx  |   9 +-
 .../AccessDetail/DataStream/StreamItemModal.tsx    |  26 +-
 .../src/pages/AccessDetail/DataStream/config.tsx   |  34 ++-
 .../src/pages/AccessDetail/DataStream/index.tsx    |  15 +-
 .../src/pages/AccessDetail/DataStream/status.tsx   |   9 +-
 .../src/pages/AccessDetail/Info/index.tsx          |  10 +-
 inlong-website/src/pages/AccessDetail/index.tsx    |  14 +-
 .../src/pages/ApprovalDetail/AccessConfig.tsx      |  23 +-
 .../src/pages/ApprovalDetail/ConsumeConfig.tsx     |   5 +-
 inlong-website/src/pages/ApprovalDetail/index.tsx  |  53 ++--
 .../src/pages/Approvals/Applies/config.tsx         |  23 +-
 .../src/pages/Approvals/Applies/status.tsx         |  11 +-
 .../src/pages/Approvals/Approvals/config.tsx       |  23 +-
 .../src/pages/Approvals/Approvals/status.tsx       |  11 +-
 inlong-website/src/pages/Approvals/index.tsx       |  13 +-
 .../src/pages/ConsumeCreate/Info/config.tsx        |   3 +-
 inlong-website/src/pages/ConsumeCreate/index.tsx   |  21 +-
 .../src/pages/ConsumeDashboard/config.tsx          |  38 ++-
 .../src/pages/ConsumeDashboard/index.tsx           |   8 +-
 .../src/pages/ConsumeDashboard/status.tsx          |  19 +-
 .../src/pages/ConsumeDetail/Info/config.tsx        |   3 +-
 .../src/pages/ConsumeDetail/Info/index.tsx         |  15 +-
 inlong-website/src/pages/ConsumeDetail/index.tsx   |  12 +-
 inlong-website/src/pages/Login/index.tsx           |  17 +-
 .../src/pages/UserManagement/DetailModal.tsx       |  23 +-
 inlong-website/src/pages/UserManagement/config.tsx |  25 +-
 inlong-website/src/pages/UserManagement/index.tsx  |   9 +-
 inlong-website/src/pages/UserManagement/status.tsx |   5 +-
 inlong-website/src/setupProxy.js                   |   4 +-
 61 files changed, 1235 insertions(+), 427 deletions(-)

diff --git a/inlong-website/src/components/AccessHelper/DataSourcesEditor/CreateModal.tsx b/inlong-website/src/components/AccessHelper/DataSourcesEditor/CreateModal.tsx
index d7ab73a..ee097d1 100644
--- a/inlong-website/src/components/AccessHelper/DataSourcesEditor/CreateModal.tsx
+++ b/inlong-website/src/components/AccessHelper/DataSourcesEditor/CreateModal.tsx
@@ -22,6 +22,7 @@ import { Modal } from 'antd';
 import { ModalProps } from 'antd/es/modal';
 import FormGenerator, { useForm } from '@/components/FormGenerator';
 import { useRequest, useUpdateEffect } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import { getCreateFormContent as getFileCreateFormContent } from './FileConfig';
 import { getCreateFormContent as getDbCreateFormContent } from './DbConfig';
 
@@ -37,6 +38,7 @@ export interface Props extends ModalProps {
 
 const Comp: React.FC<Props> = ({ type, id, content = [], record, ...modalProps }) => {
   const [form] = useForm();
+  const { t } = useTranslation();
 
   const onOk = async () => {
     const values = await form.validateFields();
@@ -73,7 +75,13 @@ const Comp: React.FC<Props> = ({ type, id, content = [], record, ...modalProps }
 
   return (
     <>
-      <Modal {...modalProps} title={`${type === 'DB' ? 'DB' : '文件'}数据源`} onOk={onOk}>
+      <Modal
+        {...modalProps}
+        title={
+          type === 'DB' ? 'DB' : t('components.AccessHelper.DataSourcesEditor.CreateModal.File')
+        }
+        onOk={onOk}
+      >
         <FormGenerator content={content.concat(getCreateFormContent())} form={form} useMaxWidth />
       </Modal>
     </>
diff --git a/inlong-website/src/components/AccessHelper/DataSourcesEditor/FileConfig.tsx b/inlong-website/src/components/AccessHelper/DataSourcesEditor/FileConfig.tsx
index e92a065..63ce694 100644
--- a/inlong-website/src/components/AccessHelper/DataSourcesEditor/FileConfig.tsx
+++ b/inlong-website/src/components/AccessHelper/DataSourcesEditor/FileConfig.tsx
@@ -19,42 +19,38 @@
 
 import { ColumnsType } from 'antd/es/table';
 import rulesPattern from '@/utils/pattern';
+import i18n from '@/i18n';
 
 export const getCreateFormContent = () => {
   const array = [
     {
       type: 'input',
-      label: '数据源IP',
+      label: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.DataSourceIP'),
       name: 'ip',
       rules: [
         { required: true },
         {
           pattern: rulesPattern.ip,
-          message: '请正确输入Ip地址',
+          message: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.IpRule'),
         },
       ],
     },
     {
       type: 'inputnumber',
-      label: '端⼝',
+      label: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.Port'),
       name: 'port',
       props: {
-        min: 0,
+        min: 1,
+        max: 65535,
       },
-      rules: [
-        { required: true },
-        {
-          pattern: rulesPattern.port,
-          message: '请正确输入端口号(1-65535)',
-        },
-      ],
+      rules: [{ required: true }],
     },
     {
       type: 'input',
-      label: '⽂件路径',
+      label: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.FilePath'),
       name: 'filePath',
       rules: [{ required: true }],
-      suffix: '填写绝对路径',
+      suffix: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.FillInTheAbsolutePath'),
     },
   ];
 
@@ -63,17 +59,17 @@ export const getCreateFormContent = () => {
 
 export const tableColumns: ColumnsType = [
   {
-    title: '数据源IP',
+    title: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.DataSourceIP'),
     dataIndex: 'ip',
     width: 150,
   },
   {
-    title: '端口',
+    title: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.Port'),
     dataIndex: 'port',
     width: 120,
   },
   {
-    title: '⽂件路径',
+    title: i18n.t('components.AccessHelper.DataSourcesEditor.FileConfig.FilePath'),
     dataIndex: 'filePath',
   },
 ];
diff --git a/inlong-website/src/components/AccessHelper/DataSourcesEditor/index.tsx b/inlong-website/src/components/AccessHelper/DataSourcesEditor/index.tsx
index 5831e87..18a667a 100644
--- a/inlong-website/src/components/AccessHelper/DataSourcesEditor/index.tsx
+++ b/inlong-website/src/components/AccessHelper/DataSourcesEditor/index.tsx
@@ -19,6 +19,7 @@
 
 import React, { useState } from 'react';
 import { Button, Table, Modal, message } from 'antd';
+import { useTranslation } from 'react-i18next';
 import request from '@/utils/request';
 import { useUpdateEffect, usePrevious } from '@/hooks';
 import { tableColumns as dbColumns } from './DbConfig';
@@ -62,6 +63,8 @@ const Comp = ({
   businessIdentifier,
   dataStreamIdentifier,
 }: DataSourcesEditorProps) => {
+  const { t } = useTranslation();
+
   const [data, setData] = useState(addIdToValues(value) || []);
   const previousType = usePrevious(type);
 
@@ -110,14 +113,14 @@ const Comp = ({
   const onDeleteRequest = id => {
     return new Promise(resolve => {
       Modal.confirm({
-        title: '确认删除吗',
+        title: t('basic.DeleteConfirm'),
         onOk: async () => {
           await request({
             url: `/datasource/${type.toLowerCase()}/deleteDetail/${id}`,
             method: 'DELETE',
           });
           resolve(true);
-          message.success('删除成功');
+          message.success(t('DeleteSuccess'));
         },
       });
     });
@@ -160,16 +163,16 @@ const Comp = ({
       ? []
       : [
           {
-            title: '操作',
+            title: t('basic.Operating'),
             dataIndex: 'actions',
             width: 120,
             render: (text, record) => (
               <>
                 <Button type="link" onClick={() => onEditRow(record)}>
-                  编辑
+                  {t('basic.Edit')}
                 </Button>
                 <Button type="link" onClick={() => onDeleteRow(record)}>
-                  删除
+                  {t('basic.Delete')}
                 </Button>
               </>
             ),
@@ -191,7 +194,7 @@ const Comp = ({
             : () => (
                 <>
                   <Button type="link" onClick={() => setCreateModal({ visible: true })}>
-                    新建数据源
+                    {t('components.AccessHelper.DataSourcesEditor.NewDataSource')}
                   </Button>
                 </>
               )
diff --git a/inlong-website/src/components/AccessHelper/DataStorageEditor/DetailModal.tsx b/inlong-website/src/components/AccessHelper/DataStorageEditor/DetailModal.tsx
index 5a07a3f..5be3c8f 100644
--- a/inlong-website/src/components/AccessHelper/DataStorageEditor/DetailModal.tsx
+++ b/inlong-website/src/components/AccessHelper/DataStorageEditor/DetailModal.tsx
@@ -172,7 +172,7 @@ const Comp: React.FC<DetailModalProps> = ({
   };
 
   return (
-    <Modal title={`${storageType}流向配置`} width={1200} {...modalProps} onOk={onOk}>
+    <Modal title={storageType} width={1200} {...modalProps} onOk={onOk}>
       <FormGenerator
         name={name}
         labelCol={{ span: 4 }}
diff --git a/inlong-website/src/components/AccessHelper/DataStorageEditor/Editor.tsx b/inlong-website/src/components/AccessHelper/DataStorageEditor/Editor.tsx
index 1f451b7..7e5ad71 100644
--- a/inlong-website/src/components/AccessHelper/DataStorageEditor/Editor.tsx
+++ b/inlong-website/src/components/AccessHelper/DataStorageEditor/Editor.tsx
@@ -21,6 +21,7 @@ import React, { useState, useMemo, useEffect } from 'react';
 import { Button, Table, Modal, message } from 'antd';
 import request from '@/utils/request';
 import isEqual from 'lodash/isEqual';
+import { useTranslation } from 'react-i18next';
 import DetailModal from './DetailModal';
 import { hiveTableColumns } from './hiveConfig';
 
@@ -65,6 +66,7 @@ const Comp = ({
   businessIdentifier,
   dataStreamIdentifier,
 }: Props) => {
+  const { t } = useTranslation();
   const [data, setData] = useState(addIdToValues(value) || []);
 
   useEffect(() => {
@@ -113,7 +115,7 @@ const Comp = ({
   const onDeleteRequest = id => {
     return new Promise(resolve => {
       Modal.confirm({
-        title: '确认删除吗',
+        title: t('basic.DeleteConfirm'),
         onOk: async () => {
           await request({
             url: `/storage/delete/${id}`,
@@ -123,7 +125,7 @@ const Comp = ({
             },
           });
           resolve(true);
-          message.success('删除成功');
+          message.success(t('DeleteSuccess'));
         },
       });
     });
@@ -176,15 +178,15 @@ const Comp = ({
       ? []
       : [
           {
-            title: '操作',
+            title: t('basic.Operating'),
             dataIndex: 'actions',
             render: (text, record) => (
               <>
                 <Button type="link" onClick={() => onEditRow(record)}>
-                  编辑
+                  {t('basic.Edit')}
                 </Button>
                 <Button type="link" onClick={() => onDeleteRow(record)}>
-                  删除
+                  {t('basic.Delete')}
                 </Button>
               </>
             ),
@@ -195,14 +197,14 @@ const Comp = ({
   return (
     <>
       <div>
-        {`${type}流向配置`}
+        <span>{type}</span>
         {!readonly && (
           <Button
             type="link"
             onClick={() => setDetailModal({ visible: true })}
             disabled={data.length}
           >
-            添加
+            {t('components.AccessHelper.DataStorageEditor.Editor.AddTo')}
           </Button>
         )}
       </div>
diff --git a/inlong-website/src/components/AccessHelper/DataStorageEditor/hiveConfig.tsx b/inlong-website/src/components/AccessHelper/DataStorageEditor/hiveConfig.tsx
index 7f7c14d..1688e26 100644
--- a/inlong-website/src/components/AccessHelper/DataStorageEditor/hiveConfig.tsx
+++ b/inlong-website/src/components/AccessHelper/DataStorageEditor/hiveConfig.tsx
@@ -21,6 +21,7 @@ import React from 'react';
 import { Button, message } from 'antd';
 import EditableTable, { ColumnsItemProps } from '@/components/EditableTable';
 import request from '@/utils/request';
+import i18n from '@/i18n';
 import { fieldTypes } from '../FieldsConfig/sourceFields';
 
 // hiveFieldTypes
@@ -47,15 +48,15 @@ const hiveFieldTypes = [
 
 export const hiveTableColumns = [
   {
-    title: '目标库',
+    title: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.Db'),
     dataIndex: 'dbName',
   },
   {
-    title: '目标表',
+    title: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.TargetTable'),
     dataIndex: 'tableName',
   },
   {
-    title: '用户名',
+    title: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.Username'),
     dataIndex: 'username',
   },
   {
@@ -71,14 +72,14 @@ export const hiveTableColumns = [
 export const getHiveColumns = (dataType: string, storageType: string): ColumnsItemProps[] => [
   ...([
     {
-      title: '源字段名',
+      title: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.SourceFieldName'),
       dataIndex: 'sourceFieldName',
       initialValue: '',
       rules: [
         { required: true },
         {
           pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
-          message: '以英文字母开头,只能包含英文字母、数字、下划线',
+          message: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.fieldNameRule'),
         },
       ],
       props: (text, record, idx, isNew) => ({
@@ -86,7 +87,7 @@ export const getHiveColumns = (dataType: string, storageType: string): ColumnsIt
       }),
     },
     {
-      title: '源字段类型',
+      title: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.SourceFieldType'),
       dataIndex: 'sourceFieldType',
       initialValue: fieldTypes[0].value,
       type: 'select',
@@ -97,14 +98,16 @@ export const getHiveColumns = (dataType: string, storageType: string): ColumnsIt
       }),
     },
     {
-      title: `${storageType}字段名`,
+      title: `${storageType}${i18n.t(
+        'components.AccessHelper.DataStorageEditor.hiveConfig.FieldName',
+      )}`,
       dataIndex: 'fieldName',
       initialValue: '',
       rules: [
         { required: true },
         {
           pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
-          message: '以英文字母开头,只能包含英文字母、数字、下划线',
+          message: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.fieldNameRule'),
         },
       ],
       props: (text, record, idx, isNew) => ({
@@ -112,7 +115,9 @@ export const getHiveColumns = (dataType: string, storageType: string): ColumnsIt
       }),
     },
     {
-      title: `${storageType}字段类型`,
+      title: `${storageType}${i18n.t(
+        'components.AccessHelper.DataStorageEditor.hiveConfig.FieldType',
+      )}`,
       dataIndex: 'fieldType',
       initialValue: hiveFieldTypes[0].value,
       type: 'select',
@@ -122,7 +127,7 @@ export const getHiveColumns = (dataType: string, storageType: string): ColumnsIt
       rules: [{ required: true }],
     },
     {
-      title: '字段描述',
+      title: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.FieldDescription'),
       dataIndex: 'fieldComment',
       initialValue: '',
     },
@@ -132,7 +137,7 @@ export const getHiveColumns = (dataType: string, storageType: string): ColumnsIt
 export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
   {
     type: 'input',
-    label: '目标库',
+    label: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.Db'),
     name: 'dbName',
     rules: [{ required: true }],
     props: {
@@ -141,7 +146,7 @@ export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
   },
   {
     type: 'input',
-    label: '目标表',
+    label: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.TargetTable'),
     name: 'tableName',
     rules: [{ required: true }],
     props: {
@@ -151,7 +156,7 @@ export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
   {
     type: 'input',
     name: 'primaryPartition',
-    label: '一级分区',
+    label: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.First-levelPartition'),
     initialValue: 'dt',
     rules: [{ required: true }],
     props: {
@@ -160,7 +165,7 @@ export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
   },
   {
     type: 'input',
-    label: '用户名',
+    label: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.Username'),
     name: 'username',
     rules: [{ required: true }],
     props: {
@@ -169,7 +174,7 @@ export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
   },
   {
     type: 'password',
-    label: '用户密码',
+    label: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.Password'),
     name: 'password',
     rules: [{ required: true }],
     props: {
@@ -198,10 +203,16 @@ export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
             method: 'POST',
             data: values,
           });
-          res ? message.success('连接成功') : message.error('连接失败');
+          res
+            ? message.success(
+                i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionSucceeded'),
+              )
+            : message.error(
+                i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionFailed'),
+              );
         }}
       >
-        连接测试
+        {i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionTest')}
       </Button>
     ),
   },
@@ -217,7 +228,7 @@ export const getHiveForm = (dataType: string, isEdit: boolean, form) => [
   },
   {
     type: 'input',
-    label: 'Warehouse路径',
+    label: i18n.t('components.AccessHelper.DataStorageEditor.hiveConfig.WarehousePath'),
     name: 'warehouseDir',
     initialValue: '/user/hive/warehouse',
     props: {
diff --git a/inlong-website/src/components/AccessHelper/FieldsConfig/bussinessFields.tsx b/inlong-website/src/components/AccessHelper/FieldsConfig/bussinessFields.tsx
index 889c178..b05d34d 100644
--- a/inlong-website/src/components/AccessHelper/FieldsConfig/bussinessFields.tsx
+++ b/inlong-website/src/components/AccessHelper/FieldsConfig/bussinessFields.tsx
@@ -21,12 +21,13 @@ import React from 'react';
 import StaffSelect from '../../StaffSelect';
 import { FormItemProps } from '@/components/FormGenerator';
 import { pickObjectArray } from '@/utils';
+import i18n from '@/i18n';
 
 export default (names: string[], currentValues: Record<string, unknown> = {}): FormItemProps[] => {
   const fields: FormItemProps[] = [
     {
       type: 'text',
-      label: '业务ID',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.BusinessID'),
       name: 'businessIdentifier',
       initialValue: currentValues.businessIdentifier,
     },
@@ -39,20 +40,25 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: 'input',
-      label: '业务英文名称',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.BusinessEnglishName'),
       name: 'name',
       props: {
         maxLength: 32,
       },
       rules: [
         { required: true },
-        { pattern: /^[a-z_\d]+$/, message: '仅限小写字⺟、数字和下划线' },
+        {
+          pattern: /^[a-z_\d]+$/,
+          message: i18n.t(
+            'components.AccessHelper.FieldsConfig.bussinessFields.BusinessEnglishNameRules',
+          ),
+        },
       ],
       initialValue: currentValues.name,
     },
     {
       type: 'input',
-      label: '业务中文名称',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.BusinessLabelName'),
       name: 'cnName',
       props: {
         maxLength: 32,
@@ -62,15 +68,24 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: <StaffSelect mode="multiple" currentUserClosable={false} />,
-      label: '业务责任人',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwners'),
       name: 'inCharges',
       initialValue: currentValues.inCharges,
-      rules: [{ required: true, type: 'array', min: 2, message: '请填写至少2个责任人' }],
-      extra: '至少2人,业务责任人可查看、修改业务信息,新增和修改所有接入配置项',
+      rules: [
+        {
+          required: true,
+          type: 'array',
+          min: 2,
+          message: i18n.t(
+            'components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwnersLimit',
+          ),
+        },
+      ],
+      extra: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwnersExtra'),
     },
     {
       type: 'textarea',
-      label: '业务介绍',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.BusinessIntroduction'),
       name: 'description',
       props: {
         showCount: true,
@@ -81,14 +96,14 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: 'radio',
-      label: '消息中间件选型',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.MessageMiddleware'),
       name: 'middlewareType',
       initialValue: currentValues.middlewareType ?? 'TUBE',
       rules: [{ required: true }],
       props: {
         options: [
           {
-            label: '⾼吞吐(TUBE)',
+            label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.Tube'),
             value: 'TUBE',
           },
         ],
@@ -96,11 +111,11 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: 'inputnumber',
-      label: '按天接入条数',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.NumberOfAccess'),
       name: 'dailyRecords',
       initialValue: currentValues.dailyRecords,
       rules: [{ required: true }],
-      suffix: '万条/天',
+      suffix: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.thousand/day'),
       props: {
         min: 1,
         precision: 0,
@@ -108,11 +123,11 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: 'inputnumber',
-      label: '按天接入大小',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.AccessSize'),
       name: 'dailyStorage',
       initialValue: currentValues.dailyStorage,
       rules: [{ required: true }],
-      suffix: 'GB/天',
+      suffix: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.GB/Day'),
       props: {
         min: 1,
         precision: 0,
@@ -120,11 +135,11 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: 'inputnumber',
-      label: '每秒接入峰值',
+      label: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.AccessPeakPerSecond'),
       name: 'peakRecords',
       initialValue: currentValues.peakRecords,
       rules: [{ required: true }],
-      suffix: '条/秒',
+      suffix: i18n.t('components.AccessHelper.FieldsConfig.bussinessFields.Stripe/Second'),
       props: {
         min: 1,
         precision: 0,
@@ -132,7 +147,9 @@ export default (names: string[], currentValues: Record<string, unknown> = {}): F
     },
     {
       type: 'inputnumber',
-      label: '单条最大长度',
+      label: i18n.t(
+        'components.AccessHelper.FieldsConfig.bussinessFields.SingleStripMaximumLength',
+      ),
       name: 'maxLength',
       initialValue: currentValues.maxLength,
       rules: [{ required: true }],
diff --git a/inlong-website/src/components/AccessHelper/FieldsConfig/dataFields.tsx b/inlong-website/src/components/AccessHelper/FieldsConfig/dataFields.tsx
index 5623a79..ad9a1f7 100644
--- a/inlong-website/src/components/AccessHelper/FieldsConfig/dataFields.tsx
+++ b/inlong-website/src/components/AccessHelper/FieldsConfig/dataFields.tsx
@@ -24,6 +24,7 @@ import StaffSelect from '@/components/StaffSelect';
 import DataSourcesEditor from '../DataSourcesEditor';
 import DataStorageEditor from '../DataStorageEditor/Editor';
 import EditableTable from '@/components/EditableTable';
+import i18n from '@/i18n';
 import { fieldTypes as sourceFieldsTypes } from './sourceFields';
 
 type RestParams = {
@@ -56,7 +57,7 @@ export default (
   const fields: FormItemProps[] = [
     {
       type: 'input',
-      label: '数据流ID',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataStreamID'),
       name: 'dataStreamIdentifier',
       props: {
         maxLength: 32,
@@ -64,27 +65,37 @@ export default (
       initialValue: currentValues.dataStreamIdentifier,
       rules: [
         { required: true },
-        { pattern: /^[a-z_\d]+$/, message: '仅限小写字⺟、数字和下划线' },
+        {
+          pattern: /^[a-z_\d]+$/,
+          message: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataStreamRules'),
+        },
       ],
     },
     {
       type: 'input',
-      label: '数据流名称',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataStreamName'),
       name: 'name',
       initialValue: currentValues.name,
       rules: [{ required: true }],
     },
     {
       type: <StaffSelect mode="multiple" currentUserClosable={false} />,
-      label: '数据流责任人',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataStreamOwners'),
       name: 'inCharges',
       initialValue: currentValues.inCharges,
-      extra: '至少2人,责任人可查看、修改消费信息',
-      rules: [{ required: true, type: 'array', min: 2, message: '请填写至少2个责任人' }],
+      extra: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataStreamOwnerHelp'),
+      rules: [
+        {
+          required: true,
+          type: 'array',
+          min: 2,
+          message: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataStreamOwnersRule'),
+        },
+      ],
     },
     {
       type: 'textarea',
-      label: '数据流介绍',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataFlowIntroduction'),
       name: 'description',
       props: {
         showCount: true,
@@ -95,17 +106,17 @@ export default (
     },
     {
       type: 'radio',
-      label: '消息来源',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Source'),
       name: 'dataSourceType',
       initialValue: currentValues.dataSourceType ?? 'AUTO_PUSH',
       props: {
         options: [
           {
-            label: '文件',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.File'),
             value: 'FILE',
           },
           {
-            label: '自主推送',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Autonomous'),
             value: 'AUTO_PUSH',
           },
         ],
@@ -126,7 +137,7 @@ export default (
     },
     {
       type: 'radio',
-      label: '数据格式',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataType'),
       name: 'dataType',
       initialValue: currentValues.dataType ?? 'TEXT',
       props: {
@@ -145,7 +156,7 @@ export default (
     },
     {
       type: 'radio',
-      label: '数据编码',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataEncoding'),
       name: 'dataEncoding',
       initialValue: currentValues.dataEncoding ?? 'UTF-8',
       props: {
@@ -165,38 +176,38 @@ export default (
     },
     {
       type: 'select',
-      label: '源数据字段分割符',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.fileDelimiter'),
       name: 'fileDelimiter',
       initialValue: '9',
       props: {
         dropdownMatchSelectWidth: false,
         options: [
           {
-            label: 'TAB键',
+            label: 'TAB',
             value: '9',
           },
           {
-            label: '竖线(|)',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.VerticalLine'),
             value: '124',
           },
           {
-            label: '逗号',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Comma'),
             value: '44',
           },
           {
-            label: '双引号(")',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DoubleQuotes'),
             value: '34',
           },
           {
-            label: '星号(*)',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Asterisk'),
             value: '42',
           },
           {
-            label: '空格',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Space'),
             value: '32',
           },
           {
-            label: '分号(;)',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.Semicolon'),
             value: '59',
           },
         ],
@@ -221,7 +232,7 @@ export default (
           editing={fieldListEditing}
           columns={[
             {
-              title: '字段名',
+              title: i18n.t('components.AccessHelper.FieldsConfig.dataFields.FieldName'),
               dataIndex: 'fieldName',
               props: () => ({
                 disabled: !fieldListEditing,
@@ -230,12 +241,12 @@ export default (
                 { required: true },
                 {
                   pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
-                  message: '以英文字母开头,只能包含英文字母、数字、下划线',
+                  message: i18n.t('components.AccessHelper.FieldsConfig.dataFields.FieldNameRule'),
                 },
               ],
             },
             {
-              title: '字段类型',
+              title: i18n.t('components.AccessHelper.FieldsConfig.dataFields.FieldType'),
               dataIndex: 'fieldType',
               type: 'select',
               initialValue: sourceFieldsTypes[0].value,
@@ -246,19 +257,19 @@ export default (
               rules: [{ required: true }],
             },
             {
-              title: '字段描述',
+              title: i18n.t('components.AccessHelper.FieldsConfig.dataFields.FieldComment'),
               dataIndex: 'fieldComment',
             },
           ]}
         />
       ),
-      label: '源数据字段',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.SourceDataField'),
       name: 'rowTypeFields',
       visible: () => !(currentValues.dataType as string[])?.includes('PB'),
     },
     {
       type: 'checkboxgroup',
-      label: '数据流向',
+      label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.DataFlowDirection'),
       name: 'dataStorage',
       props: {
         options: [
@@ -267,7 +278,7 @@ export default (
             value: 'HIVE',
           },
           {
-            label: '自主消费',
+            label: i18n.t('components.AccessHelper.FieldsConfig.dataFields.AutoConsumption'),
             value: 'AUTO_PUSH',
           },
         ],
diff --git a/inlong-website/src/components/ConsumeHelper/BussinessSelect/MyBussinessModal.tsx b/inlong-website/src/components/ConsumeHelper/BussinessSelect/MyBussinessModal.tsx
index de58207..ab33606 100644
--- a/inlong-website/src/components/ConsumeHelper/BussinessSelect/MyBussinessModal.tsx
+++ b/inlong-website/src/components/ConsumeHelper/BussinessSelect/MyBussinessModal.tsx
@@ -20,6 +20,7 @@
 import React, { useState } from 'react';
 import { Button, Modal } from 'antd';
 import { ModalProps } from 'antd/es/modal';
+import { useTranslation } from 'react-i18next';
 import HighTable from '@/components/HighTable';
 import { defaultSize } from '@/configs/pagination';
 import { useRequest, useUpdateEffect } from '@/hooks';
@@ -40,6 +41,8 @@ const getFilterFormContent = () => [
 ];
 
 const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
+  const { t } = useTranslation();
+
   const [options, setOptions] = useState({
     keyWord: '',
     pageSize: defaultSize,
@@ -85,27 +88,27 @@ const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
 
   const columns = [
     {
-      title: '业务ID',
+      title: 'ID',
       dataIndex: 'businessIdentifier',
     },
     {
-      title: '业务名称',
+      title: t('components.ConsumeHelper.BussinessSelect.MyBussinessModal.BusinessName'),
       dataIndex: 'cnName',
     },
     {
-      title: '责任人',
+      title: t('components.ConsumeHelper.BussinessSelect.MyBussinessModal.Owners'),
       dataIndex: 'inCharges',
     },
     {
-      title: '创建时间',
+      title: t('basic.CreateTime'),
       dataIndex: 'createTime',
     },
     {
-      title: '操作',
+      title: t('basic.Operating'),
       dataIndex: 'action',
       render: (text, record) => (
         <Button type="link" onClick={() => onOk(record)}>
-          选择
+          {t('components.ConsumeHelper.BussinessSelect.MyBussinessModal.Select')}
         </Button>
       ),
     },
@@ -118,7 +121,13 @@ const Comp: React.FC<MyAccessModalProps> = ({ id, ...modalProps }) => {
   };
 
   return (
-    <Modal {...modalProps} title="我的接入业务" width={1024} footer={null} onOk={onOk}>
+    <Modal
+      {...modalProps}
+      title={t('components.ConsumeHelper.BussinessSelect.MyBussinessModal.MyAccessBusiness')}
+      width={1024}
+      footer={null}
+      onOk={onOk}
+    >
       <HighTable
         filterForm={{
           content: getFilterFormContent(),
diff --git a/inlong-website/src/components/ConsumeHelper/BussinessSelect/index.tsx b/inlong-website/src/components/ConsumeHelper/BussinessSelect/index.tsx
index 496907b..1d7dc46 100644
--- a/inlong-website/src/components/ConsumeHelper/BussinessSelect/index.tsx
+++ b/inlong-website/src/components/ConsumeHelper/BussinessSelect/index.tsx
@@ -20,6 +20,7 @@
 import React, { useState, useEffect } from 'react';
 import { Button, Input, Space } from 'antd';
 import type { InputProps } from 'antd/es/input';
+import { useTranslation } from 'react-i18next';
 import MyBussinessModal from './MyBussinessModal';
 
 export interface Props extends Omit<InputProps, 'onChange'> {
@@ -29,6 +30,8 @@ export interface Props extends Omit<InputProps, 'onChange'> {
 }
 
 const Comp: React.FC<Props> = ({ value, onChange, onSelect, ...rest }) => {
+  const { t } = useTranslation();
+
   const [data, setData] = useState(value);
 
   const [myBussinessModal, setMyBussinessModal] = useState({
@@ -63,7 +66,7 @@ const Comp: React.FC<Props> = ({ value, onChange, onSelect, ...rest }) => {
       <Space>
         <Input value={data} onChange={e => onTextChange(e.target.value)} {...rest} />
         <Button type="link" onClick={() => setMyBussinessModal({ visible: true })}>
-          查询
+          {t('components.ConsumeHelper.BussinessSelect.Search')}
         </Button>
       </Space>
 
diff --git a/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx b/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx
index eaea3da..2c92103 100644
--- a/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx
+++ b/inlong-website/src/components/ConsumeHelper/FieldsConfig/basicFields.tsx
@@ -21,6 +21,7 @@ import React from 'react';
 import { FormItemProps } from '@/components/FormGenerator';
 import { pickObjectArray } from '@/utils';
 import StaffSelect from '@/components/StaffSelect';
+import i18n from '@/i18n';
 import BussinessSelect from '../BussinessSelect';
 
 export default (
@@ -31,29 +32,38 @@ export default (
   const fields: FormItemProps[] = [
     {
       type: 'input',
-      label: '消费组名称',
+      label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupName'),
       name: 'consumerGroupName',
       initialValue: currentValues.consumerGroupName,
-      extra: '仅限小写字⺟、数字和下划线',
+      extra: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupNameRules'),
       rules: [
         { required: true },
-        { pattern: /^[a-z_\d]+$/, message: '仅限小写字⺟、数字和下划线' },
+        {
+          pattern: /^[a-z_\d]+$/,
+          message: i18n.t(
+            'components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupNameRules',
+          ),
+        },
       ],
-      props: {
-        placeholder: '请输入',
-      },
     },
     {
       type: <StaffSelect mode="multiple" currentUserClosable={false} />,
-      label: '消费责任人',
+      label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.Consumption'),
       name: 'inCharges',
       initialValue: currentValues.inCharges,
-      extra: '至少2人,责任人可查看、修改消费信息',
-      rules: [{ required: true, type: 'array', min: 2, message: '请填写至少2个责任人' }],
+      extra: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.OwnersExtra'),
+      rules: [
+        {
+          required: true,
+          type: 'array',
+          min: 2,
+          message: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.OwnersRule'),
+        },
+      ],
     },
     {
       type: BussinessSelect,
-      label: '消费目标业务ID',
+      label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.ConsumerTargetBusinessID'),
       name: 'businessIdentifier',
       initialValue: currentValues.businessIdentifier,
       rules: [{ required: true }],
@@ -87,17 +97,17 @@ export default (
     },
     {
       type: 'radio',
-      label: '是否过滤消费',
+      label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.filterEnabled'),
       name: 'filterEnabled',
       initialValue: currentValues.filterEnabled ?? 0,
       props: {
         options: [
           {
-            label: '是',
+            label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.Yes'),
             value: 1,
           },
           {
-            label: '否',
+            label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.No'),
             value: 0,
           },
         ],
@@ -107,16 +117,16 @@ export default (
     },
     {
       type: 'input',
-      label: '消费数据流ID',
+      label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.ConsumerDataStreamID'),
       name: 'dataStreamIdentifier',
       initialValue: currentValues.dataStreamIdentifier,
-      extra: '多个数据流ID之间用分号;隔开',
+      extra: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.DataStreamIDsHelp'),
       rules: [{ required: true }],
       visible: values => bussinessDetail.middlewareType && values.filterEnabled,
     },
     {
       type: 'text',
-      label: 'Master地址',
+      label: i18n.t('components.ConsumeHelper.FieldsConfig.basicFields.MasterAddress'),
       name: 'masterUrl',
       initialValue: currentValues.masterUrl,
     },
diff --git a/inlong-website/src/components/EditableTable/index.tsx b/inlong-website/src/components/EditableTable/index.tsx
index 7530089..ebcfaa9 100644
--- a/inlong-website/src/components/EditableTable/index.tsx
+++ b/inlong-website/src/components/EditableTable/index.tsx
@@ -20,6 +20,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Table, Input, InputNumber, Form } from 'antd';
 import { FormItemProps } from 'antd/lib/form';
+import { useTranslation } from 'react-i18next';
 import HighSelect from '@/components/HighSelect';
 import { useUpdateEffect } from '@/hooks';
 import isEqual from 'lodash/isEqual';
@@ -97,6 +98,8 @@ const Comp = ({
   canAdd = true,
   size,
 }: EditableTableProps) => {
+  const { t } = useTranslation();
+
   const [data, setData] = useState<RecordType[]>(
     addIdToValues(value) ||
       [getRowInitialValue(columns)].map(item => ({
@@ -233,7 +236,7 @@ const Comp = ({
 
   if (editing) {
     tableColumns = tableColumns.concat({
-      title: '操作',
+      title: t('basic.Operating'),
       dataIndex: 'actions',
       width: 100,
       render: (text, record, idx) =>
@@ -242,7 +245,7 @@ const Comp = ({
           ? canDelete
           : canDelete(record, idx, record._etid?.indexOf('_etnew_') === 0)) && (
           <Button type="link" onClick={() => onDeleteRow(record)}>
-            删除
+            {t('basic.Delete')}
           </Button>
         ),
     } as any);
@@ -258,7 +261,7 @@ const Comp = ({
         editing && canAdd
           ? () => (
               <Button type="link" style={{ padding: 0 }} onClick={onAddRow}>
-                新增一行
+                {t('components.EditableTable.NewLine')}
               </Button>
             )
           : null
diff --git a/inlong-website/src/components/FormGenerator/plugins.tsx b/inlong-website/src/components/FormGenerator/plugins.tsx
index a07cd44..d71764a 100644
--- a/inlong-website/src/components/FormGenerator/plugins.tsx
+++ b/inlong-website/src/components/FormGenerator/plugins.tsx
@@ -33,6 +33,7 @@ import {
   Transfer,
 } from 'antd';
 import HighSelect from '@/components/HighSelect';
+import i18n from '@/i18n';
 
 const text: React.FC<Record<string, any>> = ({ value, options }) => {
   if (!Array.isArray(options)) return <span>{value}</span>;
@@ -50,16 +51,24 @@ const text: React.FC<Record<string, any>> = ({ value, options }) => {
 
 const select = props => (
   <HighSelect
-    placeholder={props.placeholder || '请选择'}
+    placeholder={props.placeholder || i18n.t('components.FormGenerator.plugins.PleaseChoose')}
     style={{ minWidth: 100, ...props?.style }}
     {...props}
   />
 );
 
-const input = props => <Input placeholder={props.placeholder || '请输入'} {...props} />;
+const input = props => (
+  <Input
+    placeholder={props.placeholder || i18n.t('components.FormGenerator.plugins.PleaseInput')}
+    {...props}
+  />
+);
 
 const inputsearch = props => (
-  <Input.Search placeholder={props.placeholder || '请输入'} {...props} />
+  <Input.Search
+    placeholder={props.placeholder || i18n.t('components.FormGenerator.plugins.PleaseInput')}
+    {...props}
+  />
 );
 
 const password = props => <Input.Password {...props} />;
diff --git a/inlong-website/src/components/Layout/NavWidget/index.module.less b/inlong-website/src/components/Layout/NavWidget/index.module.less
index 0f0a5b3..dd64e35 100644
--- a/inlong-website/src/components/Layout/NavWidget/index.module.less
+++ b/inlong-website/src/components/Layout/NavWidget/index.module.less
@@ -20,15 +20,14 @@
 
 .iconToolBar {
   display: inline-block;
-  vertical-align: middle;
-  font-size: 24px;
+  font-size: 20px;
   cursor: pointer;
   
   > * {
     display: inline-block;
     vertical-align: middle;
-    line-height: 24px;
-    height: 24px;
+    line-height: 20px;
+    height: 20px;
     margin-right: 20px;
     margin-right: 20px;
     color: inherit;
diff --git a/inlong-website/src/components/Layout/NavWidget/index.tsx b/inlong-website/src/components/Layout/NavWidget/index.tsx
index 1b8d979..4a96a5b 100644
--- a/inlong-website/src/components/Layout/NavWidget/index.tsx
+++ b/inlong-website/src/components/Layout/NavWidget/index.tsx
@@ -21,11 +21,13 @@ import React from 'react';
 import { Dropdown, Menu } from 'antd';
 import { useHistory, useSelector, useDispatch, useRequest } from '@/hooks';
 import { State } from '@/models';
+import { useTranslation } from 'react-i18next';
 // import { FileTextOutlined } from '@/components/Icons';
-// import LocaleSelect from './LocaleSelect';
+import LocaleSelect from './LocaleSelect';
 import styles from './index.module.less';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
   const userName = useSelector<State, State['userName']>(state => state.userName);
   const history = useHistory();
   const dispatch = useDispatch();
@@ -46,7 +48,7 @@ const Comp: React.FC = () => {
 
   const menu = (
     <Menu>
-      <Menu.Item onClick={runLogout}>退出登录</Menu.Item>
+      <Menu.Item onClick={runLogout}>{t('components.Layout.NavWidget.Logout')}</Menu.Item>
     </Menu>
   );
 
@@ -58,7 +60,7 @@ const Comp: React.FC = () => {
             <FileTextOutlined />
           </a>
         </Tooltip> */}
-        {/* <LocaleSelect /> */}
+        <LocaleSelect />
       </span>
       <Dropdown overlay={menu} placement="bottomLeft">
         <span>{userName}</span>
diff --git a/inlong-website/src/components/PageContainer/PageContainer.tsx b/inlong-website/src/components/PageContainer/PageContainer.tsx
index 5939486..54d2d3f 100644
--- a/inlong-website/src/components/PageContainer/PageContainer.tsx
+++ b/inlong-website/src/components/PageContainer/PageContainer.tsx
@@ -76,7 +76,7 @@ const PageContainer: React.FC<PageContainerProps> = ({
       style={style}
       header={{
         title: '',
-        breadcrumb: {
+        breadcrumb: breadcrumbData?.length && {
           routes: breadcrumbData.map(item => ({
             path: item.path,
             breadcrumbName: item.name,
diff --git a/inlong-website/src/components/StaffSelect/index.tsx b/inlong-website/src/components/StaffSelect/index.tsx
index 7d3c76d..c61a2d9 100644
--- a/inlong-website/src/components/StaffSelect/index.tsx
+++ b/inlong-website/src/components/StaffSelect/index.tsx
@@ -20,6 +20,7 @@
 import React, { useState, useEffect } from 'react';
 import { Select, Spin, Tag } from 'antd';
 import type { SelectProps, OptionProps } from 'antd/es/select';
+import { useTranslation } from 'react-i18next';
 import { State } from '@/models';
 import { useRequest, useSelector } from '@/hooks';
 import debounce from 'lodash/debounce';
@@ -69,6 +70,8 @@ const StaffSelect: React.FC<StaffSelectProps> = ({
   currentUserClosable = true,
   ...rest
 }) => {
+  const { t } = useTranslation();
+
   const { userName } = useSelector<State, State>(state => state);
 
   const [currentValue, setCurrentValue] = useState<string | string[]>(value);
@@ -130,7 +133,7 @@ const StaffSelect: React.FC<StaffSelectProps> = ({
 
   return (
     <Select
-      placeholder="请输入关键字搜索"
+      placeholder={t('components.StaffSelect.Placeholder')}
       showSearch
       allowClear
       {...rest}
diff --git a/inlong-website/src/configs/menus/index.ts b/inlong-website/src/configs/menus/index.ts
index 449c033..883ba76 100644
--- a/inlong-website/src/configs/menus/index.ts
+++ b/inlong-website/src/configs/menus/index.ts
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import i18n from '@/i18n';
+
 export interface MenuItemType {
   name: string;
   children?: MenuItemType[];
@@ -26,19 +28,19 @@ export interface MenuItemType {
 const menus: MenuItemType[] = [
   {
     path: '/access',
-    name: '数据接入',
+    name: i18n.t('configs.menus.DataAccess'),
   },
   {
     path: '/consume',
-    name: '数据消费',
+    name: i18n.t('configs.menus.DataConsumption'),
   },
   {
     path: '/approvals',
-    name: '审批管理',
+    name: i18n.t('configs.menus.ApprovalManagement'),
   },
   {
     path: '/user',
-    name: '系统管理',
+    name: i18n.t('configs.menus.SystemManagement'),
   },
 ];
 
diff --git a/inlong-website/src/configs/pagination/index.ts b/inlong-website/src/configs/pagination/index.ts
index f727c38..8edf358 100644
--- a/inlong-website/src/configs/pagination/index.ts
+++ b/inlong-website/src/configs/pagination/index.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export const showTotal = (total: number) => `共${total}项`;
+import i18n from '@/i18n';
+
+export const showTotal = (total: number) => i18n.t('configs.pagination.Total', { total });
 
 const paginationConf = {
   showQuickJumper: true,
diff --git a/inlong-website/src/i18n.ts b/inlong-website/src/i18n.ts
index ae6596a..b579b8e 100644
--- a/inlong-website/src/i18n.ts
+++ b/inlong-website/src/i18n.ts
@@ -19,20 +19,49 @@
 
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import { getCurrentLocale } from '@/configs/locales';
 import { isDevelopEnv } from '@/utils';
 
+const resources = {
+  en: {
+    translation: {
+      'configs.menus.ApprovalManagement': 'Approval',
+      'configs.menus.DataAccess': 'Data Access',
+      'configs.menus.DataConsumption': 'Data Consumption',
+      'configs.menus.SystemManagement': 'System',
+    },
+  },
+  cn: {
+    translation: {
+      'configs.menus.ApprovalManagement': '审批管理',
+      'configs.menus.DataAccess': '数据接入',
+      'configs.menus.DataConsumption': '数据消费',
+      'configs.menus.SystemManagement': '系统管理',
+    },
+  },
+};
+
 i18n
+  // .use(lngDetector)
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
     fallbackLng: 'en',
+    resources,
+    lng: getCurrentLocale(),
     debug: isDevelopEnv(),
 
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },
+
+    react: {
+      wait: true,
+      useSuspense: false,
+      bindI18n: 'languageChanged loaded',
+    },
   });
 
 export default i18n;
diff --git a/inlong-website/src/locales/cn.json b/inlong-website/src/locales/cn.json
index 2c63c08..b9b2bc5 100644
--- a/inlong-website/src/locales/cn.json
+++ b/inlong-website/src/locales/cn.json
@@ -1,2 +1,269 @@
 {
-}
+  "basic.Edit": "编辑",
+  "basic.Detail": "详情",
+  "basic.Operating": "操作",
+  "basic.OperatingSuccess": "操作成功",
+  "basic.Save": "保存",
+  "basic.Cancel": "取消",
+  "basic.Delete": "删除",
+  "basic.DeleteConfirm": "确认删除吗",
+  "basic.DeleteSuccess": "删除成功",
+  "basic.Status": "状态",
+  "basic.CreateTime": "创建时间",
+  "components.AccessHelper.DataSourcesEditor.CreateModal.File": "文件",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.FillInTheAbsolutePath": "填写绝对路径",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.DataSourceIP": "数据源IP",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.FilePath": "⽂件路径",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.Port": "端口",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.IpRule": "请正确输入Ip地址",
+  "components.AccessHelper.DataSourcesEditor.NewDataSource": "新建数据源",
+  "components.AccessHelper.DataStorageEditor.Editor.AddTo": "添加",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.WarehousePath": "Warehouse路径",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.TargetTable": "目标表",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.fieldNameRule": "以英文字母开头,只能包含英文字母、数字、下划线",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.SourceFieldType": "源字段类型",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionSucceeded": "连接成功",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionTest": "连接测试",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.Db": "目标库",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.SourceFieldName": "源字段名",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.FieldName": "字段名",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.FieldType": "字段类型",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.First-levelPartition": "一级分区",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionFailed": "连接失败",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.Username": "用户名",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.Password": "Password",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.FieldDescription": "字段描述",
+  "components.AccessHelper.FieldsConfig.bussinessFields.Tube": "⾼吞吐(TUBE)",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessLabelName": "业务中文名称",
+  "components.AccessHelper.FieldsConfig.bussinessFields.Stripe/Second": "条/秒",
+  "components.AccessHelper.FieldsConfig.bussinessFields.MessageMiddleware": "消息中间件",
+  "components.AccessHelper.FieldsConfig.bussinessFields.AccessSize": "按天接入大小",
+  "components.AccessHelper.FieldsConfig.bussinessFields.GB/Day": "GB/天",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessID": "业务ID",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessIntroduction": "业务介绍",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwners": "业务责任人",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwnersLimit": "请填写至少2个责任人",
+  "components.AccessHelper.FieldsConfig.bussinessFields.SingleStripMaximumLength": "单条最大长度",
+  "components.AccessHelper.FieldsConfig.bussinessFields.thousand/day": "万条/天",
+  "components.AccessHelper.FieldsConfig.bussinessFields.AccessPeakPerSecond": "每秒接入峰值",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessEnglishName": "业务英文名称",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessEnglishNameRules": "仅限小写字⺟、数字和下划线",
+  "components.AccessHelper.FieldsConfig.bussinessFields.NumberOfAccess": "按天接入条数",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwnersExtra": "至少2人,业务责任人可查看、修改业务信息,新增和修改所有接入配置项",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamID": "数据流ID",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamRules": "仅限小写字⺟、数字和下划线",
+  "components.AccessHelper.FieldsConfig.dataFields.fileDelimiter": "源数据字段分割符",
+  "components.AccessHelper.FieldsConfig.dataFields.Asterisk": "星号(*)",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamName": "数据流名称",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldName": "字段名",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldNameRule": "以英文字母开头,只能包含英文字母、数字、下划线",
+  "components.AccessHelper.FieldsConfig.dataFields.Semicolon": "分号(;)",
+  "components.AccessHelper.FieldsConfig.dataFields.AutoConsumption": "自主消费",
+  "components.AccessHelper.FieldsConfig.dataFields.DataFlowDirection": "数据流向",
+  "components.AccessHelper.FieldsConfig.dataFields.DataType": "数据格式",
+  "components.AccessHelper.FieldsConfig.dataFields.Source": "消息来源",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldType": "字段类型",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldComment": "字段描述",
+  "components.AccessHelper.FieldsConfig.dataFields.DoubleQuotes": "双引号(\")",
+  "components.AccessHelper.FieldsConfig.dataFields.DataEncoding": "数据编码",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamOwners": "责任人",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamOwnerHelp": "至少2人,责任人可查看、修改数据流信息",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamOwnersRule": "请填写至少2个责任人",
+  "components.AccessHelper.FieldsConfig.dataFields.Space": "空格",
+  "components.AccessHelper.FieldsConfig.dataFields.Comma": "逗号",
+  "components.AccessHelper.FieldsConfig.dataFields.DataFlowIntroduction": "介绍",
+  "components.AccessHelper.FieldsConfig.dataFields.SourceDataField": "源数据字段",
+  "components.AccessHelper.FieldsConfig.dataFields.VerticalLine": "竖线(|)",
+  "components.AccessHelper.FieldsConfig.dataFields.File": "文件",
+  "components.AccessHelper.FieldsConfig.dataFields.Autonomous": "自主推送",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.BusinessName": "业务名称",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.Select": "选择",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.Owners": "责任人",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.MyAccessBusiness": "我的接入业务",
+  "components.ConsumeHelper.BussinessSelect.Search": "查询",
+  "components.ConsumeHelper.FieldsConfig.basicFields.Consumption": "消费责任人",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupName": "消费组名称",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupNameRules": "仅限小写字⺟、数字和下划线",
+  "components.ConsumeHelper.FieldsConfig.basicFields.DataStreamIDsHelp": "多个数据流ID之间用分号;隔开",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerDataStreamID": "消费数据流ID",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerTargetBusinessID": "消费目标业务ID",
+  "components.ConsumeHelper.FieldsConfig.basicFields.No": "否",
+  "components.ConsumeHelper.FieldsConfig.basicFields.filterEnabled": "是否过滤消费",
+  "components.ConsumeHelper.FieldsConfig.basicFields.MasterAddress": "Master地址",
+  "components.ConsumeHelper.FieldsConfig.basicFields.OwnersRule": "请填写至少2个责任人",
+  "components.ConsumeHelper.FieldsConfig.basicFields.Yes": "是",
+  "components.ConsumeHelper.FieldsConfig.basicFields.OwnersExtra": "至少2人,责任人可查看、修改消费信息",
+  "components.EditableTable.NewLine": "新增一行",
+  "components.FormGenerator.plugins.PleaseChoose": "请选择",
+  "components.FormGenerator.plugins.PleaseInput": "请输入",
+  "components.Layout.NavWidget.Logout": "退出登录",
+  "components.StaffSelect.Placeholder": "请输入关键字搜索",
+  "configs.pagination.Total": "共{{total}}项",
+  "pages.AccessCreate.Bussiness.config.BusinessInformation": "业务信息",
+  "pages.AccessCreate.Bussiness.config.AccessRequirements": "接入要求",
+  "pages.AccessCreate.Bussiness.config.AccessScale": "接入规模",
+  "pages.AccessCreate.DataStream.config.Basic": "基础信息",
+  "pages.AccessCreate.DataStream.config.DataSources": "数据来源",
+  "pages.AccessCreate.DataStream.config.DataInfo": "数据信息",
+  "pages.AccessCreate.DataStream.config.DataStorages": "数据流向",
+  "pages.AccessCreate.Back": "返回",
+  "pages.AccessCreate.NextStep": "下一步",
+  "pages.AccessCreate.DataStreams": "数据流",
+  "pages.AccessCreate.CheckFormIntegrity": "请检查表单完整性",
+  "pages.AccessCreate.Submit": "提交审批",
+  "pages.AccessCreate.SubmittedSuccessfully": "提交成功",
+  "pages.AccessCreate.BusinessInfo": "业务信息",
+  "pages.AccessCreate.Previous": "上一步",
+  "pages.AccessCreate.NewAccess": "新建接入",
+  "pages.AccessDashboard.ExecutionLogModal.Re-executingSuccess": "重新执行成功",
+  "pages.AccessDashboard.ExecutionLogModal.TaskType": "任务类型",
+  "pages.AccessDashboard.ExecutionLogModal.ConfirmThatItIsRe-executed": "确认重新执行吗",
+  "pages.AccessDashboard.ExecutionLogModal.CarriedOut": "执行",
+  "pages.AccessDashboard.ExecutionLogModal.EndTime": "结束时间",
+  "pages.AccessDashboard.ExecutionLogModal.Processing": "处理中",
+  "pages.AccessDashboard.ExecutionLogModal.ExecuteLog": "执行日志",
+  "pages.AccessDashboard.ExecutionLogModal.RunResults": "执行结果",
+  "pages.AccessDashboard.ExecutionLogModal.Success": "成功",
+  "pages.AccessDashboard.ExecutionLogModal.Skip": "跳过",
+  "pages.AccessDashboard.ExecutionLogModal.Fail": "失败",
+  "pages.AccessDashboard.config.Total": "接入总数",
+  "pages.AccessDashboard.config.WaitAssignCount": "待分配",
+  "pages.AccessDashboard.config.WaitApproveCount": "待审批",
+  "pages.AccessDashboard.config.Reject": "已驳回",
+  "pages.AccessDashboard.config.Name": "业务名称",
+  "pages.AccessDashboard.config.InCharges": "责任人",
+  "pages.AccessDashboard.config.ExecuteLog": "执行日志",
+  "pages.AccessDashboard.status.Approved": "审批通过",
+  "pages.AccessDashboard.status.Draft": "草稿",
+  "pages.AccessDashboard.status.Cancel": "取消",
+  "pages.AccessDashboard.status.InPlace": "配置中",
+  "pages.AccessDashboard.status.Reject": "审批驳回",
+  "pages.AccessDashboard.status.ConfigurationSuccess": "配置成功",
+  "pages.AccessDashboard.status.BeSubmitted": "待提交",
+  "pages.AccessDashboard.status.BeApproved": "待审批",
+  "pages.AccessDashboard.status.ConfigurationFailed": "配置失败",
+  "pages.AccessDashboard.ConfirmDelete": "确认删除吗",
+  "pages.AccessDashboard.NewAccess": "新建接入",
+  "pages.AccessDashboard.SuccessfullyDeleted": "删除成功",
+  "pages.AccessDetail.DataSources.Type": "类型",
+  "pages.AccessDetail.DataSources.File": "文件",
+  "pages.AccessDetail.DataSources.SaveSuccessfully": "保存成功",
+  "pages.AccessDetail.DataSources.DeletConfirm": "确认删除吗",
+  "pages.AccessDetail.DataSources.DeleteSuccessfully": "删除成功",
+  "pages.AccessDetail.DataSources.DataStreams": "数据流",
+  "pages.AccessDetail.DataSources.NoDataStreams": "暂无可用数据流,请先创建新数据流",
+  "pages.AccessDetail.DataSources.Create": "新建数据源",
+  "pages.AccessDetail.DataSources.status.Unavailable": "不可用",
+  "pages.AccessDetail.DataSources.status.RemoveConfiguration": "移除配置",
+  "pages.AccessDetail.DataSources.status.FailedToActivate": "启动失败",
+  "pages.AccessDetail.DataSources.status.Failure": "下发失败",
+  "pages.AccessDetail.DataSources.status.Deleted": "已删除",
+  "pages.AccessDetail.DataSources.status.Draft": "草稿",
+  "pages.AccessDetail.DataSources.status.New": "新建",
+  "pages.AccessDetail.DataSources.status.ConfigurationFailed": "配置失败",
+  "pages.AccessDetail.DataSources.status.Success": "正常",
+  "pages.AccessDetail.DataStorage.New": "新建流向配置",
+  "pages.AccessDetail.DataStorage.Type": "类型",
+  "pages.AccessDetail.DataStorage.DataStreams": "数据流",
+  "pages.AccessDetail.DataStorage.NoDataStreams": "暂无可用数据流,请先创建新数据流",
+  "pages.AccessDetail.DataStorage.Status.New": "新建",
+  "pages.AccessDetail.DataStorage.Status.Pending": "配置中",
+  "pages.AccessDetail.DataStorage.Status.Error": "配置失败",
+  "pages.AccessDetail.DataStorage.Status.Success": "配置成功",
+  "pages.AccessDetail.DataStream.StreamItemModal.DataFlowConfiguration": "数据流配置",
+  "pages.AccessDetail.DataStream.NewDataStream": "新数据流",
+  "pages.AccessDetail.DataStream.CreateDataStream": "新建数据流",
+  "pages.AccessDetail.DataStream.Config.Save": "保存",
+  "pages.AccessDetail.DataStream.Config.Cancel": "取消",
+  "pages.AccessDetail.DataStream.Status.New": "新建",
+  "pages.AccessDetail.DataStream.Status.Pending": "配置中",
+  "pages.AccessDetail.DataStream.Status.Error": "配置失败",
+  "pages.AccessDetail.DataStream.Status.Success": "配置成功",
+  "pages.AccessDetail.Bussiness": "业务信息",
+  "pages.AccessDetail.DataStreams": "数据流",
+  "pages.AccessDetail.DataSources": "数据源",
+  "pages.AccessDetail.DataStorages": "流向",
+  "pages.AccessDetail.BussinessDetail": "业务详情",
+  "pages.ApprovalDetail.AccessConfig.DataStorages": "流向",
+  "pages.ApprovalDetail.AccessConfig.ApprovalInformation": "审批信息",
+  "pages.ApprovalDetail.AccessConfig.DataFlowInformation": "数据流信息",
+  "pages.ApprovalDetail.AccessConfig.BasicInformation": "基础信息",
+  "pages.ApprovalDetail.ConsumeConfig.ConsumerGroup": "消费组",
+  "pages.ApprovalDetail.SubmitApplication": "提交申请",
+  "pages.ApprovalDetail.Process": "流程单",
+  "pages.ApprovalDetail.Ok": "通过",
+  "pages.ApprovalDetail.RevokeSuccess": "撤回成功",
+  "pages.ApprovalDetail.ConfirmReject": "确认驳回吗?",
+  "pages.ApprovalDetail.Withdraw": "撤回",
+  "pages.ApprovalDetail.Back": "返回",
+  "pages.ApprovalDetail.ConfirmWithdrawal": "确认撤回吗?",
+  "pages.ApprovalDetail.ApplicationTime": "申请时间",
+  "pages.ApprovalDetail.Requisition": "申请单",
+  "pages.ApprovalDetail.ApprovalComments": "审批意见",
+  "pages.ApprovalDetail.Reject": "驳回",
+  "pages.ApprovalDetail.Applicant": "申请人",
+  "pages.ApprovalDetail.ApprovalProcess": "审批流程",
+  "pages.ApprovalDetail.WaitingForApproval": "审批单",
+  "pages.ApprovalDetail.RejectSuccess": "驳回成功",
+  "pages.ApprovalDetail.Done": "完成",
+  "pages.Approvals.status.HaveTerminated": "已终止",
+  "pages.Approvals.status.Completed": "已完成",
+  "pages.Approvals.status.Processing": "待审批",
+  "pages.Approvals.status.Rejected": "已驳回",
+  "pages.Approvals.status.Canceled": "已取消",
+  "pages.Approvals.status.Ok": "审批通过",
+  "pages.Approvals.ApplicationTime": "申请时间",
+  "pages.Approvals.ApplicationType": "申请类型",
+  "pages.Approvals.Approver": "审批人",
+  "pages.Approvals.Applicant": "申请人",
+  "pages.Approvals.ProcessID": "流程单ID",
+  "pages.Approvals.BussinessId": "业务ID",
+  "pages.Approvals.MyApplication": "我的申请",
+  "pages.Approvals.MyApproval": "我的审批",
+  "pages.ConsumeCreate.ConsumerInformation": "消费信息",
+  "pages.ConsumeCreate.Prev": "上一步",
+  "pages.ConsumeCreate.Next": "下一步",
+  "pages.ConsumeCreate.Submit": "提交审批",
+  "pages.ConsumeCreate.Back": "返回",
+  "pages.ConsumeCreate.NewConsume": "新建消费",
+  "pages.ConsumeDashboard.config.BeAllocated": "待分配",
+  "pages.ConsumeDashboard.config.ApplicationStatus": "申请状态",
+  "pages.ConsumeDashboard.config.Reject": "已驳回",
+  "pages.ConsumeDashboard.config.OperatingStatus": "运行状态",
+  "pages.ConsumeDashboard.config.Total": "消费总数",
+  "pages.ConsumeDashboard.config.Pending": "待审批",
+  "pages.ConsumeDashboard.config.ConsumerGroup": "消费组",
+  "pages.ConsumeDashboard.config.ConsumerBusinessID": "消费业务ID",
+  "pages.ConsumeDashboard.config.RecentConsumptionTime": "最近消费时间",
+  "pages.ConsumeDashboard.config.Middleware": "消息中间件",
+  "pages.ConsumeDashboard.status.Normal": "正常",
+  "pages.ConsumeDashboard.status.Abnormal": "异常",
+  "pages.ConsumeDashboard.status.Shield": "屏蔽",
+  "pages.ConsumeDashboard.status.NoStatus": "暂无",
+  "pages.ConsumeDashboard.status.Passed": "已通过",
+  "pages.ConsumeDashboard.status.Cancelled": "已取消",
+  "pages.ConsumeDashboard.NewConsume": "新建消费",
+  "pages.ConsumeDetail.Info.config.ConsumerGroupID": "消费组ID",
+  "pages.ConsumeDetail.ConsumptionDetails": "消费详情",
+  "pages.Login.PleaseEnterUserName": "请输入用户名",
+  "pages.Login.OnlyLowercaseWords": "仅限小写字⺟、数字和下划线",
+  "pages.Login.LogIn": "登录",
+  "pages.Login.PleaseEnterYourPassword": "请输入密码",
+  "pages.Login.Reset": "请联系管理员重置",
+  "pages.Login.PasswordCanNotBeBlank": "密码不能为空",
+  "pages.Login.UsernameCanNotBeEmpty": "用户名不能为空",
+  "pages.UserManagement.DetailModal.Day": "天",
+  "pages.UserManagement.DetailModal.New": "新建",
+  "pages.UserManagement.DetailModal.UserPassword": "用户密码",
+  "pages.UserManagement.DetailModal.EffectiveTime": "有效时长",
+  "pages.UserManagement.DetailModal.SavedSuccessfully": "保存成功",
+  "pages.UserManagement.config.Admin": "系统管理员",
+  "pages.UserManagement.config.UserName": "用户名称",
+  "pages.UserManagement.config.GeneralUser": "普通用户",
+  "pages.UserManagement.config.Creater": "创建人",
+  "pages.UserManagement.config.CreateTime": "创建时间",
+  "pages.UserManagement.config.AccountRole": "帐号角色",
+  "pages.UserManagement.status.Normal": "正常",
+  "pages.UserManagement.status.Fail": "失效",
+  "pages.UserManagement.CreateAccount": "新建帐号"
+}
\ No newline at end of file
diff --git a/inlong-website/src/locales/en.json b/inlong-website/src/locales/en.json
index 2c63c08..f02b249 100644
--- a/inlong-website/src/locales/en.json
+++ b/inlong-website/src/locales/en.json
@@ -1,2 +1,269 @@
 {
-}
+  "basic.Edit": "Edit",
+  "basic.Detail": "Detail",
+  "basic.Operating": "Operate",
+  "basic.OperatingSuccess": "Operating Success",
+  "basic.Save": "Save",
+  "basic.Cancel": "Cancel",
+  "basic.Delete": "Delete",
+  "basic.DeleteConfirm": "Are you sure to delete",
+  "basic.DeleteSuccess": "Delete Success",
+  "basic.Status": "Status",
+  "basic.CreateTime": "CreateTime",
+  "components.AccessHelper.DataSourcesEditor.CreateModal.File": "File",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.FillInTheAbsolutePath": "Fill in the absolute path",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.DataSourceIP": "Data source IP",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.FilePath": "File path",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.Port": "Port",
+  "components.AccessHelper.DataSourcesEditor.FileConfig.IpRule": "Please enter the IP address correctly",
+  "components.AccessHelper.DataSourcesEditor.NewDataSource": "New data source",
+  "components.AccessHelper.DataStorageEditor.Editor.AddTo": "Add",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.WarehousePath": "Warehouse path",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.TargetTable": "Target table",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.fieldNameRule": "At the beginning of English letters, only English letters, numbers, and underscores",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.SourceFieldType": "Source field type",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionSucceeded": "Connection succeeded",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionTest": "Connection test",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.Db": "DB",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.SourceFieldName": "Source field name",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.FieldName": "FieldName",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.FieldType": "FieldType",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.First-levelPartition": "First-level partition",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.ConnectionFailed": "Connection failed",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.Username": "Username",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.Password": "Password",
+  "components.AccessHelper.DataStorageEditor.hiveConfig.FieldDescription": "Field description",
+  "components.AccessHelper.FieldsConfig.bussinessFields.Tube": "Tube",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessLabelName": "Business Label",
+  "components.AccessHelper.FieldsConfig.bussinessFields.Stripe/Second": "Stripe / S",
+  "components.AccessHelper.FieldsConfig.bussinessFields.MessageMiddleware": "Middleware",
+  "components.AccessHelper.FieldsConfig.bussinessFields.AccessSize": "Access Size",
+  "components.AccessHelper.FieldsConfig.bussinessFields.GB/Day": "GB / Day",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessID": "Business ID",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessIntroduction": "Description",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwners": "Business Owners",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwnersLimit": "Please fill in at least 2 people",
+  "components.AccessHelper.FieldsConfig.bussinessFields.SingleStripMaximumLength": "Single Max Length",
+  "components.AccessHelper.FieldsConfig.bussinessFields.thousand/day": "Ten Thousand / eay",
+  "components.AccessHelper.FieldsConfig.bussinessFields.AccessPeakPerSecond": "PeakRecords",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessEnglishName": "Business Name",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessEnglishNameRules": "Only lowercase words, numbers and underscores",
+  "components.AccessHelper.FieldsConfig.bussinessFields.NumberOfAccess": "Number of Access",
+  "components.AccessHelper.FieldsConfig.bussinessFields.BusinessOwnersExtra": "At least 2 people, business responsible people can view, modify business information, new and modify all access configuration items",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamID": "Data stream ID",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamRules": "Only lowercase words, numbers and underscores",
+  "components.AccessHelper.FieldsConfig.dataFields.fileDelimiter": "Source data fileDelimiter",
+  "components.AccessHelper.FieldsConfig.dataFields.Asterisk": "Asterisk(*)",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamName": "Data stream name",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldName": "Field name",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldNameRule": "At the beginning of English letters, only English letters, numbers, and underscores",
+  "components.AccessHelper.FieldsConfig.dataFields.Semicolon": "Semicolon(;)",
+  "components.AccessHelper.FieldsConfig.dataFields.AutoConsumption": "Auto Consumption",
+  "components.AccessHelper.FieldsConfig.dataFields.DataFlowDirection": "Data stream direction",
+  "components.AccessHelper.FieldsConfig.dataFields.DataType": "DataType",
+  "components.AccessHelper.FieldsConfig.dataFields.Source": "Source",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldType": "FieldType",
+  "components.AccessHelper.FieldsConfig.dataFields.FieldComment": "FieldComment",
+  "components.AccessHelper.FieldsConfig.dataFields.DoubleQuotes": "Double quotes(\")",
+  "components.AccessHelper.FieldsConfig.dataFields.DataEncoding": "Data encoding",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamOwners": "Owners",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamOwnerHelp": "At least 2 people, the person in charge can view and modify data flow information",
+  "components.AccessHelper.FieldsConfig.dataFields.DataStreamOwnersRule": "At least 2 people",
+  "components.AccessHelper.FieldsConfig.dataFields.Space": "Space",
+  "components.AccessHelper.FieldsConfig.dataFields.Comma": "Comma",
+  "components.AccessHelper.FieldsConfig.dataFields.DataFlowIntroduction": "Description",
+  "components.AccessHelper.FieldsConfig.dataFields.SourceDataField": "Source data field",
+  "components.AccessHelper.FieldsConfig.dataFields.VerticalLine": "Vertical line (|)",
+  "components.AccessHelper.FieldsConfig.dataFields.File": "File",
+  "components.AccessHelper.FieldsConfig.dataFields.Autonomous": "Auto Push",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.BusinessName": "Business name",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.Select": "Select",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.Owners": "Owners",
+  "components.ConsumeHelper.BussinessSelect.MyBussinessModal.MyAccessBusiness": "My access business",
+  "components.ConsumeHelper.BussinessSelect.Search": "Search",
+  "components.ConsumeHelper.FieldsConfig.basicFields.Consumption": "Consumption",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupName": "Consumer group name",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerGroupNameRules": "Only lowercase words, numbers and underscores",
+  "components.ConsumeHelper.FieldsConfig.basicFields.DataStreamIDsHelp": "Data stream IDs are divided by semicolons;",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerDataStreamID": "Consumer data stream ID",
+  "components.ConsumeHelper.FieldsConfig.basicFields.ConsumerTargetBusinessID": "Consume Business ID",
+  "components.ConsumeHelper.FieldsConfig.basicFields.No": "No",
+  "components.ConsumeHelper.FieldsConfig.basicFields.filterEnabled": "FilterEnabled",
+  "components.ConsumeHelper.FieldsConfig.basicFields.MasterAddress": "Master address",
+  "components.ConsumeHelper.FieldsConfig.basicFields.OwnersRule": "Please fill in at least 2 responsible people",
+  "components.ConsumeHelper.FieldsConfig.basicFields.Yes": "Yes",
+  "components.ConsumeHelper.FieldsConfig.basicFields.OwnersExtra": "At least 2 people, responsible people can view, modify consumer information",
+  "components.EditableTable.NewLine": "New line",
+  "components.FormGenerator.plugins.PleaseChoose": "Please select",
+  "components.FormGenerator.plugins.PleaseInput": "Please input",
+  "components.Layout.NavWidget.Logout": "Logout",
+  "components.StaffSelect.Placeholder": "Please enter a keyword search",
+  "configs.pagination.Total": "Total {{total}} items",
+  "pages.AccessCreate.Bussiness.config.BusinessInformation": "Business information",
+  "pages.AccessCreate.Bussiness.config.AccessRequirements": "Access requirements",
+  "pages.AccessCreate.Bussiness.config.AccessScale": "Access scale",
+  "pages.AccessCreate.DataStream.config.Basic": "Basic Info",
+  "pages.AccessCreate.DataStream.config.DataSources": "Data Sources",
+  "pages.AccessCreate.DataStream.config.DataInfo": "Data Info",
+  "pages.AccessCreate.DataStream.config.DataStorages": "Data Storages",
+  "pages.AccessCreate.Back": "Back",
+  "pages.AccessCreate.NextStep": "Next",
+  "pages.AccessCreate.DataStreams": "Data streams",
+  "pages.AccessCreate.CheckFormIntegrity": "Check form integrity",
+  "pages.AccessCreate.Submit": "Submit",
+  "pages.AccessCreate.SubmittedSuccessfully": "Submitted successfully",
+  "pages.AccessCreate.BusinessInfo": "Business information",
+  "pages.AccessCreate.Previous": "Previous",
+  "pages.AccessCreate.NewAccess": "Access Create",
+  "pages.AccessDashboard.ExecutionLogModal.Re-executingSuccess": "Re-executing success",
+  "pages.AccessDashboard.ExecutionLogModal.TaskType": "Task type",
+  "pages.AccessDashboard.ExecutionLogModal.ConfirmThatItIsRe-executed": "Confirm that it is re-executed?",
+  "pages.AccessDashboard.ExecutionLogModal.CarriedOut": "Carried out",
+  "pages.AccessDashboard.ExecutionLogModal.EndTime": "End Time",
+  "pages.AccessDashboard.ExecutionLogModal.Processing": "Processing",
+  "pages.AccessDashboard.ExecutionLogModal.ExecuteLog": "Execute log",
+  "pages.AccessDashboard.ExecutionLogModal.RunResults": "RunResults",
+  "pages.AccessDashboard.ExecutionLogModal.Success": "Success",
+  "pages.AccessDashboard.ExecutionLogModal.Skip": "Jump over",
+  "pages.AccessDashboard.ExecutionLogModal.Fail": "Failure",
+  "pages.AccessDashboard.config.Total": "Total",
+  "pages.AccessDashboard.config.WaitAssignCount": "WaitAssignCount",
+  "pages.AccessDashboard.config.WaitApproveCount": "WaitApproveCount",
+  "pages.AccessDashboard.config.Reject": "Reject",
+  "pages.AccessDashboard.config.Name": "Name",
+  "pages.AccessDashboard.config.InCharges": "Owners",
+  "pages.AccessDashboard.config.ExecuteLog": "ExecuteLog",
+  "pages.AccessDashboard.status.Approved": "Approved",
+  "pages.AccessDashboard.status.Draft": "Draft",
+  "pages.AccessDashboard.status.Cancel": "Cancel",
+  "pages.AccessDashboard.status.InPlace": "In place",
+  "pages.AccessDashboard.status.Reject": "Reject",
+  "pages.AccessDashboard.status.ConfigurationSuccess": "Success",
+  "pages.AccessDashboard.status.BeSubmitted": "Be submitted",
+  "pages.AccessDashboard.status.BeApproved": "BeApproved",
+  "pages.AccessDashboard.status.ConfigurationFailed": "Configuration failed",
+  "pages.AccessDashboard.ConfirmDelete": "Confirm delete?",
+  "pages.AccessDashboard.NewAccess": "Create",
+  "pages.AccessDashboard.SuccessfullyDeleted": "Successfully deleted",
+  "pages.AccessDetail.DataSources.Type": "Type",
+  "pages.AccessDetail.DataSources.File": "File",
+  "pages.AccessDetail.DataSources.SaveSuccessfully": "Save successfully",
+  "pages.AccessDetail.DataSources.DeletConfirm": "Delet confirm",
+  "pages.AccessDetail.DataSources.DeleteSuccessfully": "Delete successfully",
+  "pages.AccessDetail.DataSources.DataStreams": "DataStreams",
+  "pages.AccessDetail.DataSources.NoDataStreams": "NoDataStreams",
+  "pages.AccessDetail.DataSources.Create": "Create",
+  "pages.AccessDetail.DataSources.status.Unavailable": "Unavailable",
+  "pages.AccessDetail.DataSources.status.RemoveConfiguration": "Remove configuration",
+  "pages.AccessDetail.DataSources.status.FailedToActivate": "Failed to activate",
+  "pages.AccessDetail.DataSources.status.Failure": "Failure",
+  "pages.AccessDetail.DataSources.status.Deleted": "Deleted",
+  "pages.AccessDetail.DataSources.status.Draft": "Draft",
+  "pages.AccessDetail.DataSources.status.New": "New",
+  "pages.AccessDetail.DataSources.status.ConfigurationFailed": "ConfigurationFailed",
+  "pages.AccessDetail.DataSources.status.Success": "Success",
+  "pages.AccessDetail.DataStorage.New": "Create",
+  "pages.AccessDetail.DataStorage.Type": "Type",
+  "pages.AccessDetail.DataStorage.DataStreams": "DataStreams",
+  "pages.AccessDetail.DataStorage.NoDataStreams": "NoDataStreams",
+  "pages.AccessDetail.DataStorage.Status.New": "New",
+  "pages.AccessDetail.DataStorage.Status.Pending": "Pending",
+  "pages.AccessDetail.DataStorage.Status.Error": "Error",
+  "pages.AccessDetail.DataStorage.Status.Success": "Success",
+  "pages.AccessDetail.DataStream.StreamItemModal.DataFlowConfiguration": "Data stream configuration",
+  "pages.AccessDetail.DataStream.NewDataStream": "New dataStream",
+  "pages.AccessDetail.DataStream.CreateDataStream": "Create",
+  "pages.AccessDetail.DataStream.Config.Save": "Save",
+  "pages.AccessDetail.DataStream.Config.Cancel": "Cancel",
+  "pages.AccessDetail.DataStream.Status.New": "New",
+  "pages.AccessDetail.DataStream.Status.Pending": "Pending",
+  "pages.AccessDetail.DataStream.Status.Error": "Error",
+  "pages.AccessDetail.DataStream.Status.Success": "Success",
+  "pages.AccessDetail.Bussiness": "Bussiness",
+  "pages.AccessDetail.DataStreams": "DataStreams",
+  "pages.AccessDetail.DataSources": "DataSources",
+  "pages.AccessDetail.DataStorages": "DataStorages",
+  "pages.AccessDetail.BussinessDetail": "BussinessDetail",
+  "pages.ApprovalDetail.AccessConfig.DataStorages": "DataStorages",
+  "pages.ApprovalDetail.AccessConfig.ApprovalInformation": "Approval information",
+  "pages.ApprovalDetail.AccessConfig.DataFlowInformation": "Data stream information",
+  "pages.ApprovalDetail.AccessConfig.BasicInformation": "Basic information",
+  "pages.ApprovalDetail.ConsumeConfig.ConsumerGroup": "Consumer group",
+  "pages.ApprovalDetail.SubmitApplication": "Submit application",
+  "pages.ApprovalDetail.Process": "Process",
+  "pages.ApprovalDetail.Ok": "Ok",
+  "pages.ApprovalDetail.RevokeSuccess": "Revoke success",
+  "pages.ApprovalDetail.ConfirmReject": "Confirm?",
+  "pages.ApprovalDetail.Withdraw": "Withdraw",
+  "pages.ApprovalDetail.Back": "Back",
+  "pages.ApprovalDetail.ConfirmWithdrawal": "Confirm withdrawal?",
+  "pages.ApprovalDetail.ApplicationTime": "Application time",
+  "pages.ApprovalDetail.Requisition": "Requisition",
+  "pages.ApprovalDetail.ApprovalComments": "Approval comments",
+  "pages.ApprovalDetail.Reject": "Reject",
+  "pages.ApprovalDetail.Applicant": "Applicant",
+  "pages.ApprovalDetail.ApprovalProcess": "Approval",
+  "pages.ApprovalDetail.WaitingForApproval": "Waiting for approval",
+  "pages.ApprovalDetail.RejectSuccess": "Reject success",
+  "pages.ApprovalDetail.Done": "Done",
+  "pages.Approvals.status.HaveTerminated": "Have terminated",
+  "pages.Approvals.status.Completed": "Completed",
+  "pages.Approvals.status.Processing": "Processing",
+  "pages.Approvals.status.Rejected": "Rejected",
+  "pages.Approvals.status.Canceled": "Canceled",
+  "pages.Approvals.status.Ok": "Approved",
+  "pages.Approvals.ApplicationTime": "ApplicationTime",
+  "pages.Approvals.ApplicationType": "ApplicationType",
+  "pages.Approvals.Approver": "Approver",
+  "pages.Approvals.Applicant": "Applicant",
+  "pages.Approvals.ProcessID": "Process ID",
+  "pages.Approvals.BussinessId": "Bussiness ID",
+  "pages.Approvals.MyApplication": "My Application",
+  "pages.Approvals.MyApproval": "My Approval",
+  "pages.ConsumeCreate.ConsumerInformation": "Consumer information",
+  "pages.ConsumeCreate.Prev": "Prev",
+  "pages.ConsumeCreate.Next": "Next",
+  "pages.ConsumeCreate.Submit": "Submit",
+  "pages.ConsumeCreate.Back": "Back",
+  "pages.ConsumeCreate.NewConsume": "NewConsume",
+  "pages.ConsumeDashboard.config.BeAllocated": "Be allocated",
+  "pages.ConsumeDashboard.config.ApplicationStatus": "Application status",
+  "pages.ConsumeDashboard.config.Reject": "Reject",
+  "pages.ConsumeDashboard.config.OperatingStatus": "Operating status",
+  "pages.ConsumeDashboard.config.Total": "Total",
+  "pages.ConsumeDashboard.config.Pending": "Pending",
+  "pages.ConsumeDashboard.config.ConsumerGroup": "ConsumerGroup",
+  "pages.ConsumeDashboard.config.ConsumerBusinessID": "Consumer business ID",
+  "pages.ConsumeDashboard.config.RecentConsumptionTime": "Recent consumption time",
+  "pages.ConsumeDashboard.config.Middleware": "Middleware",
+  "pages.ConsumeDashboard.status.Normal": "Normal",
+  "pages.ConsumeDashboard.status.Abnormal": "Abnormal",
+  "pages.ConsumeDashboard.status.Shield": "Shield",
+  "pages.ConsumeDashboard.status.NoStatus": "NoStatus",
+  "pages.ConsumeDashboard.status.Passed": "Passed",
+  "pages.ConsumeDashboard.status.Cancelled": "Cancelled",
+  "pages.ConsumeDashboard.NewConsume": "Create",
+  "pages.ConsumeDetail.Info.config.ConsumerGroupID": "Consumer group ID",
+  "pages.ConsumeDetail.ConsumptionDetails": "Consumption Detail",
+  "pages.Login.PleaseEnterUserName": "Please enter user name",
+  "pages.Login.OnlyLowercaseWords": "Only lowercase words, numbers and underscores",
+  "pages.Login.LogIn": "LogIn",
+  "pages.Login.PleaseEnterYourPassword": "Please enter your password",
+  "pages.Login.Reset": "Please contact administrator reset",
+  "pages.Login.PasswordCanNotBeBlank": "Password can not be empty",
+  "pages.Login.UsernameCanNotBeEmpty": "Username can not be empty",
+  "pages.UserManagement.DetailModal.Day": "Days",
+  "pages.UserManagement.DetailModal.New": "New construction",
+  "pages.UserManagement.DetailModal.UserPassword": "Password",
+  "pages.UserManagement.DetailModal.EffectiveTime": "Effective time",
+  "pages.UserManagement.DetailModal.SavedSuccessfully": "Saved successfully",
+  "pages.UserManagement.config.Admin": "Admin",
+  "pages.UserManagement.config.UserName": "Username",
+  "pages.UserManagement.config.GeneralUser": "General Yser",
+  "pages.UserManagement.config.Creater": "Creater",
+  "pages.UserManagement.config.CreateTime": "Create Time",
+  "pages.UserManagement.config.AccountRole": "Account Role",
+  "pages.UserManagement.status.Normal": "Normal",
+  "pages.UserManagement.status.Fail": "Fail",
+  "pages.UserManagement.CreateAccount": "Create"
+}
\ No newline at end of file
diff --git a/inlong-website/src/pages/AccessCreate/Bussiness/config.tsx b/inlong-website/src/pages/AccessCreate/Bussiness/config.tsx
index 73b5a92..406cb15 100644
--- a/inlong-website/src/pages/AccessCreate/Bussiness/config.tsx
+++ b/inlong-website/src/pages/AccessCreate/Bussiness/config.tsx
@@ -19,20 +19,33 @@
 
 import React from 'react';
 import { Divider } from 'antd';
+import i18n from '@/i18n';
 import { genBussinessFields } from '@/components/AccessHelper';
 
 export const getFormContent = ({ changedValues, isUpdate }) =>
   [
     {
-      type: <Divider orientation="left">业务信息</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.Bussiness.config.BusinessInformation')}
+        </Divider>
+      ),
     },
     ...genBussinessFields(['name', 'cnName', 'inCharges', 'description'], changedValues),
     {
-      type: <Divider orientation="left">接入要求</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.Bussiness.config.AccessRequirements')}
+        </Divider>
+      ),
     },
     ...genBussinessFields(['middlewareType']),
     {
-      type: <Divider orientation="left">接入规模</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.Bussiness.config.AccessScale')}
+        </Divider>
+      ),
     },
     ...genBussinessFields(['dailyRecords', 'dailyStorage', 'peakRecords', 'maxLength']),
   ].map(item => {
diff --git a/inlong-website/src/pages/AccessCreate/DataStream/config.tsx b/inlong-website/src/pages/AccessCreate/DataStream/config.tsx
index 3ce9f10..64b908e 100644
--- a/inlong-website/src/pages/AccessCreate/DataStream/config.tsx
+++ b/inlong-website/src/pages/AccessCreate/DataStream/config.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Divider } from 'antd';
+import i18n from '@/i18n';
 import { genDataFields } from '@/components/AccessHelper';
 
 export const genFormContent = (currentValues, bid) => {
@@ -28,7 +29,9 @@ export const genFormContent = (currentValues, bid) => {
 
   return [
     {
-      type: <Divider orientation="left">基础信息</Divider>,
+      type: (
+        <Divider orientation="left">{i18n.t('pages.AccessCreate.DataStream.config.Basic')}</Divider>
+      ),
     },
     ...genDataFields(
       ['dataStreamIdentifier', 'name', 'inCharges', 'description'],
@@ -36,11 +39,19 @@ export const genFormContent = (currentValues, bid) => {
       extraParams,
     ),
     {
-      type: <Divider orientation="left">数据来源</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
+        </Divider>
+      ),
     },
     ...genDataFields(['dataSourceType', 'dataSourcesConfig'], currentValues, extraParams),
     {
-      type: <Divider orientation="left">数据信息</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataInfo')}
+        </Divider>
+      ),
     },
     ...genDataFields(
       ['dataType', 'dataEncoding', 'fileDelimiter', 'rowTypeFields'],
@@ -48,7 +59,11 @@ export const genFormContent = (currentValues, bid) => {
       extraParams,
     ),
     {
-      type: <Divider orientation="left">数据流向</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataStorages')}
+        </Divider>
+      ),
     },
     ...genDataFields(['dataStorage', 'dataStorageHIVE'], currentValues, extraParams),
   ];
diff --git a/inlong-website/src/pages/AccessCreate/index.tsx b/inlong-website/src/pages/AccessCreate/index.tsx
index c52a2c8..8ef1de2 100644
--- a/inlong-website/src/pages/AccessCreate/index.tsx
+++ b/inlong-website/src/pages/AccessCreate/index.tsx
@@ -22,12 +22,14 @@ import { Button, Card, message, Steps, Space } from 'antd';
 import { parse } from 'qs';
 import { PageContainer, Container, FooterToolbar } from '@/components/PageContainer';
 import { useHistory, useLocation, useSet } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import Bussiness from './Bussiness';
 import DataStream from './DataStream';
 
 const { Step } = Steps;
 
 const Create: React.FC = () => {
+  const { t } = useTranslation();
   const history = useHistory();
 
   const location = useLocation();
@@ -45,13 +47,13 @@ const Create: React.FC = () => {
 
   const steps = [
     {
-      title: '业务信息',
+      title: t('pages.AccessCreate.BusinessInfo'),
       content: <Bussiness ref={bussinessRef} bid={bid} />,
       useCache: true,
       ref: bussinessRef,
     },
     {
-      title: '数据流',
+      title: t('pages.AccessCreate.DataStreams'),
       content: <DataStream ref={dataStreamRef} bid={bid} />,
       useCache: true,
       ref: dataStreamRef,
@@ -78,11 +80,11 @@ const Create: React.FC = () => {
   const onSubmit = async current => {
     await onOk(current).catch(err => {
       if (err?.errorFields?.length) {
-        message.error('请检查表单完整性');
+        message.error(t('pages.AccessCreate.CheckFormIntegrity'));
       }
       return Promise.reject(err);
     });
-    message.success('提交成功');
+    message.success(t('pages.AccessCreate.SubmittedSuccessfully'));
     history.push('/access');
   };
 
@@ -90,7 +92,7 @@ const Create: React.FC = () => {
     <Space style={{ display: 'flex', justifyContent: 'center' }}>
       {current > 0 && (
         <Button disabled={confirmLoading} onClick={() => setCurrent(current - 1)}>
-          上一步
+          {t('pages.AccessCreate.Previous')}
         </Button>
       )}
       {current !== steps.length - 1 && (
@@ -100,7 +102,7 @@ const Create: React.FC = () => {
           onClick={async () => {
             await onOk(current).catch(err => {
               if (err?.errorFields?.length) {
-                message.error('请检查表单完整性');
+                message.error(t('pages.AccessCreate.CheckFormIntegrity'));
               }
               return Promise.reject(err);
             });
@@ -110,20 +112,23 @@ const Create: React.FC = () => {
             if (!hasOpened(newCurrent)) addOpened(newCurrent);
           }}
         >
-          下一步
+          {t('pages.AccessCreate.NextStep')}
         </Button>
       )}
       {current === steps.length - 1 && (
         <Button type="primary" onClick={() => onSubmit(current)}>
-          提交审批
+          {t('pages.AccessCreate.Submit')}
         </Button>
       )}
-      <Button onClick={() => history.push('/access')}>返回</Button>
+      <Button onClick={() => history.push('/access')}>{t('pages.AccessCreate.Back')}</Button>
     </Space>
   );
 
   return (
-    <PageContainer breadcrumb={[{ name: '新建接入' }]} useDefaultContainer={false}>
+    <PageContainer
+      breadcrumb={[{ name: t('pages.AccessCreate.NewAccess') }]}
+      useDefaultContainer={false}
+    >
       <Steps current={current} size="small" style={{ marginBottom: 20, width: 400 }}>
         {steps.map(item => (
           <Step key={item.title} title={item.title} />
diff --git a/inlong-website/src/pages/AccessDashboard/ExecutionLogModal.tsx b/inlong-website/src/pages/AccessDashboard/ExecutionLogModal.tsx
index 869ca26..ff82aae 100644
--- a/inlong-website/src/pages/AccessDashboard/ExecutionLogModal.tsx
+++ b/inlong-website/src/pages/AccessDashboard/ExecutionLogModal.tsx
@@ -22,6 +22,7 @@ import { Modal, message, Button, Collapse, Popover, Timeline } from 'antd';
 import { ModalProps } from 'antd/es/modal';
 import HighTable from '@/components/HighTable';
 import request from '@/utils/request';
+import { useTranslation } from 'react-i18next';
 import { useRequest, useUpdateEffect } from '@/hooks';
 import { timestampFormat } from '@/utils';
 import StatusTag from '@/components/StatusTag';
@@ -33,6 +34,8 @@ export interface Props extends ModalProps {
 }
 
 const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
+  const { t } = useTranslation();
+
   const { run: getData, data } = useRequest(
     {
       url: '/workflow/listTaskExecuteLogs',
@@ -49,7 +52,7 @@ const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
 
   const goResult = ({ taskInstId }) => {
     Modal.confirm({
-      title: '确认重新执行吗',
+      title: t('pages.AccessDashboard.ExecutionLogModal.ConfirmThatItIsRe-executed'),
       onOk: async () => {
         await request({
           url: `/workflow/complete/` + taskInstId,
@@ -59,7 +62,7 @@ const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
           },
         });
         await getData(businessIdentifier);
-        message.success('重新执行成功');
+        message.success(t('pages.AccessDashboard.ExecutionLogModal.Re-executingSuccess'));
       },
     });
   };
@@ -72,30 +75,39 @@ const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
 
   const columns = [
     {
-      title: '任务类型',
+      title: t('pages.AccessDashboard.ExecutionLogModal.TaskType'),
       dataIndex: 'taskDisplayName',
     },
     {
-      title: '执行结果',
+      title: t('pages.AccessDashboard.ExecutionLogModal.RunResults'),
       dataIndex: 'state',
       render: (text, record) => (
         <>
           <div>
             {record.state === 'COMPLETED' ? (
-              <StatusTag type={'success'} title={'成功'} />
+              <StatusTag
+                type={'success'}
+                title={t('pages.AccessDashboard.ExecutionLogModal.Success')}
+              />
             ) : record.state === 'FAILED' ? (
-              <StatusTag type={'error'} title={'失败'} />
+              <StatusTag type={'error'} title={t('pages.AccessDashboard.ExecutionLogModal.Fail')} />
             ) : record.state === 'SKIPPED' ? (
-              <StatusTag type={'primary'} title={'跳过'} />
+              <StatusTag
+                type={'primary'}
+                title={t('pages.AccessDashboard.ExecutionLogModal.Skip')}
+              />
             ) : (
-              <StatusTag type={'warning'} title={'处理中'} />
+              <StatusTag
+                type={'warning'}
+                title={t('pages.AccessDashboard.ExecutionLogModal.Processing')}
+              />
             )}
           </div>
         </>
       ),
     },
     {
-      title: '执行日志',
+      title: t('pages.AccessDashboard.ExecutionLogModal.ExecuteLog'),
       dataIndex: 'listenerExecutorLogs',
       width: 400,
       render: text =>
@@ -115,7 +127,7 @@ const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
         ) : null,
     },
     {
-      title: '结束时间',
+      title: t('pages.AccessDashboard.ExecutionLogModal.EndTime'),
       dataIndex: 'endTime',
       render: (text, record) => (
         <>
@@ -124,13 +136,13 @@ const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
       ),
     },
     {
-      title: '操作',
-      dataIndex: 'endTime',
+      title: t('basic.Operating'),
+      dataIndex: 'actions',
       render: (text, record) => (
         <>
           {record?.state && record.state === 'FAILED' && (
             <Button type="link" onClick={() => goResult(record)}>
-              执行
+              {t('pages.AccessDashboard.ExecutionLogModal.CarriedOut')}
             </Button>
           )}
         </>
@@ -138,7 +150,12 @@ const Comp: React.FC<Props> = ({ businessIdentifier, ...modalProps }) => {
     },
   ];
   return (
-    <Modal {...modalProps} title="执行日志" width={1024} footer={null}>
+    <Modal
+      {...modalProps}
+      title={t('pages.AccessDashboard.ExecutionLogModal.ExecuteLog')}
+      width={1024}
+      footer={null}
+    >
       {data && (
         <Collapse accordion defaultActiveKey={[data[0]?.processInstId]}>
           {data.map(item => (
diff --git a/inlong-website/src/pages/AccessDashboard/config.tsx b/inlong-website/src/pages/AccessDashboard/config.tsx
index 6c75166..7d28a13 100644
--- a/inlong-website/src/pages/AccessDashboard/config.tsx
+++ b/inlong-website/src/pages/AccessDashboard/config.tsx
@@ -19,28 +19,29 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import i18n from '@/i18n';
 import { DashTotal, DashToBeAssigned, DashPending, DashRejected } from '@/components/Icons';
 import { statusList, genStatusTag } from './status';
 import { Button } from 'antd';
 
 export const dashCardList = [
   {
-    desc: '接入总数',
+    desc: i18n.t('pages.AccessDashboard.config.Total'),
     dataIndex: 'totalCount',
     icon: <DashTotal />,
   },
   {
-    desc: '待分配',
+    desc: i18n.t('pages.AccessDashboard.config.WaitAssignCount'),
     dataIndex: 'waitAssignCount',
     icon: <DashToBeAssigned />,
   },
   {
-    desc: '待审批',
+    desc: i18n.t('pages.AccessDashboard.config.WaitApproveCount'),
     dataIndex: 'waitApproveCount',
     icon: <DashPending />,
   },
   {
-    desc: '已驳回',
+    desc: i18n.t('pages.AccessDashboard.config.Reject'),
     dataIndex: 'rejectCount',
     icon: <DashRejected />,
   },
@@ -53,12 +54,11 @@ export const getFilterFormContent = defaultValues => [
     initialValue: defaultValues.keyWord,
     props: {
       allowClear: true,
-      placeholder: '请输入关键词',
     },
   },
   {
     type: 'select',
-    label: '状态',
+    label: i18n.t('basic.Status'),
     name: 'status',
     initialValue: defaultValues.status,
     props: {
@@ -78,46 +78,46 @@ export const getColumns = ({ onDelete, openModal }) => {
 
   return [
     {
-      title: '业务ID',
+      title: 'Identifier',
       dataIndex: 'businessIdentifier',
       render: (text, record) => <Link to={genDetailUrl(record)}>{text}</Link>,
     },
     {
-      title: '业务名称',
+      title: i18n.t('pages.AccessDashboard.config.Name'),
       dataIndex: 'cnName',
     },
     {
-      title: '责任人',
+      title: i18n.t('pages.AccessDashboard.config.InCharges'),
       dataIndex: 'inCharges',
     },
     {
-      title: '创建时间',
+      title: i18n.t('basic.CreateTime'),
       dataIndex: 'createTime',
     },
     {
-      title: '状态',
+      title: i18n.t('basic.Status'),
       dataIndex: 'status',
       render: text => genStatusTag(text),
     },
     {
-      title: '操作',
+      title: i18n.t('basic.Operating'),
       dataIndex: 'action',
       render: (text, record) => (
         <>
           <Button type="link">
-            <Link to={genDetailUrl(record)}>详情</Link>
+            <Link to={genDetailUrl(record)}>{i18n.t('basic.Detail')}</Link>
           </Button>
           {[102].includes(record?.status) && (
             <Button type="link">
-              <Link to={genCreateUrl(record)}>修改</Link>
+              <Link to={genCreateUrl(record)}>{i18n.t('basic.Edit')}</Link>
             </Button>
           )}
           <Button type="link" onClick={() => onDelete(record)}>
-            删除
+            {i18n.t('basic.Delete')}
           </Button>
           {record?.status && (record?.status === 120 || record?.status === 130) && (
             <Button type="link" onClick={() => openModal(record)}>
-              执行日志
+              {i18n.t('pages.AccessDashboard.config.ExecuteLog')}
             </Button>
           )}
         </>
diff --git a/inlong-website/src/pages/AccessDashboard/index.tsx b/inlong-website/src/pages/AccessDashboard/index.tsx
index 81cf738..e4eea22 100644
--- a/inlong-website/src/pages/AccessDashboard/index.tsx
+++ b/inlong-website/src/pages/AccessDashboard/index.tsx
@@ -23,12 +23,14 @@ import { PageContainer, Container } from '@/components/PageContainer';
 import HighTable from '@/components/HighTable';
 import { DashboardCardList } from '@/components/DashboardCard';
 import request from '@/utils/request';
+import { useTranslation } from 'react-i18next';
 import { useRequest, useHistory } from '@/hooks';
 import { defaultSize } from '@/configs/pagination';
 import ExecutionLogModal from './ExecutionLogModal';
 import { dashCardList, getFilterFormContent, getColumns } from './config';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
   const history = useHistory();
   const [options, setOptions] = useState({
     // keyWord: '',
@@ -58,14 +60,14 @@ const Comp: React.FC = () => {
 
   const onDelete = ({ businessIdentifier }) => {
     Modal.confirm({
-      title: '确认删除吗',
+      title: t('pages.AccessDashboard.ConfirmDelete'),
       onOk: async () => {
         await request({
           url: `/business/delete/${businessIdentifier}`,
           method: 'DELETE',
         });
         await getList();
-        message.success('删除成功');
+        message.success(t('pages.AccessDashboard.SuccessfullyDeleted'));
       },
     });
   };
@@ -112,7 +114,7 @@ const Comp: React.FC = () => {
           <HighTable
             suffix={
               <Button type="primary" onClick={() => history.push('/access/create')}>
-                新建接入
+                {t('pages.AccessDashboard.NewAccess')}
               </Button>
             }
             filterForm={{
diff --git a/inlong-website/src/pages/AccessDashboard/status.tsx b/inlong-website/src/pages/AccessDashboard/status.tsx
index 57721b4..803ec68 100644
--- a/inlong-website/src/pages/AccessDashboard/status.tsx
+++ b/inlong-website/src/pages/AccessDashboard/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { ClockCircleFilled } from '@/components/Icons';
 
@@ -30,49 +31,49 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '草稿',
+    label: i18n.t('pages.AccessDashboard.status.Draft'),
     value: 0,
     type: 'default',
   },
   {
-    label: '取消',
+    label: i18n.t('pages.AccessDashboard.status.Cancel'),
     value: 30,
     type: 'default',
   },
   {
-    label: '待提交',
+    label: i18n.t('pages.AccessDashboard.status.BeSubmitted'),
     value: 100,
     type: 'primary',
     icon: <ClockCircleFilled />,
   },
   {
-    label: '待审批',
+    label: i18n.t('pages.AccessDashboard.status.BeApproved'),
     value: 101,
     type: 'warning',
   },
   {
-    label: '审批驳回',
+    label: i18n.t('pages.AccessDashboard.status.Reject'),
     value: 102,
     type: 'error',
   },
   {
-    label: '审批通过',
+    label: i18n.t('pages.AccessDashboard.status.Approved'),
     value: 103,
     type: 'success',
   },
   {
-    label: '配置中',
+    label: i18n.t('pages.AccessDashboard.status.InPlace'),
     value: 110,
     type: 'primary',
     icon: <ClockCircleFilled />,
   },
   {
-    label: '配置失败',
+    label: i18n.t('pages.AccessDashboard.status.ConfigurationFailed'),
     value: 120,
     type: 'error',
   },
   {
-    label: '配置成功',
+    label: i18n.t('pages.AccessDashboard.status.ConfigurationSuccess'),
     value: 130,
     type: 'success',
   },
diff --git a/inlong-website/src/pages/AccessDetail/DataSources/index.tsx b/inlong-website/src/pages/AccessDetail/DataSources/index.tsx
index 5289cf1..a679cec 100644
--- a/inlong-website/src/pages/AccessDetail/DataSources/index.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataSources/index.tsx
@@ -27,6 +27,7 @@ import {
   dataSourcesFileColumns,
   DataSourcesCreateModal,
 } from '@/components/AccessHelper';
+import i18n from '@/i18n';
 import request from '@/utils/request';
 import { CommonInterface } from '../common';
 import { genStatusTag } from './status';
@@ -37,20 +38,17 @@ const getFilterFormContent = defaultValues => [
   {
     type: 'inputsearch',
     name: 'keyWord',
-    props: {
-      placeholder: '请输入关键词',
-    },
   },
   {
     type: 'radiobutton',
     name: 'type',
-    label: '类型',
+    label: i18n.t('pages.AccessDetail.DataSources.Type'),
     initialValue: defaultValues.type,
     props: {
       buttonStyle: 'solid',
       options: [
         {
-          label: '文件',
+          label: i18n.t('pages.AccessDetail.DataSources.File'),
           value: 'file',
         },
         // {
@@ -103,7 +101,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
       data: submitData,
     });
     await getList();
-    message.success('保存成功');
+    message.success(i18n.t('pages.AccessDetail.DataSources.SaveSuccessfully'));
   };
 
   const onEdit = ({ id }) => {
@@ -112,14 +110,14 @@ const Comp: React.FC<Props> = ({ bid }) => {
 
   const onDelete = ({ id }) => {
     Modal.confirm({
-      title: '确认删除吗',
+      title: i18n.t('pages.AccessDetail.DataSources.DeletConfirm'),
       onOk: async () => {
         await request({
           url: `/datasource/${options.type}/deleteDetail/${id}`,
           method: 'DELETE',
         });
         await getList();
-        message.success('删除成功');
+        message.success(i18n.t('pages.AccessDetail.DataSources.DeleteSuccessfully'));
       },
     });
   };
@@ -148,7 +146,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
 
   const columns = [
     {
-      title: '数据流',
+      title: i18n.t('pages.AccessDetail.DataSources.DataStreams'),
       dataIndex: 'dataStreamIdentifier',
       width: 100,
     } as any,
@@ -156,20 +154,20 @@ const Comp: React.FC<Props> = ({ bid }) => {
     .concat(options.type === 'file' ? dataSourcesFileColumns : dataSourcesDbColumns)
     .concat([
       {
-        title: '状态',
+        title: i18n.t('basic.Status'),
         dataIndex: 'status',
         render: text => genStatusTag(text),
       },
       {
-        title: '操作',
+        title: i18n.t('basic.Operating'),
         dataIndex: 'action',
         render: (text, record) => (
           <>
             <Button type="link" onClick={() => onEdit(record)}>
-              编辑
+              {i18n.t('basic.Edit')}
             </Button>
             <Button type="link" onClick={() => onDelete(record)}>
-              删除
+              {i18n.t('basic.Delete')}
             </Button>
           </>
         ),
@@ -179,10 +177,10 @@ const Comp: React.FC<Props> = ({ bid }) => {
   const createContent = [
     {
       type: 'select',
-      label: '数据流',
+      label: i18n.t('pages.AccessDetail.DataSources.DataStreams'),
       name: 'dataStreamIdentifier',
       props: {
-        notFoundContent: '暂无可用数据流,请先创建新数据流',
+        notFoundContent: i18n.t('pages.AccessDetail.DataSources.NoDataStreams'),
         disabled: !!createModal.id,
         options: {
           requestService: {
@@ -217,7 +215,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
         }}
         suffix={
           <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
-            新建数据源
+            {i18n.t('pages.AccessDetail.DataSources.Create')}
           </Button>
         }
         table={{
diff --git a/inlong-website/src/pages/AccessDetail/DataSources/status.tsx b/inlong-website/src/pages/AccessDetail/DataSources/status.tsx
index bd74268..b304ee7 100644
--- a/inlong-website/src/pages/AccessDetail/DataSources/status.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataSources/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { ClockCircleFilled } from '@/components/Icons';
 
@@ -30,48 +31,48 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '草稿',
+    label: i18n.t('pages.AccessDetail.DataSources.status.Draft'),
     value: 0,
     type: 'default',
   },
   {
-    label: '新建',
+    label: i18n.t('pages.AccessDetail.DataSources.status.New'),
     value: 200,
     type: 'primary',
     icon: <ClockCircleFilled />,
   },
   {
-    label: '已删除',
+    label: i18n.t('pages.AccessDetail.DataSources.status.Deleted'),
     value: 201,
     type: 'error',
   },
   {
-    label: '下发失败',
+    label: i18n.t('pages.AccessDetail.DataSources.status.Failure'),
     value: 61,
     type: 'error',
   },
   {
-    label: '配置失败',
+    label: i18n.t('pages.AccessDetail.DataSources.status.ConfigurationFailed'),
     value: 42,
     type: 'error',
   },
   {
-    label: '启动失败',
+    label: i18n.t('pages.AccessDetail.DataSources.status.FailedToActivate'),
     value: 52,
     type: 'error',
   },
   {
-    label: '正常',
+    label: i18n.t('pages.AccessDetail.DataSources.status.Success'),
     value: 11,
     type: 'success',
   },
   {
-    label: '移除配置',
+    label: i18n.t('pages.AccessDetail.DataSources.status.RemoveConfiguration'),
     value: 44,
     type: 'warning',
   },
   {
-    label: '不可用',
+    label: i18n.t('pages.AccessDetail.DataSources.status.Unavailable'),
     value: 15,
     type: 'error',
   },
diff --git a/inlong-website/src/pages/AccessDetail/DataStorage/index.tsx b/inlong-website/src/pages/AccessDetail/DataStorage/index.tsx
index 9e7e955..213b78c 100644
--- a/inlong-website/src/pages/AccessDetail/DataStorage/index.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataStorage/index.tsx
@@ -22,6 +22,7 @@ import { Button, Modal, message } from 'antd';
 import HighTable from '@/components/HighTable';
 import { defaultSize } from '@/configs/pagination';
 import { useRequest } from '@/hooks';
+import i18n from '@/i18n';
 import { DataStorageDetailModal, dataStorageHiveColumns } from '@/components/AccessHelper';
 import request from '@/utils/request';
 import { CommonInterface } from '../common';
@@ -33,14 +34,11 @@ const getFilterFormContent = defaultValues => [
   {
     type: 'inputsearch',
     name: 'keyWord',
-    props: {
-      placeholder: '请输入关键词',
-    },
   },
   {
     type: 'select',
     name: 'storageType',
-    label: '类型',
+    label: i18n.t('pages.AccessDetail.DataStorage.Type'),
     initialValue: defaultValues.storageType,
     props: {
       dropdownMatchSelectWidth: false,
@@ -88,7 +86,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
         pageNum: 1,
         pageSize: 1000,
         bid,
-        dataStorageType: options.storageType,
+        storageType: options.storageType,
       },
     },
     {
@@ -113,7 +111,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
       data: submitData,
     });
     await getList();
-    message.success('保存成功');
+    message.success(i18n.t('basic.OperatingSuccess'));
   };
 
   const onEdit = ({ id }) => {
@@ -122,7 +120,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
 
   const onDelete = ({ id }) => {
     Modal.confirm({
-      title: '确认删除吗',
+      title: i18n.t('basic.DeleteConfirm'),
       onOk: async () => {
         await request({
           url: `/storage/delete/${id}`,
@@ -132,7 +130,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
           },
         });
         await getList();
-        message.success('删除成功');
+        message.success(i18n.t('basic.DeleteSuccess'));
       },
     });
   };
@@ -167,10 +165,10 @@ const Comp: React.FC<Props> = ({ bid }) => {
     () => [
       {
         type: 'select',
-        label: '数据流',
+        label: i18n.t('pages.AccessDetail.DataStorage.DataStreams'),
         name: 'dataStreamIdentifier',
         props: {
-          notFoundContent: '暂无可用数据流,请先创建新数据流',
+          notFoundContent: i18n.t('pages.AccessDetail.DataStorage.NoDataStreams'),
           disabled: !!createModal.id,
           options: datastreamList.map(item => ({
             label: item.dataStreamIdentifier,
@@ -189,27 +187,27 @@ const Comp: React.FC<Props> = ({ bid }) => {
 
   const columns = [
     {
-      title: '数据流',
+      title: i18n.t('pages.AccessDetail.DataStorage.DataStreams'),
       dataIndex: 'dataStreamIdentifier',
     },
   ]
     .concat(columnsMap[options.storageType])
     .concat([
       {
-        title: '状态',
+        title: i18n.t('basic.Status'),
         dataIndex: 'status',
         render: text => genStatusTag(text),
       },
       {
-        title: '操作',
+        title: i18n.t('basic.Operating'),
         dataIndex: 'action',
         render: (text, record) => (
           <>
             <Button type="link" onClick={() => onEdit(record)}>
-              编辑
+              {i18n.t('basic.Edit')}
             </Button>
             <Button type="link" onClick={() => onDelete(record)}>
-              删除
+              {i18n.t('basic.Delete')}
             </Button>
           </>
         ),
@@ -225,7 +223,7 @@ const Comp: React.FC<Props> = ({ bid }) => {
         }}
         suffix={
           <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
-            新建流向配置
+            {i18n.t('pages.AccessDetail.DataStorage.New')}
           </Button>
         }
         table={{
diff --git a/inlong-website/src/pages/AccessDetail/DataStorage/status.tsx b/inlong-website/src/pages/AccessDetail/DataStorage/status.tsx
index 990a5ad..60a13c0 100644
--- a/inlong-website/src/pages/AccessDetail/DataStorage/status.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataStorage/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { ClockCircleFilled } from '@/components/Icons';
 
@@ -30,23 +31,23 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '新建',
+    label: i18n.t('pages.AccessDetail.DataStorage.Status.New'),
     value: 100,
     type: 'default',
     icon: <ClockCircleFilled />,
   },
   {
-    label: '配置中',
+    label: i18n.t('pages.AccessDetail.DataStorage.Status.Pending'),
     value: 110,
     type: 'primary',
   },
   {
-    label: '配置失败',
+    label: i18n.t('pages.AccessDetail.DataStorage.Status.Error'),
     value: 120,
     type: 'error',
   },
   {
-    label: '配置成功',
+    label: i18n.t('pages.AccessDetail.DataStorage.Status.Success'),
     value: 130,
     type: 'success',
   },
diff --git a/inlong-website/src/pages/AccessDetail/DataStream/StreamItemModal.tsx b/inlong-website/src/pages/AccessDetail/DataStream/StreamItemModal.tsx
index 027fd85..f0987e9 100644
--- a/inlong-website/src/pages/AccessDetail/DataStream/StreamItemModal.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataStream/StreamItemModal.tsx
@@ -22,6 +22,7 @@ import { Divider, Modal, message } from 'antd';
 import { ModalProps } from 'antd/es/modal';
 import FormGenerator, { useForm } from '@/components/FormGenerator';
 import { useUpdateEffect } from '@/hooks';
+import i18n from '@/i18n';
 import { genDataFields } from '@/components/AccessHelper';
 import request from '@/utils/request';
 import { valuesToData } from '@/pages/AccessCreate/DataStream/helper';
@@ -39,7 +40,9 @@ export const genFormContent = (currentValues, businessIdentifier) => {
 
   return [
     {
-      type: <Divider orientation="left">基础信息</Divider>,
+      type: (
+        <Divider orientation="left">{i18n.t('pages.AccessCreate.DataStream.config.Basic')}</Divider>
+      ),
     },
     ...genDataFields(
       ['dataStreamIdentifier', 'name', 'inCharges', 'description'],
@@ -47,11 +50,19 @@ export const genFormContent = (currentValues, businessIdentifier) => {
       extraParams,
     ),
     {
-      type: <Divider orientation="left">数据来源</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
+        </Divider>
+      ),
     },
     ...genDataFields(['dataSourceType'], currentValues, extraParams),
     {
-      type: <Divider orientation="left">数据信息</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataInfo')}
+        </Divider>
+      ),
     },
     ...genDataFields(['dataType', 'rowTypeFields'], currentValues, extraParams),
   ].map(item => {
@@ -90,7 +101,7 @@ const Comp: React.FC<Props> = ({ bid, record, ...modalProps }) => {
       data: submitData?.[0],
     });
     await modalProps?.onOk(values);
-    message.success('保存成功');
+    message.success(i18n.t('basic.OperatingSuccess'));
   };
 
   useUpdateEffect(() => {
@@ -104,7 +115,12 @@ const Comp: React.FC<Props> = ({ bid, record, ...modalProps }) => {
   }, [modalProps.visible]);
 
   return (
-    <Modal {...modalProps} title="数据流配置" width={1000} onOk={onOk}>
+    <Modal
+      {...modalProps}
+      title={i18n.t('pages.AccessDetail.DataStream.StreamItemModal.DataFlowConfiguration')}
+      width={1000}
+      onOk={onOk}
+    >
       <FormGenerator
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 20 }}
diff --git a/inlong-website/src/pages/AccessDetail/DataStream/config.tsx b/inlong-website/src/pages/AccessDetail/DataStream/config.tsx
index 92479db..0eba0f2 100644
--- a/inlong-website/src/pages/AccessDetail/DataStream/config.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataStream/config.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Divider } from 'antd';
+import i18n from '@/i18n';
 import { genDataFields } from '@/components/AccessHelper';
 
 export const getFilterFormContent = (defaultValues = {} as any) => [
@@ -26,9 +27,6 @@ export const getFilterFormContent = (defaultValues = {} as any) => [
     type: 'inputsearch',
     name: 'keyWord',
     initialValue: defaultValues.keyWord,
-    props: {
-      placeholder: '请输入关键词',
-    },
   },
 ];
 
@@ -36,24 +34,24 @@ export const genExtraContent = ({ editingId, record, onSave, onCancel, onEdit, o
   return editingId === record.id || (editingId === true && !record.id)
     ? [
         {
-          label: '保存',
+          label: i18n.t('pages.AccessDetail.DataStream.Config.Save'),
           onRun: onSave,
           disabled: false,
         },
         {
-          label: '取消',
+          label: i18n.t('pages.AccessDetail.DataStream.Config.Cancel'),
           onRun: onCancel,
           disabled: false,
         },
       ]
     : [
         {
-          label: '编辑',
+          label: i18n.t('basic.Edit'),
           onRun: onEdit,
           disabled: editingId,
         },
         {
-          label: '删除',
+          label: i18n.t('basic.Delete'),
           onRun: onDelete,
           disabled: editingId,
         },
@@ -71,7 +69,9 @@ export const genFormContent = (editingId, currentValues, businessIdentifier, rea
 
   return [
     {
-      type: <Divider orientation="left">基础信息</Divider>,
+      type: (
+        <Divider orientation="left">{i18n.t('pages.AccessCreate.DataStream.config.Basic')}</Divider>
+      ),
     },
     ...genDataFields(
       ['dataStreamIdentifier', 'name', 'inCharges', 'description'],
@@ -79,11 +79,19 @@ export const genFormContent = (editingId, currentValues, businessIdentifier, rea
       extraParams,
     ),
     {
-      type: <Divider orientation="left">数据来源</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataSources')}
+        </Divider>
+      ),
     },
     ...genDataFields(['dataSourceType', 'dataSourcesConfig'], currentValues, extraParams),
     {
-      type: <Divider orientation="left">数据信息</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataInfo')}
+        </Divider>
+      ),
     },
     ...genDataFields(
       ['dataType', 'dataEncoding', 'fileDelimiter', 'rowTypeFields'],
@@ -91,7 +99,11 @@ export const genFormContent = (editingId, currentValues, businessIdentifier, rea
       extraParams,
     ),
     {
-      type: <Divider orientation="left">数据流向</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.AccessCreate.DataStream.config.DataStorages')}
+        </Divider>
+      ),
     },
     ...genDataFields(['dataStorage', 'dataStorageHIVE'], currentValues, extraParams),
   ].map(item => {
diff --git a/inlong-website/src/pages/AccessDetail/DataStream/index.tsx b/inlong-website/src/pages/AccessDetail/DataStream/index.tsx
index 12ce5e1..7878e0a 100644
--- a/inlong-website/src/pages/AccessDetail/DataStream/index.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataStream/index.tsx
@@ -25,6 +25,7 @@ import { defaultSize } from '@/configs/pagination';
 import { useRequest, useSelector } from '@/hooks';
 import { State } from '@/models';
 import request from '@/utils/request';
+import { useTranslation } from 'react-i18next';
 import { dataToValues, valuesToData } from '@/pages/AccessCreate/DataStream/helper';
 import { pickObject } from '@/utils';
 import { CommonInterface } from '../common';
@@ -36,6 +37,8 @@ import styles from './index.module.less';
 type Props = CommonInterface;
 
 const Comp: React.FC<Props> = ({ bid, readonly }) => {
+  const { t } = useTranslation();
+
   const [form] = Form.useForm();
 
   const userName = useSelector<State, State['userName']>(state => state.userName);
@@ -138,7 +141,7 @@ const Comp: React.FC<Props> = ({ bid, readonly }) => {
     }
     await getList();
     setEditingId(false);
-    message.success('保存成功');
+    message.success(t('basic.OperatingSuccess'));
   };
 
   const onEdit = record => {
@@ -153,7 +156,7 @@ const Comp: React.FC<Props> = ({ bid, readonly }) => {
 
   const onDelete = record => {
     Modal.confirm({
-      title: '确认删除吗',
+      title: t('basic.DeleteConfirm'),
       onOk: async () => {
         await request({
           url: '/datastream/delete',
@@ -164,7 +167,7 @@ const Comp: React.FC<Props> = ({ bid, readonly }) => {
           },
         });
         await getList();
-        message.success('删除成功');
+        message.success(t('basic.DeleteSuccess'));
       },
     });
   };
@@ -201,7 +204,9 @@ const Comp: React.FC<Props> = ({ bid, readonly }) => {
             </div>
           ))
         ) : (
-          <div className={styles.collapseHeaderItem}>新数据流</div>
+          <div className={styles.collapseHeaderItem}>
+            {t('pages.AccessDetail.DataStream.NewDataStream')}
+          </div>
         )}
         {!readonly && genExtra(record, index)}
       </div>
@@ -244,7 +249,7 @@ const Comp: React.FC<Props> = ({ bid, readonly }) => {
                           mutate({ list: [{}].concat(data.list), total: data.list.length + 1 });
                         }}
                       >
-                        新建数据流
+                        {t('pages.AccessDetail.DataStream.CreateDataStream')}
                       </Button>
                     </Space>,
                     topRightRef.current,
diff --git a/inlong-website/src/pages/AccessDetail/DataStream/status.tsx b/inlong-website/src/pages/AccessDetail/DataStream/status.tsx
index 9dc7c9f..a8ecee2 100644
--- a/inlong-website/src/pages/AccessDetail/DataStream/status.tsx
+++ b/inlong-website/src/pages/AccessDetail/DataStream/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { ClockCircleFilled } from '@/components/Icons';
 
@@ -30,23 +31,23 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '新建',
+    label: i18n.t('pages.AccessDetail.DataStream.Status.New'),
     value: 100,
     type: 'default',
   },
   {
-    label: '配置中',
+    label: i18n.t('pages.AccessDetail.DataStream.Status.Pending'),
     value: 110,
     type: 'primary',
     icon: <ClockCircleFilled />,
   },
   {
-    label: '配置失败',
+    label: i18n.t('pages.AccessDetail.DataStream.Status.Error'),
     value: 120,
     type: 'error',
   },
   {
-    label: '配置成功',
+    label: i18n.t('pages.AccessDetail.DataStream.Status.Success'),
     value: 130,
     type: 'success',
   },
diff --git a/inlong-website/src/pages/AccessDetail/Info/index.tsx b/inlong-website/src/pages/AccessDetail/Info/index.tsx
index 88794f5..3d4b567 100644
--- a/inlong-website/src/pages/AccessDetail/Info/index.tsx
+++ b/inlong-website/src/pages/AccessDetail/Info/index.tsx
@@ -22,6 +22,7 @@ import ReactDom from 'react-dom';
 import { Button, Space, message } from 'antd';
 import FormGenerator, { useForm } from '@/components/FormGenerator';
 import { useRequest, useBoolean } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import request from '@/utils/request';
 import { CommonInterface } from '../common';
 import { getFormContent } from './config';
@@ -29,6 +30,7 @@ import { getFormContent } from './config';
 type Props = CommonInterface;
 
 const Comp: React.FC<Props> = ({ bid, isActive, readonly, extraRef }) => {
+  const { t } = useTranslation();
   const [editing, { setTrue, setFalse }] = useBoolean(false);
 
   const [form] = useForm();
@@ -60,7 +62,7 @@ const Comp: React.FC<Props> = ({ bid, isActive, readonly, extraRef }) => {
     });
     await getData();
     setFalse();
-    message.success('保存成功');
+    message.success(t('basic.OperatingSuccess'));
   };
 
   const onCancel = () => {
@@ -72,13 +74,13 @@ const Comp: React.FC<Props> = ({ bid, isActive, readonly, extraRef }) => {
     return editing ? (
       <Space>
         <Button type="primary" onClick={onSave}>
-          保存
+          {t('basic.Save')}
         </Button>
-        <Button onClick={onCancel}>取消</Button>
+        <Button onClick={onCancel}>{t('basic.Cancel')}</Button>
       </Space>
     ) : (
       <Button type="primary" onClick={setTrue}>
-        编辑
+        {t('basic.Edit')}
       </Button>
     );
   };
diff --git a/inlong-website/src/pages/AccessDetail/index.tsx b/inlong-website/src/pages/AccessDetail/index.tsx
index 9fa771d..51a4a42 100644
--- a/inlong-website/src/pages/AccessDetail/index.tsx
+++ b/inlong-website/src/pages/AccessDetail/index.tsx
@@ -21,12 +21,14 @@ import React, { useMemo, useState, useRef } from 'react';
 import { Tabs } from 'antd';
 import { PageContainer } from '@/components/PageContainer';
 import { useParams, useRequest } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import Info from './Info';
 import DataSources from './DataSources';
 import DataStream from './DataStream';
 import DataStorage from './DataStorage';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
 
   const { data } = useRequest(`/business/get/${id}`, {
@@ -41,35 +43,35 @@ const Comp: React.FC = () => {
     () =>
       [
         {
-          label: '业务信息',
+          label: t('pages.AccessDetail.Bussiness'),
           value: 'bussinessInfo',
           content: Info,
         },
         {
-          label: '数据流',
+          label: t('pages.AccessDetail.DataStreams'),
           value: 'dataStream',
           content: DataStream,
         },
         {
-          label: '数据源',
+          label: t('pages.AccessDetail.DataSources'),
           value: 'dataSources',
           content: DataSources,
           hidden: isReadonly,
         },
         {
-          label: '流向',
+          label: t('pages.AccessDetail.DataStorages'),
           value: 'dataStorage',
           content: DataStorage,
           hidden: isReadonly,
         },
       ].filter(item => !item.hidden),
-    [isReadonly],
+    [isReadonly, t],
   );
 
   const [actived, setActived] = useState(list[0].value);
 
   return (
-    <PageContainer breadcrumb={[{ name: `业务详情${id}` }]}>
+    <PageContainer breadcrumb={[{ name: `${t('pages.AccessDetail.BussinessDetail')}${id}` }]}>
       <Tabs
         activeKey={actived}
         onChange={val => setActived(val)}
diff --git a/inlong-website/src/pages/ApprovalDetail/AccessConfig.tsx b/inlong-website/src/pages/ApprovalDetail/AccessConfig.tsx
index df25450..758ee12 100644
--- a/inlong-website/src/pages/ApprovalDetail/AccessConfig.tsx
+++ b/inlong-website/src/pages/ApprovalDetail/AccessConfig.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Divider, Table } from 'antd';
+import i18n from '@/i18n';
 import { genBussinessFields } from '@/components/AccessHelper';
 
 const getBusinessContent = initialValues => [
@@ -59,20 +60,28 @@ const getBusinessContent = initialValues => [
 export const getFormContent = ({ isViwer, formData, suffixContent }) => {
   const array = [
     {
-      type: <Divider orientation="left">基础信息</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.ApprovalDetail.AccessConfig.BasicInformation')}
+        </Divider>
+      ),
     },
     ...(getBusinessContent(formData.businessInfo) || []),
     {
-      type: <Divider orientation="left">数据流信息</Divider>,
+      type: (
+        <Divider orientation="left">
+          {i18n.t('pages.ApprovalDetail.AccessConfig.DataFlowInformation')}
+        </Divider>
+      ),
     },
     {
       type: (
         <Table
           size="small"
           columns={[
-            { title: '数据流ID', dataIndex: 'dataStreamIdentifier' },
+            { title: 'ID', dataIndex: 'dataStreamIdentifier' },
             {
-              title: '流向',
+              title: i18n.t('pages.ApprovalDetail.AccessConfig.DataStorages'),
               dataIndex: 'storageList',
               render: text => text.map(item => item.storageType).join(','),
             },
@@ -87,7 +96,11 @@ export const getFormContent = ({ isViwer, formData, suffixContent }) => {
     ? array
     : array.concat([
         {
-          type: <Divider orientation="left">审批信息</Divider>,
+          type: (
+            <Divider orientation="left">
+              {i18n.t('pages.ApprovalDetail.AccessConfig.ApprovalInformation')}
+            </Divider>
+          ),
         },
         ...suffixContent,
       ]);
diff --git a/inlong-website/src/pages/ApprovalDetail/ConsumeConfig.tsx b/inlong-website/src/pages/ApprovalDetail/ConsumeConfig.tsx
index 54ecd31..5eb4a1f 100644
--- a/inlong-website/src/pages/ApprovalDetail/ConsumeConfig.tsx
+++ b/inlong-website/src/pages/ApprovalDetail/ConsumeConfig.tsx
@@ -19,13 +19,14 @@
 
 import React from 'react';
 import { Divider } from 'antd';
+import i18n from '@/i18n';
 import { genBasicFields } from '@/components/ConsumeHelper';
 
 const getConsumerContent = initialValues => {
   return [
     {
       type: 'text',
-      label: '消费组',
+      label: i18n.t('pages.ApprovalDetail.ConsumeConfig.ConsumerGroup'),
       name: 'consumerGroupId',
       initialValue: initialValues.consumerGroupId,
     },
@@ -36,7 +37,7 @@ const getConsumerContent = initialValues => {
     ),
     {
       type: 'text',
-      label: '消费Topic',
+      label: 'Topic',
       name: 'topic',
       initialValue: initialValues.topic,
     },
diff --git a/inlong-website/src/pages/ApprovalDetail/index.tsx b/inlong-website/src/pages/ApprovalDetail/index.tsx
index 98226ca..c266fed 100644
--- a/inlong-website/src/pages/ApprovalDetail/index.tsx
+++ b/inlong-website/src/pages/ApprovalDetail/index.tsx
@@ -22,6 +22,7 @@ import { Button, Card, Descriptions, Modal, message, Space } from 'antd';
 import { parse } from 'qs';
 import { PageContainer, Container, FooterToolbar } from '@/components/PageContainer';
 import { useParams, useRequest, useLocation, useHistory } from '@/hooks';
+import i18n from '@/i18n';
 import { timestampFormat } from '@/utils';
 import request from '@/utils/request';
 import Steps from './Steps';
@@ -32,7 +33,7 @@ const workflowFormat = (applicant, startEvent, taskHistory = []) => {
   const taskHistoryMap = new Map(taskHistory.map(item => [item.name, item]));
   let data = [
     {
-      title: '提交申请',
+      title: i18n.t('pages.ApprovalDetail.SubmitApplication'),
       name: '',
       desc: applicant,
       state: 'COMPLETED',
@@ -47,7 +48,7 @@ const workflowFormat = (applicant, startEvent, taskHistory = []) => {
           nextList.push(item.next);
         }
         return {
-          title: nextList.length ? item.displayName : '完成',
+          title: nextList.length ? item.displayName : i18n.t('pages.ApprovalDetail.Done'),
           desc: item.approvers?.join(', '),
           name: item.name,
           state: item.state,
@@ -59,17 +60,17 @@ const workflowFormat = (applicant, startEvent, taskHistory = []) => {
   return data;
 };
 
-const titleNameMap = {
-  Applies: '申请单',
-  Approvals: '待办审批单',
-};
-
 const Comp: React.FC = () => {
   const history = useHistory();
   const location = useLocation();
 
   const { id } = useParams<{ id: string }>();
 
+  const titleNameMap = {
+    Applies: i18n.t('pages.ApprovalDetail.Requisition'),
+    Approvals: i18n.t('pages.ApprovalDetail.WaitingForApproval'),
+  };
+
   const actived = useMemo<string>(() => parse(location.search.slice(1))?.actived, [
     location.search,
   ]);
@@ -105,12 +106,12 @@ const Comp: React.FC = () => {
       data: submitData,
     });
     history.push('/approvals?actived=Approvals');
-    message.success('通过成功');
+    message.success(i18n.t('basic.OperatingSuccess'));
   };
 
   const onReject = async () => {
     Modal.confirm({
-      title: '确认驳回吗?',
+      title: i18n.t('pages.ApprovalDetail.ConfirmReject'),
       onOk: async () => {
         const { remark } = await formRef?.current?.onOk(false);
         await request({
@@ -121,14 +122,14 @@ const Comp: React.FC = () => {
           },
         });
         history.push('/approvals?actived=Approvals');
-        message.success('驳回成功');
+        message.success(i18n.t('pages.ApprovalDetail.RejectSuccess'));
       },
     });
   };
 
   const onCancel = async () => {
     Modal.confirm({
-      title: '确认撤回吗?',
+      title: i18n.t('pages.ApprovalDetail.ConfirmWithdrawal'),
       onOk: async () => {
         // const { remark } = await formRef?.current?.onOk(false);
         await request({
@@ -139,7 +140,7 @@ const Comp: React.FC = () => {
           },
         });
         history.push('/approvals?actived=Applies');
-        message.success('撤回成功');
+        message.success(i18n.t('pages.ApprovalDetail.RevokeSuccess'));
       },
     });
   };
@@ -156,16 +157,20 @@ const Comp: React.FC = () => {
       {actived === 'Approvals' && currentTask?.state === 'PENDING' && (
         <Space style={{ display: 'flex', justifyContent: 'center' }}>
           <Button type="primary" onClick={onApprove}>
-            通过
+            {i18n.t('pages.ApprovalDetail.Ok')}
+          </Button>
+          <Button onClick={onReject}>{i18n.t('pages.ApprovalDetail.Reject')}</Button>
+          <Button onClick={() => history.push('/approvals?actived=Approvals')}>
+            {i18n.t('pages.ApprovalDetail.Back')}
           </Button>
-          <Button onClick={onReject}>驳回</Button>
-          <Button onClick={() => history.push('/approvals?actived=Approvals')}>返回</Button>
         </Space>
       )}
       {actived === 'Applies' && processInfo?.state === 'PROCESSING' && (
         <Space style={{ display: 'flex', justifyContent: 'center' }}>
-          <Button onClick={onCancel}>撤回</Button>
-          <Button onClick={() => history.push('/approvals?actived=Applies')}>返回</Button>
+          <Button onClick={onCancel}>{i18n.t('pages.ApprovalDetail.Withdraw')}</Button>
+          <Button onClick={() => history.push('/approvals?actived=Applies')}>
+            {i18n.t('pages.ApprovalDetail.Back')}
+          </Button>
         </Space>
       )}
     </>
@@ -186,7 +191,7 @@ const Comp: React.FC = () => {
   const suffixContent = [
     {
       type: 'textarea',
-      label: '审批意见',
+      label: i18n.t('pages.ApprovalDetail.ApprovalComments'),
       name: 'remark',
       initialValue: currentTask?.remark,
       props: {
@@ -208,15 +213,19 @@ const Comp: React.FC = () => {
 
   return (
     <PageContainer
-      breadcrumb={[{ name: `${titleNameMap[actived] || '流程单'}${id}` }]}
+      breadcrumb={[
+        { name: `${titleNameMap[actived] || i18n.t('pages.ApprovalDetail.Process')}${id}` },
+      ]}
       useDefaultContainer={false}
     >
       <div style={{ display: 'flex' }}>
         <Container style={{ flex: 1, marginRight: 20 }}>
           <Card title={workflow?.displayName}>
             <Descriptions>
-              <Descriptions.Item label="申请人">{processInfo?.applicant}</Descriptions.Item>
-              <Descriptions.Item label="申请时间">
+              <Descriptions.Item label={i18n.t('pages.ApprovalDetail.Applicant')}>
+                {processInfo?.applicant}
+              </Descriptions.Item>
+              <Descriptions.Item label={i18n.t('pages.ApprovalDetail.ApplicationTime')}>
                 {processInfo?.startTime ? timestampFormat(processInfo?.startTime) : ''}
               </Descriptions.Item>
             </Descriptions>
@@ -225,7 +234,7 @@ const Comp: React.FC = () => {
           </Card>
         </Container>
         <Container style={{ flex: '0 0 200px' }}>
-          <Card title="审批流程" style={{ height: '100%' }}>
+          <Card title={i18n.t('pages.ApprovalDetail.ApprovalProcess')} style={{ height: '100%' }}>
             <Steps data={stepsData} />
           </Card>
         </Container>
diff --git a/inlong-website/src/pages/Approvals/Applies/config.tsx b/inlong-website/src/pages/Approvals/Applies/config.tsx
index a11cf95..cd8a288 100644
--- a/inlong-website/src/pages/Approvals/Applies/config.tsx
+++ b/inlong-website/src/pages/Approvals/Applies/config.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import i18n from '@/i18n';
 import { statusList, genStatusTag } from './status';
 import { timestampFormat } from '@/utils';
 
@@ -30,12 +31,12 @@ export const getFilterFormContent = defaultValues => [
       style: { width: 150 },
       min: 1,
       max: 100000000,
-      placeholder: '请输入流程单ID',
+      placeholder: i18n.t('pages.Approvals.ProcessID'),
     },
   },
   {
     type: 'select',
-    label: '状态',
+    label: i18n.t('basic.Status'),
     name: 'state',
     initialValue: defaultValues.state,
     props: {
@@ -48,46 +49,48 @@ export const getFilterFormContent = defaultValues => [
 
 export const getColumns = activedName => [
   {
-    title: '流程单ID',
+    title: i18n.t('pages.Approvals.ProcessID'),
     dataIndex: 'id',
     width: 90,
     render: text => <Link to={`/approvals/detail/${text}?actived=${activedName}`}>{text}</Link>,
   },
   {
-    title: '申请类型',
+    title: i18n.t('pages.Approvals.ApplicationType'),
     width: 120,
     dataIndex: 'displayName',
   },
   {
-    title: '业务ID',
+    title: i18n.t('pages.Approvals.BussinessId'),
     dataIndex: 'businessIdentifier',
     width: 200,
     render: (text, record) => record.showInList?.businessIdentifier,
   },
   {
-    title: '申请时间',
+    title: i18n.t('pages.Approvals.ApplicationTime'),
     dataIndex: 'startTime',
     width: 200,
     render: text => timestampFormat(text),
   },
   {
-    title: '审批人',
+    title: i18n.t('pages.Approvals.Approver'),
     dataIndex: 'currentTasks',
     width: 250,
     render: text => text?.map(item => item.approvers)?.join(', '),
   },
   {
-    title: '状态',
+    title: i18n.t('basic.Status'),
     dataIndex: 'state',
     width: 100,
     render: text => genStatusTag(text),
   },
   {
-    title: '操作',
+    title: i18n.t('basic.Operating'),
     dataIndex: 'action',
     width: 100,
     render: (text, record) => (
-      <Link to={`/approvals/detail/${record.id}?actived=${activedName}`}>详情</Link>
+      <Link to={`/approvals/detail/${record.id}?actived=${activedName}`}>
+        {i18n.t('basic.Detail')}
+      </Link>
     ),
   },
 ];
diff --git a/inlong-website/src/pages/Approvals/Applies/status.tsx b/inlong-website/src/pages/Approvals/Applies/status.tsx
index 7cde624..c7aef67 100644
--- a/inlong-website/src/pages/Approvals/Applies/status.tsx
+++ b/inlong-website/src/pages/Approvals/Applies/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { CloseCircleFilled } from '@/components/Icons';
 
@@ -30,28 +31,28 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '已完成',
+    label: i18n.t('pages.Approvals.status.Completed'),
     value: 'COMPLETED',
     type: 'success',
   },
   {
-    label: '待审批',
+    label: i18n.t('pages.Approvals.status.Processing'),
     value: 'PROCESSING',
     type: 'warning',
   },
   {
-    label: '已驳回',
+    label: i18n.t('pages.Approvals.status.Rejected'),
     value: 'REJECTED',
     type: 'error',
   },
   {
-    label: '已取消',
+    label: i18n.t('pages.Approvals.status.Canceled'),
     value: 'CANCELED',
     type: 'default',
     icon: <CloseCircleFilled />,
   },
   {
-    label: '已终止',
+    label: i18n.t('pages.Approvals.status.HaveTerminated'),
     value: 'TERMINATED',
     type: 'error',
   },
diff --git a/inlong-website/src/pages/Approvals/Approvals/config.tsx b/inlong-website/src/pages/Approvals/Approvals/config.tsx
index 4b739e9..75fa1db 100644
--- a/inlong-website/src/pages/Approvals/Approvals/config.tsx
+++ b/inlong-website/src/pages/Approvals/Approvals/config.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import i18n from '@/i18n';
 import { statusList, genStatusTag } from './status';
 import { timestampFormat } from '@/utils';
 
@@ -30,17 +31,17 @@ export const getFilterFormContent = defaultValues => [
       style: { width: 150 },
       min: 1,
       max: 100000000,
-      placeholder: '请输入流程单ID',
+      placeholder: i18n.t('pages.Approvals.ProcessID'),
     },
   },
   {
     type: 'inputsearch',
-    label: '申请人',
+    label: i18n.t('pages.Approvals.Applicant'),
     name: 'applicant',
   },
   {
     type: 'select',
-    label: '状态',
+    label: i18n.t('basic.Status'),
     name: 'states',
     initialValue: defaultValues.states,
     props: {
@@ -53,7 +54,7 @@ export const getFilterFormContent = defaultValues => [
 
 export const getColumns = activedName => [
   {
-    title: '流程单ID',
+    title: i18n.t('pages.Approvals.ProcessID'),
     dataIndex: 'processInstId',
     render: (text, record) => (
       <Link to={`/approvals/detail/${text}?actived=${activedName}&taskId=${record.id}`}>
@@ -62,36 +63,36 @@ export const getColumns = activedName => [
     ),
   },
   {
-    title: '申请人',
+    title: i18n.t('pages.Approvals.Applicant'),
     dataIndex: 'applicant',
   },
   {
-    title: '申请类型',
+    title: i18n.t('pages.Approvals.ApplicationType'),
     dataIndex: 'processDisplayName',
   },
   {
-    title: '业务ID',
+    title: i18n.t('pages.Approvals.BussinessId'),
     dataIndex: 'businessIdentifier',
     render: (text, record) => record.showInList?.businessIdentifier,
   },
   {
-    title: '申请时间',
+    title: i18n.t('pages.Approvals.ApplicationTime'),
     dataIndex: 'startTime',
     render: text => timestampFormat(text),
   },
   {
-    title: '状态',
+    title: i18n.t('basic.Status'),
     dataIndex: 'state',
     render: text => genStatusTag(text),
   },
   {
-    title: '操作',
+    title: i18n.t('basic.Operating'),
     dataIndex: 'action',
     render: (text, record) => (
       <Link
         to={`/approvals/detail/${record.processInstId}?actived=${activedName}&taskId=${record.id}`}
       >
-        详情
+        {i18n.t('basic.Detail')}
       </Link>
     ),
   },
diff --git a/inlong-website/src/pages/Approvals/Approvals/status.tsx b/inlong-website/src/pages/Approvals/Approvals/status.tsx
index 9361f44..b9efaee 100644
--- a/inlong-website/src/pages/Approvals/Approvals/status.tsx
+++ b/inlong-website/src/pages/Approvals/Approvals/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { CloseCircleFilled } from '@/components/Icons';
 
@@ -30,28 +31,28 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '通过',
+    label: i18n.t('pages.Approvals.status.Ok'),
     value: 'APPROVED',
     type: 'success',
   },
   {
-    label: '待审批',
+    label: i18n.t('pages.Approvals.status.Processing'),
     value: 'PENDING',
     type: 'warning',
   },
   {
-    label: '已驳回',
+    label: i18n.t('pages.Approvals.status.Rejected'),
     value: 'REJECTED',
     type: 'error',
   },
   {
-    label: '已取消',
+    label: i18n.t('pages.Approvals.status.Canceled'),
     value: 'CANCELED',
     type: 'default',
     icon: <CloseCircleFilled />,
   },
   {
-    label: '已终止',
+    label: i18n.t('pages.Approvals.status.HaveTerminated'),
     value: 'TERMINATED',
     type: 'error',
   },
diff --git a/inlong-website/src/pages/Approvals/index.tsx b/inlong-website/src/pages/Approvals/index.tsx
index 3e6ae88..0591209 100644
--- a/inlong-website/src/pages/Approvals/index.tsx
+++ b/inlong-website/src/pages/Approvals/index.tsx
@@ -24,17 +24,18 @@ import { PageContainer, Container } from '@/components/PageContainer';
 import { DashTotalRevert, DashPending, DashRejected, DashCancelled } from '@/components/Icons';
 import { DashboardCardList } from '@/components/DashboardCard';
 import { useRequest, useHistory, useLocation } from '@/hooks';
+import i18n from '@/i18n';
 import Applies, { activedName as AppliesActivedName } from './Applies';
 import Approvals, { activedName as ApprovalsActivedName } from './Approvals';
 
 const list = [
   {
-    label: '我的申请',
+    label: i18n.t('pages.Approvals.MyApplication'),
     value: AppliesActivedName,
     content: <Applies />,
   },
   {
-    label: '我的审批',
+    label: i18n.t('pages.Approvals.MyApproval'),
     value: ApprovalsActivedName,
     content: <Approvals />,
   },
@@ -42,22 +43,22 @@ const list = [
 
 const dashCardList = [
   {
-    desc: '审批通过',
+    desc: i18n.t('pages.Approvals.status.Ok'),
     dataIndex: 'totalApproveCount',
     icon: <DashTotalRevert />,
   },
   {
-    desc: '已驳回',
+    desc: i18n.t('pages.Approvals.status.Rejected'),
     dataIndex: 'totalRejectCount',
     icon: <DashRejected />,
   },
   {
-    desc: '待审批',
+    desc: i18n.t('pages.Approvals.status.Processing'),
     dataIndex: 'totalProcessingCount',
     icon: <DashPending />,
   },
   {
-    desc: '已取消',
+    desc: i18n.t('pages.Approvals.status.Canceled'),
     dataIndex: 'totalCancelCount',
     icon: <DashCancelled />,
   },
diff --git a/inlong-website/src/pages/ConsumeCreate/Info/config.tsx b/inlong-website/src/pages/ConsumeCreate/Info/config.tsx
index 6c501d5..73e409a 100644
--- a/inlong-website/src/pages/ConsumeCreate/Info/config.tsx
+++ b/inlong-website/src/pages/ConsumeCreate/Info/config.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Divider } from 'antd';
+import i18n from '@/i18n';
 import { genBasicFields } from '@/components/ConsumeHelper';
 
 export const getFormContent = ({
@@ -26,7 +27,7 @@ export const getFormContent = ({
   changedValues,
 }): ReturnType<typeof genBasicFields> => [
   {
-    type: <Divider orientation="left">消费信息</Divider>,
+    type: <Divider orientation="left">{i18n.t('pages.ConsumeCreate.ConsumerInformation')}</Divider>,
   },
   ...genBasicFields(
     [
diff --git a/inlong-website/src/pages/ConsumeCreate/index.tsx b/inlong-website/src/pages/ConsumeCreate/index.tsx
index 2bcebc5..9517651 100644
--- a/inlong-website/src/pages/ConsumeCreate/index.tsx
+++ b/inlong-website/src/pages/ConsumeCreate/index.tsx
@@ -22,11 +22,13 @@ import { Button, Card, Steps, Space, message } from 'antd';
 import { parse } from 'qs';
 import { PageContainer, Container, FooterToolbar } from '@/components/PageContainer';
 import { useHistory, useLocation, useSet } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import Info from './Info';
 
 const { Step } = Steps;
 
 const Create: React.FC = () => {
+  const { t } = useTranslation();
   const history = useHistory();
 
   const location = useLocation();
@@ -43,7 +45,7 @@ const Create: React.FC = () => {
 
   const steps = [
     {
-      title: '消费信息',
+      title: t('pages.ConsumeCreate.ConsumerInformation'),
       content: <Info ref={infoRef} id={id} />,
       useCache: true,
       ref: infoRef,
@@ -69,13 +71,15 @@ const Create: React.FC = () => {
 
   const onSubmit = async current => {
     await onOk(current);
-    message.success('提交成功');
+    message.success(t('basic.OperatingSuccess'));
     history.push('/consume');
   };
 
   const Footer = () => (
     <Space style={{ display: 'flex', justifyContent: 'center' }}>
-      {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
+      {current > 0 && (
+        <Button onClick={() => setCurrent(current - 1)}>{t('pages.ConsumeCreate.Prev')}</Button>
+      )}
       {current !== steps.length - 1 && (
         <Button
           type="primary"
@@ -88,20 +92,23 @@ const Create: React.FC = () => {
             if (!hasOpened(newCurrent)) addOpened(newCurrent);
           }}
         >
-          下一步
+          {t('pages.ConsumeCreate.Next')}
         </Button>
       )}
       {current === steps.length - 1 && (
         <Button type="primary" onClick={() => onSubmit(current)}>
-          提交审批
+          {t('pages.ConsumeCreate.Submit')}
         </Button>
       )}
-      <Button onClick={() => history.push('/consume')}>返回</Button>
+      <Button onClick={() => history.push('/consume')}>{t('pages.ConsumeCreate.Back')}</Button>
     </Space>
   );
 
   return (
-    <PageContainer breadcrumb={[{ name: '新建消费' }]} useDefaultContainer={false}>
+    <PageContainer
+      breadcrumb={[{ name: t('pages.ConsumeCreate.NewConsume') }]}
+      useDefaultContainer={false}
+    >
       <Steps current={current} size="small" style={{ marginBottom: 20, width: 400 }}>
         {steps.map(item => (
           <Step key={item.title} title={item.title} />
diff --git a/inlong-website/src/pages/ConsumeDashboard/config.tsx b/inlong-website/src/pages/ConsumeDashboard/config.tsx
index f9f2bb1..674ea38 100644
--- a/inlong-website/src/pages/ConsumeDashboard/config.tsx
+++ b/inlong-website/src/pages/ConsumeDashboard/config.tsx
@@ -20,6 +20,7 @@
 import React from 'react';
 import { Button } from 'antd';
 import { Link } from 'react-router-dom';
+import i18n from '@/i18n';
 import { DashTotal, DashToBeAssigned, DashPending, DashRejected } from '@/components/Icons';
 import {
   statusList,
@@ -31,22 +32,22 @@ import { timestampFormat } from '@/utils';
 
 export const dashCardList = [
   {
-    desc: '消费总数',
+    desc: i18n.t('pages.ConsumeDashboard.config.Total'),
     dataIndex: 'totalCount',
     icon: <DashTotal />,
   },
   {
-    desc: '待分配',
+    desc: i18n.t('pages.ConsumeDashboard.config.Pending'),
     dataIndex: 'waitingAssignCount',
     icon: <DashToBeAssigned />,
   },
   {
-    desc: '待审批',
+    desc: i18n.t('pages.ConsumeDashboard.config.BeAllocated'),
     dataIndex: 'waitingApproveCount',
     icon: <DashPending />,
   },
   {
-    desc: '已驳回',
+    desc: i18n.t('pages.ConsumeDashboard.config.Reject'),
     dataIndex: 'rejectedCount',
     icon: <DashRejected />,
   },
@@ -57,13 +58,10 @@ export const getFilterFormContent = defaultValues =>
     {
       type: 'inputsearch',
       name: 'keyword',
-      props: {
-        placeholder: '请输入关键词',
-      },
     },
     {
       type: 'select',
-      label: '申请状态',
+      label: i18n.t('pages.ConsumeDashboard.config.ApplicationStatus'),
       name: 'status',
       initialValue: defaultValues.status,
       props: {
@@ -73,7 +71,7 @@ export const getFilterFormContent = defaultValues =>
     },
     {
       type: 'select',
-      label: '运行状态',
+      label: i18n.t('pages.ConsumeDashboard.config.OperatingStatus'),
       name: 'lastConsumerStatus',
       initialValue: defaultValues.lastConsumerStatusList,
       props: {
@@ -105,57 +103,57 @@ export const getColumns = ({ onDelete }) => {
 
   return [
     {
-      title: '消费Topic',
+      title: 'Topic',
       dataIndex: 'topic',
       width: 180,
       render: (text, record) => <Link to={genDetailUrl(record)}>{text}</Link>,
     },
     {
-      title: '消费组',
+      title: i18n.t('pages.ConsumeDashboard.config.ConsumerGroup'),
       dataIndex: 'consumerGroupId',
       width: 180,
     },
     {
-      title: '消息中间件',
+      title: i18n.t('pages.ConsumeDashboard.config.Middleware'),
       dataIndex: 'middlewareType',
       width: 120,
     },
     {
-      title: '消费业务ID',
+      title: i18n.t('pages.ConsumeDashboard.config.ConsumerBusinessID'),
       dataIndex: 'businessIdentifier',
     },
     {
-      title: '最近消费时间',
+      title: i18n.t('pages.ConsumeDashboard.config.RecentConsumptionTime'),
       dataIndex: 'lastConsumerTime',
       render: text => text && timestampFormat(text),
     },
     {
-      title: '申请状态',
+      title: i18n.t('pages.ConsumeDashboard.config.ApplicationStatus'),
       dataIndex: 'status',
       render: text => genStatusTag(text),
       width: 120,
     },
     {
-      title: '运行状态',
+      title: i18n.t('pages.ConsumeDashboard.config.OperatingStatus'),
       dataIndex: 'lastConsumerStatus',
       render: text => text && genLastConsumerStatusTag(text),
       width: 120,
     },
     {
-      title: '操作',
+      title: i18n.t('basic.Operating'),
       dataIndex: 'action',
       render: (text, record) => (
         <>
           <Button type="link">
-            <Link to={genDetailUrl(record)}>详情</Link>
+            <Link to={genDetailUrl(record)}>{i18n.t('basic.Detail')}</Link>
           </Button>
           {[20, 22].includes(record?.status) && (
             <Button type="link">
-              <Link to={genCreateUrl(record)}>修改</Link>
+              <Link to={genCreateUrl(record)}>{i18n.t('basic.Edit')}</Link>
             </Button>
           )}
           <Button type="link" onClick={() => onDelete(record)}>
-            删除
+            {i18n.t('basic.Delete')}
           </Button>
         </>
       ),
diff --git a/inlong-website/src/pages/ConsumeDashboard/index.tsx b/inlong-website/src/pages/ConsumeDashboard/index.tsx
index 84ba6d5..a74fd9e 100644
--- a/inlong-website/src/pages/ConsumeDashboard/index.tsx
+++ b/inlong-website/src/pages/ConsumeDashboard/index.tsx
@@ -23,11 +23,13 @@ import { PageContainer, Container } from '@/components/PageContainer';
 import HighTable from '@/components/HighTable';
 import { DashboardCardList } from '@/components/DashboardCard';
 import { useRequest, useHistory } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import request from '@/utils/request';
 import { defaultSize } from '@/configs/pagination';
 import { dashCardList, getFilterFormContent, getColumns } from './config';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
   const history = useHistory();
   const [options, setOptions] = useState({
     // keyword: '',
@@ -52,14 +54,14 @@ const Comp: React.FC = () => {
 
   const onDelete = async ({ id }) => {
     Modal.confirm({
-      title: '确认删除吗',
+      title: t('basic.DeleteConfirm'),
       onOk: async () => {
         await request({
           url: `/consumption/delete/${id}`,
           method: 'DELETE',
         });
         await getList();
-        message.success('删除成功');
+        message.success(t('basic.DeleteSuccess'));
       },
     });
   };
@@ -102,7 +104,7 @@ const Comp: React.FC = () => {
           <HighTable
             suffix={
               <Button type="primary" onClick={() => history.push('/consume/create')}>
-                新建消费
+                {t('pages.ConsumeDashboard.NewConsume')}
               </Button>
             }
             filterForm={{
diff --git a/inlong-website/src/pages/ConsumeDashboard/status.tsx b/inlong-website/src/pages/ConsumeDashboard/status.tsx
index 864f7b4..83efe86 100644
--- a/inlong-website/src/pages/ConsumeDashboard/status.tsx
+++ b/inlong-website/src/pages/ConsumeDashboard/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 import { ClockCircleFilled } from '@/components/Icons';
 
@@ -30,28 +31,28 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '待分配',
+    label: i18n.t('pages.ConsumeDashboard.config.BeAllocated'),
     value: 10,
     type: 'primary',
     icon: <ClockCircleFilled />,
   },
   {
-    label: '待审批',
+    label: i18n.t('pages.Approvals.status.Processing'),
     value: 11,
     type: 'warning',
   },
   {
-    label: '已驳回',
+    label: i18n.t('pages.Approvals.status.Rejected'),
     value: 20,
     type: 'error',
   },
   {
-    label: '已通过',
+    label: i18n.t('pages.Approvals.status.Ok'),
     value: 21,
     type: 'success',
   },
   {
-    label: '已取消',
+    label: i18n.t('pages.Approvals.status.Canceled'),
     value: 22,
     type: 'error',
   },
@@ -67,22 +68,22 @@ export const statusMap = statusList.reduce(
 
 export const lastConsumerStatusList: StatusProp[] = [
   {
-    label: '正常',
+    label: i18n.t('pages.ConsumeDashboard.status.Normal'),
     value: 0,
     type: 'success',
   },
   {
-    label: '异常',
+    label: i18n.t('pages.ConsumeDashboard.status.Abnormal'),
     value: 1,
     type: 'error',
   },
   {
-    label: '屏蔽',
+    label: i18n.t('pages.ConsumeDashboard.status.Shield'),
     value: 2,
     type: 'warning',
   },
   {
-    label: '暂无',
+    label: i18n.t('pages.ConsumeDashboard.status.NoStatus'),
     value: 3,
     type: 'default',
     icon: <ClockCircleFilled />,
diff --git a/inlong-website/src/pages/ConsumeDetail/Info/config.tsx b/inlong-website/src/pages/ConsumeDetail/Info/config.tsx
index ddd2568..5ed3d96 100644
--- a/inlong-website/src/pages/ConsumeDetail/Info/config.tsx
+++ b/inlong-website/src/pages/ConsumeDetail/Info/config.tsx
@@ -19,12 +19,13 @@
 
 import React from 'react';
 import { genBasicFields } from '@/components/ConsumeHelper';
+import i18n from '@/i18n';
 
 export const getFormContent = ({ editing, initialValues, bussinessData }) =>
   [
     {
       type: 'text',
-      label: '消费组ID',
+      label: i18n.t('pages.ConsumeDetail.Info.config.ConsumerGroupID'),
       name: 'consumerGroupId',
       rules: [{ required: true }],
     },
diff --git a/inlong-website/src/pages/ConsumeDetail/Info/index.tsx b/inlong-website/src/pages/ConsumeDetail/Info/index.tsx
index ecc66e2..85f67f7 100644
--- a/inlong-website/src/pages/ConsumeDetail/Info/index.tsx
+++ b/inlong-website/src/pages/ConsumeDetail/Info/index.tsx
@@ -23,12 +23,14 @@ import { Button, Space, message } from 'antd';
 import FormGenerator, { useForm } from '@/components/FormGenerator';
 import { useRequest, useBoolean } from '@/hooks';
 import request from '@/utils/request';
+import { useTranslation } from 'react-i18next';
 import { CommonInterface } from '../common';
 import { getFormContent } from './config';
 
 type Props = CommonInterface;
 
 const Comp: React.FC<Props> = ({ id, isActive, readonly, extraRef }) => {
+  const { t } = useTranslation();
   const [editing, { setTrue, setFalse }] = useBoolean(false);
 
   const [changedValues, setChangedValues] = useState<Record<string, unknown>>({});
@@ -80,20 +82,25 @@ const Comp: React.FC<Props> = ({ id, isActive, readonly, extraRef }) => {
       data: submitData,
     });
     setFalse();
-    message.success('保存成功');
+    message.success(t('basic.OperatingSuccess'));
+  };
+
+  const onCancel = () => {
+    form.setFieldsValue(data);
+    setFalse();
   };
 
   const Extra = () => {
     return editing ? (
       <Space>
         <Button type="primary" onClick={onSave}>
-          保存
+          {t('basic.Save')}
         </Button>
-        <Button onClick={setFalse}>取消</Button>
+        <Button onClick={onCancel}>{t('basic.Cancel')}</Button>
       </Space>
     ) : (
       <Button type="primary" onClick={setTrue}>
-        编辑
+        {t('basic.Edit')}
       </Button>
     );
   };
diff --git a/inlong-website/src/pages/ConsumeDetail/index.tsx b/inlong-website/src/pages/ConsumeDetail/index.tsx
index 09c35a2..be43114 100644
--- a/inlong-website/src/pages/ConsumeDetail/index.tsx
+++ b/inlong-website/src/pages/ConsumeDetail/index.tsx
@@ -19,11 +19,13 @@
 
 import React, { useState, useMemo, useRef } from 'react';
 import { Tabs } from 'antd';
+import { useTranslation } from 'react-i18next';
 import { PageContainer } from '@/components/PageContainer';
 import { useParams, useRequest } from '@/hooks';
 import Info from './Info';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
   const id = +useParams<{ id: string }>().id;
 
   const { data } = useRequest(`/consumption/get/${id}`, {
@@ -38,18 +40,22 @@ const Comp: React.FC = () => {
   const list = useMemo(
     () => [
       {
-        label: '消费详情',
+        label: t('pages.ConsumeDetail.ConsumptionDetails'),
         value: 'consumeDetail',
         content: Info,
       },
     ],
-    [],
+    [t],
   );
 
   const [actived, setActived] = useState(list[0].value);
 
   return (
-    <PageContainer breadcrumb={[{ name: `消费详情${data?.consumerGroupId}` }]}>
+    <PageContainer
+      breadcrumb={[
+        { name: `${t('pages.ConsumeDetail.ConsumptionDetails')}${data?.consumerGroupId}` },
+      ]}
+    >
       <Tabs
         activeKey={actived}
         onChange={val => setActived(val)}
diff --git a/inlong-website/src/pages/Login/index.tsx b/inlong-website/src/pages/Login/index.tsx
index 3a53037..9f6c003 100644
--- a/inlong-website/src/pages/Login/index.tsx
+++ b/inlong-website/src/pages/Login/index.tsx
@@ -20,25 +20,28 @@
 import React, { useState } from 'react';
 import { Input, Button } from 'antd';
 import { useDispatch, useHistory, useRequest } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import FormGenerator, { useForm } from '@/components/FormGenerator';
 import styles from './index.module.less';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
   const [form] = useForm();
   const dispatch = useDispatch();
   const history = useHistory();
+
   const config = [
     {
-      type: <Input placeholder="请输入用户名" />,
+      type: <Input placeholder={t('pages.Login.PleaseEnterUserName')} />,
       name: 'username',
-      rules: [{ required: true, message: '用户名不能为空' }],
+      rules: [{ required: true, message: t('pages.Login.UsernameCanNotBeEmpty') }],
     },
     {
-      type: <Input.Password placeholder="请输入密码" />,
+      type: <Input.Password placeholder={t('pages.Login.PleaseEnterYourPassword')} />,
       name: 'password',
       rules: [
-        { required: true, message: '密码不能为空' },
-        { pattern: /^[a-z_\d]+$/, message: '仅限小写字⺟、数字和下划线' },
+        { required: true, message: t('pages.Login.PasswordCanNotBeBlank') },
+        { pattern: /^[a-z_\d]+$/, message: t('pages.Login.OnlyLowercaseWords') },
       ],
     },
   ];
@@ -85,9 +88,9 @@ const Comp: React.FC = () => {
           />
         </div>
         <div className={styles['button-wrap']}>
-          <span className={styles['button-desc']}>请联系管理员重置</span>
+          <span className={styles['button-desc']}>{t('pages.Login.Reset')}</span>
           <Button type="primary" onClick={login}>
-            登录
+            {t('pages.Login.LogIn')}
           </Button>
         </div>
       </div>
diff --git a/inlong-website/src/pages/UserManagement/DetailModal.tsx b/inlong-website/src/pages/UserManagement/DetailModal.tsx
index 622f24d..22bac86 100644
--- a/inlong-website/src/pages/UserManagement/DetailModal.tsx
+++ b/inlong-website/src/pages/UserManagement/DetailModal.tsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import { Modal, message } from 'antd';
 import { ModalProps } from 'antd/es/modal';
+import i18n from '@/i18n';
 import FormGenerator, { useForm } from '@/components/FormGenerator';
 import { useUpdateEffect, useRequest } from '@/hooks';
 import request from '@/utils/request';
@@ -30,18 +31,18 @@ export interface Props extends ModalProps {
 const content = [
   {
     type: 'radio',
-    label: '帐号类型',
+    label: i18n.t('pages.UserManagement.config.AccountRole'),
     name: 'type',
     initialValue: 1,
     rules: [{ required: true }],
     props: {
       options: [
         {
-          label: '普通用户',
+          label: i18n.t('pages.UserManagement.config.GeneralUser'),
           value: 1,
         },
         {
-          label: '系统管理员',
+          label: i18n.t('pages.UserManagement.config.Admin'),
           value: 0,
         },
       ],
@@ -49,21 +50,21 @@ const content = [
   },
   {
     type: 'input',
-    label: '用户名称',
+    label: i18n.t('pages.UserManagement.config.UserName'),
     name: 'username',
     rules: [{ required: true }],
   },
   {
     type: 'password',
-    label: '用户密码',
+    label: i18n.t('pages.UserManagement.DetailModal.UserPassword'),
     name: 'password',
     rules: [{ required: true }],
   },
   {
     type: 'inputnumber',
-    label: '有效时长',
+    label: i18n.t('pages.UserManagement.DetailModal.EffectiveTime'),
     name: 'validDays',
-    suffix: '天',
+    suffix: i18n.t('pages.UserManagement.DetailModal.Day'),
     rules: [{ required: true }],
     props: {
       min: 1,
@@ -98,7 +99,7 @@ const Comp: React.FC<Props> = ({ id, ...modalProps }) => {
       data: values,
     });
     await modalProps?.onOk(values);
-    message.success('保存成功');
+    message.success(i18n.t('basic.OperatingSuccess'));
   };
 
   useUpdateEffect(() => {
@@ -109,7 +110,11 @@ const Comp: React.FC<Props> = ({ id, ...modalProps }) => {
   }, [modalProps.visible]);
 
   return (
-    <Modal {...modalProps} title={`${id ? '编辑' : '新建'}用户`} onOk={onOk}>
+    <Modal
+      {...modalProps}
+      title={id ? i18n.t('basic.Edit') : i18n.t('pages.UserManagement.DetailModal.New')}
+      onOk={onOk}
+    >
       <FormGenerator
         content={id ? content.filter(item => item.name !== 'password') : content}
         form={form}
diff --git a/inlong-website/src/pages/UserManagement/config.tsx b/inlong-website/src/pages/UserManagement/config.tsx
index 3a3bf15..769279b 100644
--- a/inlong-website/src/pages/UserManagement/config.tsx
+++ b/inlong-website/src/pages/UserManagement/config.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { Button } from 'antd';
+import i18n from '@/i18n';
 import { genStatusTag } from './status';
 import { timestampFormat } from '@/utils';
 
@@ -26,47 +27,47 @@ export const getFilterFormContent = () => [
   {
     type: 'inputsearch',
     name: 'keyword',
-    props: {
-      placeholder: '请输入关键词',
-    },
   },
 ];
 
 export const getColumns = ({ onEdit, onDelete }) => {
   return [
     {
-      title: '用户名称',
+      title: i18n.t('pages.UserManagement.config.UserName'),
       dataIndex: 'name',
     },
     {
-      title: '帐号角色',
+      title: i18n.t('pages.UserManagement.config.AccountRole'),
       dataIndex: 'accountType',
-      render: text => (text === 0 ? '系统管理员' : '普通用户'),
+      render: text =>
+        text === 0
+          ? i18n.t('pages.UserManagement.config.Admin')
+          : i18n.t('pages.UserManagement.config.GeneralUser'),
     },
     {
-      title: '创建人',
+      title: i18n.t('pages.UserManagement.config.Creater'),
       dataIndex: 'createBy',
     },
     {
-      title: '创建时间',
+      title: i18n.t('pages.UserManagement.config.CreateTime'),
       dataIndex: 'createTime',
       render: text => text && timestampFormat(text),
     },
     {
-      title: '状态',
+      title: i18n.t('basic.Status'),
       dataIndex: 'status',
       render: text => genStatusTag(text),
     },
     {
-      title: '操作',
+      title: i18n.t('basic.Operating'),
       dataIndex: 'action',
       render: (text, record) => (
         <>
           <Button type="link" onClick={() => onEdit(record)}>
-            编辑
+            {i18n.t('basic.Edit')}
           </Button>
           <Button type="link" onClick={() => onDelete(record)}>
-            删除
+            {i18n.t('basic.Delete')}
           </Button>
         </>
       ),
diff --git a/inlong-website/src/pages/UserManagement/index.tsx b/inlong-website/src/pages/UserManagement/index.tsx
index 9999ff6..b3cea41 100644
--- a/inlong-website/src/pages/UserManagement/index.tsx
+++ b/inlong-website/src/pages/UserManagement/index.tsx
@@ -22,12 +22,15 @@ import { Button, Card, Modal, message } from 'antd';
 import { PageContainer, Container } from '@/components/PageContainer';
 import HighTable from '@/components/HighTable';
 import { useRequest } from '@/hooks';
+import { useTranslation } from 'react-i18next';
 import request from '@/utils/request';
 import { defaultSize } from '@/configs/pagination';
 import DataSourcesCreateModal from './DetailModal';
 import { getFilterFormContent, getColumns } from './config';
 
 const Comp: React.FC = () => {
+  const { t } = useTranslation();
+
   const [options, setOptions] = useState({
     // keyword: '',
     pageSize: defaultSize,
@@ -57,7 +60,7 @@ const Comp: React.FC = () => {
 
   const onDelete = async ({ id }) => {
     Modal.confirm({
-      title: '确认删除吗',
+      title: t('basic.DeleteConfirm'),
       onOk: async () => {
         await request({
           url: '/user/delete',
@@ -67,7 +70,7 @@ const Comp: React.FC = () => {
           },
         });
         await getList();
-        message.success('删除成功');
+        message.success(t('basic.DeleteSuccess'));
       },
     });
   };
@@ -101,7 +104,7 @@ const Comp: React.FC = () => {
           <HighTable
             suffix={
               <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
-                新建帐号
+                {t('pages.UserManagement.CreateAccount')}
               </Button>
             }
             filterForm={{
diff --git a/inlong-website/src/pages/UserManagement/status.tsx b/inlong-website/src/pages/UserManagement/status.tsx
index 1c45e39..176cc8d 100644
--- a/inlong-website/src/pages/UserManagement/status.tsx
+++ b/inlong-website/src/pages/UserManagement/status.tsx
@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import i18n from '@/i18n';
 import StatusTag, { StatusTagProps } from '@/components/StatusTag';
 
 type StatusProp = {
@@ -29,12 +30,12 @@ type StatusProp = {
 
 export const statusList: StatusProp[] = [
   {
-    label: '正常',
+    label: i18n.t('pages.UserManagement.status.Normal'),
     value: 'valid',
     type: 'success',
   },
   {
-    label: '失效',
+    label: i18n.t('pages.UserManagement.status.Fail'),
     value: 'invalid',
     type: 'error',
   },
diff --git a/inlong-website/src/setupProxy.js b/inlong-website/src/setupProxy.js
index 9593363..f69ddaa 100644
--- a/inlong-website/src/setupProxy.js
+++ b/inlong-website/src/setupProxy.js
@@ -20,11 +20,11 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-const target = 'http://127.0.0.1';
+const target = 'http://10.40.24.52:3000';
 
 module.exports = function (app) {
   app.use(
-    createProxyMiddleware('/api', {
+    createProxyMiddleware('/api/inlong/manager', {
       target,
       changeOrigin: true,
       secure: false,