add few pages

dashboard/src/assets/styles/main.css

@@ -0,0 +1,31 @@
+:root{
+    --sidebar-width: 200px;
+  }
+  body{
+    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei" sans-serif;
+  }
+
+  .content{
+    background: #f9f9f9;
+  }
+  table.table tbody td{
+    font-weight: normal;
+  }
+  .jl{
+    justify-content: flex-start;
+  }
+  .jc{
+    justify-content: center;
+  }
+  .jr{
+    justify-content: flex-end;
+  }
+  .fixed-bottom{
+    position: fixed;
+    width:300px;
+    bottom:0
+  }
+  .crud-grid-thumb{
+    margin:0.5em;
+    max-height:5em;
+}

dashboard/src/assets/styles/main.styl

@@ -0,0 +1,49 @@
+// @import '../../node_modules/vuetify/src/stylus/settings/_colors'
+
+// $theme := {
+//   primary: $red.darken-2
+//   accent: $red.accent-2
+//   secondary: $grey.darken-3
+//   info: $blue.lighten-1
+//   warning: $amber.darken-2
+//   error: $red.accent-4
+//   success: $green.lighten-2
+// }
+
+// @import '../../node_modules/vuetify/src/stylus/main'
+body{
+  background: #f9f9f9;
+  font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei" , sans-serif;
+}
+.jl{
+  justify-content: flex-start;
+}
+.jc{
+  justify-content: center;
+}
+.jr{
+  justify-content: flex-end;
+}
+.fixed-bottom{
+  position: fixed;
+  width:300px;
+  bottom:0
+}
+.crud-grid-thumb{
+  margin:0.5em 0;
+  max-height:5em;
+}
+.quill-editor button {
+  margin-bottom:0;
+}
+
+// vuetify reset
+.btn--floating .btn__content{
+  flex:1 0 auto;
+}
+table.table tr:not(:last-child){
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+.application--light .input-group:not(.input-group--error) .input-group__details:before{
+  background-color: rgba(0,0,0,0.2);
+}

dashboard/src/main.js

@@ -5,6 +5,7 @@ import App from './App'
 import router from './router'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
+import '@/assets/styles/main.css'
 
 Vue.use(Vuetify)
 

dashboard/src/pages/Main.vue

@@ -1,6 +1,6 @@
 <template>
 <v-app :dark="dark" standalone="standalone">
-    <v-navigation-drawer v-model="drawer" :mini-variant.sync="mini" persistent="persistent" enable-resize-watcher="enable-resize-watcher" :dark="dark">
+    <v-navigation-drawer v-model="drawer" :mini-variant.sync="mini" persistent="persistent" enable-resize-watcher="enable-resize-watcher" :dark="dark" class="cvpm-main-drawer">
         <div class="pa-3 text-xs-center" v-show="!mini">
             <div class="display-2 py-4">CVPM</div>
             <!--
@@ -66,6 +66,16 @@
             </v-list>
         </v-menu>
     </v-toolbar>
+    <main>
+        <v-container class="pa-4" fluid>
+            <v-alert v-if="message.display" v-bind="message" v-model="message.body" dismissible="dismissible">{{message.body}}</v-alert>
+            <div class="py-2">
+                <v-slide-y-transition mode="out-in">
+                    <router-view></router-view>
+                </v-slide-y-transition>
+            </div>
+        </v-container>
+    </main>
 </v-app>
 </template>
 
@@ -81,6 +91,7 @@ export default {
       locales: ['en-US', 'zh-CN'],
       colors: ['blue', 'green', 'purple', 'red'],
       message: {
+        display: false,
         body: 'Hello'
       },
       menu: []
@@ -102,6 +113,9 @@ export default {
 
 <style scoped>
 .cvpm-logo {
-    width: 20em;
+  width: 20em;
+}
+.cvpm-main-drawer {
+    position:fixed;
 }
 </style>

dashboard/src/pages/Settings.vue

@@ -0,0 +1,31 @@
+<template>
+<v-layout>
+    <v-flex md8="md8">
+        <v-form v-model="model" v-bind="$data" method="patch" action="settings" @success="onSuccess">
+            <div class="my-4" slot="buttons">
+                <v-btn class="grey" dark="dark" @click.native="$root.back()">
+                    <v-icon dark="dark" left="left">chevron_left </v-icon><span>Back</span></v-btn>
+                <v-btn primary="primary" dark="dark" type="submit">Submit
+                    <v-icon right="right" dark="dark">send</v-icon>
+                </v-btn>
+            </div>
+        </v-form>
+    </v-flex>
+    <v-flex md4="md4">
+        <h5>result</h5>
+        <p>model</p>
+    </v-flex>
+</v-layout>
+</template>
+
+<script>
+export default {
+  methods: {
+    onSubmit () {},
+    onSuccess (data) {}
+  }
+}
+</script>
+
+<style>
+</style>

dashboard/src/router/index.js

@@ -1,15 +1,22 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Main from '@/pages/Main'
-
+import Settings from '@/pages/Settings'
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'Main',
-      component: Main
+      component: Main,
+      children: [
+        {
+          path: '/settings',
+          name: 'Settings',
+          component: Settings
+        }
+      ]
     }
   ]
 })

dashboard/src/services/config.js

@@ -1,7 +1,7 @@
-const discovery_config = {
-    'endpoint':'http://127.0.0.1:3000'
+const discoveryConfig = {
+  'endpoint': 'http://127.0.0.1:3000'
 }
 
 export {
-    discovery_config
-}
+    discoveryConfig
+}

dashboard/src/services/discovery.js

@@ -1,14 +1,14 @@
 import axios from 'axios'
-import { discovery_config } from './config'
+import { discoveryConfig } from './config'
 
 class Discovery {
-    constructor(endpoint) {
-        self.endpoint = endpoint
-    }
+  constructor (endpoint) {
+    self.endpoint = endpoint
+  }
 }
 
-const discovery = Discovery(discovery_config.endpoint)
+const discovery = Discovery(discoveryConfig.endpoint)
 
 export {
     discovery
-}
+}

dashboard/src/services/mock.js

@@ -1,21 +1,21 @@
 import axios from 'axios'
-import { discovery_config } from './config'
+import { discoveryConfig } from './config'
 
 class Discovery {
-    constructor(endpoint) {
-        self.endpoint = endpoint
-    }
-    getSystemStatus () {
-        return new Promise((resolve, reject) => {
-            resolve({
-                'status':'ok'
-            })
-        })
-    }
+  constructor (endpoint) {
+    self.endpoint = endpoint
+  }
+  getSystemStatus () {
+    return new Promise((resolve, reject) => {
+      resolve({
+        'status': 'ok'
+      })
+    })
+  }
 }
 
-const discovery = Discovery(discovery_config.endpoint)
+const discovery = Discovery(discoveryConfig.endpoint)
 
 export {
     discovery
-}
+}