i18n (#445)

ui/must.cjs

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2023 OceanBase
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const path = require('path');
+const pkg = require('./package.json');
+
+const baseDir = path.join(__dirname, '..');
+
+const localePath = path.join(baseDir, 'ui/src/i18n');
+
+const outputPath = path.join(localePath, './strings');
+const exclude = 'src/main';
+
+
+function matchText(text, path) {
+  const isConsoleLog = /^console\.log\(/gi.test(path?.parentPath?.toString());
+  let isFormattedMessage = false;
+  try {
+    isFormattedMessage = /^\<FormattedMessage/g.test(
+      path.parentPath.parentPath.parentPath.parentPath.parentPath.toString(),
+    );
+  } catch (e) {}
+  return (
+    /[\u{4E00}-\u{9FFF}]+(?![\u3000-\u303F\uFF01-\uFF5E])/gimu.test(text) &&
+    !isConsoleLog
+  );
+}
+
+const config = {
+  name: pkg.name,
+  entry: 'src',
+  output: outputPath,
+  sep: '.',
+  exclude: (path) => {
+    return (
+      path.includes('src/.umi') ||
+      path.includes('src/locales') ||
+      (!!exclude && path.includes(exclude))
+    );
+  },
+  sourceLang: 'zh-CN',
+  targetLang: 'en-US',
+  clearLangs: ['zh-CN', 'en-US'],
+  matchFunc: matchText,
+  injectContent: {
+    import: "import { intl } from '@/utils/intl';\n",
+    method: `intl.formatMessage({id: '$key$' })`,
+    withDefaultMessage: true,
+    defaultMessageKey: 'defaultMessage',
+  },
+};
+
+module.exports = config;

ui/package.json

@@ -8,6 +8,8 @@
     "gen:api": "openapi-generator-cli generate -i ../internal/dashboard/generated/swagger/swagger.yaml -g typescript-axios -c .openapi_config.yaml -o ./src/api/generated",
     "postinstall": "max setup",
     "lint": "eslint src",
+    "oic:clear": "oic --configPath ./must.cjs --clear",
+    "oic:extract": "oic --configPath ./must.cjs --extract --translate",
     "prepare": "cd .. && husky ui/.husky",
     "setup": "max setup",
     "start": "npm run dev"
@@ -30,6 +32,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
+    "@oceanbase-odc/ob-intl-cli": "^2.0.9",
     "@types/lodash": "^4.14.197",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",

ui/src/api/index.ts

@@ -1,3 +1,4 @@
+import { intl } from '@/utils/intl';
 import { message } from 'antd';
 import globalAxios, { AxiosInstance, AxiosPromise } from 'axios';
 import {
@@ -18,7 +19,12 @@ globalAxios.interceptors.response.use(
   },
   (error) => {
     if (error?.response?.status === 401) {
-      message.warning('登陆已过期');
+      message.warning(
+        intl.formatMessage({
+          id: 'src.api.2CA64FC6',
+          defaultMessage: '登陆已过期',
+        }),
+      );
       location.href = '/#/login';
     } else {
       message.error(error?.response?.data?.message || error.message);

ui/src/components/AlertDrawer/index.tsx

@@ -1,3 +1,4 @@
+import { intl } from '@/utils/intl';
 import type { DrawerProps } from 'antd';
 import { Button, Drawer, Space } from 'antd';
 
@@ -27,9 +28,17 @@ export default function AlertDrawer({
         ) : (
           <Space>
             <Button onClick={onSubmit} type="primary">
-              提交
+              {intl.formatMessage({
+                id: 'src.components.AlertDrawer.95C6A631',
+                defaultMessage: '提交',
+              })}
+            </Button>
+            <Button onClick={onClose}>
+              {intl.formatMessage({
+                id: 'src.components.AlertDrawer.9B7CD984',
+                defaultMessage: '取消',
+              })}
             </Button>
-            <Button onClick={onClose}>取消</Button>
           </Space>
         )}
       </div>

ui/src/components/InputLabelComp/index.tsx

@@ -1,3 +1,4 @@
+import { intl } from '@/utils/intl';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Input, Popconfirm, Row, Space } from 'antd';
 
@@ -58,15 +59,21 @@ export default function InputLabelComp(props: InputLabelCompPorps) {
                 value={label[defaulLabelName] as string}
                 onBlur={onBlur}
                 onChange={(e) => labelNameInput(e.target.value, index)}
-                placeholder="请输入标签名"
+                placeholder={intl.formatMessage({
+                  id: 'src.components.InputLabelComp.36DDAD02',
+                  defaultMessage: '请输入标签名',
+                })}
               />
             </Col>
             <Col span={10}>
               <Input
                 value={label.value as string}
                 onBlur={onBlur}
                 onChange={(e) => labelValueInput(e.target.value, index)}
-                placeholder="请输入标签值"
+                placeholder={intl.formatMessage({
+                  id: 'src.components.InputLabelComp.DC297030',
+                  defaultMessage: '请输入标签值',
+                })}
               />
             </Col>
             {regex && (
@@ -75,18 +82,34 @@ export default function InputLabelComp(props: InputLabelCompPorps) {
                   checked={label.isRegex as boolean}
                   onChange={(e) => regChange(e.target.checked, index)}
                 />
-                <span style={{ marginLeft: 8 }}>正则</span>
+
+                <span style={{ marginLeft: 8 }}>
+                  {intl.formatMessage({
+                    id: 'src.components.InputLabelComp.1617B8B8',
+                    defaultMessage: '正则',
+                  })}
+                </span>
               </Col>
             )}
+
             {labels.length > 1 && (
               <Popconfirm
                 placement="left"
-                title="确定要删除该配置项吗？"
+                title={intl.formatMessage({
+                  id: 'src.components.InputLabelComp.F6592C30',
+                  defaultMessage: '确定要删除该配置项吗？',
+                })}
                 onConfirm={() => {
                   remove(index);
                 }}
-                okText="删除"
-                cancelText="取消"
+                okText={intl.formatMessage({
+                  id: 'src.components.InputLabelComp.C1E48711',
+                  defaultMessage: '删除',
+                })}
+                cancelText={intl.formatMessage({
+                  id: 'src.components.InputLabelComp.D089EBDE',
+                  defaultMessage: '取消',
+                })}
                 okButtonProps={{
                   danger: true,
                   ghost: true,
@@ -109,7 +132,10 @@ export default function InputLabelComp(props: InputLabelCompPorps) {
               style={{ color: 'rgba(0,0,0,0.65)' }}
             >
               <PlusOutlined />
-              添加
+              {intl.formatMessage({
+                id: 'src.components.InputLabelComp.6C88A39D',
+                defaultMessage: '添加',
+              })}
             </Button>
           </Col>
         </Row>

ui/src/components/InputTimeComp/index.tsx

@@ -1,3 +1,4 @@
+import { intl } from '@/utils/intl';
 import { InputNumber, Select } from 'antd';
 import { useState } from 'react';
 
@@ -10,15 +11,24 @@ type UnitType = 'second' | 'minute' | 'hour';
 
 const SELECT_OPTIONS = [
   {
-    label: '秒',
+    label: intl.formatMessage({
+      id: 'src.components.InputTimeComp.5C00F6E6',
+      defaultMessage: '秒',
+    }),
     value: 'second',
   },
   {
-    label: '分钟',
+    label: intl.formatMessage({
+      id: 'src.components.InputTimeComp.7D0C8989',
+      defaultMessage: '分钟',
+    }),
     value: 'minute',
   },
   {
-    label: '小时',
+    label: intl.formatMessage({
+      id: 'src.components.InputTimeComp.C34DD7B4',
+      defaultMessage: '小时',
+    }),
     value: 'hour',
   },
 ];