chore: merge release into main

.eslintrc.js

@@ -121,6 +121,8 @@ module.exports = {
                 "space-infix-ops": ["error", { "int32Hint": false }],
                 'space-before-blocks': ['error', 'always'],
                 "space-infix-ops": "error",
+                '@typescript-eslint/prefer-as-const': 'off',
+                '@typescript-eslint/no-namespace': 'off',
                 "@typescript-eslint/type-annotation-spacing": ['error', {"after": true}],
                 "@typescript-eslint/member-delimiter-style": [
                     "error",

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 78
+order: 80
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 78
+order: 80
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 79
+order: 81
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 79
+order: 81
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 80
+order: 82
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 80
+order: 82
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 81
+order: 83
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 81
+order: 83
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 82
+order: 84
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 82
+order: 84
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 83
+order: 85
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 83
+order: 85
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 84
+order: 86
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 84
+order: 86
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 30
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 30
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 31
 category: Input
 title:  Cascader
 subTitle: Cascade
@@ -1537,6 +1537,63 @@ import { Cascader } from '@douyinfe/semi-ui';
 };
 ```
 
+### Checked RelationShip
+
+Version: >= 2.71.0
+
+In multiple, `checkRelation` can be used to set the type of node selection relationship, optional: 'related' (default), 'unRelated'. When the selection relationship is 'unRelated', it means that selections between nodes do not affect each other.
+
+```jsx live=true
+import React from 'react';
+import { Cascader } 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 (
+        <Cascader
+            multiple
+            defaultValue={[
+                ['Asia'],
+                ['Asia', 'China', 'Beijing']
+            ]}
+            checkRelation='unRelated'
+            style={{ width: 300 }}
+            treeData={treeData}
+        />
+    );
+};
+```
+
 ### Dynamic Update of Data
 
 ```jsx live=true
