Merge pull request #42 from xian-crazy/develop

Develop

README.md

@@ -1,14 +1,14 @@
 ### <font color=RED size=24 face="黑体"> crazy-yapi</font>分支补充功能说明：
 
 #### TO DO
--
-- 调研：支持文件上传类接口测试（计划采用二进制方式支持文件上传）
-- 优化tree加载为异步
-- 增强：增加jmeter driver服务，支持性能压测
-- 精度bug修复 ：js 数字最大16位
-- 公共参数备注链接
-- 用例执行统计报表
-- 接口统计报表
+
+- [ ] 调研：支持文件上传类接口测试（计划采用二进制方式支持文件上传）
+- [ ] 优化tree加载为异步
+- [ ] 增强：增加jmeter driver服务，支持性能压测
+- [ ] 精度bug修复 ：js 数字最大16位
+- [ ] 公共参数备注链接
+- [ ] 用例执行统计报表
+- [ ] 接口统计报表
 
 ### 2019/8/16
 
@@ -175,6 +175,11 @@
 ### crazy-yapi 分支 作者
 * crazy [email protected]
 
+### crazy-yapi 分支 License
+
+Copyright © 2019, [小影](http:https://quvideo.com/).
+Released under the [Apache License 2.0](LICENSE).
+
 
 <font color=RED size=24 face="黑体"> ---------------------以下内容为官方主分支说明文档------------------------------</font>
 

client/common.js

@@ -311,3 +311,25 @@ exports.arrayChangeIndex = (arr, start, end) => {
 
  return changes;
 };
+
+exports.findCategoriesById = (list, id, listKey = 'list') => {
+ const find = (category, id, pIds = []) => {
+ if (category[listKey] && category[listKey].some(v => v._id === id)) {
+ return [...pIds, category._id];
+ } else if (category.children && category.children.length) {
+ const newPIds = [...pIds, category._id];
+ for (let i = 0; i < category.children.length; i++) {
+ const ids = find(category.children[i], id, newPIds);
+ if (ids.length !== newPIds.length) {
+ return ids;
+ }
+ }
+ return pIds;
+ } else {
+ return pIds;
+ }
+ };
+ return list
+ .map(category => find(category, id))
+ .reduce((a, b) => [...a, ...b], []);
+};

client/components/Header/Search/Search.js

@@ -1,7 +1,8 @@
 import React, { PureComponent as Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Icon, Input, AutoComplete } from 'antd';
+import { Icon, Input, AutoComplete, Tooltip } from 'antd';
+import _ from 'underscore';
 import './Search.scss';
 import { withRouter } from 'react-router';
 import axios from 'axios';
@@ -30,6 +31,7 @@ export default class Srch extends Component {
  this.state = {
  dataSource: []
  };
+ this.handleSearch = _.debounce(this.handleSearch, 500);
  }
 
  static propTypes = {
@@ -45,7 +47,7 @@ export default class Srch extends Component {
  };
 
  onSelect = async (value, option) => {
- console.log("option.props.type:"+option.props.type);
+ // console.log("option.props.type:"+option.props.type);
  if (option.props.type === '分组') {
  this.props.changeMenuItem('/group');
  this.props.history.push('/group/' + option.props['id']);
@@ -78,10 +80,12 @@ export default class Srch extends Component {
  <Option
  key={`分组${item._id}`}
  type="分组"
- value={`${item.groupName}`}
  id={`${item._id}`}
+ text={`分组: ${item.groupName}`}
  >
- {`分组: ${item.groupName}`}
+ <Tooltip placement="left" title={`分组: ${item.groupName}`}>
+ {`分组: ${item.groupName}`}
+ </Tooltip>
  </Option>
  );
  break;
@@ -92,8 +96,11 @@ export default class Srch extends Component {
  type="项目"
  id={`${item._id}`}
  groupId={`${item.groupId}`}
+ text={`项目: ${item.name}`}
  >
- {`项目: ${item.name}`}
+ <Tooltip placement="left" title={`项目: ${item.name}`}>
+ {`项目: ${item.name}`}
+ </Tooltip>
  </Option>
  );
  break;
@@ -104,8 +111,11 @@ export default class Srch extends Component {
  type="接口"
  id={`${item._id}`}
  projectId={`${item.projectId}`}
+ text={`接口: ${item.title}`}
  >
- {`接口: ${item.title}`}
+ <Tooltip placement="left" title={`接口: ${item.title}`}>
+ {`接口: ${item.title}`}
+ </Tooltip>
  </Option>
  );
  break;
@@ -116,8 +126,11 @@ export default class Srch extends Component {
  type="路径"
  id={`${item._id}`}
  projectId={`${item.projectId}`}
+ text={`路径: ${item.path}`}
  >
- {`路径: ${item.path}`}
+ <Tooltip placement="left" title={`路径: ${item.path}`}>
+ {`路径: ${item.path}`}
+ </Tooltip>
  </Option>
  );
  break;
@@ -158,8 +171,13 @@ export default class Srch extends Component {
  defaultActiveFirstOption={false}
  onSelect={this.onSelect}
  onSearch={this.handleSearch}
- filterOption={(inputValue, option) =>
- option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+ optionLabelProp="text"
+ filterOption={(inputValue, option) => {
+ if (typeof option.props.children !== 'string' ) {
+ return option.props.children.props.title.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
+ }
+ return option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+ }
  }
  >
  <Input

client/components/ModalPostman/index.js

@@ -50,6 +50,7 @@ class ModalPostman extends Component {
  methodsShowMore: false,
  methodsList: [],
  constantInput: '',
+ safeConstantInput: '',
  activeKey: '1',
  methodsParamsList: [
  {
@@ -63,11 +64,22 @@ class ModalPostman extends Component {
 
  componentWillMount() {
  let { inputValue } = this.props;
- this.setState({
- constantInput: inputValue
- });
+ const decodeInputValue = decodeURIComponent(inputValue);
+ if (decodeInputValue === inputValue) {
+ this.setState({
+ constantInput: inputValue,
+ safeConstantInput: ''
+ });
+ inputValue && this.handleInitList(inputValue);
+ } else {
+ this.setState({
+ constantInput: '',
+ safeConstantInput: decodeInputValue
+ });
+ inputValue && this.handleInitList(decodeInputValue);
+ }
  // this.props.inputValue && this.handleConstantsInput(this.props.inputValue, 0);
- inputValue && this.handleInitList(inputValue);
+ // inputValue && this.handleInitList(inputValue);
  }
 
  handleInitList(val) {
@@ -140,6 +152,14 @@ class ModalPostman extends Component {
  this.mockClick(0)(val);
  };
 
+ handleSafeConstantsInput = val => {
+ // val = val.replace(/^\{\{(.+)\}\}$/g, '$1');
+ this.setState({
+ safeConstantInput: val
+ });
+ this.mockClick(0)( encodeURIComponent(val));
+ };
+
  handleParamsInput = (e, clickIndex, paramsIndex) => {
  let newParamsList = deepEqual(this.state.methodsParamsList);
  newParamsList[clickIndex].params[paramsIndex] = e;
@@ -209,7 +229,7 @@ class ModalPostman extends Component {
 
  render() {
  const { visible, envType } = this.props;
- const { methodsParamsList, constantInput } = this.state;
+ const { methodsParamsList, constantInput, safeConstantInput } = this.state;
 
  const outputParams = () => {
  let str = '';
@@ -254,11 +274,32 @@ class ModalPostman extends Component {
  accordion
  >
  <Panel header={<h3 className="mock-title">常量</h3>} key="1">
- <Input
- placeholder="基础参数值"
- value={constantInput}
- onChange={e => this.handleConstantsInput(e.target.value, index)}
- />
+ <div className="notice">
+ 注意如果参数值中含有
+ <b>{"{"}</b>
+ <b>{"}"}</b>
+ <b>|</b>
+ <b>,</b>
+ <b>:</b>
+ 等符号，请在安全常量内输入，
+ 其余请使用 YAPI 原版常量
+ </div>
+ <Row>
+ <Col>原版常量:</Col>
+ <Input
+ placeholder="基础参数值"
+ value={constantInput}
+ onChange={e => this.handleConstantsInput(e.target.value, index)}
+ />
+ </Row>
+ <Row>
+ <Col>安全常量:</Col>
+ <Input
+ placeholder="基础参数值"
+ value={safeConstantInput}
+ onChange={e => this.handleSafeConstantsInput(e.target.value, index)}
+ />
+ </Row>
  </Panel>
  <Panel header={<h3 className="mock-title">mock数据</h3>} key="2">
  <MockList click={this.mockClick(index)} clickValue={item.name} />

client/components/ModalPostman/index.scss

@@ -10,6 +10,14 @@
  max-height: 500px;
  min-height: 400px;
  overflow-y: scroll;
+
+ .notice {
+ background: antiquewhite;
+ b {
+ margin:0 0.2em;
+ }
+ }
+
  .ant-radio-group{
  width:100%;
  }
@@ -42,7 +50,7 @@
  }
  .modal-postman-preview {
  background-color: #f5f5f5;
- 
+
  }
  .modal-postman-collapse{
  .ant-collapse-item > .ant-collapse-header{
@@ -139,5 +147,5 @@
  }
  }
 
- 
+
 }

client/components/Postman/Postman.js

@@ -113,7 +113,10 @@ const ParamsNameComponent = props => {
  );
 };
 ParamsNameComponent.propTypes = {
- example: PropTypes.string,
+ example: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element
+ ]),
  desc: PropTypes.string,
  name: PropTypes.string
 };
@@ -1179,7 +1182,7 @@ export default class Run extends Component {
  </h3>
  <p style={{ margin: '10px' }}>注：Test 脚本只有做自动化测试才执行</p>
  <Row>
- <Col span="18">
+ <Col span={18}>
  <AceEditor
  onChange={this.onOpenTest}
  className="case-script"
@@ -1189,7 +1192,7 @@ export default class Run extends Component {
  }}
  />
  </Col>
- <Col span="6">
+ <Col span={6}>
  <div className="insert-code">
  {InsertCodeMap.map(item => {
  return (