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

client/components/AuthenticatedComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import { changeMenuItem } from '../actions/menu'
+import { message } from 'antd'
 
 
 export function requireAuthentication(Component) {
@@ -26,6 +27,7 @@ export function requireAuthentication(Component) {
       if( !this.props.isAuthenticated ){
         this.props.history.push('/');
         this.props.changeMenuItem('/');
+        message.info('请先登录',1);
       }
     }
     render() {

client/containers/Home/Home.js

@@ -13,6 +13,7 @@ import QueueAnim from 'rc-queue-anim';
 
 
 const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
+const imgAnim = { y: '+=50', opacity: 0, type: 'from', ease: 'easeOutQuad', duration: '1500'};
 const style = {
   'height':'100%',
   'width':'100%',
@@ -36,11 +37,19 @@ const HomeGuest = (props) => (
             <Col span={8} className="main-one-left">
               <Login/>
             </Col>
-            <Col span={16} className="main-one-right">
-              <div className="img-container">
-                <img src="./image/demo-img.png"/>
-              </div>
-            </Col>
+            <OverPack>
+              <TweenOne
+                key="feat-motion-one"
+                animation={imgAnim}
+              >
+                <Col span={16} className="main-one-right">
+
+                  <div className="img-container">
+                    <img src="./image/demo-img.png"/>
+                  </div>
+                </Col>
+              </TweenOne>
+            </OverPack>
           </Row>
         </div>
       </div>

client/containers/ProjectGroups/ProjectList/ProjectList.scss

@@ -4,7 +4,6 @@
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
   border-radius: 4px;
   text-align: right;
-  min-height: 700px;;
 }
 
 .m-table {

client/containers/User/LeftMenu.js

@@ -10,7 +10,8 @@ const Option = AutoComplete.Option;
   state => {
     console.log(state);
     return {
-      curUid: state.login.uid + ''
+      curUid: state.login.uid + '',
+      curUserName: state.login.userName
     }
   }
 )
@@ -26,7 +27,8 @@ class LeftMenu extends Component {
   }
 
   static propTypes = {
-    curUid: PropTypes.string
+    curUid: PropTypes.string,
+    curUserName: PropTypes.string
   }
 
   //延迟搜索
@@ -80,6 +82,9 @@ class LeftMenu extends Component {
 
     const { dataSource } = this.state;
     return (<div className="user-list">
+      <div className='cur-user'>
+        <div className='user-name'><span>用户名 : </span>{`${this.props.curUserName}`}</div>
+      </div>
       <Row type="flex" justify="start" className="search">
         <Col span="24">
           <div className="certain-category-search-wrapper" style={{ width: "100%" }}>
@@ -98,7 +103,7 @@ class LeftMenu extends Component {
           </div>
         </Col>
       </Row>
-      <Menu defaultSelectedKeys={[location.hash]}>
+      <Menu mode='inline' defaultSelectedKeys={[location.hash]}>
         {content}
       </Menu>
     </div>

client/containers/User/Profile.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Row, Col, Icon, Input, Button, Select, message } from 'antd'
+import { Row, Col, Input, Button, Select, message } from 'antd'
 import axios from 'axios';
 import {formatTime} from '../../common.js'
 import PropTypes from 'prop-types'
@@ -131,7 +131,8 @@ class Profile extends Component {
     if (this.state.usernameEdit === false) {
       userNameEditHtml = <div >
         <span className="text">{userinfo.username}</span>&nbsp;&nbsp;
-        <span className="text-button"  onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>
+        {/*<span className="text-button"  onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
+        <Button size={'small'} icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>
       </div>
     } else {
       userNameEditHtml = <div>
@@ -146,7 +147,8 @@ class Profile extends Component {
     if (this.state.emailEdit === false) {
       emailEditHtml = <div >
         <span className="text">{userinfo.email}</span>&nbsp;&nbsp;
-        <span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>
+        {/*<span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>*/}
+        <Button size={'small'} icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>
       </div>
     } else {
       emailEditHtml = <div>
@@ -161,7 +163,8 @@ class Profile extends Component {
     if (this.state.roleEdit === false) {
       roleEditHtml = <div>
         <span className="text">{roles[userinfo.role]}</span>&nbsp;&nbsp;
-        <span className="text-button" onClick={() => { this.handleEdit('roleEdit', true) }} ><Icon type="edit" />修改</span>
+        {/*<span className="text-button" onClick={() => { this.handleEdit('roleEdit', true) }} ><Icon type="edit" />修改</span>*/}
+        <Button size={'small'} icon="edit" onClick={() => { this.handleEdit('roleEdit', true) }}>修改</Button>
       </div>
     } else {
       roleEditHtml = <Select defaultValue={_userinfo.role} onChange={ this.changeRole} style={{ width: 150 }} >

client/containers/User/index.scss

@@ -6,7 +6,7 @@
   margin: .88rem auto 0 auto;
   // font-size: 0.14rem;
   
-  min-height:433px;
+  
   margin-top: 40px;
   margin-bottom: 55px;
 
@@ -23,10 +23,21 @@
     }
     ul{border:none}
   }
-
+  .user-name{
+    padding: 10px 0px;
+    text-align: center;
+    background-color: #34495e;
+    color: white;
+    span{
+      margin-right: 10px;
+    }
+  }
+  .router-content{
+    min-height:calc(100% - 2.47rem);
+  }
   .user-table {
     -webkit-box-flex: 1;
-    padding: 15px;
+    padding: 24px;
     margin-left: 15px;   
     border-radius:5px;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);

gulpfile.js

@@ -1,32 +1,154 @@
 const fs = require('fs-extra');
+const path = require('path');
 const gulp = require('gulp');
 const babel = require('gulp-babel');
-const watch = require('gulp-watch');
-const nodemon = require('nodemon');
-const dist   = './server_dist/'
+const ora = require('ora');
+const chalk = require('chalk');
+const { spawn } = require('child_process');
+let spinner = ora('请稍等...').start();
+const DIST = 'server_dist/';
+const SRC = 'server/**/*.js';
 
-gulp.task('default', ['clearLib', 'compileJS']);
-
-gulp.task('clearLib', [], function() {
-    return fs.removeSync(dist)
-});
-
-gulp.task('compileJS', ['clearLib'], function() {
-	var babelProcess = babel({
-        presets: ['es2015',  "stage-3"],
+function generateBabel(status) {
+    const babelProcess = babel({
+        presets: ['es2015', "stage-3"],
         plugins: ['transform-runtime']
-    })
-
-    babelProcess.on('error', function(e) {
-        console.log(e);
-        process.exit(1);
     });
 
-    gulp.src('server/**/*.!(js)').pipe(gulp.dest(dist));
+    babelProcess.on('error', function (e) {
+        const restart = status ? status.count < 2 : true;
 
+        console.error(e);
+        output('error', 'babel 编译失败！', restart);
 
-    return watch(['server/**/*.js'], {
-        verbose: true,
-        ignoreInitial: false
-    }).pipe(babelProcess).pipe(gulp.dest(dist));
-})
+        if (status) {
+            status.count++;
+        }
+    });
+
+    return babelProcess;
+}
+
+function excuteCmd(cmd, args, opts) {
+    const command = spawn(cmd, args, opts);
+
+    command.stdout.on('data', data => {
+        output('log', `${cmd}: ${data.toString()}`, true);
+    });
+
+    command.stderr.on('data', data => {
+        output('log', `${cmd}: ${data.toString()}`, true);
+    });
+
+    command.on('close', code => {
+        if (code !== 0) {
+            output('log', `${cmd}: ${data.toString()}`);
+        }
+    });
+}
+
+function output(type, message, restart = false) {
+    spinner.stop();
+
+    if (type === 'success') {
+        message = '✔ ' + message;
+        console.log(chalk.green(message));
+    } else if (type === 'error') {
+        message = '✖ ' + message;
+        console.log(chalk.red(message));
+    } else {
+        console.log(message);
+    }
+    if (restart) {
+        spinner.start();
+    }
+}
+
+gulp.task('removeDist', [], function () {
+    return fs.removeSync(DIST)
+});
+
+gulp.task('initialBuild', ['removeDist'], () => {
+    spinner.text = '初始编译...';
+
+    return gulp.src(SRC)
+        .pipe(generateBabel())
+        .pipe(gulp.dest(DIST))
+        .on('end', () => {
+            output('success', '初始编译成功！');
+            spinner = ora({
+                text: '等待文件变更...',
+                spinner: 'pong',
+                color: 'green'
+            }).start();
+
+            excuteCmd('node_modules/.bin/nodemon', ['-q', 'server_dist/app.js', 'dev'], {
+                cwd: __dirname
+            });
+
+            excuteCmd('ykit', ['s', '-p', '4000'], {
+                cwd: path.resolve(__dirname, '../')
+            });
+        });
+});
+
+gulp.task('default', ['initialBuild'], () => {
+    gulp.watch(SRC, (event) => {
+        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();
+            });
+    });
+});
+
+gulp.task('build', () => {
+    let status = {
+        count: 0
+    };
+    let ykitOutput = '';
+
+    spinner.text = '正在编译...';
+
+    gulp.src(SRC)
+        .pipe(generateBabel(status))
+        .pipe(gulp.dest(DIST))
+        .on('error', (err) => {
+            status.count++;
+            output('error', err, status.count < 2);
+        })
+        .on('end', () => {
+            status.count++;
+            output('success', '后端编译成功！', status.count < 2);
+        });
+
+    const ykitBuild = spawn('ykit', ['pack', '-m'], {
+        cwd: __dirname
+    });
+
+    ykitBuild.stderr.on('data', data => {
+        ykitOutput += data.toString();
+    });
+
+    ykitBuild.stdout.on('data', data => {
+        ykitOutput += data.toString();
+    });
+
+    ykitBuild.on('close', code => {
+        if (code === 0) {
+            status.count++;
+            output('success', '前端编译成功！', status.count < 2);
+        } else {
+            status.count++;
+            output('error', '前端编译失败！', status.count < 2);
+            output('log', ykitOutput);
+        }
+    });
+});

package.json

@@ -5,16 +5,18 @@
   "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",
+    "install-server" : "node server_dist/install.js",
+    "dev": "gulp --silent",
+    "build": "gulp build --silent"
   },
   "repository": {
     "type": "git",
-    "url": "git@gitlab.corp.qunar.com:wenxiong.su/yapi.git"
+    "url": "git@gitlab.corp.qunar.com:mfe/yapi.git"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@qnpm/ykit-config-qunar": "^0.8.2",
     "assets-webpack-plugin": "^3.5.1",
     "axios": "^0.16.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -76,6 +78,7 @@
     "babel-register": "^6.9.0",
     "babel-runtime": "^6.9.2",
     "buffer-shims": "^1.0.0",
+    "chalk": "^2.0.1",
     "css-loader": "^0.28.4",
     "eslint": "^3.19.0",
     "eslint-plugin-import": "^2.2.0",
@@ -90,6 +93,7 @@
     "gulp-watch": "^4.3.11",
     "node-sass": "^4.5.3",
     "nodemon": "^1.11.0",
+    "ora": "^1.3.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",