add component error-page

assets/scss/common.scss

@@ -0,0 +1,28 @@
+
+
+
+
+
+.page-enter-active, .page-leave-active {
+  transition: opacity .5s
+}
+.page-enter, .page-leave-active {
+  opacity: 0
+}
+
+.page-enter-active {
+  animation: bounce-in .8s;
+}
+.page-leave-active {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% { transform: scale(0.8); opacity: 0; }
+  //50% { transform: scale(1.5) }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes bounce-out {
+  0% { transform: scale(1); opacity: 1; }
+  //50% { transform: scale(1.5) }
+  100% { transform: scale(0.8); opacity: 0; }
+}

components/error-page.vue

@@ -0,0 +1,90 @@
+<template>
+  <page class="__nuxt-error-page">
+    <div class="error">
+      <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" /></svg>
+
+      <div class="title">{{ message }}</div>
+      <p v-if="statusCode === 404" class="description">
+        <nuxt-link class="error-link" to="/">Back to the home page</nuxt-link>
+      </p>
+      <p v-else-if="statusCode === 403" class="description">
+        This page is forbidden and you may not have access
+      </p>
+      <p class="description" v-else>An error occurred while rendering the page. Check developer tools console for details.</p>
+
+    </div>
+  </page>
+</template>
+
+<script lang="ts">
+import Component from 'nuxt-class-component'
+import { Prop, Vue, Provide } from 'vue-property-decorator'
+
+@Component({
+  name: 'error-page'
+})
+export default class  extends Vue {
+
+  @Prop({ default: 404 }) statusCode: number
+  @Prop({ default: 'This page could not be found' }) message: string
+
+  head () {
+    return {
+      title: this.$props.message,
+      meta: [
+        {
+          name: 'viewport',
+          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.__nuxt-error-page {
+  padding: 1rem;
+  background: #F7F8FB;
+  color: #47494E;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: sans-serif;
+  font-weight: 100 !important;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  .error {
+    max-width: 450px;
+  }
+  .title {
+    font-size: 1.5rem;
+    margin-top: 15px;
+    color: #47494E;
+    margin-bottom: 8px;
+  }
+  .description {
+    color: #7F828B;
+    line-height: 21px;
+    margin-bottom: 10px;
+  }
+  a {
+    color: #7F828B !important;
+    text-decoration: none;
+  }
+  .logo {
+    position: fixed;
+    left: 12px;
+    bottom: 12px;
+  }
+}
+</style>

components/page.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'nuxt-class-component'
+
+@Component({
+  name: 'page',
+  mounted () {
+    this.$nextTick(() => {
+      this['$nuxt'].$loading.start()
+      setTimeout(() => this['$nuxt'].$loading.finish(), 300)
+    })
+  }
+})
+export default class  extends Vue {}
+</script>

nuxt.config.js

@@ -17,6 +17,20 @@ module.exports = {
     '~/assets/scss/common.scss'
   ],
   plugins: [
+    '~/plugins/component',
     { src: '~/plugins/element-ui', ssr: true }
   ],
+  loading: {
+    color: 'rgb(238, 92, 73, .8)', 
+    height: '3px'
+  },
+  router: {
+    extendRoutes (routes, resolve) {
+      routes.push({
+        name: 'custom',
+        path: '*',
+        component: resolve(__dirname, 'components/error-page.vue')
+      })
+    }
+  }
 }

plugins/component.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import Page from '~/components/page.vue'
+import ErrorPage from '~/components/error-page.vue'
+
+const createComponent = () => {
+  Vue.component('page', Page)
+  Vue.component('error-page', ErrorPage)
+}
+
+export default createComponent

store/index.ts

@@ -1,5 +1,6 @@
 import Vuex from 'vuex'
 import * as root from './root'
+import * as setting from './modules/setting'
 
 // More info about store: https://vuex.vuejs.org/en/core-concepts.html
 // See https://nuxtjs.org/guide/vuex-store#classic-mode
@@ -23,7 +24,7 @@ const createStore = () => {
     mutations: root.mutations,
     actions: root.actions,
     modules: {
-
+      [setting.name]: setting
     }
   })
 }

store/modules/setting.ts

@@ -0,0 +1,40 @@
+import { ActionTree, MutationTree, GetterTree, ActionContext } from 'vuex'
+import { RootState } from 'store'
+
+import { Register } from '~/server/types/config'
+
+export const name = 'setting'
+
+export const types = {
+  REGISTER: 'REGISTER'
+}
+
+export interface State {
+  register: Register
+}
+
+export const namespaced = true
+
+export const state = (): State => ({
+  register: {
+    invitation: true
+  }
+})
+
+export const getters: GetterTree<State, RootState> = {
+
+}
+
+export interface Actions<S, R> extends ActionTree<S, R> {
+
+}
+
+export const actions: Actions<State, RootState> = {
+
+}
+
+export const mutations: MutationTree<State> = {
+  [types.REGISTER](state, register: Register) {
+    state.register = register
+  },
+}

store/root.ts

@@ -1,6 +1,7 @@
 import { GetterTree, ActionContext, ActionTree, MutationTree } from 'vuex'
 import { RootState } from 'store'
 import { IRequest } from '~/server/types/resuful'
+import * as setting from './modules/setting'
 
 export const types = {}
 
@@ -20,7 +21,8 @@ interface HTTPServer {
 
 export const actions: Actions<State, RootState> = {
   async nuxtServerInit({ commit }, { req }) {
-    console.log(req.__register)
+    console.log(req.__register, req.path)
+    commit(`${setting.name}/${setting.types.REGISTER}`, req.__register)
   }
 }