fork from bc4552c5a8

client/containers/Project/Setting/ProjectToken/ProjectToken.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './ProjectToken.scss';
+import { getToken, updateToken } from '../../../../reducer/modules/project';
+import { connect } from 'react-redux';
+import { Icon, Tooltip, message, Modal } from 'antd';
+import copy from 'copy-to-clipboard';
+const confirm = Modal.confirm;
+
+@connect(
+  state => {
+    return {
+      token: state.project.token
+    };
+  },
+  {
+    getToken,
+    updateToken
+  }
+)
+class ProjectToken extends Component {
+  static propTypes = {
+    projectId: PropTypes.number,
+    getToken: PropTypes.func,
+    token: PropTypes.string,
+    updateToken: PropTypes.func,
+    curProjectRole: PropTypes.string
+  };
+
+  async componentDidMount() {
+    await this.props.getToken(this.props.projectId);
+  }
+
+  copyToken = () => {
+    copy(this.props.token);
+    message.success('已经成功复制到剪切板');
+  };
+
+  updateToken = () => {
+    let that = this;
+    confirm({
+      title: '重新生成key',
+      content: '重新生成之后，之前的key将无法使用，确认重新生成吗？',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        await that.props.updateToken(that.props.projectId);
+        message.success('更新成功');
+      },
+      onCancel() {}
+    });
+  };
+
+  render() {
+    return (
+      <div className="project-token">
+        <h2 className="token-title">工具标识</h2>
+        <div className="message">
+          每个项目都有唯一的标识token，用户可以使用这个token值来请求项目 openapi.
+        </div>
+        <div className="token">
+          <span>
+            token: <span className="token-message">{this.props.token}</span>
+          </span>
+          <Tooltip title="复制">
+            <Icon className="token-btn" type="copy" onClick={this.copyToken} />
+          </Tooltip>
+          {this.props.curProjectRole === 'admin' || this.props.curProjectRole === 'owner' ? (
+            <Tooltip title="刷新">
+              <Icon className="token-btn" type="reload" onClick={this.updateToken} />
+            </Tooltip>
+          ) : null}
+        </div>
+        <div className="blockquote">
+          为确保项目内数据的安全性和私密性，请勿轻易将该token暴露给项目组外用户。
+        </div>
+        <br />
+        <h2  className="token-title">open接口：</h2>
+        <p><a target="_blank" rel="noopener noreferrer"   href="https://hellosean1025.github.io/yapi/openapi.html">详细接口文档</a></p>
+        <div>
+          <ul className="open-api">
+            <li>/api/open/run_auto_test [运行自动化测试]</li>
+            <li>/api/open/import_data [导入数据]</li>
+            <li>/api/interface/add [新增接口]</li>
+            <li>/api/interface/save [保存接口]</li>
+            <li>/api/interface/up [更新接口]</li>
+            <li>/api/interface/get [获取接口]</li>
+            <li>/api/interface/list [获取接口列表]</li>
+            <li>/api/interface/list_menu [获取接口菜单]</li>
+            <li>/api/interface/add_cat [新增接口分类]</li>
+            <li>/api/interface/getCatMenu [获取所有分类]</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProjectToken;

client/containers/Project/Setting/ProjectToken/ProjectToken.scss

@@ -0,0 +1,70 @@
+.project-token {
+  background: #fff;
+  padding: 15px;
+  min-height: 4.68rem;
+
+  .token{
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 500;
+
+  }
+
+  .token-message{
+    padding: 8px; 
+    margin-right: 8px;
+    background-color: #f5f5f5;
+
+  }
+
+  .open-api{
+    margin-top: 10px;
+    margin-left: 20px;
+    li{
+      margin-bottom: 10px;
+    }
+  }
+
+  .message{
+    padding: 16px 0 0 16px;
+    font-size: 14px;
+  }
+
+  .token-title{
+    font-size: 16px;
+    // background-color: #eee;
+    // border-radius: 4px;
+    // margin-bottom: 15px;
+    font-weight: 400;
+    margin-bottom: 0.16rem;
+    border-left: 3px solid #2395f1;
+    padding-left: 8px;
+  }
+
+  .blockquote{
+    border-left: 4px solid #ff561b;
+    // background-color: #f8f8f8;
+    padding: .12rem .24rem;
+    position: relative;
+    margin-left: 16px;
+  }
+
+  .blockquote:before {
+    content: '!';
+    display: block;
+    position: absolute;
+    left: -.12rem;
+    top: .12rem;
+    width: 20px;
+    height: 20px;
+    background-color: #ff561b;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+}
+
+  .token-btn{
+    margin-right: 8px;
+  }
+}