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

layouts/common.styl

@@ -150,6 +150,7 @@ footer .footer
   height 100%
   width 295px
   float left
+  box-shadow 8px 0px 11px 0px #fff
 
 #rightContent
   margin-left 300px
@@ -531,7 +532,7 @@ input:-moz-placeholder
       padding-top 6px
       cursor pointer
 
-  #leftBackgroundColor, #LeftMenu
+  #LeftMenu
     display none
 
   #rightContent

layouts/default.vue

@@ -19,7 +19,7 @@
     .page-container
       #LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone")
         LeftContent
-      #rightContent
+      #rightContent(@click='hiddenLeftMenu')
         nuxt
         Footer
   v-dialog
@@ -62,9 +62,14 @@ export default {
   },
   methods: {
     showLeftMenu () {
-      if (this.showLeftMenuValue !== 'block') {
-        this.showLeftMenuValue = 'block'
+      if (this.showLeftMenuValue === 'block') {
+        this.showLeftMenuValue = 'none'
       } else {
+        this.showLeftMenuValue = 'block'
+      }
+    },
+    hiddenLeftMenu () {
+      if (document.body.clientWidth < 768) {
         this.showLeftMenuValue = 'none'
       }
     }

pages/post/_id.vue

@@ -47,15 +47,27 @@
       .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(@click="commentLogout") 退出
+          .comment-btn(@click="commentCommit") 发布
       .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")
         #editor-reply
+        .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 张三
+            .comment-logout(@click="commentLogout") 退出
+          .comment-btn(@click="commentCommit") 发布
     ins.adsbygoogle(style="display:block; text-align:center; margin-top:20px;", data-ad-layout="in-article", data-ad-format="fluid", data-ad-client="ca-pub-2143583075951360", data-ad-slot="4741804954")
     .articelRightToc(v-show="articels.post_toc_show && showRightToc", @click="articelRightTocClick")
       .articelTitle 目录
@@ -104,9 +116,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',
@@ -436,6 +448,13 @@ export default {
         })
       }
     },
+    commentCommit () {
+
+    },
+    commentLogout () {
+      window.localStorage.visitorToken = null
+      this.visitorToken = null
+    },
     login () {
       window.open('https://github.com/login/oauth/authorize?client_id=ce1673a37333e47e482d&redirect_uri=https://www.wyr.me/auth', 'Github授权', 'scrollbars=yes,resizable=yes,status=no,location=yes,toolbar=no,menubar=no,width=800,height=600,left=0,top=0')
     }
@@ -554,31 +573,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
-      padding 10px 5px
+      width 200px
+      position relative
+      cursor pointer
+      user-select none
+      margin-top 10px
+      margin-left 10px
+      display inline-block
+      height 30px
 
       .comment-avatar
-        float left
-        margin-top 3px
+        position absolute
+        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
-        height 70px
-        line-height 70px
+        margin-left 50px
+        height 30px
+        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 +744,7 @@ export default {
     visibility hidden
 
   .articelRightToc
+    font-size 12px
     position fixed
     width 15%
     top 0
@@ -657,6 +754,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 +787,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'