Uniform internationalization code format (#1122)

* International Development

* regist International Development

* regist International Development

* regist International Development

* Uniform internationalization code format
word correction

* Uniform internationalization code format
word correction

* word correction
Co-authored-by: Peter <peter.zheng.external@tkelevator.com>
Co-authored-by: aiwenmo <32723967+aiwenmo@users.noreply.github.com>

dlink-web/src/components/Footer/index.tsx

@@ -23,11 +23,9 @@ import {GithubOutlined} from '@ant-design/icons';
 import {DefaultFooter} from '@ant-design/pro-layout';
 
 export default () => {
-  const intl = useIntl();
-  const defaultMessage = intl.formatMessage({
-    id: 'app.copyright.produced',
-    defaultMessage: 'Dinky',
-  });
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const defaultMessage = l('app.copyright.produced', 'Dinky');
 
   return (
     <DefaultFooter

dlink-web/src/components/Studio/StudioConsole/index.tsx

@@ -41,7 +41,8 @@ const {TabPane} = Tabs;
 
 const StudioConsole = (props: any) => {
 
-  const intl = useIntl();
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
 
   const {height, current} = props;
   let consoleHeight = (height - 37.6);
@@ -59,7 +60,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <CodeOutlined/>
-            {intl.formatMessage({id: 'pages.datastadio.lable.info', defaultMessage: '信息',})}
+            {l('pages.datastudio.label.info','信息')}
         </span>
         }
         key="StudioMsg"
@@ -72,7 +73,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <TableOutlined/>
-            {intl.formatMessage({id: 'pages.datastadio.lable.result', defaultMessage: '结果',})}
+            {l('pages.datastudio.label.result','结果')}
         </span>
         }
         key="StudioTable"
@@ -98,7 +99,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <ApartmentOutlined/>
-            {intl.formatMessage({id: 'pages.datastadio.lable.bloodsource', defaultMessage: '血缘',})}
+            {l('pages.datastudio.label.lineage','血缘')}
         </span>
         }
         key="StudioConsanguinity"
@@ -111,7 +112,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <DesktopOutlined/>
-            {intl.formatMessage({id: 'pages.datastadio.lable.process', defaultMessage: '进程',})}
+            {l('pages.datastudio.label.process','进程')}
         </span>
         }
         key="StudioProcess"
@@ -124,7 +125,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <CalendarOutlined/>
-            {intl.formatMessage({id: 'pages.datastadio.lable.history', defaultMessage: '历史',})}
+            {l('pages.datastudio.label.history','历史')}
         </span>
         }
         key="StudioHistory"
@@ -137,7 +138,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <FunctionOutlined/>
-            {intl.formatMessage({id: 'pages.datastadio.lable.function', defaultMessage: '函数',})}
+            {l('pages.datastudio.label.function','函数')}
         </span>
         }
         key="StudioFX"

dlink-web/src/components/Studio/StudioHome/index.tsx