@@ -1895,6 +1952,7 @@ function Demo() {
 | borderless        | borderless mode  >=2.33.0                                                                                                                                                                                                                     | boolean                         |           |
 | bottomSlot | bottom slot                                                                                                                                                                                                                                   | ReactNode | - |  1.27.0 |
 | changeOnSelect | Toggle whether non-leaf nodes are selectable                                                                                                                                                                                                  | boolean | false | - |
+| checkRelation | In multiple, the relationship between the checked states of the nodes, optional: 'related'、'unRelated'.  | string | 'related' | v2.71.0 |
 | className | ClassName                                                                                                                                                                                                                                     | string | - | - |
 | clearIcon | Can be used to customize the clear button, valid when showClear is true                                                                                                                                                                       | ReactNode | - | 2.25.0 |
 | defaultOpen | Set whether to open the dropDown by default                                                                                                                                                                                                   | boolean | false | - |

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 31
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader
@@ -1516,6 +1516,56 @@ import { Cascader } from '@douyinfe/semi-ui';
 };
 ```
 
+### 节点选中关系
+
+版本：>= 2.71.0
+
+多选时，可以使用 `checkRelation` 来设置节点之间选中关系的类型，可选：'related'（默认）、'unRelated'。当选中关系为 'unRelated' 时，意味着节点之间的选中互不影响。
+
+```jsx live=true
+import React from 'react';
+import { Cascader } from '@douyinfe/semi-ui';
+() => {
+    const treeData = [
+        {
+            label: '亚洲',
+            value: 'Asia',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            label: '北美洲',
+            value: 'North America',
+        }
+    ];
+    return (
+        <Cascader
+            multiple
+            defaultValue={[
+                ['Asia'],
+                ['Asia', 'China', 'Beijing']
+            ]}
+            checkRelation='unRelated'
+            style={{ width: 300 }}
+            treeData={treeData}
+        />
+    );
+};
+```
 
 ### 动态更新数据
 
@@ -1872,6 +1922,7 @@ function Demo() {
 | bottomSlot           | 底部插槽                                                                                                                                                | ReactNode                                                                                 | -                              | 1.27.0 |
 | borderless        | 无边框模式  >=2.33.0                                                                                                                                     | boolean                         |           |
 | changeOnSelect       | 是否允许选择非叶子节点                                                                                                                                         | boolean                                                                                   | false                          | -      |
+| checkRelation | 多选时，节点之间选中状态的关系，可选：'related'、'unRelated'。  | string | 'related' | v2.71.0 |
 | className            | 选择框的 className 属性                                                                                                                                   | string                                                                                    | -                              | -      |
 | clearIcon            | 可用于自定义清除按钮, showClear为true时有效                                                                                                                       | ReactNode                                                                                 | -                              | 2.25.0 |
 | defaultOpen          | 设置是否默认打开下拉菜单                                                                                                                                        | boolean                                                                                   | false                          | -      |

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 32
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 32
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 33
 category: Input
 title: ColorPicker
 icon: doc-colorPlatteNew

content/input/colorpicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 33
 category: 输入类
 title: ColorPicker 颜色选择器
 icon: doc-colorPlatteNew

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 34
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 34
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 35
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 35
 category: 输入类
 title:  Form 表单
 icon: doc-form

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 36
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 36
 category: 输入类
 title:  Input 输入框
 icon: doc-input

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 37
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 37
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 38
 category: Input
 title: PinCode
 icon: doc-pincode

content/input/pincode/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 38
 category: 输入类
 title: PinCode 验证码输入
 icon: doc-pincode

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 39
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 39
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 40
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 40
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 41
 category: Input
 title: Select
 subTitle: Select
@@ -28,21 +28,15 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select defaultValue="abc" style={{ width: 120 }}>
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-        </Select>
-        <br />
-        <br />
-        <Select defaultValue="abc" style={{ width: 120 }}>
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
+        <Select defaultValue="douyin" style={{ width: 120 }}>
+            <Select.Option value="douyin">Douyin</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
         </Select>
         <br />
         <br />
         <Select placeholder="Select line of business" style={{ width: 120 }}>
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
+            <Select.Option value="douyin">Douyin</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
         </Select>
     </>
 );
@@ -58,9 +52,9 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: 'Semi' },
-        { value: 'hotsoon', label: 'Hotsoon' },
-        { value: 'pipixia', label: 'Pipixia' },
+        { value: 'douyin', label: 'Douyin' },
+        { value: 'capcut', label: 'Capcut' },
+        { value: 'coze', label: 'Coze' },
         { value: 'toutiao', label: 'TooBuzz' },
     ];
     return <Select placeholder="Business line" style={{ width: 180 }} optionList={list}></Select>;
@@ -88,10 +82,10 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc', 'hotsoon']}>
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-            <Select.Option value="pipixia">Pipixia</Select.Option>
+        <Select multiple style={{ width: '320px' }} defaultValue={['douyin', 'coze']}>
+            <Select.Option value="douyin">Douyin</Select.Option>
+            <Select.Option value="coze">Coze</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
         <br />
@@ -102,11 +96,11 @@ import { Select } from '@douyinfe/semi-ui';
             showRestTagsPopover={true}
             restTagsPopoverProps={{ position: 'top' }}
             style={{ width: '320px' }}
-            defaultValue={['abc', 'hotsoon', 'pipixia']}
+            defaultValue={['douyin', 'coze', 'capcut']}
         >
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-            <Select.Option value="pipixia">Pipixia</Select.Option>
+            <Select.Option value="douyin">Semi</Select.Option>
+            <Select.Option value="coze">Coze</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
 
@@ -115,13 +109,13 @@ import { Select } from '@douyinfe/semi-ui';
         <Select
             multiple
             style={{ width: '320px' }}
-            defaultValue={['abc']}
+            defaultValue={['douyin']}
             max={2}
             onExceed={() => Toast.warning('Only two options are allowed')}
         >
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-            <Select.Option value="pipixia">Pipixia</Select.Option>
+            <Select.Option value="douyin">Semi</Select.Option>
+            <Select.Option value="coze">Coze</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
         <br />
@@ -132,13 +126,13 @@ import { Select } from '@douyinfe/semi-ui';
             showRestTagsPopover={true}
             restTagsPopoverProps={{ position: 'top' }}
             style={{ width: '220px' }}
-            defaultValue={['xigua', 'hotsoon', 'pipixia', 'abc']}
+            defaultValue={['xigua', 'coze', 'capcut', 'douyin']}
             ellipsisTrigger
             expandRestTagsOnClick
         >
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-            <Select.Option value="pipixia">Pipixia</Select.Option>
+            <Select.Option value="douyin">Semi</Select.Option>
+            <Select.Option value="coze">Coze</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
     </>
@@ -222,17 +216,17 @@ import { Select } from '@douyinfe/semi-ui';
 () => (
     <>
         <Select placeholder="Business line" style={{ width: '200px' }} size="small">
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
+            <Select.Option value="douyin">Douyin</Select.Option>
         </Select>
         <br />
         <br />
         <Select placeholder="Business line" style={{ width: '200px' }}>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
+            <Select.Option value="douyin">Douyin</Select.Option>
         </Select>
         <br />
         <br />
         <Select placeholder="Business line" style={{ width: '200px' }} size="large">
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
+            <Select.Option value="douyin">Douyin</Select.Option>
         </Select>
     </>
 );
@@ -248,17 +242,17 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select style={{ width: '180px' }}>
+        <Select style={{ width: '180px' }} defaultValue='Capcut'>
             <Select.Option value="Capcut">Capcut</Select.Option>
         </Select>
         <br />
         <br />
-        <Select style={{ width: '180px' }} validateStatus="warning">
+        <Select style={{ width: '180px' }} validateStatus="warning" defaultValue='Capcut'>
             <Select.Option value="Capcut">Capcut</Select.Option>
         </Select>
         <br />
         <br />
-        <Select style={{ width: '180px' }} validateStatus="error">
+        <Select style={{ width: '180px' }} validateStatus="error" defaultValue='Capcut'>
             <Select.Option value="Capcut">Capcut</Select.Option>
         </Select>
     </>
@@ -279,24 +273,24 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
 
 () => (
     <>
-        <Select style={{ width: '320px' }} defaultValue={'hotsoon'} prefix={<IconVigoLogo />} showClear={true}>
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-            <Select.Option value="pipixia">Pipixia</Select.Option>
+        <Select style={{ width: '320px' }} defaultValue={'douyin'} prefix={<IconVigoLogo />} showClear={true}>
+            <Select.Option value="douyin">Douyin</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
+            <Select.Option value="coze">Coze</Select.Option>
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
         <br />
         <br />
         <Select
             style={{ width: '320px' }}
-            defaultValue={'hotsoon'}
+            defaultValue={'capcut'}
             prefix={<IconVigoLogo />}
             suffix={<IconGift />}
             showArrow={false}
         >
-            <Select.Option value="abc">Semi</Select.Option>
-            <Select.Option value="hotsoon">Hotsoon</Select.Option>
-            <Select.Option value="pipixia">Pipixia</Select.Option>
+            <Select.Option value="douyin">Douyin</Select.Option>
+            <Select.Option value="capcut">Capcut</Select.Option>
+            <Select.Option value="coze">Coze</Select.Option>
             <Select.Option value="xigua">BuzzVideo</Select.Option>
         </Select>
     </>
@@ -314,13 +308,13 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: 'Semi' },
+        { value: 'douyin', label: 'Douyin' },
         { value: 'capcut', label: 'Capcut' },
         { value: 'xigua', label: 'BuzzVideo' },
     ];
     return (
         <>
-            <Select style={{ width: 320 }} optionList={list} insetLabel="Application" defaultValue="abc"></Select>
+            <Select style={{ width: 320 }} optionList={list} insetLabel="Application" defaultValue="douyin"></Select>
             <br />
             <br />
             <Select
@@ -385,21 +379,21 @@ import { IconClock } from '@douyinfe/semi-icons';
                 style={selectStyle}
                 dropdownStyle={{ width: 180 }}
                 maxHeight={213}
-                efaultOpen
+                defaultOpen
                 autoAdjustOverflow={false}
                 position="bottom"
                 outerBottomSlot={outSlotNode}
             >
-                <Select.Option value="abc">Semi</Select.Option>
-                <Select.Option value="hotsoon">Hotsoon</Select.Option>
-                <Select.Option value="pipixia">Pipixia</Select.Option>
+                <Select.Option value="douyin">Douyin</Select.Option>
+                <Select.Option value="capcut">Capcut</Select.Option>
+                <Select.Option value="coze">Coze</Select.Option>
                 <Select.Option value="xigua">BuzzVideo</Select.Option>
             </Select>
             <p>innerBottomSlot:</p>
-            <Select style={selectStyle} dropdownStyle={{ width: 180 }} innerBottomSlot={innerSlotNode}>
-                <Select.Option value="abc">Semi</Select.Option>
-                <Select.Option value="hotsoon">Hotsoon</Select.Option>
-                <Select.Option value="pipixia">Pipixia</Select.Option>
+            <Select style={selectStyle} dropdownStyle={{ width: 180 }} innerBottomSlot={innerSlotNode} >
+                <Select.Option value="douyin">Douyin</Select.Option>
+                <Select.Option value="capcut">Capcut</Select.Option>
+                <Select.Option value="coze">Coze</Select.Option>
                 <Select.Option value="xigua">BuzzVideo</Select.Option>
             </Select>
         </div>
@@ -454,12 +448,13 @@ import { Select } from '@douyinfe/semi-ui';
         display: 'flex',
         paddingTop: 8,
         paddingLeft: 32,
+        paddingRight: 32,
         borderBottom: '0.5px solid var(--semi-color-border)',
     };
     const tabOptions = [
-        { itemKey: 'component', label: '组件' },
-        { itemKey: 'design', label: '设计' },
-        { itemKey: 'feedback', label: '反馈' },
+        { itemKey: 'component', label: 'Compoonent' },
+        { itemKey: 'design', label: 'Design' },
+        { itemKey: 'feedback', label: 'Feedback' },
     ];
 
     const outerTopSlotNode = (
@@ -502,7 +497,7 @@ import { Select } from '@douyinfe/semi-ui';
     return (
         <>
             <Select value={value} style={{ width: '300px' }} onChange={setValue} placeholder="Controlled Component">
-                <Select.Option value="abc">Semi</Select.Option>
+                <Select.Option value="douyin">Douyin</Select.Option>
                 <Select.Option value="capcut">Capcut</Select.Option>
                 <Select.Option value="xigua">BuzzVideo</Select.Option>
             </Select>
@@ -592,9 +587,9 @@ import { Select } from '@douyinfe/semi-ui';
 () => (
     <>
         <Select filter style={{ width: 180 }} placeholder="Searchable Select">
-            <Select.Option value="app1">Semi</Select.Option>
-            <Select.Option value="app2">Hotsoon</Select.Option>
-            <Select.Option value="app3">Pipixia</Select.Option>
+            <Select.Option value="app1">Douyin</Select.Option>
+            <Select.Option value="app2">Coze</Select.Option>
+            <Select.Option value="app3">Capcut</Select.Option>
             <Select.Option value="app4">BuzzVideo</Select.Option>
         </Select>
         <br />
@@ -745,8 +740,8 @@ import { Select } from '@douyinfe/semi-ui';
         return label.includes(sug) || value.includes(sug);
     }
     return (
-        <Select filter={search} style={{ width: '180px' }} placeholder="try hello or abc">
-            <Select.Option value="hello">Semi</Select.Option>
+        <Select filter={search} style={{ width: '180px' }} placeholder="try hello or douyin">
+            <Select.Option value="hello">Douyin</Select.Option>
             <Select.Option value="bytedance">UlikeCam</Select.Option>
             <Select.Option value="semi">BuzzVideo</Select.Option>
         </Select>
@@ -915,9 +910,9 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <Select style={{ width: 180 }} dropdownStyle={{ width: 250 }} dropdownClassName="test">
-        <Select.Option value="abc">Semi</Select.Option>
-        <Select.Option value="hotsoon">Hotsoon</Select.Option>
-        <Select.Option value="pipixia">Pipixia</Select.Option>
+        <Select.Option value="douyin">Douyin</Select.Option>
+        <Select.Option value="coze">Coze</Select.Option>
+        <Select.Option value="capcut">Capcut</Select.Option>
         <Select.Option value="xigua">BuzzVideo</Select.Option>
     </Select>
 );
@@ -968,7 +963,7 @@ import { Select, TextArea } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: 'Semi', type: 1 },
+        { value: 'douyin', label: 'Douyin', type: 1 },
         { value: 'capcut', label: 'Capcut', type: 2 },
         { value: 'xigua', label: 'BuzzVideo', type: 3 },
     ];
@@ -1029,7 +1024,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const optionList = [
-        { value: 'abc', label: 'Semi' },
+        { value: 'douyin', label: 'Douyin' },
         { value: 'capcut', label: 'Capcut' },
         { value: 'xigua', label: 'BuzzVideo' },
     ];
@@ -1125,18 +1120,17 @@ interface TriggerRenderProps {
 ```
 
 ```jsx live=true
-import React from 'react';
-import { Select } from '@douyinfe/semi-ui';
+import React, { useState } from 'react';
+import { Select, Tag } from '@douyinfe/semi-ui';
 import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
 
 () => {
-    const [valList, setValList] = useState(['abc', 'hotsoon']);
-    const [val, setVal] = useState('abc');
+    const [valList, setValList] = useState(['douyin', 'ulikecam']);
     const list = [
-        { value: 'abc', label: 'Semi' },
-        { value: 'hotsoon', label: 'Hotsoon' },
-        { value: 'pipixia', label: 'Pipixia' },
-        { value: 'toutiao', label: 'TooBuzz' },
+        { value: 'douyin', label: 'Douyin' },
+        { value: 'ulikecam', label: 'UlikeCam' },
+        { value: 'jianying', label: 'Capcut' },
+        { value: 'doubao', label: 'Cici' },
     ];
     const triggerRender = ({ value }) => {
         return (
@@ -1147,7 +1141,7 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
                     height: 32,
                     display: 'flex',
                     alignItems: 'center',
-                    paddingLeft: 8,
+                    paddingLeft: 12,
                     borderRadius: 3,
                     color: 'var(--semi-color-primary)',
                 }}
@@ -1159,7 +1153,7 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
                         fontSize: 14,
                     }}
                 >
-                    Business Line
+                    AppName
                 </div>
                 <div
                     style={{
@@ -1177,58 +1171,49 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
         );
     };
 
-    const triggerRender2 = ({ value }) => {
+    const triggerRender2 = ({ value, ...rest }) => {
         return (
             <div
                 style={{
-                    minWidth: '112',
-                    height: 32,
+                    margin: 4,
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    flexGrow: 1,
+                    overflow: 'hidden',
                     display: 'flex',
                     alignItems: 'center',
-                    paddingLeft: 8,
-                    borderRadius: 3,
                 }}
             >
-                <IconChevronDown style={{ color: 'var(--semi-color-tertiary)' }} />
-                <div
-                    style={{
-                        margin: 4,
-                        whiteSpace: 'nowrap',
-                        textOverflow: 'ellipsis',
-                        flexGrow: 1,
-                        overflow: 'hidden',
-                        display: 'flex',
-                        alignItems: 'center',
-                        color: 'var(--semi-color-tertiary)',
-                    }}
-                >
-                    {value.map(item => item.label).join(' , ')}
-                </div>
+                <Tag size='large' color='cyan' shape='circle' suffixIcon={<IconChevronDown />}>
+                    {value.map(item => item.label).join(' / ')}
+                </Tag>
             </div>
         );
     };
+
     return (
         <div>
-            <h4>Different background Trigger</h4>
+            <h4>Different Background Trigger</h4>
             <Select
                 value={valList}
                 triggerRender={triggerRender}
                 optionList={list}
-                filter
-                searchPosition='dropdown'
                 onChange={value => setValList(value)}
                 multiple
+                filter
+                searchPosition='dropdown'
                 style={{ width: 240 }}
             ></Select>
             <br />
             <br />
-            <h4>Borderless and transparent Trigger</h4>
+            <h4>Use circle Tag as trigger</h4>
             <Select
-                value={val}
-                onChange={value => setVal(value)}
+                value={valList}
+                onChange={value => setValList(value)}
                 triggerRender={triggerRender2}
                 optionList={list}
                 filter
+                multiple
                 searchPosition='dropdown'
                 style={{ width: 240, marginTop: 20, outline: 0 }}
             ></Select>
@@ -1237,6 +1222,63 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
 };
 ```
 
