fix: NewConfig internationalization

console/src/main/resources/static/console-fe/src/locales/en-US.js

@@ -170,5 +170,69 @@ const I18N_CONF = {
     configureContent: 'Configuration Content:',
     back: 'Back',
   },
+  DashboardCard: {
+    importantReminder0: 'Important reminder',
+    viewDetails1: 'view details',
+  },
+  ConfigurationManagement: {
+    questionnaire2: 'questionnaire',
+    ad:
+      'a ACM front-end monitoring questionnaire, the time limit to receive Ali cloud voucher details shoved stamp: the',
+    noLongerDisplay4: 'no longer display:',
+    removeConfiguration: 'Delete Configuration',
+    sureDelete: 'Are you sure you want to delete the following configuration?',
+    environment: 'Region:',
+    configurationManagement: 'Configurations',
+    details: 'Details',
+    sampleCode: 'Code Example',
+    edit: 'Edit',
+    deleteAction: 'Delete',
+    more: 'More',
+    version: 'Historical Versions',
+    listenerQuery: 'Configuration Listening Query',
+    failedEntry: 'Failed Entry:',
+    successfulEntry: 'Successful Entry:',
+    unprocessedEntry: 'Unprocessed Entry:',
+    pubNoData: 'No results found.',
+    configurationManagement8: 'configuration management',
+    queryResults: 'Search Results: Found',
+    articleMeetRequirements: 'configuration items',
+    fuzzyd: 'Enter Data ID',
+    fuzzyg: 'Enter Group',
+    query: 'Search',
+    advancedQuery9: 'Advanced Query',
+    application0: 'Application:',
+    app1: 'Enter App Name\n',
+    tags: 'Tags:',
+    pleaseEnterTag: 'Enter Tag',
+    application: 'Application',
+    operation: 'Operation',
+  },
+  NewConfig: {
+    newListingMain: 'Create Configuration',
+    newListing: 'Create Configuration',
+    publishFailed: 'Publish failed. Make sure parameters are entered correctly.',
+    doNotEnte: 'Illegal characters not allowed',
+    newConfig: 'Data ID cannot be empty.',
+    dataIdIsNotEmpty: 'Data ID cannot exceed 255 characters in length',
+    groupPlaceholder: 'Enter your group name',
+    moreAdvanced: 'Group cannot be empty',
+    groupNotEmpty: 'Group ID cannot exceed 127 characters in length',
+    annotation:
+      'Notice: You are going to add configuration to a new group, please make sure that the version of Pandora which clients are using is higher than 3.4.0, otherwise this configuration may be unreadable to clients.',
+    dataIdLength: 'Collapse',
+    collapse: 'Advanced Options',
+    tags: 'Tags:',
+    pleaseEnterTag: 'Enter Tag',
+    groupIdCannotBeLonger: 'Application:',
+    description: 'Description:',
+    targetEnvironment: 'Format:',
+    configurationFormat: 'Configuration Content',
+    configureContentsOf: 'Press F1 to view in full screen',
+    fullScreen: 'Press Esc to exit',
+    escExit: 'Publish',
+    release: 'Back',
+  },
 };
+
 export default I18N_CONF;

console/src/main/resources/static/console-fe/src/locales/zh-CN.js

@@ -170,5 +170,67 @@ const I18N_CONF = {
     configureContent: '配置内容:',
     back: '返回',
   },
+  DashboardCard: {
+    importantReminder0: '重要提醒',
+    viewDetails1: '查看详情',
+  },
+  ConfigurationManagement: {
+    questionnaire2: '问卷调查',
+    ad: '答 ACM 前端监控调查问卷，限时领取阿里云代金券\t            详情猛戳：',
+    noLongerDisplay4: '不再显示：',
+    removeConfiguration: '删除配置',
+    sureDelete: '确定要删除以下配置吗？',
+    environment: '地域：',
+    configurationManagement: '配置列表',
+    details: '详情',
+    sampleCode: '示例代码',
+    edit: '编辑',
+    deleteAction: '删除',
+    more: '更多',
+    version: '历史版本',
+    listenerQuery: '监听查询',
+    failedEntry: '失败的条目:',
+    successfulEntry: '成功的条目:',
+    unprocessedEntry: '未处理的条目:',
+    pubNoData: '没有数据',
+    configurationManagement8: '配置管理',
+    queryResults: '查询结果：共查询到',
+    articleMeetRequirements: '条满足要求的配置。',
+    fuzzyd: '模糊查询请输入Data ID',
+    fuzzyg: '模糊查询请输入Group',
+    query: '查询',
+    advancedQuery9: '高级查询',
+    application0: '归属应用:',
+    app1: '请输入应用名',
+    tags: '标签:',
+    pleaseEnterTag: '请输入标签',
+    application: '归属应用:',
+    operation: '操作',
+  },
+  NewConfig: {
+    newListingMain: '新建配置',
+    newListing: '新建配置',
+    publishFailed: '发布失败。请检查参数是否正确。',
+    doNotEnte: 'Illegal characters not allowed',
+    newConfig: 'Data ID 不能为空',
+    dataIdIsNotEmpty: 'Data ID 长度不能超过255字符',
+    groupPlaceholder: '请输入Group名称',
+    moreAdvanced: 'Group不能为空',
+    groupNotEmpty: 'Group ID长度不能超过127字符',
+    annotation:
+      '注：您正在往一个自定义分组新增配置，请确保客户端使用的Pandora版本高于3.4.0，否则可能读取不到该配置。',
+    dataIdLength: '收起',
+    collapse: '更多高级选项',
+    tags: '标签:',
+    pleaseEnterTag: '请输入标签',
+    groupIdCannotBeLonger: '归属应用:',
+    description: '描述:',
+    targetEnvironment: '配置格式:',
+    configurationFormat: '配置内容:',
+    configureContentsOf: '按F1显示全屏',
+    fullScreen: '按Esc退出全屏',
+    escExit: '发布',
+    release: '返回',
+  },
 };
 export default I18N_CONF;

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js

