fix: 修复手机看的时候，点开左边侧边栏，点空白的地方不会隐藏的bug

layouts/default.vue

@@ -19,7 +19,7 @@
     .page-container
       #LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone")
         LeftContent
-      #rightContent
+      #rightContent(@click='showLeftMenu(false)')
         nuxt
         Footer
   v-dialog
@@ -61,11 +61,11 @@ export default {
     }
   },
   methods: {
-    showLeftMenu () {
+    showLeftMenu (show) {
-      if (this.showLeftMenuValue !== 'block') {
+      if (this.showLeftMenuValue === 'block' || show === false) {
-        this.showLeftMenuValue = 'block'
-      } else {
         this.showLeftMenuValue = 'none'
+      } else {
+        this.showLeftMenuValue = 'block'
       }
     }
   }

pages/post/_id.vue

@@ -47,11 +47,15 @@
       .comment-default-commit
         .login(v-if="!visitorToken", @click="login")
           img(src="https://cdn.wyr.me/imgs/GitHub-Login.png")
+        #editor
+        .comment-toolbar
+          .comment-no-userinfo(v-if="!visitorToken") 尚未登陆
           .comment-userinfo(v-else)
             .comment-avatar
               img(:src="'https://picsum.photos/100/100/?blur=1'")
             .comment-nickname 张三
-        #editor
+            .comment-logout 退出
+          .comment-btn 发布
       .comment-reply-commit(id="comment-reply-commit", v-show="replyID")
         .login(v-show="!visitorToken", @click="login")
           img(src="https://cdn.wyr.me/imgs/GitHub-Login.png")
@@ -104,9 +108,9 @@ export default {
   },
   mounted () {
     // 创建编辑器
+    this.visitorToken = window.localStorage.visitorToken
     if (process.client) {
       if (!window.editorObj && window.Vditor) {
-        this.visitorToken = window.localStorage.visitorToken
         const upload = {
           accept: 'image/*, video/*, audio/*, text/*, application/*, .rar, .zip, .php, .pptx, .ppt, .doc, .docx, .txt, .xls, .xlsx',
           url: process.env.baseURL + '/visitor/file/upload',
@@ -554,31 +558,108 @@ export default {
             user-select none
             margin-left 10px
 
+    .comment-no-userinfo
+      float left
+      font-size 12px
+      line-height 50px
+      margin-left 10px
+
     .comment-userinfo
-      margin-left 5px
+      width 200px
-      padding 10px 5px
+      position relative
+      cursor pointer
+      user-select none
+      margin-top 10px
+      margin-left 10px
+      display inline-block
+      height 30px
 
       .comment-avatar
-        float left
+        position absolute
-        margin-top 3px
+        left 0
+        top 0
+        width 30px
+        height 30px
+        overflow hidden
 
         img
           border-radius 50%
-          width 60px
+          width 30px
+          height 30px
           border-style none
-          cursor pointer
           box-sizing border-box
           margin 0
 
       .comment-nickname
         color #a1887f
-        margin-left 80px
+        margin-left 50px
-        height 70px
+        height 30px
-        line-height 70px
+        line-height 30px
+        font-size 12px
+        width 150px
+        overflow hidden
+        text-overflow ellipsis
+        white-space nowrap
+
+    .comment-logout
+      width 51px
+      height 100%
+      line-height 30px
+      border 1px solid #586069
+      font-size 12px
+      border-radius 2px
+      box-sizing border-box
+      display none
+      text-align center
+
+    .comment-userinfo:hover
+      .comment-avatar, .comment-nickname
+        display none
+
+      .comment-logout
+        display block
+
+    .comment-userinfo:active
+      .comment-logout
+        background-color #586069
+        color #fff
 
     #editor
       margin-top 10px
-      margin-bottom 10px
+      border-bottom-color #e6e5e5
+      border-bottom-style dotted
+      border-bottom-left-radius 0
+      border-bottom-right-radius 0
+
+    .comment-toolbar
+      width 100%
+      height 50px
+      flex-direction column
+      border 1px solid #d1d5da
+      border-radius 3px
+      box-sizing border-box
+      border-top none
+      border-top-left-radius 0
+      border-top-right-radius 0
+      color #586069
+
+    .comment-btn
+      color #586069
+      float right
+      line-height 12px
+      margin-top 12px
+      margin-right 10px
+      padding 6px 12px
+      border 1px solid #586069
+      box-sizing border-box
+      font-size 12px
+      cursor pointer
+      user-select none
+      border-radius 2px
+
+    .comment-btn:active
+      background-color #586069
+      color #fff
 
     .comment-reply-commit
       margin 10px 0 10px 50px
@@ -648,6 +729,7 @@ export default {
     visibility hidden
 
   .articelRightToc
+    font-size 12px
     position fixed
     width 15%
     top 0
@@ -657,6 +739,9 @@ export default {
     padding 10px
     box-shadow 0 0 8px #000
     z-index 999999
+    padding-bottom 20px
+    min-width 240px
+    max-width 300px
 
   .articelToc
     width 100%
@@ -687,6 +772,7 @@ export default {
 
       ol li
         counter-increment toc
+        margin-top 6px
 
       .toc li:before
         content counters(toc, '.') ' '

plugins/browser.js

@@ -34,7 +34,7 @@ window.onload = function () {
       currentPosition > window.screen.availHeight ? top.style.display = 'block' : top.style.display = 'none'
 
       // 左部导航自动浮动
-      if (currentPosition > floatTop) {
+      if (currentPosition > floatTop && document.body.clientWidth > 768) {
         document.getElementById('navication').style.position = 'fixed'
       } else {
         document.getElementById('navication').style.position = 'static'