+
+The following is a more complex example: Reusing the drag-and-sort capability of TagInput and adding sorting to Select through triggerRender.
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Select, TagInput } from '@douyinfe/semi-ui';
+
+() => {
+    const [valList, setValList] = useState(['douyin', 'ulikecam']);
+    const [inputVal, setInputVal] = useState('');
+    const list = [
+        { value: 'douyin', label: 'Douyin' },
+        { value: 'ulikecam', label: 'UlikeCam' },
+        { value: 'jianying', label: 'Capcut' },
+        { value: 'doubao', label: 'Cici' },
+    ];
+     
+    const handleSort = (currentLabels) => {
+        const newValue = currentLabels.map(item => list.find((i) => i.label === item).value)
+        setValList(newValue);
+    };
+
+    const triggerRender = ({ value, onSearch, onClear }) => {
+        return (
+            <TagInput
+                draggable
+                allowDuplicates={false}
+                value={value.map(item => item.label)}
+                inputValue={inputVal}
+                onInputChange={(word) => {
+                    onSearch(word);
+                    setInputVal(word);
+                }}
+                onChange={handleSort}
+                onClear={() => onClear()}
+                showClear
+            />
+        );
+    }; 
+  
+    return (
+        <>
+            <h4>Select that can reorder selected options by dragging</h4>
+            <Select
+                value={valList}
+                triggerRender={triggerRender}
+                optionList={list}
+                onChange={value => setValList(value)}
+                multiple
+                filter
+                style={{ width: 240 }}
+            ></Select>
+        </>
+    );
+};
+```
+
 ### Custom Option Render
 
 -   Simple customization: Pass the label property of Option or children into ReactNode, you can control the rendering of the candidates, and the content will automatically bring styles such as padding, background color, etc.
@@ -1288,7 +1330,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: 'Semi', otherKey: 0 },
+        { value: 'douyin', label: 'Semi', otherKey: 0 },
         { value: 'capcut', label: 'Capcut', disabled: true, otherKey: 1 },
         { value: 'cam', label: 'UlikeCam', otherKey: 2 },
         { value: 'buzz', label: 'Buzz', otherKey: 3 },
@@ -1299,7 +1341,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
             <Select
                 filter
                 defaultOpen
-                defaultValue="abc"
+                defaultValue="douyin"
                 dropdownClassName="components-select-demo-renderOptionItem"
                 optionList={optionList}
                 style={{ width: 180 }}
@@ -1373,7 +1415,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | Properties | Instructions                                                                                                                                                                                                                                                                                                                                                       | Type | Default | version |
 | --- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| --- | --- | --- |
 | allowCreate | Whether to allow the user to create new entries. Needs to be used with `filter`. When allowCreate is enabled, it will no longer respond to updates to children or optionList                                                                                                                                                                                       | boolean | false |
-| arrowIcon | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon                                                                                                                                                                                               | ReactNode |  | 1.15.0|
+| arrowIcon | Customize the right drop-down arrow Icon, when the showClear switch is turned on and there is currently a selected value, hover will give priority to the clear icon                                                                                                                                                                                               | ReactNode |  | |
 | autoAdjustOverflow | Whether the pop-up layer automatically adjusts the direction when it is obscured (only vertical direction is supported for the time being, and the inserted parent is body)                                                                                                                                                                                        | boolean | true |
 | autoClearSearchValue | After selecting the option, whether to automatically clear the search keywords, it will take effect when mutilple and filter are both enabled                                                                                                                                                                                                                      | boolean | true | 2.3.0|
 | autoFocus | Whether automatically focus when component mount                                                                                                                                                                                                                                                                                                                   | boolean | false |
@@ -1404,7 +1446,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | maxHeight | Maximum height of `optionList` in the pop-up layer                                                                                                                                                                                                                                                                                                                 | string \| number | 270 |
 | multiple | Whether allow multiple selection                                                                                                                                                                                                                                                                                                                                   | boolean | false |
 | outerBottomSlot | Rendered at the bottom of the popup layer, custom slot level with optionList                                                                                                                                                                                                                                                                                       | ReactNode |  |
-| outerTopSlot | Rendered at the top of the pop-up layer, custom slot level with optionList                                                                                                                                                                                                                                                                                         | ReactNode | |1.6.0 |
+| outerTopSlot | Rendered at the top of the pop-up layer, custom slot level with optionList                                                                                                                                                                                                                                                                                         | ReactNode | | |
 | optionList | You can pass Option through this property, make sure that each element in the array has `label`, `value` properties                                                                                                                                                                                                                                                | Array (\[{value, label}\]) |  |
 | placeholder | placeholder                                                                                                                                                                                                                                                                                                                                                        | ReactNode |  |
 | position | Pop-up layer position, refer to [Popover·API reference·position](/en-US/show/popover#API%20Reference)                                                                                                                                                                                                                                                              | string | 'bottomLeft' |
@@ -1424,7 +1466,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | style | Inline Style                                                                                                                                                                                                                                                                                                                                                       | object |  |
 | suffix | An input helper rendered after                                                                                                                                                                                                                                                                                                                                     | ReactNode |  |
 | triggerRender | Custom DOM of trigger                                                                                                                                                                                                                                                                                                                                              | function |  |
-| virtualize | List virtualization, used to optimize performance in the case of a large number of nodes, composed of height, width, and itemSize                                                                                                                                                                                                                                  | object |  | 0.37.0 |
+| virtualize | List virtualization, used to optimize performance in the case of a large number of nodes, composed of height, width, and itemSize                                                                                                                                                                                                                                  | object |  |  |
 | validateStatus | Verification result, optional `warning`, `error`, `default` (only affect the style background color)                                                                                                                                                                                                                                                               | string | 'default' |
 | value | The currently selected value is passed as a controlled component, used in conjunction with `onchange`                                                                                                                                                                                                                                                              | string\|number\|array |  |
 | zIndex | Popup layer z-index                                                                                                                                                                                                                                                                                                                                                | number | 1030 |
@@ -1455,23 +1497,23 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 
 ### OptGroup Props
 
-| Properties | Instructions       | Type      | Version |
-| ---------- | ------------------ | --------- | ------- |
-| className  | The CSS class name | string    | v0.31.0 |
-| label      | Text displayed.    | ReactNode | v0.31.0 |
-| style      | Inline Style       | object    | v0.31.0 |
+| Properties | Instructions       | Type      | 
+| ---------- | ------------------ | --------- | 
+| className  | The CSS class name | string    | 
+| label      | Text displayed.    | ReactNode | 
+| style      | Inline Style       | object    | 
 
 ## Methods
 Some internal methods provided by Select can be accessed through ref:
 
 | Method      | Instructions                    | Version |
 | ----------- | ------------------------------- | ------- |
-| close       | Manually close dropdown list    | v0.34.0 |
-| clearInput  | Manually clear value of input   | v1.18.0 |
-| deselectAll | Manually clear selected options | v1.18.0 |
-| focus       | Manually focus select           | v1.11.0 |
-| open        | Manually open dropdown list     | v0.34.0 |
-| selectAll   | Manually select all options     | v1.18.0 |
+| close       | Manually close dropdown list    |  |
+| clearInput  | Manually clear value of input   |  |
+| deselectAll | Manually clear selected options |  |
+| focus       | Manually focus select           |  |
+| open        | Manually open dropdown list     |  |
+| selectAll   | Manually select all options     |  |
 | search(value: string, event: event)  | You can call this method through ref to search, and the search value will be set to Input          | v2.35.0 |
 
 ## Accessibility

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 41
 category: 输入类
 title: Select 选择器
 icon: doc-select
@@ -31,8 +31,8 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select defaultValue="abc" style={{ width: 120 }}>
-            <Select.Option value="abc">抖音</Select.Option>
+        <Select defaultValue="douyin" style={{ width: 120 }}>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying" disabled>
                 剪映
@@ -41,14 +41,14 @@ import { Select } from '@douyinfe/semi-ui';
         </Select>
         <br />
         <br />
-        <Select defaultValue="abc" disabled style={{ width: 120 }}>
-            <Select.Option value="abc">抖音</Select.Option>
+        <Select defaultValue="douyin" disabled style={{ width: 120 }}>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
         </Select>
         <br />
         <br />
         <Select placeholder="请选择业务线" style={{ width: 120 }}>
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying" disabled>
                 剪映
@@ -69,7 +69,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: '抖音', otherKey: 0 },
+        { value: 'douyin', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },
@@ -99,8 +99,8 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc', 'ulikecam']}>
-            <Select.Option value="abc">抖音</Select.Option>
+        <Select multiple style={{ width: '320px' }} defaultValue={['douyin', 'ulikecam']}>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -113,9 +113,9 @@ import { Select } from '@douyinfe/semi-ui';
             showRestTagsPopover={true}
             restTagsPopoverProps={{ position: 'top' }}
             style={{ width: '320px' }}
-            defaultValue={['abc', 'ulikecam', 'jianying']}
+            defaultValue={['douyin', 'ulikecam', 'jianying']}
         >
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -126,11 +126,11 @@ import { Select } from '@douyinfe/semi-ui';
         <Select
             multiple
             style={{ width: '320px' }}
-            defaultValue={['abc']}
+            defaultValue={['douyin']}
             max={2}
             onExceed={() => Toast.warning('最多只允许选择两项')}
         >
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -143,11 +143,11 @@ import { Select } from '@douyinfe/semi-ui';
             showRestTagsPopover={true}
             restTagsPopoverProps={{ position: 'top' }}
             style={{ width: '220px' }}
-            defaultValue={['xigua', 'ulikecam', 'jianying', 'abc']}
+            defaultValue={['xigua', 'ulikecam', 'jianying', 'douyin']}
             ellipsisTrigger
             expandRestTagsOnClick
         >
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -298,7 +298,7 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
 () => (
     <>
         <Select style={{ width: '320px' }} defaultValue={'ulikecam'} prefix={<IconVigoLogo />} showClear={true}>
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -312,7 +312,7 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
             suffix={<IconGift />}
             showArrow={false}
         >
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -332,7 +332,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: '抖音' },
+        { value: 'douyin', label: '抖音' },
         { value: 'ulikecam', label: '轻颜相机' },
         { value: 'jianying', label: '剪映' },
         { value: 'toutiao', label: '今日头条' },
@@ -354,7 +354,7 @@ import { Select } from '@douyinfe/semi-ui';
     const [colorVal, setColotVal] = useState('--semi-light-blue-3');
     return (
         <>
-            <Select style={{ width: 300 }} optionList={list} insetLabel="业务线" defaultValue="abc"></Select>
+            <Select style={{ width: 300 }} optionList={list} insetLabel="业务线" defaultValue="douyin"></Select>
             <br />
             <br />
             <Select
@@ -442,7 +442,7 @@ import { Select } from '@douyinfe/semi-ui';
                 autoAdjustOverflow={false}
                 position="bottom"
             >
-                <Select.Option value="abc">抖音</Select.Option>
+                <Select.Option value="douyin">抖音</Select.Option>
                 <Select.Option value="ulikecam">轻颜相机</Select.Option>
                 <Select.Option value="jianying">剪映</Select.Option>
                 <Select.Option value="duoshan">多闪</Select.Option>
@@ -456,7 +456,7 @@ import { Select } from '@douyinfe/semi-ui';
                 innerBottomSlot={innerSlotNode}
                 placeholder="自定义内侧底部slot，滚动至底部显示"
             >
-                <Select.Option value="abc">抖音</Select.Option>
+                <Select.Option value="douyin">抖音</Select.Option>
                 <Select.Option value="ulikecam">轻颜相机</Select.Option>
                 <Select.Option value="jianying">剪映</Select.Option>
                 <Select.Option value="duoshan">多闪</Select.Option>
@@ -496,7 +496,7 @@ import { Select } from '@douyinfe/semi-ui';
 
     const [key, setKey] = useState('component');
     const [value, setValue] = useState({ value: 'faq', label: '常见问题' });
-    const handleTabClick = itemKey => {
+    const handleTdouyinlick = itemKey => {
         setKey(itemKey);
     };
 
@@ -527,7 +527,7 @@ import { Select } from '@douyinfe/semi-ui';
             {tabOptions.map((item, index) => {
                 style = item.itemKey === key ? tabActiveStyle : tabStyle;
                 return (
-                    <div style={style} key={item.itemKey} onClick={() => handleTabClick(item.itemKey)}>
+                    <div style={style} key={item.itemKey} onClick={() => handleTdouyinlick(item.itemKey)}>
                         {item.label}
                     </div>
                 );
@@ -562,7 +562,7 @@ import { Select } from '@douyinfe/semi-ui';
     return (
         <>
             <Select value={value} style={{ width: '300px' }} onChange={setValue} placeholder="受控的Select">
-                <Select.Option value="abc">抖音</Select.Option>
+                <Select.Option value="douyin">抖音</Select.Option>
                 <Select.Option value="ulikecam">轻颜相机</Select.Option>
                 <Select.Option value="jianying">剪映</Select.Option>
                 <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -681,7 +681,7 @@ import { Select } from '@douyinfe/semi-ui';
 () => (
     <>
         <Select filter style={{ width: 180 }} placeholder="带搜索功能的单选">
-            <Select.Option value="abc">抖音</Select.Option>
+            <Select.Option value="douyin">抖音</Select.Option>
             <Select.Option value="ulikecam">轻颜相机</Select.Option>
             <Select.Option value="jianying">剪映</Select.Option>
             <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -826,8 +826,8 @@ import { Select } from '@douyinfe/semi-ui';
         return label.includes(sug);
     }
     return (
-        <Select filter={searchLabel} style={{ width: '180px' }} placeholder="try abc">
-            <Select.Option value="abc">ABC</Select.Option>
+        <Select filter={searchLabel} style={{ width: '180px' }} placeholder="try douyin">
+            <Select.Option value="douyin">douyin</Select.Option>
             <Select.Option value="ulikecam">HOTSOON</Select.Option>
             <Select.Option value="jianying">PIPIXIA</Select.Option>
             <Select.Option value="xigua">XIGUA</Select.Option>
@@ -987,7 +987,7 @@ import { Select } from '@douyinfe/semi-ui';
         dropdownStyle={{ width: 250 }}
         dropdownClassName="test"
     >
-        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="douyin">抖音</Select.Option>
         <Select.Option value="ulikecam">轻颜相机</Select.Option>
         <Select.Option value="jianying">剪映</Select.Option>
         <Select.Option value="xigua">西瓜视频</Select.Option>
@@ -1010,7 +1010,7 @@ import { Select, TextArea } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: '抖音', type: 1 },
+        { value: 'douyin', label: '抖音', type: 1 },
         { value: 'ulikecam', label: '轻颜相机', type: 2 },
         { value: 'jianying', label: '剪映', type: 3 },
         { value: 'toutiao', label: '今日头条', type: 4 },
@@ -1134,36 +1134,23 @@ virtualize 是一个包含下列值的对象：
 import React from 'react';
 import { Select } from '@douyinfe/semi-ui';
 
-class VirtualizeDemo extends React.Component {
-    constructor(props) {
-        super(props);
-        let newOptions = Array.from({ length: 3000 }, (v, i) => ({ label: `option-${i}`, value: i }));
-        this.state = {
-            optionList: newOptions,
-        };
-    }
-
-    render() {
-        let { groups, optionList } = this.state;
-        let virtualize = {
-            height: 270,
-            width: '100%',
-            itemSize: 36, // px
-        };
-        return (
-            <>
-                <Select
-                    placeholder="拥有3k个Option的Select"
-                    style={{ width: 260 }}
-                    filter
-                    onSearch={this.handleSearch}
-                    virtualize={virtualize}
-                    optionList={optionList}
-                ></Select>
-            </>
-        );
-    }
-}
+() => {
+    const newOptions = Array.from({ length: 3000 }, (v, i) => ({ label: `option-${i}`, value: i }));
+    let virtualize = {
+        height: 270,
+        width: '100%',
+        itemSize: 36, // px
+    };
+    return (
+        <Select
+            placeholder="拥有3k个Option的Select"
+            style={{ width: 260 }}
+            filter
+            virtualize={virtualize}
+            optionList={newOptions}
+        ></Select>
+    );
+};
 ```
 
 ### 自定义触发器
