Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/components/AuthenticatedComponent.js

@@ -3,9 +3,18 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import { changeMenuItem } from '../actions/menu'
 
-
+@connect(
+  (state) => {
+    return{
+      isAuthenticated: state.login.isLogin
+    }
+  },
+  {
+    changeMenuItem
+  }
+)
 export function requireAuthentication(Component) {
-  class AuthenticatedComponent extends React.Component {
+  return class AuthenticatedComponent extends React.Component {
     constructor(props){
       super(props);
     }
@@ -37,19 +46,8 @@ export function requireAuthentication(Component) {
           }
         </div>
       )
-
     }
   }
-  return connect(
-    (state) => {
-      return{
-        isAuthenticated: state.login.isLogin
-      }
-    },
-    {
-      changeMenuItem
-    }
-  )(AuthenticatedComponent);
 }
 
 

client/components/Header/Header.js

@@ -66,8 +66,26 @@ ToolUser.propTypes={
 };
 
 
+
+@connect(
+  (state) => {
+    return{
+      user: state.login.userName,
+      uid: state.login.uid,
+      msg: null,
+      login:state.login.isLogin,
+      curKey: state.menu.curKey
+    }
+  },
+  {
+    loginTypeAction,
+    logoutActions,
+    checkLoginState,
+    changeMenuItem
+  }
+)
 @withRouter
