perf(toc): optimize toggle show style of TOC

source/css/common/variables.styl

@@ -16,7 +16,7 @@ $post-tool-button-width = 38px                                  // post tool but
 $component-spacing-value = 38px                                 // component-spacing-value (PC)
 
 // main content max width
-$content-max-width = 950px
+$content-max-width = 928px
 
 // main content max width of has TOC
 $has-toc-content-max-width = $content-max-width * 1.2

source/css/layout/_partial/header.styl

@@ -25,6 +25,7 @@ $logo-image-box-width = 46px
     width $main-content-width
     max-width $content-max-width
     height 100%
+    transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
 
     &.has-first-screen {

source/css/layout/article-content.styl

@@ -267,6 +267,7 @@ $toc-container-width = 16rem
     width $toc-container-width
     max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
     padding-left 2rem
+    padding-bottom 1rem
     transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
 
     .header-shrink & {

source/css/layout/page.styl

@@ -109,6 +109,7 @@
         width $main-content-width
         max-width $content-max-width
         height 100%
+        transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
         .has-toc & {
           max-width $has-toc-content-max-width

source/js/toggle-show-toc.js

@@ -20,8 +20,10 @@ function initToggleShowToc() {
     handleToggle(isOpen) {
       if (isOpen) {
         this.postPageContainerDom.classList.add('show-toc')
+        document.body.classList.add('has-toc')
       } else {
         this.postPageContainerDom.classList.remove('show-toc')
+        document.body.classList.remove('has-toc')
       }
     },
 

source/js/utils.js

@@ -139,7 +139,7 @@ KEEP.initUtils = () => {
       const mainContentDom = document.querySelector('.main-content')
       const iconDom = toolExpandDom.querySelector('i')
 
-      const defaultMaxWidth = '950px'
+      const defaultMaxWidth = '928px'
       const expandMaxWidth = '90%'
       let headerMaxWidth = defaultMaxWidth