refactor: 💡 update console-ui theme (#8951)

✅ Closes: https://github.com/alibaba/nacos/issues/8950

console-ui/package.json

@@ -53,9 +53,9 @@
     "husky": "^3.1.0",
     "lint-staged": "^9.5.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "1.19.1",
+    "sass": "^1.54.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.1.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
@@ -65,11 +65,12 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@alifd/next": "^1.17.4",
+    "@alifd/next": "^1.19.4",
+    "@alifd/theme-design-pro": "0.x",
     "axios": "^0.21.1",
     "moment": "^2.23.0",
-    "qs": "^6.8.2",
     "prop-types": "^15.6.2",
+    "qs": "^6.8.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.3",

console-ui/src/components/Copy/index.jsx

@@ -0,0 +1,83 @@
+/*
+ * 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 { withRouter } from 'react-router-dom';
+import { Icon, Message } from '@alifd/next';
+import PropTypes from 'prop-types';
+
+// 创建假元素
+function createFakeElement(value) {
+  const fakeElement = document.createElement('textarea');
+
+  fakeElement.style.border = '0';
+  fakeElement.style.padding = '0';
+  fakeElement.style.margin = '0';
+
+  fakeElement.style.position = 'absolute';
+  fakeElement.style.left = '-999px';
+  fakeElement.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
+  fakeElement.setAttribute('readonly', '');
+  fakeElement.value = value;
+  return fakeElement;
+}
+
+function copyText(value) {
+  const element = createFakeElement(value);
+  document.body.appendChild(element);
+
+  // 选中元素
+  element.focus();
+  element.select();
+  element.setSelectionRange(0, element.value.length);
+
+  document.execCommand('copy');
+  document.body.removeChild(element);
+  Message.success('Success copied!');
+}
+
+@withRouter
+class Copy extends React.Component {
+  static displayName = 'Copy';
+
+  static propTypes = {
+    style: PropTypes.object,
+    value: PropTypes.string,
+    textNode: PropTypes.string,
+    className: PropTypes.string,
+    showIcon: PropTypes.bool,
+  };
+
+  render() {
+    const { style = {}, value, textNode, className, showIcon = true } = this.props;
+    return (
+      <div className={className} onClick={() => (showIcon ? '' : copyText(value))} style={style}>
+        {textNode || value}
+        {showIcon && (
+          <Icon
+            title="复制"
+            className="copy-icon"
+            size="small"
+            type="copy"
+            onClick={() => copyText(value)}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export default Copy;

console-ui/src/components/DeleteDialog/DeleteDialog.js

@@ -101,11 +101,11 @@ class DeleteDialog extends React.Component {
                 <div>
                   <h3>{this.state.isok ? locale.deletedSuccessfully : locale.deleteFailed}</h3>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>Data ID</span>
                     <span style={{ color: '#c7254e' }}>{this.state.dataId}</span>
                   </p>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>Group:</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>Group</span>
                     <span style={{ color: '#c7254e' }}>{this.state.group}</span>
                   </p>
                   {this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}

console-ui/src/components/NameSpaceList/NameSpaceList.js

@@ -165,13 +165,12 @@ class NameSpaceList extends React.Component {
     const namespacesBtn = namespaceList.map((obj, index) => {
       const style =
         obj.namespace === nownamespace
-          ? { color: '#00C1DE', paddingRight: 10, border: 'none', fontSize: 12 }
+          ? { color: '#209BFA', paddingRight: 10, border: 'none', fontSize: 14 }
-          : { color: '#666', paddingRight: 10, border: 'none', fontSize: 12 };
+          : { color: '#666', paddingRight: 10, border: 'none', fontSize: 14 };
       return (
-        <div key={index} style={{ float: 'left', cursor: 'pointer' }}>
+        <div key={index} style={{ cursor: 'pointer' }}>
-          {index === 0 ? '' : <span style={{ marginRight: 5, marginLeft: 5 }}>|</span>}
+          {index === 0 ? '' : <span style={{ marginRight: 8, color: '#999' }}>|</span>}
           <span
-            type={'light'}
             style={style}
             onClick={this.changeNameSpace.bind(this, obj.namespace, obj.namespaceShowName)}
             key={index}
@@ -181,23 +180,23 @@ class NameSpaceList extends React.Component {
         </div>
       );
     });
-    return <div style={{ paddingTop: 9 }}>{namespacesBtn}</div>;
+    return namespacesBtn;
   }
 
   render() {
     const namespaceList = this.state.namespaceList || [];
     const title = this.props.title || '';
-    const namespacestyle = {
-      marginTop: 5,
-      marginBottom: '10px',
-      paddingBottom: '10px',
-      borderBottom: '1px solid #ccc',
-    };
 
     return (
       <div
         className={namespaceList.length ? 'namespacewrapper' : ''}
-        style={namespaceList.length ? namespacestyle : {}}
+        style={{
+          display: 'flex',
+          height: 40,
+          alignItems: 'center',
+          marginTop: 8,
+          marginBottom: 16,
+        }}
       >
         {}
         {title ? (
@@ -218,7 +217,7 @@ class NameSpaceList extends React.Component {
         ) : (
           ''
         )}
-        <div style={{ float: 'left' }}>{this.rendernamespace(namespaceList)}</div>
+        {this.rendernamespace(namespaceList)}
       </div>
     );
   }

console-ui/src/components/PageTitle/index.js

@@ -0,0 +1,69 @@
+/*
+ * 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 { Provider, connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import Copy from '../Copy';
+
+@withRouter
+@connect(state => ({ ...state.locale }))
+class PageTitle extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    desc: PropTypes.string,
+    nameSpace: PropTypes.bool,
+    locale: PropTypes.object,
+  };
+
+  getNameSpace(locale, desc, nameSpace) {
+    if (!nameSpace) {
+      return desc;
+    }
+    return (
+      <span style={{ display: 'flex', alignItems: 'center', marginLeft: 16 }}>
+        {locale.NameSpace.namespaceID}
+        <Copy
+          style={{
+            marginLeft: 16,
+            height: 32,
+            display: 'flex',
+            alignItems: 'center',
+            background: 'rgb(239, 243, 248)',
+            padding: '0px 8px',
+            minWidth: 220,
+          }}
+          value={desc}
+        />
+      </span>
+    );
+  }
+
+  render() {
+    const { title, desc, nameSpace, locale } = this.props;
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', marginTop: 8, marginBottom: 8 }}>
+        <span style={{ fontSize: 28, height: 40, fontWeight: 500 }}>{title}</span>
+        <span style={{ marginLeft: 4 }}>
+          {desc && desc !== 'undefined' ? this.getNameSpace(locale, desc, nameSpace) : ''}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default PageTitle;

console-ui/src/components/QueryResult/index.js

@@ -0,0 +1,43 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { Provider, connect } from 'react-redux';
+import './index.scss';
+
+@connect(state => ({ ...state.locale }))
+class QueryResult extends React.Component {
+  static displayName = 'QueryResult';
+
+  static propTypes = {
+    locale: PropTypes.object,
+    total: PropTypes.number,
+  };
+
+  render() {
+    const { locale = {}, total } = this.props;
+    return (
+      <div className="query_result_wrapper">
+        {locale.ConfigurationManagement.queryResults}
+        <strong style={{ fontWeight: 'bold' }}> {total} </strong>
+        {locale.ConfigurationManagement.articleMeetRequirements}
+      </div>
+    );
+  }
+}
+
+export default QueryResult;

console-ui/src/components/QueryResult/index.scss

@@ -0,0 +1,21 @@
+/*!
+ * 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.
+ */
+
+.query_result_wrapper{
+  font-size: 16px;
+  margin-bottom: 16px;
+  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
+}

console-ui/src/components/RegionGroup/RegionGroup.js

@@ -20,6 +20,7 @@ import $ from 'jquery';
 import { Button } from '@alifd/next';
 import NameSpaceList from '../NameSpaceList';
 import { setParams, request } from '../../globalLib';
+import PageTitle from '../PageTitle';
 
 import './index.scss';
 
@@ -261,7 +262,7 @@ class RegionGroup extends React.Component {
 
   render() {
     return (
-      <div>
+      <div style={{ marginTop: this.state.left ? 0 : -30 }}>
         <div ref={ref => (this.mainRef = ref)} className="clearfix">
           <div style={{ overflow: 'hidden' }}>
             <div id="left" style={{ float: 'left', display: 'inline-block', marginRight: 20 }}>
@@ -270,7 +271,7 @@ class RegionGroup extends React.Component {
                 style={{ display: 'inline-block', verticalAlign: 'top' }}
               >
                 {typeof this.state.left === 'string' ? (
-                  <h5 style={this.styles.title}>{this.state.left}</h5>
+                  <PageTitle title={this.state.left} />
                 ) : (
                   this.state.left
                 )}
@@ -314,13 +315,11 @@ class RegionGroup extends React.Component {
             </div>
           </div>
           {this.props.namespaceCallBack && (
-            <div>
             <NameSpaceList
               ref={this.nameSpaceList}
               namespaceCallBack={this.props.namespaceCallBack}
               setNowNameSpace={this.props.setNowNameSpace}
             />
-            </div>
           )}
         </div>
       </div>

console-ui/src/components/SuccessDialog/SuccessDialog.js

@@ -114,11 +114,11 @@ class SuccessDialog extends React.Component {
                     </h3>
                   )}
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>Data ID</span>
                     <span style={{ color: '#c7254e' }}>{this.state.dataId}</span>
                   </p>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>Group:</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>Group</span>
                     <span style={{ color: '#c7254e' }}>{this.state.group}</span>
                   </p>
                   {this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}

console-ui/src/index.js

@@ -55,6 +55,8 @@ import reducers from './reducers';
 import { changeLanguage } from './reducers/locale';
 
 import './index.scss';
+import '@alifd/theme-design-pro/variables.css';
+import '@alifd/theme-design-pro/dist/next.var.css';
 import PropTypes from 'prop-types';
 
 module.hot && module.hot.accept();

console-ui/src/index.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+
 html,
 body,
 :global(#root) {
@@ -64,7 +65,23 @@ body,
 :global(.viewFramework-product-navbar .product-nav-list li .active) {
   background-color: #fff !important;
 }
+.next-menu .next-menu-icon-arrow-down {
+  transform: rotate(0deg)!important;
+}
 
+li.next-menu-item:not(.next-disabled):hover, li.next-menu-item:not(.next-disabled).next-selected:hover, li.next-menu-item:not(.next-disabled).next-selected:focus:hover  {
+  background: #E4F3FE;
+  background: var(--nav-normal-sub-nav-hover-bg-color, #E4F3FE);
+  color: #209BFA;
+  color: var(--nav-normal-sub-nav-hover-text-color, #209BFA);
+}
+
+.next-menu.next-normal .next-menu-item.next-selected{
+  background: #E4F3FE!important;;
+  background: var(--nav-normal-sub-nav-selected-bg-color, #E4F3FE)!important;
+  color: #209BFA!important;
+  color: var(--nav-normal-sub-nav-selected-text-color, #209BFA)!important;
+}
 .clearfix:after {
   content: '.';
   clear: both;
@@ -78,6 +95,12 @@ body,
   zoom: 1;
 }
 
+.copy-icon {
+  cursor: pointer;
+  margin-left: 4px;
+  color: var(--color-link-1, #298dff);
+}
+
 .layouttitle {
   height: 40px;
   width: 200px;
@@ -578,7 +601,7 @@ form.vertical-margin-lg .form-group {
 .namespacewrapper {
   padding: 5px 15px;
   overflow: hidden;
-  background-color: #eee;
+  background-color: #efefef;
 }
 
 /*

console-ui/src/layouts/MainLayout.js

@@ -59,7 +59,7 @@ class MainLayout extends React.Component {
 
   isCurrentPath(url) {
     const { location } = this.props;
-    return url === location.pathname ? 'current-path' : undefined;
+    return url === location.pathname ? 'current-path next-selected' : undefined;
   }
 
   defaultOpenKeys() {
@@ -86,10 +86,18 @@ class MainLayout extends React.Component {
     const { locale = {}, version, functionMode } = this.props;
     const MenuData = getMenuData(functionMode);
     return (
-      <>
+      <section
+        className="next-shell next-shell-desktop next-shell-brand"
+        style={{ minHeight: '100vh' }}
+      >
         <Header />
-        <div className="main-container">
+        <section className="next-shell-sub-main">
-          <div className="left-panel">
+          <div className="main-container next-shell-main">
+            <div className="left-panel next-aside-navigation">
+              <div
+                className="next-shell-navigation next-shell-mini next-shell-aside"
+                style={{ padding: 0 }}
+              >
                 {this.isShowGoBack() ? (
                   <div className="go-back" onClick={() => this.goBack()}>
                     <Icon type="arrow-left" />
@@ -102,7 +110,7 @@ class MainLayout extends React.Component {
                     </h1>
                     <Menu
                       defaultOpenKeys={this.defaultOpenKeys()}
-                  className="nav-menu"
+                      className="next-nav next-normal next-active next-right next-no-arrow next-nav-embeddable"
                       openMode="single"
                     >
                       {MenuData.map((subMenu, idx) => {
@@ -137,9 +145,11 @@ class MainLayout extends React.Component {
                   </>
                 )}
               </div>
-          <div className="right-panel">{this.props.children}</div>
             </div>
-      </>
+            <div className="right-panel next-shell-sub-main">{this.props.children}</div>
+          </div>
+        </section>
+      </section>
     );
   }
 }

console-ui/src/layouts/index.scss

@@ -1396,30 +1396,27 @@ h6 {
 
 .main-container {
   height: calc(100vh - 66px);
-  .left-panel,
+  background-color: #fff!important;
-  .right-panel {
-    float: left;
-    height: 100%;
-  }
-  .left-panel {
-    width: 180px;
-    background-color: #eaedf1;
-  }
   .right-panel {
+    background-color: #fff;
     width: calc(100% - 180px);
-    padding: 10px;
+    padding: 12px 32px;
     overflow: scroll;
   }
   .nav-title {
     margin: 0;
+    // background-color: #E4F3FE;
     text-align: center;
     font-size: 14px;
     font-weight: bold;
-    line-height: 70px;
+    height: 72px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    background-color: #d9dee4;
+    border-bottom: var(--shell-brand-navigation-ver-divider-size, 1px) var(--shell-brand-navigation-ver-divider-style, solid) var(--shell-brand-navigation-ver-divider-color, #EEEEEE);
+    display: flex;
+    justify-content: center;
+    align-items: center;
     span {
       margin-left: 5px;
     }

console-ui/src/locales/en-US.js

@@ -75,11 +75,12 @@ const I18N_CONF = {
     modifyPasswordFailed: 'Modify password failed',
   },
   NameSpace: {
+    public_tips: 'public namespace ID is empty by default',
     namespace: 'Namespaces',
     prompt: 'Notice',
     namespaceDetails: 'Namespace details',
     namespaceName: 'Name',
-    namespaceID: 'ID:',
+    namespaceID: 'ID',
     configuration: 'Number of Configurations',
     description: 'Description',
     removeNamespace: 'Remove the namespace',
@@ -225,8 +226,7 @@ const I18N_CONF = {
     groupCanNotBeEmpty: 'Group cannot be empty',
     pleaseInputIp: 'Enter IP',
     query: 'Search',
-    queryResultsQuery: 'Search Results: Found',
+    articleMeetRequirements: 'configuration items.',
-    articleMeetRequirementsConfiguration: 'configuration items.',
   },
   HistoryRollback: {
     details: 'Details',
@@ -238,8 +238,7 @@ const I18N_CONF = {
     group: 'Enter Group',
     groupCanNotBeEmpty: 'Group cannot be empty',
     query: 'Search',
-    queryResult: 'Search Results: Found',
+    articleMeetRequirements: 'configuration items.',
-    articleMeet: 'configuration items.',
     lastUpdateTime: 'Last Modified At',
     operator: 'Operator',
     operation: 'Operation',
@@ -255,11 +254,11 @@ const I18N_CONF = {
     deleteAction: 'Delete',
     recipientFrom: 'Collapse',
     moreAdvancedOptions: 'Advanced Options',
-    home: 'Application:',
+    home: 'Application',
-    actionType: 'Action Type:',
+    actionType: 'Action Type',
-    operator: 'Operator:',
+    operator: 'Operator',
     sourceIp: 'Source IP',
-    configureContent: 'Configuration Content:',
+    configureContent: 'Configuration Content',
     back: 'Back',
   },
   DashboardCard: {
@@ -271,10 +270,11 @@ const I18N_CONF = {
     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:',
+    noLongerDisplay4: 'no longer display',
+    createConfiguration: 'Create Configuration',
     removeConfiguration: 'Delete Configuration',
     sureDelete: 'Are you sure you want to delete the following configuration?',
-    environment: 'Region:',
+    environment: 'Region',
     configurationManagement: 'Configurations',
     details: 'Details',
     sampleCode: 'Code Example',
@@ -283,12 +283,12 @@ const I18N_CONF = {
     more: 'More',
     version: 'Historical Versions',
     listenerQuery: 'Configuration Listening Query',
-    failedEntry: 'Failed Entry:',
+    failedEntry: 'Failed Entry',
-    successfulEntry: 'Successful Entry:',
+    successfulEntry: 'Successful Entry',
-    unprocessedEntry: 'Unprocessed Entry:',
+    unprocessedEntry: 'Unprocessed Entry',
     pubNoData: 'No results found.',
     configurationManagement8: 'configuration management',
-    queryResults: 'Search Results: Found',
+    queryResults: 'Found',
     articleMeetRequirements: 'configuration items',
     fuzzyd: "Add wildcard '*' for fuzzy query",
     defaultFuzzyd: 'Default fuzzy query mode opened',
@@ -296,9 +296,8 @@ const I18N_CONF = {
     defaultFuzzyg: 'Default fuzzy query mode opened',
     query: 'Search',
     advancedQuery9: 'Advanced Query',
-    application0: 'Application:',
     app1: 'Enter App Name\n',
-    tags: 'Tags:',
+    tags: 'Tags',
     pleaseEnterTag: 'Enter Tag',
     application: 'Application',
     operation: 'Operation',
@@ -343,9 +342,9 @@ const I18N_CONF = {
     getNamespace403: 'Without permission to access ${namespaceName} namespace!',
     startCloning: 'Start Clone',
     cloningConfiguration: 'Clone config',
-    source: 'Source :',
+    source: 'Source ',
-    configurationNumber: 'Items:',
+    configurationNumber: 'Items',
-    target: 'Target:',
+    target: 'Target',
     selectNamespace: 'Select Namespace',
     selectedEntry: '| Selected Entry',
     cloneSelectedAlertTitle: 'Clone config',
@@ -371,11 +370,11 @@ const I18N_CONF = {
       '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:',
+    tags: 'Tags',
     pleaseEnterTag: 'Enter Tag',
-    groupIdCannotBeLonger: 'Application:',
+    groupIdCannotBeLonger: 'Application',
-    description: 'Description:',
+    description: 'Description',
-    targetEnvironment: 'Format:',
+    targetEnvironment: 'Format',
     configurationFormat: 'Configuration Content',
     configureContentsOf: 'Press F1 to view in full screen',
     fullScreen: 'Press Esc to exit',
@@ -391,13 +390,13 @@ const I18N_CONF = {
     cover: 'Cover',
     getNamespaceFailed: 'get the namespace failed',
     selectedEntry: '| Selected Entry',
-    homeApplication: 'Home Application:',
+    homeApplication: 'Home Application',
-    tags: 'tags:',
+    tags: 'tags',
     startCloning: 'Start Clone',
-    source: 'Source :',
+    source: 'Source ',
-    configurationNumber: 'Items:',
+    configurationNumber: 'Items',
-    target: 'Target:',
+    target: 'Target',
-    conflict: 'Conflict:',
+    conflict: 'Conflict',
     selectNamespace: 'Select Namespace',
     configurationCloning: 'Clone（',
   },
@@ -426,17 +425,17 @@ const I18N_CONF = {
     homeApplication: 'Group name cannot be empty',
     collapse: 'Collapse',
     groupNotEmpty: 'Advanced Options',
-    tags: 'Tags:',
+    tags: 'Tags',
     pleaseEnterTag: 'Enter Tag',
-    targetEnvironment: 'Application:',
+    targetEnvironment: 'Application',
-    description: 'Description:',
+    description: 'Description',
-    format: 'Format:',
+    format: 'Format',
     configcontent: 'Configuration Content',
     escExit: 'Press F1 to view in full screen',
     releaseBeta: 'Press Esc to exit ',
     release: 'Beta Publish',
     stopPublishBeta: 'Stop Beta',
-    betaPublish: 'Beta Publish:',
+    betaPublish: 'Beta Publish',
     betaSwitchPrompt: 'Not checked by default.',
     publish: 'Publish',
     back: 'Back',
@@ -452,19 +451,19 @@ const I18N_CONF = {
     publicSpace: 'OK',
     confirmModify: 'Edit Namespace',
     editNamespace: 'Loading...',
-    load: 'Namespace:',
+    load: 'Namespace',
     namespace: 'Namespace cannot be empty',
     namespaceDesc: 'Namespace description cannot be empty',
-    description: 'Description:',
+    description: 'Description',
   },
   ExportDialog: {
     selectedEntry: '| Selected Entry',
-    application: 'Application:',
+    application: 'Application',
-    tags: 'Tags:',
+    tags: 'Tags',
     exportBtn: 'Export',
     exportConfiguration: 'Export ( ',
     source: 'Source',
-    items: 'Items:',
+    items: 'Items',
   },
   ImportDialog: {
     terminate: 'Terminate',
@@ -473,8 +472,8 @@ const I18N_CONF = {
     zipFileFormat: 'Only upload. zip file format',
     uploadFile: 'Upload File',
     importLabel: 'Import ( ',
-    target: 'Target:',
+    target: 'Target',
-    conflict: 'Conflict:',
+    conflict: 'Conflict',
     beSureExerciseCaution: 'Caution: data will be imported directly after uploading.',
   },
   ShowCodeing: {
@@ -507,12 +506,12 @@ const I18N_CONF = {
     cancel: 'Cancel',
     newnamespce: 'Create Namespace',
     loading: 'Loading...',
-    name: 'Namespace:',
+    name: 'Namespace',
-    namespaceId: 'Namespace ID(automatically generated if not filled):',
+    namespaceId: 'Namespace ID(automatically generated if not filled)',
     namespaceIdTooLong: 'The namespace ID length cannot exceed 128',
     namespacenotnull: 'Namespace cannot be empty',
     namespacedescnotnull: 'Namespace description cannot be empty',
-    description: 'Description:',
+    description: 'Description',
     namespaceIdAlreadyExist: 'namespaceId already exist',
     newnamespceFailedMessage:
       'namespaceId format is incorrect/namespaceId length greater than 128/namespaceId already exist',
@@ -526,11 +525,11 @@ const I18N_CONF = {
     configurationDetails: 'Configuration Details',
     collapse: 'Collapse',
     more: 'Advanced Options',
-    home: 'Application:',
+    home: 'Application',
-    tags: 'Tags:',
+    tags: 'Tags',
-    description: 'Description:',
+    description: 'Description',
-    betaRelease: 'Beta Publish:',
+    betaRelease: 'Beta Publish',
-    configuration: 'Configuration Content:',
+    configuration: 'Configuration Content',
     back: 'Back',
     versionComparison: 'Version Comparison',
     dialogCurrentArea: 'Current Version',
@@ -551,9 +550,9 @@ const I18N_CONF = {
     configurationRollback: 'Configuration Rollback',
     collapse: 'Collapse',
     more: 'Advanced Options',
-    home: 'Application:',
+    home: 'Application',
-    actionType: 'Action Type:',
+    actionType: 'Action Type',
-    configuration: 'Configuration Content:',
+    configuration: 'Configuration Content',
     back: 'Back',
     rollbackSuccessful: 'Rollback Successful',
     rollbackDelete: 'Delete',

console-ui/src/locales/zh-CN.js

@@ -74,6 +74,7 @@ const I18N_CONF = {
     modifyPasswordFailed: '修改密码失败',
   },
   NameSpace: {
+    public_tips: 'public命名空间ID默认空',
     namespace: '命名空间',
     prompt: '提示',
     namespaceDetails: '命名空间详情',
@@ -224,8 +225,7 @@ const I18N_CONF = {
     groupCanNotBeEmpty: 'Group不能为空',
     pleaseInputIp: '请输入IP',
     query: '查询',
-    queryResultsQuery: '查询结果：共查询到',
+    articleMeetRequirements: '条满足要求的配置。',
-    articleMeetRequirementsConfiguration: '条满足要求的配置。',
   },
   HistoryRollback: {
     details: '详情',
@@ -237,8 +237,7 @@ const I18N_CONF = {
     group: '请输入Group',
     groupCanNotBeEmpty: 'Group不能为空',
     query: '查询',
-    queryResult: '查询结果：共查询到',
+    articleMeetRequirements: '条满足要求的配置。',
-    articleMeet: '条满足要求的配置。',
     lastUpdateTime: '最后更新时间',
     operator: '操作人',
     operation: '操作',
@@ -254,11 +253,11 @@ const I18N_CONF = {
     deleteAction: '删除',
     recipientFrom: '收起',
     moreAdvancedOptions: '更多高级选项',
-    home: '归属应用:',
+    home: '归属应用',
-    actionType: '操作类型:',
+    actionType: '操作类型',
-    configureContent: '配置内容:',
+    configureContent: '配置内容',
-    operator: '操作人:',
+    operator: '操作人',
-    sourceIp: '来源 IP:',
+    sourceIp: '来源 IP',
     back: '返回',
   },
   DashboardCard: {
@@ -268,11 +267,12 @@ const I18N_CONF = {
   ConfigurationManagement: {
     exportBtn: '导出',
     questionnaire2: '问卷调查',
-    ad: '答 ACM 前端监控调查问卷，限时领取阿里云代金券\t            详情猛戳：',
+    ad: '答 ACM 前端监控调查问卷，限时领取阿里云代金券\t            详情猛戳',
-    noLongerDisplay4: '不再显示：',
+    noLongerDisplay4: '不再显示',
+    createConfiguration: '创建配置',
     removeConfiguration: '删除配置',
     sureDelete: '确定要删除以下配置吗？',
-    environment: '地域：',
+    environment: '地域',
     configurationManagement: '配置列表',
     details: '详情',
     sampleCode: '示例代码',
@@ -281,12 +281,12 @@ const I18N_CONF = {
     more: '更多',
     version: '历史版本',
     listenerQuery: '监听查询',
-    failedEntry: '失败的条目:',
+    failedEntry: '失败的条目',
-    successfulEntry: '成功的条目:',
+    successfulEntry: '成功的条目',
-    unprocessedEntry: '未处理的条目:',
+    unprocessedEntry: '未处理的条目',
     pubNoData: '没有数据',
     configurationManagement8: '配置管理',
-    queryResults: '查询结果：共查询到',
+    queryResults: '查询到',
     articleMeetRequirements: '条满足要求的配置。',
     fuzzyd: "添加通配符'*'进行模糊查询",
     defaultFuzzyd: '已开启默认模糊查询',
@@ -294,11 +294,10 @@ const I18N_CONF = {
     defaultFuzzyg: '已开启默认模糊查询',
     query: '查询',
     advancedQuery9: '高级查询',
-    application0: '归属应用:',
     app1: '请输入应用名',
-    tags: '标签:',
+    tags: '标签',
     pleaseEnterTag: '请输入标签',
-    application: '归属应用:',
+    application: '归属应用',
     operation: '操作',
     export: '导出查询结果',
     newExport: '新版导出查询结果',
@@ -340,9 +339,9 @@ const I18N_CONF = {
     getNamespace403: '没有 ${namespaceName} 命名空间的访问权限！',
     startCloning: '开始克隆',
     cloningConfiguration: '克隆配置',
-    source: '源空间：',
+    source: '源空间',
-    configurationNumber: '配置数量：',
+    configurationNumber: '配置数量',
-    target: '目标空间：',
+    target: '目标空间',
     selectNamespace: '请选择命名空间',
     selectedEntry: '| 选中的条目',
     cloneSelectedAlertTitle: '配置克隆',
@@ -365,15 +364,15 @@ const I18N_CONF = {
     moreAdvanced: 'Group不能为空',
     groupNotEmpty: 'Group ID长度不能超过127字符',
     annotation:
-      '注：您正在往一个自定义分组新增配置，请确保客户端使用的Pandora版本高于3.4.0，否则可能读取不到该配置。',
+      '注您正在往一个自定义分组新增配置，请确保客户端使用的Pandora版本高于3.4.0，否则可能读取不到该配置。',
     dataIdLength: '收起',
     collapse: '更多高级选项',
-    tags: '标签:',
+    tags: '标签',
     pleaseEnterTag: '请输入标签',
-    groupIdCannotBeLonger: '归属应用:',
+    groupIdCannotBeLonger: '归属应用',
-    description: '描述:',
+    description: '描述',
-    targetEnvironment: '配置格式:',
+    targetEnvironment: '配置格式',
-    configurationFormat: '配置内容:',
+    configurationFormat: '配置内容',
     configureContentsOf: '按F1显示全屏',
     fullScreen: '按Esc退出全屏',
     escExit: '发布',
@@ -388,13 +387,13 @@ const I18N_CONF = {
     cover: '覆盖',
     getNamespaceFailed: '获取命名空间失败',
     selectedEntry: '| 选中的条目',
-    homeApplication: '归属应用:',
+    homeApplication: '归属应用',
-    tags: '标签:',
+    tags: '标签',
     startCloning: '开始克隆',
-    source: '源空间：',
+    source: '源空间',
-    configurationNumber: '配置数量：',
+    configurationNumber: '配置数量',
-    target: '目标空间：',
+    target: '目标空间',
-    conflict: '相同配置:',
+    conflict: '相同配置',
     selectNamespace: '请选择命名空间',
     configurationCloning: '配置克隆（',
   },
@@ -423,17 +422,17 @@ const I18N_CONF = {
     homeApplication: 'Group不能为空',
     collapse: '收起',
     groupNotEmpty: '更多高级选项',
-    tags: '标签:',
+    tags: '标签',
     pleaseEnterTag: '请输入标签',
-    targetEnvironment: '归属应用:',
+    targetEnvironment: '归属应用',
-    description: '描述:',
+    description: '描述',
-    format: '配置格式:',
+    format: '配置格式',
     configcontent: '配置内容',
     escExit: '按F1显示全屏',
     releaseBeta: '按Esc退出全屏',
     release: '发布Beta',
     stopPublishBeta: '停止Beta',
-    betaPublish: 'Beta发布:',
+    betaPublish: 'Beta发布',
     betaSwitchPrompt: '默认不要勾选。',
     publish: '发布',
     back: '返回',
@@ -449,19 +448,19 @@ const I18N_CONF = {
     publicSpace: '确认修改',
     confirmModify: '编辑命名空间',
     editNamespace: '加载中...',
-    load: '命名空间名：',
+    load: '命名空间名',
     namespace: '命名空间不能为空',
     namespaceDesc: '命名空间描述不能为空',
-    description: '描述：',
+    description: '描述',
   },
   ExportDialog: {
     selectedEntry: '| 选中的条目',
-    application: '归属应用:',
+    application: '归属应用',
-    tags: '标签:',
+    tags: '标签',
     exportBtn: '导出',
     exportConfiguration: '导出配置（',
-    source: '源空间：',
+    source: '源空间',
-    items: '配置数量：',
+    items: '配置数量',
   },
   ImportDialog: {
     terminate: '终止导入',
@@ -470,8 +469,8 @@ const I18N_CONF = {
     zipFileFormat: '只能上传.zip格式的文件',
     uploadFile: '上传文件',
     importLabel: '导入配置 ( ',
-    target: '目标空间：',
+    target: '目标空间',
-    conflict: '相同配置：',
+    conflict: '相同配置',
     beSureExerciseCaution: '文件上传后将直接导入配置，请务必谨慎操作',
   },
   ShowCodeing: {
@@ -489,10 +488,10 @@ const I18N_CONF = {
     syncConfiguration: '同步配置成功',
     advancedOptions: '更多高级选项',
     collapse: '收起',
-    home: '归属应用：',
+    home: '归属应用',
-    region: '所属地域：',
+    region: '所属地域',
-    configuration: '配置内容：',
+    configuration: '配置内容',
-    target: '目标地域：',
+    target: '目标地域',
     sync: '同步',
     back: '返回',
   },
@@ -504,12 +503,12 @@ const I18N_CONF = {
     cancel: '取消',
     newnamespce: '新建命名空间',
     loading: '加载中...',
-    name: '命名空间名：',
+    name: '命名空间名',
-    namespaceId: '命名空间ID(不填则自动生成)：',
+    namespaceId: '命名空间ID(不填则自动生成)',
     namespaceIdTooLong: '命名空间ID长度不能超过128',
     namespacenotnull: '命名空间不能为空',
     namespacedescnotnull: '命名空间描述不能为空',
-    description: '描述：',
+    description: '描述',
     namespaceIdAlreadyExist: 'namespaceId已存在',
     newnamespceFailedMessage: 'namespaceId格式不正确/namespaceId长度大于128/namespaceId已存在',
   },
@@ -522,11 +521,11 @@ const I18N_CONF = {
     configurationDetails: '配置详情',
     collapse: '收起',
     more: '更多高级选项',
-    home: '归属应用：',
+    home: '归属应用',
-    tags: '标签:',
+    tags: '标签',
-    description: '描述：',
+    description: '描述',
-    betaRelease: 'Beta发布：',
+    betaRelease: 'Beta发布',
-    configuration: '配置内容：',
+    configuration: '配置内容',
     back: '返回',
     versionComparison: '版本对比',
     dialogCurrentArea: '当前版本',
@@ -547,9 +546,9 @@ const I18N_CONF = {
     configurationRollback: '配置回滚',
     collapse: '收起',
     more: '更多高级选项',
-    home: '归属应用：',
+    home: '归属应用',
-    actionType: '操作类型：',
+    actionType: '操作类型',
-    configuration: '配置内容：',
+    configuration: '配置内容',
     back: '返回',
     rollbackSuccessful: '回滚成功',
     rollbackDelete: '删除',

console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js

@@ -33,6 +33,7 @@ import {
 import { request } from '../../../globalLib';
 import RegionGroup from '../../../components/RegionGroup';
 import axios from 'axios';
+import PageTitle from '../../../components/PageTitle';
 
 import './ClusterNodeList.scss';
 
@@ -165,18 +166,11 @@ class ClusterNodeList extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <div style={{ marginTop: -15 }}>
+          <PageTitle title={clusterNodeList} desc={nowNamespaceId} nameSpace />
           <RegionGroup
             setNowNameSpace={this.setNowNameSpace}
             namespaceCallBack={this.getQueryLater}
           />
-          </div>
-          <h3 className="page-title">
-            <span className="title-item">{clusterNodeList}</span>
-            <span className="title-item">|</span>
-            <span className="title-item">{nowNamespaceName}</span>
-            <span className="title-item">{nowNamespaceId}</span>
-          </h3>
           <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
             <Col span="24">
               <Form inline field={this.field}>

console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js

@@ -292,7 +292,7 @@ class ConfigDetail extends React.Component {
     };
     const activeKey = this.state.activeKey.split('-')[0];
     return (
-      <div style={{ padding: 10 }}>
+      <div>
         <Loading
           shape={'flower'}
           tip={'Loading...'}
@@ -318,10 +318,10 @@ class ConfigDetail extends React.Component {
             ''
           )}
           <Form inline={false} field={this.field} {...formItemLayout}>
-            <FormItem label={'Data ID:'} required>
+            <FormItem label={'Data ID'} required>
               <Input htmlType={'text'} readOnly {...init('dataId')} />
             </FormItem>
-            <FormItem label={'Group:'} required>
+            <FormItem label={'Group'} required>
               <Input htmlType={'text'} readOnly {...init('group')} />
             </FormItem>
             <FormItem label=" ">

console-ui/src/pages/ConfigurationManagement/ConfigEditor/ConfigEditor.js

@@ -584,7 +584,7 @@ class ConfigEditor extends React.Component {
     const activeKey = this.state.activeKey.split('-')[0];
 
     return (
-      <div style={{ padding: 10 }}>
+      <div>
         <Loading
           shape="flower"
           style={{ position: 'relative', width: '100%' }}
@@ -613,7 +613,7 @@ class ConfigEditor extends React.Component {
           )}
 
           <Form field={this.field}>
-            <FormItem label="Data ID:" {...formItemLayout}>
+            <FormItem label="Data ID" {...formItemLayout}>
               <Input
                 disabled
                 {...init('dataId', {
@@ -624,7 +624,7 @@ class ConfigEditor extends React.Component {
                 })}
               />
             </FormItem>
-            <FormItem label="Group:" {...formItemLayout}>
+            <FormItem label="Group" {...formItemLayout}>
               <Input
                 disabled
                 {...init('group', {

console-ui/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js

@@ -493,7 +493,7 @@ class ConfigEditor extends React.Component {
             </Tab>
           )}
           <Form className="new-config-form" {...formItemLayout}>
-            <Form.Item label="Data ID:" required {...dataIdError}>
+            <Form.Item label="Data ID" required {...dataIdError}>
               <Input
                 value={form.dataId}
                 onChange={dataId =>
@@ -502,7 +502,7 @@ class ConfigEditor extends React.Component {
                 disabled={!isNewConfig}
               />
             </Form.Item>
-            <Form.Item label="Group:" required {...groupError}>
+            <Form.Item label="Group" required {...groupError}>
               <Input
                 value={form.group}
                 onChange={group =>

console-ui/src/pages/ConfigurationManagement/ConfigRollback/ConfigRollback.js

@@ -124,11 +124,11 @@ class ConfigRollback extends React.Component {
             {locale.determine} {locale.followingConfiguration} {additionalMsg}
           </h3>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
+            <span style={{ color: '#999', marginRight: 5 }}>Data ID</span>
             <span style={{ color: '#c7254e' }}>{self.field.getValue('dataId')}</span>
           </p>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>Group:</span>
+            <span style={{ color: '#999', marginRight: 5 }}>Group</span>
             <span style={{ color: '#c7254e' }}>{self.field.getValue('group')}</span>
           </p>
         </div>
@@ -193,10 +193,10 @@ class ConfigRollback extends React.Component {
     };
     const { getOpType } = this;
     return (
-      <div style={{ padding: 10 }}>
+      <div>
         <h1>{locale.configurationRollback}</h1>
         <Form field={this.field}>
-          <FormItem label="Data ID:" required {...formItemLayout}>
+          <FormItem label="Data ID" required {...formItemLayout}>
             <Input htmlType="text" readOnly {...init('dataId')} />
             <div style={{ marginTop: 10 }}>
               <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>

console-ui/src/pages/ConfigurationManagement/ConfigSync/ConfigSync.js

@@ -236,7 +236,7 @@ class ConfigSync extends React.Component {
     };
 
     return (
-      <div style={{ padding: 10 }}>
+      <div>
         <Loading
           shape="flower"
           style={{ position: 'relative', width: '100%' }}
@@ -246,7 +246,7 @@ class ConfigSync extends React.Component {
         >
           <h1>{locale.syncConfiguration}</h1>
           <Form field={this.field}>
-            <Form.Item label="Data ID:" required {...formItemLayout}>
+            <Form.Item label="Data ID" required {...formItemLayout}>
               <Input htmlType="text" disabled={'disabled'} {...init('dataId')} />
               <div style={{ marginTop: 10 }}>
                 <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
@@ -255,7 +255,7 @@ class ConfigSync extends React.Component {
               </div>
             </Form.Item>
             <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
-              <Form.Item label="Group ID:" required {...formItemLayout}>
+              <Form.Item label="Group ID" required {...formItemLayout}>
                 <Input htmlType="text" disabled={'disabled'} {...init('group')} />
               </Form.Item>
               <Form.Item label={locale.home} required {...formItemLayout}>

console-ui/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js

@@ -45,6 +45,8 @@ import DashboardCard from './DashboardCard';
 import { getParams, setParams, request } from '@/globalLib';
 import { connect } from 'react-redux';
 import { getConfigs } from '../../../reducers/configuration';
+import PageTitle from '../../../components/PageTitle';
+import QueryResult from '../../../components/QueryResult';
 
 import './index.scss';
 import { LANGUAGE_KEY, GLOBAL_PAGE_SIZE_LIST } from '../../../constants';
@@ -331,11 +333,11 @@ class ConfigurationManagement extends React.Component {
         <div style={{ marginTop: '-20px' }}>
           <h3>{locale.sureDelete}</h3>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
+            <span style={{ color: '#999', marginRight: 5 }}>Data ID</span>
             <span style={{ color: '#c7254e' }}>{record.dataId}</span>
           </p>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>Group:</span>
+            <span style={{ color: '#999', marginRight: 5 }}>Group</span>
             <span style={{ color: '#c7254e' }}>{record.group}</span>
           </p>
           <p>
@@ -397,10 +399,9 @@ class ConfigurationManagement extends React.Component {
 
         <Dropdown
           trigger={
-            <span style={{ color: '#33cde5' }}>
+            <a title={locale.more}>
-              {locale.more}
+              <Icon type="ellipsis" size={'small'} style={{ transform: 'rotate(90deg)' }} />
-              <Icon type={'arrow-down-filling'} size={'xxs'} />
+            </a>
-            </span>
           }
           triggerType={'click'}
         >
@@ -1096,52 +1097,18 @@ class ConfigurationManagement extends React.Component {
             className={this.state.hasdash ? 'dash-left-container' : ''}
             style={{ position: 'relative' }}
           >
-            <div style={{ display: this.inApp ? 'none' : 'block', marginTop: -15 }}>
+            <div style={{ display: this.inApp ? 'none' : 'block' }}>
+              <PageTitle
+                title={locale.configurationManagement8}
+                desc={this.state.nownamespace_id}
+                nameSpace
+              />
               <RegionGroup
                 namespaceCallBack={this.cleanAndGetData.bind(this)}
                 setNowNameSpace={this.setNowNameSpace.bind(this)}
               />
             </div>
-            <div
+
-              style={{
-                display: this.inApp ? 'none' : 'block',
-                position: 'relative',
-                width: '100%',
-                overflow: 'hidden',
-                height: '40px',
-              }}
-            >
-              <h3
-                style={{
-                  height: 30,
-                  width: '100%',
-                  lineHeight: '30px',
-                  padding: 0,
-                  margin: 0,
-                  paddingLeft: 10,
-                  borderLeft: '3px solid #09c',
-                  color: '#ccc',
-                  fontSize: '12px',
-                }}
-              >
-                <span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>
-                  {locale.configurationManagement8}
-                </span>
-                <span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>|</span>
-                <span style={{ fontSize: '14px', color: '#000', marginRight: 8 }}>
-                  {this.state.nownamespace_name}
-                </span>
-                <span style={{ fontSize: '14px', color: '#000', marginRight: 18 }}>
-                  {this.state.nownamespace_id}
-                </span>
-                {locale.queryResults}
-                <strong style={{ fontWeight: 'bold' }}> {configurations.totalCount} </strong>
-                {locale.articleMeetRequirements}
-              </h3>
-              <div
-                style={{ position: 'absolute', textAlign: 'right', zIndex: 2, right: 0, top: 0 }}
-              />
-            </div>
             <div
               style={{
                 position: 'relative',
@@ -1151,7 +1118,12 @@ class ConfigurationManagement extends React.Component {
               }}
             >
               <Form inline>
-                <Form.Item label="Data ID:">
+                <Form.Item>
+                  <Button type="primary" onClick={this.chooseEnv.bind(this)}>
+                    {locale.createConfiguration}
+                  </Button>
+                </Form.Item>
+                <Form.Item label="Data ID">
                   <Input
                     value={this.dataId}
                     htmlType="text"
@@ -1167,7 +1139,7 @@ class ConfigurationManagement extends React.Component {
                   />
                 </Form.Item>
 
-                <Form.Item label="Group:">
+                <Form.Item label="Group">
                   <Select.AutoComplete
                     style={{ width: 200 }}
                     size={'medium'}
@@ -1182,7 +1154,7 @@ class ConfigurationManagement extends React.Component {
                   />
                 </Form.Item>
 
-                <Form.Item label="默认模糊匹配:">
+                <Form.Item label="默认模糊匹配">
                   <Switch
                     checkedChildren=""
                     unCheckedChildren=""
@@ -1235,10 +1207,7 @@ class ConfigurationManagement extends React.Component {
                   </Button>
                 </Form.Item>
                 <br />
-                <Form.Item
+                <Form.Item style={this.inApp ? { display: 'none' } : {}} label={locale.application}>
-                  style={this.inApp ? { display: 'none' } : {}}
-                  label={locale.application0}
-                >
                   <Input
                     htmlType={'text'}
                     placeholder={locale.app1}
@@ -1269,7 +1238,7 @@ class ConfigurationManagement extends React.Component {
                   />
                 </Form.Item>
               </Form>
-              <div style={{ position: 'absolute', right: 10, top: 4 }}>
+              <div style={{ position: 'absolute', right: 10, top: 0 }}>
                 <Icon
                   type="add"
                   size="medium"
@@ -1286,6 +1255,8 @@ class ConfigurationManagement extends React.Component {
                 />
               </div>
             </div>
+            <QueryResult total={configurations.totalCount} />
+
             <Table
               className="configuration-table"
               dataSource={configurations.pageItems}

console-ui/src/pages/ConfigurationManagement/HistoryDetail/HistoryDetail.js

@@ -110,10 +110,10 @@ class HistoryDetail extends React.Component {
     };
     const { getOpType } = this;
     return (
-      <div style={{ padding: 10 }}>
+      <div>
         <h1>{locale.historyDetails}</h1>
         <Form field={this.field}>
-          <Form.Item label="Data ID:" required {...formItemLayout}>
+          <Form.Item label="Data ID" required {...formItemLayout}>
             <Input htmlType="text" readOnly {...init('dataId')} />
             <div style={{ marginTop: 10 }}>
               <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
@@ -122,7 +122,7 @@ class HistoryDetail extends React.Component {
             </div>
           </Form.Item>
           <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
-            <Form.Item label="Group:" required {...formItemLayout}>
+            <Form.Item label="Group" required {...formItemLayout}>
               <Input htmlType="text" readOnly {...init('group')} />
             </Form.Item>
             <Form.Item label={locale.home} {...formItemLayout}>

console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js

@@ -22,6 +22,7 @@ import { getParams, setParams, request } from '@/globalLib';
 
 import './index.scss';
 import DiffEditorDialog from '../../../components/DiffEditorDialog';
+import QueryResult from '../../../components/QueryResult';
 
 @ConfigProvider.config
 class HistoryRollback extends React.Component {
@@ -310,7 +311,7 @@ class HistoryRollback extends React.Component {
     const { init } = this.field;
     this.init = init;
     return (
-      <div style={{ padding: 10 }}>
+      <div>
         <Loading
           shape="flower"
           style={{ position: 'relative', width: '100%' }}
@@ -324,7 +325,7 @@ class HistoryRollback extends React.Component {
           />
           <div>
             <Form inline field={this.field}>
-              <Form.Item label="Data ID:" required>
+              <Form.Item label="Data ID" required>
                 <Select
                   style={{ width: 200 }}
                   size="medium"
@@ -396,14 +397,10 @@ class HistoryRollback extends React.Component {
                 lineHeight: '30px',
                 padding: 0,
                 margin: 0,
-                paddingLeft: 10,
-                borderLeft: '3px solid #09c',
                 fontSize: 16,
               }}
             >
-              {locale.queryResult}
+              <QueryResult total={this.state.total} />
-              <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
-              {locale.articleMeet}
             </h3>
           </div>
           <div>

console-ui/src/pages/ConfigurationManagement/ListeningToQuery/ListeningToQuery.js

@@ -29,6 +29,7 @@ import {
   Select,
   Table,
 } from '@alifd/next';
+import QueryResult from '../../../components/QueryResult';
 
 import './index.scss';
 
@@ -198,7 +199,7 @@ class ListeningToQuery extends React.Component {
           <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
             <Col span="24">
               <Form inline field={this.field}>
-                <FormItem label={`${locale.queryDimension}:`}>
+                <FormItem label={`${locale.queryDimension}`}>
                   <Select
                     dataSource={selectDataSource}
                     style={{ width: 200 }}
@@ -210,7 +211,7 @@ class ListeningToQuery extends React.Component {
                   />
                 </FormItem>
                 <FormItem
-                  label="Data ID:"
+                  label="Data ID"
                   style={{
                     display: this.getValue('type') === 0 ? '' : 'none',
                   }}
@@ -230,7 +231,7 @@ class ListeningToQuery extends React.Component {
                   />
                 </FormItem>
                 <FormItem
-                  label="Group:"
+                  label="Group"
                   style={{
                     display: this.getValue('type') === 0 ? '' : 'none',
                   }}
@@ -275,21 +276,7 @@ class ListeningToQuery extends React.Component {
             </Col>
           </Row>
           <div style={{ position: 'relative' }}>
-            <h3
+            <QueryResult total={this.state.total} />
-              style={{
-                height: 28,
-                lineHeight: '28px',
-                paddingLeft: 10,
-                borderLeft: '3px solid #09c',
-                margin: 0,
-                marginBottom: 10,
-                fontSize: 16,
-              }}
-            >
-              {locale.queryResultsQuery}
-              <strong style={{ fontWeight: 'bold' }}> {this.state.total} </strong>
-              {locale.articleMeetRequirementsConfiguration}
-            </h3>
           </div>
           <Row style={{ padding: 0 }}>
             <Col span="24" style={{ padding: 0 }}>

console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js

@@ -462,7 +462,6 @@ class NewConfig extends React.Component {
     const { editorClass } = this.state;
 
     return (
-      <div style={{ padding: 10 }}>
       <Loading
         shape={'flower'}
         tip={'Loading...'}
@@ -472,7 +471,7 @@ class NewConfig extends React.Component {
       >
         <h1>{locale.newListing}</h1>
         <Form className="new-config-form" field={this.field} {...formItemLayout}>
-            <FormItem label={'Data ID:'} required>
+          <FormItem label={'Data ID'} required>
             <Input
               {...init('dataId', {
                 rules: [
@@ -491,7 +490,7 @@ class NewConfig extends React.Component {
               }
             />
           </FormItem>
-            <FormItem label={'Group:'} required>
+          <FormItem label={'Group'} required>
             <Combobox
               style={{ width: '100%' }}
               size={'large'}
@@ -516,10 +515,7 @@ class NewConfig extends React.Component {
               hasClear
             />
           </FormItem>
-            <FormItem
+          <FormItem label={' '} style={{ display: this.state.showGroupWarning ? 'block' : 'none' }}>
-              label={' '}
-              style={{ display: this.state.showGroupWarning ? 'block' : 'none' }}
-            >
             <Message type={'warning'} size={'medium'} animation={false}>
               {locale.annotation}
             </Message>
@@ -619,7 +615,6 @@ class NewConfig extends React.Component {
         </Form>
         <SuccessDialog ref={this.successDialog} />
       </Loading>
-      </div>
     );
   }
 }

console-ui/src/pages/NameSpace/NameSpace.js

@@ -126,21 +126,21 @@ class NameSpace extends React.Component {
               <div>
                 <div style={{ marginTop: '10px' }}>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceName}:`}</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceName}`}</span>
                     <span style={{ color: '#c7254e' }}>{res.namespaceShowName}</span>
                   </p>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceID}:`}</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceID}`}</span>
                     <span style={{ color: '#c7254e' }}>{res.namespace}</span>
                   </p>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>{`${configuration}:`}</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>{`${configuration}`}</span>
                     <span style={{ color: '#c7254e' }}>
                       {res.configCount} / {res.quota}
                     </span>
                   </p>
                   <p>
-                    <span style={{ color: '#999', marginRight: 5 }}>{`${description}:`}</span>
+                    <span style={{ color: '#999', marginRight: 5 }}>{`${description}`}</span>
                     <span style={{ color: '#c7254e' }}>{res.namespaceDesc}</span>
                   </p>
                 </div>
@@ -171,11 +171,11 @@ class NameSpace extends React.Component {
         <div style={{ marginTop: '-20px' }}>
           <h3>{confirmDelete}</h3>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceName}:`}</span>
+            <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceName}`}</span>
             <span style={{ color: '#c7254e' }}>{record.namespaceShowName}</span>
           </p>
           <p>
-            <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceID}:`}</span>
+            <span style={{ color: '#999', marginRight: 5 }}>{`${namespaceID}`}</span>
             <span style={{ color: '#c7254e' }}>{record.namespace}</span>
           </p>
         </div>
@@ -241,7 +241,7 @@ class NameSpace extends React.Component {
     );
     if (record.type === 1 || record.type === 0) {
       _delinfo = (
-        <span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled>
+        <span style={{ marginRight: 10, cursor: 'not-allowed', color: '#999' }} disabled>
           {namespaceDelete}
         </span>
       );
@@ -255,7 +255,7 @@ class NameSpace extends React.Component {
     let _editinfo = <a onClick={this.openToEdit.bind(this, record)}>{edit}</a>;
     if (record.type === 0 || record.type === 1) {
       _editinfo = (
-        <span style={{ marginRight: 10, cursor: 'not-allowed' }} disabled>
+        <span style={{ marginRight: 10, cursor: 'not-allowed', color: '#999' }} disabled>
           {edit}
         </span>
       );

console-ui/src/pages/ServiceManagement/ServiceDetail/EditClusterDialog.js

@@ -125,7 +125,7 @@ class EditClusterDialog extends React.Component {
         onClose={() => this.hide()}
       >
         <Form {...DIALOG_FORM_LAYOUT}>
-          <Form.Item label={`${checkType}:`}>
+          <Form.Item label={`${checkType}`}>
             <Select
               className="in-select"
               defaultValue={type}
@@ -136,28 +136,28 @@ class EditClusterDialog extends React.Component {
               <Select.Option value="NONE">NONE</Select.Option>
             </Select>
           </Form.Item>
-          <Form.Item label={`${checkPort}:`}>
+          <Form.Item label={`${checkPort}`}>
             <Input
               className="in-text"
               value={defaultCheckPort}
               onChange={defaultCheckPort => this.onChangeCluster({ defaultCheckPort })}
             />
           </Form.Item>
-          <Form.Item label={`${useIpPortCheck}:`}>
+          <Form.Item label={`${useIpPortCheck}`}>
             <Switch
               checked={useIPPort4Check}
               onChange={useIPPort4Check => this.onChangeCluster({ useIPPort4Check })}
             />
           </Form.Item>
           {type === 'HTTP' && [
-            <Form.Item label={`${checkPath}:`}>
+            <Form.Item label={`${checkPath}`}>
               <Input
                 className="in-text"
                 value={path}
                 onChange={path => healthCheckerChange({ path })}
               />
             </Form.Item>,
-            <Form.Item label={`${checkHeaders}:`}>
+            <Form.Item label={`${checkHeaders}`}>
               <Input
                 className="in-text"
                 value={headers}
@@ -165,7 +165,7 @@ class EditClusterDialog extends React.Component {
               />
             </Form.Item>,
           ]}
-          <Form.Item label={`${locale.metadata}:`}>
+          <Form.Item label={`${locale.metadata}`}>
             <MonacoEditor
               language="json"
               width={'100%'}

console-ui/src/pages/ServiceManagement/ServiceDetail/EditInstanceDialog.js

@@ -120,23 +120,23 @@ class EditInstanceDialog extends React.Component {
           <Form.Item label="IP:">
             <p>{editInstance.ip}</p>
           </Form.Item>
-          <Form.Item label={`${locale.port}:`}>
+          <Form.Item label={`${locale.port}`}>
             <p>{editInstance.port}</p>
           </Form.Item>
-          <Form.Item label={`${locale.weight}:`}>
+          <Form.Item label={`${locale.weight}`}>
             <Input
               className="in-text"
               value={editInstance.weight}
               onChange={weight => this.onChangeCluster({ weight })}
             />
           </Form.Item>
-          <Form.Item label={`${locale.whetherOnline}:`}>
+          <Form.Item label={`${locale.whetherOnline}`}>
             <Switch
               checked={editInstance.enabled}
               onChange={enabled => this.onChangeCluster({ enabled })}
             />
           </Form.Item>
-          <Form.Item label={`${locale.metadata}:`}>
+          <Form.Item label={`${locale.metadata}`}>
             <MonacoEditor
               language="json"
               width={'100%'}

console-ui/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js

@@ -173,7 +173,7 @@ class EditServiceDialog extends React.Component {
           <Form.Item
             required={isCreate}
             {...formItemLayout}
-            label={`${locale.serviceName}:`}
+            label={`${locale.serviceName}`}
             {...errors.name}
           >
             {!isCreate ? (
@@ -185,7 +185,7 @@ class EditServiceDialog extends React.Component {
           <Form.Item
             required
             {...formItemLayout}
-            label={`${locale.protectThreshold}:`}
+            label={`${locale.protectThreshold}`}
             {...errors.protectThreshold}
           >
             <Input
@@ -193,7 +193,7 @@ class EditServiceDialog extends React.Component {
               onChange={protectThreshold => this.onChangeCluster({ protectThreshold })}
             />
           </Form.Item>
-          <Form.Item {...formItemLayout} label={`${locale.groupName}:`}>
+          <Form.Item {...formItemLayout} label={`${locale.groupName}`}>
             <Input
               defaultValue={groupName}
               placeholder="DEFAULT_GROUP"
@@ -201,7 +201,7 @@ class EditServiceDialog extends React.Component {
               onChange={groupName => this.onChangeCluster({ groupName })}
             />
           </Form.Item>
-          <Form.Item label={`${locale.metadata}:`} {...formItemLayout}>
+          <Form.Item label={`${locale.metadata}`} {...formItemLayout}>
             <MonacoEditor
               language="json"
               width={'100%'}
@@ -210,7 +210,7 @@ class EditServiceDialog extends React.Component {
               onChange={metadataText => this.onChangeCluster({ metadataText })}
             />
           </Form.Item>
-          <Form.Item label={`${locale.type}:`} {...formItemLayout}>
+          <Form.Item label={`${locale.type}`} {...formItemLayout}>
             <Select
               className="full-width"
               defaultValue={selector.type}
@@ -222,7 +222,7 @@ class EditServiceDialog extends React.Component {
             </Select>
           </Form.Item>
           {selector.type !== 'none' && (
-            <Form.Item label={`${locale.selector}:`} {...formItemLayout}>
+            <Form.Item label={`${locale.selector}`} {...formItemLayout}>
               <Input.TextArea
                 value={selector.expression}
                 onChange={expression =>

console-ui/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js

@@ -147,16 +147,16 @@ class ServiceDetail extends React.Component {
           </h1>
 
           <Form {...pageFormLayout}>
-            <FormItem label={`${locale.serviceName}:`}>
+            <FormItem label={`${locale.serviceName}`}>
               <Input value={service.name} readOnly />
             </FormItem>
-            <FormItem label={`${locale.groupName}:`}>
+            <FormItem label={`${locale.groupName}`}>
               <Input value={service.groupName} readOnly />
             </FormItem>
-            <FormItem label={`${locale.protectThreshold}:`}>
+            <FormItem label={`${locale.protectThreshold}`}>
               <Input value={service.protectThreshold} readOnly />
             </FormItem>
-            <FormItem label={`${locale.metadata}:`}>
+            <FormItem label={`${locale.metadata}`}>
               <MonacoEditor
                 language="json"
                 width={'100%'}
@@ -165,11 +165,11 @@ class ServiceDetail extends React.Component {
                 options={MONACO_READONLY_OPTIONS}
               />
             </FormItem>
-            <FormItem label={`${locale.type}:`}>
+            <FormItem label={`${locale.type}`}>
               <Input value={selector.type} readOnly />
             </FormItem>
             {selector.type !== 'none' && (
-              <FormItem label={`${locale.selector}:`}>
+              <FormItem label={`${locale.selector}`}>
                 <Input value={selector.expression} readOnly />
               </FormItem>
             )}
@@ -178,7 +178,7 @@ class ServiceDetail extends React.Component {
             <Card
               key={cluster.name}
               className="cluster-card"
-              title={`${locale.cluster}:`}
+              title={`${locale.cluster}`}
               subTitle={cluster.name}
               contentHeight="auto"
               extra={

console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js

@@ -35,6 +35,7 @@ import { generateUrl } from '../../../utils/nacosutil';
 import RegionGroup from '../../../components/RegionGroup';
 import EditServiceDialog from '../ServiceDetail/EditServiceDialog';
 import ShowServiceCodeing from 'components/ShowCodeing/ShowServiceCodeing';
+import PageTitle from '../../../components/PageTitle';
 
 import './ServiceList.scss';
 import { GLOBAL_PAGE_SIZE_LIST } from '../../../constants';
@@ -202,18 +203,11 @@ class ServiceList extends React.Component {
 
     return (
       <div className="main-container service-management">
-        <div style={{ marginTop: -15 }}>
+        <PageTitle title={serviceList} desc={nowNamespaceId} nameSpace />
         <RegionGroup
           setNowNameSpace={this.setNowNameSpace}
           namespaceCallBack={this.getQueryLater}
         />
-        </div>
-        <h3 className="page-title">
-          <span className="title-item">{serviceList}</span>
-          <span className="title-item">|</span>
-          <span className="title-item">{nowNamespaceName}</span>
-          <span className="title-item">{nowNamespaceId}</span>
-        </h3>
         <Row
           className="demo-row"
           style={{
@@ -245,7 +239,7 @@ class ServiceList extends React.Component {
                   }
                 />
               </FormItem>
-              <Form.Item label={`${hiddenEmptyService}:`}>
+              <Form.Item label={`${hiddenEmptyService}`}>
                 <Switch
                   checked={hasIpCount}
                   onChange={hasIpCount =>
@@ -266,7 +260,7 @@ class ServiceList extends React.Component {
                 </Button>
               </FormItem>
               <FormItem label="" style={{ float: 'right' }}>
-                <Button type="secondary" onClick={() => this.openEditServiceDialog()}>
+                <Button type="primary" onClick={() => this.openEditServiceDialog()}>
                   {create}
                 </Button>
               </FormItem>

console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js

@@ -32,6 +32,7 @@ import { connect } from 'react-redux';
 import { getSubscribers, removeSubscribers } from '../../../reducers/subscribers';
 import { getParams } from '../../../globalLib';
 import RegionGroup from '../../../components/RegionGroup';
+import PageTitle from '../../../components/PageTitle';
 
 import './SubscriberList.scss';
 
@@ -135,18 +136,11 @@ class SubscriberList extends React.Component {
           tip="Loading..."
           color="#333"
         >
-          <div style={{ marginTop: -15 }}>
+          <PageTitle title={subscriberList} desc={nowNamespaceId} nameSpace />
           <RegionGroup
             setNowNameSpace={this.setNowNameSpace}
             namespaceCallBack={this.switchNamespace}
           />
-          </div>
-          <h3 className="page-title">
-            <span className="title-item">{subscriberList}</span>
-            <span className="title-item">|</span>
-            <span className="title-item">{nowNamespaceName}</span>
-            <span className="title-item">{nowNamespaceId}</span>
-          </h3>
           <Row
             className="demo-row"
             style={{

console-ui/test/sample/configurationManagement.spec.js

@@ -119,7 +119,7 @@ module.exports = function() {
       .click(0);
   });
 
-  it('click: Data ID: ( #dataId, 154, 20, 0 )', async function() {
+  it('click: Data ID ( #dataId, 154, 20, 0 )', async function() {
     await driver
       .sleep(300)
       .wait('#dataId', 30000)

console/src/main/resources/static/index.html

@@ -35,7 +35,7 @@
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/icon.css">
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/font-awesome.css">
 	<!-- 第三方css结束 -->
-<link href="./css/main.css?04818f5ec59842280923" rel="stylesheet"></head>
+<link href="./css/main.css?b252ea947e109a27a7a1" rel="stylesheet"></head>
 
 <body>
 	<div id="root" style="overflow:hidden"></div>
@@ -56,6 +56,6 @@
 	<script src="console-ui/public/js/merge.js"></script>
 	<script src="console-ui/public/js/loader.js"></script>
 	<!-- 第三方js结束 -->
-<script type="text/javascript" src="./js/main.js?04818f5ec59842280923"></script></body>
+<script type="text/javascript" src="./js/main.js?b252ea947e109a27a7a1"></script></body>
 
 </html>