docs: update doc

Author: tangjinzhou

site/components/demoBox.vue

@@ -13,29 +13,9 @@
     <section class="code-box-meta markdown">
       <slot v-if="isZhCN" name="description" />
       <slot v-else name="us-description" />
-      <a-tooltip :title="codeExpand ? 'Hide Code' : 'Show Code'">
-        <span class="code-expand-icon">
-          <img
-            width="16"
-            alt="expand code"
-            src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
-            :class="codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'"
-            @click="handleCodeExpand"
-          />
-          <img
-            width="16"
-            alt="expand code"
-            src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
-            :class="codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'"
-            @click="handleCodeExpand"
-          />
-        </span>
-      </a-tooltip>
-    </section>
-    <transition appear :css="false" @enter="enter" @leave="leave">
-      <section v-show="codeExpand" class="highlight-wrapper" style="position: relative;">
+      <div class="code-box-actions">
         <a-tooltip
-          :title="copied ? '复制成功' : '复制代码'"
+          :title="copied ? 'Copied!' : 'Copy code'"
           :visible="copyTooltipVisible"
           @visibleChange="onCopyTooltipVisibleChange"
         >
@@ -46,6 +26,28 @@
             class="code-box-code-copy"
           />
         </a-tooltip>
+        <a-tooltip :title="codeExpand ? 'Hide Code' : 'Show Code'">
+          <span class="code-expand-icon">
+            <img
+              width="16"
+              alt="expand code"
+              src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
+              :class="codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'"
+              @click="handleCodeExpand"
+            />
+            <img
+              width="16"
+              alt="expand code"
+              src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
+              :class="codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'"
+              @click="handleCodeExpand"
+            />
+          </span>
+        </a-tooltip>
+      </div>
+    </section>
+    <transition appear :css="false" @enter="enter" @leave="leave">
+      <section v-show="codeExpand" class="highlight-wrapper" style="position: relative;">
         <slot name="code" />
       </section>
     </transition>

site/index.less

@@ -56,19 +56,14 @@ pre > code[class*='language-'] {
   position: absolute;
   top: -14px;
   padding: 1px 8px;
-  margin-left: -8px;
+  margin-left: 16px;
   color: #777;
   border-radius: 2px 2px 0 0;
   background: #fff;
   font-size: 14px;
   width: auto;
 }
-.code-box-code-copy {
-  opacity: 1;
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
+
 #search-box {
   .ant-select-focused,
   .ant-select-selection,

site/theme/static/demo.less

@@ -73,11 +73,10 @@
   &-meta {
     &.markdown {
       position: relative;
-      padding: 18px 32px;
-      border-radius: 0 0 @border-radius-sm @border-radius-sm;
-      transition: background-color 0.4s;
       width: 100%;
       font-size: @font-size-base;
+      border-radius: 0 0 @border-radius-sm @border-radius-sm;
+      transition: background-color 0.4s;
     }
 
     blockquote {
@@ -93,7 +92,7 @@
     > p {
       font-size: 12px;
       margin: 0.5em 0;
-      padding-right: 25px;
+      padding: 18px 24px 12px;
       width: 100%;
       word-break: break-word;
     }
@@ -105,28 +104,20 @@
   }
 
   .code-expand-icon {
-    position: absolute;
-    right: 16px;
-    bottom: 23px;
     cursor: pointer;
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    text-align: center;
   }
 
   .code-expand-icon-show,
   .code-expand-icon-hide {
-    transition: all 0.4s;
-    user-select: none;
     position: absolute;
-    left: 0;
     top: 0;
-    margin: 0;
-    max-width: 100%;
+    left: 0;
     width: 100%;
-    vertical-align: baseline;
+    max-width: 100%;
+    margin: 0;
     box-shadow: none;
+    transition: all 0.4s;
+    user-select: none;
   }
 
   .code-expand-icon-show {
@@ -169,29 +160,57 @@
   }
 
   &-actions {
-    position: absolute;
-    top: 10px;
-    right: 12px;
-    text-align: right;
+    padding-top: 12px;
+    text-align: center;
+    border-top: 1px dashed @site-border-color-split;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
     > i,
-    > form {
+    > form,
+    > span {
+      position: relative;
       display: inline-block;
-      margin-left: 8px;
+      width: 16px;
+      height: 16px;
+      margin-left: 16px;
+      vertical-align: top;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    > form {
+      top: -2px;
     }
   }
 
-  &-code-copy {
-    font-size: 14px;
-    cursor: pointer;
+  &-code-action {
+    width: 20px;
+    height: 20px;
     color: @site-text-color-secondary;
+    font-size: 16px;
+    line-height: 18px;
+    cursor: pointer;
     transition: all 0.24s;
-    background: #fff;
+  }
+
+  &-code-copy {
     width: 20px;
     height: 20px;
+    color: @site-text-color-secondary;
+    font-size: 14px;
     line-height: 20px;
     text-align: center;
+    background: #fff;
     border-radius: 20px;
-    opacity: 0;
+    cursor: pointer;
+    transition: all 0.24s;
 
     &:hover {
       color: @site-text-color-secondary;