Merge pull request #70 from clarkdo/dev

bug fixes and improvements before upgrading to nuxt 1.0.0

Author: clarkdo

.travis.yml

@@ -1,5 +1,6 @@
 branches:
   only:
+    - dev
     - master
 language: node_js
 node_js:

README.md

@@ -58,12 +58,37 @@ $ yarn run generate
 $ yarn run analyze
 ```
 
+### Use PM
+
+#### Further more features refer: [PM2](https://github.com/Unitech/pm2)
+
+``` bash
+# install pm2 globally
+$ yarn global add pm2
+# launch development server
+$ yarn dev:pm2
+# launch production server
+$ yarn start:pm2
+# Display all processes status
+$ pm2 ls
+# Show all information about app
+$ pm2 show hare
+# Display memory and cpu usage of each app
+$ pm2 monit
+# Display logs
+$ pm2 logs
+# Stop
+$ pm2 stop hare
+# Kill and delete
+$ pm2 delete hare
+```
+
 ### Docker Dev
 
 ``` bash
 # build image
 $ docker build -t hare-dev -f Dockerfile.dev ./
-$ docker run -d -p 3000:3000 --env HOST=0.0.0.0 hare-dev
+$ docker run -d -p 8888:3000 --env HOST=0.0.0.0 hare-dev
 ```
 
 Go to [http://localhost:8888](http://localhost:8888)

appveyor.yml

@@ -2,8 +2,8 @@
 branches:
   # whitelist
   only:
+    - dev
     - master
-    - production
   # blacklist
   except:
     - gh-pages

client/assets/css/main.scss

@@ -1,12 +1,16 @@
 @import '~assets/fonts/style.css';
-html, body, header, #__nuxt {
+html,
+body,
+header,
+#__nuxt {
   height: 100%;
   // max-width: 1440px;
   // max-height: 900px;
   margin: 0 auto;
 }
 body {
-  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', SimSun, sans-serif;
   overflow: auto;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
@@ -15,7 +19,10 @@ a {
   color: #4078c0;
   text-decoration: none;
 }
-button, input, select, textarea {
+button,
+input,
+select,
+textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -33,5 +40,4 @@ button, input, select, textarea {
   }
 }
 @media (max-width: 768px) {
-
 }

client/components/Headbar.vue

@@ -15,14 +15,22 @@
             <el-tooltip :content="authUser.user_name">
               <img src="~assets/img/avatar.svg"></img>
             </el-tooltip>
-            {{authUser.user_name}}
+            <span> {{authUser.user_name}}</span>
           </p>
         </el-col>
         <el-col :span="3">
-          <p><img src="~assets/img/pwd.svg"></img> {{$t("head.pwd")}}</p>
+          <p>
+            <el-tooltip :content="$t('head.pwd')">
+              <img src="~assets/img/pwd.svg"></img>
+            </el-tooltip>
+            <span> {{$t("head.pwd")}}</span>
+          </p>
         </el-col>
         <el-col :span="2">
-          <p @click="logout"><img src="~assets/img/exit.svg"></img> {{$t("head.exit")}}</p>
+          <p @click="logout">
+            <img src="~assets/img/exit.svg"></img>
+            <span> {{$t("head.exit")}}</span>
+          </p>
         </el-col>
       </el-row>
     </header>
@@ -56,6 +64,11 @@ export default class Headbar extends Vue {
   height: 60px;
   position: relative;
   .header {
+    @media (max-width: 768px) {
+      .el-col p span {
+        display: none;
+      }
+    }
     /* Nav Icon */
     #nav-icon {
       $first-top: 5px;

client/components/charts/ScatterDemo.vue

@@ -0,0 +1,57 @@
+<script>
+import Component from 'class-component'
+import { Scatter } from 'vue-chartjs'
+
+@Component
+export default class ScatterDemo extends Scatter {
+  chartData = {
+    datasets: [{
+      label: 'Alibaba',
+      fill: false,
+      borderColor: '#f87979',
+      backgroundColor: '#f87979',
+      data: [{
+        x: -2,
+        y: -4
+      }, {
+        x: -1,
+        y: -1
+      }, {
+        x: 0,
+        y: 0
+      }, {
+        x: 1,
+        y: 3
+      }, {
+        x: 2,
+        y: 4
+      }]
+    },
+    {
+      label: 'Google',
+      fill: false,
+      borderColor: '#7acbf9',
+      backgroundColor: '#7acbf9',
+      data: [{
+        x: -2,
+        y: -4
+      }, {
+        x: -1,
+        y: -3
+      }, {
+        x: 0,
+        y: 1
+      }, {
+        x: 1,
+        y: 1
+      }, {
+        x: 2,
+        y: 6
+      }]
+    }]
+  }
+  mounted () {
+    this.renderChart(this.chartData)
+  }
+}
+</script>

client/middleware/check-auth.js

@@ -7,6 +7,6 @@ export default function ({ isServer, store, req, route, redirect }) {
   if (authUser && !store.state.authUser) {
     store.commit('SET_USER', authUser)
   } else if (!authUser && route.name !== 'login') {
-    redirect('/login', {page: route.fullPath})
+    redirect('/login', { page: route.fullPath })
   }
 }

client/pages/examples/charts.vue

@@ -56,6 +56,15 @@
             </el-row>
           </el-card>
         </el-col>
+        <el-col :span="10">
+          <el-card>
+            <div slot="header" class="clearfix">
+              <span>Scatter Chart</span>
+            </div>
+            <el-row>
+              <scatter-demo :width="3" :height="2"></scatter-demo>
+            </el-row>
+          </el-card>
         </el-col>
       </el-row>
     </div>
@@ -68,6 +77,7 @@ import Component from 'class-component'
 import BarDemo from '~components/charts/BarDemo'
 import PieDemo from '~components/charts/PieDemo'
 import LineDemo from '~components/charts/LineDemo'
+import ScatterDemo from '~components/charts/ScatterDemo'
 import DoughnutDemo from '~components/charts/DoughnutDemo'
 import ReactiveDemo from '~components/charts/ReactiveDemo'
 
@@ -76,6 +86,7 @@ import ReactiveDemo from '~components/charts/ReactiveDemo'
     BarDemo,
     PieDemo,
     LineDemo,
+    ScatterDemo,
     DoughnutDemo,
     ReactiveDemo
   }

client/pages/examples/index.vue

@@ -10,15 +10,15 @@
             <el-col :offset="2" :span="6">
               <p>{{$t('example.food')}}: {{food}}</p>
             </el-col>
-            <el-col :span="6">
+            <el-col :offset="1" :span="6">
               <p>{{$t('example.counter')}}: {{num}}</p>
             </el-col>
-            <el-col :span="6">
+            <el-col :offset="1" :span="6">
               <p>{{$t('example.city')}}: {{city}}</p>
             </el-col>
           </el-row>
           <el-row>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-select v-model="food" :placeholder="$t('example.selPh')">
                 <el-option
                   v-for="item in foods"
@@ -29,10 +29,10 @@
                 </el-option>
               </el-select>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="6" :xs="{span: 20, offset: 2}">
               <el-input-number v-model.number="num" :min="1" :max="10"></el-input-number>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="8" :xs="{span: 20, offset: 2}">
               <el-radio-group v-model="city" @input="checkCity">
                 <el-radio-button
                   v-for="item in cities"
@@ -53,14 +53,14 @@
             <span>{{$t('example.title2')}}</span>
           </div>
           <el-row>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-radio-group v-model="province">
                 <el-radio label="3">辽宁</el-radio>
                 <el-radio disabled label="6">浙江</el-radio>
                 <el-radio label="9">台湾</el-radio>
               </el-radio-group>
             </el-col>
-            <el-col :offset="2" :span="12">
+            <el-col :offset="2" :span="12" :xs="{span: 20, offset: 2}">
               <el-checkbox-group v-model="district">
                 <el-checkbox label="2">中山区</el-checkbox>
                 <el-checkbox label="4">东城区</el-checkbox>
@@ -70,13 +70,13 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-input placeholder="请输入内容" v-model="website">
                 <template slot="prepend">Http://</template>
                 <template slot="append">.com</template>
               </el-input>
             </el-col>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-input :placeholder="$t('example.inPh')" v-model="restaurant">
                 <el-select class="input-sel" v-model="restOptions" slot="prepend" :placeholder="$t('example.selPh')">
                   <el-option label="餐厅名" value="1"></el-option>
@@ -86,7 +86,7 @@
                 <el-button slot="append" icon="search"></el-button>
               </el-input>
             </el-col>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-select v-model="multiFood" multiple :placeholder="$t('example.selPh')">
                 <el-option
                   v-for="item in foods"
@@ -106,10 +106,10 @@
             <span>{{$t('example.title3')}}</span>
           </div>
           <el-row>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-cascader :placeholder="$t('example.selPh')" :options="organizers" change-on-select></el-cascader>
             </el-col>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               Switch:
               <el-tooltip :content="'Switch value: ' + switcher" placement="top">
                 <el-switch v-model="switcher" on-color="#13ce66"
@@ -118,7 +118,7 @@
               </el-tooltip>
               <el-switch value='0' off-value="0" disabled></el-switch>
             </el-col>
-            <el-col :offset="2" :span="6">
+            <el-col :offset="2" :span="6" :xs="{span: 20, offset: 2}">
               <el-slider v-model="slider" :max="30" :min="10" :step="5" show-stops show-input></el-slider>
             </el-col>
           </el-row>
@@ -206,6 +206,17 @@ export default class Demo extends Vue {
   .el-card .el-row:first-child {
     margin-top: 0px;
   }
+  @media (max-width: 768px) {
+    .el-card .el-row {
+      margin-top: 0px;
+      .el-col{
+        margin-top: 20px;
+      }
+      &:first-child {
+        margin-top: -20px;
+      }
+    }
+  }
 }
 </style>
 

client/pages/login.vue

@@ -5,7 +5,7 @@
     </header>
     <img src="~assets/img/login-bg.png" alt="" class="bg">
     <el-card>
-      <el-form :model="user" ref="user" @keyup.enter.native='login'>
+      <el-form :model="user" ref="user" @keyup.enter.native='!logging && login()'>
         <el-form-item prop="userName" :rules="[{ required: true, message: $t('login.userRequired')}]">
           <el-col :span="24">
             <el-input v-model="user.userName" :placeholder="$t('login.userPlaceholder')"></el-input>