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

2025-03-01 14:05:44 +08:00 · 2017-07-26 16:29:52 +08:00 · 2017-07-26 16:29:52 +08:00 · a1c52e99ec
commit a1c52e99ec
parent 3dac520f95 cc0428efde
20 changed files with 264 additions and 127 deletions
--- a/client/Application.js
+++ b/client/Application.js
@ -46,16 +46,17 @@ export default class App extends Component {
        <HashRouter>
          <div className="router-main">
            <Header />
-            <Route path="/" component={Home} exact />
-            {/*<Route exact path="/group" component={ requireAuthentication(ProjectGroups) } ></Route>*/}
-            <Switch>
-              <Redirect exact from='/group' to='/group/1' />
-              <Route exact path="/group/:groupName" component={ requireAuthentication(ProjectGroups) } />
-            </Switch>
-            <Route path="/Interface" component={requireAuthentication(Interface)} />
-            <Route path="/user" component={requireAuthentication(User)} />
-            <Route path="/News" component={requireAuthentication(News)} />
-            <Route path="/AddInterface" component={ requireAuthentication(AddInterface) } />
+            <div className="router-container">
+              <Route path="/" component={Home} exact />
+              <Switch>
+                <Redirect exact from='/group' to='/group/1' />
+                <Route exact path="/group/:groupName" component={ requireAuthentication(ProjectGroups) } />
+              </Switch>
+              <Route path="/Interface" component={requireAuthentication(Interface)} />
+              <Route path="/user" component={requireAuthentication(User)} />
+              <Route path="/News" component={requireAuthentication(News)} />
+              <Route path="/AddInterface" component={ requireAuthentication(AddInterface) } />
+            </div>
            <Footer/>
          </div>
        </HashRouter>
--- a/client/actions/interfaceAction.js
+++ b/client/actions/interfaceAction.js
@ -2,7 +2,8 @@ import {
  FETCH_INTERFACE_DATA,
  LIST_INTERFACE_CLICK,
  PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../constants/action-types.js'

 export function fetchInterfaceData (value) {
@ -30,3 +31,10 @@ export function deleteInterfaceData (value) {
    payload: value
  }
 }
+
+export function saveInterfaceProjectId (value) {
+  return {
+    type: SAVE_INTERFACE_PROJECT_ID,
+    payload: value
+  }
+}
--- a/client/components/Header/Header.js
+++ b/client/components/Header/Header.js
@ -11,12 +11,16 @@ import Srch from './Search/Search'
 const { Header } = Layout;

 const MenuUser = (props) => (
-  <Menu>
-    <Menu.Item key="0">
-      <Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link>
+  <Menu
+  style={{
+    "boxShadow":"0 1px 6px rgba(0, 0, 0, 0.3)"
+  }}
+  >
+    <Menu.Item key="0" style={{"fontSize": ".14rem"}}>
+      <Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user"/>个人中心</Link>
    </Menu.Item>
-    <Menu.Item key="1">
-      <a onClick={props.logout}>退出</a>
+    <Menu.Item key="1" style={{"fontSize": ".14rem"}}>
+      <a onClick={props.logout}><Icon type="logout" />退出</a>
    </Menu.Item>
  </Menu>
 );
@ -34,17 +38,19 @@ const ToolUser = (props)=> (
      <Srch groupList={props.groupList}/>
    </li>
    <li className="toolbar-li">
-      <Dropdown overlay={
-        <MenuUser
-          user={props.user}
-          msg={props.msg}
-          uid={props.uid}
-          relieveLink={props.relieveLink}
-          logout={props.logout}
-        />
+      <Dropdown
+        placement = "bottomRight"
+        overlay={
+          <MenuUser
+            user={props.user}
+            msg={props.msg}
+            uid={props.uid}
+            relieveLink={props.relieveLink}
+            logout={props.logout}
+          />
      }>
        <a className="dropdown-link">
-          <Icon type="user"/>
+          <Icon type="solution" />
        </a>
      </Dropdown>
    </li>
@ -119,40 +125,48 @@ 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'
+    }
    return (
-      <acticle className="header-box">
-        <Layout className="layout">
-          <Header>
-            <div className="content">
-              <div className="logo">
-                <Link to="/" onClick={this.relieveLink}>YAPI</Link>
-              </div>
-              <Menu
-                mode="horizontal"
-                className="nav-toolbar"
-                theme="dark"
-                style={{ lineHeight : '.64rem'}}
-                onClick={this.linkTo}
-                selectedKeys={[curKey]}
-              >
-                <Menu.Item key="/group">
-                  <Link to="/group">项目广场</Link>
-                </Menu.Item>
-              </Menu>
-              <div className="user-toolbar">
-                {login?
-                  <ToolUser
-                    user = { user }
-                    msg = { msg }
-                    uid = { uid }
-                    relieveLink = { this.relieveLink }
-                    logout = { this.logout }
-                  />
-                  :""}
-              </div>
+      <acticle className={`header-box`} style={headerStyle}>
+        <Header style={{
+          background: "linear-gradient(to bottom,rgba(64,64,64,1),rgba(64,64,64,0.9))"
+        }}>
+          <div className="content">
+            <div className="logo">
+              <Link to="/" onClick={this.relieveLink}>YAPI</Link>
            </div>
-          </Header>
-        </Layout>
+            <Menu
+              mode="horizontal"
+              className="nav-toolbar"
+              theme="dark"
+              style={{
+                lineHeight : '.64rem',
+                backgroundColor:"transparent",
+                borderColor:"transparent"
+              }}
+              onClick={this.linkTo}
+              selectedKeys={[curKey]}
+            >
+              <Menu.Item key="/group">
+                <Link to="/group">项目广场</Link>
+              </Menu.Item>
+            </Menu>
+            <div className="user-toolbar">
+              {login?
+                <ToolUser
+                  user = { user }
+                  msg = { msg }
+                  uid = { uid }
+                  relieveLink = { this.relieveLink }
+                  logout = { this.logout }
+                />
+                :""}
+            </div>
+          </div>
+        </Header>
      </acticle>
    )
  }
--- a/client/components/Header/Header.scss
+++ b/client/components/Header/Header.scss
@ -5,10 +5,18 @@ $color-blue-deeper: #34495E;
 $color-grey-deep : #929aac;
 $color-black-light : #404040;
 /* .header-box.css */
+
+//.light{
+//  background-color: #f7fafc;
+//  color: $color-blue;
+//}
+//.dark {
+//  background-color: $color-black-light;
+//  color: $color-white;
+//}
 .header-box {
  display: block;
  font-size: 0.14rem;
-  color: $color-white;
  z-index: 99;
  // 内容宽度
  .content {
@ -17,7 +25,6 @@ $color-black-light : #404040;
    zoom: 1;
    overflow: hidden;
  }
-
  .logo {
    font-size: .3rem;
    float: left;
@ -51,7 +58,7 @@ $color-black-light : #404040;
      }
      float: left;
      margin: 0 0 0 .12rem;
-      font-size: .14rem;
+      font-size: .2rem;
      cursor: pointer;
      color: $color-white;
      &:not(:last-child){
@ -75,11 +82,7 @@ $color-black-light : #404040;
      i{
        margin-right: .03rem;
      }
-      .dropdown-link{
-        i{
-          font-size: .2rem;
-        }
-      }
    }
  }
 }
+
--- a/client/constants/action-types.js
+++ b/client/constants/action-types.js
@ -3,7 +3,8 @@ export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA'
 export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK'
 export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 export const PUSH_INTERFACE_NAME = 'PUSH_INTERFACE_NAME'
-export  const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
+export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
+export const SAVE_INTERFACE_PROJECT_ID = 'SAVE_INTERFACE_PROJECT_ID'

 // addInterFace
 export  const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT'
--- a/client/containers/AddInterface/AddInterface.js
+++ b/client/containers/AddInterface/AddInterface.js
@ -11,6 +11,7 @@ import ReqHeader from './ReqHeader/ReqHeader.js'
 import ReqParams from './ReqParams/ReqParams.js'
 import ResParams from './ResParams/ResParams.js'
 import Result from './Result/Result.js'
+import MockUrl from './MockUrl/MockUrl.js'
 import InterfaceTest from './InterfaceTest/InterfaceTest.js'
 import {
  saveForms,
@ -23,6 +24,7 @@ import {
  pushInterfaceMethod
 } from '../../actions/addInterface.js'

+let projectId = ''
 const success = () => {
  message.success('保存成功!')
 }
@ -71,7 +73,8 @@ class AddInterface extends Component {
    this.state = {
      isLoading: '',
      isSave: false,
-      mockJson: ''
+      mockJson: '',
+      mockURL: ''
    }
  }

@ -106,7 +109,6 @@ class AddInterface extends Component {
      url.match(regTwo)
      return RegExp.$1
    }
-
  }

  verificationURL () {
@ -117,9 +119,22 @@ class AddInterface extends Component {
    }
  }

+  getMockURL (project_id, result) {
+    const params = {id: project_id}
+    axios.get('/project/get', {params: params}).
+      then( data => {
+        const { protocol, prd_host, basepath } = data.data.data
+        const mockURL = `${protocol}://${prd_host}${basepath}${result.path}`
+        this.setState({
+          mockURL: mockURL
+        })
+      })
+  }
+
  editState (data) {
    const props = this.props
    const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
+
    props.pushInputValue(path)
    props.pushInterfaceMethod(method)
    props.pushInterfaceName(title)
@ -127,6 +142,7 @@ class AddInterface extends Component {
    props.getResParams(res_body)
    props.addReqHeader(req_headers)
    props.fetchInterfaceProject(project_id)
+    projectId = project_id
  }

  initInterfaceData (interfaceId) {
@ -142,6 +158,8 @@ class AddInterface extends Component {
        this.editState(result)
        // 初始化 mock
        this.mockData()
+
+        this.getMockURL(projectId, result)
      })
      .catch(e => {
        console.log(e)
@ -175,7 +193,6 @@ class AddInterface extends Component {
      resParams = JSON.parse(this.props.resParams)
      json = JSON.stringify(Mock.mock(resParams), null, 2)
    }
-    console.log('json', json)
    this.setState({
      mockJson: json
    })
@ -184,13 +201,13 @@ class AddInterface extends Component {
  @autobind
  saveForms () {
    let postURL = undefined
-    const { interfaceName, url, seqGroup, reqParams, resParams } = this.props
+    const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
    const ifTrue = this.verificationURL()
    const interfaceId = this.getInterfaceId()
    const params = {
      title: interfaceName,
      path: url,
-      method: 'POST',
+      method: method,
      req_headers: seqGroup,
      project_id: interfaceId,
      req_params_type: 'json',
@ -221,8 +238,8 @@ class AddInterface extends Component {

  render () {
    const TabPane = Tabs.TabPane
-    const { isLoading, isSave, mockJson='' } = this.state
-    console.log('mockJson', mockJson)
+    const { isLoading, isSave, mockJson='', mockURL } = this.state
+    console.log(mockURL)
    return (
      <section className="add-interface-box">
        <div className="content">
@ -235,6 +252,7 @@ class AddInterface extends Component {
              <ReqParams data={this.props} />
              <ResParams />
              <Result isSave={isSave} mockJson={mockJson} />
+              <MockUrl mockURL={mockURL} />
            </TabPane>
            {
            // <TabPane tab="Mock" key="2">mock</TabPane>
--- a/client/containers/AddInterface/AddInterface.scss
+++ b/client/containers/AddInterface/AddInterface.scss
@ -169,6 +169,23 @@
      color: #CCC;
    }
  }
+  
+  /* .mock-url-box.css */
+  .mock-url-box {
+    clear: both;
+    padding: 10px 0 0 0;
+    margin: 0 0 0 20px;
+    p {
+      width: 70%;
+      height: 35px;
+      line-height: 35px;
+      border: 1px #DDD solid;
+      display: inline-block;
+      vertical-align: -4px;
+      margin: 0 10px 0 0;
+      padding: 0 0 0 10px;
+    }
+  }

  .loading {
    display: none;
--- a/client/containers/AddInterface/MockUrl/MockUrl.js
+++ b/client/containers/AddInterface/MockUrl/MockUrl.js
@ -0,0 +1,46 @@
+import '../AddInterface.scss'
+import React, { Component } from 'react'
+import { Button, message } from 'antd'
+import Clipboard from 'clipboard'
+import PropTypes from 'prop-types'
+
+const success = () => {
+  message.success('复制成功!')
+}
+
+class MockUrl extends Component {
+  static propTypes = {
+    mockURL: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    setTimeout(this.clipboard, 500)
+  }
+
+  clipboard () {
+    const btn = document.querySelector('#mock-clipboard')
+    const txt = document.querySelector('#mock-p').innerHTML
+    console.log('txt', txt)
+    new Clipboard(btn, {
+      text: () => txt,
+      target () {
+        success()
+      }
+    })
+  }
+
+  render () {
+    return (
+      <section className="mock-url-box">
+        <p id="mock-p">{this.props.mockURL}</p>
+        <Button type="primary" id="mock-clipboard">复制</Button>
+      </section>
+    )
+  }
+}
+
+export default MockUrl
--- a/client/containers/AddInterface/ReqMethod/ReqMethod.js
+++ b/client/containers/AddInterface/ReqMethod/ReqMethod.js
@ -40,6 +40,7 @@ class ReqMethod extends Component {

  @autobind
  handleChange (value) {
+    console.log('value', value)
    this.props.pushInterfaceMethod(value)
  }

@ -57,20 +58,15 @@ class ReqMethod extends Component {

  render () {
    const { Option } = Select
-    const { url, interfaceName } = this.props
+    const { url, interfaceName, method } = this.props
    return (
      <table>
        <tbody>
          <tr>
            <th>协议 :</th>
            <td>
-              <span className="h3">请求协议</span>
-              <Select defaultValue="HTTP" style={{ width: 220}} onChange={this.handleChange} size="large">
-                <Option value="HTTP">HTTP</Option>
-                <Option value="HTTPS">HTTPS</Option>
-              </Select>
              <span className="h3">请求方式</span>
-              <Select defaultValue="POST" style={{ width: 220 }} onChange={this.handleChange} size="large">
+              <Select defaultValue={method} style={{ width: 220 }} onChange={this.handleChange} size="large">
                <Option value="POST">POST</Option>
                <Option value="GET">GET</Option>
                <Option value="PUT">PUT</Option>
--- a/client/containers/Home/Home.js
+++ b/client/containers/Home/Home.js
@ -13,34 +13,42 @@ import QueueAnim from 'rc-queue-anim';


 const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
+const style = {
+  'height':'100%',
+  'width':'100%',
+  'background': 'url(./image/bg-img.jpg) no-repeat center',
+  'backgroundSize':'cover'
+}
 const HomeGuest = (props) => (
  <div>
-    <div className="main-one">
-      <div className="container">
-        <Row>
-          <Col span={24}>
-            <div className="home-des">
-              <p className="title">YAPI</p>
-              <div className="detail">一个高效，易用，可部署的Api管理系统</div>
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <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>
-        </Row>
+    <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 className="container">
+          <Row>
+            <Col span={24}>
+              <div className="home-des">
+                <p className="title">YAPI</p>
+                <div className="detail">一个高效，易用，可部署的Api管理系统</div>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <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>
+          </Row>
+        </div>
      </div>
    </div>
    <div className="feat-part">
      <div className="container">
        <OverPack
-          playScale={[0.3,0.1]}
+          playScale={[0.2,0.1]}
        >
          <TweenOne
            key="feat-motion-one"
--- a/client/containers/Home/Home.scss
+++ b/client/containers/Home/Home.scss
@ -7,16 +7,13 @@ $color-grey-lighter : #F7F7F7;
 $color-blue-light: #5dade2;
 $color-black-lighter: #404040;

-
 .home-main {
-  min-height:calc(100% - 2.47rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
-  background: $color-blue-grey-lighter;
  .main-one{
-    padding: .5rem .5rem 0 .5rem;
-    //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
    .home-des{
+      color: $color-white;
+      padding: .5rem 0 0;
      .title{
        font-size: .6rem;
      }
@ -25,6 +22,7 @@ $color-black-lighter: #404040;
      }
    }
    .login-form{
+      color: $color-white;
    }
    .img-container{
      margin-bottom: -.2rem;
@ -40,7 +38,7 @@ $color-black-lighter: #404040;
      margin-top: .2rem;
    }
    .main-one-right{
-      padding-left: .15rem;
+      padding-left: .5rem;
    }
  }
  .user-home{
--- a/client/containers/Interface/Interface.js
+++ b/client/containers/Interface/Interface.js
@ -10,7 +10,8 @@ import moment from 'moment'
 import {
  fetchInterfaceData,
  projectMember,
-  closeProjectMember
+  closeProjectMember,
+  saveInterfaceProjectId
 } from '../../actions/interfaceAction.js'

@connect(
@ -24,7 +25,8 @@ import {
  {
    fetchInterfaceData,
    projectMember,
-    closeProjectMember
+    closeProjectMember,
+    saveInterfaceProjectId
  }
 )

@ -33,6 +35,7 @@ class Interface extends Component {
    fetchInterfaceData: PropTypes.func,
    interfaceData: PropTypes.array,
    projectMember: PropTypes.func,
+    saveInterfaceProjectId: PropTypes.func,
    closeProjectMember: PropTypes.func,
    modalVisible: PropTypes.bool
  }
@ -49,6 +52,8 @@ class Interface extends Component {
      }
    }

+    this.props.saveInterfaceProjectId(interfaceId)
+
    axios.get('/interface/list', params)
      .then(result => {
        result = result.data.data
--- a/client/containers/Interface/InterfaceList/InterfaceList.js
+++ b/client/containers/Interface/InterfaceList/InterfaceList.js
@ -22,7 +22,7 @@ class InterfaceList extends Component {
  render () {
    const { projectMember } = this.props
    const getInterfaceId = this.getInterfaceId()
-    console.log(`/AddInterface/${getInterfaceId}`)
+
    return (
      <div className="interface-btngroup">
        <Link to={`/AddInterface/${getInterfaceId}`}><Button className="interface-btn" type="primary" icon="plus">添加接口</Button></Link>
--- a/client/containers/Interface/InterfaceTable/InterfaceTable.js
+++ b/client/containers/Interface/InterfaceTable/InterfaceTable.js
@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Table, Button } from 'antd'
+import { Table } from 'antd'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import { connect } from 'react-redux'
@ -21,6 +21,7 @@ class InterfaceTable extends Component {
  static propTypes = {
    interfaceData: PropTypes.array,
    data: PropTypes.array,
+    projectId: PropTypes.string,
    deleteInterfaceData: PropTypes.func
  }

@ -70,6 +71,7 @@ class InterfaceTable extends Component {
      'key': 'action',
      render: (data) => {
        const deleteInterface = this.deleteInterface.bind(this, data._id)
+        console.log(data)
        return (
          <span>
            <Link to={`/AddInterface/edit/${data._id}`}><span>编辑</span></Link>
--- a/client/containers/Login/Login.scss
+++ b/client/containers/Login/Login.scss
@ -15,17 +15,19 @@
  margin-bottom: .1rem;
 }

-.qsso-breakline {
-  position: relative;
-  text-align: center;
-  margin: .24rem auto;
-  height: 1px;
-  background-color: #bbb;
-  .qsso-breakword {
+.qsso-breakline{
+  display: flex;
+  align-items: center;
+  color: #999;
+  margin: .2rem auto;
+  &:before, &:after{
+    content: "";
    display: inline-block;
-    transform: translateY(-50%);
-    background-color: #f7f7f7;
-    padding: 0 .08rem;
-    color: #999;
+    height: .02rem;
+    flex: 1;
+    border-top: .01rem solid #bbb;
+  }
+  .qsso-breakword{
+    padding: 0 .1rem;
  }
 }
--- a/client/reducer/Interface/InterfaceReducer.js
+++ b/client/reducer/Interface/InterfaceReducer.js
@ -2,13 +2,15 @@ import {
  FETCH_INTERFACE_DATA,
  LIST_INTERFACE_CLICK,
  PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../../constants/action-types.js'

 const initialState = {
  interfaceData: [],
  modalVisible: false,
-  interfaceName: ''
+  interfaceName: '',
+  projectId: ''
 }

 export default (state = initialState, action) => {
@ -33,6 +35,11 @@ export default (state = initialState, action) => {
        ...state,
        interfaceData: action.payload
      }
+    case SAVE_INTERFACE_PROJECT_ID:
+      return {
+        ...state,
+        projectId: action.payload
+      }
    default:
      return state
  }
--- a/client/reducer/interface/InterfaceReducer.js
+++ b/client/reducer/interface/InterfaceReducer.js
@ -2,13 +2,15 @@ import {
  FETCH_INTERFACE_DATA,
  LIST_INTERFACE_CLICK,
  PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../../constants/action-types.js'

 const initialState = {
  interfaceData: [],
  modalVisible: false,
-  interfaceName: ''
+  interfaceName: '',
+  projectId: ''
 }

 export default (state = initialState, action) => {
@ -33,6 +35,11 @@ export default (state = initialState, action) => {
        ...state,
        interfaceData: action.payload
      }
+    case SAVE_INTERFACE_PROJECT_ID:
+      return {
+        ...state,
+        projectId: action.payload
+      }
    default:
      return state
  }
--- a/client/styles/common.scss
+++ b/client/styles/common.scss
@ -44,4 +44,7 @@ em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: 100%;
+  .router-container{
+    min-height:calc(100% - 2.47rem);
+  }
 }
--- a/package.json
+++ b/package.json
@ -18,10 +18,11 @@
    "assets-webpack-plugin": "^3.5.1",
    "axios": "^0.16.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "clipboard": "^1.7.1",
    "copy-webpack-plugin": "^4.0.1",
    "core-decorators": "^0.17.0",
-    "fast-sass-loader": "^1.2.5",
    "cross-request": "^1.0.1",
+    "fast-sass-loader": "^1.2.5",
    "fs-extra": "^3.0.1",
    "json2html": "0.0.8",
    "jsoneditor": "^5.9.3",
--- a/static/image/bg-img.jpg
+++ b/static/image/bg-img.jpg