From ead7f0319ae1d61a3adcce6f83cbc6f5d9b6319d Mon Sep 17 00:00:00 2001
From: mryanshenghong <mryanshenghong@gmail.com>
Date: Thu, 23 Jul 2020 17:13:31 -0400
Subject: [PATCH] feature update

---
 src/api/blog.ts                               |  52 ++---
 src/api/comments.ts                           |  54 +++++
 src/api/login.ts                              |  15 ++
 src/components/CardView.vue                   |  68 +++++--
 src/components/Drawer.vue                     |  32 +++
 src/components/comments/Comments.vue          | 120 +++++++++++
 .../comments/components/CommentItem.vue       | 132 ++++++++++++
 src/components/createBlog.vue                 | 192 ++++++------------
 src/components/header.vue                     |  40 +---
 src/components/loginModal.vue                 | 148 ++++++++++----
 src/utils/element.ts                          |  66 +++---
 tslint.json                                   |   9 +-
 12 files changed, 645 insertions(+), 283 deletions(-)
 create mode 100644 src/api/comments.ts
 create mode 100644 src/components/Drawer.vue
 create mode 100644 src/components/comments/Comments.vue
 create mode 100644 src/components/comments/components/CommentItem.vue

diff --git a/src/api/blog.ts b/src/api/blog.ts
index 4ac20ec..0810227 100644
--- a/src/api/blog.ts
+++ b/src/api/blog.ts
@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios from 'axios';
 
 export const getBlogsBasicInfo = (cat: string) => {
   return new Promise((resolve, reject) => {
@@ -10,13 +10,13 @@ export const getBlogsBasicInfo = (cat: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const getBlogCats = (token: string) => {
   return new Promise((resolve, reject) => {
@@ -31,13 +31,13 @@ export const getBlogCats = (token: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const getBlog = (id: string) => {
   return new Promise((resolve, reject) => {
@@ -48,13 +48,13 @@ export const getBlog = (id: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const saveBlog = (blogInfo: any, token: string) => {
   return new Promise((resolve, reject) => {
@@ -66,13 +66,13 @@ export const saveBlog = (blogInfo: any, token: string) => {
         },
       })
       .then((res) => {
-        resolve(res)
+        resolve(res);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
 
 export const createBlog = (newBlog: any, token: string) => {
   return new Promise((resolve, reject) => {
@@ -84,10 +84,10 @@ export const createBlog = (newBlog: any, token: string) => {
         },
       })
       .then((res) => {
-        resolve(res.data)
+        resolve(res.data);
       })
       .catch((err) => {
-        reject(err)
-      })
-  })
-}
+        reject(err);
+      });
+  });
+};
diff --git a/src/api/comments.ts b/src/api/comments.ts
new file mode 100644
index 0000000..8d609a7
--- /dev/null
+++ b/src/api/comments.ts
@@ -0,0 +1,54 @@
+import axios from 'axios';
+
+export interface IComment {
+  repliedTo: {
+    name: string;
+    id: string;
+  } | null;
+  blogId: string;
+  content: string;
+  parentId: string;
+}
+
+export const queryComments = (blogId: string, token: string) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .get(`${process.env.VUE_APP_URL}/myWeb/comment`, {
+        headers: {
+          authorization: 'Bearer ' + token,
+          'Content-Type': 'application/json',
+        },
+        params: { blogId },
+      })
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+export const newComment = (comment: IComment, token: string) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(
+        `${process.env.VUE_APP_URL}/myWeb/comment`,
+        {
+          data: { ...comment },
+        },
+        {
+          headers: {
+            authorization: 'Bearer ' + token,
+            'Content-Type': 'application/json',
+          },
+        }
+      )
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
diff --git a/src/api/login.ts b/src/api/login.ts
index 980f13f..2decfe0 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -18,6 +18,21 @@ export const login = (email: string, pwd: string) => {
   })
 }
 
+export const signup = (user: { user_name: string; user_pwd: string; email: string }) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .post(`${process.env.VUE_APP_URL}/myWeb/user/signup`, {
+        data: { ...user },
+      })
+      .then((res) => {
+        resolve(res.data)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+
 export const verifyToken = (user_name: string, token: string) => {
   return new Promise((resolve, reject) => {
     axios
diff --git a/src/components/CardView.vue b/src/components/CardView.vue
index 7710b56..b316e60 100644
--- a/src/components/CardView.vue
+++ b/src/components/CardView.vue
@@ -2,8 +2,14 @@
   <el-card class="box-card">
     <div v-if="mediaType === 'blog'" class="media_blog">
       <div>
-        <h3 @click="select(id)" class="title">{{ title }}<i class="el-icon-right"></i></h3>
-        <div class="insight"><i class="el-icon-chat-line-round">&nbsp;0</i> <i class="el-icon-view">&nbsp; 0</i></div>
+        <h3 @click="select(id)" class="title">
+          {{ title }}
+          <i class="el-icon-right"></i>
+        </h3>
+        <div class="insight">
+          <i class="el-icon-chat-line-round">&nbsp;0</i>
+          <i class="el-icon-view">&nbsp; 0</i>
+        </div>
       </div>
       <span class="time">
         <el-tag type="info" size="small">{{ formatTime(time) }}</el-tag>
@@ -12,7 +18,7 @@
     <div class="media_multi" v-else>
       <div class="des-box">
         <h3 class="title">{{ title }}</h3>
-        <el-tag size="mini" type="info">{{ formatTime(time) }}</el-tag>
+        <el-tag class="tag" size="mini" type="info">{{ formatTime(time) }}</el-tag>
       </div>
       <div class="media_box">
         <videoPlayer
@@ -22,16 +28,25 @@
           :options="playerOptions"
         />
       </div>
+      <div class="comment_box">
+        <el-button type="text" size="small" @click="toggleDrawer(true)">查看评论</el-button>
+        <Drawer :isDrawerShow="isDrawerShow" @toggleDrawer="toggleDrawer">
+          <Comment :blogId="id" @toggleDrawer="toggleDrawer" />
+        </Drawer>
+      </div>
     </div>
   </el-card>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { format } from '../utils/formatTime'
-import Component from 'vue-class-component'
-import { videoPlayer } from 'vue-video-player'
-import 'video.js/dist/video-js.css'
+import Vue from 'vue';
+import { format } from '../utils/formatTime';
+import Component from 'vue-class-component';
+import { videoPlayer } from 'vue-video-player';
+import 'video.js/dist/video-js.css';
+
+const Drawer = () => import('./Drawer.vue');
+const Comment = () => import('./comments/Comments.vue');
 
 @Component({
   name: 'CardView',
@@ -41,10 +56,11 @@ import 'video.js/dist/video-js.css'
     id: String,
     cat: String,
     mediaType: String,
-    mediaSources: Array,
+    mediaSources: Array
   },
-  components: { videoPlayer },
+  components: { videoPlayer, Drawer, Comment }
 })
+
 export default class CardView extends Vue {
   public playerOptions: any = {
     playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
@@ -62,28 +78,34 @@ export default class CardView extends Vue {
       timeDivider: true, // 当前时间和持续时间的分隔符
       durationDisplay: true, // 显示持续时间
       remainingTimeDisplay: false, // 是否显示剩余时间功能
-      fullscreenToggle: true, // 是否显示全屏按钮
-    },
-  }
+      fullscreenToggle: true // 是否显示全屏按钮
+    }
+  };
+
+  public isDrawerShow: boolean = false;
 
   public select(id: string): void {
-    this.$emit('select', id)
+    this.$emit('select', id);
   }
 
   public formatTime(time: string) {
-    return format(time)
+    return format(time);
+  }
+
+  public toggleDrawer(isDrawerShow: boolean) {
+    this.isDrawerShow = isDrawerShow
   }
 
   public mounted() {
     this.$nextTick(() => {
-      const sources = this.$props.mediaSources
+      const sources = this.$props.mediaSources;
       this.playerOptions.sources = sources.map((source: string) => {
         return {
           type: 'video/mp4',
-          src: `${process.env.VUE_APP_BASE}/static/` + source,
-        }
-      })
-    })
+          src: `${process.env.VUE_APP_BASE}/static/` + source
+        };
+      });
+    });
   }
 }
 </script>
@@ -132,9 +154,13 @@ export default class CardView extends Vue {
     }
 
     .media_box {
-      padding: 20px;
       border-radius: 10px;
     }
+    .comment_box {
+      .el-button {
+        color: #909399;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
new file mode 100644
index 0000000..73be6bd
--- /dev/null
+++ b/src/components/Drawer.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-drawer
+    :modal="true"
+    :modal-append-to-body="true"
+    :withHeader="false"
+    :visible="isDrawerShow"
+    @close="onDrawerClose"
+  >
+    <slot></slot>
+  </el-drawer>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+@Component({
+  name: 'Drawer',
+  props: {
+    isDrawerShow: Boolean,
+  },
+})
+export default class Drawer extends Vue {
+  public onDrawerClose(): void {
+    this.$emit('toggleDrawer', false)
+  }
+}
+</script>
+<style lang="scss" scoped>
+/deep/ .el-drawer__body {
+  overflow: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
new file mode 100644
index 0000000..5f6938b
--- /dev/null
+++ b/src/components/comments/Comments.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="comment-container">
+    <div class="comment-header">
+      <el-button type="text" class="link-btn" icon="el-icon-back" @click="onDrawerClose"></el-button>
+    </div>
+    <div class="comment-input-wrapper">
+      <el-input size="medium" type="textarea" autosize class="input" v-model="commentInput" placeholder="comment" />
+      <el-button size="small" style="margin:0 10px; max-height: 33px" @click="writeComment">Comment</el-button>
+    </div>
+    <div class="diviver"></div>
+    <CommentItem
+      v-for="(comment,index) in comments"
+      :key="index.toString()"
+      :idx="index.toString()"
+      :comment="comment"
+      :visibleNestedCommentBox="visibleNestedCommentBox"
+      :showNestedCommentBox="() => showNestedCommentBox(index.toString())"
+    >
+      <div class="childComment" v-if="comment.comments.length >0">
+        <CommentItem
+          v-for="(childComment,subindex) in comment.comments"
+          :key="subindex+'-'+index"
+          :idx="index+'-'+subindex"
+          :comment="childComment"
+          :visibleNestedCommentBox="visibleNestedCommentBox"
+          :showNestedCommentBox="() => showNestedCommentBox(`${index}-${subindex}`)"
+        />
+      </div>
+    </CommentItem>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import CommentItem from './components/CommentItem.vue';
+
+import { queryComments, newComment, IComment } from '@/api/comments';
+
+@Component({
+  name: 'Comment',
+  props: {
+    blogId: {
+      type: String
+    }
+  },
+  components: { CommentItem }
+})
+export default class Comment extends Vue {
+  public visibleNestedCommentBox: string | null = null;
+  public commentInput: string = '';
+  public comments: any[] = []
+  public showNestedCommentBox(index: string): void {
+    this.visibleNestedCommentBox = index;
+  }
+
+  public onDrawerClose(): void {
+    this.$emit('toggleDrawer', false)
+  }
+
+  public writeComment() {
+    const nComment: IComment = {
+      content: this.commentInput,
+      blogId: this.$props.blogId,
+      parentId: '',
+      repliedTo: null
+    }
+    const token = localStorage.getItem('token');
+    newComment(nComment, token!).then(async (res) => await this.getComments()).catch(err => this.$message.error('can not comment'))
+    this.commentInput = ''
+  }
+
+  private async getComments() {
+    const token = localStorage.getItem('token');
+    const res: any = await queryComments(this.$props.blogId, token!)
+    if (res.code === 200) {
+      this.comments = res.result
+    } else {
+      this.$message.error('Can not get comments');
+    }
+  }
+
+  public async mounted() {
+    await this.getComments()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.link-btn {
+  color: #909399;
+}
+.comment-container {
+  .comment-header {
+    padding: 0 10px;
+  }
+  .comment-input-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    .input {
+      flex: 1;
+      & /deep/ .el-input__inner {
+        border-radius: 0px !important;
+      }
+    }
+  }
+
+  .diviver {
+    display: block;
+    height: 1px;
+    width: inherit;
+    margin: 24px 24px;
+    background-color: #dcdfe6;
+    position: relative;
+  }
+  .childComment {
+    margin-left: 23px;
+  }
+}
+</style>
diff --git a/src/components/comments/components/CommentItem.vue b/src/components/comments/components/CommentItem.vue
new file mode 100644
index 0000000..5077472
--- /dev/null
+++ b/src/components/comments/components/CommentItem.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="comment-item">
+    <div class="comment-item-header">
+      <el-avatar
+        shape="square"
+        size="small"
+        class="comment-item-avatar"
+      >{{comment.commentedBy.name.charAt(0).toUpperCase()}}</el-avatar>
+      <div class="whoAndWhen">
+        <span class="who">{{comment.commentedBy.name}}</span>
+        <span class="when">{{format(comment.commentedDate)}}</span>
+      </div>
+    </div>
+    <div class="comment-content">
+      <p class="content">{{comment.content}}</p>
+      <div>
+        <el-button type="text" class="link-btn" @click="showNestedCommentBox">评论</el-button>
+        <div class="comment-tools">
+          <el-input
+            v-if="visibleNestedCommentBox === idx"
+            size="medium"
+            type="textarea"
+            autosize
+            class="input"
+            placeholder="comment"
+            v-model="inputComment"
+          />
+          <el-button
+            @click="writeComment"
+            v-if="visibleNestedCommentBox === idx"
+            size="small"
+            style="margin:0 10px; max-height: 33px"
+          >Comment</el-button>
+        </div>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { format } from '@/utils/formatTime';
+
+import { newComment, IComment } from '@/api/comments';
+
+@Component({
+  name: 'CommentItem',
+  props: {
+    idx: String,
+    comment: Object,
+    showNestedCommentBox: Function,
+    visibleNestedCommentBox: String
+  }
+})
+export default class CommentItem extends Vue {
+  public inputComment: string = '';
+
+  public async writeComment() {
+    const comment = this.$props.comment;
+    const nComment: IComment = {
+      blogId: comment.blogId,
+      parentId: comment._id,
+      repliedTo: comment.commentedBy,
+      content: this.inputComment
+    }
+    const token = localStorage.getItem('token');
+    const res = await newComment(nComment, token!).then(res => res).catch(err => err)
+  }
+
+  private format(time: string) {
+    return format(time)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.comment-item {
+  padding: 5px 10px;
+  .comment-item-header {
+    display: flex;
+    align-items: flex-start;
+    .comment-item-avatar {
+      font-size: 12px;
+      border-radius: 3px;
+    }
+    .whoAndWhen {
+      padding-left: 5px;
+      .who {
+        font-size: 20px;
+        font-weight: bold;
+      }
+      .when {
+        margin-left: 10px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+      }
+    }
+  }
+  .comment-content {
+    font-size: 18px;
+    .content {
+      margin-top: 5px;
+      font-size: 16px;
+      margin-left: 33px;
+      margin-bottom: 5px;
+    }
+    .link-btn {
+      font-size: 14px;
+      margin-left: 33px;
+      margin-bottom: 5px;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: normal;
+      & :hover {
+        font-weight: 900;
+      }
+    }
+    & /deep/ .el-button--text {
+      color: '#909399';
+      padding: 0;
+    }
+    .comment-tools {
+      display: flex;
+      justify-content: space-between;
+      .input {
+        margin-left: 33px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/createBlog.vue b/src/components/createBlog.vue
index 95c3e58..4a0ba52 100644
--- a/src/components/createBlog.vue
+++ b/src/components/createBlog.vue
@@ -8,104 +8,34 @@
     :lock-scroll="true"
     :modal-append-to-body="false"
   >
-    <el-form
-      ref="blogForm"
-      :model="form"
-      :inline="true"
-      size="mini"
-      :rules="formRules"
-    >
-      <el-form-item
-        label="博客主题"
-        prop="title"
-      >
-        <el-input
-          v-model="form.title"
-          autocomplete="off"
-        ></el-input>
+    <el-form ref="blogForm" :model="form" :inline="true" size="mini" :rules="formRules">
+      <el-form-item label="博客主题" prop="title">
+        <el-input v-model="form.title" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item
-        label="博客标签"
-        style="margin-left: 10px"
-      >
+      <el-form-item label="博客标签" style="margin-left: 10px">
         <div class="tagInput">
-          <el-input
-            v-model="form.tag"
-            autocomplete="off"
-          ></el-input>
-          <el-button
-            class="addTagBtn"
-            @click="addTag"
-          >添加</el-button>
+          <el-input v-model="form.tag" autocomplete="off"></el-input>
+          <el-button class="addTagBtn" @click="addTag">添加</el-button>
         </div>
         <div class="tagsBox">
-          <el-tag
-            size="mini"
-            v-for="(value, index) in tags"
-            :key="index"
-          >{{ value }}</el-tag>
+          <el-tag size="mini" v-for="(value, index) in tags" :key="index">{{ value }}</el-tag>
         </div>
       </el-form-item>
-      <el-form-item
-        label="博客种类"
-        prop="cat"
-      >
-        <el-select
-          @change="onCatSelect"
-          filterable
-          allow-create
-          v-model="form.cat"
-          placeholder="请选一个博客种类"
-        >
-          <el-option
-            v-for="(value, index) in cats"
-            :key="index"
-            :label="value"
-            :value="value"
-          ></el-option>
+      <el-form-item label="博客种类" prop="cat">
+        <el-select @change="onCatSelect" filterable allow-create v-model="form.cat" placeholder="请选一个博客种类">
+          <el-option v-for="(value, index) in cats" :key="index" :label="value" :value="value"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item
-        label="媒体类型"
-        prop="media_type"
-      >
-        <el-select
-          @change="onMediaSelet"
-          filterable
-          v-model="form.media_type"
-          placeholder="选择博客媒体类型"
-        >
-          <el-option
-            key="1"
-            label="文章"
-            value="blog"
-          ></el-option>
-          <el-option
-            key="2"
-            label="图片"
-            value="image"
-          ></el-option>
-          <el-option
-            key="3"
-            label="音乐"
-            value="music"
-          ></el-option>
-          <el-option
-            key="4"
-            label="视频"
-            value="vedio"
-          ></el-option>
+      <el-form-item label="媒体类型" prop="media_type">
+        <el-select @change="onMediaSelet" filterable v-model="form.media_type" placeholder="选择博客媒体类型">
+          <el-option key="1" label="文章" value="blog" />
+          <el-option key="2" label="图片" value="image" />
+          <el-option key="3" label="音乐" value="music" />
+          <el-option key="4" label="视频" value="vedio" />
         </el-select>
       </el-form-item>
-      <el-form-item
-        label="媒体文件"
-        prop="mediaSources"
-        style="margin-left: 10px;display:block"
-      >
-        <el-button
-          type="primary"
-          @click="openFileInput"
-        >add</el-button>
+      <el-form-item label="媒体文件" prop="mediaSources" style="margin-left: 10px;display:block">
+        <el-button type="primary" @click="openFileInput">add</el-button>
         <div style="display:block">
           <el-tag
             class="url"
@@ -124,37 +54,26 @@
           @change="fileChange"
           v-show="false"
           multiple="multiple"
-          accept="image/jpg,image/jpeg, image/png, video/mp4, audio/*"
-        >
-        </input>
+          accept="image/jpg, image/jpeg, image/png, video/mp4, audio/*"
+        />
       </el-form-item>
     </el-form>
-    <div
-      slot="footer"
-      class="dialog-footer"
-    >
-      <el-button
-        size="mini"
-        @click="onCloseModal"
-      >取 消</el-button>
-      <el-button
-        size="mini"
-        type="primary"
-        @click="onCreateBlog"
-      >确 定</el-button>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="onCloseModal">取 消</el-button>
+      <el-button size="mini" type="primary" @click="onCreateBlog">确 定</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { getBlogCats } from '@/api/blog'
-import { uploadFiles } from '@/api/file'
+import { getBlogCats } from '@/api/blog';
+import { uploadFiles } from '@/api/file';
 export default {
   props: {
     showCreateModal: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data () {
     return {
@@ -170,13 +89,15 @@ export default {
       formRules: {
         title: [{ required: true, message: '请输入主题', trigger: 'change' }],
         cat: [{ required: true, message: '请选择种类', trigger: 'change' }],
-        media_type: [{ required: true, message: '请选择媒体类型', trigger: 'change' }],
-      },
-    }
+        media_type: [
+          { required: true, message: '请选择媒体类型', trigger: 'change' }
+        ]
+      }
+    };
   },
   methods: {
     onCloseModal () {
-      this.$emit('onCloseCreateModal')
+      this.$emit('onCloseCreateModal');
     },
     onCreateBlog () {
       const newBlog = {
@@ -185,59 +106,60 @@ export default {
         cat: this.form.cat,
         mediaType: this.form.media_type,
         mediaSources: this.form.mediaSources,
-        isTech: false,
-      }
+        isTech: false
+      };
       this.$refs.blogForm.validate((valid) => {
         if (valid) {
-          this.$emit('onCreateBlog', newBlog)
+          this.$emit('onCreateBlog', newBlog);
         } else {
           throw new Error('invalid');
         }
-      })
-      this.$refs.blogForm.resetFields()
-      this.tags = []
+      });
+      this.$refs.blogForm.resetFields();
+      this.tags = [];
     },
     addTag () {
       if (this.form.tag) {
-        this.tags.push(this.form.tag)
-        this.form.tag = ''
+        this.tags.push(this.form.tag);
+        this.form.tag = '';
       }
     },
     onCatSelect (val) {
-      this.form.cat = val
+      this.form.cat = val;
     },
     onMediaSelet (val) {
       this.form.media_type = val;
     },
 
     fileChange (e) {
-      uploadFiles(e.target.files, localStorage.token).then((res) => {
-        this.form.mediaSources.push(...res.fileUrls)
-      }).catch((err) => {
-        this.$message.error('Cannot upload files' + err.toString());
-      })
+      uploadFiles(e.target.files, localStorage.token)
+        .then((res) => {
+          this.form.mediaSources.push(...res.fileUrls);
+        })
+        .catch((err) => {
+          this.$message.error('Cannot upload files' + err.toString());
+        });
     },
     openFileInput () {
-      document.getElementById('fileInput').click()
+      document.getElementById('fileInput').click();
     },
     removeFile (url) {
       const index = this.form.mediaSources.indexOf(url);
-      this.form.mediaSources.splice(index, 1)
+      this.form.mediaSources.splice(index, 1);
     }
-
   },
   mounted () {
     this.$nextTick(() => {
       getBlogCats(localStorage.token)
         .then((res) => {
-          this.cats = res.data.result.cats
+          this.cats = res.data.result.cats;
         })
         .catch((err) => {
-          throw new Error('get blog info failed' + err)
-        })
-    })
-  },
-}
+          throw new Error('get blog info failed' + err);
+        });
+    });
+  }
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/header.vue b/src/components/header.vue
index da3007c..1f41cfb 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,44 +1,20 @@
 <template>
   <div class="main-header-container">
-    <div
-      class="header-left"
-      @click="goHome"
-    >
+    <div class="header-left" @click="goHome">
       <h2 class="main-font first-letter">A</h2>
       <h2 class="main-font">BOUT LIFE</h2>
     </div>
     <div class="header-right">
-      <el-dropdown
-        szie="mini"
-        @command="onCommandChange"
-        trigger="click"
-      >
-        <el-avatar size="medium">user</el-avatar>
+      <el-dropdown szie="mini" @command="onCommandChange" trigger="click">
+        <el-avatar size="medium">{{userInfo.user_name.charAt(0).toUpperCase()}}</el-avatar>
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-if="!isLogin" command="login">login</el-dropdown-item>
+          <el-dropdown-item v-if="isLogin" command="profile">profile</el-dropdown-item>
           <el-dropdown-item
-            v-if="!isLogin"
-            command="login"
-          >
-            login
-          </el-dropdown-item>
-          <el-dropdown-item
-            v-if="isLogin"
-            command="profile"
-          >
-            profile
-          </el-dropdown-item>
-          <el-dropdown-item
-            v-if="isLogin"
+            v-if="isLogin && userInfo.role === 0"
             command="write_blog"
-          >
-            {{this.$t('message.login.write_blog')}}
-          </el-dropdown-item>
-          <el-dropdown-item
-            v-if="isLogin"
-            command="logout"
-          >
-            logout
-          </el-dropdown-item>
+          >{{this.$t('message.login.write_blog')}}</el-dropdown-item>
+          <el-dropdown-item v-if="isLogin" command="logout">logout</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
diff --git a/src/components/loginModal.vue b/src/components/loginModal.vue
index 8bb2a5c..537f503 100644
--- a/src/components/loginModal.vue
+++ b/src/components/loginModal.vue
@@ -8,52 +8,49 @@
     :lock-scroll="true"
     :modal-append-to-body="false"
   >
-    <el-form
-      ref="loginModal"
-      @submit.native.prevent
-      :model="form"
-      :rules="rules"
-    >
-      <el-form-item
-        :label="$t('message.login.modalEmailLabel')"
-        prop="email"
-      >
-        <el-input
-          v-model="form.email"
-          autocomplete="off"
-        ></el-input>
-      </el-form-item>
-      <el-form-item
-        :label="$t('message.login.modalPwdLabel')"
-        prop="password"
-      >
-        <el-input
-          v-model="form.password"
-          type="password"
-          autocomplete="off"
-        ></el-input>
-      </el-form-item>
-    </el-form>
-    <div
-      slot="footer"
-      class="login-footer"
-    >
+    <el-tabs v-model="formTab" @tab-click="handleFormChange">
+      <el-tab-pane label="Login" name="login">
+        <el-form ref="loginModal" @submit.native.prevent :model="form" :rules="rules">
+          <el-form-item :label="$t('message.login.modalEmailLabel')" prop="email">
+            <el-input v-model="form.email" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('message.login.modalPwdLabel')" prop="password">
+            <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="Signup" name="signup">
+        <el-form ref="signupModal" @submit.native.prevent :model="signupForm" :rules="signupRules">
+          <el-form-item label="Name" prop="nickname">
+            <el-input v-model="signupForm.nickname" autocomplete="off" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('message.login.modalEmailLabel')" prop="email">
+            <el-input v-model="signupForm.email" autocomplete="off" type="email"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('message.login.modalPwdLabel')" prop="password">
+            <el-input v-model="signupForm.password" type="password" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="Confirm Password" prop="confirmPassword">
+            <el-input v-model="signupForm.confirmPassword" type="password" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="footer" class="login-footer">
       <el-button @click="closeModal">{{ $t('message.login.modalCancel') }}</el-button>
-      <el-button
-        :disabled="!canSubmit"
-        :loading="submiting"
-        @click="submitLogin"
-        type="primary"
-      >{{
+      <el-button :disabled="!canSubmit" :loading="submiting" @click="loginOrSignUp" type="primary">
+        {{
         $t('message.login.modalConfirm')
-      }}</el-button>
+        }}
+      </el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { login } from '../api/login'
+import { login, signup } from '../api/login'
 import { mapMutations } from 'vuex'
+
 export default {
   props: {
     show: {
@@ -83,11 +80,28 @@ export default {
   },
   data () {
     const $t = this.$t.bind(this)
+
+    const validateConfirmPwd = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.signupForm.password) {
+        callback(new Error('两次输入密码不一致'))
+      } else {
+        callback()
+      }
+    }
     return {
+      formTab: 'login',
       form: {
         email: '',
         password: '',
       },
+      signupForm: {
+        nickname: '',
+        email: '',
+        password: '',
+        confirmPassword: ''
+      },
       rules: {
         email: [
           {
@@ -98,6 +112,18 @@ export default {
         ],
         password: [{ required: true, message: '请输入密码', trigger: 'change' }],
       },
+      signupRules: {
+        nickname: [{ required: true, message: '请输入你的名字', trigger: 'change' }],
+        email: [
+          {
+            required: true,
+            message: $t('message.login.modalEmailInvalid'),
+            trigger: 'change',
+          },
+        ],
+        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
+        confirmPassword: [{ required: true, message: '请再次输入密码', trigger: 'change' }, { validator: validateConfirmPwd, trigger: 'blur' }],
+      },
       canSubmit: false,
       submiting: false,
     }
@@ -137,6 +163,52 @@ export default {
           this.submiting = false
         })
     },
+    loginOrSignUp () {
+      this.formTab === 'login' ? this.submitLogin() : this.submitSignUp()
+    },
+    submitSignUp () {
+      this.$refs['signupModal'].validate((valid) => {
+        if (valid) {
+          this.submiting = true;
+          const newUser = {
+            user_name: this.signupForm.nickname,
+            user_pwd: this.signupForm.password,
+            email: this.signupForm.email
+          }
+          signup(newUser).then((res) => {
+            if (res.code === 200) {
+              localStorage.setItem('user_name', res.result.user_name)
+              localStorage.setItem('token', res.result.token)
+              localStorage.setItem('role', res.result.role)
+              this.closeModal()
+              this.setLogin(true)
+              this.setUseInfo(res.result)
+              this.$message({
+                message: 'Signup successfully',
+                type: 'success',
+              })
+              this.$socket.connect()
+            } else {
+              this.$message({
+                message: 'Could not signup',
+                type: 'error',
+              })
+            }
+            this.submiting = false
+          }).catch((err) => {
+            this.$message({
+              message: 'Could not signup',
+              type: 'error',
+            })
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    handleFormChange (tab) {
+      this.formTab = tab.paneName
+    },
     ...mapMutations({
       setLogin: 'SET_LOGIN',
       setUseInfo: 'SET_USERINFO',
diff --git a/src/utils/element.ts b/src/utils/element.ts
index 04ba17b..9b6315b 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue from 'vue';
 import {
   Aside,
   Main,
@@ -27,33 +27,39 @@ import {
   Form,
   FormItem,
   Message,
-} from 'element-ui'
-Vue.use(Carousel)
-Vue.use(CarouselItem)
-Vue.use(Button)
-Vue.use(Timeline)
-Vue.use(TimelineItem)
-Vue.use(Card)
-Vue.use(Col)
-Vue.use(Row)
-Vue.use(Image)
-Vue.use(Tag)
-Vue.use(Container)
-Vue.use(Dropdown)
-Vue.use(Avatar)
-Vue.use(DropdownItem)
-Vue.use(DropdownMenu)
-Vue.use(Aside)
-Vue.use(Main)
-Vue.use(Progress)
-Vue.use(Select)
-Vue.use(Option)
-Vue.use(Pagination)
-Vue.use(Loading.directive)
-Vue.use(Dialog)
-Vue.use(Form)
-Vue.use(FormItem)
-Vue.use(Input)
+  Tabs,
+  TabPane,
+  Drawer,
+} from 'element-ui';
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Button);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Card);
+Vue.use(Col);
+Vue.use(Row);
+Vue.use(Image);
+Vue.use(Tag);
+Vue.use(Container);
+Vue.use(Dropdown);
+Vue.use(Avatar);
+Vue.use(DropdownItem);
+Vue.use(DropdownMenu);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Progress);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(Pagination);
+Vue.use(Loading.directive);
+Vue.use(Dialog);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Input);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Drawer);
 
-Vue.prototype.$loading = Loading.service
-Vue.prototype.$message = Message
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$message = Message;
diff --git a/tslint.json b/tslint.json
index 461d9af..638185f 100644
--- a/tslint.json
+++ b/tslint.json
@@ -15,6 +15,13 @@
     "trailing-comma": false,
     "semicolon": [false, "never"],
     "space-before-function-paren": false,
-    "variable-name": [true, "allow-snake-case", "allow-pascal-case"]
+    "variable-name": [true, "allow-snake-case", "allow-pascal-case"],
+    "max-line-length": [
+      true,
+      {
+        "limit": 160,
+        "ignore-pattern": "^import [^,]+ from |^export | implements"
+      }
+    ]
   }
 }