@@ -13,18 +13,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import BatchHandle from 'components/BatchHandle';
-import RegionGroup from 'components/RegionGroup';
-import ShowCodeing from 'components/ShowCodeing';
-import DeleteDialog from 'components/DeleteDialog';
-import CloneDialog from 'components/CloneDialog';
-import ImportDialog from 'components/ImportDialog';
-import ExportDialog from 'components/ExportDialog';
-import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
 import {
   Button,
   Checkbox,
   Collapse,
+  ConfigProvider,
   Dialog,
   Dropdown,
   Field,
@@ -35,97 +28,26 @@ import {
   Menu,
   Pagination,
   Select,
-  Slider,
   Table,
 } from '@alifd/next';
+import BatchHandle from 'components/BatchHandle';
+import RegionGroup from 'components/RegionGroup';
+import ShowCodeing from 'components/ShowCodeing';
+import DeleteDialog from 'components/DeleteDialog';
+import CloneDialog from 'components/CloneDialog';
+import ImportDialog from 'components/ImportDialog';
+import ExportDialog from 'components/ExportDialog';
+import DashboardCard from './DashboardCard';
+import { getParams, setParams, request, aliwareIntl } from '@/globalLib';
 
 import './index.scss';
 
 const { Panel } = Collapse;
 
-const DashboardCard = ({ data = {}, height }) => (
+@ConfigProvider.config
-  <div>
-    {data.modeType === 'notice' ? (
-      <div data-spm-click={'gostr=/aliyun;locaid=notice'}>
-        <Slider style={{ marginBottom: data.modeList.length > 1 ? 20 : 10 }} arrows={false}>
-          {data.modeList.map((item, index) => (
-            <div key={index} className={'slider-img-wrapper'}>
-              <div
-                className={'alert alert-success'}
-                style={{ minHeight: 120, backgroundColor: '#e9feff' }}
-              >
-                <div className={'alert-success-text'} style={{ fontWeight: 'bold' }}>
-                  {aliwareIntl.get(
-                    'nacos.page.configurationManagement.Important_reminder0'
-                  ) /* 重要提醒 */}
-                </div>
-                <strong style={{ color: '#777a7e' }}>
-                  <span>{item.title}</span>
-                </strong>
-                <strong>
-                  <span>
-                    <a
-                      style={{ marginLeft: 10, color: '#33cde5' }}
-                      href={item.url}
-                      target={'_blank'}
-                    >
-                      {aliwareIntl.get(
-                        'nacos.page.configurationManagement.view_details1'
-                      ) /* 查看详情 */}
-                    </a>
-                  </span>
-                </strong>
-              </div>
-            </div>
-          ))}
-        </Slider>{' '}
-      </div>
-    ) : (
-      <div
-        className={'dash-card-contentwrappers'}
-        style={{ height: height || 'auto' }}
-        data-spm-click={`gostr=/aliyun;locaid=${data.modeType}`}
-      >
-        <h3 className={'dash-card-title'}>{data.modeName}</h3>
-        <div className={'dash-card-contentlist'}>
-          {data.modeList
-            ? data.modeList.map(item => (
-                <div className={'dash-card-contentitem'}>
-                  <a href={item.url} target={'_blank'}>
-                    {item.title}
-                  </a>
-                  {item.tag === 'new' ? (
-                    <img
-                      style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }}
-                      src={'//img.alicdn.com/tps/TB1pS2YMVXXXXcCaXXXXXXXXXXX-56-24.png'}
-                      alt=""
-                    />
-                  ) : (
-                    ''
-                  )}
-                  {item.tag === 'hot' ? (
-                    <img
-                      style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }}
-                      src={'//img.alicdn.com/tps/TB1nusxPXXXXXb0aXXXXXXXXXXX-56-24.png'}
-                      alt=""
-                    />
-                  ) : (
-                    ''
-                  )}
-                </div>
-              ))
-            : ''}
-        </div>
-      </div>
-    )}{' '}
-  </div>
-);
-DashboardCard.propTypes = {
-  data: PropTypes.object,
-  height: PropTypes.number,
-};
-
 class ConfigurationManagement extends React.Component {
+  static displayName = 'ConfigurationManagement';
+
   static propTypes = {
     history: PropTypes.object,
   };
@@ -184,6 +106,7 @@ class ConfigurationManagement extends React.Component {
   }
 
   componentDidMount() {
+    const { locale = {} } = this.props;
     // this.getGroup();
     if (aliwareIntl.currentLanguageCode === 'zh-cn') {
       // this.getContentList(); //在中文站获取概览页
@@ -199,33 +122,24 @@ class ConfigurationManagement extends React.Component {
       if (!this.checkQuestionnaire()) {
         if (window.location.host === 'acm.console.aliyun.com') {
           Dialog.alert({
-            title: aliwareIntl.get(
+            title: locale.questionnaire2,
-              'nacos.page.configurationManagement.questionnaire2'
-            ) /* 问卷调查 */,
             style: {
               width: '60%',
             },
             content: (
               <div>
                 <div style={{ fontSize: '15px', lineHeight: '22px' }}>
-                  {aliwareIntl.get(
+                  {locale.ad}
-                    'nacos.page.configurationManagement.a_ACM_front-end_monitoring_questionnaire,_the_time_limit_to_receive_Ali_cloud_voucher_details_shoved_stamp_the3'
-                  ) /* 答ACM前端监控调查问卷，限时领取阿里云代金券详情猛戳： */}
                   <a href={'https://survey.aliyun.com/survey/k0BjJ2ARC'} target={'_blank'}>
-                    {aliwareIntl.get(
+                    {locale.questionnaire2}
-                      'nacos.page.configurationManagement.questionnaire2'
-                    ) /* 问卷调查 */}
                   </a>
                 </div>
                 <div style={{ fontSize: '15px' }}>
-                  {aliwareIntl.get(
+                  {locale.noLongerDisplay4}
-                    'nacos.page.configurationManagement.no_longer_display4'
-                  ) /* 不再显示： */}
                   <Checkbox onChange={this.toggleShowQuestionnaire} />
                 </div>
               </div>
             ),
-            language: aliwareIntl.currentLanguageCode,
           });
         }
       }
@@ -407,13 +321,13 @@ class ConfigurationManagement extends React.Component {
   }
 
   removeConfig(record) {
+    const { locale = {} } = this.props;
     const self = this;
     Dialog.confirm({
-      language: aliwareIntl.currentLanguageCode || 'zh-cn',
+      title: locale.removeConfiguration,
-      title: aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.Remove_configuration'),
       content: (
         <div style={{ marginTop: '-20px' }}>
-          <h3>{aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.suredelete')}</h3>
+          <h3>{locale.sureDelete}</h3>
           <p>
             <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
             <span style={{ color: '#c7254e' }}>{record.dataId}</span>
@@ -423,9 +337,7 @@ class ConfigurationManagement extends React.Component {
             <span style={{ color: '#c7254e' }}>{record.group}</span>
           </p>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>
+            <span style={{ color: '#999', marginRight: 5 }}>{locale.environment}</span>
-              {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.environment')}
-            </span>
             <span style={{ color: '#c7254e' }}>{self.serverId || ''}</span>
           </p>
         </div>
@@ -438,9 +350,7 @@ class ConfigurationManagement extends React.Component {
           success(res) {
             const _payload = {};
 
-            _payload.title = aliwareIntl.get(
+            _payload.title = locale.configurationManagement;
-              'com.alibaba.nacos.page.configurationManagement.configuration_management'
-            );
             _payload.content = '';
             _payload.dataId = record.dataId;
             _payload.group = record.group;
@@ -467,41 +377,38 @@ class ConfigurationManagement extends React.Component {
   }
 
   renderCol(value, index, record) {
+    const { locale = {} } = this.props;
     return (
       <div>
         <a onClick={this.goDetail.bind(this, record)} style={{ marginRight: 5 }}>
-          {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.details')}
+          {locale.details}
         </a>
         <span style={{ marginRight: 5 }}>|</span>
         <a style={{ marginRight: 5 }} onClick={this.showCode.bind(this, record)}>
-          {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.the_sample_code')}
+          {locale.sampleCode}
         </a>
         <span style={{ marginRight: 5 }}>|</span>
         <a style={{ marginRight: 5 }} onClick={this.goEditor.bind(this, record)}>
-          {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.edit')}
+          {locale.edit}
         </a>
         <span style={{ marginRight: 5 }}>|</span>
         <a style={{ marginRight: 5 }} onClick={this.removeConfig.bind(this, record)}>
-          {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.delete')}
+          {locale.deleteAction}
         </a>
         <span style={{ marginRight: 5 }}>|</span>
 
         <Dropdown
           trigger={
             <span style={{ color: '#33cde5' }}>
-              {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.more')}
+              {locale.more}
               <Icon type={'arrow-down-filling'} size={'xxs'} />
             </span>
           }
           triggerType={'click'}
         >
           <Menu onItemClick={this.chooseNav.bind(this, record)}>
-            <Menu.Item key={'nav1'}>
+            <Menu.Item key={'nav1'}>{locale.version}</Menu.Item>
-              {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.version')}
+            <Menu.Item key={'nav3'}>{locale.listenerQuery}</Menu.Item>
-            </Menu.Item>
-            <Menu.Item key={'nav3'}>
-              {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.listener_query')}
-            </Menu.Item>
           </Menu>
         </Dropdown>
       </div>
@@ -696,24 +603,15 @@ class ConfigurationManagement extends React.Component {
   onPageSelectAll(selected, records) {}
 
   getBatchFailedContent(res) {
+    const { locale = {} } = this.props;
     return (
       <div>
         <div style={{ fontSize: 18, color: '#373D41', overflow: 'auto' }}>{res.message}</div>
         {'data' in res && res.data != null && (
           <Collapse style={{ width: '500px' }}>
             {'failedItems' in res.data && res.data.failedItems.length > 0 ? (
-              <Panel
+              <Panel title={locale.failedEntry + res.data.failedItems.length}>
-                title={
+                <Table dataSource={res.data.failedItems} fixedHeader maxBodyHeight={400}>
-                  aliwareIntl.get('nacos.page.configurationManagement.failed_entry') +
-                  res.data.failedItems.length
-                }
-              >
-                <Table
-                  dataSource={res.data.failedItems}
-                  fixedHeader
-                  maxBodyHeight={400}
-                  language={aliwareIntl.currentLanguageCode}
-                >
                   <Table.Column title={'Data ID'} dataIndex={'dataId'} />
                   <Table.Column title={'Group'} dataIndex={'group'} />
                 </Table>
@@ -722,18 +620,8 @@ class ConfigurationManagement extends React.Component {
               <Panel style={{ display: 'none' }} />
             )}
             {'succeededItems' in res.data && res.data.succeededItems.length > 0 ? (
-              <Panel
+              <Panel title={locale.successfulEntry + res.data.succeededItems.length}>
-                title={
+                <Table dataSource={res.data.succeededItems} fixedHeader maxBodyHeight={400}>
-                  aliwareIntl.get('nacos.page.configurationManagement.successful_entry') +
-                  res.data.succeededItems.length
-                }
-              >
-                <Table
-                  dataSource={res.data.succeededItems}
-                  fixedHeader
-                  maxBodyHeight={400}
-                  language={aliwareIntl.currentLanguageCode}
-                >
                   <Table.Column title={'Data ID'} dataIndex={'dataId'} />
                   <Table.Column title={'Group'} dataIndex={'group'} />
                 </Table>
@@ -742,18 +630,8 @@ class ConfigurationManagement extends React.Component {
               <Panel style={{ display: 'none' }} />
             )}
             {'unprocessedItems' in res.data && res.data.unprocessedItems.length > 0 ? (
-              <Panel
+              <Panel title={locale.unprocessedEntry + res.data.unprocessedItems.length}>
-                title={
+                <Table dataSource={res.data.unprocessedItems} fixedHeader maxBodyHeight={400}>
-                  aliwareIntl.get('nacos.page.configurationManagement.unprocessed_entry') +
-                  res.data.unprocessedItems.length
-                }
-              >
-                <Table
-                  dataSource={res.data.unprocessedItems}
-                  fixedHeader
-                  maxBodyHeight={400}
-                  language={aliwareIntl.currentLanguageCode}
-                >
                   <Table.Column title={'Data ID'} dataIndex={'dataId'} />
                   <Table.Column title={'Group'} dataIndex={'group'} />
                 </Table>
@@ -794,10 +672,7 @@ class ConfigurationManagement extends React.Component {
   }
 
   render() {
-    const pubnodedata = aliwareIntl.get('pubnodata');
+    const { locale = {} } = this.props;
-    const locale = {
-      empty: pubnodedata,
-    };
     return (
       <div>
         <BatchHandle ref={ref => (this.batchHandle = ref)} />
@@ -842,9 +717,7 @@ class ConfigurationManagement extends React.Component {
                   }}
                 >
                   <span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>
-                    {aliwareIntl.get(
+                    {locale.configurationManagement8}
-                      'nacos.page.configurationManagement.configuration_management8'
-                    ) /* 配置管理 */}
                   </span>
                   <span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>|</span>
                   <span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>
@@ -853,11 +726,9 @@ class ConfigurationManagement extends React.Component {
                   <span style={{ fontSize: '14px', color: '#000', marginRight: 18 }}>
                     {this.state.nownamespace_id}
                   </span>
-                  {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query_results')}
+                  {locale.queryResults}
                   <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
-                  {aliwareIntl.get(
+                  {locale.articleMeetRequirements}
-                    'com.alibaba.nacos.page.configurationManagement.article_meet_the_requirements'
-                  )}
                 </h3>
                 <div
                   style={{ position: 'absolute', textAlign: 'right', zIndex: 2, right: 0, top: 0 }}
@@ -875,9 +746,7 @@ class ConfigurationManagement extends React.Component {
                   <Form.Item label={'Data ID:'}>
                     <Input
                       htmlType={'text'}
-                      placeholder={aliwareIntl.get(
+                      placeholder={locale.fuzzyd}
-                        'com.alibaba.nacos.page.configurationManagement.fuzzyd'
-                      )}
                       style={{ width: 200 }}
                       value={this.state.dataId}
                       onChange={this.getDataId.bind(this)}
@@ -888,14 +757,11 @@ class ConfigurationManagement extends React.Component {
                     <Select.AutoComplete
                       style={{ width: 200 }}
                       size={'medium'}
-                      placeholder={aliwareIntl.get(
+                      placeholder={locale.fuzzyg}
-                        'com.alibaba.nacos.page.configurationManagement.fuzzyg'
-                      )}
                       dataSource={this.state.groups}
                       value={this.state.group}
                       onChange={this.setGroup.bind(this)}
                       hasClear
-                      language={aliwareIntl.currentLanguageCode}
                     />
                   </Form.Item>
                   <Form.Item label={''}>
@@ -905,7 +771,7 @@ class ConfigurationManagement extends React.Component {
                       onClick={this.selectAll.bind(this)}
                       data-spm-click={'gostr=/aliyun;locaid=dashsearch'}
                     >
-                      {aliwareIntl.get('com.alibaba.nacos.page.configurationManagement.query')}
+                      {locale.query}
                     </Button>
                   </Form.Item>
                   <Form.Item
@@ -920,9 +786,7 @@ class ConfigurationManagement extends React.Component {
                       onClick={this.changeAdvancedQuery}
                     >
                       <span style={{ marginRight: 5, lineHeight: '28px' }}>
-                        {aliwareIntl.get(
+                        {locale.advancedQuery9}
-                          'nacos.page.configurationManagement.advanced_query9'
-                        ) /* 高级查询 */}
                       </span>
                       <Icon
                         type={
@@ -935,39 +799,28 @@ class ConfigurationManagement extends React.Component {
                   <br />
                   <Form.Item
                     style={this.inApp ? { display: 'none' } : {}}
-                    label={
+                    label={locale.application0}
-                      aliwareIntl.get(
-                        'nacos.page.configurationManagement.HOME_Application0'
-                      ) /* 归属应用： */
-                    }
                   >
                     <Input
                       htmlType={'text'}
-                      placeholder={
+                      placeholder={locale.app1}
-                        aliwareIntl.get(
-                          'nacos.page.configurationManagement.Please_enter_the_name_of_the_app1'
-                        ) /* 请输入应用名称 */
-                      }
                       style={{ width: 200 }}
                       value={this.state.appName}
                       onChange={this.setAppName.bind(this)}
                     />
                   </Form.Item>
-                  <Form.Item label={aliwareIntl.get('nacos.page.configurationManagement.Tags')}>
+                  <Form.Item label={locale.tags}>
                     <Select
                       style={{ width: 200 }}
                       size={'medium'}
                       hasArrow
                       mode="tag"
                       filterLocal={false}
-                      placeholder={aliwareIntl.get(
+                      placeholder={locale.pleaseEnterTag}
-                        'nacos.page.configurationManagement.Please_enter_tag'
-                      )}
                       dataSource={this.state.tagLst}
                       value={this.state.config_tags}
                       onChange={this.setConfigTags.bind(this)}
                       hasClear
-                      language={aliwareIntl.currentLanguageCode}
                     />
                   </Form.Item>
                 </Form>
@@ -991,28 +844,19 @@ class ConfigurationManagement extends React.Component {
               <div>
                 <Table
                   dataSource={this.state.dataSource}
-                  locale={locale}
+                  locale={{ empty: locale.pubNoData }}
                   fixedHeader
                   maxBodyHeight={400}
-                  language={aliwareIntl.currentLanguageCode}
                   ref={'dataTable'}
                 >
                   <Table.Column title={'Data Id'} dataIndex={'dataId'} />
                   <Table.Column title={'Group'} dataIndex={'group'} />
                   {!this.inApp ? (
-                    <Table.Column
+                    <Table.Column title={locale.application} dataIndex={'appName'} />
-                      title={aliwareIntl.get('nacos.page.configurationManagement.HOME_Application')}
-                      dataIndex={'appName'}
-                    />
                   ) : (
                     <div />
                   )}
-                  <Table.Column
+                  <Table.Column title={locale.operation} cell={this.renderCol.bind(this)} />
-                    title={aliwareIntl.get(
-                      'com.alibaba.nacos.page.configurationManagement.operation'
-                    )}
-                    cell={this.renderCol.bind(this)}
-                  />
                 </Table>
                 {this.state.dataSource.length > 0 && (
                   <div style={{ marginTop: 10, overflow: 'hidden' }}>
@@ -1022,7 +866,6 @@ class ConfigurationManagement extends React.Component {
                       pageSizeSelector={'dropdown'}
                       onPageSizeChange={this.handlePageSizeChange.bind(this)}
                       current={this.state.currentPage}
-                      language={aliwareIntl.currentLanguageCode || 'zh-cn'}
                       total={this.state.total}
                       pageSize={this.state.pageSize}
                       onChange={this.changePage.bind(this)}
@@ -1036,7 +879,7 @@ class ConfigurationManagement extends React.Component {
               <ImportDialog ref={'importDialog'} />
               <ExportDialog ref={'exportDialog'} />
             </div>
-            {this.state.hasdash ? (
+            {this.state.hasdash && (
               <div
                 className={'dash-right-container'}
                 style={{ overflow: 'auto', height: window.innerHeight - 40 }}
@@ -1045,8 +888,6 @@ class ConfigurationManagement extends React.Component {
                   <DashboardCard data={v} height={'auto'} key={`show${i}`} />
                 ))}
               </div>
-            ) : (
-              ''
             )}
           </div>
         </Loading>

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/DashboardCard.js

@@ -0,0 +1,99 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { ConfigProvider, Slider } from '@alifd/next';
+
+@ConfigProvider.config
+class DashboardCard extends React.Component {
+  static displayName = 'DashboardCard';
+
+  render() {
+    const { data = {}, height, locale = {} } = this.props;
+    return (
+      <div>
+        {data.modeType === 'notice' ? (
+          <div data-spm-click={'gostr=/aliyun;locaid=notice'}>
+            <Slider style={{ marginBottom: data.modeList.length > 1 ? 20 : 10 }} arrows={false}>
+              {data.modeList.map((item, index) => (
+                <div key={index} className={'slider-img-wrapper'}>
+                  <div
+                    className={'alert alert-success'}
+                    style={{ minHeight: 120, backgroundColor: '#e9feff' }}
+                  >
+                    <div className={'alert-success-text'} style={{ fontWeight: 'bold' }}>
+                      {locale.importantReminder0}
+                    </div>
+                    <strong style={{ color: '#777a7e' }}>
+                      <span>{item.title}</span>
+                    </strong>
+                    <strong>
+                      <span>
+                        <a
+                          style={{ marginLeft: 10, color: '#33cde5' }}
+                          href={item.url}
+                          target={'_blank'}
+                        >
+                          {locale.viewDetails1}
+                        </a>
+                      </span>
+                    </strong>
+                  </div>
+                </div>
+              ))}
+            </Slider>{' '}
+          </div>
+        ) : (
+          <div
+            className={'dash-card-contentwrappers'}
+            style={{ height: height || 'auto' }}
+            data-spm-click={`gostr=/aliyun;locaid=${data.modeType}`}
+          >
+            <h3 className={'dash-card-title'}>{data.modeName}</h3>
+            <div className={'dash-card-contentlist'}>
+              {data.modeList
+                ? data.modeList.map(item => (
+                    <div className={'dash-card-contentitem'}>
+                      <a href={item.url} target={'_blank'}>
+                        {item.title}
+                      </a>
+                      {item.tag === 'new' ? (
+                        <img
+                          style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }}
+                          src={'//img.alicdn.com/tps/TB1pS2YMVXXXXcCaXXXXXXXXXXX-56-24.png'}
+                          alt=""
+                        />
+                      ) : (
+                        ''
+                      )}
+                      {item.tag === 'hot' ? (
+                        <img
+                          style={{ width: 28, marginLeft: 2, verticalAlign: 'text-bottom' }}
+                          src={'//img.alicdn.com/tps/TB1nusxPXXXXXb0aXXXXXXXXXXX-56-24.png'}
+                          alt=""
+                        />
+                      ) : (
+                        ''
+                      )}
+                    </div>
+                  ))
+                : ''}
+            </div>
+          </div>
+        )}{' '}
+      </div>
+    );
+  }
+}
+
+export default DashboardCard;

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/NewConfig/NewConfig.js

@@ -14,7 +14,7 @@
 import React from 'react';
 import $ from 'jquery';
 import SuccessDialog from '../../../components/SuccessDialog';
-import { getParams, setParams, request, aliwareIntl } from '../../../globalLib';
+import { getParams, setParams, request } from '../../../globalLib';
 import {
   Balloon,
   Button,
@@ -27,6 +27,7 @@ import {
   Message,
   Select,
   Radio,
+  ConfigProvider,
 } from '@alifd/next';
 
 import './index.scss';
@@ -35,7 +36,10 @@ const FormItem = Form.Item;
 const { Group: RadioGroup } = Radio;
 const { AutoComplete: Combobox } = Select;
 
+@ConfigProvider.config
 class NewConfig extends React.Component {
+  static displayName = 'NewConfig';
+
   constructor(props) {
     super(props);
     this.field = new Field(this);
@@ -213,6 +217,7 @@ class NewConfig extends React.Component {
   }
 
   publishConfig() {
+    const { locale = {} } = this.props;
     this.field.validate((errors, values) => {
       if (errors) {
         return;
@@ -250,8 +255,8 @@ class NewConfig extends React.Component {
         },
         success(res) {
           const _payload = {};
-          _payload.maintitle = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing_main');
+          _payload.maintitle = locale.newListingMain;
-          _payload.title = aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing');
+          _payload.title = locale.newListing;
           _payload.content = '';
           _payload.dataId = payload.dataId;
           _payload.group = payload.group;
@@ -271,8 +276,7 @@ class NewConfig extends React.Component {
         },
         error(res) {
           Dialog.alert({
-            language: aliwareIntl.currentLanguageCode || 'zh-cn',
+            content: locale.publishFailed,
-            content: aliwareIntl.get('com.alibaba.nacos.page.newconfig.publish_failed'),
           });
           self.closeLoading();
         },
@@ -300,16 +304,18 @@ class NewConfig extends React.Component {
   }
 
   validateChart(rule, value, callback) {
+    const { locale = {} } = this.props;
     const chartReg = /[@#\$%\^&\*]+/g;
 
     if (chartReg.test(value)) {
-      callback(aliwareIntl.get('com.alibaba.nacos.page.newconfig.do_not_ente'));
+      callback(locale.doNotEnte);
     } else {
       callback();
     }
   }
 
   render() {
+    const { locale = {} } = this.props;
     const { init } = this.field;
     const formItemLayout = {
       labelCol: {
@@ -366,7 +372,7 @@ class NewConfig extends React.Component {
           visible={this.state.loading}
           color={'#333'}
         >
-          <h1>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.new_listing')}</h1>
+          <h1>{locale.newListing}</h1>
           <Form field={this.field}>
             <FormItem label={'Data ID:'} required {...formItemLayout}>
               <Input
@@ -374,13 +380,11 @@ class NewConfig extends React.Component {
                   rules: [
                     {
                       required: true,
-                      message: aliwareIntl.get('com.alibaba.nacos.page.newconfig'),
+                      message: locale.newConfig,
                     },
                     {
                       max: 255,
-                      message: aliwareIntl.get(
+                      message: locale.dataIdIsNotEmpty,
-                        'com.alibaba.nacos.page.newconfig.dataId_is_not_empty'
-                      ),
                     },
                     { validator: this.validateChart.bind(this) },
                   ],
@@ -398,28 +402,23 @@ class NewConfig extends React.Component {
                 size={'large'}
                 hasArrow
                 dataSource={this.state.groups}
-                placeholder={aliwareIntl.get('com.alibaba.nacos.page.newconfig.group_placeholder')}
+                placeholder={locale.groupPlaceholder}
                 defaultValue={this.group}
                 {...init('group', {
                   rules: [
                     {
                       required: true,
-                      message: aliwareIntl.get(
+                      message: locale.moreAdvanced,
-                        'com.alibaba.nacos.page.newconfig.the_more_advanced'
-                      ),
                     },
                     {
                       max: 127,
-                      message: aliwareIntl.get(
+                      message: locale.groupNotEmpty,
-                        'com.alibaba.nacos.page.newconfig.group_is_not_empty'
-                      ),
                     },
                     { validator: this.validateChart.bind(this) },
                   ],
                 })}
                 onChange={this.setGroup.bind(this)}
                 hasClear
-                language={aliwareIntl.currentLanguageCode}
               />
             </FormItem>
             <FormItem
@@ -428,23 +427,19 @@ class NewConfig extends React.Component {
               style={{ display: this.state.showGroupWarning ? 'block' : 'none' }}
             >
               <Message type={'warning'} size={'medium'} animation={false}>
-                {aliwareIntl.get(
+                {locale.annotation}
-                  'nacos.page.newconfig.Note_You_are_to_be_a_custom_packet_the_new_configuration,_make_sure_that_the_client_use_the_Pandora_version_higher_than_3._4._0,_otherwise_it_may_read_less_than_the_configuration.0'
-                )}
               </Message>
             </FormItem>
             <FormItem label={''} {...formItemLayout}>
               <div>
                 <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
-                  {this.state.showmore
+                  {this.state.showmore ? locale.dataIdLength : locale.collapse}
-                    ? aliwareIntl.get('com.alibaba.nacos.page.newconfig.Data_ID_length')
-                    : aliwareIntl.get('com.alibaba.nacos.page.newconfig.collapse')}
                 </a>
               </div>
             </FormItem>
 
             <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
-              <FormItem label={aliwareIntl.get('nacos.page.newconfig.Tags')} {...formItemLayout}>
+              <FormItem label={locale.tags} {...formItemLayout}>
                 <Select
                   size={'medium'}
                   hasArrow
@@ -453,38 +448,24 @@ class NewConfig extends React.Component {
                   multiple
                   mode="tag"
                   filterLocal
-                  placeholder={aliwareIntl.get(
+                  placeholder={locale.pleaseEnterTag}
-                    'nacos.page.configurationManagement.Please_enter_tag'
-                  )}
                   dataSource={this.state.tagLst}
                   value={this.state.config_tags}
                   onChange={this.setConfigTags.bind(this)}
                   hasClear
-                  language={aliwareIntl.currentLanguageCode}
                 />
               </FormItem>
 
-              <FormItem
+              <FormItem label={locale.groupIdCannotBeLonger} {...formItemLayout}>
-                label={aliwareIntl.get(
-                  'com.alibaba.nacos.page.newconfig.Group_ID_cannot_be_longer'
-                )}
-                {...formItemLayout}
-              >
                 <Input {...init('appName')} readOnly={this.inApp} />
               </FormItem>
             </div>
 
-            <FormItem
+            <FormItem label={locale.description} {...formItemLayout}>
-              label={aliwareIntl.get('nacos.page.newconfig.Description')}
-              {...formItemLayout}
-            >
               <Input.TextArea htmlType={'text'} multiple rows={3} {...init('desc')} />
             </FormItem>
 
-            <FormItem
+            <FormItem label={locale.targetEnvironment} {...formItemLayout}>
-              label={aliwareIntl.get('com.alibaba.nacos.page.newconfig.the_target_environment')}
-              {...formItemLayout}
-            >
               <RadioGroup
                 dataSource={list}
                 value={this.state.configType}
@@ -494,7 +475,7 @@ class NewConfig extends React.Component {
             <FormItem
               label={
                 <span>
-                  {aliwareIntl.get('com.alibaba.nacos.page.newconfig.configuration_format')}
+                  {locale.configurationFormat}
                   <Balloon
                     trigger={
                       <Icon
@@ -512,10 +493,8 @@ class NewConfig extends React.Component {
                     style={{ marginRight: 5 }}
                     triggerType={'hover'}
                   >
-                    <p>
+                    <p>{locale.configureContentsOf}</p>
-                      {aliwareIntl.get('com.alibaba.nacos.page.newconfig.configure_contents_of')}
+                    <p>{locale.fullScreen}</p>
-                    </p>
-                    <p>{aliwareIntl.get('com.alibaba.nacos.page.newconfig.full_screen')}</p>
                   </Balloon>
                   :
                 </span>
@@ -533,11 +512,11 @@ class NewConfig extends React.Component {
                   style={{ marginRight: 10 }}
                   onClick={this.publishConfig.bind(this)}
                 >
-                  {aliwareIntl.get('com.alibaba.nacos.page.newconfig.esc_exit')}
+                  {locale.escExit}
                 </Button>
 
                 <Button type={'light'} onClick={this.goList.bind(this)}>
-                  {aliwareIntl.get('com.alibaba.nacos.page.newconfig.release')}
+                  {locale.release}
                 </Button>
               </div>
             </FormItem>