diff --git a/package.json b/package.json
index aaa0b052a6fa52151b70d3005160c9575ce27011..b36761cae8a1b512fcd7b553409184234d7dda91 100644
--- a/package.json
+++ b/package.json
@@ -9,44 +9,25 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "buefy": "^0.9.5",
+    "buefy": "^0.9.7",
     "bulma": "^0.9.2",
     "core-js": "^3.6.5",
     "darkreader": "^4.9.31",
+    "date-fns": "^2.21.1",
     "dayjs": "^1.10.4",
     "element-ui": "^2.15.1",
+    "font-awesome": "^4.7.0",
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
+    "vditor": "^3.8.5",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.24.4",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "@vue/cli-service": "^3.0.5",
     "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+  }
 }
diff --git a/src/App.vue b/src/App.vue
index d1909a0dbac02d64dcc64fb7b6eb625639ad0d67..549d659aa42059de4b7d4d8baa1a9c744049ae54 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,32 @@
 <template>
-<div>
+  <div>
     <div class="mb-5">
-        <Header></Header>
+      <Header></Header>
     </div>
-  <div id="app">
-    <div class="container">
-      <router-view />
+    <div id="app">
+      <div class="container">
+        <router-view />
+      </div>
     </div>
-  </div>
 
-  <div>
-    <Footer></Footer>
+    <div>
+      <Footer></Footer>
+    </div>
   </div>
-</div>
 </template>
 
 <script>
-import Header from "@/components/Layout/Header"
-import Footer from "@/components/Layout/Footer"
+import Header from "@/component/Layout/Header";
+import Footer from "@/component/Layout/Footer";
+import { getLang, setLang } from "@/util/auth"
 
-export default{
+export default {
   name: "App",
-  components: { Header,Footer },
+  components: { Header, Footer },
+  created() {
+    setLang(getLang())
+    this.$i18n.locale = getLang()
+  }
 };
 </script>
 
diff --git a/src/api/auth/auth.js b/src/api/auth/auth.js
index 4df175826d52eca3b0a134fb2410f20970176fe9..301ea5399f2947f69e1dbcf88db01bd8c3b7ca25 100644
--- a/src/api/auth/auth.js
+++ b/src/api/auth/auth.js
@@ -1,27 +1,20 @@
 import request from '@/util/request'
 
-// export function userRegister(userDTO) {
-//     return request({
-//         url: '/ums/user/register',
-//         method: 'post',
-//         data: userDTO
-//     })
-// }
-
-export function userRegister(RegisterDto) {
-    return request({
-        url: '/user/register',
-        method: 'post',
-        data : RegisterDto
-    })
+export function register(registerDto) {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    data: registerDto
+  })
 }
+
 export function login(loginDto) {
-    return request({
-      url: '/user/login',
-      method: 'post',
-      data : loginDto
-    })
-  }
+  return request({
+    url: '/user/login',
+    method: 'post',
+    data: loginDto
+  })
+}
 
 export function getUserInfo() {
   return request({
diff --git a/src/api/comment.js b/src/api/comment.js
new file mode 100644
index 0000000000000000000000000000000000000000..05f70f80f8085b2401d329687990dcf629b7aece
--- /dev/null
+++ b/src/api/comment.js
@@ -0,0 +1,19 @@
+import request from '@/util/request'
+
+export function fetchCommentByTopicId(topic_Id){
+    return request({
+        url: '/comment/get_comments',
+        methods: 'get',
+        params: {
+            topicid: topic_Id
+        }
+    })
+}
+
+export function pushComment(data){
+    return request({
+        url: '/comment/add_comment',
+        method: 'post',
+        data: data
+    })
+}
\ No newline at end of file
diff --git a/src/api/like.js b/src/api/like.js
new file mode 100644
index 0000000000000000000000000000000000000000..e611eec90dd06f9d14a33cb936e9ea3e26359c49
--- /dev/null
+++ b/src/api/like.js
@@ -0,0 +1,34 @@
+import request from '@/util/request'
+
+// 关注
+export function like(id) {
+  return request(({
+    url: `/post/like`,
+    method: 'get',
+    params: {
+        topic_id: id
+    }
+  }))
+}
+
+// 关注
+export function unLike(id) {
+  return request(({
+    url: `/post/unlike`,
+    method: 'get',
+    params: {
+        topic_id: id
+    }
+  }))
+}
+
+// 验证是否关注
+export function hasLiked(id) {
+  return request(({
+    url: `/post/hasliked`,
+    method: 'get',
+    params: {
+        topic_id: id
+    }
+  }))
+}
\ No newline at end of file
diff --git a/src/api/post.js b/src/api/post.js
index 0e6da9a2a98195d2c1b926d35b70252de759f134..1af27ffd9fe57a2c6584ece96598c85843df3b17 100644
--- a/src/api/post.js
+++ b/src/api/post.js
@@ -1,9 +1,50 @@
 import request from '@/util/request'
 
-export function getList(pageNo,size,tab){
+export function getList(pageNo, size, tab, userid) {
     return request(({
-        url:'/post/list',
-        method:'get',
-        params:{pageNo:pageNo,size:size,tab:tab}
+        url: '/post/list',
+        method: 'get',
+        params: {
+            pageNo: pageNo,
+            size: size,
+            tab: tab,
+            userid:userid
+        }
     }))
-}
\ No newline at end of file
+}
+
+export function createPost(post) {
+    return request({
+        url: '/post/create',
+        method: 'post',
+        data: post
+    })
+}
+
+export function deletePost(id) {
+    return request({
+        url: '/post/delete',
+        method: 'delete',
+        params: {
+            id: id
+        }
+    })
+}
+
+export function getPost(id) {
+    return request({
+        url: '/post',
+        method: 'get',
+        params: {
+            id: id
+        }
+    })
+}
+
+export function updatePost(post) {
+    return request({
+      url: '/post/update',
+      method: 'put',
+      data: post
+    })
+  }
\ No newline at end of file
diff --git a/src/api/tip.js b/src/api/tip.js
index 8a836006f9bdf682ec69a035bc5bc18907bb8f8f..fe381549ceed60bdc1ed05ce8dd2152514aa4fa5 100644
--- a/src/api/tip.js
+++ b/src/api/tip.js
@@ -1,8 +1,8 @@
 import request from '@/util/request'
 
-export function getTodayTip() {
+export function getTip(){
     return request({
-        url: '/tip/today',
+        url: '/tip/random',
         method: 'get'
     })
 }
\ No newline at end of file
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd9884f52c8e9b0d8ab7c298048a0d773a528eea
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,28 @@
+import request from '@/util/request'
+
+// 用户主页
+export function getInfoByName(username, page, size) {
+    return request({
+      url: '/user/' + username,
+      method: 'get',
+      params: {
+        pageNo: page,
+        size: size
+      }
+    })
+  }
+  // 用户主页
+  export function getInfo() {
+    return request({
+      url: '/user/info',
+      method: 'get'
+    })
+  }
+//更新
+export function update(user){
+    return request({
+        url: '/user/update',
+        method: 'post',
+        data: user
+    })
+}
\ No newline at end of file
diff --git a/src/assets/app.css b/src/assets/app.css
new file mode 100644
index 0000000000000000000000000000000000000000..eb0e3aca61063ad9dbb9973cd49193a7d6331be6
--- /dev/null
+++ b/src/assets/app.css
@@ -0,0 +1,190 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  background-color: #F0F8FF;
+  color: black;
+  width: 100%;
+  font-size: 14px;
+  letter-spacing: 0.03em;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
+    Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji,
+    Segoe UI Symbol, Android Emoji, EmojiSymbols;
+}
+
+/*背景图*/
+/*body {
+      background-image: url('./../assets/image/Leimu.png');
+      background-repeat:no-repeat;
+      background-position:center;
+  }*/
+
+@media (min-width: 768px) {
+  .container {
+    width: 760px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 980px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1080px;
+  }
+}
+
+/*滚动条*/
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  /**/
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(239, 239, 239);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #bfbfbf;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-corner {
+  background: #179a16;
+}
+
+.header {
+  position: fixed;
+  z-index: 89;
+  top: 0;
+  width: 100%;
+  min-width: 1032px;
+  background: #fff;
+  box-shadow: 0 1px 0px rgba(26, 26, 26, 0.1);
+  height: 53px;
+  font-size: 16px;
+}
+
+a {
+  color: #1d1d1d;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #f60;
+  text-decoration: none !important;
+}
+
+.shadow-1 {
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+    0 0 0 1px rgba(10, 10, 10, 0.02);
+}
+
+.navbar-dropdown {
+  font-size: 15px;
+}
+
+/*统一卡片样式*/
+.el-card {
+  /*border-radius: 3px !important;*/
+  margin-bottom: 16px;
+  /*border: none;*/
+}
+
+.my-card {
+  cursor: pointer;
+  transition: all 0.1s ease-in-out;
+  position: relative;
+  overflow: hidden;
+}
+
+.my-card:hover {
+  transform: scale(1.03);
+}
+
+::selection {
+  text-shadow: none;
+  background: rgba(67, 135, 244, 0.56);
+}
+
+/* 搜索框 */
+.search-bar input {
+  border: none;
+  box-shadow: none;
+}
+
+/*按钮居中*/
+.button-center {
+  display: block;
+  margin: 0 auto;
+}
+
+.ellipsis {
+  display: block;
+  display: -webkit-box;
+  margin: 0 auto;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.is-ellipsis-1 {
+  -webkit-line-clamp: 1;
+}
+
+.is-ellipsis-2 {
+  -webkit-line-clamp: 2;
+}
+
+.is-ellipsis-3 {
+  -webkit-line-clamp: 3;
+}
+
+.vditor {
+  border: 1px solid #DCDFE6 !important;
+  border-radius: 4px !important;
+}
+
+.vditor-reset {
+  font-size: 14px !important;
+}
+
+.like{
+  color: rgb(64, 158, 255);
+  background: rgb(205, 228, 255);
+  height: 30px;
+  width: 110px;
+  border-radius: 15px;
+  border:1px;
+  }
+
+.like:hover
+{
+  color: rgb(255, 255, 255);
+  background: rgb(64, 158, 255);
+}
+
+.liked{
+  color: rgb(255, 255, 255);
+  background: rgb(64, 158, 255);
+  height: 30px;
+  width: 110px;
+  border-radius: 15px;
+  border:1px;
+  }
+
+.liked:hover
+{
+  color: rgb(255, 255, 255);
+  background: rgb(0, 128, 255);
+}
\ No newline at end of file
diff --git a/src/assets/image/logo-2.png b/src/assets/image/logo-2.png
index f9f01a31bc1a5a7e5471472913661b59f43e2c41..c2e7bcd64593ac6cb9dc1ed484a5a4b9a6b4ea5c 100644
Binary files a/src/assets/image/logo-2.png and b/src/assets/image/logo-2.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
index f9f01a31bc1a5a7e5471472913661b59f43e2c41..c2e7bcd64593ac6cb9dc1ed484a5a4b9a6b4ea5c 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/BackTop/BackTop.vue b/src/component/BackTop.vue
similarity index 82%
rename from src/components/BackTop/BackTop.vue
rename to src/component/BackTop.vue
index 5ec176a8a9d9904fcdb8888df2139cdc0986214c..758b964f28a4dc7c86202c665e24892d1b3f2ba7 100644
--- a/src/components/BackTop/BackTop.vue
+++ b/src/component/BackTop.vue
@@ -1,7 +1,8 @@
 <template>
   <el-backtop :bottom="60" :right="60">
-    <div title="回到顶部"
-        style="{
+    <div
+      :title="$t('BackTop.title')"
+      style="
         height: 100%;
         width: 100%;
         background-color: #f2f5f6;
@@ -10,7 +11,7 @@
         text-align: center;
         line-height: 40px;
         color: #167df0;
-      }"
+      "
     >
       <i class="fa fa-arrow-up"></i>
     </div>
@@ -19,8 +20,8 @@
 
 <script>
 export default {
-  name: "BackTop"
-}
+  name: "BackTop",
+};
 </script>
 
 <style scoped>
diff --git a/src/component/Comment/Comment.vue b/src/component/Comment/Comment.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc0020ec49a2a9dc5d6871501f34892de2679443
--- /dev/null
+++ b/src/component/Comment/Comment.vue
@@ -0,0 +1,56 @@
+<template>
+    <section class="box comments">
+        <hr />
+        <h3 class="title is-5">{{$t('comment.title')}}</h3>
+        <comment-form :slug="slug" v-if="token" @loadComment="fetchComment"/>
+
+        <comment-item
+          v-for="comment in comments"
+          :key="`comment-${comment.id}`"
+          :comment="comment"
+        />
+    </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { fetchCommentByTopicId } from '@/api/comment'
+import CommentForm from './CommentForm'
+import CommentItem from './CommentItem'
+
+export default {
+    name: 'Comment',
+    components: {
+        CommentForm,
+        CommentItem
+    }, 
+    data() {
+        return {
+            comments: []
+        }
+    },
+    props: {
+        slug: {
+            type: String,
+            default: null
+        }
+    },
+    computed: {
+        ...mapGetters([
+            'token'
+        ])
+    },
+    async mounted () {
+        await this.fetchComment(this.slug)
+    },
+    methods: {
+        async fetchComment(topic_id){
+            console.log(topic_id)
+            fetchCommentByTopicId(topic_id).then(response => {
+                const { data } = response
+                this.comments = data
+            })
+        }
+    }
+}
+</script>
diff --git a/src/component/Comment/CommentForm.vue b/src/component/Comment/CommentForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c6712cc16f0ebacbc05837b27db9707419b0429
--- /dev/null
+++ b/src/component/Comment/CommentForm.vue
@@ -0,0 +1,77 @@
+<template>
+  <article class="media">
+    <div class="media-content">
+      <form @submit.prevent="onSubmit">
+        <b-field>
+          <b-input
+            v-model.lazy="commentText"
+            type="textarea"
+            maxlength="400"
+            :placeholder="$t('comment.placeholder')"
+            :disabled="isLoading"
+          ></b-input>
+        </b-field>
+        <nav class="level">
+          <div class="level-left">
+            <b-button
+              type="is-primary"
+              native-type="submit"
+              class="level-item"
+              :disabled="isLoading"
+            >
+              {{$t('comment.submit')}}
+            </b-button>
+          </div>
+        </nav>
+      </form>
+    </div>
+  </article>
+</template>
+
+<script>
+import { pushComment } from '@/api/comment'
+
+export default{
+    name: 'CommentForm',
+    data(){
+        return{
+            commentText: '',
+            isLoading: false
+        }
+    },
+    props:{
+        slug:{
+            type: String,
+            default: null
+        }
+    },
+    methods:{
+        async pushComment(){
+            pushComment(commentText).then(response =>{
+                const {data} = response
+                this.commentText = ''
+            })
+        },
+
+        async onSubmit(){
+            this.isLoading = true
+            try{
+                let postData = {}
+                console.log(this.commentText)
+                postData['content'] = this.commentText
+                postData['topic_id'] = this.slug
+                await pushComment(postData)
+                this.$emit('loadComment',this.slug)
+                this.$message.success(this.$t('comment.success'))
+            }catch(e){
+                this.$buefy.toast.open({
+                    message: this.$t('comment.failed', [e]),
+                    type: 'is-danger'
+                })
+            }finally{
+                this.isLoading = false
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/component/Comment/CommentItem.vue b/src/component/Comment/CommentItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30c693b0f042fe465bb6dc3b2c6a8bf79663f2b2
--- /dev/null
+++ b/src/component/Comment/CommentItem.vue
@@ -0,0 +1,33 @@
+<template>
+    <article class="media">
+        <figure class="media-left image is-48x48">
+            <img :src="`https://cn.gravatar.com/avatar/${comment.userId}?s=164&d=monsterid`">
+        </figure>
+        <div class="media-content">
+            <div class="content">
+                <p>
+                    <router-link :to="{name: 'user', params: { username: comment.username }}">
+                        <strong>{{ comment.username }}</strong>
+                    </router-link>
+                    <small class="m1-2" > {{ comment.createTime | date }}</small>
+                    <br />
+                    {{ comment.content }}
+                </p> 
+            </div>
+        </div>
+    </article>
+</template>
+
+<script>
+
+export default{
+    name: 'CommentItem',
+    props: {
+        comment: {
+            type: Object,
+            requried: true
+        }
+    }
+}
+</script>
+
diff --git a/src/components/Layout/Footer.vue b/src/component/Layout/Footer.vue
similarity index 58%
rename from src/components/Layout/Footer.vue
rename to src/component/Layout/Footer.vue
index 3444be266ee95d483cee14c414c1fb43bd320afd..6749fa133997ca8f43a6c33875125fd2db555a4a 100644
--- a/src/components/Layout/Footer.vue
+++ b/src/component/Layout/Footer.vue
@@ -2,15 +2,13 @@
   <footer class="footer has-text-grey-light has-background-grey-darker">
     <div class="container">
       <div class="">
-        <span>只属于西电人的智慧社区系统</span>
+        <span>{{ $t('Footer.slogan') }}</span>
 
         <span style="float: right">
-          <router-link :to="{path:'/admin/login'}">
-            管理员登录
-          </router-link>
+          <router-link :to="{ path: '/admin/login' }"> {{ $t('Footer.admin') }} </router-link>
           |
-          <a href="/?lang=zh_CN">中文</a> |
-          <a href="/?lang=en_US">English</a>
+          <a @click="toZh()">中文</a> |
+          <a @click="toEn()">English</a>
         </span>
       </div>
 
@@ -26,23 +24,34 @@
         </div>
       </div>
     </div>
-    <back-top></back-top>
+    <BackTop></BackTop>
   </footer>
 </template>
 
 <script>
-import BackTop from "@/components/BackTop/BackTop";
+import BackTop from "@/component/BackTop";
+import { setLang } from "@/util/auth"
 export default {
   name: "Footer",
   components: {
-    BackTop
+    BackTop,
   },
   data() {
     return {
-      title: "© " + new Date().getFullYear() + ' 崔梦航',
-      author: '崔梦航',
+      title: "© " + new Date().getFullYear() + " 崔梦航",
+      author: "崔梦航",
     };
   },
+  methods: {
+    toEn() {
+      setLang('en')
+      location.reload()
+    },
+    toZh() {
+      setLang('zh')
+      location.reload()
+    }
+  }
 };
 </script>
 
@@ -51,7 +60,7 @@ footer {
   margin-top: 120px;
   height: 150px;
 }
-footer a{
+footer a {
   color: #bfbfbf;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Layout/Header.vue b/src/component/Layout/Header.vue
similarity index 85%
rename from src/components/Layout/Header.vue
rename to src/component/Layout/Header.vue
index b5dcfd4813bb58fce27d65214a7f41bac7ed56f8..195037c2df4f144d69d5e8d8bd4c16452a01e439 100644
--- a/src/components/Layout/Header.vue
+++ b/src/component/Layout/Header.vue
@@ -6,7 +6,7 @@
     >
       <template slot="brand">
         <b-navbar-item tag="div">
-          <img :src="doubaoImg" alt="logo">
+          <img :src="Img" alt="logo">
         </b-navbar-item>
 
         <b-navbar-item
@@ -22,7 +22,7 @@
           tag="router-link"
           :to="{ path: '/' }"
         >
-          🌐 主页
+          🌐 {{ $t('Header.homePage') }}
         </b-navbar-item>
       </template>
 
@@ -32,8 +32,9 @@
             <b-input
               v-model="searchKey"
               class="s_input"
+              style="width: 250px;"
               width="80%"
-              placeholder="搜索帖子、标签和用户"
+              :placeholder="$t('Header.searchHint')"
               rounded
               clearable
               @keyup.enter.native="search()"
@@ -43,7 +44,7 @@
               <b-button
                 class="is-info"
                 @click="search()"
-              >检索
+              >{{ $t('Header.search') }}
               </b-button>
             </p>
           </b-field>
@@ -55,7 +56,7 @@
             passive-type="is-warning"
             type="is-dark"
           >
-            {{ darkMode ? "夜" : "日" }}
+            {{ darkMode ? $t('Header.night') : $t('Header.day') }}
           </b-switch>
         </b-navbar-item>
 
@@ -69,14 +70,14 @@
               tag="router-link"
               :to="{ path: '/register' }"
             >
-              注册
+              {{ $t('Header.signUp') }}
             </b-button>
             <b-button
               class="is-light"
               tag="router-link"
               :to="{ path: '/login' }"
             >
-              登录
+              {{ $t('Header.signIn') }}
             </b-button>
           </div>
         </b-navbar-item>
@@ -89,20 +90,20 @@
             tag="router-link"
             :to="{ path: `/member/${user.username}/home` }"
           >
-            🧘 个人中心
+            🧘 {{ $t('Header.personalCenter') }}
           </b-navbar-item>
           <hr class="dropdown-divider">
           <b-navbar-item
             tag="router-link"
             :to="{ path: `/member/${user.username}/setting` }"
           >
-            ⚙ 设置中心
+            ⚙ {{ $t('Header.settings') }}
           </b-navbar-item>
           <hr class="dropdown-divider">
           <b-navbar-item
             tag="a"
             @click="logout"
-          > 👋 退出登录
+          > 👋 {{ $t('Header.signOut') }}
           </b-navbar-item>
         </b-navbar-dropdown>
       </template>
@@ -119,7 +120,7 @@ export default {
   data() {
     return {
       logoUrl: require('@/assets/logo.png'),
-      doubaoImg: require('@/assets/image/logo-2.png'),
+      Img: require('@/assets/image/logo-2.png'),
       searchKey: '',
       darkMode: false
     }
@@ -150,7 +151,7 @@ export default {
   methods: {
     async logout() {
       this.$store.dispatch('user/logout').then(() => {
-        this.$message.info('退出登录成功')
+        this.$message.info(this.$t('Header.successOut'))
         setTimeout(() => {
           this.$router.push({ path: this.redirect || '/' })
         }, 500)
@@ -161,7 +162,7 @@ export default {
       if (this.searchKey.trim() === null || this.searchKey.trim() === '') {
         this.$message.info({
           showClose: true,
-          message: '请输入关键字搜索！',
+          message: this.$t('Header.blankSearch'),
           type: 'warning'
         })
         return false
diff --git a/src/component/Pagination.vue b/src/component/Pagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f4d64e053fb3f8bc0274dc9756374cd506321831
--- /dev/null
+++ b/src/component/Pagination.vue
@@ -0,0 +1,101 @@
+<template>
+  <div :class="{ hidden: hidden }" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import {scrollTo} from "@/util/scroll-to";
+export default {
+  name: "Pagination",
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [5, 10, 20, 30, 50];
+      },
+    },
+    layout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper",
+      // default: 'sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit("update:page", val);
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit("update:limit", val);
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit("pagination", { page: this.currentPage, limit: val });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit("pagination", { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pagination-container {
+  /* background: #fff; */
+  padding: 5px 0px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2f6e7682a9715de1ff4ed4203873a2f663e2e7ad
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+import messages from './lang'
+export default new VueI18n({
+  locale: 'zh',
+  messages
+})
\ No newline at end of file
diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a61f1994aa7a54546dc08c6a4f4f482ec634f20
--- /dev/null
+++ b/src/i18n/lang/en.js
@@ -0,0 +1,115 @@
+export default {
+  Header: {
+    homePage: 'Home',
+    searchHint: 'Search for post, tag or user',
+    search: 'Search',
+    day: 'Day',
+    night: 'Night',
+    signUp: 'Sign up',
+    signIn: 'Sign in',
+    personalCenter: 'Profile',
+    settings: 'Settings',
+    signOut: 'Sign out',
+    successOut: 'Successfully sign out!',
+    blankSearch: 'Please enter a keyword!'
+  },
+  Footer: {
+    slogan: 'An intelligent community system for XD people',
+    admin: 'Admin'
+  },
+  BackTop: {
+    title: 'Back to the top'
+  },
+  Login: {
+    signIn: 'Sign in',
+    account: 'Username',
+    password: 'Password',
+    remember: 'Remember',
+    reset: 'Reset',
+    blankAccount: 'Please enter your account',
+    errAccount: 'The length should be 2-15 characters',
+    blankPassword: 'Please enter your password',
+    errPassword: 'The length should be 6-20 characters',
+    successIn: 'Congratulations! Login successfully'
+  },
+  Register: {
+    newOne: 'New Account',
+    account: 'Username',
+    password: 'Password',
+    password2: 'Confirm password',
+    email: 'Email',
+    signUp: 'Sign up',
+    reset: 'Reset',
+    rePass: 'Please enter your password again',
+    matchPass: 'Two input password does not match!',
+    blankAccount: 'Please enter your account',
+    errAccount: 'The length should be 2-15 characters',
+    blankPassword: 'Please enter your password',
+    errPassword: 'The length should be 6-20 characters',
+    checkPassword: 'Please enter your password again',
+    blankEmail: 'Please enter your email address',
+    errEmail: 'Please enter the correct email address',
+    successUp: 'Account registration successful!',
+    failUp: 'Registration failed'
+  },
+  card: {
+    post: 'Post',
+    posting: 'Publish idea',
+    settled: 'Sign up',
+    signIn: 'Sign in',
+    changeBillboard: 'Change billboard',
+    changeSentence: 'Change daliy sentence',
+    promotion: 'Promotion',
+    detail: 'Not received related promotion!',
+    sentence: 'Daily sentence'
+  },
+  post: {
+    author: 'Author',
+    theme: 'Theme / Release theme',
+    theme2: 'Theme / Update theme',
+    enterTopic: 'Enter the topic',
+    enterTopic2: 'Enter the new topic',
+    enterTag: 'Please enter tags, limited to 15 characters and 3 tags',
+    post: 'Post',
+    reset: 'Reset',
+    blankTopic: 'Please enter the topic',
+    errTopic: 'The length should be 1-15 characters',
+    enterContent: 'Enter content here...',
+    hintContent: 'Content cannot be empty',
+    hintTag: 'Tags cannot be empty',
+    views: 'Views',
+    edit: 'Edit',
+    del: 'Delete',
+    update: 'Update',
+    latest: 'Latest topics',
+    release: 'Released',
+    view: 'Views',
+    hot: 'Hot Topics',
+    star: 'Favourites'
+  },
+  user: {
+    score: 'Score',
+    join: 'Join',
+    bio: 'Bio',
+    topics: 'Topics',
+    blankTopic: 'No topic',
+    settings: 'Settings',
+    info: 'Basic Info',
+    account: 'Username',
+    name: 'Nickname',
+    avatar: 'Avatar',
+    submit: 'Submit',
+    email: 'Email',
+    blankEmail: 'Please enter your email address',
+    errEmail: 'Please enter the correct email address',
+    phone: 'Phone',
+    success: 'Profile updated'
+  },
+  comment: {
+    title: 'Comment',
+    placeholder: 'Add a comment...',
+    submit: 'Submit',
+    success: 'Comment successfully',
+    failed: 'Cannot comment to this post, {0}'
+  }
+}
\ No newline at end of file
diff --git a/src/i18n/lang/index.js b/src/i18n/lang/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..05674323ddd6d1d40eb55b11d7f3b6260c33c580
--- /dev/null
+++ b/src/i18n/lang/index.js
@@ -0,0 +1,7 @@
+import zh from './zh'
+import en from './en'
+
+export default {
+  zh,
+  en
+}
\ No newline at end of file
diff --git a/src/i18n/lang/zh.js b/src/i18n/lang/zh.js
new file mode 100644
index 0000000000000000000000000000000000000000..9051eae4bcb85afba8e0de92028e3d9be0337396
--- /dev/null
+++ b/src/i18n/lang/zh.js
@@ -0,0 +1,115 @@
+export default {
+  Header: {
+    homePage: '主页',
+    searchHint: '搜索帖子、标签和用户',
+    search: '检索',
+    day: '日',
+    night: '夜',
+    signUp: '注册',
+    signIn: '登录',
+    personalCenter: '个人中心',
+    settings: '设置中心',
+    signOut: '退出登录',
+    successOut: '退出登录成功！',
+    blankSearch: '请输入关键字搜索！'
+  },
+  Footer: {
+    slogan: '只属于西电人的智慧社区系统',
+    admin: '管理员登录'
+  },
+  BackTop: {
+    title: '回到顶部'
+  },
+  Login: {
+    signIn: '登录',
+    account: '账号',
+    password: '密码',
+    remember: '记住',
+    reset: '重置',
+    blankAccount: '请输入账号',
+    errAccount: '长度在2-15字符',
+    blankPassword: '请输入密码',
+    errPassword: '长度在6到20个字符',
+    successIn: '恭喜你，登录成功'
+  },
+  Register: {
+    newOne: '新用户入驻',
+    account: '账号',
+    password: '密码',
+    password2: '确认密码',
+    email: '邮箱',
+    signUp: '立即注册',
+    reset: '重置',
+    rePass: '请再次输入密码',
+    matchPass: '两次输入密码不一致！',
+    blankAccount: '请输入账号',
+    errAccount: '长度在2-15字符',
+    blankPassword: '请输入密码',
+    errPassword: '长度在6到20个字符',
+    checkPassword: '请重新输入密码',
+    blankEmail: '请输入邮箱',
+    errEmail: '请输入正确邮箱',
+    successUp: '账号注册成功！',
+    failUp: '注册失败'
+  },
+  card: {
+    post: '发帖',
+    posting: '发表想法',
+    settled: '马上入驻',
+    signIn: '社区登入',
+    changeBillboard: '修改公告栏',
+    changeSentence: '修改每日一句',
+    promotion: '推广',
+    detail: '未收到有关推广！',
+    sentence: '每日一句'
+  },
+  post: {
+    author: '作者',
+    theme: '主题 / 发布主题',
+    theme2: '主题 / 更新主题',
+    enterTopic: '输入主题名称',
+    enterTopic2: '输入新的主题名称',
+    enterTag: '请输入主题标签，限制为15个字符和3个标签',
+    post: '发表帖子',
+    reset: '重置',
+    blankTopic: '请输入话题名称',
+    errTopic: '长度在1到25个字符之间',
+    enterContent: '此处输入内容...',
+    hintContent: '话题内容不能为空',
+    hintTag: '标签不能为空',
+    views: '查看',
+    edit: '编辑',
+    del: '删除',
+    update: '更新',
+    latest: '最新主题',
+    release: '发布于',
+    view: '浏览',
+    hot: '热门主题',
+    star: '收藏夹'
+  },
+  user: {
+    score: '积分',
+    join: '入驻',
+    bio: '简介',
+    topics: '话题',
+    blankTopic: '暂无话题',
+    settings: '个人设置',
+    info: '基础信息',
+    account: '账号',
+    name: '昵称',
+    avatar: '头像',
+    submit: '提交',
+    email: '电子邮箱',
+    blankEmail: '请输入邮箱地址',
+    errEmail: '请输入正确的邮箱地址',
+    phone: '手机号',
+    success: '信息修改成功'
+  },
+  comment: {
+    title: '评论',
+    placeholder: '此处输入评论...',
+    submit: '提交',
+    success: '评论成功',
+    failed: '无法在此帖发表评论, {0}'
+  }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9fa1621599ce56598c619af3b38fd62fa3bdefe3..3e242ff30d144e3979dd41e582cbe962a854794b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,21 +6,30 @@ import 'buefy/dist/buefy.css'
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import 'font-awesome/css/font-awesome.min.css'
 import '@/assets/app.css'
 
 import router from './router'
 import store from './store'
-
+import format from 'date-fns/format'
 import '@/permission'
 import relativeTime from 'dayjs/plugin/relativeTime'
 
 import 'dayjs/locale/zh-cn'
+import i18n from './i18n'
 const dayjs = require('dayjs');
+
 dayjs.extend(relativeTime)
+
 dayjs.locale('zh-cn')
 dayjs().locale('zh-cn').format()
+
 Vue.prototype.dayjs = dayjs;
 
+Vue.filter('date',(date) => {
+    return format(new Date(date), 'yyyy-MM-dd')
+})
+
 Vue.use(Buefy)
 Vue.use(ElementUI)
 
@@ -29,5 +38,7 @@ Vue.config.productionTip = false
 new Vue({
     router,
     store,
+    i18n,
     render: h => h(App),
-}).$mount('#app')
\ No newline at end of file
+}).$mount('#app')
+
diff --git a/src/permission.js b/src/permission.js
index 81cc69272f076d7f67a3e8fe41792426524bf4b4..590360c57cc9dcb23067a29671d2eda9c7a56f02 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,42 +1,38 @@
 import router from './router'
-// import store from './store'
+import store from './store'
 import getPageTitle from '@/util/get-page-title'
-
-import NProgress from 'nprogress' // progress bar
+import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-// import {getToken} from "@/util/auth"; // progress bar style
+import {getToken} from "@/util/auth";
 
-NProgress.configure({showSpinner: false}) // NProgress Configuration
+NProgress.configure({showSpinner: false})
 
 router.beforeEach(async (to, from, next) => {
-    // start progress bar
+
     NProgress.start()
-    // set page title
+
     document.title = getPageTitle(to.meta.title)
-    // determine whether the user has logged in
-    // const hasToken = getToken();
+
+    const hasToken = getToken();
 
     next()
-    // if (hasToken) {
-    //     if (to.path === '/login') {
-    //         // 登录，跳转首页
-    //         next({path: '/'})
-    //         NProgress.done()
-    //     } else {
-    //         // 获取用户信息
-    //         await store.dispatch('user/getInfo')
-    //         next()
-    //     }
-    // } else if (!to.meta.requireAuth)
-    // {
-    //     next()
-    // }
-    // else {
-    //     next('/login')
-    // }
+    if (hasToken) {
+        if (to.path === '/login') {
+            next({path: '/'})
+            NProgress.done()
+        } else {
+            await store.dispatch('user/getInfo')
+            next()
+        }
+    } else if (!to.meta.requireAuth)
+    {
+        next()
+    }
+    else {
+        next('/login')
+    }
 })
 
 router.afterEach(() => {
-    // finish progress bar
     NProgress.done()
 })
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 736f45a0b8ea10bbf341b160b8c754ccd5883d27..52c5cb26870bda6a6cdc65bfca254ac416394651 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,140 +1,87 @@
-// import Vue from 'vue'
-// import VueRouter from 'vue-router'
-
-// Vue.use(VueRouter)
-
-// const routes = [{
-//     path: '/',
-//     name: 'Home',
-//     component: () =>
-//         import ('@/view/Home')
-// }]
-
-// const router = new VueRouter({ routes })
-
-// export default router
-
-
 import Vue from "vue";
 import VueRouter from "vue-router";
+import { getLang } from "@/util/auth";
 
 Vue.use(VueRouter);
 
-// const routes = [
-//   {
-//     path: "/",
-//     name: "Home",
-//     component: () => import("@/view/Home"),
-//   },
-//   {
-//     path: "/register",
-//     name: "register",
-//     component: () => import("@/view/auth/Register"),
-//     meta: { title: "注册" },
-//   },
-//   // 登录
-//   {
-//     name: "login",
-//     path: "/login",
-//     component: () => import("@/view/auth/Login"),
-//     meta: { title: "登录" },
-//   },
-//   // 发布
-//   {
-//     name: "post-create",
-//     path: "/post/create",
-//     //component: () => import("@/views/post/Create"),
-//     meta: { title: "信息发布", requireAuth: true },
-//   },
-//   // 编辑
-//   {
-//     name: 'topic-edit',
-//     path: '/topic/edit/:id',
-//     //component: () => import('@/views/post/Edit'),
-//     meta: {
-//       title: '编辑',
-//       requireAuth: true
-//     }
-//   },
-//   // 详情
-//   {
-//     name: "post-detail",
-//     path: "/post/:id",
-//     //component: () => import("@/views/post/Detail"),
-//     meta: { title: "详情" },
-//   },
-//   {
-//     name: 'tag',
-//     path: '/tag/:name',
-//     //component: () => import('@/views/tag/Tag'),
-//     meta: { title: '主题列表' }
-//   },
-//   // 检索
-//   {
-//     name: 'search',
-//     path: '/search',
-//     //component: () => import('@/views/Search'),
-//     meta: { title: '检索' }
-//   },
-//   // 用户主页
-//   {
-//     name: 'user',
-//     path: '/member/:username/home',
-//     //component: () => import('@/views/user/Profile'),
-//     meta: { title: '用户主页' }
-//   },
-//   // 用户设置
-//   {
-//     name: 'user-setting',
-//     path: '/member/:username/setting',
-//     //component: () => import('@/views/user/Setting'),
-//     meta: { title: '设置', requireAuth: true }
-//   },
-//   {
-//     path: "/404",
-//     name: "404",
-//     component: () => import("@/view/error/404"),
-//     meta: { title: "404-NotFound" },
-//   },
-//   {
-//     path: "*",
-//     redirect: "/404",
-//     hidden: true,
-//   },
-// ];
-
-const routes = [
+const routes = [{
+    path: '/',
+    name: 'Home',
+    component: () => import('@/view/Home')
+  },
   {
-      path: '/',
-      name: 'Home',
-      component: () =>
-          import ('@/view/Home')
+    path: '/register',
+    name: 'register',
+    component: () =>
+      import('@/view/auth/Register'),
+    meta: {
+      title: getLang() === 'zh' ? "注册" : 'Sign up'
+    }
   },
   {
-      path: '/register',
-      name: 'register',
-      component: () =>
-          import ('@/view/auth/Register'),
-      meta : {title : "注册"}
+    path: '/404',
+    name: '404',
+    component: () =>
+      import('@/view/error/404'),
+    meta: {
+      title: "404 not found"
+    }
   },
   {
-      path: '/404',
-      name: '404',
-      component: () =>
-          import ('@/view/error/404'),
-      meta : {title : "404 not found"}
+    path: '/login',
+    name: 'login',
+    component: () =>
+      import('@/view/auth/Login'),
+    meta: {
+      title: getLang() === 'zh' ? "登录" : 'Sign in'
+    }
   },
   {
-      path: '/login',
-      name: 'login',
-      component: () =>
-          import ('@/view/auth/Login'),
-      meta : {title : "登录"}
+    path: '/post/create',
+    name: 'post-create',
+    component: () => import('@/view/post/Create'),
+    meta: {
+      title: getLang() === 'zh' ? '发布帖子' : 'Create Post',
+      requireAuth: true
+    }
   },
   {
-      path: '*',
-      redirect: '/404',
-      hidden : true
+    path: "/post/:id",
+    name: "post-detail",
+    component: () => import('@/view/post/Detail'),
+  },
+  {
+    name: 'post-edit',
+    path: '/post/edit/:id',
+    component: () => import('@/view/post/Edit'),
+    meta: {
+      title: getLang() === 'zh' ? '编辑帖子' : 'Edit post',
+      requireAuth: true
+    }
+  },
+  {
+    path: '*',
+    redirect: '/404',
+    hidden: true
+  },
+  //用户主页
+  {
+    path: '/member/:username/home',
+    name: 'user',
+    component: () => import('@/view/user/Profile'),
+    meta: {
+      title: getLang() === 'zh' ? '用户主页' : 'Profile'
+    }
+  },
+  //用户设置
+  {
+    path: '/member/:username/setting',
+
+    name: 'user-setting',
+    component: () => import('@/view/user/Setting'),
+    meta: {
+      title: getLang() === 'zh' ? '设置' : 'Settings'
+    }
   }
 ]
 
@@ -147,4 +94,4 @@ const router = new VueRouter({
   routes,
 });
 
-export default router;
+export default router;
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index df4b170821b2c0b76732872ec906cf6fa1ccc672..6936f444f0e2cec5017182f0204cfe5010da5b69 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -2,4 +2,4 @@ const getters = {
     token: state => state.user.token,   // token
     user: state => state.user.user,     // 用户对象
   }
-  export default getters
\ No newline at end of file
+  export default getters
diff --git a/src/store/index.js b/src/store/index.js
index d1c87974afab44f21a7c3e440b423a65ac3a89a7..ec4b60e7b3f379c9f97dbaab78eaf4665b0126bd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
-import user from './modules/user'
+import user from './module/user'
 
 Vue.use(Vuex)
 
diff --git a/src/store/modules/user.js b/src/store/module/user.js
similarity index 71%
rename from src/store/modules/user.js
rename to src/store/module/user.js
index 42e60bbaf18a46dd881c472c945aae1915d54648..315f7f389e5854fa55ad37dff542d1ed5851fb31 100644
--- a/src/store/modules/user.js
+++ b/src/store/module/user.js
@@ -1,5 +1,13 @@
-import { getUserInfo, login, logout } from "@/api/auth/auth";
-import { getToken, setToken, removeToken } from "@/util/auth";
+import {
+  login,
+  getUserInfo,
+  logout
+} from "@/api/auth/auth";
+import {
+  getToken,
+  setToken,
+  removeToken
+} from "@/util/auth";
 
 const state = {
   token: getToken(), // token
@@ -16,31 +24,41 @@ const mutations = {
 };
 
 const actions = {
-  // 用户登录
-  login({ commit }, userInfo) {
+  login({
+    commit
+  }, userInfo) {
     console.log(userInfo);
-    const { name, pass, rememberMe } = userInfo;
+    const {
+      name,
+      password,
+    } = userInfo;
     return new Promise((resolve, reject) => {
-      login({ username: name.trim(), password: pass, rememberMe: rememberMe })
+      login({
+          name: name.trim(),
+          password: password
+        })
         .then((response) => {
-          const { data } = response;
-          commit("SET_TOKEN_STATE", data.token);
-          setToken(data.token);
-          resolve();
+          const {
+            data
+          } = response;
+          commit("SET_TOKEN_STATE", data);
+          setToken(data);
+          resolve(data);
         })
         .catch((error) => {
           reject(error);
         });
     });
   },
-
-  // 获取用户信息
-  getInfo({ commit }) {
+  getInfo({
+    commit
+  }) {
     return new Promise((resolve, reject) => {
       getUserInfo()
         .then((response) => {
-          const { data } = response;
-          //console.log(data)
+          const {
+            data
+          } = response;
           if (!data) {
             commit("SET_TOKEN_STATE", "");
             commit("SET_USER_STATE", "");
@@ -49,7 +67,7 @@ const actions = {
             reject("Verification failed, please Login again.");
           }
           commit("SET_USER_STATE", data);
-          resolve(data);
+          resolve();
         })
         .catch((error) => {
           reject(error);
@@ -57,7 +75,6 @@ const actions = {
     });
   },
 
-  // 注销
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       logout(state.token)
@@ -73,7 +90,7 @@ const actions = {
         });
     });
   },
-};
+}
 
 export default {
   namespaced: true,
diff --git a/src/util/auth.js b/src/util/auth.js
index bedb03179f3af2ee68aed5b0d616d73207f4b498..9cdcf432d5892e829f817f9f1f2e3e693e14326c 100644
--- a/src/util/auth.js
+++ b/src/util/auth.js
@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie'
 
 const uToken = 'u_token'
-const darkMode = 'dark_mode';
+const darkMode = 'dark_mode'
 
 // 获取Token
 export function getToken() {
@@ -28,4 +28,12 @@ export function setDarkMode(mode) {
 
 export function getDarkMode() {
     return !(undefined === Cookies.get(darkMode) || 'false' === Cookies.get(darkMode));
+}
+
+export function setLang(lang) {
+  return Cookies.set('language', lang, {expires: 365})
+}
+
+export function getLang() {
+  return ('undefined' === Cookies.get('language')) ? 'zh' : Cookies.get('language')
 }
\ No newline at end of file
diff --git a/src/util/get-page-title.js b/src/util/get-page-title.js
index b2463e9d1b0a01703e87614357f6ac7e4bd21ad3..5bebfdeb39878e9e67f3ada576c09ce642727fc4 100644
--- a/src/util/get-page-title.js
+++ b/src/util/get-page-title.js
@@ -1,4 +1,5 @@
-const title = "长安南论坛——西电智慧论坛"
+import { getLang } from "@/util/auth"
+const title = getLang() === 'zh' ? '长安南论坛——西电智慧论坛' : 'Chang\'an Nan Forum——XD Smart Forum'
 
 export default function getPageTitle(pageTitle){
     if(pageTitle){
diff --git a/src/util/scroll-to.js b/src/util/scroll-to.js
new file mode 100644
index 0000000000000000000000000000000000000000..331ef4762e5172acbdd17a4ab56ce83dfa847471
--- /dev/null
+++ b/src/util/scroll-to.js
@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+    t /= d / 2
+    if (t < 1) {
+      return c / 2 * t * t + b
+    }
+    t--
+    return -c / 2 * (t * (t - 2) - 1) + b
+  }
+  
+  // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+  var requestAnimFrame = (function() {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+  })()
+  
+  /**
+   * Because it's so fucking difficult to detect the scrolling element, just move them all
+   * @param {number} amount
+   */
+  function move(amount) {
+    document.documentElement.scrollTop = amount
+    document.body.parentNode.scrollTop = amount
+    document.body.scrollTop = amount
+  }
+  
+  function position() {
+    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+  }
+  
+  /**
+   * @param {number} to
+   * @param {number} duration
+   * @param {Function} callback
+   */
+  export function scrollTo(to, duration, callback) {
+    const start = position()
+    const change = to - start
+    const increment = 20
+    let currentTime = 0
+    duration = (typeof (duration) === 'undefined') ? 500 : duration
+    var animateScroll = function() {
+      // increment the time
+      currentTime += increment
+      // find the value with the quadratic in-out easing function
+      var val = Math.easeInOutQuad(currentTime, start, change, duration)
+      // move the document.body
+      move(val)
+      // do the animation unless its over
+      if (currentTime < duration) {
+        requestAnimFrame(animateScroll)
+      } else {
+        if (callback && typeof (callback) === 'function') {
+          // the animation is done so lets callback
+          callback()
+        }
+      }
+    }
+    animateScroll()
+  }
\ No newline at end of file
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c61c0a25aac09791c645179b314fe9d67079a27e..d061ad5b4fe629a11d3c45a8e43f5aec43cbdb01 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,46 +1,47 @@
 <template>
   <div>
-        <div class="box">
-            {{billboard.content}}
-        </div>
-      <div class="columns">
-        <div class="column is-three-quarters">
-            <TopicList></TopicList>
-        </div>
-        <div class="column">
-            <CardBar></CardBar>
-        </div>
+    <div class="box">
+      {{ billboard.content }}
+      <!-- <el-button type="primary" size="small">{{ $t('card.changeBillboard') }}</el-button> -->
+    </div>
+    <div class="columns">
+      <div class="column is-three-quarters">
+        <PostList></PostList>
       </div>
+      <div class="column">
+        <CardBar></CardBar>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import {getBillboard} from '@/api/billboard'
-import CardBar from "@/view/card/CardBar"
-import PostList from "@/view/post/Index"
+import { getBillboard } from "@/api/billboard";
+import CardBar from "@/view/card/CardBar";
+import PostList from "@/view/post/Index";
 
 export default {
-  name: 'Home',
-  components: {CardBar, TopicList:PostList},
+  name: "Home",
+  components: { CardBar, PostList },
   data() {
-      return {
-          billboard: {
-            content: ''
-          }
-      }
+    return {
+      billboard: {
+        content: "",
+      },
+    };
   },
   created() {
-    this.fetchBillboard()
+    this.fetchBillboard();
   },
   methods: {
     async fetchBillboard() {
       getBillboard().then((value) => {
-        const {data} = value
-        this.billboard = data
-      })
-    }
-  }
-}
+        const { data } = value;
+        this.billboard = data;
+      });
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/src/view/auth/Login.vue b/src/view/auth/Login.vue
index 03bc0349a9f8ad67646c11391410714d7fc44496..89acbf448eae1e905743d5dcc4f34cb523a73d22 100644
--- a/src/view/auth/Login.vue
+++ b/src/view/auth/Login.vue
@@ -3,7 +3,7 @@
     <div class="column is-half is-offset-one-quarter">
       <el-card shadow="never">
         <div slot="header" class="has-text-centered has-text-weight-bold">
-          登录
+          {{ $t('Login.signIn') }}
         </div>
         <div>
           <el-form
@@ -15,26 +15,26 @@
             label-width="100px"
             class="demo-ruleForm"
           >
-            <el-form-item label="账号" prop="name">
+            <el-form-item :label="$t('Login.account')" prop="name">
               <el-input v-model="ruleForm.name" />
             </el-form-item>
 
-            <el-form-item label="密码" prop="pass">
+            <el-form-item :label="$t('Login.password')" prop="password">
               <el-input
-                v-model="ruleForm.pass"
+                v-model="ruleForm.password"
                 type="password"
                 autocomplete="off"
               />
             </el-form-item>
-            <el-form-item label="记住" prop="delivery">
+            <el-form-item :label="$t('Login.remember')" prop="delivery">
               <el-switch v-model="ruleForm.rememberMe"></el-switch>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="submitForm('ruleForm')">
-                登录
+                {{ $t('Login.signIn') }}
               </el-button>
               <el-button type="primary" @click="reSetForm('ruleForm')">
-                重置
+                {{ $t('Login.reset') }}
               </el-button>
             </el-form-item>
           </el-form>
@@ -44,66 +44,58 @@
   </div>
 </template>
 
-<script>
-import { login } from "@/api/auth/auth";
+<script  type="text/javascript">
 export default {
   name: "Login",
   data() {
     return {
-      redirect : undefined,
+      redirect: undefined,
       loading: false,
       ruleForm: {
         name: "",
-        pass: ""
+        password: "",
       },
       rules: {
         name: [
-          { required: true, message: "请输入账号", trigger: "blur" },
+          { required: true, message: this.$t('Login.blankAccount'), trigger: "blur" },
           {
             min: 2,
             max: 15,
-            message: "长度在2-15字符",
-            trigger: blur,
+            message: this.$t('Login.errAccount'),
+            trigger: "blur",
           },
         ],
-        pass: [
-          { required: true, message: "请输入密码", trigger: "blur" },
+        password: [
+          { required: true, message: this.$t('Login.blankPassword'), trigger: "blur" },
           {
             min: 6,
             max: 20,
-            message: "长度在6到20个字符",
+            message: this.$t('Login.errPassword'),
             trigger: "blur",
           },
         ],
-        
       },
     };
   },
 
   methods: {
     submitForm(formName) {
-      //alert("yes!");
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.loading = true;
-          //alert(this.ruleForm.name);
-          login(this.ruleForm)
-            .then((value) => {
-              const { code, message } = value;
-              if (code === 200) {
-                this.$message({
-                  message: "登录成功！",
-                  type: "success"
-                });
-
-                setTimeout(() => {
-                  this.loading = false;
-                  this.$router.push({ path: this.redirect || "/" });
-                }, 0.1 * 1000);
-              } 
-              else {
-                this.$message.error(message);
-              }
+          this.$store
+            .dispatch("user/login", this.ruleForm)
+            .then(() => {
+              this.$message({
+                message: this.$t('Login.successIn'),
+                type: "success",
+                duration: 2000,
+              });
+              this.$store.dispatch("user/getInfo");
+              setTimeout(() => {
+                this.loading = false;
+                this.$router.push({ path: this.redirect || "/" });
+              }, 0.1 * 1000);
             })
             .catch(() => {
               this.loading = false;
diff --git a/src/view/auth/Register.vue b/src/view/auth/Register.vue
index 1da9c40a4043c5ddccbd0f01cee337fd83828e95..abaede62f9352042b37c40a2ee80c55df0cf1ae4 100644
--- a/src/view/auth/Register.vue
+++ b/src/view/auth/Register.vue
@@ -1,157 +1,157 @@
 <template>
-    <div class = "columns py-6">
-        <div class="column is-half is-offset-one-quarter">
-            <el-card shadow = "never">
-                <div slot ="header" class ="has-text-centered has-text-weight-bold">
-                    新用户入驻
-                </div>
-                <div>
-                    <el-form
-                        ref = 'ruleForm'
-                        v-loading = "loading"
-                        :model="ruleForm"
-                        status-icon
-                        :rules = "rules"
-                        label-width="100px"
-                        class = "demo-ruleForm"
-                    >
-                    <el-form-item label = "账号" prop = "name">
-                        <el-input v-model="ruleForm.name" />
-                    </el-form-item>
-                    
-                    <el-form-item label = "密码" prop = "pass">
-                        <el-input 
-                        v-model="ruleForm.pass"
-                        type = "password"
-                        autocomplete="off"
-                         />
-                    </el-form-item>
+  <div class="columns py-6">
+    <div class="column is-half is-offset-one-quarter">
+      <el-card shadow="never">
+        <div slot="header" class="has-text-centered has-text-weight-bold">
+          {{ $t('Register.newOne') }}
+        </div>
+        <div>
+          <el-form
+            ref="ruleForm"
+            v-loading="loading"
+            :model="ruleForm"
+            status-icon
+            :rules="rules"
+            :label-width="$i18n.locale === 'zh' ? '100px': '155px'"
+            class="demo-ruleForm"
+          >
+            <el-form-item :label="$t('Register.account')" prop="name">
+              <el-input v-model="ruleForm.name" />
+            </el-form-item>
+
+            <el-form-item :label="$t('Register.password')" prop="password">
+              <el-input
+                v-model="ruleForm.password"
+                type="password"
+                autocomplete="off"
+              />
+            </el-form-item>
 
-                     <el-form-item label = "确认密码" prop = "checkPass">
-                        <el-input 
-                        v-model="ruleForm.checkPass"
-                        type = "password"
-                        autocomplete="off"
-                         />
-                    </el-form-item>
+            <el-form-item :label="$t('Register.password2')" prop="checkPassword">
+              <el-input
+                v-model="ruleForm.checkPassword"
+                type="password"
+                autocomplete="off"
+              />
+            </el-form-item>
 
-                     <el-form-item label = "邮箱" prop = "email">
-                        <el-input 
-                        v-model="ruleForm.email"
-                        autocomplete="off"
-                         />
-                    </el-form-item>
+            <el-form-item :label="$t('Register.email')" prop="email">
+              <el-input v-model="ruleForm.email" autocomplete="off" />
+            </el-form-item>
 
-                    <el-form-item >
-                        <el-button type = "primary" @click="submitForm('ruleForm')">
-                            立即注册
-                        </el-button>
-                        <el-button type = "primary" @click="reSetForm('ruleForm')">
-                            重置
-                        </el-button>
-                    </el-form-item>
-                    </el-form>
-                </div>
-            </el-card>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')">
+                {{ $t('Register.signUp') }}
+              </el-button>
+              <el-button type="primary" @click="reSetForm('ruleForm')">
+                {{ $t('Register.reset') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
         </div>
+      </el-card>
     </div>
+  </div>
 </template>
 
 <script>
-import { userRegister} from '@/api/auth/auth'
+import { register } from "@/api/auth/auth";
 export default {
   name: "Register",
   data() {
-    const validatePass = (rule,value,callback) => {
-        if (value == ''){
-            callback(new Error("请再次输入密码"));
-        }else if(value != this.ruleForm.pass){
-            callback(new Error("两次输入密码不一致！"));
-        }else {
-            callback();
-        }
-    }
-        return {
-            loading: false,
-            ruleForm:{
-                name: "",
-                pass: "",
-                checkPass : "",
-                email: ""
-            },
-            rules:{
-                name:[
-                {required : true ,message : '请输入账号' , trigger : 'blur'},
-                {
-                    min:2,
-                    max:10,
-                    message:"长度在2-15字符",
-                    trigger:blur
-                }
-                ],
-                pass:[
-                    {required:true,message:'请输入密码',trigger : "blur"},
-                    {
-                        min:6,
-                        max:20,
-                        message:"长度在6到20个字符",
-                        trigger:"blur"
-                    }
-                ],
-                checkPass:[
-                    {required :true,message :"请重新输入密码",trigger:'blur'},
-                    {
-                        validator:validatePass,trigger:'blur'
-                    }
-                ],
-                email:[
-                    {required :true,message :"请输入邮箱",trigger:'blur'},
-                    {
-                        type : "email",
-                        message : "请输入正确邮箱",
-                        trigger : [ 'blur ','change']
-                    }
-                ]
-            }
-        }
-    
+    const validatePass = (rule, value, callback) => {
+      if (value == "") {
+        callback(new Error(this.$t('Register.rePass')));
+      } else if (value != this.ruleForm.password) {
+        callback(new Error(this.$t('Register.matchPass')));
+      } else {
+        callback();
+      }
+    };
+    return {
+      loading: false,
+      ruleForm: {
+        name: "",
+        password: "",
+        checkPassword: "",
+        email: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('Register.blankAccount'), trigger: "blur" },
+          {
+            min: 2,
+            max: 10,
+            message: this.$t('Register.errAccount'),
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: this.$t('Register.blankPassword'), trigger: "blur" },
+          {
+            min: 6,
+            max: 20,
+            message: this.$t('Register.errPassword'),
+            trigger: "blur",
+          },
+        ],
+        checkPassword: [
+          { required: true, message: this.$t('Register.checkPassword'), trigger: "blur" },
+          {
+            validator: validatePass,
+            trigger: "blur",
+          },
+        ],
+        email: [
+          { required: true, message: this.$t('Register.blankEmail'), trigger: "blur" },
+          {
+            type: "email",
+            message: this.$t('Register.errEmail'),
+            trigger: ["blur", "change"],
+          },
+        ],
+      },
+    };
   },
 
   methods: {
     submitForm(formName) {
-      //alert("yes!");
-      this.$refs[formName].validate((valid) =>{
-          if(valid){
-              this.loading = true;
-              //alert(this.ruleForm.name);
-              userRegister(this.ruleForm).then((value) =>{
-                  const {code,message} = value;
-                  if(code === 200){
-                      this.$message({
-                          message : "账号注册成功！",
-                          type : 'success'
-                      })
-                      setTimeout(()=>{
-                          this.loading = false;
-                          this.$router.push({path : this.redirect || '/login'})
-                      },0.1*1000)
-                  }else {
-                      this.$message.error('注册失败' + message)
-                  }
-              }).catch(()=>{
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          register(this.ruleForm)
+            .then((value) => {
+              const { code, message } = value;
+              if (code === 200) {
+                this.$message({
+                  message: this.$t('Register.successUp'),
+                  type: "success",
+                });
+                setTimeout(() => {
                   this.loading = false;
-              })
-          }else{
-              return false;
-          }
-      })
+                  this.$router.push({ path: this.redirect || "/login" });
+                }, 0.1 * 1000);
+              } else {
+                this.$message.error(this.$t('Register.failUp') + message);
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    reSetForm(formName) {
+      this.$refs[formName].resetFields();
     },
-    reSetForm(formName){
-        this.$refs[formName].resetFields();
-    }
   },
 };
 </script>
 
 <style>
+el-card {
+  width: 200px;
+}
 </style>
\ No newline at end of file
diff --git a/src/view/card/LoginWelcome.vue b/src/view/card/LoginWelcome.vue
index 62ab83614bc80aba22e1b6f9e418f43750017045..a0b5c6d0d447e39d526eb8f4d13cc322092bfbc6 100644
--- a/src/view/card/LoginWelcome.vue
+++ b/src/view/card/LoginWelcome.vue
@@ -1,27 +1,27 @@
 <template>
   <el-card class="box-card" shadow="never">
     <div slot="header">
-      <span>💐 发帖</span>
+      <span>💐 {{ $t('card.post') }}</span>
     </div>
     <div v-if="token != null && token !== ''" class="has-text-centered">
-      <b-button type="is-danger" tag="router-link" :to="{path:'/post/create'}" outlined>✍ 发表想法</b-button>
+      <b-button type="is-danger" tag="router-link" :to="{path:''}" outlined>✍ {{ $t('card.posting') }}</b-button>
     </div>
 
     <div v-else class="has-text-centered">
-      <b-button type="is-primary" tag="router-link" :to="{path:'/register'}" outlined>马上入驻</b-button>
-      <b-button type="is-danger" tag="router-link" :to="{path:'/login'}" outlined class="ml-2"> 社区登入</b-button>
+      <b-button type="is-primary" tag="router-link" :to="{path:'/register'}" outlined>{{ $t('card.settled') }}</b-button>
+      <b-button type="is-danger" tag="router-link" :to="{path:'/login'}" outlined class="ml-2">{{ $t('card.signIn') }}</b-button>
     </div>
   </el-card>
 </template>
 
 <script>
-// import { mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 export default {
   name: 'LoginWelcome',
   computed: {
-    // ...mapGetters([
-    //   'token'
-    // ])
+    ...mapGetters([
+      'token'
+    ])
   }
 }
 </script>
diff --git a/src/view/card/Promotion.vue b/src/view/card/Promotion.vue
index 6d58c03e25fb29df3f76b80d92f97532d32e311e..a9e20d1a18c0c01e63af037080bf74031755fb2f 100644
--- a/src/view/card/Promotion.vue
+++ b/src/view/card/Promotion.vue
@@ -1,10 +1,10 @@
 <template>
     <el-card class="box-card" shadow="never">
         <div slot="header">
-            <span>🎁 推广</span>
+            <span>🎁 {{ $t('card.promotion') }}</span>
         </div>
         <div>
-          未收到有关推广！
+          {{ $t('card.detail') }}
         </div>
     </el-card>
 </template>
@@ -16,9 +16,6 @@ export default {
   data() {
       return {
       }
-  },
-  created() {
-
   },
   methods: {
 
diff --git a/src/view/card/Tip.vue b/src/view/card/Tip.vue
index ec8c434acc1ec83cd1a0b89968cd0374e2ad57e2..b549854b27bd07d84a433c1fefdd58449f26b4a3 100644
--- a/src/view/card/Tip.vue
+++ b/src/view/card/Tip.vue
@@ -1,7 +1,7 @@
 <template>
     <el-card class="box-card" shadow="never">
         <div slot="header">
-            <span>✨ 每日一句</span>
+            <span>✨ {{ $t('card.sentence') }}</span>
         </div>
         <div>
             <div class="has-text-left block">
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import {getTodayTip} from '@/api/tip'
+import {getTip} from '@/api/tip'
 export default {
   name: 'Tip',
   data() {
@@ -24,17 +24,17 @@ export default {
       }
   },
   created() {
-      this.fetchTodayTip()
+      this.fetchTip();
   },
   methods: {
-      fetchTodayTip() {
-          getTodayTip(this.type).then(response => {
-              const {data} = response
-              this.tip = data
-          })
-      }
-  }
-}
+      async fetchTip() {   
+        getTip().then((value) => {
+        const { data } = value;
+        this.tip = data;
+      });
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/src/view/error/404.vue b/src/view/error/404.vue
index 4b3783a66ebb2eed69528ee0546a02585ede939d..9bc4d56f53c9ac0d22b80ab464c6acf879987241 100644
--- a/src/view/error/404.vue
+++ b/src/view/error/404.vue
@@ -43,7 +43,7 @@ export default {
 
 <template>
   <div class = "columns mt-6">
-      <div class = "columns mt-6">
+      <div class = "columns mt-6" v-if="this.$i18n.locatle === 'zh'">
           <div class = "mt-6">
               <p class = "content"> UH OH!页面丢失了</p>
               <p class = "content subtitle mt-6"> 
@@ -51,6 +51,14 @@ export default {
               </p>
           </div>
       </div>
+      <div class = "columns mt-6" v-else>
+          <div class = "mt-6">
+              <p class = "content"> UH OH! The page is missing</p>
+              <p class = "content subtitle mt-6"> 
+                  The page you are looking for does not exist, {{ times }} seconds later, you will return to the home page!!
+              </p>
+          </div>
+      </div>
   </div>
 
 </template>
diff --git a/src/view/post/Author.vue b/src/view/post/Author.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5f3b7012af06f97ad8ac083bf9b690b4194707c
--- /dev/null
+++ b/src/view/post/Author.vue
@@ -0,0 +1,91 @@
+<template>
+  <section id="author">
+    <el-card class="" shadow="never">
+      <div slot="header">
+        <span class="has-text-weight-bold">{{ $t('post.author') }}</span>
+      </div>
+      <div class="has-text-centered">
+        <el-avatar :size="64" :src="`https://cn.gravatar.com/avatar/${user.id}?s=164&d=monsterid`" />
+        <p class="is-size-5 mb-5">
+          <router-link
+            :to="{
+              name: 'user',
+              params: { username: user.username },
+            }"
+          >
+            {{ user.alias }}
+            <span class="is-size-7 has-text-grey">{{
+              "@" + user.username
+            }}</span>
+          </router-link>
+        </p>
+        <!-- <div class="columns is-mobile">
+          <div class="column is-half">
+            <code>{{ user.topicCount }}</code>
+            <p>文章</p>
+          </div>
+          <div class="column is-half">
+            <code>{{ user.followerCount }}</code>
+            <p>粉丝</p>
+          </div>
+        </div> -->
+        <!-- <div>
+          <button
+            v-if="hasFollow"
+            class="button is-success button-center is-fullwidth"
+            @click="handleUnFollow(user.id)"
+          >
+            已关注
+          </button>
+
+          <button
+            v-else
+            class="button is-link button-center is-fullwidth"
+            @click="handleFollow(user.id)"
+          >
+            关注
+          </button>
+        </div> -->
+      </div>
+    </el-card>
+  </section>
+</template>
+
+<script>
+import { like, hasLiked, unLike } from '@/api/like'
+import { mapGetters } from "vuex";
+export default {
+  name: "Author",
+  props: {
+    user: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      hasLiked: false,
+    };
+  },
+  // mounted() {
+  //   this.fetchInfo()
+  // },
+  computed: {
+    ...mapGetters(["token"]),
+  },
+  methods: {
+  fetchInfo() {
+    if(this.token != null && this.token !== '')
+    {
+      hasLiked(this.user.id).then(value => {
+        const { data } = value
+        this.hasLiked = data.hasLiked
+      })
+    }
+  },
+  }
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/view/post/Create.vue b/src/view/post/Create.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2dbef2270d2e13b92b96def5a2a17bd021776827
--- /dev/null
+++ b/src/view/post/Create.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="columns">
+    <div class="column is-full">
+      <el-card class="box-card" shadow="never">
+        <div slot="header" class="clearfix">
+          <span><i class="fa fa fa-book"> {{ $t('post.theme') }} </i></span>
+        </div>
+        <div>
+          <el-form
+            ref="ruleForm"
+            :model="ruleForm"
+            :rules="rules"
+            class="demo-ruleForm"
+          >
+            <el-form-item prop="title">
+              <el-input v-model="ruleForm.title" :placeholder="$t('post.enterTopic')" />
+            </el-form-item>
+
+            <!--Markdown-->
+            <div id="vditor" />
+
+            <b-taginput
+              v-model="ruleForm.tags"
+              class="my-3"
+              maxlength="15"
+              maxtags="3"
+              ellipsis
+              :placeholder="$t('post.enterTag')"
+            />
+
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >{{ $t('post.post') }}</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">{{ $t('post.reset') }}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { createPost } from "@/api/post";
+import Vditor from "vditor";
+import "vditor/dist/index.css";
+
+export default {
+  name: "TopicPost",
+
+  data() {
+    return {
+      contentEditor: {},
+      ruleForm: {
+        title: "",
+        tags: [],
+        content: "",
+      },
+      rules: {
+        title: [
+          {
+            required: true,
+            message: this.$t('post.blankTopic'),
+            trigger: "blur",
+          },
+          {
+            min: 1,
+            max: 25,
+            message: this.$t('post.errTopic'),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.contentEditor = new Vditor("vditor", {
+      lang: this.$i18n.locale === 'zh' ? 'zh_CN': 'en_US',
+      height: 500,
+      placeholder: this.$t('post.enterContent'),
+      theme: "classic",
+      mode: "wysiwyg",
+      icon: "material",
+      tab: "    ",
+      typewriterMode: true,
+      toolbarConfig: {
+        pin: true,
+      },
+      counter: {
+        enable: true,
+        type: "markdown",
+      },
+      cache: {
+        enable: false,
+      },
+      preview: {
+        maxWidth: 10000,
+        delay: 0,
+        hljs: {
+          enable: true,
+          lineNumber: true,
+          style: "monokai",
+        }
+      },
+    });
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (
+            this.contentEditor.getValue().length === 1 ||
+            this.contentEditor.getValue == null ||
+            this.contentEditor.getValue() === ""
+          ) {
+            alert(this.$t('post.hintContent'));
+            return false;
+          }
+          if (this.ruleForm.tags == null || this.ruleForm.tags.length === 0) {
+            alert(this.$t('post.hintTag'));
+            return false;
+          }
+          this.ruleForm.content = this.contentEditor.getValue();
+          createPost(this.ruleForm).then((reponse) => {
+            const { data } = reponse;
+            setTimeout(() => {
+              this.$router.push({
+                name: "post-detail",
+                params: { id: data.id },
+              });
+            }, 800);
+          });
+        } else {
+          console.log("error in submit.");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.contentEditor.setValue("");
+      this.ruleForm.tags = "";
+    },
+  },
+};
+</script>
+
diff --git a/src/view/post/Detail.vue b/src/view/post/Detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..977d84d2df6effd9d8d9a8fce21852819c24a7f6
--- /dev/null
+++ b/src/view/post/Detail.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <Author v-if="flag" :user="topicUser" />
+    </div>
+    <!-- 文章 -->
+    <div class="column is-three-quarters">
+
+      <!--主题-->
+      <el-card class="box-card" shadow="never">
+        <div slot="header" class="has-text-centered">
+          <p class="is-size-5 has-text-weight-bold">{{ topic.title }}</p>
+          <div class="has-text-grey is-size-7 mt-3">
+            <span>
+              {{ dayjs(topic.createTime).format("YYYY/MM/DD HH:mm:ss") }}
+              <el-divider direction="vertical" />
+
+              <span
+                >{{ $t('post.author') }}：
+                <router-link
+                  :to="{
+                    name: 'user',
+                    params: { username: topicUser.username },
+                  }"
+                  >{{ topicUser.alias }}</router-link
+                >
+              </span>
+
+              <el-divider direction="vertical" />
+              <span>{{ $t('post.views') }}：{{ topic.view }}</span>
+            </span>
+          </div>
+        </div>
+
+        <!-- MarkDown-->
+        <div id="preview" />
+        <!-- <span>
+            <a @click="()=>{{item.Supports+=1};addLikeNum(item.Id)}">
+              <a-icon
+                type="like-o"
+                theme="twoTone"
+                :two-tone-color="hasExisted(item.Id)?'#d32':''"
+                style="margin-right:18px"
+                @click="addLikeNum(item.Id)"
+              />
+              {{item.Supports}}
+            </a>
+          </span> -->
+
+        <!--标签-->
+        <nav class="level has-text-grey is-size-7 mt-6">
+          <div class="level-left">
+            <p class="level-item">
+              <b-taglist>
+                <router-link
+                  v-for="(tag, index) in tags"
+                  :key="index"
+                  :to="{ name: 'tag', params: { name: tag.name } }"
+                >
+                  <b-tag type="is-info is-light mr-1">
+                    {{ "#" + tag.name }}
+                  </b-tag>
+                </router-link>
+              </b-taglist>
+            </p>
+          </div>
+
+          <!-- 点赞收藏功能 -->
+          <button class="like" v-show="!liked" @click="liking(topic.id)"><i class="fa fa-thumbs-o-up"> </i> 点赞并收藏</button>
+          <button class="liked" v-show="liked" @click="unliking(topic.id)"> 已收藏</button>
+
+          <div v-if="token && user.id === topicUser.id" class="level-right">
+            <router-link
+              class="level-item"
+              :to="{ name: 'post-edit', params: { id: topic.id } }"
+            >
+              <span class="tag">{{ $t('post.edit') }}</span>
+            </router-link>
+            <a class="level-item">
+              <span class="tag" @click="handleDelete(topic.id)">{{ $t('post.del') }}</span>
+            </a>
+          </div>
+        </nav>
+      </el-card>
+      <comment :slug="topic.id" /> 
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPost, deletePost } from "@/api/post";
+import { mapGetters } from "vuex";
+import Author from "@/view/post/Author";
+import Comment from '@/component/Comment/Comment';
+import Vditor from "vditor";
+import "vditor/dist/index.css";
+import { like, hasLiked, unLike } from '@/api/like'
+
+export default {
+  name: "TopicDetail",
+  components: { Author, Comment },
+  computed: {
+    ...mapGetters(["token", "user"]),
+  },
+  data() {
+    return {
+      liked:false,
+      clickedDate:[],
+      flag: false,
+      topic: {
+        content: "",
+        id: this.$route.params.id,
+      },
+      tags: [],
+      topicUser: {},
+    };
+  },
+  mounted() {
+    this.fetchTopic();
+    this.fetchInfo();
+  },
+  methods: {
+    renderMarkdown(md) {
+      Vditor.preview(document.getElementById("preview"), md, {
+        hljs: {
+          style: "github",
+        },
+      });
+    },
+    //初始化
+    async fetchTopic() {
+      getPost(this.$route.params.id).then((reponse) => {
+        const { data } = reponse;
+        document.title = data.topic.title;
+
+        this.topic = data.topic;
+        this.tags = data.tags;
+        this.topicUser = data.user;
+        this.comments = data.comments
+        this.renderMarkdown(this.topic.content);
+        this.flag = true;
+      });
+    },
+
+    fetchInfo() {
+    if(this.token != null && this.token !== '')
+    {
+      hasLiked(this.topic.id).then(value => {
+        console.log(value)
+        if(value.data!=null)this.liked = true;
+        else this.liked = false;
+      })
+    }
+  },
+    handleLike: function(id) {
+    if(this.token != null && this.token !== '')
+    {
+      like(id).then(response => {
+        const { message } = response
+        this.$message.success(message)
+        this.hasLiked = !this.hasLiked
+        this.user.followerCount = parseInt(this.user.followerCount) + 1
+      })
+    }
+    else{
+      this.$message.error('请先登录')
+      this.$router.push({ path: this.redirect || "/login" });
+    }
+  },
+    handleunLike: function(id) {
+      unLike(id).then(response => {
+        const { message } = response
+        this.$message.success(message)
+        this.hasLiked = !this.hasLiked
+        this.user.followerCount = parseInt(this.user.followerCount) - 1
+      })
+    },
+
+    handleDelete(id) {
+      deletePost(id).then((value) => {
+        const { code, message } = value;
+        alert(message);
+
+        if (code === 200) {
+          setTimeout(() => {
+            this.$router.push({
+              path: "/",
+            });
+          }, 500);
+        }
+      });
+    },
+    //like and star
+    liking(id){
+      this.liked = true;
+      this.handleLike(id);
+    },
+    //cancel like
+    unliking(id){
+      this.liked = false;
+      this.handleunLike(id);
+    }
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/view/post/Edit.vue b/src/view/post/Edit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c0e9fc6beb8b106379e0285abad38a8d713c2eff
--- /dev/null
+++ b/src/view/post/Edit.vue
@@ -0,0 +1,129 @@
+<template>
+  <section>
+    <div class="columns">
+      <div class="column is-full">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span><i class="fa fa fa-book"> {{ $t('post.theme2') }}</i></span>
+          </div>
+          <div>
+            <el-form :model="topic" ref="topic" class="demo-topic">
+              <el-form-item prop="title">
+                <el-input
+                  v-model="topic.title"
+                  :placeholder="$t('post.enterTopic2')"
+                ></el-input>
+              </el-form-item>
+
+              <!--Markdown-->
+              <div id="vditor"></div>
+
+              <b-taginput
+                v-model="tags"
+                class="my-3"
+                maxlength="15"
+                maxtags="3"
+                ellipsis
+                :placeholder="$t('post.enterTag')"
+              />
+              <el-form-item class="mt-3">
+                <el-button type="primary" @click="handleUpdate()"
+                  >{{ $t('post.update') }}
+                </el-button>
+                <el-button @click="resetForm('topic')">{{ $t('post.reset') }}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { getPost, updatePost } from "@/api/post";
+import Vditor from "vditor";
+import "vditor/dist/index.css";
+
+export default {
+  name: "TopicEdit",
+  components: {},
+  data() {
+    return {
+      topic: {},
+      tags: [],
+    };
+  },
+  created() {
+    this.fetchTopic();
+  },
+  methods: {
+    renderContent(content) {
+      this.contentEditor = new Vditor("vditor", {
+        lang: this.$i18n.locale === 'zh' ? 'zh_CN': 'en_US',
+        height: 500,
+        placeholder: this.$t('post.enterContent'),
+        theme: "classic",
+        mode: "wysiwyg",
+        icon: "material",
+        tab: "    ",
+        typewriterMode: true,
+        toolbarConfig: {
+          pin: true,
+        },
+        counter: {
+          enable: true,
+          type: "markdown",
+        },
+        cache: {
+          enable: false,
+        },
+        preview: {
+          maxWidth: 10000,
+          delay: 0,
+          hljs: {
+            enable: true,
+            lineNumber: true,
+            style: "monokai",
+          },
+        },
+        after: () => {
+          this.contentEditor.setValue(content);
+        },
+      });
+    },
+    fetchTopic() {
+      getPost(this.$route.params.id).then((value) => {
+        this.topic = value.data.topic;
+        this.tags = value.data.tags.map((tag) => tag.name);
+        this.renderContent(this.topic.content);
+      });
+    },
+    handleUpdate: function () {
+      this.topic.content = this.contentEditor.getValue();
+      updatePost(this.topic).then((response) => {
+        const { data } = response;
+        console.log(data);
+        setTimeout(() => {
+          this.$router.push({
+            name: "post-detail",
+            params: { id: data.id },
+          });
+        }, 800);
+      });
+    },
+
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.contentEditor.setValue("");
+      this.tags = "";
+    },
+  },
+};
+</script>
+
+<style>
+.vditor-reset pre > code {
+  font-size: 100%;
+}
+</style>
diff --git a/src/view/post/Index.vue b/src/view/post/Index.vue
index e4c8d4992bb5c3fb63ee2e795944d722ac90c5d2..be7cdfeb22a68d4c892a0244fdac91e724dfb442 100644
--- a/src/view/post/Index.vue
+++ b/src/view/post/Index.vue
@@ -1,45 +1,263 @@
 <template>
   <div>
     <el-card shadow="never">
-        <div slot="header" class='clearfix'>
-          <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="最新主题" name="latest">
-              <article v-for="(item,index) in articleList" :key="index" class="media">
-              </article> 
-            </el-tab-pane>
-          </el-tabs>
-        </div>
+      <div slot="header" class="clearfix">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane :label="$t('post.latest')" name="latest">
+            <article
+              v-for="(item, index) in articleList"
+              :key="index"
+              class="media"
+            >
+              <div class="media-left">
+                <figure class="image is-48x48">
+                  <img
+                    :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`"
+                    style="border-radius: 5px"
+                  />
+                </figure>
+              </div>
+              <div class="media-content">
+                <div class="">
+                  <p class="ellipsis is-ellipsis-1">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="item.title"
+                      placement="top"
+                    >
+                      <router-link
+                        :to="{ name: 'post-detail', params: { id: item.id } }"
+                      >
+                        <span class="is-size-6">{{ item.title }}</span>
+                      </router-link>
+                    </el-tooltip>
+                  </p>
+                </div>
+                <nav class="level has-text-grey is-mobile is-size-7 mt-2">
+                  <div class="level-left">
+                    <div class="level-left">
+                      <router-link
+                        class="level-item"
+                        :to="{ path: `/member/${item.username}/home` }"
+                      >
+                        {{ item.alias }}
+                      </router-link>
+
+                      <span class="mr-1">
+                        {{ $t('post.release') }}:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
+                      </span>
+
+                      <span
+                        v-for="(tag, index) in item.tags"
+                        :key="index"
+                        class="tag is-hidden-mobile is-success is-light mr-1"
+                      >
+                        <router-link
+                          :to="{ name: 'tag', params: { name: tag.name } }"
+                        >
+                          {{ "#" + tag.name }}
+                        </router-link>
+                      </span>
+
+                      <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
+                    </div>
+                  </div>
+                </nav>
+              </div>
+              <div class="media-right" />
+            </article>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('post.hot')" name="hot">
+            <article
+              v-for="(item, index) in articleList"
+              :key="index"
+              class="media"
+            >
+              <div class="media-left">
+                <figure class="image is-48x48">
+                  <img
+                    :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`"
+                    style="border-radius: 5px"
+                  />
+                </figure>
+              </div>
+              <div class="media-content">
+                <div class="">
+                  <p class="ellipsis is-ellipsis-1">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="item.title"
+                      placement="top"
+                    >
+                      <router-link
+                        :to="{ name: 'post-detail', params: { id: item.id } }"
+                      >
+                        <span class="is-size-6">{{ item.title }}</span>
+                      </router-link>
+                    </el-tooltip>
+                  </p>
+                </div>
+                <nav class="level has-text-grey is-mobile is-size-7 mt-2">
+                  <div class="level-left">
+                    <div class="level-left">
+                      <router-link
+                        class="level-item"
+                        :to="{ path: `/member/${item.username}/home` }"
+                      >
+                        {{ item.alias }}
+                      </router-link>
+
+                      <span class="mr-1">
+                        {{ $t('post.release') }}:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
+                      </span>
+
+                      <span
+                        v-for="(tag, index) in item.tags"
+                        :key="index"
+                        class="tag is-hidden-mobile is-success is-light mr-1"
+                      >
+                        <router-link
+                          :to="{ name: 'tag', params: { name: tag.name } }"
+                        >
+                          {{ "#" + tag.name }}
+                        </router-link>
+                      </span>
+
+                      <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
+                    </div>
+                  </div>
+                </nav>
+              </div>
+              <div class="media-right" />
+            </article>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('post.star')" name="star">
+            <article
+              v-for="(item, index) in articleList"
+              :key="index"
+              class="media"
+            >
+              <div class="media-left">
+                <figure class="image is-48x48">
+                  <img
+                    :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`"
+                    style="border-radius: 5px"
+                  />
+                </figure>
+              </div>
+              <div class="media-content">
+                <div class="">
+                  <p class="ellipsis is-ellipsis-1">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="item.title"
+                      placement="top"
+                    >
+                      <router-link
+                        :to="{ name: 'post-detail', params: { id: item.id } }"
+                      >
+                        <span class="is-size-6">{{ item.title }}</span>
+                      </router-link>
+                    </el-tooltip>
+                  </p>
+                </div>
+                <nav class="level has-text-grey is-mobile is-size-7 mt-2">
+                  <div class="level-left">
+                    <div class="level-left">
+                      <router-link
+                        class="level-item"
+                        :to="{ path: `/member/${item.username}/home` }"
+                      >
+                        {{ item.alias }}
+                      </router-link>
+
+                      <span class="mr-1">
+                        {{ $t('post.release') }}:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
+                      </span>
+
+                      <span
+                        v-for="(tag, index) in item.tags"
+                        :key="index"
+                        class="tag is-hidden-mobile is-success is-light mr-1"
+                      >
+                        <router-link
+                          :to="{ name: 'tag', params: { name: tag.name } }"
+                        >
+                          {{ "#" + tag.name }}
+                        </router-link>
+                      </span>
+
+                      <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
+                    </div>
+                  </div>
+                </nav>
+              </div>
+              <div class="media-right" />
+            </article>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <!--分页-->
+      <Pagination
+        v-show="page.total > 0"
+        :total="page.total"
+        :page.sync="page.current"
+        :limit.sync="page.size"
+        @pagination="init"
+      />
     </el-card>
   </div>
 </template>
 
+
 <script>
-import {getList} from '@/api/post'
+import { getList } from "@/api/post";
+
+import { mapGetters } from "vuex";
+import Pagination from "@/component/Pagination";
 
 export default {
-  name: 'TopicList',
+  name: "PostList",
+  components: { Pagination },
   data() {
-      return {
-        activeName: 'latest',
-        articleList: []
-      }
+    return {
+      activeName: "latest",
+      articleList: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+        tab: "latest",
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["user"]),
   },
   created() {
-    this.init(this.tab)
+    this.init(this.tab);
   },
   methods: {
-    init(tab){
-      getList(1,10,tab).then((response) => {
-        const {data} = response
-        this.articleList = data.records
-      })
+    init(tab) {
+      getList(this.page.current, this.page.size, tab, this.user.id).then((response) => {
+        const { data } = response;
+        this.page.current = data.current;
+        this.page.total = data.total;
+        this.page.size = data.size;
+        this.articleList = data.records;
+      });
+    },
+    handleClick(tab) {
+      this.page.current = 1;
+      this.init(tab.name);
     },
-    handleClick(tab){
-      this.init(tab.name)
-    }
-  }
-}
+  },
+};
 </script>
 
-<style>
+<style scoped>
 </style>
\ No newline at end of file
diff --git a/src/view/user/Profile.vue b/src/view/user/Profile.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe886a6e69a5082a32c03defd027c2b73802a24b
--- /dev/null
+++ b/src/view/user/Profile.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="member">
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <el-card shadow="never">
+          <div slot="header" class="has-text-centered">
+            <el-avatar :size="64" :src="`https://cn.gravatar.com/avatar/${topicUser.id}?s=164&d=monsterid`" />
+            <p class="mt-3">{{ topicUser.alias || topicUser.username }}</p>
+            
+          </div>
+          <div>
+            <p class="content">{{ $t('user.score') }}：<code>{{ topicUser.score }}</code></p>
+            
+            <p class="content">{{ $t('user.join') }}：{{ dayjs(topicUser.createTime).format("YYYY/MM/DD HH:MM:ss") }}</p>
+            
+            <p class="content">{{ $t('user.bio') }}：{{ topicUser.bio }}</p>
+            
+          </div>
+        </el-card>
+      </div>
+
+      <div class="column">
+        <!--用户发布的话题-->
+        <el-card class="box-card content" shadow="never">
+          <div slot="header" class="has-text-weight-bold">
+            <span>{{ $t('user.topics') }}</span>
+          </div>
+
+          <div v-if="topics.length===0">
+            {{ $t('user.blankTopic') }}
+          </div>
+
+          <div v-else class="topicUser-info">
+            <article v-for="(item, index) in topics" :key="index" class="media">
+              <div class="media-content">
+                <div class="content ellipsis is-ellipsis-1">
+                  <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                    <router-link :to="{ name: 'post-detail', params: { id: item.id } }">
+                      {{ item.title }}
+                    </router-link>
+                  </el-tooltip>
+                </div>
+                <nav class="level has-text-grey is-size-7">
+                  <div class="level-left">
+                    <span class="mr-1">
+                      {{ $t('post.release') }}:{{ dayjs(item.createTime).format("YYYY/MM/DD HH:mm:ss") }}
+                    </span>
+                  </div>
+                </nav>
+              </div>
+              <div v-if="token" class="media-right">
+                <div v-if="topicUser.username === user.username" class="level">
+                  <div class="level-item mr-1">
+                    <router-link :to="{name:'post-edit',params: {id:item.id}}">
+                      <span class="tag is-warning">{{ $t('post.edit') }}</span>
+                    </router-link>
+                  </div>
+                  <div class="level-item">
+                    <a @click="handleDelete(item.id)">
+                      <span class="tag is-danger">{{ $t('post.del') }}</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+
+          <!--分页-->
+          <pagination
+            v-show="page.total > 0"
+            class="mt-5"
+            :total="page.total"
+            :page.sync="page.current"
+            :limit.sync="page.size"
+            @pagination="fetchUserById"
+          />
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInfoByName } from '@/api/user'
+import pagination from '@/component/Pagination'
+import { mapGetters } from 'vuex'
+import { deletePost } from '@/api/post'
+export default {
+  name: 'Profile',
+  components: { pagination },
+  data() {
+    return {
+      topicUser: {},
+      topics: {},
+      page: {
+        current: 1,
+        size: 5,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['token', 'user'])
+  },
+  created() {
+    this.fetchUserById()
+  },
+  methods: {
+    fetchUserById() {
+      getInfoByName(this.$route.params.username, this.page.current, this.page.size).then((res) => {
+        const { data } = res
+        this.topicUser = data.user
+        this.page.current = data.topics.current
+        this.page.size = data.topics.size
+        this.page.total = data.topics.total
+        this.topics = data.topics.records
+      })
+    },
+    handleDelete(id) {
+      deletePost(id).then(value => {
+        const { code, message } = value
+        alert(message)
+        if (code === 200) {
+          setTimeout(() => {
+            this.$router.push({ path: '/' })
+          }, 500)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/user/Setting.vue b/src/view/user/Setting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dfa077a4a136b99e066cfaa0be9f66a4eb5d691c
--- /dev/null
+++ b/src/view/user/Setting.vue
@@ -0,0 +1,118 @@
+<template>
+  <section>
+    <el-card shadow="never">
+      <div slot="header">
+        {{ $t('user.settings') }}
+      </div>
+      <div class="columns">
+        <div class="column is-full">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane :label="$t('user.info')" name="first">
+              <el-form :label-position="labelPosition" label-width="100px" :model="user">
+                <el-form-item :label="$t('user.account')">
+                  <el-input v-model="user.username" disabled />
+                </el-form-item>
+                <el-form-item :label="$t('user.name')">
+                  <el-input v-model="user.alias" />
+                </el-form-item>
+                <el-form-item :label="$t('user.bio')">
+                  <el-input v-model="user.bio" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('ruleForm')">{{ $t('user.submit') }}</el-button>
+                  <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('user.avatar')" name="second">
+              <figure class="image is-48x48">
+                <img :src="`https://cn.gravatar.com/avatar/${this.user.id}?s=164&d=monsterid`">
+              </figure>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('user.email')" name="third">
+              <el-form ref="dynamicValidateForm" :model="user" label-width="100px" class="demo-dynamic">
+                <el-form-item
+                  prop="email"
+                  :label="$t('user.email')"
+                  :rules="[
+                    { required: true, message: this.$t('user.blankEmail'), trigger: 'blur' },
+                    { type: 'email', message: this.$t('user.errEmail'), trigger: ['blur', 'change'] }
+                  ]"
+                >
+                  <el-input v-model="user.email" />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('dynamicValidateForm')">{{ $t('user.submit') }}</el-button>
+                  <!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('user.phone')" name="fourth">
+              <el-form ref="dynamicValidateForm" :model="user" label-width="100px" class="demo-dynamic">
+                <el-form-item :label="$t('user.phone')">
+                  <el-input v-model="user.mobile" />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('dynamicValidateForm')">{{ $t('user.submit') }}</el-button>
+                  <!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </el-card>
+  </section>
+</template>
+
+<script>
+import {getInfo, update} from '@/api/user'
+export default {
+  name: 'Setting',
+  data() {
+    return {
+      activeName: 'first',
+      labelPosition: 'right',
+      user: {
+        id: '',
+        username: '',
+        alias: '',
+        bio: '',
+        email: '',
+        mobile: '',
+        avatar: ''
+      }
+    }
+  },
+  created() {
+    this.fetchInfo()
+  },
+  methods: {
+    fetchInfo() {
+      getInfo(this.$route.params.username).then(res => {
+        console.log(res)
+        const { data } = res
+        this.user = data
+      })
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    submitForm(formName) {
+      console.log(this.user)
+      update(this.user).then(res => {
+        this.$message.success(this.$t('user.success'))
+        this.fetchInfo()
+      })
+    }/* ,
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    } */
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file