✨#PageTitle, Copy, NameSpace

- Optimization of basic components, added Chinese and English information, namespace description presentation and other functions
xs-fork · Sep 15, 2023 · 1d4d25e · 1d4d25e
1 parent 35f6b47
commit 1d4d25e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 59 deletions.
diff --git a/console-ui/src/components/Copy/index.jsx b/console-ui/src/components/Copy/index.jsx
@@ -18,37 +18,10 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { Icon, Message } from '@alifd/next';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-// 创建假元素
-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!');
-}
 
+@connect(state => ({ ...state.locale }))
 @withRouter
 class Copy extends React.Component {
   static displayName = 'Copy';
@@ -59,20 +32,27 @@ class Copy extends React.Component {
     textNode: PropTypes.string,
     className: PropTypes.string,
     showIcon: PropTypes.bool,
+    title: PropTypes.string,
+    locale: PropTypes.object,
   };
 
+copyText(locale, value) {
+  navigator.clipboard.writeText(value);
+  Message.success(locale.Components.copySuccessfully);
+}
+
   render() {
-    const { style = {}, value, textNode, className, showIcon = true } = this.props;
+    const { style = {}, value, textNode, className, showIcon = true, title, locale } = this.props;
     return (
-      <div className={className} onClick={() => (showIcon ? '' : copyText(value))} style={style}>
+      <div className={className} onClick={() => (showIcon ? '' : this.copyText(locale, value))} style={style}>
         {textNode || value}
         {showIcon && (
           <Icon
-            title="复制"
+            title={title || '复制'}
             className="copy-icon"
             size="small"
             type="copy"
-            onClick={() => copyText(value)}
+            onClick={() => this.copyText(locale, value)}
           />
         )}
       </div>

diff --git a/console-ui/src/components/PageTitle/index.js b/console-ui/src/components/PageTitle/index.js
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Provider, connect } from 'react-redux';
+import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Copy from '../Copy';
@@ -25,18 +25,20 @@ import Copy from '../Copy';
 class PageTitle extends React.Component {
   static propTypes = {
     title: PropTypes.string,
+    namespaceId: PropTypes.string,
+    namespaceName: PropTypes.string,
     desc: PropTypes.string,
     nameSpace: PropTypes.bool,
     locale: PropTypes.object,
   };
 
-  getNameSpace(locale, desc, nameSpace) {
+  getNameSpace(locale, namespaceId, namespaceName, desc, nameSpace) {
     if (!nameSpace) {
-      return desc;
+      return namespaceId;
     }
     return (
       <span style={{ display: 'flex', alignItems: 'center', marginLeft: 16 }}>
-        {locale.NameSpace.namespaceID}
+        {locale.NameSpace.namespace}
         <Copy
           style={{
             marginLeft: 16,
@@ -45,21 +47,24 @@ class PageTitle extends React.Component {
             alignItems: 'center',
             background: 'rgb(239, 243, 248)',
             padding: '0px 8px',
-            minWidth: 220,
           }}
-          value={desc}
+          textNode={desc || namespaceName}
+          title={locale.ConfigurationManagement.copyNamespaceID}
+          value={namespaceId}
         />
       </span>
     );
   }
 
   render() {
-    const { title, desc, nameSpace, locale } = this.props;
+    const { title, namespaceId, namespaceName, 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) : ''}
+          {namespaceId && namespaceId !== 'undefined'
+            ? this.getNameSpace(locale, namespaceId, namespaceName, desc, nameSpace)
+            : ''}
         </span>
       </div>
     );

diff --git a/console-ui/src/pages/NameSpace/NameSpace.js b/console-ui/src/pages/NameSpace/NameSpace.js
@@ -16,13 +16,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, ConfigProvider, Dialog, Loading, Table } from '@alifd/next';
+import { Button, ConfigProvider, Dialog, Loading, Table, Form } from '@alifd/next';
 import RegionGroup from '../../components/RegionGroup';
 import NewNameSpace from '../../components/NewNameSpace';
 import EditorNameSpace from '../../components/EditorNameSpace';
 import { getParams, setParams, request } from '../../globalLib';
 
 import './index.scss';
+import PageTitle from '../../components/PageTitle';
 
 @ConfigProvider.config
 class NameSpace extends React.Component {
@@ -297,7 +298,7 @@ class NameSpace extends React.Component {
     } = locale;
     return (
       <>
-        <RegionGroup left={namespace} />
+        <PageTitle title={namespace} />
         <div className="fusion-demo">
           <Loading
             shape="flower"
@@ -306,23 +307,29 @@ class NameSpace extends React.Component {
             style={{ width: '100%' }}
             visible={this.state.loading}
           >
+            <div
+              style={{
+                position: 'relative',
+                marginTop: 10,
+                height: 'auto',
+                overflow: 'visible',
+              }}
+            >
+              <Form inline>
+                <Form.Item>
+                  <Button type="primary" onClick={this.addNameSpace.bind(this)}>
+                    {namespaceAdd}
+                  </Button>
+                </Form.Item>
+                <Form.Item>
+                  <Button type="secondary" onClick={() => this.getNameSpaces()}>
+                    {locale.refresh}
+                  </Button>
+                </Form.Item>
+              </Form>
+            </div>
+
             <div>
-              <div style={{ textAlign: 'right', marginBottom: 10 }}>
-                <Button
-                  type="primary"
-                  style={{ marginRight: 20, marginTop: 10 }}
-                  onClick={this.addNameSpace.bind(this)}
-                >
-                  {namespaceAdd}
-                </Button>
-                <Button
-                  style={{ marginRight: 0, marginTop: 10 }}
-                  type="secondary"
-                  onClick={() => this.getNameSpaces()}
-                >
-                  {locale.refresh}
-                </Button>
-              </div>
               <div>
                 <Table dataSource={this.state.dataSource} locale={{ empty: pubNoData }}>
                   <Table.Column