[Feature][web] Improve some internationalization (#1129)

* 优化国际化相关代码

* Improve some internationalization

* Improve StudioHome Guide Page internationalization

* fix import useIntl error

dlink-web/src/app.tsx

@@ -161,7 +161,7 @@ export const layout: RunTimeLayoutConfig = ({initialState}) => {
       ? [
         <Link to="/umi/plugin/openapi" target="_blank">
           <LinkOutlined/>
-          <span>openAPI Document</span>
+          <span>OpenAPI Document</span>
         </Link>,
         <Link to="/~docs">
           <BookOutlined/>

dlink-web/src/components/Chart/BarChartSetting/index.tsx

@@ -20,7 +20,7 @@
 
 import {Col, Form, Row, Select, Switch} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import styles from "./index.less";
 import React, {useEffect} from "react";
 
@@ -33,7 +33,7 @@ export type BarChartConfig = {
   xField: string,
   yField: string,
   seriesField?: string,
-  label?: { },
+  label?: {},
 };
 
 export type BarChartProps = {
@@ -44,7 +44,10 @@ export type BarChartProps = {
 
 const BarChartSetting: React.FC<BarChartProps> = (props) => {
 
-  const {current,column,onChange: handleChange,dispatch} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, column, onChange: handleChange, dispatch} = props;
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -57,8 +60,8 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
       isGroup: all.isGroup,
       isStack: all.isStack,
       isPercent: all.isPercent,
-      xField: all.xField?all.xField:column[0],
-      yField: all.yField?all.yField:column.length>1?column[1]:column[0],
+      xField: all.xField ? all.xField : column[0],
+      yField: all.yField ? all.yField : column.length > 1 ? column[1] : column[0],
       label: {
         position: 'middle',
         content: (item) => {
@@ -69,7 +72,7 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
         },
       },
     };
-    if(all.seriesField){
+    if (all.seriesField) {
       config.seriesField = all.seriesField;
     }
     handleChange(config);
@@ -97,25 +100,25 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
             <Form.Item
               label="x 轴" className={styles.form_item} name="xField"
             >
-              {column&&column.length > 0 ? (
-                  <Select allowClear showSearch
-                    defaultValue={column[0]} value={column[0]}>
-                    {getColumnOptions()}
-                  </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
-                  </Select>)}
+              {column && column.length > 0 ? (
+                <Select allowClear showSearch
+                        defaultValue={column[0]} value={column[0]}>
+                  {getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
+              </Select>)}
             </Form.Item>
           </Col>
           <Col span={12}>
             <Form.Item
               label="y 轴" className={styles.form_item} name="yField"
             >
-              {column&&column.length > 1 ? (
+              {column && column.length > 1 ? (
                 <Select allowClear showSearch
-                  defaultValue={column[1]} value={column[1]}>
+                        defaultValue={column[1]} value={column[1]}>
                   {getColumnOptions()}
-                </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
               </Select>)}
             </Form.Item>
           </Col>
@@ -125,11 +128,11 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
             <Form.Item
               label="分组字段" className={styles.form_item} name="seriesField"
             >
-              {column&&column.length > 0 ? (
+              {column && column.length > 0 ? (
                 <Select allowClear showSearch>
                   {getColumnOptions()}
-                </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
               </Select>)}
             </Form.Item>
           </Col>
@@ -165,7 +168,7 @@ const BarChartSetting: React.FC<BarChartProps> = (props) => {
   );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   result: Studio.result,
 }))(BarChartSetting);

dlink-web/src/components/Chart/LineChartSetting/index.tsx

@@ -20,7 +20,7 @@
 
 import {Col, Form, Row, Select, Switch} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import styles from "./index.less";
 import React, {useEffect} from "react";
 
@@ -46,7 +46,10 @@ export type LineChartProps = {
 
 const LineChartSetting: React.FC<LineChartProps> = (props) => {
 
-  const {current,column,onChange: handleChange,dispatch} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, column, onChange: handleChange, dispatch} = props;
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -57,16 +60,16 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
   const onValuesChange = (change: any, all: any) => {
     let config: LineChartConfig = {
       padding: 'auto',
-      xField: all.xField?all.xField:column[0],
-      yField: all.yField?all.yField:column.length>1?column[1]:column[0],
+      xField: all.xField ? all.xField : column[0],
+      yField: all.yField ? all.yField : column.length > 1 ? column[1] : column[0],
     };
-    if(all.seriesField){
+    if (all.seriesField) {
       config.seriesField = all.seriesField;
     }
-    if(all.openStepType){
+    if (all.openStepType) {
       config.stepType = 'hv';
     }
-    if(all.openSlider){
+    if (all.openSlider) {
       config.slider = {
         start: 0,
         end: 0.5,
@@ -97,25 +100,25 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
             <Form.Item
               label="x 轴" className={styles.form_item} name="xField"
             >
-              {column&&column.length > 0 ? (
-                  <Select allowClear showSearch
-                    defaultValue={column[0]} value={column[0]}>
-                    {getColumnOptions()}
-                  </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
-                  </Select>)}
+              {column && column.length > 0 ? (
+                <Select allowClear showSearch
+                        defaultValue={column[0]} value={column[0]}>
+                  {getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
+              </Select>)}
             </Form.Item>
           </Col>
           <Col span={12}>
             <Form.Item
               label="y 轴" className={styles.form_item} name="yField"
             >
-              {column&&column.length > 1 ? (
+              {column && column.length > 1 ? (
                 <Select allowClear showSearch
-                  defaultValue={column[1]} value={column[1]}>
+                        defaultValue={column[1]} value={column[1]}>
                   {getColumnOptions()}
-                </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
               </Select>)}
             </Form.Item>
           </Col>
@@ -125,11 +128,11 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
             <Form.Item
               label="分组字段" className={styles.form_item} name="seriesField"
             >
-              {column&&column.length > 0 ? (
+              {column && column.length > 0 ? (
                 <Select allowClear showSearch>
                   {getColumnOptions()}
-                </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
               </Select>)}
             </Form.Item>
           </Col>
@@ -157,7 +160,7 @@ const LineChartSetting: React.FC<LineChartProps> = (props) => {
   );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   result: Studio.result,
 }))(LineChartSetting);

dlink-web/src/components/Chart/PieChartSetting/index.tsx

@@ -20,7 +20,7 @@
 
 import {Col, Form, Row, Select} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import styles from "./index.less";
 import React, {useEffect} from "react";
 
@@ -41,7 +41,10 @@ export type PieChartProps = {
 
 const PieChartSetting: React.FC<PieChartProps> = (props) => {
 
-  const {current,column,onChange: handleChange,dispatch} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, column, onChange: handleChange, dispatch} = props;
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -51,12 +54,12 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
 
   const onValuesChange = (change: any, all: any) => {
     let config: PieChartConfig = {
-      angleField: all.angleField?all.angleField:column[0],
-      colorField: all.colorField?all.colorField:column.length>1?column[1]:column[0],
+      angleField: all.angleField ? all.angleField : column[0],
+      colorField: all.colorField ? all.colorField : column.length > 1 ? column[1] : column[0],
       label: {
         type: 'inner',
         offset: '-30%',
-        content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+        content: ({percent}) => `${(percent * 100).toFixed(0)}%`,
         style: {
           fontSize: 14,
           textAlign: 'center',
@@ -93,25 +96,25 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
             <Form.Item
               label="弧轴" className={styles.form_item} name="angleField"
             >
-              {column&&column.length > 0 ? (
-                  <Select allowClear showSearch
-                    defaultValue={column[0]} value={column[0]}>
-                    {getColumnOptions()}
-                  </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
-                  </Select>)}
+              {column && column.length > 0 ? (
+                <Select allowClear showSearch
+                        defaultValue={column[0]} value={column[0]}>
+                  {getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
+              </Select>)}
             </Form.Item>
           </Col>
           <Col span={12}>
             <Form.Item
               label="颜色" className={styles.form_item} name="colorField"
             >
-              {column&&column.length > 1 ? (
+              {column && column.length > 1 ? (
                 <Select allowClear showSearch
-                  defaultValue={column[1]} value={column[1]}>
+                        defaultValue={column[1]} value={column[1]}>
                   {getColumnOptions()}
-                </Select>):(<Select allowClear showSearch>
-                {column&&getColumnOptions()}
+                </Select>) : (<Select allowClear showSearch>
+                {column && getColumnOptions()}
               </Select>)}
             </Form.Item>
           </Col>
@@ -121,7 +124,7 @@ const PieChartSetting: React.FC<PieChartProps> = (props) => {
   );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   result: Studio.result,
 }))(PieChartSetting);

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

@@ -20,7 +20,7 @@
 
 import {Button, Col, Empty, Form, Row, Select} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import styles from "./index.less";
 import {RedoOutlined} from '@ant-design/icons';
 import {CHART, isSql} from "@/components/Studio/conf";
@@ -35,9 +35,12 @@ import {Dispatch} from "@@/plugin-dva/connect";
 
 const {Option} = Select;
 
-const Chart = (props:any) => {
+const Chart = (props: any) => {
 
-  const {current,result,height,dispatch} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, result, height, dispatch} = props;
   const [config, setConfig] = useState(undefined);
   const [type, setType] = useState<string>(CHART.LINE);
   const [form] = Form.useForm();
@@ -47,69 +50,69 @@ const Chart = (props:any) => {
   }, [current.console.chart]);
 
   const toRebuild = () => {
-    if(!isSql(current.task.dialect)){
-      showJobData(current.key,current.console.result.jobId,dispatch);
+    if (!isSql(current.task.dialect)) {
+      showJobData(current.key, current.console.result.jobId, dispatch);
     }
   };
 
   const onValuesChange = (change: any, all: any) => {
-    if(change.type){
+    if (change.type) {
       setConfig(undefined);
       setType(change.type);
-      props.saveChart({type:change.type});
+      props.saveChart({type: change.type});
     }
   };
 
   const renderChartSetting = () => {
-    if(!current.console.chart||!current.console.result.result){
+    if (!current.console.chart || !current.console.result.result) {
       return undefined;
     }
-    switch (type){
+    switch (type) {
       case CHART.LINE:
         return <LineChartSetting column={current.console.result.result.columns} onChange={(value) => {
           setConfig(value);
-          props.saveChart({...value,type: current.console.chart.type});
-        }} />;
-        case CHART.BAR:
+          props.saveChart({...value, type: current.console.chart.type});
+        }}/>;
+      case CHART.BAR:
         return <BarChartSetting column={current.console.result.result.columns} onChange={(value) => {
           setConfig(value);
-          props.saveChart({...value,type: current.console.chart.type});
-        }} />;
-        case CHART.PIE:
+          props.saveChart({...value, type: current.console.chart.type});
+        }}/>;
+      case CHART.PIE:
         return <PieChartSetting column={current.console.result.result.columns} onChange={(value) => {
           setConfig(value);
-          props.saveChart({...value,type: current.console.chart.type});
-        }} />;
+          props.saveChart({...value, type: current.console.chart.type});
+        }}/>;
       default:
         return <LineChartSetting column={current.console.result.result.columns} onChange={(value) => {
           setConfig(value);
-          props.saveChart({...value,type: current.console.chart.type});
-        }} />
+          props.saveChart({...value, type: current.console.chart.type});
+        }}/>
     }
   };
 
   const renderChartContent = () => {
-    if(!current.console.result.result||!current.console.result.result.columns){
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    if (!current.console.result.result || !current.console.result.result.columns) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
     }
-    switch (current.console.chart.type){
+    switch (current.console.chart.type) {
       case CHART.LINE:
-        if(config){
+        if (config) {
           return <Line data={current.console.result.result.rowData} {...config} />;
         } else {
-          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
         }
       case CHART.BAR:
-        if(config){
+        if (config) {
           return <Bar data={current.console.result.result.rowData} {...config} />;
         } else {
-          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
         }
       case CHART.PIE:
-        if(config && config.angleField){
+        if (config && config.angleField) {
           return <Pie data={current.console.result.result.rowData} {...config} />;
         } else {
-          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
         }
       default:
         return <Line data={current.console.result.result.rowData} {...config} />;
@@ -119,7 +122,7 @@ const Chart = (props:any) => {
   return (
     <div style={{width: '100%'}}>
       <Row>
-        <Col span={16} style={{padding:'20px'}}>
+        <Col span={16} style={{padding: '20px'}}>
           {renderChartContent()}
         </Col>
         <Col span={8}>
@@ -130,38 +133,38 @@ const Chart = (props:any) => {
           >
             <Row>
               <Col span={12}>
-            <Form.Item
-              label="图形类型" className={styles.form_item} name="type"
-            >
-              <Select defaultValue={CHART.LINE} value={CHART.LINE}>
-                <Option value={CHART.LINE}>{CHART.LINE}</Option>
-                <Option value={CHART.BAR}>{CHART.BAR}</Option>
-                <Option value={CHART.PIE}>{CHART.PIE}</Option>
-              </Select>
-            </Form.Item>
+                <Form.Item
+                  label="图形类型" className={styles.form_item} name="type"
+                >
+                  <Select defaultValue={CHART.LINE} value={CHART.LINE}>
+                    <Option value={CHART.LINE}>{CHART.LINE}</Option>
+                    <Option value={CHART.BAR}>{CHART.BAR}</Option>
+                    <Option value={CHART.PIE}>{CHART.PIE}</Option>
+                  </Select>
+                </Form.Item>
               </Col>
-              { !isSql(current.task.dialect) ? <Col span={12}>
-                <Button type="primary" onClick={toRebuild} icon={<RedoOutlined />}>
+              {!isSql(current.task.dialect) ? <Col span={12}>
+                <Button type="primary" onClick={toRebuild} icon={<RedoOutlined/>}>
                   刷新数据
                 </Button>
-              </Col>:undefined}
+              </Col> : undefined}
             </Row>
           </Form>
-            {renderChartSetting()}
+          {renderChartSetting()}
         </Col>
       </Row>
     </div>
   );
 };
 
-const mapDispatchToProps = (dispatch: Dispatch)=>({
-  saveChart:(chart: any)=>dispatch({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  saveChart: (chart: any) => dispatch({
     type: "Studio/saveChart",
     payload: chart,
   }),
 })
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   result: Studio.result,
-}),mapDispatchToProps)(Chart);
+}), mapDispatchToProps)(Chart);

dlink-web/src/components/Common/DTable.tsx

@@ -23,9 +23,13 @@ import {SearchOutlined} from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
 import {getData} from "@/components/Common/crud";
 import {Button, Input, Space} from "antd";
+import {useIntl} from "umi";
 
 const DTable = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {dataSource, columns, scroll} = props;
 
   const [data, setData] = useState<[]>([]);

dlink-web/src/components/Common/JobLifeCycle.tsx

@@ -19,14 +19,11 @@
 
 
 import {Tag} from 'antd';
-import {
-  EditOutlined,
-  CameraOutlined,
-  CarryOutOutlined,
-} from "@ant-design/icons";
+import {CameraOutlined, CarryOutOutlined, EditOutlined,} from "@ant-design/icons";
+import {useIntl} from "umi";
 
 export type JobLifeCycleFormProps = {
-  step: number|undefined;
+  step: number | undefined;
 };
 
 export const JOB_LIFE_CYCLE = {
@@ -48,16 +45,19 @@ export const isDeletedTask = (taskStep: number) => {
 
 const JobLifeCycle = (props: JobLifeCycleFormProps) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {step} = props;
 
   const renderJobLifeCycle = () => {
-    switch (step){
+    switch (step) {
       case JOB_LIFE_CYCLE.DEVELOP:
-        return (<Tag icon={<EditOutlined />} color="default">开发中</Tag>);
+        return (<Tag icon={<EditOutlined/>} color="default">开发中</Tag>);
       case JOB_LIFE_CYCLE.RELEASE:
-        return (<Tag icon={<CameraOutlined />} color="green">已发布</Tag>);
+        return (<Tag icon={<CameraOutlined/>} color="green">已发布</Tag>);
       case JOB_LIFE_CYCLE.ONLINE:
-        return (<Tag icon={<CarryOutOutlined />} color="blue">已上线</Tag>);
+        return (<Tag icon={<CarryOutOutlined/>} color="blue">已上线</Tag>);
       default:
         return undefined;
     }

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

@@ -25,7 +25,7 @@ import {DefaultFooter} from '@ant-design/pro-layout';
 export default () => {
 
   const intl = useIntl();
-  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   return (
     <DefaultFooter
@@ -39,7 +39,7 @@ export default () => {
         },
         {
           key: 'github',
-          title: <GithubOutlined />,
+          title: <GithubOutlined/>,
           href: 'https://github.com/DataLinkDC/dlink',
           blankTarget: true,
         },

dlink-web/src/components/RightContent/AvatarDropdown.tsx

@@ -64,8 +64,8 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
   const {initialState, setInitialState} = useModel('@@initialState');
   const actionRef = useRef<ActionType>();
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const onMenuClick = useCallback(
     (event: {
@@ -80,7 +80,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
         loginOut();
         return;
       }
-      history.push(`/account/${key}`);
+      // history.push(`/account/${key}`);
     },
     [initialState, setInitialState],
   );
@@ -119,14 +119,13 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({menu}) => {
             title={item.tenantCode}
             icon={<SecurityScanOutlined/>}
             onClick={(e) => {
-              console.log(e)
               // get choose tenant title
-              let title = e.domEvent.target.textContent;
+              let title: string = e.domEvent.target.textContent;
               // get choose tenantId
               let tenantInfoId = e.key;
               Modal.confirm({
                 title: l('menu.account.checkTenant'),
-                content: l('menu.account.checkTenantConfirm'),
+                content: l('menu.account.checkTenantConfirm', '', {tenantCode: title}),
                 okText: l('button.confirm'),
                 cancelText: l('button.cancel'),
                 onOk: async () => {

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

@@ -18,53 +18,55 @@
  */
 
 
-import {Tabs, Tooltip, Button, Modal, message, Empty} from "antd";
+import {Button, Empty, message, Modal, Tabs, Tooltip} from "antd";
 import {SearchOutlined, SnippetsOutlined} from "@ant-design/icons";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
-import styles from "./index.less";
+import {connect, useIntl} from "umi";
 import {getLineage, getStreamGraph} from "@/pages/DataStudio/service";
 import {useState} from "react";
-import Lineage, {getInit} from "@/components/Lineage";
+import Lineage from "@/components/Lineage";
 import CodeShow from "@/components/Common/CodeShow";
 import {DIALECT} from "@/components/Studio/conf";
 
-const { TabPane } = Tabs;
+const {TabPane} = Tabs;
 
 const StudioCA = (props: any) => {
   const {current} = props;
   const [data, setData] = useState(undefined);
 
-  const handleLineage=()=>{
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const handleLineage = () => {
     setData(undefined);
     const res = getLineage({
-      statement:current.value,
-      statementSet:current.task.statementSet,
-      dialect:current.task.dialect,
-      databaseId:current.task.databaseId,
+      statement: current.value,
+      statementSet: current.task.statementSet,
+      dialect: current.task.dialect,
+      databaseId: current.task.databaseId,
       type: 1,
     });
-    res.then((result)=>{
-      if(result.datas){
+    res.then((result) => {
+      if (result.datas) {
         setData(result.datas);
-      }else {
+      } else {
         message.error(`获取作业血缘失败，原因：\n${result.msg}`);
       }
     })
   };
 
-  const handleExportStreamGraphPlan=()=>{
+  const handleExportStreamGraphPlan = () => {
     const res = getStreamGraph({
       ...current.task,
       configJson: JSON.stringify(current.task.config),
       statement: current.value,
     });
-    res.then((result)=>{
+    res.then((result) => {
       Modal.info({
         title: current.task.alias + '的 StreamGraphPlan',
         width: 1000,
         content: (
-          <CodeShow code={JSON.stringify((result.datas?result.datas:result.msg), null, "\t")} language='json'
+          <CodeShow code={JSON.stringify((result.datas ? result.datas : result.msg), null, "\t")} language='json'
                     height='500px' theme="vs-dark"/>
         ),
         onOk() {
@@ -80,7 +82,7 @@ const StudioCA = (props: any) => {
               <Tooltip title="重新计算血缘">
                 <Button
                   type="text"
-                  icon={<SearchOutlined />}
+                  icon={<SearchOutlined/>}
                   onClick={handleLineage}
                 >
                   计算血缘
@@ -100,12 +102,12 @@ const StudioCA = (props: any) => {
             </>}
     >
       <TabPane tab={<span>血缘分析</span>} key="Lineage">
-        {data?<Lineage datas={data}/>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
+        {data ? <Lineage datas={data}/> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
       </TabPane>
     </Tabs>
   </>)
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
 }))(StudioCA);

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

@@ -19,7 +19,7 @@
 
 
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {Modal, Space, Tag, Typography,} from 'antd';
 import {ConsoleSqlOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
@@ -47,6 +47,10 @@ export type StudioExplainProps = {
   data: Partial<ExplainItem>;
 }
 const StudioExplain = (props: any) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const [explainData, setExplainData] = useState([]);
   const [result, setResult] = useState(<Text>正在校验中...</Text>);
   const {

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

@@ -27,10 +27,16 @@ import ProDescriptions from '@ant-design/pro-descriptions';
 import type {DocumentTableListItem} from '@/pages/Document/data.d';
 
 import {queryData,} from "@/components/Common/crud";
+import {useIntl} from "umi";
 
 const url = '/api/document';
 
 const StudioFX = () => {
+
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const actionRef = useRef<ActionType>();
   const [row, setRow] = useState<DocumentTableListItem>();
   const columns: ProColumns<DocumentTableListItem>[] = [
@@ -197,7 +203,7 @@ const StudioFX = () => {
       hideInTable: true,
     },
     {
-      title: '是否启用',
+      title: l('global.table.isEnable'),
       dataIndex: 'enabled',
       hideInForm: true,
       hideInSearch: true,
@@ -219,7 +225,7 @@ const StudioFX = () => {
       },
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
@@ -238,7 +244,7 @@ const StudioFX = () => {
       },
     },
     {
-      title: '最近更新时间',
+      title: l('global.table.lastUpdateTime'),
       dataIndex: 'updateTime',
       sorter: true,
       valueType: 'dateTime',

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

@@ -19,7 +19,7 @@
 
 
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {Badge, Divider, Modal, Space, Tag, Typography} from 'antd';
 import {ClusterOutlined, FireOutlined, MessageOutlined, RocketOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
@@ -59,6 +59,9 @@ type HistoryConfig = {
 const url = '/api/history';
 const StudioHistory = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {current, refs, dispatch} = props;
   const [modalVisit, setModalVisit] = useState(false);
   const [row, setRow] = useState<HistoryItem>();
@@ -84,8 +87,8 @@ const StudioHistory = (props: any) => {
     Modal.confirm({
       title: '删除执行记录',
       content: '确定删除该执行记录吗？',
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         await handleRemove(url, [row]);
         refs.history?.current?.reload();
@@ -212,7 +215,7 @@ const StudioHistory = (props: any) => {
               <a key="delete" onClick={() => {
                 removeHistory(row)
               }}>
-                删除
+                {l('button.delete')}
               </a>,
             ],
             search: false,

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

@@ -20,7 +20,7 @@
 
 import {Button, Divider, Dropdown, Empty, Menu, message, Modal, Select, Space, Tag, Tooltip} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import React, {useState} from "react";
 import {DownOutlined, SearchOutlined} from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
@@ -32,6 +32,9 @@ const {Option} = Select;
 
 const StudioProcess = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {cluster} = props;
   const [jobsData, setJobsData] = useState<any>({});
   const [clusterId, setClusterId] = useState<number>();
@@ -40,8 +43,8 @@ const StudioProcess = (props: any) => {
     Modal.confirm({
       title: key + '任务',
       content: `确定${key}该作业吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         if (!clusterId) return;
         let res = savepointJob(clusterId, currentItem.jid, key, key, 0);
@@ -142,7 +145,7 @@ const StudioProcess = (props: any) => {
         )
       }
     }, {
-      title: '操作',
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => {

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

@@ -18,9 +18,9 @@
  */
 
 
-import {Button, Tag, Empty} from "antd";
+import {Button, Empty, Tag} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {FireOutlined, SearchOutlined} from '@ant-design/icons';
 import {showJobData} from "@/components/Studio/StudioEvent/DQL";
 import {isSql} from "@/components/Studio/conf";
@@ -28,10 +28,13 @@ import DTable from "@/components/Common/DTable";
 
 const StudioTable = (props: any) => {
 
-  const {current,dispatch} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
-  const getColumns=(columns: [])=>{
-    let datas: any=[];
+  const {current, dispatch} = props;
+
+  const getColumns = (columns: []) => {
+    let datas: any = [];
     columns?.map((item) => {
       datas.push({
         field: item,
@@ -40,42 +43,44 @@ const StudioTable = (props: any) => {
     return datas;
   };
 
-  const showDetail=()=>{
-    showJobData(current.key,current.console.result.jobId,dispatch)
+  const showDetail = () => {
+    showJobData(current.key, current.console.result.jobId, dispatch)
   };
 
   const renderFlinkSQLContent = () => {
     return (<>
-      {(current.console.result.jobId&&(current.console.result.jobId.indexOf('unknown') === -1)) ? (<>
-      <Button type="primary" onClick={showDetail} icon={<SearchOutlined/>}>
-        获取最新数据
-      </Button> &nbsp;
-      <Tag color="blue" key={current.console.result.jobId}>
-        <FireOutlined /> {current.console.result.jobId}
-      </Tag></>):undefined}
-      {current.console.result.result&&current.console.result.result.columns?
-        <DTable dataSource={current.console.result.result.rowData} columns={getColumns(current.console.result.result.columns)}/>
-        :(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)
+      {(current.console.result.jobId && (current.console.result.jobId.indexOf('unknown') === -1)) ? (<>
+        <Button type="primary" onClick={showDetail} icon={<SearchOutlined/>}>
+          获取最新数据
+        </Button> &nbsp;
+        <Tag color="blue" key={current.console.result.jobId}>
+          <FireOutlined/> {current.console.result.jobId}
+        </Tag></>) : undefined}
+      {current.console.result.result && current.console.result.result.columns ?
+        <DTable dataSource={current.console.result.result.rowData}
+                columns={getColumns(current.console.result.result.columns)}/>
+        : (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)
       }
     </>)
   }
 
   const renderSQLContent = () => {
     return (<>
-      {current.console.result.result?
-        <DTable dataSource={current.console.result.result.rowData} columns={getColumns(current.console.result.result.columns)}/>
-        :(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)
+      {current.console.result.result ?
+        <DTable dataSource={current.console.result.result.rowData}
+                columns={getColumns(current.console.result.result.columns)}/>
+        : (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)
       }
     </>)
   }
 
   return (
     <div style={{width: '100%'}}>
-      {current?(isSql(current.task.dialect)?renderSQLContent():renderFlinkSQLContent()):undefined}
+      {current ? (isSql(current.task.dialect) ? renderSQLContent() : renderFlinkSQLContent()) : undefined}
     </div>
   );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
 }))(StudioTable);

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

@@ -18,14 +18,18 @@
  */
 
 
-import {Tabs, Empty} from "antd";
+import {Empty, Tabs} from "antd";
 import {
-  CodeOutlined, TableOutlined, RadarChartOutlined, CalendarOutlined, FileSearchOutlined, DesktopOutlined
-  , FunctionOutlined, ApartmentOutlined, BarChartOutlined
+  ApartmentOutlined,
+  BarChartOutlined,
+  CalendarOutlined,
+  CodeOutlined,
+  DesktopOutlined,
+  FunctionOutlined,
+  TableOutlined
 } from "@ant-design/icons";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
-import styles from "./index.less";
+import {connect, useIntl} from "umi";
 import StudioMsg from "./StudioMsg";
 import StudioTable from "./StudioTable";
 import StudioHistory from "./StudioHistory";
@@ -34,15 +38,16 @@ import StudioCA from "./StudioCA";
 import StudioProcess from "./StudioProcess";
 import {Scrollbars} from 'react-custom-scrollbars';
 import Chart from "@/components/Chart";
-import {useIntl} from 'umi';
-import {useEffect, useState} from "react";
+import {useState} from "react";
 
 const {TabPane} = Tabs;
 
 const StudioConsole = (props: any) => {
 
+
   const intl = useIntl();
-  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const {height, current} = props;
   let consoleHeight = (height - 37.6);
@@ -60,7 +65,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <CodeOutlined/>
-            {l('pages.datastudio.label.info','信息')}
+            {l('pages.datastudio.label.info')}
         </span>
         }
         key="StudioMsg"
@@ -73,7 +78,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <TableOutlined/>
-            {l('pages.datastudio.label.result','结果')}
+            {l('pages.datastudio.label.result')}
         </span>
         }
         key="StudioTable"
@@ -99,7 +104,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <ApartmentOutlined/>
-            {l('pages.datastudio.label.lineage','血缘')}
+            {l('pages.datastudio.label.lineage')}
         </span>
         }
         key="StudioConsanguinity"
@@ -112,7 +117,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <DesktopOutlined/>
-            {l('pages.datastudio.label.process','进程')}
+            {l('pages.datastudio.label.process')}
         </span>
         }
         key="StudioProcess"
@@ -125,7 +130,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <CalendarOutlined/>
-            {l('pages.datastudio.label.history','历史')}
+            {l('pages.datastudio.label.history')}
         </span>
         }
         key="StudioHistory"
@@ -138,7 +143,7 @@ const StudioConsole = (props: any) => {
         tab={
           <span>
           <FunctionOutlined/>
-            {l('pages.datastudio.label.function','函数')}
+            {l('pages.datastudio.label.function')}
         </span>
         }
         key="StudioFX"

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

@@ -17,9 +17,9 @@
  *
  */
 
-import {Typography,Divider} from 'antd';
+import {Divider, Typography} from 'antd';
 import React from 'react';
-import {connect,useIntl} from 'umi';
+import {connect, useIntl} from 'umi';
 import {StateType} from '@/pages/DataStudio/model';
 import {Scrollbars} from 'react-custom-scrollbars';
 import {VERSION} from "@/components/Common/Version";
@@ -28,56 +28,58 @@ const {Title, Paragraph, Text} = Typography;
 
 const StudioHome = (props: any) => {
 
+
   const intl = useIntl();
-  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const {toolHeight} = props;
 
   return (
     <Scrollbars style={{height: toolHeight}}>
-      <Typography style={{padding:'15px'}}>
-        <Title level={4}>{l('pages.datastudio.label.welcomeuse','欢迎使用 Dinky v')}{VERSION}</Title>
+      <Typography style={{padding: '15px'}}>
+        <Title level={4}>{l('pages.datastudio.label.welcomeuse', '', {version: VERSION})}</Title>
         <Paragraph>
-          <blockquote>{l('pages.datastudio.label.dinkydescribe','实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。')}</blockquote>
+          <blockquote>{l('pages.datastudio.label.dinkydescribe')}</blockquote>
         </Paragraph>
-        <Title level={5}>快捷键</Title>
+        <Title level={5}>{l('shortcut.title')}</Title>
         <Paragraph>
-          <Text keyboard>Ctrl + s</Text> 保存 <Divider type="vertical" />
-          <Text keyboard>Alt + 2</Text> 校验 <Divider type="vertical" />
-          <Text keyboard>Alt + 3</Text> 美化 <Divider type="vertical" />
-          <Text keyboard>F2</Text> 全屏 <Divider type="vertical" />
-          <Text keyboard>Esc</Text> 关闭弹框及全屏 <Divider type="vertical" />
-          <Text keyboard>F1</Text> 更多快捷键
+          <Text keyboard>Ctrl + s</Text> {l('shortcut.key.save')} <Divider type="vertical"/>
+          <Text keyboard>Alt + 2</Text> {l('shortcut.key.check')} <Divider type="vertical"/>
+          <Text keyboard>Alt + 3</Text> {l('shortcut.key.beautify')} <Divider type="vertical"/>
+          <Text keyboard>F2</Text> {l('shortcut.key.fullscreen')} <Divider type="vertical"/>
+          <Text keyboard>Esc</Text> {l('shortcut.key.fullscreenClose')} <Divider type="vertical"/>
+          <Text keyboard>F1</Text> {l('shortcut.key.more')}
         </Paragraph>
         <Paragraph>
-          <Text keyboard>Ctrl + F</Text> 搜索 <Divider type="vertical" />
-          <Text keyboard>Ctrl + H</Text> 替换 <Divider type="vertical" />
-          <Text keyboard>Ctrl + Z</Text> 撤销 <Divider type="vertical" />
-          <Text keyboard>Ctrl + Y</Text> 重做 <Divider type="vertical" />
-          <Text keyboard>Ctrl + /</Text> 注释
+          <Text keyboard>Ctrl + F</Text> {l('shortcut.key.search')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + H</Text> {l('shortcut.key.replace')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + Z</Text> {l('shortcut.key.revoke')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + Y</Text> {l('shortcut.key.redo')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + /</Text> {l('shortcut.key.notes')}
         </Paragraph>
         <Paragraph>
-          <Text keyboard>选中 + Tab</Text> 缩进 <Divider type="vertical" />
-          <Text keyboard>选中 + Shift + Tab</Text> 取消缩进 <Divider type="vertical" />
-          <Text keyboard>Shift + Alt + Right</Text> 选中后续 <Divider type="vertical" />
-          <Text keyboard>Shift + Alt + F</Text> 格式化
+          <Text keyboard>{l('shortcut.key.checked')} + Tab</Text> {l('shortcut.key.indent')} <Divider type="vertical"/>
+          <Text keyboard>{l('shortcut.key.checked')} + Shift + Tab</Text> {l('shortcut.key.removeIndent')} <Divider
+          type="vertical"/>
+          <Text keyboard>Shift + Alt + Right</Text> {l('shortcut.key.selectToEnd')} <Divider type="vertical"/>
+          <Text keyboard>Shift + Alt + F</Text> {l('shortcut.key.format')}
         </Paragraph>
         <Paragraph>
-          <Text keyboard>Ctrl + Shift + Up/Down</Text> 编辑多行 <Divider type="vertical" />
-          <Text keyboard>Shift + Alt + Up/Down</Text> 复制一行 <Divider type="vertical" />
-          <Text keyboard>Ctrl + Shift + K</Text> 删除一行
+          <Text keyboard>Ctrl + Shift + Up/Down</Text> {l('shortcut.key.editMultiline')} <Divider type="vertical"/>
+          <Text keyboard>Shift + Alt + Up/Down</Text> {l('shortcut.key.copyRow')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + Shift + K</Text> {l('shortcut.key.deleteRow')}
         </Paragraph>
         <Paragraph>
-          <Text keyboard>Ctrl + F3</Text> 匹配下一个 <Divider type="vertical" />
-          <Text keyboard>Ctrl + Shift + F3</Text> 匹配上一个 <Divider type="vertical" />
-          <Text keyboard>F7</Text> 前往下一个高亮 <Divider type="vertical" />
-          <Text keyboard>Shift +F7</Text> 前往上一个高亮
+          <Text keyboard>Ctrl + F3</Text> {l('shortcut.key.matchNext')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + Shift + F3</Text> {l('shortcut.key.matchPrevious')} <Divider type="vertical"/>
+          <Text keyboard>F7</Text> {l('shortcut.key.goNextHighlight')} <Divider type="vertical"/>
+          <Text keyboard>Shift +F7</Text> {l('shortcut.key.goPreviousHighlight')}
         </Paragraph>
         <Paragraph>
-          <Text keyboard>Ctrl + Shift + End</Text> 前面追加换行 <Divider type="vertical" />
-          <Text keyboard>Ctrl + End</Text> 追加换行 <Divider type="vertical" />
-          <Text keyboard>Alt + Up/Down</Text> 上下换位 <Divider type="vertical" />
-          <Text keyboard>Ctrl + Shift + [/]</Text> 折叠/展开
+          <Text keyboard>Ctrl + Shift + End</Text> {l('shortcut.key.appendLineBefore')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + End</Text> {l('shortcut.key.appendLine')} <Divider type="vertical"/>
+          <Text keyboard>Alt + Up/Down</Text> {l('shortcut.key.transpositionUpAndDown')} <Divider type="vertical"/>
+          <Text keyboard>Ctrl + Shift + [/]</Text> {l('shortcut.key.collapseOrExpand')}
         </Paragraph>
       </Typography>
     </Scrollbars>

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

@@ -19,14 +19,16 @@
 
 import {Divider, Form, Input, Space,} from 'antd';
 import {Dispatch, DocumentStateType} from "@@/plugin-dva/connect";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import Button from "antd/es/button/button";
 import {useState} from "react";
 import {
   APP_CONFIG_LIST,
   Config,
-  FLINK_CONFIG_LIST, FLINK_CONFIG_NAME_LIST,
-  KUBERNETES_CONFIG_LIST, KUBERNETES_CONFIG_NAME_LIST
+  FLINK_CONFIG_LIST,
+  FLINK_CONFIG_NAME_LIST,
+  KUBERNETES_CONFIG_LIST,
+  KUBERNETES_CONFIG_NAME_LIST
 } from "@/pages/ClusterConfiguration/conf";
 import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
 import {getConfig} from "@/pages/ClusterConfiguration/function";
@@ -39,6 +41,9 @@ const formLayout = {
 
 const StudioKubernetes = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {
     height = '100%',
     width = '100%',
@@ -60,6 +65,7 @@ const StudioKubernetes = (props: any) => {
     }
     return list;
   }
+
   //Merge pre-defined config
   function mergeConfig(source: Record<string, unknown>, from: Record<string, unknown>) {
     for (const key in from) {
@@ -96,7 +102,6 @@ const StudioKubernetes = (props: any) => {
   const [formVals, setFormVals] = useState<Record<string, unknown>>(initValue(conf));
 
 
-
   const onValuesChange = (change: any, all: any) => {
     all.type = "Kubernetes"
     const values = getConfig(all)
@@ -118,7 +123,7 @@ const StudioKubernetes = (props: any) => {
         help={configItem.help}
       >
         <Input placeholder={configItem.placeholder}
-               // defaultValue={configItem.defaultValue}
+          // defaultValue={configItem.defaultValue}
         />
 
       </Form.Item>)

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

@@ -18,20 +18,12 @@
  */
 
 
-import {
-  message, Button, Table, Empty, Divider,
-  Tooltip, Drawer, Modal
-} from "antd";
+import {Button, Drawer, Empty, Modal, Table, Tooltip} from "antd";
 import ProDescriptions from '@ant-design/pro-descriptions';
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
-import {useState} from "react";
-import styles from "./index.less";
-import {
-  ReloadOutlined,
-  PlusOutlined
-} from '@ant-design/icons';
-import React from "react";
+import {connect, useIntl} from "umi";
+import React, {useState} from "react";
+import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
 import {showCluster} from "../../StudioEvent/DDL";
 import {handleAddOrUpdate, handleRemove} from "@/components/Common/crud";
 import ClusterForm from "@/pages/Cluster/components/ClusterForm";
@@ -41,6 +33,9 @@ const url = '/api/cluster';
 
 const StudioCluster = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {cluster, toolHeight, dispatch} = props;
   const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
@@ -146,7 +141,7 @@ const StudioCluster = (props: any) => {
         dataIndex: 'note',
       },
       {
-        title: '是否启用',
+        title: l('global.table.isEnable'),
         dataIndex: 'enabled',
         filters: [
           {
@@ -186,29 +181,29 @@ const StudioCluster = (props: any) => {
       {
         title: '集群配置ID',
         dataIndex: 'clusterConfigurationId',
-      },{
+      }, {
         title: '作业ID',
         dataIndex: 'taskId',
       },
       {
-        title: '创建时间',
+        title: l('global.table.createTime'),
         dataIndex: 'createTime',
         valueType: 'dateTime',
       },
       {
-        title: '最近更新时间',
+        title: l('global.table.lastUpdateTime'),
         dataIndex: 'updateTime',
         valueType: 'dateTime',
       },
       {
-        title: '操作',
+        title: l('global.table.operate'),
         dataIndex: 'option',
         valueType: 'option',
         render: (_, record) => [
-          <Button  type="dashed" onClick={() => onModifyCluster(record)}>
-            配置
+          <Button type="dashed" onClick={() => onModifyCluster(record)}>
+            {l('button.edit')}
           </Button>, <Button danger onClick={() => onDeleteCluster(record)}>
-            删除
+            {l('button.delete')}
           </Button>
         ],
       },];
@@ -231,8 +226,8 @@ const StudioCluster = (props: any) => {
     Modal.confirm({
       title: '删除集群',
       content: `确定删除该集群【${record.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         await handleRemove(url, [record]);
         setRow({});
@@ -289,7 +284,7 @@ const StudioCluster = (props: any) => {
           }}
           modalVisible={updateModalVisible}
           values={row}
-        />):undefined}
+        />) : undefined}
         <Drawer
           width={600}
           visible={!!row?.id}

dlink-web/src/components/Studio/StudioLeftTool/StudioConnector/components/SessionForm.tsx

@@ -19,10 +19,10 @@
 
 
 import React, {useState} from 'react';
-import {Form, Button, Input, Modal,Select,Tag,Switch} from 'antd';
+import {Button, Form, Input, Modal, Select, Switch, Tag} from 'antd';
 
 import {SessionItem} from '../data.d';
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
 
 export type UpdateFormProps = {
@@ -41,6 +41,10 @@ const formLayout = {
 };
 
 const SessionForm: React.FC<UpdateFormProps> = (props) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const [formVals, setFormVals] = useState<Partial<SessionItem>>({
     session: props.values.session,
     type: props.values.type,
@@ -65,13 +69,14 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
     handleUpdate({...formVals, ...fieldsValue});
   };
 
-  const getClusterOptions = ()=>{
+  const getClusterOptions = () => {
     let itemList = [(<Option value={0} label={(<><Tag color="default">Local</Tag>本地环境</>)}>
       <Tag color="default">Local</Tag>
       本地环境
     </Option>)];
-    for(let item of cluster){
-      let tag =(<><Tag color={item.enabled?"processing":"error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+    for (let item of cluster) {
+      let tag = (<><Tag
+        color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
       itemList.push(<Option value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -91,7 +96,7 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
         <Item
           name="type"
           label="访问权限"
-          >
+        >
           <Select defaultValue="PUBLIC">
             <Option value="PUBLIC">共享</Option>
             <Option value="PRIVATE">私密</Option>
@@ -100,16 +105,16 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
         <Item
           name="useRemote"
           label="是否远程"
-          >
+        >
           <Switch checkedChildren="启用" unCheckedChildren="禁用"
                   defaultChecked={formVals.useRemote}/>
         </Item>
         <Item
           name="clusterId"
           label="集群"
-          >
+        >
           <Select
-            style={{ width: '100%' }}
+            style={{width: '100%'}}
             placeholder="选择Flink集群"
             optionLabelProp="label"
           >
@@ -123,9 +128,9 @@ const SessionForm: React.FC<UpdateFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
+        <Button onClick={() => handleUpdateModalVisible(false, values)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

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

@@ -20,7 +20,7 @@
 
 import {Button, Divider, Dropdown, Empty, Input, Menu, message, Space, Table, Tooltip} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import React, {useState} from "react";
 import {
   CommentOutlined,
@@ -47,6 +47,9 @@ import {Scrollbars} from 'react-custom-scrollbars';
 
 const StudioConnector = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {current, toolHeight, dispatch, currentSession, session} = props;
   const [tableData, setTableData] = useState<[]>([]);
   const [loadings, setLoadings] = useState<boolean[]>([]);
@@ -130,12 +133,12 @@ const StudioConnector = (props: any) => {
       overlay={
         <Menu onClick={({key}) => keyEvent(key, item)}>
           <Menu.Item key="desc">描述</Menu.Item>
-          <Menu.Item key="delete">删除</Menu.Item>
+          <Menu.Item key="delete">{l('button.delete')}</Menu.Item>
         </Menu>
       }
     >
       <a>
-        更多 <DownOutlined/>
+        {l('button.more')} <DownOutlined/>
       </a>
     </Dropdown>
   );
@@ -176,7 +179,7 @@ const StudioConnector = (props: any) => {
       sorter: true,
       ...getColumnSearchProps("table name"),
     }, {
-      title: '操作',
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -191,7 +194,7 @@ const StudioConnector = (props: any) => {
             keyEvent('delete', record);
           }}
         >
-          删除
+          {l('button.delete')}
         </a>
       ],
     },];
@@ -228,12 +231,12 @@ const StudioConnector = (props: any) => {
       sorter: true,
       ...getColumnSearchProps("createUser"),
     }, {
-      title: "创建时间",
+      title: l('global.table.createTime'),
       dataIndex: "createTime",
       key: "createTime",
       sorter: true,
     }, {
-      title: '操作',
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -248,7 +251,7 @@ const StudioConnector = (props: any) => {
             keySessionsEvent('delete', record);
           }}
         >
-          删除
+          {l('button.delete')}
         </a>
       ],
     },];

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

@@ -20,7 +20,7 @@
 
 import {Button, Drawer, Empty, Modal, Table, Tooltip} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import React, {useState} from "react";
 import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
 import {showDataBase} from "../../StudioEvent/DDL";
@@ -31,6 +31,9 @@ import {handleRemove} from "@/components/Common/crud";
 
 const StudioDataBase = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {database, toolHeight, dispatch} = props;
   const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
   const [values, setValues] = useState<any>({});
@@ -131,7 +134,7 @@ const StudioDataBase = (props: any) => {
         dataIndex: 'note',
       },
       {
-        title: '是否启用',
+        title: l('global.table.isEnable'),
         dataIndex: 'enabled',
         filters: [
           {
@@ -158,24 +161,24 @@ const StudioDataBase = (props: any) => {
         dataIndex: 'heartbeatTime',
         valueType: 'dateTime',
       }, {
-        title: '创建时间',
+        title: l('global.table.createTime'),
         dataIndex: 'createTime',
         valueType: 'dateTime',
       },
       {
-        title: '最近更新时间',
+        title: l('global.table.lastUpdateTime'),
         dataIndex: 'updateTime',
         valueType: 'dateTime',
       },
       {
-        title: '操作',
+        title: l('global.table.operate'),
         dataIndex: 'option',
         valueType: 'option',
         render: (_, record) => [
           <Button type="dashed" onClick={() => onModifyDataBase(record)}>
-            配置
+            {l('button.edit')}
           </Button>, <Button danger onClick={() => onDeleteDataBase(record)}>
-            删除
+            {l('button.delete')}
           </Button>
         ],
       },];
@@ -199,8 +202,8 @@ const StudioDataBase = (props: any) => {
     Modal.confirm({
       title: '删除数据源',
       content: `确定删除该数据源【${record.alias === "" ? record.name : record.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         await handleRemove('api/database', [record]);
         setRow({});

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

@@ -23,9 +23,13 @@ import {Drawer} from "antd";
 import ProDescriptions from '@ant-design/pro-descriptions';
 import {queryData} from "@/components/Common/crud";
 import {FragmentVariableTableListItem} from "@/pages/FragmentVariable/data";
+import {useIntl} from "umi";
 
 const StudioFragment = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {toolHeight, dispatch} = props;
   const [row, setRow] = useState<{}>();
 
@@ -113,7 +117,7 @@ const StudioFragment = (props: any) => {
       },
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
@@ -121,7 +125,7 @@ const StudioFragment = (props: any) => {
       hideInTable: true,
     },
     {
-      title: '最近更新时间',
+      title: l('global.table.lastUpdateTime'),
       dataIndex: 'updateTime',
       sorter: true,
       valueType: 'dateTime',

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

@@ -20,7 +20,7 @@
 
 import {Button, Empty, Modal, Select, Tabs, Tag, Tree} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import React, {useState} from "react";
 import {CodepenOutlined, DatabaseOutlined, DownOutlined, OrderedListOutlined, TableOutlined} from '@ant-design/icons';
 import {showMetaDataTable} from "@/components/Studio/StudioEvent/DDL";
@@ -36,6 +36,9 @@ const {TabPane} = Tabs;
 
 const StudioMetaData = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {database, toolHeight, dispatch} = props;
   const [databaseId, setDatabaseId] = useState<number>();
   const [treeData, setTreeData] = useState<[]>([]);
@@ -127,7 +130,7 @@ const StudioMetaData = (props: any) => {
           <Button key="back" onClick={() => {
             cancelHandle();
           }}>
-            关闭
+            {l('button.close')}
           </Button>,
         ]}
       >

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

@@ -19,8 +19,8 @@
 
 
 import {Button, Col, Empty, message, Modal, Row, Select, Tabs, Tooltip, Tree} from "antd";
-import {MetaStoreDataBaseType, MetaStoreTableType, StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {MetaStoreTableType, StateType} from "@/pages/DataStudio/model";
+import {connect, useIntl} from "umi";
 import React, {useState} from "react";
 import {
   AppstoreOutlined,
@@ -48,6 +48,9 @@ const {TabPane} = Tabs;
 
 const StudioMetaStore = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {current, toolHeight} = props;
   const [catalog, setCatalog] = useState<string>();
   const [database, setDatabase] = useState<string>();
@@ -287,7 +290,7 @@ const StudioMetaStore = (props: any) => {
           <Button key="back" onClick={() => {
             cancelHandle();
           }}>
-            关闭
+            {l('button.close')}
           </Button>,
         ]}
       >

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

@@ -30,7 +30,7 @@ import {
   MessageOutlined
 } from "@ant-design/icons";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect,useIntl} from "umi";
+import {connect, useIntl} from "umi";
 import StudioTree from "../StudioTree";
 import StudioConnector from "./StudioConnector";
 import StudioDataBase from "./StudioDataBase";
@@ -43,34 +43,39 @@ const {TabPane} = Tabs;
 
 const StudioLeftTool = (props: any) => {
 
-  const l = (id: string, defaultMessage?: string) => useIntl().formatMessage({id,defaultMessage})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const {toolHeight} = props;
 
   return (
     <Tabs defaultActiveKey="1" size="small" tabPosition="left" style={{height: toolHeight}}>
-      <TabPane tab={<span><BarsOutlined/> {l('pages.datastudio.label.directory','目录')}</span>} key="StudioTree">
+      <TabPane tab={<span><BarsOutlined/> {l('pages.datastudio.label.directory')}</span>} key="StudioTree">
         <StudioTree/>
       </TabPane>
-      <TabPane tab={<span><InsertRowAboveOutlined/> {l('pages.datastudio.label.structure','结构')}</span>} key="MetaStore">
+      <TabPane tab={<span><InsertRowAboveOutlined/> {l('pages.datastudio.label.structure')}</span>}
+               key="MetaStore">
         <StudioMetaStore/>
       </TabPane>
-      <TabPane tab={<span><MessageOutlined/> {l('pages.datastudio.label.session','会话')}</span>} key="Connectors">
+      <TabPane tab={<span><MessageOutlined/> {l('pages.datastudio.label.session')}</span>} key="Connectors">
         <StudioConnector/>
       </TabPane>
-      <TabPane tab={<span><ClusterOutlined/> {l('pages.datastudio.label.cluster','集群')}</span>} key="Cluster">
+      <TabPane tab={<span><ClusterOutlined/> {l('pages.datastudio.label.cluster')}</span>} key="Cluster">
         <StudioCluster/>
       </TabPane>
-      <TabPane tab={<span><DatabaseOutlined/> {l('pages.datastudio.label.datasource','数据源')}</span>} key="DataSource">
+      <TabPane tab={<span><DatabaseOutlined/> {l('pages.datastudio.label.datasource')}</span>}
+               key="DataSource">
         <StudioDataBase/>
       </TabPane>
-      <TabPane tab={<span><AppstoreOutlined/> {l('pages.datastudio.label.meta','元数据')}</span>} key="MetaData">
+      <TabPane tab={<span><AppstoreOutlined/> {l('pages.datastudio.label.meta')}</span>} key="MetaData">
         <StudioMetaData/>
       </TabPane>
-      <TabPane tab={<span><CloudOutlined/> {l('pages.datastudio.label.globalvariable','全局变量')}</span>} key="fragment">
+      <TabPane tab={<span><CloudOutlined/> {l('pages.datastudio.label.globalvariable')}</span>}
+               key="fragment">
         <StudioFragment/>
       </TabPane>
-      <TabPane tab={<span><FunctionOutlined/> {l('pages.datastudio.label.function','函数')}</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/StudioMenu/DolphinPush/index.tsx

@@ -18,19 +18,19 @@
  */
 
 import type {FormInstance} from 'antd/es/form';
-import {Button, Form, InputNumber, message, Select, Switch, Checkbox, Row, Col} from "antd";
+import {Button, Checkbox, Col, Form, InputNumber, message, Row, Select, Switch} from "antd";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
-import React, {useState, useEffect} from "react";
-import {
-  createTaskDefinition,
-  getTaskMainInfos,
-  updateTaskDefinition
-} from "@/pages/DataStudio/service";
+import {connect, useIntl} from "umi";
+import React, {useEffect, useState} from "react";
+import {createTaskDefinition, getTaskMainInfos, updateTaskDefinition} from "@/pages/DataStudio/service";
 import {CODE} from "@/components/Common/crud";
 import TextArea from "antd/es/input/TextArea";
 
 const DolphinPush = (props: any) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {data, taskCur, handleDolphinModalVisible} = props;
 
   const [options, setOptions] = useState([]);
@@ -196,7 +196,8 @@ const DolphinPush = (props: any) => {
       <Form.Item name={['timeoutFlag']} style={{marginBottom: 10}} label="超时告警" valuePropName="checked">
         <Switch checkedChildren="OPEN" unCheckedChildren="CLOSE" onChange={onSwitchChange}/>
       </Form.Item>
-      <Form.Item name={['timeoutNotifyStrategy']} style={{marginBottom: 10}} hidden={!timeoutFlagHidden} label="超时策略">
+      <Form.Item name={['timeoutNotifyStrategy']} style={{marginBottom: 10}} hidden={!timeoutFlagHidden}
+                 label="超时策略">
         <CheckboxGroup>
           <Row>
             <Col span={12}>

dlink-web/src/components/Studio/StudioMenu/StudioHelp/index.tsx

@@ -19,22 +19,28 @@
 
 
 import {Typography} from "antd";
+import {useIntl} from "umi";
 
 
-const { Title, Paragraph, Link } = Typography;
+const {Title, Paragraph, Link} = Typography;
 
 const StudioMsg = () => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   return (
     <Typography>
       <Title level={3}>欢迎大家加入 Dinky 的官方社区，共建共赢~ </Title>
       <Paragraph>
         <ul>
           <li>
-            <Link href="https://github.com/DataLinkDC/dlink" target="_blank">GitHub：https://github.com/DataLinkDC/dlink</Link>
+            <Link href="https://github.com/DataLinkDC/dlink"
+                  target="_blank">GitHub：https://github.com/DataLinkDC/dlink</Link>
           </li>
           <li>
-            <Link href="https://gitee.com/DataLinkDC/Dinky" target="_blank">Gitee: https://gitee.com/DataLinkDC/Dinky</Link>
+            <Link href="https://gitee.com/DataLinkDC/Dinky" target="_blank">Gitee:
+              https://gitee.com/DataLinkDC/Dinky</Link>
           </li>
           <li>
             公众号：DataLink数据中台

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

@@ -19,60 +19,68 @@
 
 
 import styles from "./index.less";
-import {Menu, Dropdown, Tooltip, Row, Col, notification, Modal, message} from "antd";
+import {Col, Menu, message, Modal, notification, Row, Tooltip} from "antd";
 import {
-  PauseCircleTwoTone, CarryOutTwoTone, DeleteTwoTone, PlayCircleTwoTone, CameraTwoTone, SnippetsTwoTone,
-  FileAddTwoTone, FolderOpenTwoTone, SafetyCertificateTwoTone, SaveTwoTone, FlagTwoTone, CodeTwoTone,
-  EnvironmentOutlined, SmileOutlined, RocketTwoTone, QuestionCircleTwoTone, MessageOutlined, ClusterOutlined
-  , EditTwoTone, RestTwoTone, ShrinkOutlined, ApiTwoTone, SendOutlined
+  ApiTwoTone,
+  CameraTwoTone,
+  CarryOutTwoTone,
+  ClusterOutlined,
+  CodeTwoTone,
+  DeleteTwoTone,
+  EditTwoTone,
+  EnvironmentOutlined,
+  FileAddTwoTone,
+  FlagTwoTone,
+  FolderOpenTwoTone,
+  MessageOutlined,
+  PauseCircleTwoTone,
+  PlayCircleTwoTone,
+  QuestionCircleTwoTone,
+  RestTwoTone,
+  RocketTwoTone,
+  SafetyCertificateTwoTone,
+  SaveTwoTone,
+  SendOutlined,
+  ShrinkOutlined,
+  SmileOutlined,
+  SnippetsTwoTone
 } from "@ant-design/icons";
-import Space from "antd/es/space";
 import Divider from "antd/es/divider";
 import Button from "antd/es/button/button";
 import Breadcrumb from "antd/es/breadcrumb/Breadcrumb";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {CODE, postDataArray} from "@/components/Common/crud";
 import {executeSql, getJobPlan, getTaskDefinition} from "@/pages/DataStudio/service";
 import TaskAPI from "@/pages/API/TaskAPI";
 import StudioHelp from "./StudioHelp";
 import StudioGraph from "./StudioGraph";
 import {
-  cancelTask, developTask,
+  cancelTask,
+  developTask,
   offLineTask,
-  onLineTask, recoveryTask,
+  onLineTask,
+  recoveryTask,
   releaseTask,
   showCluster,
   showTables
 } from "@/components/Studio/StudioEvent/DDL";
-import React, {useCallback, useEffect, useState, useRef} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import StudioExplain from "../StudioConsole/StudioExplain";
-import {
-  DIALECT,
-  isExecuteSql,
-  isOnline,
-  isRunningTask,
-  isSql,
-  isTask,
-} from "@/components/Studio/conf";
-import {
-  ModalForm,
-} from '@ant-design/pro-form';
+import {DIALECT, isExecuteSql, isOnline, isRunningTask, isSql, isTask,} from "@/components/Studio/conf";
+import {ModalForm,} from '@ant-design/pro-form';
 import SqlExport from "@/pages/DataStudio/SqlExport";
 import {Dispatch} from "@@/plugin-dva/connect";
 import StudioTabs from "@/components/Studio/StudioTabs";
 import {isDeletedTask, JOB_LIFE_CYCLE} from "@/components/Common/JobLifeCycle";
 import DolphinPush from "@/components/Studio/StudioMenu/DolphinPush";
 
-const menu = (
-  <Menu>
-    <Menu.Item>敬请期待</Menu.Item>
-  </Menu>
-);
-
 
 const StudioMenu = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {isFullScreen, tabs, current, currentPath, form, width, height, refs, dispatch, currentSession} = props;
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
   const [exportModalVisible, handleExportModalVisible] = useState<boolean>(false);
@@ -82,6 +90,12 @@ const StudioMenu = (props: any) => {
   const [graphData, setGraphData] = useState();
   const [dolphinData, setDolphinData] = useState();
 
+  const menu = (
+    <Menu>
+      <Menu.Item>敬请期待</Menu.Item>
+    </Menu>
+  );
+
   const onKeyDown = useCallback((e) => {
     if (e.keyCode === 83 && (e.ctrlKey === true || e.metaKey)) {
       e.preventDefault();
@@ -169,8 +183,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '异步提交作业',
       content: `确定异步提交作业【${current.task.alias}】到其配置的集群吗？请确认您的作业是否已经被保存！`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         let task = {
           id: current.task.id,
@@ -326,8 +340,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '发布作业',
       content: `确定发布作业【${current.task.alias}】吗？请确认您的作业是否已经被保存！`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = releaseTask(current.task.id);
         res.then((result) => {
@@ -346,8 +360,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '维护作业',
       content: `确定维护作业【${current.task.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = developTask(current.task.id);
         res.then((result) => {
@@ -364,8 +378,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '上线作业',
       content: `确定上线作业【${current.task.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = onLineTask(current.task.id);
         res.then((result) => {
@@ -385,8 +399,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '停止作业',
       content: `确定停止作业【${current.task.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = offLineTask(current.task.id, type);
         res.then((result) => {
@@ -408,8 +422,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '下线作业',
       content: `确定下线作业【${current.task.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = offLineTask(current.task.id, type);
         res.then((result) => {
@@ -429,8 +443,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '注销作业',
       content: `确定注销作业【${current.task.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = cancelTask(current.task.id);
         res.then((result) => {
@@ -449,8 +463,8 @@ const StudioMenu = (props: any) => {
     Modal.confirm({
       title: '恢复作业',
       content: `确定恢复作业【${current.task.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = recoveryTask(current.task.id);
         res.then((result) => {

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

@@ -18,36 +18,37 @@
  */
 
 
-import {connect,useIntl} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {
-  Form, InputNumber,Switch, Row, Col, Tooltip, Button,
-} from "antd";
-import {InfoCircleOutlined,MinusSquareOutlined} from "@ant-design/icons";
+import {Button, Col, Form, InputNumber, Row, Switch, Tooltip,} from "antd";
+import {InfoCircleOutlined, MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
-import { Scrollbars } from 'react-custom-scrollbars';
+import {Scrollbars} from 'react-custom-scrollbars';
 
 const StudioConfig = (props: any) => {
 
+
   const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
-  const {current,form,dispatch,tabs,toolHeight} = props;
+  const {current, form, dispatch, tabs, toolHeight} = props;
 
   form.setFieldsValue(current.task);
 
 
-  const onValuesChange = (change:any,all:any)=>{
+  const onValuesChange = (change: any, all: any) => {
     let newTabs = tabs;
-    for(let i=0;i<newTabs.panes.length;i++){
-      if(newTabs.panes[i].key==newTabs.activeKey){
-        for(let key in change){
-          newTabs.panes[i].task[key]=change[key];
+    for (let i = 0; i < newTabs.panes.length; i++) {
+      if (newTabs.panes[i].key == newTabs.activeKey) {
+        for (let key in change) {
+          newTabs.panes[i].task[key] = change[key];
         }
         break;
       }
     }
 
-    dispatch&&dispatch({
+    dispatch && dispatch({
       type: "Studio/saveTabs",
       payload: newTabs,
     });
@@ -61,61 +62,64 @@ const StudioConfig = (props: any) => {
             <Tooltip title="最小化">
               <Button
                 type="text"
-                icon={<MinusSquareOutlined />}
+                icon={<MinusSquareOutlined/>}
               />
             </Tooltip>
           </div>
         </Col>
       </Row>
-      <Scrollbars style={{height:(toolHeight-32)}}>
-    <Form
-      form={form}
-      layout="vertical"
-      className={styles.form_setting}
-      onValuesChange={onValuesChange}
-    >
-      <Row>
-        <Col span={12}>
-          <Form.Item
-            label="预览结果" className={styles.form_item} name="useResult" valuePropName="checked"
-            tooltip={{ title: '开启预览结果，将同步运行并返回数据结果', icon: <InfoCircleOutlined /> }}
-          >
-            <Switch checkedChildren="启用" unCheckedChildren="禁用"
-            />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item
-            label="打印流" className={styles.form_item} name="useChangeLog" valuePropName="checked"
-            tooltip={{ title: '开启打印流，将同步运行并返回含有 op 信息的 ChangeLog，默认不开启且返回最终结果 Table', icon: <InfoCircleOutlined /> }}
-          >
-            <Switch checkedChildren="启用" unCheckedChildren="禁用"
-            />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={12}>
-          <Form.Item
-            label="最大行数" className={styles.form_item} name="maxRowNum"
-            tooltip='预览数据的最大行数'
-          >
-            <InputNumber min={1} max={9999} defaultValue={100} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item
-            label="自动停止" className={styles.form_item} name="useAutoCancel" valuePropName="checked"
-            tooltip={{ title: '开启自动停止，将在捕获最大行数记录后自动停止任务', icon: <InfoCircleOutlined /> }}
-          >
-            <Switch checkedChildren="启用" unCheckedChildren="禁用"
-            />
-          </Form.Item>
-        </Col>
-      </Row>
-    </Form>
+      <Scrollbars style={{height: (toolHeight - 32)}}>
+        <Form
+          form={form}
+          layout="vertical"
+          className={styles.form_setting}
+          onValuesChange={onValuesChange}
+        >
+          <Row>
+            <Col span={12}>
+              <Form.Item
+                label="预览结果" className={styles.form_item} name="useResult" valuePropName="checked"
+                tooltip={{title: '开启预览结果，将同步运行并返回数据结果', icon: <InfoCircleOutlined/>}}
+              >
+                <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="打印流" className={styles.form_item} name="useChangeLog" valuePropName="checked"
+                tooltip={{
+                  title: '开启打印流，将同步运行并返回含有 op 信息的 ChangeLog，默认不开启且返回最终结果 Table',
+                  icon: <InfoCircleOutlined/>
+                }}
+              >
+                <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={12}>
+              <Form.Item
+                label="最大行数" className={styles.form_item} name="maxRowNum"
+                tooltip='预览数据的最大行数'
+              >
+                <InputNumber min={1} max={9999} defaultValue={100}/>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="自动停止" className={styles.form_item} name="useAutoCancel" valuePropName="checked"
+                tooltip={{title: '开启自动停止，将在捕获最大行数记录后自动停止任务', icon: <InfoCircleOutlined/>}}
+              >
+                <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
       </Scrollbars>
-      </>
+    </>
   );
 };
 

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

@@ -18,10 +18,10 @@
  */
 
 
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {Form, Switch, Row, Col,Tooltip, Button} from "antd";
-import {InfoCircleOutlined,MinusSquareOutlined} from "@ant-design/icons";
+import {Button, Col, Form, Row, Switch, Tooltip} from "antd";
+import {InfoCircleOutlined, MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
 import {useEffect} from "react";
 import {JarStateType} from "@/pages/Jar/model";
@@ -29,7 +29,10 @@ import {Scrollbars} from "react-custom-scrollbars";
 
 const StudioEnvSetting = (props: any) => {
 
-  const { current, form, dispatch, tabs, toolHeight} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, form, dispatch, tabs, toolHeight} = props;
 
   useEffect(() => {
     form.setFieldsValue(current.task);
@@ -77,7 +80,10 @@ const StudioEnvSetting = (props: any) => {
             <Col span={12}>
               <Form.Item
                 label="Fragment" className={styles.form_item} name="fragment" valuePropName="checked"
-                tooltip={{title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined/>}}
+                tooltip={{
+                  title: '【增强特性】 开启FlinkSql片段机制，使用“:=”进行定义（以“;”结束），“${}”进行调用',
+                  icon: <InfoCircleOutlined/>
+                }}
               >
                 <Switch checkedChildren="启用" unCheckedChildren="禁用"
                 />

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

@@ -18,50 +18,64 @@
  */
 
 
-import {Typography,Divider} from 'antd';
+import {Typography} from 'antd';
 import React from 'react';
-import {connect} from 'umi';
 import {StateType} from '@/pages/DataStudio/model';
 import {Scrollbars} from 'react-custom-scrollbars';
-import { history,useIntl } from 'umi';
+import {connect, history, useIntl} from 'umi';
 
-const {Title, Paragraph,Link, Text} = Typography;
+const {Title, Paragraph, Link, Text} = Typography;
 
 const StudioGuide = (props: any) => {
 
-  const l = (id: string, defaultMessage?: string) => useIntl().formatMessage({id,defaultMessage});
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const {toolHeight} = props;
 
   return (
     <Scrollbars style={{height: toolHeight}}>
-      <Typography style={{padding:'15px'}}>
-        <Title level={5}>{l('pages.datastudio.label.quickguide','快捷引导')}</Title>
+      <Typography style={{padding: '15px'}}>
+        <Title level={5}>{l('pages.datastudio.label.quickguide')}</Title>
         <Paragraph>
           <ul>
             <li>
-              <Link onClick={()=>{history.push('/registration/cluster/clusterInstance')}}>{l('pages.datastudio.label.registcluster','注册集群实例')}</Link>
+              <Link onClick={() => {
+                history.push('/registration/cluster/clusterInstance')
+              }}>{l('pages.datastudio.label.registcluster')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/cluster/clusterConfiguration')}}>{l('pages.datastudio.label.registclusterconfig','注册集群配置')}</Link>
+              <Link onClick={() => {
+                history.push('/registration/cluster/clusterConfiguration')
+              }}>{l('pages.datastudio.label.registclusterconfig')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/jar')}}>{l('pages.datastudio.label.registjar','注册 Jar')}</Link>
+              <Link onClick={() => {
+                history.push('/registration/jar')
+              }}>{l('pages.datastudio.label.registjar')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/database')}}>{l('pages.datastudio.label.registdatasource','注册数据源')}</Link>
+              <Link onClick={() => {
+                history.push('/registration/database')
+              }}>{l('pages.datastudio.label.registdatasource')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/registration/document')}}>{l('pages.datastudio.label.registdocument','注册文档')}</Link>
+              <Link onClick={() => {
+                history.push('/registration/document')
+              }}>{l('pages.datastudio.label.registdocument')}</Link>
             </li>
             <li>
-              <Link onClick={()=>{history.push('/settings')}}>{l('pages.datastudio.label.configsystemconfig','修改系统配置')}</Link>
+              <Link onClick={() => {
+                history.push('/settings')
+              }}>{l('pages.datastudio.label.configsystemconfig')}</Link>
             </li>
             <li>
-              <Link href="http://www.dlink.top/" target="_blank" >{l('pages.datastudio.label.officialdocumentation','官网文档')}</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>
+              <Link href="https://github.com/DataLinkDC/dlink" target="_blank">Github</Link>
             </li>
           </ul>
         </Paragraph>

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

@@ -27,7 +27,7 @@ import {handleOption, queryData} from "@/components/Common/crud";
 import {Scrollbars} from "react-custom-scrollbars";
 import {TaskHistoryTableListItem} from "@/components/Studio/StudioRightTool/StudioHistory/data";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import moment from "moment";
 import {MonacoDiffEditor} from "react-monaco-editor";
 
@@ -36,6 +36,10 @@ const url = '/api/task/version';
 
 
 const StudioHistory = (props: any) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {current, toolHeight} = props;
   const [row, setRow] = useState<TaskHistoryTableListItem>();
   const actionRef = useRef<ActionType>();
@@ -56,8 +60,8 @@ const StudioHistory = (props: any) => {
     let leftTitle = "Version：【" + versionDiffRow?.versionId + "】   创建时间: 【" + (moment(versionDiffRow?.createTime).format('YYYY-MM-DD HH:mm:ss')) + "】";
     let rightTitle = "Version：【当前编辑版本】 创建时间: 【" + (moment(current?.task?.createTime).format('YYYY-MM-DD HH:mm:ss')) + "】 最后更新时间: 【" + (moment(current?.task?.updateTime).format('YYYY-MM-DD HH:mm:ss')) + "】"
 
-    let originalValue= versionDiffRow?.statement;
-    let currentValue= current?.task?.statement;
+    let originalValue = versionDiffRow?.statement;
+    let currentValue = current?.task?.statement;
 
     return (
       <>
@@ -70,20 +74,21 @@ const StudioHistory = (props: any) => {
                  <Button key="back" onClick={() => {
                    cancelHandle();
                  }}>
-                   关闭
+                   {l('button.close')}
                  </Button>,
                ]}>
-          <div style={{display:"flex",flexDirection:"row", justifyContent: "space-between"}}>
-            <Tag color="green" style={{height:"20px"}} >
+          <div style={{display: "flex", flexDirection: "row", justifyContent: "space-between"}}>
+            <Tag color="green" style={{height: "20px"}}>
               <RocketOutlined/> {leftTitle}
             </Tag>
-            <Tag color="blue" style={{height:"20px"}}>
+            <Tag color="blue" style={{height: "20px"}}>
               <SyncOutlined spin/> {rightTitle}
             </Tag>
-          </div><br/>
+          </div>
+          <br/>
           <Scrollbars style={{height: "98%"}}>
             <React.StrictMode>
-              <MonacoDiffEditor  options={{
+              <MonacoDiffEditor options={{
                 readOnly: true,
                 selectOnLineNumbers: true,
                 lineDecorationsWidth: 20,
@@ -114,7 +119,7 @@ const StudioHistory = (props: any) => {
       },
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
@@ -122,7 +127,7 @@ const StudioHistory = (props: any) => {
       hideInSearch: true,
     },
     {
-      title: '操作',
+      title: l('global.table.operate'),
       valueType: 'option',
       align: "center",
       render: (text, record, index) => (
@@ -143,8 +148,8 @@ const StudioHistory = (props: any) => {
     Modal.confirm({
       title: '回滚Flink SQL版本',
       content: `确定回滚Flink SQL版本至【${row.versionId}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const TaskHistoryRollbackItem = {
           id: current.key, versionId: row.versionId

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

@@ -18,15 +18,14 @@
  */
 
 
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {Form, InputNumber, Input, Select, Tag, Row, Col, Badge, Tooltip, Button, Space, Upload, message} from "antd";
+import {Button, Col, Form, Input, InputNumber, message, Row, Select, Space, Tag, Tooltip, Upload} from "antd";
 import {
   InfoCircleOutlined,
-  PlusOutlined,
-  MinusSquareOutlined,
   MinusCircleOutlined,
-  PaperClipOutlined,
+  MinusSquareOutlined,
+  PlusOutlined,
   UploadOutlined
 } from "@ant-design/icons";
 import styles from "./index.less";
@@ -35,15 +34,15 @@ import {JarStateType} from "@/pages/Jar/model";
 import {Scrollbars} from "react-custom-scrollbars";
 import {RUN_MODE} from "@/components/Studio/conf";
 import {CODE} from "@/components/Common/crud";
-import {
-  getConfigFormValues,
-  getHadoopConfigPathFromClusterConfigurationsById
-} from "@/pages/ClusterConfiguration/function";
+import {getHadoopConfigPathFromClusterConfigurationsById} from "@/pages/ClusterConfiguration/function";
 
 const {Option} = Select;
 
 const StudioJarSetting = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {clusterConfiguration, current, form, dispatch, tabs, jars, toolHeight} = props;
   const [hadoopConfigPath, setHadoopConfigPath] = useState<string | undefined>(undefined);
   const [jarPath, setJarPath] = useState<string | undefined>(undefined);

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

@@ -18,10 +18,10 @@
  */
 
 
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {Form, Input, Select,  Row, Col,  Tooltip, Button} from "antd";
-import {  MinusSquareOutlined} from "@ant-design/icons";
+import {Button, Col, Form, Input, Row, Select, Tooltip} from "antd";
+import {MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
 import {useEffect} from "react";
 import {JarStateType} from "@/pages/Jar/model";
@@ -33,7 +33,10 @@ const {Option} = Select;
 
 const StudioKubernetesConfig = (props: any) => {
 
-  const { current, form, dispatch, tabs, group, toolHeight} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, form, dispatch, tabs, group, toolHeight} = props;
 
 
   const getGroupOptions = () => {
@@ -50,7 +53,7 @@ const StudioKubernetesConfig = (props: any) => {
 
   useEffect(() => {
     //Force set type k8s
-    current.task.type=RUN_MODE.KUBERNETES_APPLICATION
+    current.task.type = RUN_MODE.KUBERNETES_APPLICATION
     form.setFieldsValue(current.task);
   }, [current.task]);
 
@@ -132,7 +135,7 @@ const StudioKubernetesConfig = (props: any) => {
   );
 };
 
-export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType , Alert: AlertStateType }) => ({
+export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType, Alert: AlertStateType }) => ({
   sessionCluster: Studio.sessionCluster,
   clusterConfiguration: Studio.clusterConfiguration,
   current: Studio.current,

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

@@ -20,23 +20,27 @@
 
 import React, {useRef, useState} from "react";
 import {MinusSquareOutlined} from '@ant-design/icons';
-import {ActionType, ProColumns} from "@ant-design/pro-table";
-import {Drawer,Row,Col,Tooltip,Button} from 'antd';
-import ProTable from '@ant-design/pro-table';
+import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
+import {Button, Col, Drawer, Row, Tooltip} from 'antd';
 import ProDescriptions from '@ant-design/pro-descriptions';
 import {queryData} from "@/components/Common/crud";
 import {SavePointTableListItem} from "@/components/Studio/StudioRightTool/StudioSavePoint/data";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
-import { Scrollbars } from 'react-custom-scrollbars';
+import {connect, useIntl} from "umi";
+import {Scrollbars} from 'react-custom-scrollbars';
 
 const url = '/api/savepoints';
 const StudioSavePoint = (props: any) => {
-  const {current,toolHeight,dispatch} = props;
+
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, toolHeight, dispatch} = props;
   const [row, setRow] = useState<SavePointTableListItem>();
   const actionRef = useRef<ActionType>();
 
-  if(current.key){
+  if (current.key) {
     actionRef.current?.reloadAndRest?.();
   }
 
@@ -81,7 +85,7 @@ const StudioSavePoint = (props: any) => {
       hideInSearch: true,
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
@@ -101,19 +105,19 @@ const StudioSavePoint = (props: any) => {
             <Tooltip title="最小化">
               <Button
                 type="text"
-                icon={<MinusSquareOutlined />}
+                icon={<MinusSquareOutlined/>}
               />
             </Tooltip>
           </div>
         </Col>
       </Row>
-      <Scrollbars  style={{height:(toolHeight-32)}}>
-      <ProTable<SavePointTableListItem>
-        actionRef={actionRef}
-        rowKey="id"
-        request={(params, sorter, filter) => queryData(url, {taskId:current.key,...params, sorter, filter})}
-        columns={columns}
-        search={false}
+      <Scrollbars style={{height: (toolHeight - 32)}}>
+        <ProTable<SavePointTableListItem>
+          actionRef={actionRef}
+          rowKey="id"
+          request={(params, sorter, filter) => queryData(url, {taskId: current.key, ...params, sorter, filter})}
+          columns={columns}
+          search={false}
         />
         <Drawer
           width={600}
@@ -128,21 +132,21 @@ const StudioSavePoint = (props: any) => {
               column={2}
               title={row?.name}
               request={async () => ({
-              data: row || {},
-            })}
+                data: row || {},
+              })}
               params={{
-              id: row?.name,
-            }}
+                id: row?.name,
+              }}
               columns={columns}
-              />
-              )}
+            />
+          )}
         </Drawer>
       </Scrollbars>
     </>
-);
+  );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   toolHeight: Studio.toolHeight,
 }))(StudioSavePoint);

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

@@ -18,10 +18,16 @@
  */
 
 
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {Form, InputNumber, Input, Switch, Select, Tag, Row, Col, Badge, Tooltip, Button, Typography, Space} from "antd";
-import {InfoCircleOutlined, PlusOutlined, MinusSquareOutlined, MinusCircleOutlined,PaperClipOutlined} from "@ant-design/icons";
+import {Badge, Button, Col, Form, Input, InputNumber, Row, Select, Space, Switch, Tag, Tooltip, Typography} from "antd";
+import {
+  InfoCircleOutlined,
+  MinusCircleOutlined,
+  MinusSquareOutlined,
+  PaperClipOutlined,
+  PlusOutlined
+} from "@ant-design/icons";
 import styles from "./index.less";
 import {useEffect} from "react";
 import {showTables} from "@/components/Studio/StudioEvent/DDL";
@@ -35,12 +41,27 @@ const {Text} = Typography;
 
 const StudioSetting = (props: any) => {
 
-  const {sessionCluster, clusterConfiguration, current, form, dispatch, tabs, currentSession, env,group, toolHeight} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {
+    sessionCluster,
+    clusterConfiguration,
+    current,
+    form,
+    dispatch,
+    tabs,
+    currentSession,
+    env,
+    group,
+    toolHeight
+  } = props;
 
   const getClusterOptions = () => {
     const itemList = [];
     for (const item of sessionCluster) {
-      const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+      const tag = (<><Tag
+        color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
       itemList.push(<Option key={item.id} value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -51,7 +72,8 @@ const StudioSetting = (props: any) => {
   const getClusterConfigurationOptions = () => {
     const itemList = [];
     for (const item of clusterConfiguration) {
-      const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+      const tag = (<><Tag
+        color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
       itemList.push(<Option key={item.id} value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -65,7 +87,7 @@ const StudioSetting = (props: any) => {
     </Option>];
     for (const item of env) {
       const tag = (<>{item.enabled ? <Badge status="success"/> : <Badge status="error"/>}
-        {item.fragment ? <PaperClipOutlined /> : undefined}{item.alias}</>);
+        {item.fragment ? <PaperClipOutlined/> : undefined}{item.alias}</>);
       itemList.push(<Option key={item.id} value={item.id} label={tag}>
         {tag}
       </Option>)
@@ -147,7 +169,8 @@ const StudioSetting = (props: any) => {
           {(current.task.type === RUN_MODE.YARN_SESSION || current.task.type === RUN_MODE.KUBERNETES_SESSION || current.task.type === RUN_MODE.STANDALONE) ? (
             <Row>
               <Col span={24}>
-                <Form.Item label="Flink集群" tooltip={`选择Flink集群进行 ${current.task.type} 模式的远程提交任务`} name="clusterId"
+                <Form.Item label="Flink集群" tooltip={`选择Flink集群进行 ${current.task.type} 模式的远程提交任务`}
+                           name="clusterId"
                            className={styles.form_item}>
                   {
                     currentSession.session ?
@@ -167,10 +190,11 @@ const StudioSetting = (props: any) => {
                 </Form.Item>
               </Col>
             </Row>) : undefined}
-          {(current.task.type === RUN_MODE.YARN_PER_JOB || current.task.type === RUN_MODE.YARN_APPLICATION|| current.task.type === RUN_MODE.KUBERNETES_APPLICATION) ? (
+          {(current.task.type === RUN_MODE.YARN_PER_JOB || current.task.type === RUN_MODE.YARN_APPLICATION || current.task.type === RUN_MODE.KUBERNETES_APPLICATION) ? (
             <Row>
               <Col span={24}>
-                <Form.Item label="Flink集群配置" tooltip={`选择Flink集群配置进行 ${current.task.type} 模式的远程提交任务`}
+                <Form.Item label="Flink集群配置"
+                           tooltip={`选择Flink集群配置进行 ${current.task.type} 模式的远程提交任务`}
                            name="clusterConfigurationId"
                            className={styles.form_item}>
                   <Select
@@ -223,7 +247,10 @@ const StudioSetting = (props: any) => {
             <Col span={12}>
               <Form.Item
                 label="全局变量" className={styles.form_item} name="fragment" valuePropName="checked"
-                tooltip={{title: '【增强特性】 开启FlinkSql全局变量，使用“:=”进行定义（以“;”结束），“${}”进行调用', icon: <InfoCircleOutlined/>}}
+                tooltip={{
+                  title: '【增强特性】 开启FlinkSql全局变量，使用“:=”进行定义（以“;”结束），“${}”进行调用',
+                  icon: <InfoCircleOutlined/>
+                }}
               >
                 <Switch checkedChildren="启用" unCheckedChildren="禁用"
                 />
@@ -316,7 +343,7 @@ const StudioSetting = (props: any) => {
   );
 };
 
-export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType , Alert: AlertStateType }) => ({
+export default connect(({Studio, Jar, Alert}: { Studio: StateType, Jar: JarStateType, Alert: AlertStateType }) => ({
   sessionCluster: Studio.sessionCluster,
   clusterConfiguration: Studio.clusterConfiguration,
   current: Studio.current,

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

@@ -18,39 +18,38 @@
  */
 
 
-import {connect,useIntl} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {
-  Form, InputNumber, Select, Tag, Row, Col,  Tooltip, Button,
-} from "antd";
+import {Button, Col, Form, InputNumber, Row, Select, Tag, Tooltip,} from "antd";
 import {MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
-import {useEffect, useState} from "react";
-import { Scrollbars } from 'react-custom-scrollbars';
+import {Scrollbars} from 'react-custom-scrollbars';
 
-const { Option } = Select;
+const {Option} = Select;
 
 const StudioSqlConfig = (props: any) => {
 
+
   const intl = useIntl();
-  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
-  const {current,form,dispatch,tabs,database,toolHeight} = props;
+  const {current, form, dispatch, tabs, database, toolHeight} = props;
 
   form.setFieldsValue(current.task);
 
-  const onValuesChange = (change:any,all:any)=>{
+  const onValuesChange = (change: any, all: any) => {
     let newTabs = tabs;
-    for(let i=0;i<newTabs.panes.length;i++){
-      if(newTabs.panes[i].key==newTabs.activeKey){
-        for(let key in change){
-          newTabs.panes[i].task[key]=change[key];
+    for (let i = 0; i < newTabs.panes.length; i++) {
+      if (newTabs.panes[i].key == newTabs.activeKey) {
+        for (let key in change) {
+          newTabs.panes[i].task[key] = change[key];
         }
         break;
       }
     }
 
-    dispatch&&dispatch({
+    dispatch && dispatch({
       type: "Studio/saveTabs",
       payload: newTabs,
     });
@@ -60,8 +59,9 @@ const StudioSqlConfig = (props: any) => {
   const getDataBaseOptions = () => {
     const itemList = [];
     for (const item of database) {
-      if(item.type.toUpperCase() === current.task.dialect.toUpperCase()) {
-        const tag = (<><Tag color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
+      if (item.type.toUpperCase() === current.task.dialect.toUpperCase()) {
+        const tag = (<><Tag
+          color={item.enabled ? "processing" : "error"}>{item.type}</Tag>{item.alias === "" ? item.name : item.alias}</>);
         itemList.push(<Option key={item.id} value={item.id} label={tag}>
           {tag}
         </Option>)
@@ -78,45 +78,45 @@ const StudioSqlConfig = (props: any) => {
             <Tooltip title="最小化">
               <Button
                 type="text"
-                icon={<MinusSquareOutlined />}
+                icon={<MinusSquareOutlined/>}
               />
             </Tooltip>
           </div>
         </Col>
       </Row>
-      <Scrollbars style={{height:(toolHeight-32)}}>
-    <Form
-      form={form}
-      layout="vertical"
-      className={styles.form_setting}
-      onValuesChange={onValuesChange}
-    >
-      <Row>
-        <Col span={24}>
-          <Form.Item label={l('pages.datastudio.label.datasource','数据源')} tooltip={`选择 Sql 语句执行的数据源`}
-                     name="databaseId"
-                     className={styles.form_item}>
-            <Select
-              style={{width: '100%'}}
-              placeholder="选择数据源"
-              optionLabelProp="label"
-            >
-              {getDataBaseOptions()}
-            </Select>
-          </Form.Item>
-        </Col>
-        <Col span={24}>
-          <Form.Item
-            label={l('pages.datastudio.label.maxrows','最大行数')}  className={styles.form_item} name="maxRowNum"
-            tooltip='预览数据的最大行数'
-          >
-            <InputNumber min={1} max={9999} defaultValue={100} />
-          </Form.Item>
-        </Col>
-      </Row>
-    </Form>
+      <Scrollbars style={{height: (toolHeight - 32)}}>
+        <Form
+          form={form}
+          layout="vertical"
+          className={styles.form_setting}
+          onValuesChange={onValuesChange}
+        >
+          <Row>
+            <Col span={24}>
+              <Form.Item label={l('pages.datastudio.label.datasource')} tooltip={`选择 Sql 语句执行的数据源`}
+                         name="databaseId"
+                         className={styles.form_item}>
+                <Select
+                  style={{width: '100%'}}
+                  placeholder="选择数据源"
+                  optionLabelProp="label"
+                >
+                  {getDataBaseOptions()}
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label={l('pages.datastudio.label.maxrows')} className={styles.form_item} name="maxRowNum"
+                tooltip='预览数据的最大行数'
+              >
+                <InputNumber min={1} max={9999} defaultValue={100}/>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
       </Scrollbars>
-      </>
+    </>
   );
 };
 

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

@@ -18,11 +18,9 @@
  */
 
 
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {
-  Form, Row, Col, Tooltip, Button, Input, Descriptions, Typography
-} from "antd";
+import {Button, Col, Descriptions, Form, Input, Row, Tooltip, Typography} from "antd";
 import {MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
 import {Scrollbars} from 'react-custom-scrollbars';
@@ -32,6 +30,9 @@ const {Paragraph} = Typography;
 
 const StudioTaskInfo = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {current, form, dispatch, tabs, toolHeight} = props;
 
   form.setFieldsValue(current.task);

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

@@ -18,10 +18,10 @@
  */
 
 
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {StateType} from "@/pages/DataStudio/model";
-import {Form, Switch, Row, Col, Tooltip, Button, Input} from "antd";
-import {InfoCircleOutlined,MinusSquareOutlined} from "@ant-design/icons";
+import {Button, Col, Form, Input, Row, Tooltip} from "antd";
+import {MinusSquareOutlined} from "@ant-design/icons";
 import styles from "./index.less";
 import {useEffect} from "react";
 import {JarStateType} from "@/pages/Jar/model";
@@ -29,7 +29,10 @@ import {Scrollbars} from "react-custom-scrollbars";
 
 const StudioUDFInfo = (props: any) => {
 
-  const { current, form, toolHeight} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {current, form, toolHeight} = props;
 
   useEffect(() => {
     form.setFieldsValue(current.task);

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

@@ -19,9 +19,9 @@
 
 
 import {Tabs} from "antd";
-import {SettingOutlined, ScheduleOutlined, ContainerOutlined} from "@ant-design/icons";
+import {ContainerOutlined, ScheduleOutlined, SettingOutlined} from "@ant-design/icons";
 import {StateType} from "@/pages/DataStudio/model";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import StudioConfig from "./StudioConfig";
 import StudioSetting from "./StudioSetting";
 import StudioSavePoint from "./StudioSavePoint";
@@ -39,6 +39,9 @@ const {TabPane} = Tabs;
 
 const StudioRightTool = (props: any) => {
 
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {current, form, toolHeight} = props;
 
   const renderContent = () => {
@@ -121,8 +124,8 @@ const StudioRightTool = (props: any) => {
       <TabPane tab={<span><ScheduleOutlined/> 保存点</span>} key="StudioSavePoint">
         <StudioSavePoint/>
       </TabPane>
-      <TabPane tab={<span><ScheduleOutlined /> 版本历史</span>} key="StudioHistory" >
-        <StudioHistory />
+      <TabPane tab={<span><ScheduleOutlined/> 版本历史</span>} key="StudioHistory">
+        <StudioHistory/>
       </TabPane>
     </>)
   };

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

@@ -20,7 +20,7 @@
 
 import {Dropdown, Menu, message, Tabs} from 'antd';
 import React from 'react';
-import {connect} from 'umi';
+import {connect, useIntl} from 'umi';
 import {StateType} from '@/pages/DataStudio/model';
 import styles from './index.less';
 import StudioEdit from '../StudioEdit';
@@ -32,6 +32,10 @@ import StudioKubernetes from "@/components/Studio/StudioKubernetes";
 const {TabPane} = Tabs;
 
 const EditorTabs = (props: any) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {tabs, current, toolHeight, width, height} = props;
 
   const onChange = (activeKey: any) => {

dlink-web/src/components/Studio/StudioTree/components/SimpleTaskForm.tsx

@@ -23,6 +23,7 @@ import {Button, Form, Input, Modal, Select} from 'antd';
 
 import type {TaskTableListItem} from '../data.d';
 import {DIALECT} from "@/components/Studio/conf";
+import {useIntl} from "umi";
 
 const {Option} = Select;
 
@@ -40,6 +41,10 @@ const formLayout = {
 };
 
 const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const [formVals, setFormVals] = useState<Partial<TaskTableListItem>>({
     id: props.values.id,
     name: props.values.name,
@@ -66,7 +71,7 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
   const renderContent = () => {
     return (
       <>
-        {isCreate?(<Form.Item
+        {isCreate ? (<Form.Item
           label="作业类型" name="dialect"
           tooltip='指定作业类型，默认为 FlinkSql'
         >
@@ -87,7 +92,7 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
             <Option value={DIALECT.JAVA}>{DIALECT.JAVA}</Option>
             <Option value={DIALECT.SQL}>{DIALECT.SQL}</Option>
           </Select>
-        </Form.Item>):undefined}
+        </Form.Item>) : undefined}
         <Form.Item
           name="name"
           label="名称"
@@ -109,7 +114,7 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
       <>
         <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

dlink-web/src/components/Studio/StudioTree/components/UpdateCatalogueForm.tsx

@@ -22,6 +22,7 @@ import React, {useState} from 'react';
 import {Button, Form, Input, Modal} from 'antd';
 
 import type {CatalogueTableListItem} from '../data.d';
+import {useIntl} from "umi";
 
 export type UpdateFormProps = {
   onCancel: (flag?: boolean, formVals?: Partial<CatalogueTableListItem>) => void;
@@ -38,6 +39,11 @@ const formLayout = {
 };
 
 const UpdateCatalogueForm: React.FC<UpdateFormProps> = (props) => {
+
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const [formVals, setFormVals] = useState<Partial<CatalogueTableListItem>>({
     id: props.values.id,
     taskId: props.values.taskId,
@@ -80,7 +86,7 @@ const UpdateCatalogueForm: React.FC<UpdateFormProps> = (props) => {
       <>
         <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

dlink-web/src/components/Studio/StudioTree/components/UploadModal.tsx

@@ -19,33 +19,39 @@
 
 
 import React from 'react';
-import {Button, message,Modal,Upload} from "antd";
+import {Button, message, Modal, Upload} from "antd";
 import {UploadOutlined} from "@ant-design/icons";
+import {useIntl} from "umi";
 
 interface UploadModalProps {
   visible: boolean;
   action: string;
-  handleOk: ()=>void;
-  onCancel: ()=>void;
+  handleOk: () => void;
+  onCancel: () => void;
   buttonTitle: string;
 }
 
-const UploadModal:React.FC<UploadModalProps> = (props:any) => {
-  const {visible,handleOk,onCancel,action,buttonTitle} = props;
+const UploadModal: React.FC<UploadModalProps> = (props: any) => {
+
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {visible, handleOk, onCancel, action, buttonTitle} = props;
   const handlers = {
     name: 'file',
     action: action,
     maxCount: 1,
     multiple: true,
-    onChange(info:any) {
+    onChange(info: any) {
       if (info.file.status !== 'uploading') {
         console.log(info.file, info.fileList);
       }
       if (info.file.status === 'done') {
-        console.log('info:',info);
-        if(info.file.response.code === 1){
+        console.log('info:', info);
+        if (info.file.response.code === 1) {
           message.error(`${info.file.response.msg} `);
-        }else{
+        } else {
           message.success(`${info.file.name} file uploaded successfully`);
         }
       } else if (info.file.status === 'error') {
@@ -62,7 +68,7 @@ const UploadModal:React.FC<UploadModalProps> = (props:any) => {
              maskClosable={false}
       >
         <Upload {...handlers}>
-          <Button size="small" icon={<UploadOutlined />}>{buttonTitle}</Button>
+          <Button size="small" icon={<UploadOutlined/>}>{buttonTitle}</Button>
         </Upload>
       </Modal>
     </div>

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

@@ -19,7 +19,7 @@
 
 
 import React, {Key, useEffect, useState} from "react";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import {DownloadOutlined, DownOutlined, FolderAddOutlined, SwitcherOutlined, UploadOutlined} from "@ant-design/icons";
 import type {UploadProps} from 'antd';
 import {Button, Col, Empty, Input, Menu, message, Modal, Row, Tooltip, Tree, Upload} from 'antd';
@@ -94,6 +94,10 @@ const {DirectoryTree} = Tree;
 const {Search} = Input;
 
 const StudioTree: React.FC<StudioTreeProps> = (props) => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const {rightClickMenu, dispatch, tabs, refs, toolHeight} = props;
   const [treeData, setTreeData] = useState<TreeDataNode[]>();
   const [expandedKeys, setExpandedKeys] = useState<Key[]>();
@@ -291,8 +295,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     Modal.confirm({
       title: '提交作业',
       content: '确定提交该作业到其配置的集群吗？',
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         let task = {
           id: node?.taskId,
@@ -409,8 +413,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     Modal.confirm({
       title: `删除${label}`,
       content: `确定删除该${label}【${node?.name}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         await handleRemoveById('/api/catalogue', node!.id);
         if (node?.taskId) {
@@ -434,36 +438,36 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     let menuItems;
     if (rightClickNode && rightClickNode.isLeaf) {
       menuItems = (<>
-        <Menu.Item key='Open'>{'打开'}</Menu.Item>
-        <Menu.Item key='Submit'>{'异步提交'}</Menu.Item>
-        <Menu.Item key='ExportJson'>{'导出Json'}</Menu.Item>
-        <Menu.Item key='Rename'>{'重命名'}</Menu.Item>
-        <Menu.Item key='Copy'>{'复制'}</Menu.Item>
-        <Menu.Item key='Cut'>{'剪切'}</Menu.Item>
-        {cutId && <Menu.Item key='Paste'>{'粘贴'}</Menu.Item>}
-        <Menu.Item key='Delete'>{'删除'}</Menu.Item>
+        <Menu.Item key='Open'>{l('right.menu.open')}</Menu.Item>
+        <Menu.Item key='Submit'>{l('right.menu.submit')}</Menu.Item>
+        <Menu.Item key='ExportJson'>{l('right.menu.exportJson')}</Menu.Item>
+        <Menu.Item key='Rename'>{l('right.menu.rename')}</Menu.Item>
+        <Menu.Item key='Copy'>{l('right.menu.copy')}</Menu.Item>
+        <Menu.Item key='Cut'>{l('right.menu.cut')}</Menu.Item>
+        {cutId && <Menu.Item key='Paste'>{l('right.menu.paste')}</Menu.Item>}
+        <Menu.Item key='Delete'>{l('right.menu.delete')}</Menu.Item>
       </>)
     } else if (rightClickNode && rightClickNode.children && rightClickNode.children.length > 0) {
       menuItems = (<>
-        <Menu.Item key='CreateCatalogue'>{'创建目录'}</Menu.Item>
-        <Menu.Item key='CreateRootCatalogue'>{'创建根目录'}</Menu.Item>
-        <Menu.Item key='ShowUploadModal'>{'上传zip包创建工程'}</Menu.Item>
-        <Menu.Item key='CreateTask'>{'创建作业'}</Menu.Item>
-        <Menu.Item key='Rename'>{'重命名'}</Menu.Item>
-        <Menu.Item key='Copy'>{'复制'}</Menu.Item>
-        <Menu.Item key='Cut'>{'剪切'}</Menu.Item>
-        {cutId && <Menu.Item key='Paste'>{'粘贴'}</Menu.Item>}
-        <Menu.Item disabled>{'删除'}</Menu.Item>
+        <Menu.Item key='CreateCatalogue'>{l('right.menu.createCatalogue')}</Menu.Item>
+        <Menu.Item key='CreateRootCatalogue'>{l('right.menu.createRootCatalogue')}</Menu.Item>
+        <Menu.Item key='ShowUploadModal'>{l('right.menu.uploadZipToCreate')}</Menu.Item>
+        <Menu.Item key='CreateTask'>{l('right.menu.createTask')}</Menu.Item>
+        <Menu.Item key='Rename'>{l('right.menu.rename')}</Menu.Item>
+        <Menu.Item key='Copy'>{l('right.menu.copy')}</Menu.Item>
+        <Menu.Item key='Cut'>{l('right.menu.cut')}</Menu.Item>
+        {cutId && <Menu.Item key='Paste'>{l('right.menu.paste')}</Menu.Item>}
+        <Menu.Item disabled>{l('right.menu.delete')}</Menu.Item>
       </>)
     } else {
       menuItems = (<>
-        <Menu.Item key='CreateCatalogue'>{'创建目录'}</Menu.Item>
-        <Menu.Item key='CreateTask'>{'创建作业'}</Menu.Item>
-        <Menu.Item key='Rename'>{'重命名'}</Menu.Item>
-        <Menu.Item key='Copy'>{'复制'}</Menu.Item>
-        <Menu.Item key='Cut'>{'剪切'}</Menu.Item>
-        {cutId && <Menu.Item key='Paste'>{'粘贴'}</Menu.Item>}
-        <Menu.Item key='Delete'>{'删除'}</Menu.Item>
+        <Menu.Item key='CreateCatalogue'>{l('right.menu.createCatalogue')}</Menu.Item>
+        <Menu.Item key='CreateTask'>{l('right.menu.createTask')}</Menu.Item>
+        <Menu.Item key='Rename'>{l('right.menu.rename')}</Menu.Item>
+        <Menu.Item key='Copy'>{l('right.menu.copy')}</Menu.Item>
+        <Menu.Item key='Cut'>{l('right.menu.cut')}</Menu.Item>
+        {cutId && <Menu.Item key='Paste'>{l('right.menu.paste')}</Menu.Item>}
+        <Menu.Item key='Delete'>{l('right.menu.delete')}</Menu.Item>
       </>)
     }
     const menu = (
@@ -486,7 +490,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
         isLeaf: false,
         parentId: 0,
       });
-    }}>创建目录</Button></Empty>);
+    }}>{l('button.createDir')}</Button></Empty>);
     return (treeData && treeData.length == 0) ? empty : '';
   };
 

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

@@ -19,7 +19,7 @@
 
 
 import React, {useCallback, useEffect, useState} from "react";
-import {connect} from "umi";
+import {connect, useIntl} from "umi";
 import styles from './index.less';
 import StudioMenu from "./StudioMenu";
 import {Card, Col, Form, Row} from "antd";
@@ -46,7 +46,10 @@ import {loadSettings} from "@/pages/SettingCenter/FlinkSettings/function";
 
 const Studio = (props: any) => {
 
-  const {isFullScreen,rightClickMenu, toolHeight, toolLeftWidth,toolRightWidth,dispatch} = props;
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  const {isFullScreen, rightClickMenu, toolHeight, toolLeftWidth, toolRightWidth, dispatch} = props;
   const [form] = Form.useForm();
   const VIEW = {
     leftToolWidth: 300,
@@ -124,7 +127,7 @@ const Studio = (props: any) => {
             <DraggleLayout
               containerWidth={size.width}
               containerHeight={toolHeight}
-              min={VIEW.leftMargin+VIEW.midMargin}
+              min={VIEW.leftMargin + VIEW.midMargin}
               max={size.width - VIEW.rightMargin}
               initLeftWidth={size.width - toolRightWidth}
               isLeft={false}
@@ -163,7 +166,7 @@ const Studio = (props: any) => {
                   }}/>
                 </Col>
                 <Col>
-                  {!isFullScreen?<StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/>:undefined}
+                  {!isFullScreen ? <StudioTabs width={size.width - toolRightWidth - toolLeftWidth}/> : undefined}
                 </Col>
               </DraggleLayout>
               <Col id='StudioRightTool' className={styles["vertical-tabs"]}>

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

@@ -26,6 +26,7 @@ import request from './en-US/request';
 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/settings';
 import button from './en-US/button';
+import shortKey from './en-US/shortcutKey';
 
 export default {
   'navBar.lang': 'Languages',
@@ -45,4 +46,5 @@ export default {
   ...pages,
   ...request,
   ...button,
+  ...shortKey,
 };

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

@@ -38,11 +38,27 @@ export default {
   'button.disable': 'Disable',
   'button.reset': 'Reset',
   'button.search': 'Search',
+  'button.upload': 'Upload',
+  'button.import': 'Import',
+  'button.export': 'Export',
+  'button.submit': 'Submit',
 
+  'right.menu.open': 'Open',
+  'right.menu.submit': 'Sync Submit',
+  'right.menu.exportJson': 'Export JSON',
+  'right.menu.rename': 'Rename',
+  'right.menu.copy': 'Copy',
+  'right.menu.cut': 'Cut',
+  'right.menu.paste': 'Paste',
+  'right.menu.delete': 'Delete',
+  'right.menu.createCatalogue': 'Creat Dire',
+  'right.menu.createRootCatalogue': 'Create Root Dir',
+  'right.menu.uploadZipToCreate': 'Upload Zip To Create',
+  'right.menu.createTask': 'Create Task',
 
-  'tips.selected': 'Selected',
+
+  'tips.selected': 'Selected {total} Item',
   'tips.notSelected': 'Not Select',
-  'tips.item': 'Item',
 
   'status.enabled': 'Enabled',
   'status.disabled': 'Disabled',

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

@@ -34,7 +34,7 @@ export default {
   'component.noticeIcon.empty': 'No notifications',
   'component.noticeIcon.view-more': 'View more',
 
-  'global.table.operate': 'Operate',
+  'global.table.operate': 'Operation',
   'global.table.config': 'Config',
   'global.table.edit': 'Edit',
   'global.table.delete': 'Delete',
@@ -50,9 +50,9 @@ export default {
   'global.table.registType.manual': 'Manual',
   'global.table.registType.automatic': 'Automatic',
 
-  'global.table.isUse': 'Is Use',
-  'global.table.inUse': 'In Use',
-  'global.table.notUse': 'Not Use',
+  'global.table.isEnable': 'Is Enable',
+  'global.table.enabled': 'Enabled',
+  'global.table.disabled': 'Disabled',
 
   'global.table.status': 'Status',
   'global.table.status.normal': 'Normal',
@@ -95,8 +95,4 @@ export default {
   'global.table.runmode': 'Run Mode',
 
 
-
-
-
-
 };

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

@@ -70,7 +70,7 @@ export default {
   'menu.account.settings': 'Account Settings',
   'menu.account.changePassword': 'Change Password',
   'menu.account.checkTenant': 'Check Tenant',
-  'menu.account.checkTenantConfirm': 'Are you sure you want to switch the selected tenant？',
+  'menu.account.checkTenantConfirm': 'Are you sure to switch  tenant [ {tenantCode} ] ?',
   'menu.account.logout': 'Logout',
 
 

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

@@ -88,10 +88,6 @@ export default {
   'pages.searchTable.batchDeletion': 'Batch Deletion',
   'pages.searchTable.batchApproval': 'Batch Approval',
 
-
-  'pages.operate': 'Operation', // all table list of operation columns is use this item
-
-
   'pages.devops.jobstatus.CREATED': 'Created',
   'pages.devops.jobstatus.INITIALIZING': 'Initialize',
   'pages.devops.jobstatus.RUNNING': 'Running',
@@ -158,8 +154,7 @@ export default {
   'pages.user.UserEnterNewPassword': 'Please enter new password',
   'pages.user.UserEnterRepeatNewPassword': 'Please enter repeat new password',
   'pages.user.UserNewPasswordNotMatch': 'The new passwords do not match',
-  'pages.user.disableTotalOf': 'Total Of ',
-  'pages.user.selectDisable': 'User Is Disabled ',
+  'pages.user.disableTotalOf': 'Total Of {total} User Is Disabled',
 
 
   'pages.tenant.TenantManager': 'Tenant Management',
@@ -198,8 +193,7 @@ export default {
   'pages.nameSpace.update': 'Update NameSpace',
   'pages.nameSpace.EnterNameSpaceCode': 'Please enter NameSpace Code!',
   'pages.nameSpace.EnterNameSpaceNote': 'Please enter NameSpace Note!',
-  'pages.nameSpace.disableTotalOf': 'Total Of ',
-  'pages.nameSpace.selectDisable': 'Namespace Is Disabled ',
+  'pages.nameSpace.disableTotalOf': 'Total Of {total} Namespace Is Disabled',
 
   'pages.role.roleManagement': 'Role Management',
   'pages.role.roleCode': 'Role Code',
@@ -273,7 +267,7 @@ export default {
   'pages.datastudio.label.officialdocumentation': 'Official Documentation',
   'pages.datastudio.label.quickguide': 'Quick Guide',
 
-  'pages.datastudio.label.welcomeuse': 'Welcome to Use Dinky v',
+  'pages.datastudio.label.welcomeuse': 'Welcome to Use Dinky v{version}',
   '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',
 

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

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You 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.
+ *
+ */
+
+export default {
+  'shortcut.title': 'Shortcut key',
+  'shortcut.key.save': 'Save',
+  'shortcut.key.check': 'Check',
+  'shortcut.key.beautify': 'Beautify',
+  'shortcut.key.fullscreen': 'Full Screen',
+  'shortcut.key.fullscreenClose': 'Close the popup and full screen',
+  'shortcut.key.more': 'More shortcut keys',
+  'shortcut.key.search': 'Search',
+  'shortcut.key.replace': 'Replace',
+  'shortcut.key.revoke': 'Revoke',
+  'shortcut.key.redo': 'Redo',
+  'shortcut.key.notes': 'Notes',
+  'shortcut.key.indent': 'Indent',
+  'shortcut.key.removeIndent': 'Remove indent',
+  'shortcut.key.selectToEnd': 'Select subsequent',
+  'shortcut.key.format': 'Format',
+  'shortcut.key.editMultiline': 'Edit multiple lines',
+  'shortcut.key.copyRow': 'Copy a row',
+  'shortcut.key.deleteRow': 'Delete a row',
+  'shortcut.key.matchNext': 'Match Next',
+  'shortcut.key.matchPrevious': 'Match Previous',
+  'shortcut.key.goNextHighlight': 'Go to Next Highlight',
+  'shortcut.key.goPreviousHighlight': 'Go to Previous Highlight',
+  'shortcut.key.appendLineBefore': 'Append a Newline Before',
+  'shortcut.key.appendLine': 'Append Newline',
+  'shortcut.key.transpositionUpAndDown': 'Transposition up and down',
+  'shortcut.key.collapseOrExpand': 'Collapse/Expand',
+
+  'shortcut.key.checked': 'Checked',
+}

dlink-web/src/locales/zh-CN.ts

@@ -26,6 +26,7 @@ import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/settings';
 import pages from './zh-CN/pages';
 import button from './zh-CN/button';
+import shortKey from './zh-CN/shortcutKey';
 
 export default {
   'navBar.lang': '语言',
@@ -45,4 +46,5 @@ export default {
   ...component,
   ...request,
   ...button,
+  ...shortKey,
 };

dlink-web/src/locales/zh-CN/button.ts

@@ -38,11 +38,28 @@ export default {
   'button.disable': '禁用',
   'button.reset': '重置',
   'button.search': '搜索',
+  'button.upload': '上传',
+  'button.import': '导入',
+  'button.export': '导出',
+  'button.submit': '提交',
 
 
-  'tips.selected': '已选择',
+  'right.menu.open': '打开',
+  'right.menu.submit': '异步提交',
+  'right.menu.exportJson': '导出 JSON',
+  'right.menu.rename': '重命名',
+  'right.menu.copy': '复制',
+  'right.menu.cut': '剪切',
+  'right.menu.paste': '粘贴',
+  'right.menu.delete': '删除',
+  'right.menu.createCatalogue': '创建目录',
+  'right.menu.createRootCatalogue': '创建根目录',
+  'right.menu.uploadZipToCreate': '上传zip包创建工程',
+  'right.menu.createTask': '创建作业',
+
+
+  'tips.selected': '已选择 {total} 项',
   'tips.notSelected': '未选',
-  'tips.item': '项',
 
   'status.enabled': '已启用',
   'status.disabled': '已禁用',

dlink-web/src/locales/zh-CN/globalHeader.ts

@@ -33,4 +33,65 @@ export default {
   'component.noticeIcon.cleared': '清空了',
   'component.noticeIcon.empty': '暂无数据',
   'component.noticeIcon.view-more': '查看更多',
+
+  'global.table.operate': '操作',
+  'global.table.config': '配置',
+  'global.table.edit': '编辑',
+  'global.table.delete': '删除',
+  'global.table.more': '更多',
+  'global.table.updateTime': '更新时间',
+  'global.table.lastUpdateTime': '最近更新时间',
+  'global.table.createTime': '创建时间',
+  'global.table.startTime': '开始时间',
+  'global.table.endTime': '结束时间',
+  'global.table.useTime': '耗时',
+
+  'global.table.registType': '注册方式',
+  'global.table.registType.manual': '手动',
+  'global.table.registType.automatic': '自动',
+
+  'global.table.isEnable': '是否启用',
+  'global.table.enabled': '启用',
+  'global.table.disabled': '禁用',
+
+  'global.table.status': '状态',
+  'global.table.status.normal': '正常',
+  'global.table.status.abnormal': '异常',
+
+  'global.table.version': '版本',
+  'global.table.jobManagerAddress': 'JobManger 地址',
+  'global.table.jobManagerHaAddress': 'JobManger 高可用地址',
+  'global.table.type': '类型',
+  'global.table.nickName': '昵称',
+  'global.table.instanceName': '集群实例',
+  'global.table.instanceId': '实例 Id',
+  'global.table.clusterManagement': '集群管理',
+  'global.table.create': '创建',
+  'global.table.heartbeat': '心跳',
+  'global.table.recycle': '回收',
+  'global.table.refresh': '刷新',
+
+  'global.table.no': '序号',
+  'global.table.columnName': '字段名称',
+  'global.table.annotation': '注释',
+  'global.table.primarykey': '主键',
+  'global.table.automationAdd': '自增',
+  'global.table.isNull': '非空',
+  'global.table.default': '默认值',
+  'global.table.precision': '精度',
+  'global.table.decimalDigits': '小数范围',
+  'global.table.character': '字符集',
+  'global.table.collationRule': '排序规则',
+  'global.table.javaType': 'Java 类型',
+
+  'global.table.jobname': '任务名称',
+  'global.table.jobid': '作业ID',
+  'global.table.lifecycle': '生命周期',
+  'global.table.lifecycle.all': '全部',
+  'global.table.lifecycle.dev': '开发中',
+  'global.table.lifecycle.publish': '已发布',
+  'global.table.lifecycle.online': '已上线',
+  'global.table.lifecycle.unKnow': '未知',
+  'global.table.runmode': '运行模式',
+
 };

dlink-web/src/locales/zh-CN/menu.ts

@@ -76,6 +76,7 @@ export default {
   'menu.account.settings': '个人设置',
   'menu.account.changePassword': '修改密码',
   'menu.account.checkTenant': '切换租户',
+  'menu.account.checkTenantConfirm': '你确定切换租户【{tenantCode}】吗？',
   'menu.account.logout': '退出登录',
 
   'menu.dataStudio': '数据开发',

dlink-web/src/locales/zh-CN/pages.ts

@@ -89,9 +89,6 @@ export default {
   'pages.searchTable.batchDeletion': '批量删除',
   'pages.searchTable.batchApproval': '批量审批',
 
-  // ------------------------------------------------------------------------------
-
-  'pages.operate': '操作', // all table list of operation columns is use this item
 
   'pages.devops.jobstatus.CREATED': '已创建',
   'pages.devops.jobstatus.INITIALIZING': '初始化',
@@ -109,21 +106,21 @@ export default {
 
   'pages.settings.UserManagement': '用户管理',
   'pages.settings.Flink': 'Flink 设置',
-  'pages.settings.FlinkURL': '提交 Jar 文件路径到 FlinkSQL',
+  'pages.settings.FlinkURL': '提交 FlinkSQL 的 Jar 文件路径',
 
-  'pages.settings.FlinkSQLJarMainParameter': '提交FlinkSQL的Jar的主类入参',
-  'pages.settings.FlinkSQLJarMainClass': '提交FlinkSQL的Jar主类',
+  'pages.settings.FlinkSQLJarMainParameter': '提交 FlinkSQL 的 Jar 的主类入参',
+  'pages.settings.FlinkSQLJarMainClass': '提交 FlinkSQL 的 Jar 的主类',
   'pages.settings.FlinkRestAPI': '使用 Rest API',
   'pages.settings.FlinkURLSplit': 'FlinkSQL 语句分隔符',
-  'pages.settings.FlinkSQLLogic': '使用逻辑计划计算血缘关系',
-  'pages.settings.FlinkJobID': '获取作业 ID 的最长等待时间（秒）',
+  'pages.settings.FlinkSQLLogic': '使用逻辑计划计算血缘',
+  'pages.settings.FlinkJobID': '获取 Job ID 的最大等待时间（秒）',
   'pages.settings.FlinkNoSetting': '未设置',
-  'pages.settings.FlinkNoUseSetting': 'Flink任务开启后，通过 JobManager 的 RestAPI 进行 Savepoint、Stop等操作',
-  'pages.settings.FlinkLogic': 'Flink 任务的字段血缘分析计算是否基于逻辑计划 , 仅在 1.14 版本中支持',
+  'pages.settings.FlinkNoUseSetting': '启用后，Flink 任务的 savepoint、停止等操作将通过 JobManager 的 RestAPI 进行',
+  'pages.settings.FlinkLogic': '在计算 Flink 任务的字段血缘分析时是否基于逻辑计划进行，只支持 1.14 版本',
 
   'pages.settings.FlinkUpdate': '修改',
   'pages.settings.FlinkSave': '保存',
-  'pages.settings.FlinkCancel': '返回',
+  'pages.settings.FlinkCancel': '取消',
   'pages.settings.FlinkUse': '启用',
   'pages.settings.FlinkNotUse': '禁用',
 
@@ -159,8 +156,7 @@ export default {
   'pages.user.UserEnterNewPassword': '请输入新密码',
   'pages.user.UserEnterRepeatNewPassword': '请重复输入新密码',
   'pages.user.UserNewPasswordNotMatch': '两次输入的新密码不一致',
-  'pages.user.disableTotalOf': '被禁用的用户共 ',
-  'pages.user.selectDisable': ' 个',
+  'pages.user.disableTotalOf': '被禁用的用户共 {total} 个',
 
 
   'pages.tenant.TenantManager': '租户管理',
@@ -198,8 +194,7 @@ export default {
   'pages.nameSpace.update': '修改命名空间',
   'pages.nameSpace.EnterNameSpaceCode': '请输入命名空间编码!',
   'pages.nameSpace.EnterNameSpaceNote': '请输入命名空间的备注/描述信息!',
-  'pages.nameSpace.disableTotalOf': '被禁用的命名空间共 ',
-  'pages.nameSpace.selectDisable': '个',
+  'pages.nameSpace.disableTotalOf': '被禁用的命名空间共 {total} 个',
 
   'pages.role.roleManagement': '角色管理',
   'pages.role.roleCode': '角色编码',
@@ -226,4 +221,55 @@ export default {
   'pages.regist.openAPI': 'OpenAPI 文档',
   'pages.regist.BusinessComponent': '业务组件文档',
 
+
+  'pages.metadata.NoDatabaseSelected': '未选择数据源',
+  'pages.metadata.Application': 'Application',
+  'pages.metadata.TableInfo': '表信息',
+  'pages.metadata.Description': '描述',
+  'pages.metadata.DataSearch': '数据查询',
+  'pages.metadata.GenerateSQL': 'SQL 生成',
+  'pages.metadata.FieldInformation': '字段信息',
+
+  'pages.TableData.QueryConditions': '查询条件',
+  'pages.TableData.sorting': '排序',
+  'pages.TableData.data': '数据',
+  'pages.TableData.search': '搜索',
+
+  'pages.datastudio.label.info': '数据',
+  'pages.datastudio.label.result': '结果',
+  'pages.datastudio.label.lineage': '血缘',
+  'pages.datastudio.label.process': '进程',
+  'pages.datastudio.label.history': '历史',
+  'pages.datastudio.label.function': '函数',
+
+  'pages.datastudio.label.directory': '目录',
+  'pages.datastudio.label.structure': '结构',
+  'pages.datastudio.label.session': '会话',
+  'pages.datastudio.label.cluster': '集群',
+  'pages.datastudio.label.datasource': '数据源',
+  'pages.datastudio.label.meta': '元数据',
+  'pages.datastudio.label.globalvariable': '全局变量',
+  'pages.datastudio.label.guidepage': '引导页',
+
+  'pages.datastudio.label.registcluster': '注册集群实例',
+  'pages.datastudio.label.registclusterconfig': '注册集群配置',
+  'pages.datastudio.label.registjar': '注册 Jar',
+  'pages.datastudio.label.registdatasource': '注册数据源',
+  'pages.datastudio.label.registdocument': '注册文档',
+  'pages.datastudio.label.configsystemconfig': '修改系统配置',
+  'pages.datastudio.label.officialdocumentation': '官网文档',
+  'pages.datastudio.label.quickguide': '快捷引导',
+
+  'pages.datastudio.label.welcomeuse': '欢迎使用 Dinky v{version}',
+  'pages.datastudio.label.dinkydescribe': '实时即未来，Dinky 为 Apache Flink 而生，让 Flink SQL 纵享丝滑，并致力于实时计算平台建设。',
+  'pages.datastudio.label.maxrows': '最大行数',
+
+
+  'pages.devops.result.success': '操作成功',
+  'pages.devops.lable.online': '一键上线',
+  'pages.devops.lable.offline': '一键下线',
+  'pages.devops.lable.onlinelist': '上线明细',
+  'pages.devops.lable.offlinelist': '下线明细',
+  'pages.devops.lable.instance': '实例',
+
 };

dlink-web/src/locales/zh-CN/shortcutKey.ts

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You 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.
+ *
+ */
+
+export default {
+  'shortcut.title': '快捷键',
+  'shortcut.key.save': '保存',
+  'shortcut.key.check': '校验',
+  'shortcut.key.beautify': '美化',
+  'shortcut.key.fullscreen': '全屏',
+  'shortcut.key.fullscreenClose': '关闭弹框及全屏',
+  'shortcut.key.more': '更多快捷键',
+  'shortcut.key.search': '搜索',
+  'shortcut.key.replace': '替换',
+  'shortcut.key.revoke': '撤销',
+  'shortcut.key.redo': '重做',
+  'shortcut.key.notes': '注释',
+  'shortcut.key.indent': '缩进',
+  'shortcut.key.removeIndent': '取消缩进',
+  'shortcut.key.selectToEnd': '选中后续',
+  'shortcut.key.format': '格式化',
+  'shortcut.key.editMultiline': '编辑多行',
+  'shortcut.key.copyRow': '复制一行',
+  'shortcut.key.deleteRow': '删除一行',
+  'shortcut.key.matchNext': '匹配下一个',
+  'shortcut.key.matchPrevious': '匹配上一个',
+  'shortcut.key.goNextHighlight': '前往下一个高亮',
+  'shortcut.key.goPreviousHighlight': '前往上一个高亮',
+  'shortcut.key.appendLineBefore': '前面追加换行',
+  'shortcut.key.appendLine': '追加换行',
+  'shortcut.key.transpositionUpAndDown': '上下换位',
+  'shortcut.key.collapseOrExpand': '折叠/展开',
+
+  'shortcut.key.checked': '选中',
+}

dlink-web/src/pages/404.tsx

@@ -24,8 +24,8 @@ import {history, useIntl} from 'umi';
 
 const NoFoundPage: React.FC = () => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   return (
     <Result

dlink-web/src/pages/API/TaskAPI/index.tsx

@@ -30,8 +30,10 @@ const {TabPane} = Tabs;
 
 const TaskAPI = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const {task} = props;
   const [address, setAddress] = useState<string>('127.0.0.1:8888');

dlink-web/src/pages/Admin.tsx

@@ -23,19 +23,22 @@ import {HeartTwoTone, SmileTwoTone} from '@ant-design/icons';
 import {Alert, Card, Typography} from 'antd';
 import {PageHeaderWrapper} from '@ant-design/pro-layout';
 import {useIntl} from 'umi';
+import {VERSION} from "@/components/Common/Version";
 
 export default (): React.ReactNode => {
 
+
   const intl = useIntl();
-  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   return (
     <PageHeaderWrapper
-      content={l('pages.admin.subPage.title',' 这个页面只有 admin 权限才能查看')}
+      content={l('pages.admin.subPage.title')}
     >
       <Card>
         <Alert
-          message={l('pages.welcome.alertMessage','实时计算平台 Dlink & Apache Flink 即将发布，目前为体验版，版本号为0.1.0。')}
+          message={l('pages.welcome.alertMessage', '', {version: VERSION})}
           type="success"
           showIcon
           banner

dlink-web/src/pages/AlertGroup/components/AlertGroupForm.tsx

@@ -42,8 +42,9 @@ const formLayout = {
 
 const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertGroupTableListItem>>({
@@ -121,9 +122,9 @@ const AlertGroupForm: React.FC<AlertGroupFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

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

@@ -34,8 +34,8 @@ const url = '/api/alertGroup';
 const AlertGroupTableList: React.FC<{}> = (props: any) => {
   const {dispatch} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const [row, setRow] = useState<AlertGroupTableListItem>();
   const [modalVisible, handleModalVisible] = useState<boolean>(false);
@@ -56,8 +56,8 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
       Modal.confirm({
         title: '删除报警组配置',
         content: '确定删除该报警组配置吗？',
-        okText: '确认',
-        cancelText: '取消',
+        okText: l('button.confirm'),
+        cancelText: l('button.cancel'),
         onOk: async () => {
           await handleRemove(url, [currentItem]);
           actionRef.current?.reloadAndRest?.();
@@ -72,13 +72,13 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
     <Dropdown
       overlay={
         <Menu onClick={({key}) => editAndDelete(key, item)}>
-          <Menu.Item key="edit">编辑</Menu.Item>
-          <Menu.Item key="delete">删除</Menu.Item>
+          <Menu.Item key="edit">{l('button.edit')}</Menu.Item>
+          <Menu.Item key="delete">{l('button.delete')}</Menu.Item>
         </Menu>
       }
     >
       <a>
-        更多 <DownOutlined/>
+        {l('button.more')} <DownOutlined/>
       </a>
     </Dropdown>
   );
@@ -148,20 +148,20 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
       hideInTable: true
     },
     {
-      title: '最近更新时间',
+      title: l('global.table.lastUpdateTime'),
       dataIndex: 'updateTime',
       sorter: true,
       valueType: 'dateTime',
     },
     {
-      title: '操作',
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -171,7 +171,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
             setFormValues(record);
           }}
         >
-          配置
+          {l('button.config')}
         </a>,
         <MoreBtn key="more" item={record}/>,
       ],
@@ -189,7 +189,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
         }}
         toolBarRender={() => [
           <Button type="primary" onClick={() => handleModalVisible(true)}>
-            <PlusOutlined/> 新建
+            <PlusOutlined/> {l('button.create')}
           </Button>,
         ]}
         request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
@@ -206,8 +206,11 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
         <FooterToolbar
           extra={
             <div>
-              已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
-              <span>
+              {l('tips.selected', '',
+                {
+                  total: <a
+                    style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                })}  &nbsp;&nbsp;              <span>
                 被禁用的报警组共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
               </span>
             </div>
@@ -218,8 +221,8 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
                     Modal.confirm({
                       title: '删除报警组',
                       content: '确定删除选中的报警组吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await handleRemove(url, selectedRowsState);
                         setSelectedRows([]);
@@ -228,15 +231,15 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
                     });
                   }}
           >
-            批量删除
+            {l('button.batchDelete')}
           </Button>
           <Button type="primary"
                   onClick={() => {
                     Modal.confirm({
                       title: '启用报警组',
                       content: '确定启用选中的报警组吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await updateEnabled(url, selectedRowsState, true);
                         setSelectedRows([]);
@@ -244,14 +247,14 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
                       }
                     });
                   }}
-          >批量启用</Button>
+          >{l('button.batchEnable')}</Button>
           <Button danger
                   onClick={() => {
                     Modal.confirm({
                       title: '禁用报警组',
                       content: '确定禁用选中的报警组吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await updateEnabled(url, selectedRowsState, false);
                         setSelectedRows([]);
@@ -259,7 +262,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
                       }
                     });
                   }}
-          >批量禁用</Button>
+          >{l('button.batchDisable')}</Button>
         </FooterToolbar>
       )}
       <AlertGroupForm

dlink-web/src/pages/AlertInstance/components/AlertInstanceChooseForm.tsx

@@ -41,8 +41,9 @@ export type UpdateFormProps = {
 
 const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const {
     onSubmit: handleUpdate,

dlink-web/src/pages/AlertInstance/components/DingTalkForm.tsx

@@ -40,8 +40,10 @@ const formLayout = {
 
 const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
@@ -178,10 +180,10 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => sendTestForm()}>测试</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

dlink-web/src/pages/AlertInstance/components/EmailForm.tsx

@@ -40,8 +40,9 @@ const formLayout = {
 
 const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
@@ -206,10 +207,10 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => sendTestForm()}>测试</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

dlink-web/src/pages/AlertInstance/components/FeiShuForm.tsx

@@ -40,8 +40,9 @@ const formLayout = {
 
 const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
@@ -175,10 +176,10 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => sendTestForm()}>测试</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

dlink-web/src/pages/AlertInstance/components/WeChatForm.tsx

@@ -40,8 +40,10 @@ const formLayout = {
 
 const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<AlertInstanceTableListItem>>({
@@ -184,10 +186,10 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => sendTestForm()}>测试</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

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

@@ -33,8 +33,10 @@ const url = '/api/alertInstance';
 const AlertInstanceTableList: React.FC<{}> = (props: any) => {
   const {dispatch} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [row, setRow] = useState<AlertInstanceTableListItem>();
   const [values, setValues] = useState<AlertInstanceTableListItem>();
@@ -50,8 +52,8 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
       Modal.confirm({
         title: '删除报警实例',
         content: '确定删除该报警实例吗？',
-        okText: '确认',
-        cancelText: '取消',
+        okText: l('button.confirm'),
+        cancelText: l('button.cancel'),
         onOk: async () => {
           await handleRemove(url, [currentItem]);
           actionRef.current?.reloadAndRest?.();
@@ -66,13 +68,13 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
     <Dropdown
       overlay={
         <Menu onClick={({key}) => editAndDelete(key, item)}>
-          <Menu.Item key="edit">编辑</Menu.Item>
-          <Menu.Item key="delete">删除</Menu.Item>
+          <Menu.Item key="edit">{l('button.edit')}</Menu.Item>
+          <Menu.Item key="delete">{l('button.delete')}</Menu.Item>
         </Menu>
       }
     >
       <a>
-        更多 <DownOutlined/>
+        {l('button.more')} <DownOutlined/>
       </a>
     </Dropdown>
   );
@@ -162,20 +164,20 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
       hideInTable: true
     },
     {
-      title: '最近更新时间',
+      title: l('global.table.lastUpdateTime'),
       dataIndex: 'updateTime',
       sorter: true,
       valueType: 'dateTime',
     },
     {
-      title: '操作',
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -185,7 +187,7 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
             setValues(record);
           }}
         >
-          配置
+          {l('button.config')}
         </a>,
         <MoreBtn key="more" item={record}/>,
       ],
@@ -203,7 +205,7 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
         }}
         toolBarRender={() => [
           <Button type="primary" onClick={() => handleModalVisible(true)}>
-            <PlusOutlined/> 新建
+            <PlusOutlined/> {l('button.create')}
           </Button>,
         ]}
         request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
@@ -220,7 +222,11 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
         <FooterToolbar
           extra={
             <div>
-              已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
+              {l('tips.selected', '',
+                {
+                  total: <a
+                    style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                })}  &nbsp;&nbsp;
               <span>
   被禁用的报警实例共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
   </span>
@@ -232,8 +238,8 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
                     Modal.confirm({
                       title: '删除报警实例',
                       content: '确定删除选中的报警实例吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await handleRemove(url, selectedRowsState);
                         setSelectedRows([]);
@@ -242,15 +248,15 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
                     });
                   }}
           >
-            批量删除
+            {l('button.batchDelete')}
           </Button>
           <Button type="primary"
                   onClick={() => {
                     Modal.confirm({
                       title: '启用报警实例',
                       content: '确定启用选中的报警实例吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await updateEnabled(url, selectedRowsState, true);
                         setSelectedRows([]);
@@ -258,14 +264,14 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
                       }
                     });
                   }}
-          >批量启用</Button>
+          >{l('button.batchEnable')}</Button>
           <Button danger
                   onClick={() => {
                     Modal.confirm({
                       title: '禁用报警实例',
                       content: '确定禁用选中的报警实例吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await updateEnabled(url, selectedRowsState, false);
                         setSelectedRows([]);
@@ -273,7 +279,7 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
                       }
                     });
                   }}
-          >批量禁用</Button>
+          >{l('button.batchDisable')}</Button>
         </FooterToolbar>
       )}
       <AlertInstanceChooseForm onCancel={() => {

dlink-web/src/pages/AuthenticationCenter/NamespaceManager/components/NameSpaceForm.tsx

@@ -38,8 +38,10 @@ const formLayout = {
 
 const NameSpaceForm: React.FC<TenantFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<NameSpaceTableListItem>>({
     id: props.values?.id,

dlink-web/src/pages/AuthenticationCenter/NamespaceManager/index.tsx

@@ -39,8 +39,10 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
   const actionRef = useRef<ActionType>();
   const [selectedRowsState, setSelectedRows] = useState<NameSpaceTableListItem[]>([]);
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const editAndDelete = (key: string | number, currentItem: NameSpaceTableListItem) => {
     if (key === 'edit') {
@@ -48,7 +50,7 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
       setFormValues(currentItem);
     } else if (key === 'delete') {
       Modal.confirm({
-        title: l('pages.nameSpace.deleteNameSpace', '默认'),
+        title: l('pages.nameSpace.deleteNameSpace'),
         content: l('pages.nameSpace.deleteNameSpaceConfirm'),
         okText: l('button.confirm'),
         cancelText: l('button.cancel'),
@@ -142,7 +144,7 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
       valueType: 'dateTime',
     },
     {
-      title: l('pages.operate'),
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -187,10 +189,13 @@ const NameSpaceFormList: React.FC<{}> = (props: any) => {
         <FooterToolbar
           extra={
             <div>
-              {l('tips.selected')} <a
-              style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}&nbsp;&nbsp;
+              {l('tips.selected', '',
+                {
+                  total: <a
+                    style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                })}  &nbsp;&nbsp;
               <span>
-  {l('pages.nameSpace.disableTotalOf')} {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} {l('pages.nameSpace.selectDisable')}
+  {l('pages.nameSpace.disableTotalOf', '', {total: selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)})}
   </span>
             </div>
           }

dlink-web/src/pages/AuthenticationCenter/RoleManager/components/RoleForm.tsx

@@ -45,8 +45,10 @@ const Option = Select.Option;
 
 const RoleForm: React.FC<TenantFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<RoleTableListItem>>({
@@ -99,7 +101,7 @@ const RoleForm: React.FC<TenantFormProps> = (props) => {
         <Form.Item
           name="roleCode"
           label={l('pages.role.roleCode')}
-          rules={[{required: true, message: l('pages.role.roleCode')}]}>
+          rules={[{required: true, message: l('pages.role.EnterRoleCode')}]}>
           <Input placeholder={l('pages.role.EnterRoleCode')}/>
         </Form.Item>
         <Form.Item

dlink-web/src/pages/AuthenticationCenter/RoleManager/index.tsx

@@ -42,8 +42,8 @@ const RoleFormList: React.FC<{}> = (props: any) => {
   const [selectedRowsState, setSelectedRows] = useState<RoleTableListItem[]>([]);
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   useEffect(() => {
@@ -152,7 +152,7 @@ const RoleFormList: React.FC<{}> = (props: any) => {
       valueType: 'dateTime',
     },
     {
-      title: l('pages.operate'),
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -197,8 +197,11 @@ const RoleFormList: React.FC<{}> = (props: any) => {
         <FooterToolbar
           extra={
             <div>
-              {l('tips.selected')} <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}
-            </div>
+              {l('tips.selected', '',
+                {
+                  total: <a
+                    style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                })}  &nbsp;&nbsp;            </div>
           }
         >
           <Button type="primary" danger

dlink-web/src/pages/AuthenticationCenter/TenantManager/components/GrantTenantTransfer.tsx

@@ -73,7 +73,9 @@ const GrantTenantTransfer = ({leftColumns, rightColumns, ...restProps}: TableTra
               rowSelection={rowSelection}
               columns={columns}
               pagination={{
-                pageSize: 7,
+                defaultPageSize: 10,
+                showSizeChanger: true,
+                hideOnSinglePage: true,
               }}
               dataSource={filteredItems}
               size="large"
@@ -107,8 +109,9 @@ export type TableTransferFromProps = {
 const GrantTenantToUserTableTransferFrom = (props: TableTransferFromProps) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const {tenant, onChange: handleChange} = props;
 
@@ -177,9 +180,7 @@ const GrantTenantToUserTableTransferFrom = (props: TableTransferFromProps) => {
         onChange={onChange}
         onSelectChange={onSelectChange}
         filterOption={(inputValue, item) =>
-          item.username!.indexOf(inputValue) !== -1
-          || item.nickname!.indexOf(inputValue) !== -1
-          || item.worknum!.indexOf(inputValue) !== -1
+          item.username!.indexOf(inputValue) !== -1 || item.nickname!.indexOf(inputValue) !== -1 || item.worknum!.indexOf(inputValue) !== -1
         }
         leftColumns={leftTableColumns}
         rightColumns={rightTableColumns}

dlink-web/src/pages/AuthenticationCenter/TenantManager/components/TenantForm.tsx

@@ -39,8 +39,9 @@ const FormItem = Form.Item;
 const TenantForm: React.FC<TenantFormProps> = (props) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<TenantTableListItem>>({

dlink-web/src/pages/AuthenticationCenter/TenantManager/index.tsx

@@ -42,8 +42,8 @@ const TenantFormList: React.FC<{}> = (props: any) => {
   const [formValues, setFormValues] = useState({});
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const editAndDelete = (key: string | number, currentItem: TenantTableListItem) => {
@@ -174,7 +174,7 @@ const TenantFormList: React.FC<{}> = (props: any) => {
       valueType: 'dateTime',
     },
     {
-      title: l('pages.operate'),
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record: TenantTableListItem) => [
@@ -227,8 +227,11 @@ const TenantFormList: React.FC<{}> = (props: any) => {
         <FooterToolbar
           extra={
             <div>
-              {l('tips.selected')} <a
-              style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}
+              {l('tips.selected', '',
+                {
+                  total: <a
+                    style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                })}  &nbsp;&nbsp;
             </div>
           }
         >

dlink-web/src/pages/AuthenticationCenter/UserManager/components/PasswordForm.tsx

@@ -38,8 +38,8 @@ const formLayout = {
 const PasswordForm: React.FC<PasswordFormProps> = (props) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const [form] = Form.useForm();

dlink-web/src/pages/AuthenticationCenter/UserManager/components/TableTransfer.tsx

@@ -73,7 +73,9 @@ const TableTransfer = ({leftColumns, rightColumns, ...restProps}: TableTransferP
               rowSelection={rowSelection}
               columns={columns}
               pagination={{
-                pageSize: 7,
+                defaultPageSize: 10,
+                showSizeChanger: true,
+                hideOnSinglePage: true,
               }}
               dataSource={filteredItems}
               size="large"
@@ -104,8 +106,9 @@ export type TableTransferFromProps = {
 const TableTransferFrom = (props: TableTransferFromProps) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const {user, onChange: handleChange} = props;
 

dlink-web/src/pages/AuthenticationCenter/UserManager/components/UserForm.tsx

@@ -38,8 +38,8 @@ const formLayout = {
 const UserForm: React.FC<UserFormProps> = (props) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const [form] = Form.useForm();

dlink-web/src/pages/AuthenticationCenter/UserManager/index.tsx

@@ -44,8 +44,10 @@ const UserTableList: React.FC<{}> = (props: any) => {
   const actionRef = useRef<ActionType>();
   const [selectedRowsState, setSelectedRows] = useState<UserTableListItem[]>([]);
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const editAndDelete = (key: string | number, currentItem: UserTableListItem) => {
     if (key === 'edit') {
@@ -194,7 +196,7 @@ const UserTableList: React.FC<{}> = (props: any) => {
       valueType: 'dateTime',
     },
     {
-      title: l('pages.operate'),
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -248,10 +250,13 @@ const UserTableList: React.FC<{}> = (props: any) => {
           <FooterToolbar
             extra={
               <div>
-                {l('tips.selected')} <a
-                style={{fontWeight: 600}}>{selectedRowsState.length}</a> {l('tips.item')}&nbsp;&nbsp;
+                {l('tips.selected', '',
+                  {
+                    total: <a
+                      style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                  })}  &nbsp;&nbsp;
                 <span>
-                {l('pages.user.disableTotalOf')} {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} {l('pages.user.selectDisable')}
+                    {l('pages.user.disableTotalOf', '', {total: selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)})}
               </span>
               </div>
             }

dlink-web/src/pages/Cluster/components/ClusterForm.tsx

@@ -41,7 +41,8 @@ const formLayout = {
 const ClusterForm: React.FC<ClusterFormProps> = (props) => {
 
   const intl = useIntl();
-  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<ClusterTableListItem>>({
@@ -149,9 +150,9 @@ const ClusterForm: React.FC<ClusterFormProps> = (props) => {
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

dlink-web/src/pages/ClusterConfiguration/components/ClusterConfigurationForm.tsx

@@ -44,8 +44,8 @@ const formLayout = {
 const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const [form] = Form.useForm();
@@ -369,12 +369,12 @@ const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props
   const renderFooter = () => {
     return (
       <>
-        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button onClick={() => handleModalVisible(false)}>{l('button.cancel')}</Button>
         <Button type="primary" htmlType="button" onClick={testForm}>
           测试
         </Button>
         <Button type="primary" onClick={() => submitForm()}>
-          完成
+          {l('button.finish')}
         </Button>
       </>
     );

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

@@ -34,8 +34,8 @@ const url = '/api/clusterConfiguration';
 const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const {dispatch} = props;
@@ -54,8 +54,8 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
       Modal.confirm({
         title: '删除集群配置',
         content: '确定删除该集群配置吗？',
-        okText: '确认',
-        cancelText: '取消',
+        okText: l('button.confirm'),
+        cancelText: l('button.cancel'),
         onOk: async () => {
           await handleRemove(url, [currentItem]);
           actionRef.current?.reloadAndRest?.();
@@ -70,13 +70,13 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
     <Dropdown
       overlay={
         <Menu onClick={({key}) => editAndDelete(key, item)}>
-          <Menu.Item key="edit">编辑</Menu.Item>
+          <Menu.Item key="edit">{l('button.edit')}</Menu.Item>
           <Menu.Item key="delete">删除</Menu.Item>
         </Menu>
       }
     >
       <a>
-        更多 <DownOutlined/>
+        {l('button.more')} <DownOutlined/>
       </a>
     </Dropdown>
   );
@@ -194,20 +194,20 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
       },
     },
     {
-      title: '创建时间',
+      title: l('global.table.createTime'),
       dataIndex: 'createTime',
       sorter: true,
       valueType: 'dateTime',
       hideInTable: true,
     },
     {
-      title: '最近更新时间',
+      title: l('global.table.lastUpdateTime'),
       dataIndex: 'updateTime',
       sorter: true,
       valueType: 'dateTime',
     },
     {
-      title: '操作',
+      title: l('global.table.operate'),
       dataIndex: 'option',
       valueType: 'option',
       render: (_, record) => [
@@ -217,7 +217,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
             setFormValues(record);
           }}
         >
-          配置
+          {l('button.config')}
         </a>,
         <MoreBtn key="more" item={record}/>,
       ],
@@ -235,7 +235,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
         }}
         toolBarRender={() => [
           <Button type="primary" onClick={() => handleModalVisible(true)}>
-            <PlusOutlined/> 新建
+            <PlusOutlined/> {l('button.create')}
           </Button>,
         ]}
         request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
@@ -252,7 +252,11 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
         <FooterToolbar
           extra={
             <div>
-              已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
+              {l('tips.selected', '',
+                {
+                  total: <a
+                    style={{fontWeight: 600}}>{selectedRowsState.length}</a>
+                })}  &nbsp;&nbsp;
               <span>
                 被禁用的集群配置共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
               </span>
@@ -264,8 +268,8 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
                     Modal.confirm({
                       title: '删除集群配置',
                       content: '确定删除选中的集群配置吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await handleRemove(url, selectedRowsState);
                         setSelectedRows([]);
@@ -274,15 +278,15 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
                     });
                   }}
           >
-            批量删除
+            {l('button.batchDelete')}
           </Button>
           <Button type="primary"
                   onClick={() => {
                     Modal.confirm({
                       title: '启用集群配置',
                       content: '确定启用选中的集群配置吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await updateEnabled(url, selectedRowsState, true);
                         setSelectedRows([]);
@@ -290,14 +294,14 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
                       }
                     });
                   }}
-          >批量启用</Button>
+          >{l('button.batchEnable')}</Button>
           <Button danger
                   onClick={() => {
                     Modal.confirm({
                       title: '禁用集群配置',
                       content: '确定禁用选中的集群配置吗？',
-                      okText: '确认',
-                      cancelText: '取消',
+                      okText: l('button.confirm'),
+                      cancelText: l('button.cancel'),
                       onOk: async () => {
                         await updateEnabled(url, selectedRowsState, false);
                         setSelectedRows([]);
@@ -305,7 +309,7 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
                       }
                     });
                   }}
-          >批量禁用</Button>
+          >{l('button.batchDisable')}</Button>
         </FooterToolbar>
       )}
       <ClusterConfigurationForm

dlink-web/src/pages/Common/Build.tsx

@@ -18,21 +18,28 @@
  */
 
 
-import { Button, Result } from 'antd';
+import {Button, Result} from 'antd';
 import React from 'react';
-import { history } from 'umi';
+import {history, useIntl} from 'umi';
 
-const BuildPage: React.FC = () => (
-  <Result
-    status="404"
-    title="Building"
-    subTitle="Sorry, the page you visited is building."
-    extra={
-      <Button type="primary" onClick={() => history.push('/')}>
-        Back Home
-      </Button>
-    }
-  />
-);
+const BuildPage: React.FC = () => {
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
+  return (
+    <Result
+      status="404"
+      title="Building"
+      subTitle="Sorry, the page you visited is building."
+      extra={
+        <Button type="primary" onClick={() => history.push('/')}>
+          Back Home
+        </Button>
+      }
+    />
+  );
+
+};
 
 export default BuildPage;

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

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

dlink-web/src/pages/DataBase/components/DBForm.tsx

@@ -68,8 +68,8 @@ const data: any = [
 const DBForm: React.FC<UpdateFormProps> = (props) => {
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const {

dlink-web/src/pages/DataBase/components/DataBaseForm.tsx

@@ -44,8 +44,9 @@ const formLayout = {
 
 const DataBaseForm: React.FC<ClickHouseFormProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({

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

@@ -53,8 +53,8 @@ const cardBodyStyle = {
 
 const DataBaseTableList: React.FC<{}> = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const {dispatch} = props;
@@ -81,8 +81,8 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
     Modal.confirm({
       title: '删除数据源',
       content: `确定删除该数据源【${row.alias === "" ? row.name : row.alias}】吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         await handleRemove('api/database', [row]);
         onRefreshDataBase();
@@ -101,7 +101,7 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
               setValues({});
               handleDBFormModalVisible(true);
             }}>
-              <PlusOutlined/> 新建
+              <PlusOutlined/> {l('button.create')}
             </Button>,
           ];
         }}

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

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

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

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

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

@@ -35,8 +35,8 @@ type AlertHistoryTableListItem = {
 
 const Alert = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const url = '/api/alertGroup';

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

@@ -32,8 +32,8 @@ const BaseInfo = (props: any) => {
 
   const {job} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const columns: ProColumns<VerticesTableListItem>[] = [

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

@@ -44,8 +44,8 @@ const CheckPoints = (props: any) => {
 
   const {job} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const actionRef = useRef<ActionType>();
@@ -213,8 +213,8 @@ const CheckPoints = (props: any) => {
     Modal.confirm({
       title: 'Recovery Of CheckPoint',
       content: `确定从 CheckPoint 【${row.external_path}】恢复吗？`,
-      okText: '确认',
-      cancelText: '取消',
+      okText: l('button.confirm'),
+      cancelText: l('button.cancel'),
       onOk: async () => {
         const res = selectSavePointRestartTask(job?.instance?.taskId, job?.instance?.step == JOB_LIFE_CYCLE.ONLINE, row.external_path);
         res.then((result) => {
@@ -310,7 +310,7 @@ const CheckPoints = (props: any) => {
         dataIndex: 'trigger_timestamp',
       },
       {
-        title: '操作',
+        title: l('global.table.operate'),
         align: 'center',
         render: (dom, entity) => {
           return <>

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

@@ -29,8 +29,8 @@ const Config = (props: any) => {
   const {job} = props;
 
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   return <>

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

@@ -30,8 +30,8 @@ const DataMap = (props: any) => {
 
   const {job} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   const [data, setData] = useState(undefined);

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

@@ -28,8 +28,8 @@ const Exception = (props: any) => {
 
   const {job} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
 
   return (<>

dlink-web/src/pages/DevOps/JobInfo/FlinkClusterInfo/JobManager/index.tsx

@@ -30,8 +30,9 @@ const {TabPane} = Tabs;
 const JobManagerInfo = (props: any) => {
   const {job} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
+
 
   const [jobManager, setJobManager] = useState<JobManagerConfiguration>();
 

dlink-web/src/pages/DevOps/JobInfo/FlinkClusterInfo/TaskManager/index.tsx

@@ -26,15 +26,16 @@ import {TaskContainerConfigInfo, TaskManagerConfiguration} from "@/pages/DevOps/
 import {useEffect, useRef, useState} from "react";
 import {HomeOutlined} from "@ant-design/icons";
 import {getTaskManagerInfo} from "@/pages/DevOps/service";
-import {useIntl} from "@@/plugin-locale/localeExports";
+import {useIntl} from "umi";
 
 const {TabPane} = Tabs;
 
 const TaskManagerInfo = (props: any) => {
   const {job} = props;
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   const actionRef = useRef<ActionType>();