chore: tweak i18n (#90)

* chore: remove react-intl * feat: add i18n keys
macacajs · Nov 28, 2022 · 3d6f80e · 3d6f80e
1 parent 1d321a2
commit 3d6f80e
Show file tree

Hide file tree

Showing 26 changed files with 165 additions and 280 deletions.
diff --git a/i18n.config.js b/i18n.config.js
@@ -0,0 +1,12 @@
+'use strict';
+
+const path = require('path');
+
+module.exports = {
+  srcDirs: [
+    'view/src/**/*{.js,.jsx,.ts,.tsx}',
+  ],
+  distDir: path.resolve(__dirname, 'view/src/locale'),
+  tokenName: '__i18n',
+  debug: true,
+};
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "autod-egg": "^1.0.0",
     "concurrently": "4.0.1",
     "debug": "^3.1.0",
+    "easy-i18n-cli": "1",
     "egg-bin": "^4.3.5",
     "egg-mock": "^3.14.0",
     "eslint": "^4.11.0",
@@ -45,6 +46,7 @@
     "cov": "npm run db:prepare:test && egg-bin cov",
     "lint": "eslint . --fix",
     "autod": "autod",
+    "translate": "easy-i18n-cli -c ./i18n.config.js",
     "build:docker": "docker build --no-cache --pull -t macacajs/reliable-web .",
     "db:prepare:test": "NODE_ENV=test npm run db:migrate:undo:all && NODE_ENV=test npm run db:migrate",
     "db:status": "sequelize db:migrate:status",

diff --git a/view/.eslintignore b/view/.eslintignore
@@ -3,3 +3,4 @@
 **/assets
 **/coverage
 **/reports
+view/src/locale/en-US.js
diff --git a/view/package.json b/view/package.json
@@ -55,7 +55,6 @@
     "react-dom": "^16.6.0",
     "react-ga": "^2.7.0",
     "react-github-button": "0.1.11",
-    "react-intl": "^2.4.0",
     "react-load-script": "^0.0.6",
     "react-router-dom": "^4.2.2",
     "style-loader": "^0.21.0",

diff --git a/view/src/.eslintrc.js b/view/src/.eslintrc.js
@@ -18,6 +18,9 @@ module.exports = {
     },
   },
   plugins: ['babel', 'react'],