@@ -1188,14 +1175,13 @@ interface TriggerRenderProps {
 
 ```jsx live=true
 import React, { useState } from 'react';
-import { Select } from '@douyinfe/semi-ui';
+import { Select, Tag } from '@douyinfe/semi-ui';
 import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
 
 () => {
-    const [valList, setValList] = useState(['abc', 'ulikecam']);
-    const [val, setVal] = useState('abc');
+    const [valList, setValList] = useState(['douyin', 'ulikecam']);
     const list = [
-        { value: 'abc', label: '抖音' },
+        { value: 'douyin', label: '抖音' },
         { value: 'ulikecam', label: '轻颜相机' },
         { value: 'jianying', label: '剪映' },
         { value: 'toutiao', label: '今日头条' },
@@ -1243,28 +1229,18 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
         return (
             <div
                 style={{
-                    minWidth: '112',
-                    height: 32,
+                    margin: 4,
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    flexGrow: 1,
+                    overflow: 'hidden',
                     display: 'flex',
                     alignItems: 'center',
-                    paddingLeft: 8,
-                    borderRadius: 3,
                 }}
             >
-                <div
-                    style={{
-                        margin: 4,
-                        whiteSpace: 'nowrap',
-                        textOverflow: 'ellipsis',
-                        flexGrow: 1,
-                        overflow: 'hidden',
-                        display: 'flex',
-                        alignItems: 'center',
-                    }}
-                >
-                    {value.map(item => item.label).join(' , ')}
-                    <IconChevronDown style={{ margin: '0 8px', flexShrink: 0 }} />
-                </div>
+                <Tag size='large' color='cyan' shape='circle' suffixIcon={<IconChevronDown />}>
+                    {value.map(item => item.label).join(' / ')}
+                </Tag>
             </div>
         );
     };
@@ -1284,19 +1260,77 @@ import { IconAppCenter, IconChevronDown } from '@douyinfe/semi-icons';
             ></Select>
             <br />
             <br />
-            <h4>无边框无背景色的触发器</h4>
+            <h4>使用 circle Tag 作为触发器</h4>
             <Select
-                value={val}
-                onChange={value => setVal(value)}
+                value={valList}
+                onChange={value => setValList(value)}
                 triggerRender={triggerRender2}
                 optionList={list}
                 filter
+                multiple
                 searchPosition='dropdown'
                 style={{ width: 240, marginTop: 20, outline: 0 }}
             ></Select>
         </div>
     );
 };
+
+```
+
+下例是更复杂的例子：复用了 TagInput 拖拽排序能力，通过 triggerRender 为 Select 增加排序
+
+```jsx live=true
+import React, { useState } from 'react';
+import { Select, TagInput } from '@douyinfe/semi-ui';
+
+() => {
+    const [valList, setValList] = useState(['douyin', 'ulikecam']);
+    const [inputVal, setInputVal] = useState('');
+    const list = [
+        { value: 'douyin', label: '抖音' },
+        { value: 'ulikecam', label: '轻颜相机' },
+        { value: 'jianying', label: '剪映' },
+        { value: 'toutiao', label: '今日头条' },
+    ];
+     
+    const handleSort = (currentLabels) => {
+        const newValue = currentLabels.map(item => list.find((i) => i.label === item).value)
+        setValList(newValue);
+    };
+
+    const triggerRender = ({ value, onSearch, onClear }) => {
+        return (
+            <TagInput
+                draggable
+                allowDuplicates={false}
+                value={value.map(item => item.label)}
+                inputValue={inputVal}
+                onInputChange={(word) => {
+                    onSearch(word);
+                    setInputVal(word);
+                }}
+                onChange={handleSort}
+                onClear={() => onClear()}
+                showClear
+            />
+        );
+    }; 
+  
+    return (
+        <>
+            <h4>可对已选项拖拽重新排序的 Select </h4>
+            <Select
+                value={valList}
+                triggerRender={triggerRender}
+                optionList={list}
+                onChange={value => setValList(value)}
+                multiple
+                filter
+                style={{ width: 240 }}
+            ></Select>
+        </>
+    );
+};
 ```
 
 ### 自定义候选项渲染
@@ -1355,7 +1389,7 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: '抖音', otherKey: 0 },
+        { value: 'douyin', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },
@@ -1529,11 +1563,11 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
 
 ---
 
