feat: add autocomplete

client/containers/AddInterface/ResParams/ResParams.js

@@ -37,7 +37,7 @@ class ResParams extends Component {
   //   }
   // }
 
-  componentDidMount () {
+  componentDidMount() {
     //const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+|<div>|<\/div>/g
     //editor.customConfig.menus = []
     // editor.customConfig.onchange = html => {
@@ -49,25 +49,62 @@ class ResParams extends Component {
     // }, 400)
     //editor.create()
 
-    function json_parse(json){
-      try{
+    function json_parse(json) {
+      try {
         return JSON.stringify(JSON.parse(json), null, "\t");
-      }catch(e){
+      } catch (e) {
         return json
       }
     }
-
-    let editor2 = this.editor = window.ace.edit("res-cover")
-    editor2.getSession().setMode("ace/mode/json");
-    editor2.getSession().on('change', ()=> {
-      this.props.getResParams(editor2.getValue())
+    var langTools = window.ace.require("ace/ext/language_tools");
+    let editor = this.editor = window.ace.edit("res-cover")
+    editor.getSession().setMode("ace/mode/json");
+    editor.setOptions({
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true
     });
-    setTimeout( () => {
-      editor2.setValue(json_parse(this.props.resParams))
-    } ,400)
+
+    var rhymeCompleter = {
+      identifierRegexps: [/[@]/],
+      getCompletions: function (editor, session, pos, prefix, callback) {
+        console.log(prefix)
+        if (prefix.length === 0) { callback(null, []); return }
+        var wordList = [
+          { name: '字符串', mock: '@string' },
+          { name: '自然数', mock: '@natural' },          
+          { name: '布尔', mock: '@boolean' },
+          { name: '标题', mock: '@title' },
+          { name: '姓名', mock: '@name' },
+          { name: 'url', mock: '@url' },
+          { name: '域名', mock: '@domain' },
+          { name: 'ip地址', mock: '@ip' },
+          { name: 'id', mock: '@id' },
+          { name: 'guid', mock: '@guid' },
+          { name: '当前时间', mock: '@now' },
+          { name: '整数', mock: '@integer' },
+          { name: '浮点数', mock: '@float' },
+          { name: 'email', mock: '@email' },
+          { name: '大段文本', mock: '@text' },
+          { name: '句子', mock: '@sentence' },
+          { name: '单词', mock: '@word' },
+          { name: '地址', mock: '@region' }
+        ]
+        callback(null, wordList.map(function (ea) {
+          return { name: ea.mock, value: ea.mock, score: ea.mock, meta: ea.name }
+        }));
+      }
+    }
+    langTools.addCompleter(rhymeCompleter);
+    editor.getSession().on('change', () => {
+      this.props.getResParams(editor.getValue())
+    });
+    setTimeout(() => {
+      editor.setValue(json_parse(this.props.resParams))
+    }, 400)
   }
 
-  render () {
+  render() {
     return (
       <section className="res-params-box">
         <Card title="返回 Mock" style={{ width: 500 }}>

client/containers/AddInterface/Result/Result.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Card } from 'antd'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
+import Mock from 'mockjs'
 
 @connect(
   state => {
@@ -25,12 +26,24 @@ class Result extends Component {
   }
 
   render () { 
-    const { mockJson } = this.props
+    const { mockJson, resParams } = this.props
+    let json, j;
+    try{
+      json = JSON.parse(resParams);
+    }catch(e){
+      json = false;
+    }
+    if(json !== false){
+      j = JSON.stringify(Mock.mock(json), null, "   ");
+    }else{
+      j = mockJson
+    }
+    
 
     return (
       <div className="result">
         <Card title="Mock 结果" style={{ width: 500 }}>
-          <pre>{mockJson}</pre>
+          <pre>{j}</pre>
         </Card>
       </div>
     )

server/controllers/project.js

@@ -16,6 +16,7 @@ class projectController extends baseController {
 
     handleBasepath(basepath) {
         if (!basepath) return false;
+        if (basepath === '/') return basepath;
         if (basepath[0] !== '/') basepath = '/' + basepath;
         if (basepath[basepath.length - 1] === '/') basepath = basepath.substr(0, basepath.length - 1);
         if (!yapi.commons.verifyPath(basepath)) {

server_dist/controllers/project.js

@@ -75,6 +75,7 @@ var projectController = function (_baseController) {
         key: 'handleBasepath',
         value: function handleBasepath(basepath) {
             if (!basepath) return false;
+            if (basepath === '/') return basepath;
             if (basepath[0] !== '/') basepath = '/' + basepath;
             if (basepath[basepath.length - 1] === '/') basepath = basepath.substr(0, basepath.length - 1);
             if (!_yapi2.default.commons.verifyPath(basepath)) {

static/dev.html

@@ -17,6 +17,8 @@
 <script src="http://127.0.0.1:4000/yapi/prd/index@dev.js"></script>
 
 <script src="/lib/ace-1.2.8.js"></script>
+<script src="/lib/snippets-json.js"></script>
+<script src="/lib/ext-language.tools.js"></script>
 <script src="/lib/mode-json-1.2.8.js"></script>
 <script src="https://qsso.corp.qunar.com/lib/qsso-auth.js"></script>
 

static/index.html

@@ -36,6 +36,7 @@
 </script>
 
 <script src="/lib/ace-1.2.8.js"></script>
+<script src="/lib/ext-language.tools.js"></script>
 <script src="/lib/mode-json-1.2.8.js"></script>
 <script src="https://qsso.corp.qunar.com/lib/qsso-auth.js"></script>
 </body>

static/lib/snippets-json.js

@@ -0,0 +1 @@
+define("ace/snippets/json",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="json"})