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

client/ReduxContainer.js

@@ -1,7 +1,7 @@
 import LoginRedux from './reducer/Login/Login_redux.js'
 import login from './reducer/Login/login.js'
 import group from './reducer/group/group.js'
-import Interface from './reducer/interface/interface.js'
+import Interface from './reducer/Interface/InterfaceReducer.js'
 
 export default {
   group,

client/actions/interfaceAction.js

@@ -1,8 +1,10 @@
 import {
-  FETCH_INTERFACE_DATA
-} from '../constants/action-types.js';
+  FETCH_INTERFACE_DATA,
+  LIST_INTERFACE_CLICK,
+  PROJECT_MEMBER_INTERFACE
+} from '../constants/action-types.js'
 
-export function fetchAuditIcons () {
+export function fetchInterfaceData () {
   const data = [{
     key: '1',
     name: 'John Brown',
@@ -31,3 +33,15 @@ export function fetchAuditIcons () {
     payload: data
   };
 }
+
+export function projectMember () {
+  return {
+    type: LIST_INTERFACE_CLICK
+  }
+}
+
+export function closeProjectMember () {
+  return {
+    type: PROJECT_MEMBER_INTERFACE
+  }
+}

client/constants/action-types.js

@@ -1,5 +1,7 @@
 // Interface
-export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA';
+export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA'
+export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK'
+export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 
 // group
 export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'

client/containers/Home/Home.js

@@ -1,7 +1,5 @@
-// import { React, Component } from '../../base.js'
 import './Home.scss'
 import React, { Component } from 'react'
-import Header from '../../components/Header/Header.js'
 
 class Home extends Component {
   constructor(props) {
@@ -11,7 +9,7 @@ class Home extends Component {
   render () {
     return (
       <acticle className="home-main">
-        <Header />
+        主页
       </acticle>
     )
   }

client/containers/Interface/Interface.js

@@ -4,22 +4,36 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import InterfaceList from './InterfaceList/InterfaceList.js'
 import InterfaceTable from './InterfaceTable/InterfaceTable.js'
-import { fetchAuditIcons } from '../../actions/interface.js'
+import InterfaceMode from './InterfaceMode/InterfaceMode.js'
+import Header from '../../components/Header/Header.js'
+import { 
+  fetchInterfaceData, 
+  projectMember,
+  closeProjectMember
+} from '../../actions/interfaceAction.js'
 
 @connect(
   state => {
     return {
-      interfaceData: state.data
+      interfaceData: state.Interface.interfaceData,
+      modalVisible: state.Interface.modalVisible,
+      closeProjectMember: state.Interface.closeProjectMember
     }
   },
   {
-    fetchAuditIcons
+    fetchInterfaceData,
+    projectMember,
+    closeProjectMember
   }
 )
-//
+
 class Interface extends Component {
   static propTypes = {
-    fetchAuditIcons: PropTypes.func
+    fetchInterfaceData: PropTypes.func,
+    interfaceData: PropTypes.array,
+    projectMember: PropTypes.func,
+    closeProjectMember: PropTypes.func,
+    modalVisible: PropTypes.bool
   }
 
   constructor(props) {
@@ -27,19 +41,24 @@ class Interface extends Component {
   }
 
   componentWillMount () {
-    this.props.fetchAuditIcons()
+    this.props.fetchInterfaceData()
   }
 
   render () {
-    const data = this.props.fetchAuditIcons().payload
+    const { interfaceData, projectMember, modalVisible } = this.props
 
     return (
-      <section className="interface-box">
-        <InterfaceList />
-        <InterfaceTable data={data} />
-      </section>
+      <div>
+        <Header />
+
+        <section className="interface-box">
+          <InterfaceList projectMember={projectMember} />
+          <InterfaceMode modalVisible={modalVisible} closeProjectMember={this.props.closeProjectMember} />
+          <InterfaceTable data={interfaceData} />
+        </section>
+      </div>
     )
   }
 }
 
-export default Interface
+export default Interface

client/containers/Interface/Interface.scss

@@ -36,4 +36,31 @@
       }
     }
   }
-}
+}
+
+/* .interface-mode-box.css 管理项目成员弹层 */
+.interface-mode-box {
+  .add-user {
+    display: -webkit-box;
+    .ant-input {
+      width: 70%;
+      display: block;
+    }
+    .ant-btn {
+      margin: 0 0 0 15px;
+      height: 32px;
+    }
+  }
+
+  .users {
+    margin: 10px 0 0 0;
+    font-size: 0.14rem;
+    p {
+      line-height: 0.21rem;
+    }
+    .tags {
+      margin: 10px 0 0 0;
+    }
+  }
+}
+

client/containers/Interface/InterfaceList/InterfaceList.js

@@ -1,15 +1,22 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 class InterfaceList extends Component {
+  static propTypes = {
+    projectMember: PropTypes.func
+  }
+
   constructor(props) {
     super(props)
   }
 
   render () {
+    const { projectMember } = this.props
+
     return (
       <ul className="interface-list">
         <li className="active">添加接口</li>
-        <li>管理项目成员</li>
+        <li onClick={projectMember}>管理项目成员</li>
       </ul>
     )
   }

client/containers/Interface/InterfaceMode/InterfaceMode.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import { Modal, Input, Button } from 'antd'
+import PropTypes from 'prop-types'
+// import axios from 'axios'
+import ModeTag from './ModeTags'
+
+// Tags
+const ModeTags = () => {
+  const list = [1, 2, 3, 4]
+  return (
+    <article className="users">
+      <p>项目成员</p>
+      <div className="tags">
+        {
+          list.map((value, key) => {
+            return <ModeTag key={key} />
+          })
+        }
+      </div>
+    </article>
+  )
+}
+
+class InterfaceMode extends Component {
+  static propTypes = {
+    modalVisible: PropTypes.bool,
+    closeProjectMember: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    // axios.get({
+    //   url: '',
+    //   params: {}
+    // })
+    // .then(() => {
+
+    // })
+  }
+
+  handleOk (closeProjectMember) {
+    closeProjectMember()
+  }
+
+  handleCancel (closeProjectMember) {
+    closeProjectMember()
+  }
+
+  render() {
+    const { modalVisible, closeProjectMember } = this.props
+    const handleOk = this.handleOk.bind(this, closeProjectMember)
+    const handleCancel = this.handleCancel.bind(this, closeProjectMember)
+
+    return (
+      <Modal
+        title="项目成员管理"
+        onOk={ handleOk }
+        visible={ modalVisible }
+        onCancel={ handleCancel }
+        className="interface-mode-box"
+      >
+        <div className="add-user">
+          <Input placeholder="Basic usage" size="large" />
+          <Button>添加新成员</Button>          
+        </div>
+        
+        <ModeTags />
+      </Modal>
+    )
+  }
+}
+
+export default InterfaceMode

client/containers/Interface/InterfaceMode/ModeTags.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Tag } from 'antd'
+// import PropTypes from 'prop-types'
+
+class ModeTags extends Component {
+  // static propTypes = {
+  //   closeProjectMember: PropTypes.func,
+  // }
+
+  constructor(props) {
+    super(props)
+  }
+
+  closeTags () {
+
+  }
+
+  render() {
+    // const { userName } = this.props
+
+    return (
+      <Tag closable onClose={this.closeTags}>小花</Tag>
+    )
+  }
+}
+
+export default ModeTags

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -42,7 +42,6 @@ class InterfaceTable extends Component {
     }]
 
     const data = this.props.data;
-    console.log(this.props.data)
 
     return (
       <section className="interface-table">

client/containers/Login/Login.js

@@ -50,6 +50,8 @@ class Login extends Component {
     const that = this;
     return (
       <Form onSubmit={this.handleSubmit}>
+
+        {/* 用户名 (Email) */}
         <FormItem>
           {getFieldDecorator('email', {
             rules: [{ required: true, message: '请输入email!' }],
@@ -60,6 +62,8 @@ class Login extends Component {
             <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
           )}
         </FormItem>
+
+        {/* 密码 */}
         <FormItem>
           {getFieldDecorator('password', {
             rules: [{ required: true, message: '请输入密码!' }]
@@ -67,16 +71,21 @@ class Login extends Component {
             <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
           )}
         </FormItem>
+
+
+        {/* 登录按钮 */}
         <FormItem>
           <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
         </FormItem>
+
+        {/* 记住密码 */}
         {getFieldDecorator('remember', {
           valuePropName: 'checked',
           initialValue: true
         })(
           <Checkbox>记住密码</Checkbox>
         )}
-        <span>忘记密码</span>
+
       </Form>
     )
   }

client/containers/Login/login.js

@@ -50,6 +50,8 @@ class Login extends Component {
     const that = this;
     return (
       <Form onSubmit={this.handleSubmit}>
+
+        {/* 用户名 (Email) */}
         <FormItem>
           {getFieldDecorator('email', {
             rules: [{ required: true, message: '请输入email!' }],
@@ -60,6 +62,8 @@ class Login extends Component {
             <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
           )}
         </FormItem>
+
+        {/* 密码 */}
         <FormItem>
           {getFieldDecorator('password', {
             rules: [{ required: true, message: '请输入密码!' }]
@@ -67,16 +71,21 @@ class Login extends Component {
             <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
           )}
         </FormItem>
+
+
+        {/* 登录按钮 */}
         <FormItem>
           <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
         </FormItem>
+
+        {/* 记住密码 */}
         {getFieldDecorator('remember', {
           valuePropName: 'checked',
           initialValue: true
         })(
           <Checkbox>记住密码</Checkbox>
         )}
-        <span>忘记密码</span>
+
       </Form>
     )
   }

client/reducer/Interface/InterfaceReducer.js

@@ -0,0 +1,32 @@
+import {
+  FETCH_INTERFACE_DATA,
+  LIST_INTERFACE_CLICK,
+  PROJECT_MEMBER_INTERFACE
+} from '../../constants/action-types.js'
+
+const initialState = {
+  interfaceData: null,
+  modalVisible: false
+}
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_INTERFACE_DATA:
+      return {
+        ...state,
+        interfaceData: action.payload
+      }
+    case LIST_INTERFACE_CLICK:
+      return {
+        ...state,
+        modalVisible: true
+      }
+    case PROJECT_MEMBER_INTERFACE:
+      return {
+        ...state,
+        modalVisible: false
+      }
+    default:
+      return state
+  }
+}

client/reducer/Login/login.js

@@ -4,7 +4,7 @@ import {
 } from '../../constants/action-types';
 
 const initialState = {
-  isLogin: false,
+  isLogin: true,
   userName: null,
   uid: null,
   loginWrapActiveKey:"1"

client/reducer/interface/interface.js

@@ -1,16 +0,0 @@
-import {
-  FETCH_INTERFACE_DATA
-} from '../../constants/action-types.js'
-
-export default (state = 3333, action) => {
-  switch (action.type) {
-    case FETCH_INTERFACE_DATA: {
-      return {
-        ...state,
-        icons: action.payload.data
-      };
-    }
-    default:
-      return state;
-  }
-}

client/routes.js

@@ -6,7 +6,7 @@ export default () => {
   return (
     <HashRouter>
       <div className="router-main">
-        <Route path="/" component={ Home } />
+        <Route path="/" component={ Home } exact />
         <Route path="/Login" component={ Login } />
         <Route path="/ProjectGroups" component={ ProjectGroups } />
         <Route path="/Interface" component={ Interface } />

index.html

@@ -4,10 +4,10 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>my yApi</title>
-<link rel="stylesheet" href="./prd/index@dev.css">
+<link rel="stylesheet" href="http://127.0.0.1/yapi/prd/index@dev.css">
 </head>
 <body>
 <div id="yapi" style="height: 100%;"></div>
-<script src="./prd/index@dev.js"></script>
+<script src="http://127.0.0.1/prd/index@dev.js"></script>
 </body>
 </html>

package.json

@@ -68,6 +68,7 @@
     "express": "^4.15.3",
     "extract-text-webpack-plugin": "^1.0.1",
     "fs-extra": "^3.0.1",
+    "ghooks": "^2.0.0",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-watch": "^4.3.11",
@@ -83,9 +84,31 @@
     "sass-loader": "^6.0.6",
     "scss-loader": "0.0.1",
     "style-loader": "^0.18.2",
+    "validate-commit-msg": "^2.12.2",
     "webpack": "^2.0.0",
     "webpack-node-externals": "^1.6.0"
   },
+  "config": {
+      "ghooks": {
+        "commit-msg": "validate-commit-msg"
+      },
+      "validate-commit-msg": {
+        "types": [
+          "feat",
+          "fix",
+          "docs",
+          "test",
+          "chore",
+          "refactor",
+          "opti"
+        ],
+        "warnOnFail": false,
+        "maxSubjectLength": 100,
+        "subjectPattern": ".+",
+        "subjectPatternErrorMsg": "请输入message信息!",
+        "helpMessage": "Commit message 格式错误, \n请查看规范: http://wiki.corp.qunar.com/pages/viewpage.action?pageId=159698767"
+      }
+    },
   "engines": {
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"

runtime/config.dev.json

@@ -1,9 +1,9 @@
 {
   "port": "3000",
-  "webhost": "local.qunar.com",
+  "webhost": "127.0.0.1",
   "adminAccount": "admin@admin.com",
   "db": {
-    "servername": "127.0.0.1",
+    "servername": "192.168.237.71",
     "DATABASE":  "yapi",
     "port": 27017
   },

static/index.html

@@ -1,23 +1,20 @@
+<!DOCTYPE html>
 <html>
-<!-- 将原来的输入用户名和密码表单去掉
-<form>
-<input name="username">
-<input name="password">
-</form>
--->
-
-<!-- 添加一个登录按钮 -->
-
-
-
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>my yApi</title>
+<link rel="stylesheet" href="http://127.0.0.1/yapi/prd/index@dev.css">
+</head>
+<body>
+<div id="yapi" style="height: 100%;"></div>
+<script src="http://127.0.0.1/yapi/prd/index@dev.js"></script>
 
+<!--
 <button id="qsso-login">qsso登录</button>
-
-<!-- 引入qsso auth js库 -->
 <script src="https://qsso.corp.qunar.com/lib/qsso-auth.js"></script>
 
 <script>
-// 调用QSSO.attach进行登录参数的设置，如：设置绑定登录事件的HTML元素，接收token的登录接口URI。
 QSSO.attach('qsso-login','/user/login_by_token');
 var xhr = new XMLHttpRequest();
 xhr.open('GET', '/user/status')
@@ -28,12 +25,15 @@ xhr.onload = function(e){
 }
 xhr.send()
 
-
-
-
-// attach函数会将HTMLid为qsso-login的元素onclick时自动去qsso登录，当用户用户点击上面的button，会跳到qsso登录页面,用户在qsso登录后将会把token值post到http://xxx.qunar.com/login.php上。
-
 </script>
-<!-- 结束 -->
 
-<html>
+
+<html>
+
+-->
+</body>
+</html>
+
+
+
+

ykit.js

@@ -16,12 +16,13 @@ module.exports = {
       }
     }
   }],
-  devtool:  'cheap-source-map',
+  // devtool:  'cheap-source-map',
   config: {
     exports: [
       './index.js'
     ],
     modifyWebpackConfig: function(baseConfig) {
+      baseConfig.devtool = 'cheap-module-eval-source-map'
       baseConfig.context = path.resolve(__dirname, "client");
       return baseConfig;
     }