+  globals: {
+    __i18n: true,
+  },
   rules: {
     camelcase: 0,
     'no-restricted-syntax': 0,

diff --git a/view/src/components/BuildsTable.js b/view/src/components/BuildsTable.js
@@ -8,7 +8,6 @@ import {
   SettingOutlined,
   RightCircleOutlined,
 } from '@ant-design/icons';
-import { FormattedMessage } from 'react-intl';
 
 import {
   getUuid,
@@ -26,7 +25,7 @@ export default class BuildsTable extends React.Component {
   }
 
   columns = [{
-    title: <FormattedMessage id="builds.jobName" />,
+    title: __i18n('项目名'),
     dataIndex: 'jobName',
     render: (text, record) => {
       return (
@@ -36,7 +35,7 @@ export default class BuildsTable extends React.Component {
       );
     },
   }, {
-    title: <FormattedMessage id="builds.buildLog" />,
+    title: __i18n('运行日志'),
     width: 100,
     render: (text, record) => {
       return (record.buildLogUrl
@@ -45,17 +44,17 @@ export default class BuildsTable extends React.Component {
             href={record.buildLogUrl}
             target="_blank"
           >
-            <FormattedMessage id="builds.buildLog" />
+            {__i18n('运行日志')}
           </a>
         )
         : (
           <Link to={{ pathname: '/buildlog', search: `?jobName=${record.jobName}&buildNumber=${record.buildNumber}` }}>
-            <FormattedMessage id="builds.buildLog" />
+            {__i18n('运行日志')}
           </Link>
         ));
     },
   }, {
-    title: <FormattedMessage id="builds.buildNumber" />,
+    title: __i18n('构建号'),
     dataIndex: 'buildNumber',
     width: 200,
     render: (value, record) => {
@@ -80,10 +79,10 @@ export default class BuildsTable extends React.Component {
       );
     },
   }, {
-    title: <FormattedMessage id="builds.platform" />,
+    title: __i18n('平台'),
     dataIndex: 'platform',
   }, {
-    title: <FormattedMessage id="builds.buildEndTime" />,
+    title: __i18n('完成时间'),
     dataIndex: 'buildEndTime',
     render: (text, record) => {
       return (
@@ -93,7 +92,7 @@ export default class BuildsTable extends React.Component {
       );
     },
   }, {
-    title: <FormattedMessage id="buildinfo.pkg.gitBranch" />,
+    title: __i18n('代码分支'),
     dataIndex: 'gitBranch',
     width: 240,
     render: (text, record) => {
@@ -104,7 +103,7 @@ export default class BuildsTable extends React.Component {
       );
     },
   }, {
-    title: <FormattedMessage id="buildinfo.pkg.committer" />,
+    title: __i18n('提交人'),
     dataIndex: 'committer',
     width: 120,
     render: (text, record) => {
@@ -115,7 +114,7 @@ export default class BuildsTable extends React.Component {
       );
     },
   }, {
-    title: <FormattedMessage id="builds.detailInfo" />,
+    title: __i18n('详情'),
     align: 'center',
     width: 80,
     render: (value, record) => {

diff --git a/view/src/components/BuildsTabs.js b/view/src/components/BuildsTabs.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tabs } from 'antd';
 import { withRouter } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
+
 import safeGet from 'lodash/get';
 
 import request from '../util/request';
@@ -144,7 +144,7 @@ class BuildsTabs extends React.Component {
           onTabClick={this.handleTabClick}
           style={{ height: 'auto' }}
         >
-          <TabPane tab={<><FormattedMessage id="sidebar.allbuilds" /> ({allJobName.length})</>} key="">
+          <TabPane tab={<>{__i18n('所有构建')} ({allJobName.length})</>} key="">
           </TabPane>
           { listItems }
         </Tabs>

diff --git a/view/src/components/DingdingSetting.js b/view/src/components/DingdingSetting.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import safeGet from 'lodash/get';
 import { uniqBy } from 'lodash';
-import { FormattedMessage } from 'react-intl';
+
 import {
   Form,
   Spin,
@@ -112,7 +112,7 @@ function DingdingSetting() {
                               noStyle
                             >
                               <Select style={{ width: 88 }}>
-                                <Option value="build"><FormattedMessage id="setting.notification.build" /></Option>
+                                <Option value="build">{__i18n('构建')}</Option>
                               </Select>
                             </Form.Item>
                       )}
@@ -141,7 +141,7 @@ function DingdingSetting() {
                     block
                     icon={<PlusOutlined />}
                   >
-                    <FormattedMessage id="setting.addDingMessage" />
+                    {__i18n('添加通知')}
                   </Button>
                 </Form.Item>
               </>
@@ -154,7 +154,7 @@ function DingdingSetting() {
             type="primary"
             style={{ width: '100%' }}
           >
-            <FormattedMessage id="setting.submit" />
+            {__i18n('更新设置')}
           </Button>
         </Form.Item>
       </Form>

diff --git a/view/src/components/ExtraTable.js b/view/src/components/ExtraTable.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import { Table } from 'antd';
-import { FormattedMessage } from 'react-intl';
 
 import { getUuid } from '../util/index';
 
 const columns = [{
-  title: <FormattedMessage id="buildinfo.extra.extraName" />,
+  title: __i18n('项'),
   dataIndex: 'extraName',
   width: 200,
   render: value => { return <span className="itemName">{value}</span>; },
 }, {
-  title: <FormattedMessage id="buildinfo.extra.extraContent" />,
+  title: __i18n('内容'),
   dataIndex: 'extraContent',
   render: value => { return <pre>{JSON.stringify(value, null, 2)}</pre>; },
 }];

diff --git a/view/src/components/Header.js b/view/src/components/Header.js
@@ -16,7 +16,7 @@ import {
   LogoutOutlined,
 } from '@ant-design/icons';
 import safeGet from 'lodash/get';
-import { FormattedMessage } from 'react-intl';
+
 import GitHubButton from 'react-github-button';
 
 import 'react-github-button/assets/style.css';
@@ -82,15 +82,15 @@ function ContentHeader(props) {
             repo="reliable"
           />
         </span>
-        <Tooltip title={<FormattedMessage id="header.document" />}>
+        <Tooltip title={__i18n('文档')}>
           <a
             target="_blank"
             href={siteConfig.links.document}
           >
             <BookOutlined />
           </a>
         </Tooltip>
-        <Tooltip title={<FormattedMessage id="header.issues" />}>
+        <Tooltip title={__i18n('问题反馈')}>
           <a
             target="_blank"
             href={siteConfig.links.issues}

diff --git a/view/src/components/OneBuildTabs.js b/view/src/components/OneBuildTabs.js
@@ -2,7 +2,6 @@ import React from 'react';
 import moment from 'moment';
 import safeGet from 'lodash/get';
 import { Spin, Tabs } from 'antd';
-import { FormattedMessage } from 'react-intl';
 
 import PkgTable from './PkgTable';
 import TestTable from './TestTable';
@@ -103,20 +102,20 @@ export default class OneBuildTabs extends React.Component {
           style={{ height: 'auto' }}
           onChange={this.onTabChange}
         >
-          <TabPane tab={<FormattedMessage id="buildinfo.pkgTab" />} key="pkginfo">
+          <TabPane tab={__i18n('包信息')} key="pkginfo">
             <PkgTable
               fetchOneBuild={this.props.fetchOneBuild}
               data={getPkgInfo.packages}
               platform={getPkgInfo.platform}
             />
           </TabPane>
-          <TabPane tab={<FormattedMessage id="buildinfo.testTab" />} key="test">
+          <TabPane tab={__i18n('测试结果')} key="test">
             <TestTable data={this.getTestInfo()} />
           </TabPane>
-          <TabPane tab={<FormattedMessage id="buildinfo.extraTab" />} key="extrainfo">
+          <TabPane tab={__i18n('扩展信息')} key="extrainfo">
             <ExtraTable data={this.getExtraInfo()} />
           </TabPane>
-          <TabPane tab={<FormattedMessage id="buildinfo.filesTab" />} key="fileinfo">
+          <TabPane tab={__i18n('产物')} key="fileinfo">
             <FileTable data={this.getFileInfo()} />
           </TabPane>
         </Tabs>

diff --git a/view/src/components/PkgTable.js b/view/src/components/PkgTable.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import QRCode from 'qrcode-react';
-import { FormattedMessage } from 'react-intl';
 
 import {
   Table,
@@ -32,16 +31,16 @@ export default class PkgTable extends React.Component {
 
   getColumns = () => {
     let columns = [{
-      title: <FormattedMessage id="buildinfo.pkg.version" />,
+      title: __i18n('版本号'),
       dataIndex: 'version',
       width: 100,
     }, {
-      title: <FormattedMessage id="buildinfo.pkg.type" />,
+      title: __i18n('类型'),
       dataIndex: 'type',
       width: 160,
     }];
     columns = columns.concat([{
-      title: <FormattedMessage id="buildinfo.pkg.download" />,
+      title: __i18n('下载'),
       dataIndex: 'download',
       width: 160,
       render: (value, record) => {
@@ -52,14 +51,14 @@ export default class PkgTable extends React.Component {
               onClick={this.showQrCodeModal.bind(this, record)}
             />
             <a href={value} style={{ marginLeft: '8px' }} target="_blank">
-              <FormattedMessage id="buildinfo.pkg.download" />
+              {__i18n('下载')}
             </a>
           </span>
         );
       },
     }]);
     columns = columns.concat([{
-      title: <FormattedMessage id="buildinfo.pkg.gitBranch" />,
+      title: __i18n('代码分支'),
       dataIndex: 'gitBranch',
       width: 300,
       render: (value, record) => {
@@ -68,7 +67,7 @@ export default class PkgTable extends React.Component {
         );
       },
     }, {
-      title: <FormattedMessage id="buildinfo.pkg.gitInfo" />,
+      title: __i18n('提交信息'),
       width: 240,
       dataIndex: 'gitCommit',
       render: (value, record) => {

diff --git a/view/src/components/SiderBar.js b/view/src/components/SiderBar.js
@@ -9,7 +9,6 @@ import {
   LineChartOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { FormattedMessage } from 'react-intl';
 
 const { Sider } = Layout;
 
@@ -46,15 +45,15 @@ export default class SiderBar extends React.Component {
             <Link to="/">
               <FlagOutlined />
               <span>
-                <FormattedMessage id="sidebar.buildinfo" />
+                {__i18n('构建信息')}
               </span>
             </Link>
           </Menu.Item>
           <Menu.Item key="/insight">
             <Link to="/insight">
               <span>
                 <LineChartOutlined />
-                <FormattedMessage id="sidebar.insight" />
+                {__i18n('洞察')}
               </span>
             </Link>
           </Menu.Item>
@@ -63,7 +62,7 @@ export default class SiderBar extends React.Component {
               <Link to="/setting">
                 <SettingOutlined />
                 <span>
-                  <FormattedMessage id="sidebar.setting" />
+                  {__i18n('设置')}
                 </span>
               </Link>
             </Menu.Item>

diff --git a/view/src/components/SiteSetting.js b/view/src/components/SiteSetting.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import safeGet from 'lodash/get';
-import { FormattedMessage } from 'react-intl';
+
 import {
   Form,
   Spin,
@@ -83,7 +83,7 @@ function SiteSetting() {
             htmlType="submit"
             onClick={updateSite}
           >
-            <FormattedMessage id="setting.submit" />
+            {__i18n('更新设置')}
           </Button>
         </Form.Item>
       </Spin>