-class HeaderCom extends Component {
+export default class HeaderCom extends Component {
   constructor(props) {
     super(props);
   }
@@ -129,13 +147,13 @@ class HeaderCom extends Component {
   render () {
     const { login, user, msg, uid, curKey } = this.props;
     const headerStyle = {
-      'background': 'url(./image/bg-img.jpg) no-repeat center',
-      'backgroundSize':'cover'
+      'background': 'url(./image/header-bg-img.jpg) no-repeat',
+      'backgroundSize':'100% 100%'
     }
     return (
       <acticle className={`header-box`} style={headerStyle}>
         <Header style={{
-          background: "linear-gradient(to bottom,rgba(64,64,64,1),rgba(64,64,64,0.9))"
+          background: "linear-gradient(to bottom,rgba(0,0,0,0.6),rgba(0,0,0,0.5))"
         }}>
           <div className="content">
             <div className="logo">
@@ -173,22 +191,4 @@ class HeaderCom extends Component {
       </acticle>
     )
   }
-}
-
-export default connect(
-  (state) => {
-    return{
-      user: state.login.userName,
-      uid: state.login.uid,
-      msg: null,
-      login:state.login.isLogin,
-      curKey: state.menu.curKey
-    }
-  },
-  {
-    loginTypeAction,
-    logoutActions,
-    checkLoginState,
-    changeMenuItem
-  }
-)(HeaderCom)
+}

client/containers/AddInterface/InterfaceTest/InterfaceTest.js

@@ -89,8 +89,7 @@ export default class InterfaceTest extends Component {
       data: {
         a:1
       },
-      success: (res, header) => {
-        console.log(header)
+      success: (res) => {
         this.setState({res})
       }
     })

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -24,7 +24,7 @@ class MockUrl extends Component {
   clipboard () {
     const btn = document.querySelector('#mock-clipboard')
     const txt = document.querySelector('#mock-p').innerHTML
-    console.log('txt', txt)
+
     new Clipboard(btn, {
       text: () => txt,
       target () {

client/containers/AddInterface/ReqHeader/ReqList.js

@@ -6,7 +6,8 @@ import { autobind } from 'core-decorators'
 import { 
   reqTagValue,
   reqHeaderValue,
-  deleteReqHeader
+  deleteReqHeader,
+  addReqHeader
 } from '../../../actions/addInterface.js'
 
 @connect(
@@ -20,7 +21,8 @@ import {
   {
     reqTagValue,
     reqHeaderValue,
-    deleteReqHeader
+    deleteReqHeader,
+    addReqHeader
   }
 )
 
@@ -30,6 +32,7 @@ class ReqList extends Component {
     reqTagValue: PropTypes.func,
     reqHeaderValue: PropTypes.func,
     deleteReqHeader: PropTypes.func,
+    addReqHeader: PropTypes.func,
     _id: PropTypes.number,
     dataNum: PropTypes.number,
     value: PropTypes.object
@@ -43,12 +46,32 @@ class ReqList extends Component {
   handleChange (value) {
     const dir = 'AddInterface/edit'
     const url = location.href
+    const newObject = []
+
     if (url.includes(dir)) {
       const { seqGroup, value: { id } } = this.props
-      seqGroup[id].name = value
+      seqGroup.forEach(v => {
+        if (id == v.id) {
+          v.name = value
+        }
+      })
+      seqGroup.forEach(v => {
+        const {id, name, value} = v
+        newObject.push({id, name, value})
+      })
+      this.props.addReqHeader( newObject )
     } else {
       const { seqGroup, dataNum } = this.props
-      seqGroup[dataNum].name = value
+      seqGroup.forEach(v => {
+        if (dataNum == v.id) {
+          v.name = value
+        }
+      })
+      seqGroup.forEach(v => {
+        const {id, name, value} = v
+        newObject.push({id, name, value})
+      })      
+      this.props.addReqHeader(newObject)
     }
   }
 
@@ -56,7 +79,17 @@ class ReqList extends Component {
   handleBlur (e) {
     const value = e.target.value
     const { seqGroup, value: { id } } = this.props
-    seqGroup[id].value = value
+    const newObject = []
+    seqGroup.forEach(v => {
+      if (id == v.id) {
+        v.value = value
+      }
+    })    
+    seqGroup.forEach(v => {
+      const {id, name, value} = v
+      newObject.push({id, name, value})
+    })
+    this.props.addReqHeader(newObject)
   }
 
   @autobind
@@ -76,13 +109,13 @@ class ReqList extends Component {
   render () {
     const propsValue = this.props.value
     const Option = Select.Option
-    const value = propsValue.value
+    const value = propsValue.value || ''
     const name = propsValue.name || ''
-
+    console.log(name)
     return (
       <li>
         <em className="title">头部标签</em>
-        <Select defaultValue={name} style={{ width: 220 }} onChange={this.handleChange} size="large">
+        <Select value={name} style={{ width: 220 }} onChange={this.handleChange} size="large">
           <Option value="">选择请求头</Option>
           <Option value="Accept">Accept</Option>
           <Option value="Accept-Charset">Accept-Charset</Option>
@@ -91,7 +124,7 @@ class ReqList extends Component {
           <Option value="Accept-Ranges">Accept-Ranges</Option>
         </Select>
         <em className="title">头部内容</em>
-        <Input defaultValue={value} placeholder="Basic usage" className="req-content" size="large" onBlur={this.handleBlur} />
+        <Input value={value} placeholder="Basic usage" className="req-content" size="large" onInput={this.handleBlur} />
         <Icon className="dynamic-delete-button" type="minus-circle-o" onClick={this.deleteReqHeader} />
       </li>
     )

client/containers/AddInterface/ReqMethod/ReqMethod.js

@@ -58,6 +58,7 @@ class ReqMethod extends Component {
   render () {
     const { Option } = Select
     const { url, interfaceName, method } = this.props
+
     return (
       <table>
         <tbody>
@@ -65,7 +66,7 @@ class ReqMethod extends Component {
             <th>协议 :</th>
             <td>
               <span className="h3">请求方式</span>
-              <Select defaultValue={method} style={{ width: 220 }} onChange={this.handleChange} size="large">
+              <Select value={method} style={{ width: 220 }} onChange={this.handleChange} size="large">
                 <Option value="POST">POST</Option>
                 <Option value="GET">GET</Option>
                 <Option value="PUT">PUT</Option>

client/containers/AddInterface/Result/Result.js

@@ -27,7 +27,7 @@ class Result extends Component {
   render () { 
     const TabPane = Tabs.TabPane
     const { mockJson } = this.props
-    console.log('mockJson', typeof mockJson, mockJson)
+
     return (
       <div className="result">
         <Tabs defaultActiveKey="1">

client/containers/Home/Home.js

@@ -17,19 +17,19 @@ const imgAnim = { y: '+=50', opacity: 0, type: 'from', ease: 'easeOutQuad', dura
 const style = {
   'height':'100%',
   'width':'100%',
-  'background': 'url(./image/bg-img.jpg) no-repeat center',
-  'backgroundSize':'cover'
+  'background': 'url(./image/bg-img.jpg) no-repeat',
+  'backgroundSize':'100% 100%'
 }
 const HomeGuest = (props) => (
   <div>
     <div className="main-one" style = {style}>
-      <div style={{ background: "linear-gradient(to bottom,rgba(64,64,64,0.9),rgba(64,64,64,0.5))"}}>
+      <div style={{ background: "linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2))"}}>
         <div className="container">
           <Row>
             <Col span={24}>
               <div className="home-des">
                 <p className="title">YAPI</p>
-                <div className="detail">一个高效，易用，可部署的Api管理系统</div>
+                <div className="detail">高效、易用、可部署的API管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务</div>
               </div>
             </Col>
           </Row>
@@ -62,7 +62,7 @@ const HomeGuest = (props) => (
           <TweenOne
             key="feat-motion-one"
             animation={oneAnim}
-            component="h3"
+            component="p"
           >
             <span>特性</span>
           </TweenOne>

client/containers/Home/Home.scss

@@ -12,7 +12,7 @@ $color-black-lighter: #404040;
   -webkit-box-orient: vertical;
   .main-one{
     .home-des{
-      color: $color-white;
+      color: $color-blue-grey-lighter;
       padding: .5rem 0 0;
       .title{
         font-size: .6rem;
@@ -29,7 +29,8 @@ $color-black-lighter: #404040;
       img{
         width: 100%;
         height: 100%;
-        box-shadow : 0 0 3px 0 $color-black-lighter;
+        //box-shadow : 0 0 3px 0 $color-black-lighter;
+        box-shadow : 0 30px 60px rgba(0,0,0,0.2);
         border-radius: .03rem;
       }
     }
@@ -39,6 +40,7 @@ $color-black-lighter: #404040;
     }
     .main-one-right{
       padding-left: .5rem;
+      padding-top: .3rem;
     }
   }
   .user-home{
@@ -82,13 +84,13 @@ $color-black-lighter: #404040;
   .feat-part{
     padding: .9rem .5rem;
     background-color: $color-white;
-    h3{
+    p{
       display: flex;
       height: .3rem;
       align-items: center;
       padding: 0 .1rem;
       margin-bottom: .2rem;
-      color: #333;
+      //color: #333;
       &:before, &:after{
         content: "";
         display: inline-block;
@@ -129,7 +131,6 @@ $color-black-lighter: #404040;
     .feat-title {
       font-size: .16rem;
       line-height: .3rem;
-      color: #333;
     }
     &:first-child {
       .feat-img {

client/containers/Interface/Interface.js

@@ -58,7 +58,7 @@ class Interface extends Component {
       .then(result => {
         result = result.data.data
         result.map(value => {
-          value.add_time = moment(value.add_time).format('YYYY-MM-DD HH:mm:ss')
+          value.add_time = moment(value.add_time*1000).format('YYYY-MM-DD HH:mm:ss')
           return value
         })
         this.props.fetchInterfaceData(result)

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -81,7 +81,6 @@ class InterfaceTable extends Component {
       title: '功能',
       'key': 'action',
       render: (data) => {
-        // const deleteInterface = this.deleteInterface.bind(this, data._id)
         const confirm = this.confirm.bind(this, data._id)
         return (
           <span>

client/containers/Login/Login.scss

@@ -18,14 +18,14 @@
 .qsso-breakline{
   display: flex;
   align-items: center;
-  color: #999;
+  color: #f7fafc;
   margin: .2rem auto;
   &:before, &:after{
     content: "";
     display: inline-block;
     height: .02rem;
     flex: 1;
-    border-top: .01rem solid #bbb;
+    border-top: .01rem solid #f7fafc;
   }
   .qsso-breakword{
     padding: 0 .1rem;

client/containers/Login/LoginWrap.js

@@ -7,8 +7,12 @@ import RegForm from './Reg';
 import './Login.scss';
 const TabPane = Tabs.TabPane;
 
-
-class LoginWrap extends Component {
+@connect(
+  state =>({
+    loginWrapActiveKey: state.login.loginWrapActiveKey
+  })
+)
+export default class LoginWrap extends Component {
   constructor(props){
     super(props);
   }
@@ -32,9 +36,3 @@ class LoginWrap extends Component {
     );
   }
 }
-
-export default connect(
-  state =>({
-    loginWrapActiveKey: state.login.loginWrapActiveKey
-  })
-)(LoginWrap)

gulpfile.js

@@ -1,11 +1,12 @@
 const fs = require('fs-extra');
 const path = require('path');
 const gulp = require('gulp');
+const watch = require('gulp-watch');
 const babel = require('gulp-babel');
 const ora = require('ora');
 const chalk = require('chalk');
 const { spawn } = require('child_process');
-let spinner = ora('请稍等...').start();
+let spinner = null;
 const DIST = 'server_dist/';
 const SRC = 'server/**/*.js';
 
@@ -30,21 +31,18 @@ function generateBabel(status) {
 }
 
 function excuteCmd(cmd, args, opts) {
-    const command = spawn(cmd, args, opts);
+    const NAME = cmd === 'ykit' ? chalk.cyan('[ykit]') : chalk.blue('[dev-server]');
+    let command = spawn(cmd, args, opts);
 
     command.stdout.on('data', data => {
-        output('log', `${cmd}: ${data.toString()}`, true);
+        output('log', `${NAME} ${data.toString()}`, true);
     });
 
     command.stderr.on('data', data => {
-        output('log', `${cmd}: ${data.toString()}`, true);
+        output('log', `${NAME} ${data.toString()}`, true);
     });
 
-    command.on('close', code => {
-        if (code !== 0) {
-            output('log', `${cmd}: ${data.toString()}`);
-        }
-    });
+    return command;
 }
 
 function output(type, message, restart = false) {
@@ -64,25 +62,29 @@ function output(type, message, restart = false) {
     }
 }
 
+function waitingSpinner() {
+    spinner = ora({
+        text: '等待文件变更...',
+        spinner: 'circleQuarters',
+        color: 'cyan'
+    }).start();
+}
+
 gulp.task('removeDist', [], function () {
     return fs.removeSync(DIST)
 });
 
 gulp.task('initialBuild', ['removeDist'], () => {
-    spinner.text = '初始编译...';
+    spinner = ora('初始编译...').start();
 
     return gulp.src(SRC)
         .pipe(generateBabel())
         .pipe(gulp.dest(DIST))
         .on('end', () => {
             output('success', '初始编译成功！');
-            spinner = ora({
-                text: '等待文件变更...',
-                spinner: 'pong',
-                color: 'green'
-            }).start();
+            waitingSpinner();
 
-            excuteCmd('node_modules/.bin/nodemon', ['-q', 'server_dist/app.js', 'dev'], {
+            excuteCmd('node_modules/.bin/nodemon', ['-q', 'server_dist/app.js'], {
                 cwd: __dirname
             });
 
@@ -94,28 +96,41 @@ gulp.task('initialBuild', ['removeDist'], () => {
 
 gulp.task('default', ['initialBuild'], () => {
     gulp.watch(SRC, (event) => {
+        let originFilePath = path.relative(path.join(__dirname, 'server'), event.path)
+        let distPath = path.resolve(DIST, path.join(originFilePath))
         spinner.text = `正在编译 ${event.path}...`;
 
         gulp.src(event.path).pipe(generateBabel())
-            .pipe(gulp.dest(DIST)).on('end', () => {
-                output('success', `成功编译 ${event.path}`);
-                spinner = ora({
-                    text: 'waiting changes...',
-                    spinner: 'pong',
-                    color: 'green'
-                });
-                spinner.start();
+            .pipe(gulp.dest(path.parse(distPath).dir)).on('end', () => {
+                output('success', `成功编译 ${originFilePath}`);
+                output('success', '正在重启服务器...');
+                waitingSpinner();
             });
     });
 });
 
+gulp.task('buildNode', () => {
+    return gulp.src(SRC)
+        .pipe(generateBabel())
+        .pipe(gulp.dest(DIST));
+});
+
+gulp.task('watchNode', ['buildNode'], () => {
+    return watch(SRC, {
+        verbose: true,
+        ignoreInitial: false
+    })
+        .pipe(generateBabel())
+        .pipe(gulp.dest(DIST));
+});
+
 gulp.task('build', () => {
     let status = {
         count: 0
     };
     let ykitOutput = '';
 
-    spinner.text = '正在编译...';
+    spinner = ora('请稍等...').start();
 
     gulp.src(SRC)
         .pipe(generateBabel(status))

package.json

@@ -5,10 +5,11 @@
   "main": "index.js",
   "scripts": {
     "build-server": "babel  server -d server_dist",
-    "dev-server": "nodemon server_dist/app.js",
+    "dev-server": "nodemon server_dist/app.js -L",
     "install-server" : "node server_dist/install.js",
     "dev": "gulp --silent",
-    "build": "gulp build --silent"
+    "build": "gulp build --silent",
+    "only-watch": "gulp watchNode"
   },
   "repository": {
     "type": "git",