docs: add hide code btn in the bottom for code box (#6917)

Author: kovsu

site/src/components/DemoBox.vue

@@ -82,6 +82,22 @@
         <slot v-if="type === 'TS'" name="htmlCode" />
         <slot v-else name="jsVersionHtml" />
       </div>
+      <div class="code-box-actions code-box-actions-bottom">
+        <a-tooltip :title="$t(`app.demo.code.hide`)">
+          <span class="code-expand-icon code-box-code-action">
+            <img
+              alt="expand code"
+              :src="
+                theme === 'dark'
+                  ? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
+                  : 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
+              "
+              :class="'code-expand-icon-show'"
+              @click="handleCodeExpand($event, sectionId)"
+            />
+          </span>
+        </a-tooltip>
+      </div>
     </section>
   </section>
 </template>
@@ -164,11 +180,17 @@ export default defineComponent({
           ).trim()
         : '',
     );
-    const handleCodeExpand = () => {
+    const handleCodeExpand = (_, sectionId?) => {
       if (globalConfig.blocked.value) {
         warning();
         return;
       }
+      if (sectionId) {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          element.scrollIntoView();
+        }
+      }
       codeExpand.value = !codeExpand.value;
     };
     const handleCodeCopied = () => {

site/src/theme/static/common.less

@@ -2,6 +2,7 @@ html {
   &.rtl {
     direction: rtl;
   }
+  scroll-behavior: smooth;
 }
 
 body {