-| 属性      | 说明       | 类型      | 版本    |
-| --------- | ---------- | --------- | ------- |
-| className | 样式类名   | string    | v0.31.0 |
-| label     | 展示的文本 | ReactNode | v0.31.0 |
-| style     | 样式       | object    | v0.31.0 |
+| 属性      | 说明       | 类型      | 
+| --------- | ---------- | --------- | 
+| className | 样式类名   | string    | 
+| label     | 展示的文本 | ReactNode |
+| style     | 样式       | object    |
 
 ## Methods
 
@@ -1541,12 +1575,12 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
 
 | 方法        | 说明                                | 版本    |
 | ----------- | ----------------------------------- | ------- |
-| close       | 调用时可以手动关闭下拉列表          | v0.34.0 |
-| open        | 调用时可以手动展开下拉列表          | v0.34.0 |
-| focus       | 调用时可以手动聚焦                  | v1.11.0 |
-| clearInput  | 调用时可以手动清空 input 搜索框的值 | v1.18.0 |
-| deselectAll | 调用时可以手动清空所有已选项        | v1.18.0 |
-| selectAll   | 调用时可以选中所有 Option           | v1.18.0 |
+| close       | 调用时可以手动关闭下拉列表          |  |
+| open        | 调用时可以手动展开下拉列表          |  |
+| focus       | 调用时可以手动聚焦                  |  |
+| clearInput  | 调用时可以手动清空 input 搜索框的值 | |
+| deselectAll | 调用时可以手动清空所有已选项        |  |
+| selectAll   | 调用时可以选中所有 Option           |  |
 | search(value: string, event: event)| 可通过 ref 调用该方法进行搜索，该搜索值会被置给 Input   | v2.35.0 |
 
 ## Accessibility
@@ -1618,7 +1652,7 @@ import { Select, Checkbox, Highlight } from '@douyinfe/semi-ui';
             ```
               <Select placeholder='choose company by app'>
                 <Option label='vigo' value='bytedance' />
-                <Option label='abc' value='bytedance' />
+                <Option label='douyin' value='bytedance' />
               </Select>
             ```
     -   分组情况下，重复 label 并不会造成用户困惑为什么仍要求 label 必须唯一？

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 42
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 42
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 43
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 43
 category: 输入类
 title: Switch 开关
 icon: doc-switch

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 44
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 44
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 45
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 45
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 46
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 46
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 47
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 47
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 48
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 48
 category: 输入类
 title: Upload 上传
 icon: doc-upload

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 49
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 49
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 50
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 50
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 51
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 51
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 52
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 52
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 53
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 53
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 52
+order: 54
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 52
+order: 54
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 53
+order: 55
 category: Navigation
 title: Tabs
 subTitle: Tabs

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 53
+order: 55
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 56
 category: Navigation
 title:  Tree
 subTitle: Tree

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 56
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree

content/order.js