@@ -27,15 +27,16 @@ import {VERSION} from "@/components/Common/Version";
 const {Title, Paragraph, Text} = Typography;
 
 const StudioHome = (props: any) => {
-  const intl = useIntl();
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
   const {toolHeight} = props;
 
   return (
     <Scrollbars style={{height: toolHeight}}>
       <Typography style={{padding:'15px'}}>
-        <Title level={4}>{intl.formatMessage({id: 'pages.datastadio.lable.welcomeuse', defaultMessage: '欢迎使用 Dinky v',})}{VERSION}</Title>
+        <Title level={4}>{l('pages.datastudio.label.welcomeuse','欢迎使用 Dinky v')}{VERSION}</Title>
         <Paragraph>
-          <blockquote>{intl.formatMessage({id: 'pages.datastadio.lable.dinkydescribe', defaultMessage: '实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。',})}</blockquote>
+          <blockquote>{l('pages.datastudio.label.dinkydescribe','实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。')}</blockquote>
         </Paragraph>
         <Title level={5}>快捷键</Title>
         <Paragraph>

dlink-web/src/components/Studio/StudioLeftTool/index.tsx

@@ -42,33 +42,34 @@ import StudioFragment from "@/components/Studio/StudioLeftTool/StudioFragment";
 const {TabPane} = Tabs;
 
 const StudioLeftTool = (props: any) => {
-  const intl = useIntl();
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
   const {toolHeight} = props;
 
   return (
     <Tabs defaultActiveKey="1" size="small" tabPosition="left" style={{height: toolHeight}}>
-      <TabPane tab={<span><BarsOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.directory', defaultMessage: '目录',})}</span>} key="StudioTree">
+      <TabPane tab={<span><BarsOutlined/> {l('pages.datastudio.label.directory','目录')}</span>} key="StudioTree">
         <StudioTree/>
       </TabPane>
-      <TabPane tab={<span><InsertRowAboveOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.structure', defaultMessage: '结构',})}</span>} key="MetaStore">
+      <TabPane tab={<span><InsertRowAboveOutlined/> {l('pages.datastudio.label.structure','结构')}</span>} key="MetaStore">
         <StudioMetaStore/>
       </TabPane>
-      <TabPane tab={<span><MessageOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.session', defaultMessage: '会话',})}</span>} key="Connectors">
+      <TabPane tab={<span><MessageOutlined/> {l('pages.datastudio.label.session','会话')}</span>} key="Connectors">
         <StudioConnector/>
       </TabPane>
-      <TabPane tab={<span><ClusterOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.cluster', defaultMessage: '集群',})}</span>} key="Cluster">
+      <TabPane tab={<span><ClusterOutlined/> {l('pages.datastudio.label.cluster','集群')}</span>} key="Cluster">
         <StudioCluster/>
       </TabPane>
-      <TabPane tab={<span><DatabaseOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.datasource', defaultMessage: '数据源',})}</span>} key="DataSource">
+      <TabPane tab={<span><DatabaseOutlined/> {l('pages.datastudio.label.datasource','数据源')}</span>} key="DataSource">
         <StudioDataBase/>
       </TabPane>
-      <TabPane tab={<span><AppstoreOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.mate', defaultMessage: '元数据',})}</span>} key="MetaData">
+      <TabPane tab={<span><AppstoreOutlined/> {l('pages.datastudio.label.meta','元数据')}</span>} key="MetaData">
         <StudioMetaData/>
       </TabPane>
-      <TabPane tab={<span><CloudOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.globalvariable', defaultMessage: '全局变量',})}</span>} key="fragment">
+      <TabPane tab={<span><CloudOutlined/> {l('pages.datastudio.label.globalvariable','全局变量')}</span>} key="fragment">
         <StudioFragment/>
       </TabPane>
-      <TabPane tab={<span><FunctionOutlined/> {intl.formatMessage({id: 'pages.datastadio.lable.function', defaultMessage: '函数',})}</span>} key="Function">
+      <TabPane tab={<span><FunctionOutlined/> {l('pages.datastudio.label.function','函数')}</span>} key="Function">
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
       </TabPane>
     </Tabs>

dlink-web/src/components/Studio/StudioRightTool/StudioGuide/index.tsx

@@ -28,35 +28,37 @@ import { history,useIntl } from 'umi';
 const {Title, Paragraph,Link, Text} = Typography;
 
 const StudioGuide = (props: any) => {
-  const intl = useIntl();
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
   const {toolHeight} = props;
 
   return (
     <Scrollbars style={{height: toolHeight}}>
       <Typography style={{padding:'15px'}}>
-        <Title level={5}>{intl.formatMessage({id: 'pages.datastadio.lable.quickguide', defaultMessage: '快捷引导',})}</Title>
+        <Title level={5}>{l('pages.datastudio.label.quickguide','快捷引导')}</Title>
         <Paragraph>
           <ul>
             <li>
-              <Link onClick={()=>{history.push('/registration/cluster/clusterInstance')}}>{intl.formatMessage({id: 'pages.datastadio.lable.registcluster', defaultMessage: '注册集群实例',})}</Link>
+              <Link onClick={()=>{history.push('/registration/cluster/clusterInstance')}}>{l('pages.datastudio.label.registcluster','注册集群实例')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/cluster/clusterConfiguration')}}>{intl.formatMessage({id: 'pages.datastadio.lable.registclusterconfig', defaultMessage: '注册集群配置',})}</Link>
+              <Link onClick={()=>{history.push('/registration/cluster/clusterConfiguration')}}>{l('pages.datastudio.label.registclusterconfig','注册集群配置')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/jar')}}>{intl.formatMessage({id: 'pages.datastadio.lable.registjar', defaultMessage: '注册 Jar',})}</Link>
+              <Link onClick={()=>{history.push('/registration/jar')}}>{l('pages.datastudio.label.registjar','注册 Jar')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/database')}}>{intl.formatMessage({id: 'pages.datastadio.lable.registdatasource', defaultMessage: '注册数据源',})}</Link>
+              <Link onClick={()=>{history.push('/registration/database')}}>{l('pages.datastudio.label.registdatasource','注册数据源')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/document')}}>{intl.formatMessage({id: 'pages.datastadio.lable.registdocument', defaultMessage: '注册文档',})}</Link>
+              <Link onClick={()=>{history.push('/registration/document')}}>{l('pages.datastudio.label.registdocument','注册文档')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/settings')}}>{intl.formatMessage({id: 'pages.datastadio.lable.configsystemconfig', defaultMessage: '修改系统配置',})}</Link>
+              <Link onClick={()=>{history.push('/settings')}}>{l('pages.datastudio.label.configsystemconfig','修改系统配置')}</Link>
             </li>
             <li>
-              <Link href="http://www.dlink.top/" target="_blank" >{intl.formatMessage({id: 'pages.datastadio.lable.officialdocumentation', defaultMessage: '官网文档',})}</Link>
+              <Link href="http://www.dlink.top/" target="_blank" >{l('pages.datastudio.label.officialdocumentation','官网文档')}</Link>
             </li>
             <li>
               <Link href="https://github.com/DataLinkDC/dlink" target="_blank" >Github</Link>

dlink-web/src/components/Studio/StudioRightTool/StudioSqlConfig/index.tsx

@@ -32,7 +32,8 @@ const { Option } = Select;
 
 const StudioSqlConfig = (props: any) => {
 
-  const intl = useIntl();
+  const international = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
 
   const {current,form,dispatch,tabs,database,toolHeight} = props;
 
@@ -93,7 +94,7 @@ const StudioSqlConfig = (props: any) => {
     >
       <Row>
         <Col span={24}>
-          <Form.Item label={intl.formatMessage({id: 'pages.datastadio.lable.datasource', defaultMessage: '数据源',})} tooltip={`选择 Sql 语句执行的数据源`}
+          <Form.Item label={l('pages.datastudio.label.datasource','数据源')} tooltip={`选择 Sql 语句执行的数据源`}
                      name="databaseId"
                      className={styles.form_item}>
             <Select
@@ -107,7 +108,7 @@ const StudioSqlConfig = (props: any) => {
         </Col>
         <Col span={24}>
           <Form.Item
-            label={intl.formatMessage({id: 'pages.datastadio.lable.maxrows', defaultMessage: '最大行数',})}  className={styles.form_item} name="maxRowNum"
+            label={l('pages.datastudio.label.maxrows','最大行数')}  className={styles.form_item} name="maxRowNum"
             tooltip='预览数据的最大行数'
           >
             <InputNumber min={1} max={9999} defaultValue={100} />

dlink-web/src/locales/en-US/menu.ts

@@ -79,8 +79,8 @@ export default {
   'menu.devops': 'Devops',
   'menu.job': 'Job Instance',
 
-  'menu.datacenter': 'Mate Data Center',
-  'menu.datacenter.metadata': 'Mate Data',
+  'menu.datacenter': 'Meta Data Center',
+  'menu.datacenter.metadata': 'Meta Data',
 
   'menu.registration': 'Regist Center',
   'menu.registration.cluster': 'Cluster Management',

dlink-web/src/locales/en-US/pages.ts

@@ -235,47 +235,47 @@ export default {
   'pages.regist.openAPI': 'OpenAPI Document',
   'pages.regist.BusinessComponent': 'Business Component Document',
 
-  'pages.matedata.NoDatabaseSelected': 'No database selected',
-  'pages.matedata.Application': 'Application',
-  'pages.matedata.TableInfo': 'Table Info',
-  'pages.matedata.Description': 'Description',
-  'pages.matedata.DataSerch': 'Data Serch',
-  'pages.matedata.GenerateSQL': 'Generate SQL',
-  'pages.matedata.FieldInformation': 'Field information',
+  'pages.metadata.NoDatabaseSelected': 'No database selected',
+  'pages.metadata.Application': 'Application',
+  'pages.metadata.TableInfo': 'Table Info',
+  'pages.metadata.Description': 'Description',
+  'pages.metadata.DataSearch': 'Data Search',
+  'pages.metadata.GenerateSQL': 'Generate SQL',
+  'pages.metadata.FieldInformation': 'Field information',
 
   'pages.TableData.QueryConditions': 'Query Conditions',
   'pages.TableData.sorting': 'Sorting',
   'pages.TableData.data': 'Data',
-  'pages.TableData.serch': 'Serch',
+  'pages.TableData.search': 'Search',
 
-  'pages.datastadio.lable.info': 'Info',
-  'pages.datastadio.lable.result': 'Result',
-  'pages.datastadio.lable.bloodsource': 'Blood Source',
-  'pages.datastadio.lable.process': 'Process',
-  'pages.datastadio.lable.history': 'History',
-  'pages.datastadio.lable.function': 'Function',
+  'pages.datastudio.label.info': 'Info',
+  'pages.datastudio.label.result': 'Result',
+  'pages.datastudio.label.lineage': 'Lineage',
+  'pages.datastudio.label.process': 'Process',
+  'pages.datastudio.label.history': 'History',
+  'pages.datastudio.label.function': 'Function',
 
-  'pages.datastadio.lable.directory': 'Directory',
-  'pages.datastadio.lable.structure': 'Structure',
-  'pages.datastadio.lable.session': 'Session',
-  'pages.datastadio.lable.cluster': 'Cluster',
-  'pages.datastadio.lable.datasource': 'Data Source',
-  'pages.datastadio.lable.mate': 'Mate Data',
-  'pages.datastadio.lable.globalvariable': 'Global Variable',
-  'pages.datastadio.lable.guidepage': 'Guide Page',
+  'pages.datastudio.label.directory': 'Directory',
+  'pages.datastudio.label.structure': 'Structure',
+  'pages.datastudio.label.session': 'Session',
+  'pages.datastudio.label.cluster': 'Cluster',
+  'pages.datastudio.label.datasource': 'Data Source',
+  'pages.datastudio.label.meta': 'Meta Data',
+  'pages.datastudio.label.globalvariable': 'Global Variable',
+  'pages.datastudio.label.guidepage': 'Guide Page',
 
-  'pages.datastadio.lable.registcluster': 'Regist Cluster',
-  'pages.datastadio.lable.registclusterconfig': 'Regist Cluster Config',
-  'pages.datastadio.lable.registjar': 'Regist Jar',
-  'pages.datastadio.lable.registdatasource': 'Regist Datasource',
-  'pages.datastadio.lable.registdocument': 'Regist Document',
-  'pages.datastadio.lable.configsystemconfig': 'Config System Config',
-  'pages.datastadio.lable.officialdocumentation': 'Official Documentation',
-  'pages.datastadio.lable.quickguide': 'Quick Guide',
+  'pages.datastudio.label.registcluster': 'Regist Cluster',
+  'pages.datastudio.label.registclusterconfig': 'Regist Cluster Config',
+  'pages.datastudio.label.registjar': 'Regist Jar',
+  'pages.datastudio.label.registdatasource': 'Regist Datasource',
+  'pages.datastudio.label.registdocument': 'Regist Document',
+  'pages.datastudio.label.configsystemconfig': 'Config System Config',
+  'pages.datastudio.label.officialdocumentation': 'Official Documentation',
+  'pages.datastudio.label.quickguide': 'Quick Guide',
 
-  'pages.datastadio.lable.welcomeuse': 'Welcome to Use Dinky v',
-  'pages.datastadio.lable.dinkydescribe': 'Real Time is the Future,Dinky is the best partner of Flink, making Flink SQL easier to use, and is committed to the construction of stream batch integrated development platform',
-  'pages.datastadio.lable.maxrows': 'Max Rows',
+  'pages.datastudio.label.welcomeuse': 'Welcome to Use Dinky v',
+  'pages.datastudio.label.dinkydescribe': 'Real Time is the Future,Dinky is the best partner of Flink, making Flink SQL easier to use, and is committed to the construction of stream batch integrated development platform',
+  'pages.datastudio.label.maxrows': 'Max Rows',
 
 
   'pages.devops.result.success': 'Successful',

dlink-web/src/pages/Admin.tsx

@@ -29,20 +29,13 @@ export default (): React.ReactNode => {
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
-  const intl = useIntl();
   return (
     <PageHeaderWrapper
-      content={intl.formatMessage({
-        id: 'pages.admin.subPage.title',
-        defaultMessage: ' 这个页面只有 admin 权限才能查看',
-      })}
+      content={l('pages.admin.subPage.title',' 这个页面只有 admin 权限才能查看')}
     >
       <Card>
         <Alert
-          message={intl.formatMessage({
-            id: 'pages.welcome.alertMessage',
-            defaultMessage: '实时计算平台 Dlink & Apache Flink 即将发布，目前为体验版，版本号为0.1.0。',
-          })}
+          message={l('pages.welcome.alertMessage','实时计算平台 Dlink & Apache Flink 即将发布，目前为体验版，版本号为0.1.0。')}
           type="success"
           showIcon
           banner

dlink-web/src/pages/Cluster/index.tsx

@@ -47,12 +47,9 @@ const url = '/api/cluster';
 
 
 const ClusterTableList: React.FC<{}> = (props: any) => {
-  const intl = useIntl();
-
 
   const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
 
   const {dispatch} = props;
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
@@ -106,20 +103,20 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
     <Dropdown
       overlay={
         <Menu onClick={({key}) => editAndDelete(key, item)}>
-          <Menu.Item key="edit">{intl.formatMessage({id: 'global.table.edit', defaultMessage: '编辑',})}</Menu.Item>
-          <Menu.Item key="delete">{intl.formatMessage({id: 'global.table.delete', defaultMessage: '删除',})}</Menu.Item>
+          <Menu.Item key="edit">{l('global.table.edit','编辑')}</Menu.Item>
+          <Menu.Item key="delete">{l('global.table.delete','删除')}</Menu.Item>
         </Menu>
       }
     >
       <a>
-        {intl.formatMessage({id: 'global.table.more', defaultMessage: '更多',})} <DownOutlined/>
+        {l('global.table.more','更多')} <DownOutlined/>
       </a>
     </Dropdown>
   );
 
   const columns: ProColumns<ClusterTableListItem>[] = [
     {
-      title: intl.formatMessage({id: 'global.table.instanceName', defaultMessage: '名称',}),
+      title: l('global.table.instanceName','名称'),
       dataIndex: 'name',
       tip: '名称是唯一的',
       sorter: true,
@@ -136,20 +133,20 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.instanceId', defaultMessage: '集群ID',}),
+      title: l('global.table.instanceId','集群ID'),
       dataIndex: 'id',
       hideInTable: true,
       hideInForm: true,
       hideInSearch: true,
     },
     {
-      title: intl.formatMessage({id: 'global.table.nickName', defaultMessage: '别名',}),
+      title: l('global.table.nickName','别名'),
       sorter: true,
       dataIndex: 'alias',
       hideInTable: false,
     },
     {
-      title: intl.formatMessage({id: 'global.table.type', defaultMessage: '类型',}),
+      title: l('global.table.type','类型'),
       sorter: true,
       dataIndex: 'type',
       hideInForm: false,
@@ -192,7 +189,7 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.jobManagerHaAddress', defaultMessage: 'JobManager HA 地址',}),
+      title: l('global.table.jobManagerHaAddress','JobManager HA 地址'),
       sorter: true,
       dataIndex: 'hosts',
       valueType: 'textarea',
@@ -206,14 +203,14 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.jobManagerAddress', defaultMessage: 'JobManager地址',}),
+      title: l('global.table.jobManagerAddress','JobManager地址'),
       sorter: true,
       dataIndex: 'jobManagerHost',
       hideInForm: true,
       hideInSearch: true,
       hideInTable: false,
     }, {
-      title: intl.formatMessage({id: 'global.table.version', defaultMessage: '版本',}),
+      title: l('global.table.version','版本'),
       sorter: true,
       dataIndex: 'version',
       hideInForm: true,
@@ -221,25 +218,25 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       hideInTable: false,
     },
     {
-      title: intl.formatMessage({id: 'global.table.status', defaultMessage: '状态',}),
+      title: l('global.table.status','状态'),
       dataIndex: 'status',
       hideInForm: true,
       hideInSearch: true,
       hideInTable: false,
       filters: [
         {
-          text: intl.formatMessage({id: 'global.table.status.normal', defaultMessage: '正常',}),
+          text: l('global.table.status.normal','正常'),
           value: 1,
         },
         {
-          text: intl.formatMessage({id: 'global.table.status.abnormal', defaultMessage: '异常',}),
+          text: l('global.table.status.abnormal','异常'),
           value: 0,
         },
       ],
       filterMultiple: false,
       valueEnum: {
-        1: {text: intl.formatMessage({id: 'global.table.status.normal', defaultMessage: '正常',}), status: 'Success'},
-        0: {text: intl.formatMessage({id: 'global.table.status.abnormal', defaultMessage: '异常',}), status: 'Error'},
+        1: {text: l('global.table.status.normal','正常'), status: 'Success'},
+        0: {text: l('global.table.status.abnormal','异常'), status: 'Error'},
       },
     },
     {
@@ -252,57 +249,57 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       hideInTable: true,
     },
     {
-      title: intl.formatMessage({id: 'global.table.isUse', defaultMessage: '是否启用',}),
+      title: l('global.table.isUse','是否启用'),
       dataIndex: 'enabled',
       hideInForm: true,
       hideInSearch: true,
       hideInTable: false,
       filters: [
         {
-          text: intl.formatMessage({id: 'global.table.inUse', defaultMessage: '已启用',}),
+          text: l('global.table.inUse','已启用'),
           value: 1,
         },
         {
-          text: intl.formatMessage({id: 'global.table.notUse', defaultMessage: '已禁用',}),
+          text: l('global.table.notUse','已禁用'),
           value: 0,
         },
       ],
       filterMultiple: false,
       valueEnum: {
-        true: {text: intl.formatMessage({id: 'global.table.inUse', defaultMessage: '已启用',}), status: 'Success'},
-        false: {text: intl.formatMessage({id: 'global.table.notUse', defaultMessage: '已禁用',}), status: 'Error'},
+        true: {text: l('global.table.inUse','已启用'), status: 'Success'},
+        false: {text: l('global.table.notUse','已禁用'), status: 'Error'},
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.registType', defaultMessage: '注册方式',}),
+      title: l('global.table.registType','注册方式'),
       dataIndex: 'autoRegisters',
       hideInForm: true,
       hideInSearch: true,
       hideInTable: false,
       filters: [
         {
-          text: intl.formatMessage({id: 'global.table.registType.automatic', defaultMessage: '自动',}),
+          text: l('global.table.registType.automatic','自动'),
           value: 1,
         },
         {
-          text: intl.formatMessage({id: 'global.table.registType.manual', defaultMessage: '手动',}),
+          text: l('global.table.registType.manual','手动'),
           value: 0,
         },
       ],
       filterMultiple: false,
       valueEnum: {
         true: {
-          text: intl.formatMessage({id: 'global.table.registType.automatic', defaultMessage: '自动',}),
+          text: l('global.table.registType.automatic','自动'),
           status: 'Success'
         },
         false: {
-          text: intl.formatMessage({id: 'global.table.registType.manual', defaultMessage: '手动',}),
+          text: l('global.table.registType.manual','手动'),
           status: 'Error'
         },
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.createTime', defaultMessage: '创建时间',}),
+      title: l('global.table.createTime','创建时间'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
@@ -320,7 +317,7 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.updateTime', defaultMessage: '最近更新时间',}),
+      title: l('global.table.updateTime','最近更新时间'),
       dataIndex: 'updateTime',
       sorter: true,
       valueType: 'dateTime',
@@ -337,7 +334,7 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: intl.formatMessage({id: 'global.table.operate', defaultMessage: '操作',}),
+      title: l('global.table.operate','操作'),
       dataIndex: 'option',
       tooltip: 'FLinkWebUI连接 当集群状态为`可用`时! 支持 KUBERNETES 之外的模式',
       valueType: 'option',
@@ -348,7 +345,7 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
             setFormValues(record);
           }}
         >
-          {intl.formatMessage({id: 'global.table.config', defaultMessage: '配置',})}
+          {l('global.table.config','配置')}
         </a>,
         <MoreBtn key="more" item={record}/>,
         ((record.status && (record.type === RUN_MODE.YARN_SESSION
@@ -373,7 +370,7 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
   return (
     <PageContainer title={false}>
       <ProTable<ClusterTableListItem>
-        headerTitle={intl.formatMessage({id: 'global.table.clusterManagement', defaultMessage: '集群管理',})}
+        headerTitle={l('global.table.clusterManagement','集群管理')}
         actionRef={actionRef}
         rowKey="id"
         search={{
@@ -381,13 +378,13 @@ const ClusterTableList: React.FC<{}> = (props: any) => {
         }}
         toolBarRender={() => [
           <Button type="primary" onClick={() => handleModalVisible(true)}>
-            <PlusOutlined/> {intl.formatMessage({id: 'global.table.create', defaultMessage: '新建',})}
+            <PlusOutlined/> {l('global.table.create','新建')}
           </Button>,
           <Button type="primary" onClick={() => checkHeartBeats()}>
-            <HeartOutlined/> {intl.formatMessage({id: 'global.table.heartbeat', defaultMessage: '心跳',})}
+            <HeartOutlined/> {l('global.table.heartbeat','心跳')}
           </Button>,
           <Button type="primary" onClick={() => clearCluster()}>
-            <ClearOutlined/> {intl.formatMessage({id: 'global.table.recycle', defaultMessage: '回收',})}
+            <ClearOutlined/> {l('global.table.recycle','回收')}
           </Button>,
         ]}
         request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}

dlink-web/src/pages/DataBase/Columns/index.tsx

@@ -27,34 +27,31 @@ const Columns = (props: any) => {
 
 
   const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-
-
-  const intl = useIntl();
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
 
   const {dbId, table, schema, scroll} = props;
 
   const cols = [{
-    title: intl.formatMessage({id: 'global.table.no', defaultMessage: '序号',}),
+    title: l('global.table.no','序号'),
     dataIndex: 'position',
     isString: false,
   },
     {
-      title: intl.formatMessage({id: 'global.table.columnName', defaultMessage: '字段名称',}),
+      title: l('global.table.columnName','字段名称'),
       dataIndex: 'name',
       copyable: true,
     },
     {
-      title: intl.formatMessage({id: 'global.table.annotation', defaultMessage: '注释',}),
+      title: l('global.table.annotation','注释'),
       dataIndex: 'comment',
       // ellipsis: true,
     },
     {
-      title: intl.formatMessage({id: 'global.table.type', defaultMessage: '类型',}),
+      title: l('global.table.type','类型'),
       dataIndex: 'type',
     },
     {
-      title: intl.formatMessage({id: 'global.table.primarykey', defaultMessage: '主键',}),
+      title: l('global.table.primarykey','主键'),
       dataIndex: 'keyFlag',
       render: (_, record) => (
         <>
@@ -73,7 +70,7 @@ const Columns = (props: any) => {
       ],
       openSearch: 'dict',
     }, {
-      title: intl.formatMessage({id: 'global.table.automationAdd', defaultMessage: '自增',}),
+      title: l('global.table.automationAdd','自增'),
       dataIndex: 'autoIncrement',
       render: (_, record) => (
         <>
@@ -92,7 +89,7 @@ const Columns = (props: any) => {
       ],
       openSearch: 'dict',
     }, {
-      title: intl.formatMessage({id: 'global.table.isNull', defaultMessage: '非空',}),
+      title: l('global.table.isNull','非空'),
       dataIndex: 'nullable',
       render: (_, record) => (
         <>
@@ -111,24 +108,24 @@ const Columns = (props: any) => {
       ],
       openSearch: 'dict',
     }, {
-      title: intl.formatMessage({id: 'global.table.default', defaultMessage: '默认值',}),
+      title: l('global.table.default','默认值'),
       dataIndex: 'defaultValue',
     }, {
-      title: intl.formatMessage({id: 'global.table.precision', defaultMessage: '精度',}),
+      title: l('global.table.precision','精度'),
       dataIndex: 'precision',
       isString: false,
     }, {
-      title: intl.formatMessage({id: 'global.table.decimalDigits', defaultMessage: '小数范围',}),
+      title: l('global.table.decimalDigits','小数范围'),
       dataIndex: 'scale',
       isString: false,
     }, {
-      title: intl.formatMessage({id: 'global.table.character', defaultMessage: '字符集',}),
+      title: l('global.table.character','字符集'),
       dataIndex: 'characterSet',
     }, {
-      title: intl.formatMessage({id: 'global.table.collationRule', defaultMessage: '排序规则',}),
+      title: l('global.table.collationRule','排序规则'),
       dataIndex: 'collation',
     }, {
-      title: intl.formatMessage({id: 'global.table.javaType', defaultMessage: 'Java 类型',}),
+      title: l('global.table.javaType','Java 类型'),
       dataIndex: 'javaType',
     },]
   return (

dlink-web/src/pages/DataCenter/MetaData/TableData/index.tsx

@@ -29,11 +29,8 @@ import {useIntl} from 'umi';
 
 const TableData = (props: any) => {
 
-  const intl = useIntl();
-
   const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
 
   // 数据库id，数据库名称，表名称
   const {dbId, table, schema} = props;
@@ -170,10 +167,7 @@ const TableData = (props: any) => {
                   })
                 }}
               >
-                <Input addonBefore="WHERE" placeholder={intl.formatMessage({
-                  id: 'pages.TableData.QueryConditions',
-                  defaultMessage: '查询条件',
-                })}
+                <Input addonBefore="WHERE" placeholder={l('pages.TableData.QueryConditions','查询条件')}
                        onChange={(value) => {
                          setOptionInput({
                            whereInput: value.target.value,
@@ -198,7 +192,7 @@ const TableData = (props: any) => {
                 }}
               >
                 <Input addonBefore="ORDER BY"
-                       placeholder={intl.formatMessage({id: 'pages.TableData.sorting', defaultMessage: '排序',})}
+                       placeholder={l('pages.TableData.sorting','排序')}
                        onChange={(value) => {
                          setOptionInput({
                            whereInput: optionInput.whereInput,
@@ -208,7 +202,7 @@ const TableData = (props: any) => {
               </AutoComplete>
             </Col>
             <Col span={2}>
-              <Tooltip title={intl.formatMessage({id: 'pages.TableData.serch', defaultMessage: '查询',})}>
+              <Tooltip title={l('pages.TableData.search','查询')}>
                 <Button type="primary" shape="circle" icon={<SearchOutlined/>} size="middle" onClick={(event) => {
                   fetchData(optionInput.whereInput, optionInput.orderInput)
                 }}/>
@@ -219,10 +213,7 @@ const TableData = (props: any) => {
         </div>
 
 
-        <Divider orientation="left" plain>{intl.formatMessage({
-          id: 'pages.TableData.data',
-          defaultMessage: '数据',
-        })}</Divider>
+        <Divider orientation="left" plain>{l('pages.TableData.data','数据')}</Divider>
 
         <div>
           <ProTable

dlink-web/src/pages/DataCenter/MetaData/index.tsx

@@ -50,12 +50,9 @@ const {TabPane} = Tabs;
 
 const MetaDataContainer: React.FC<{}> = (props: any) => {
 
-  const intl = useIntl();
-
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
-
   let [database, setDatabase] = useState<[{
     id: number,
     name: string,
@@ -173,10 +170,10 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
                     </Tag>
                     {(item.status) ?
                       (<Tag icon={<CheckCircleOutlined/>} color="success">
-                        {intl.formatMessage({id: 'global.table.status.normal', defaultMessage: '正常',})}
+                        {l('global.table.status.normal','正常',)}
                       </Tag>) :
                       <Tag icon={<ExclamationCircleOutlined/>} color="warning">
-                        {intl.formatMessage({id: 'global.table.status.abnormal', defaultMessage: '异常',})}
+                        {l('global.table.status.abnormal','异常',)}
                       </Tag>}
                   </div>
                 </Col>
@@ -201,14 +198,14 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
                         refeshDataBase(databaseId)
                         setTableChecked(true)
                       }}
-              >{intl.formatMessage({id: 'global.table.refresh', defaultMessage: '刷新',})}</Button>
+              >{l('global.table.refresh','刷新')}</Button>
             </div>
             <div>{item.alias}</div>
           </div>
         )
       }
     }
-    return (<div>{intl.formatMessage({id: 'pages.matedata.NoDatabaseSelected', defaultMessage: '未选择数据库',})}</div>)
+    return (<div>{l('pages.metadata.NoDatabaseSelected','未选择数据库')}</div>)
   }
 
 
@@ -262,13 +259,13 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
                            tab={
                              <span>
                           <ReadOutlined/>
-                               {intl.formatMessage({id: 'pages.matedata.Description', defaultMessage: '描述',})}
+                               {l('pages.metadata.Description','描述')}
                         </span>
                            }
                            key="describe"
                   >
                     <Divider orientation="left" plain>
-                      {intl.formatMessage({id: 'pages.matedata.TableInfo', defaultMessage: '表信息',})}
+                      {l( 'pages.metadata.TableInfo', '表信息')}
                     </Divider>
                     {row ? (
                       <Tables table={row}/>
@@ -276,7 +273,7 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
                       <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                     )}
                     <Divider orientation="left" plain>
-                      {intl.formatMessage({id: 'pages.matedata.FieldInformation', defaultMessage: '字段信息',})}
+                      {l('pages.metadata.FieldInformation','字段信息')}
                     </Divider>
                     {row ? (
                       <Columns dbId={databaseId} schema={row.schema} table={row.table}/>
@@ -289,7 +286,7 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
                            tab={
                              <span>
                           <BarsOutlined/>
-                               {intl.formatMessage({id: 'pages.matedata.DataSerch', defaultMessage: '数据查询',})}
+                               {l('pages.metadata.DataSearch', '数据查询')}
                         </span>
                            }
                            key="exampleData"
@@ -305,7 +302,7 @@ const MetaDataContainer: React.FC<{}> = (props: any) => {
                            tab={
                              <span>
                           <ConsoleSqlOutlined/>
-                               {intl.formatMessage({id: 'pages.matedata.GenerateSQL', defaultMessage: 'SQL 生成',})}
+                               {l('pages.metadata.GenerateSQL', 'SQL 生成')}
                         </span>
                            }
                            key="sqlGeneration"

dlink-web/src/pages/DevOps/JobInstanceTable/index.tsx

@@ -44,11 +44,8 @@ const url = '/api/jobInstance';
 
 const JobInstanceTable = (props: any) => {
 
-  const intl = useIntl();
-
   const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-
+  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
 
   const {status, activeKey, isHistory, taskStatus} = props;
   const [time, setTime] = useState(() => Date.now());
@@ -84,7 +81,7 @@ const JobInstanceTable = (props: any) => {
     if (values) {
       try {
         await onClickOperatingTask(values)
-        message.success(intl.formatMessage({id: 'pages.devops.result.success', defaultMessage: '操作成功',}))
+        message.success(l('pages.devops.result.success','操作成功'))
         setOpsStatusVisible(false)
       } catch (e) {
         console.log(e)
@@ -126,30 +123,30 @@ const JobInstanceTable = (props: any) => {
 
   const getColumns = () => {
     const columns: ProColumns<JobInstanceTableListItem>[] = [{
-      title: intl.formatMessage({id: 'global.table.jobname', defaultMessage: '作业名',}),
+      title: l('global.table.jobname','作业名'),
       dataIndex: "name",
       sorter: true,
     }, {
-      title: intl.formatMessage({id: 'global.table.lifecycle', defaultMessage: '生命周期',}),
+      title: l('global.table.lifecycle','生命周期'),
       dataIndex: "step",
       sorter: true,
       valueType: 'radio',
       valueEnum: {
-        '': {text: intl.formatMessage({id: 'global.table.lifecycle.all', defaultMessage: '全部',}), status: 'ALL'},
+        '': {text: l('global.table.lifecycle.all','全部'), status: 'ALL'},
         2: {
-          text: intl.formatMessage({id: 'global.table.lifecycle.dev', defaultMessage: '开发中',}),
+          text: l('global.table.lifecycle.dev','开发中'),
           status: JOB_LIFE_CYCLE.DEVELOP,
         },
         4: {
-          text: intl.formatMessage({id: 'global.table.lifecycle.publish', defaultMessage: '已发布',}),
+          text: l('global.table.lifecycle.publish','已发布'),
           status: JOB_LIFE_CYCLE.RELEASE,
         },
         5: {
-          text: intl.formatMessage({id: 'global.table.lifecycle.online', defaultMessage: '已上线',}),
+          text: l('global.table.lifecycle.online','已上线'),
           status: JOB_LIFE_CYCLE.ONLINE,
         },
         0: {
-          text: intl.formatMessage({id: 'global.table.lifecycle.unKnow', defaultMessage: '未知',}),
+          text: l('global.table.lifecycle.unKnow','未知'),
           status: JOB_LIFE_CYCLE.UNKNOWN,
         },
       },
@@ -157,12 +154,12 @@ const JobInstanceTable = (props: any) => {
         return (<JobLifeCycle step={row.step}/>);
       }
     }, {
-      title: intl.formatMessage({id: 'global.table.runmode', defaultMessage: '运行模式',}),
+      title: l('global.table.runmode','运行模式'),
       dataIndex: "type",
       sorter: true,
       valueType: 'radio',
       valueEnum: {
-        '': {text: intl.formatMessage({id: 'global.table.lifecycle.all', defaultMessage: '全部',}), status: 'ALL'},
+        '': {text: l('global.table.lifecycle.all','全部'), status: 'ALL'},
         'local': {
           text: RUN_MODE.LOCAL,
           status: RUN_MODE.LOCAL,
@@ -193,15 +190,15 @@ const JobInstanceTable = (props: any) => {
         },
       },
     }, {
-      title: intl.formatMessage({id: 'global.table.instanceName', defaultMessage: '集群实例',}),
+      title: l('global.table.instanceName','集群实例'),
       dataIndex: "clusterAlias",
       sorter: true,
     }, {
-      title: intl.formatMessage({id: 'global.table.jobid', defaultMessage: '作业ID',}),
+      title: l('global.table.jobid','作业ID'),
       dataIndex: "jid",
       key: "jid",
     }, {
-      title: intl.formatMessage({id: 'global.table.status', defaultMessage: '状态',}),
+      title: l('global.table.status','状态'),
       dataIndex: "status",
       sorter: true,
       hideInSearch: true,
@@ -211,27 +208,27 @@ const JobInstanceTable = (props: any) => {
           ;
       }
     }, {
-      title: intl.formatMessage({id: 'global.table.startTime', defaultMessage: '开始时间',}),
+      title: l('global.table.startTime','开始时间'),
       dataIndex: "createTime",
       sorter: true,
       valueType: 'dateTime',
       hideInSearch: true,
     }, {
-      title: intl.formatMessage({id: 'global.table.updateTime', defaultMessage: '更新时间',}),
+      title: l('global.table.updateTime','更新时间'),
       dataIndex: "updateTime",
       sorter: true,
       valueType: 'dateTime',
       hideInTable: true,
       hideInSearch: true,
     }, {
-      title: intl.formatMessage({id: 'global.table.endTime', defaultMessage: '结束时间',}),
+      title: l('global.table.endTime','结束时间'),
       dataIndex: "finishTime",
       sorter: true,
       valueType: 'dateTime',
       hideInTable: true,
       hideInSearch: true,
     }, {
-      title: intl.formatMessage({id: 'global.table.useTime', defaultMessage: '耗时',}),
+      title: l('global.table.useTime','耗时'),
       dataIndex: "duration",
       sorter: true,
       valueType: 'second',
@@ -247,20 +244,20 @@ const JobInstanceTable = (props: any) => {
         color={taskStatus?.onlineStatus ? OPS_STATUS_COLOR.padding : OPS_STATUS_COLOR.success} text={<a
         onClick={() => {
           onStatusChange('1')
-        }}>{intl.formatMessage({id: 'pages.devops.lable.online', defaultMessage: '一键上线',})}</a>}/>,
+        }}>{l('pages.devops.lable.online','一键上线')}</a>}/>,
         <a
           style={{color: taskStatus?.onlineStatus ? '#FF0000' : '#1E90FF'}}
           onClick={() => {
             onStatusDetailed('1')
-          }}>{intl.formatMessage({id: 'pages.devops.lable.onlinelist', defaultMessage: '上线明细',})}</a>,
+          }}>{l('pages.devops.lable.onlinelist','上线明细')}</a>,
         <Badge color={taskStatus?.offlineStatus ? OPS_STATUS_COLOR.padding : OPS_STATUS_COLOR.success}
                text={<a onClick={() => {
                  onStatusChange('2')
-               }}>{intl.formatMessage({id: 'pages.devops.lable.offline', defaultMessage: '一键下线',})}</a>}/>, <a
+               }}>{l('pages.devops.lable.offline','一键下线')}</a>}/>, <a
           style={{color: taskStatus?.onlineStatus ? '#FF0000' : '#1E90FF'}}
           onClick={() => {
             onStatusDetailed('2')
-          }}>{intl.formatMessage({id: 'pages.devops.lable.offlinelist', defaultMessage: '下线明细',})}</a>,]}
+          }}>{l('pages.devops.lable.offlinelist','下线明细')}</a>,]}
       request={(params, sorter, filter) => {
         setTime(Date.now());
         return queryData(url, {...params, status, isHistory, sorter: {id: 'descend'}, filter});
@@ -271,10 +268,7 @@ const JobInstanceTable = (props: any) => {
         filterType: 'light',
       }}
 
-      headerTitle={intl.formatMessage({
-        id: 'pages.devops.JobInstanceTable.LastUpdateTime',
-        defaultMessage: intl.formatMessage({id: 'global.table.lastUpdateTime', defaultMessage: '上次更新时间',}),
-      }) + `：${moment(time).format('HH:mm:ss')}`}
+      headerTitle={ l('global.table.lastUpdateTime','上次更新时间') + `：${moment(time).format('HH:mm:ss')}`}
       polling={status == activeKey ? 3000 : undefined}
       pagination={{
         defaultPageSize: 10,

dlink-web/src/pages/DevOps/index.tsx

@@ -35,9 +35,6 @@ const DevOps = () => {
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
-
-  const intl = useIntl();
-
   const [isHistory, setIsHistory] = useState<boolean>(false);
 
   const handleHistorySwicthChange = (checked: boolean) => {
@@ -46,8 +43,8 @@ const DevOps = () => {
 
   const renderSwitch = () => {
     return (
-      <Switch checkedChildren={intl.formatMessage({id: 'pages.datastadio.lable.history', defaultMessage: '历史',})}
-              unCheckedChildren={intl.formatMessage({id: 'pages.devops.lable.instance', defaultMessage: '实例',})}
+      <Switch checkedChildren={l('pages.datastudio.label.history', '历史')}
+              unCheckedChildren={l('pages.devops.lable.instance', '实例')}
               onChange={handleHistorySwicthChange}/>);
   };
 
@@ -84,67 +81,67 @@ const DevOps = () => {
         {
           key: JOB_STATUS.CREATED,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.CREATED', defaultMessage: '已创建',}),
+          title: l('pages.devops.jobstatus.CREATED','已创建'),
           value: statusHistoryCountData.created
         },
         {
           key: JOB_STATUS.INITIALIZING,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.INITIALIZING', defaultMessage: '初始化',}),
+          title: l('pages.devops.jobstatus.INITIALIZING','初始化'),
           value: statusHistoryCountData.initializing
         },
         {
           key: JOB_STATUS.RUNNING,
           status: 'success',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.RUNNING', defaultMessage: '运行中',}),
+          title: l('pages.devops.jobstatus.RUNNING','运行中'),
           value: statusHistoryCountData.running
         },
         {
           key: JOB_STATUS.FINISHED,
           status: 'processing',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.FINISHED', defaultMessage: '已完成',}),
+          title: l('pages.devops.jobstatus.FINISHED','已完成'),
           value: statusHistoryCountData.finished
         },
         {
           key: JOB_STATUS.FAILING,
           status: 'error',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.FAILING', defaultMessage: '异常中',}),
+          title: l('pages.devops.jobstatus.FAILING','异常中'),
           value: statusHistoryCountData.failing
         },
         {
           key: JOB_STATUS.FAILED,
           status: 'error',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.FAILED', defaultMessage: '已异常',}),
+          title: l('pages.devops.jobstatus.FAILED','已异常'),
           value: statusHistoryCountData.failed
         },
         {
           key: JOB_STATUS.SUSPENDED,
           status: 'warning',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.SUSPENDED', defaultMessage: '已暂停',}),
+          title: l('pages.devops.jobstatus.SUSPENDED','已暂停'),
           value: statusHistoryCountData.suspended
         },
         {
           key: JOB_STATUS.CANCELLING,
           status: 'warning',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.CANCELLING', defaultMessage: '停止中',}),
+          title: l( 'pages.devops.jobstatus.CANCELLING','停止中'),
           value: statusHistoryCountData.cancelling
         },
         {
           key: JOB_STATUS.CANCELED,
           status: 'warning',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.CANCELED', defaultMessage: '停止',}),
+          title: l('pages.devops.jobstatus.CANCELED','停止'),
           value: statusHistoryCountData.canceled
         },
         {
           key: JOB_STATUS.RESTARTING,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.RESTARTING', defaultMessage: '重启中',}),
+          title: l('pages.devops.jobstatus.RESTARTING','重启中'),
           value: statusHistoryCountData.restarting
         },
         {
           key: JOB_STATUS.UNKNOWN,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.UNKNOWN', defaultMessage: '未知',}),
+          title: l( 'pages.devops.jobstatus.UNKNOWN','未知'),
           value: statusHistoryCountData.unknown
         },
       ];
@@ -155,67 +152,67 @@ const DevOps = () => {
         {
           key: JOB_STATUS.CREATED,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.CREATED', defaultMessage: '已创建',}),
+          title: l( 'pages.devops.jobstatus.CREATED','已创建'),
           value: statusCountData.created
         },
         {
           key: JOB_STATUS.INITIALIZING,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.INITIALIZING', defaultMessage: '初始化',}),
+          title: l('pages.devops.jobstatus.INITIALIZING','初始化'),
           value: statusCountData.initializing
         },
         {
           key: JOB_STATUS.RUNNING,
           status: 'success',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.RUNNING', defaultMessage: '运行中',}),
+          title: l( 'pages.devops.jobstatus.RUNNING','运行中'),
           value: statusCountData.running
         },
         {
           key: JOB_STATUS.FINISHED,
           status: 'processing',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.FINISHED', defaultMessage: '已完成',}),
+          title: l( 'pages.devops.jobstatus.FINISHED','已完成'),
           value: statusCountData.finished
         },
         {
           key: JOB_STATUS.FAILING,
           status: 'error',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.FAILING', defaultMessage: '异常中',}),
+          title: l('pages.devops.jobstatus.FAILING','异常中'),
           value: statusCountData.failing
         },
         {
           key: JOB_STATUS.FAILED,
           status: 'error',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.FAILED', defaultMessage: '已异常',}),
+          title: l( 'pages.devops.jobstatus.FAILED','已异常'),
           value: statusCountData.failed
         },
         {
           key: JOB_STATUS.SUSPENDED,
           status: 'warning',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.SUSPENDED', defaultMessage: '已暂停',}),
+          title: l( 'pages.devops.jobstatus.SUSPENDED','已暂停'),
           value: statusCountData.suspended
         },
         {
           key: JOB_STATUS.CANCELLING,
           status: 'warning',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.CANCELLING', defaultMessage: '停止中',}),
+          title: l( 'pages.devops.jobstatus.CANCELLING','停止中'),
           value: statusCountData.cancelling
         },
         {
           key: JOB_STATUS.CANCELED,
           status: 'warning',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.CANCELED', defaultMessage: '停止',}),
+          title: l( 'pages.devops.jobstatus.CANCELED','停止'),
           value: statusCountData.canceled
         },
         {
           key: JOB_STATUS.RESTARTING,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.RESTARTING', defaultMessage: '重启中',}),
+          title: l( 'pages.devops.jobstatus.RESTARTING','重启中'),
           value: statusCountData.restarting
         },
         {
           key: JOB_STATUS.UNKNOWN,
           status: 'default',
-          title: intl.formatMessage({id: 'pages.devops.jobstatus.UNKNOWN', defaultMessage: '未知',}),
+          title: l( 'pages.devops.jobstatus.UNKNOWN','未知'),
           value: statusCountData.unknown
         },
       ];

dlink-web/src/pages/Welcome.tsx

@@ -38,15 +38,11 @@ export default (): React.ReactNode => {
   const international = useIntl();
   const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
 
-  const intl = useIntl();
   return (
     <>
       <Card>
         <Alert
-          message={intl.formatMessage({
-            id: 'pages.welcome.alertMessage',
-            defaultMessage: '实时计算平台 Dinky 即将发布，目前为体验版，版本号为 ',
-          }) + VERSION + '。'}
+          message={l('pages.welcome.alertMessage', '实时计算平台 Dinky 即将发布，目前为体验版，版本号为 ') + VERSION + '。'}
           type="success"
           showIcon
           banner