diff --git a/README.md b/README.md
index 1112711..0af85ba 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ nebula（[ˈnebyələ]，n.星云）是一款现代化的知识社区项目，
 
 ## ⚡ 动机
 
-在 2019 年的某一天,受到 [Hugh](https://rymcu.com/user/RYMCU-J) 的邀请, 构建一个开源嵌入式知识学习交流平台。因此就有了 nebula 这个项目。 nebula
+在 2019 年的某一天,受到 [Hugh](https://rymcu.com/user/Hugh) 的邀请, 构建一个开源嵌入式知识学习交流平台。因此就有了 nebula 这个项目。 nebula
 在很多方面受到了 [Symphony](https://github.com/88250/symphony) 的启发,并尝试着在 [Symphony](https://github.com/88250/symphony)
 和 [B3log 思想](https://ld246.com/article/1546941897596) 的基础上进一步探索。
 
diff --git a/components/common/comment/main.vue b/components/common/comment/main.vue
index ef5ac4b..d96dc02 100644
--- a/components/common/comment/main.vue
+++ b/components/common/comment/main.vue
@@ -1,21 +1,21 @@
 <template>
   <el-row class="pt-5">
     <el-col>
-      <el-col v-if="user" style="margin-top: 1rem;">
-        <el-col :xs="2" :sm="1" :xl="1">
+      <el-col style="margin-top: 1rem;" v-if="user">
+        <el-col :sm="1" :xl="1" :xs="2">
           <el-avatar :src="avatar"></el-avatar>
         </el-col>
-        <el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;">
+        <el-col :sm="23" :xl="23" :xs="22" style="padding-left: 1rem;">
           <el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input>
         </el-col>
         <el-col>
           <el-drawer
-            :visible.sync="drawer"
             :direction="direction"
+            :visible.sync="drawer"
             size="50%">
             <el-col slot="title">
               <el-col>
-                <el-avatar v-show="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>
+                <el-avatar :src="commentAuthorAvatar" v-show="commentAuthorAvatar"></el-avatar>
                 <span class="text-default" style="padding-left: 1rem;">{{ commentTitle }}</span>
               </el-col>
             </el-col>
@@ -23,53 +23,53 @@
               <div id="contentEditor"></div>
             </el-col>
             <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">
-              <el-button type="primary" :loading="loading" @click="postComment" plain>发布</el-button>
+              <el-button :loading="loading" @click="postComment" plain type="primary">发布</el-button>
             </el-col>
           </el-drawer>
         </el-col>
       </el-col>
-      <el-col v-else class="text-center" style="margin-top: 1rem;">
-        <el-button type="primary" size="medium" @click="gotoLogin" plain>登录</el-button>
+      <el-col class="text-center" style="margin-top: 1rem;" v-else>
+        <el-button @click="gotoLogin" plain size="medium" type="primary">登录</el-button>
         后发布评论
       </el-col>
       <el-col>
-        <el-col v-for="comment in comment.data" :key="comment.idComment">
-          <el-card style="margin-top: 1rem;" :id="'comment-' + comment.idComment">
-            <el-col :xs="3" :sm="1" :xl="1">
-              <el-avatar v-show="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar>
-              <el-avatar v-show="!comment.commenter.userAvatarURL"
-                         src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
+        <el-col :key="comment.idComment" v-for="comment in comment.data">
+          <el-card :id="'comment-' + comment.idComment" style="margin-top: 1rem;">
+            <el-col :sm="1" :xl="1" :xs="3">
+              <el-avatar :src="comment.commenter.userAvatarURL" v-show="comment.commenter.userAvatarURL"></el-avatar>
+              <el-avatar src="https://static.rymcu.com/article/1578475481946.png"
+                         v-show="!comment.commenter.userAvatarURL"></el-avatar>
             </el-col>
-            <el-col :xs="21" :sm="23" :xl="23" style="padding-bottom: 10px;" v-if="comment.commentStatus === '0'">
+            <el-col :sm="23" :xl="23" :xs="21" style="padding-bottom: 10px;" v-if="comment.commentStatus === '0'">
               <el-col style="margin-left: 1rem;">
                 <el-col v-show="comment.commentOriginalCommentId">
                   <el-col :span="16">
-                    <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userAccount)" :underline="false"
-                             class="text-default">{{ comment.commenter.userNickname }}
+                    <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
+                             rel="nofollow">{{ comment.commenter.userNickname }}
                     </el-link>
                     <small class="text-default" style="margin: 0 0.2rem">回复了</small><span
                     style="font-weight: bold;"> {{ comment.commentOriginalAuthorNickname }}</span>
                   </el-col>
                   <el-col :span="8" class="text-right" style="padding-right: 1rem;">
-                    <el-link rel="nofollow" :underline="false" title="查看原评论"
-                             @click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)"><i
+                    <el-link :underline="false" @click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)" rel="nofollow"
+                             title="查看原评论"><i
                       class="el-icon-reading"></i> 查看原评论
                     </el-link>
-                    <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain"
-                            style="margin-left: 5px;">
+                    <el-tag effect="plain" size="mini" style="margin-left: 5px;"
+                            v-show="isAuthor(comment.commentAuthorId)">
                       作者
                     </el-tag>
                   </el-col>
                 </el-col>
                 <el-col v-show="!comment.commentOriginalCommentId">
                   <el-col :span="16">
-                    <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userAccount)" :underline="false"
-                             class="text-default">{{ comment.commenter.userNickname }}
+                    <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
+                             rel="nofollow">{{ comment.commenter.userNickname }}
                     </el-link>
                   </el-col>
                   <el-col :span="8" class="text-right" style="padding-right: 1rem;">
-                    <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain"
-                            style="margin-left: 5px;">
+                    <el-tag effect="plain" size="mini" style="margin-left: 5px;"
+                            v-show="isAuthor(comment.commentAuthorId)">
                       作者
                     </el-tag>
                   </el-col>
@@ -81,24 +81,24 @@
                 </el-col>
               </el-col>
               <el-col :span="16" style="padding-left: 1rem;">
-                <el-link rel="nofollow" :underline="false" class="text-default">{{ comment.timeAgo }}</el-link>
+                <el-link :underline="false" class="text-default" rel="nofollow">{{ comment.timeAgo }}</el-link>
               </el-col>