@@ -24,6 +24,8 @@ const order = [
     'chat',
     'codehighlight',
     "markdownrender",
+    "dragMove",
+    "jsonviewer",
     'hotkeys',
     "lottie",
     'autocomplete',
@@ -84,7 +86,8 @@ const order = [
     'spin',
     'toast',
     'configprovider',
-    'locale'
+    'locale',
+    'jsonviewer',
 ];
 let { exec } = require('child_process');
 let fs = require('fs');

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 85
+order: 87
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 85
+order: 87
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 86
+order: 88
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 86
+order: 88
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/plus/dragMove/index-en-US.md

@@ -0,0 +1,236 @@
+---
+localeCode: en-US
+order: 26
+category: Plus
+title:  DragMove
+icon: doc-configprovider
+dir: column
+brief: Set elements to change their position by dragging
+showNew: true
+---
+
+## When to use
+
+It is used to set the element that can be dragged to change its position. It supports limiting the drag range and customizing the elements that trigger dragging.
+
+## Demos
+
+### How to introduce
+
+DragMove supported from v2.71.0.
+
+```jsx
+import { DragMove } from '@douyinfe/semi-ui';
+```
+
+### Basic usage
+
+Elements wrapped by `DragMove` will be able to change their position by dragging.
+
+***Notice***
+
+1. DragMove will set the draggable element to absolute positioning
+2. DragMove needs to apply DOM event listeners to children. If the child element is a custom component, you need to ensure that it can pass properties to the underlying DOM element. The following types of children are supported:
+    1. Class Component, it is not mandatory to bind ref, but you need to ensure that props can be transparently transmitted to the real DOM node 
+    2. Use the functional component wrapped by forwardRef to transparently transmit props and ref to the real DOM node in children 
+    3. Real DOM nodes, such as span, div, p...  
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  return (
+    <DragMove>
+      <div 
+        style={{ backgroundColor: 'var(--semi-color-primary)',width: 80, height: 80, 
+          display: 'flex', alignItems: 'center',justifyContent: 'center', 
+          borderRadius: 10, fontWeight: 500,
+          position: 'absolute',  color: 'rgba(var(--semi-white), 1)'
+        }} 
+      >Drag me</div>
+    </DragMove>
+  );
+}
+
+```
+
+### Limit drag range
+
+Passing in `constrainer`, this function returns the elements that limit the draggable range.
+
+***Note: The elements returned by the constrainer need to be positioned relative***
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ 
+        backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        constrainer={() => containerRef.current}
+      >
+      <div 
+          style={{ backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            position: 'absolute', top: 80, left: 80,
+          }}
+        >Drag me</div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### Customize elements that trigger dragging
+
+Passing in `handler`, this function returns the element that triggered the drag. If not set, you can click anywhere to drag; if set, only the part of the element returned by the handler can be dragged.
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { IconTransparentStroked } from '@douyinfe/semi-icons';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo(){
+  const handlerRef = React.useRef();
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        handler={() => handlerRef.current}
+        constrainer={() => containerRef.current}
+      >
+        <div 
+          style={{ 
+            backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            position: 'absolute', top: 50, left: 50,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}
+        >
+          <div 
+              style={{ width: 'fit-content', height: 'fit-content' }} 
+              ref={handlerRef}
+          ><IconTransparentStroked size={'large'}/></div>
+        </div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### Customize position processing after dragging
+
+You can customize the position processing after dragging through `customMove`. After this parameter is set, the DragMove component will only return the calculated position through the parameters without setting it. The user can set the new position as needed.
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function CustomMove() {
+  const containerRef = React.useRef();
+  const elementRef = React.useRef();
+  const startPoint = React.useRef();
+
+  const customMove = useCallback((element, top, left) => {
+    if (left + 100 > containerRef.current.offsetWidth) {
+      element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px`
+      element.style.left = 'auto';
+    } else {
+      element.style.left = left + 'px';
+    } 
+    element.style.top = top + 'px';
+  }, [])
+
+  const onMouseDown = useCallback((e) => {
+    startPoint.current = {
+      x: e.clientX,
+      y: e.clientY,
+    }
+  }, []);
+
+  const onMouseUp = useCallback((e) => {
+    if (startPoint.current) {
+      const { x, y } = startPoint.current;
+      if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) {
+        if (elementRef.current.style.width === '50px') {
+          elementRef.current.style.width = '100px';
+        } else {
+          elementRef.current.style.width = '50px';
+        }
+      }
+    }
+    startPoint.current = null;
+  }, []);
+
+  return (
+    <>
+      <span>Click on the blue color block to change the width. The blue color block will not exceed the range limit before and after the change.</span>
+      <br /><br />
+      <div 
+        style={{ 
+          backgroundColor: 'rgba(var(--semi-grey-2), 1)', width: 300, height: 300, 
+          position: 'relative', padding: 10,
+          color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+        }} 
+        ref={containerRef}
+      >
+        <span>Constrainer</span>
+        <DragMove
+          constrainer={() => containerRef.current}
+          customMove={customMove}
+        >
+          <div
+            style={{ backgroundColor: 'var(--semi-color-primary)',width: 50, height: 50,
+              display: 'flex', alignItems: 'center',justifyContent: 'center',
+              position: 'absolute', top: 50, left: 50, borderRadius: 10, padding: 5
+            }}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            ref={elementRef}
+          >Drag me</div>
+        </DragMove>
+      </div> 
+    </>
+  )
+}
+
+```
+
+
+### API
+
+| Property | Description | Type | Default value |
+| --- | --- | --- | ----- |
+| allowInputDrag | Whether to allow dragging when clicking on native input/textarea | boolean | false |
+| allowMove | Determine whether dragging is allowed when clicking/touching. | (event: TouchEvent \|MouseEvent, element: ReactNode) => boolean | - |
+| constrainer | Returns the element that limits the draggable range. | () => ReactNode \| 'parent' | - |
+| customMove | Customize position processing after dragging| (element: ReactNode, top: number, left: number) => void | -|
+| handler | Returns the element that triggers dragging. | () => ReactNode | - |
+| onMouseDown | Callback when mouse is pressed | (e: MouseEvent) => void | - |
+| onMouseMove | Callback when mouse moves | (e: MouseEvent) => void | - |
+| onMouseUp | Callback when mouse is raised | (e: MouseEvent) => void | - |
+| onTouchCancel | Callback when touch cancels | (e: TouchEvent) => void | - |
+| onTouchEnd | callback when touch ends | (e: TouchEvent) => void | - |
+| onTouchMove | Callback when touch moves | (e: TouchEvent) => void | - |
+| onTouchStart | Callback when touch starts | (e: TouchEvent) => void | - |

content/plus/dragMove/index.md

@@ -0,0 +1,237 @@
+---
+localeCode: zh-CN
+order: 26
+category: Plus
+title:  DragMove 拖拽移动
+icon: doc-configprovider
+dir: column
+brief: 可通过拖拽改变位置
+showNew: true
+---
+
+## 使用场景
+
+用于设置元素可被拖动改变位置，支持限制拖拽范围，支持自定义触发拖动的元素。
+
+## 代码演示
+
+### 如何引入
+
+DragMove 从 v2.71.0 开始支持
+
+```jsx
+import { DragMove } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+被 `DragMove` 包裹的元素将能够通过拖拽改变位置。
+
+***注意***
+
+1. DragMove 会将可拖拽的元素设置为 absolute 定位
+2. DragMove 需要将 DOM 事件监听器应用到 children 中，如果子元素是自定义的组件，你需要确保它能将属性传递至底层的 DOM 元素。支持以下类型的 children：
+    1. Class Component，不强制绑定ref，但需要确保 props 可被透传至真实的 DOM 节点上
+    2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到 children 内真实的 DOM 节点上
+    3. 真实 DOM 节点, 如 span，div，p...
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  return (
+    <DragMove>
+      <div 
+        style={{ backgroundColor: 'var(--semi-color-primary)',width: 80, height: 80, 
+          display: 'flex', alignItems: 'center',justifyContent: 'center', 
+          borderRadius: 10, fontWeight: 500,
+          position: 'absolute',  color: 'rgba(var(--semi-white), 1)'
+        }} 
+      >Drag me</div>
+    </DragMove>
+  );
+}
+
+```
+
+### 限制拖动范围
+
+传入 `constrainer`, 该函数返回限制可拖拽范围的元素。
+
+***注意：constrainer 设置的元素需要为 relative 定位***
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ 
+        backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        constrainer={() => containerRef.current}
+      >
+      <div 
+          style={{ backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            position: 'absolute', top: 80, left: 80,
+          }}
+        >Drag me</div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### 自定义触发拖动的元素
+
+可通过 `handler` 自定义触发拖动的元素。如果不设置, 则点击任意位置均可拖动；如果设置，则仅点击 handler 部分可拖动。
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { IconTransparentStroked } from '@douyinfe/semi-icons';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo(){
+  const handlerRef = React.useRef();
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        handler={() => handlerRef.current}
+        constrainer={() => containerRef.current}
+      >
+        <div 
+          style={{ 
+            backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            position: 'absolute', top: 50, left: 50,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}
+        >
+          <div 
+              style={{ width: 'fit-content', height: 'fit-content' }} 
+              ref={handlerRef}
+          ><IconTransparentStroked size={'large'}/></div>
+        </div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### 自定义拖动后的位置处理
+
+可通过 `customMove` 自定义拖动后的位置处理，该参数设置后，DragMove 组件内部将仅通过参数返回计算后的位置，不做设置，用户按需自行设置新位置。
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function CustomMove() {
+  const containerRef = React.useRef();
+  const elementRef = React.useRef();
+  const startPoint = React.useRef();
+
+  const customMove = useCallback((element, top, left) => {
+    if (left + 100 > containerRef.current.offsetWidth) {
+      element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px`
+      element.style.left = 'auto';
+    } else {
+      element.style.left = left + 'px';
+    } 
+    element.style.top = top + 'px';
+  }, [])
+
+  const onMouseDown = useCallback((e) => {
+    startPoint.current = {
+      x: e.clientX,
+      y: e.clientY,
+    }
+  }, []);
+
+  const onMouseUp = useCallback((e) => {
+    if (startPoint.current) {
+      const { x, y } = startPoint.current;
+      if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) {
+        if (elementRef.current.style.width === '60px') {
+          elementRef.current.style.width = '100px';
+        } else {
+          elementRef.current.style.width = '60px';
+        }
+      }
+    }
+    startPoint.current = null;
+  }, []);
+
+  return (
+    <>
+      <span>蓝色色块点击可改变宽度，改变前后蓝色色块均不会超出范围限制 </span>
+      <br /><br />
+      <div 
+        style={{ 
+          backgroundColor: 'rgba(var(--semi-grey-2), 1)', width: 300, height: 300, 
+          position: 'relative', padding: 10,
+          color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+        }} 
+        ref={containerRef}
+      >
+        <span>Constrainer</span>
+        <DragMove
+          constrainer={() => containerRef.current}
+          customMove={customMove}
+        >
+          <div
+            style={{ backgroundColor: 'var(--semi-color-primary)',width: 60, height: 50,
+              display: 'flex', alignItems: 'center',justifyContent: 'center',
+              position: 'absolute', top: 50, left: 50, borderRadius: 10, padding: 5
+            }}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            ref={elementRef}
+          >Drag me</div>
+        </DragMove>
+      </div> 
+    </>
+  )
+}
+
+```
+
+
+
+### API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | ----- |
+| allowInputDrag | 点击原生 input/textarea 时是否允许拖动 | boolean | false |
+| allowMove | 点击/触摸时是否允许拖动的判断函数 | (event: TouchEvent \|MouseEvent, element: ReactNode) => boolean | - |
+| constrainer | 返回限制可拖拽的范围的元素 | () => ReactNode | - |
+| customMove | 自定义拖动后的位置处理| (element: ReactNode, top: number, left: number) => void | -|
+| handler | 返回触发拖动的元素 | () => ReactNode | - |
+| onMouseDown | 鼠标按下时的回调 | (e: MouseEvent) => void | - |
+| onMouseMove | 鼠标移动时的回调 | (e: MouseEvent) => void | - |
+| onMouseUp | 鼠标抬起时的回调 | (e: MouseEvent) => void | - |
+| onTouchCancel | 触摸取消时的回调 | (e: TouchEvent) => void | - |
+| onTouchEnd | 触摸结束时的回调 | (e: TouchEvent) => void | - |
+| onTouchMove | 触摸移动时的回调 | (e: TouchEvent) => void | - |
+| onTouchStart | 触摸开始时的回调 | (e: TouchEvent) => void | - |

content/plus/hotkeys/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 28
 category: Plus
 title:  HotKeys
 icon: doc-configprovider

content/plus/hotkeys/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 28
 category: Plus
 title: HotKeys 快捷键
 icon: doc-configprovider

content/plus/jsonviewer/index-en-US.md

@@ -0,0 +1,210 @@
+---
+localeCode: en-US
+order: 27
+category: Plus
+title: JsonViewer
+icon: doc-jsonviewer
+dir: column
+noInline: true
+brief: Used for displaying and editing JSON data
+showNew: true
+---
+
+## When to use
+
+The JsonViewer component can be used for the display and editing of JSON data.
+
+Semi mainly referred to the design concept of the `text-buffer` data structure of [VS Code](https://github.com/microsoft/vscode), reused some utilities and data type definitions (Token parsing, language services, etc.), and implemented the JsonViewer component in combination with our functional/style customization requirements. Visually, it will be more coordinated with other components within the Semi Design system, and it will be more convenient for customized rendering and customization of specific data types.
+
+Compared with directly using MonacoEditor, Semi JsonViewer has additional processing in engineering construction, is simpler to use, and there is no need to pay attention to complex configurations such as Webpack plugins and worker loaders. At the same time, since we only focus on the JSON data format, it is more lightweight. While being ready to use out of the box, it has a smaller size **(📦-96%)**, a more extreme loading speed **(🚀 -53.5%)**, and less memory occupation **(⬇️71.6% reduction)**. For data with five million lines and below, data loading and parsing can be completed within 1 second.
+
+Detailed comparison data can be referred to in the [Performance](#Performance) section.
+
+-   If you only need to preview/edit JSON and don't need to modify other more complex programming languages, we recommend that you choose `JsonViewer`.
+-   If you also need to handle data/code files in other formats and the full capabilities of a code editor (syntax highlighting, code completion, error prompts, complex editing, etc.) are essential and the build product size is not a key concern, we recommend that you choose `Monaco Editor`.
+
+## Demos
+
+### How to import
+
+JsonViewer supported from v2.71.0
+
+```jsx import
+import { JsonViewer } from '@douyinfe/semi-ui';
+```
+
+### Basic Usage
+
+Basic usage of JsonViewer. Pass in the `height` and `width` parameters to set the height, width and initial value of the component. Pass in the JSON string through the `value`.
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewer extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={100} width={400} value={data} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewer);
+```
+
+### Differrent lineHeight
+
+Configure the `lineHeight` parameter of `options` to set a fixed line height (unit: px, default 18).
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer, Space } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewerWithLineHeight extends React.Component {
+    render() {
+        return (
+            <div>
+                <div style={{ marginBottom: 20 }}>
+                    <JsonViewer height={100} width={320} value={data} options={{ lineHeight: 20 }} />
+                </div>
+                <div style={{ marginBottom: 20 }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 24 }} />
+                </div>
+                <div style={{ marginBottom: 20 }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 26 }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithLineHeight);
+```
+
+### Autowrap
+
+Configure the `autoWrap` parameter of `options`. When it is set to `true`, the component will automatically wrap lines according to the length of the content.
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0",
+    "description": "Semi Design is a design system that defines a set of mid_back design and front_end basic components."
+}`;
+class SimpleJsonViewerWithAutoWrap extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={120} width={800} value={data} options={{ autoWrap: true }} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithAutoWrap);
+```
+
+### Format options
+
+Configure `options.formatOptions` to set the formatting configuration of the component.
+
+-   tabSize: number，set the indent size to 4, which means each level of indentation is 4 spaces.
+-   insertSpaces: boolean，when it is true, it means using spaces for indentation, and when it is false, it means using tabs.
+-   eol: string，set the line break character, which can be `\n`，`\r\n`，
+
+```jsx live=true dir="column" noInline=true
+import React, { useRef } from 'react';
+import { JsonViewer, Button } from '@douyinfe/semi-ui';
+const data = `{
+  "name": "Semi",
+  "version": "0.0.0"
+}`;
+function FormatJsonComponent() {
+    const jsonviewerRef = useRef();
+    return (
+        <div>
+            <Button onClick={() => console.log(jsonviewerRef.current.format())}>Manual Format</Button>
+            <div style={{ marginBottom: 16, marginTop: 16 }}>
+                <JsonViewer
+                    ref={jsonviewerRef}
+                    height={100}
+                    width={400}
+                    value={data}
+                    options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } }}
+                />
+            </div>
+        </div>
+    );
+}
+
+render(FormatJsonComponent);
+```
+
+## API Reference
+
+### JsonViewer
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| value | Display content | string | - |
+| height | Height of wrapper DOM | number | - |
+| width | Width of wrapper DOM | number | - |
+| className | className of wrapper DOM | string | - |
+| style | InlineStyle of wrapper DOM | object | - |
+| options | Formatting configuration | JsonViewerOptions | - |
+| onChange | Callback for content change | (value: string) => void | - |
+
+### JsonViewerOptions
+
+| Attribute     | Description                             | Type              | Default |
+| ------------- | --------------------------------------- | ----------------- | ------- |
+| lineHeight    | Height of each line of content, unit:px | number            | 20      |
+| autoWrap      | Whether to wrap lines automatically.    | boolean           | true    |
+| formatOptions | Content format setting                  | FormattingOptions | -       |
+
+### FormattingOptions
+
+| Attribute    | Description                           | Type    | Default |
+| ------------ | ------------------------------------- | ------- | ------- |
+| tabSize      | Indent size. Unit: px                 | number  | 4       |
+| insertSpaces | Whether to use spaces for indentation | boolean | true    |
+| eol          | Line break character                  | string  | '\n'    |
+
+## Methods
+
+Methods bound to the component instance can be called via `ref` to achieve certain special interactions.
+
+| Method     | Description            |
+| ---------- | ---------------------- |
+| getValue() | Get current value      |
+| format()   | Format current content |
+
+### Performance
+
+#### Bundle Size
+
+| Libs Name    | Size      | Size (Gzip) |
+| ------------ | --------- | ----------- |
+| JsonViewer   | 203.14kb  | 51.23kb     |
+| MonacoEditor | 5102.0 KB | 1322.7 KB   |
+
+#### Time for rendering data of different magnitudes.
+
+> For details on the generation method of the test data, please refer to [URL](https://github.com/DouyinFE/semi-design/blob/main/packages/semi-ui/jsonViewer/_story/jsonViewer.stories.jsx)  
+> When the data volume exceeds 500,000 lines, ReactMonacoEditor turns off highlighting and other behaviors by default, and the data comparison does not follow the principle of a single variable.
+
+| Libs Name | 1k lines | 5k lines | 10 thousand lines | 100 thousand lines | 500 thousand lines | 1 million lines | 3 million lines |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| JsonViewer | 30.42ms | 30.66ms | 36.87ms | 52.73ms | 111.02ms | 178.81ms | 506.25ms |
+| ReactMonacoEditor | 72.01ms | 73.76ms | 76.64ms | 97.89ms | 133.31ms | 202.79ms | 495.53ms |
+| Performance improvement | 57.70% | 58.41% | 51.87% | 46.11% | - | - | - |

content/plus/jsonviewer/index.md

@@ -0,0 +1,206 @@
+---
+localeCode: zh-CN
+order: 27
+category: Plus
+title: JsonViewer Json编辑器
+icon: doc-jsonviewer
+dir: column
+noInline: true
+brief: 用于展示和编辑 JSON 数据
+showNew: true
+---
+
+## 使用场景
+JsonViewer 组件可用于 JSON 数据的展示与编辑。
+Semi 重点参考了 [VS Code](https://github.com/microsoft/vscode)的 text-buffer 数据结构设计思路，复用了部分 utils与数据类型定义（Token解析，语言服务等），结合我们的功能/样式定制需求，实现了 JsonViewer 组件, 视觉上会与 Semi Design 体系内的其他组件更协调，对于特定数据类型的定制化渲染定制会更方便。  
+相比于直接使用 MonacoEditor，Semi JsonViewer 在工程化构建上做了额外处理，使用更为简单，无需关注 Webpack插件、worker loader等复杂的配置。  
+同时由于我们仅关注 Json 数据格式，更轻量化，在开箱即用的同时，拥有更小的体积**（📦 -96%）** ，更极致的加载速度**（🚀 -53.5%）** ，更少的内存占用**（⬇️ 71.6%）**。  
+对于五百万行及以下的数据，均可以做到1s内完成数据加载与解析。
+详细的对比数据可查阅 [Performance](#Performance) 章节
+- 如果你仅需要对 Json 做预览/编辑，无需对更复杂的其他编程语言作修改，我们建议你选用 JsonViewer
+- 如果你还需要处理其他格式的数据/代码文件，完整的代码编辑器能力（语法高亮、代码不全、错误提示、复杂编辑等）是刚需，构建产物体积不是关注重点，我们建议你选用 Monaco Editor
+
+
+## 代码演示
+
+### 如何引入
+JsonViewer 从 v2.71.0 开始支持
+```jsx import
+import { JsonViewer } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+JsonViewer 的基本用法。传入 height 和 width 参数，设置组件的高度和宽度和初始值。通过 value 传入 Json 字符串
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewer extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={100} width={400} value={data} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewer);
+```
+
+### 设置行高
+
+配置 options 的 lineHeight 参数，设置固定行高（单位：px, 默认 18）。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer, Space } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewerWithLineHeight extends React.Component {
+    render() {
+        return (
+            <div>
+                <div style={{ marginBottom: 12, overflow: 'hidden' }}>
+                    <JsonViewer height={100} width={320} value={data} options={{ lineHeight: 20 }} />
+                </div>
+                <div style={{ marginBottom: 12, overflow: 'hidden' }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 24 }} />
+                </div>
+                <div style={{ marginBottom: 12, overflow: 'hidden' }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 26 }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithLineHeight);
+```
+
+### 自动换行
+
+配置 options 的 autoWrap 参数，设置为 true 时，组件会根据内容长度自动换行。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0",
+    "description": "Semi Design is a design system that defines a set of mid_back design and front_end basic components."
+}`;
+class SimpleJsonViewerWithAutoWrap extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={120} width={800} value={data} options={{ autoWrap: true }} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithAutoWrap);
+```
+
+### 格式化配置
+
+配置 options 的 formatOptions 参数，设置组件的格式化配置。
+
+-   tabSize: number，设置缩进大小为4，表示每级缩进 4 个空格
+-   insertSpaces: boolean，true 表示使用空格进行缩进，false 表示使用制表符(Tab)
+-   eol: string，设置换行符，可以是\n，\r\n，
+
+```jsx live=true dir="column" noInline=true
+import React, { useRef } from 'react';
+import { JsonViewer, Button } from '@douyinfe/semi-ui';
+const data = `{
+  "name": "Semi",
+  "version": "0.0.0"
+}`;
+function FormatJsonComponent() {
+    const jsonviewerRef = useRef();
+    return (
+        <div>
+            <Button onClick={() => console.log(jsonviewerRef.current.format())}>格式化</Button>
+            <div style={{ marginBottom: 16, marginTop: 16 }}>
+                <JsonViewer
+                    ref={jsonviewerRef}
+                    height={100}
+                    width={400}
+                    value={data}
+                    options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } }}
+                />
+            </div>
+        </div>
+    );
+}
+
+render(FormatJsonComponent);
+```
+
+
+## API 参考
+
+### JsonViewer
+
+| 属性                | 说明                                             | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|--------------|
+| value             | 展示内容                                    | string                                  | -  |
+| height            | 高度                                     | number                                  | -  |
+| width             | 宽度                                     | number                                  | -  |
+| className         | 类名                           | string                                  | -   |
+| style             | 内联样式                           | object                                  | -   |
+| options           | 格式化配置                                | JsonViewerOptions                       | -   |
+| onChange          | 内容变化回调                           | (value: string) => void                  | -   |
+
+### JsonViewerOptions
+
+| 属性                | 说明                                          | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|-----------|
+| lineHeight        | 行高                                    | number                          | 20  |
+| autoWrap        | 是否自动换行                             | boolean                            | true  |
+| formatOptions     | 格式化配置                               | FormattingOptions                |  -  |
+
+### FormattingOptions
+
+| 属性                | 说明                                          | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|-----------|
+| tabSize           | 缩进大小                                 | number                          | 4  |
+| insertSpaces      | 是否使用空格进行缩进                       | boolean                         | true  |
+| eol               | 换行符                                   | string                          | '\n'  |
+
+## Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
+
+| 名称    | 描述     |
+|---------|--------|
+| getValue()  | 获取当前值 |
+| format() | 格式化 |
+
+
+### Performance 
+#### Bundle Size 
+| 组件         | 体积      | 体积(Gzip) |
+| ------------ | --------- | ---------- |
+| JsonViewer   | 203.14kb  | 51.23kb    |
+| MonacoEditor | 5102.0 KB | 1322.7 KB  |
+
+#### 渲染不同量级数据耗时
+> 注：
+> - 测试数据生成方式详情可查阅 [url](https://github.com/DouyinFE/semi-design/blob/main/packages/semi-ui/jsonViewer/_story/jsonViewer.stories.jsx)  
+> - 当数据量级超出50w行时，ReactMonacoEditor 默认关闭高亮等行为，数据对比不遵循单一变量原则
+
+| 组件              | 1k行    | 5k行    | 1w行    | 10w行   | 50w行    | 100w行   | 300w行   |
+| ----------------- | ------- | ------- | ------- | ------- | -------- | -------- | -------- |
+| JsonViewer        | 30.42ms | 30.66ms | 36.87ms | 52.73ms | 111.02ms | 178.81ms | 506.25ms |
+| ReactMonacoEditor | 72.01ms | 73.76ms | 76.64ms | 97.89ms | 133.31ms | 202.79ms | 495.53ms |
+| 性能提升          | 57.70%  | 58.41%  | 51.87%  | 46.11%  | -        | -        | -        |

content/plus/lottie/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 29
 category: Plus
 title: Lottie Animation
 icon: doc-lottie

content/plus/lottie/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 29
 category: Plus
 title: Lottie 动画
 icon: doc-lottie

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 57
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 57
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 58
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 58
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 59
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 57
+order: 59
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 58
+order: 60
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 58
+order: 60
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 59
+order: 61
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 59
+order: 61
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 77
+order: 79
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 77
+order: 79
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 62
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 62
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 63
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 63
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 64
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 64
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions