chore: use eslint to fix staged lint error (#295)

* chore: use eslint to fix staged lint error

* chore(lint): add markdown lint

* chore(lint): resolve markdown lint error in content directory

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
             "version": "detect"
         }
     },
+    extends: ["plugin:markdown/recommended"],
     overrides: [
         {
             files: ['*.js', '*.jsx'],
@@ -27,7 +28,9 @@ module.exports = {
                 'react/prop-types': 'off',
                 'react/prefer-stateless-function': 'off',
                 'operator-linebreak': ['warn', 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
-                'import/no-unresolved': 'off'
+                'import/no-unresolved': 'off',
+                'semi': ['error', 'always'],
+                'keyword-spacing': ["error", { "before": true, "after": true }]
             },
             globals: {
                 "sinon": "readonly",
@@ -35,6 +38,7 @@ module.exports = {
         },
         {
             files: ['*.ts', '*.tsx'],
+            excludedFiles: ['content/**'],
             extends: ['jest-enzyme', 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'plugin:react/recommended'],
             parser: '@typescript-eslint/parser',
             parserOptions: {
@@ -62,7 +66,9 @@ module.exports = {
                 '@typescript-eslint/no-var-requires': 'warn',
                 '@typescript-eslint/no-inferrable-types': 'off',
                 '@typescript-eslint/no-this-alias': 'off',
-                'import/no-unresolved': 'off'
+                'import/no-unresolved': 'off',
+                'semi': ['error', 'always'],
+                'keyword-spacing': ["error", { "before": true, "after": true }]
             }
         },
     ],

content/basic/grid/index-en-US.md

@@ -35,30 +35,30 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-      <Row>
-          <Col span={24}><div className="col-content">col-24</div></Col>
-      </Row>
-      <br/>
-      <Row>
-          <Col span={12}><div className="col-content">col-12</div></Col>
-          <Col span={12}><div className="col-content">col-12</div></Col>
-      </Row>
-      <br/>
-      <Row>
-          <Col span={8}><div className="col-content">col-8</div></Col>
-          <Col span={8}><div className="col-content">col-8</div></Col>
-          <Col span={8}><div className="col-content">col-8</div></Col>
-      </Row>
-      <br/>
-      <Row>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-      </Row>
-  </div>
-) 
+    <div className="grid">
+        <Row>
+            <Col span={24}><div className="col-content">col-24</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={12}><div className="col-content">col-12</div></Col>
+            <Col span={12}><div className="col-content">col-12</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+        </Row>
+    </div>
+); 
 ```
 
 ### Gutter interval
@@ -78,65 +78,65 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid grid-gutter">
-    <p>horizontal</p>
-    <hr />
-    <Row gutter={16}>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-    </Row>
-    <p>vertical</p>
-    <hr />
-    <Row gutter={[16, 24]}>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-    </Row>
-  </div>
-)
+    <div className="grid grid-gutter">
+        <p>horizontal</p>
+        <hr />
+        <Row gutter={16}>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+        </Row>
+        <p>vertical</p>
+        <hr />
+        <Row gutter={[16, 24]}>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Offset
@@ -146,30 +146,30 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-    <Row>
-      <Col span={8}><div className="col-content">col-8</div></Col>
-      <Col span={8} offset={8}>
-        <div className="col-content">col-8</div>
-      </Col>
-    </Row>
-    <br/>
-    <Row>
-      <Col span={6} offset={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6} offset={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-    </Row>
-    <br/>
-    <Row>
-      <Col span={12} offset={6}>
-        <div className="col-content">col-12</div>
-      </Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <Row>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+            <Col span={8} offset={8}>
+                <div className="col-content">col-8</div>
+            </Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={6} offset={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6} offset={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={12} offset={6}>
+                <div className="col-content">col-12</div>
+            </Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Use Flex layout
@@ -181,48 +181,48 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-    <p>sub-element align left</p>
-    <Row type="flex" justify="start">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element align center</p>
-    <Row type="flex" justify="center">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element align right</p>
-    <Row type="flex" justify="end">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element monospaced arrangement</p>
-    <Row type="flex" justify="space-between">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element align full</p>
-    <Row type="flex" justify="space-around">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <p>sub-element align left</p>
+        <Row type="flex" justify="start">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element align center</p>
+        <Row type="flex" justify="center">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element align right</p>
+        <Row type="flex" justify="end">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element monospaced arrangement</p>
+        <Row type="flex" justify="space-between">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element align full</p>
+        <Row type="flex" justify="space-around">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Flex subelements vertically aligned
@@ -232,32 +232,32 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid grid-flex">
-      <p>Align Top</p>
-      <Row type="flex" justify="center" align="top">
-          <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
-      </Row>
-
-      <p>Align Center</p>
-      <Row type="flex" justify="space-around" align="middle">
-          <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
-      </Row>
-
-      <p>Align Bottom</p>
-      <Row type="flex" justify="space-between" align="bottom">
-          <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
-      </Row>
-  </div>
-)
+    <div className="grid grid-flex">
+        <p>Align Top</p>
+        <Row type="flex" justify="center" align="top">
+            <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
+        </Row>
+
+        <p>Align Center</p>
+        <Row type="flex" justify="space-around" align="middle">
+            <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
+        </Row>
+
+        <p>Align Bottom</p>
+        <Row type="flex" justify="space-between" align="bottom">
+            <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Flex element sorting
@@ -269,15 +269,15 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-    <Row type="flex">
-      <Col span={6} order={4}><div className="col-content">col-4</div></Col>
-      <Col span={6} order={3}><div className="col-content">col-3</div></Col>
-      <Col span={6} order={2}><div className="col-content">col-2</div></Col>
-      <Col span={6} order={1}><div className="col-content">col-1</div></Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <Row type="flex">
+            <Col span={6} order={4}><div className="col-content">col-4</div></Col>
+            <Col span={6} order={3}><div className="col-content">col-3</div></Col>
+            <Col span={6} order={2}><div className="col-content">col-2</div></Col>
+            <Col span={6} order={1}><div className="col-content">col-1</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Responsive
@@ -289,20 +289,20 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
- <div className="grid">
-    <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
-        <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
-        <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
-        <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
-    </Row>
-    <br/>
-    <Row>
-        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
-        <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
-        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
+            <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
+            <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
+            <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
+            <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
+            <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ## API reference

content/basic/grid/index.md

@@ -35,30 +35,30 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-      <Row>
-          <Col span={24}><div className="col-content">col-24</div></Col>
-      </Row>
-      <br/>
-      <Row>
-          <Col span={12}><div className="col-content">col-12</div></Col>
-          <Col span={12}><div className="col-content">col-12</div></Col>
-      </Row>
-      <br/>
-      <Row>
-          <Col span={8}><div className="col-content">col-8</div></Col>
-          <Col span={8}><div className="col-content">col-8</div></Col>
-          <Col span={8}><div className="col-content">col-8</div></Col>
-      </Row>
-      <br/>
-      <Row>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-          <Col span={6}><div className="col-content">col-6</div></Col>
-      </Row>
-  </div>
-)
+    <div className="grid">
+        <Row>
+            <Col span={24}><div className="col-content">col-24</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={12}><div className="col-content">col-12</div></Col>
+            <Col span={12}><div className="col-content">col-12</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+            <Col span={6}><div className="col-content">col-6</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Gutter 间隔
@@ -78,65 +78,65 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid grid-gutter">
-    <p>horizontal</p>
-    <hr />
-    <Row gutter={16}>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-    </Row>
-    <p>vertical</p>
-    <hr />
-    <Row gutter={[16, 24]}>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-    </Row>
-  </div>
-)
+    <div className="grid grid-gutter">
+        <p>horizontal</p>
+        <hr />
+        <Row gutter={16}>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+        </Row>
+        <p>vertical</p>
+        <hr />
+        <Row gutter={[16, 24]}>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Offset 偏移
@@ -146,30 +146,30 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-    <Row>
-      <Col span={8}><div className="col-content">col-8</div></Col>
-      <Col span={8} offset={8}>
-        <div className="col-content">col-8</div>
-      </Col>
-    </Row>
-    <br/>
-    <Row>
-      <Col span={6} offset={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-      <Col span={6} offset={6}>
-        <div className="col-content">col-6</div>
-      </Col>
-    </Row>
-    <br/>
-    <Row>
-      <Col span={12} offset={6}>
-        <div className="col-content">col-12</div>
-      </Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <Row>
+            <Col span={8}><div className="col-content">col-8</div></Col>
+            <Col span={8} offset={8}>
+                <div className="col-content">col-8</div>
+            </Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={6} offset={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+            <Col span={6} offset={6}>
+                <div className="col-content">col-6</div>
+            </Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col span={12} offset={6}>
+                <div className="col-content">col-12</div>
+            </Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Flex 布局
@@ -181,48 +181,48 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-    <p>sub-element align left</p>
-    <Row type="flex" justify="start">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element align center</p>
-    <Row type="flex" justify="center">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element align right</p>
-    <Row type="flex" justify="end">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element monospaced arrangement</p>
-    <Row type="flex" justify="space-between">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-
-    <p>sub-element align full</p>
-    <Row type="flex" justify="space-around">
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-        <Col span={4}><div className="col-content">col-4</div></Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <p>sub-element align left</p>
+        <Row type="flex" justify="start">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element align center</p>
+        <Row type="flex" justify="center">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element align right</p>
+        <Row type="flex" justify="end">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element monospaced arrangement</p>
+        <Row type="flex" justify="space-between">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+
+        <p>sub-element align full</p>
+        <Row type="flex" justify="space-around">
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+            <Col span={4}><div className="col-content">col-4</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Flex 子元素垂直对齐
@@ -232,32 +232,32 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid grid-flex">
-      <p>Align Top</p>
-      <Row type="flex" justify="center" align="top">
-          <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
-      </Row>
-
-      <p>Align Center</p>
-      <Row type="flex" justify="space-around" align="middle">
-          <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
-      </Row>
-
-      <p>Align Bottom</p>
-      <Row type="flex" justify="space-between" align="bottom">
-          <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
-          <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
-      </Row>
-  </div>
-)
+    <div className="grid grid-flex">
+        <p>Align Top</p>
+        <Row type="flex" justify="center" align="top">
+            <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
+        </Row>
+
+        <p>Align Center</p>
+        <Row type="flex" justify="space-around" align="middle">
+            <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
+        </Row>
+
+        <p>Align Bottom</p>
+        <Row type="flex" justify="space-between" align="bottom">
+            <Col span={4}><div className="col-content" value={100}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={50}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={120}>col-4</div></Col>
+            <Col span={4}><div className="col-content" value={80}>col-4</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### Flex 元素排序
@@ -269,15 +269,15 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
-  <div className="grid">
-    <Row type="flex">
-      <Col span={6} order={4}><div className="col-content">col-4</div></Col>
-      <Col span={6} order={3}><div className="col-content">col-3</div></Col>
-      <Col span={6} order={2}><div className="col-content">col-2</div></Col>
-      <Col span={6} order={1}><div className="col-content">col-1</div></Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <Row type="flex">
+            <Col span={6} order={4}><div className="col-content">col-4</div></Col>
+            <Col span={6} order={3}><div className="col-content">col-3</div></Col>
+            <Col span={6} order={2}><div className="col-content">col-2</div></Col>
+            <Col span={6} order={1}><div className="col-content">col-1</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ### 响应式
@@ -289,20 +289,20 @@ import React from 'react';
 import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
- <div className="grid">
-    <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
-        <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
-        <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
-        <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
-    </Row>
-    <br/>
-    <Row>
-        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
-        <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
-        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
-    </Row>
-  </div>
-)
+    <div className="grid">
+        <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
+            <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
+            <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
+            <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
+        </Row>
+        <br/>
+        <Row>
+            <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
+            <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
+            <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className="col-content">Col</div></Col>
+        </Row>
+    </div>
+);
 ```
 
 ## API 参考

content/basic/icon/index-en-US.md

@@ -40,12 +40,12 @@ import React from 'react';
 import { IconHome, IconEmoji, IconSpin } from '@douyinfe/semi-icons';
 
 () => (
-  <div>
-    <IconHome size="small" />
-    <IconEmoji rotate={180} />
-    <IconSpin spin />
-  </div>
-)
+    <div>
+        <IconHome size="small" />
+        <IconEmoji rotate={180} />
+        <IconSpin spin />
+    </div>
+);
 
 ```
 
@@ -62,13 +62,14 @@ import React from 'react';
 import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons';
 
 () => {
-   const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
-   const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
-   let icons = types.map((type, i) => {
-     return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>
-   })
-   return icons;
-}
+    // eslint-disable-next-line react/jsx-key
+    const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
+    const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
+    let icons = types.map((type, i) => {
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>;
+    });
+    return icons;
+};
 ```
 
 ### Color
@@ -80,18 +81,18 @@ import React from 'react';
 import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-icons';
 
 () => (
-  <div>
-    <div style={{color:'#E91E63'}} >
-      <IconLikeHeart size="extra-large"/>
-      <IconFlag size="extra-large"/>
-    </div>
-    <br/>
     <div>
-      <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
-      <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+        <div style={{color:'#E91E63'}} >
+            <IconLikeHeart size="extra-large"/>
+            <IconFlag size="extra-large"/>
+        </div>
+        <br/>
+        <div>
+            <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
+            <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+        </div>
     </div>
-  </div>
-)
+);
 ```
 
 ### Custom icon
@@ -103,24 +104,24 @@ import React from 'react';
 import { Icon } from '@douyinfe/semi-ui';
 
 () => {
-  function CustomIcon(){
-    return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
-      <mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
-        <circle cx="12" cy="12" r="11" fill="#A2845E"/>
-      </mask>
-      <g mask="url(#mask0)">
-        <path fillRule="evenodd" clipRule="evenodd" d="M11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z" fill="white"/>
-      </g>
-    </svg>
-  }
-  return (
-  <div>
-    <Icon svg={<CustomIcon />} />
-    <Icon svg={<CustomIcon />} rotate={180} />
-   </div>
-)
-}
+    function CustomIcon(){
+        return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
+            <mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
+                <circle cx="12" cy="12" r="11" fill="#A2845E"/>
+            </mask>
+            <g mask="url(#mask0)">
+                <path fillRule="evenodd" clipRule="evenodd" d="M11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z" fill="white"/>
+            </g>
+        </svg>;
+    }
+    return (
+        <div>
+            <Icon svg={<CustomIcon />} />
+            <Icon svg={<CustomIcon />} rotate={180} />
+        </div>
+    );
+};
 ```
 
 ### Use svgr to convert svg files into ReactComponent

content/basic/icon/index.md

@@ -39,12 +39,12 @@ import React from 'react';
 import { IconHome, IconEmoji, IconSpin } from '@douyinfe/semi-icons';
 
 () => (
-  <div>
-    <IconHome size="small" />
-    <IconEmoji rotate={180} />
-    <IconSpin spin />
-  </div>
-)
+    <div>
+        <IconHome size="small" />
+        <IconEmoji rotate={180} />
+        <IconSpin spin />
+    </div>
+);
 
 ```
 
@@ -61,13 +61,14 @@ import React from 'react';
 import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons';
 
 () => {
-   const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
-   const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
-   let icons = types.map((type, i) => {
-     return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>
-   })
-   return icons;
-}
+    // eslint-disable-next-line react/jsx-key
+    const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
+    const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
+    let icons = types.map((type, i) => {
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>;
+    });
+    return icons;
+};
 ```
 
 ### 颜色
@@ -79,18 +80,18 @@ import React from 'react';
 import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-icons';
 
 () => (
-  <div>
-    <div style={{color:'#E91E63'}} >
-      <IconLikeHeart size="extra-large"/>
-      <IconFlag size="extra-large"/>
-    </div>
-    <br/>
     <div>
-      <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
-      <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+        <div style={{color:'#E91E63'}} >
+            <IconLikeHeart size="extra-large"/>
+            <IconFlag size="extra-large"/>
+        </div>
+        <br/>
+        <div>
+            <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
+            <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+        </div>
     </div>
-  </div>
-)
+);
 ```
 
 ### 自定义图标
@@ -102,24 +103,24 @@ import React from 'react';
 import { Icon } from '@douyinfe/semi-ui';
 
 () => {
-  function CustomIcon(){
-    return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
-      <mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
-        <circle cx="12" cy="12" r="11" fill="#A2845E"/>
-      </mask>
-      <g mask="url(#mask0)">
-        <path fillRule="evenodd" clipRule="evenodd" d="M11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z" fill="white"/>
-      </g>
-    </svg>
-  }
-  return (
-  <div>
-    <Icon svg={<CustomIcon />} />
-    <Icon svg={<CustomIcon />} rotate={180} />
-   </div>
-)
-}
+    function CustomIcon(){
+        return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
+            <mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
+                <circle cx="12" cy="12" r="11" fill="#A2845E"/>
+            </mask>
+            <g mask="url(#mask0)">
+                <path fillRule="evenodd" clipRule="evenodd" d="M11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z" fill="white"/>
+            </g>
+        </svg>;
+    }
+    return (
+        <div>
+            <Icon svg={<CustomIcon />} />
+            <Icon svg={<CustomIcon />} rotate={180} />
+        </div>
+    );
+};
 ```
 
 ### 使用svgr将svg文件转成ReactComponent

content/basic/layout/index-en-US.md

@@ -34,15 +34,15 @@ import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
 
 () => {
-  const { Header, Footer, Content } = Layout;
-  return (
+    const { Header, Footer, Content } = Layout;
+    return (
         <Layout className='components-layout-demo'>
             <Header>Header</Header>
             <Content>Content</Content>
             <Footer>Footer</Footer>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ### Left-sidebar Layout
@@ -52,8 +52,8 @@ import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
 
 () => {
-  const { Header, Footer, Sider, Content } = Layout;
-  return (
+    const { Header, Footer, Sider, Content } = Layout;
+    return (
         <Layout className='components-layout-demo'>
             <Header>Header</Header>
             <Layout >
@@ -62,8 +62,8 @@ import { Layout } from '@douyinfe/semi-ui';
             </Layout>
             <Footer>Footer</Footer>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ### Right-sidebar Layout
@@ -73,8 +73,8 @@ import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
 
 () => {
-  const { Header, Footer, Sider, Content } = Layout;
-  return (
+    const { Header, Footer, Sider, Content } = Layout;
+    return (
         <Layout className='components-layout-demo'>
             <Header>Header</Header>
             <Layout >
@@ -83,8 +83,8 @@ import { Layout } from '@douyinfe/semi-ui';
             </Layout>
             <Footer>Footer</Footer>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ### Sidebar Layout
@@ -94,8 +94,8 @@ import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
 
 () => {
-  const { Header, Footer, Sider, Content } = Layout;
-  return (
+    const { Header, Footer, Sider, Content } = Layout;
+    return (
         <Layout className='components-layout-demo' >
             <Sider>Sider</Sider>
             <Layout>
@@ -104,8 +104,8 @@ import { Layout } from '@douyinfe/semi-ui';
                 <Footer>Footer</Footer>
             </Layout>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ### Responsive Layout
@@ -117,21 +117,21 @@ import React from 'react';
 import { Layout } from '@douyinfe/semi-ui';
 
 () => {
-  const onbreakpoint = (screen, bool) => {
-      console.log(screen, bool);
-  }
-  const { Header, Footer, Sider, Content } = Layout;
-  return (
-      <Layout className='components-layout-demo'>
-        <Header>Header</Header>
-        <Layout >
-          <Sider breakpoint={['md']} onBreakpoint={onbreakpoint}>Sider</Sider>
-          <Content>Content</Content>
+    const onbreakpoint = (screen, bool) => {
+        console.log(screen, bool);
+    };
+    const { Header, Footer, Sider, Content } = Layout;
+    return (
+        <Layout className='components-layout-demo'>
+            <Header>Header</Header>
+            <Layout >
+                <Sider breakpoint={['md']} onBreakpoint={onbreakpoint}>Sider</Sider>
+                <Content>Content</Content>
+            </Layout>
+            <Footer>Footer</Footer>
         </Layout>
-        <Footer>Footer</Footer>
-      </Layout>
-  )
-}
+    );
+};
 ```
 
 ## Layout Examples
@@ -144,91 +144,91 @@ import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/sem
 import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@douyinfe/semi-icons';
 
 () => {
-  const { Header, Footer, Content } = Layout;
-  return (
+    const { Header, Footer, Content } = Layout;
+    return (
         <Layout style={{border: '1px solid var(--semi-color-border)'}}>
             <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
-              <div>
-                <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
-                  <Nav.Header>
-                    <IconSemiLogo style={{ fontSize: 36 }} />
-                  </Nav.Header>
-                  <Nav.Item itemKey='Home' text='Home' icon={<IconHome size="large" />} />
-                  <Nav.Item itemKey='Live' text='Live' icon={<IconLive size="large" />} />
-                  <Nav.Item itemKey='Setting' text='Setting' icon={<IconSetting size="large" />} />
-                  <Nav.Footer>
-                    <Button
-                      theme="borderless"
-                      icon = {<IconBell size="large"/>}
-                      style={{
-                        color:'var(--semi-color-text-2)',
-                        marginRight: '12px',
-                      }}
-                    />
-                    <Button
-                      theme="borderless"
-                      icon = {<IconHelpCircle size="large"/>}
-                      style={{
-                        color:'var(--semi-color-text-2)',
-                        marginRight: '12px',
-                      }}
-                    />
-                    <Avatar color='orange' size='small'>YJ</Avatar>
-                  </Nav.Footer>
-                </Nav>
-              </div>
+                <div>
+                    <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
+                        <Nav.Header>
+                            <IconSemiLogo style={{ fontSize: 36 }} />
+                        </Nav.Header>
+                        <Nav.Item itemKey='Home' text='Home' icon={<IconHome size="large" />} />
+                        <Nav.Item itemKey='Live' text='Live' icon={<IconLive size="large" />} />
+                        <Nav.Item itemKey='Setting' text='Setting' icon={<IconSetting size="large" />} />
+                        <Nav.Footer>
+                            <Button
+                                theme="borderless"
+                                icon = {<IconBell size="large"/>}
+                                style={{
+                                    color:'var(--semi-color-text-2)',
+                                    marginRight: '12px',
+                                }}
+                            />
+                            <Button
+                                theme="borderless"
+                                icon = {<IconHelpCircle size="large"/>}
+                                style={{
+                                    color:'var(--semi-color-text-2)',
+                                    marginRight: '12px',
+                                }}
+                            />
+                            <Avatar color='orange' size='small'>YJ</Avatar>
+                        </Nav.Footer>
+                    </Nav>
+                </div>
             </Header>
             <Content
-              style={{
-                padding: '24px',
-                backgroundColor: 'var(--semi-color-bg-0)'
-              }}
-            >
-              <Breadcrumb
                 style={{
-                  marginBottom: '24px'
-                }}
-                routes={['Home', 'Page Section', 'Pagge Ssection', 'Detail']} />
-              <div
-                style={{
-                  borderRadius: '10px',
-                  border: '1px solid var(--semi-color-border)',
-                  height: '376px',
-                  padding: '32px'
+                    padding: '24px',
+                    backgroundColor: 'var(--semi-color-bg-0)'
                 }}
-              >
-                <Skeleton placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={true}>
-                    <p>Hi, Bytedance dance dance.</p>
-                    <p>Hi, Bytedance dance dance.</p>
-                </Skeleton>
-              </div>
+            >
+                <Breadcrumb
+                    style={{
+                        marginBottom: '24px'
+                    }}
+                    routes={['Home', 'Page Section', 'Pagge Ssection', 'Detail']} />
+                <div
+                    style={{
+                        borderRadius: '10px',
+                        border: '1px solid var(--semi-color-border)',
+                        height: '376px',
+                        padding: '32px'
+                    }}
+                >
+                    <Skeleton placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={true}>
+                        <p>Hi, Bytedance dance dance.</p>
+                        <p>Hi, Bytedance dance dance.</p>
+                    </Skeleton>
+                </div>
             </Content>
             <Footer
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                padding: '20px',
-                color: 'var(--semi-color-text-2)',
-                backgroundColor: 'rgba(var(--semi-grey-0), 1)',
-              }}
-            >
-              <span
                 style={{
-                  display: 'flex',
-                  alignItems: 'center',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    padding: '20px',
+                    color: 'var(--semi-color-text-2)',
+                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',
                 }}
-              >
-                <IconBytedanceLogo size='large' style={{marginRight: '8px'}}/>
-                <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
-              </span>
-              <span>
-                <span style={{marginRight: '24px'}}>Customer Service</span>
-                <span>Feedback</span>
-              </span>
+            >
+                <span
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
+                >
+                    <IconBytedanceLogo size='large' style={{marginRight: '8px'}}/>
+                    <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
+                </span>
+                <span>
+                    <span style={{marginRight: '24px'}}>Customer Service</span>
+                    <span>Feedback</span>
+                </span>
             </Footer>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ### Top-Nav SideBar Layout
@@ -243,115 +243,115 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
     return (
         <Layout style={{border: '1px solid var(--semi-color-border)'}}>
             <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
-              <div >
-                 <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
-                  <Nav.Header>
-                    <IconSemiLogo style={{fontSize: 36}} />
-                  </Nav.Header>
-                  <span
-                    style={{
-                      color: 'var(--semi-color-text-2)'
-                    }}
-                  >
-                    <span
-                      style={{
-                        marginRight: '24px',
-                        color: 'var(--semi-color-text-0)',
-                        fontWeight: '600',
-                      }}>Semi Design</span>
-                    <span style={{marginRight: '24px'}}>Semi Theme</span>
-                    <span>Semi Blocks</span>
-                  </span>
-                  <Nav.Footer>
-                    <Button
-                      theme="borderless"
-                      icon = {<IconBell size="large"/>}
-                      style={{
-                        color:'var(--semi-color-text-2)',
-                        marginRight: '12px',
-                      }}
-                    />
-                    <Button
-                      theme="borderless"
-                      icon = {<IconHelpCircle size="large"/>}
-                      style={{
-                        color:'var(--semi-color-text-2)',
-                        marginRight: '12px',
-                      }}
-                    />
-                    <Avatar color='orange' size='small'>YJ</Avatar>
-                  </Nav.Footer>
-                </Nav>
-              </div>
+                <div >
+                    <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
+                        <Nav.Header>
+                            <IconSemiLogo style={{fontSize: 36}} />
+                        </Nav.Header>
+                        <span
+                            style={{
+                                color: 'var(--semi-color-text-2)'
+                            }}
+                        >
+                            <span
+                                style={{
+                                    marginRight: '24px',
+                                    color: 'var(--semi-color-text-0)',
+                                    fontWeight: '600',
+                                }}>Semi Design</span>
+                            <span style={{marginRight: '24px'}}>Semi Theme</span>
+                            <span>Semi Blocks</span>
+                        </span>
+                        <Nav.Footer>
+                            <Button
+                                theme="borderless"
+                                icon = {<IconBell size="large"/>}
+                                style={{
+                                    color:'var(--semi-color-text-2)',
+                                    marginRight: '12px',
+                                }}
+                            />
+                            <Button
+                                theme="borderless"
+                                icon = {<IconHelpCircle size="large"/>}
+                                style={{
+                                    color:'var(--semi-color-text-2)',
+                                    marginRight: '12px',
+                                }}
+                            />
+                            <Avatar color='orange' size='small'>YJ</Avatar>
+                        </Nav.Footer>
+                    </Nav>
+                </div>
             </Header>
             <Layout >
-              <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
-                  <Nav
-                      style={{ maxWidth: 220, height: '100%' }}
-                      defaultSelectedKeys={['Home']}
-                      items={[
-                          { itemKey: 'Home', text: 'Home', icon: <IconHome size="large" /> },
-                          { itemKey: 'Histogram', text: 'Histogram', icon: <IconHistogram size="large" /> },
-                          { itemKey: 'Live', text: 'Live', icon: <IconLive size="large" /> },
-                          { itemKey: 'Setting', text: 'Setting', icon: <IconSetting size="large" /> },
-                      ]}
-                      footer={{
-                          collapseButton: true,
-                      }}
-                  />
-              </Sider>
-              <Content
-                style={{
-                  padding: '24px',
-                  backgroundColor: 'var(--semi-color-bg-0)'
-                }}
-              >
-                <Breadcrumb
-                  style={{
-                    marginBottom: '24px'
-                  }}
-                  routes={['Home', 'Page Section', 'Ppage Ssection', 'Detail']} />
-                <div
-                  style={{
-                    borderRadius: '10px',
-                    border: '1px solid var(--semi-color-border)',
-                    height: '376px',
-                    padding: '32px'
-                  }}
+                <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+                    <Nav
+                        style={{ maxWidth: 220, height: '100%' }}
+                        defaultSelectedKeys={['Home']}
+                        items={[
+                            { itemKey: 'Home', text: 'Home', icon: <IconHome size="large" /> },
+                            { itemKey: 'Histogram', text: 'Histogram', icon: <IconHistogram size="large" /> },
+                            { itemKey: 'Live', text: 'Live', icon: <IconLive size="large" /> },
+                            { itemKey: 'Setting', text: 'Setting', icon: <IconSetting size="large" /> },
+                        ]}
+                        footer={{
+                            collapseButton: true,
+                        }}
+                    />
+                </Sider>
+                <Content
+                    style={{
+                        padding: '24px',
+                        backgroundColor: 'var(--semi-color-bg-0)'
+                    }}
                 >
-                  <Skeleton placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={true}>
-                      <p>Hi, Bytedance dance dance.</p>
-                      <p>Hi, Bytedance dance dance.</p>
-                  </Skeleton>
-                </div>
-              </Content>
+                    <Breadcrumb
+                        style={{
+                            marginBottom: '24px'
+                        }}
+                        routes={['Home', 'Page Section', 'Ppage Ssection', 'Detail']} />
+                    <div
+                        style={{
+                            borderRadius: '10px',
+                            border: '1px solid var(--semi-color-border)',
+                            height: '376px',
+                            padding: '32px'
+                        }}
+                    >
+                        <Skeleton placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={true}>
+                            <p>Hi, Bytedance dance dance.</p>
+                            <p>Hi, Bytedance dance dance.</p>
+                        </Skeleton>
+                    </div>
+                </Content>
             </Layout>
             <Footer
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                padding: '20px',
-                color: 'var(--semi-color-text-2)',
-                backgroundColor: 'rgba(var(--semi-grey-0), 1)',
-              }}
-            >
-              <span
                 style={{
-                  display: 'flex',
-                  alignItems: 'center',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    padding: '20px',
+                    color: 'var(--semi-color-text-2)',
+                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',
                 }}
-              >
-                <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
-                <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
-              </span>
-              <span>
-                <span style={{marginRight: '24px'}}>Customer Service</span>
-                <span>Feedback</span>
-              </span>
+            >
+                <span
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
+                >
+                    <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
+                    <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
+                </span>
+                <span>
+                    <span style={{marginRight: '24px'}}>Customer Service</span>
+                    <span>Feedback</span>
+                </span>
             </Footer>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ### SideBar Navigation
@@ -366,104 +366,104 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
     return (
         <Layout style={{border: '1px solid var(--semi-color-border)'}}>
             <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
-              <Nav
-                  defaultSelectedKeys={['Home']}
-                  style={{ maxWidth: 220, height: '100%' }}
-                  items={[
-                      { itemKey: 'Home', text: 'Home', icon: <IconHome size="large" /> },
-                      { itemKey: 'Histogram', text: 'Histogram', icon: <IconHistogram size="large" /> },
-                      { itemKey: 'Live', text: 'Live', icon: <IconLive size="large" /> },
-                      { itemKey: 'Setting', text: 'Setting', icon: <IconSetting size="large" /> },
-                  ]}
-                  header={{
-                      logo: <img src="//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/webcast_logo.svg" />,
-                      text: 'Webcast'
-                  }}
-                  footer={{
-                      collapseButton: true,
-                  }}
-              />
+                <Nav
+                    defaultSelectedKeys={['Home']}
+                    style={{ maxWidth: 220, height: '100%' }}
+                    items={[
+                        { itemKey: 'Home', text: 'Home', icon: <IconHome size="large" /> },
+                        { itemKey: 'Histogram', text: 'Histogram', icon: <IconHistogram size="large" /> },
+                        { itemKey: 'Live', text: 'Live', icon: <IconLive size="large" /> },
+                        { itemKey: 'Setting', text: 'Setting', icon: <IconSetting size="large" /> },
+                    ]}
+                    header={{
+                        logo: <img src="//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/webcast_logo.svg" />,
+                        text: 'Webcast'
+                    }}
+                    footer={{
+                        collapseButton: true,
+                    }}
+                />
             </Sider>
             <Layout>
                 <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
-                  <Nav
-                    mode='horizontal'
-                    footer={
-                      <>
-                        <Button
-                          theme="borderless"
-                          icon = {<IconBell size="large" />}
-                          style={{
-                            color:'var(--semi-color-text-2)',
-                            marginRight: '12px',
-                          }}
-                        />
-                        <Button
-                          theme="borderless"
-                          icon = {<IconHelpCircle size="large" />}
-                          style={{
-                            color:'var(--semi-color-text-2)',
-                            marginRight: '12px',
-                          }}
-                        />
-                        <Avatar color='orange' size='small'>YJ</Avatar>
-                      </>
-                    }
-                  >
-                </Nav>
+                    <Nav
+                        mode='horizontal'
+                        footer={
+                            <>
+                                <Button
+                                    theme="borderless"
+                                    icon = {<IconBell size="large" />}
+                                    style={{
+                                        color:'var(--semi-color-text-2)',
+                                        marginRight: '12px',
+                                    }}
+                                />
+                                <Button
+                                    theme="borderless"
+                                    icon = {<IconHelpCircle size="large" />}
+                                    style={{
+                                        color:'var(--semi-color-text-2)',
+                                        marginRight: '12px',
+                                    }}
+                                />
+                                <Avatar color='orange' size='small'>YJ</Avatar>
+                            </>
+                        }
+                    >
+                    </Nav>
                 </Header>
                 <Content
-                  style={{
-                    padding: '24px',
-                    backgroundColor: 'var(--semi-color-bg-0)'
-                  }}
-                >
-                  <Breadcrumb
                     style={{
-                      marginBottom: '24px'
+                        padding: '24px',
+                        backgroundColor: 'var(--semi-color-bg-0)'
                     }}
-                    routes={['Home', 'Page Section', 'Pagge Ssection', 'Detail']} />
-                  <div
-                    style={{
-                      borderRadius: '10px',
-                      border: '1px solid var(--semi-color-border)',
-                      height: '376px',
-                      padding: '32px'
-                    }}
-                  >
-                    <Skeleton placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={true}>
-                        <p>Hi, Bytedance dance dance.</p>
-                        <p>Hi, Bytedance dance dance.</p>
-                    </Skeleton>
-                  </div>
+                >
+                    <Breadcrumb
+                        style={{
+                            marginBottom: '24px'
+                        }}
+                        routes={['Home', 'Page Section', 'Pagge Ssection', 'Detail']} />
+                    <div
+                        style={{
+                            borderRadius: '10px',
+                            border: '1px solid var(--semi-color-border)',
+                            height: '376px',
+                            padding: '32px'
+                        }}
+                    >
+                        <Skeleton placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={true}>
+                            <p>Hi, Bytedance dance dance.</p>
+                            <p>Hi, Bytedance dance dance.</p>
+                        </Skeleton>
+                    </div>
                 </Content>
                 <Footer
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    padding: '20px',
-                    color: 'var(--semi-color-text-2)',
-                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',
-                  }}
-                >
-                  <span
                     style={{
-                      display: 'flex',
-                      alignItems: 'center',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '20px',
+                        color: 'var(--semi-color-text-2)',
+                        backgroundColor: 'rgba(var(--semi-grey-0), 1)',
                     }}
-                  >
-                    <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
-                    <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
-                  </span>
-                  <span>
-                    <span style={{marginRight: '24px'}}>Customer Service</span>
-                    <span>Feedback</span>
-                  </span>
+                >
+                    <span
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
+                        <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
+                    </span>
+                    <span>
+                        <span style={{marginRight: '24px'}}>Customer Service</span>
+                        <span>Feedback</span>
+                    </span>
                 </Footer>
             </Layout>
         </Layout>
-    )
-}
+    );
+};
 ```
 
 ## API Reference
@@ -489,7 +489,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 
 ### responsive map
 
-```jsx
+```text
 {
   xs: '(max-width: 575px)',
   sm: '(min-width: 576px)',

content/basic/layout/index.md

@@ -502,15 +502,15 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 
 ### responsive map
 
-```jsx
+```text
 {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)',
-}
+    xs: '(max-width: 575px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    xxl: '(min-width: 1600px)',
+};
 ```
 
 <!-- ## 相关物料

content/basic/space/index-en-US.md

@@ -27,7 +27,7 @@ import { Space, Button, Switch } from '@douyinfe/semi-ui';
         <Button type="tertiary">tertiary</Button>
         <Button type="warning">warning</Button>
     </Space>
-)
+);
 ```
 
 ### Alignment
@@ -73,8 +73,8 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
                 <Tag color='green' size='large'> tag </Tag>
             </Space>
         </Space>
-    )
-}
+    );
+};
 ```
 
 ### Spacing
@@ -126,7 +126,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
     </Tabs>
-)
+);
 ```
 
 ### Direction
@@ -144,7 +144,7 @@ import { Space, Button } from '@douyinfe/semi-ui';
         <Button theme='solid' type='primary'>button</Button>
         <Button theme='solid' type='primary'>button</Button>
     </Space>
-)
+);
 ```
 
 ### Wrap
@@ -161,7 +161,7 @@ import { Space, Button } from '@douyinfe/semi-ui';
             <Button theme='solid' type='secondary' key={idex}>button</Button>
         ))}
     </Space>
-)
+);
 ```
 
 ## API Reference

content/basic/space/index.md

@@ -27,7 +27,7 @@ import { Space, Button, Switch } from '@douyinfe/semi-ui';
         <Button type="tertiary">第三</Button>
         <Button type="warning">警告</Button>
     </Space>
-)
+);
 ```
 ### 对齐方式
 
@@ -71,8 +71,8 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
                 <Tag color='green' size='large'>标签</Tag>
             </Space>
         </Space>
-    )
-}
+    );
+};
 ```
 
 ### 间距尺寸
@@ -124,7 +124,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
     </Tabs>
-)
+);
 ```
 
 ### 间距方向
@@ -142,7 +142,7 @@ import { Space, Button } from '@douyinfe/semi-ui';
         <Button theme='solid' type='primary'>按钮</Button>
         <Button theme='solid' type='primary'>按钮</Button>
     </Space>
-)
+);
 ```
 
 ### 设置换行
@@ -159,7 +159,7 @@ import { Space, Button } from '@douyinfe/semi-ui';
             <Button theme='solid' type='secondary' key={idex}>按钮</Button>
         ))}
     </Space>
-)
+);
 ```
 
 ## API参考

content/basic/typography/index-en-US.md

@@ -30,17 +30,17 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Title } = Typography;
-  return (
-    <div>
-        <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
-        <Title with={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
-        <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
-        <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
-        <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
-        <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
-    </div>
-  );
+    const { Title } = Typography;
+    return (
+        <div>
+            <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
+            <Title with={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
+            <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
+            <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
+            <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
+            <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
+        </div>
+    );
 }
 ```
 
@@ -53,48 +53,48 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-  return (
-    <div>
-        <Text>Text</Text>
-        <br />
-        <br />
-        <Text type="secondary">Secondary</Text>
-        <br />
-        <br />
-        <Text type="tertiary">Tertiary v>=1.2.0</Text>
-        <br />
-        <br />
-        <Text type="quaternary">Quaternary v>=1.2.0</Text>
-        <br />
-        <br />
-        <Text type="warning">Warning</Text>
-        <br />
-        <br />
-        <Text type="success">Success v>=1.7.0</Text>
-        <br />
-        <br />
-        <Text type="danger">Danger</Text>
-        <br />
-        <br />
-        <Text disabled>Disabled</Text>
-        <br />
-        <br />
-        <Text mark>Default Mark</Text>
-        <br />
-        <br />
-        <Text code>Example Code</Text>
-        <br />
-        <br />
-        <Text underline>Underline</Text>
-        <br />
-        <br />
-        <Text delete>Deleted</Text>
-        <br />
-        <br />
-        <Text strong>Strong</Text>
-    </div>
-  );
+    const { Text } = Typography;
+    return (
+        <div>
+            <Text>Text</Text>
+            <br />
+            <br />
+            <Text type="secondary">Secondary</Text>
+            <br />
+            <br />
+            <Text type="tertiary">{'Tertiary v>=1.2.0'}</Text>
+            <br />
+            <br />
+            <Text type="quaternary">{'Quaternary v>=1.2.0'}</Text>
+            <br />
+            <br />
+            <Text type="warning">Warning</Text>
+            <br />
+            <br />
+            <Text type="success">{'Success v>=1.7.0'}</Text>
+            <br />
+            <br />
+            <Text type="danger">Danger</Text>
+            <br />
+            <br />
+            <Text disabled>Disabled</Text>
+            <br />
+            <br />
+            <Text mark>Default Mark</Text>
+            <br />
+            <br />
+            <Text code>Example Code</Text>
+            <br />
+            <br />
+            <Text underline>Underline</Text>
+            <br />
+            <br />
+            <Text delete>Deleted</Text>
+            <br />
+            <br />
+            <Text strong>Strong</Text>
+        </div>
+    );
 }
 ```
 
@@ -106,18 +106,18 @@ import { Typography } from '@douyinfe/semi-ui';
 import { IconLink } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Text } = Typography;
-  return (
-    <div>
-      <Text link={{ href: 'https://semi.design/' }}>Link</Text>
-      <br />
-      <br />
-      <Text link={{ href: 'https://semi.design/' }}>Open Website</Text>
-      <br />
-      <br />
-      <Text link icon={<IconLink />} underline>Link</Text>
-    </div>
-  )
+    const { Text } = Typography;
+    return (
+        <div>
+            <Text link={{ href: 'https://semi.design/' }}>Link</Text>
+            <br />
+            <br />
+            <Text link={{ href: 'https://semi.design/' }}>Open Website</Text>
+            <br />
+            <br />
+            <Text link icon={<IconLink />} underline>Link</Text>
+        </div>
+    );
 }
 ```
 
@@ -130,20 +130,20 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Title } = Typography;
-  return (
-    <div>
-        <Title heading={5}>Default Spacing</Title>
-        <Paragraph>
-            Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-        <br />
-        <Title heading={5}>Extended Spacing</Title>
-        <Paragraph spacing="extended">
-            Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-    </div>
-  );
+    const { Paragraph, Title } = Typography;
+    return (
+        <div>
+            <Title heading={5}>Default Spacing</Title>
+            <Paragraph>
+                {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+            <br />
+            <Title heading={5}>Extended Spacing</Title>
+            <Paragraph spacing="extended">
+                {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+        </div>
+    );
 }
 ```
 
@@ -156,20 +156,20 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Text } = Typography;
-  return (
-    <div>
-        <Text>Normal</Text>
-        <Paragraph spacing="extended">
-            Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-        <br />
-        <Text size='small'>Small</Text>
-        <Paragraph size='small'>
-            Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-    </div>
-  );
+    const { Paragraph, Text } = Typography;
+    return (
+        <div>
+            <Text>Normal</Text>
+            <Paragraph spacing="extended">
+                {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+            <br />
+            <Text size='small'>Small</Text>
+            <Paragraph size='small'>
+                {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+        </div>
+    );
 }
 ```
 
@@ -179,22 +179,22 @@ Copyable text.
 
 ```jsx live=true
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
+import { Typography, TextArea } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Text } = Typography;
-
-  return (
-    <div>
-        <Paragraph copyable>Click the right icon to copy text.</Paragraph>
-        <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>Click to copy text.</Paragraph>
-        <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.'}) }}>Click the right icon to copy.</Paragraph>
-        <br/>
-        <Text type="secondary">Paste here: </Text>
-        <br/>
-        <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
-    </div>
-  );
+    const { Paragraph, Text } = Typography;
+
+    return (
+        <div>
+            <Paragraph copyable>Click the right icon to copy text.</Paragraph>
+            <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>Click to copy text.</Paragraph>
+            <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.'}) }}>Click the right icon to copy.</Paragraph>
+            <br/>
+            <Text type="secondary">Paste here: </Text>
+            <br/>
+            <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
+        </div>
+    );
 }
 ```
 
@@ -208,46 +208,46 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Text, Title } = Typography;
-
-  return (
-    <div>
-        <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
-            This is a supercalifragilisticexpialidocious title
-        </Title>
-        <br />
-        <Text 
-          ellipsis={{ 
-            showTooltip:{
-              opts: { content: 'This is a supercalifragilisticexpialidocious tooltip' }
-            }
-          }}
-          style={{ width: 150 }}
-        >
-          Custom tooltip text if you need
-        </Text>
-        <br />
-        <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>
-            This is a supercalifragilisticexpialidocious link
-        </Text>
-        <br/>
-        <Paragraph ellipsis={{ suffix: '-Macbeth' }} style={{ width: 300 }}>
-            With suffix: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-        <br/>
-        <Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
-            Multi-line ellipsis: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-        <br/>
-        <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
-            With Popover: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-        <br/>
-        <Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true, collapseText: 'Show Less', onExpand: (bool, e) => console.log(bool, e) }} style={{ width: 300 }}>
-            Expandable and collapsible: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
-        </Paragraph>
-    </div>
-  );
+    const { Paragraph, Text, Title } = Typography;
+
+    return (
+        <div>
+            <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
+                This is a supercalifragilisticexpialidocious title
+            </Title>
+            <br />
+            <Text 
+                ellipsis={{ 
+                    showTooltip:{
+                        opts: { content: 'This is a supercalifragilisticexpialidocious tooltip' }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                Custom tooltip text if you need
+            </Text>
+            <br />
+            <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>
+                This is a supercalifragilisticexpialidocious link
+            </Text>
+            <br/>
+            <Paragraph ellipsis={{ suffix: '-Macbeth' }} style={{ width: 300 }}>
+                {`With suffix: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+            <br/>
+            <Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
+                {`Multi-line ellipsis: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+            <br/>
+            <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
+                {`With Popover: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+            <br/>
+            <Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true, collapseText: 'Show Less', onExpand: (bool, e) => console.log(bool, e) }} style={{ width: 300 }}>
+                {`Expandable and collapsible: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
+            </Paragraph>
+        </div>
+    );
 }
 ```
 
@@ -260,44 +260,44 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-
-  return (
-    <div>
-      <Text 
-        ellipsis={{ 
-          showTooltip:{
-            opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation' }
-          }
-        }}
-        style={{ width: 150 }}
-      >
-        Customized configuration can be made on demand when long text is truncated
-      </Text>
-      <br />
-      <Text 
-        ellipsis={{ 
-          showTooltip:{
-            opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
-          }
-        }}
-        style={{ width: 150 }}
-      >
-        Customized configuration can be made on demand when long text is truncated
-      </Text>
-      <br />
-      <Text 
-        ellipsis={{
-          showTooltip:{
-            opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
-          }
-        }}
-        style={{ width: 150 }}
-      >
-        Customized configuration can be made on demand when long text is truncated
-      </Text>
-    </div>
-  );
+    const { Text } = Typography;
+
+    return (
+        <div>
+            <Text 
+                ellipsis={{ 
+                    showTooltip:{
+                        opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation' }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                Customized configuration can be made on demand when long text is truncated
+            </Text>
+            <br />
+            <Text 
+                ellipsis={{ 
+                    showTooltip:{
+                        opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                Customized configuration can be made on demand when long text is truncated
+            </Text>
+            <br />
+            <Text 
+                ellipsis={{
+                    showTooltip:{
+                        opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                Customized configuration can be made on demand when long text is truncated
+            </Text>
+        </div>
+    );
 }
 ```
 

content/basic/typography/index.md

@@ -25,17 +25,17 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Title } = Typography;
-  return (
-    <div>
-        <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
-        <Title heading={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
-        <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
-        <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
-        <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
-        <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
-    </div>
-  );
+    const { Title } = Typography;
+    return (
+        <div>
+            <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
+            <Title heading={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
+            <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
+            <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
+            <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
+            <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
+        </div>
+    );
 }
 ```
 
@@ -46,48 +46,48 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-  return (
-    <div>
-        <Text>Text</Text>
-        <br />
-        <br />
-        <Text type="secondary">Secondary</Text>
-        <br />
-        <br />
-        <Text type="tertiary">Tertiary v>=1.2.0</Text>
-        <br />
-        <br />
-        <Text type="quaternary">Quaternary v>=1.2.0</Text>
-        <br />
-        <br />
-        <Text type="warning">Warning</Text>
-        <br />
-        <br />
-        <Text type="danger">Danger</Text>
-        <br />
-        <br />
-        <Text type="success">Success v>=1.7.0</Text>
-        <br />
-        <br />
-        <Text disabled>Disabled</Text>
-        <br />
-        <br />
-        <Text mark>Default Mark</Text>
-        <br />
-        <br />
-        <Text code>Example Code</Text>
-        <br />
-        <br />
-        <Text underline>Underline</Text>
-        <br />
-        <br />
-        <Text delete>Deleted</Text>
-        <br />
-        <br />
-        <Text strong>Strong</Text>
-    </div>
-  );
+    const { Text } = Typography;
+    return (
+        <div>
+            <Text>Text</Text>
+            <br />
+            <br />
+            <Text type="secondary">Secondary</Text>
+            <br />
+            <br />
+            <Text type="tertiary">{`Tertiary v>=1.2.0`}</Text>
+            <br />
+            <br />
+            <Text type="quaternary">{`Quaternary v>=1.2.0`}</Text>
+            <br />
+            <br />
+            <Text type="warning">Warning</Text>
+            <br />
+            <br />
+            <Text type="danger">Danger</Text>
+            <br />
+            <br />
+            <Text type="success">{`Success v>=1.7.0`}</Text>
+            <br />
+            <br />
+            <Text disabled>Disabled</Text>
+            <br />
+            <br />
+            <Text mark>Default Mark</Text>
+            <br />
+            <br />
+            <Text code>Example Code</Text>
+            <br />
+            <br />
+            <Text underline>Underline</Text>
+            <br />
+            <br />
+            <Text delete>Deleted</Text>
+            <br />
+            <br />
+            <Text strong>Strong</Text>
+        </div>
+    );
 }
 ```
 链接文本支持传入 `object`，将对应的属性挂在 `<a>` 标签上。  
@@ -98,18 +98,18 @@ import { Typography } from '@douyinfe/semi-ui';
 import { IconLink } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Text } = Typography;
-  return (
-    <div>
-      <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
-      <br />
-      <br />
-      <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
-      <br />
-      <br />
-      <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
-    </div>
-  )
+    const { Text } = Typography;
+    return (
+        <div>
+            <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
+            <br />
+            <br />
+            <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
+            <br />
+            <br />
+            <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
+        </div>
+    );
 }
 ```
 
@@ -120,20 +120,20 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Title } = Typography;
-  return (
-    <div>
-        <Title heading={5}>默认行距</Title>
-        <Paragraph>
-            Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-        <br />
-        <Title heading={5}>宽松行距</Title>
-        <Paragraph spacing="extended">
-            Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-    </div>
-  );
+    const { Paragraph, Title } = Typography;
+    return (
+        <div>
+            <Title heading={5}>默认行距</Title>
+            <Paragraph>
+                Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+            <br />
+            <Title heading={5}>宽松行距</Title>
+            <Paragraph spacing="extended">
+                Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+        </div>
+    );
 }
 ```
 
@@ -144,20 +144,20 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Text } = Typography;
-  return (
-    <div>
-        <Text>正常文本</Text>
-        <Paragraph spacing="extended">
-            Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-        <br />
-        <Text size='small'>小文本</Text>
-        <Paragraph size='small'>
-            Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-    </div>
-  );
+    const { Paragraph, Text } = Typography;
+    return (
+        <div>
+            <Text>正常文本</Text>
+            <Paragraph spacing="extended">
+                Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+            <br />
+            <Text size='small'>小文本</Text>
+            <Paragraph size='small'>
+                Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+        </div>
+    );
 }
 ```
 
@@ -165,22 +165,22 @@ function Demo() {
 支持文本的复制。
 ```jsx live=true
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
+import { Typography, TextArea } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Text } = Typography;
-
-  return (
-    <div>
-        <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
-        <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>点击复制文本。</Paragraph>
-        <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功'}) }}>点击右边的图标复制文本。</Paragraph>
-        <br/>
-        <Text type="secondary">粘贴区域：</Text>
-        <br/>
-        <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
-    </div>
-  );
+    const { Paragraph, Text } = Typography;
+
+    return (
+        <div>
+            <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
+            <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>点击复制文本。</Paragraph>
+            <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功'}) }}>点击右边的图标复制文本。</Paragraph>
+            <br/>
+            <Text type="secondary">粘贴区域：</Text>
+            <br/>
+            <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
+        </div>
+    );
 }
 ```
 
@@ -194,47 +194,47 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Paragraph, Title, Text } = Typography;
-
-  return (
-    <div>
-        <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
-            是一个很长很长很长很长5号标题
-        </Title>
-        <br />
-        <Text 
-          ellipsis={{ 
-            showTooltip:{
-              opts: { content: '这是自定义要展示的内容' }
-            }
-          }}
-          style={{ width: 150 }}
-        >
-          可以自定义浮层里的展示内容试试看吧
-        </Text>
-        <br/>
-        {/* link还可以传入object，如link={{ href: 'https://semi.design/zh-CN/basic/typography', target: '_blank' }} */}
-        <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>
-            是一个很长很长很长很长的链接
-        </Text>
-        <br/>
-        <Paragraph ellipsis={{ suffix: '小尾巴' }} style={{ width: 300 }}>
-            有后缀的情况：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。
-        </Paragraph>
-        <br/>
-        <Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
-            这是一个多行截断的例子：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-        <br/>
-        <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
-            多行截断，展示 Popover：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-        <br/>
-        <Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true, collapseText: '折叠我吧', onExpand: (bool, e) => console.log(bool, e) }} style={{ width: 300 }}>
-            支持展开和折叠：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-        </Paragraph>
-    </div>
-  );
+    const { Paragraph, Title, Text } = Typography;
+
+    return (
+        <div>
+            <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
+                是一个很长很长很长很长5号标题
+            </Title>
+            <br />
+            <Text 
+                ellipsis={{ 
+                    showTooltip:{
+                        opts: { content: '这是自定义要展示的内容' }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                可以自定义浮层里的展示内容试试看吧
+            </Text>
+            <br/>
+            {/* link还可以传入object，如link={{ href: 'https://semi.design/zh-CN/basic/typography', target: '_blank' }} */}
+            <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>
+                是一个很长很长很长很长的链接
+            </Text>
+            <br/>
+            <Paragraph ellipsis={{ suffix: '小尾巴' }} style={{ width: 300 }}>
+                有后缀的情况：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。
+            </Paragraph>
+            <br/>
+            <Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
+                这是一个多行截断的例子：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+            <br/>
+            <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
+                多行截断，展示 Popover：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+            <br/>
+            <Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true, collapseText: '折叠我吧', onExpand: (bool, e) => console.log(bool, e) }} style={{ width: 300 }}>
+                支持展开和折叠：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Paragraph>
+        </div>
+    );
 }
 ```
 
@@ -247,44 +247,44 @@ import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-
-  return (
-    <div>
-      <Text 
-        ellipsis={{ 
-          showTooltip:{
-            opts: { content: '架构|Data-inf|bytegraph.cheetah.user_relation' }
-          }
-        }}
-        style={{ width: 150 }}
-      >
-        有问题的超长文本发生截断时可按需进行自定义配置
-      </Text>
-      <br />
-      <Text 
-        ellipsis={{ 
-          showTooltip:{
-            opts: { content: '架构|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
-          }
-        }}
-        style={{ width: 150 }}
-      >
-        覆盖类名超长文本发生截断时可使用类名覆盖进行自定义配置
-      </Text>
-      <br />
-      <Text 
-        ellipsis={{
-          showTooltip:{
-            opts: { content: '架构|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
-          }
-        }}
-        style={{ width: 150 }}
-      >
-        覆盖style超长文本发生截断时可使用style进行自定义配置
-      </Text>
-    </div>
-  );
+    const { Text } = Typography;
+
+    return (
+        <div>
+            <Text 
+                ellipsis={{ 
+                    showTooltip:{
+                        opts: { content: '架构|Data-inf|bytegraph.cheetah.user_relation' }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                有问题的超长文本发生截断时可按需进行自定义配置
+            </Text>
+            <br />
+            <Text 
+                ellipsis={{ 
+                    showTooltip:{
+                        opts: { content: '架构|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                覆盖类名超长文本发生截断时可使用类名覆盖进行自定义配置
+            </Text>
+            <br />
+            <Text 
+                ellipsis={{
+                    showTooltip:{
+                        opts: { content: '架构|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
+                    }
+                }}
+                style={{ width: 150 }}
+            >
+                覆盖style超长文本发生截断时可使用style进行自定义配置
+            </Text>
+        </div>
+    );
 }
 ```
 

content/feedback/banner/index-en-US.md

@@ -27,36 +27,36 @@ import { Banner, Layout, Button } from '@douyinfe/semi-ui';
 () => {
     const [visible, setVisible] = useState(false);
     const changeVisible = () => {
-      setVisible(!visible);
+        setVisible(!visible);
     };
     const { Header, Footer, Content } = Layout;
     const banner = (
-      <Banner 
-          onClose={changeVisible}
-          description="A pre-released version is available"
-      />
+        <Banner 
+            onClose={changeVisible}
+            description="A pre-released version is available"
+        />
     );
     return (
         <>
-          <Layout className='components-layout-demo banner-basic'>
-              <Header>Header</Header>
-              {visible? banner : null}
-              <Content>Content</Content>
-              <Footer>Footer</Footer>
-          </Layout>
-          <Button
-            onClick={changeVisible}
-            style={{
-              display: 'block',
-              width: '120px',
-              margin: '0 auto'
-            }}
-          >
-            { visible ? 'Hide Banner' : 'Show Banner' }
-          </Button>
+            <Layout className='components-layout-demo banner-basic'>
+                <Header>Header</Header>
+                {visible? banner : null}
+                <Content>Content</Content>
+                <Footer>Footer</Footer>
+            </Layout>
+            <Button
+                onClick={changeVisible}
+                style={{
+                    display: 'block',
+                    width: '120px',
+                    margin: '0 auto'
+                }}
+            >
+                { visible ? 'Hide Banner' : 'Show Banner' }
+            </Button>
         </>
-      );
-}
+    );
+};
 ```
 
 ### Types
@@ -68,28 +68,28 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Banner 
-      type="info"
-      description="A pre-released version is available."
-    />
-    <br/>
-    <Banner 
-      type="warning"
-      description="This version of the document is going to expire after 4 days."
-    />
-    <br/>
-    <Banner 
-      type="danger"
-      description="This document was deprecated since Jan 1, 2019."
-    />
-    <br/>
-    <Banner 
-      type="success"
-      description="You are viewing the latest version of this document."
-    />
-  </>
-)
+    <>
+        <Banner 
+            type="info"
+            description="A pre-released version is available."
+        />
+        <br/>
+        <Banner 
+            type="warning"
+            description="This version of the document is going to expire after 4 days."
+        />
+        <br/>
+        <Banner 
+            type="danger"
+            description="This document was deprecated since Jan 1, 2019."
+        />
+        <br/>
+        <Banner 
+            type="success"
+            description="You are viewing the latest version of this document."
+        />
+    </>
+);
 ```
 
 
@@ -102,28 +102,28 @@ import React from 'react';
 import { Banner, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
+    const { Text } = Typography;
   
-  return (
-    <div style={{width: 640 }} className="components-banner-demo">
-      <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>Don't know AppKey?</div>}
-        description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
-      /><br/>
-      <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>Don't know AppKey?</div>}
-        description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
-      /><br/>
-      <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>Don't know AppKey?</div>}
-        description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
-      /><br/>
-      <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>Don't know AppKey?</div>}
-        description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
-      />
-    </div>
-  );
+    return (
+        <div style={{width: 640 }} className="components-banner-demo">
+            <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
+            /><br/>
+            <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
+            /><br/>
+            <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
+            /><br/>
+            <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
+            />
+        </div>
+    );
 }
 ```
 
@@ -151,22 +151,22 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-  <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
-    <Banner
-      fullMode={false}
-      title="Title"
-      type="warning"
-      bordered
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
-    >
-        <div className="semi-modal-footer">
-            <button className="semi-button semi-button-tertiary semi-button-light" type="button">No, thanks.</button>
-            <button className="semi-button semi-button-warning" type="button">Sounds great!</button>
-        </div>
-    </Banner>
-    <br/>
-  </div>
-)
+    <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
+        <Banner
+            fullMode={false}
+            title="Title"
+            type="warning"
+            bordered
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+        >
+            <div className="semi-modal-footer">
+                <button className="semi-button semi-button-tertiary semi-button-light" type="button">No, thanks.</button>
+                <button className="semi-button semi-button-warning" type="button">Sounds great!</button>
+            </div>
+        </Banner>
+        <br/>
+    </div>
+);
 ```
 
 ## API Reference

content/feedback/banner/index.md

@@ -26,36 +26,36 @@ import { Banner, Layout, Button } from '@douyinfe/semi-ui';
 () => {
     const [visible, setVisible] = useState(false);
     const changeVisible = () => {
-      setVisible(!visible);
+        setVisible(!visible);
     };
     const { Header, Footer, Content } = Layout;
     const banner = (
-      <Banner 
-          onClose={changeVisible}
-          description="A pre-released version is available"
-      />
+        <Banner 
+            onClose={changeVisible}
+            description="A pre-released version is available"
+        />
     );
     return (
         <>
-          <Layout className='components-layout-demo banner-basic'>
-              <Header>Header</Header>
-              {visible? banner : null}
-              <Content>Content</Content>
-              <Footer>Footer</Footer>
-          </Layout>
-          <Button
-            onClick={changeVisible}
-            style={{
-              display: 'block',
-              width: '120px',
-              margin: '0 auto'
-            }}
-          >
-            { visible ? 'Hide Banner' : 'Show Banner' }
-          </Button>
+            <Layout className='components-layout-demo banner-basic'>
+                <Header>Header</Header>
+                {visible? banner : null}
+                <Content>Content</Content>
+                <Footer>Footer</Footer>
+            </Layout>
+            <Button
+                onClick={changeVisible}
+                style={{
+                    display: 'block',
+                    width: '120px',
+                    margin: '0 auto'
+                }}
+            >
+                { visible ? 'Hide Banner' : 'Show Banner' }
+            </Button>
         </>
-      );
-}
+    );
+};
 ```
 
 ### 不同类型
@@ -67,28 +67,28 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Banner 
-      type="info"
-      description="A pre-released version is available."
-    />
-    <br/>
-    <Banner 
-      type="warning"
-      description="This version of the document is going to expire after 4 days."
-    />
-    <br/>
-    <Banner 
-      type="danger"
-      description="This document was deprecated since Jan 1, 2019."
-    />
-    <br/>
-    <Banner 
-      type="success"
-      description="You are viewing the latest version of this document."
-    />
-  </>
-)
+    <>
+        <Banner 
+            type="info"
+            description="A pre-released version is available."
+        />
+        <br/>
+        <Banner 
+            type="warning"
+            description="This version of the document is going to expire after 4 days."
+        />
+        <br/>
+        <Banner 
+            type="danger"
+            description="This document was deprecated since Jan 1, 2019."
+        />
+        <br/>
+        <Banner 
+            type="success"
+            description="You are viewing the latest version of this document."
+        />
+    </>
+);
 ```
 
 
@@ -101,28 +101,28 @@ import React from 'react';
 import { Banner, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
+    const { Text } = Typography;
   
-  return (
-    <div style={{width: 640 }} className="components-banner-demo">
-      <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
-        description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
-      /><br/>
-      <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
-        description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
-      /><br/>
-      <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
-        description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
-      /><br/>
-      <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
-        title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
-        description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
-      />
-    </div>
-  );
+    return (
+        <div style={{width: 640 }} className="components-banner-demo">
+            <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
+            /><br/>
+            <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
+            /><br/>
+            <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
+            /><br/>
+            <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
+                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
+            />
+        </div>
+    );
 }
 ```
 
@@ -150,22 +150,22 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-  <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
-    <Banner
-      fullMode={false}
-      title="Title"
-      type="warning"
-      bordered
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
-    >
-        <div className="semi-modal-footer">
-            <button className="semi-button semi-button-tertiary semi-button-light" type="button">No, thanks.</button>
-            <button className="semi-button semi-button-warning" type="button">Sounds great!</button>
-        </div>
-    </Banner>
-    <br/>
-  </div>
-)
+    <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
+        <Banner
+            fullMode={false}
+            title="Title"
+            type="warning"
+            bordered
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+        >
+            <div className="semi-modal-footer">
+                <button className="semi-button semi-button-tertiary semi-button-light" type="button">No, thanks.</button>
+                <button className="semi-button semi-button-warning" type="button">Sounds great!</button>
+            </div>
+        </Banner>
+        <br/>
+    </div>
+);
 ```
 
 ## API参考

content/feedback/notification/index-en-US.md

@@ -26,16 +26,16 @@ import React from 'react';
 import { Notification, Button } from '@douyinfe/semi-ui';
 
 () => (
-  <Button
-    onClick={()=> Notification.open({
-      title: 'Hi, Bytedance',
-      content: 'ies dance dance dance',
-      with: 3
-    })}
-  >
-    Display Notification
-  </Button>
-)
+    <Button
+        onClick={()=> Notification.open({
+            title: 'Hi, Bytedance',
+            content: 'ies dance dance dance',
+            with: 3
+        })}
+    >
+        Display Notification
+    </Button>
+);
 
 ```
 
@@ -48,29 +48,29 @@ import React from 'react';
 import { Notification, Button, ButtonGroup } from '@douyinfe/semi-ui';
 
 () => {
-  let opts = {
-    with: 3,
-    Position: 'topRight',
-    content: 'semi-ui-notification',
-    title: 'Hi bytedance',
-  };
-
-  return (
-    <>
-      <ButtonGroup>
-        <Button onClick={() => Notification.info({...opts, Position: 'top'})}>top</Button>
-        <Button onClick={() => Notification.info({...opts, position: 'topLeft'})}>topLeft</Button>
-        <Button onClick={() => Notification.info(opts)}>topRight</Button>
-      </ButtonGroup>
-      <br/><br/>
-      <ButtonGroup>
-        <Button onClick={() => Notification.info({...opts, position: 'bottom'})}>bottom</Button>
-        <Button onClick={() => Notification.info({...opts, position: 'bottomRight'})}>bottomRight</Button>
-        <Button onClick={() => Notification.info({...opts, position: 'bottomLeft'})}>bottomLeft</Button>
-      </ButtonGroup>
-    </>
-  )
-}
+    let opts = {
+        with: 3,
+        Position: 'topRight',
+        content: 'semi-ui-notification',
+        title: 'Hi bytedance',
+    };
+
+    return (
+        <>
+            <ButtonGroup>
+                <Button onClick={() => Notification.info({...opts, Position: 'top'})}>top</Button>
+                <Button onClick={() => Notification.info({...opts, position: 'topLeft'})}>topLeft</Button>
+                <Button onClick={() => Notification.info(opts)}>topRight</Button>
+            </ButtonGroup>
+            <br/><br/>
+            <ButtonGroup>
+                <Button onClick={() => Notification.info({...opts, position: 'bottom'})}>bottom</Button>
+                <Button onClick={() => Notification.info({...opts, position: 'bottomRight'})}>bottomRight</Button>
+                <Button onClick={() => Notification.info({...opts, position: 'bottomLeft'})}>bottomLeft</Button>
+            </ButtonGroup>
+        </>
+    );
+};
 ```
 
 ### With Icons
@@ -83,50 +83,50 @@ import { Notification, Button } from '@douyinfe/semi-ui';
 import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
 
 () => {
-  let opts = {
-    title: 'Hi, Bytedance',
-    content: 'ies dance dance dance',
-    duration: 3,
-  };
-
-  return (
-    <>
-    <h5>Default Icon</h5>
-    <Button type='primary' onClick={()=>Notification.success(opts)} style={{margin: 4}}>
-      Success
-    </Button>
-    <Button onClick={() => Notification.info(opts)} style={{margin: 4}}>
-      Info
-    </Button>
-    <Button type="warning" onClick={()=>Notification.warning(opts)} style={{margin: 4}}>
-      Warning
-    </Button>
-    <Button type="danger" onClick={()=>Notification.error(opts)} style={{margin: 4}}>
-      Error
-    </Button>
-    <h5>Customized Icon</h5>
-    <Button
-      icon={<IconToutiaoLogo />}
-      style={{ marginRight: 5 }}
-      onClick={() =>
-          Notification.info({
-              ...opts,
-              icon: <IconToutiaoLogo style={{ color: 'red' }} />,
-          })
-      }
-    ></Button>
-    <Button
-      icon={<IconVigoLogo />}
-      style={{ marginRight: 5 }}
-      onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo /> })}
-    ></Button>
-    <Button
-      icon={<IconVigoLogo />}
-      onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} />  })}
-    ></Button>
-    </>
-  )
-}
+    let opts = {
+        title: 'Hi, Bytedance',
+        content: 'ies dance dance dance',
+        duration: 3,
+    };
+
+    return (
+        <>
+            <h5>Default Icon</h5>
+            <Button type='primary' onClick={()=>Notification.success(opts)} style={{margin: 4}}>
+                Success
+            </Button>
+            <Button onClick={() => Notification.info(opts)} style={{margin: 4}}>
+                Info
+            </Button>
+            <Button type="warning" onClick={()=>Notification.warning(opts)} style={{margin: 4}}>
+                Warning
+            </Button>
+            <Button type="danger" onClick={()=>Notification.error(opts)} style={{margin: 4}}>
+                Error
+            </Button>
+            <h5>Customized Icon</h5>
+            <Button
+                icon={<IconToutiaoLogo />}
+                style={{ marginRight: 5 }}
+                onClick={() =>
+                    Notification.info({
+                        ...opts,
+                        icon: <IconToutiaoLogo style={{ color: 'red' }} />,
+                    })
+                }
+            ></Button>
+            <Button
+                icon={<IconVigoLogo />}
+                style={{ marginRight: 5 }}
+                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo /> })}
+            ></Button>
+            <Button
+                icon={<IconVigoLogo />}
+                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} />  })}
+            ></Button>
+        </>
+    );
+};
 ```
 
 ### Colored Background
@@ -137,36 +137,36 @@ import React from 'react';
 import { Notification, Button } from '@douyinfe/semi-ui';
 
 () => {
-  let opts = {
-     title: 'Hi, Bytedance',
-    content: 'Hi, Bytedance dance dance',
-    duration: 3,
-    theme: 'light'
-  };
-
-  return (
-    <>
-    <Button onClick={() => Notification.info(opts)}>
-      Info
-    </Button>
-    <br/>
-    <br/>
-    <Button onClick={() => Notification.success(opts)}>
-      Success
-    </Button>
-    <br/>
-    <br/>
-    <Button type="warning" onClick={() => Notification.warning(opts)}>
-      Warning
-    </Button>
-    <br/>
-    <br/>
-    <Button type="danger" onClick={() => Notification.error(opts)}>
-      Error
-    </Button>
-    </>
-  )
-}
+    let opts = {
+        title: 'Hi, Bytedance',
+        content: 'Hi, Bytedance dance dance',
+        duration: 3,
+        theme: 'light'
+    };
+
+    return (
+        <>
+            <Button onClick={() => Notification.info(opts)}>
+                Info
+            </Button>
+            <br/>
+            <br/>
+            <Button onClick={() => Notification.success(opts)}>
+                Success
+            </Button>
+            <br/>
+            <br/>
+            <Button type="warning" onClick={() => Notification.warning(opts)}>
+                Warning
+            </Button>
+            <br/>
+            <br/>
+            <Button type="danger" onClick={() => Notification.error(opts)}>
+                Error
+            </Button>
+        </>
+    );
+};
 ```
 
 ### Custom Children with Link
@@ -178,29 +178,29 @@ import React from 'react';
 import { Notification, Button, Typography } from '@douyinfe/semi-ui';
 
 () => {
-  const { Text } = Typography;
-
-  let opts = {
-    title: 'This is a title',
-    content: (
-      <>
-       <div>Hi, Bytedance dance dance</div>
-        <div style={{marginTop: 8}}>
-          <Text link>More Info</Text>
-          <Text link style={{marginLeft: 20}}>Show Later</Text>
-        </div>
-      </>),
-    duration: 3,
-  };
-
-  return (
-    <Button
-      onClick={() => Notification.info(opts)}
-    >
-      Display Notification
-    </Button>
-  )
-}
+    const { Text } = Typography;
+
+    let opts = {
+        title: 'This is a title',
+        content: (
+            <>
+                <div>Hi, Bytedance dance dance</div>
+                <div style={{marginTop: 8}}>
+                    <Text link>More Info</Text>
+                    <Text link style={{marginLeft: 20}}>Show Later</Text>
+                </div>
+            </>),
+        duration: 3,
+    };
+
+    return (
+        <Button
+            onClick={() => Notification.info(opts)}
+        >
+            Display Notification
+        </Button>
+    );
+};
 ```
 
 ### Delay
@@ -212,17 +212,17 @@ import React from 'react';
 import { Notification, Button } from '@douyinfe/semi-ui';
 
 () => {
-  let opts = {
-    content: 'Hi, Bytedance dance dance',
-    duration: 10,
-  };
-
-  return (
-    <Button onClick={() => Notification.info(opts)}>
-      Close After 10s
-    </Button>
-  )
-}
+    let opts = {
+        content: 'Hi, Bytedance dance dance',
+        duration: 10,
+    };
+
+    return (
+        <Button onClick={() => Notification.info(opts)}>
+            Close After 10s
+        </Button>
+    );
+};
 ```
 
 ### Manual Close
@@ -234,33 +234,33 @@ import React from 'react';
 import { Notification, Button } from '@douyinfe/semi-ui';
 
 () => {
-  let opts = {
-    content: 'Not auto close',
-    title: 'Hi',
-    duration: 0,
-  };
-  const [ids, setIds] = useState([]);
-  function show() {
-    let id = Notification.info(opts);
-    setIds([...ids, id]);
-  }
-  function hide() {
-    let idsTmp = [...ids];
-    Notification.close(idsTmp.shift());
-    setIds(idsTmp);
-  }
-  return (
-    <>
-      <Button type="primary" onClick={show}>
-        Show Notification
-      </Button>
-      <br />
-      <br />
-      <Button type="primary" onClick={hide}>
-        Hide Notification
-      </Button>
-    </>
-  );
+    let opts = {
+        content: 'Not auto close',
+        title: 'Hi',
+        duration: 0,
+    };
+    const [ids, setIds] = useState([]);
+    function show() {
+        let id = Notification.info(opts);
+        setIds([...ids, id]);
+    }
+    function hide() {
+        let idsTmp = [...ids];
+        Notification.close(idsTmp.shift());
+        setIds(idsTmp);
+    }
+    return (
+        <>
+            <Button type="primary" onClick={show}>
+                Show Notification
+            </Button>
+            <br />
+            <br />
+            <Button type="primary" onClick={hide}>
+                Hide Notification
+            </Button>
+        </>
+    );
 };
 ```
 

content/feedback/popconfirm/index-en-US.md

@@ -31,23 +31,23 @@ import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';
 
 () => {
     const onConfirm = () => {
-      Toast.success('Confirm save!');
+        Toast.success('Confirm save!');
     };
 
     const onCancel = () => {
-      Toast.warning('Cancel save!');
-    }
+        Toast.warning('Cancel save!');
+    };
     return (
-      <Popconfirm
-          title="Are you sure you want to save this modification?"
-          content="This modification will be irreversible"
-          onConfirm={onConfirm}
-          onCancel={onCancel}
-      >
-          <Button>Save</Button>
-      </Popconfirm>
-    )
-}
+        <Popconfirm
+            title="Are you sure you want to save this modification?"
+            content="This modification will be irreversible"
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+        >
+            <Button>Save</Button>
+        </Popconfirm>
+    );
+};
 ```
 
 ### Type collocation

content/feedback/popconfirm/index.md

@@ -30,23 +30,23 @@ import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui';
 
 () => {
     const onConfirm = () => {
-      Toast.success('确认保存！');
+        Toast.success('确认保存！');
     };
 
     const onCancel = () => {
-      Toast.warning('取消保存！');
-    }
+        Toast.warning('取消保存！');
+    };
     return (
-      <Popconfirm
-          title="确定是否要保存此修改？"
-          content="此修改将不可逆"
-          onConfirm={onConfirm}
-          onCancel={onCancel}
-      >
-          <Button>保存</Button>
-      </Popconfirm>
-    )
-}
+        <Popconfirm
+            title="确定是否要保存此修改？"
+            content="此修改将不可逆"
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+        >
+            <Button>保存</Button>
+        </Popconfirm>
+    );
+};
 ```
 
 ### 类型搭配

content/feedback/progress/index-en-US.md

@@ -46,7 +46,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <br/>
         <Progress percent={80} style={{ height: '8px' }}/>
     </div>
-)
+);
 ```
 
 ### Show percentage text
@@ -68,7 +68,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <br/>
         <Progress percent={50} showInfo={true} format={percent => (percent*10) + '‰'}/>
     </div>
-)
+);
 ```
 
 ### Vertical progress bar
@@ -88,7 +88,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={80} direction='vertical' size='large' />
         <Progress percent={80} direction='vertical' style={{ width: '8px' }}/>
     </div>
-)
+);
 ```
 
 ### Circular progress bar
@@ -106,7 +106,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={50} type='circle' style={{ margin: 5 }} />
         <Progress percent={80} type='circle' style={{ margin: 5 }} />
     </div>
-)
+);
 ```
 
 You can modify it's `width` to control the size of the circular progress bar.
@@ -124,7 +124,7 @@ import { Progress } from '@douyinfe/semi-ui';
             <Progress percent={100} type='circle' width={100} style={{ margin: 5 }} stroke='#f93920' />
         </div>
     </React.Fragment>
-)
+);
 ```
 
 ### Small circular progress bar
@@ -142,14 +142,14 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={50} type='circle' size='small' style={{ margin: 5 }} />
         <Progress percent={80} type='circle' size='small' style={{ margin: 5 }} />
     </React.Fragment>
-)
+);
 ```
 
 ### Dynamic change percent
 
 ```jsx live=true
 import React from 'react';
-import { Progress } from '@douyinfe/semi-ui';
+import { Progress, Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 
 () => {
@@ -158,18 +158,18 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
         <>
             <div>
                 <Progress percent={percent} showInfo/>
-                <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setPercent(percent - 10)}} disabled={percent === 0} />
-                <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setPercent(percent + 10)}} disabled={percent >=100 } />
+                <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setPercent(percent - 10);}} disabled={percent === 0} />
+                <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setPercent(percent + 10);}} disabled={percent >=100 } />
             </div>
 
         </>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
 import React from 'react';
-import { Progress } from '@douyinfe/semi-ui';
+import { Progress, Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 
 () => {
@@ -177,11 +177,11 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
     return (
         <div>
             <div><Progress percent={cirPerc} type='circle'/></div>
-            <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setCirPerc(cirPerc - 10)}} disabled={cirPerc === 0}/>
-            <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setCirPerc(cirPerc + 10)}} disabled={cirPerc >=100 }/>
+            <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setCirPerc(cirPerc - 10);}} disabled={cirPerc === 0}/>
+            <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setCirPerc(cirPerc + 10);}} disabled={cirPerc >=100 }/>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Custom central text content
@@ -197,9 +197,9 @@ import { Progress } from '@douyinfe/semi-ui';
     <React.Fragment>
         <Progress percent={75} showInfo type='circle' format={(per) => per + 'Days'} style={{ margin:10 }}/>
         <Progress percent={100} showInfo type='circle' format={(per) => 'Done'} style={{ margin:10 }}/>
-        <Progress percent={50} showInfo type='circle' showInfo={false} style={{ margin:10 }}/>
+        <Progress percent={50} type='circle' showInfo={false} style={{ margin:10 }}/>
     </React.Fragment>
-)
+);
 ```
 
 ### Round / square edges
@@ -215,7 +215,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={50} strokeLinecap='round' type='circle' style={{ margin: 10 }} />
         <Progress percent={50} strokeLinecap='square' type='circle' style={{ margin:10 }} />
     </React.Fragment>
-)
+);
 ```
 
 ## API Reference

content/feedback/progress/index.md

@@ -45,7 +45,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <br />
         <Progress percent={80} style={{ height: '8px' }} />
     </div>
-)
+);
 ```
 
 ### 展示百分比文本
@@ -66,7 +66,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <br />
         <Progress percent={50} showInfo={true} format={percent => percent * 10 + '‰'} />
     </div>
-)
+);
 ```
 
 ### 垂直的进度条
@@ -85,7 +85,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={80} direction="vertical" size="large" />
         <Progress percent={80} direction="vertical" style={{ width: '8px' }} />
     </div>
-)
+);
 ```
 
 ### 环形进度条
@@ -103,7 +103,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={50} type="circle" style={{ margin: 5 }} />
         <Progress percent={80} type="circle" style={{ margin: 5 }} />
     </div>
-)
+);
 ```
 
 你可以通过修改`width`来控制环形进度条的大小
@@ -121,7 +121,7 @@ import { Progress } from '@douyinfe/semi-ui';
             <Progress percent={100} type="circle" width={100} style={{ margin: 5 }} stroke="#f93920" />
         </div>
     </React.Fragment>
-)
+);
 ```
 
 ### 小号的环形进度条
@@ -139,15 +139,14 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={50} type="circle" size="small" style={{ margin: 5 }} />
         <Progress percent={80} type="circle" size="small" style={{ margin: 5 }} />
     </React.Fragment>
-)
+);
 ```
 
 ### 动态改变进度
 
 ```jsx live=true
-import React from 'react';
-import { Progress } from '@douyinfe/semi-ui';
 import React, { useState } from 'react';
+import { Progress, Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 
 () => {
@@ -179,9 +178,8 @@ import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 ```
 
 ```jsx live=true
-import React from 'react';
-import { Progress } from '@douyinfe/semi-ui';
 import React, { useState } from 'react';
+import { Progress, Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 
 () => {
@@ -225,9 +223,9 @@ import { Progress } from '@douyinfe/semi-ui';
     <React.Fragment>
         <Progress percent={75} showInfo type="circle" format={per => per + 'Days'} style={{ margin: 10 }} />
         <Progress percent={100} showInfo type="circle" format={per => 'Done'} style={{ margin: 10 }} />
-        <Progress percent={50} showInfo type="circle" showInfo={false} style={{ margin: 10 }} />
+        <Progress percent={50} type="circle" showInfo={false} style={{ margin: 10 }} />
     </React.Fragment>
-)
+);
 ```
 
 ### 圆角/方角边缘
@@ -243,7 +241,7 @@ import { Progress } from '@douyinfe/semi-ui';
         <Progress percent={50} strokeLinecap="round" type="circle" style={{ margin: 10 }} />
         <Progress percent={50} strokeLinecap="square" type="circle" style={{ margin: 10 }} />
     </React.Fragment>
-)
+);
 ```
 
 ## API 参考

content/feedback/skeleton/index-en-US.md

@@ -33,48 +33,48 @@ import React from 'react';
 import { Skeleton, Switch, Button } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
-  constructor() {
-    super();
-    this.state = {loading: true};
-  }
-
-  showContent() {
-    const {loading} = this.state;
-    this.setState({
-      loading: !loading
-    });
-  }
-
-  render() {
-    const {loading} = this.state;
-    return (
-      <>
-        <span style={{display: 'flex', alignItems: 'center'}}>
-          <Switch onChange={() => this.showContent()}/>
-          <span style={{marginLeft: '10px' }}>Show Loading Content</span>
-        </span>
-        <br/>
-        <Skeleton placeholder={(<Skeleton.Avatar />)} loading={loading}>
-            <Avatar color='blue' style={{marginBottom: 10}}>U</Avatar>
-        </Skeleton>
-        <br/>
-        <Skeleton style={{width: 200, height: 150}} placeholder={(<Skeleton.Image />)} loading={loading}>
-            <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" height='150' />
-        </Skeleton>
-        <br/>
-        <Skeleton style={{width: 80}} placeholder={(<Skeleton.Title style={{marginBottom: 10}}/>)} loading={loading}>
-            <h4 style={{marginBottom: 0}}>Semi UI</h4>
-        </Skeleton>
-        <Skeleton style={{width: 240}} placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={loading}>
-            <p style={{width: 240}} >Carefully polish the user experience of each component.</p>
-        </Skeleton>
-        <br/>
-        <Skeleton placeholder={(<Skeleton.Button />)} loading={loading}>
-            <Button>Button</Button>
-        </Skeleton>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {loading: true};
+    }
+
+    showContent() {
+        const {loading} = this.state;
+        this.setState({
+            loading: !loading
+        });
+    }
+
+    render() {
+        const {loading} = this.state;
+        return (
+            <>
+                <span style={{display: 'flex', alignItems: 'center'}}>
+                    <Switch onChange={() => this.showContent()}/>
+                    <span style={{marginLeft: '10px' }}>Show Loading Content</span>
+                </span>
+                <br/>
+                <Skeleton placeholder={(<Skeleton.Avatar />)} loading={loading}>
+                    <Avatar color='blue' style={{marginBottom: 10}}>U</Avatar>
+                </Skeleton>
+                <br/>
+                <Skeleton style={{width: 200, height: 150}} placeholder={(<Skeleton.Image />)} loading={loading}>
+                    <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" height='150' />
+                </Skeleton>
+                <br/>
+                <Skeleton style={{width: 80}} placeholder={(<Skeleton.Title style={{marginBottom: 10}}/>)} loading={loading}>
+                    <h4 style={{marginBottom: 0}}>Semi UI</h4>
+                </Skeleton>
+                <Skeleton style={{width: 240}} placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={loading}>
+                    <p style={{width: 240}} >Carefully polish the user experience of each component.</p>
+                </Skeleton>
+                <br/>
+                <Skeleton placeholder={(<Skeleton.Button />)} loading={loading}>
+                    <Button>Button</Button>
+                </Skeleton>
+            </>
+        );
+    }
 }
 ```
 
@@ -87,20 +87,20 @@ import React from 'react';
 import { Skeleton } from '@douyinfe/semi-ui';
 
 () => {
-  const placeholder = (
-    <div>
-      <Skeleton.Image style={{width: 200, height: 150}}/>
-      <Skeleton.Title style={{width: 120, marginTop: 10}}/>
-    </div>
-  );
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true}>
-      <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" height='150' />
-      <h4>Semi UI</h4>
-    </Skeleton>
-  )
-}
+    const placeholder = (
+        <div>
+            <Skeleton.Image style={{width: 200, height: 150}}/>
+            <Skeleton.Title style={{width: 120, marginTop: 10}}/>
+        </div>
+    );
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true}>
+            <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" height='150' />
+            <h4>Semi UI</h4>
+        </Skeleton>
+    );
+};
 ```
 
 Statistics.
@@ -110,23 +110,23 @@ import React from 'react';
 import { Skeleton, Descriptions } from '@douyinfe/semi-ui';
 
 () => {
-  const placeholder = (
-    <div>
-      <Skeleton.Paragraph rows={1} style={{width: 80, marginBottom: 10}}/>
-      <Skeleton.Title style={{width: 120}}/>
-    </div>
-  );
-
-  const data = [
-    { key: 'Actual User', value: '1,480,000' },
-  ];
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true}>
-      <Descriptions data={data} row />
-    </Skeleton>
-  )
-}
+    const placeholder = (
+        <div>
+            <Skeleton.Paragraph rows={1} style={{width: 80, marginBottom: 10}}/>
+            <Skeleton.Title style={{width: 120}}/>
+        </div>
+    );
+
+    const data = [
+        { key: 'Actual User', value: '1,480,000' },
+    ];
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true}>
+            <Descriptions data={data} row />
+        </Skeleton>
+    );
+};
 ```
 
 Avatar and title.
@@ -136,20 +136,20 @@ import React from 'react';
 import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 () => {
-  const placeholder = (
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Skeleton.Avatar style={{marginRight: 12}}/>
-      <Skeleton.Title style={{width: 120}}/>
-    </div>
-  );
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true}>
-      <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
-      <span>Semi UI</span>
-    </Skeleton>
-  )
-}
+    const placeholder = (
+        <div style={{display: 'flex', alignItems: 'center'}}>
+            <Skeleton.Avatar style={{marginRight: 12}}/>
+            <Skeleton.Title style={{width: 120}}/>
+        </div>
+    );
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true}>
+            <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
+            <span>Semi UI</span>
+        </Skeleton>
+    );
+};
 ```
 
 Centered paragraphs and button.
@@ -159,31 +159,31 @@ import React from 'react';
 import { Skeleton, Button } from '@douyinfe/semi-ui';
 
 () => {
-  const style = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: '300px',
-    marginBottom: '10px',
-  }
-
-  const placeholder = (
-    <div style={style}>
-      <Skeleton.Paragraph style={style} rows={3}/>
-      <Skeleton.Button />
-    </div>
-  );
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true} style={{textAlign: 'center'}}>
-      <div style={{textAlign: 'center'}}>
-        <p>Hi, Bytedance dance dance.</p>
-        <p>Hi, Bytedance dance dance.</p>
-        <Button>Button</Button>
-      </div>
-    </Skeleton>
-  )
-}
+    const style = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '300px',
+        marginBottom: '10px',
+    };
+
+    const placeholder = (
+        <div style={style}>
+            <Skeleton.Paragraph style={style} rows={3}/>
+            <Skeleton.Button />
+        </div>
+    );
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true} style={{textAlign: 'center'}}>
+            <div style={{textAlign: 'center'}}>
+                <p>Hi, Bytedance dance dance.</p>
+                <p>Hi, Bytedance dance dance.</p>
+                <Button>Button</Button>
+            </div>
+        </Skeleton>
+    );
+};
 ```
 
 Avatar, headline and paragraph.
@@ -193,35 +193,35 @@ import React from 'react';
 import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 () => {
-  const style = {
-    display: 'flex',
-    alignItems: 'flex-start'
-  }
-
-  const placeholder = (
-    <div style={style}>
-      <Skeleton.Avatar style={{marginRight: 12}}/>
-      <div>
-      <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
-      <Skeleton.Paragraph style={{width: 240}} rows={3}/>
-      </div>
-    </div>
-  );
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true}>
-    <div style={style}>
-      <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
-      <div>
-        <h3>Semi UI</h3>
-        <p>Hi, Bytedance dance dance.</p>
-        <p>Hi, Bytedance dance dance.</p>
-        <p>Hi, Bytedance dance dance.</p>
-      </div>
-      </div>
-    </Skeleton>
-  )
-}
+    const style = {
+        display: 'flex',
+        alignItems: 'flex-start'
+    };
+
+    const placeholder = (
+        <div style={style}>
+            <Skeleton.Avatar style={{marginRight: 12}}/>
+            <div>
+                <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
+                <Skeleton.Paragraph style={{width: 240}} rows={3}/>
+            </div>
+        </div>
+    );
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true}>
+            <div style={style}>
+                <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
+                <div>
+                    <h3>Semi UI</h3>
+                    <p>Hi, Bytedance dance dance.</p>
+                    <p>Hi, Bytedance dance dance.</p>
+                    <p>Hi, Bytedance dance dance.</p>
+                </div>
+            </div>
+        </Skeleton>
+    );
+};
 ```
 
 Table.
@@ -231,22 +231,22 @@ import React from 'react';
 import { Skeleton, Table } from '@douyinfe/semi-ui';
 
 () => {
-  const data = {
+    const data = {
         columns: [
-        {
-            title: 'Name',
-            dataIndex: 'name',
-        },
-        {
-            title: 'Age',
-            dataIndex: 'age',
-        },
-        {
-            title: 'Address',
-            dataIndex: 'address',
-        },
-    ],
-      content: [{
+            {
+                title: 'Name',
+                dataIndex: 'name',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+            },
+        ],
+        content: [{
             key: '1',
             name: 'John Brown',
             age: 32,
@@ -270,47 +270,47 @@ import { Skeleton, Table } from '@douyinfe/semi-ui';
             age: 99,
             address: 'Sidney No. 1 Lake Park',
         },
-    ]
-  }
-
-  const skData = {
-    columns: [1,2,3].map(key => {
-      const item = {};
-      item.title = (<Skeleton.Title style={{width: '0'}}/>)
-      item.dataIndex = key;
-      return item;
-    }),
-    dataSource: [1,2,3,4].map(key => {
-      const item = {};
-      item.key = key;
-      [1,2,3].forEach(i => {
-        const width = 50 * i;
-        item[i] = (<Skeleton.Paragraph style={{width: width}} rows={1}/>)
-      })
-      return item;
-    })
-  };
-
-  const placeholder = (
-    <div style={{position: 'relative'}}>
-      <Table
-        style={{backgroundColor: 'var(--semi-color-bg-1)'}}
-        columns={skData.columns}
-        dataSource={skData.dataSource}
-        pagination={false}
-      />
-      <div style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}></div>
-    </div>
-  );
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true}>
-    <div>
-      <Table columns={data.columns} dataSource={data.content} pagination={false} />
-    </div>
-    </Skeleton>
-  )
-}
+        ]
+    };
+
+    const skData = {
+        columns: [1,2,3].map(key => {
+            const item = {};
+            item.title = (<Skeleton.Title style={{width: '0'}}/>);
+            item.dataIndex = key;
+            return item;
+        }),
+        dataSource: [1,2,3,4].map(key => {
+            const item = {};
+            item.key = key;
+            [1,2,3].forEach(i => {
+                const width = 50 * i;
+                item[i] = (<Skeleton.Paragraph style={{width: width}} rows={1}/>);
+            });
+            return item;
+        })
+    };
+
+    const placeholder = (
+        <div style={{position: 'relative'}}>
+            <Table
+                style={{backgroundColor: 'var(--semi-color-bg-1)'}}
+                columns={skData.columns}
+                dataSource={skData.dataSource}
+                pagination={false}
+            />
+            <div style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}></div>
+        </div>
+    );
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true}>
+            <div>
+                <Table columns={data.columns} dataSource={data.content} pagination={false} />
+            </div>
+        </Skeleton>
+    );
+};
 ```
 
 ### Animated Loading
@@ -322,35 +322,35 @@ import React from 'react';
 import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 () => {
-  const style = {
-    display: 'flex',
-    alignItems: 'flex-start'
-  }
-
-  const placeholder = (
-    <div style={style}>
-      <Skeleton.Avatar style={{marginRight: 12}}/>
-      <div>
-      <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
-      <Skeleton.Paragraph style={{width: 240}} rows={3}/>
-      </div>
-    </div>
-  );
-
-  return (
-    <Skeleton placeholder={placeholder} loading={true} active>
-    <div style={style}>
-      <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
-      <div>
-        <h3>Semi UI</h3>
-        <p>Hi, Bytedance dance dance.</p>
-        <p>Hi, Bytedance dance dance.</p>
-        <p>Hi, Bytedance dance dance.</p>
-      </div>
-      </div>
-    </Skeleton>
-  )
-}
+    const style = {
+        display: 'flex',
+        alignItems: 'flex-start'
+    };
+
+    const placeholder = (
+        <div style={style}>
+            <Skeleton.Avatar style={{marginRight: 12}}/>
+            <div>
+                <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
+                <Skeleton.Paragraph style={{width: 240}} rows={3}/>
+            </div>
+        </div>
+    );
+
+    return (
+        <Skeleton placeholder={placeholder} loading={true} active>
+            <div style={style}>
+                <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
+                <div>
+                    <h3>Semi UI</h3>
+                    <p>Hi, Bytedance dance dance.</p>
+                    <p>Hi, Bytedance dance dance.</p>
+                    <p>Hi, Bytedance dance dance.</p>
+                </div>
+            </div>
+        </Skeleton>
+    );
+};
 ```
 
 ## API reference

content/feedback/skeleton/index.md

@@ -37,42 +37,42 @@ import { Skeleton, Switch, Avatar, Button } from '@douyinfe/semi-ui';
         setLoading(!loading);
     };
     return (
-      <>
-          <span style={{ display: 'flex', alignItems: 'center' }}>
-              <Switch onChange={() => showContent()} />
-              <span style={{ marginLeft: '10px' }}>显示加载内容</span>
-          </span>
-          <br />
-          <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
-              <Avatar color="blue" style={{ marginBottom: 10 }}>
-                  U
-              </Avatar>
-          </Skeleton>
-          <br />
-          <Skeleton style={{ width: 200, height: 150 }} placeholder={<Skeleton.Image />} loading={loading}>
-              <img
-                  src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
-                  height="150"
-              />
-          </Skeleton>
-          <br />
-          <Skeleton
-              style={{ width: 80 }}
-              placeholder={<Skeleton.Title style={{ marginBottom: 10 }} />}
-              loading={loading}
-          >
-              <h4 style={{ marginBottom: 0 }}>Semi UI</h4>
-          </Skeleton>
-          <Skeleton style={{ width: 240 }} placeholder={<Skeleton.Paragraph rows={2} />} loading={loading}>
-              <p style={{ width: 240 }}>精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</p>
-          </Skeleton>
-          <br />
-          <Skeleton placeholder={<Skeleton.Button />} loading={loading}>
-              <Button>Button</Button>
-          </Skeleton>
-      </>
-    )
-}
+        <>
+            <span style={{ display: 'flex', alignItems: 'center' }}>
+                <Switch onChange={() => showContent()} />
+                <span style={{ marginLeft: '10px' }}>显示加载内容</span>
+            </span>
+            <br />
+            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
+                <Avatar color="blue" style={{ marginBottom: 10 }}>
+                    U
+                </Avatar>
+            </Skeleton>
+            <br />
+            <Skeleton style={{ width: 200, height: 150 }} placeholder={<Skeleton.Image />} loading={loading}>
+                <img
+                    src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                    height="150"
+                />
+            </Skeleton>
+            <br />
+            <Skeleton
+                style={{ width: 80 }}
+                placeholder={<Skeleton.Title style={{ marginBottom: 10 }} />}
+                loading={loading}
+            >
+                <h4 style={{ marginBottom: 0 }}>Semi UI</h4>
+            </Skeleton>
+            <Skeleton style={{ width: 240 }} placeholder={<Skeleton.Paragraph rows={2} />} loading={loading}>
+                <p style={{ width: 240 }}>精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</p>
+            </Skeleton>
+            <br />
+            <Skeleton placeholder={<Skeleton.Button />} loading={loading}>
+                <Button>Button</Button>
+            </Skeleton>
+        </>
+    );
+};
 ```
 
 ### 组合使用

content/feedback/spin/index-en-US.md

@@ -103,7 +103,7 @@ Delayed to display Spin.
 
 ```jsx live=true hideInDSM
 import React, { useState } from 'react';
-import { Spin } from '@douyinfe/semi-ui';
+import { Spin, Button } from '@douyinfe/semi-ui';
 
 () => {
     const [loading, toggleLoading] = useState(false);
@@ -128,7 +128,7 @@ Use `spinning` to determine if the component is in loading status
 
 ```jsx live=true hideInDSM
 import React, { useState } from 'react';
-import { Spin } from '@douyinfe/semi-ui';
+import { Spin, Button } from '@douyinfe/semi-ui';
 
 () => {
     const [loading, toggleLoading] = useState(false);

content/feedback/toast/index-en-US.md

@@ -278,7 +278,7 @@ You could also use `ReactDOM.createPortal` to insert toast in a Portal.
 
 ```jsx live=true noInline=true
 import React, { useRef } from 'react';
-import { Toast } from '@douyinfe/semi-ui';
+import { Toast, Button } from '@douyinfe/semi-ui';
 
 const ReachableContext = React.createContext();
 
@@ -378,6 +378,9 @@ The global configuration is set before any method call, and takes effect only on
     If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):
 
 ```jsx live=true noInline=true
+import React from 'react';
+import { Button } from '@douyinfe/semi-ui';
+
 function Demo() {
     const ToastInCustomContainer = ToastFactory.create({
         getPopupContainer: () => document.getElementById('custom-toast-container'),

content/feedback/toast/index.md

@@ -380,6 +380,8 @@ render(Demo);
 
 ```jsx live=true noInline=true
 import React from 'react';
+import { Button } from '@douyinfe/semi-ui';
+
 function Demo() {
     const ToastInCustomContainer = ToastFactory.create({
         getPopupContainer: () => document.getElementById('custom-toast-container'),

content/input/autocomplete/index-en-US.md

@@ -44,12 +44,12 @@ import { IconSearch } from '@douyinfe/semi-icons';
             result = [];
         }
         setStringData(result);
-    }
+    };
 
     const handleChange = (value) => {
         console.log('onChange', value);
         setValue(value);
-    }
+    };
     return (
         <AutoComplete
             data={stringData}
@@ -61,8 +61,8 @@ import { IconSearch } from '@douyinfe/semi-icons';
             onChange={handleChange}
             style={{ width: 200 }}
         />
-    )
-}
+    );
+};
 ```
 
 ### Custom option rendering
@@ -252,7 +252,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
             style={{ width: 200 }}
         ></AutoComplete>
     </div>
-)
+);
 ```
 
 ### The position of the drop-down menu
@@ -278,7 +278,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
             style={{ width: 200, margin: 10 }}
         ></AutoComplete>
     </div>
-)
+);
 ```
 
 ### Disabled
@@ -289,7 +289,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
 
 () => (
     <AutoComplete data={[1, 2, 3, 4]} placeholder={'Disable drop-down menu'} disabled style={{ width: 200 }}></AutoComplete>
-)
+);
 ```
 
 ### Validate status
@@ -310,7 +310,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
         <br />
         <AutoComplete defaultValue="ies"></AutoComplete>
     </>
-)
+);
 ```
 
 ### Custom empty content

content/input/autocomplete/index.md

@@ -45,12 +45,12 @@ import { IconSearch } from '@douyinfe/semi-icons';
             result = [];
         }
         setStringData(result);
-    }
+    };
 
     const handleChange = (value) => {
         console.log('onChange', value);
         setValue(value);
-    }
+    };
     return (
         <AutoComplete
             data={stringData}
@@ -62,8 +62,8 @@ import { IconSearch } from '@douyinfe/semi-icons';
             onChange={handleChange}
             style={{ width: 200 }}
         />
-    )
-}
+    );
+};
 ```
 
 ### 自定义候选项渲染
@@ -253,7 +253,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
             style={{ width: 200 }}
         ></AutoComplete>
     </div>
-)
+);
 ```
 
 ### 下拉菜单的位置
@@ -279,7 +279,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
             style={{ width: 200, margin: 10 }}
         ></AutoComplete>
     </div>
-)
+);
 ```
 
 ### 禁用
@@ -290,7 +290,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
 
 () => (
     <AutoComplete data={[1, 2, 3, 4]} placeholder={'禁用下拉菜单'} disabled style={{ width: 200 }}></AutoComplete>
-)
+);
 ```
 
 ### 校验状态
@@ -311,7 +311,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
         <br />
         <AutoComplete defaultValue="ies"></AutoComplete>
     </>
-)
+);
 ```
 
 ### 自定义空内容

content/input/button/index-en-US.md

@@ -35,15 +35,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div className="btn-margin-right">
-      <Button>Primary Button</Button>
-      <Button type="secondary">Secondary Button</Button>
-      <Button type="tertiary">Tertiary Button</Button>
-      <Button type="warning">Warning Button</Button>
-      <Button type="danger">Danger Button</Button>
-    </div>
-  );
+    return (
+        <div className="btn-margin-right">
+            <Button>Primary Button</Button>
+            <Button type="secondary">Secondary Button</Button>
+            <Button type="tertiary">Tertiary Button</Button>
+            <Button type="warning">Warning Button</Button>
+            <Button type="danger">Danger Button</Button>
+        </div>
+    );
 }
 
 ```
@@ -64,15 +64,15 @@ You can define your elements directly using these theme colors.
 import React from 'react';
 
 function ButtonDemo() {
-  const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
-
-  return (
-    <article>
-      {types.map((type, index) => (
-        <strong key={index} style={{ color: `var(--semi-color-${Array.isArray(type) ? type[0] : type})`, marginRight: 10 }}>{Array.isArray(type) ? type[1]: type}</strong>
-      ))}
-    </article>
-  );
+    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
+
+    return (
+        <article>
+            {types.map((type, index) => (
+                <strong key={index} style={{ color: `var(--semi-color-${Array.isArray(type) ? type[0] : type})`, marginRight: 10 }}>{Array.isArray(type) ? type[1]: type}</strong>
+            ))}
+        </article>
+    );
 }
 ```
 
@@ -93,29 +93,29 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const themes = [['light', 'light']];
-  const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
-
-  return (
-    <div>{
-      themes.map((theme, idxTheme) => (
-        <div key={idxTheme}>
-          <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
-            {types.map((type, idxType) => (
-              <li key={'' + idxTheme + idxType} style={{margin:10}}>
-                <Button
-                  theme={theme[0]}
-                  type={type[0]}
-                >
-                  {theme[1]} {type[1]}
-                </Button>
-              </li>)
-            )}
-           </ul>
-        </div>))
-    }
-    </div>
-  );
+    const themes = [['light', 'light']];
+    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
+
+    return (
+        <div>{
+            themes.map((theme, idxTheme) => (
+                <div key={idxTheme}>
+                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
+                        {types.map((type, idxType) => (
+                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                                <Button
+                                    theme={theme[0]}
+                                    type={type[0]}
+                                >
+                                    {theme[1]} {type[1]}
+                                </Button>
+                            </li>)
+                        )}
+                    </ul>
+                </div>))
+        }
+        </div>
+    );
 }
 ```
 
@@ -126,29 +126,29 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const themes = [['solid', 'solid']];
-  const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
-
-  return (
-    <div>{
-      themes.map((theme, idxTheme) => (
-        <div key={idxTheme}>
-          <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
-            {types.map((type, idxType) => (
-              <li key={'' + idxTheme + idxType} style={{margin:10}}>
-                <Button
-                  theme={theme[0]}
-                  type={type[0]}
-                >
-                  {theme[1]} {type[1]}
-                </Button>
-              </li>)
-            )}
-           </ul>
-        </div>))
-    }
-    </div>
-  );
+    const themes = [['solid', 'solid']];
+    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
+
+    return (
+        <div>{
+            themes.map((theme, idxTheme) => (
+                <div key={idxTheme}>
+                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
+                        {types.map((type, idxType) => (
+                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                                <Button
+                                    theme={theme[0]}
+                                    type={type[0]}
+                                >
+                                    {theme[1]} {type[1]}
+                                </Button>
+                            </li>)
+                        )}
+                    </ul>
+                </div>))
+        }
+        </div>
+    );
 }
 ```
 
@@ -159,29 +159,29 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const themes = [['borderless', 'borderless']];
-  const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
-
-  return (
-    <div>{
-      themes.map((theme, idxTheme) => (
-        <div key={idxTheme}>
-          <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
-            {types.map((type, idxType) => (
-              <li key={'' + idxTheme + idxType} style={{margin:10}}>
-                <Button
-                  theme={theme[0]}
-                  type={type[0]}
-                >
-                  {theme[1]} {type[1]}
-                </Button>
-              </li>)
-            )}
-           </ul>
-        </div>))
-    }
-    </div>
-  );
+    const themes = [['borderless', 'borderless']];
+    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];
+
+    return (
+        <div>{
+            themes.map((theme, idxTheme) => (
+                <div key={idxTheme}>
+                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
+                        {types.map((type, idxType) => (
+                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                                <Button
+                                    theme={theme[0]}
+                                    type={type[0]}
+                                >
+                                    {theme[1]} {type[1]}
+                                </Button>
+                            </li>)
+                        )}
+                    </ul>
+                </div>))
+        }
+        </div>
+    );
 }
 ```
 
@@ -198,13 +198,13 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <Button size='large' style={{ marginRight:8 }}>large</Button>
-      <Button size='default' style={{ marginRight:8 }}>default</Button>
-      <Button size='small'>small</Button>
-    </div>
-  );
+    return (
+        <div>
+            <Button size='large' style={{ marginRight:8 }}>large</Button>
+            <Button size='default' style={{ marginRight:8 }}>default</Button>
+            <Button size='small'>small</Button>
+        </div>
+    );
 }
 ```
 
@@ -217,11 +217,11 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <Button block>block button</Button>
-    </div>
-  );
+    return (
+        <div>
+            <Button block>block button</Button>
+        </div>
+    );
 }
 ```
 
@@ -235,32 +235,32 @@ import { Button } from '@douyinfe/semi-ui';
 import { IconCamera, IconSidebar, IconChevronDown } from '@douyinfe/semi-icons';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <strong>Default Status: </strong>
-      <Button icon={<IconCamera />}/>
-          <br/><br/>
-      <strong>Disabled Status：</strong>
-      <Button icon={<IconCamera />}/>
-          <br/><br/>
-      <strong>With Type: </strong>
-      <span className="btn-margin-right">
-      <Button type="primary" icon={<IconCamera />}/>
-      <Button type="secondary" icon={<IconCamera />}/>
-      <Button type="warning" icon={<IconCamera />}/>
-      <Button type="danger" icon={<IconCamera />}/>
-      </span>
-          <br/><br/>
-      <strong>Change Theme: </strong>
-      <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }}/>
-      <Button icon={<IconCamera />} theme="light"/>
-          <br/><br/>
-      <strong>Change Icon Position: </strong>
-      <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>Collpase</Button>
-      <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">Expand Options</Button>
-          <br/><br/>
-    </div>
-  );
+    return (
+        <div>
+            <strong>Default Status: </strong>
+            <Button icon={<IconCamera />}/>
+            <br/><br/>
+            <strong>Disabled Status：</strong>
+            <Button icon={<IconCamera />}/>
+            <br/><br/>
+            <strong>With Type: </strong>
+            <span className="btn-margin-right">
+                <Button type="primary" icon={<IconCamera />}/>
+                <Button type="secondary" icon={<IconCamera />}/>
+                <Button type="warning" icon={<IconCamera />}/>
+                <Button type="danger" icon={<IconCamera />}/>
+            </span>
+            <br/><br/>
+            <strong>Change Theme: </strong>
+            <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }}/>
+            <Button icon={<IconCamera />} theme="light"/>
+            <br/><br/>
+            <strong>Change Icon Position: </strong>
+            <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>Collpase</Button>
+            <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">Expand Options</Button>
+            <br/><br/>
+        </div>
+    );
 }
 ```
 
@@ -274,18 +274,18 @@ import { Typography } from '@douyinfe/semi-ui';
 import { IconLink } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Text } = Typography;
-  return (
-    <div>
-      <Text link={{ href: 'https://semi.design/' }}>Link</Text>
-      <br />
-      <br />
-      <Text link={{ href: 'https://semi.design/' }}>Open Website</Text>
-      <br />
-      <br />
-      <Text link icon={<IconLink />} underline>Link</Text>
-    </div>
-  )
+    const { Text } = Typography;
+    return (
+        <div>
+            <Text link={{ href: 'https://semi.design/' }}>Link</Text>
+            <br />
+            <br />
+            <Text link={{ href: 'https://semi.design/' }}>Open Website</Text>
+            <br />
+            <br />
+            <Text link icon={<IconLink />} underline>Link</Text>
+        </div>
+    );
 }
 ```
 
@@ -296,15 +296,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <Button disabled>Disabled</Button>
-      <Button disabled theme="borderless">No background and disabled</Button>
-      <Button disabled theme="light">Light and disbaled</Button>
-      <Button disabled theme="borderless" type="primary">No background, primary and disabled</Button>
-      <Button disabled theme="solid" type="warning">Solid, warning and disabled</Button>
-    </div>
-  );
+    return (
+        <div>
+            <Button disabled>Disabled</Button>
+            <Button disabled theme="borderless">No background and disabled</Button>
+            <Button disabled theme="light">Light and disbaled</Button>
+            <Button disabled theme="borderless" type="primary">No background, primary and disabled</Button>
+            <Button disabled theme="solid" type="warning">Solid, warning and disabled</Button>
+        </div>
+    );
 }
 ```
 
@@ -315,35 +315,36 @@ The button supports the Loading state, by setting the loading parameter value to
 ```jsx live=true dir="column"
 import React, { useState } from 'react';
 import { Button } from '@douyinfe/semi-ui';
+import { IconDelete } from '@douyinfe/semi-icons';
 
 function ButtonDemo() {
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [delLoading, setDelLoading] = useState(true);
-  const [repLoading, setRepLoading] = useState(true);
-
-  const reset = status => {
-    status = !!status;
-    setSaveLoading(status);
-    setDelLoading(status);
-    setRepLoading(status);
-  };
-
-  return (
-    <div>
-      <div>
-        <div className="btn-margin-right" style={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 14 }}>
-          <Button onClick={() => reset(false)}>Stop loading</Button>
-          <Button onClick={() => reset(true)}>Start loading</Button>
+    const [saveLoading, setSaveLoading] = useState(false);
+    const [delLoading, setDelLoading] = useState(true);
+    const [repLoading, setRepLoading] = useState(true);
+
+    const reset = status => {
+        status = !!status;
+        setSaveLoading(status);
+        setDelLoading(status);
+        setRepLoading(status);
+    };
+
+    return (
+        <div>
+            <div>
+                <div className="btn-margin-right" style={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 14 }}>
+                    <Button onClick={() => reset(false)}>Stop loading</Button>
+                    <Button onClick={() => reset(true)}>Start loading</Button>
+                </div>
+            </div>
+            <hr/>
+            <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>Save</Button>
+            <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>Delete</Button>
+            <div style={{ width: 200, display: 'inline-block'}}>
+                <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>Revoke</Button>
+            </div>
         </div>
-      </div>
-      <hr/>
-      <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>Save</Button>
-      <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>Delete</Button>
-      <div style={{ width: 200, display: 'inline-block'}}>
-        <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>Revoke</Button>
-      </div>
-    </div>
-  );
+    );
 }
 ```
 
@@ -358,21 +359,21 @@ import React from 'react';
 import { Button, ButtonGroup } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const sizes = ['large', 'default', 'small'];
-
-  return (
-  <div style={{ display: 'flex' }}>
-    {sizes.map(size => (
-      <div style={{ marginRight: 10 }} key={size}>
-        <ButtonGroup size={size}>
-          <Button>Copy</Button>
-          <Button>Search</Button>
-          <Button>Cut</Button>
-        </ButtonGroup>
-      </div>
-    ))}
-  </div>
-  );
+    const sizes = ['large', 'default', 'small'];
+
+    return (
+        <div style={{ display: 'flex' }}>
+            {sizes.map(size => (
+                <div style={{ marginRight: 10 }} key={size}>
+                    <ButtonGroup size={size}>
+                        <Button>Copy</Button>
+                        <Button>Search</Button>
+                        <Button>Cut</Button>
+                    </ButtonGroup>
+                </div>
+            ))}
+        </div>
+    );
 }
 ```
 
@@ -383,17 +384,17 @@ import React from 'react';
 import { Button, ButtonGroup } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-  <div style={{ display: 'flex' }}>
-    <div style={{ marginRight: 10 }}>
-      <ButtonGroup disabled>
-        <Button>Copy</Button>
-        <Button>Search</Button>
-        <Button>Cut</Button>
-      </ButtonGroup>
-    </div>
-  </div>
-  );
+    return (
+        <div style={{ display: 'flex' }}>
+            <div style={{ marginRight: 10 }}>
+                <ButtonGroup disabled>
+                    <Button>Copy</Button>
+                    <Button>Search</Button>
+                    <Button>Cut</Button>
+                </ButtonGroup>
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -404,21 +405,21 @@ import React from 'react';
 import { Button, ButtonGroup } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];
-
-  return (
-  <div style={{ display: 'flex' }}>
-    {types.map(type => (
-      <div style={{ marginRight: 10 }} key={type}>
-        <ButtonGroup type={type}>
-          <Button>Copy</Button>
-          <Button>Search</Button>
-          <Button>Cut</Button>
-        </ButtonGroup>
-      </div>
-    ))}
-  </div>
-  );
+    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];
+
+    return (
+        <div style={{ display: 'flex' }}>
+            {types.map(type => (
+                <div style={{ marginRight: 10 }} key={type}>
+                    <ButtonGroup type={type}>
+                        <Button>Copy</Button>
+                        <Button>Search</Button>
+                        <Button>Cut</Button>
+                    </ButtonGroup>
+                </div>
+            ))}
+        </div>
+    );
 }
 ```
 
@@ -437,51 +438,51 @@ import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
 
 function SplitButtonDemo(){
 
-  const menu = [
-    { node: 'title', name: 'Title' },
-    { node: 'item', name: 'Edit', onClick: () => console.log('Edit clicked') },
-    { node: 'item', name: 'Reset', type: 'secondary' },
-    { node: 'divider' },
-    { node: 'item', name: 'Create', type: 'tertiary' },
-    { node: 'item', name: 'Copy', type: 'warning' },
-    { node: 'divider' },
-    { node: 'item', name: 'Delete', type: 'danger' },
-  ];
-
-  const [btnVisible,setBtnVisible] = useState({
-    1:false,
-    2:false,
-    3:false
-  })
-
-  const handleVisibleChange = (key,visible)=>{
-    newBtnVisible = {...btnVisible};
-    newBtnVisible[key] = visible;
-    setBtnVisible(newBtnVisible)
-  }
-
-  return (
-    <div>
-      <SplitButtonGroup style={{marginRight:10}}>
-        <Button theme="solid" type="primary">SplitButton</Button>
-        <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-          <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
-        </Dropdown>
-      </SplitButtonGroup>
-      <SplitButtonGroup style={{marginRight:10}}>
-        <Button theme="light" type="primary">SplitButton</Button>
-        <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
-          <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
-        </Dropdown>
-      </SplitButtonGroup>
-      <SplitButtonGroup>
-        <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:null} theme="borderless" type="primary">SplitButton</Button>
-        <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
-          <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
-        </Dropdown>
-      </SplitButtonGroup>
-    </div>
-  )
+    const menu = [
+        { node: 'title', name: 'Title' },
+        { node: 'item', name: 'Edit', onClick: () => console.log('Edit clicked') },
+        { node: 'item', name: 'Reset', type: 'secondary' },
+        { node: 'divider' },
+        { node: 'item', name: 'Create', type: 'tertiary' },
+        { node: 'item', name: 'Copy', type: 'warning' },
+        { node: 'divider' },
+        { node: 'item', name: 'Delete', type: 'danger' },
+    ];
+
+    const [btnVisible,setBtnVisible] = useState({
+        1:false,
+        2:false,
+        3:false
+    });
+
+    const handleVisibleChange = (key,visible)=>{
+        newBtnVisible = {...btnVisible};
+        newBtnVisible[key] = visible;
+        setBtnVisible(newBtnVisible);
+    };
+
+    return (
+        <div>
+            <SplitButtonGroup style={{marginRight:10}}>
+                <Button theme="solid" type="primary">SplitButton</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                </Dropdown>
+            </SplitButtonGroup>
+            <SplitButtonGroup style={{marginRight:10}}>
+                <Button theme="light" type="primary">SplitButton</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                </Dropdown>
+            </SplitButtonGroup>
+            <SplitButtonGroup>
+                <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:null} theme="borderless" type="primary">SplitButton</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                </Dropdown>
+            </SplitButtonGroup>
+        </div>
+    );
 }
 ```
 

content/input/button/index.md

@@ -34,15 +34,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div className="btn-margin-right">
-      <Button>主要按钮</Button>
-      <Button type="secondary">次要按钮</Button>
-      <Button type="tertiary">第三按钮</Button>
-      <Button type="warning">警告按钮</Button>
-      <Button type="danger">危险按钮</Button>
-    </div>
-  );
+    return (
+        <div className="btn-margin-right">
+            <Button>主要按钮</Button>
+            <Button type="secondary">次要按钮</Button>
+            <Button type="tertiary">第三按钮</Button>
+            <Button type="warning">警告按钮</Button>
+            <Button type="danger">危险按钮</Button>
+        </div>
+    );
 }
 
 ```
@@ -63,15 +63,15 @@ function ButtonDemo() {
 import React from 'react';
 
 function ButtonDemo() {
-  const types = [['primary', '主要'], ['secondary', '次要'], ['tertiary', '第三'], ['warning', '警告'], ['danger', '危险']];
-
-  return (
-    <article>
-      {types.map((type, index) => (
-        <strong key={index} style={{ color: `var(--semi-color-${Array.isArray(type) ? type[0] : type})`, marginRight: 10 }}>{Array.isArray(type) ? type[1]: type}</strong>
-      ))}
-    </article>
-  );
+    const types = [['primary', '主要'], ['secondary', '次要'], ['tertiary', '第三'], ['warning', '警告'], ['danger', '危险']];
+
+    return (
+        <article>
+            {types.map((type, index) => (
+                <strong key={index} style={{ color: `var(--semi-color-${Array.isArray(type) ? type[0] : type})`, marginRight: 10 }}>{Array.isArray(type) ? type[1]: type}</strong>
+            ))}
+        </article>
+    );
 }
 ```
 
@@ -92,15 +92,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <>
-      <Button theme='light' type='primary' style={{ marginRight: 8 }}>浅色主要</Button>
-      <Button theme='light' type='secondary' style={{ marginRight: 8 }}>浅色次要</Button>
-      <Button theme='light' type='tertiary' style={{ marginRight: 8 }}>浅色第三</Button>
-      <Button theme='light' type='warning' style={{ marginRight: 8 }}>浅色警告</Button>
-      <Button theme='light' type='danger' style={{ marginRight: 8 }}>浅色危险</Button>
-    </>
-  );
+    return (
+        <>
+            <Button theme='light' type='primary' style={{ marginRight: 8 }}>浅色主要</Button>
+            <Button theme='light' type='secondary' style={{ marginRight: 8 }}>浅色次要</Button>
+            <Button theme='light' type='tertiary' style={{ marginRight: 8 }}>浅色第三</Button>
+            <Button theme='light' type='warning' style={{ marginRight: 8 }}>浅色警告</Button>
+            <Button theme='light' type='danger' style={{ marginRight: 8 }}>浅色危险</Button>
+        </>
+    );
 }
 
 ```
@@ -112,15 +112,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <>
-      <Button theme='solid' type='primary' style={{ marginRight: 8 }}>深色主要</Button>
-      <Button theme='solid' type='secondary' style={{ marginRight: 8 }}>深色次要</Button>
-      <Button theme='solid' type='tertiary' style={{ marginRight: 8 }}>深色第三</Button>
-      <Button theme='solid' type='warning' style={{ marginRight: 8 }}>深色警告</Button>
-      <Button theme='solid' type='danger' style={{ marginRight: 8 }}>深色危险</Button>
-    </>
-  );
+    return (
+        <>
+            <Button theme='solid' type='primary' style={{ marginRight: 8 }}>深色主要</Button>
+            <Button theme='solid' type='secondary' style={{ marginRight: 8 }}>深色次要</Button>
+            <Button theme='solid' type='tertiary' style={{ marginRight: 8 }}>深色第三</Button>
+            <Button theme='solid' type='warning' style={{ marginRight: 8 }}>深色警告</Button>
+            <Button theme='solid' type='danger' style={{ marginRight: 8 }}>深色危险</Button>
+        </>
+    );
 }
 
 ```
@@ -132,15 +132,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <>
-      <Button theme='borderless' type='primary' style={{ marginRight: 8 }}>主要</Button>
-      <Button theme='borderless' type='secondary' style={{ marginRight: 8 }}>次要</Button>
-      <Button theme='borderless' type='tertiary' style={{ marginRight: 8 }}>第三</Button>
-      <Button theme='borderless' type='warning' style={{ marginRight: 8 }}>警告</Button>
-      <Button theme='borderless' type='danger' style={{ marginRight: 8 }}>危险</Button>
-    </>
-  );
+    return (
+        <>
+            <Button theme='borderless' type='primary' style={{ marginRight: 8 }}>主要</Button>
+            <Button theme='borderless' type='secondary' style={{ marginRight: 8 }}>次要</Button>
+            <Button theme='borderless' type='tertiary' style={{ marginRight: 8 }}>第三</Button>
+            <Button theme='borderless' type='warning' style={{ marginRight: 8 }}>警告</Button>
+            <Button theme='borderless' type='danger' style={{ marginRight: 8 }}>危险</Button>
+        </>
+    );
 }
 
 ```
@@ -158,13 +158,13 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <Button size='large' style={{ marginRight:8 }}>大尺寸</Button>
-      <Button size='default' style={{ marginRight:8 }}>默认尺寸</Button>
-      <Button size='small'>小尺寸</Button>
-    </div>
-  );
+    return (
+        <div>
+            <Button size='large' style={{ marginRight:8 }}>大尺寸</Button>
+            <Button size='default' style={{ marginRight:8 }}>默认尺寸</Button>
+            <Button size='small'>小尺寸</Button>
+        </div>
+    );
 }
 ```
 
@@ -177,11 +177,11 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <Button block>块级按钮</Button>
-    </div>
-  );
+    return (
+        <div>
+            <Button block>块级按钮</Button>
+        </div>
+    );
 }
 ```
 
@@ -195,32 +195,32 @@ import { Button } from '@douyinfe/semi-ui';
 import { IconCamera, IconSidebar, IconChevronDown } from '@douyinfe/semi-icons';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <strong>默认状态：</strong>
-      <Button icon={<IconCamera />}/>
-          <br/><br/>
-      <strong>禁用状态：</strong>
-      <Button disabled icon={<IconCamera />}/>
-          <br/><br/>
-      <strong>复合类型：</strong>
-      <span className="btn-margin-right">
-      <Button type="primary" icon={<IconCamera />}/>
-      <Button type="secondary" icon={<IconCamera />}/>
-      <Button type="warning" icon={<IconCamera />}/>
-      <Button type="danger" icon={<IconCamera />}/>
-      </span>
-          <br/><br/>
-      <strong>更改主题：</strong>
-      <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }}/>
-      <Button icon={<IconCamera />} theme="light"/>
-          <br/><br/>
-      <strong>更改图标位置：</strong>
-      <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>收起</Button>
-      <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">展开选项</Button>
-          <br/><br/>
-    </div>
-  );
+    return (
+        <div>
+            <strong>默认状态：</strong>
+            <Button icon={<IconCamera />}/>
+            <br/><br/>
+            <strong>禁用状态：</strong>
+            <Button disabled icon={<IconCamera />}/>
+            <br/><br/>
+            <strong>复合类型：</strong>
+            <span className="btn-margin-right">
+                <Button type="primary" icon={<IconCamera />}/>
+                <Button type="secondary" icon={<IconCamera />}/>
+                <Button type="warning" icon={<IconCamera />}/>
+                <Button type="danger" icon={<IconCamera />}/>
+            </span>
+            <br/><br/>
+            <strong>更改主题：</strong>
+            <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }}/>
+            <Button icon={<IconCamera />} theme="light"/>
+            <br/><br/>
+            <strong>更改图标位置：</strong>
+            <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>收起</Button>
+            <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">展开选项</Button>
+            <br/><br/>
+        </div>
+    );
 }
 ```
 
@@ -234,18 +234,18 @@ import { Typography } from '@douyinfe/semi-ui';
 import { IconLink } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Text } = Typography;
-  return (
-    <div>
-      <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
-      <br />
-      <br />
-      <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
-      <br />
-      <br />
-      <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
-    </div>
-  )
+    const { Text } = Typography;
+    return (
+        <div>
+            <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
+            <br />
+            <br />
+            <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
+            <br />
+            <br />
+            <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
+        </div>
+    );
 }
 ```
 
@@ -256,15 +256,15 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-    <div>
-      <Button disabled>禁用</Button>
-      <Button disabled theme="borderless">无背景禁用</Button>
-      <Button disabled theme="light">浅色禁用</Button>
-      <Button disabled theme="borderless" type="primary">无背景主要禁用</Button>
-      <Button disabled theme="solid" type="warning">深色警告禁用</Button>
-    </div>
-  );
+    return (
+        <div>
+            <Button disabled>禁用</Button>
+            <Button disabled theme="borderless">无背景禁用</Button>
+            <Button disabled theme="light">浅色禁用</Button>
+            <Button disabled theme="borderless" type="primary">无背景主要禁用</Button>
+            <Button disabled theme="solid" type="warning">深色警告禁用</Button>
+        </div>
+    );
 }
 ```
 
@@ -275,35 +275,36 @@ function ButtonDemo() {
 ```jsx live=true dir="column"
 import React, { useState } from 'react';
 import { Button } from '@douyinfe/semi-ui';
+import { IconDelete } from '@douyinfe/semi-icons';
 
 function ButtonDemo() {
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [delLoading, setDelLoading] = useState(true);
-  const [repLoading, setRepLoading] = useState(true);
-
-  const reset = status => {
-    status = !!status;
-    setSaveLoading(status);
-    setDelLoading(status);
-    setRepLoading(status);
-  };
-
-  return (
-    <div>
-      <div> 
-        <div className="btn-margin-right" style={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 14 }}>
-          <Button onClick={() => reset(false)}>关闭加载态</Button>
-          <Button onClick={() => reset(true)}>开启加载态</Button>
+    const [saveLoading, setSaveLoading] = useState(false);
+    const [delLoading, setDelLoading] = useState(true);
+    const [repLoading, setRepLoading] = useState(true);
+
+    const reset = status => {
+        status = !!status;
+        setSaveLoading(status);
+        setDelLoading(status);
+        setRepLoading(status);
+    };
+
+    return (
+        <div>
+            <div> 
+                <div className="btn-margin-right" style={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 14 }}>
+                    <Button onClick={() => reset(false)}>关闭加载态</Button>
+                    <Button onClick={() => reset(true)}>开启加载态</Button>
+                </div>
+            </div>
+            <hr/>
+            <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>保存</Button>
+            <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>删除</Button>
+            <div style={{ width: 200, display: 'inline-block'}}>
+                <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>撤销</Button>
+            </div>
         </div>
-      </div>
-      <hr/>
-      <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>保存</Button>
-      <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>删除</Button>
-      <div style={{ width: 200, display: 'inline-block'}}>
-        <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>撤销</Button>
-      </div>
-    </div>
-  );
+    );
 }
 ```
 
@@ -318,21 +319,21 @@ import React from 'react';
 import { ButtonGroup, Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const sizes = ['large', 'default', 'small'];
-
-  return (
-  <div style={{ display: 'flex' }}>
-    {sizes.map(size => (
-      <div style={{ marginRight: 10 }} key={size}>
-        <ButtonGroup size={size}>
-          <Button>拷贝</Button>
-          <Button>查询</Button>
-          <Button>剪切</Button>
-        </ButtonGroup>
-      </div>
-    ))}
-  </div>
-  );
+    const sizes = ['large', 'default', 'small'];
+
+    return (
+        <div style={{ display: 'flex' }}>
+            {sizes.map(size => (
+                <div style={{ marginRight: 10 }} key={size}>
+                    <ButtonGroup size={size}>
+                        <Button>拷贝</Button>
+                        <Button>查询</Button>
+                        <Button>剪切</Button>
+                    </ButtonGroup>
+                </div>
+            ))}
+        </div>
+    );
 }
 ```
 
@@ -343,17 +344,17 @@ import React from 'react';
 import { ButtonGroup, Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  return (
-  <div style={{ display: 'flex' }}>
-    <div style={{ marginRight: 10 }}>
-      <ButtonGroup disabled>
-        <Button>拷贝</Button>
-        <Button>查询</Button>
-        <Button>剪切</Button>
-      </ButtonGroup>
-    </div>
-  </div>
-  );
+    return (
+        <div style={{ display: 'flex' }}>
+            <div style={{ marginRight: 10 }}>
+                <ButtonGroup disabled>
+                    <Button>拷贝</Button>
+                    <Button>查询</Button>
+                    <Button>剪切</Button>
+                </ButtonGroup>
+            </div>
+        </div>
+    );
 }
 ```
 
@@ -364,21 +365,21 @@ import React from 'react';
 import { ButtonGroup, Button } from '@douyinfe/semi-ui';
 
 function ButtonDemo() {
-  const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];
-
-  return (
-  <div style={{ display: 'flex' }}>
-    {types.map(type => (
-      <div style={{ marginRight: 10 }} key={type}>
-        <ButtonGroup type={type}>
-          <Button>拷贝</Button>
-          <Button>查询</Button>
-          <Button>剪切</Button>
-        </ButtonGroup>
-      </div>
-    ))}
-  </div>
-  );
+    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];
+
+    return (
+        <div style={{ display: 'flex' }}>
+            {types.map(type => (
+                <div style={{ marginRight: 10 }} key={type}>
+                    <ButtonGroup type={type}>
+                        <Button>拷贝</Button>
+                        <Button>查询</Button>
+                        <Button>剪切</Button>
+                    </ButtonGroup>
+                </div>
+            ))}
+        </div>
+    );
 }
 ```
 
@@ -397,50 +398,50 @@ import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
 
 function SplitButtonDemo(){
 
-  const menu = [
-    { node: 'item', name: '编辑项目', onClick: () => console.log('编辑项目点击') },
-    { node: 'item', name: '重置项目' },
-    { node: 'divider' },
-    { node: 'item', name: '复制项目' },
-    { node: 'item', name: '从项目创建模版' },
-    { node: 'divider' },
-    { node: 'item', name: '删除项目', type: 'danger' },
-  ];
-
-  const [btnVisible,setBtnVisible] = useState({
-    1:false,
-    2:false,
-    3:false
-  })
-
-  const handleVisibleChange = (key,visible)=>{
-    newBtnVisible = {...btnVisible};
-    newBtnVisible[key] = visible;
-    setBtnVisible(newBtnVisible)
-  }
-
-  return (
-    <div>
-      <SplitButtonGroup style={{marginRight:10}}>
-        <Button theme="solid" type="primary">分裂按钮</Button>
-        <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-          <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
-        </Dropdown>
-      </SplitButtonGroup>
-      <SplitButtonGroup style={{marginRight:10}}>
-        <Button theme="light" type="primary">分裂按钮</Button>
-        <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
-          <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
-        </Dropdown>
-      </SplitButtonGroup>
-      <SplitButtonGroup>
-        <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:{}} theme="borderless" type="primary">分裂按钮</Button>
-        <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
-          <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
-        </Dropdown>
-      </SplitButtonGroup>
-    </div>
-  )
+    const menu = [
+        { node: 'item', name: '编辑项目', onClick: () => console.log('编辑项目点击') },
+        { node: 'item', name: '重置项目' },
+        { node: 'divider' },
+        { node: 'item', name: '复制项目' },
+        { node: 'item', name: '从项目创建模版' },
+        { node: 'divider' },
+        { node: 'item', name: '删除项目', type: 'danger' },
+    ];
+
+    const [btnVisible,setBtnVisible] = useState({
+        1:false,
+        2:false,
+        3:false
+    });
+
+    const handleVisibleChange = (key,visible)=>{
+        newBtnVisible = {...btnVisible};
+        newBtnVisible[key] = visible;
+        setBtnVisible(newBtnVisible);
+    };
+
+    return (
+        <div>
+            <SplitButtonGroup style={{marginRight:10}}>
+                <Button theme="solid" type="primary">分裂按钮</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                </Dropdown>
+            </SplitButtonGroup>
+            <SplitButtonGroup style={{marginRight:10}}>
+                <Button theme="light" type="primary">分裂按钮</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                </Dropdown>
+            </SplitButtonGroup>
+            <SplitButtonGroup>
+                <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:{}} theme="borderless" type="primary">分裂按钮</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                </Dropdown>
+            </SplitButtonGroup>
+        </div>
+    );
 }
 ```
 

content/input/checkbox/index-en-US.md

@@ -34,10 +34,10 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <Checkbox onChange={checked => console.log(checked)}>
-    Semi Design
-  </Checkbox>
-)
+    <Checkbox onChange={checked => console.log(checked)}>
+        Semi Design
+    </Checkbox>
+);
 ```
 
 ```jsx live=true
@@ -45,13 +45,13 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <Checkbox
-    defaultChecked
-    onChange={checked => console.log(checked)}
-  >
-    Semi Design
-  </Checkbox>
-)
+    <Checkbox
+        defaultChecked
+        onChange={checked => console.log(checked)}
+    >
+        Semi Design
+    </Checkbox>
+);
 ```
 
 You can use `extra` to add extra information. The extra information usually is longer and even has line changes.
@@ -62,20 +62,20 @@ import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <>
-      <Checkbox
-        extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team'
-      >
-        Semi Design
-      </Checkbox>
-      <br/>
-      <Checkbox
-        extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team'
-        style={{ width: 400 }}
-      >
-        Semi Design
-      </Checkbox>
+        <Checkbox
+            extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team'
+        >
+            Semi Design
+        </Checkbox>
+        <br/>
+        <Checkbox
+            extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team'
+            style={{ width: 400 }}
+        >
+            Semi Design
+        </Checkbox>
     </>
-)
+);
 ```
 
 ### Disabled
@@ -85,12 +85,12 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <Checkbox Default Checked={false} with>UnChecked Disabled</Checkbox>
-    <br />
-    <Checkbox defaultChecked disabled>Checked Disabled</Checkbox>
-  </div>
-)
+    <div>
+        <Checkbox Default Checked={false} with>UnChecked Disabled</Checkbox>
+        <br />
+        <Checkbox defaultChecked disabled>Checked Disabled</Checkbox>
+    </div>
+);
 ```
 
 ### Checkbox Group in JSX
@@ -104,14 +104,14 @@ import React from 'react';
 import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
 
 () => (
-  <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']}>
-    <Checkbox value="A">A</Checkbox>
-    <Checkbox value="B">B</Checkbox>
-    <Checkbox value="C">C</Checkbox>
-    <Checkbox value="D">D</Checkbox>
-    <Checkbox value="E">E</Checkbox>
-  </CheckboxGroup>
-)
+    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']}>
+        <Checkbox value="A">A</Checkbox>
+        <Checkbox value="B">B</Checkbox>
+        <Checkbox value="C">C</Checkbox>
+        <Checkbox value="D">D</Checkbox>
+        <Checkbox value="E">E</Checkbox>
+    </CheckboxGroup>
+);
 ```
 
 
@@ -125,38 +125,38 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
 
-  render() {
-    function onChange(checkedValues) {
-      console.log('checked = ', checkedValues);
+    render() {
+        function onChange(checkedValues) {
+            console.log('checked = ', checkedValues);
+        }
+
+        const plainOptions = ['semi', 'vigo', 'helo'];
+        const options = [
+            { label: 'Aim for the highest', value: '1', extra: "Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing" },
+            { label: 'Be grounded & courageous', value: '2', extra:"Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
+            { label: 'Be open & humble', value: '3', extra: "Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas." },
+            { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused."}
+        ];
+        const optionsWithDisabled = [
+            { label: 'Photography', value: 'Photography' },
+            { label: 'Movies', value: 'Movies' },
+            { label: 'Running', value: 'Running', disabled: false },
+        ];
+        return (
+            <div>
+                <CheckboxGroup options={plainOptions} defaultValue={['semi']} onChange={onChange} />
+                <br/><br/>
+                <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} />
+                <br/><br/>
+                <CheckboxGroup
+                    options={optionsWithDisabled}
+                    disabled
+                    defaultValue={['Photography']}
+                    onChange={onChange}
+                />
+            </div>
+        );
     }
-
-    const plainOptions = ['semi', 'vigo', 'helo'];
-    const options = [
-      { label: 'Aim for the highest', value: '1', extra: "Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing" },
-      { label: 'Be grounded & courageous', value: '2', extra:"Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
-      { label: 'Be open & humble', value: '3', extra: "Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas." },
-      { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused."}
-    ];
-    const optionsWithDisabled = [
-      { label: 'Photography', value: 'Photography' },
-      { label: 'Movies', value: 'Movies' },
-      { label: 'Running', value: 'Running', disabled: false },
-    ];
-    return (
-      <div>
-        <CheckboxGroup options={plainOptions} defaultValue={['semi']} onChange={onChange} />
-        <br/><br/>
-        <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} />
-        <br/><br/>
-        <CheckboxGroup
-          options={optionsWithDisabled}
-          disabled
-          defaultValue={['Photography']}
-          onChange={onChange}
-        />
-      </div>
-    )
-  }
 }
 ```
 
@@ -169,16 +169,16 @@ import React from 'react';
 import { CheckboxGroup } from '@douyinfe/semi-ui';
 
 () => {
-  const options = [
-    { label: 'semi', value: 'semi' },
-    { label: 'hotsoon', value: 'hotsoon' },
-    { label: 'pipixia', value: 'pipixia' },
-    { label: 'toutiao', value: 'toutiao' }
-  ];
-  return (
-    <CheckboxGroup options={options} direction='horizontal' />
-  )
-}
+    const options = [
+        { label: 'semi', value: 'semi' },
+        { label: 'hotsoon', value: 'hotsoon' },
+        { label: 'pipixia', value: 'pipixia' },
+        { label: 'toutiao', value: 'toutiao' }
+    ];
+    return (
+        <CheckboxGroup options={options} direction='horizontal' />
+    );
+};
 ```
 
 ### Controlled Component
@@ -191,63 +191,63 @@ import { Checkbox, Button } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
 
-  constructor() {
-    super();
-    this.state = {
-      checked: true,
-      disabled: false,
+    constructor() {
+        super();
+        this.state = {
+            checked: true,
+            disabled: false,
+        };
+        this.toggleChecked = this.toggleChecked.bind(this);
+        this.toggleDisable = this.toggleDisable.bind(this);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    toggleChecked () {
+        this.setState({ checked: !this.state.checked });
+    };
+
+    toggleDisable () {
+        this.setState({ disabled: !this.state.disabled });
+    };
+
+    onChange (e) {
+        console.log('checked = ', e.target.checked);
+        this.setState({
+            checked: e.target.checked,
+        });
+    };
+
+    render() {
+        const label = `${this.state.checked ? 'Checked' : 'Unchecked'} ${
+            this.state.disabled ? 'Disabled' : 'Enabled'
+        }`;
+        return (
+            <div>
+                <p style={{ marginBottom: '20px' }}>
+                    <Checkbox
+                        checked={this.state.checked}
+                        disabled={this.state.disabled}
+                        onChange={this.onChange}
+                    >
+                        {label}
+                    </Checkbox>
+                </p>
+                <p>
+                    <Button type="primary" size="small" onClick={this.toggleChecked}>
+                        {!this.state.checked ? 'Check' : 'Uncheck'}
+                    </Button>
+                    <Button
+                        style={{ marginLeft: '10px' }}
+                        type="primary"
+                        size="small"
+                        onClick={this.toggleDisable}
+                    >
+                        {!this.state.disabled ? 'Disable' : 'Enable'}
+                    </Button>
+                </p>
+            </div>
+        );
     }
-    this.toggleChecked = this.toggleChecked.bind(this);
-    this.toggleDisable = this.toggleDisable.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  toggleChecked () {
-    this.setState({ checked: !this.state.checked });
-  };
-
-  toggleDisable () {
-    this.setState({ disabled: !this.state.disabled });
-  };
-
-  onChange (e) {
-    console.log('checked = ', e.target.checked);
-    this.setState({
-      checked: e.target.checked,
-    });
-  };
-
-  render() {
-    const label = `${this.state.checked ? 'Checked' : 'Unchecked'} ${
-      this.state.disabled ? 'Disabled' : 'Enabled'
-    }`;
-    return (
-      <div>
-        <p style={{ marginBottom: '20px' }}>
-          <Checkbox
-            checked={this.state.checked}
-            disabled={this.state.disabled}
-            onChange={this.onChange}
-          >
-            {label}
-          </Checkbox>
-        </p>
-        <p>
-          <Button type="primary" size="small" onClick={this.toggleChecked}>
-            {!this.state.checked ? 'Check' : 'Uncheck'}
-          </Button>
-          <Button
-            style={{ marginLeft: '10px' }}
-            type="primary"
-            size="small"
-            onClick={this.toggleDisable}
-          >
-            {!this.state.disabled ? 'Disable' : 'Enable'}
-          </Button>
-        </p>
-      </div>
-    );
-  }
 }
 
 ```
@@ -266,37 +266,37 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
     const [indeterminate, setIndeterminate] = useState(true);
     const [checkAll, setCheckall] = useState(false);
     const onChange = (checkedList) => {
-      setCheckedList(checkedList);
-      setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length);
-      setCheckall(checkedList.length === plainOptions.length);
-    }
+        setCheckedList(checkedList);
+        setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length);
+        setCheckall(checkedList.length === plainOptions.length);
+    };
     const onCheckAllChange = (e) => {
-      console.log(e);
-      setCheckedList(e.target.checked ? plainOptions : []);
-      setIndeterminate(false);
-      setCheckall(e.target.checked);
-    }
+        console.log(e);
+        setCheckedList(e.target.checked ? plainOptions : []);
+        setIndeterminate(false);
+        setCheckall(e.target.checked);
+    };
 
     return (
         <div>
-          <div style={{ paddingBottom: 8, borderBottom: '1px solid var(--semi-color-border)' }}>
-            <Checkbox
-              indeterminate={indeterminate}
-              onChange={onCheckAllChange}
-              checked={checkAll}
-            >
-              Check all
-            </Checkbox>
-          </div>
-          <CheckboxGroup
-            style={{marginTop:6}}
-            options={plainOptions}
-            value={checkedList}
-            onChange={onChange}
-          />
+            <div style={{ paddingBottom: 8, borderBottom: '1px solid var(--semi-color-border)' }}>
+                <Checkbox
+                    indeterminate={indeterminate}
+                    onChange={onCheckAllChange}
+                    checked={checkAll}
+                >
+                    Check all
+                </Checkbox>
+            </div>
+            <CheckboxGroup
+                style={{marginTop:6}}
+                options={plainOptions}
+                value={checkedList}
+                onChange={onChange}
+            />
         </div>
-    )
-}
+    );
+};
 
 ```
 
@@ -361,26 +361,26 @@ import React from 'react';
 import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 
 () => (
-  <CheckboxGroup style={{ width: '100%' }}>
-    <Row>
-      <Col span={8}>
-        <Checkbox value="A">A</Checkbox>
-      </Col>
-      <Col span={8}>
-        <Checkbox value="B">B</Checkbox>
-      </Col>
-      <Col span={8}>
-        <Checkbox value="C">C</Checkbox>
-      </Col>
-      <Col span={8}>
-        <Checkbox value="D">D</Checkbox>
-      </Col>
-      <Col span={8}>
-        <Checkbox value="E">E</Checkbox>
-      </Col>
-    </Row>
-  </CheckboxGroup>
-)
+    <CheckboxGroup style={{ width: '100%' }}>
+        <Row>
+            <Col span={8}>
+                <Checkbox value="A">A</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="B">B</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="C">C</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="D">D</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="E">E</Checkbox>
+            </Col>
+        </Row>
+    </CheckboxGroup>
+);
 ```
 
 ## API Reference

content/input/checkbox/index.md

@@ -31,8 +31,8 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <Checkbox onChange={checked => console.log(checked)}>Semi Design</Checkbox>
-)
+    <Checkbox onChange={checked => console.log(checked)}>Semi Design</Checkbox>
+);
 ```
 
 ```jsx live=true
@@ -40,8 +40,8 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <Checkbox defaultChecked onChange={checked => console.log(checked)}>Semi Design</Checkbox>
-)
+    <Checkbox defaultChecked onChange={checked => console.log(checked)}>Semi Design</Checkbox>
+);
 ```
 
 带辅助文本的checkbox。通过`extra`传入辅助文本。辅助文本会更长一些，甚至还可能换行。
@@ -51,16 +51,16 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Checkbox extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
-      Semi Design
-    </Checkbox>
-    <br/>
-    <Checkbox extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 400 }}>
-      Semi Design
-    </Checkbox>
-  </>
-)
+    <>
+        <Checkbox extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
+            Semi Design
+        </Checkbox>
+        <br/>
+        <Checkbox extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width: 400 }}>
+            Semi Design
+        </Checkbox>
+    </>
+);
 ```
 
 ### 禁用
@@ -72,12 +72,12 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-      <Checkbox defaultChecked={false} disabled>Unchecked Disabled</Checkbox>
-      <br />
-      <Checkbox defaultChecked disabled>Checked Disabled</Checkbox>
-  </div>
-)
+    <div>
+        <Checkbox defaultChecked={false} disabled>Unchecked Disabled</Checkbox>
+        <br />
+        <Checkbox defaultChecked disabled>Checked Disabled</Checkbox>
+    </div>
+);
 ```
 
 ### JSX方式声明Checkbox组
@@ -91,14 +91,14 @@ import React from 'react';
 import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-  <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']}>
-      <Checkbox value="A">A</Checkbox>
-      <Checkbox value="B">B</Checkbox>
-      <Checkbox value="C">C</Checkbox>
-      <Checkbox value="D">D</Checkbox>
-      <Checkbox value="E">E</Checkbox>
-  </CheckboxGroup>
-)
+    <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']}>
+        <Checkbox value="A">A</Checkbox>
+        <Checkbox value="B">B</Checkbox>
+        <Checkbox value="C">C</Checkbox>
+        <Checkbox value="D">D</Checkbox>
+        <Checkbox value="E">E</Checkbox>
+    </CheckboxGroup>
+);
 ```
 
 
@@ -111,37 +111,37 @@ import React from 'react';
 import { CheckboxGroup } from '@douyinfe/semi-ui';
 
 () => {
-  function onChange(checkedValues) {
-    console.log('checked = ', checkedValues);
-  }
-
-  const plainOptions = ['抖音', '火山', '皮皮虾'];
-  const options = [
-    { label: '追求极致', value: '1', extra: '不断提高要求，延迟满足感，在更大范围里找最优解' },
-    { label: '务实敢为', value: '2', extra:'直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
-    { label: '开放谦逊', value: '3', extra: '内心阳光，信任伙伴；乐于助人和求助，合作成大事;格局大，上个台阶想问题；对外敏锐谦虚，ego小，听得进意见' },
-    { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点'}
-  ];
-  const optionsWithDisabled = [
-    { label: 'Photography', value: 'Photography' },
-    { label: 'Movies', value: 'Movies' },
-    { label: 'Running', value: 'Running', disabled: false },
-  ];
-  return (
-    <div>
-      <CheckboxGroup options={plainOptions} defaultValue={['抖音']} onChange={onChange} />
-      <br/><br/>
-      <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} />
-      <br/><br/>
-      <CheckboxGroup
-        options={optionsWithDisabled}
-        disabled
-        defaultValue={['Photography']}
-        onChange={onChange}
-      />
-  </div>
-  )
-}
+    function onChange(checkedValues) {
+        console.log('checked = ', checkedValues);
+    }
+
+    const plainOptions = ['抖音', '火山', '皮皮虾'];
+    const options = [
+        { label: '追求极致', value: '1', extra: '不断提高要求，延迟满足感，在更大范围里找最优解' },
+        { label: '务实敢为', value: '2', extra:'直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
+        { label: '开放谦逊', value: '3', extra: '内心阳光，信任伙伴；乐于助人和求助，合作成大事;格局大，上个台阶想问题；对外敏锐谦虚，ego小，听得进意见' },
+        { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点'}
+    ];
+    const optionsWithDisabled = [
+        { label: 'Photography', value: 'Photography' },
+        { label: 'Movies', value: 'Movies' },
+        { label: 'Running', value: 'Running', disabled: false },
+    ];
+    return (
+        <div>
+            <CheckboxGroup options={plainOptions} defaultValue={['抖音']} onChange={onChange} />
+            <br/><br/>
+            <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} />
+            <br/><br/>
+            <CheckboxGroup
+                options={optionsWithDisabled}
+                disabled
+                defaultValue={['Photography']}
+                onChange={onChange}
+            />
+        </div>
+    );
+};
 ```
 
 
@@ -154,16 +154,16 @@ import React from 'react';
 import { CheckboxGroup } from '@douyinfe/semi-ui';
 
 () => {
-  const options = [
-    { label: '抖音', value: 'abc' },
-    { label: '火山', value: 'hotsoon' },
-    { label: '皮皮虾', value: 'pipixia' },
-    { label: '今日头条', value: 'toutiao' }
-  ];
-  return (
-    <CheckboxGroup options={options} direction='horizontal' />
-  )
-}
+    const options = [
+        { label: '抖音', value: 'abc' },
+        { label: '火山', value: 'hotsoon' },
+        { label: '皮皮虾', value: 'pipixia' },
+        { label: '今日头条', value: 'toutiao' }
+    ];
+    return (
+        <CheckboxGroup options={options} direction='horizontal' />
+    );
+};
 ```
 
 
@@ -177,63 +177,63 @@ import { Checkbox, Button } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
 
-  constructor() {
-    super();
-    this.state = {
-      checked: true,
-      disabled: false,
+    constructor() {
+        super();
+        this.state = {
+            checked: true,
+            disabled: false,
+        };
+        this.toggleChecked = this.toggleChecked.bind(this);
+        this.toggleDisable = this.toggleDisable.bind(this);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    toggleChecked () {
+        this.setState({ checked: !this.state.checked });
+    };
+
+    toggleDisable () {
+        this.setState({ disabled: !this.state.disabled });
+    };
+
+    onChange (e) {
+        console.log('checked = ', e.target.checked);
+        this.setState({
+            checked: e.target.checked,
+        });
+    };
+
+    render() {
+        const label = `${this.state.checked ? 'Checked' : 'Unchecked'} ${
+            this.state.disabled ? 'Disabled' : 'Enabled'
+        }`;
+        return (
+            <div>
+                <p style={{ marginBottom: '20px' }}>
+                    <Checkbox
+                        checked={this.state.checked}
+                        disabled={this.state.disabled}
+                        onChange={this.onChange}
+                    >
+                        {label}
+                    </Checkbox>
+                </p>
+                <p>
+                    <Button type="primary" size="small" onClick={this.toggleChecked}>
+                        {!this.state.checked ? 'Check' : 'Uncheck'}
+                    </Button>
+                    <Button
+                        style={{ marginLeft: '10px' }}
+                        type="primary"
+                        size="small"
+                        onClick={this.toggleDisable}
+                    >
+                        {!this.state.disabled ? 'Disable' : 'Enable'}
+                    </Button>
+                </p>
+            </div>
+        );
     }
-    this.toggleChecked = this.toggleChecked.bind(this);
-    this.toggleDisable = this.toggleDisable.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  toggleChecked () {
-    this.setState({ checked: !this.state.checked });
-  };
-
-  toggleDisable () {
-    this.setState({ disabled: !this.state.disabled });
-  };
-
-  onChange (e) {
-    console.log('checked = ', e.target.checked);
-    this.setState({
-      checked: e.target.checked,
-    });
-  };
-
-  render() {
-    const label = `${this.state.checked ? 'Checked' : 'Unchecked'} ${
-      this.state.disabled ? 'Disabled' : 'Enabled'
-    }`;
-    return (
-      <div>
-        <p style={{ marginBottom: '20px' }}>
-          <Checkbox
-            checked={this.state.checked}
-            disabled={this.state.disabled}
-            onChange={this.onChange}
-          >
-            {label}
-          </Checkbox>
-        </p>
-        <p>
-          <Button type="primary" size="small" onClick={this.toggleChecked}>
-            {!this.state.checked ? 'Check' : 'Uncheck'}
-          </Button>
-          <Button
-            style={{ marginLeft: '10px' }}
-            type="primary"
-            size="small"
-            onClick={this.toggleDisable}
-          >
-            {!this.state.disabled ? 'Disable' : 'Enable'}
-          </Button>
-        </p>
-      </div>
-    );
-  }
 }
 
 ```
@@ -252,37 +252,37 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
     const [indeterminate, setIndeterminate] = useState(true);
     const [checkAll, setCheckall] = useState(false);
     const onChange = (checkedList) => {
-      setCheckedList(checkedList);
-      setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length);
-      setCheckall(checkedList.length === plainOptions.length);
-    }
+        setCheckedList(checkedList);
+        setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length);
+        setCheckall(checkedList.length === plainOptions.length);
+    };
     const onCheckAllChange = (e) => {
-      console.log(e);
-      setCheckedList(e.target.checked ? plainOptions : []);
-      setIndeterminate(false);
-      setCheckall(e.target.checked);
-    }
+        console.log(e);
+        setCheckedList(e.target.checked ? plainOptions : []);
+        setIndeterminate(false);
+        setCheckall(e.target.checked);
+    };
 
     return (
         <div>
-          <div style={{ paddingBottom: 8, borderBottom: '1px solid var(--semi-color-border)' }}>
-            <Checkbox
-              indeterminate={indeterminate}
-              onChange={onCheckAllChange}
-              checked={checkAll}
-            >
-              Check all
-            </Checkbox>
-          </div>
-          <CheckboxGroup
-            style={{marginTop:6}}
-            options={plainOptions}
-            value={checkedList}
-            onChange={onChange}
-          />
+            <div style={{ paddingBottom: 8, borderBottom: '1px solid var(--semi-color-border)' }}>
+                <Checkbox
+                    indeterminate={indeterminate}
+                    onChange={onCheckAllChange}
+                    checked={checkAll}
+                >
+                    Check all
+                </Checkbox>
+            </div>
+            <CheckboxGroup
+                style={{marginTop:6}}
+                options={plainOptions}
+                value={checkedList}
+                onChange={onChange}
+            />
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 卡片样式
@@ -346,26 +346,26 @@ import React from 'react';
 import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 
 () => (
-  <CheckboxGroup style={{ width: '100%' }}>
-      <Row>
-        <Col span={8}>
-          <Checkbox value="A">A</Checkbox>
-        </Col>
-        <Col span={8}>
-          <Checkbox value="B">B</Checkbox>
-        </Col>
-        <Col span={8}>
-          <Checkbox value="C">C</Checkbox>
-        </Col>
-        <Col span={8}>
-          <Checkbox value="D">D</Checkbox>
-        </Col>
-        <Col span={8}>
-          <Checkbox value="E">E</Checkbox>
-        </Col>
-      </Row>
-  </CheckboxGroup>
-)
+    <CheckboxGroup style={{ width: '100%' }}>
+        <Row>
+            <Col span={8}>
+                <Checkbox value="A">A</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="B">B</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="C">C</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="D">D</Checkbox>
+            </Col>
+            <Col span={8}>
+                <Checkbox value="E">E</Checkbox>
+            </Col>
+        </Row>
+    </CheckboxGroup>
+);
 ```
 
 ## API参考

content/input/datepicker/index-en-US.md

@@ -43,12 +43,12 @@ import React from 'react';
 import { DatePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-      <div>
-        <DatePicker type="dateTime" density='compact' /><br /><br />
-        <DatePicker type="dateRange" density='compact' style={{ width: 260 }} />
-      </div>
-  );
+    return (
+        <div>
+            <DatePicker type="dateTime" density='compact' /><br /><br />
+            <DatePicker type="dateRange" density='compact' style={{ width: 260 }} />
+        </div>
+    );
 }
 ```
 
@@ -479,10 +479,10 @@ class App extends React.Component {
         this.disabledTime = date =>
             dateFns.isToday(date)
                 ? {
-                      disabledHours: () => [17, 18],
-                      disabledMinutes: hour => (19 === hour ? range(0, 10, 1) : []),
-                      disabledSeconds: (hour, minute) => (hour === 20 && minute === 20 ? range(0, 20, 1) : []),
-                  }
+                    disabledHours: () => [17, 18],
+                    disabledMinutes: hour => (19 === hour ? range(0, 10, 1) : []),
+                    disabledSeconds: (hour, minute) => (hour === 20 && minute === 20 ? range(0, 20, 1) : []),
+                }
                 : null;
 
         this.disabledTime2 = (date, panelType) => {

content/input/datepicker/index.md

@@ -438,10 +438,10 @@ class App extends React.Component {
         this.disabledTime = date =>
             dateFns.isToday(date)
                 ? {
-                      disabledHours: () => [17, 18],
-                      disabledMinutes: hour => (19 === hour ? range(0, 10, 1) : []),
-                      disabledSeconds: (hour, minute) => (hour === 20 && minute === 20 ? range(0, 20, 1) : []),
-                  }
+                    disabledHours: () => [17, 18],
+                    disabledMinutes: hour => (19 === hour ? range(0, 10, 1) : []),
+                    disabledSeconds: (hour, minute) => (hour === 20 && minute === 20 ? range(0, 20, 1) : []),
+                }
                 : null;
 
         this.disabledTime2 = (date, panelType) => {

content/input/form/index-en-US.md

@@ -72,7 +72,7 @@ import { Form } from '@douyinfe/semi-ui';
         <Form.Input field='userName' label='UserName' />
         <Form.Input field='password' label='Password' />
     </Form>
-)
+);
 ```
 
 #### Other forms of support
@@ -99,7 +99,7 @@ import { Form } from '@douyinfe/semi-ui';
         </>
     )} layout='horizontal'>
     </Form>
-)
+);
 ```
 
 #### Via children function
@@ -127,7 +127,7 @@ import { Form } from '@douyinfe/semi-ui';
             )
         }
     </Form>
-)
+);
 ```
 
 #### Via props.component
@@ -139,18 +139,18 @@ import React from 'react';
 import { Form } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
-  constructor() { super(); }
-  render() {
-      const fields = ({ formState, formApi, values }) => (
-          <>
-              <Form.Input field='Role'/>
-              <Form.Input field='UserName' />
-              <Form.Input field='Password' />
-              <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
-          </>
-      );
-      return <Form component={fields} layout='horizontal'/>
-  }
+    constructor() { super(); }
+    render() {
+        const fields = ({ formState, formApi, values }) => (
+            <>
+                <Form.Input field='Role'/>
+                <Form.Input field='UserName' />
+                <Form.Input field='Password' />
+                <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
+            </>
+        );
+        return <Form component={fields} layout='horizontal'/>;
+    }
 }
 ```
 
@@ -174,7 +174,7 @@ class BasicDemoWithInit extends React.Component {
         this.getFormApi = this.getFormApi.bind(this);
     }
 
-    getFormApi(formApi) { this.formApi = formApi }
+    getFormApi(formApi) { this.formApi = formApi; }
 
     render() {
         const { Input, InputNumber, AutoComplete, Select, TreeSelect, Cascader, DatePicker, TimePicker, TextArea, CheckboxGroup, Checkbox, RadioGroup, Radio, Slider, Rating, Switch, TagInput } = Form;
@@ -317,7 +317,7 @@ class BasicDemoWithInit extends React.Component {
                 </Row>
                 <Row>
                     <Col span={12}>
-                      <TimePicker field="time" label='End Time（TimePicker）' style={{ width: '90%' }}/>
+                        <TimePicker field="time" label='End Time（TimePicker）' style={{ width: '90%' }}/>
                     </Col>
                     <Col span={12}>
                         <InputNumber field='number' label='Number of applications（InputNumber）' initValue={20} style={style}/>
@@ -325,15 +325,15 @@ class BasicDemoWithInit extends React.Component {
                 </Row>
                 <Row>
                     <Col span={12}>
-                      <Slider field="range" label='Resource usage alarm threshold(%)（Slider）' initValue={10} style={{ width: '90%' }}/>
+                        <Slider field="range" label='Resource usage alarm threshold(%)（Slider）' initValue={10} style={{ width: '90%' }}/>
                     </Col>
                     <Col span={12}>
-                      <Switch field='switch' label='Switch(Switch)'/>
+                        <Switch field='switch' label='Switch(Switch)'/>
                     </Col>
                 </Row>
                 <Row>
                     <Col span={12}>
-                      <Rating field="rating" label='Satisfaction(Rating)' initValue={2} style={{ width: '90%' }}/>
+                        <Rating field="rating" label='Satisfaction(Rating)' initValue={2} style={{ width: '90%' }}/>
                     </Col>
                     <Col span={12}>
                         <TagInput 
@@ -399,7 +399,7 @@ import { Form, Row, Col, Toast, TextArea } from '@douyinfe/semi-ui';
             )
         }
     </Form>
-)
+);
 ```
 
 ### Form layout
@@ -412,28 +412,28 @@ import React from 'react';
 import { Form, Button, Toast } from '@douyinfe/semi-ui';
 
 () => {
- const handleSubmit = (values) => {
-   console.log(values);
-   Toast.info('Submit Success');
- }
- return (
-     <Form onSubmit={values => handleSubmit(values)} style={{width: 400}}>
-        {({formState, values, formApi}) => (
-            <>
-                <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>
-                <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
-                <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <p>
-                      <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
-                  </p>
-                  <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
-                </div>
-            </>
-        )}
-    </Form>
- )
-}
+    const handleSubmit = (values) => {
+        console.log(values);
+        Toast.info('Submit Success');
+    };
+    return (
+        <Form onSubmit={values => handleSubmit(values)} style={{width: 400}}>
+            {({formState, values, formApi}) => (
+                <>
+                    <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>
+                    <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
+                    <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <p>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                        </p>
+                        <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
+                    </div>
+                </>
+            )}
+        </Form>
+    );
+};
 ```
 
 -   Horizontal Layout: Arrange each field horizontally
@@ -448,7 +448,7 @@ import { Form } from '@douyinfe/semi-ui';
         <Form.Input field='phone' label='PhoneNumber' placeholder='Enter your phone number'></Form.Input>
         <Form.Input field='password' label='Password' placeholder='Enter your password'></Form.Input>
     </Form>
-)
+);
 ```
 
 -   Label Position, Label Align  
@@ -456,7 +456,9 @@ import { Form } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form, Select } from '@douyinfe/semi-ui';
+import { Form, Select, Checkbox, Radio } from '@douyinfe/semi-ui';
+
+const { Option } = Select;
 
 class BasicDemo extends React.Component {
     constructor() {
@@ -474,32 +476,32 @@ class BasicDemo extends React.Component {
     changeLabelPos(labelPosition) {
         let labelWidth;
         labelPosition === 'left' ? labelWidth = '180px' : labelWidth = 'auto';
-        this.setState({ labelPosition, labelWidth })
+        this.setState({ labelPosition, labelWidth });
     }
 
-    changeLabelAlign(labelAlign) { this.setState({ labelAlign }) }
+    changeLabelAlign(labelAlign) { this.setState({ labelAlign }); }
 
     render() {
         const { labelPosition, labelAlign, labelWidth } = this.state;
         return (
             <>
-            <div style={{borderBottom: '1px solid var(--semi-color-text-3)', paddingBottom: 10 }}>
-                <Form.Label style={{ marginLeft: 10 }}>Switch Label Position:</Form.Label>
-                <Select onChange={this.changeLabelPos} value={labelPosition} style={{width: 100}}>
-                    <Select.Option value='top'>top</Select.Option>
-                    <Select.Option value='left'>left</Select.Option>
-                </Select>
-                <Form.Label style={{ marginLeft: 10 }}>Switch Label Text Align</Form.Label>
-                <Select onChange={this.changeLabelAlign} value={labelAlign} style={{width: 100}}>
-                    <Select.Option value='left'>left</Select.Option>
-                    <Select.Option value='right'>right</Select.Option>
-                </Select>
-            </div>
-            <Form
-                labelPosition={labelPosition}
-                labelWidth={labelWidth}
-                labelAlign={labelAlign}
-                style={{ padding: '10px', width: 600 }}>
+                <div style={{borderBottom: '1px solid var(--semi-color-text-3)', paddingBottom: 10 }}>
+                    <Form.Label style={{ marginLeft: 10 }}>Switch Label Position:</Form.Label>
+                    <Select onChange={this.changeLabelPos} value={labelPosition} style={{width: 100}}>
+                        <Select.Option value='top'>top</Select.Option>
+                        <Select.Option value='left'>left</Select.Option>
+                    </Select>
+                    <Form.Label style={{ marginLeft: 10 }}>Switch Label Text Align</Form.Label>
+                    <Select onChange={this.changeLabelAlign} value={labelAlign} style={{width: 100}}>
+                        <Select.Option value='left'>left</Select.Option>
+                        <Select.Option value='right'>right</Select.Option>
+                    </Select>
+                </div>
+                <Form
+                    labelPosition={labelPosition}
+                    labelWidth={labelWidth}
+                    labelAlign={labelAlign}
+                    style={{ padding: '10px', width: 600 }}>
                     <Form.Input
                         field="input"
                         label="PhoneNumber"
@@ -528,7 +530,7 @@ class BasicDemo extends React.Component {
                         <Radio value="1">man</Radio>
                         <Radio value="2">woman</Radio>
                     </Form.RadioGroup>
-            </Form>
+                </Form>
             </>
         );
     }
@@ -606,7 +608,7 @@ import { Form, Row, Col } from '@douyinfe/semi-ui';
             </Col>
         </Row>
     </Form>
-)
+);
 ```
 
 ### wrapper Col / label Col
@@ -633,7 +635,7 @@ import { Form } from '@douyinfe/semi-ui';
             <Form.Select.Option value="ued">Designer</Form.Select.Option>
         </Form.Select>
     </Form>
-)
+);
 ```
 
 ### Remove automatically added Label
@@ -654,7 +656,7 @@ import { Form } from '@douyinfe/semi-ui';
             <Form.Select.Option value="ued">Designer</Form.Select.Option>
         </Form.Select>
     </Form>
-)
+);
 ```
 
 ### Export Label, ErrorMessage use
@@ -703,16 +705,16 @@ class AssistComponent extends React.Component {
                 <Form.ErrorMessage />
                 <Form.Slot label={{ text: 'SlotA' }}>
                     <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
-                        I'm Semi Form SlotA, a custom ReactNode
+                        {`I'm Semi Form SlotA, a custom ReactNode`}
                     </div>
                 </Form.Slot>
                 <Form.Slot label={{ text: 'SlotB', width: 160, align: 'right' }}>
                     <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
-                        I'm Semi Form SlotA, i have different labelWidth and textAlign.
+                        {`I'm Semi Form SlotA, i have different labelWidth and textAlign.`}
                     </div>
                 </Form.Slot>
             </Form>
-    )}
+        );}
 }
 ```
 
@@ -735,7 +737,7 @@ import { Form } from '@douyinfe/semi-ui';
         <Form.DatePicker field="date" label='Start Date' style={{ width: '250px' }}>
         </Form.DatePicker>
     </Form>
-)
+);
 ```
 
 ### Using Input Group
@@ -763,7 +765,7 @@ import { Form, Button } from '@douyinfe/semi-ui';
         <Form.Input field='name' trigger='blur' initValue='Semi' label='Name'></Form.Input>
         <Button htmlType='submit'>Submit</Button>
     </Form>
-)
+);
 ```
 
 ### Form in the Modal pop-up layer
@@ -775,12 +777,14 @@ When submitting, use `formApi.validate()` to centrally verify the Field
 import React from 'react';
 import { Form, Modal, Button, Row, Col } from '@douyinfe/semi-ui';
 
+const { Option } = Select;
+
 class ModalFormDemo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             visible: false,
-        }
+        };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -794,15 +798,15 @@ class ModalFormDemo extends React.Component {
     handleOk() {
         this.formApi.validate()
             .then((values) => {
-                console.log(values)
+                console.log(values);
             })
             .catch((errors) => {
-                console.log(errors)
+                console.log(errors);
             });
     }
 
     handleCancel() {
-        this.setState({ visible: false })
+        this.setState({ visible: false });
     }
 
     getFormApi(formApi) {
@@ -908,11 +912,11 @@ class BasicDemoWithInit extends React.Component {
         this.getFormApi = this.getFormApi.bind(this);
     }
 
-    getFormApi(formApi) { this.formApi = formApi }
+    getFormApi(formApi) { this.formApi = formApi; }
 
     render() {
         const { Select, Input } = Form;
-        const style = { width: '100%' }
+        const style = { width: '100%' };
         return (
             <Form initValues={this.state.initValues}>
                 <Input
@@ -933,7 +937,7 @@ class BasicDemoWithInit extends React.Component {
                     <Select.Option value="ued">Designer</Select.Option>
                 </Select>
             </Form>
-        )
+        );
     }
 }
 ```
@@ -1055,7 +1059,7 @@ class FieldLevelValidateDemo extends React.Component {
 
     validateName(val) {
         if (!val) {
-             return '【sync】can\'t be empty';
+            return '【sync】can\'t be empty';
         } else if (val.length <= 5) {
             return '【sync】must more than 5';
         }
@@ -1153,7 +1157,7 @@ import { Form, Button } from '@douyinfe/semi-ui';
             </React.Fragment>
         )}
     </Form>
-)
+);
 ```
 
 #### Add or delete form items dynamically - by use ArrayField
@@ -1172,7 +1176,7 @@ class ArrayFieldDemo extends React.Component {
                 { name: 'Face stickers', type: '2D' },
                 { name: 'Background sticker', type: '3D' },
             ]
-        }
+        };
     }
 
     render() {
@@ -1274,7 +1278,7 @@ class ArrayDemo extends React.Component {
                 </Form.Select>
                 <Button type='danger' onClick={() => this.remove(effect.key)} style={{ margin: 16 }}>Remove</Button>
             </div>
-        ))
+        ));
     }
     render() {
         let { initValues } = this.state;
@@ -1332,7 +1336,7 @@ class UseFromApiDemo extends React.Component {
                 <Form.Input field='name' initValue='mike'></Form.Input>
                 <ComponentUsingFormApi />
             </Form>
-        )
+        );
     }
 }
 ```
@@ -1363,7 +1367,7 @@ class UseFromStateDemo extends React.Component {
                 <ComponentUsingFormState />
             </Form>
         );
-  }
+    }
 }
 ```
 
@@ -1392,7 +1396,7 @@ class UseFieldApiDemo extends React.Component {
                 <Form.Input field='name' initValue='mike'></Form.Input>
                 <ComponentUsingFieldApi />
             </Form>
-        )
+        );
     }
 }
 ```
@@ -1406,26 +1410,26 @@ import React from 'react';
 import { useFieldState, Form } from '@douyinfe/semi-ui';
 
 class UseFieldStateDemo extends React.Component {
-  constructor() { super(); }
-  render() {
-    const ComponentUsingFieldState = props => {
-        const fieldState = useFieldState(props.field);
+    constructor() { super(); }
+    render() {
+        const ComponentUsingFieldState = props => {
+            const fieldState = useFieldState(props.field);
+            return (
+                <>
+                    <span>【{props.field}】FieldState read by 【useFieldState】：</span>
+                    <code>{JSON.stringify(fieldState)}</code>
+                </>
+            );
+        };
         return (
-            <>
-              <span>【{props.field}】FieldState read by 【useFieldState】：</span>
-              <code>{JSON.stringify(fieldState)}</code>
-            </>
+            <Form>
+                <Form.Input field='name' initValue='mike'></Form.Input>
+                <ComponentUsingFieldState field='name' />
+                <Form.Input field='country' initValue='china'></Form.Input>
+                <ComponentUsingFieldState field='country' />
+            </Form>
         );
-    };
-    return (
-       <Form>
-            <Form.Input field='name' initValue='mike'></Form.Input>
-            <ComponentUsingFieldState field='name' />
-            <Form.Input field='country' initValue='china'></Form.Input>
-            <ComponentUsingFieldState field='country' />
-      </Form>
-    )
-  }
+    }
 }
 ```
 
@@ -1637,6 +1641,9 @@ The table below describes the features available in the formApi.
 -   Via "withFormApi" HOC
 
 ```jsx
+import React from 'react';
+import { Form, Button } from '@douyinfe/semi-ui';
+
 class FormApiDemo extends React.Component {
     constructor() {
         super();
@@ -1656,26 +1663,34 @@ class FormApiDemo extends React.Component {
     }
 
     render() {
-        return
-            (
+        return (
+            <>
                 <Form getFormApi={this.getFormApi} />
                 <Form ref={this.formBRef} />
                 <Button onClick={()=>this.changeValues()}>Change</Button>
-            )
+            </>
+        );
     }
 }
 ```
 
 ```jsx
+import React from 'react';
+import { Form, Button } from '@douyinfe/semi-ui';
+
 () => {
     // functional compoentn usage
     const api = useRef();
 
-    return (<Form getFormApi={formApi => api.current = formApi}>
-        <Form.Input field='a' />
-        <Button onClick={()=>{console.log(api)}}>log</Button>
-    </Form>)
-}
+    return (
+        <>
+            <Form getFormApi={formApi => api.current = formApi}>
+                <Form.Input field='a' />
+                <Button onClick={()=>{console.log(api);}}>log</Button>
+            </Form>
+        </>
+    );
+};
 ```
 ## Field Props
 

content/input/form/index.md

@@ -82,8 +82,8 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
             <Form.Input field='UserName' label='用户名' style={{width:80}}/>
             <Form.Input field='Password' label={{ text: '密码', extra: <IconHelpCircle /> }} style={{width:176}}/>
         </Form>
-    )
-}
+    );
+};
 ```
 
 #### 支持的其他写法
@@ -113,8 +113,8 @@ import { Form } from '@douyinfe/semi-ui';
             </>
         )} layout='horizontal' onValueChange={values=>console.log(values)}>
         </Form>
-    )
-}
+    );
+};
 
 ```
 
@@ -144,8 +144,8 @@ import { Form } from '@douyinfe/semi-ui';
                 )
             }
         </Form>
-    )
-}
+    );
+};
 ```
 
 #### 通过 props.component
@@ -158,15 +158,15 @@ import { Form } from '@douyinfe/semi-ui';
 
 () => {
     const fields = ({ formState, formApi, values }) => (
-          <>
-              <Form.Input field='Role' style={{width:176}}/>
-              <Form.Input field='UserName' style={{width:80}}/>
-              <Form.Input field='Password' style={{width:176}}/>
-              <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
-          </>
+        <>
+            <Form.Input field='Role' style={{width:176}}/>
+            <Form.Input field='UserName' style={{width:80}}/>
+            <Form.Input field='Password' style={{width:176}}/>
+            <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
+        </>
     );
-    return <Form component={fields} layout='horizontal' onValueChange={values=>console.log(values)}/>
-}
+    return <Form component={fields} layout='horizontal' onValueChange={values=>console.log(values)}/>;
+};
 ```
 
 ### 已支持的表单控件
@@ -179,6 +179,8 @@ import { Form } from '@douyinfe/semi-ui';
 ```jsx live=true dir="column"
 import React from 'react';
 import { Form, Col, Row, Button } from '@douyinfe/semi-ui';
+import { IconUpload } from '@douyinfe/semi-icons';
+
 class BasicDemoWithInit extends React.Component {
     constructor() {
         super();
@@ -217,13 +219,13 @@ class BasicDemoWithInit extends React.Component {
                         fileInstance:  new File([new ArrayBuffer(2048)], 'jiafang2.jpeg', { type: 'image/jpeg' }),
                         url: 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg'
                     }
-               ]
+                ]
             }
         };
         this.getFormApi = this.getFormApi.bind(this);
     }
 
-    getFormApi(formApi) { this.formApi = formApi }
+    getFormApi(formApi) { this.formApi = formApi; }
 
     render() {
         const { Section, Input, InputNumber, AutoComplete, Select, TreeSelect, Cascader, DatePicker, TimePicker, TextArea, CheckboxGroup, Checkbox, RadioGroup, Radio, Slider, Rating, Switch, TagInput } = Form;
@@ -352,20 +354,20 @@ class BasicDemoWithInit extends React.Component {
                         </Col>
                     </Row>
                     <Row>
-                      <Col span={24}>
-                        <Form.Upload
-                            field='files'
-                            label='证明文件（Upload）'
-                            action='//semi.design/api/upload'
-                        >
-                            <Button icon={<IconUpload />} theme="light">
-                                点击上传
-                            </Button>
-                        </Form.Upload>
-                      </Col>
+                        <Col span={24}>
+                            <Form.Upload
+                                field='files'
+                                label='证明文件（Upload）'
+                                action='//semi.design/api/upload'
+                            >
+                                <Button icon={<IconUpload />} theme="light">
+                                    点击上传
+                                </Button>
+                            </Form.Upload>
+                        </Col>
                     </Row>
-                 </Section>
-                 <Section text='资源详情'>
+                </Section>
+                <Section text='资源详情'>
                     <Row>
                         <Col span={12}>
                             <TextArea
@@ -401,7 +403,7 @@ class BasicDemoWithInit extends React.Component {
                     </Row>
                     <Row>
                         <Col span={12}>
-                        <TimePicker field="time" label='截止时刻（TimePicker）' style={{ width: '90%' }}/>
+                            <TimePicker field="time" label='截止时刻（TimePicker）' style={{ width: '90%' }}/>
                         </Col>
                         <Col span={12}>
                             <InputNumber field='number' label='申请数量（InputNumber）' initValue={20} style={style}/>
@@ -409,15 +411,15 @@ class BasicDemoWithInit extends React.Component {
                     </Row>
                     <Row>
                         <Col span={12}>
-                        <Slider field="range" label='资源使用报警阈值(%)（Slider）' initValue={10} style={{ width: '90%' }}/>
+                            <Slider field="range" label='资源使用报警阈值(%)（Slider）' initValue={10} style={{ width: '90%' }}/>
                         </Col>
                         <Col span={12}>
-                        <Switch field='switch' label='开关(Switch)'/>
+                            <Switch field='switch' label='开关(Switch)'/>
                         </Col>
                     </Row>
                     <Row>
                         <Col span={12}>
-                        <Rating field="rating" label='满意度(Rating)' initValue={2} style={{ width: '90%' }}/>
+                            <Rating field="rating" label='满意度(Rating)' initValue={2} style={{ width: '90%' }}/>
                         </Col>
                     </Row>
                 </Section>
@@ -474,7 +476,7 @@ import { Form, Toast, Row, Col, TextArea } from '@douyinfe/semi-ui';
             )
         }
     </Form>
-)
+);
 ```
 
 ### 表单布局
@@ -487,28 +489,28 @@ import React from 'react';
 import { Form, Toast, Button } from '@douyinfe/semi-ui';
 
 () => {
- const handleSubmit = (values) => {
-   console.log(values);
-   Toast.info('表单已提交');
- }
- return (
-     <Form onSubmit={values => handleSubmit(values)} style={{width: 400}}>
-        {({formState, values, formApi}) => (
-            <>
-                <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>
-                <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
-                <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <p>
-                      <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
-                  </p>
-                  <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
-                </div>
-            </>
-        )}
-    </Form>
- )
-}
+    const handleSubmit = (values) => {
+        console.log(values);
+        Toast.info('表单已提交');
+    };
+    return (
+        <Form onSubmit={values => handleSubmit(values)} style={{width: 400}}>
+            {({formState, values, formApi}) => (
+                <>
+                    <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>
+                    <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
+                    <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <p>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                        </p>
+                        <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
+                    </div>
+                </>
+            )}
+        </Form>
+    );
+};
 ```
 
 -   水平布局：表单控件之间水平排列
@@ -523,7 +525,7 @@ import { Form } from '@douyinfe/semi-ui';
         <Form.Input field='phone' label='PhoneNumber' placeholder='Enter your phone number'></Form.Input>
         <Form.Input field='password' label='Password' placeholder='Enter your password'></Form.Input>
     </Form>
-)
+);
 ```
 
 -   labelPosition、labelAlign  
@@ -549,61 +551,61 @@ class BasicDemo extends React.Component {
     changeLabelPos(labelPosition) {
         let labelWidth;
         labelPosition === 'left' ? labelWidth = '180px' : labelWidth = 'auto';
-        this.setState({ labelPosition, labelWidth })
+        this.setState({ labelPosition, labelWidth });
     }
 
-    changeLabelAlign(labelAlign) { this.setState({ labelAlign }) }
+    changeLabelAlign(labelAlign) { this.setState({ labelAlign }); }
 
     render() {
         const { labelPosition, labelAlign, labelWidth } = this.state;
         return (
             <>
-            <div style={{borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 12 }}>
-                <Form.Label style={{ marginLeft: 10 }}>切换Label位置:</Form.Label>
-                <Select onChange={this.changeLabelPos} value={labelPosition} style={{width: 200}} insetLabel='labelPosition'>
-                    <Select.Option value='top'>top</Select.Option>
-                    <Select.Option value='left'>left</Select.Option>
-                </Select>
-                <Form.Label style={{ marginLeft: 10 }}>切换Label文本对齐方向:</Form.Label>
-                <Select onChange={this.changeLabelAlign} value={labelAlign} style={{width: 200}} insetLabel='labelAlign'>
-                    <Select.Option value='left'>left</Select.Option>
-                    <Select.Option value='right'>right</Select.Option>
-                </Select>
-            </div>
-            <Form
-                labelPosition={labelPosition}
-                labelWidth={labelWidth}
-                labelAlign={labelAlign}
-                key={labelPosition + labelAlign}
-                style={{ padding: '10px', width: 600 }}>
-                      <Form.Input
-                          field="input"
-                          label="手机号码"
-                          trigger='blur'
-                          style={{width: 200}}
-                          rules={[
-                              { required: true, message: 'required error' },
-                              { type: 'string', message: 'type error' },
-                              { validator: (rule, value) => value === 'muji', message: 'not muji' }
-                          ]}
-                      />
-                      <Form.Switch label="是否同意" field='agree'/>
-                      <Form.InputNumber field='price' label='价格' style={{width: 200}}/>
-                      <Form.Select label="姓名" field='name' style={{width: 200}}>
-                          <Form.Select.Option value="mike">mike</Form.Select.Option>
-                          <Form.Select.Option value="jane">jane</Form.Select.Option>
-                          <Form.Select.Option value="kate">kate</Form.Select.Option>
-                      </Form.Select>
-                      <Form.CheckboxGroup label="角色" field='role' direction='horizontal'>
-                          <Form.Checkbox value="admin">admin</Form.Checkbox>
-                          <Form.Checkbox value="user">user</Form.Checkbox>
-                          <Form.Checkbox value="guest">guest</Form.Checkbox>
-                          <Form.Checkbox value="root">root</Form.Checkbox>
-                      </Form.CheckboxGroup>
-                      <Form.RadioGroup field="性别">
-                          <Form.Radio value="1">man</Form.Radio>
-                          <Form.Radio value="2">woman</Form.Radio>
-                      </Form.RadioGroup>
+                <div style={{borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 12 }}>
+                    <Form.Label style={{ marginLeft: 10 }}>切换Label位置:</Form.Label>
+                    <Select onChange={this.changeLabelPos} value={labelPosition} style={{width: 200}} insetLabel='labelPosition'>
+                        <Select.Option value='top'>top</Select.Option>
+                        <Select.Option value='left'>left</Select.Option>
+                    </Select>
+                    <Form.Label style={{ marginLeft: 10 }}>切换Label文本对齐方向:</Form.Label>
+                    <Select onChange={this.changeLabelAlign} value={labelAlign} style={{width: 200}} insetLabel='labelAlign'>
+                        <Select.Option value='left'>left</Select.Option>
+                        <Select.Option value='right'>right</Select.Option>
+                    </Select>
+                </div>
+                <Form
+                    labelPosition={labelPosition}
+                    labelWidth={labelWidth}
+                    labelAlign={labelAlign}
+                    key={labelPosition + labelAlign}
+                    style={{ padding: '10px', width: 600 }}>
+                    <Form.Input
+                        field="input"
+                        label="手机号码"
+                        trigger='blur'
+                        style={{width: 200}}
+                        rules={[
+                            { required: true, message: 'required error' },
+                            { type: 'string', message: 'type error' },
+                            { validator: (rule, value) => value === 'muji', message: 'not muji' }
+                        ]}
+                    />
+                    <Form.Switch label="是否同意" field='agree'/>
+                    <Form.InputNumber field='price' label='价格' style={{width: 200}}/>
+                    <Form.Select label="姓名" field='name' style={{width: 200}}>
+                        <Form.Select.Option value="mike">mike</Form.Select.Option>
+                        <Form.Select.Option value="jane">jane</Form.Select.Option>
+                        <Form.Select.Option value="kate">kate</Form.Select.Option>
+                    </Form.Select>
+                    <Form.CheckboxGroup label="角色" field='role' direction='horizontal'>
+                        <Form.Checkbox value="admin">admin</Form.Checkbox>
+                        <Form.Checkbox value="user">user</Form.Checkbox>
+                        <Form.Checkbox value="guest">guest</Form.Checkbox>
+                        <Form.Checkbox value="root">root</Form.Checkbox>
+                    </Form.CheckboxGroup>
+                    <Form.RadioGroup field="性别">
+                        <Form.Radio value="1">man</Form.Radio>
+                        <Form.Radio value="2">woman</Form.Radio>
+                    </Form.RadioGroup>
                 </Form>
             </>
         );
@@ -682,7 +684,7 @@ import { Form, Col, Row } from '@douyinfe/semi-ui';
             </Col>
         </Row>
     </Form>
-)
+);
 ```
 
 ### 表单分组
@@ -691,7 +693,7 @@ import { Form, Col, Row } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
+import { Form, Button, Radio } from '@douyinfe/semi-ui';
     
 () => {
     const { Section, Input, DatePicker, TimePicker, Select, Switch, InputNumber, Checkbox, CheckboxGroup, RadioGroup } = Form;
@@ -702,16 +704,16 @@ import { Form, Button } from '@douyinfe/semi-ui';
             </Section>
             <Section text={'合格标准'} >
                 <div style={{display:'flex'}}>
-                   <InputNumber field='pass' initValue={60} style={{width:80}} label={{text:'及格正确率', required: true}}/>
-                   <InputNumber field='number' initValue={10} style={{width:80}} label={{text:'合格人数', required: true}}/>
+                    <InputNumber field='pass' initValue={60} style={{width:80}} label={{text:'及格正确率', required: true}}/>
+                    <InputNumber field='number' initValue={10} style={{width:80}} label={{text:'合格人数', required: true}}/>
                 </div>
             </Section>
             <Section text={'考试时间'} >
-               <DatePicker field='date' type='dateTime' initValue={new Date()} style={{width:272}} label={{text:'开始时间', required: true}}/>
-               <div  style={{display:'flex'}}>
-                 <Input field='time' label='考试时长' style={{ width: 176 }} initValue={'60'} addonAfter='分钟'/>
-                 <Checkbox initValue={true} noLabel field='auto' style={{paddingTop: 30, marginLeft: 12}}>到时间自动交卷</Checkbox>
-               </div>
+                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{width:272}} label={{text:'开始时间', required: true}}/>
+                <div  style={{display:'flex'}}>
+                    <Input field='time' label='考试时长' style={{ width: 176 }} initValue={'60'} addonAfter='分钟'/>
+                    <Checkbox initValue={true} noLabel field='auto' style={{paddingTop: 30, marginLeft: 12}}>到时间自动交卷</Checkbox>
+                </div>
                 <RadioGroup
                     field="type"
                     label='有效时间'
@@ -732,10 +734,10 @@ import { Form, Button } from '@douyinfe/semi-ui';
                 >
                     <Radio value="always">自动放出</Radio>
                     <Radio value="user">
-                      <div style={{display:'inline-block'}}>
-                      自定义放出时间
-                      <Form.DatePicker type='dateTimeRange' noLabel field='customTime' style={{width:464, display: 'inline-block'}}/>
-                      </div>
+                        <div style={{display:'inline-block'}}>
+                            自定义放出时间
+                            <Form.DatePicker type='dateTimeRange' noLabel field='customTime' style={{width:464, display: 'inline-block'}}/>
+                        </div>
                     </Radio>
                 </RadioGroup>
             </Section>
@@ -744,11 +746,11 @@ import { Form, Button } from '@douyinfe/semi-ui';
                     <Switch field='open'  label={{ text:'对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
                 </div>
                 <Select
-                  field='users'
-                  label={{ text:'考生', required: true }}
-                  style={{width: 560}}
-                  multiple
-                  initValue={['1','2','3', '4']}
+                    field='users'
+                    label={{ text:'考生', required: true }}
+                    style={{width: 560}}
+                    multiple
+                    initValue={['1','2','3', '4']}
                 >
                     <Select.Option value='1'>曲晨一</Select.Option>
                     <Select.Option value='2'>夏可曼</Select.Option>
@@ -759,8 +761,8 @@ import { Form, Button } from '@douyinfe/semi-ui';
             <Button type='primary' theme='solid' style={{ width: 120, marginTop: 12, marginRight: 4 }}>创建考试</Button>
             <Button style={{marginTop: 12}}>预览</Button>
         </Form>
-    )
-}
+    );
+};
 ```
 
 ### wrapperCol / labelCol
@@ -787,7 +789,7 @@ import { Form } from '@douyinfe/semi-ui';
             <Form.Select.Option value="ued">设计</Form.Select.Option>
         </Form.Select>
     </Form>
-)
+);
 ```
 
 ### 隐藏Label
@@ -808,7 +810,7 @@ import { Form } from '@douyinfe/semi-ui';
             <Form.Select.Option value="ued">设计</Form.Select.Option>
         </Form.Select>
     </Form>
-)
+);
 ```
 
 ### 导出 Label、ErrorMessage 使用
@@ -869,7 +871,7 @@ class AssistComponent extends React.Component {
                     </div>
                 </Form.Slot>
             </Form>
-    )}
+        );}
 }
 ```
 
@@ -893,7 +895,7 @@ import { Form } from '@douyinfe/semi-ui';
         <Form.DatePicker field="date" label='开始日期' style={{ width: '250px' }} initValue={new Date()}>
         </Form.DatePicker>
     </Form>
-)
+);
 ```
 
 ### 使用 helpText、extraText 放置提示信息
@@ -912,7 +914,7 @@ class HelpAndExtra extends React.Component {
         this.state = {
             helpText: '',
             validateStatus: 'default'
-        }
+        };
         this.formApi = null;
         this.getFormApi = this.getFormApi.bind(this);
         this.validate = this.validate.bind(this);
@@ -925,11 +927,11 @@ class HelpAndExtra extends React.Component {
 
     validate(val, values) {
         if (!val) {
-            this.setState({ validateStatus: 'error' })
+            this.setState({ validateStatus: 'error' });
             return <span>密码不能为空</span>;
         } else if (val && val.length <= 3) {
             this.setState({
-                helpText: <span style={{ color: 'var(--semi-color-warning)' }}>'密码强度：弱'</span>,
+                helpText: <span style={{ color: 'var(--semi-color-warning)' }}>密码强度：弱</span>,
                 validateStatus: 'warning'
             }); // show helpText
             return ''; // validate pass
@@ -963,15 +965,19 @@ class HelpAndExtra extends React.Component {
                     field="Password"
                     validateStatus={validateStatus}
                     helpText={helpText}
-                    extraText={<div style={{
-                        color: 'rgba(var(--semi-blue-5), 1)',
-                        fontSize: 14,
-                        userSelect: 'none',
-                        cursor: 'pointer'
-                    }}
-                    onClick={this.random}>
-                        没有想到合适的密码？点击随机生成一个
-                    </div>}
+                    extraText={
+                        <div 
+                            style={{
+                                color: 'rgba(var(--semi-blue-5), 1)',
+                                fontSize: 14,
+                                userSelect: 'none',
+                                cursor: 'pointer'
+                            }}
+                            onClick={this.random}
+                        >
+                            没有想到合适的密码？点击随机生成一个
+                        </div>
+                    }
                 ></Form.Input>
             </Form>
         );
@@ -988,26 +994,26 @@ import React from 'react';
 import { Form } from '@douyinfe/semi-ui';
 
 () => {
-  const options = [
-    { label: '飞书通知', value: 'lark' },
-    { label: '邮件通知', value: 'email' },
-    { label: '顶部横幅通知', value: 'notification' }
-  ];
-  const notifyText = '未勾选时，默认为红点提醒，消息默认进入收件人消息列表。对于重要通知，可同时勾选相应的通知方式。';
-  const forceText = '对于对话框通知，可指定该消息必须在指定时长后才可置为已读。';
-  return (
-    <Form extraTextPosition='middle'>
-      <Form.CheckboxGroup
-        direction='horizontal'
-        field='notify'
-        label='通知方式'
-        extraText={notifyText}
-        options={options}
-      />
-      <Form.InputNumber field='force' label='强制读取(可选)' placeholder='秒' extraText={forceText} extraTextPosition='bottom'/>
-    </Form>
-  );
-}
+    const options = [
+        { label: '飞书通知', value: 'lark' },
+        { label: '邮件通知', value: 'email' },
+        { label: '顶部横幅通知', value: 'notification' }
+    ];
+    const notifyText = '未勾选时，默认为红点提醒，消息默认进入收件人消息列表。对于重要通知，可同时勾选相应的通知方式。';
+    const forceText = '对于对话框通知，可指定该消息必须在指定时长后才可置为已读。';
+    return (
+        <Form extraTextPosition='middle'>
+            <Form.CheckboxGroup
+                direction='horizontal'
+                field='notify'
+                label='通知方式'
+                extraText={notifyText}
+                options={options}
+            />
+            <Form.InputNumber field='force' label='强制读取(可选)' placeholder='秒' extraText={forceText} extraTextPosition='bottom'/>
+        </Form>
+    );
+};
 
 ```
 
@@ -1038,7 +1044,7 @@ import { Form, Button } from '@douyinfe/semi-ui';
         <Form.Input field='姓名' trigger='blur' initValue='Semi'></Form.Input>
         <Button htmlType='submit'>提交</Button>
     </Form>
-)
+);
 ```
 
 ### Modal 弹出层中的表单
@@ -1055,7 +1061,7 @@ class ModalFormDemo extends React.Component {
         super(props);
         this.state = {
             visible: false,
-        }
+        };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -1069,15 +1075,15 @@ class ModalFormDemo extends React.Component {
     handleOk() {
         this.formApi.validate()
             .then((values) => {
-                console.log(values)
+                console.log(values);
             })
             .catch((errors) => {
-                console.log(errors)
+                console.log(errors);
             });
     }
 
     handleCancel() {
-        this.setState({ visible: false })
+        this.setState({ visible: false });
     }
 
     getFormApi(formApi) {
@@ -1186,11 +1192,11 @@ class BasicDemoWithInit extends React.Component {
         this.getFormApi = this.getFormApi.bind(this);
     }
 
-    getFormApi(formApi) { this.formApi = formApi }
+    getFormApi(formApi) { this.formApi = formApi; }
 
     render() {
         const { Select, Input } = Form;
-        const style = { width: '100%' }
+        const style = { width: '100%' };
         return (
             <Form initValues={this.state.initValues}>
                 <Input
@@ -1212,7 +1218,7 @@ class BasicDemoWithInit extends React.Component {
                 </Select>
                 <Button htmlType='submit'>提交</Button>
             </Form>
-        )
+        );
     }
 }
 ```
@@ -1334,7 +1340,7 @@ class FieldLevelValidateDemo extends React.Component {
 
     validateName(val) {
         if (!val) {
-             return '【sync】can\'t be empty';
+            return '【sync】can\'t be empty';
         } else if (val.length <= 5) {
             return '【sync】must more than 5';
         }
@@ -1434,7 +1440,7 @@ import { Form, Button } from '@douyinfe/semi-ui';
             </React.Fragment>
         )}
     </Form>
-)
+);
 ```
 
 #### 数组类动态增删表单项-使用 ArrayField
@@ -1446,6 +1452,7 @@ ArrayField 自带了 add、remove、addWithInitValue 等 api 用来执行新增
 ```jsx live=true dir="column" hideInDSM
 import React from 'react';
 import { ArrayField, TextArea, Form, Button, useFormState } from '@douyinfe/semi-ui';
+import { IconPlusCircle, IconMinusCircle } from '@douyinfe/semi-icons';
 
 class ArrayFieldDemo extends React.Component {
     constructor() {
@@ -1455,7 +1462,7 @@ class ArrayFieldDemo extends React.Component {
                 { name: '脸部贴纸', type: '2D' },
                 { name: '前景贴纸', type: '3D' },
             ]
-        }
+        };
     }
 
     render() {
@@ -1472,7 +1479,7 @@ class ArrayFieldDemo extends React.Component {
                     {({ add, arrayFields, addWithInitValue }) => (
                         <React.Fragment>
                             <Button onClick={add} icon={<IconPlusCircle />} theme='light'>新增空白行</Button>
-                            <Button  icon={<IconPlusCircle />} onClick={() => {addWithInitValue({name: '自定义贴纸', type: '2D'})}} style={{marginLeft:8}}>新增带有初始值的行</Button>
+                            <Button  icon={<IconPlusCircle />} onClick={() => {addWithInitValue({name: '自定义贴纸', type: '2D'});}} style={{marginLeft:8}}>新增带有初始值的行</Button>
                             {
                                 arrayFields.map(({ field, key, remove }, i) => (
                                     <div key={key} style={{ width: 1000, display: 'flex' }}>
@@ -1537,7 +1544,7 @@ class UseFromApiDemo extends React.Component {
                 <Form.Input field='name' initValue='mike'></Form.Input>
                 <ComponentUsingFormApi />
             </Form>
-        )
+        );
     }
 }
 ```
@@ -1568,7 +1575,7 @@ class UseFromStateDemo extends React.Component {
                 <ComponentUsingFormState />
             </Form>
         );
-  }
+    }
 }
 ```
 
@@ -1597,7 +1604,7 @@ class UseFieldApiDemo extends React.Component {
                 <Form.Input field='name' initValue='mike'></Form.Input>
                 <ComponentUsingFieldApi />
             </Form>
-        )
+        );
     }
 }
 ```
@@ -1611,28 +1618,28 @@ import React from 'react';
 import { useFieldState, Form } from '@douyinfe/semi-ui';
 
 class UseFieldStateDemo extends React.Component {
-  constructor() {
-    super();
-  }
-  render() {
-    const ComponentUsingFieldState = props => {
-        const fieldState = useFieldState(props.field);
+    constructor() {
+        super();
+    }
+    render() {
+        const ComponentUsingFieldState = props => {
+            const fieldState = useFieldState(props.field);
+            return (
+                <>
+                    <span>【{props.field}】FieldState read by 【useFieldState】：</span>
+                    <code>{JSON.stringify(fieldState)}</code>
+                </>
+            );
+        };
         return (
-            <>
-              <span>【{props.field}】FieldState read by 【useFieldState】：</span>
-              <code>{JSON.stringify(fieldState)}</code>
-            </>
+            <Form>
+                <Form.Input field='name' initValue='mike'></Form.Input>
+                <ComponentUsingFieldState field='name' />
+                <Form.Input field='country' initValue='china'></Form.Input>
+                <ComponentUsingFieldState field='country' />
+            </Form>
         );
-    };
-    return (
-       <Form>
-            <Form.Input field='name' initValue='mike'></Form.Input>
-            <ComponentUsingFieldState field='name' />
-            <Form.Input field='country' initValue='china'></Form.Input>
-            <ComponentUsingFieldState field='country' />
-      </Form>
-    )
-  }
+    }
 }
 ```
 
@@ -1799,7 +1806,7 @@ class withFieldDemo2 extends React.Component {
                     />
                 </div>
             );
-        }
+        };
         const CustomField = withField(MyComponent, { valueKey: 'value', onKeyChangeFnName: 'onChange' });
 
         const ComponentUsingFormState = () => {
@@ -1902,6 +1909,9 @@ FormState 存储了所有 Form 内部的状态值，包括各表单控件的值
 -   通过[withFormApi](#HOC-withFormApi) HOC
 
 ```jsx
+import React from 'react';
+import { Form, Button } from '@douyinfe/semi-ui';
+
 class FormApiDemo extends React.Component {
     constructor() {
         super();
@@ -1922,27 +1932,34 @@ class FormApiDemo extends React.Component {
     }
 
     render() {
-        return <>
-            // 通过getFormApi回调获取并保存formApi
-            <Form getFormApi={this.getFormApi} />
-            // 通过ref直接获取Form组件实例上的formApi
-            <Form ref={this.formBRef} />
-            <Button onClick={()=>this.changeValues()}>Change</Button>
-        </>
+        return (
+            <>
+                {/* 通过getFormApi回调获取并保存formApi */}
+                <Form getFormApi={this.getFormApi} />
+                {/* 通过ref直接获取Form组件实例上的formApi */}
+                <Form ref={this.formBRef} />
+                <Button onClick={()=>this.changeValues()}>Change</Button>
+            </>
+        );
     }
 }
 ```
 
 ```jsx
+import React from 'react';
+import { Form, Button } from '@douyinfe/semi-ui';
+
 () => {
     // 函数式组件通过useRef存储formApi
     const api = useRef();
 
-    return (<Form getFormApi={formApi => api.current = formApi}>
-        <Form.Input field='a' />
-        <Button onClick={()=>{console.log(api)}}>log</Button>
-    </Form>)
-}
+    return (
+        <Form getFormApi={formApi => api.current = formApi}>
+            <Form.Input field='a' />
+            <Button onClick={()=>{console.log(api);}}>log</Button>
+        </Form>
+    );
+};
 ```
 
 ## Field Props

content/input/input/index-en-US.md

@@ -25,8 +25,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input defaultValue='hi' autofocus></Input>
-)
+    <Input defaultValue='hi' autofocus></Input>
+);
 ```
 
 ### Size
@@ -38,14 +38,14 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Input placeholder='large' size='large'></Input>
-    <br/><br/>
-    <Input placeholder='default'></Input>
-    <br/><br/>
-    <Input placeholder='small' size='small'></Input>
-  </>
-)
+    <>
+        <Input placeholder='large' size='large'></Input>
+        <br/><br/>
+        <Input placeholder='default'></Input>
+        <br/><br/>
+        <Input placeholder='small' size='small'></Input>
+    </>
+);
 ```
 
 ### Disabled
@@ -55,13 +55,13 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Input defaultValue='enabled input'></Input>
-    <br/>
-    <br/>
-    <Input disabled defaultValue='disbaled input'></Input>
-  </>
-)
+    <>
+        <Input defaultValue='enabled input'></Input>
+        <br/>
+        <br/>
+        <Input disabled defaultValue='disbaled input'></Input>
+    </>
+);
 ```
 
 ### Prefix/Suffix
@@ -72,16 +72,16 @@ import { Input, Typography } from '@douyinfe/semi-ui';
 import { IconSearch } from '@douyinfe/semi-icons';
 
 () => (
-  <>
-    <Input prefix={<IconSearch />} showClear></Input>
-    <br/><br/>
-    <Input prefix="Prefix" showClear></Input>
-    <br/><br/>
-    <Input suffix={<IconSearch />} showClear></Input>
-    <br/><br/>
-    <Input suffix={<Typography.Text strong type='secondary' style={{ marginRight: 8 }}>Suffix</Typography.Text>} showClear></Input>
-  </>
-)
+    <>
+        <Input prefix={<IconSearch />} showClear></Input>
+        <br/><br/>
+        <Input prefix="Prefix" showClear></Input>
+        <br/><br/>
+        <Input suffix={<IconSearch />} showClear></Input>
+        <br/><br/>
+        <Input suffix={<Typography.Text strong type='secondary' style={{ marginRight: 8 }}>Suffix</Typography.Text>} showClear></Input>
+    </>
+);
 ```
 
 ### Addon
@@ -90,8 +90,8 @@ import { IconSearch } from '@douyinfe/semi-icons';
 import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 () => (
-  <Input addonBefore="http://" addonAfter=".com" />
-)
+    <Input addonBefore="http://" addonAfter=".com" />
+);
 ```
 
 ### Clear Icon
@@ -103,8 +103,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input showClear defaultValue='click to clear'></Input>
-)
+    <Input showClear defaultValue='click to clear'></Input>
+);
 ```
 
 ### Password Mode
@@ -116,8 +116,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input mode="password" defaultValue="123456"></Input>
-)
+    <Input mode="password" defaultValue="123456"></Input>
+);
 ```
 
 ### Validation
@@ -128,14 +128,14 @@ You can set different `validateStatus` to provide style feedback to the user.
 import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 () => (
-  <>
-    <Input defaultValue='ies' validateStatus='warning'></Input>
-    <br/><br/>
-    <Input defaultValue='ies' validateStatus='error'></Input>
-    <br/><br/>
-    <Input defaultValue='ies'></Input>
-  </>
-)
+    <>
+        <Input defaultValue='ies' validateStatus='warning'></Input>
+        <br/><br/>
+        <Input defaultValue='ies' validateStatus='error'></Input>
+        <br/><br/>
+        <Input defaultValue='ies'></Input>
+    </>
+);
 ```
 
 ### Controlled Component
@@ -148,26 +148,26 @@ import { Input } from '@douyinfe/semi-ui';
 
 class InputDemo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             value: 'controlInput',
             value2: 'input'
-        }
+        };
         this.onChange = this.onChange.bind(this);
     }
     onChange(value, e) {
-      console.log(value)
-      this.setState({ value });
+        console.log(value);
+        this.setState({ value });
     }
     render() {
         return (
             <>
-              <Input
-                  value={this.state.value}
-                  onChange={this.onChange}>
-              </Input>
+                <Input
+                    value={this.state.value}
+                    onChange={this.onChange}>
+                </Input>
             </>
-        )
+        );
     }
 }
 ```
@@ -185,93 +185,93 @@ import React from 'react';
 import { Input, InputGroup, InputNumber, Select, AutoComplete, DatePicker } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <InputGroup>
-      <Input placeholder="Name" style={{ width: 100 }} />
-      <InputNumber placeholder="Score" style={{ width: 140 }} />
-    </InputGroup>
-    <br/><br/><br/>
-    <InputGroup size={'small'}>
-      <Select style={{ width: '100px' }} defaultValue='home'>
-          <Select.Option value='home'>Home</Select.Option>
-          <Select.Option value='work'>Work</Select.Option>
-      </Select>
-      <AutoComplete
-          data={['Beijing Haidian']}
-          placeholder='Address: '
-          style={{ width: 180 }}
-      >
-      </AutoComplete>
-    </InputGroup>
-    <br/><br/><br/>
-    <InputGroup size={'small'}>
-      <Select style={{ width: '100px' }} defaultValue='signup'>
-          <Select.Option value='signup'>Sign Up</Select.Option>
-          <Select.Option value='signin'>Sign In</Select.Option>
-      </Select>
-      <Input placeholder="Email" style={{ width: 180 }} />
-    </InputGroup>
-    <br/><br/><br/>
-    <InputGroup size={'small'}>
-      <Input placeholder="Name" style={{ width: 100 }} />
-      <DatePicker placeholder="Birthday" />
-    </InputGroup>
-  </div>
-)
+    <div>
+        <InputGroup>
+            <Input placeholder="Name" style={{ width: 100 }} />
+            <InputNumber placeholder="Score" style={{ width: 140 }} />
+        </InputGroup>
+        <br/><br/><br/>
+        <InputGroup size={'small'}>
+            <Select style={{ width: '100px' }} defaultValue='home'>
+                <Select.Option value='home'>Home</Select.Option>
+                <Select.Option value='work'>Work</Select.Option>
+            </Select>
+            <AutoComplete
+                data={['Beijing Haidian']}
+                placeholder='Address: '
+                style={{ width: 180 }}
+            >
+            </AutoComplete>
+        </InputGroup>
+        <br/><br/><br/>
+        <InputGroup size={'small'}>
+            <Select style={{ width: '100px' }} defaultValue='signup'>
+                <Select.Option value='signup'>Sign Up</Select.Option>
+                <Select.Option value='signin'>Sign In</Select.Option>
+            </Select>
+            <Input placeholder="Email" style={{ width: 180 }} />
+        </InputGroup>
+        <br/><br/><br/>
+        <InputGroup size={'small'}>
+            <Input placeholder="Name" style={{ width: 100 }} />
+            <DatePicker placeholder="Birthday" />
+        </InputGroup>
+    </div>
+);
 ```
 
 ```jsx live=true
 import React from 'react';
-import { Input, InputGroup, Select, Cascader } from '@douyinfe/semi-ui';
+import { Input, InputGroup, Select, Cascader, TreeSelect } from '@douyinfe/semi-ui';
 () => {
-  const treeData = [
-    {
-        label: 'Asia',
-        value: 'Asia',
-        key: '0',
-        children: [
-            {
-                label: 'China',
-                value: 'China',
-                key: '0-0',
-                children: [
-                    { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
-                    { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
-                ],
-            },
-        ],
-    },
-    { label: 'North America', value: 'North America', key: '1' }
-  ];
-  return (
-    <>
-      <InputGroup>
-        <Select style={{ width: 100 }} defaultValue='from'>
-          <Select.Option value='from'>From: </Select.Option>
-          <Select.Option value='to'>To: </Select.Option>
-        </Select>
-        <TreeSelect
-          style={{ width: 220 }}
-          treeData={treeData}
-          placeholder="Please select"
-        />
-      </InputGroup>
-      <br/><br/>
-
-      <InputGroup>
-          <Select style={{ width: 100 }} defaultValue='from'>
-          <Select.Option value='from'>From: </Select.Option>
-          <Select.Option value='to'>To: </Select.Option>
-        </Select>
-          <Cascader
-              style={{ width: 220 }}
-              treeData={treeData}
-              placeholder="Please select"
-          />
-      </InputGroup>
-    </>
-  )
-}
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
+                        { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
+                    ],
+                },
+            ],
+        },
+        { label: 'North America', value: 'North America', key: '1' }
+    ];
+    return (
+        <>
+            <InputGroup>
+                <Select style={{ width: 100 }} defaultValue='from'>
+                    <Select.Option value='from'>From: </Select.Option>
+                    <Select.Option value='to'>To: </Select.Option>
+                </Select>
+                <TreeSelect
+                    style={{ width: 220 }}
+                    treeData={treeData}
+                    placeholder="Please select"
+                />
+            </InputGroup>
+            <br/><br/>
+
+            <InputGroup>
+                <Select style={{ width: 100 }} defaultValue='from'>
+                    <Select.Option value='from'>From: </Select.Option>
+                    <Select.Option value='to'>To: </Select.Option>
+                </Select>
+                <Cascader
+                    style={{ width: 220 }}
+                    treeData={treeData}
+                    placeholder="Please select"
+                />
+            </InputGroup>
+        </>
+    );
+};
 
 ```
 
@@ -284,12 +284,12 @@ import React from 'react';
 import { TextArea } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <TextArea />
-    <br/><br/>
-    <TextArea maxCount={100} showClear/>
-  </div>
-)
+    <div>
+        <TextArea />
+        <br/><br/>
+        <TextArea maxCount={100} showClear/>
+    </div>
+);
 ```
 
 ### Autosize TextArea
@@ -300,12 +300,12 @@ You can set `autosize` to allow TextArea resizing height with content.
 import React from 'react';
 import { TextArea } from '@douyinfe/semi-ui';
 () => (
-  <div>
-    <TextArea autosize rows={1} />
-    <br/><br/>
-    <TextArea autosize maxCount={100} />
-  </div>
-)
+    <div>
+        <TextArea autosize rows={1} />
+        <br/><br/>
+        <TextArea autosize maxCount={100} />
+    </div>
+);
 ```
 
 ### Custom calculated character string length
@@ -325,49 +325,49 @@ import { Input, Typography, Form, Button, TextArea } from '@douyinfe/semi-ui';
 import GraphemeSplitter from 'grapheme-splitter';
 
 () => {
-  const [value, setValue] = useState();
-  function getValueLength(str) {
-    if (typeof str === 'string') {
-      const splitter = new GraphemeSplitter();
-      return splitter.countGraphemes(str);
-    } else {
-      return 0;
+    const [value, setValue] = useState();
+    function getValueLength(str) {
+        if (typeof str === 'string') {
+            const splitter = new GraphemeSplitter();
+            return splitter.countGraphemes(str);
+        } else {
+            return 0;
+        }
     }
-  }
 
-  function getTextAreaStrLength(str) {
-    const filteredStr = str.replace(/\s/g, '');
-    return filteredStr.length;
-  }
+    function getTextAreaStrLength(str) {
+        const filteredStr = str.replace(/\s/g, '');
+        return filteredStr.length;
+    }
 
-  return (
-    <div>
-      <h4>maxLength=10</h4>
-      <div>
-        <Typography.Text>Please input following emoji</Typography.Text>
-        <div><Typography.Text copyable>💖</Typography.Text></div>
-        <div><Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text></div>
-      </div>
-      <Input maxLength={10} getValueLength={getValueLength} onChange={setValue} style={{ width: 200, marginTop: 12, marginBottom: 12 }} />
-      {
-        value && (
-          <div>
-            <div><Typography.Text type="tertiary">{`getValueLength=${getValueLength(value)}`}</Typography.Text></div>
-            <div><Typography.Text type="tertiary">{`length=${value.length}`}</Typography.Text></div>
-          </div>
-        )
-      }
-      <br/><br/>
-      <h4>Form.Input + minLength=4</h4>
-      <Form layout="horizontal">
-        <Form.Input noLabel field="username" minLength={4} getValueLength={getValueLength} style={{ width: 200 }} />
-        <Button type="primary" htmlType="submit">Submit</Button>
-      </Form>
-      <h4>maxCount=10</h4>
-      <TextArea defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: 200 }} />
-    </div>
-  );
-}
+    return (
+        <div>
+            <h4>maxLength=10</h4>
+            <div>
+                <Typography.Text>Please input following emoji</Typography.Text>
+                <div><Typography.Text copyable>💖</Typography.Text></div>
+                <div><Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text></div>
+            </div>
+            <Input maxLength={10} getValueLength={getValueLength} onChange={setValue} style={{ width: 200, marginTop: 12, marginBottom: 12 }} />
+            {
+                value && (
+                    <div>
+                        <div><Typography.Text type="tertiary">{`getValueLength=${getValueLength(value)}`}</Typography.Text></div>
+                        <div><Typography.Text type="tertiary">{`length=${value.length}`}</Typography.Text></div>
+                    </div>
+                )
+            }
+            <br/><br/>
+            <h4>Form.Input + minLength=4</h4>
+            <Form layout="horizontal">
+                <Form.Input noLabel field="username" minLength={4} getValueLength={getValueLength} style={{ width: 200 }} />
+                <Button type="primary" htmlType="submit">Submit</Button>
+            </Form>
+            <h4>maxCount=10</h4>
+            <TextArea defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: 200 }} />
+        </div>
+    );
+};
 ```
 
 Answers to some questions:

content/input/input/index.md

@@ -25,8 +25,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input defaultValue='hi' autofocus></Input>
-)
+    <Input defaultValue='hi' autofocus></Input>
+);
 ```
 
 ### 三种大小
@@ -38,14 +38,14 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Input placeholder='large' size='large'></Input>
-    <br/><br/>
-    <Input placeholder='default'></Input>
-    <br/><br/>
-    <Input placeholder='small' size='small'></Input>
-  </>
-)
+    <>
+        <Input placeholder='large' size='large'></Input>
+        <br/><br/>
+        <Input placeholder='default'></Input>
+        <br/><br/>
+        <Input placeholder='small' size='small'></Input>
+    </>
+);
 ```
 
 ### 不可用
@@ -57,13 +57,13 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Input defaultValue='enabled input'></Input>
-    <br/>
-    <br/>
-    <Input disabled defaultValue='disabled input'></Input>
-  </>
-)
+    <>
+        <Input defaultValue='enabled input'></Input>
+        <br/>
+        <br/>
+        <Input disabled defaultValue='disabled input'></Input>
+    </>
+);
 ```
 
 ### 前缀/后缀
@@ -76,16 +76,16 @@ import { Input, Typography } from '@douyinfe/semi-ui';
 import { IconSearch } from '@douyinfe/semi-icons';
 
 () => (
-  <>
-    <Input prefix={<IconSearch />} showClear></Input>
-    <br/><br/>
-    <Input prefix="Prefix" showClear></Input>
-    <br/><br/>
-    <Input suffix={<IconSearch />} showClear></Input>
-    <br/><br/>
-    <Input suffix={<Typography.Text strong type='secondary' style={{ marginRight: 8 }}>Suffix</Typography.Text>} showClear></Input>
-  </>
-)
+    <>
+        <Input prefix={<IconSearch />} showClear></Input>
+        <br/><br/>
+        <Input prefix="Prefix" showClear></Input>
+        <br/><br/>
+        <Input suffix={<IconSearch />} showClear></Input>
+        <br/><br/>
+        <Input suffix={<Typography.Text strong type='secondary' style={{ marginRight: 8 }}>Suffix</Typography.Text>} showClear></Input>
+    </>
+);
 ```
 
 ### 前置/后置标签
@@ -97,8 +97,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input addonBefore="http://" addonAfter=".com" />
-)
+    <Input addonBefore="http://" addonAfter=".com" />
+);
 ```
 
 ### 带移除图标
@@ -110,8 +110,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input showClear defaultValue='click to clear'></Input>
-)
+    <Input showClear defaultValue='click to clear'></Input>
+);
 ```
 
 ### 密码模式
@@ -123,8 +123,8 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <Input mode="password" defaultValue="123456"></Input>
-)
+    <Input mode="password" defaultValue="123456"></Input>
+);
 ```
 
 
@@ -137,14 +137,14 @@ import React from 'react';
 import { Input } from '@douyinfe/semi-ui';
 
 () => (
-  <>
-    <Input defaultValue='ies' validateStatus='warning'></Input>
-    <br/><br/>
-    <Input defaultValue='ies' validateStatus='error'></Input>
-    <br/><br/>
-    <Input defaultValue='ies'></Input>
-  </>
-)
+    <>
+        <Input defaultValue='ies' validateStatus='warning'></Input>
+        <br/><br/>
+        <Input defaultValue='ies' validateStatus='error'></Input>
+        <br/><br/>
+        <Input defaultValue='ies'></Input>
+    </>
+);
 ```
 
 ### 受控组件
@@ -157,26 +157,26 @@ import { Input } from '@douyinfe/semi-ui';
 
 class InputDemo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             value: 'controlInput',
             value2: 'input'
-        }
+        };
         this.onChange = this.onChange.bind(this);
     }
     onChange(value, e) {
-      console.log(value)
-      this.setState({ value });
+        console.log(value);
+        this.setState({ value });
     }
     render() {
         return (
             <>
-              <Input
-                  value={this.state.value}
-                  onChange={this.onChange}>
-              </Input>
+                <Input
+                    value={this.state.value}
+                    onChange={this.onChange}>
+                </Input>
             </>
-        )
+        );
     }
 }
 ```
@@ -191,97 +191,97 @@ class InputDemo extends React.Component {
 
 ```jsx live=true
 import React from 'react';
-import { InputGroup, Input, InputNumber, Input, AutoComplete, DatePicker } from '@douyinfe/semi-ui';
+import { InputGroup, Input, InputNumber, AutoComplete, DatePicker, Select } from '@douyinfe/semi-ui';
 
 () => (
     <div>
-      <InputGroup>
-        <Input placeholder="Name" style={{ width: 100 }} />
-        <InputNumber placeholder="Score" style={{ width: 140 }} />
-      </InputGroup>
-      <br/><br/><br/>
-      <InputGroup size={'small'}>
-        <Select style={{ width: '100px' }} defaultValue='home'>
-            <Select.Option value='home'>Home</Select.Option>
-            <Select.Option value='work'>Work</Select.Option>
-        </Select>
-        <AutoComplete
-            data={['Beijing Haidian']}
-            placeholder='Address: '
-            style={{ width: 180 }}
-        >
-        </AutoComplete>
-      </InputGroup>
-      <br/><br/><br/>
-      <InputGroup size={'small'}>
-        <Select style={{ width: '100px' }} defaultValue='signup'>
-            <Select.Option value='signup'>Sign Up</Select.Option>
-            <Select.Option value='signin'>Sign In</Select.Option>
-        </Select>
-        <Input placeholder="Email" style={{ width: 180 }} />
-      </InputGroup>
-      <br/><br/><br/>
-      <InputGroup size={'small'}>
-        <Input placeholder="Name" style={{ width: 100 }} />
-        <DatePicker placeholder="Birthday" />
-      </InputGroup>
+        <InputGroup>
+            <Input placeholder="Name" style={{ width: 100 }} />
+            <InputNumber placeholder="Score" style={{ width: 140 }} />
+        </InputGroup>
+        <br/><br/><br/>
+        <InputGroup size={'small'}>
+            <Select style={{ width: '100px' }} defaultValue='home'>
+                <Select.Option value='home'>Home</Select.Option>
+                <Select.Option value='work'>Work</Select.Option>
+            </Select>
+            <AutoComplete
+                data={['Beijing Haidian']}
+                placeholder='Address: '
+                style={{ width: 180 }}
+            >
+            </AutoComplete>
+        </InputGroup>
+        <br/><br/><br/>
+        <InputGroup size={'small'}>
+            <Select style={{ width: '100px' }} defaultValue='signup'>
+                <Select.Option value='signup'>Sign Up</Select.Option>
+                <Select.Option value='signin'>Sign In</Select.Option>
+            </Select>
+            <Input placeholder="Email" style={{ width: 180 }} />
+        </InputGroup>
+        <br/><br/><br/>
+        <InputGroup size={'small'}>
+            <Input placeholder="Name" style={{ width: 100 }} />
+            <DatePicker placeholder="Birthday" />
+        </InputGroup>
     </div>
-)
+);
 ```
 
 ```jsx live=true
 import React from 'react';
-import { InputGroup, Select, Cascader } from '@douyinfe/semi-ui';
+import { InputGroup, Select, Cascader, TreeSelect } from '@douyinfe/semi-ui';
 
 () => {
-  const Option = Select.Option;
-  const treeData = [
-    {
-        label: 'Asia',
-        value: 'Asia',
-        key: '0',
-        children: [
-            {
-                label: 'China',
-                value: 'China',
-                key: '0-0',
-                children: [
-                    { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
-                    { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
-                ],
-            },
-        ],
-    },
-    { label: 'North America', value: 'North America', key: '1' }
-  ];
-  return (
-    <>
-      <InputGroup>
-        <Select style={{ width: 100 }} defaultValue='from'>
-          <Select.Option value='from'>From: </Select.Option>
-          <Select.Option value='to'>To: </Select.Option>
-        </Select>
-        <TreeSelect
-          style={{ width: 220 }}
-          treeData={treeData}
-          placeholder="Please select"
-        />
-      </InputGroup>
-      <br/><br/>
-      <InputGroup>
-          <Select style={{ width: 100 }} defaultValue='from'>
-            <Select.Option value='from'>From: </Select.Option>
-            <Select.Option value='to'>To: </Select.Option>
-          </Select>
-          <Cascader
-              style={{ width: 220 }}
-              treeData={treeData}
-              placeholder="Please select"
-          />
-      </InputGroup>
-    </>
-  )
-}
+    const Option = Select.Option;
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
+                        { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
+                    ],
+                },
+            ],
+        },
+        { label: 'North America', value: 'North America', key: '1' }
+    ];
+    return (
+        <>
+            <InputGroup>
+                <Select style={{ width: 100 }} defaultValue='from'>
+                    <Select.Option value='from'>From: </Select.Option>
+                    <Select.Option value='to'>To: </Select.Option>
+                </Select>
+                <TreeSelect
+                    style={{ width: 220 }}
+                    treeData={treeData}
+                    placeholder="Please select"
+                />
+            </InputGroup>
+            <br/><br/>
+            <InputGroup>
+                <Select style={{ width: 100 }} defaultValue='from'>
+                    <Select.Option value='from'>From: </Select.Option>
+                    <Select.Option value='to'>To: </Select.Option>
+                </Select>
+                <Cascader
+                    style={{ width: 220 }}
+                    treeData={treeData}
+                    placeholder="Please select"
+                />
+            </InputGroup>
+        </>
+    );
+};
 
 ```
 
@@ -294,12 +294,12 @@ import React from 'react';
 import { TextArea } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <TextArea />
-    <br/><br/>
-    <TextArea maxCount={100} showClear/>
-  </div>
-)
+    <div>
+        <TextArea />
+        <br/><br/>
+        <TextArea maxCount={100} showClear/>
+    </div>
+);
 ```
 
 ### 自动扩展的多行输入框
@@ -311,12 +311,12 @@ import React from 'react';
 import { TextArea } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <TextArea autosize rows={1} />
-    <br/><br/>
-    <TextArea autosize maxCount={100} />
-  </div>
-)
+    <div>
+        <TextArea autosize rows={1} />
+        <br/><br/>
+        <TextArea autosize maxCount={100} />
+    </div>
+);
 ```
 
 ### 自定义计算字符串长度
@@ -336,49 +336,49 @@ import GraphemeSplitter from 'grapheme-splitter';
 import { Input, Typography, Form, TextArea, Button } from '@douyinfe/semi-ui';
 
 () => {
-  const [value, setValue] = useState();
-  function getValueLength(str) {
-    if (typeof str === 'string') {
-      const splitter = new GraphemeSplitter();
-      return splitter.countGraphemes(str);
-    } else {
-      return 0;
+    const [value, setValue] = useState();
+    function getValueLength(str) {
+        if (typeof str === 'string') {
+            const splitter = new GraphemeSplitter();
+            return splitter.countGraphemes(str);
+        } else {
+            return 0;
+        }
     }
-  }
 
-  function getTextAreaStrLength(str) {
-    const filteredStr = str.replace(/\s/g, '');
-    return filteredStr.length;
-  }
+    function getTextAreaStrLength(str) {
+        const filteredStr = str.replace(/\s/g, '');
+        return filteredStr.length;
+    }
 
-  return (
-    <div>
-      <h4>maxLength=10</h4>
-      <div>
-        <Typography.Text>尝试输入以下字符</Typography.Text>
-        <div><Typography.Text copyable>💖</Typography.Text></div>
-        <div><Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text></div>
-      </div>
-      <Input maxLength={10} getValueLength={getValueLength} onChange={setValue} style={{ width: 200, marginTop: 12, marginBottom: 12 }} />
-      {
-        value && (
-          <div>
-            <div><Typography.Text type="tertiary">{`getValueLength=${getValueLength(value)}`}</Typography.Text></div>
-            <div><Typography.Text type="tertiary">{`length=${value.length}`}</Typography.Text></div>
-          </div>
-        )
-      }
-      <br/><br/>
-      <h4>Form.Input + minLength=4</h4>
-      <Form layout="horizontal">
-        <Form.Input noLabel field="username" minLength={4} getValueLength={getValueLength} style={{ width: 200 }} />
-        <Button type="primary" htmlType="submit">提交</Button>
-      </Form>
-      <h4>maxCount=10</h4>
-      <TextArea defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: 200 }} />
-    </div>
-  );
-}
+    return (
+        <div>
+            <h4>maxLength=10</h4>
+            <div>
+                <Typography.Text>尝试输入以下字符</Typography.Text>
+                <div><Typography.Text copyable>💖</Typography.Text></div>
+                <div><Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text></div>
+            </div>
+            <Input maxLength={10} getValueLength={getValueLength} onChange={setValue} style={{ width: 200, marginTop: 12, marginBottom: 12 }} />
+            {
+                value && (
+                    <div>
+                        <div><Typography.Text type="tertiary">{`getValueLength=${getValueLength(value)}`}</Typography.Text></div>
+                        <div><Typography.Text type="tertiary">{`length=${value.length}`}</Typography.Text></div>
+                    </div>
+                )
+            }
+            <br/><br/>
+            <h4>Form.Input + minLength=4</h4>
+            <Form layout="horizontal">
+                <Form.Input noLabel field="username" minLength={4} getValueLength={getValueLength} style={{ width: 200 }} />
+                <Button type="primary" htmlType="submit">提交</Button>
+            </Form>
+            <h4>maxCount=10</h4>
+            <TextArea defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: 200 }} />
+        </div>
+    );
+};
 ```
 
 一些问题的回答：

content/input/inputnumber/index-en-US.md

@@ -29,27 +29,27 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  render() {
-    return (
-      <div style={{ width: 280 }}>
-        <label>Simple</label>
-        <InputNumber />
-        <br/><br/>
-
-        <label>Set step to 2 </label>
-        <InputNumber step={2} />
-        <br/><br/>
-
-        <label>Press shift key and click the button to increase/decrease the step size </label>
-        <InputNumber shiftStep={100} />
-        <br/><br/>
-
-        <label>Set min to 1, max to 10</label>
-        <InputNumber min={1} max={10} Default Value={1} />
-        <br/><br/>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div style={{ width: 280 }}>
+                <label>Simple</label>
+                <InputNumber />
+                <br/><br/>
+
+                <label>Set step to 2 </label>
+                <InputNumber step={2} />
+                <br/><br/>
+
+                <label>Press shift key and click the button to increase/decrease the step size </label>
+                <InputNumber shiftStep={100} />
+                <br/><br/>
+
+                <label>Set min to 1, max to 10</label>
+                <InputNumber min={1} max={10} Default Value={1} />
+                <br/><br/>
+            </div>
+        );
+    }
 }
 ```
 
@@ -58,32 +58,32 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  render() {
-    return (
-      <div style={{ width: 280 }}>
-        <label>Set defaultValue to 1 </label>
-        <InputNumber defaultValue={1} />
-        <br/><br/>
-
-        <label>Set disabled to true</label>
-        <InputNumber defaultValue={2} disabled />
-        <br/><br/>
-
-        <label>Set autofocus to true </label>
-        <InputNumber defaultValue={3} autofocus />
-        <br/><br/>
-
-        <label>Set precision to 2 </label>
-        <InputNumber precision={2} defaultValue={1.234} />
-        <br/><br/>
-
-        <label>Set innerButtons=true </label>
-        <InputNumber innerButtons={true} suffix={'Hour'} defaultValue={1} style={{ width: 190}} />
-        <br/>
-
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div style={{ width: 280 }}>
+                <label>Set defaultValue to 1 </label>
+                <InputNumber defaultValue={1} />
+                <br/><br/>
+
+                <label>Set disabled to true</label>
+                <InputNumber defaultValue={2} disabled />
+                <br/><br/>
+
+                <label>Set autofocus to true </label>
+                <InputNumber defaultValue={3} autofocus />
+                <br/><br/>
+
+                <label>Set precision to 2 </label>
+                <InputNumber precision={2} defaultValue={1.234} />
+                <br/><br/>
+
+                <label>Set innerButtons=true </label>
+                <InputNumber innerButtons={true} suffix={'Hour'} defaultValue={1} style={{ width: 190}} />
+                <br/>
+
+            </div>
+        );
+    }
 }
 ```
 
@@ -94,20 +94,22 @@ With `innerButtons`, you can hide the buttons on the right into the interior, wh
 
 ```jsx live=true
 import React from 'react';
+import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
-  <InputNumber innerButtons style={{ width: 190}} />
-)
+    <InputNumber innerButtons style={{ width: 190}} />
+);
 ```
 
 Set `hidebuttons` to `true` to hide the buttons completely
 
 ```jsx live=true
 import React from 'react';
+import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
-  <InputNumber hideButtons style={{ width: 190}} />
-)
+    <InputNumber hideButtons style={{ width: 190}} />
+);
 
 ```
 
@@ -118,24 +120,24 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  render() {
-    return (
-      <div style={{ width: 180 }}>
-        <label>size=default</label>
-        <InputNumber />
-        <br/><br/>
-
-        <label>size=large</label>
-        <InputNumber size="large" />
-        <br/><br/>
-
-        <label>size=small</label>
-        <InputNumber size="small" />
-        <br/>
-
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div style={{ width: 180 }}>
+                <label>size=default</label>
+                <InputNumber />
+                <br/><br/>
+
+                <label>size=large</label>
+                <InputNumber size="large" />
+                <br/><br/>
+
+                <label>size=small</label>
+                <InputNumber size="small" />
+                <br/>
+
+            </div>
+        );
+    }
 }
 ```
 
@@ -148,35 +150,35 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  log(v) {
-    console.log(`Changed to: [${typeof v}] ${v}`);
-  }
-
-  render() {
-    return (
-      <div style={{ width: 180 }}>
-        <label>RMB</label>
-        <InputNumber
-            onChange={this.log}
-            defaultValue={1000}
-            min={0}
-            formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
-            parser={value => value.replace(/\￥\s?|(,*)/g, '')}
-        />
-        <br/><br/>
-
-        <label>Custom string</label>
-        <InputNumber
-            onChange={this.log}
-            defaultValue={1111}
-            formatter={value => String(value).split('').join('-')}
-            parser={value => value.replace(/\-/g, '')}
-        />
-        <br/>
-
-      </div>
-    );
-  }
+    log(v) {
+        console.log(`Changed to: [${typeof v}] ${v}`);
+    }
+
+    render() {
+        return (
+            <div style={{ width: 180 }}>
+                <label>RMB</label>
+                <InputNumber
+                    onChange={this.log}
+                    defaultValue={1000}
+                    min={0}
+                    formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                    parser={value => value.replace(/\￥\s?|(,*)/g, '')}
+                />
+                <br/><br/>
+
+                <label>Custom string</label>
+                <InputNumber
+                    onChange={this.log}
+                    defaultValue={1111}
+                    formatter={value => String(value).split('').join('-')}
+                    parser={value => value.replace(/\-/g, '')}
+                />
+                <br/>
+
+            </div>
+        );
+    }
 }
 ```
 
@@ -188,14 +190,14 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 function Demo () {
-  return (
-    <InputNumber
-      formatter={value => `${value}`.replace(/\D/g, '')}
-      onNumberChange={number => console.log(number)}
-      min={0}
-      max={Number.MAX_SAFE_INTEGER}
-    />
-  );
+    return (
+        <InputNumber
+            formatter={value => `${value}`.replace(/\D/g, '')}
+            onNumberChange={number => console.log(number)}
+            min={0}
+            max={Number.MAX_SAFE_INTEGER}
+        />
+    );
 }
 ```
 

content/input/inputnumber/index.md

@@ -27,23 +27,23 @@ import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 280 }}>
-      <label>简单数字输入框</label>
-      <InputNumber />
-      <br/><br/>
+        <label>简单数字输入框</label>
+        <InputNumber />
+        <br/><br/>
 
-      <label>设置了步长 step=2 </label>
-      <InputNumber step={2} />
-      <br/><br/>
+        <label>设置了步长 step=2 </label>
+        <InputNumber step={2} />
+        <br/><br/>
 
-      <label>设置 shiftStep=100， 按住 shift 同时点击按钮，可以一次增加/减少100 </label>
-      <InputNumber shiftStep={100} />
-      <br/><br/>
+        <label>设置 shiftStep=100， 按住 shift 同时点击按钮，可以一次增加/减少100 </label>
+        <InputNumber shiftStep={100} />
+        <br/><br/>
 
-      <label>设置了上下界 min=1,max=10</label>
-      <InputNumber min={1} max={10} defaultValue={1} />
-      <br/><br/>
+        <label>设置了上下界 min=1,max=10</label>
+        <InputNumber min={1} max={10} defaultValue={1} />
+        <br/><br/>
     </div>
-)
+);
 ```
 
 ```jsx live=true
@@ -52,27 +52,27 @@ import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 280 }}>
-      <label>设置了默认值 defaultValue=1 </label>
-      <InputNumber defaultValue={1} />
-      <br/><br/>
+        <label>设置了默认值 defaultValue=1 </label>
+        <InputNumber defaultValue={1} />
+        <br/><br/>
 
-      <label>禁用 disabled=true</label>
-      <InputNumber defaultValue={2} disabled />
-      <br/><br/>
+        <label>禁用 disabled=true</label>
+        <InputNumber defaultValue={2} disabled />
+        <br/><br/>
 
-      <label>自动获得焦点 autofocus=true </label>
-      <InputNumber defaultValue={3} autofocus />
-      <br/><br/>
+        <label>自动获得焦点 autofocus=true </label>
+        <InputNumber defaultValue={3} autofocus />
+        <br/><br/>
 
-      <label>设置了小数位数 precision=2 </label>
-      <InputNumber precision={2} defaultValue={1.234} />
-      <br/><br/>
+        <label>设置了小数位数 precision=2 </label>
+        <InputNumber precision={2} defaultValue={1.234} />
+        <br/><br/>
 
-      <label>设置了 innerButtons=true </label>
-      <InputNumber innerButtons={true} suffix={'小时'} defaultValue={1} style={{ width: 190}} />
-      <br/>
+        <label>设置了 innerButtons=true </label>
+        <InputNumber innerButtons={true} suffix={'小时'} defaultValue={1} style={{ width: 190}} />
+        <br/>
     </div>
-)
+);
 ```
 
 
@@ -85,8 +85,8 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
-  <InputNumber innerButtons style={{ width: 190}} />
-)
+    <InputNumber innerButtons style={{ width: 190}} />
+);
 ```
 
 hideButtons设为true，彻底隐藏步进器
@@ -96,8 +96,8 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
-  <InputNumber hideButtons style={{ width: 190}} />
-)
+    <InputNumber hideButtons style={{ width: 190}} />
+);
 ```
 
 ### 尺寸
@@ -108,19 +108,19 @@ import { InputNumber } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 180 }}>
-      <label>默认尺寸 size=default</label>
-      <InputNumber />
-      <br/><br/>
+        <label>默认尺寸 size=default</label>
+        <InputNumber />
+        <br/><br/>
 
-      <label>大尺寸 size=large</label>
-      <InputNumber size="large" />
-      <br/><br/>
+        <label>大尺寸 size=large</label>
+        <InputNumber size="large" />
+        <br/><br/>
 
-      <label>小尺寸 size=small</label>
-      <InputNumber size="small" />
-      <br/>
+        <label>小尺寸 size=small</label>
+        <InputNumber size="small" />
+        <br/>
     </div>
-)
+);
 ```
 
 ### 自定义显示格式与解析方式
@@ -132,33 +132,33 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 () => {
-  const log = (v) => {
-    console.log(`Changed to: [${typeof v}] ${v}`);
-  }
-
-  return (
-      <div style={{ width: 180 }}>
-        <label>人民币</label>
-        <InputNumber
-            onChange={this.log}
-            defaultValue={1000}
-            min={0}
-            formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
-            parser={value => value.replace(/\￥\s?|(,*)/g, '')}
-        />
-        <br/><br/>
-
-        <label>自定义串</label>
-        <InputNumber
-            onChange={this.log}
-            defaultValue={1111}
-            formatter={value => String(value).split('').join('-')}
-            parser={value => value.replace(/\-/g, '')}
-        />
-        <br/>
-      </div>
-  )
-}
+    const log = (v) => {
+        console.log(`Changed to: [${typeof v}] ${v}`);
+    };
+
+    return (
+        <div style={{ width: 180 }}>
+            <label>人民币</label>
+            <InputNumber
+                onChange={this.log}
+                defaultValue={1000}
+                min={0}
+                formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                parser={value => value.replace(/\￥\s?|(,*)/g, '')}
+            />
+            <br/><br/>
+
+            <label>自定义串</label>
+            <InputNumber
+                onChange={this.log}
+                defaultValue={1111}
+                formatter={value => String(value).split('').join('-')}
+                parser={value => value.replace(/\-/g, '')}
+            />
+            <br/>
+        </div>
+    );
+};
 ```
 
 ### 纯数字输入框
@@ -169,14 +169,14 @@ import React from 'react';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 function Demo () {
-  return (
-    <InputNumber
-      formatter={value => `${value}`.replace(/\D/g, '')}
-      onNumberChange={number => console.log(number)}
-      min={0}
-      max={Number.MAX_SAFE_INTEGER}
-    />
-  );
+    return (
+        <InputNumber
+            formatter={value => `${value}`.replace(/\D/g, '')}
+            onNumberChange={number => console.log(number)}
+            min={0}
+            max={Number.MAX_SAFE_INTEGER}
+        />
+    );
 }
 ```
 

content/input/radio/index-en-US.md

@@ -29,7 +29,7 @@ import { Radio } from '@douyinfe/semi-ui';
 
 () => (
     <Radio>Radio</Radio>
-)
+);
 
 ```
 
@@ -48,7 +48,7 @@ import { Radio } from '@douyinfe/semi-ui';
     <Radio extra="Semi Design is a design system developed and maintained by IES Front-end Team and UED Team">
         Semi Design
     </Radio>
-)
+);
 ```
 
 ### Disabled

content/input/radio/index.md

@@ -26,7 +26,7 @@ import { Radio } from '@douyinfe/semi-ui';
 
 () => (
     <Radio>Radio</Radio>
-)
+);
 ```
 
 ### 带辅助文本
@@ -43,7 +43,7 @@ import { Radio } from '@douyinfe/semi-ui';
     <Radio extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统">
         Semi Design
     </Radio>
-)
+);
 ```
 
 ### 禁用
@@ -74,8 +74,8 @@ import { Radio, Button } from '@douyinfe/semi-ui';
                 </Button>
             </div>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 高级模式
@@ -100,8 +100,8 @@ import { Radio } from '@douyinfe/semi-ui';
         >
             允许取消选择
         </Radio>
-    )
-}
+    );
+};
 ```
 
 ### 单选组合
@@ -117,7 +117,7 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
     const onChange = (e) => {
         console.log('radio checked', e.target.value);
         setValue(e.target.value);
-    } 
+    }; 
     return (
         <RadioGroup onChange={onChange} value={value}>
             <Radio value={1}>A</Radio>
@@ -126,7 +126,7 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
             <Radio value={4}>D</Radio>
         </RadioGroup>
     );
-}
+};
 ```
 
 ### 垂直排列
@@ -144,7 +144,7 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
         <Radio value={3}>C</Radio>
         <Radio value={4}>D</Radio>
     </RadioGroup>
-)
+);
 ```
 
 ### 按钮样式
@@ -178,8 +178,8 @@ import { RadioGroup, Radio, Space } from '@douyinfe/semi-ui';
                 <Radio value={3}>动态推送</Radio>
             </RadioGroup>
         </Space>
-    )
-}
+    );
+};
 ```
 
 ### 卡片样式

content/input/rating/index-en-US.md

@@ -32,7 +32,7 @@ import { Rating } from '@douyinfe/semi-ui';
         <br />
         <Rating size="small" defaultValue={5} />
     </div>
-)
+);
 ```
 
 ### Half Star
@@ -49,7 +49,7 @@ import { Rating } from '@douyinfe/semi-ui';
         <br />
         <Rating allowHalf defaultValue={3.65} />
     </div>
-)
+);
 ```
 
 ### Disabled
@@ -62,7 +62,7 @@ import { Rating } from '@douyinfe/semi-ui';
 
 () => (
     <Rating disabled defaultValue={3} />
-)
+);
 ```
 
 ### Click to Clear
@@ -84,7 +84,7 @@ import { Rating } from '@douyinfe/semi-ui';
         <br />
         <Rating allowClear={false} defaultValue={3} />
     </div>
-)
+);
 ```
 
 ### Text Description
@@ -153,7 +153,7 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
         <br />
         <Rating Count={10} defaultValue={6} />
     </div>
-)
+);
 ```
 
 ## API Reference

content/input/rating/index.md

@@ -32,7 +32,7 @@ import { Rating } from '@douyinfe/semi-ui';
         <br/>
         <Rating size='small' defaultValue={5}/>
     </div>
-)
+);
 ```
 
 ### 半星
@@ -49,7 +49,7 @@ import { Rating } from '@douyinfe/semi-ui';
         <br/>
         <Rating allowHalf defaultValue={3.65}/>
     </div>
-)
+);
 ```
 
 ### 只读
@@ -60,7 +60,7 @@ import { Rating } from '@douyinfe/semi-ui';
 
 () => (
     <Rating disabled defaultValue={3} />
-)
+);
 ```
 
 ### 点击清除
@@ -80,7 +80,7 @@ import { Rating } from '@douyinfe/semi-ui';
         <br/>
         <Rating allowClear={false} defaultValue={3}/>
     </div>
-)
+);
 ```
 
 ### 文案展现
@@ -104,7 +104,7 @@ import { Rating } from '@douyinfe/semi-ui';
             <Rating tooltips={desc} onChange={change} value={value} />
         </div>
     );
-}
+};
 ```
 
 ### 自定义
@@ -130,7 +130,7 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
         <br/>
         <Rating count={10} defaultValue={6}/>
     </div>
-)
+);
 ```
 
 ## API参考

content/input/select/index-en-US.md

@@ -34,7 +34,7 @@ import { Select } from '@douyinfe/semi-ui';
         </Select>
         <br />
         <br />
-        <Select style={{ width: '180px' }} defaultValue="abc" style={{ width: 120 }}>
+        <Select defaultValue="abc" style={{ width: 120 }}>
             <Select.Option value="abc">Semi</Select.Option>
             <Select.Option value="hotsoon">Hotsoon</Select.Option>
         </Select>
@@ -45,7 +45,7 @@ import { Select } from '@douyinfe/semi-ui';
             <Select.Option value="hotsoon">Hotsoon</Select.Option>
         </Select>
     </>
-)
+);
 ```
 
 ### Pass Option as an array
@@ -111,7 +111,7 @@ import { Select } from '@douyinfe/semi-ui';
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
     </>
-)
+);
 ```
 ### With Group
 
@@ -135,7 +135,7 @@ import { Select } from '@douyinfe/semi-ui';
             <Select.Option value="c-1">Peru</Select.Option>
         </Select.OptGroup>
     </Select>
-)
+);
 ```
 
 ```jsx live=true
@@ -203,7 +203,7 @@ import { Select } from '@douyinfe/semi-ui';
             <Select.Option value="hotsoon">Hotsoon</Select.Option>
         </Select>
     </>
-)
+);
 ```
 
 ### Different validate status
@@ -230,7 +230,7 @@ import { Select } from '@douyinfe/semi-ui';
             <Select.Option value="Capcut">Capcut</Select.Option>
         </Select>
     </>
-)
+);
 ```
 
 ### Configure Prefix, Suffix, Clear Button
@@ -268,7 +268,7 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
     </>
-)
+);
 ```
 
 ### Select with inset label
@@ -580,7 +580,7 @@ import { Select } from '@douyinfe/semi-ui';
             <Select.Option value="app4">BuzzVideo</Select.Option>
         </Select>
     </>
-)
+);
 ```
 ### Remote search
 
@@ -718,22 +718,22 @@ class CustomRender extends React.Component {
     constructor() {
         super();
         this.state = {
-          list: [
-            { "name": "XiaKeMan", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"},
-            { "name": "ShenYue", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg"},
-            { "name": "QuChenYi", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg"},
-            { "name": "WenJiaMao", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png"},
-          ]
+            list: [
+                { "name": "XiaKeMan", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"},
+                { "name": "ShenYue", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg"},
+                { "name": "QuChenYi", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg"},
+                { "name": "WenJiaMao", "email": "[email protected]", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png"},
+            ]
         };
     }
 
     renderSelectedItem(optionNode) {
         return (
-          <div key={optionNode.email} style={{display: 'flex', alignItems: 'center'}}>
-            <Avatar src={optionNode.avatar} size="small">{optionNode.abbr}</Avatar>
-            <span style={{ marginLeft: 8 }}>{optionNode.email}</span>
-          </div>
-        )
+            <div key={optionNode.email} style={{display: 'flex', alignItems: 'center'}}>
+                <Avatar src={optionNode.avatar} size="small">{optionNode.abbr}</Avatar>
+                <span style={{ marginLeft: 8 }}>{optionNode.email}</span>
+            </div>
+        );
     }
 
     // avatarSrc & avatarShape are supported after 1.6.0
@@ -746,13 +746,13 @@ class CustomRender extends React.Component {
                 onClose={onClose}
                 size='large'
                 key={optionNode.name}
-                >
+            >
                 {optionNode.name}
             </Tag>
         );
         return {
-          isRenderInTag: false,
-          content
+            isRenderInTag: false,
+            content
         };
     }
 
@@ -765,13 +765,13 @@ class CustomRender extends React.Component {
                 onClose={onClose}
                 size='large'
                 key={optionNode.name}
-                >
+            >
                 {optionNode.name}
             </Tag>
         );
         return {
-          isRenderInTag: false,
-          content
+            isRenderInTag: false,
+            content
         };
     }
 
@@ -781,16 +781,16 @@ class CustomRender extends React.Component {
             paddingLeft: 24,
             paddingTop: 10,
             paddingBottom: 10
-        }
+        };
         return (
             <Select.Option value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
-               <Avatar size="small" src={item.avatar} />
+                <Avatar size="small" src={item.avatar} />
                 <div style={{ marginLeft: 8 }}>
                     <div style={{ fontSize: 14 }}>{item.name}</div>
                     <div style={{ color: 'var(--semi-color-text-2)', fontSize: 12, lineHeight: '16px', fontWeight: 'normal' }}>{item.email}</div>
                 </div>
             </Select.Option>
-        )
+        );
     }
 
     render() {
@@ -804,7 +804,7 @@ class CustomRender extends React.Component {
                     renderSelectedItem={this.renderSelectedItem}
                 >
                     {
-                      list.map(item => this.renderCustomOption(item))
+                        list.map(item => this.renderCustomOption(item))
                     }
                 </Select>
                 <Select
@@ -816,7 +816,7 @@ class CustomRender extends React.Component {
                     renderSelectedItem={this.renderMultipleWithCustomTag}
                 >
                     {
-                      list.map(item => this.renderCustomOption(item))
+                        list.map(item => this.renderCustomOption(item))
                     }
                 </Select>
                 <Select
@@ -828,7 +828,7 @@ class CustomRender extends React.Component {
                     renderSelectedItem={this.renderMultipleWithCustomTag2}
                 >
                     {
-                      list.map(item => this.renderCustomOption(item))
+                        list.map(item => this.renderCustomOption(item))
                     }
                 </Select>
             </React.Fragment>
@@ -854,7 +854,7 @@ import { Select } from '@douyinfe/semi-ui';
         <Select.Option value="pipixia">Pipixia</Select.Option>
         <Select.Option value="xigua">BuzzVideo</Select.Option>
     </Select>
-)
+);
 ```
 
 ### Dynamic Modification Options
@@ -1211,14 +1211,14 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
             <div className='option-right'>
                 {label}
             </div>
-        </div>
+        </div>;
     };
 
     const optionList = [
-      { value: 'abc', label: 'Semi', otherKey:0 },
-      { value: 'capcut', label: 'Capcut', disabled: true, otherKey: 1 },
-      { value: 'cam', label: 'UlikeCam', otherKey: 2 },
-      { value: 'buzz', label: 'Buzz', otherKey: 3 },
+        { value: 'abc', label: 'Semi', otherKey:0 },
+        { value: 'capcut', label: 'Capcut', disabled: true, otherKey: 1 },
+        { value: 'cam', label: 'UlikeCam', otherKey: 2 },
+        { value: 'buzz', label: 'Buzz', otherKey: 3 },
     ];
 
     return <>
@@ -1242,7 +1242,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
             style={{ width: 320, marginTop: 180 }}
             renderOptionItem={renderOptionItem}
         />
-    </>
+    </>;
 };
 ```
 

content/input/slider/index-en-US.md

@@ -25,25 +25,25 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
     <div>
-        <div>Default</div>
-        <Slider showBoundary={true}></Slider>
-    </div>
-    <br/>
-    <br/>
-    <div>
-        <div>Range</div>
-        <Slider defaultValue={[20, 60]} range></Slider>
-    </div>
-    <br/>
-    <br/>
-    <div>
-        <div>Disabled</div>
-        <Slider defaultValue={40} disabled></Slider>
+        <div>
+            <div>Default</div>
+            <Slider showBoundary={true}></Slider>
+        </div>
+        <br/>
+        <br/>
+        <div>
+            <div>Range</div>
+            <Slider defaultValue={[20, 60]} range></Slider>
+        </div>
+        <br/>
+        <br/>
+        <div>
+            <div>Disabled</div>
+            <Slider defaultValue={40} disabled></Slider>
+        </div>
     </div>
-  </div>
-)
+);
 ```
 
 ### With Input
@@ -62,14 +62,14 @@ class InputSlider extends React.Component {
     }
 
     getSliderValue(value) {
-        if(isNaN(Number(value))){
+        if (isNaN(Number(value))){
             return;
         }
         this.setState({ value: value / 1 });
     }
 
     render() {
-        const { value } = this.state
+        const { value } = this.state;
         return (
             <div>
                 <div style={{ width: 320, marginRight: 15 }}>
@@ -91,13 +91,13 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <Slider tipFormatter={v => (`${v}%`)} />
-    <br/>
-    <br/>
-    <Slider tipFormatter={null} />
-  </div>
-)
+    <div>
+        <Slider tipFormatter={v => (`${v}%`)} />
+        <br/>
+        <br/>
+        <Slider tipFormatter={null} />
+    </div>
+);
 ```
 
 ### With Tag
@@ -109,23 +109,23 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <div>step=10</div>
-    <Slider step={10} marks={{ 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' }} defaultValue={[10, 100]} range={true}></Slider>
-    <br/>
-    <br/>
-    <div>step=0.1</div>
-    <Slider step={0.1} marks={{ 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' }} min={0} max={1} defaultValue={[0.1, 0.5]} range={true}></Slider>
-    <br/>
-    <br/>
-    <div>Marks</div>
-    <Slider marks={{ 20: '20c', 40: '40c' }} defaultValue={[0, 100]} range={true} ></Slider>
-    <br/>
-    <br/>
-    <div>Inclued</div>
-    <Slider marks={{ 20: '20c', 40: '40c' }} included={false} defaultValue={[0, 100]} range={true}></Slider>
-  </div>
-)
+    <div>
+        <div>step=10</div>
+        <Slider step={10} marks={{ 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' }} defaultValue={[10, 100]} range={true}></Slider>
+        <br/>
+        <br/>
+        <div>step=0.1</div>
+        <Slider step={0.1} marks={{ 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' }} min={0} max={1} defaultValue={[0.1, 0.5]} range={true}></Slider>
+        <br/>
+        <br/>
+        <div>Marks</div>
+        <Slider marks={{ 20: '20c', 40: '40c' }} defaultValue={[0, 100]} range={true} ></Slider>
+        <br/>
+        <br/>
+        <div>Inclued</div>
+        <Slider marks={{ 20: '20c', 40: '40c' }} included={false} defaultValue={[0, 100]} range={true}></Slider>
+    </div>
+);
 ```
 
 
@@ -136,43 +136,43 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 class SegSlider extends React.Component {
-  constructor(props) {
-    super();
-    this.state = { value: [20, 60] };
-    this.changeValue = this.changeValue.bind(this);
-    this.getRailStyle = this.getRailStyle.bind(this);
-  }
-
-  changeValue(value) {
-    this.setState({ value });
-  }
-
-  getRailStyle(range) {
+    constructor(props) {
+        super();
+        this.state = { value: [20, 60] };
+        this.changeValue = this.changeValue.bind(this);
+        this.getRailStyle = this.getRailStyle.bind(this);
+    }
+
+    changeValue(value) {
+        this.setState({ value });
+    }
+
+    getRailStyle(range) {
     // color of second segment inherits from .semi-slider-track
-    const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)'];
-    const gradientPos = this.state.value.map(val => 
-      ((val - range[0]) / (range[1] - range[0])).toFixed(2) * 100
-    );
-    const style = {
-      background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)`
+        const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)'];
+        const gradientPos = this.state.value.map(val => 
+            ((val - range[0]) / (range[1] - range[0])).toFixed(2) * 100
+        );
+        const style = {
+            background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)`
+        };
+        return style;
+    }
+
+    render() {
+        const range = [10, 100];
+        const railStyle = this.getRailStyle(range);
+        return (
+            <Slider
+                range
+                min={range[0]}
+                max={range[1]}
+                onChange={this.changeValue}
+                railStyle={railStyle}
+                defaultValue={this.state.value}
+            />
+        );
     }
-    return style;
-  }
-
-  render() {
-    const range = [10, 100];
-    const railStyle = this.getRailStyle(range);
-    return (
-        <Slider
-          range
-          min={range[0]}
-          max={range[1]}
-          onChange={this.changeValue}
-          railStyle={railStyle}
-          defaultValue={this.state.value}
-        />
-    );
-  }
 }
 ```
 
@@ -185,26 +185,26 @@ import React from 'react';
 import { Slider, Button } from '@douyinfe/semi-ui';
 
 class ControllSlider extends React.Component {
-  constructor(props) {
-    super();
-    this.state = { value: 10 };
-    this.changeValue = this.changeValue.bind(this);
-  }
-
-  changeValue() {
-    this.setState({ value: this.state.value + 10 });
-  }
-
-  render() {
-    return (
-      <div>
-        <Button onClick={this.changeValue} style={{ marginRight: 20 }}>Click to change value</Button>
-        <br/>
-        <br/>
-        <Slider value={this.state.value}></Slider>
-      </div>
-    );
-  }
+    constructor(props) {
+        super();
+        this.state = { value: 10 };
+        this.changeValue = this.changeValue.bind(this);
+    }
+
+    changeValue() {
+        this.setState({ value: this.state.value + 10 });
+    }
+
+    render() {
+        return (
+            <div>
+                <Button onClick={this.changeValue} style={{ marginRight: 20 }}>Click to change value</Button>
+                <br/>
+                <br/>
+                <Slider value={this.state.value}></Slider>
+            </div>
+        );
+    }
 }
 ```
 
@@ -215,27 +215,27 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-      <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-          <Slider vertical></Slider>
-      </div>
-      <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-          <Slider vertical verticalReverse></Slider>
-      </div>
-      <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-          <Slider vertical range defaultValue={[20, 60]}></Slider>
-      </div>
-      <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-          <Slider vertical verticalReverse range defaultValue={[20, 60]}></Slider>
-      </div>
-      <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-          <Slider vertical range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
-      </div>
-      <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-          <Slider vertical verticalReverse range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
-      </div>
-  </div>
-)
+    <div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical verticalReverse></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical range defaultValue={[20, 60]}></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical verticalReverse range defaultValue={[20, 60]}></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical verticalReverse range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
+        </div>
+    </div>
+);
 ```
 
 ## API Reference

content/input/slider/index.md

@@ -22,25 +22,25 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
     <div>
-        <div>Default</div>
-        <Slider showBoundary={true}></Slider>
-    </div>
-    <br/>
-    <br/>
-    <div>
-        <div>Range</div>
-        <Slider defaultValue={[20, 60]} range></Slider>
-    </div>
-    <br/>
-    <br/>
-    <div>
-        <div>Disabled</div>
-        <Slider defaultValue={40} disabled></Slider>
+        <div>
+            <div>Default</div>
+            <Slider showBoundary={true}></Slider>
+        </div>
+        <br/>
+        <br/>
+        <div>
+            <div>Range</div>
+            <Slider defaultValue={[20, 60]} range></Slider>
+        </div>
+        <br/>
+        <br/>
+        <div>
+            <div>Disabled</div>
+            <Slider defaultValue={40} disabled></Slider>
+        </div>
     </div>
-  </div>
-)
+);
 ```
 
 ### 带输入框的
@@ -50,30 +50,30 @@ import React from 'react';
 import { Slider, InputNumber } from '@douyinfe/semi-ui';
 
 class InputSlider extends React.Component {
-  constructor(props) {
-    super();
-    this.state = { value: 10 };
-    this.getSliderValue = this.getSliderValue.bind(this);
-  }
-
-  getSliderValue(value) {
-      if(isNaN(Number(value))){
-          return;
-      }
-      this.setState({ value: value / 1 }); 
-  }
-
-  render() {
-    const { value } = this.state
-    return (
-      <div>
-          <div style={{ width: 320, marginRight: 15 }}>
-              <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
-          </div>
-          <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} min={0} max={100} />
-      </div>
-    );
-  }
+    constructor(props) {
+        super();
+        this.state = { value: 10 };
+        this.getSliderValue = this.getSliderValue.bind(this);
+    }
+
+    getSliderValue(value) {
+        if (isNaN(Number(value))){
+            return;
+        }
+        this.setState({ value: value / 1 }); 
+    }
+
+    render() {
+        const { value } = this.state;
+        return (
+            <div>
+                <div style={{ width: 320, marginRight: 15 }}>
+                    <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
+                </div>
+                <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} min={0} max={100} />
+            </div>
+        );
+    }
 }
 ```
 
@@ -84,13 +84,13 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <Slider tipFormatter={v => (`${v}%`)} />
-    <br/>
-    <br/>
-    <Slider tipFormatter={null} />
-  </div>
-)
+    <div>
+        <Slider tipFormatter={v => (`${v}%`)} />
+        <br/>
+        <br/>
+        <Slider tipFormatter={null} />
+    </div>
+);
 ```
 
 ### 带标签的
@@ -100,23 +100,23 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <div>step=10</div>
-    <Slider step={10} marks={{ 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' }} defaultValue={[10, 100]} range={true}></Slider>
-    <br/>
-    <br/>
-    <div>step=0.1</div>
-    <Slider step={0.1} marks={{ 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' }} min={0} max={1} defaultValue={[0.1, 0.5]} range={true}></Slider>
-    <br/>
-    <br/>
-    <div>Marks</div>
-    <Slider marks={{ 20: '20c', 40: '40c' }} defaultValue={[0, 100]} range={true} ></Slider>
-    <br/>
-    <br/>
-    <div>Inclued</div>
-    <Slider marks={{ 20: '20c', 40: '40c' }} included={false} defaultValue={[0, 100]} range={true}></Slider>
-  </div>
-)
+    <div>
+        <div>step=10</div>
+        <Slider step={10} marks={{ 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' }} defaultValue={[10, 100]} range={true}></Slider>
+        <br/>
+        <br/>
+        <div>step=0.1</div>
+        <Slider step={0.1} marks={{ 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' }} min={0} max={1} defaultValue={[0.1, 0.5]} range={true}></Slider>
+        <br/>
+        <br/>
+        <div>Marks</div>
+        <Slider marks={{ 20: '20c', 40: '40c' }} defaultValue={[0, 100]} range={true} ></Slider>
+        <br/>
+        <br/>
+        <div>Inclued</div>
+        <Slider marks={{ 20: '20c', 40: '40c' }} included={false} defaultValue={[0, 100]} range={true}></Slider>
+    </div>
+);
 ```
 
 ### 分段背景
@@ -126,43 +126,43 @@ import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
 class SegSlider extends React.Component {
-  constructor(props) {
-    super();
-    this.state = { value: [20, 60] };
-    this.changeValue = this.changeValue.bind(this);
-    this.getRailStyle = this.getRailStyle.bind(this);
-  }
-
-  changeValue(value) {
-    this.setState({ value });
-  }
-
-  getRailStyle(range) {
+    constructor(props) {
+        super();
+        this.state = { value: [20, 60] };
+        this.changeValue = this.changeValue.bind(this);
+        this.getRailStyle = this.getRailStyle.bind(this);
+    }
+
+    changeValue(value) {
+        this.setState({ value });
+    }
+
+    getRailStyle(range) {
     // color of second segment inherits from .semi-slider-track
-    const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)'];
-    const gradientPos = this.state.value.map(val => 
-      ((val - range[0]) / (range[1] - range[0])).toFixed(2) * 100
-    );
-    const style = {
-      background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)`
+        const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)'];
+        const gradientPos = this.state.value.map(val => 
+            ((val - range[0]) / (range[1] - range[0])).toFixed(2) * 100
+        );
+        const style = {
+            background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)`
+        };
+        return style;
+    }
+
+    render() {
+        const range = [10, 100];
+        const railStyle = this.getRailStyle(range);
+        return (
+            <Slider
+                range
+                min={range[0]}
+                max={range[1]}
+                onChange={this.changeValue}
+                railStyle={railStyle}
+                defaultValue={this.state.value}
+            />
+        );
     }
-    return style;
-  }
-
-  render() {
-    const range = [10, 100];
-    const railStyle = this.getRailStyle(range);
-    return (
-        <Slider
-          range
-          min={range[0]}
-          max={range[1]}
-          onChange={this.changeValue}
-          railStyle={railStyle}
-          defaultValue={this.state.value}
-        />
-    );
-  }
 }
 ```
 
@@ -173,26 +173,26 @@ import React from 'react';
 import { Slider, Button } from '@douyinfe/semi-ui';
 
 class ControllSlider extends React.Component {
-  constructor(props) {
-    super();
-    this.state = { value: 10 };
-    this.changeValue = this.changeValue.bind(this);
-  }
-
-  changeValue() {
-    this.setState({ value: this.state.value + 10 });
-  }
-
-  render() {
-    return (
-      <div>
-        <Button onClick={this.changeValue} style={{ marginRight: 20 }}>点击改变value值</Button>
-        <br/>
-        <br/>
-        <Slider value={this.state.value}></Slider>
-      </div>
-    );
-  }
+    constructor(props) {
+        super();
+        this.state = { value: 10 };
+        this.changeValue = this.changeValue.bind(this);
+    }
+
+    changeValue() {
+        this.setState({ value: this.state.value + 10 });
+    }
+
+    render() {
+        return (
+            <div>
+                <Button onClick={this.changeValue} style={{ marginRight: 20 }}>点击改变value值</Button>
+                <br/>
+                <br/>
+                <Slider value={this.state.value}></Slider>
+            </div>
+        );
+    }
 }
 ```
 
@@ -201,26 +201,29 @@ class ControllSlider extends React.Component {
 import React from 'react';
 import { Slider } from '@douyinfe/semi-ui';
 
-<div>
-  <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-      <Slider vertical></Slider>
-  </div>
-  <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-      <Slider vertical verticalReverse></Slider>
-  </div>
-  <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-      <Slider vertical range defaultValue={[20, 60]}></Slider>
-  </div>
-  <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-      <Slider vertical verticalReverse range defaultValue={[20, 60]}></Slider>
-  </div>
-  <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-      <Slider vertical range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
-  </div>
-    <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
-      <Slider vertical verticalReverse range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
+() => (
+    <div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical verticalReverse></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical range defaultValue={[20, 60]}></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical verticalReverse range defaultValue={[20, 60]}></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
+        </div>
+        <div style={{height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block'}}>
+            <Slider vertical verticalReverse range marks={{ 20: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
+        </div>
     </div>
-</div>
+);
+
 ```
 
 ## API参考

content/input/switch/index-en-US.md

@@ -22,14 +22,14 @@ import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-      <Switch onChange={(v, e) => console.log(v)}>
-      </Switch>
-      <br/>
-      <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
-      </Switch>
-  </div>
-)
+    <div>
+        <Switch onChange={(v, e) => console.log(v)}>
+        </Switch>
+        <br/>
+        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
+        </Switch>
+    </div>
+);
 ```
 
 ### Size
@@ -39,7 +39,7 @@ import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
+    <div>
         <Switch size='small'></Switch>
         <Switch defaultChecked={true} size='small'></Switch>
         <Switch size='small' loading/>
@@ -54,8 +54,8 @@ import { Switch } from '@douyinfe/semi-ui';
         <Switch defaultChecked={true} size='large'></Switch>
         <Switch size='large' loading/>
         <Switch size='large' loading defaultChecked={true} />
-  </div>
-)
+    </div>
+);
 ```
 
 ### Disabled
@@ -65,12 +65,12 @@ import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
+    <div>
         <Switch disabled></Switch>
         <br/>
         <Switch disabled checked={true}></Switch>
-  </div>
-)
+    </div>
+);
 ```
 
 ### With text
@@ -97,7 +97,7 @@ import { Switch } from '@douyinfe/semi-ui';
         <Switch defaultChecked checkedText='on' uncheckedText='off' size='large' />
         <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' style={{marginLeft:5}}/>
     </div>
-)
+);
 ```
 
 Compared to setting the embedded text through checkedText and uncheckedText, we recommend placing the text description outside the Switch
@@ -110,11 +110,11 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
     const { Title } = Typography;
     return (
         <div style={{display:'flex', alignItems: 'center'}}>
-          <Title heading={6} style={{margin: 8}}>{open?'Open':'Closed'}</Title>
-          <Switch checked={open} onChange={setOpen}/>
+            <Title heading={6} style={{margin: 8}}>{open?'Open':'Closed'}</Title>
+            <Switch checked={open} onChange={setOpen}/>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Controlled component
@@ -127,10 +127,10 @@ import { Switch } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             checked: true,
-        }
+        };
         this.onChange = this.onChange.bind(this);
     }
     onChange(checked) {
@@ -139,12 +139,12 @@ class Demo extends React.Component {
     render() {
         return (
             <>
-            <Switch
-                checked={this.state.checked}
-                onChange={this.onChange}>
-            </Switch>
+                <Switch
+                    checked={this.state.checked}
+                    onChange={this.onChange}>
+                </Switch>
             </>
-        )
+        );
     }
 }
 ```
@@ -165,7 +165,7 @@ import { Switch } from '@douyinfe/semi-ui';
         <br />
         <Switch loading defaultChecked={true} />
     </div>
-)
+);
 ```
 
 ## API reference

content/input/switch/index.md

@@ -23,14 +23,14 @@ import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-      <Switch onChange={(v, e) => console.log(v)}>
-      </Switch>
-      <br/>
-      <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
-      </Switch>
-  </div>
-)
+    <div>
+        <Switch onChange={(v, e) => console.log(v)}>
+        </Switch>
+        <br/>
+        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
+        </Switch>
+    </div>
+);
 ```
 
 ### 尺寸
@@ -40,7 +40,7 @@ import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
+    <div>
         <Switch size='small'></Switch>
         <Switch defaultChecked={true} size='small'></Switch>
         <Switch size='small' loading/>
@@ -55,8 +55,8 @@ import { Switch } from '@douyinfe/semi-ui';
         <Switch defaultChecked={true} size='large'></Switch>
         <Switch size='large' loading/>
         <Switch size='large' loading defaultChecked={true} />
-  </div>
-)
+    </div>
+);
 ```
 
 ### 不可用
@@ -66,12 +66,12 @@ import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
+    <div>
         <Switch disabled></Switch>
         <br/>
         <Switch disabled checked={true}></Switch>
-  </div>
-)
+    </div>
+);
 ```
 
 ### 带文本
@@ -98,7 +98,7 @@ import { Switch } from '@douyinfe/semi-ui';
         <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' />
         <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' style={{marginLeft:5}}/>
     </div>
-)
+);
 ```
 
 相比于通过chekedText与uncheckedText设置内嵌的文本，我们更推荐将文本说明放置在Switch外部
@@ -111,11 +111,11 @@ import { Switch, Typography } from '@douyinfe/semi-ui';
     const { Title } = Typography;
     return (
         <div style={{display:'flex', alignItems: 'center'}}>
-          <Title heading={6} style={{margin: 8}}>{open?'已开启':'已关闭'}</Title>
-          <Switch checked={open} onChange={setOpen}/>
+            <Title heading={6} style={{margin: 8}}>{open?'已开启':'已关闭'}</Title>
+            <Switch checked={open} onChange={setOpen}/>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 受控组件
@@ -128,10 +128,10 @@ import { Switch } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             checked: true,
-        }
+        };
         this.onChange = this.onChange.bind(this);
     }
     onChange(checked) {
@@ -140,12 +140,12 @@ class Demo extends React.Component {
     render() {
         return (
             <>
-            <Switch
-                checked={this.state.checked}
-                onChange={this.onChange}>
-            </Switch>
+                <Switch
+                    checked={this.state.checked}
+                    onChange={this.onChange}>
+                </Switch>
             </>
-        )
+        );
     }
 }
 ```
@@ -160,11 +160,13 @@ version: >= 1.29.0
 import React from 'react';
 import { Switch } from '@douyinfe/semi-ui';
 
-  <div>
+() => (
+    <div>
         <Switch loading />
         <br />
         <Switch loading defaultChecked={true} />
-  </div>
+    </div>
+);
 ```
 
 ## API 参考

content/input/taginput/index-en-US.md

@@ -29,7 +29,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### Batch Add
@@ -54,7 +54,7 @@ import { TagInput } from '@douyinfe/semi-ui';
             onChange={v => console.log(v)}
         />
     </>
-)
+);
 ```
 
 ### Batch Remove
@@ -72,7 +72,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 
@@ -89,7 +89,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         defaultValue={['Semi','Hotsoon','Pipixia']} 
         placeholder='Please enter...'
     />
-)
+);
 ```
 
 ### Size
@@ -108,7 +108,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         <br/><br/>
         <TagInput size='large' placeholder='large'/>
     </>
-)
+);
 ```
 
 ### Different validate status
@@ -128,7 +128,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         <br/><br/>
         <TagInput placeholder='error' validateStatus='error'/>
     </>
-)
+);
 ``` 
 
 ### Prefix / Suffix
@@ -151,7 +151,7 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
         <br/><br/>
         <TagInput  suffix="Suffix" showClear/>
     </>
-)
+);
 ``` 
 
 ### Allow Duplicates
@@ -169,7 +169,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### Autocomplete
@@ -187,7 +187,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### Limits
@@ -222,7 +222,7 @@ import { TagInput } from '@douyinfe/semi-ui';
             }} 
         />
     </>
-)
+);
 ```
 
 ### Limit the number of tags displayed
@@ -240,7 +240,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         restTagsPopoverProps={{ position: 'top' }}
         defaultValue={['Semi','Hotsoon','Pipixia']} 
     />
-)
+);
 ```
 
 ### Controlled Tag
@@ -267,7 +267,7 @@ class TagInputDemo extends React.Component {
                 value={this.state.value}
                 onChange={value => {this.onChange(value);}}
             />
-        )
+        );
     }
 }
 ```
@@ -285,10 +285,10 @@ class TagInputDemo extends React.Component {
         super(props);
         this.state = {
             value: 'abc'
-        }
+        };
     }
     handleInputChange(value, event) {
-      this.setState({ value });
+        this.setState({ value });
     }
     render() {
         return (
@@ -296,7 +296,7 @@ class TagInputDemo extends React.Component {
                 inputValue={this.state.value}
                 onInputChange={(v,e) => this.handleInputChange(v,e)}
             />
-        )
+        );
     }
 }
 ```
@@ -318,7 +318,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         onRemove={(v,i)=>{console.log(`onRemove ：${v}, index：${i}`);}} 
         onInputChange={(input,e)=>{console.log(`onInputChange ：${input}`);}} 
     />
-)
+);
 ```
 
 ### Focus Management
@@ -348,7 +348,7 @@ class TagInputDemo extends React.Component {
                     focus
                 </Button>
             </>
-        )
+        );
     }
 }
 ```
@@ -366,13 +366,13 @@ class CustomRender extends React.Component {
         super(props);
         this.state = {
             value : ['xiakeman']
-        }
+        };
         this.list = [
             { "name": "xiakeman", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"},
             { "name": "shenyue",  "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg"},
             { "name": "quchenyi", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg"},
             { "name": "wenjiamao", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg"},
-        ]
+        ];
         this.mapList = new Map(this.list.map( item => [item.name,item]));
     }
 
@@ -391,7 +391,7 @@ class CustomRender extends React.Component {
                     {`${value}@semi.com`}
                 </span>
             </div>
-        )
+        );
     }
 
     render() {

content/input/taginput/index.md

@@ -28,7 +28,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### 批量添加
@@ -53,7 +53,7 @@ import { TagInput } from '@douyinfe/semi-ui';
             onChange={v => console.log(v)}
         />
     </>
-)
+);
 ```
 
 ### 批量删除
@@ -71,7 +71,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### 禁用
@@ -87,7 +87,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         defaultValue={['抖音','火山','西瓜视频']} 
         placeholder='请输入...'
     />
-)
+);
 ```
 
 ### 尺寸大小
@@ -106,7 +106,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         <br/><br/>
         <TagInput size='large' placeholder='large'/>
     </>
-)
+);
 ```
 
 ### 不同校验状态样式
@@ -125,7 +125,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         <br/><br/>
         <TagInput placeholder='error' validateStatus='error'/>
     </>
-)
+);
 ``` 
 
 ### 前缀 / 后缀
@@ -148,7 +148,7 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
         <br/><br/>
         <TagInput suffix="Suffix" />
     </>
-)
+);
 ``` 
 
 ### 失焦后自动创建标签
@@ -166,7 +166,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### 过滤重复标签
@@ -184,7 +184,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### 输入限制
@@ -219,7 +219,7 @@ import { TagInput } from '@douyinfe/semi-ui';
             }} 
         />
     </>
-)
+);
 ```
 
 ### 限制标签展示数量
@@ -238,7 +238,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         defaultValue={['抖音','火山','西瓜视频']}
         onChange={v => console.log(v)}
     />
-)
+);
 ```
 
 ### 标签受控
@@ -266,7 +266,7 @@ class TagInputDemo extends React.Component {
                 value={this.state.value}
                 onChange={value => {this.onChange(value);}}
             />
-        )
+        );
     }
 }
 ```
@@ -284,10 +284,10 @@ class TagInputDemo extends React.Component {
         super();
         this.state = {
             value: 'abc'
-        }
+        };
     }
     handleInputChange(value, event) {
-      this.setState({ value });
+        this.setState({ value });
     }
     render() {
         return (
@@ -295,7 +295,7 @@ class TagInputDemo extends React.Component {
                 inputValue={this.state.value}
                 onInputChange={(v,e) => this.handleInputChange(v,e)}
             />
-        )
+        );
     }
 }
 ```
@@ -318,7 +318,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         onRemove={(v,i) => {console.log(`onRemove，移除：${v}, 序号：${i}`);}} 
         onInputChange={(input,e) => {console.log(`onInputChange，当前输入内容：${input}`);}} 
     />
-)
+);
 ```
 
 ### 焦点管理
@@ -348,7 +348,7 @@ class TagInputDemo extends React.Component {
                     点击按钮聚焦
                 </Button>
             </>
-        )
+        );
     }
 }
 ```
@@ -366,13 +366,13 @@ class CustomRender extends React.Component {
         super(props);
         this.state = {
             value : ['夏可漫']
-        }
+        };
         this.list = [
             { "name": "夏可漫", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"},
             { "name": "申悦",  "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg"},
             { "name": "曲晨一", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg"},
             { "name": "文嘉茂", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg"},
-        ]
+        ];
         this.mapList = new Map(this.list.map( item => [item.name,item]));
     }
 
@@ -391,7 +391,7 @@ class CustomRender extends React.Component {
                     {`${value}@semi.com`}
                 </span>
             </div>
-        )
+        );
     }
 
     render() {

content/input/timepicker/index.md

@@ -28,7 +28,7 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return <TimePicker />;
+    return <TimePicker />;
 }
 ```
 
@@ -39,7 +39,7 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return <TimePicker insetLabel='时刻'/>;
+    return <TimePicker insetLabel='时刻'/>;
 }
 ```
 
@@ -52,22 +52,22 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      value: null,
+    constructor() {
+        super();
+        this.state = {
+            value: null,
+        };
+        this.onChange = this.onChange.bind(this);
+    }
+
+    onChange(time) {
+        console.log(time);
+        this.setState({ value: time });
     };
-    this.onChange = this.onChange.bind(this);
-  }
 
-  onChange(time) {
-    console.log(time);
-    this.setState({ value: time });
-  };
-
-  render() {
-    return <TimePicker value={this.state.value} onChange={this.onChange} />;
-  }
+    render() {
+        return <TimePicker value={this.state.value} onChange={this.onChange} />;
+    }
 }
 ```
 
@@ -82,7 +82,7 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return <TimePicker format={'HH:mm'} defaultValue={'10:24'}/>;
+    return <TimePicker format={'HH:mm'} defaultValue={'10:24'}/>;
 }
 ```
 
@@ -93,14 +93,14 @@ import React, { useState } from 'react';
 import { TimePicker, Button } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const [open, setOpen] = useState(false);
-  const closePanel = () => setOpen(false);
-  const onOpenChange = (open) =>  {
-    setOpen(open);
-    console.log(open);
-  };
-
-  return <TimePicker open={open} onOpenChange={onOpenChange} panelHeader={'Time Select'} panelFooter={<Button onClick={closePanel}>close</Button>}/>;
+    const [open, setOpen] = useState(false);
+    const closePanel = () => setOpen(false);
+    const onOpenChange = (open) =>  {
+        setOpen(open);
+        console.log(open);
+    };
+
+    return <TimePicker open={open} onOpenChange={onOpenChange} panelHeader={'Time Select'} panelFooter={<Button onClick={closePanel}>close</Button>}/>;
 }
 ```
 
@@ -111,7 +111,7 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return <TimePicker defaultValue={'12:08:23'} disabled />;
+    return <TimePicker defaultValue={'12:08:23'} disabled />;
 }
 ```
 
@@ -124,7 +124,7 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return <TimePicker minuteStep={15} secondStep={10} />;
+    return <TimePicker minuteStep={15} secondStep={10} />;
 }
 ```
 
@@ -139,12 +139,12 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-    <div>
-      <TimePicker use12Hours /><br/><br/>
-      <TimePicker use12Hours format="a h:mm" />
-    </div>
-  );
+    return (
+        <div>
+            <TimePicker use12Hours /><br/><br/>
+            <TimePicker use12Hours format="a h:mm" />
+        </div>
+    );
 }
 ```
 
@@ -159,12 +159,12 @@ import React from 'react';
 import { TimePicker } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-    <div>
-      <TimePicker type="timeRange" defaultValue={["10:23:15", "12:38:32"]} /><br/><br/>
-      <TimePicker type="timeRange" use12Hours format="a h:mm" defaultValue={["上午 08:11", "下午 11:21"]} />
-    </div>
-  );
+    return (
+        <div>
+            <TimePicker type="timeRange" defaultValue={["10:23:15", "12:38:32"]} /><br/><br/>
+            <TimePicker type="timeRange" use12Hours format="a h:mm" defaultValue={["上午 08:11", "下午 11:21"]} />
+        </div>
+    );
 }
 ```
 
@@ -224,10 +224,10 @@ function Demo(props = {}) {
     const defaultTimestamp = 1581599305265;
     const gmtList = useMemo(() => {
         const list = [];
-        for(let hourOffset = -11; hourOffset <= 14 ; hourOffset++) {
+        for (let hourOffset = -11; hourOffset <= 14 ; hourOffset++) {
             const prefix = hourOffset >= 0 ? '+' : '-';
             const hOffset = Math.abs(parseInt(hourOffset, 10));
-            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`)
+            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);
         }
         return list;
     }, []);

content/input/upload/index-en-US.md

@@ -24,11 +24,13 @@ import React from 'react';
 import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
-<Upload action="//semi.design/api/upload">
-    <Button icon={<IconUpload />} theme="light">
-        Click upload
-    </Button>
-</Upload>
+() => (
+    <Upload action="//semi.design/api/upload">
+        <Button icon={<IconUpload />} theme="light">
+            Click upload
+        </Button>
+    </Upload>
+);
 ```
 
 ### Add prompt text
@@ -191,8 +193,8 @@ import { IconCamera } from '@douyinfe/semi-icons';
         >
             <Avatar src={url} style={{ margin: 4 }} hoverMask={hoverMask} />
         </Upload>
-    )
-}
+    );
+};
 ```
 
 ```css
@@ -207,7 +209,7 @@ Custom upload attributes can be added by setting `data`, `headers`
 
 ```jsx live=true width=48%
 import React from 'react';
-import { Upload } from '@douyinfe/semi-ui';
+import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
 () => {
@@ -248,7 +250,7 @@ For example, only allowing users to upload PNG and PDF files, `accept` can be wr
 
 ```jsx live=true width=48%
 import React from 'react';
-import { Upload } from '@douyinfe/semi-ui';
+import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
 () => {
@@ -336,7 +338,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
     let action = 'https://semi.design/api/upload';
     let limit = 1;
     let onChange = props => {
-        console.log(props.fileList)
+        console.log(props.fileList);
     };
     return (
         <Upload
@@ -586,7 +588,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
         console.log(currentFile);
         let newFileList = [...fileList]; // spread to get new array
         updateList(newFileList);
-    }
+    };
 
     return (
         <Upload
@@ -599,8 +601,8 @@ import { IconUpload } from '@douyinfe/semi-icons';
                 Click upload
             </Button>
         </Upload>
-    )
-}
+    );
+};
 ```
 
 ### Photo Wall
@@ -752,7 +754,7 @@ import { IconBolt } from '@douyinfe/semi-icons';
     dragMainText={'Click to upload the file or drag and drop the file here'}
     dragSubText="Only supports jpeg, pdf"
     style={{ marginTop: 10 }}
-></Upload>
+></Upload>;
 ```
 
 You can also pass in ReactNode through `children` to completely customize the display of the drag area
@@ -787,8 +789,8 @@ import { IconBolt } from '@douyinfe/semi-icons';
             Wow, you can really dance.
         </div>
     </div>
-    </Upload>
-)
+</Upload>
+);
 ```
 
 The scss style is as follows

content/input/upload/index.md

@@ -25,10 +25,10 @@ import { Upload, Button } from '@douyinfe/semi-ui';
 import { IconUpload } from '@douyinfe/semi-icons';
 
 <Upload action="https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859">
-    <Button icon={<IconUpload />} theme="light">
+        <Button icon={<IconUpload />} theme="light">
         点击上传
     </Button>
-</Upload>
+    </Upload>;
 ```
 
 ### 添加提示文本
@@ -191,8 +191,8 @@ import { IconCamera } from '@douyinfe/semi-icons';
         >
             <Avatar src={url} style={{ margin: 4 }} hoverMask={hoverMask} />
         </Upload>
-    )
-}
+    );
+};
 ```
 
 ```css
@@ -336,7 +336,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
     let action = 'https:https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
     let limit = 1;
     let onChange = props => {
-        console.log(props.fileList)
+        console.log(props.fileList);
     };
     return (
         <Upload
@@ -575,7 +575,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
         console.log(currentFile);
         let newFileList = [...fileList]; // spread to get new array
         updateList(newFileList);
-    }
+    };
 
     return (
         <Upload
@@ -588,8 +588,8 @@ import { IconUpload } from '@douyinfe/semi-icons';
                 点击上传
             </Button>
         </Upload>
-    )
-}
+    );
+};
 ```
 
 ### 照片墙
@@ -741,7 +741,7 @@ import { IconBolt } from '@douyinfe/semi-icons';
     dragMainText={'点击上传文件或拖拽文件到这里'}
     dragSubText="仅支持jpeg、pdf"
     style={{ marginTop: 10 }}
-></Upload>
+></Upload>;
 ```
 
 还可以通过 `children` 传入 ReactNode，完全自定义拖拽区的显示
@@ -776,8 +776,8 @@ import { IconBolt } from '@douyinfe/semi-icons';
             Wow, you can really dance.
         </div>
     </div>
-    </Upload>
-)
+</Upload>
+);
 ```
 
 Scss 样式如下

content/navigation/anchor/index-en-US.md

@@ -33,7 +33,7 @@ import { Anchor } from '@douyinfe/semi-ui';
         <Anchor.Link href="#Blocks" title="Blocks" />
         <Anchor.Link href="#Theme" title="Theme" />
     </Anchor>
-)
+);
 ```
 
 ### Integrated Usage
@@ -49,12 +49,13 @@ You can use `getContainer`, `targetOffset`, `offsetTop`, and `style` to create a
 -   offsetTop：`offsetTop` can trigger the current Link switch when the scrolling content reaches a specified offset from the top of the container.
 
 ```jsx
+import React from 'react';
 import { Anchor } from '@douyinfe/semi-ui';
 
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <span>See the fixed Anchor on the right </span>
@@ -76,8 +77,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 </Anchor.Link>
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Size
@@ -95,7 +96,7 @@ import { Anchor } from '@douyinfe/semi-ui';
         <Anchor.Link href="#Blocks" title="Blocks" />
         <Anchor.Link href="#Theme" title="Theme" />
     </Anchor>
-)
+);
 ```
 
 ```jsx live=true
@@ -109,7 +110,7 @@ import { Anchor } from '@douyinfe/semi-ui';
         <Anchor.Link href="#Blocks" title="Blocks" />
         <Anchor.Link href="#Theme" title="Theme" />
     </Anchor>
-)
+);
 ```
 
 ### Rail Theme
@@ -123,7 +124,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -138,8 +139,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#Theme" title="Theme" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
@@ -149,7 +150,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -164,8 +165,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#Theme" title="Theme" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
@@ -175,7 +176,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -190,8 +191,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#Theme" title="Theme" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Auto Collapse
@@ -205,28 +206,28 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
-        <Anchor
-            autoCollapse={true}
-            getContainer={getContainer}
-            targetOffset={60}
-            offsetTop={100}>
-            <Anchor.Link href="#Auto_Collapse" title="1. Auto Collapse">
-                <Anchor.Link href="#Components" title="1.1 Components">
-                    <Anchor.Link href="#Avatar" title="1.1.1 Avatar" />
-                    <Anchor.Link href="#Button" title="1.1.2 Button" />
-                    <Anchor.Link href="#Icon" title="1.1.3 Icon" />
+            <Anchor
+                autoCollapse={true}
+                getContainer={getContainer}
+                targetOffset={60}
+                offsetTop={100}>
+                <Anchor.Link href="#Auto_Collapse" title="1. Auto Collapse">
+                    <Anchor.Link href="#Components" title="1.1 Components">
+                        <Anchor.Link href="#Avatar" title="1.1.1 Avatar" />
+                        <Anchor.Link href="#Button" title="1.1.2 Button" />
+                        <Anchor.Link href="#Icon" title="1.1.3 Icon" />
+                    </Anchor.Link>
+                    <Anchor.Link href="#Blocks" title="1.2 Blocks" />
+                    <Anchor.Link href="#Theme" title="1.3 Theme" />
                 </Anchor.Link>
-                <Anchor.Link href="#Blocks" title="1.2 Blocks" />
-                <Anchor.Link href="#Theme" title="1.3 Theme" />
-            </Anchor.Link>
-            <Anchor.Link href="#Design" title="2. Design" />
-        </Anchor>
+                <Anchor.Link href="#Design" title="2. Design" />
+            </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
@@ -236,7 +237,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -256,8 +257,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#Design" title="2. Design" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Show Tooltip
@@ -271,24 +272,24 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
-        <Anchor
-            showTooltip={true}
-            getContainer={getContainer}
-            targetOffset={60}
-            offsetTop={100}
-        >
-            <Anchor.Link href="#Show_Tooltip" title="Tooltip is a useful tool that displays the entire content when text is abbreviated." />
-            <Anchor.Link href="#Components" title="Components" />
-            <Anchor.Link href="#Design" title="Design" />
-            <Anchor.Link href="#Blocks" title="Blocks" />
-            <Anchor.Link href="#Theme" title="Theme" />
-        </Anchor>
+            <Anchor
+                showTooltip={true}
+                getContainer={getContainer}
+                targetOffset={60}
+                offsetTop={100}
+            >
+                <Anchor.Link href="#Show_Tooltip" title="Tooltip is a useful tool that displays the entire content when text is abbreviated." />
+                <Anchor.Link href="#Components" title="Components" />
+                <Anchor.Link href="#Design" title="Design" />
+                <Anchor.Link href="#Blocks" title="Blocks" />
+                <Anchor.Link href="#Theme" title="Theme" />
+            </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Tooltip Position
@@ -302,25 +303,25 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
-        <Anchor
-            showTooltip={true}
-            position={'right'}
-            getContainer={getContainer}
-            targetOffset={60}
-            offsetTop={100}
-        >
-            <Anchor.Link href="#Tooltip_Position" title="Tooltip is a useful tool that displays the entire content when text is abbreviated." />
-            <Anchor.Link href="#Components" title="Components" />
-            <Anchor.Link href="#Design" title="Design" />
-            <Anchor.Link href="#Blocks" title="Blocks" />
-            <Anchor.Link href="#Theme" title="Theme" />
-        </Anchor>
+            <Anchor
+                showTooltip={true}
+                position={'right'}
+                getContainer={getContainer}
+                targetOffset={60}
+                offsetTop={100}
+            >
+                <Anchor.Link href="#Tooltip_Position" title="Tooltip is a useful tool that displays the entire content when text is abbreviated." />
+                <Anchor.Link href="#Components" title="Components" />
+                <Anchor.Link href="#Design" title="Design" />
+                <Anchor.Link href="#Blocks" title="Blocks" />
+                <Anchor.Link href="#Theme" title="Theme" />
+            </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ## API Reference
@@ -365,16 +366,19 @@ import { Anchor } from '@douyinfe/semi-ui';
     - No, it means there is a problem with the id. check whether the id exists in the document;
     - Yes, it may be that the scrolling container is not set correctly to ensure that the content of the document is wrapped in the scrolling container. The default scrolling container is window. If your container is a div of .my-container, you should set the scrolling container to this div.
     
-    ```jsx
-    function() {
+    ```text
+    import React from 'react';
+    import { Anchor } from '@douyinfe/semi-ui';
+
+    function App() {
         const getContainer = () => {
             return document.querySelector('.my-container');
-        }
+        };
         return (
             <Anchor
                 /* Other props */
                 getContainer={getContainer}
-                >
+            >
                 /* Links */
             </Anchor>
         )

content/navigation/anchor/index.md

@@ -31,7 +31,7 @@ import { Anchor } from '@douyinfe/semi-ui';
         <Anchor.Link href="#物料平台" title="物料平台" />
         <Anchor.Link href="#主题商店" title="主题商店" />
     </Anchor>  
-)
+);
 ```
 
 ### 综合使用
@@ -47,12 +47,13 @@ import { Anchor } from '@douyinfe/semi-ui';
 -   偏移距离：`offsetTop` 可以在滚动内容距离容器顶部达到指定偏移量时触发当前 Link 切换。
 
 ```jsx
+import React from 'react';
 import { Anchor } from '@douyinfe/semi-ui';
 
 () =>  {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <span>请看右侧固定的 Anchor </span>
@@ -74,8 +75,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 </Anchor.Link>
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 尺寸
@@ -93,7 +94,7 @@ import { Anchor } from '@douyinfe/semi-ui';
         <Anchor.Link href="#物料平台" title="物料平台" />
         <Anchor.Link href="#主题商店" title="主题商店" />
     </Anchor>
-)
+);
 ```
 
 ```jsx live=true
@@ -107,7 +108,7 @@ import { Anchor } from '@douyinfe/semi-ui';
         <Anchor.Link href="#物料平台" title="物料平台" />
         <Anchor.Link href="#主题商店" title="主题商店" />
     </Anchor>
-)
+);
 ```
 
 ### 滑轨主题
@@ -121,7 +122,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -137,8 +138,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#主题商店" title="主题商店" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
@@ -148,7 +149,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -164,8 +165,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#主题商店" title="主题商店" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
@@ -175,7 +176,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -191,8 +192,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#主题商店" title="主题商店" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 动态展示
@@ -206,28 +207,28 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
-        <Anchor
-            autoCollapse={true}
-            getContainer={getContainer}
-            targetOffset={60}
-            offsetTop={100}>
-            <Anchor.Link href="#动态展示" title="1. 动态展示">
-                <Anchor.Link href="#组件" title="1.1 组件">
-                    <Anchor.Link href="#头像" title="1.1.1 Avatar" />
-                    <Anchor.Link href="#按钮" title="1.1.2 Button" />
-                    <Anchor.Link href="#图标" title="1.1.3 Icon" />
+            <Anchor
+                autoCollapse={true}
+                getContainer={getContainer}
+                targetOffset={60}
+                offsetTop={100}>
+                <Anchor.Link href="#动态展示" title="1. 动态展示">
+                    <Anchor.Link href="#组件" title="1.1 组件">
+                        <Anchor.Link href="#头像" title="1.1.1 Avatar" />
+                        <Anchor.Link href="#按钮" title="1.1.2 Button" />
+                        <Anchor.Link href="#图标" title="1.1.3 Icon" />
+                    </Anchor.Link>
+                    <Anchor.Link href="#物料" title="1.2 物料" />
+                    <Anchor.Link href="#主题商店" title="1.3 主题商店" />
                 </Anchor.Link>
-                <Anchor.Link href="#物料" title="1.2 物料" />
-                <Anchor.Link href="#主题商店" title="1.3 主题商店" />
-            </Anchor.Link>
-            <Anchor.Link href="#设计语言" title="2. 设计语言" />
-        </Anchor>
+                <Anchor.Link href="#设计语言" title="2. 设计语言" />
+            </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ```jsx live=true
@@ -237,28 +238,28 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
-        <Anchor
-            autoCollapse={false}
-            getContainer={getContainer}
-            targetOffset={60}
-            offsetTop={100}>
-            <Anchor.Link href="#动态展示" title="1. 动态展示">
-                <Anchor.Link href="#组件" title="1.1 组件">
-                    <Anchor.Link href="#头像" title="1.1.1 Avatar" />
-                    <Anchor.Link href="#按钮" title="1.1.2 Button" />
-                    <Anchor.Link href="#图标" title="1.1.3 Icon" />
+            <Anchor
+                autoCollapse={false}
+                getContainer={getContainer}
+                targetOffset={60}
+                offsetTop={100}>
+                <Anchor.Link href="#动态展示" title="1. 动态展示">
+                    <Anchor.Link href="#组件" title="1.1 组件">
+                        <Anchor.Link href="#头像" title="1.1.1 Avatar" />
+                        <Anchor.Link href="#按钮" title="1.1.2 Button" />
+                        <Anchor.Link href="#图标" title="1.1.3 Icon" />
+                    </Anchor.Link>
+                    <Anchor.Link href="#物料" title="1.2 物料" />
+                    <Anchor.Link href="#主题商店" title="1.3 主题商店" />
                 </Anchor.Link>
-                <Anchor.Link href="#物料" title="1.2 物料" />
-                <Anchor.Link href="#主题商店" title="1.3 主题商店" />
-            </Anchor.Link>
-            <Anchor.Link href="#设计语言" title="2. 设计语言" />
-        </Anchor>
+                <Anchor.Link href="#设计语言" title="2. 设计语言" />
+            </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 显示工具提示
@@ -272,7 +273,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -288,8 +289,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#主题商店" title="主题商店" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 工具提示位置
@@ -303,7 +304,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 () => {
     const getContainer = () => {
         return document.querySelector('window');
-    }
+    };
     return (
         <div>
             <Anchor
@@ -320,8 +321,8 @@ import { Anchor } from '@douyinfe/semi-ui';
                 <Anchor.Link href="#主题商店" title="主题商店" />
             </Anchor>
         </div>
-    )
-}
+    );
+};
 ```
 
 ## API 参考
@@ -367,7 +368,10 @@ import { Anchor } from '@douyinfe/semi-ui';
     - 不可以，说明 href 有问题，检查文档中是否存在该 id；
     - 可以，可能是滚动容器设置不正确，确保文档内容被包裹在滚动容器内。滚动容器默认为 window，如果你的容器是 .my-container 的 div，则应该将滚动容器设置为该 div。
     
-    ```jsx
+    ```text
+    import React from 'react';
+    import { Anchor } from '@douyinfe/semi-ui';
+
     function() {
         // 此容器不是 Anchor 组件的容器，是文档内容的容器，因为要根据文档容器去计算当前是哪个 id 在容器上方
         const getContainer = () => {

content/navigation/breadcrumb/index-en-US.md

@@ -28,7 +28,7 @@ import { Breadcrumb } from '@douyinfe/semi-ui';
         <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
         <Breadcrumb.Item>Default</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 ### With Icons
@@ -44,7 +44,7 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
         <Breadcrumb.Item icon={<IconArticle />}>Breadcrumb</Breadcrumb.Item>
         <Breadcrumb.Item>With Icon</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 ### Size
@@ -70,7 +70,7 @@ import { IconHome } from '@douyinfe/semi-icons';
             <Breadcrumb.Item>Loose</Breadcrumb.Item>
         </Breadcrumb>
     </div>
-)
+);
 ```
 
 ### Custom Separator
@@ -79,7 +79,7 @@ Default separator is `/`.
 
 ```jsx live=true
 import React from 'react';
-import { Breadcrumb } from '@douyinfe/semi-ui';
+import { Breadcrumb, Tag } from '@douyinfe/semi-ui';
 import { IconArrowRight } from '@douyinfe/semi-icons';
 
 () => (
@@ -95,7 +95,7 @@ import { IconArrowRight } from '@douyinfe/semi-icons';
             <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
             <Breadcrumb.Item>Default</Breadcrumb.Item>
         </Breadcrumb>
-        <Tag>v>=1.16.0</Tag>
+        <Tag>{`v>=1.16.0`}</Tag>
         <br/>
         <Breadcrumb size={'small'} >
             <Breadcrumb.Item separator=":">Semi-ui</Breadcrumb.Item>
@@ -103,7 +103,7 @@ import { IconArrowRight } from '@douyinfe/semi-icons';
             <Breadcrumb.Item>Default</Breadcrumb.Item>
         </Breadcrumb>
     </div>
-)
+);
 ```
 
 ### Truncated Logic
@@ -147,8 +147,8 @@ import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
                 routes={routes}
             />
         </>
-    )
-}
+    );
+};
 ```
 
 When the path exceeds 4 levels, the second level to the penultimate one will be replaced by ellipsis. You can click the ellipsis to reveal all levels.
@@ -168,7 +168,7 @@ import { Breadcrumb } from '@douyinfe/semi-ui';
         <Breadcrumb.Item>Penultimate</Breadcrumb.Item>
         <Breadcrumb.Item>Detail</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 ### Custom Ellipsis
@@ -189,7 +189,7 @@ import { Breadcrumb } from '@douyinfe/semi-ui';
         <Breadcrumb.Item>Penultimate</Breadcrumb.Item>
         <Breadcrumb.Item>Detail</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 If you want to customize other forms of rendering for the ellipsis area, you can use the `renderMore()` method.
@@ -217,7 +217,7 @@ function Demo() {
                     ))
                 }
             </>
-        )
+        );
         return (
             <Popover
                 content={content}
@@ -290,7 +290,7 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
             routes={['Index', 'This is a very long level', 'Detail']}
         />
     </div>
-)
+);
 ```
 
 ## API reference

content/navigation/breadcrumb/index.md

@@ -28,7 +28,7 @@ import { Breadcrumb } from '@douyinfe/semi-ui';
         <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
         <Breadcrumb.Item>Default</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 ### 带图标的
@@ -46,7 +46,7 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
         <Breadcrumb.Item icon={<IconArticle size="small" />}>Breadcrumb</Breadcrumb.Item>
         <Breadcrumb.Item>With Icon</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 ### 尺寸
@@ -72,7 +72,7 @@ import { IconHome } from '@douyinfe/semi-icons';
             <Breadcrumb.Item>Loose</Breadcrumb.Item>
         </Breadcrumb>
     </div>
-)
+);
 ```
 
 ### 自定义的分隔符
@@ -81,7 +81,7 @@ import { IconHome } from '@douyinfe/semi-icons';
 
 ```jsx live=true
 import React from 'react';
-import { Breadcrumb } from '@douyinfe/semi-ui';
+import { Breadcrumb, Tag } from '@douyinfe/semi-ui';
 import { IconArrowRight } from '@douyinfe/semi-icons';
 
 () => (
@@ -98,7 +98,7 @@ import { IconArrowRight } from '@douyinfe/semi-icons';
             <Breadcrumb.Item>Default</Breadcrumb.Item>
         </Breadcrumb>
         <br/>
-        <Tag>v>=1.16.0</Tag>
+        <Tag>{`v>=1.16.0`}</Tag>
         <br/>
         <Breadcrumb size={'small'} >
             <Breadcrumb.Item separator=":">Semi-ui</Breadcrumb.Item>
@@ -106,7 +106,7 @@ import { IconArrowRight } from '@douyinfe/semi-icons';
             <Breadcrumb.Item>Default</Breadcrumb.Item>
         </Breadcrumb>
     </div>
-)
+);
 ```
 
 ### 截断逻辑
@@ -151,8 +151,8 @@ import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
                 routes={routes}
             />
         </>
-    )
-}
+    );
+};
 ```
 
 当路径层级超过 4 个级别，则：第二层至倒数第三层省略，点击省略号展开显示全部级别；如果过长则自动换行。
@@ -172,7 +172,7 @@ import { Breadcrumb } from '@douyinfe/semi-ui';
         <Breadcrumb.Item>上一层</Breadcrumb.Item>
         <Breadcrumb.Item>详情页</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 ### 自定义省略号区域
@@ -193,7 +193,7 @@ import { Breadcrumb } from '@douyinfe/semi-ui';
         <Breadcrumb.Item>上一层</Breadcrumb.Item>
         <Breadcrumb.Item>详情页</Breadcrumb.Item>
     </Breadcrumb>
-)
+);
 ```
 
 如果想要为省略号区域自定义其他形式的渲染，则可以使用 `renderMore()` 方法。
@@ -221,7 +221,7 @@ function Demo() {
                     ))
                 }
             </>
-        )
+        );
         return (
             <Popover
                 content={content}
@@ -293,7 +293,7 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
             routes={['首页', '当这个页面标题很长时需要省略', '详情页']}
         />
     </div>
-)
+);
 ```
 
 ## API 参考

content/navigation/navigation/index-en-US.md

@@ -456,8 +456,8 @@ class NavApp extends React.Component {
     render() {
         return (
             <>
-            {this.renderHorizontal()}
-            {this.renderVertical()}
+                {this.renderHorizontal()}
+                {this.renderVertical()}
             </>
         );
     }
@@ -648,7 +648,7 @@ function NavApp (props = {}) {
 
     const onCollapseChange = isCollapsed => {
         setIsCollapsed(isCollapsed);
-    }
+    };
 
     const items = useMemo(() => [
         { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
@@ -685,7 +685,7 @@ function NavApp (props = {}) {
             onOpenChange={onOpenChange}
             onSelect={onSelect}
         />
-    )
+    );
 }
 ```
 

content/navigation/navigation/index.md

@@ -457,8 +457,8 @@ class NavApp extends React.Component {
     render() {
         return (
             <>
-            {this.renderHorizontal()}
-            {this.renderVertical()}
+                {this.renderHorizontal()}
+                {this.renderVertical()}
             </>
         );
     }
@@ -649,7 +649,7 @@ function NavApp (props = {}) {
 
     const onCollapseChange = isCollapsed => {
         setIsCollapsed(isCollapsed);
-    }
+    };
 
     const items = useMemo(() => [
         { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
@@ -686,7 +686,7 @@ function NavApp (props = {}) {
             onOpenChange={onOpenChange}
             onSelect={onSelect}
         />
-    )
+    );
 }
 ```
 

content/navigation/pagination/index-en-US.md

@@ -31,7 +31,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={200} style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={80} pageSize={30} style={{ marginBottom: 12 }}></Pagination>
     </div>
-)
+);
 ```
 
 ### Show total page number
@@ -47,7 +47,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={80} showTotal style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={200} showTotal style={{ marginBottom: 12 }}></Pagination>
     </div>
-)
+);
 ```
 
 ### Specify current page number
@@ -62,7 +62,7 @@ import { Pagination } from '@douyinfe/semi-ui';
     <div>
         <Pagination total={80} showTotal defaultCurrentPage={3}></Pagination>
     </div>
-)
+);
 ```
 
 ### Capacity switching per page
@@ -80,7 +80,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <br/>
         <Pagination total={300} showSizeChanger></Pagination>
     </div>
-)
+);
 ```
 
 ### Jump to a page quickly
@@ -99,7 +99,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={80} showQuickJumper style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={300} showQuickJumper></Pagination>
     </div>
-)
+);
 ```
 
 
@@ -123,7 +123,7 @@ import { Pagination } from '@douyinfe/semi-ui';
             onPageChange={onPageChange}>
         </Pagination>
     );
-}
+};
 ```
 
 ### Preset capacity per page
@@ -149,7 +149,7 @@ import { Pagination } from '@douyinfe/semi-ui';
             pageSizeOpts={[10, 20, 50, 200]}>
         </Pagination>
     </div>
-)
+);
 ```
 
 ### Mini version
@@ -162,7 +162,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 
 () => (
     <Pagination total={90} size="small"></Pagination>
-)
+);
 ```
 
 Turn on hoverShowPageSelect to quickly switch hover page numbers (provided after v1.27.0)
@@ -173,7 +173,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 
 () => (
     <Pagination total={90} size="small" hoverShowPageSelect></Pagination>
-)
+);
 ```
 
 ## API reference

content/navigation/pagination/index.md

@@ -30,7 +30,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={200} style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={80} pageSize={30} style={{ marginBottom: 12 }}></Pagination>
     </div>
-)
+);
 ```
 
 ### 总页数显示
@@ -46,7 +46,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={80} showTotal style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={200} showTotal style={{ marginBottom: 12 }}></Pagination>
     </div>
-)
+);
 ```
 
 ### 指定当前页码
@@ -61,7 +61,7 @@ import { Pagination } from '@douyinfe/semi-ui';
     <div>
         <Pagination total={80} showTotal defaultCurrentPage={3}></Pagination>
     </div>
-)
+);
 ```
 
 ### 每页容量切换
@@ -77,7 +77,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={80} showSizeChanger style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={300} showSizeChanger></Pagination>
     </div>
-)
+);
 ```
 
 ### 快速跳转至某页
@@ -95,7 +95,7 @@ import { Pagination } from '@douyinfe/semi-ui';
         <Pagination total={80} showQuickJumper style={{ marginBottom: 12 }}></Pagination>
         <Pagination total={300} showQuickJumper></Pagination>
     </div>
-)
+);
 ```
 ### 页码受控
 
@@ -117,7 +117,7 @@ import { Pagination } from '@douyinfe/semi-ui';
             onPageChange={onPageChange}>
         </Pagination>
     );
-}
+};
 ```
 
 ### 预设每页容量可选值
@@ -142,7 +142,7 @@ import { Pagination } from '@douyinfe/semi-ui';
             pageSizeOpts={[10, 20, 50, 200]}>
         </Pagination>
     </div>
-)
+);
 ```
 
 ### 迷你版本
@@ -155,7 +155,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 
 () => (
     <Pagination total={90} size="small"></Pagination>
-)
+);
 ```
 
 开启 hoverShowPageSelect，可以 hover 页码快速切换（v1.27.0后提供）
@@ -166,7 +166,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 
 () => (
     <Pagination total={90} size="small" hoverShowPageSelect></Pagination>
-)
+);
 
 ```
 ## API 参考

content/navigation/steps/index-en-US.md

@@ -19,7 +19,7 @@ When the task is complex or has a sequential relationship, it is broken down int
 
 ```jsx
 import { Steps } from '@douyinfe/semi-ui';
-const Step = Steps. Step.;
+const Step = Steps.Step;
 ```
 
 ### Default step bar(Deprecated)
@@ -48,12 +48,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps type="basic" current={1}>
-      <Steps.Step title="Finished" description="This is a description" />
-      <Steps.Step title="In Progress" description="This is a description" />
-      <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps type="basic" current={1}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 
 ```
 
@@ -73,15 +73,15 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <Steps type="nav" current={1} style={{ margin: 'auto' }}>
-          <Steps.Step title="Register an account" />
-          <Steps.Step title="There is a lot of text in this project" />
-          <Steps.Step title="Product Usage" />
-          <Steps.Step title="Looking forward to trying out features" />
-      </Steps>
-  </div>
-)
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Steps type="nav" current={1} style={{ margin: 'auto' }}>
+            <Steps.Step title="Register an account" />
+            <Steps.Step title="There is a lot of text in this project" />
+            <Steps.Step title="Product Usage" />
+            <Steps.Step title="Looking forward to trying out features" />
+        </Steps>
+    </div>
+);
 ```
 
 ### Mini size step bar
@@ -98,7 +98,7 @@ import { Steps } from '@douyinfe/semi-ui';
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
     </Steps>
-)
+);
 ```
 
 ```jsx live=true dir="column"
@@ -106,15 +106,15 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <div style={{ display: 'flex', justifyContent: 'center' }}>
-    <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }}>
-        <Steps.Step title="Register an account" />
-        <Steps.Step title="There is a lot of text in this project" />
-        <Steps.Step title="Product Usage" />
-        <Steps.Step title="Looking forward to trying out features" />
-    </Steps>
-  </div>  
-)
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }}>
+            <Steps.Step title="Register an account" />
+            <Steps.Step title="There is a lot of text in this project" />
+            <Steps.Step title="Product Usage" />
+            <Steps.Step title="Looking forward to trying out features" />
+        </Steps>
+    </div>  
+);
 ```
 
 ### Processing progress
@@ -168,7 +168,7 @@ class App extends React.Component {
                         <Step key={item.title} title={item.title} />
                     ))}
                 </Steps>
-                <div class Name="steps-content" style={{ marginTop: 4, marginBottom: 4 }}>
+                <div className Name="steps-content" style={{ marginTop: 4, marginBottom: 4 }}>
                     {steps[current].content}
                 </div>
                 <div className="steps-action">
@@ -203,12 +203,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps direction="vertical" current={1} style={{ width: 300 }}>
-      <Steps.Step title="Finished" description="This is a description" />
-      <Steps.Step title="In Progress" description="This is a description" />
-      <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps direction="vertical" current={1} style={{ width: 300 }}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ```jsx live=true dir="column"
@@ -216,12 +216,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps direction="vertical" type="basic" current={1}>
-      <Steps.Step title="Finished" description="This is a description" />
-      <Steps.Step title="In Progress" description="This is a description" />
-      <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps direction="vertical" type="basic" current={1}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ### Specify step status
@@ -233,12 +233,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps type="basic" current={1} status="error">
-      <Steps.Step title="Finished" description="This is a description" />
-      <Steps.Step title="In Process" description="This is a description" />
-      <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps type="basic" current={1} status="error">
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Process" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ### Custom icons
@@ -251,13 +251,13 @@ import { Steps } from '@douyinfe/semi-ui';
 import { IconHome, IconLock, IconClear, IconTickCircle } from '@douyinfe/semi-icons';
 
 () => (
-  <Steps type="basic">
-    <Steps.Step status="finish" title="Login" icon={<IconHome />} />
-    <Steps.Step status="finish" title="Verification" icon={<IconLock />} />
-    <Steps.Step status="process" title="Pay" icon={<IconClear />} />
-    <Steps.Step status="wait" title="Done" icon={<IconTickCircle />} />
-  </Steps>
-)
+    <Steps type="basic">
+        <Steps.Step status="finish" title="Login" icon={<IconHome />} />
+        <Steps.Step status="finish" title="Verification" icon={<IconLock />} />
+        <Steps.Step status="process" title="Pay" icon={<IconClear />} />
+        <Steps.Step status="wait" title="Done" icon={<IconTickCircle />} />
+    </Steps>
+);
 ```
 
 ### onChange CallBack
@@ -269,45 +269,45 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      current: 1,
-    };
-  }
-
-  onChange(index) {
-    this.setState({ current: index });
-  }
-
-  render() {
-    const { current } = this.state;
-    const { Step } = Steps;
-    const steps = [
-      {
-        title: 'First',
-        content: 'First-content',
-      },
-      {
-        title: 'Second',
-        content: 'Second-content',
-      },
-      {
-        title: 'Last',
-        content: 'Last-content',
-      },
-    ];
-
-    return (
-      <div>
-        <Steps type="basic" current={current} onChange={index => this.onChange(index)}>
-          {steps.map(item => (
-            <Step key={item.title} title={item.title} />
-          ))}
-        </Steps>
-      </div>
-    );
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            current: 1,
+        };
+    }
+
+    onChange(index) {
+        this.setState({ current: index });
+    }
+
+    render() {
+        const { current } = this.state;
+        const { Step } = Steps;
+        const steps = [
+            {
+                title: 'First',
+                content: 'First-content',
+            },
+            {
+                title: 'Second',
+                content: 'Second-content',
+            },
+            {
+                title: 'Last',
+                content: 'Last-content',
+            },
+        ];
+
+        return (
+            <div>
+                <Steps type="basic" current={current} onChange={index => this.onChange(index)}>
+                    {steps.map(item => (
+                        <Step key={item.title} title={item.title} />
+                    ))}
+                </Steps>
+            </div>
+        );
+    }
 }
 ```
 

content/navigation/steps/index.md

@@ -32,11 +32,11 @@ import { Steps } from '@douyinfe/semi-ui';
 
 () => (
     <Steps current={1}>
-      <Steps.Step title="Finished" description="This is a description" />
-      <Steps.Step title="In Progress" description="This is a description" />
-      <Steps.Step title="Waiting" description="This is a description" />
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
     </Steps>
-)
+);
 ```
 
 ### 简单步骤条（新版）
@@ -48,12 +48,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps type="basic" current={1}>
-    <Steps.Step title="Finished" description="This is a description" />
-    <Steps.Step title="In Progress" description="This is a description" />
-    <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps type="basic" current={1}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ### 导航步骤条
@@ -72,15 +72,15 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <div style={{display:'flex',justifyContent:'center'}}>
-    <Steps type="nav" current={1} style={{margin:'auto'}}>
-      <Steps.Step title="注册账号" />
-      <Steps.Step title="这个项目的文字比较多多多多" />
-      <Steps.Step title="产品用途" />
-      <Steps.Step title="期待尝试功能" />
-    </Steps>
-  </div>
-)
+    <div style={{display:'flex',justifyContent:'center'}}>
+        <Steps type="nav" current={1} style={{margin:'auto'}}>
+            <Steps.Step title="注册账号" />
+            <Steps.Step title="这个项目的文字比较多多多多" />
+            <Steps.Step title="产品用途" />
+            <Steps.Step title="期待尝试功能" />
+        </Steps>
+    </div>
+);
 ```
 
 
@@ -93,12 +93,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps type="basic" size="small" current={1}>
-    <Steps.Step title="Finished" description="This is a description" />
-    <Steps.Step title="In Progress" description="This is a description" />
-    <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps type="basic" size="small" current={1}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ```jsx live=true dir="column"
@@ -106,15 +106,15 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <div style={{display:'flex',justifyContent:'center'}}>
-    <Steps type="nav" size="small" current={1} style={{margin:'auto'}}>
-      <Steps.Step title="注册账号" />
-      <Steps.Step title="这个项目的文字比较多多多多" />
-      <Steps.Step title="产品用途" />
-      <Steps.Step title="期待尝试功能" />
-    </Steps>
-  </div>
-)
+    <div style={{display:'flex',justifyContent:'center'}}>
+        <Steps type="nav" size="small" current={1} style={{margin:'auto'}}>
+            <Steps.Step title="注册账号" />
+            <Steps.Step title="这个项目的文字比较多多多多" />
+            <Steps.Step title="产品用途" />
+            <Steps.Step title="期待尝试功能" />
+        </Steps>
+    </div>
+);
 
 ```
 
@@ -127,69 +127,69 @@ import React from 'react';
 import { Steps, Button } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      current: 0,
-    };
-  }
-
-  next() {
-    const current = this.state.current + 1;
-    this.setState({ current });
-  }
-
-  prev() {
-    const current = this.state.current - 1;
-    this.setState({ current });
-  }
-
-  render() {
-    const { current } = this.state;
-    const { Step } = Steps;
-    const steps = [
-      {
-        title: 'First',
-        content: 'First-content',
-      },
-      {
-        title: 'Second',
-        content: 'Second-content',
-      },
-      {
-        title: 'Last',
-        content: 'Last-content',
-      },
-    ];
-
-    return (
-      <div>
-        <Steps type="basic" current={current}>
-          {steps.map(item => (
-            <Step key={item.title} title={item.title} />
-          ))}
-        </Steps>
-        <div className="steps-content" style={{marginTop: 4, marginBottom: 4}}>{steps[current].content}</div>
-        <div className="steps-action">
-          {current < steps.length - 1 && (
-            <Button type="primary" onClick={() => this.next()}>
-              Next
-            </Button>
-          )}
-          {current === steps.length - 1 && (
-            <Button type="primary" onClick={() => console.log('Processing complete!')}>
-              Done
-            </Button>
-          )}
-          {current > 0 && (
-            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
-              Previous
-            </Button>
-          )}
-        </div>
-      </div>
-    );
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            current: 0,
+        };
+    }
+
+    next() {
+        const current = this.state.current + 1;
+        this.setState({ current });
+    }
+
+    prev() {
+        const current = this.state.current - 1;
+        this.setState({ current });
+    }
+
+    render() {
+        const { current } = this.state;
+        const { Step } = Steps;
+        const steps = [
+            {
+                title: 'First',
+                content: 'First-content',
+            },
+            {
+                title: 'Second',
+                content: 'Second-content',
+            },
+            {
+                title: 'Last',
+                content: 'Last-content',
+            },
+        ];
+
+        return (
+            <div>
+                <Steps type="basic" current={current}>
+                    {steps.map(item => (
+                        <Step key={item.title} title={item.title} />
+                    ))}
+                </Steps>
+                <div className="steps-content" style={{marginTop: 4, marginBottom: 4}}>{steps[current].content}</div>
+                <div className="steps-action">
+                    {current < steps.length - 1 && (
+                        <Button type="primary" onClick={() => this.next()}>
+                            Next
+                        </Button>
+                    )}
+                    {current === steps.length - 1 && (
+                        <Button type="primary" onClick={() => console.log('Processing complete!')}>
+                            Done
+                        </Button>
+                    )}
+                    {current > 0 && (
+                        <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
+                            Previous
+                        </Button>
+                    )}
+                </div>
+            </div>
+        );
+    }
 }
 
 ```
@@ -203,12 +203,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps direction="vertical" current={1} style={{width: 300}}>
-    <Steps.Step title="Finished" description="This is a description" />
-    <Steps.Step title="In Progress" description="This is a description" />
-    <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps direction="vertical" current={1} style={{width: 300}}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ```jsx live=true dir="column"
@@ -216,12 +216,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps direction="vertical" type="basic" current={1}>
-    <Steps.Step title="Finished" description="This is a description" />
-    <Steps.Step title="In Progress" description="This is a description" />
-    <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps direction="vertical" type="basic" current={1}>
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Progress" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ### 指定步骤状态
@@ -233,12 +233,12 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-  <Steps type="basic" current={1} status="error">
-    <Steps.Step title="Finished" description="This is a description" />
-    <Steps.Step title="In Process" description="This is a description" />
-    <Steps.Step title="Waiting" description="This is a description" />
-  </Steps>
-)
+    <Steps type="basic" current={1} status="error">
+        <Steps.Step title="Finished" description="This is a description" />
+        <Steps.Step title="In Process" description="This is a description" />
+        <Steps.Step title="Waiting" description="This is a description" />
+    </Steps>
+);
 ```
 
 ### 自定义图标/状态
@@ -252,14 +252,14 @@ import { Steps } from '@douyinfe/semi-ui';
 import { IconHome, IconLock } from '@douyinfe/semi-icons';
 
 () => (
-  <Steps type="basic">
-    <Steps.Step status="finish" title="已完成" />
-    <Steps.Step status="error" title="错误" />
-    <Steps.Step status="warning" title="警告" />
-    <Steps.Step status="process" title="正在进行" icon={<IconHome size="extra-large" />} />
-    <Steps.Step status="wait" title="等待" icon={<IconLock size="extra-large" />} />
-  </Steps>
-)
+    <Steps type="basic">
+        <Steps.Step status="finish" title="已完成" />
+        <Steps.Step status="error" title="错误" />
+        <Steps.Step status="warning" title="警告" />
+        <Steps.Step status="process" title="正在进行" icon={<IconHome size="extra-large" />} />
+        <Steps.Step status="wait" title="等待" icon={<IconLock size="extra-large" />} />
+    </Steps>
+);
 ```
 
 ### onChange 回调
@@ -271,45 +271,45 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      current: 1,
-    };
-  }
-
-  onChange(index) {
-    this.setState({ current: index });
-  }
-
-  render() {
-    const { current } = this.state;
-    const { Step } = Steps;
-    const steps = [
-      {
-        title: 'First',
-        content: 'First-content',
-      },
-      {
-        title: 'Second',
-        content: 'Second-content',
-      },
-      {
-        title: 'Last',
-        content: 'Last-content',
-      },
-    ];
-
-    return (
-      <div>
-        <Steps type="basic" current={current} onChange={index => this.onChange(index)}>
-          {steps.map(item => (
-            <Step key={item.title} title={item.title} />
-          ))}
-        </Steps>
-      </div>
-    );
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            current: 1,
+        };
+    }
+
+    onChange(index) {
+        this.setState({ current: index });
+    }
+
+    render() {
+        const { current } = this.state;
+        const { Step } = Steps;
+        const steps = [
+            {
+                title: 'First',
+                content: 'First-content',
+            },
+            {
+                title: 'Second',
+                content: 'Second-content',
+            },
+            {
+                title: 'Last',
+                content: 'Last-content',
+            },
+        ];
+
+        return (
+            <div>
+                <Steps type="basic" current={current} onChange={index => this.onChange(index)}>
+                    {steps.map(item => (
+                        <Step key={item.title} title={item.title} />
+                    ))}
+                </Steps>
+            </div>
+        );
+    }
 }
 ```
 

content/navigation/tabs/index-en-US.md

@@ -84,8 +84,8 @@ class App extends React.Component {
                             not meet my needs?
                         </p>
                         <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}>
-                            Give feedbacks in the upper right corner, submit an Issue, describe your needs as well as
-                            the business scenario. We'll handle these issues with priorities.
+                            {`Give feedbacks in the upper right corner, submit an Issue, describe your needs as well as
+                            the business scenario. We'll handle these issues with priorities.`}
                         </p>
                         <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}>
                             Q: Have questions when using components?
@@ -140,6 +140,7 @@ class TabDemo extends React.Component {
     }
 
     render() {
+        // eslint-disable-next-line react/jsx-key
         const contentList = [<div>Document</div>, <div>Quick Start</div>, <div>Help</div>];
         const tabList = [
             { tab: 'Document', itemKey: '1' },
@@ -305,8 +306,8 @@ class App extends React.Component {
     render() {
         return (
             <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible>
-                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
-                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`}>
+                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
+                    <TabPane tab={`Tab-${item}`} itemKey={`Tab-${item}`} key={item}>
                         Content of card tab {i}
                     </TabPane>
                 ))}
@@ -474,7 +475,7 @@ class App extends React.Component {
                 }
             >
                 {panes.map(pane => (
-                    <TabPane tab={pane.title} itemKey={pane.itemKey}>
+                    <TabPane tab={pane.title} itemKey={pane.itemKey} key={pane.itemKey}>
                         {pane.content}
                     </TabPane>
                 ))}

content/navigation/tabs/index.md

@@ -92,7 +92,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
             </TabPane>
         </Tabs>
     </div>
-)
+);
 
 ```
 
@@ -112,7 +112,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
             帮助
         </TabPane>
     </Tabs>
-)
+);
 ```
 
 ```jsx live=true
@@ -131,6 +131,7 @@ class TabDemo extends React.Component {
     }
 
     render() {
+        // eslint-disable-next-line react/jsx-key
         const contentList = [<div>文档</div>, <div>快速起步</div>, <div>帮助</div>];
         const tabList = [
             { tab: '文档', itemKey: '1' },
@@ -162,42 +163,42 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
 import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
-  <Tabs>
-      <TabPane
-          tab={
-              <span>
-                  <IconFile />
-                  文档
-              </span>
-          }
-          itemKey="1"
-      >
-          文档
-      </TabPane>
-      <TabPane
-          tab={
-              <span>
-                  <IconGlobe />
-                  快速起步
-              </span>
-          }
-          itemKey="2"
-      >
-          快速起步
-      </TabPane>
-      <TabPane
-          tab={
-              <span>
-                  <IconHelpCircle />
-                  帮助
-              </span>
-          }
-          itemKey="3"
-      >
-          帮助
-      </TabPane>
-  </Tabs>
-)
+    <Tabs>
+        <TabPane
+            tab={
+                <span>
+                    <IconFile />
+                    文档
+                </span>
+            }
+            itemKey="1"
+        >
+            文档
+        </TabPane>
+        <TabPane
+            tab={
+                <span>
+                    <IconGlobe />
+                    快速起步
+                </span>
+            }
+            itemKey="2"
+        >
+            快速起步
+        </TabPane>
+        <TabPane
+            tab={
+                <span>
+                    <IconHelpCircle />
+                    帮助
+                </span>
+            }
+            itemKey="3"
+        >
+            帮助
+        </TabPane>
+    </Tabs>
+);
 ```
 
 ### 垂直的标签栏
@@ -406,7 +407,7 @@ import { Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             帮助
         </TabPane>
     </Tabs>
-)
+);
 ```
 
 ### 标签栏二次封装
@@ -439,7 +440,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
             帮助
         </TabPane>
     </Tabs>
-)
+);
 ```
 
 ### 动态更新

content/navigation/tree/index.md

@@ -55,20 +55,20 @@ import { Tree } from '@douyinfe/semi-ui';
             value: 'North America',
             key: '1',
         }
-    ]
+    ];
     const style = {
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeData}
             defaultExpandAll
             style={style}
         />
-    )
-}
+    );
+};
 ```
 
 ### 多选
@@ -144,7 +144,7 @@ import { Tree } from '@douyinfe/semi-ui';
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeData}
@@ -152,8 +152,8 @@ import { Tree } from '@douyinfe/semi-ui';
             defaultExpandAll
             style={style}
         />
-    )
-}
+    );
+};
 ```
 
 ### 可搜索的
@@ -166,10 +166,10 @@ import { Tree, Switch } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             showFilteredOnly: false,
-        }
+        };
         this.onChange = this.onChange.bind(this);
     }
     onChange(showFilteredOnly) {
@@ -230,12 +230,12 @@ class Demo extends React.Component {
                     }
                 ]
             }
-        ]
+        ];
         const style = {
             width: 260,
             height: 420,
             border: '1px solid var(--semi-color-border)'
-        }
+        };
         const { showFilteredOnly } = this.state;
         return (
             <>
@@ -254,7 +254,7 @@ class Demo extends React.Component {
                     style={style}
                 />
             </>
-        )
+        );
     }
 }
 ```
@@ -267,29 +267,29 @@ import React from 'react';
 import { Tree } from '@douyinfe/semi-ui';
 
 () => {
-  const json = {
-    "Node1": {
-      "Child Node1": '0-0-1',
-      "Child Node2": '0-0-2',
-    },
-    "Node2": "0-1"
-  }
-  const style = {
-    width: 260,
-    height: 420,
-    border: '1px solid var(--semi-color-border)'
-  }
-  return (
-    <Tree
-      treeDataSimpleJson={json}
-      multiple
-      onChange={e => console.log('当前所有选中项: ', e)}
-      onSelect={e => console.log('当前选项: ', e)}
-      style={style}
-    />
-
-  )
-}
+    const json = {
+        "Node1": {
+            "Child Node1": '0-0-1',
+            "Child Node2": '0-0-2',
+        },
+        "Node2": "0-1"
+    };
+    const style = {
+        width: 260,
+        height: 420,
+        border: '1px solid var(--semi-color-border)'
+    };
+    return (
+        <Tree
+            treeDataSimpleJson={json}
+            multiple
+            onChange={e => console.log('当前所有选中项: ', e)}
+            onSelect={e => console.log('当前选项: ', e)}
+            style={style}
+        />
+
+    );
+};
 ```
 
 ### 行显示节点
@@ -355,7 +355,7 @@ import { Tree } from '@douyinfe/semi-ui';
                 }
             ]
         }
-    ]
+    ];
     return (
         <div>
             <Tree
@@ -371,8 +371,8 @@ import { Tree } from '@douyinfe/semi-ui';
                 blockNode={false}
             />
         </div>
-    )
-}
+    );
+};
 ```
 
 ### 自定义节点内容
@@ -397,18 +397,18 @@ import { Tree, ButtonGroup, Button } from '@douyinfe/semi-ui';
             <Button
                 onClick={e => {
                     Toast.info(opts);
-                    e.stopPropagation()
+                    e.stopPropagation();
                 }}
             >提示</Button>
             <Button>点击</Button>
         </ButtonGroup>
-    )
+    );
 
     const style = {
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center'
-    }
+    };
 
     const treeDataWithNode = [
         {
@@ -448,14 +448,14 @@ import { Tree, ButtonGroup, Button } from '@douyinfe/semi-ui';
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeDataWithNode}
             style={treeStyle}
         />
-    )
-}
+    );
+};
 ```
 
 过长省略。在**v>=1.6.0**的版本中，可以使用 `renderLabel` 来实现文本过长省略的效果。
@@ -465,59 +465,59 @@ import { Tree, Button, Typography } from '@douyinfe/semi-ui';
 import { IconMore } from '@douyinfe/semi-icons';
 
 () => {
-  const renderBtn = (content) => (
-    <Button
-      onClick={e => {
-        Toast.info({ content });
-        e.stopPropagation()
-      }}
-      icon={<IconMore />}
-      size="small"
-    />
-  )
-  const renderLabel = (label, item) => (
-    <div style={{ display: 'flex' }}>
-      <Typography.Text
-        ellipsis={{ showTooltip: true }}
-        style={{ width: 'calc(100% - 48px)' }}
-      >
-        {label}
-      </Typography.Text>
-      {renderBtn(item.key)}
-    </div>
-  );
-  const treeDataWithNode = [
-    {
-      label: '亚洲亚洲亚洲亚洲亚洲亚洲亚洲亚洲',
-      value: 'yazhou',
-      key: 'yazhou',
-      children: [
-        {
-          label: '中国中国中国中国中国中国中国中国',
-          value: 'zhongguo',
-          key: 'zhongguo'
-        },
+    const renderBtn = (content) => (
+        <Button
+            onClick={e => {
+                Toast.info({ content });
+                e.stopPropagation();
+            }}
+            icon={<IconMore />}
+            size="small"
+        />
+    );
+    const renderLabel = (label, item) => (
+        <div style={{ display: 'flex' }}>
+            <Typography.Text
+                ellipsis={{ showTooltip: true }}
+                style={{ width: 'calc(100% - 48px)' }}
+            >
+                {label}
+            </Typography.Text>
+            {renderBtn(item.key)}
+        </div>
+    );
+    const treeDataWithNode = [
         {
-          label: '日本日本日本日本日本日本日本日本',
-          value: 'riben',
-          key: 'riben',
-        },
-      ],
-    }
-  ];
-  const treeStyle = {
-    width: 260,
-    height: 420,
-    border: '1px solid var(--semi-color-border)'
-  }
-  return (
-    <Tree
-      treeData={treeDataWithNode}
-      renderLabel={renderLabel}
-      style={treeStyle}
-    />
-  )
-}
+            label: '亚洲亚洲亚洲亚洲亚洲亚洲亚洲亚洲',
+            value: 'yazhou',
+            key: 'yazhou',
+            children: [
+                {
+                    label: '中国中国中国中国中国中国中国中国',
+                    value: 'zhongguo',
+                    key: 'zhongguo'
+                },
+                {
+                    label: '日本日本日本日本日本日本日本日本',
+                    value: 'riben',
+                    key: 'riben',
+                },
+            ],
+        }
+    ];
+    const treeStyle = {
+        width: 260,
+        height: 420,
+        border: '1px solid var(--semi-color-border)'
+    };
+    return (
+        <Tree
+            treeData={treeDataWithNode}
+            renderLabel={renderLabel}
+            style={treeStyle}
+        />
+    );
+};
 ```
 
 
@@ -530,40 +530,40 @@ import { Tree } from '@douyinfe/semi-ui';
 import { IconMapPin } from '@douyinfe/semi-icons';
 
 () => {
-  const treeData = [
-    {
-      label: 'Asia',
-      value: 'Asia',
-      key: '0',
-      icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />),
-      children: [
-        {
-          label: 'China',
-          value: 'China',
-          key: '0-0',
-          icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />)
-        },
+    const treeData = [
         {
-          label: 'Japan',
-          value: 'Japan',
-          key: '0-1',
-          icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />)
-        },
-      ],
-    }
-  ]
-  const style = {
-    width: 260,
-    height: 420,
-    border: '1px solid var(--semi-color-border)'
-  }
-  return (
-    <Tree
-      treeData={treeData}
-      style={style}
-    />
-  )
-}
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />),
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />)
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />)
+                },
+            ],
+        }
+    ];
+    const style = {
+        width: 260,
+        height: 420,
+        border: '1px solid var(--semi-color-border)'
+    };
+    return (
+        <Tree
+            treeData={treeData}
+            style={style}
+        />
+    );
+};
 ```
 
 ### 目录树模式
@@ -629,20 +629,20 @@ import { Tree } from '@douyinfe/semi-ui';
                 }
             ]
         }
-    ]
+    ];
     const style = {
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeData}
             directory
             style={style}
         />
-    )
-}
+    );
+};
 ```
 
 ### 禁用
@@ -710,12 +710,12 @@ import { Tree } from '@douyinfe/semi-ui';
                 }
             ]
         }
-    ]
+    ];
     const style = {
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeData}
@@ -724,8 +724,8 @@ import { Tree } from '@douyinfe/semi-ui';
             disableStrictly
             style={style}
         />
-    )
-}
+    );
+};
 ```
 
 ### 默认展开
@@ -764,7 +764,7 @@ import { Tree, Button } from '@douyinfe/semi-ui';
     };
     const [tree, setTree] = useState(json);
     const handleClick = () => {
-        setTree(json2)
+        setTree(json2);
     };
     return (
         <>
@@ -791,7 +791,7 @@ import { Tree, Button } from '@douyinfe/semi-ui';
             </div>
         </>
     );
-}
+};
 
 ```
 
@@ -804,13 +804,13 @@ import { Tree } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             value: 'Shanghai'
         };
     }
     onChange(value) {
-        this.setState({value})
+        this.setState({value});
     }
     render() {
         const treeData = [
@@ -848,7 +848,7 @@ class Demo extends React.Component {
             width: 260,
             height: 420,
             border: '1px solid var(--semi-color-border)'
-        }
+        };
         return (
             <Tree
                 treeData={treeData}
@@ -856,7 +856,7 @@ class Demo extends React.Component {
                 onChange={value => this.onChange(value)}
                 style={style}
             />
-        )
+        );
     }
 }
 ```
@@ -915,7 +915,7 @@ class Demo extends React.Component {
             width: 260,
             height: 420,
             border: '1px solid var(--semi-color-border)'
-        }
+        };
         return (
             <>
                 <div>
@@ -930,7 +930,7 @@ class Demo extends React.Component {
                     style={style}
                 />
             </>
-        )
+        );
     }
 }
 ```
@@ -955,7 +955,7 @@ class Demo extends React.Component {
         this.state = {
             gData: [],
             total: 0,
-        }
+        };
         this.onGen = this.onGen.bind(this);
     }
 
@@ -1006,7 +1006,7 @@ class Demo extends React.Component {
         const style = {
             width: 260,
             border: '1px solid var(--semi-color-border)'
-        }
+        };
         return (
             <div style={{ padding: '0 20px' }}>
                 <Button onClick={this.onGen}>生成数据: </Button>
@@ -1040,14 +1040,14 @@ import { Tree, Button } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {
-        super()
+        super();
         this.state = {
             treeData: [{
                 key: '0',
                 label: 'item-0',
                 value: '0'
             }],
-        }
+        };
         this.add = this.add.bind(this);
     }
     add() {
@@ -1059,7 +1059,7 @@ class Demo extends React.Component {
                     key: `${i}-${ci}`,
                     label: `Leaf-${i}-${ci}`,
                     value: `${i}-${ci}`
-                }
+                };
                 return child;
             });
             const item = {
@@ -1069,7 +1069,7 @@ class Demo extends React.Component {
                 children
             };
             return item;
-        })
+        });
         this.setState({ treeData });
     }
     render() {
@@ -1078,7 +1078,7 @@ class Demo extends React.Component {
             width: 260,
             height: 420,
             border: '1px solid var(--semi-color-border)'
-        }
+        };
         return (
             <div style={style}>
                 <Tree
@@ -1089,7 +1089,7 @@ class Demo extends React.Component {
                     动态改变数据
                 </Button>
             </div>
-        )
+        );
     }
 }
 ```
@@ -1250,43 +1250,43 @@ import { Tree } from '@douyinfe/semi-ui';
             data.forEach((item, ind, arr) => {
                 if (item.key === key) return callback(item, ind, arr);
                 if (item.children) return loop(item.children, key, callback);
-            })
-        }
+            });
+        };
         let dragObj;
         loop(data, dragKey, (item, ind, arr) => {
             arr.splice(ind, 1);
             dragObj = item;
-        })
+        });
 
         if (!dropToGap) {
             // inset into the dropPosition
             loop(data, dropKey, (item, ind, arr) => {
                 item.children = item.children || [];
-                item.children.push(dragObj)
-            })
+                item.children.push(dragObj);
+            });
         } else if (dropPosition === 1 && node.children && node.expanded) {
             // has children && expanded and drop into the node bottom gap
             // insert to the top 
             loop(data, dropKey, item => {
                 item.children = item.children || [];
-                item.children.unshift(dragObj)
-            })
+                item.children.unshift(dragObj);
+            });
         } else {
             let dropNodeInd;
             let dropNodePosArr;
             loop(data, dropKey, (item, ind, arr) => {
                 dropNodePosArr = arr;
                 dropNodeInd = ind;
-            })
+            });
             if (dropPosition === -1) {
                 // insert to top
-                dropNodePosArr.splice(dropNodeInd, 0, dragObj)
+                dropNodePosArr.splice(dropNodeInd, 0, dragObj);
             } else {
                 // insert to bottom
-                dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj)
+                dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj);
             }
         }
-        setTreeData(data)
+        setTreeData(data);
     }
 
     return <Tree
@@ -1343,8 +1343,8 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
                 </div> : null}
                 <span>{label}</span>
             </li>
-        )
-    }
+        );
+    };
 
     const treeData = [
         {
@@ -1400,13 +1400,13 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
                 }
             ]
         }
-    ]
+    ];
 
     const treeStyle = {
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeData}
@@ -1415,8 +1415,8 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
             leafOnly
             style={treeStyle}
         />
-    )
-}
+    );
+};
 ```
 
 第二个是针对 “希望只有叶子节点可以单选，父节点只起到分组作用” 的场景。  
@@ -1445,7 +1445,7 @@ import { Tree } from '@douyinfe/semi-ui';
                 {isLeaf ? null : expandIcon}
                 <span>{label}</span>
             </li>
-        )
+        );
     };
 
     const treeData = [
@@ -1508,7 +1508,7 @@ import { Tree } from '@douyinfe/semi-ui';
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
     return (
         <Tree
             treeData={treeData}
@@ -1517,7 +1517,7 @@ import { Tree } from '@douyinfe/semi-ui';
             onChange={(...args) => console.log('change', ...args)}
         />
     );
-}
+};
 ```
 
 第三个是针对 “单选选中父节点同时也高亮子节点” 的场景。
@@ -1576,7 +1576,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 }
             ]
         }
-    ]
+    ];
     const findDescendantKeys = (node) => {
         let res = [node.key];
         const findChild = item => {
@@ -1592,12 +1592,12 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
         };
         findChild(node);
         return res;
-    }
+    };
     const handleSelect = (key, bool, node) => {
         setSelected(new Set([key]));
         const descendantKeys = findDescendantKeys(node);
         setSelectedThroughParent(new Set(descendantKeys));
-    }
+    };
     const renderLabel = ({
         className,
         data,
@@ -1611,7 +1611,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 ? 'rgba(var(--semi-blue-0), 1)'
                 : selectedThroughParent.has(key)
                     ? 'rgba(var(--semi-blue-0), .5)' : 'transparent'
-        }
+        };
         return (
             <li
                 className={className}
@@ -1623,14 +1623,14 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 {icon}
                 <span>{label}</span>
             </li>
-        )
-    }
+        );
+    };
 
     const treeStyle = {
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
 
     return (
         <Tree
@@ -1640,8 +1640,8 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
             style={treeStyle}
             defaultExpandAll
         />
-    )
-}
+    );
+};
 ```
 
 ### 可拖拽的高级定制
@@ -1703,7 +1703,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 }
             ]
         }
-    ]
+    ];
     const [treeData, setTreeData] = useState(defaultTreeData);
 
     const onDrop = (info) => {
@@ -1718,40 +1718,40 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
             data.forEach((item, ind, arr) => {
                 if (item.key === key) return callback(item, ind, arr);
                 if (item.children) return loop(item.children, key, callback);
-            })
-        }
+            });
+        };
 
         let dragObj;
         loop(data, dragKey, (item, ind, arr) => {
             arr.splice(ind, 1);
             dragObj = item;
-        })
+        });
 
         if (!dropToGap) {
             loop(data, dropKey, (item, ind, arr) => {
                 item.children = item.children || [];
-                item.children.push(dragObj)
-            })
+                item.children.push(dragObj);
+            });
         } else if (dropPosition === 1 && node.children && node.expanded) {
             loop(data, dropKey, item => {
                 item.children = item.children || [];
-                item.children.unshift(dragObj)
-            })
+                item.children.unshift(dragObj);
+            });
         } else {
             let dropNodeInd;
             let dropNodePosArr;
             loop(data, dropKey, (item, ind, arr) => {
                 dropNodePosArr = arr;
                 dropNodeInd = ind;
-            })
+            });
             if (dropPosition === -1) {
-                dropNodePosArr.splice(dropNodeInd, 0, dragObj)
+                dropNodePosArr.splice(dropNodeInd, 0, dragObj);
             } else {
-                dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj)
+                dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj);
             }
         }
-        setTreeData(data)
-    }
+        setTreeData(data);
+    };
 
     const findDescendantKeys = (node) => {
         const res = [node.key];
@@ -1768,13 +1768,13 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
         };
         findChild(node);
         return res;
-    }
+    };
 
     const handleSelect = (key, bool, node) => {
         setSelected(new Set([key]));
         const descendantKeys = findDescendantKeys(node);
         setSelectedThroughParent(new Set(descendantKeys));
-    }
+    };
 
     const renderLabel = ({
         className,
@@ -1789,7 +1789,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 ? 'rgba(var(--semi-blue-0), 1)'
                 : selectedThroughParent.has(key)
                     ? 'rgba(var(--semi-blue-0), .5)' : 'transparent'
-        }
+        };
         return (
             <li
                 className={className}
@@ -1801,14 +1801,14 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 {icon}
                 <span>{label}</span>
             </li>
-        )
-    }
+        );
+    };
 
     const treeStyle = {
         width: 260,
         height: 420,
         border: '1px solid var(--semi-color-border)'
-    }
+    };
 
 
     return <Tree

content/other/configprovider/index-en-US.md

@@ -28,10 +28,10 @@ function Demo(props = {}) {
     const defaultTimestamp = 1581599305265;
     const gmtList = useMemo(() => {
         const list = [];
-        for(let hourOffset = -11; hourOffset <= 14 ; hourOffset++) {
+        for (let hourOffset = -11; hourOffset <= 14 ; hourOffset++) {
             const prefix = hourOffset >= 0 ? '+' : '-';
             const hOffset = Math.abs(parseInt(hourOffset, 10));
-            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`)
+            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);
         }
         return list;
     }, []);
@@ -75,7 +75,7 @@ Special components:
 
 ```jsx live=true dir="column" hideInDSM
 import React, { useState } from 'react';
-import { ConfigProvider, ButtonGroup, Button, Row, Col, Spin, Notification, DatePicker, TimePicker, Timeline, Popover, Tag, Tooltip, Badge, Avatar, Steps, Pagination, Modal, Breadcrumb, Rating, Nav, Spin, Cascader, Radio, Select, Input, Typography, TextArea, Checkbox, Switch } from '@douyinfe/semi-ui';
+import { ConfigProvider, ButtonGroup, Button, Row, Col, Notification, DatePicker, TimePicker, Timeline, Popover, Tag, Tooltip, Badge, Avatar, Steps, Pagination, Modal, Breadcrumb, Rating, Nav, Spin, Cascader, Radio, Select, Input, Typography, TextArea, Checkbox, Switch } from '@douyinfe/semi-ui';
 import { IconVigoLogo, IconEdit, IconCamera, IconList, IconSidebar, IconChevronDown } from '@douyinfe/semi-icons';
 import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
 
@@ -86,56 +86,56 @@ function Demo(props = {}) {
     const titleStyle = {margin: '50px 0 16px 0'};
     const rowStyle = {margin: '16px 10px'};
     const badgeStyle = {
-      width: '42px',
-      height: '42px',
-      borderRadius: '4px',
-      display: 'inline-block',
+        width: '42px',
+        height: '42px',
+        borderRadius: '4px',
+        display: 'inline-block',
     };
     const tagStyle = {marginRight: 8, marginBottom: 8};
     const buttonStyle = {...tagStyle};
     const opts = {
-      title: 'Hi,Bytedance',
-      content: 'ies dance dance dance',
-      duration: 3,
-      direction,
+        title: 'Hi,Bytedance',
+        content: 'ies dance dance dance',
+        duration: 3,
+        direction,
     };
     const treeData = [
         {
-          label: 'Zhejiang',
-          value: 'zhejiang',
-          children: [
-              {
-                  label: 'Hangzhou',
-                  value: 'hangzhou',
-                  children: [
-                      {
-                          label: 'Xihu',
-                          value: 'xihu',
-                      },
-                      {
-                          label: 'Xianhan',
-                          value: 'xiaoshan',
-                      },
-                      {
-                          label: 'Lin’an',
-                          value: 'linan',
-                      },
-                  ],
-              },
-              {
-                  label: 'Ningbo',
-                  value: 'ningbo',
-                  children: [
-                      {
-                          label: 'Haishu',
-                          value: 'haishu',
-                      },
-                      {
-                          label: 'Jiangbei',
-                          value: 'jiangbei',
-                      }
-                  ]
-              },
+            label: 'Zhejiang',
+            value: 'zhejiang',
+            children: [
+                {
+                    label: 'Hangzhou',
+                    value: 'hangzhou',
+                    children: [
+                        {
+                            label: 'Xihu',
+                            value: 'xihu',
+                        },
+                        {
+                            label: 'Xianhan',
+                            value: 'xiaoshan',
+                        },
+                        {
+                            label: 'Lin’an',
+                            value: 'linan',
+                        },
+                    ],
+                },
+                {
+                    label: 'Ningbo',
+                    value: 'ningbo',
+                    children: [
+                        {
+                            label: 'Haishu',
+                            value: 'haishu',
+                        },
+                        {
+                            label: 'Jiangbei',
+                            value: 'jiangbei',
+                        }
+                    ]
+                },
             ],
         }
     ];
@@ -149,79 +149,79 @@ function Demo(props = {}) {
                 </ButtonGroup>
             </div>
             <ConfigProvider direction={direction} locale={en_GB}>
-            <Row>
-                <h3 style={titleStyle}>Buttons</h3>
-            </Row>
-            <Row style={rowStyle}>
-                <Button loading={true} theme="solid" style={{ marginRight: 8 }}>Loading</Button>
-                <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 8 }}>Collapsing</Button>
-                <Button icon={<IconChevronDown />} theme="solid" iconPosition={"right"} style={{ marginRight: 8 }}>Expand options</Button >
-                <br/><br/>
-                <ButtonGroup>
-                  <Button>Copy</Button>
-                  <Button>Query</Button>
-                  <Button>Cut</Button>
-                </ButtonGroup>
-            </Row>
-            <Row>
-                <h3 style={titleStyle}>Input</h3>
-            </Row>
-            <Row style={rowStyle} gutter={16}>
-                <Col span={12}>
-                    <Input placeholder='Input something'></Input>
-                    <br/><br/>
-                    <Input disabled placeholder='Input something'></Input>
-                    <br/><br/>
-                    <Input prefix="Prefix" showClear></Input>
-                    <br/><br/>
-                    <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
-                    <br/><br/>
-                    <TextArea placeholder="Input something" maxCount={100} />
-                    <br/><br/>
-                    <div style={flexStyle}>
-                        <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
-                        <Switch style={{marginRight: 8}}></Switch>
-                        <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
-                    </div>
-                    <div style={flexStyle}>
-                        <Checkbox style={{marginRight: 8}} defaultChecked>Checkbox</Checkbox>
-                        <Checkbox style={{marginRight: 8}} disabled defaultChecked>Disabled Checkbox</Checkbox>
-                        <Checkbox style={{marginRight: 8}} disabled>Disabled Checkbox</Checkbox>
-                    </div>
-                    <div style={{...flexStyle, marginBottom: 0}}>
-                        <Radio style={{marginRight: 8}} defaultChecked>Radio</Radio>
-                        <Radio style={{marginRight: 8}} disabled defaultChecked>Disabled Radio</Radio>
-                        <Radio style={{marginRight: 8}} disabled>Disabled Radio</Radio>
-                    </div>
-                </Col>
-                <Col span={12}>
-                    <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
-                    <br/><br/>
-                    <TimePicker style={{width: '100%'}} />
-                    <br/><br/>
-                    <Select style={{ width: '100%' }} placeholder="Select-single">
-                      <Option value='abc'>Semi</Option>
-                      <Option value='hotsoon'>Hotsoon</Option>
-                      <Option value='pipixia' disabled>Pipixia</Option>
-                      <Option value='xigua'>Xigua</Option>
-                    </Select>
-                    <br/><br/>
-                    <Select disabled style={{ width: '100%' }} placeholder="Select-disabled">
-                      <Option value='abc'>Semi</Option>
-                      <Option value='hotsoon'>Hotsoon</Option>
-                      <Option value='pipixia' disabled>Pipixia</Option>
-                      <Option value='xigua'>Xigua</Option>
-                    </Select>
-                    <br/><br/>
-                    <Select multiple style={{ width: '100%' }} placeholder="Select-mutiple">
-                      <Option value='abc'>Semi</Option>
-                      <Option value='hotsoon'>Hotsoon</Option>
-                      <Option value='pipixia' disabled>Pipixia</Option>
-                      <Option value='xigua'>Xigua</Option>
-                    </Select>
+                <Row>
+                    <h3 style={titleStyle}>Buttons</h3>
+                </Row>
+                <Row style={rowStyle}>
+                    <Button loading={true} theme="solid" style={{ marginRight: 8 }}>Loading</Button>
+                    <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 8 }}>Collapsing</Button>
+                    <Button icon={<IconChevronDown />} theme="solid" iconPosition={"right"} style={{ marginRight: 8 }}>Expand options</Button >
                     <br/><br/>
-                    <Cascader style={{ width: '100%' }} treeData={treeData} placeholder="Cascader"/>
-                  </Col>
+                    <ButtonGroup>
+                        <Button>Copy</Button>
+                        <Button>Query</Button>
+                        <Button>Cut</Button>
+                    </ButtonGroup>
+                </Row>
+                <Row>
+                    <h3 style={titleStyle}>Input</h3>
+                </Row>
+                <Row style={rowStyle} gutter={16}>
+                    <Col span={12}>
+                        <Input placeholder='Input something'></Input>
+                        <br/><br/>
+                        <Input disabled placeholder='Input something'></Input>
+                        <br/><br/>
+                        <Input prefix="Prefix" showClear></Input>
+                        <br/><br/>
+                        <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
+                        <br/><br/>
+                        <TextArea placeholder="Input something" maxCount={100} />
+                        <br/><br/>
+                        <div style={flexStyle}>
+                            <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
+                            <Switch style={{marginRight: 8}}></Switch>
+                            <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
+                        </div>
+                        <div style={flexStyle}>
+                            <Checkbox style={{marginRight: 8}} defaultChecked>Checkbox</Checkbox>
+                            <Checkbox style={{marginRight: 8}} disabled defaultChecked>Disabled Checkbox</Checkbox>
+                            <Checkbox style={{marginRight: 8}} disabled>Disabled Checkbox</Checkbox>
+                        </div>
+                        <div style={{...flexStyle, marginBottom: 0}}>
+                            <Radio style={{marginRight: 8}} defaultChecked>Radio</Radio>
+                            <Radio style={{marginRight: 8}} disabled defaultChecked>Disabled Radio</Radio>
+                            <Radio style={{marginRight: 8}} disabled>Disabled Radio</Radio>
+                        </div>
+                    </Col>
+                    <Col span={12}>
+                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
+                        <br/><br/>
+                        <TimePicker style={{width: '100%'}} />
+                        <br/><br/>
+                        <Select style={{ width: '100%' }} placeholder="Select-single">
+                            <Option value='abc'>Semi</Option>
+                            <Option value='hotsoon'>Hotsoon</Option>
+                            <Option value='pipixia' disabled>Pipixia</Option>
+                            <Option value='xigua'>Xigua</Option>
+                        </Select>
+                        <br/><br/>
+                        <Select disabled style={{ width: '100%' }} placeholder="Select-disabled">
+                            <Option value='abc'>Semi</Option>
+                            <Option value='hotsoon'>Hotsoon</Option>
+                            <Option value='pipixia' disabled>Pipixia</Option>
+                            <Option value='xigua'>Xigua</Option>
+                        </Select>
+                        <br/><br/>
+                        <Select multiple style={{ width: '100%' }} placeholder="Select-mutiple">
+                            <Option value='abc'>Semi</Option>
+                            <Option value='hotsoon'>Hotsoon</Option>
+                            <Option value='pipixia' disabled>Pipixia</Option>
+                            <Option value='xigua'>Xigua</Option>
+                        </Select>
+                        <br/><br/>
+                        <Cascader style={{ width: '100%' }} treeData={treeData} placeholder="Cascader"/>
+                    </Col>
                 </Row>
                 <Row>
                     <h3 style={titleStyle}>Navigation</h3>
@@ -267,37 +267,37 @@ function Demo(props = {}) {
                     <h3 style={titleStyle}>Display</h3>
                 </Row>
                 <Row style={rowStyle}>
-                   <div style={{ display: 'flex' }}>
-                      <div style={{ padding: 8 }}>
-                          <Badge count={5} theme='solid' >
-                              <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge count={5} theme='light' >
-                              <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge count={5} theme='inverted'>
-                              <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge dot theme='solid' >
-                              <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge dot theme='light' >
-                              <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
-                          <Badge dot theme='inverted'>
-                              <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>
-                          </Badge>
-                      </div>
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ padding: 8 }}>
+                            <Badge count={5} theme='solid' >
+                                <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge count={5} theme='light' >
+                                <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge count={5} theme='inverted'>
+                                <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge dot theme='solid' >
+                                <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge dot theme='light' >
+                                <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
+                            <Badge dot theme='inverted'>
+                                <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>
+                            </Badge>
+                        </div>
                     </div>
                     <br/>
                     <div>
@@ -314,11 +314,11 @@ function Demo(props = {}) {
                     </div>
                     <br/>
                     <div style={{display: 'flex', alignItems: 'center'}}>
-                      <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
-                      <Tooltip content={'hi semi-design'}>
-                          <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
-                      </Tooltip>
-                      <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
+                        <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
+                        <Tooltip content={'hi semi-design'}>
+                            <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
+                        </Tooltip>
+                        <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
                     </div>
                     <br/>
                     <Timeline>
@@ -358,7 +358,7 @@ function Demo(props = {}) {
                     <Button onClick={() => Toast.info(opts)} style={buttonStyle}>Toast of prompt information</Button>
                     <Button type="warning" onClick={() => Toast.warning(opts)} style={buttonStyle}>Toast of waning information</Button>
                     <Button type="danger" onClick={() => Toast.error(opts)} style={buttonStyle}>Toast of failure information</Button>
-                     <br/><br/>
+                    <br/><br/>
                     <Spin tip='I am loading...'>
                         <div style={{
                             backgroundColor: 'var(--semi-color-primary-light-default',

content/other/configprovider/index.md

@@ -29,10 +29,10 @@ function Demo(props = {}) {
     const defaultTimestamp = 1581599305265;
     const gmtList = useMemo(() => {
         const list = [];
-        for(let hourOffset = -11; hourOffset <= 14 ; hourOffset++) {
+        for (let hourOffset = -11; hourOffset <= 14 ; hourOffset++) {
             const prefix = hourOffset >= 0 ? '+' : '-';
             const hOffset = Math.abs(parseInt(hourOffset, 10));
-            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`)
+            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);
         }
         return list;
     }, []);
@@ -79,7 +79,7 @@ function Demo(props = {}) {
 
 ```jsx live=true dir="column" hideInDSM
 import React, { useState } from 'react';
-import { ConfigProvider, ButtonGroup, Button, Row, Col, Spin, Notification, DatePicker, TimePicker, Timeline, Popover, Tag, Tooltip, Badge, Avatar, Steps, Pagination, Modal, Breadcrumb, Rating, Nav, Spin, Cascader, Radio, Select, Input, Typography, TextArea, Checkbox, Switch } from '@douyinfe/semi-ui';
+import { ConfigProvider, ButtonGroup, Button, Row, Col, Notification, DatePicker, TimePicker, Timeline, Popover, Tag, Tooltip, Badge, Avatar, Steps, Pagination, Modal, Breadcrumb, Rating, Nav, Spin, Cascader, Radio, Select, Input, Typography, TextArea, Checkbox, Switch } from '@douyinfe/semi-ui';
 import { IconVigoLogo, IconEdit, IconCamera, IconList, IconSidebar, IconChevronDown } from '@douyinfe/semi-icons';
 
 function Demo(props = {}) {
@@ -89,56 +89,56 @@ function Demo(props = {}) {
     const titleStyle = {margin: '50px 0 16px 0'};
     const rowStyle = {margin: '16px 10px'};
     const badgeStyle = {
-      width: '42px',
-      height: '42px',
-      borderRadius: '4px',
-      display: 'inline-block',
+        width: '42px',
+        height: '42px',
+        borderRadius: '4px',
+        display: 'inline-block',
     };
     const tagStyle = {marginRight: 8, marginBottom: 8};
     const buttonStyle = {...tagStyle};
     const opts = {
-      title: 'Hi,Bytedance',
-      content: 'ies dance dance dance',
-      duration: 3,
-      direction,
+        title: 'Hi,Bytedance',
+        content: 'ies dance dance dance',
+        duration: 3,
+        direction,
     };
     const treeData = [
         {
-          label: '浙江省',
-          value: 'zhejiang',
-          children: [
-              {
-                  label: '杭州市',
-                  value: 'hangzhou',
-                  children: [
-                      {
-                          label: '西湖区',
-                          value: 'xihu',
-                      },
-                      {
-                          label: '萧山区',
-                          value: 'xiaoshan',
-                      },
-                      {
-                          label: '临安区',
-                          value: 'linan',
-                      },
-                  ],
-              },
-              {
-                  label: '宁波市',
-                  value: 'ningbo',
-                  children: [
-                      {
-                          label: '海曙区',
-                          value: 'haishu',
-                      },
-                      {
-                          label: '江北区',
-                          value: 'jiangbei',
-                      }
-                  ]
-              },
+            label: '浙江省',
+            value: 'zhejiang',
+            children: [
+                {
+                    label: '杭州市',
+                    value: 'hangzhou',
+                    children: [
+                        {
+                            label: '西湖区',
+                            value: 'xihu',
+                        },
+                        {
+                            label: '萧山区',
+                            value: 'xiaoshan',
+                        },
+                        {
+                            label: '临安区',
+                            value: 'linan',
+                        },
+                    ],
+                },
+                {
+                    label: '宁波市',
+                    value: 'ningbo',
+                    children: [
+                        {
+                            label: '海曙区',
+                            value: 'haishu',
+                        },
+                        {
+                            label: '江北区',
+                            value: 'jiangbei',
+                        }
+                    ]
+                },
             ],
         }
     ];
@@ -152,79 +152,79 @@ function Demo(props = {}) {
                 </ButtonGroup>
             </div>
             <ConfigProvider direction={direction}>
-            <Row>
-                <h3 style={titleStyle}>Buttons</h3>
-            </Row>
-            <Row style={rowStyle}>
-                <Button loading={true} theme="solid" style={{ marginRight: 8 }}>加载</Button>
-                <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 8 }}>收起</Button>
-                <Button icon={<IconChevronDown />} theme="solid" iconPosition={"right"} style={{ marginRight: 8 }}>展开选项</Button >
-                <br/><br/>
-                <ButtonGroup>
-                  <Button>拷贝</Button>
-                  <Button>查询</Button>
-                  <Button>剪切</Button>
-                </ButtonGroup>
-            </Row>
-            <Row>
-                <h3 style={titleStyle}>Input</h3>
-            </Row>
-            <Row style={rowStyle} gutter={16}>
-                <Col span={12}>
-                    <Input placeholder='输入框'></Input>
-                    <br/><br/>
-                    <Input disabled placeholder='输入框'></Input>
-                    <br/><br/>
-                    <Input prefix="Prefix" showClear></Input>
-                    <br/><br/>
-                    <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
-                    <br/><br/>
-                    <TextArea placeholder="文本框" maxCount={100} />
-                    <br/><br/>
-                    <div style={flexStyle}>
-                        <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
-                        <Switch style={{marginRight: 8}}></Switch>
-                        <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
-                    </div>
-                    <div style={flexStyle}>
-                        <Checkbox style={{marginRight: 8}} defaultChecked>多选框</Checkbox>
-                        <Checkbox style={{marginRight: 8}} disabled defaultChecked>禁用的多选框</Checkbox>
-                        <Checkbox style={{marginRight: 8}}>禁用的多选框</Checkbox>
-                    </div>
-                    <div style={{...flexStyle, marginBottom: 0}}>
-                        <Radio style={{marginRight: 8}} defaultChecked>单选框</Radio>
-                        <Radio style={{marginRight: 8}} disabled defaultChecked>禁用的单选框</Radio>
-                        <Radio style={{marginRight: 8}}>禁用的单选框</Radio>
-                    </div>
-                </Col>
-                <Col span={12}>
-                    <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
-                    <br/><br/>
-                    <TimePicker style={{width: '100%'}} />
-                    <br/><br/>
-                    <Select style={{ width: '100%' }} placeholder="选择器-单选">
-                      <Option value='abc'>抖音</Option>
-                      <Option value='hotsoon'>火山</Option>
-                      <Option value='pipixia' disabled>皮皮虾</Option>
-                      <Option value='xigua'>西瓜视频</Option>
-                    </Select>
-                    <br/><br/>
-                    <Select disabled style={{ width: '100%' }} placeholder="选择器-禁用">
-                      <Option value='abc'>抖音</Option>
-                      <Option value='hotsoon'>火山</Option>
-                      <Option value='pipixia' disabled>皮皮虾</Option>
-                      <Option value='xigua'>西瓜视频</Option>
-                    </Select>
-                    <br/><br/>
-                    <Select multiple style={{ width: '100%' }} placeholder="选择器-多选">
-                      <Option value='abc'>抖音</Option>
-                      <Option value='hotsoon'>火山</Option>
-                      <Option value='pipixia' disabled>皮皮虾</Option>
-                      <Option value='xigua'>西瓜视频</Option>
-                    </Select>
+                <Row>
+                    <h3 style={titleStyle}>Buttons</h3>
+                </Row>
+                <Row style={rowStyle}>
+                    <Button loading={true} theme="solid" style={{ marginRight: 8 }}>加载</Button>
+                    <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 8 }}>收起</Button>
+                    <Button icon={<IconChevronDown />} theme="solid" iconPosition={"right"} style={{ marginRight: 8 }}>展开选项</Button >
                     <br/><br/>
-                    <Cascader style={{ width: '100%' }} treeData={treeData} placeholder="级联选择器"/>
-                  </Col>
+                    <ButtonGroup>
+                        <Button>拷贝</Button>
+                        <Button>查询</Button>
+                        <Button>剪切</Button>
+                    </ButtonGroup>
+                </Row>
+                <Row>
+                    <h3 style={titleStyle}>Input</h3>
+                </Row>
+                <Row style={rowStyle} gutter={16}>
+                    <Col span={12}>
+                        <Input placeholder='输入框'></Input>
+                        <br/><br/>
+                        <Input disabled placeholder='输入框'></Input>
+                        <br/><br/>
+                        <Input prefix="Prefix" showClear></Input>
+                        <br/><br/>
+                        <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
+                        <br/><br/>
+                        <TextArea placeholder="文本框" maxCount={100} />
+                        <br/><br/>
+                        <div style={flexStyle}>
+                            <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
+                            <Switch style={{marginRight: 8}}></Switch>
+                            <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
+                        </div>
+                        <div style={flexStyle}>
+                            <Checkbox style={{marginRight: 8}} defaultChecked>多选框</Checkbox>
+                            <Checkbox style={{marginRight: 8}} disabled defaultChecked>禁用的多选框</Checkbox>
+                            <Checkbox style={{marginRight: 8}}>禁用的多选框</Checkbox>
+                        </div>
+                        <div style={{...flexStyle, marginBottom: 0}}>
+                            <Radio style={{marginRight: 8}} defaultChecked>单选框</Radio>
+                            <Radio style={{marginRight: 8}} disabled defaultChecked>禁用的单选框</Radio>
+                            <Radio style={{marginRight: 8}}>禁用的单选框</Radio>
+                        </div>
+                    </Col>
+                    <Col span={12}>
+                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
+                        <br/><br/>
+                        <TimePicker style={{width: '100%'}} />
+                        <br/><br/>
+                        <Select style={{ width: '100%' }} placeholder="选择器-单选">
+                            <Option value='abc'>抖音</Option>
+                            <Option value='hotsoon'>火山</Option>
+                            <Option value='pipixia' disabled>皮皮虾</Option>
+                            <Option value='xigua'>西瓜视频</Option>
+                        </Select>
+                        <br/><br/>
+                        <Select disabled style={{ width: '100%' }} placeholder="选择器-禁用">
+                            <Option value='abc'>抖音</Option>
+                            <Option value='hotsoon'>火山</Option>
+                            <Option value='pipixia' disabled>皮皮虾</Option>
+                            <Option value='xigua'>西瓜视频</Option>
+                        </Select>
+                        <br/><br/>
+                        <Select multiple style={{ width: '100%' }} placeholder="选择器-多选">
+                            <Option value='abc'>抖音</Option>
+                            <Option value='hotsoon'>火山</Option>
+                            <Option value='pipixia' disabled>皮皮虾</Option>
+                            <Option value='xigua'>西瓜视频</Option>
+                        </Select>
+                        <br/><br/>
+                        <Cascader style={{ width: '100%' }} treeData={treeData} placeholder="级联选择器"/>
+                    </Col>
                 </Row>
                 <Row>
                     <h3 style={titleStyle}>Navigation</h3>
@@ -270,37 +270,37 @@ function Demo(props = {}) {
                     <h3 style={titleStyle}>Display</h3>
                 </Row>
                 <Row style={rowStyle}>
-                   <div style={{ display: 'flex' }}>
-                      <div style={{ padding: 8 }}>
-                          <Badge count={5} theme='solid' >
-                              <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge count={5} theme='light' >
-                              <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge count={5} theme='inverted'>
-                              <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge dot theme='solid' >
-                              <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: 8 }}>
-                          <Badge dot theme='light' >
-                              <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>
-                          </Badge>
-                      </div>
-                      <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
-                          <Badge dot theme='inverted'>
-                              <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>
-                          </Badge>
-                      </div>
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ padding: 8 }}>
+                            <Badge count={5} theme='solid' >
+                                <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge count={5} theme='light' >
+                                <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge count={5} theme='inverted'>
+                                <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge dot theme='solid' >
+                                <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: 8 }}>
+                            <Badge dot theme='light' >
+                                <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>
+                            </Badge>
+                        </div>
+                        <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
+                            <Badge dot theme='inverted'>
+                                <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>
+                            </Badge>
+                        </div>
                     </div>
                     <br/>
                     <div>
@@ -317,11 +317,11 @@ function Demo(props = {}) {
                     </div>
                     <br/>
                     <div style={{display: 'flex', alignItems: 'center'}}>
-                      <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
-                      <Tooltip content={'hi semi-design'}>
-                          <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
-                      </Tooltip>
-                      <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
+                        <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
+                        <Tooltip content={'hi semi-design'}>
+                            <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
+                        </Tooltip>
+                        <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
                     </div>
                     <br/>
                     <Timeline>
@@ -360,7 +360,7 @@ function Demo(props = {}) {
                     <Button onClick={() => Toast.info(opts)} style={buttonStyle}>提示信息的提示</Button>
                     <Button type="warning" onClick={() => Toast.warning(opts)} style={buttonStyle}>警告信息的提示</Button>
                     <Button type="danger" onClick={() => Toast.error(opts)} style={buttonStyle}>失败信息的提示</Button>
-                     <br/><br/>
+                    <br/><br/>
                     <Spin tip='I am loading...'>
                         <div style={{
                             backgroundColor: 'var(--semi-color-primary-light-default',

content/other/locale/index-en-US.md

@@ -30,7 +30,8 @@ brief: Internationalized components to provide multilingual support for Semi com
 `LocaleProvider` uses the context feature of React, and you only need to wrap the periphery of the application once to take effect globally.  
 When you need to switch the language, you can directly switch the locale passed in by the props.
 
-```js
+```jsx
+import React from 'react';
 import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
 import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
 import en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';
@@ -51,7 +52,8 @@ import { LocaleProvider } from '@douyinfe/semi-ui';
 
 return (
     <LocaleProvider locale={en_GB}>
-        <App/>
+        {/* eslint-disable-next-line react/jsx-no-undef */}
+        <App />
     </LocaleProvider>
 );
 ```
@@ -107,13 +109,15 @@ import zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';
 import ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';
 import { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography } from '@douyinfe/semi-ui';
 
+const { Option } = Select;
+
 class I18nDemo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             locale: en_GB,
             localeCode: 'en_GB',
-        }
+        };
         this.onLanguageChange = this.onLanguageChange.bind(this);
     }
 
@@ -130,8 +134,8 @@ class I18nDemo extends React.Component {
             'ms_MY': ms_MY,
             'th_TH': th_TH,
             'tr_TR': tr_TR,
-        }
-        this.setState({ locale: language[code], localeCode: code })
+        };
+        this.setState({ locale: language[code], localeCode: code });
     }
 
     render() {
@@ -206,10 +210,10 @@ class I18nDemo extends React.Component {
                             visible={modalVisible}
                             onOk={() => setModalVisible(false)}
                             onCancel={() => setModalVisible(false)}
-                            >
+                        >
                             <p>This is the content of a basic modal.</p>
                             <p>More content...</p>
-                    </Modal>
+                        </Modal>
                     </div>
                     <h5>Select & Cascader</h5>
                     <div style={style}>
@@ -270,7 +274,7 @@ class I18nDemo extends React.Component {
                     </ConfigProvider>
                 </LocaleProvider>
             </>
-        )
+        );
     }
 }
 ```

content/other/locale/index.md

@@ -28,7 +28,8 @@ brief: 国际化组件，为 Semi 组件提供多语言支持
 LocaleProvider 使用了 React 的 context 上下文特性，你只需要在应用外围包裹一次即可全局生效  
 当需要切换语言时，直接切换 props 传入的 locale 即可
 
-```js hideInDSM
+```jsx hideInDSM
+import React from 'react';
 import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
 import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
 import en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';
@@ -49,7 +50,8 @@ import { LocaleProvider } from '@douyinfe/semi-ui';
 // 在locale中传入相应的语言包即可
 return (
     <LocaleProvider locale={en_GB}>
-        <App/>
+        {/* eslint-disable-next-line react/jsx-no-undef */}
+        <App />
     </LocaleProvider>
 );
 ```
@@ -114,7 +116,7 @@ class I18nDemo extends React.Component {
         this.state = {
             locale: zh_CN,
             localeCode: 'zh_CN',
-        }
+        };
         this.onLanguageChange = this.onLanguageChange.bind(this);
     }
 
@@ -133,8 +135,8 @@ class I18nDemo extends React.Component {
             'tr_TR': tr_TR,
             'pt_BR': pt_BR,
             'zh_TW': zh_TW,
-        }
-        this.setState({ locale: language[code], localeCode: code })
+        };
+        this.setState({ locale: language[code], localeCode: code });
     }
 
     render() {
@@ -209,10 +211,10 @@ class I18nDemo extends React.Component {
                             visible={modalVisible}
                             onOk={() => setModalVisible(false)}
                             onCancel={() => setModalVisible(false)}
-                            >
+                        >
                             <p>This is the content of a basic modal.</p>
                             <p>More content...</p>
-                    </Modal>
+                        </Modal>
                     </div>
                     <h5>Select & Cascader</h5>
                     <div style={style}>
@@ -281,7 +283,7 @@ class I18nDemo extends React.Component {
                     </ConfigProvider>
                 </LocaleProvider>
             </>
-        )
+        );
     }
 }
 ```

content/show/avatar/index-en-US.md

@@ -208,7 +208,7 @@ function Demo() {
                     {`+${restNumber}`}
                 </Avatar>
             </Popover>
-        )
+        );
     };
 
     return (
@@ -219,7 +219,7 @@ function Demo() {
             <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
             <Avatar style={{ backgroundColor: '#87d068' }} >YZ</Avatar>
         </AvatarGroup>
-    )
+    );
 }
 ```
 

content/show/badge/index-en-US.md

@@ -23,6 +23,7 @@ The basic type of Badge is `count`. The `dot` property changes a badge into a sm
 ```jsx live=true
 import React from 'react';
 import { Badge, Avatar } from '@douyinfe/semi-ui';
+import { IconLock } from '@douyinfe/semi-icons';
 
 () => {
     const style = {
@@ -53,7 +54,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </Badge>
         </div>
     );
-}
+};
 ```
 
 ### Maximum Value
@@ -93,7 +94,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </Badge>
         </div>
     );
-}
+};
 ```
 
 ### Position
@@ -133,7 +134,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </Badge>
         </div>
     );
-}
+};
 ```
 
 ### Theming
@@ -189,7 +190,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
         </div>
     );
-}
+};
 ```
 
 `type` support the following values: `primary`(default),`secondary`,`tertiary`,`warning` and `danger`.
@@ -243,7 +244,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
         </div>
     );
-}
+};
 ```
 
 ### Independent Usage

content/show/badge/index.md

@@ -52,7 +52,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
         </div>
     );  
-}
+};
 ```
 
 ### 设置显示数字最大值
@@ -92,7 +92,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </Badge>
         </div>
     );
-}
+};
 ```
 
 ### 设置徽标位置
@@ -132,7 +132,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </Badge>
         </div>
     );
-}
+};
 ```
 
 ### 设置徽标样式
@@ -188,7 +188,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
         </div>
     );
-}
+};
 ```
 
 `type` 支持如下类型：`primary`，`secondary`，`tertiary`，`warning` 和 `danger`。默认类型为 `primary`。
@@ -242,7 +242,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
         </div>
     );
-}
+};
 ```
 
 ### 独立使用

content/show/calendar/index-en-US.md

@@ -26,7 +26,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 
 () => (
     <Calendar mode="day"></Calendar>
-)
+);
 ```
 
 ### Week Mode
@@ -39,7 +39,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 
 () => (
     <Calendar mode="week"></Calendar>
-)
+);
 ```
 
 ### Month Mode
@@ -52,7 +52,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 
 () => (
     <Calendar mode="month"></Calendar>
-)
+);
 ```
 
 ### Range Mode
@@ -65,7 +65,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 
 () => (
     <Calendar mode="range" range={[new Date(2020, 8, 26), new Date(2020, 8, 31)]} />
-)
+);
 ```
 
 ### Render Events
@@ -218,18 +218,18 @@ import { Calendar } from '@douyinfe/semi-ui';
     };
     const displayValue = new Date(2019, 6, 23, 8, 32, 0);
     const dateRender = (dateString) => {
-      if (dateString === new Date(2019, 6, 23).toString()) {
-        return (
-          <>
-            <div style={{...dailyEventStyle, top: '500px', height: 50}}>Eating 🍰</div>
-            <div style={{...dailyEventStyle, top: '0', height: 400}}>Sleeping 😪</div>
-            <div style={{...dailyEventStyle, top: '700px', height: 100}}>Playstation 🎮</div>
-          </>
-        )
-      } else {
-        return null;
-      }
-    }
+        if (dateString === new Date(2019, 6, 23).toString()) {
+            return (
+                <>
+                    <div style={{...dailyEventStyle, top: '500px', height: 50}}>Eating 🍰</div>
+                    <div style={{...dailyEventStyle, top: '0', height: 400}}>Sleeping 😪</div>
+                    <div style={{...dailyEventStyle, top: '700px', height: 100}}>Playstation 🎮</div>
+                </>
+            );
+        } else {
+            return null;
+        }
+    };
     return (
         <Calendar 
             height={700}
@@ -238,7 +238,7 @@ import { Calendar } from '@douyinfe/semi-ui';
             dateGridRender={dateRender}
         />
     );
-}
+};
 ```
 
 #### Customized Date Cell Style
@@ -258,19 +258,19 @@ import { Calendar } from '@douyinfe/semi-ui';
     };
     const displayValue = new Date(2019, 6, 23, 8, 32, 0);
     const importDates = [
-      new Date(2019, 6, 2),
-      new Date(2019, 6, 8),
-      new Date(2019, 6, 19),
-      new Date(2019, 6, 23)
-    ]
+        new Date(2019, 6, 2),
+        new Date(2019, 6, 8),
+        new Date(2019, 6, 19),
+        new Date(2019, 6, 23)
+    ];
     const dateRender = (dateString) => {
-      if (importDates.filter(date => date.toString() === dateString).length) {
-        return (
-          <div style={importantDate} />
-        )
-      } 
-      return null;
-    }
+        if (importDates.filter(date => date.toString() === dateString).length) {
+            return (
+                <div style={importantDate} />
+            );
+        } 
+        return null;
+    };
     return (
         <Calendar 
             height={700}
@@ -279,7 +279,7 @@ import { Calendar } from '@douyinfe/semi-ui';
             dateGridRender={dateRender}
         />
     );
-}
+};
 ```
 
 ## API Reference

content/show/card/index-en-US.md

@@ -24,21 +24,21 @@ import React from 'react';
 import { Card, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
+    const { Text } = Typography;
   
-  return (
-    <Card 
-      title='Semi Design' 
-      style={{ maxWidth: 360 }}
-      headerExtraContent={
-        <Text link>
-          More
-        </Text>
-      }
-    >
-        Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.
-    </Card>
-  );
+    return (
+        <Card 
+            title='Semi Design' 
+            style={{ maxWidth: 360 }}
+            headerExtraContent={
+                <Text link>
+                    More
+                </Text>
+            }
+        >
+            Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.
+        </Card>
+    );
 }
 
 ```
@@ -53,45 +53,45 @@ import { Card, Popover, Avatar } from '@douyinfe/semi-ui';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <>
-      <Card style={{ maxWidth: 360 }} >
-        Semi Design is a design system developed and maintained by IES-FE & IES-UED.
-      </Card>
-      <br />
-      <Card 
-        style={{ maxWidth: 360 }} 
-        bodyStyle={{ 
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
-        <Meta 
-          title="Semi Doc" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-        <Popover
-          position='top'
-          showArrow
-          content={
-              <article style={{ padding: 6 }}>
-                  This is a card.
-              </article>
-          }
-        >
-            <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
-        </Popover>
-      </Card>
-    </>
-  );
+    const { Meta } = Card;
+
+    return (
+        <>
+            <Card style={{ maxWidth: 360 }} >
+                Semi Design is a design system developed and maintained by IES-FE & IES-UED.
+            </Card>
+            <br />
+            <Card 
+                style={{ maxWidth: 360 }} 
+                bodyStyle={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+                <Popover
+                    position='top'
+                    showArrow
+                    content={
+                        <article style={{ padding: 6 }}>
+                            This is a card.
+                        </article>
+                    }
+                >
+                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                </Popover>
+            </Card>
+        </>
+    );
 }
 
 ```
@@ -105,21 +105,21 @@ import React from 'react';
 import { Card } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <Card
-      style={{ maxWidth: 300 }}
-      cover={ 
-        <img 
-          alt="example" 
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg" 
-        />
-      }
-    >
-      <Meta title="Card cover" />
-    </Card>
-  );
+    const { Meta } = Card;
+
+    return (
+        <Card
+            style={{ maxWidth: 300 }}
+            cover={ 
+                <img 
+                    alt="example" 
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg" 
+                />
+            }
+        >
+            <Meta title="Card cover" />
+        </Card>
+    );
 }
 
 ```
@@ -133,24 +133,24 @@ import React from 'react';
 import { Card } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-    <div 
-      style={{
-        display: 'inline-block',
-        padding: 20,
-        backgroundColor: 'var(--semi-color-fill-0)'
-      }}
-    >
-      <Card 
-        style={{ maxWidth: 360 }}
-        bordered={false}
-        headerLine={true}
-        title='Semi Design'
-      >
-        Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.
-      </Card>
-    </div>
-  );
+    return (
+        <div 
+            style={{
+                display: 'inline-block',
+                padding: 20,
+                backgroundColor: 'var(--semi-color-fill-0)'
+            }}
+        >
+            <Card 
+                style={{ maxWidth: 360 }}
+                bordered={false}
+                headerLine={true}
+                title='Semi Design'
+            >
+                Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.
+            </Card>
+        </div>
+    );
 }
 
 ```
@@ -166,73 +166,73 @@ import { Card, Avatar, Popover } from '@douyinfe/semi-ui';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <div>
-      <Card 
-        shadows='hover'
-        style={{ maxWidth: 360 }} 
-        bodyStyle={{ 
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
-        <Meta 
-          title="Semi Doc" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-        <Popover
-          position='top'
-          showArrow
-          content={
-              <article style={{ padding: 6 }}>
-                  This is a card.
-              </article>
-          }
-        >
-            <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
-        </Popover>
-      </Card>
-      <br/>
-      <Card 
-        shadows='always'
-        style={{ maxWidth: 360 }} 
-        bodyStyle={{ 
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
-        <Meta 
-          title="Semi Doc" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-        <Popover
-          position='top'
-          showArrow
-          content={
-              <article style={{ padding: 6 }}>
-                  This is a card.
-              </article>
-          }
-        >
-            <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
-        </Popover>
-      </Card>
-    </div>
-  );
+    const { Meta } = Card;
+
+    return (
+        <div>
+            <Card 
+                shadows='hover'
+                style={{ maxWidth: 360 }} 
+                bodyStyle={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+                <Popover
+                    position='top'
+                    showArrow
+                    content={
+                        <article style={{ padding: 6 }}>
+                            This is a card.
+                        </article>
+                    }
+                >
+                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                </Popover>
+            </Card>
+            <br/>
+            <Card 
+                shadows='always'
+                style={{ maxWidth: 360 }} 
+                bodyStyle={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+                <Popover
+                    position='top'
+                    showArrow
+                    content={
+                        <article style={{ padding: 6 }}>
+                            This is a card.
+                        </article>
+                    }
+                >
+                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                </Popover>
+            </Card>
+        </div>
+    );
 }
 
 ```
@@ -246,47 +246,47 @@ import React from 'react';
 import { Card, Avatar, Space, Button, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Meta } = Card;
-  const { Text } = Typography;
-
-  return (
-    <Card
-      style={{ maxWidth: 360 }}
-      title={
-        <Meta 
-          title="Semi Doc" 
-          description="Easily manage your project icons and easily upload, update and share a series of project icons." 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-      }
-      headerExtraContent={
-        <Text link>
-            More
-        </Text>
-      }
-      cover={ 
-        <img 
-          alt="example" 
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
-        />
-      }
-      footerLine={ true }
-      footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
-      footer={
-        <Space>
-          <Button theme='borderless' type='primary'>Featured Case</Button>
-          <Button theme='solid' type='primary'>Start</Button>
-        </Space>
-      }
-    >
-      Semi Design is a design system developed and maintained by IES-FE & IES-UED. 
-    </Card>
-  );
+    const { Meta } = Card;
+    const { Text } = Typography;
+
+    return (
+        <Card
+            style={{ maxWidth: 360 }}
+            title={
+                <Meta 
+                    title="Semi Doc" 
+                    description="Easily manage your project icons and easily upload, update and share a series of project icons." 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+            }
+            headerExtraContent={
+                <Text link>
+                    More
+                </Text>
+            }
+            cover={ 
+                <img 
+                    alt="example" 
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
+                />
+            }
+            footerLine={ true }
+            footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
+            footer={
+                <Space>
+                    <Button theme='borderless' type='primary'>Featured Case</Button>
+                    <Button theme='solid' type='primary'>Start</Button>
+                </Space>
+            }
+        >
+            Semi Design is a design system developed and maintained by IES-FE & IES-UED. 
+        </Card>
+    );
 }
 
 ```
@@ -301,33 +301,33 @@ import React from 'react';
 import { Card, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
+    const { Text } = Typography;
   
-  return (
-    <Card title='Card title' >
-      <Card 
-        title='Inner Card title'
-        style={{ marginBottom: 20 }}
-        headerExtraContent={
-          <Text link>
-            More
-          </Text>
-        }
-      >
-        Inner Card content
-      </Card>
-      <Card 
-        title='Inner Card title'
-        headerExtraContent={
-          <Text link>
-            More
-          </Text>
-        }
-      >
-        Inner Card content
-      </Card>
-    </Card>
-  );
+    return (
+        <Card title='Card title' >
+            <Card 
+                title='Inner Card title'
+                style={{ marginBottom: 20 }}
+                headerExtraContent={
+                    <Text link>
+                        More
+                    </Text>
+                }
+            >
+                Inner Card content
+            </Card>
+            <Card 
+                title='Inner Card title'
+                headerExtraContent={
+                    <Text link>
+                        More
+                    </Text>
+                }
+            >
+                Inner Card content
+            </Card>
+        </Card>
+    );
 }
 
 ```
@@ -341,44 +341,44 @@ import React from 'react';
 import { Card, Row, Col } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-    <div 
-      style={{
-        backgroundColor: 'var(--semi-color-fill-0)', 
-        padding: 20
-      }}
-    >
-      <Row gutter={[16,16]}>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-      </Row>
-      <Row gutter={[16,16]}>
-        <Col span={16}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-      </Row>
-    </div>
-  );
+    return (
+        <div 
+            style={{
+                backgroundColor: 'var(--semi-color-fill-0)', 
+                padding: 20
+            }}
+        >
+            <Row gutter={[16,16]}>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+            </Row>
+            <Row gutter={[16,16]}>
+                <Col span={16}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+            </Row>
+        </div>
+    );
 }
 
 ```
@@ -392,25 +392,25 @@ import React, { useState } from 'react';
 import { Card, Switch } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const [loading, setLoading] = useState(true);
-  const { Meta } = Card;
-
-  return (
-    <>
-      <Switch onChange={ v => setLoading(!v) } />
-      <br />
-      <br />
-      <Card 
-        style={{ maxWidth: 360 }}
-        loading={ loading }
-      >
-        <Meta 
-          title="Semi Design" 
-          description="Semi Design is a design system developed and maintained by IES-FE & IES-UED."
-        />
-      </Card>
-    </>
-  );
+    const [loading, setLoading] = useState(true);
+    const { Meta } = Card;
+
+    return (
+        <>
+            <Switch onChange={ v => setLoading(!v) } />
+            <br />
+            <br />
+            <Card 
+                style={{ maxWidth: 360 }}
+                loading={ loading }
+            >
+                <Meta 
+                    title="Semi Design" 
+                    description="Semi Design is a design system developed and maintained by IES-FE & IES-UED."
+                />
+            </Card>
+        </>
+    );
 }
 
 ```
@@ -424,70 +424,70 @@ import React, { useState } from 'react';
 import { Card, Switch, Skeleton, Typography, Avatar } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const [loading, setLoading] = useState(true);
-  const { Meta } = Card;
-  const { Title, Paragraph, Image } = Skeleton;
-
-  return (
-    <>
-      <Switch onChange={ v => setLoading(!v) } />
-      <br />
-      <br />
-      <Card
-        style={{ maxWidth: 360 }}
-        title={
-          <Meta 
-            title={
-              <Skeleton
-                style={{width:80}}
-                placeholder={<Title />}
-                loading={loading}
-              >
-                <Typography.Title heading={5}>
-                  Semi Design
-                </Typography.Title>
-              </Skeleton>
-            } 
-            description={
-              <Skeleton 
-                style={{width:150, marginTop: 12}} 
-                placeholder={<Paragraph rows={1} />} 
-                loading={loading}
-              >
-                  <Typography.Text>
-                    Semi Design is a design system developed and maintained by IES-FE & IES-UED.
-                  </Typography.Text>
-              </Skeleton>
-            }
-            avatar={
-              <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
-                <Avatar 
-                  size="default"
-                  src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-                />
-              </Skeleton>
-            }
-          />
-        }
-        headerExtraContent={
-          <Skeleton style={{width: 50}} placeholder={<Paragraph rows={1} />} loading={loading}>
-            <Typography.Text link>
-                More
-            </Typography.Text>
-          </Skeleton>
-        }
-        cover={ 
-          <Skeleton style={{maxWidth: '100%', height: 260}} placeholder={<Image />} loading={loading}>
-            <img 
-              alt="example" 
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
-            />
-          </Skeleton> 
-        }
-      >
-      </Card>
-    </>
-  );
+    const [loading, setLoading] = useState(true);
+    const { Meta } = Card;
+    const { Title, Paragraph, Image } = Skeleton;
+
+    return (
+        <>
+            <Switch onChange={ v => setLoading(!v) } />
+            <br />
+            <br />
+            <Card
+                style={{ maxWidth: 360 }}
+                title={
+                    <Meta 
+                        title={
+                            <Skeleton
+                                style={{width:80}}
+                                placeholder={<Title />}
+                                loading={loading}
+                            >
+                                <Typography.Title heading={5}>
+                                    Semi Design
+                                </Typography.Title>
+                            </Skeleton>
+                        } 
+                        description={
+                            <Skeleton 
+                                style={{width:150, marginTop: 12}} 
+                                placeholder={<Paragraph rows={1} />} 
+                                loading={loading}
+                            >
+                                <Typography.Text>
+                                    Semi Design is a design system developed and maintained by IES-FE & IES-UED.
+                                </Typography.Text>
+                            </Skeleton>
+                        }
+                        avatar={
+                            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
+                                <Avatar 
+                                    size="default"
+                                    src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                                />
+                            </Skeleton>
+                        }
+                    />
+                }
+                headerExtraContent={
+                    <Skeleton style={{width: 50}} placeholder={<Paragraph rows={1} />} loading={loading}>
+                        <Typography.Text link>
+                            More
+                        </Typography.Text>
+                    </Skeleton>
+                }
+                cover={ 
+                    <Skeleton style={{maxWidth: '100%', height: 260}} placeholder={<Image />} loading={loading}>
+                        <img 
+                            alt="example" 
+                            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
+                        />
+                    </Skeleton> 
+                }
+            >
+            </Card>
+        </>
+    );
 }
 
 ```
@@ -501,28 +501,28 @@ import React from 'react';
 import { Card, Tabs, TabPane } from '@douyinfe/semi-ui';
 
 function demo() {
-  return (
-    <Card title='Card title'>
-      <Tabs 
-        type="line" 
-        style={{
-          marginTop: -20,
-          marginBottom: -20
-        }}
-      >
-        <TabPane tab="Tab 1" itemKey="1">
-          <p>content1</p>
-          <p>content1</p>
-          <p>content1</p>
-        </TabPane>
-        <TabPane tab="Tab 2" itemKey="2">
-          <p>content2</p>
-          <p>content2</p>
-          <p>content2</p>
-        </TabPane>
-      </Tabs>
-    </Card>
-  );
+    return (
+        <Card title='Card title'>
+            <Tabs 
+                type="line" 
+                style={{
+                    marginTop: -20,
+                    marginBottom: -20
+                }}
+            >
+                <TabPane tab="Tab 1" itemKey="1">
+                    <p>content1</p>
+                    <p>content1</p>
+                    <p>content1</p>
+                </TabPane>
+                <TabPane tab="Tab 2" itemKey="2">
+                    <p>content2</p>
+                    <p>content2</p>
+                    <p>content2</p>
+                </TabPane>
+            </Tabs>
+        </Card>
+    );
 }
 
 ```
@@ -536,28 +536,29 @@ import React from 'react';
 import { Card, Rating } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <Card
-      style={{ maxWidth: 360 }}
-      actions={[    
-        <Rating size='small' defaultValue={4}/>
-      ]}
-      headerLine={ false }
-      cover={ 
-        <img 
-          alt="example" 
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
-        />
-      }
-    >
-      <Meta 
-        title="Semi Doc" 
-        description="Easily manage your project icons and easily upload, update and share a series of project icons." 
-      />
-    </Card>
-  );
+    const { Meta } = Card;
+
+    return (
+        <Card
+            style={{ maxWidth: 360 }}
+            actions={[    
+                // eslint-disable-next-line react/jsx-key
+                <Rating size='small' defaultValue={4}/>
+            ]}
+            headerLine={ false }
+            cover={ 
+                <img 
+                    alt="example" 
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
+                />
+            }
+        >
+            <Meta 
+                title="Semi Doc" 
+                description="Easily manage your project icons and easily upload, update and share a series of project icons." 
+            />
+        </Card>
+    );
 }
 
 ```
@@ -571,42 +572,42 @@ import React, { useState } from 'react';
 import { Card, CardGroup, Typography, Slider } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-  const [ spacing, setSpacing ] = useState(12);
-
-  return (
-    <>
-      <Text>Slide to adjust the card spacing</Text>
-      <Slider 
-        defaultValue={12}
-        max={40}
-        min={10}
-        style={{ width:360 }}
-        onChange={v=> setSpacing(v)}
-      />
-      <br />
-      <CardGroup spacing={spacing}>
-          {
-            new Array(8).fill(null).map((v,idx)=>(
-              <Card 
-                key={idx}
-                shadows='hover'
-                title='Card title'
-                headerLine={false}
-                style={{ width:260 }}
-                headerExtraContent={
-                  <Text link>
-                    More
-                  </Text>
+    const { Text } = Typography;
+    const [ spacing, setSpacing ] = useState(12);
+
+    return (
+        <>
+            <Text>Slide to adjust the card spacing</Text>
+            <Slider 
+                defaultValue={12}
+                max={40}
+                min={10}
+                style={{ width:360 }}
+                onChange={v=> setSpacing(v)}
+            />
+            <br />
+            <CardGroup spacing={spacing}>
+                {
+                    new Array(8).fill(null).map((v,idx)=>(
+                        <Card 
+                            key={idx}
+                            shadows='hover'
+                            title='Card title'
+                            headerLine={false}
+                            style={{ width:260 }}
+                            headerExtraContent={
+                                <Text link>
+                                    More
+                                </Text>
+                            }
+                        >
+                            <Text>Card content</Text>
+                        </Card>
+                    ))
                 }
-              >
-                <Text>Card content</Text>
-              </Card>
-            ))
-          }
-      </CardGroup>
-    </>
-  );
+            </CardGroup>
+        </>
+    );
 }
 
 ```
@@ -620,30 +621,30 @@ import React from 'react';
 import { Card, CardGroup, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-
-  return (
-    <CardGroup type='grid'>
-      {
-        new Array(7).fill(null).map((v,idx)=>(
-          <Card 
-            key={idx}
-            shadows='hover'
-            title='Card title'
-            headerLine={false}
-            style={{ width:260 }}
-            headerExtraContent={
-              <Text link>
-                More
-              </Text>
-            }
-          >
-            <Text>Card content</Text>
-          </Card>
-        ))
-      }     
-    </CardGroup>
-  );
+    const { Text } = Typography;
+
+    return (
+        <CardGroup type='grid'>
+            {
+                new Array(7).fill(null).map((v,idx)=>(
+                    <Card 
+                        key={idx}
+                        shadows='hover'
+                        title='Card title'
+                        headerLine={false}
+                        style={{ width:260 }}
+                        headerExtraContent={
+                            <Text link>
+                                More
+                            </Text>
+                        }
+                    >
+                        <Text>Card content</Text>
+                    </Card>
+                ))
+            }     
+        </CardGroup>
+    );
 }
 
 ```

content/show/card/index.md

@@ -24,21 +24,21 @@ import React from 'react';
 import { Card, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
+    const { Text } = Typography;
   
-  return (
-    <Card 
-      title='Semi Design' 
-      style={{ maxWidth: 360 }}
-      headerExtraContent={
-        <Text link>
-          更多
-        </Text>
-      }
-    >
-        Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-    </Card>
-  );
+    return (
+        <Card 
+            title='Semi Design' 
+            style={{ maxWidth: 360 }}
+            headerExtraContent={
+                <Text link>
+                    更多
+                </Text>
+            }
+        >
+            Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+        </Card>
+    );
 }
 
 ```
@@ -53,45 +53,45 @@ import { Card, Popover, Avatar } from '@douyinfe/semi-ui';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <>
-      <Card style={{ maxWidth: 360 }} >
-        Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。
-      </Card>
-      <br />
-      <Card 
-        style={{ maxWidth: 360 }} 
-        bodyStyle={{ 
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
-        <Meta 
-          title="Semi Doc" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-        <Popover
-          position='top'
-          showArrow
-          content={
-              <article style={{ padding: 6 }}>
-                  这是一个 Card
-              </article>
-          }
-        >
-            <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
-        </Popover>
-      </Card>
-    </>
-  );
+    const { Meta } = Card;
+
+    return (
+        <>
+            <Card style={{ maxWidth: 360 }} >
+                Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。
+            </Card>
+            <br />
+            <Card 
+                style={{ maxWidth: 360 }} 
+                bodyStyle={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+                <Popover
+                    position='top'
+                    showArrow
+                    content={
+                        <article style={{ padding: 6 }}>
+                            这是一个 Card
+                        </article>
+                    }
+                >
+                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                </Popover>
+            </Card>
+        </>
+    );
 }
 
 ```
@@ -105,21 +105,21 @@ import React from 'react';
 import { Card } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <Card
-      style={{ maxWidth: 300 }}
-      cover={ 
-        <img 
-          alt="example" 
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg" 
-        />
-      }
-    >
-      <Meta title="卡片封面" />
-    </Card>
-  );
+    const { Meta } = Card;
+
+    return (
+        <Card
+            style={{ maxWidth: 300 }}
+            cover={ 
+                <img 
+                    alt="example" 
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg" 
+                />
+            }
+        >
+            <Meta title="卡片封面" />
+        </Card>
+    );
 }
 
 ```
@@ -133,24 +133,24 @@ import React from 'react';
 import { Card } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-    <div 
-      style={{
-        display: 'inline-block',
-        padding: 20,
-        backgroundColor: 'var(--semi-color-fill-0)'
-      }}
-    >
-      <Card 
-        style={{ maxWidth: 360 }}
-        bordered={false}
-        headerLine={true}
-        title='Semi Design'
-      >
-        Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
-      </Card>
-    </div>
-  );
+    return (
+        <div 
+            style={{
+                display: 'inline-block',
+                padding: 20,
+                backgroundColor: 'var(--semi-color-fill-0)'
+            }}
+        >
+            <Card 
+                style={{ maxWidth: 360 }}
+                bordered={false}
+                headerLine={true}
+                title='Semi Design'
+            >
+                Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+            </Card>
+        </div>
+    );
 }
 
 ```
@@ -166,73 +166,73 @@ import { Card, Avatar, Popover } from '@douyinfe/semi-ui';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <div>
-      <Card 
-        shadows='hover'
-        style={{ maxWidth: 360 }} 
-        bodyStyle={{ 
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
-        <Meta 
-          title="Semi Doc" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-        <Popover
-          position='top'
-          showArrow
-          content={
-              <article style={{ padding: 6 }}>
-                  这是一个 Card
-              </article>
-          }
-        >
-            <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
-        </Popover>
-      </Card>
-      <br/>
-      <Card 
-        shadows='always'
-        style={{ maxWidth: 360 }} 
-        bodyStyle={{ 
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
-        <Meta 
-          title="Semi Doc" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-        <Popover
-          position='top'
-          showArrow
-          content={
-              <article style={{ padding: 6 }}>
-                  这是一个 Card
-              </article>
-          }
-        >
-            <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
-        </Popover>
-      </Card>
-    </div>
-  );
+    const { Meta } = Card;
+
+    return (
+        <div>
+            <Card 
+                shadows='hover'
+                style={{ maxWidth: 360 }} 
+                bodyStyle={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+                <Popover
+                    position='top'
+                    showArrow
+                    content={
+                        <article style={{ padding: 6 }}>
+                            这是一个 Card
+                        </article>
+                    }
+                >
+                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                </Popover>
+            </Card>
+            <br/>
+            <Card 
+                shadows='always'
+                style={{ maxWidth: 360 }} 
+                bodyStyle={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+                <Popover
+                    position='top'
+                    showArrow
+                    content={
+                        <article style={{ padding: 6 }}>
+                            这是一个 Card
+                        </article>
+                    }
+                >
+                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                </Popover>
+            </Card>
+        </div>
+    );
 }
 
 ```
@@ -246,47 +246,47 @@ import React from 'react';
 import { Card, Avatar, Space, Button, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Meta } = Card;
-  const { Text } = Typography;
-
-  return (
-    <Card
-      style={{ maxWidth: 340 }}
-      title={
-        <Meta 
-          title="Semi Doc" 
-          description="全面、易用、优质" 
-          avatar={
-            <Avatar 
-              size="default"
-              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-            />
-          }
-        />
-      }
-      headerExtraContent={
-        <Text link>
-            More
-        </Text>
-      }
-      cover={ 
-        <img 
-          alt="example" 
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
-        />
-      }
-      footerLine={ true }
-      footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
-      footer={
-        <Space>
-          <Button theme='borderless' type='primary'>精选案例</Button>
-          <Button theme='solid' type='primary'>开始使用</Button>
-        </Space>
-      }
-    >
-      Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。
-    </Card>
-  );
+    const { Meta } = Card;
+    const { Text } = Typography;
+
+    return (
+        <Card
+            style={{ maxWidth: 340 }}
+            title={
+                <Meta 
+                    title="Semi Doc" 
+                    description="全面、易用、优质" 
+                    avatar={
+                        <Avatar 
+                            size="default"
+                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                        />
+                    }
+                />
+            }
+            headerExtraContent={
+                <Text link>
+                    More
+                </Text>
+            }
+            cover={ 
+                <img 
+                    alt="example" 
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
+                />
+            }
+            footerLine={ true }
+            footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
+            footer={
+                <Space>
+                    <Button theme='borderless' type='primary'>精选案例</Button>
+                    <Button theme='solid' type='primary'>开始使用</Button>
+                </Space>
+            }
+        >
+            Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。
+        </Card>
+    );
 }
 
 ```
@@ -301,33 +301,33 @@ import React from 'react';
 import { Card, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
+    const { Text } = Typography;
   
-  return (
-    <Card title='Card title' >
-      <Card 
-        title='Inner Card title'
-        style={{ marginBottom: 20 }}
-        headerExtraContent={
-          <Text link>
-            More
-          </Text>
-        }
-      >
-        Inner Card content
-      </Card>
-      <Card 
-        title='Inner Card title'
-        headerExtraContent={
-          <Text link>
-            More
-          </Text>
-        }
-      >
-        Inner Card content
-      </Card>
-    </Card>
-  );
+    return (
+        <Card title='Card title' >
+            <Card 
+                title='Inner Card title'
+                style={{ marginBottom: 20 }}
+                headerExtraContent={
+                    <Text link>
+                        More
+                    </Text>
+                }
+            >
+                Inner Card content
+            </Card>
+            <Card 
+                title='Inner Card title'
+                headerExtraContent={
+                    <Text link>
+                        More
+                    </Text>
+                }
+            >
+                Inner Card content
+            </Card>
+        </Card>
+    );
 }
 
 ```
@@ -341,44 +341,44 @@ import React from 'react';
 import { Card, Row, Col } from '@douyinfe/semi-ui';
 
 function Demo() {
-  return (
-    <div 
-      style={{
-        backgroundColor: 'var(--semi-color-fill-0)', 
-        padding: 20
-      }}
-    >
-      <Row gutter={[16,16]}>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-      </Row>
-      <Row gutter={[16,16]}>
-        <Col span={16}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title='Card Title' bordered={false} >
-              Card Content
-          </Card>
-        </Col>
-      </Row>
-    </div>
-  );
+    return (
+        <div 
+            style={{
+                backgroundColor: 'var(--semi-color-fill-0)', 
+                padding: 20
+            }}
+        >
+            <Row gutter={[16,16]}>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+            </Row>
+            <Row gutter={[16,16]}>
+                <Col span={16}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+                <Col span={8}>
+                    <Card title='Card Title' bordered={false} >
+                        Card Content
+                    </Card>
+                </Col>
+            </Row>
+        </div>
+    );
 }
 
 ```
@@ -392,25 +392,25 @@ import React, { useState } from 'react';
 import { Card, Switch } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const [loading, setLoading] = useState(true);
-  const { Meta } = Card;
-
-  return (
-    <>
-      <Switch onChange={ v => setLoading(!v) } />
-      <br />
-      <br />
-      <Card 
-        style={{ maxWidth: 360 }}
-        loading={ loading }
-      >
-        <Meta 
-          title="Semi Doc" 
-          description="全面、易用、优质"
-        />
-      </Card>
-    </>
-  );
+    const [loading, setLoading] = useState(true);
+    const { Meta } = Card;
+
+    return (
+        <>
+            <Switch onChange={ v => setLoading(!v) } />
+            <br />
+            <br />
+            <Card 
+                style={{ maxWidth: 360 }}
+                loading={ loading }
+            >
+                <Meta 
+                    title="Semi Doc" 
+                    description="全面、易用、优质"
+                />
+            </Card>
+        </>
+    );
 }
 
 ```
@@ -424,70 +424,70 @@ import React, { useState } from 'react';
 import { Card, Switch, Skeleton, Avatar, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const [loading, setLoading] = useState(true);
-  const { Meta } = Card;
-  const { Title, Paragraph, Image } = Skeleton;
-
-  return (
-    <>
-      <Switch onChange={ v => setLoading(!v) } />
-      <br />
-      <br />
-      <Card
-        style={{ maxWidth: 300 }}
-        title={
-          <Meta 
-            title={
-              <Skeleton
-                style={{ width:80 }}
-                placeholder={<Title />}
-                loading={loading}
-              >
-                <Typography.Title heading={5}>
-                  Semi Doc
-                </Typography.Title>
-              </Skeleton>
-            } 
-            description={
-              <Skeleton 
-                style={{ width:150, marginTop: 12 }} 
-                placeholder={<Paragraph rows={1} />} 
-                loading={loading}
-              >
-                  <Typography.Text>
-                    全面、易用、优质
-                  </Typography.Text>
-              </Skeleton>
-            }
-            avatar={
-              <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
-                <Avatar 
-                  size="default"
-                  src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
-                />
-              </Skeleton>
-            }
-          />
-        }
-        headerExtraContent={
-          <Skeleton style={{ width: 50 }} placeholder={<Paragraph rows={1} />} loading={loading}>
-            <Typography.Text link>
-                More
-            </Typography.Text>
-          </Skeleton>
-        }
-        cover={ 
-          <Skeleton style={{ maxWidth: '100%', height: 220 }} placeholder={<Image />} loading={loading}>
-            <img 
-              alt="example" 
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
-            />
-          </Skeleton> 
-        }
-      >
-      </Card>
-    </>
-  );
+    const [loading, setLoading] = useState(true);
+    const { Meta } = Card;
+    const { Title, Paragraph, Image } = Skeleton;
+
+    return (
+        <>
+            <Switch onChange={ v => setLoading(!v) } />
+            <br />
+            <br />
+            <Card
+                style={{ maxWidth: 300 }}
+                title={
+                    <Meta 
+                        title={
+                            <Skeleton
+                                style={{ width:80 }}
+                                placeholder={<Title />}
+                                loading={loading}
+                            >
+                                <Typography.Title heading={5}>
+                                    Semi Doc
+                                </Typography.Title>
+                            </Skeleton>
+                        } 
+                        description={
+                            <Skeleton 
+                                style={{ width:150, marginTop: 12 }} 
+                                placeholder={<Paragraph rows={1} />} 
+                                loading={loading}
+                            >
+                                <Typography.Text>
+                                    全面、易用、优质
+                                </Typography.Text>
+                            </Skeleton>
+                        }
+                        avatar={
+                            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
+                                <Avatar 
+                                    size="default"
+                                    src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                                />
+                            </Skeleton>
+                        }
+                    />
+                }
+                headerExtraContent={
+                    <Skeleton style={{ width: 50 }} placeholder={<Paragraph rows={1} />} loading={loading}>
+                        <Typography.Text link>
+                            More
+                        </Typography.Text>
+                    </Skeleton>
+                }
+                cover={ 
+                    <Skeleton style={{ maxWidth: '100%', height: 220 }} placeholder={<Image />} loading={loading}>
+                        <img 
+                            alt="example" 
+                            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
+                        />
+                    </Skeleton> 
+                }
+            >
+            </Card>
+        </>
+    );
 }
 
 ```
@@ -501,28 +501,28 @@ import React from 'react';
 import { Card, Tabs, TabPane } from '@douyinfe/semi-ui';
 
 function demo() {
-  return (
-    <Card title='Card title'>
-      <Tabs 
-        type="line" 
-        style={{
-          marginTop: -20,
-          marginBottom: -20
-        }}
-      >
-        <TabPane tab="Tab 1" itemKey="1">
-          <p>content1</p>
-          <p>content1</p>
-          <p>content1</p>
-        </TabPane>
-        <TabPane tab="Tab 2" itemKey="2">
-          <p>content2</p>
-          <p>content2</p>
-          <p>content2</p>
-        </TabPane>
-      </Tabs>
-    </Card>
-  );
+    return (
+        <Card title='Card title'>
+            <Tabs 
+                type="line" 
+                style={{
+                    marginTop: -20,
+                    marginBottom: -20
+                }}
+            >
+                <TabPane tab="Tab 1" itemKey="1">
+                    <p>content1</p>
+                    <p>content1</p>
+                    <p>content1</p>
+                </TabPane>
+                <TabPane tab="Tab 2" itemKey="2">
+                    <p>content2</p>
+                    <p>content2</p>
+                    <p>content2</p>
+                </TabPane>
+            </Tabs>
+        </Card>
+    );
 }
 
 ```
@@ -536,28 +536,29 @@ import React from 'react';
 import { Card, Rating } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Meta } = Card;
-
-  return (
-    <Card
-      style={{ maxWidth: 300 }}
-      actions={[    
-        <Rating size='small' defaultValue={4}/>
-      ]}
-      headerLine={ false }
-      cover={ 
-        <img 
-          alt="example" 
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
-        />
-      }
-    >
-      <Meta 
-        title="Semi Doc" 
-        description="全面、易用、优质" 
-      />
-    </Card>
-  );
+    const { Meta } = Card;
+
+    return (
+        <Card
+            style={{ maxWidth: 300 }}
+            actions={[    
+                // eslint-disable-next-line react/jsx-key
+                <Rating size='small' defaultValue={4}/>
+            ]}
+            headerLine={ false }
+            cover={ 
+                <img 
+                    alt="example" 
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
+                />
+            }
+        >
+            <Meta 
+                title="Semi Doc" 
+                description="全面、易用、优质" 
+            />
+        </Card>
+    );
 }
 
 ```
@@ -571,42 +572,42 @@ import React, { useState } from 'react';
 import { Card, CardGroup, Typography, Slider } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-  const [ spacing, setSpacing ] = useState(12);
-
-  return (
-    <>
-      <Text>滑动调节 Card 间距</Text>
-      <Slider 
-        defaultValue={12}
-        max={40}
-        min={10}
-        style={{ width:360 }}
-        onChange={v=> setSpacing(v)}
-      />
-      <br />
-      <CardGroup spacing={spacing}>
-          {
-            new Array(8).fill(null).map((v,idx)=>(
-              <Card 
-                key={idx}
-                shadows='hover'
-                title='Card title'
-                headerLine={false}
-                style={{ width:260 }}
-                headerExtraContent={
-                  <Text link>
-                    More
-                  </Text>
+    const { Text } = Typography;
+    const [ spacing, setSpacing ] = useState(12);
+
+    return (
+        <>
+            <Text>滑动调节 Card 间距</Text>
+            <Slider 
+                defaultValue={12}
+                max={40}
+                min={10}
+                style={{ width:360 }}
+                onChange={v=> setSpacing(v)}
+            />
+            <br />
+            <CardGroup spacing={spacing}>
+                {
+                    new Array(8).fill(null).map((v,idx)=>(
+                        <Card 
+                            key={idx}
+                            shadows='hover'
+                            title='Card title'
+                            headerLine={false}
+                            style={{ width:260 }}
+                            headerExtraContent={
+                                <Text link>
+                                    More
+                                </Text>
+                            }
+                        >
+                            <Text>Card content</Text>
+                        </Card>
+                    ))
                 }
-              >
-                <Text>Card content</Text>
-              </Card>
-            ))
-          }
-      </CardGroup>
-    </>
-  );
+            </CardGroup>
+        </>
+    );
 }
 
 ```
@@ -620,30 +621,30 @@ import React from 'react';
 import { Card, CardGroup, Typography } from '@douyinfe/semi-ui';
 
 function Demo() {
-  const { Text } = Typography;
-
-  return (
-    <CardGroup type='grid'>
-      {
-        new Array(7).fill(null).map((v,idx)=>(
-          <Card 
-            key={idx}
-            shadows='hover'
-            title='Card title'
-            headerLine={false}
-            style={{ width:260 }}
-            headerExtraContent={
-              <Text link>
-                More
-              </Text>
-            }
-          >
-            <Text>Card content</Text>
-          </Card>
-        ))
-      }     
-    </CardGroup>
-  );
+    const { Text } = Typography;
+
+    return (
+        <CardGroup type='grid'>
+            {
+                new Array(7).fill(null).map((v,idx)=>(
+                    <Card 
+                        key={idx}
+                        shadows='hover'
+                        title='Card title'
+                        headerLine={false}
+                        style={{ width:260 }}
+                        headerExtraContent={
+                            <Text link>
+                                More
+                            </Text>
+                        }
+                    >
+                        <Text>Card content</Text>
+                    </Card>
+                ))
+            }     
+        </CardGroup>
+    );
 }
 
 ```

content/show/collapse/index-en-US.md

@@ -163,17 +163,22 @@ import { IconCopy } from '@douyinfe/semi-icons';
     You can prevent the event from bubbling to Collapse.Header in the onClick event callback of the custom element. If the custom element does not provide an event object, wrap a layer of div to prevent bubbling in the div onClick.
 
 ```jsx
-<Collapse>
-    <Collapse.Panel
-        header={
-            <div style={{ display: 'inline-flex' }} onClick={e => e.stopPropagation()}>
-                <span>Panel header</span>
-                <Input />
-            </div>
-        }
-        itemKey="1"
-    >
-        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
-    </Collapse.Panel>
-</Collapse>
+import React from 'react';
+import { Collapse, Input } from '@douyinfe/semi-ui';
+
+() => (
+    <Collapse>
+        <Collapse.Panel
+            header={
+                <div style={{ display: 'inline-flex' }} onClick={e => e.stopPropagation()}>
+                    <span>Panel header</span>
+                    <Input />
+                </div>
+            }
+            itemKey="1"
+        >
+            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+        </Collapse.Panel>
+    </Collapse>
+);
 ```

content/show/collapse/index.md

@@ -167,17 +167,22 @@ import { IconCopy } from '@douyinfe/semi-icons';
     可以在自定义元素的 onClick 事件回调中，阻止事件冒泡至 Collapse.Header 即可。若自定义元素未提供 event 对象，再包裹一层 div，于 div onClick 中阻止冒泡亦可。
 
 ```jsx
-<Collapse>
-    <Collapse.Panel
-        header={
-            <div style={{ display: 'inline-flex' }} onClick={e => e.stopPropagation()}>
-                <span>Panel header</span>
-                <Input />
-            </div>
-        }
-        itemKey="1"
-    >
-        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
-    </Collapse.Panel>
-</Collapse>
+import React from 'react';
+import { Collapse, Input } from '@douyinfe/semi-ui';
+
+() => (
+    <Collapse>
+        <Collapse.Panel
+            header={
+                <div style={{ display: 'inline-flex' }} onClick={e => e.stopPropagation()}>
+                    <span>Panel header</span>
+                    <Input />
+                </div>
+            }
+            itemKey="1"
+        >
+            <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+        </Collapse.Panel>
+    </Collapse>
+);
 ```

content/show/collapsible/index-en-US.md

@@ -257,9 +257,9 @@ class Demo extends React.Component {
         const maskStyle = isOpen
             ? {}
             : {
-                  WebkitMaskImage:
+                WebkitMaskImage:
                       'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',
-              };
+            };
         const collapsed = (
             <div>
                 <p>Nothing can ever happen twice.</p>

content/show/collapsible/index.md

@@ -290,9 +290,9 @@ class Demo extends React.Component {
         const maskStyle = isOpen
             ? {}
             : {
-                  WebkitMaskImage:
+                WebkitMaskImage:
                       'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',
-              };
+            };
         const collapsed = (
             <ul>
                 <li>

content/show/dropdown/index-en-US.md

@@ -136,7 +136,7 @@ function Demo() {
                 visible
                 render={
                     <Dropdown.Menu>
-                        <Dropdown.Item icon={<Icon type="box" />} active>
+                        <Dropdown.Item icon={<IconBox />} active>
                             Menu Item 1
                         </Dropdown.Item>
                         <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>

content/show/list/index-en-US.md

@@ -92,6 +92,7 @@ import { List, ButtonGroup, Button, Avatar } from '@douyinfe/semi-ui';
 class ContentList extends React.Component {
     render() {
         const data = [
+            // eslint-disable-next-line react/jsx-key
             <p
                 style={{
                     color: 'var(--semi-color-text-2)',
@@ -102,15 +103,17 @@ class ContentList extends React.Component {
                     textOverflow: 'ellipsis',
                 }}
             >
-                Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is
-                heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.
+                {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is
+                heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
             </p>,
+            // eslint-disable-next-line react/jsx-key
             <p style={{ color: 'var(--semi-color-text-2)', margin: '4px 0', width: 500 }}>
                 Come what come may, time and the hour run through the roughest day.
             </p>,
+            // eslint-disable-next-line react/jsx-key
             <p style={{ color: 'var(--semi-color-text-2)', margin: '4px 0', width: 500 }}>
-                Where shall we three meet again in thunder, lightning, or in rain? When the hurlyburly's done, when the
-                battle's lost and won
+                {`Where shall we three meet again in thunder, lightning, or in rain? When the hurlyburly's done, when the
+                battle's lost and won`}
             </p>,
         ];
 
@@ -181,9 +184,9 @@ class LayoutList extends React.Component {
                                 <div>
                                     <span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.title}</span>
                                     <p style={{ color: 'var(--semi-color-text-2)', margin: '4px 0' }}>
-                                        Life's but a walking shadow, a poor player, that struts and frets his hour upon
+                                        {` Life's but a walking shadow, a poor player, that struts and frets his hour upon
                                         the stage, and then is heard no more; it is a tale told by an idiot, full of
-                                        sound and fury, signifying nothing.
+                                        sound and fury, signifying nothing.`}
                                     </p>
                                 </div>
                             }
@@ -500,7 +503,7 @@ You can integrate [react-infinite-scroller](https://github.com/CassetteRocks/rea
 
 ```jsx live=true dir="column" noInline=true hideInDSM
 import React from 'react';
-import { List, Avatar, Spin } from '@douyinfe/semi-ui';
+import { List, Avatar, Spin, Button } from '@douyinfe/semi-ui';
 import InfiniteScroll from 'react-infinite-scroller';
 
 class ScrollLoad extends React.Component {
@@ -569,7 +572,7 @@ class ScrollLoad extends React.Component {
 
         return (
             <div
-                class
+                className
                 Name="light-scrollbar"
                 style={{ height: 420, overflow: 'auto', border: '1px solid var(--semi-color-border)', padding: 10 }}
             >

content/show/list/index.md

@@ -91,6 +91,7 @@ import { List, Avatar, ButtonGroup, Button } from '@douyinfe/semi-ui';
 class ContentList extends React.Component {
     render() {
         const data = [
+            // eslint-disable-next-line react/jsx-key
             <p
                 style={{
                     color: 'var(--semi-color-text-2)',
@@ -105,11 +106,13 @@ class ContentList extends React.Component {
                 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
                 Web 应用。
             </p>,
+            // eslint-disable-next-line react/jsx-key
             <p style={{ color: 'var(--semi-color-text-2)', margin: '4px 0', width: 500 }}>
                 Semi Design 是由互娱社区前端团队与 UED
                 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
                 Web 应用。
             </p>,
+            // eslint-disable-next-line react/jsx-key
             <p style={{ color: 'var(--semi-color-text-2)', margin: '4px 0', width: 500 }}>
                 Semi Design 以用户中心、内容优先、设计人性化的设计系统，打造一致、好看、好用、高效的用户体验。
             </p>,
@@ -205,7 +208,7 @@ render(LayoutList);
 
 ```jsx live=true dir="column" noInline=true
 import React from 'react';
-import { List, Descriptions, ButtonGroup, Butto, Rating } from '@douyinfe/semi-ui';
+import { List, Descriptions, ButtonGroup, Rating, Button } from '@douyinfe/semi-ui';
 
 class LayoutList extends React.Component {
     render() {

content/show/modal/index-en-US.md

@@ -23,51 +23,51 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-      console.log('Ok button clicked')
-  }
-  handleAfterClose(){
-    console.log('After Close callback executed')
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-    console.log('Cancel button clicked')
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>Open Modal</Button>
-        <Modal
-          title="Basic Modal"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          afterClose={this.handleAfterClose} // >= 1.16.0
-          onCancel={this.handleCancel}
-        >
-          This is the content of a basic modal.
-          <br/>
-          More content...
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+        console.log('Ok button clicked');
+    }
+    handleAfterClose(){
+        console.log('After Close callback executed');
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+        console.log('Cancel button clicked');
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>Open Modal</Button>
+                <Modal
+                    title="Basic Modal"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    afterClose={this.handleAfterClose} // >= 1.16.0
+                    onCancel={this.handleCancel}
+                >
+                    This is the content of a basic modal.
+                    <br/>
+                    More content...
+                </Modal>
+            </>
+        );
+    }
 }
 
 ```
@@ -81,45 +81,45 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>Mask Not Closable</Button>
-        <Modal
-          title="Modal Title"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          maskClosable={false}
-        >
-          <p>This is a modal that cannot be closed by clicking on the mask.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>Mask Not Closable</Button>
+                <Modal
+                    title="Modal Title"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    maskClosable={false}
+                >
+                    <p>This is a modal that cannot be closed by clicking on the mask.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -134,46 +134,46 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>Custom Button Text</Button>
-        <Modal
-          title="Custom Button Text"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          okText={'Sounds great!'}
-          cancelText={'No, thanks.'}
-        >
-          <p>This is a modal with customized button texts.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>Custom Button Text</Button>
+                <Modal
+                    title="Custom Button Text"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    okText={'Sounds great!'}
+                    cancelText={'No, thanks.'}
+                >
+                    <p>This is a modal with customized button texts.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -186,46 +186,46 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>Custom Button Properties</Button>
-        <Modal
-          title="Custom Button Properties"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          okButtonProps={{size: 'small', type: 'warning'}}
-          cancelButtonProps={{size: 'small', disabled: true}}
-        >
-          <p>This is a modal with customized button props.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>Custom Button Properties</Button>
+                <Modal
+                    title="Custom Button Properties"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    okButtonProps={{size: 'small', type: 'warning'}}
+                    cancelButtonProps={{size: 'small', disabled: true}}
+                >
+                    <p>This is a modal with customized button props.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -238,49 +238,49 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>Customized Footer</Button>
-        <Modal
-          title="Customized Footer"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={
-            <Button type="primary" onClick={this.handleOk}>
-              Yes, I Understand
-            </Button>
-          }
-        >
-          <p>This is a modal with a customized footer.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>Customized Footer</Button>
+                <Modal
+                    title="Customized Footer"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    footer={
+                        <Button type="primary" onClick={this.handleOk}>
+                            Yes, I Understand
+                        </Button>
+                    }
+                >
+                    <p>This is a modal with a customized footer.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -293,53 +293,53 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>Custom Style</Button>
-        <Modal
-          title="Custom Style"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          centered
-          bodyStyle={{overflow: 'auto', height: 200}}
-        >
-            <p style={{lineHeight: 1.8}}>Semi Design is a design system developed and maintained by IES Front-end Team and UED Team</p>
-            <p style={{lineHeight: 1.8}}>Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience with a user-centric, content-first, and human-friendly design system.
-            </p>
-            <ul>
-              <li><p>Content-first</p></li>
-              <li><p>Customized theming</p></li>
-              <li><p>Internationalized</p></li>
-              <li><p>Humanism</p></li>
-            </ul>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>Custom Style</Button>
+                <Modal
+                    title="Custom Style"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    centered
+                    bodyStyle={{overflow: 'auto', height: 200}}
+                >
+                    <p style={{lineHeight: 1.8}}>Semi Design is a design system developed and maintained by IES Front-end Team and UED Team</p>
+                    <p style={{lineHeight: 1.8}}>Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience with a user-centric, content-first, and human-friendly design system.
+                    </p>
+                    <ul>
+                        <li><p>Content-first</p></li>
+                        <li><p>Customized theming</p></li>
+                        <li><p>Internationalized</p></li>
+                        <li><p>Humanism</p></li>
+                    </ul>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -353,90 +353,90 @@ import { Modal, Button, List } from '@douyinfe/semi-ui';
 import { IconVigoLogo, IconSemiLogo } from '@douyinfe/semi-icons';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    const data = [
-      {
-        icon: <IconSemiLogo style={{fontSize: 48}} />,
-        title: 'Boost new feature adoption with Integration',
-        content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
-      },
-      {
-        icon: <IconVigoLogo style={{fontSize: 48}} />,
-        title: 'Introducing Dark Mode',
-        content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
-      },
-      {
-        icon: <IconSemiLogo style={{fontSize: 48}} />,
-        title: 'New List Component',
-        content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
-      },
-    ];
-    const btnStyle = {
-      width: 240,
-      margin: '4px 50px',
-    };
-    const footer = (
-      <div style={{textAlign: 'center'}}>
-        <Button type="primary" theme="solid" onClick={this.handleOk} style={btnStyle}>
-          Continue
-        </Button>
-        <Button type="primary" theme="borderless" onClick={this.handleCancel} style={btnStyle}>
-          Learn more features
-        </Button>
-      </div>
-    );
-    return (
-      <>
-        <Button onClick={this.showDialog}>Customized Modal</Button>
-        <Modal
-          header={null}
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={footer}
-        >
-          <h3 style={{textAlign: 'center', fontSize: 24, margin: 40}}>Semi Design New Features</h3>
-          <List
-            dataSource={data}
-            split={false}
-            renderItem={item => (
-                <List.Item
-                    header={item.icon}
-                    main={
-                        <div>
-                            <h6 style={{margin: 0, fontSize: 16}}>{item.title}</h6>
-                            <p style={{marginTop: 4, color: 'var(--semi-color-text-1)'}}>{item.content}</p>
-                        </div>
-                    }
-                />)
-            }
-          />
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        const data = [
+            {
+                icon: <IconSemiLogo style={{fontSize: 48}} />,
+                title: 'Boost new feature adoption with Integration',
+                content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
+            },
+            {
+                icon: <IconVigoLogo style={{fontSize: 48}} />,
+                title: 'Introducing Dark Mode',
+                content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
+            },
+            {
+                icon: <IconSemiLogo style={{fontSize: 48}} />,
+                title: 'New List Component',
+                content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
+            },
+        ];
+        const btnStyle = {
+            width: 240,
+            margin: '4px 50px',
+        };
+        const footer = (
+            <div style={{textAlign: 'center'}}>
+                <Button type="primary" theme="solid" onClick={this.handleOk} style={btnStyle}>
+                    Continue
+                </Button>
+                <Button type="primary" theme="borderless" onClick={this.handleCancel} style={btnStyle}>
+                    Learn more features
+                </Button>
+            </div>
+        );
+        return (
+            <>
+                <Button onClick={this.showDialog}>Customized Modal</Button>
+                <Modal
+                    header={null}
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    footer={footer}
+                >
+                    <h3 style={{textAlign: 'center', fontSize: 24, margin: 40}}>Semi Design New Features</h3>
+                    <List
+                        dataSource={data}
+                        split={false}
+                        renderItem={item => (
+                            <List.Item
+                                header={item.icon}
+                                main={
+                                    <div>
+                                        <h6 style={{margin: 0, fontSize: 16}}>{item.title}</h6>
+                                        <p style={{marginTop: 4, color: 'var(--semi-color-text-1)'}}>{item.content}</p>
+                                    </div>
+                                }
+                            />)
+                        }
+                    />
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -449,26 +449,26 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 () => {
-  const [visible, setVisible] = useState(false);
-  const onClose = () => {
-    setVisible(false);
-  }
-  return (
-    <>
-        <Button onClick={() => setVisible(true)}>Open Full Screen Modal</Button>
-        <Modal
-          title="Title of Modal"
-          fullScreen
-          visible={visible}
-          onOk={onClose}
-          onCancel={onClose}
-        >
-          <p>This is a full screen modal</p>
-          <p>More content...</p>
-        </Modal>
-    </>
-  )
-}
+    const [visible, setVisible] = useState(false);
+    const onClose = () => {
+        setVisible(false);
+    };
+    return (
+        <>
+            <Button onClick={() => setVisible(true)}>Open Full Screen Modal</Button>
+            <Modal
+                title="Title of Modal"
+                fullScreen
+                visible={visible}
+                onOk={onClose}
+                onCancel={onClose}
+            >
+                <p>This is a full screen modal</p>
+                <p>More content...</p>
+            </Modal>
+        </>
+    );
+};
 ```
 
 ### Confirm Modal
@@ -481,79 +481,78 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 import { IconSend } from '@douyinfe/semi-icons';
 
 ModalComponent = function(props) {
-  function success() {
-    Modal.success({ 'title': 'This is a success message', 'content': 'bla bla bla...'});
-  }
-
-  function info() {
-      Modal.info({ 'title': 'Here is some info', 'content': 'bla bla bla...' });
-  }
-
-  function error() {
-      Modal.error({ 'title': 'Unfortunately, there is an error', 'content': 'bla bla bla...' });
-  }
-
-  function warning() {
-      Modal.warning({ 'title': 'Warning: be cautious ahead', 'content': 'bla bla bla...' });
-  }
-
-  function confirm() {
-      Modal.confirm({ 'title': 'Are you sure ?', 'content': 'bla bla bla...' });
-  }
-
-  function custom() {
-      Modal.info({ 'title': 'This is a custom modal', 'content': 'bla bla bla...', icon: <IconSend />, cancelButtonProps: { theme: 'borderless' }, okButtonProps: { theme: 'solid' }, });
-  }
-
-  return (
-    <div>
-        <Button onClick={info}>Info</Button>
-        <br/>
-        <br/>
-        <Button onClick={success}>Success</Button>
-        <br/>
-        <br/>
-        <Button onClick={error} type="danger">Error</Button>
-        <br/>
-        <br/>
-        <Button onClick={warning} type="warning">Warning</Button>
-        <br/>
-        <br/>
-        <Button onClick={confirm} type="primary">Confirm</Button>
-        <br/>
-        <br/>
-        <Button onClick={custom}>Custom</Button>
-    </div>
-  )
-}
+    function success() {
+        Modal.success({ 'title': 'This is a success message', 'content': 'bla bla bla...'});
+    }
+
+    function info() {
+        Modal.info({ 'title': 'Here is some info', 'content': 'bla bla bla...' });
+    }
+
+    function error() {
+        Modal.error({ 'title': 'Unfortunately, there is an error', 'content': 'bla bla bla...' });
+    }
+
+    function warning() {
+        Modal.warning({ 'title': 'Warning: be cautious ahead', 'content': 'bla bla bla...' });
+    }
+
+    function confirm() {
+        Modal.confirm({ 'title': 'Are you sure ?', 'content': 'bla bla bla...' });
+    }
+
+    function custom() {
+        Modal.info({ 'title': 'This is a custom modal', 'content': 'bla bla bla...', icon: <IconSend />, cancelButtonProps: { theme: 'borderless' }, okButtonProps: { theme: 'solid' }, });
+    }
+
+    return (
+        <div>
+            <Button onClick={info}>Info</Button>
+            <br/>
+            <br/>
+            <Button onClick={success}>Success</Button>
+            <br/>
+            <br/>
+            <Button onClick={error} type="danger">Error</Button>
+            <br/>
+            <br/>
+            <Button onClick={warning} type="warning">Warning</Button>
+            <br/>
+            <br/>
+            <Button onClick={confirm} type="primary">Confirm</Button>
+            <br/>
+            <br/>
+            <Button onClick={custom}>Custom</Button>
+        </div>
+    );
+};
 ```
 
 ### useModal Hooks
 You could use `Modal.useModal` to create a `contextHolder` that could access context.
 ```jsx live=true hideInDSM
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
 import { ConfigProvider, Modal, Button } from '@douyinfe/semi-ui';
 import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
 
 function Demo(props = {}) {
-  const [modal, contextHolder] = Modal.useModal();
-  const config = { 'title': 'This is a success message', 'content': 'Context consumer' }
+    const [modal, contextHolder] = Modal.useModal();
+    const config = { 'title': 'This is a success message', 'content': 'Context consumer' };
 
-  return (
-      <ConfigProvider locale={en_GB}>
-        <div>
-            <Button
-                onClick={() => {
-                    modal.confirm(config);
-                }}
-            >
-              Confirm Modal
-          </Button>
-        </div>
-        {contextHolder}
-      </ConfigProvider>
-  );
+    return (
+        <ConfigProvider locale={en_GB}>
+            <div>
+                <Button
+                    onClick={() => {
+                        modal.confirm(config);
+                    }}
+                >
+                    Confirm Modal
+                </Button>
+            </div>
+            {contextHolder}
+        </ConfigProvider>
+    );
 }
 ```
 

content/show/modal/index.md

@@ -23,51 +23,51 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-      console.log('Ok button clicked')
-  }
-  handleAfterClose(){
-    console.log('After Close callback executed')
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-    console.log('Cancel button clicked')
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>打开弹窗</Button>
-        <Modal
-          title="基本对话框"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          afterClose={this.handleAfterClose} //>=1.16.0
-          onCancel={this.handleCancel}
-        >
-          This is the content of a basic modal.
-          <br/>
-          More content...
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+        console.log('Ok button clicked');
+    }
+    handleAfterClose(){
+        console.log('After Close callback executed');
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+        console.log('Cancel button clicked');
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>打开弹窗</Button>
+                <Modal
+                    title="基本对话框"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    afterClose={this.handleAfterClose} //>=1.16.0
+                    onCancel={this.handleCancel}
+                >
+                    This is the content of a basic modal.
+                    <br/>
+                    More content...
+                </Modal>
+            </>
+        );
+    }
 }
 
 ```
@@ -81,45 +81,45 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>点击遮罩层不可关闭</Button>
-        <Modal
-          title="对话框标题"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          maskClosable={false}
-        >
-          <p>This is a modal that cannot be closed by clicking on the mask.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>点击遮罩层不可关闭</Button>
+                <Modal
+                    title="对话框标题"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    maskClosable={false}
+                >
+                    <p>This is a modal that cannot be closed by clicking on the mask.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -134,46 +134,46 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>自定义按钮文字</Button>
-        <Modal
-          title="自定义按钮文字"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          okText={'Sounds great!'}
-          cancelText={'No, thanks.'}
-        >
-          <p>This is a modal with customized button texts.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>自定义按钮文字</Button>
+                <Modal
+                    title="自定义按钮文字"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    okText={'Sounds great!'}
+                    cancelText={'No, thanks.'}
+                >
+                    <p>This is a modal with customized button texts.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -186,46 +186,46 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>自定义按钮属性</Button>
-        <Modal
-          title="自定义按钮属性"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          okButtonProps={{size: 'small', type: 'warning'}}
-          cancelButtonProps={{size: 'small', disabled: true}}
-        >
-          <p>This is a modal with customized button props.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>自定义按钮属性</Button>
+                <Modal
+                    title="自定义按钮属性"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    okButtonProps={{size: 'small', type: 'warning'}}
+                    cancelButtonProps={{size: 'small', disabled: true}}
+                >
+                    <p>This is a modal with customized button props.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -238,49 +238,49 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>自定义页脚样式</Button>
-        <Modal
-          title="自定义页脚"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={
-            <Button type="primary" onClick={this.handleOk}>
-              Yes, I Understand
-            </Button>
-          }
-        >
-          <p>This is a modal with a customized footer.</p>
-          <p>More content...</p>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>自定义页脚样式</Button>
+                <Modal
+                    title="自定义页脚"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    footer={
+                        <Button type="primary" onClick={this.handleOk}>
+                            Yes, I Understand
+                        </Button>
+                    }
+                >
+                    <p>This is a modal with a customized footer.</p>
+                    <p>More content...</p>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -294,52 +294,52 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    return (
-      <>
-        <Button onClick={this.showDialog}>自定义对话框样式</Button>
-        <Modal
-          title="自定义样式"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          centered
-          bodyStyle={{overflow: 'auto', height: 200}}
-        >
-            <p style={{lineHeight: 1.8}}>Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
-            <p style={{lineHeight: 1.8}}>区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
-            <ul>
-              <li><p>Semi Design 以内容优先进行设计。</p></li>
-              <li><p>更容易地自定义主题。</p></li>
-              <li><p>适用国际化场景。</p></li>
-              <li><p>效率场景加入人性化关怀</p></li>
-            </ul>
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        return (
+            <>
+                <Button onClick={this.showDialog}>自定义对话框样式</Button>
+                <Modal
+                    title="自定义样式"
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    centered
+                    bodyStyle={{overflow: 'auto', height: 200}}
+                >
+                    <p style={{lineHeight: 1.8}}>Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
+                    <p style={{lineHeight: 1.8}}>区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
+                    <ul>
+                        <li><p>Semi Design 以内容优先进行设计。</p></li>
+                        <li><p>更容易地自定义主题。</p></li>
+                        <li><p>适用国际化场景。</p></li>
+                        <li><p>效率场景加入人性化关怀</p></li>
+                    </ul>
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -353,90 +353,90 @@ import { Modal, Button, List } from '@douyinfe/semi-ui';
 import { IconVigoLogo, IconSemiLogo } from '@douyinfe/semi-icons';
 
 class modalDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {visible: false};
-    this.showDialog = this.showDialog.bind(this);
-    this.handleOk = this.handleOk.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-  showDialog() {
-    this.setState({
-      visible: true
-    });
-  }
-  handleOk(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  handleCancel(e) {
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    const data = [
-      {
-        icon: <IconSemiLogo style={{fontSize: 48}} />,
-        title: 'Boost new feature adoption with Integration',
-        content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
-      },
-      {
-        icon: <IconVigoLogo style={{fontSize: 48}} />,
-        title: 'Introducing Dark Mode',
-        content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
-      },
-      {
-        icon: <IconSemiLogo style={{fontSize: 48}} />,
-        title: 'New List Component',
-        content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
-      },
-    ];
-    const btnStyle = {
-      width: 240,
-      margin: '4px 50px',
-    };
-    const footer = (
-      <div style={{textAlign: 'center'}}>
-        <Button type="primary" theme="solid" onClick={this.handleOk} style={btnStyle}>
-          Continue
-        </Button>
-        <Button type="primary" theme="borderless" onClick={this.handleCancel} style={btnStyle}>
-          Learn more features
-        </Button>
-      </div>
-    );
-    return (
-      <>
-        <Button onClick={this.showDialog}>自定义对话框</Button>
-        <Modal
-          header={null}
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={footer}
-        >
-          <h3 style={{textAlign: 'center', fontSize: 24, margin: 40}}>Semi Design New Features</h3>
-          <List
-            dataSource={data}
-            split={false}
-            renderItem={item => (
-                <List.Item
-                    header={item.icon}
-                    main={
-                        <div>
-                            <h6 style={{margin: 0, fontSize: 16}}>{item.title}</h6>
-                            <p style={{marginTop: 4, color: 'var(--semi-color-text-1)'}}>{item.content}</p>
-                        </div>
-                    }
-                />)
-            }
-          />
-        </Modal>
-      </>
-    );
-  }
+    constructor() {
+        super();
+        this.state = {visible: false};
+        this.showDialog = this.showDialog.bind(this);
+        this.handleOk = this.handleOk.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+    showDialog() {
+        this.setState({
+            visible: true
+        });
+    }
+    handleOk(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    handleCancel(e) {
+        this.setState({
+            visible: false
+        });
+    }
+    render() {
+        const data = [
+            {
+                icon: <IconSemiLogo style={{fontSize: 48}} />,
+                title: 'Boost new feature adoption with Integration',
+                content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
+            },
+            {
+                icon: <IconVigoLogo style={{fontSize: 48}} />,
+                title: 'Introducing Dark Mode',
+                content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
+            },
+            {
+                icon: <IconSemiLogo style={{fontSize: 48}} />,
+                title: 'New List Component',
+                content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
+            },
+        ];
+        const btnStyle = {
+            width: 240,
+            margin: '4px 50px',
+        };
+        const footer = (
+            <div style={{textAlign: 'center'}}>
+                <Button type="primary" theme="solid" onClick={this.handleOk} style={btnStyle}>
+                    Continue
+                </Button>
+                <Button type="primary" theme="borderless" onClick={this.handleCancel} style={btnStyle}>
+                    Learn more features
+                </Button>
+            </div>
+        );
+        return (
+            <>
+                <Button onClick={this.showDialog}>自定义对话框</Button>
+                <Modal
+                    header={null}
+                    visible={this.state.visible}
+                    onOk={this.handleOk}
+                    onCancel={this.handleCancel}
+                    footer={footer}
+                >
+                    <h3 style={{textAlign: 'center', fontSize: 24, margin: 40}}>Semi Design New Features</h3>
+                    <List
+                        dataSource={data}
+                        split={false}
+                        renderItem={item => (
+                            <List.Item
+                                header={item.icon}
+                                main={
+                                    <div>
+                                        <h6 style={{margin: 0, fontSize: 16}}>{item.title}</h6>
+                                        <p style={{marginTop: 4, color: 'var(--semi-color-text-1)'}}>{item.content}</p>
+                                    </div>
+                                }
+                            />)
+                        }
+                    />
+                </Modal>
+            </>
+        );
+    }
 }
 ```
 
@@ -450,26 +450,26 @@ import React from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
 
 () => {
-  const [visible, setVisible] = useState(false);
-  const onClose = () => {
-    setVisible(false);
-  }
-  return (
-    <>
-        <Button onClick={() => setVisible(true)}>打开全屏弹窗</Button>
-        <Modal
-          title="全屏对话框标题"
-          fullScreen
-          visible={visible}
-          onOk={onClose}
-          onCancel={onClose}
-        >
-          <p>This is a full screen modal</p>
-          <p>More content...</p>
-        </Modal>
-    </>
-  )
-}
+    const [visible, setVisible] = useState(false);
+    const onClose = () => {
+        setVisible(false);
+    };
+    return (
+        <>
+            <Button onClick={() => setVisible(true)}>打开全屏弹窗</Button>
+            <Modal
+                title="全屏对话框标题"
+                fullScreen
+                visible={visible}
+                onOk={onClose}
+                onCancel={onClose}
+            >
+                <p>This is a full screen modal</p>
+                <p>More content...</p>
+            </Modal>
+        </>
+    );
+};
 ```
 
 
@@ -484,79 +484,78 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 import { IconSend } from '@douyinfe/semi-icons';
 
 ModalComponent = function(props) {
-  function success() {
-    Modal.success({ 'title': 'This is a success message', 'content': 'bla bla bla...'});
-  }
-
-  function info() {
-      Modal.info({ 'title': 'Here is some info', 'content': 'bla bla bla...' });
-  }
-
-  function error() {
-      Modal.error({ 'title': 'Unfortunately, there is an error', 'content': 'bla bla bla...' });
-  }
-
-  function warning() {
-      Modal.warning({ 'title': 'Warning: be cautious ahead', 'content': 'bla bla bla...' });
-  }
-
-  function confirm() {
-      Modal.confirm({ 'title': 'Are you sure ?', 'content': 'bla bla bla...' });
-  }
-
-  function custom() {
-      Modal.info({ 'title': 'This is a custom modal', 'content': 'bla bla bla...', icon: <IconSend />, cancelButtonProps: { theme: 'borderless' }, okButtonProps: { theme: 'solid' }, });
-  }
-
-  return (
-    <div>
-        <Button onClick={info}>Info</Button>
-        <br/>
-        <br/>
-        <Button onClick={success}>Success</Button>
-        <br/>
-        <br/>
-        <Button onClick={error} type="danger">Error</Button>
-        <br/>
-        <br/>
-        <Button onClick={warning} type="warning">Warning</Button>
-        <br/>
-        <br/>
-        <Button onClick={confirm} type="primary">Confirm</Button>
-        <br/>
-        <br/>
-        <Button onClick={custom}>Custom</Button>
-    </div>
-  )
-}
+    function success() {
+        Modal.success({ 'title': 'This is a success message', 'content': 'bla bla bla...'});
+    }
+
+    function info() {
+        Modal.info({ 'title': 'Here is some info', 'content': 'bla bla bla...' });
+    }
+
+    function error() {
+        Modal.error({ 'title': 'Unfortunately, there is an error', 'content': 'bla bla bla...' });
+    }
+
+    function warning() {
+        Modal.warning({ 'title': 'Warning: be cautious ahead', 'content': 'bla bla bla...' });
+    }
+
+    function confirm() {
+        Modal.confirm({ 'title': 'Are you sure ?', 'content': 'bla bla bla...' });
+    }
+
+    function custom() {
+        Modal.info({ 'title': 'This is a custom modal', 'content': 'bla bla bla...', icon: <IconSend />, cancelButtonProps: { theme: 'borderless' }, okButtonProps: { theme: 'solid' }, });
+    }
+
+    return (
+        <div>
+            <Button onClick={info}>Info</Button>
+            <br/>
+            <br/>
+            <Button onClick={success}>Success</Button>
+            <br/>
+            <br/>
+            <Button onClick={error} type="danger">Error</Button>
+            <br/>
+            <br/>
+            <Button onClick={warning} type="warning">Warning</Button>
+            <br/>
+            <br/>
+            <Button onClick={confirm} type="primary">Confirm</Button>
+            <br/>
+            <br/>
+            <Button onClick={custom}>Custom</Button>
+        </div>
+    );
+};
 ```
 
 ### Hooks用法
 通过  Modal.useModal 创建支持读取 context 的 contextHolder。
 ```jsx live=true hideInDSM
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
 import { ConfigProvider, Button, Modal } from '@douyinfe/semi-ui';
 import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
 
 function Demo(props = {}) {
-  const [modal, contextHolder] = Modal.useModal();
-  const config = { 'title': 'This is a success message', 'content': 'Context consumer' }
+    const [modal, contextHolder] = Modal.useModal();
+    const config = { 'title': 'This is a success message', 'content': 'Context consumer' };
 
-  return (
-      <ConfigProvider locale={en_GB}>
-        <div>
-            <Button
-                onClick={() => {
-                    modal.confirm(config);
-                }}
-            >
-              Confirm Modal
-          </Button>
-        </div>
-        {contextHolder}
-      </ConfigProvider>
-  );
+    return (
+        <ConfigProvider locale={en_GB}>
+            <div>
+                <Button
+                    onClick={() => {
+                        modal.confirm(config);
+                    }}
+                >
+                    Confirm Modal
+                </Button>
+            </div>
+            {contextHolder}
+        </ConfigProvider>
+    );
 }
 ```
 

content/show/overflowlist/index-en-US.md

@@ -178,7 +178,7 @@ import { IconAlarm, IconBookmark, IconCamera, IconDuration, IconEdit, IconFolder
 () => {
     const [width, setWidth] = useState(100);
     const renderOverflow = items => {
-        return items.map(item => <Tag style={{ marginRight: 8, marginLeft: 8, flex: '0 0 auto' }}>+{item.length}</Tag>);
+        return items.map(item => <Tag style={{ marginRight: 8, marginLeft: 8, flex: '0 0 auto' }} key={item.key}>+{item.length}</Tag>);
     };
     const renderItem = (item, ind) => {
         return (

content/show/overflowlist/index.md

@@ -176,7 +176,7 @@ import { IconAlarm, IconBookmark, IconCamera, IconDuration, IconEdit, IconFolder
 () => {
     const [width, setWidth] = useState(100);
     const renderOverflow = items => {
-        return items.map(item => <Tag style={{ marginRight: 8, marginLeft: 8, flex: '0 0 auto' }}>+{item.length}</Tag>);
+        return items.map(item => <Tag style={{ marginRight: 8, marginLeft: 8, flex: '0 0 auto' }} key={item.key}>+{item.length}</Tag>);
     };
     const renderItem = (item, ind) => {
         return (

content/show/sidesheet/index-en-US.md

@@ -201,7 +201,7 @@ Use `title`, `footer`(v>=1.3.0) and other Semi Components, you could create cust
 
 ```jsx live=true hideInDSM
 import React from 'react';
-import { SideSheet, Button, Typography, Banner } from '@douyinfe/semi-ui';
+import { SideSheet, Button, Typography, Banner, Form } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {

content/show/table/index-en-US.md

@@ -29,7 +29,7 @@ class App extends React.Component {
         this.columns = [
             {
                 title: 'Name',
-                Data Index: 'name',
+                dateIndex: 'name',
                 render: text => <a>{text}</a>,
             },
             {
@@ -1689,7 +1689,7 @@ const ChildrenDataSelectedDemo = (props = {}) => {
             dataSource={data}
         />
     );
-}
+};
 
 render(ChildrenDataSelectedDemo);
 ```
@@ -1805,7 +1805,7 @@ function App() {
             title: 'Name',
             dataIndex: 'name',
             render: (text, record, index) => {
-                console.log(text, record, index)
+                console.log(text, record, index);
                 return <a>{text}</a>;
             },
         },
@@ -2920,11 +2920,11 @@ class App extends React.Component {
             let pagination = checked
                 ? false
                 : {
-                      currentPage: 1,
-                      pageSize: 8,
-                      total: data.length,
-                      onPageChange: page => this.setPage(page),
-                  };
+                    currentPage: 1,
+                    pageSize: 8,
+                    total: data.length,
+                    onPageChange: page => this.setPage(page),
+                };
 
             this.setState({ pagination });
         };
@@ -3665,28 +3665,33 @@ function App() {
 > Also in `column.onCell` `column.onHeaderCell` Properties or events supported by td / th can also be returned.
 
 ```jsx noInline=true
-<Table
-    onRow={(record, index) => {
-        return {
-            onClick: event => {},
-            onMouseEnter: event => {},
-            onMouseLeave: event => {},
-            className: '',
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+() => (
+    <Table
+        onRow={(record, index) => {
+            return {
+                onClick: event => {},
+                onMouseEnter: event => {},
+                onMouseLeave: event => {},
+                className: '',
             // ...
             // Other attributes or events that can be applied to tr
-        };
-    }}
-    onHeaderRow={(columns, index) => {
-        return {
-            onClick: event => {},
-            onMouseEnter: event => {},
-            onMouseLeave: event => {},
-            className: '',
+            };
+        }}
+        onHeaderRow={(columns, index) => {
+            return {
+                onClick: event => {},
+                onMouseEnter: event => {},
+                onMouseLeave: event => {},
+                className: '',
             // ...
             // Other attributes or events that can be applied to th
-        };
-    }}
-/>
+            };
+        }}
+    />
+);
 ```
 
 ## Column
@@ -3826,9 +3831,10 @@ function Demo() {
 ## FAQ
 - **Why is the table data not updated?**  
     At present, all parameters of the table component are shallow comparison. That is to say, if the parameter value type is an array or object, you need to manually change its reference to trigger the update. Similarly, if you don't want to trigger additional updates, try not to use literal values when passing parameters directly or define reference parameter values in the render process:
-    ```jsx
+    ```text
     // ...render() {
-        <Table dataSource={[/*...*/]} columns={[/*...*/]} />}
+        <Table dataSource={[/*...*/]} columns={[/*...*/]} />
+    // }
     ```
     The above writing method will trigger the update of data in the table every time render (the current selected row will be cleared and the row key array will be expanded, etc.). In order to improve performance and avoid some exceptions, please define some reference type parameters outside the render method as far as possible (if hooks are used, please use useMemo or useState for storage).**
 

content/show/table/index.md

@@ -92,7 +92,7 @@ class App extends React.Component {
                 title: 'Name',
                 dataIndex: 'name',
                 render: (text, record, index) => {
-                    console.log(text, record, index)
+                    console.log(text, record, index);
                     return <a>{text}</a>;
                 },
             },
@@ -337,13 +337,13 @@ class TableApp extends React.Component {
 
     removeRecord(key) {
         let dataSource = [...this.state.dataSource];
-        if(key != null) {
+        if (key != null) {
             let idx = dataSource.findIndex(data => data.key === key);
 
-             if(idx > -1) {
-                 dataSource.splice(idx, 1)
-                 this.setState({ dataSource });
-             }
+            if (idx > -1) {
+                dataSource.splice(idx, 1);
+                this.setState({ dataSource });
+            }
         }
     }
 
@@ -502,7 +502,7 @@ class App extends React.Component {
                     dataSource,
                 });
             });
-        }
+        };
 
         this.state = {
             loading: false,
@@ -543,7 +543,7 @@ render(App);
 
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
-import { Table } from '@douyinfe/semi-ui';
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
 
 class TableApp extends React.Component {
     constructor() {
@@ -880,7 +880,7 @@ class App extends React.Component {
             },
         ];
 
-        this.expandRowRender = (record, index) => index < 2 ? (<Table columns={this.expandColumns} dataSource={this.expandData} />) : <p>{record.description}</p>
+        this.expandRowRender = (record, index) => index < 2 ? (<Table columns={this.expandColumns} dataSource={this.expandData} />) : <p>{record.description}</p>;
     }
     render() {
         return (
@@ -953,7 +953,7 @@ class App extends React.Component {
             },
         ];
 
-        this.expandRowRender = record => <p>{record.description}</p>
+        this.expandRowRender = record => <p>{record.description}</p>;
     }
     render() {
         return (
@@ -1027,7 +1027,7 @@ class App extends React.Component {
             },
         ];
 
-        this.expandRowRender = record => <p>{record.description}</p>
+        this.expandRowRender = record => <p>{record.description}</p>;
     }
     render() {
         return (
@@ -1665,7 +1665,7 @@ const ChildrenDataSelectedDemo = (props = {}) => {
             dataSource={data}
         />
     );
-}
+};
 
 render(ChildrenDataSelectedDemo);
 ```
@@ -1781,7 +1781,7 @@ function App() {
             title: 'Name',
             dataIndex: 'name',
             render: (text, record, index) => {
-                console.log(text, record, index)
+                console.log(text, record, index);
                 return <a>{text}</a>;
             },
         },
@@ -1856,7 +1856,7 @@ render(App);
 
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
-import { Table, Tooltip } from '@douyinfe/semi-ui';
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
 
 class ResizableDemo extends React.Component {
     constructor() {
@@ -2266,7 +2266,7 @@ function Demo() {
                         // onMouseLeave: () => {
                         //     console.log(`Grouped row mouse leave: `, group, index);
                         // },
-                        onClick: e => { console.log(`Grouped row clicked: `, group, index) }
+                        onClick: e => { console.log(`Grouped row clicked: `, group, index); }
                     };
                 }}
                 clickGroupedRowToExpand // if you want to click the entire row to expand
@@ -2300,7 +2300,7 @@ import { Table, Tag, Tooltip, Button } from '@douyinfe/semi-ui';
 class VirtualizedFixedDemo extends React.Component {
     constructor(props = {}) {
         super(props);
-        this.virtualizedListRef = React.createRef()
+        this.virtualizedListRef = React.createRef();
         this.columns = [
             {
                 title: 'Name',
@@ -2810,7 +2810,7 @@ class App extends React.Component {
 
             this.setState({ columns });
 
-            if(!checked) {
+            if (!checked) {
                 this.setPage(null, null, []);
             }
         };
@@ -2889,11 +2889,11 @@ class App extends React.Component {
             let pagination = checked
                 ? false
                 : {
-                      currentPage: 1,
-                      pageSize: 8,
-                      total: data.length,
-                      onPageChange: page => this.setPage(page),
-                  };
+                    currentPage: 1,
+                    pageSize: 8,
+                    total: data.length,
+                    onPageChange: page => this.setPage(page),
+                };
 
             this.setState({ pagination });
         };
@@ -3193,7 +3193,7 @@ function Demo(props = {}) {
     );
 }
 
-render(Demo)
+render(Demo);
 ```
 
 ### 表头合并
@@ -3296,7 +3296,7 @@ function Demo() {
     );
 }
 
-render(Demo)
+render(Demo);
 ```
 
 #### 合并表头 JSX 写法
@@ -3369,7 +3369,7 @@ function Demo() {
     );
 }
 
-render(Demo)
+render(Demo);
 ```
 
 
@@ -3644,28 +3644,33 @@ onHeaderRow中可以返回 th 支持的属性或者事件
 onRow中可以返回 tr 支持的属性或者事件
 
 ```jsx
-<Table
-    onRow={(record, index) => {
-        return {
-            onClick: event => {}, // 点击行
-            onMouseEnter: event => {}, // 鼠标移入行
-            onMouseLeave: event => {}, // 鼠标移出行
-            className: '',
-            // ...
-            // 其他可以作用于 tr 的属性或事件
-        };
-    }}
-    onHeaderRow={(columns, index) => {
-        return {
-            onClick: event => {}, // 点击表头行
-            onMouseEnter: event => {}, // 鼠标移入表头行
-            onMouseLeave: event => {}, // 鼠标移出表头行
-            className: '',
-            // ...
-            // 其他可以作用于 th 的属性或事件
-        };
-    }}
-/>
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+() => (
+    <Table
+        onRow={(record, index) => {
+            return {
+                onClick: event => {}, // 点击行
+                onMouseEnter: event => {}, // 鼠标移入行
+                onMouseLeave: event => {}, // 鼠标移出行
+                className: '',
+                // ...
+                // 其他可以作用于 tr 的属性或事件
+            };
+        }}
+        onHeaderRow={(columns, index) => {
+            return {
+                onClick: event => {}, // 点击表头行
+                onMouseEnter: event => {}, // 鼠标移入表头行
+                onMouseLeave: event => {}, // 鼠标移出表头行
+                className: '',
+                // ...
+                // 其他可以作用于 th 的属性或事件
+            };
+        }}
+    />
+);
 ```
 
 ## Column
@@ -3809,7 +3814,7 @@ function Demo() {
 
 - **表格数据为何没有更新？**  
     Table 组件目前所有参数都为浅层对比，也就是说如果该参数值类型为一个 Array 或者 Object，你需要手动改变其引用才能触发更新。同理，如果你不想触发额外更新，尽量不要直接在传参的时候使用字面量或是在 render 过程中定义引用型参数值：
-    ```jsx
+    ```text
     // ...render() {
         <Table dataSource={[/*...*/]} columns={[/*...*/]} />}
     ```

content/show/tag/index.md

@@ -27,16 +27,16 @@ import React from 'react';
 import { Tag, Space } from '@douyinfe/semi-ui';
 
 () => (
-  <div>
-    <Space>
-      <Tag> default tag </Tag>
-      <Tag closable> Closable Tag </Tag>
-      <Tag closable onClose={(value, e) => e.preventDefault()}>
-        Closable Tag, Prevent Default
-      </Tag>
-    </Space>
-  </div>
-)
+    <div>
+        <Space>
+            <Tag> default tag </Tag>
+            <Tag closable> Closable Tag </Tag>
+            <Tag closable onClose={(value, e) => e.preventDefault()}>
+                Closable Tag, Prevent Default
+            </Tag>
+        </Space>
+    </div>
+);
 ```
 
 ### 尺寸
@@ -48,11 +48,11 @@ import React from 'react';
 import { Tag, Space } from '@douyinfe/semi-ui';
 
 () => (
-  <Space>
-    <Tag size='small'> small tag </Tag>
-    <Tag size='large'> large tag </Tag>
-  </Space>
-)
+    <Space>
+        <Tag size='small'> small tag </Tag>
+        <Tag size='large'> large tag </Tag>
+    </Space>
+);
 ```
 
 ### 颜色
@@ -64,16 +64,16 @@ import React from 'react';
 import { Tag, Space } from '@douyinfe/semi-ui';
 
 () => (
-  <Space wrap>
-    <Tag color='grey'> grey tag </Tag>
-    <Tag color='blue'> blue tag </Tag>
-    <Tag color='red'> red tag </Tag>
-    <Tag color='green'> green tag </Tag>
-    <Tag color='orange'> orange tag </Tag>
-    <Tag color='teal'> teal tag </Tag>
-    <Tag color='violet'> violet tag </Tag>
-    <Tag color='white'> white tag </Tag>
-  </Space>
+    <Space wrap>
+        <Tag color='grey'> grey tag </Tag>
+        <Tag color='blue'> blue tag </Tag>
+        <Tag color='red'> red tag </Tag>
+        <Tag color='green'> green tag </Tag>
+        <Tag color='orange'> orange tag </Tag>
+        <Tag color='teal'> teal tag </Tag>
+        <Tag color='violet'> violet tag </Tag>
+        <Tag color='white'> white tag </Tag>
+    </Space>
 );
 ```
 
@@ -86,12 +86,12 @@ import React from 'react';
 import { Tag, Space } from '@douyinfe/semi-ui';
 
 () => (
-  <Space>
-    <Tag color='blue' type='light'> light tag </Tag>
-    <Tag color='blue' type='ghost'> ghost tag </Tag>
-    <Tag color='blue' type='solid'> solid tag </Tag>
-  </Space>
-)
+    <Space>
+        <Tag color='blue' type='light'> light tag </Tag>
+        <Tag color='blue' type='ghost'> ghost tag </Tag>
+        <Tag color='blue' type='solid'> solid tag </Tag>
+    </Space>
+);
 ```
 
 ### 头像标签
@@ -103,7 +103,7 @@ import React from 'react';
 import { Tag, Space } from '@douyinfe/semi-ui';
 
 function Demo() {
-    const src = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg'
+    const src = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
     return (
         <Space vertical align='start'>
             <Tag avatarSrc={src}>焦锐志</Tag>
@@ -126,19 +126,19 @@ import React, { useState } from 'react';
 import { Tag, Button } from '@douyinfe/semi-ui';
 
 () => {
-  const [visible, setVisible] = useState(false);
-  const toggleVisible = () => {
-    setVisible(!visible);
-  };
-  return (
-    <div>
-      <Button onClick={toggleVisible}>{visible ? 'Hide Tag': 'Show Tag'}</Button>
-      <div style={{marginTop:10}}>
-        <Tag visible={visible}>Invisible tag </Tag>
-      </div>
-    </div>
-  )
-}
+    const [visible, setVisible] = useState(false);
+    const toggleVisible = () => {
+        setVisible(!visible);
+    };
+    return (
+        <div>
+            <Button onClick={toggleVisible}>{visible ? 'Hide Tag': 'Show Tag'}</Button>
+            <div style={{marginTop:10}}>
+                <Tag visible={visible}>Invisible tag </Tag>
+            </div>
+        </div>
+    );
+};
   
 ```
 
@@ -152,56 +152,56 @@ import React from 'react';
 import { TagGroup } from '@douyinfe/semi-ui';
 
 () => {
-  const tagList = [
-    { color: 'white', children:'抖音'},
-    { color: 'white', children:'火山小视频'},
-    { color: 'white', children:'剪映'},
-    { color: 'white', children:'皮皮虾'},
-  ];
-  const src = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg'
-  const tagList2 = [
-    { color: 'white', children:'Douyin', avatarSrc:src},
-    { color: 'white', children:'Hotsoon', avatarSrc:src},
-    { color: 'white', children:'Capcut', avatarSrc:src},
-    { color: 'white', children:'Pipixia', avatarSrc:src},
-  ];
-  const divStyle = {
-    backgroundColor: 'var(--semi-color-fill-0)',
-    height: 35,
-    width: 300,
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 10px',
-    marginBottom: 30,
-  };
-  const tagGroupStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    width: 350,
-  };
-  return (
-    <>
-      <div style={divStyle}>
-        <TagGroup
-          maxTagCount={3}
-          style={tagGroupStyle}
-          tagList={tagList}
-          size='large'
-        />
-      </div>
-      <div style={divStyle}>
-        <TagGroup
-          maxTagCount={2}
-          style={tagGroupStyle}
-          tagList={tagList2}
-          size='large'
-          avatarShape='circle'
-          showPopover
-        />
-      </div>
-    </>
-  )
-}
+    const tagList = [
+        { color: 'white', children:'抖音'},
+        { color: 'white', children:'火山小视频'},
+        { color: 'white', children:'剪映'},
+        { color: 'white', children:'皮皮虾'},
+    ];
+    const src = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
+    const tagList2 = [
+        { color: 'white', children:'Douyin', avatarSrc:src},
+        { color: 'white', children:'Hotsoon', avatarSrc:src},
+        { color: 'white', children:'Capcut', avatarSrc:src},
+        { color: 'white', children:'Pipixia', avatarSrc:src},
+    ];
+    const divStyle = {
+        backgroundColor: 'var(--semi-color-fill-0)',
+        height: 35,
+        width: 300,
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+        marginBottom: 30,
+    };
+    const tagGroupStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        width: 350,
+    };
+    return (
+        <>
+            <div style={divStyle}>
+                <TagGroup
+                    maxTagCount={3}
+                    style={tagGroupStyle}
+                    tagList={tagList}
+                    size='large'
+                />
+            </div>
+            <div style={divStyle}>
+                <TagGroup
+                    maxTagCount={2}
+                    style={tagGroupStyle}
+                    tagList={tagList2}
+                    size='large'
+                    avatarShape='circle'
+                    showPopover
+                />
+            </div>
+        </>
+    );
+};
 
 ```
 

content/show/timeline/index-en-US.md

@@ -29,7 +29,7 @@ import { Timeline } from '@douyinfe/semi-ui';
         <Timeline.Item time='2019-06-13 16:17'>Second Node Content</Timeline.Item>
         <Timeline.Item time='2019-05-14 18:34'>Third Node Content</Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### Type
@@ -46,7 +46,7 @@ import { Timeline } from '@douyinfe/semi-ui';
         <Timeline.Item time='2019-06-13 16:17' type='success'>Succeed</Timeline.Item>
         <Timeline.Item time='2019-05-14 18:34' type='error'>Failed</Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### Custom node
@@ -65,7 +65,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
         <Timeline.Item time='2019-05-14 18:34' color='pink'>Customized Color</Timeline.Item>
         <Timeline.Item time='2019-04-10 12:20'><span style={{fontSize: '18px'}}>Customized Node Style</span></Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### Timeline Position
@@ -85,7 +85,7 @@ import { Timeline } from '@douyinfe/semi-ui';
         <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
         <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 #### Center
@@ -101,7 +101,7 @@ import { Timeline } from '@douyinfe/semi-ui';
         <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
         <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 #### Alternate
@@ -117,7 +117,7 @@ import { Timeline } from '@douyinfe/semi-ui';
         <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
         <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 #### Right
@@ -133,7 +133,7 @@ import { Timeline } from '@douyinfe/semi-ui';
         <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
         <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### DataSource
@@ -174,7 +174,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
             }    
         ]} 
     />
-)
+);
 ```
 
 ## API reference

content/show/timeline/index.md

@@ -50,7 +50,7 @@ import { Timeline } from '@douyinfe/semi-ui';
             审核失败
         </Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### 自定义节点
@@ -75,7 +75,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
             <span style={{ fontSize: '18px' }}>自定义节点样式</span>
         </Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### 时间轴位置
@@ -103,7 +103,7 @@ import { Timeline } from '@douyinfe/semi-ui';
             第四个节点内容
         </Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 #### 时间节点在左侧
@@ -127,7 +127,7 @@ import { Timeline } from '@douyinfe/semi-ui';
             第四个节点内容
         </Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 #### 交替展现
@@ -151,7 +151,7 @@ import { Timeline } from '@douyinfe/semi-ui';
             第四个节点内容
         </Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 #### 时间轴在右侧
@@ -175,7 +175,7 @@ import { Timeline } from '@douyinfe/semi-ui';
             第四个节点内容
         </Timeline.Item>
     </Timeline>
-)
+);
 ```
 
 ### 使用 dataSource
@@ -216,7 +216,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
             },
         ]}
     />
-)
+);
 ```
 
 ## API 参考

content/show/tooltip/index-en-US.md

@@ -369,7 +369,7 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
             </Tooltip>
         </span>
     </Popconfirm>
-)
+);
 ```
 
 ## API Reference

content/show/tooltip/index.md

@@ -72,7 +72,7 @@ function Demo() {
 
 ```jsx live=true hideInDSM
 import React, { useState } from 'react';
-import { Tooltip, Button, ButtonGroup } from '@douyinfe/semi-ui';
+import { Tooltip, Button, ButtonGroup, Input } from '@douyinfe/semi-ui';
 
 function Demo() {
     const [visible, setVisible] = useState(false);
@@ -362,14 +362,14 @@ import React from 'react';
 import { Tooltip, Popconfirm, Button } from '@douyinfe/semi-ui';
 
 () => (
-  <Popconfirm content="是否确认删除">
-    <span style={{ display: 'inline-block' }}>
-        <Tooltip content={'删除评价'}>
-            <Button type="danger">删除</Button>
-        </Tooltip>
-    </span>
-  </Popconfirm>
-)
+    <Popconfirm content="是否确认删除">
+        <span style={{ display: 'inline-block' }}>
+            <Tooltip content={'删除评价'}>
+                <Button type="danger">删除</Button>
+            </Tooltip>
+        </span>
+    </Popconfirm>
+);
 ```
 
 ### 仅当内容宽度超出时展示 Tooltip

content/start/customize-theme/index-en-US.md

@@ -43,7 +43,7 @@ SemiWebpackPlugin  `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @dou
 new SemiWebpackPlugin({
     theme: `Your theme npm package name`
     /* ...options */
-})
+});
 ```
 ### Make changes to component-level variables take effect