-              <el-col :span="8" v-if="user" class="text-right" style="margin-bottom: 0.5rem;">
-                <el-link rel="nofollow" :underline="false" title="评论" @click.native="replyComment(comment)"><i
+              <el-col :span="8" class="text-right" style="margin-bottom: 0.5rem;" v-if="user">
+                <el-link :underline="false" @click.native="replyComment(comment)" rel="nofollow" title="评论"><i
                   class="el-icon-s-comment"></i> 评论
                 </el-link>
               </el-col>
             </el-col>
-            <el-col :xs="21" :sm="23" :xl="23" style="padding-bottom: 10px;" v-else>
+            <el-col :sm="23" :xl="23" :xs="21" style="padding-bottom: 10px;" v-else>
               <el-col style="margin-left: 1rem;">
                 <el-col :span="16">
-                  <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userAccount)" :underline="false"
-                           class="text-default">{{ comment.commenter.userNickname }}
+                  <el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
+                           rel="nofollow">{{ comment.commenter.userNickname }}
                   </el-link>
                 </el-col>
                 <el-col :span="8" class="text-right" style="padding-right: 1rem;">
-                  <el-tag v-show="isAuthor(comment.commentAuthorId)" size="mini" effect="plain"
-                          style="margin-left: 5px;">
+                  <el-tag effect="plain" size="mini" style="margin-left: 5px;"
+                          v-show="isAuthor(comment.commentAuthorId)">
                     作者
                   </el-tag>
                 </el-col>
@@ -111,18 +111,18 @@
                 </el-col>
               </el-col>
               <el-col :span="16" style="padding-left: 1rem;">
-                <el-link rel="nofollow" :underline="false" class="text-default">{{ comment.timeAgo }}</el-link>
+                <el-link :underline="false" class="text-default" rel="nofollow">{{ comment.timeAgo }}</el-link>
               </el-col>
             </el-col>
           </el-card>
           <el-col :id="'original-' + comment.commentOriginalCommentId" style="background-color: #d9d9d9;padding-left: 1.5rem;
             margin-top: 0.3rem;border-radius: 0.5rem;cursor: pointer;display: none;">
-            <el-col v-show="comment.commentOriginalCommentId" :span="2">
+            <el-col :span="2" v-show="comment.commentOriginalCommentId">
               <p>
                 <span>{{ comment.commentOriginalAuthorNickname }} :</span>
               </p>
             </el-col>
-            <el-col v-show="comment.commentOriginalCommentId" :span="20">
+            <el-col :span="20" v-show="comment.commentOriginalCommentId">
               <div class="vditor-reset comment-content" v-html="comment.commentOriginalContent"></div>
             </el-col>
           </el-col>
@@ -133,330 +133,330 @@
 </template>
 
 <script>
-import Vue from 'vue';
-import {mapState} from 'vuex';
-import apiConfig from '~/config/api.config';
+  import Vue from 'vue';
+  import {mapState} from 'vuex';
+  import apiConfig from '~/config/api.config';
 
-export default {
-  name: "Comment",
-  props: {
-    fetching: {
-      type: Boolean,
-      default: false
-    },
-    user: {
-      type: Object,
-      default: false
-    },
-    authorId: {
-      type: Number,
-      default: false
-    },
-    avatar: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    postId: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    ...mapState({
-      comment: state => state.comment.data,
-      isFetchingComment: state => state.comment.fetching,
-      isPostingComment: state => state.comment.posting,
-      constants: state => state.global.constants,
-      language: state => state.global.language,
-      isMobile: state => state.global.isMobile
-    }),
-    isFetching() {
-      // 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
-      // 2. 宿主组件加载完成，如果自己还在请求，则列表呈加载状态
-      // 3. 自己已请求完，宿主组件还在加载，列表和 tool 都呈加载状态
-      return this.fetching || this.isFetchingComment
-    }
-  },
-  data() {
-    return {
-      tokenURL: {
-        URL: '',
-        linkToImageURL: '',
-        token: ''
+  export default {
+    name: "Comment",
+    props: {
+      fetching: {
+        type: Boolean,
+        default: false
       },
-      drawer: false,
-      direction: 'btt',
-      initEditor: false,
-      isShow: true,
-      loading: false,
-      commentOriginalCommentId: 0,
-      commentAuthorAvatar: '',
-      commentTitle: ''
-    }
-  },
-  methods: {
-    onRouter(name, data) {
-      this.$router.push(
-        {
-          path: '/user/' + data
-        }
-      )
+      user: {
+        type: Object,
+        default: false
+      },
+      authorId: {
+        type: Number,
+        default: false
+      },
+      avatar: {
+        type: String,
+        default: ''
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      postId: {
+        type: Number,
+        required: true
+      }
     },
-    _initEditor(data) {
-      let _ts = this;
-      let toolbar = [
-        'emoji',
-        'headings',
-        'bold',
-        'italic',
-        'strike',
-        'link',
-        '|',
-        'list',
-        'ordered-list',
-        'check',
-        'outdent',
-        'indent',
-        '|',
-        'quote',
-        'line',
-        'code',
-        'inline-code',
-        'insert-before',
-        'insert-after',
-        '|',
-        'upload',
-        // 'record',
-        'table',
-        '|',
-        'undo',
-        'redo',
-        '|',
-        'edit-mode',
-        {
-          name: 'more',
-          toolbar: [
-            'fullscreen',
-            'both',
-            'preview',
-            'info'
-          ],
-        }]
-      return new Vue.Vditor(data.id, {
-        toolbar,
-        mode: 'ir',
-        tab: '\t',
-        cdn: apiConfig.VDITOR,
-        cache: {
-          enable: this.postId ? false : true,
-          id: this.postId ? this.postId : '',
+    computed: {
+      ...mapState({
+        comment: state => state.comment.data,
+        isFetchingComment: state => state.comment.fetching,
+        isPostingComment: state => state.comment.posting,
+        constants: state => state.global.constants,
+        language: state => state.global.language,
+        isMobile: state => state.global.isMobile
+      }),
+      isFetching() {
+        // 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
+        // 2. 宿主组件加载完成，如果自己还在请求，则列表呈加载状态
+        // 3. 自己已请求完，宿主组件还在加载，列表和 tool 都呈加载状态
+        return this.fetching || this.isFetchingComment
+      }
+    },
+    data() {
+      return {
+        tokenURL: {
+          URL: '',
+          linkToImageURL: '',
+          token: ''
         },
-        after() {
-          _ts.contentEditor.setValue(data.value ? data.value : '');
-        },
-        hint: {
-          emoji: Vue.emoji
-        },
-        preview: {
-          hljs: {
-            enable: true,
-            lineNumber: true,
-            style: 'github'
+        drawer: false,
+        direction: 'btt',
+        initEditor: false,
+        isShow: true,
+        loading: false,
+        commentOriginalCommentId: 0,
+        commentAuthorAvatar: '',
+        commentTitle: ''
+      }
+    },
+    methods: {
+      onRouter(name, data) {
+        this.$router.push(
+          {
+            path: '/user/' + data
+          }
+        )
+      },
+      _initEditor(data) {
+        let _ts = this;
+        let toolbar = [
+          'emoji',
+          'headings',
+          'bold',
+          'italic',
+          'strike',
+          'link',
+          '|',
+          'list',
+          'ordered-list',
+          'check',
+          'outdent',
+          'indent',
+          '|',
+          'quote',
+          'line',
+          'code',
+          'inline-code',
+          'insert-before',
+          'insert-after',
+          '|',
+          'upload',
+          // 'record',
+          'table',
+          '|',
+          'undo',
+          'redo',
+          '|',
+          'edit-mode',
+          {
+            name: 'more',
+            toolbar: [
+              'fullscreen',
+              'both',
+              'preview',
+              'info'
+            ],
+          }]
+        return new Vue.Vditor(data.id, {
+          toolbar,
+          mode: 'ir',
+          tab: '\t',
+          cdn: apiConfig.VDITOR,
+          cache: {
+            enable: this.postId ? false : true,
+            id: this.postId ? this.postId : '',
           },
-          markdown: {
-            toc: true,
+          after() {
+            _ts.contentEditor.setValue(data.value ? data.value : '');
           },
-          delay: 500,
-          mode: data.mode,
-          /*url: `${process.env.Server}/api/console/markdown`,*/
-          parse: (element) => {
-            if (element.style.display === 'none') {
-              return
+          hint: {
+            emoji: Vue.emoji
+          },
+          preview: {
+            hljs: {
+              enable: true,
+              lineNumber: true,
+              style: 'github'
+            },
+            markdown: {
+              toc: true,
+            },
+            delay: 500,
+            mode: data.mode,
+            /*url: `${process.env.Server}/api/console/markdown`,*/
+            parse: (element) => {
+              if (element.style.display === 'none') {
+                return
+              }
+              // LazyLoadImage();
+              // Vue.Vditor.highlightRender({style:'github'}, element, document);
+            },
+            theme: {
+              cdn: apiConfig.VDITOR_CSS
             }
-            // LazyLoadImage();
-            // Vue.Vditor.highlightRender({style:'github'}, element, document);
           },
-          theme: {
-            cdn: apiConfig.VDITOR_CSS
-          }
-        },
-        upload: {
-          max: 10 * 1024 * 1024,
-          url: this.tokenURL.URL,
-          linkToImgUrl: this.tokenURL.linkToImageURL,
-          token: this.tokenURL.token,
-          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
-        },
-        height: data.height,
-        counter: 102400,
-        resize: {
-          enable: data.resize,
-        },
-        lang: this.$store.state.locale,
-        placeholder: data.placeholder,
-      })
-    },
-    _loadEditor() {
-      let _ts = this;
-      if (!_ts.initEditor) {
-        _ts.$set(_ts, 'initEditor', true);
-        setTimeout(function () {
-          _ts.contentEditor = _ts._initEditor({
-            id: 'contentEditor',
-            mode: 'both',
-            height: 200,
-            placeholder: '', //this.$t('inputContent', this.$store.state.locale)
-            resize: false,
-            value: ''
-          });
-        }, 500);
-      }
-    },
-    gotoComment(commentId) {
-      console.log(commentId);
-    },
-    replyComment(comment) {
-      let _ts = this;
-      _ts.$set(_ts, 'drawer', true);
-      _ts.$set(_ts, 'commentTitle', comment.commenter.userNickname);
-      _ts.$set(_ts, 'commentAuthorAvatar', comment.commenter.userAvatarURL);
-      _ts.$set(_ts, 'commentOriginalCommentId', comment.idComment);
-      _ts._loadEditor();
-    },
-    showComment() {
-      let _ts = this;
-      _ts.$set(_ts, 'drawer', true);
-      _ts.$set(_ts, 'commentTitle', _ts.title);
-      _ts.$set(_ts, 'commentAuthorAvatar', '');
-      _ts.$set(_ts, 'commentOriginalCommentId', 0);
-      _ts._loadEditor();
-    },
-    async postComment() {
-      let _ts = this;
-      _ts.$set(_ts, 'loading', true);
-      let commentContent = await _ts.contentEditor.getHTML();
-      if (!(commentContent)) {
-        _ts.$message("回帖内容不能为空！");
-        return false;
-      }
-      let comment = {
-        commentArticleId: _ts.postId,
-        commentContent: commentContent,
-        commentOriginalCommentId: _ts.commentOriginalCommentId,
-        commentAuthorId: _ts.user.idUser
-      };
-      _ts.$axios.$post('/api/comment/post', comment).then(function (res) {
-        if (res) {
-          if (res.message) {
-            _ts.$message(res.message);
-            return false;
-          }
-          _ts.contentEditor.setValue('');
-          _ts.$set(_ts, 'drawer', false);
-          _ts.getComments();
-        }
-        _ts.$set(_ts, 'loading', false);
-      })
-    },
-    getComments() {
-      // 每次重新获取数据时都需要回到评论框顶部，因为都是新数据
-      this.$store.dispatch('comment/fetchList', {
-        post_id: this.postId
-      })
-    },
-    gotoLogin() {
-      this.$emit('gotoLogin');
-    },
-    // 取消回复
-    cancelCommentReply() {
-      this.commentOriginalCommentId = 0
-    },
-    toggleShowOriginalComment(commentId) {
-      let ele = document.getElementById('original-' + commentId);
-      if (ele.style.display === 'none') {
-        ele.style.display = 'block';
-      } else {
-        ele.style.display = 'none';
-      }
-    },
-    isAuthor(commentAuthorId) {
-      return this.authorId === commentAuthorId;
-    }
-  },
-  async mounted() {
-    let _ts = this;
-    _ts.$store.commit('setActiveMenu', 'post-article');
-    if (_ts.user) {
-      const responseData = await _ts.$axios.$get('/api/upload/token');
-      if (responseData) {
-        _ts.$set(_ts, 'tokenURL', {
-          token: responseData.uploadToken || '',
-          URL: responseData.uploadURL || '',
-          linkToImageURL: responseData.linkToImageURL || ''
+          upload: {
+            max: 10 * 1024 * 1024,
+            url: this.tokenURL.URL,
+            linkToImgUrl: this.tokenURL.linkToImageURL,
+            token: this.tokenURL.token,
+            filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
+          },
+          height: data.height,
+          counter: 102400,
+          resize: {
+            enable: data.resize,
+          },
+          lang: this.$store.state.locale,
+          placeholder: data.placeholder,
         })
-      }
-    }
-
-    Vue.nextTick(function () {
-      // 评论渲染
-      const previewElements = document.getElementsByClassName("comment-content");
-      if (previewElements) {
-        for (let i in previewElements) {
-          const previewElement = previewElements[i];
-          Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
-          Vue.VditorPreview.highlightRender({
-            "enable": true,
-            "lineNumber": true,
-            "style": "github"
-          }, previewElement, apiConfig.VDITOR);
-          Vue.VditorPreview.mathRender(previewElement, {
-            math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
-          });
-          Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
-          Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
-          Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
-          Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
-          Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
-          Vue.VditorPreview.mediaRender(previewElement);
-          Vue.VditorPreview.lazyLoadImageRender(previewElement);
-          //VditorPreview.outlineRender(previewElement, outLineElement);
-          previewElement.addEventListener("click", (event) => {
-            if (event.target.tagName === "IMG") {
-              Vue.VditorPreview.previewImage(event.target);
+      },
+      _loadEditor() {
+        let _ts = this;
+        if (!_ts.initEditor) {
+          _ts.$set(_ts, 'initEditor', true);
+          setTimeout(function () {
+            _ts.contentEditor = _ts._initEditor({
+              id: 'contentEditor',
+              mode: 'both',
+              height: 200,
+              placeholder: '', //this.$t('inputContent', this.$store.state.locale)
+              resize: false,
+              value: ''
+            });
+          }, 500);
+        }
+      },
+      gotoComment(commentId) {
+        console.log(commentId);
+      },
+      replyComment(comment) {
+        let _ts = this;
+        _ts.$set(_ts, 'drawer', true);
+        _ts.$set(_ts, 'commentTitle', comment.commenter.userNickname);
+        _ts.$set(_ts, 'commentAuthorAvatar', comment.commenter.userAvatarURL);
+        _ts.$set(_ts, 'commentOriginalCommentId', comment.idComment);
+        _ts._loadEditor();
+      },
+      showComment() {
+        let _ts = this;
+        _ts.$set(_ts, 'drawer', true);
+        _ts.$set(_ts, 'commentTitle', _ts.title);
+        _ts.$set(_ts, 'commentAuthorAvatar', '');
+        _ts.$set(_ts, 'commentOriginalCommentId', 0);
+        _ts._loadEditor();
+      },
+      async postComment() {
+        let _ts = this;
+        _ts.$set(_ts, 'loading', true);
+        let commentContent = await _ts.contentEditor.getHTML();
+        if (!(commentContent)) {
+          _ts.$message("回帖内容不能为空！");
+          return false;
+        }
+        let comment = {
+          commentArticleId: _ts.postId,
+          commentContent: commentContent,
+          commentOriginalCommentId: _ts.commentOriginalCommentId,
+          commentAuthorId: _ts.user.idUser
+        };
+        _ts.$axios.$post('/api/comment/post', comment).then(function (res) {
+          if (res) {
+            if (res.message) {
+              _ts.$message(res.message);
+              return false;
             }
-          });
-        }
-      }
-      // 评论定位
-      if (_ts.$route.hash) {
-        const element = document.getElementById(_ts.$route.hash.replace('#', ''));
-        if (element) {
-          let actualTop = element.offsetTop;
-          let current = element.offsetParent;
-          while (current !== null) {
-            actualTop += current.offsetTop;
-            current = current.offsetParent;
+            _ts.contentEditor.setValue('');
+            _ts.$set(_ts, 'drawer', false);
+            _ts.getComments();
           }
-          window.scroll(0, actualTop);
+          _ts.$set(_ts, 'loading', false);
+        })
+      },
+      getComments() {
+        // 每次重新获取数据时都需要回到评论框顶部，因为都是新数据
+        this.$store.dispatch('comment/fetchList', {
+          post_id: this.postId
+        })
+      },
+      gotoLogin() {
+        this.$emit('gotoLogin');
+      },
+      // 取消回复
+      cancelCommentReply() {
+        this.commentOriginalCommentId = 0
+      },
+      toggleShowOriginalComment(commentId) {
+        let ele = document.getElementById('original-' + commentId);
+        if (ele.style.display === 'none') {
+          ele.style.display = 'block';
+        } else {
+          ele.style.display = 'none';
+        }
+      },
+      isAuthor(commentAuthorId) {
+        return this.authorId === commentAuthorId;
+      }
+    },
+    async mounted() {
+      let _ts = this;
+      _ts.$store.commit('setActiveMenu', 'post-article');
+      if (_ts.user) {
+        const responseData = await _ts.$axios.$get('/api/upload/token');
+        if (responseData) {
+          _ts.$set(_ts, 'tokenURL', {
+            token: responseData.uploadToken || '',
+            URL: responseData.uploadURL || '',
+            linkToImageURL: responseData.linkToImageURL || ''
+          })
         }
       }
-    })
-  },
-  watch: {
-    isFetching(isFetching) {
-      if (isFetching) {
-        this.cancelCommentReply()
+
+      Vue.nextTick(function () {
+        // 评论渲染
+        const previewElements = document.getElementsByClassName("comment-content");
+        if (previewElements && previewElements.length > 0) {
+          for (let i in previewElements) {
+            let previewElement = previewElements[i];
+            Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
+            Vue.VditorPreview.highlightRender({
+              "enable": true,
+              "lineNumber": true,
+              "style": "github"
+            }, previewElement, apiConfig.VDITOR);
+            Vue.VditorPreview.mathRender(previewElement, {
+              math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
+            });
+            Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
+            Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
+            Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
+            Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
+            Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
+            Vue.VditorPreview.mediaRender(previewElement);
+            Vue.VditorPreview.lazyLoadImageRender(previewElement);
+            //VditorPreview.outlineRender(previewElement, outLineElement);
+            previewElement.addEventListener("click", (event) => {
+              if (event.target.tagName === "IMG") {
+                Vue.VditorPreview.previewImage(event.target);
+              }
+            });
+          }
+        }
+        // 评论定位
+        if (_ts.$route.hash) {
+          const element = document.getElementById(_ts.$route.hash.replace('#', ''));
+          if (element) {
+            let actualTop = element.offsetTop;
+            let current = element.offsetParent;
+            while (current !== null) {
+              actualTop += current.offsetTop;
+              current = current.offsetParent;
+            }
+            window.scroll(0, actualTop);
+          }
+        }
+      })
+    },
+    watch: {
+      isFetching(isFetching) {
+        if (isFetching) {
+          this.cancelCommentReply()
+        }
       }
+    },
+    destroyed() {
+      this.$store.commit('comment/clearListData')
     }
-  },
-  destroyed() {
-    this.$store.commit('comment/clearListData')
   }
-}
 </script>
 
 <style scoped>
diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue
index b4876af..39b4e15 100644
--- a/components/layouts/pc/header.vue
+++ b/components/layouts/pc/header.vue
@@ -1,390 +1,388 @@
 <template>
-  <el-row justify="space-between" type="flex">
-    <el-col>
-      <el-col :xs="8" :sm="4" :md="4" :xl="3" style="padding-top: .5rem;text-align: left;">
-        <a rel="nofollow" class="navbar-brand" href="/">
-          <img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img">
-        </a>
-      </el-col>
-      <el-col :xs="0" :sm="8" :md="8" :xl="12" style="text-align: center;">
-        <el-row type="flex" justify="center">
-          <el-col>
-            <el-menu :default-active="activeMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
-                     @select="handleSelectMenu">
-              <el-menu-item index="index">首页</el-menu-item>
-              <el-menu-item index="topic">专题</el-menu-item>
-              <el-menu-item index="portfolios">作品集</el-menu-item>
-              <el-menu-item index="products">产品</el-menu-item>
-              <el-menu-item index="open-data">开放数据</el-menu-item>
-            </el-menu>
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col :xs="16" :sm="12" :md="12" :xl="9" style="padding-top: 1rem;">
-        <client-only>
-          <el-col v-if="user" style="text-align: right;">
-            <el-popover
-              placement="bottom"
-              width="400"
-              trigger="click"
-              v-model="showPopover"
-              @show="handleShowPopover">
-              <el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync"
-                        placeholder="搜索文章,作品集,用户">
-                <el-button slot="append" @click="querySearchAsync">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                       style="fill: rgba(0, 0, 0, 1);">
-                    <path
-                      d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
-                    <path
-                      d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
-                  </svg>
-                </el-button>
-              </el-input>
-              <el-button slot="reference" circle size="small">
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
-                     style="fill: rgba(0, 0, 0, 1);">
+  <el-row :gutter="20" justify="space-between" type="flex">
+
+    <el-col :md="4" :span="4" :xs="8">
+      <a class="navbar-brand" href="/" rel="nofollow">
+        <img alt="RYMCU" class="navbar-brand-img" src="@/assets/rymcu.png">
+      </a>
+    </el-col>
+
+    <el-col :md="14" :span="10" :xs="0" style="max-height: 58px;overflow: hidden">
+      <el-menu :default-active="activeMenu" @select="handleSelectMenu" mode="horizontal"
+               style="margin-top: -2px;border: 0;">
+        <el-menu-item index="index">首页</el-menu-item>
+        <el-menu-item index="topic">专题</el-menu-item>
+        <el-menu-item index="portfolios">作品集</el-menu-item>
+        <el-menu-item index="products">产品</el-menu-item>
+        <el-menu-item index="open-data">开放数据</el-menu-item>
+      </el-menu>
+    </el-col>
+
+    <el-col :md="10" :span="10" :xs="16" style="line-height: 60px">
+      <client-only>
+        <el-col style="text-align: right;" v-if="user">
+          <el-popover
+            @show="handleShowPopover"
+            placement="bottom"
+            trigger="click"
+            v-model="showPopover"
+            width="400">
+            <el-input @keyup.enter.native="querySearchAsync" name="searchInput" placeholder="搜索文章,作品集,用户"
+                      v-model="queryString">
+              <el-button @click="querySearchAsync" slot="append">
+                <svg height="24" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="24"
+                     xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
                   <path
                     d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
                 </svg>
               </el-button>
-            </el-popover>
-            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;"
-                     href="/portfolio/post">创建作品集
-            </el-link>
-            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;"
-                     href="/article/post">发帖
-            </el-link>
-            <el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;">
-              <el-dropdown trigger="click" @command="handleCommand">
-                <el-badge :value="notificationNumbers" class="item">
-                  <el-link rel="nofollow" :underline="false" style="font-size: 1.4rem;">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                         style="fill: rgba(0, 0, 0, 1);">
-                      <path
-                        d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path>
-                    </svg>
+            </el-input>
+            <el-button circle size="small" slot="reference">
+              <svg height="14" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="14"
+                   xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
+                <path
+                  d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
+              </svg>
+            </el-button>
+          </el-popover>
+          <el-link :underline="false" href="/portfolio/post" rel="nofollow"
+                   style="padding-left: 10px;padding-right: 10px;">创建作品集
+          </el-link>
+          <el-link :underline="false" href="/article/post" rel="nofollow"
+                   style="padding-left: 10px;padding-right: 10px;">发帖
+          </el-link>
+          <el-link :underline="false" rel="nofollow" style="padding-left: 10px;padding-right: 10px;">
+            <el-dropdown @command="handleCommand" trigger="click">
+              <el-badge :value="notificationNumbers" class="item">
+                <el-link :underline="false" rel="nofollow" style="font-size: 1.4rem;">
+                  <svg height="24" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="24"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path>
+                  </svg>
+                </el-link>
+              </el-badge>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :key="notification.idNotification" command="notification"
+                                  v-for="notification in notifications">{{ notification.dataSummary }}
+                </el-dropdown-item>
+                <el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-link>
+          <el-link :underline="false" rel="nofollow" style="margin-left: 10px;">
+            <el-dropdown @command="handleCommand" trigger="click">
+              <el-avatar :src="avatarURL" size="small" v-if="avatarURL"></el-avatar>
+              <el-avatar size="small" src="https://static.rymcu.com/article/1578475481946.png" v-else></el-avatar>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item style="align-items: center;">
+                  <el-avatar :src="avatarURL" class="mr-3" size="small" style="margin-top: 1rem;"
+                             v-if="avatarURL"></el-avatar>
+                  <el-avatar class="mr-3" size="small" src="https://static.rymcu.com/article/1578475481946.png"
+                             style="margin-top: 1rem;"
+                             v-else></el-avatar>
+                  <el-link :underline="false" rel="nofollow" style="margin-left: 10px;margin-bottom: 1rem;">
+                    {{ nickname }}
                   </el-link>
-                </el-badge>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
-                                    command="notification">{{ notification.dataSummary }}
-                  </el-dropdown-item>
-                  <el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </el-link>
-            <el-link rel="nofollow" :underline="false" style="margin-left: 10px;">
-              <el-dropdown trigger="click" @command="handleCommand">
-                <el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
-                <el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item style="align-items: center;">
-                    <el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
-                               :src="avatarURL"></el-avatar>
-                    <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
-                               src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-                    <el-link rel="nofollow" :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">
-                      {{ nickname }}
-                    </el-link>
-                  </el-dropdown-item>
-                  <el-dropdown-item command="user">个人中心</el-dropdown-item>
-                  <el-dropdown-item command="answer">每日一题</el-dropdown-item>
-                  <el-dropdown-item command="drafts" divided>我的草稿</el-dropdown-item>
-                  <el-dropdown-item command="wallet">我的钱包</el-dropdown-item>
-                  <el-dropdown-item command="user-info" divided>设置</el-dropdown-item>
-                  <el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
-                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </el-link>
-          </el-col>
-          <el-col v-else style="text-align: right;">
-            <el-popover
-              placement="bottom"
-              width="400"
-              trigger="click"
-              v-model="showPopover"
-              @show="handleShowPopover">
-              <el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync"
-                        placeholder="搜索文章,作品集,用户">
-                <el-button slot="append" @click="querySearchAsync">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                       style="fill: rgba(0, 0, 0, 1);">
-                    <path
-                      d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
-                    <path
-                      d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
-                  </svg>
-                </el-button>
-              </el-input>
-              <el-button slot="reference" circle size="small">
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
-                     style="fill: rgba(0, 0, 0, 1);">
+                </el-dropdown-item>
+                <el-dropdown-item command="user">个人中心</el-dropdown-item>
+                <el-dropdown-item command="answer">每日一题</el-dropdown-item>
+                <el-dropdown-item command="drafts" divided>我的草稿</el-dropdown-item>
+                <el-dropdown-item command="wallet">我的钱包</el-dropdown-item>
+                <el-dropdown-item command="user-info" divided>设置</el-dropdown-item>
+                <el-dropdown-item command="admin-dashboard" v-if="hasPermissions">系统管理</el-dropdown-item>
+                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-link>
+        </el-col>
+        <el-col style="text-align: right;" v-else>
+          <el-popover
+            @show="handleShowPopover"
+            placement="bottom"
+            trigger="click"
+            v-model="showPopover"
+            width="400">
+            <el-input @keyup.enter.native="querySearchAsync" name="searchInput" placeholder="搜索文章,作品集,用户"
+                      v-model="queryString">
+              <el-button @click="querySearchAsync" slot="append">
+                <svg height="24" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="24"
+                     xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
                   <path
                     d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
                 </svg>
               </el-button>
-            </el-popover>
-            <el-link rel="nofollow" :underline="false" style="margin-left: 10px;" @click="login">登录</el-link>
-            <el-link href="/register" rel="nofollow" :underline="false" style="margin-left: 10px;">注册</el-link>
-          </el-col>
-        </client-only>
-      </el-col>
+            </el-input>
+            <el-button circle size="small" slot="reference">
+              <svg height="14" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="14"
+                   xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
+                <path
+                  d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
+              </svg>
+            </el-button>
+          </el-popover>
+          <el-link :underline="false" @click="login" rel="nofollow" style="margin-left: 10px;">登录</el-link>
+          <el-link :underline="false" href="/register" rel="nofollow" style="margin-left: 10px;">注册</el-link>
+        </el-col>
+      </client-only>
     </el-col>
   </el-row>
 </template>
 
 <script>
-import {mapState} from 'vuex';
-import {isBrowser} from '~/environment';
-// import sockClient from '~/plugins/sockjs';
+  import {mapState} from 'vuex';
+  import {isBrowser} from '~/environment';
+  // import sockClient from '~/plugins/sockjs';
 
-const Cookie = process.client ? require('js-cookie') : undefined
-export default {
-  name: "PcHeader",
-  computed: {
-    ...mapState({
-      activeMenu: state => state.activeMenu,
-      user: state => state.oauth
-    }),
-    avatarURL() {
-      let _ts = this;
-      if (isBrowser) {
-        if (!_ts.$store.state.userInfo) {
-          let user = localStorage.getItem('user');
-          if (user) {
-            _ts.$store.commit('setUser', JSON.parse(user))
+  const Cookie = process.client ? require('js-cookie') : undefined
+  export default {
+    name: "PcHeader",
+    computed: {
+      ...mapState({
+        activeMenu: state => state.activeMenu,
+        user: state => state.oauth
+      }),
+      avatarURL() {
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
           }
         }
-      }
-      return _ts.$store.state.userInfo?.avatarURL;
-    },
-    nickname() {
-      let _ts = this;
-      if (isBrowser) {
-        if (!_ts.$store.state.userInfo) {
-          let user = localStorage.getItem('user');
-          if (user) {
-            _ts.$store.commit('setUser', JSON.parse(user))
+        return _ts.$store.state.userInfo?.avatarURL;
+      },
+      nickname() {
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
           }
         }
-      }
-      return _ts.$store.state.userInfo?.nickname;
-    },
-    account() {
-      let _ts = this;
-      if (isBrowser) {
-        if (!_ts.$store.state.userInfo) {
-          let user = localStorage.getItem('user');
-          if (user) {
-            _ts.$store.commit('setUser', JSON.parse(user))
+        return _ts.$store.state.userInfo?.nickname;
+      },
+      account() {
+        let _ts = this;
+        if (isBrowser) {
+          if (!_ts.$store.state.userInfo) {
+            let user = localStorage.getItem('user');
+            if (user) {
+              _ts.$store.commit('setUser', JSON.parse(user))
+            }
           }
         }
+        return _ts.$store.state.userInfo?.account;
+      },
+      hasPermissions() {
+        return this.$store.getters.hasPermissions('blog_admin');
       }
-      return _ts.$store.state.userInfo?.account;
     },
-    hasPermissions() {
-      return this.$store.getters.hasPermissions('blog_admin');
-    }
-  },
-  data() {
-    return {
-      queryString: '',
-      timeout: null,
-      show: false,
-      notifications: [],
-      notificationNumbers: "",
-      showPopover: false,
-      autofocus: false
-    };
-  },
-  watch: {
-    user: function () {
-      this.getUnreadNotifications();
-    }
-  },
-  methods: {
-    querySearchAsync() {
-      this.$router.push({
-        path: `/search?q=${this.queryString}`
-      })
-      this.$set(this, 'showPopover', false);
-      this.$set(this, 'queryString', '');
+    data() {
+      return {
+        queryString: '',
+        timeout: null,
+        show: false,
+        notifications: [],
+        notificationNumbers: "",
+        showPopover: false,
+        autofocus: false
+      };
     },
-    handleShowPopover() {
-      setTimeout(function () {
-        document.getElementsByName("searchInput")[0].focus()
-      }, 500);
+    watch: {
+      user: function () {
+        this.getUnreadNotifications();
+      }
     },
-    handleSelectMenu(item) {
-      let _ts = this;
-      let activeMenu = _ts.$store.state.activeMenu;
-      if (activeMenu !== item) {
+    methods: {
+      querySearchAsync() {
+        this.$router.push({
+          path: `/search?q=${this.queryString}`
+        })
+        this.$set(this, 'showPopover', false);
+        this.$set(this, 'queryString', '');
+      },
+      handleShowPopover() {
+        setTimeout(function () {
+          document.getElementsByName("searchInput")[0].focus()
+        }, 500);
+      },
+      handleSelectMenu(item) {
+        let _ts = this;
+        let activeMenu = _ts.$store.state.activeMenu;
+        if (activeMenu !== item) {
+          switch (item) {
+            case 'topic':
+              _ts.$router.push({
+                path: '/topic/news?page=1'
+              })
+              break;
+            case 'portfolios':
+              _ts.$router.push({
+                path: '/portfolios?page=1'
+              })
+              break;
+            case 'products':
+              _ts.$router.push({
+                path: '/products?page=1'
+              })
+              break;
+            case 'github':
+              window.open("https://github.com/rymcu");
+              break;
+            case 'taobao':
+              window.open("https://rymcu.taobao.com?utm_source=rymcu.com");
+              break;
+            case 'open-data':
+              _ts.$router.push({
+                path: '/open-data'
+              })
+              break;
+            default:
+              _ts.$router.push(
+                {
+                  path: '/'
+                }
+              )
+          }
+        }
+      },
+      handleCommand(item) {
+        let _ts = this;
         switch (item) {
-          case 'topic':
+          case 'user':
             _ts.$router.push({
-              path: '/topic/news?page=1'
+              path: '/user/' + _ts.account
             })
             break;
-          case 'portfolios':
+          case 'user-info':
             _ts.$router.push({
-              path: '/portfolios?page=1'
+              path: '/user/settings/account'
             })
             break;
-          case 'products':
-            _ts.$router.push({
-              path: '/products?page=1'
-            })
-            break;
-          case 'github':
-            window.open("https://github.com/rymcu");
-            break;
-          case 'taobao':
-            window.open("https://rymcu.taobao.com?utm_source=rymcu.com");
-            break;
-          case 'open-data':
-            _ts.$router.push({
-              path: '/open-data'
-            })
+          case 'logout':
+            Cookie.remove('auth')
+            _ts.$store.commit('setAuth', null)
+            item = 'login';
             break;
           default:
-            _ts.$router.push(
-              {
-                path: '/'
-              }
-            )
+            _ts.$router.push({
+              name: item
+            })
         }
-      }
-    },
-    handleCommand(item) {
-      let _ts = this;
-      switch (item) {
-        case 'user':
-          _ts.$router.push({
-            path: '/user/' + _ts.account
+      },
+      getUnreadNotifications() {
+        let _ts = this;
+        if (_ts.user) {
+          _ts.$axios.$get('/api/notification/unread').then(function (res) {
+            if (res) {
+              _ts.$set(_ts, 'notifications', res.list);
+              _ts.$set(_ts, 'notificationNumbers', res.total === 0 ? "" : res.total);
+            }
           })
-          break;
-        case 'user-info':
-          _ts.$router.push({
-            path: '/user/settings/account'
-          })
-          break;
-        case 'logout':
-          Cookie.remove('auth')
-          _ts.$store.commit('setAuth', null)
-          item = 'login';
-          break;
-        default:
-          _ts.$router.push({
-            name: item
-          })
-      }
-    },
-    getUnreadNotifications() {
-      let _ts = this;
-      if (_ts.user) {
-        _ts.$axios.$get('/api/notification/unread').then(function (res) {
-          if (res) {
-            _ts.$set(_ts, 'notifications', res.list);
-            _ts.$set(_ts, 'notificationNumbers', res.total === 0 ? "" : res.total);
+        }
+      },
+      login() {
+        this.$router.push({
+          path: '/login',
+          query: {
+            historyUrl: window.location.href
           }
         })
-      }
-    },
-    login() {
-      this.$router.push({
-        path: '/login',
-        query: {
-          historyUrl: window.location.href
+      },
+      browserFingerprint() {
+        let _ts = this
+        let canvas = document.createElement('canvas');
+        let ctx = canvas.getContext('2d');
+        let txt = 'https://rymcu.com/';
+        ctx.textBaseline = "top";
+        ctx.font = "14px 'Arial'";
+        ctx.textBaseline = "rymcu";
+        ctx.fillStyle = "#f60";
+        ctx.fillRect(125, 1, 62, 20);
+        ctx.fillStyle = "#069";
+        ctx.fillText(txt, 2, 15);
+        ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
+        ctx.fillText(txt, 4, 17);
+        let b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
+        let bin = atob(b64);
+        let fingerprint = _ts.bin2hex(bin.slice(-16, -12));
+        _ts.$store.commit('setFingerprint', fingerprint);
+      },
+      bin2hex(str) {
+        let _ts = this
+        let result = "";
+        for (let i = 0; i < str.length; i++) {
+          let c = str.charCodeAt(i);
+          // 高字节
+          result += _ts.byte2Hex(c >> 8 & 0xff);
+          // 低字节
+          result += _ts.byte2Hex(c & 0xff);
+        }
+        return result;
+      },
+      byte2Hex(b) {
+        if (b < 0x10) {
+          return "0" + b.toString(16);
+        } else {
+          return b.toString(16);
         }
-      })
-    },
-    browserFingerprint() {
-      let _ts = this
-      let canvas = document.createElement('canvas');
-      let ctx = canvas.getContext('2d');
-      let txt = 'https://rymcu.com/';
-      ctx.textBaseline = "top";
-      ctx.font = "14px 'Arial'";
-      ctx.textBaseline = "rymcu";
-      ctx.fillStyle = "#f60";
-      ctx.fillRect(125,1,62,20);
-      ctx.fillStyle = "#069";
-      ctx.fillText(txt, 2, 15);
-      ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
-      ctx.fillText(txt, 4, 17);
-      let b64 = canvas.toDataURL().replace("data:image/png;base64,","");
-      let bin = atob(b64);
-      let fingerprint = _ts.bin2hex(bin.slice(-16,-12));
-      _ts.$store.commit('setFingerprint', fingerprint);
-    },
-    bin2hex(str) {
-      let _ts = this
-      let result = "";
-      for (let i = 0; i < str.length; i++) {
-        let c = str.charCodeAt(i);
-        // 高字节
-        result += _ts.byte2Hex(c >> 8 & 0xff);
-        // 低字节
-        result += _ts.byte2Hex(c & 0xff);
       }
-      return result;
     },
-    byte2Hex(b) {
-      if (b < 0x10) {
-        return "0" + b.toString(16);
-      } else {
-        return b.toString(16);
+    mounted() {
+      let _ts = this;
+      let user = _ts.user;
+      if (user) {
+        _ts.getUnreadNotifications();
+        _ts.$store.dispatch('follow/fetchUserFollowerList');
+        _ts.$store.dispatch('follow/fetchUserFollowingList');
+        // sockClient.initSocket(this.$store.state.userInfo);
+      }
+      let fingerprint = _ts.$store.state.fingerprint
+      if (!fingerprint) {
+        _ts.browserFingerprint();
       }
     }
-  },
-  mounted() {
-    let _ts = this;
-    let user = _ts.user;
-    if (user) {
-      _ts.getUnreadNotifications();
-      _ts.$store.dispatch('follow/fetchUserFollowerList');
-      _ts.$store.dispatch('follow/fetchUserFollowingList');
-      // sockClient.initSocket(this.$store.state.userInfo);
-    }
-    let fingerprint = _ts.$store.state.fingerprint
-    if (!fingerprint) {
-      _ts.browserFingerprint();
-    }
-  }
 
-}
+  }
 </script>
 
 <style scoped>
-.navbar-brand {
-  color: inherit;
-  margin-right: 1rem;
-  font-size: 1.25rem;
-  white-space: nowrap;
-  font-weight: 600;
-  padding: 0;
-  transition: .3s opacity;
-  line-height: 3rem;
-}
+  .navbar-brand {
+    color: inherit;
+    margin-right: 1rem;
+    font-size: 1.25rem;
+    white-space: nowrap;
+    font-weight: 600;
+    padding: 0;
+    transition: .3s opacity;
+    line-height: 3rem;
+  }
 
-.navbar-brand-img {
-  height: 3rem;
-  line-height: 3rem;
-  vertical-align: top;
-  width: auto;
-}
+  .navbar-brand-img {
+    height: 3rem;
+    line-height: 3rem;
+    vertical-align: top;
+    width: auto;
+  }
 
-.search-result-box {
-  min-width: 20vw !important;
-}
+  .search-result-box {
+    min-width: 20vw !important;
+  }
 
-.search-result-type {
-  padding-right: 5px;
-}
+  .search-result-type {
+    padding-right: 5px;
+  }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 6fdfa07..4f9798b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7520,9 +7520,9 @@ source-map-resolve@^0.5.0:
     urix "^0.1.0"
 
 source-map-support@~0.5.12, source-map-support@~0.5.19:
-  version "0.5.19"
-  resolved "https://registry.nlark.com/source-map-support/download/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha1-qYti+G3K9PZzmWSMCFKRq56P7WE=
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -7877,9 +7877,9 @@ terser-webpack-plugin@^4.2.3:
     webpack-sources "^1.4.3"
 
 terser@^4.1.2, terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.nlark.com/terser/download/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha1-YwVjQ9fHC7KfOvZlhlpG/gOg3xc=
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"