add layout account ...

assets/scss/account/layout.scss

@@ -0,0 +1,94 @@
+// ------------------------------------
+// Sass Style
+// ------------------------------------
+@import './setting.sass';
+
+.layout-account {
+  height: inherit;
+  background: $layout-background-image, $layout-background-color;
+
+  header {
+    width: $header-width;
+    margin: 0 auto;
+    height: $header-height;
+    line-height: $header-height;
+    border-bottom: 1px solid $header-border-color;
+
+    .logo {
+      height: $header-logo-height;
+      padding-left: 12px;
+
+      img {
+        height: inherit;
+        vertical-align: middle;
+      }
+    }
+
+    .list {
+      float: right;
+
+      a {
+        color: $header-link-color;
+        font-size: $header-link-fontsize;
+        margin-right: 32px;
+
+        &:hover {
+          color: $header-link-hover-color;
+        }
+      }
+    }
+  }
+
+  footer {
+    position: fixed;
+    bottom: 0;
+    text-align: center;
+    width: $footer-width;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    font-size: $footer-fontsize;
+    color: $footer-color;
+    height: $footer-height;
+    background: $footer-background;
+    padding-top: 12px;
+  }
+
+  .bodyer {
+    width: $bodyer-width;
+    margin: 0 auto;
+    padding: 20px 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout-account {
+    background: $layout-mobile-background;
+
+    header {
+      width: auto;
+      background: $header-mobile-background;
+      height: $header-mobile-height;
+      line-height: $header-mobile-height;
+      padding: 0 12px;
+
+      .logo {
+        height: $header-logo-mobile-height;
+      }
+
+      .list {
+        display: none;
+      }
+    }
+
+    footer {
+      width: $footer-mobile-width;
+      color: $footer-mobile-color;
+      background: $footer-mobile-background;
+    }
+
+    .bodyer {
+      width: auto;
+    }
+  }
+}

assets/scss/account/page.scss

@@ -0,0 +1,21 @@
+// ------------------------------------
+// Sass Style
+// ------------------------------------
+@import './setting.sass';
+
+.account-page {
+  margin: 0 auto;
+  margin-top: $page-margin-top;
+  max-width: $page-max-width;
+  width: $page-width;
+  background-color: $page-background-color;
+  overflow: hidden;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+@media (max-width: 640px) {
+  .account-page {
+    margin-top: $page-mobile-margin-top;
+  }
+}

assets/scss/account/setting.sass

@@ -0,0 +1,41 @@
+// ------------------------------------
+// Sass Setting
+// ------------------------------------
+$layout-background-image: url('../../images/banner.png') no-repeat center bottom;
+$layout-background-color: linear-gradient(103deg, rgba(32,157,230,1), rgba(55,222,242,1));
+
+$header-width: 1170px;
+$header-height: 80px;
+$header-border-color: rgba(255,255,255,.3);
+
+$header-logo-height: 32px;
+
+$header-link-color: rgba(243,243,243,.9);
+$header-link-fontsize: 16px;
+$header-link-hover-color: rgba(255,255,255,1);
+
+$footer-width: 100%;
+$footer-height: 36px;
+$footer-color: #ffffff;
+$footer-fontsize: 13px;
+$footer-background: #0000005c;
+
+$bodyer-width: $header-width;
+
+$layout-mobile-background: #ffffff;
+
+$header-mobile-background: #15bdf9;
+$header-mobile-height: 50px;
+
+$header-logo-mobile-height: 24px;
+
+$footer-mobile-width: 100%;
+$footer-mobile-color: #747474;
+$footer-mobile-background: transparent;
+
+$page-background-color: #ffffff;
+$page-max-width: 440px;
+$page-width: 96%;
+$page-margin-top: 50px;
+
+$page-mobile-margin-top: 0;

assets/scss/common.scss

@@ -1,5 +1,33 @@
+// ------------------------------------
+// Sass Style
+// ------------------------------------
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  //font-family: Menlo, "Ubuntu Mono", Consolas, "Courier New", "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
 
+#__nuxt, #__layout {
+  height: inherit;
+}
 
+h1 {
+  margin: auto;
+}
+
+a {
+  text-decoration: none;
+  outline: none;
+}
 
 
 

layouts/account.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="layout-account">
+    <header>
+      <a class="logo">
+        <img src="~/assets/images/logo.png" />
+      </a>
+      <div class="list">
+        <nuxt-link to="/login">登录</nuxt-link>
+        <nuxt-link to="/">首页</nuxt-link>
+      </div>
+    </header>
+    <div class="bodyer">
+      <nuxt class="account-page" />
+    </div>
+    <footer>
+      Copyright © 2018 Kenote 实验室出品
+    </footer>
+  </div>
+</template>
+
+<script lang="ts">
+import Component from 'nuxt-class-component'
+import { Vue } from 'vue-property-decorator'
+import '~/assets/scss/account/layout.scss'
+import '~/assets/scss/account/page.scss'
+
+@Component
+export default class  extends Vue {
+
+  head () {
+    return {
+      meta: [
+        {
+          name: 'viewport',
+          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
+        }
+      ]
+    }
+  }
+}
+</script>

modules/typescript.js

@@ -1,30 +1,24 @@
 export default function () {
-  // Add .ts extension for store, middleware and more
-  this.nuxt.options.extensions.push('ts')
-  // Extend build
-  this.extendBuild((config) => {
-    const tsLoader = {
+  // Add .ts & .tsx extension to Nuxt
+  this.nuxt.options.extensions.push('ts', 'tsx')
+
+  // Extend webpack build
+  this.extendBuild(config => {
+    // Add TypeScript
+    config.module.rules.push({
+      test: /\.tsx?$/,
       loader: 'ts-loader',
-      options: {
-        appendTsSuffixTo: [/\.vue$/]
-      },
-      exclude: [
-        /dist/,
-        /\.temp/
-      ]
-    }
-    // Add TypeScript loader
-    config.module.rules.push(
-      Object.assign(
-        {
-          test: /((client|server)\.js)|(\.tsx?)$/
-        },
-        tsLoader
-      )
-    )
+      options: { appendTsSuffixTo: [/\.vue$/] }
+    })
+
     // Add .ts extension in webpack resolve
-    if (config.resolve.extensions.indexOf('.ts') === -1) {
+    if (! config.resolve.extensions.includes('.ts')) {
       config.resolve.extensions.push('.ts')
     }
+
+    // Add .tsx extension in webpack resolve
+    if (! config.resolve.extensions.includes('.tsx')) {
+      config.resolve.extensions.push('.tsx')
+    }
   })
 }

pages/register.vue

@@ -0,0 +1,49 @@
+<template>
+  <page v-if="status === 'invitation'">
+
+  </page>
+  <page v-else-if="status === 'submitinfo'">
+
+  </page>
+  <page v-else-if="status === 'finished'">
+
+  </page>
+</template>
+
+<script lang="ts">
+import Component from 'nuxt-class-component'
+import { Provide, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { BindingHelpers } from 'vuex-class/lib/bindings'
+import * as setting from '~/store/modules/setting'
+import { Register } from '~/server/types/config'
+
+const Setting: BindingHelpers = namespace(setting.name)
+
+type Status = 'invitation' | 'submitinfo' | 'validate' | 'finished'
+
+@Component({
+  layout: 'account',
+  mounted () {
+    let { invitation } = <Register> this.register
+    this.$data.status = <Status> (invitation ? 'invitation' : 'submitinfo')
+  }
+})
+export default class  extends Vue {
+
+  @Setting.State register: Register
+
+  @Provide() status: Status = 'invitation'
+  @Provide() invitation?: string
+
+  handleInvitation (value: string): void {
+
+  }
+
+  handleSubmit (value: any): void {
+
+  }
+
+}
+
+</script>